@font-face{font-family:"Lilita One";src:url("../fonts/LilitaOne-Regular.ttf") format("truetype");font-style:normal;font-weight:400 900;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:"Trebuchet MS",sans-serif;background:#0e5580 url('../images/FondCadres1.jpg') center/cover no-repeat;color:#12366b}
[hidden]{display:none!important}

.cadre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,calc(92dvh * 1150 / 880));aspect-ratio:1150/880;background:url('../images/CadreReseauOfficiel.png') center/100% 100% no-repeat;container-type:inline-size}
.logo-ilot{display:none!important}

#accueil,#salon,#partie-existante{position:absolute;inset:0}
#accueil .intro{position:absolute;left:20%;top:25.8%;width:60%;text-align:center;z-index:5}
#accueil .intro h2{margin:0;color:#2458b4;font-size:4.6cqw;line-height:1.05;font-weight:900;text-shadow:0 .15cqw .2cqw rgba(255,255,255,.85),0 .22cqw .28cqw rgba(255,255,255,.45)}
#accueil .intro p{margin:.9cqw 0 0;color:#101010;font-size:2.55cqw;font-weight:800}

#accueil .champs,#accueil .actions{display:contents}
#accueil label{position:absolute;display:flex;flex-direction:column;gap:.55cqw;font-weight:900;color:#111;font-size:2.0cqw;z-index:5;white-space:nowrap}
#accueil .label-nom{left:27.1%;top:45.9%;width:27.2%}
#accueil .label-age{left:58.0%;top:45.9%;width:10.8%}
#accueil .label-joueurs{left:27.1%;top:58.8%;width:18.0%}

#accueil input,#accueil select{width:100%;height:3.45cqw;min-height:34px;border:.22cqw solid #d49a2f;border-radius:1.0cqw;background:#fff;color:#4a5564;padding:0 .95cqw;font:700 2.0cqw "Trebuchet MS",sans-serif;box-shadow:0 .22cqw .55cqw rgba(0,0,0,.14)}
#accueil input:focus-visible,#accueil select:focus-visible{outline:.28cqw solid #ffe600;outline-offset:.10cqw}
#accueil select{padding-right:1.2cqw}
#accueil .label-joueurs select{width:6.8cqw;max-width:100%}

.btn-ilot{--copper-1:#ffb44f;--copper-2:#d36612;--copper-3:#7c3200;--fill-top:#93ff30;--fill-mid:#27d500;--fill-bot:#08a700;position:absolute;display:flex;align-items:center;justify-content:center;padding:0 1.3cqw;height:4.75cqw;min-height:40px;border:.18cqw solid #2e1200;border-radius:999px;background:linear-gradient(180deg,var(--fill-top) 0%,var(--fill-mid) 54%,var(--fill-bot) 100%);box-shadow:0 0 0 .24cqw var(--copper-1),0 0 0 .50cqw var(--copper-2),0 0 0 .66cqw var(--copper-3),inset 0 .14cqw .14cqw rgba(255,255,255,.55),inset 0 -.22cqw .2cqw rgba(0,0,0,.34),0 .28cqw .5cqw rgba(0,0,0,.28);color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;z-index:7}
.btn-ilot::before{content:"";position:absolute;left:1.4%;right:1.4%;top:5%;height:43%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.18) 72%,rgba(255,255,255,0) 100%);pointer-events:none}
.btn-ilot::after{content:"";position:absolute;inset:.42cqw;border-radius:999px;border:.12cqw solid rgba(0,0,0,.45);pointer-events:none}
.btn-ilot .btn-text{position:relative;z-index:2;display:block;font-family:"Arial Rounded MT Bold","Arial Black",sans-serif;font-weight:900;font-size:1.48cqw;line-height:1;text-transform:uppercase;letter-spacing:.02em;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 .12cqw .14cqw rgba(0,0,0,.55);-webkit-text-stroke:.055cqw #000}
.btn-vert{--fill-top:#8eff28;--fill-mid:#25d400;--fill-bot:#07a400}
.btn-bleu{--fill-top:#45abff;--fill-mid:#0552ff;--fill-bot:#0038c8}
.btn-ilot:hover,.btn-ilot:focus-visible{box-shadow:0 0 0 .24cqw var(--copper-1),0 0 0 .50cqw var(--copper-2),0 0 0 .66cqw var(--copper-3),0 0 .8cqw rgba(255,45,0,.95),0 0 1.6cqw rgba(255,236,49,.9),inset 0 .14cqw .14cqw rgba(255,255,255,.6),inset 0 -.22cqw .2cqw rgba(0,0,0,.34),0 .28cqw .5cqw rgba(0,0,0,.28);outline:none}
.btn-ilot:active{transform:translateY(.08cqw)}
.btn-ilot:disabled{filter:saturate(.55) brightness(.9);opacity:.72}
.btn-ilot:disabled .btn-text{opacity:.9}
button.btn-ilot{border:none;cursor:pointer}
a.btn-ilot{cursor:pointer}

#accueil #creer{left:47%;top:61.6%;width:17.5%}
#accueil #rejoindre-salon{left:calc(64.5% + 20px);top:61.6%;width:22%}


#statut{position:absolute;left:22%;top:74.8%;width:56%;text-align:center;font-size:1.45cqw;color:#823000;font-weight:900;z-index:6}
#statut:not(.erreur){visibility:hidden}
#statut.erreur{background:#fff0c1;border:2px solid #af6614;border-radius:10px;padding:5px}
.cible{outline:.3cqw solid #ffe600!important;outline-offset:3px;box-shadow:0 0 12px #ffe600!important}

#choix-mobile:not([hidden]){position:absolute;left:27.5%;top:64.8%;width:45%;z-index:8;display:flex;flex-direction:column;align-items:center;gap:1cqw;padding:1cqw 1.2cqw;background:rgba(255,248,230,.94);color:#6b3400;border:2px solid #c48a31;border-radius:1.0cqw;font-size:1.8cqw}
#choix-mobile p{margin:0;font-weight:900}
#choix-mobile .btn-mobile{position:relative;width:min(35cqw,100%);height:4.7cqw;font-size:inherit}

#ed-salon{display:none!important}

#salon,#partie-existante{inset:21% 16% 15%;z-index:9;display:flex;flex-direction:column;gap:1.2cqw;align-items:center;justify-content:center;background:rgba(5,54,82,.94);border:3px solid #ffdc82;border-radius:2cqw;padding:2cqw;text-align:center;color:white;font-size:1.6cqw;overflow:auto}
h2,h3,p{margin:0}
#salon h2,#partie-existante h2{font-size:2.6cqw}
.salon-grille{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:1.5cqw;flex:1;min-height:0}
#invitation,.participants{border:2px solid #a9dce8;border-radius:1cqw;display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:1cqw;padding:1cqw;min-height:0}
#qr-rejoindre{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#qr-rejoindre svg,#qr-rejoindre canvas,#qr-rejoindre img{max-width:100%!important;max-height:22cqh!important;width:auto!important;height:auto!important;background:white;padding:4px}
#salon a{color:#fff3b5}
#salon ul{list-style:none;padding:0;margin:0;width:100%}
#salon li{background:#ffffff20;border-radius:5px;padding:4px}

#partie-existante .btn-reprise{position:relative;width:min(42cqw,92%);height:4.75cqw;margin-top:.7cqw}
#partie-existante .btn-reprise .btn-text{font-size:1.28cqw}

/* Base visuelle du salon conservée dans le cadre. */
#salon{inset:22% 18% 17%;background:transparent;border:0;border-radius:0;box-shadow:none;color:#12366b;padding:.5cqw;gap:1cqw;overflow:visible;font-size:1.7cqw;justify-content:flex-start}
#salon>h2{font-size:2.3cqw;line-height:1.15;margin:0 0 .4cqw;text-align:center;max-width:100%;overflow-wrap:anywhere}
#salon h2,#salon h3{color:#174888;text-shadow:0 1px 1px rgba(255,255,255,.9)}
#salon .salon-grille{display:grid;grid-template-columns:46% 54%;gap:1cqw;flex:1;min-height:0;width:100%;align-items:start}
#salon #invitation,#salon .participants{background:transparent;border:0;border-radius:0;box-shadow:none;color:#12366b;padding:.5cqw;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:1.0cqw;min-width:0}
#salon #invitation h3,#salon .participants h3{font-size:1.7cqw;line-height:1.2;min-height:2.1cqw}
#salon #qr-rejoindre{flex:0 0 auto;min-height:17cqw;width:100%;display:flex;align-items:center;justify-content:center;margin:.65cqw auto}
#salon #qr-rejoindre svg,#salon #qr-rejoindre canvas,#salon #qr-rejoindre img{max-width:17cqw!important;max-height:17cqw!important;width:auto!important;height:auto!important;object-fit:contain}
#salon #lien-rejoindre{display:block;margin:.25cqw auto .7cqw;font-size:1.5cqw;color:#124b99;font-weight:900}
#salon #joueurs{width:100%;max-height:12.5cqw;overflow:auto;min-height:4cqw}
#salon li{padding:.5cqw;text-align:center;font-weight:700;background:rgba(255,255,255,.65);color:#12366b}
#salon .btn-salon{position:relative;width:88%;min-height:3.6cqw;height:4.05cqw;padding:0 1cqw}
#salon .btn-salon .btn-text{font-size:1.20cqw;white-space:nowrap}
#salon .btn-salon:disabled{opacity:.55}
#salon:not([hidden])~#statut{left:25%;top:76%;width:50%;font-size:1.2cqw;z-index:10;pointer-events:none;max-height:3.5cqw;overflow:auto}

@media (max-aspect-ratio:3/4){
  .cadre{width:98vw}
  #accueil .intro h2{font-size:5.1cqw}
  #accueil .intro p{font-size:2.9cqw}
  #accueil label{font-size:2.25cqw}
  #accueil input,#accueil select{font-size:2.25cqw;height:4.2cqw}
  .btn-ilot{height:5.2cqw}
  .btn-ilot .btn-text{font-size:1.82cqw}
}

/* Curseur Star officiel sur la page réseau. */
@media (pointer:fine){html,body,body *,button,a,input,select,label,option{cursor:url("../images/Star.png") 8 8,auto!important}button:hover,a:hover,button:focus-visible,a:focus-visible{cursor:url("../images/StarClic.png") 8 8,pointer!important}}

/* Zip_566 : restauration de RETOUR, petit et au-dessus du cadre, sans contact. */
.cadre{overflow:visible}
footer{position:absolute;left:50%;top:-6.0cqw;transform:translateX(-50%);width:13.5cqw;height:3.55cqw;z-index:12}
footer .btn-retour{position:relative;width:100%;height:100%;min-height:0;padding:0 .8cqw;display:flex;align-items:center;justify-content:center}
footer .btn-retour .btn-text{font-size:1.18cqw}
/* Retour remains visible in every screen. */

/* Zip_569 : typographie officielle des seuls boutons et espacement de 20 px. */
#accueil #creer .btn-text,#accueil #rejoindre-salon .btn-text{font-size:clamp(10px,1.48cqw,22px);letter-spacing:-.015em}
#salon .participants{gap:20px}
#partie-existante{gap:20px}

/* Zip_570 : boutons principaux compacts sous les champs ; 20 px entre leurs boîtes. */
#accueil #creer,#accueil #rejoindre-salon{height:3.65cqw;min-height:29px;padding:0 .55cqw}
#accueil #creer .btn-text,#accueil #rejoindre-salon .btn-text{font-size:clamp(9px,1.24cqw,17px);letter-spacing:-.025em}

/* Zip_572 : ONLY typography of the buttons. White lettering sits directly on the
   button gradient: no intermediate coloured backing, glow or blurred text shadow. */
.btn-ilot .btn-text{background:transparent!important;background-image:none!important;box-shadow:none!important;text-shadow:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:.065cqw #111;font-family:"Arial Black","Arial Rounded MT Bold",sans-serif;font-weight:900;letter-spacing:-.045em;font-stretch:expanded;max-width:100%;white-space:nowrap}
#accueil #creer .btn-text,#accueil #rejoindre-salon .btn-text{font-size:clamp(9px,1.15cqw,16px);letter-spacing:-.055em;transform:scaleX(1.08)}
#salon .btn-salon .btn-text{transform:scaleX(1.04);letter-spacing:-.045em}


/* Zip_573 : boutons repris sur le modèle utilisateur, sans icône. */
.btn-ilot{
  border:none!important;
  border-radius:999px!important;
  padding:0 .95cqw!important;
  background:linear-gradient(180deg,var(--fill-top) 0%,var(--fill-mid) 56%,var(--fill-bot) 100%)!important;
  box-shadow:
    0 0 0 .10cqw #1a0900,
    0 0 0 .30cqw #f0a24a,
    0 0 0 .54cqw #b9520d,
    0 0 0 .70cqw #6f2800,
    inset 0 .14cqw .16cqw rgba(255,255,255,.65),
    inset 0 -.18cqw .18cqw rgba(0,0,0,.32),
    0 .24cqw .45cqw rgba(0,0,0,.25)!important;
}
.btn-ilot::before{
  left:2.1%!important;
  right:2.1%!important;
  top:7%!important;
  height:34%!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.24) 62%,rgba(255,255,255,0) 100%)!important;
}
.btn-ilot::after{
  inset:.34cqw!important;
  border-radius:999px!important;
  border:.10cqw solid rgba(18,7,0,.92)!important;
}
.btn-ilot .btn-text{
  background:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  -webkit-text-stroke:.07cqw #111!important;
  font-family:Impact, Haettenschweiler, "Arial Black", sans-serif!important;
  font-weight:900!important;
  letter-spacing:-.05em!important;
  line-height:.98!important;
  text-shadow:
    -1px -1px 0 #111,
     1px -1px 0 #111,
    -1px  1px 0 #111,
     1px  1px 0 #111!important;
  transform:scaleX(1.12)!important;
}
#accueil #creer .btn-text,
#accueil #rejoindre-salon .btn-text{
  font-size:clamp(9px,1.16cqw,16px)!important;
}
#choix-mobile .btn-mobile .btn-text,
#partie-existante .btn-reprise .btn-text,
footer .btn-retour .btn-text{
  transform:scaleX(1.08)!important;
}
#salon .btn-salon .btn-text{
  font-size:1.16cqw!important;
  transform:scaleX(1.06)!important;
}

/* Zip_574 — correct only the three reported issues. */
/* Both main buttons form one aligned row directly to the right of the selector. */
#accueil #creer,#accueil #rejoindre-salon{
 top:61.6%;height:3.65cqw;min-height:29px;
 width:calc((40% - 20px)/2);padding:0 .32cqw!important;
}
#accueil #creer{left:46%;}
#accueil #rejoindre-salon{left:calc(46% + (40% - 20px)/2 + 20px);}
#accueil #creer .btn-text,#accueil #rejoindre-salon .btn-text{
 font-size:clamp(9px,1.08cqw,15px)!important;letter-spacing:-.055em!important;
 transform:none!important;white-space:nowrap;
}
/* The separate, small Retour sits fully above the frame with a visible gap. */
footer{display:block!important;top:-6.5cqw;left:50%;width:13.5cqw;height:3.45cqw;transform:translateX(-50%);z-index:30;}
footer .btn-retour{min-height:0!important;width:100%;height:100%;}
footer .btn-retour .btn-text{font-size:1.18cqw!important;transform:none!important;}


/* Zip_576 : only replace the typography of the buttons from the user model, without touching layout. */
.btn-ilot .btn-text{
  font-family:"Cooper Black","Arial Rounded MT Bold","Arial Black",sans-serif!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
  line-height:1!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  -webkit-text-stroke:.06cqw #111!important;
  text-shadow:
    -.03cqw -.03cqw 0 #111,
     .03cqw -.03cqw 0 #111,
    -.03cqw  .03cqw 0 #111,
     .03cqw  .03cqw 0 #111!important;
  transform:scaleX(1.02)!important;
  text-transform:uppercase!important;
}
#accueil #creer .btn-text,
#accueil #rejoindre-salon .btn-text,
#choix-mobile .btn-mobile .btn-text,
#partie-existante .btn-reprise .btn-text,
footer .btn-retour .btn-text,
#salon .btn-salon .btn-text{
  transform:scaleX(1.02)!important;
}

/* Zip_577 : seule la typographie des boutons change. Police épaisse/arrondie du modèle, sans modifier la page. */
.btn-ilot .btn-text {
 font-family:"Lilita One","Arial Black",sans-serif!important;
 font-weight:400!important;
 font-style:normal!important;
 letter-spacing:0!important;
 color:#fff!important;
 -webkit-text-fill-color:#fff!important;
 -webkit-text-stroke:.075cqw #080808!important;
 paint-order:stroke fill;
 text-shadow:0 .10cqw 0 #080808!important;
 transform:none!important;
 background:transparent!important;
}


/* Zip_579 — exclusivement +40 % sur la taille du texte des boutons Lilita One. */
.btn-ilot .btn-text{font-size:2.072cqw!important}
#accueil #creer .btn-text,#accueil #rejoindre-salon .btn-text{font-size:clamp(12.6px,1.512cqw,21px)!important}
#salon .btn-salon .btn-text{font-size:1.624cqw!important}
#partie-existante .btn-reprise .btn-text{font-size:1.792cqw!important}
footer .btn-retour .btn-text{font-size:1.652cqw!important}
@media (max-aspect-ratio:3/4){.btn-ilot .btn-text{font-size:2.548cqw!important}}

/* Zip_580 — uniquement lisibilité des libellés des boutons : +10 % par rapport à Zip_579.
   Vert : ivoire très clair et trait vert sapin foncé ; bleu : blanc pur et trait marine. */
.btn-ilot .btn-text{font-size:2.2792cqw!important;text-shadow:none!important;paint-order:stroke fill!important}
#accueil #creer .btn-text,#accueil #rejoindre-salon .btn-text{font-size:clamp(13.86px,1.6632cqw,23.1px)!important}
#salon .btn-salon .btn-text{font-size:1.7864cqw!important}
#partie-existante .btn-reprise .btn-text{font-size:1.9712cqw!important}
footer .btn-retour .btn-text{font-size:1.8172cqw!important}
@media (max-aspect-ratio:3/4){.btn-ilot .btn-text{font-size:2.8028cqw!important}}
.btn-ilot.btn-vert .btn-text{color:#fffbea!important;-webkit-text-fill-color:#fffbea!important;-webkit-text-stroke:.105cqw #123f0a!important}
.btn-ilot.btn-bleu .btn-text{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;-webkit-text-stroke:.105cqw #071d59!important}

/* Zip_581 : exclusivement les couleurs du lettrage Lilita One. */
.btn-ilot.btn-vert .btn-text{color:#FFE36B!important;-webkit-text-fill-color:#FFE36B!important;-webkit-text-stroke:.105cqw #080808!important}
.btn-ilot.btn-bleu .btn-text{color:#FFE8A3!important;-webkit-text-fill-color:#FFE8A3!important;-webkit-text-stroke:.105cqw #080808!important}

/* Zip_582 : uniquement les deux couleurs demandées ; autres boutons inchangés. */
#accueil #creer .btn-text{color:#000000!important;-webkit-text-fill-color:#000000!important;-webkit-text-stroke:.05cqw #000000!important}
#accueil #rejoindre-salon .btn-text{color:#071D59!important;-webkit-text-fill-color:#071D59!important;-webkit-text-stroke:.05cqw #071D59!important}

/* Zip_583 : seulement les deux libellés principaux redeviennent blancs. */
#accueil #creer .btn-text,
#accueil #rejoindre-salon .btn-text{
 color:#ffffff!important;
 -webkit-text-fill-color:#ffffff!important;
 -webkit-text-stroke:.105cqw #080808!important;
}

/* Zip_584 : casse des deux libellés demandés uniquement. */
#accueil #creer .btn-text, #accueil #rejoindre-salon .btn-text{text-transform:none!important}

/* Zip_585 : +10 % uniquement sur les deux textes principaux (Zip_584 : 13.86 / 1.6632 / 23.1). */
#accueil #creer .btn-text,#accueil #rejoindre-salon .btn-text{font-size:clamp(15.246px,1.82952cqw,25.41px)!important}

/* Zip_587 : Retour centré dans le cadre, bord inférieur à 5 px du bas, sans autre changement. */
/* Zip_588 : le bois inférieur commence vers 89.5% de la hauteur de l’image officielle. Le bord extérieur cuivré reste à 5 px au-dessus du bois. */
.cadre footer{top:auto!important;bottom:calc(10.5% + 5px + .70cqw)!important;left:50%!important;transform:translateX(-50%)!important;}