/* Jeu concours.
   La planète et le drapeau sont des images ; elles ne sont demandées au serveur
   qu'à l'ouverture de la scène, parce que les éléments qui les portent
   n'existent pas avant le clic. Seule la pièce de la pastille est chargée
   d'entrée, et encore : après les autres fenêtres du site.
   La fusée et l'explosion restent dessinées en CSS. */

:root{
  --hdkn-jeu-fond:#0E0821;
  --hdkn-jeu-violet:#7E62E0;
  --hdkn-jeu-clair:#F4F1FF;
  --hdkn-jeu-accent:#C4B5FD;
  --hdkn-jeu-menthe:#7DE2C3;
}

/* ---------- la pastille d'appel ---------- */
.hdkn-jeu-pastille{
  position:fixed; right:18px; bottom:18px; z-index:9998;
  width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(167,139,250,.5);
  background:rgba(11,6,26,.72);
  backdrop-filter:blur(10px) saturate(1.5);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  opacity:0; transform:translateY(10px) scale(.9);
  transition:opacity .35s ease, transform .35s ease;
}
.hdkn-jeu-pastille.est-visible{opacity:1; transform:none}
.hdkn-jeu-pastille:hover{border-color:var(--hdkn-jeu-accent)}
.hdkn-jeu-pastille__piece{
  width:46px; height:46px;
  background:url(img/piece.webp) center/contain no-repeat;
}
.hdkn-jeu-pastille__halo{
  position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(167,139,250,.35);
  animation:hdkn-jeu-pulse 2.6s ease-out infinite;
}
@keyframes hdkn-jeu-pulse{
  0%{transform:scale(.9); opacity:.9}
  100%{transform:scale(1.35); opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hdkn-jeu-pastille__halo{animation:none}
  .hdkn-jeu-pastille__piece{background-image:url(img/piece-plate-96.png)}
}

/* 🔴 Le kit graphique habille tous les <button> du site (dégradé, retrait,
   coins). Les trois boutons du jeu repartent donc de zéro. */
html body button.hdkn-jeu-pastille,
html body button.hdkn-jeu-fermer{
  -webkit-appearance:none; appearance:none;
  min-width:0; min-height:0; margin:0; padding:0;
  background-image:none; text-transform:none; letter-spacing:normal;
}
/* 🔴 Constaté sur K-Laxie le 18 septembre 2026 : le kit impose aussi
   display:block et width:auto à tous les boutons. La pastille faisait 2 px de
   large (donc invisible) et la croix 12 px. Les dimensions et le mode
   d'affichage sont donc verrouillés ici, en !important. */
html body button.hdkn-jeu-pastille{
  display:flex!important; width:64px!important; height:64px!important;
  min-width:64px!important; max-width:none!important; padding:0!important;
  background-color:rgba(11,6,26,.72)!important; background-image:none!important;
  border-radius:50%!important; line-height:1!important;
}
html body button.hdkn-jeu-fermer{
  display:block!important; width:42px!important; height:42px!important;
  min-width:42px!important; max-width:none!important; padding:0!important;
  background-color:rgba(11,6,26,.6)!important; background-image:none!important;
  border-radius:50%!important; line-height:1!important;
}
html body .hdkn-jeu-voile button.hdkn-jeu-bouton{
  display:inline-block!important; width:auto!important; min-width:0!important; max-width:100%!important;
}

/* ---------- la scène ---------- */
.hdkn-jeu-voile{
  position:fixed; inset:0; z-index:99999;
  background:rgba(4,2,12,.86);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;              /* voir la note rAF dans jeu.js */
  transition:opacity .3s ease;
}
.hdkn-jeu-voile.est-ouvert{opacity:1; pointer-events:auto}

.hdkn-jeu-scene{
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center;
  color:var(--hdkn-jeu-clair);
  font-family:inherit; text-align:center;
  background:radial-gradient(120% 80% at 50% 110%, rgba(126,98,224,.18), rgba(10,6,24,0) 60%), #0B0618;
  transform:scale(.96); opacity:0;
  transition:transform .45s cubic-bezier(.2,.9,.3,1), opacity .35s ease;
}
.hdkn-jeu-voile.est-ouvert .hdkn-jeu-scene{transform:none; opacity:1}
/* Sur ordinateur, le jeu n'occupe pas tout l'écran : une fenêtre à 85 %, et le
   voile assombri comble le reste. En téléphone il reste plein écran. */
@media (min-width:1024px){
  .hdkn-jeu-scene{
    width:min(85vw,1560px); height:85vh; max-height:1000px;
    border-radius:26px; overflow:hidden;
    border:1px solid rgba(167,139,250,.28);
    box-shadow:0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset, 0 30px 90px -50px rgba(126,98,224,.6);
  }
  .hdkn-jeu-fermer{top:18px; right:18px}
}

.hdkn-jeu-fermer{
  position:absolute; top:16px; right:16px; z-index:60;
  width:42px; height:42px;
  border:1px solid rgba(167,139,250,.4);
  color:var(--hdkn-jeu-clair); font-size:22px; line-height:1; cursor:pointer;
}

.hdkn-jeu-entete{position:relative; z-index:50; margin:min(5vh,48px) 64px 0; max-width:640px}
.hdkn-jeu-surtitre{
  color:var(--hdkn-jeu-menthe); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 6px;
}
.hdkn-jeu-titre{font-size:clamp(22px,4vw,34px); margin:0 0 8px; font-style:italic; color:var(--hdkn-jeu-clair)}
.hdkn-jeu-intro{font-size:15px; opacity:.85; margin:0}

/* le plateau : la planète, puis les drapeaux par-dessus, en calques frères.
   Leurs positions sont calculées par poserDrapeaux(), en pixels. */
.hdkn-jeu-plateau{
  position:relative; flex:1 1 auto; width:100%; min-height:0;
  overflow:hidden;
}
.hdkn-jeu-planete{
  position:absolute; left:50%; transform:translateX(-50%) translateY(6%);
  background:url(img/planete-1540.webp) center top/100% auto no-repeat;
  pointer-events:none;
  opacity:0;
  transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.hdkn-jeu-voile.est-pret .hdkn-jeu-planete{opacity:1; transform:translateX(-50%)}
.hdkn-jeu-drapeaux{position:absolute; inset:0; pointer-events:none}
/* Le sol se perd dans l'ombre avant le pied de la scène : sans ce fondu, la
   planète s'arrête sur une coupe nette au bord du plateau. */
.hdkn-jeu-plateau::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:22%; z-index:30;
  background:linear-gradient(180deg,rgba(6,3,16,0),#060310 92%);
  pointer-events:none;
}

.hdkn-jeu-drapeau{
  position:absolute;
  background:url(img/drapeau.webp) left top/100% 100% no-repeat;
  filter:drop-shadow(0 0 5px rgba(167,139,250,.55));
  transform-origin:9% 100%;
  transition:opacity .45s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .45s ease;
  opacity:0;
  animation:hdkn-jeu-vent 4.2s ease-in-out var(--hdkn-jeu-retard,0ms) infinite alternate;
}
/* Chaque drapeau surgit de sa hampe, à quelques dizaines de ms du précédent.
   « backwards » et pas « both » : une fois planté, l'animation rend la main,
   sinon elle gagnerait sur le transform inline du drapeau gagnant. */
.hdkn-jeu-voile.est-pret .hdkn-jeu-drapeau{
  opacity:1;
  animation:hdkn-jeu-surgir .5s cubic-bezier(.2,1.5,.4,1) var(--hdkn-jeu-entree,700ms) backwards,
            hdkn-jeu-vent 4.2s ease-in-out var(--hdkn-jeu-retard,0ms) infinite alternate;
}
@keyframes hdkn-jeu-surgir{
  from{opacity:0; transform:scale(.2) translateY(30px)}
  to{opacity:1; transform:none}
}
@keyframes hdkn-jeu-vent{
  from{rotate:-1.6deg} to{rotate:1.6deg}
}
/* La toile occupe le haut de l'image : le libellé s'y pose en HTML. */
.hdkn-jeu-drapeau__toile{
  position:absolute; left:16%; top:15%; width:66%; height:54%;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(3.5deg);
}
.hdkn-jeu-drapeau__toile span{
  display:block; max-height:100%; overflow:hidden;
  font-weight:700; line-height:1.12; letter-spacing:.01em;
  color:var(--hdkn-jeu-clair);
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  text-wrap:balance; overflow-wrap:break-word; hyphens:none;   /* pas de « Livrai-son » */
}
.hdkn-jeu-voile.est-pret .hdkn-jeu-drapeau--perdant{opacity:0; transform:scale(.6); animation:none}
.hdkn-jeu-voile.est-pret .hdkn-jeu-drapeau--gagnant{
  animation:none; transform-origin:0 0;
  filter:drop-shadow(0 0 14px rgba(125,226,195,.85));
}
@media (prefers-reduced-motion:reduce){
  .hdkn-jeu-drapeau{animation:none; transition:opacity .2s ease}
}

/* la fusée et l'explosion.
   L'image a le nez en haut ; jeu.js la place, la tourne du cap de sa trajectoire
   et l'anime (Web Animations). La flamme sort de la tuyère, donc du bas de
   l'image, et tourne avec elle. */
.hdkn-jeu-fusee{
  position:absolute; left:0; top:0; z-index:45; opacity:0;
  pointer-events:none; will-change:transform;
}
.hdkn-jeu-fusee__corps{
  position:absolute; inset:0;
  background:url(img/fusee.webp) center/contain no-repeat;
}
.hdkn-jeu-fusee__flamme{
  position:absolute; left:50%; top:78%; width:30%; height:74%;   /* naît dans la tuyère : le corps (dessiné après) couvre sa base */
  transform:translateX(-50%); transform-origin:50% 0;
  border-radius:40% 40% 50% 50% / 12% 12% 88% 88%;
  background:linear-gradient(180deg,#fff 0,#FDE68A 14%,#FDBA74 38%,rgba(249,115,22,.55) 66%,rgba(249,115,22,0) 100%);
  filter:blur(1.5px);
  animation:hdkn-jeu-flamme .12s ease-in-out infinite alternate;
}
@keyframes hdkn-jeu-flamme{
  from{transform:translateX(-50%) scaleY(.82) scaleX(.92)}
  to{transform:translateX(-50%) scaleY(1.12) scaleX(1.06)}
}
.hdkn-jeu-explosion{
  position:absolute; left:50%; top:50%; z-index:46;
  transform:translate(-50%,-50%) scale(0);
  width:min(62vw,340px); aspect-ratio:1/1; border-radius:50%;   /* à l'échelle d'un drapeau, pas de la scène */
  background:radial-gradient(circle,#fff 0 12%, var(--hdkn-jeu-accent) 22%, rgba(126,98,224,.5) 45%, transparent 70%);
  opacity:0; pointer-events:none;
}
.hdkn-jeu-explosion.est-visible{animation:hdkn-jeu-boum .8s ease-out forwards}
@keyframes hdkn-jeu-boum{
  0%{opacity:1; transform:translate(-50%,-50%) scale(0)}
  55%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.25)}
}

/* le pied : bouton, résultat, règlement */
.hdkn-jeu-pied{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%) translateY(18px);
  z-index:50; width:100%; max-width:640px;
  padding:10px 16px min(4vh,30px);
  opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,1.2,.3,1);
}
.hdkn-jeu-voile.est-installe .hdkn-jeu-pied{opacity:1; transform:translateX(-50%); pointer-events:auto}

/* Le bouton : dégradé, lueur qui respire, reflet qui balaie, et un léger
   soulèvement au survol. Même habillage pour « Récupérer mon cadeau ». */
html body .hdkn-jeu-voile button.hdkn-jeu-bouton{
  position:relative; display:inline-block; overflow:hidden; border:0; cursor:pointer;
  padding:17px 44px; border-radius:999px;
  background:linear-gradient(135deg,#9D85F0 0%,var(--hdkn-jeu-violet) 45%,#4C2FB8 100%);
  color:#fff; font-size:17px; font-weight:700; letter-spacing:.05em; text-transform:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 18px 40px -14px rgba(126,98,224,1), 0 0 40px -6px rgba(126,98,224,.55);
  transition:transform .18s ease, box-shadow .25s ease, filter .2s ease;
  animation:hdkn-jeu-respire 2.6s ease-in-out infinite;
}
html body .hdkn-jeu-voile button.hdkn-jeu-bouton::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-30%; width:34%;
  background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0));
  transform:skewX(-18deg); animation:hdkn-jeu-reflet 3.2s ease-in-out infinite;
}
html body .hdkn-jeu-voile button.hdkn-jeu-bouton:hover{transform:translateY(-2px) scale(1.03); filter:brightness(1.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 24px 48px -14px rgba(126,98,224,1), 0 0 56px -4px rgba(126,98,224,.7)}
html body .hdkn-jeu-voile button.hdkn-jeu-bouton:active{transform:translateY(0) scale(.98)}
html body .hdkn-jeu-voile button.hdkn-jeu-bouton[disabled]{opacity:.55; cursor:default; animation:none; transform:none; filter:grayscale(1); box-shadow:none}
html body .hdkn-jeu-voile button.hdkn-jeu-bouton[disabled]::after{animation:none; opacity:0}
.hdkn-jeu-bouton__texte{position:relative; z-index:1}
@keyframes hdkn-jeu-respire{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 18px 40px -14px rgba(126,98,224,1), 0 0 34px -8px rgba(126,98,224,.45)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset, 0 20px 44px -14px rgba(126,98,224,1), 0 0 60px -4px rgba(167,139,250,.75)}
}
@keyframes hdkn-jeu-reflet{
  0%,55%{left:-40%} 100%{left:140%}
}
/* Jeu ouvert : la page dessous ne défile plus (voir bloquerDefilement dans jeu.js). */
html.hdkn-jeu-ouvert, html.hdkn-jeu-ouvert body{overflow:hidden!important; overscroll-behavior:none; touch-action:none}
html.hdkn-jeu-ouvert .hdkn-jeu-voile{touch-action:none}

/* Le kit force display:block sur les boutons : un style en ligne ne suffit pas à le cacher. */
html body .hdkn-jeu-voile button.hdkn-jeu-bouton.est-cache{display:none!important}
@media (prefers-reduced-motion:reduce){
  html body .hdkn-jeu-voile button.hdkn-jeu-bouton{animation:none}
  html body .hdkn-jeu-voile button.hdkn-jeu-bouton::after{display:none}
  .hdkn-jeu-planete,.hdkn-jeu-pied,.hdkn-jeu-scene{transition:none}
  .hdkn-jeu-voile.est-pret .hdkn-jeu-drapeau{animation:none}
}
.hdkn-jeu-etat{margin:12px 0 0; font-size:15px; min-height:22px; text-shadow:0 1px 8px rgba(6,3,16,.9)}
.hdkn-jeu-etat--bien{color:var(--hdkn-jeu-menthe)}
.hdkn-jeu-etat--mal{color:#FCA5A5}
.hdkn-jeu-code{
  display:block; width:max-content; max-width:100%; margin:10px auto 0; padding:10px 16px;
  border:1px dashed rgba(167,139,250,.6); border-radius:10px;
  font-size:18px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hdkn-jeu-clair);
}
.hdkn-jeu-legal{margin:12px 0 0; font-size:12px; opacity:.6}
.hdkn-jeu-legal a{color:inherit}

.hdkn-jeu-lien{
  display:block; width:max-content; max-width:100%; margin:10px auto 0;
  color:var(--hdkn-jeu-accent); font-size:14px; text-decoration:underline;
}

/* le rappel sur Mon compte */
.hdkn-jeu-rappel{
  margin:0 0 20px; padding:16px 18px; border-radius:12px;
  border:1px solid rgba(167,139,250,.35); background:rgba(126,98,224,.08);
}
.hdkn-jeu-rappel p{margin:0}
.hdkn-jeu-rappel p + p{margin-top:8px}
.hdkn-jeu-rappel a{color:var(--hdkn-jeu-accent); text-decoration:underline}
.hdkn-jeu-rappel .hdkn-jeu-code{display:inline-block; margin:0 0 0 6px; padding:4px 10px; font-size:14px}
.hdkn-jeu-rappel__etat{margin-left:10px; font-size:14px}

/* ---------- téléphone ---------- */
@media (max-width:767px){
  .hdkn-jeu-pastille{right:12px; bottom:calc(12px + env(safe-area-inset-bottom))}
  html body button.hdkn-jeu-pastille{width:58px!important; height:58px!important; min-width:58px!important}
  .hdkn-jeu-pastille__piece{width:42px; height:42px}
  .hdkn-jeu-entete{margin:min(3vh,22px) 60px 0}
  .hdkn-jeu-intro{font-size:14px}
  .hdkn-jeu-planete{background-image:url(img/planete-900.webp)}
  .hdkn-jeu-pied{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  html body .hdkn-jeu-voile button.hdkn-jeu-bouton{padding:15px 36px; font-size:16px}
  .hdkn-jeu-etat{font-size:14px}
}

/* ---------- 2.9.4 : l'e-mail sous le gain d'un invité ---------- */
.hdkn-jeu-email{margin:12px auto 0; max-width:460px; text-align:center; color:var(--hdkn-jeu-clair)}
.hdkn-jeu-email__label{display:block; margin:0 0 8px; font-size:15px; line-height:1.35; text-shadow:0 1px 8px rgba(6,3,16,.9)}
.hdkn-jeu-email__ligne{display:flex; gap:8px; align-items:stretch}
/* 16 px au moins : en dessous, iOS zoome sur le champ à la saisie. */
html body .hdkn-jeu-voile input.hdkn-jeu-email__champ{
  flex:1 1 auto; min-width:0; width:auto!important; height:50px!important; margin:0!important;
  padding:0 16px!important; border-radius:999px!important; font-size:16px!important;
  border:1px solid rgba(196,181,253,.55)!important; background:rgba(14,8,33,.82)!important;
  color:var(--hdkn-jeu-clair)!important; box-shadow:none!important; outline:none;
}
html body .hdkn-jeu-voile input.hdkn-jeu-email__champ:focus{border-color:var(--hdkn-jeu-menthe)!important; box-shadow:0 0 0 3px rgba(125,226,195,.25)!important}
html body .hdkn-jeu-voile input.hdkn-jeu-email__champ::placeholder{color:rgba(244,241,255,.45)}
html body .hdkn-jeu-voile button.hdkn-jeu-email__ok{
  display:inline-flex!important; align-items:center; justify-content:center; flex:0 0 auto;
  width:auto!important; height:50px!important; margin:0!important; padding:0 20px!important;
  border:0!important; border-radius:999px!important; cursor:pointer;
  background:linear-gradient(135deg,#9D85F0 0%,var(--hdkn-jeu-violet) 45%,#4C2FB8 100%)!important;
  color:#fff!important; font-size:15px!important; font-weight:700; line-height:1; white-space:nowrap;
}
html body .hdkn-jeu-voile button.hdkn-jeu-email__ok[disabled]{opacity:.6; cursor:default}
.hdkn-jeu-email__erreur{margin:6px 0 0; min-height:0; font-size:14px; color:#FCA5A5}
.hdkn-jeu-email__erreur:empty{display:none}
.hdkn-jeu-email__passer{display:inline-block; margin:10px 0 0; font-size:14px; color:var(--hdkn-jeu-accent); text-decoration:underline}
.hdkn-jeu-email--fait p{margin:0 0 6px; font-size:15px; line-height:1.4; color:var(--hdkn-jeu-menthe); text-shadow:0 1px 8px rgba(6,3,16,.9)}
.hdkn-jeu-email--fait b{color:var(--hdkn-jeu-clair); word-break:break-all}
html body .hdkn-jeu-voile button.hdkn-jeu-email__modifier{
  display:inline!important; width:auto!important; margin:0 0 12px!important; padding:4px!important;
  background:none!important; border:0!important; box-shadow:none!important;
  color:var(--hdkn-jeu-accent)!important; font-size:13px!important; text-decoration:underline; cursor:pointer;
}

/* ---------- 2.9.4 : le bandeau « votre cadeau vous attend » ---------- */
.hdkn-jeu-bandeau{
  position:fixed; z-index:99990; left:50%; bottom:calc(16px + env(safe-area-inset-bottom));
  width:min(560px, calc(100% - 24px)); transform:translate(-50%,140%); opacity:0;
  display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px;
  border-radius:18px; border:1px solid rgba(196,181,253,.45);
  background:rgba(14,8,33,.94); color:var(--hdkn-jeu-clair);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.8), 0 0 36px -10px rgba(126,98,224,.8);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .45s cubic-bezier(.2,1.2,.3,1), opacity .3s ease;
}
.hdkn-jeu-bandeau.est-visible{transform:translate(-50%,0); opacity:1}
body.klx-buybar-on .hdkn-jeu-bandeau{bottom:calc(92px + env(safe-area-inset-bottom))}
.hdkn-jeu-bandeau__piece{flex:0 0 40px; width:40px; height:40px; background:url(img/piece-48.webp) center/contain no-repeat}
.hdkn-jeu-bandeau__texte{flex:1 1 auto; min-width:0; font-size:13px; line-height:1.35}
.hdkn-jeu-bandeau__texte strong{display:block; font-size:14px; color:var(--hdkn-jeu-menthe); margin-bottom:2px}
.hdkn-jeu-bandeau__texte span{display:block; opacity:.9}
html body a.hdkn-jeu-bandeau__bouton{
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border-radius:999px; background:linear-gradient(135deg,#9D85F0 0%,var(--hdkn-jeu-violet) 45%,#4C2FB8 100%);
  color:#fff!important; font-size:14px; font-weight:700; text-decoration:none!important; white-space:nowrap;
}
html body button.hdkn-jeu-bandeau__fermer{
  flex:0 0 32px; display:inline-flex!important; align-items:center; justify-content:center;
  width:32px!important; height:32px!important; min-width:32px!important; margin:0!important; padding:0!important;
  border:0!important; border-radius:50%!important; background:rgba(255,255,255,.08)!important;
  color:var(--hdkn-jeu-clair)!important; font-size:20px!important; line-height:1; cursor:pointer; box-shadow:none!important;
}
@media (prefers-reduced-motion:reduce){ .hdkn-jeu-bandeau{transition:none} }

@media (max-width:767px){
  .hdkn-jeu-email__label{font-size:14px}
  /* Pendant la saisie, le pied remonte au-dessus du clavier. */
  .hdkn-jeu-voile.est-saisie .hdkn-jeu-pied{bottom:auto; top:max(64px,8vh); padding-bottom:16px}
  .hdkn-jeu-voile.est-saisie .hdkn-jeu-entete{opacity:0; pointer-events:none}
  .hdkn-jeu-voile.est-saisie .hdkn-jeu-drapeaux,
  .hdkn-jeu-voile.est-saisie .hdkn-jeu-legal{opacity:.15; transition:opacity .2s}
  /* Sur un petit écran, le bouton du bandeau passe sous le texte. */
  .hdkn-jeu-bandeau{flex-wrap:wrap; padding:12px}
  .hdkn-jeu-bandeau__texte{flex-basis:calc(100% - 96px)}
  html body a.hdkn-jeu-bandeau__bouton{order:4; flex:1 1 100%; justify-content:center}
  html body button.hdkn-jeu-bandeau__fermer{order:3}
}
@media (max-width:360px){
  .hdkn-jeu-email__ligne{flex-direction:column}
  html body .hdkn-jeu-voile button.hdkn-jeu-email__ok{width:100%!important}
}
.hdkn-jeu-email,.hdkn-jeu-email *,.hdkn-jeu-bandeau,.hdkn-jeu-bandeau *{box-sizing:border-box}