/* =====================================================================
   LES JEUX DU CAMP : page d'accueil commune aux trois jeux.
   Même langage que les menus « carnet illustré » : papier chaud avec un
   grain fixe, trait d'encre brun, ombres décalées, boutons autocollants.
   Tout a une taille fixe : rien ne bouge quand un texte change.
   ===================================================================== */
:root{
  --night:#14213a; --moss:#22395a;
  --ink:#493526; --ink-dk:#2e2016;
  --paper:#E7D7B3; --paper2:#dcc99e; --paper-lt:#fbf1d6; --cream:#fff8e2;
  --ochre:#f6b84a; --teal:#4d7f78; --rust:#c45e45; --moss2:#6f8f4a;
  --brown:#a67c4e; --slate:#6a88a5; --t2:#896F4B; --off:#C8B99A;
  --font-display:'Lilita One','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
  --carte-w:300px;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--font-body);line-height:1.4;
  padding:24px max(12px,env(safe-area-inset-right,0px)) 32px max(12px,env(safe-area-inset-left,0px));
  display:flex;justify-content:center;align-items:flex-start}
#fond{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
button,input{font:inherit}
button{color:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}

/* ---- la feuille de papier ---- */
.sheet{position:relative;z-index:1;width:min(1060px,100%);
  background:var(--grain),linear-gradient(170deg,rgba(231,215,179,.96),rgba(220,201,158,.96));
  background-blend-mode:multiply,normal;
  border:2.5px solid var(--ink);border-radius:14px 18px 15px 19px/18px 14px 19px 15px;
  box-shadow:5px 6px 0 rgba(30,18,8,.55),inset 0 0 0 5px rgba(255,248,226,.35),inset 0 0 40px rgba(120,80,30,.18);
  padding:22px 28px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t2);font-weight:700}
h1,h2{font-family:var(--font-display);font-weight:400;margin:0;letter-spacing:.01em}
h1{font-size:clamp(34px,6vw,54px);line-height:1;color:#c07a30;text-shadow:2px 3px 0 rgba(73,53,38,.4);-webkit-text-stroke:1.6px var(--ink);paint-order:stroke fill}
h2{font-size:24px;color:#a9631f;text-shadow:1.5px 2px 0 rgba(255,248,226,.6);-webkit-text-stroke:.8px var(--ink);paint-order:stroke fill}

/* ---- en-tête + prénom (hauteur fixe) ---- */
.tete{display:grid;gap:6px;justify-items:center;text-align:center}
.salut{position:relative;height:72px;width:100%;display:grid;justify-items:center;align-content:start;gap:6px;margin-top:6px}
.salutTxt{font-size:18px;height:26px;line-height:26px;display:flex;align-items:center;gap:6px;max-width:100%}
.salutTxt b{color:#8a4318;font-family:var(--font-display);font-size:22px;letter-spacing:.02em;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salutAide{font-size:12px;color:var(--t2);height:18px;line-height:18px}
.nomForm{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:end;flex-wrap:nowrap;
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;border:2px solid var(--ink);
  border-radius:10px 12px 9px 13px/12px 9px 13px 10px;box-shadow:3px 4px 0 rgba(30,18,8,.5);padding:8px 10px;z-index:5;white-space:nowrap}
.field{display:grid;gap:3px;font-size:12px;color:var(--t2);text-align:left}
.field input{width:190px;height:34px}
input{background:rgba(255,252,240,.9);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:5px 9px;height:36px}
input::placeholder{color:#a08a68}

/* ---- boutons autocollants ---- */
.big,.mid,.ghost{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;
  border:2.5px solid var(--ink);padding:8px 18px;line-height:1.1;white-space:nowrap;user-select:none}
.big{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:.02em;background:linear-gradient(180deg,#f9c867,#f1a63a);color:#3a1a08;
  border-radius:13px 15px 12px 16px/15px 12px 16px 13px;box-shadow:3px 4px 0 var(--ink);text-shadow:0 1px 0 rgba(255,248,226,.6);height:46px;min-width:150px}
.mid{background:var(--brown);color:#fffaf0;border-radius:12px 14px 11px 15px/14px 11px 15px 12px;box-shadow:3px 4px 0 var(--ink);height:40px}
.ghost{background:rgba(255,248,226,.55);color:var(--ink);border-width:2px;border-radius:10px 12px 9px 13px/12px 9px 13px 10px;box-shadow:2px 3px 0 rgba(30,18,8,.55);height:40px}
.ghost.small{height:34px;padding:4px 12px;font-size:13px}
.ghost:hover{background:rgba(255,236,170,.8)}
.big:hover,.mid:hover{filter:brightness(.95)}
.big:active,.mid:active,.ghost:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.ghost[aria-expanded="true"]{background:#ffe3a0;box-shadow:3px 4px 0 var(--ink)}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;
  background:rgba(255,248,226,.65);border:1.5px solid var(--ink);color:#5a4128;white-space:nowrap}

/* ---- les trois fiches ---- */
.jeux{display:grid;grid-template-columns:repeat(auto-fit,var(--carte-w));gap:22px;justify-content:center}
.jeu{position:relative;width:var(--carte-w);height:440px;display:grid;grid-template-rows:160px 28px 34px 76px 28px 46px;gap:8px;align-content:start;
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;color:var(--ink);
  border:2.5px solid var(--ink);border-radius:12px 15px 11px 16px/15px 11px 16px 12px;box-shadow:3px 5px 0 rgba(30,18,8,.6);padding:0 0 12px;overflow:visible;
  transition:transform .15s,box-shadow .15s}
.jeu:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:4px 8px 0 rgba(30,18,8,.55)}
.jeu:nth-child(2):hover{transform:translateY(-3px) rotate(.4deg)}
.scene{display:block;width:100%;height:160px;object-fit:cover;border-radius:10px 13px 0 0/13px 10px 0 0;border-bottom:2.5px solid var(--ink);background:#1c2744}
.badge{height:28px;margin:-14px 12px 0 auto;padding:0 12px;display:inline-flex;align-items:center;justify-self:end;max-width:calc(100% - 24px);
  font-size:12px;font-weight:700;letter-spacing:.03em;color:#fff2bd;background:var(--teal);border:2px solid var(--ink);border-radius:9px 11px 8px 12px/11px 8px 12px 9px;
  box-shadow:2px 3px 0 var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;visibility:hidden;transform:rotate(-2deg)}
.badge.on{visibility:visible}
.jeu h2{padding:0 16px;height:34px;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jeu p{margin:0;padding:0 16px;font-size:14px;line-height:19px;height:76px;overflow:hidden;color:#3a2a1a;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.jeu .chips{padding:0 16px;display:flex;gap:6px;height:28px;align-items:center;overflow:hidden}
.jeu .actions{padding:0 16px;display:flex;gap:8px;align-items:center;justify-content:space-between;height:46px}
.codeForm{position:absolute;left:12px;right:12px;bottom:-26px;display:flex;gap:8px;align-items:center;justify-content:center;z-index:4;
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;border:2px solid var(--ink);
  border-radius:10px 12px 9px 13px/12px 9px 13px 10px;box-shadow:3px 4px 0 rgba(30,18,8,.5);padding:8px 10px}
.codeForm::before{content:'';position:absolute;top:-8px;right:28px;width:14px;height:14px;background:var(--paper-lt);border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}
.codeForm .code{width:120px;height:40px;text-align:center;font-family:var(--font-display);font-size:22px;letter-spacing:.18em;text-transform:uppercase}
.codeForm .mid{height:40px;padding:0 14px}

/* ---- camps ouverts (hauteur fixe) ---- */
.camps{position:relative;display:grid;gap:8px;height:258px;padding:12px 16px 14px;
  background:rgba(255,248,226,.38);border:2px solid var(--ink);border-radius:12px 15px 11px 16px/15px 11px 16px 12px;box-shadow:2px 3px 0 rgba(30,18,8,.4)}
.campsTete{display:flex;justify-content:space-between;align-items:end;gap:12px;height:48px}
.campsTete h2{height:30px;line-height:30px}
.campsEtat{font-size:12px;color:var(--t2);height:18px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.campsListe{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(4,40px);gap:4px;height:172px;overflow:hidden}
.campsListe li{height:40px;display:grid;grid-template-columns:72px 1fr auto auto;gap:10px;align-items:center;padding:0 6px 0 4px;
  background:rgba(255,248,226,.6);border:1.5px solid rgba(73,53,38,.5);border-radius:9px}
.campsListe .cCode{font-family:var(--font-display);font-size:19px;letter-spacing:.12em;color:#8a4318}
.campsListe .cHote{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.campsListe .cHote small{color:var(--t2);font-size:12px}
.campsListe .cEtat{font-size:12px;color:var(--t2);white-space:nowrap;width:150px;text-align:right;overflow:hidden;text-overflow:ellipsis}
.campsListe .cGo{height:30px;padding:0 12px;font-size:13px;min-width:150px}
.campsVide{position:absolute;left:16px;right:16px;top:68px;height:172px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px;
  color:var(--t2);font-size:14px;line-height:1.4;border:2px dashed rgba(73,53,38,.4);border-radius:10px}
.camps.pleins .campsVide{visibility:hidden}

.pied{text-align:center;font-size:12px;color:var(--t2);height:18px;line-height:18px}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;max-width:min(92vw,520px);
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;color:var(--ink);border:2.5px solid var(--ink);
  border-radius:12px 14px 11px 15px/14px 11px 15px 12px;box-shadow:3px 4px 0 var(--ink);padding:10px 18px;font-weight:700;text-align:center}

/* quatre jeux : deux rangées de deux (aucune fiche seule sur sa ligne) */

/* ---- téléphone ---- */
@media (max-width:700px){
  body{padding:12px 8px 24px}
  .sheet{padding:16px 14px 14px;gap:14px}
  .jeux{grid-template-columns:var(--carte-w)}
  .campsListe li{grid-template-columns:64px 1fr auto}
  .campsListe .cEtat{display:none}
  .campsTete{height:40px;align-items:center}
  .campsTete .kicker{display:none}
  .campsTete h2{white-space:nowrap;font-size:22px}
  .campsEtat{max-width:45%}
  .campsVide{top:60px}
}

/* ---- la récré : un petit bandeau (hauteur fixe) ; les mini-jeux s'ouvrent en menu par-dessus la page ---- */
.recre{position:relative;min-width:0;display:grid;grid-template-columns:220px minmax(0,1fr) 190px;gap:16px;align-items:center;height:160px;padding:12px 16px;
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;
  border:2.5px solid var(--ink);border-radius:12px 15px 11px 16px/15px 11px 16px 12px;box-shadow:3px 5px 0 rgba(30,18,8,.6)}
.recre .scene{width:220px;height:117px;border-radius:10px 12px 9px 13px/12px 9px 13px 10px;border:2.5px solid var(--ink);background:#7fa86a}
.recreTxt{position:relative;display:grid;grid-template-rows:16px 28px 38px 40px;gap:2px;min-width:0}
.recreTxt .kicker{height:16px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recreTxt h2{height:28px;line-height:28px;font-size:22px;color:#2f6b62}
.recreTxt p{margin:0;font-size:13px;line-height:19px;height:38px;overflow:hidden;color:#3a2a1a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recreTxt .actions{display:flex;gap:10px;align-items:center;height:40px}
.recreTxt .big{height:38px;font-size:18px;min-width:170px;background:linear-gradient(180deg,#6aa59b,#4d7f78);color:#fffaf0;text-shadow:0 1px 0 rgba(30,18,8,.5)}
.recreTxt .codeForm{left:0;right:auto;width:300px;top:100%;bottom:auto;margin-top:6px}
.recreTxt .codeForm::before{left:200px;right:auto}
/* les trois fanions : trois boutons, un menu s'ouvre au clic */
.mjBar{display:grid;grid-template-rows:repeat(3,34px);gap:7px;min-width:0}
.mjTab{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;min-width:0;font:inherit;font-weight:700;font-size:14px;color:var(--ink);
  background:rgba(255,248,226,.7);border:2px solid var(--ink);border-radius:10px 12px 9px 13px/12px 9px 13px 10px;box-shadow:2px 3px 0 rgba(30,18,8,.5);text-align:left}
.mjTab:hover{background:rgba(255,236,170,.9)}
.mjTab[aria-expanded="true"]{background:#ffe3a0;box-shadow:3px 4px 0 var(--ink)}
.mjTab .mjNom{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mjTab .mjN{font-size:12px;color:var(--t2)}
.mjTab .mjCaret{font-size:11px;transition:transform .15s}
.mjTab[aria-expanded="true"] .mjCaret{transform:rotate(180deg)}
.mjFanion{width:12px;height:20px;position:relative;flex:none}
.mjFanion::before{content:'';position:absolute;left:1px;top:0;width:2px;height:20px;background:var(--ink)}
.mjFanion::after{content:'';position:absolute;left:3px;top:1px;width:0;height:0;border-left:10px solid var(--fanion);border-top:5px solid transparent;border-bottom:5px solid transparent;filter:drop-shadow(1px 0 0 var(--ink))}
/* le menu des mini-jeux flotte par-dessus la page : il ne pousse rien */
.mjPop{position:absolute;z-index:30;top:calc(100% + 8px);right:0;width:min(640px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:30px;gap:6px;padding:12px;
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;border:2.5px solid var(--ink);border-radius:12px 15px 11px 16px/15px 11px 16px 12px;box-shadow:4px 6px 0 rgba(30,18,8,.6)}
.mjPop[hidden]{display:none}
.mj{display:flex;align-items:center;height:30px;padding:0 8px;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(255,252,240,.9);border:1.5px solid var(--ink);
  border-left:5px solid var(--fanion);border-radius:7px 9px 6px 10px/9px 6px 10px 7px;box-shadow:1.5px 2px 0 rgba(30,18,8,.45)}
.mj:hover{background:#ffe3a0}
.mj:active{transform:translate(1px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.campsListe li.cRecre{background:rgba(214,234,226,.75);border-color:rgba(47,107,98,.6)}
.campsListe li.cRecre .cCode{color:#2f6b62}

@media (max-width:860px){
  .recre{grid-template-columns:minmax(0,1fr) 170px}
  .recre .scene{display:none}
}
@media (max-width:700px){
  .recre{grid-template-columns:minmax(0,1fr);height:auto;gap:10px;padding:12px}
  .recreTxt{grid-template-rows:16px 28px 57px 40px}
  .recreTxt p{height:57px;-webkit-line-clamp:3}
  .recreTxt .big{min-width:0;flex:1}
  .recreTxt .codeForm{width:auto;left:0;right:0}
  .mjBar{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mjTab{padding:0 4px;gap:3px;font-size:11.5px;justify-content:center}.mjTab .mjN,.mjTab .mjCaret,.mjTab .mjFanion{display:none}.mjTab .mjNom{flex:none;overflow:visible}
  .mjPop{left:0;right:0;width:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.jeu{transition:none}}

/* =====================================================================
   REFONTE « ACCUEILLANTE ET COMPACTE » : les titres et boutons du Feu de Camp
   (Lilita One orange cerné de brun foncé, boutons autocollants dorés), et tout tient
   sur un seul écran : quatre fiches en rangée, récré en bandeau, camps sur deux colonnes.
   ===================================================================== */
:root{--brun:#5a2a0e;--flamme:#f39a35;--braise:#e2761f}
.sheet{padding:16px 22px 12px;gap:14px}
h1,h2{color:var(--flamme);-webkit-text-stroke:2px var(--brun);paint-order:stroke fill;text-shadow:0 3px 0 var(--brun);letter-spacing:.015em}
h1{font-size:clamp(34px,5vw,46px);line-height:1}
h2{font-size:23px}
.kicker{font-weight:700;color:#7a5a36}
.big{border-color:var(--brun);background:linear-gradient(180deg,#ffc15a,var(--braise));color:#3a1606;box-shadow:0 4px 0 var(--brun);text-shadow:0 1px 0 rgba(255,236,190,.55);font-size:21px}
.big:active{transform:translateY(2px);box-shadow:0 2px 0 var(--brun)}
.mid{background:#a67c4e;border-color:var(--brun);box-shadow:0 4px 0 var(--brun);font-family:var(--font-display);font-weight:400;font-size:17px;letter-spacing:.02em}
.mid:active{transform:translateY(2px);box-shadow:0 2px 0 var(--brun)}
.ghost{border-color:var(--brun);box-shadow:0 3px 0 var(--brun);font-weight:700}
.chip{height:22px;padding:0 8px;font-size:11px;border-color:var(--brun);background:rgba(255,232,170,.7);color:#4a2c12}

/* en-tête : le titre à gauche, le salut à droite */
.tete{grid-template-columns:minmax(0,1fr) auto;justify-items:start;text-align:left;align-items:center;gap:0 18px}
.tete .kicker{grid-column:1}
.tete h1{grid-column:1}
.salut{grid-column:2;grid-row:1/3;height:60px;width:auto;justify-items:end;margin:0;align-content:center;gap:4px}
.salutTxt{font-size:17px;font-weight:700;height:28px;line-height:28px}
.salutTxt b{font-size:25px;color:#c4601a;text-shadow:0 2px 0 rgba(90,42,14,.35);max-width:240px}
.salutAide{display:none}
.nomForm{left:auto;right:0;transform:none;top:34px}

/* quatre fiches en rangée */
.jeux{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;justify-content:stretch}
.jeu{width:auto;height:322px;grid-template-rows:112px 26px 30px 54px 24px 42px;gap:6px;padding-bottom:10px;border-color:var(--brun);box-shadow:0 5px 0 var(--brun)}
.jeu:hover{box-shadow:0 7px 0 var(--brun)}
.scene{height:112px;border-bottom-color:var(--brun)}
.badge{height:24px;margin:-12px 10px 0 auto;font-size:11px;padding:0 9px;border-color:var(--brun);box-shadow:0 2px 0 var(--brun)}
.jeu h2{height:30px;line-height:30px;padding:0 12px;font-size:21px}
.jeu p{height:54px;padding:0 12px;font-size:13px;line-height:18px;font-weight:700;color:#3a2410;-webkit-line-clamp:3}
.jeu .chips{padding:0 12px;gap:5px;height:24px}
.jeu .actions{padding:0 12px;height:42px}
.jeu .big{min-width:0;height:40px;padding:6px 18px;font-size:20px}
.jeu .ghost.small{height:30px;padding:3px 9px;font-size:12px}
.codeForm{border-color:var(--brun);box-shadow:0 4px 0 var(--brun);left:8px;right:8px;bottom:-30px}
.codeForm .code{width:92px;height:38px;font-size:20px}
.codeForm .mid{padding:0 10px;height:38px}

/* la récré : bandeau bas */
.recre{height:136px;grid-template-columns:168px minmax(0,1fr) 190px;gap:16px;padding:10px 14px;border-color:var(--brun);box-shadow:0 5px 0 var(--brun)}
.recre .scene{width:168px;height:112px;border-color:var(--brun)}
.recreTxt{grid-template-rows:14px 28px 36px 38px;gap:1px}
.recreTxt .kicker{height:14px;line-height:14px;font-size:11px}
.recreTxt h2{font-size:24px;color:#6fbfae}
.recreTxt p{font-weight:700;color:#3a2410;line-height:18px;height:36px}
.recreTxt .big{height:36px;font-size:18px;background:linear-gradient(180deg,#7cc7b6,#4d9a8c);color:#10302a;text-shadow:0 1px 0 rgba(220,255,245,.5);border-color:#1f4a42;box-shadow:0 4px 0 #1f4a42}
.recreTxt .actions{height:38px}
.mjBar{grid-template-rows:repeat(3,32px);gap:7px}
.mjTab{height:32px;font-family:var(--font-display);font-weight:400;font-size:16px;letter-spacing:.02em;border-color:var(--brun);box-shadow:0 3px 0 var(--brun)}
.mjPop{border-color:var(--brun);box-shadow:0 5px 0 var(--brun)}
.mj{border-color:var(--brun)}

/* camps ouverts : deux colonnes, hauteur fixe */
.camps{height:auto;padding:10px 14px 12px;gap:6px;border-color:var(--brun);box-shadow:0 4px 0 var(--brun)}
.campsTete{height:34px;align-items:center}
.campsTete>div{display:flex;align-items:baseline;gap:12px}
.campsTete h2{height:28px;line-height:28px;font-size:21px}
.campsTete .kicker{font-size:11px}
.campsListe{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,38px);height:80px;gap:4px 10px}
.campsListe li{height:38px;grid-template-columns:62px minmax(0,1fr) auto auto}
.campsListe .cEtat{width:96px}
.campsListe .cGo{min-width:84px;height:28px}
.campsVide{top:54px;height:80px;left:14px;right:14px;font-weight:700}
.pied{height:16px;line-height:16px}

@media (max-width:1000px){
  .jeux{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jeu{height:340px;grid-template-rows:130px 26px 30px 54px 24px 42px}.scene{height:130px}
}
@media (max-width:860px){
  .recre{grid-template-columns:minmax(0,1fr) 170px}
}
@media (max-width:700px){
  .sheet{padding:14px 12px 12px;gap:12px}
  .tete{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .tete .kicker,.tete h1{grid-column:1}
  .salut{grid-column:1;grid-row:auto;justify-items:center;margin-top:6px;height:64px}
  .nomForm{left:50%;right:auto;transform:translateX(-50%);top:0}
  .jeux{grid-template-columns:minmax(0,1fr);gap:12px}
  .jeu{height:322px;grid-template-rows:112px 26px 30px 54px 24px 42px}.scene{height:112px}
  .recre{height:auto}
  .campsListe{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,38px);height:164px}
  .campsListe li{grid-template-columns:62px minmax(0,1fr) auto}
  .campsListe .cEtat{display:none}
  .campsVide{height:164px}
}

/* ajustements : pastille en surimpression (plus de rangée vide), titres entiers, texte sur 4 lignes */
.jeu{height:304px;grid-template-rows:112px 30px 72px 24px 42px}
.badge{position:absolute;top:100px;right:10px;margin:0;max-width:calc(100% - 20px)}
.jeu h2{font-size:19px;-webkit-text-stroke:1.6px var(--brun)}
.jeu p{height:72px;-webkit-line-clamp:4}
.recre{height:146px}
.recre .scene{height:122px}
.recreTxt{grid-template-rows:14px 32px 36px 38px}
.recreTxt h2{height:32px;line-height:32px}
.campsListe{grid-template-rows:repeat(2,34px);height:72px}
.campsListe li{height:34px}
.campsVide{top:50px;height:72px}
@media (max-width:1000px){ .jeu{height:322px;grid-template-rows:130px 30px 72px 24px 42px}.badge{top:118px} }
@media (max-width:700px){
  .jeu{height:304px;grid-template-rows:112px 30px 72px 24px 42px}.badge{top:100px}
  .recre{grid-template-columns:minmax(0,1fr);height:auto;gap:10px}
  .recreTxt{grid-template-rows:14px 32px 54px 38px}
  .recreTxt p{height:54px;-webkit-line-clamp:3}
  .campsListe{grid-template-rows:repeat(4,34px);height:148px}
  .campsVide{height:148px}
}
.chip{padding:0 7px;font-size:10.5px}.jeu .chips{gap:4px}
@media (max-width:700px){
  .mjBar{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .mjTab{font-size:14px;padding:0 2px}
  .chip{padding:0 9px;font-size:11px}
}

/* =====================================================================
   RETOUCHES : titres bruns sobres, bouton Jouer qui ne dépasse plus,
   récré en violet, « Rejoindre » en vert forêt (celui du Feu de Camp)
   ===================================================================== */
:root{--violet:#7b57a3;--violet-clair:#b996d6;--foret:#4d7f78}
/* titres : brun foncé, sans contour ni orange (les boutons gardent leur look) */
h1,h2,.recreTxt h2{color:var(--brun);-webkit-text-stroke:0;paint-order:normal;text-shadow:0 1px 0 rgba(255,244,214,.75);letter-spacing:.01em}
/* fiches : un peu plus hautes pour que « Jouer » (et son ombre) reste dans le cadre */
.jeu{height:318px}
@media (max-width:1000px){ .jeu{height:336px} }
@media (max-width:700px){ .jeu{height:318px} }
/* la récré : plus de petite ligne au-dessus du titre, bouton violet */
.recreTxt{grid-template-rows:32px 36px 38px;gap:3px;align-content:center}
.recreTxt .big{background:linear-gradient(180deg,var(--violet-clair),var(--violet));color:#fff;text-shadow:0 1px 0 rgba(40,20,70,.5);border-color:var(--brun);box-shadow:0 4px 0 var(--brun)}
.recreTxt .big:active{box-shadow:0 2px 0 var(--brun)}
@media (max-width:700px){ .recreTxt{grid-template-rows:32px 54px 38px} }
/* « Rejoindre » : vert forêt du Feu de Camp */
.jeu .ghost.small[data-code-ouvre],.recre .ghost.small[data-code-ouvre],.codeForm .mid{background:var(--foret);color:#fffaf0;border-color:var(--brun);text-shadow:0 1px 0 rgba(30,18,8,.45)}
.jeu .ghost.small[data-code-ouvre]:hover,.recre .ghost.small[data-code-ouvre]:hover,.codeForm .mid:hover{filter:brightness(1.08)}

/* les fiches de jeux ne bougent plus au survol (seuls les boutons réagissent) */
.jeu,.jeu:hover,.jeu:nth-child(2):hover{transform:none;box-shadow:0 5px 0 var(--brun);transition:none}

/* =====================================================================
   CHARTE v2 : palette scoute (voir charte.css). Bandeau vert avec la bande
   « foulard », un ruban de couleur par jeu, la récré en gris-violet.
   Les dimensions ne changent pas : seules les couleurs et les habillages.
   ===================================================================== */
:root{--brun:#5b3a24}
/* bandeau d'en-tête */
.tete{background:var(--grain),linear-gradient(180deg,#3F8350,var(--c-vert) 55%,#255c35);background-blend-mode:multiply,normal;
  border:2.5px solid var(--c-ink);border-radius:12px 15px 11px 16px/15px 11px 16px 12px;box-shadow:0 4px 0 var(--c-ink);
  padding:9px 18px 10px;position:relative}
.tete .kicker{color:#EBD9AE}
h1{color:var(--c-creme);-webkit-text-stroke:2px var(--c-ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--c-ink);letter-spacing:.015em}
.salutTxt{color:var(--c-creme);font-weight:700}
.salutTxt b{color:var(--c-or);-webkit-text-stroke:1.2px var(--c-ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--c-ink)}
/* les rubans */
h2{-webkit-text-stroke:0}
.jeu h2,.recreTxt h2,.campsTete h2,.copTete h2{background:linear-gradient(180deg,var(--accent-clair),var(--accent));color:var(--c-creme);
  border:2.5px solid var(--c-ink);-webkit-text-stroke:1.5px var(--c-ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--c-ink)}
.jeu h2{border-left:0;border-right:0;border-radius:0;height:32px;line-height:27px;font-size:20px;padding:0 12px;letter-spacing:.02em}
.scene{border-bottom:0!important}
.jeu{--rub:1}
.badge{top:82px;background:var(--c-creme);color:var(--accent);border:2px solid var(--c-ink);box-shadow:0 2px 0 var(--c-ink);font-weight:800}
.jeu{grid-template-rows:112px 32px 70px 24px 42px}
.jeu p{height:70px}
/* pastilles : terre */
.chip{background:rgba(194,166,130,.42);border:1.5px solid var(--c-brun);color:#4a2c12}
/* « Rejoindre » : vert forêt */
.jeu .ghost.small[data-code-ouvre],.recre .ghost.small[data-code-ouvre],.codeForm .mid{background:linear-gradient(180deg,#3F8350,var(--c-vert));color:var(--c-creme);border-color:var(--c-ink);text-shadow:0 1px 0 rgba(20,40,20,.6)}
/* la récré */
.recreTxt h2{display:inline-block;justify-self:start;width:auto;height:30px;line-height:25px;padding:0 16px;border-radius:9px 12px 8px 13px/12px 8px 13px 9px;box-shadow:0 3px 0 var(--c-ink);font-size:21px}
.recreTxt .big{background:linear-gradient(180deg,var(--accent-clair),var(--accent));color:var(--c-creme);border-color:var(--c-ink);box-shadow:0 4px 0 var(--c-ink);text-shadow:0 1px 0 rgba(40,35,60,.55)}
.recreTxt .big:active{box-shadow:0 2px 0 var(--c-ink)}
/* camps ouverts */
.campsTete>div{align-items:center}
.campsTete h2,.copTete h2{display:inline-block;width:auto;height:28px;line-height:23px;padding:0 14px;border-radius:8px 10px 7px 11px/10px 7px 11px 8px;box-shadow:0 3px 0 var(--c-ink);font-size:19px}
.campsVide{border-color:var(--c-brun);color:#5b3a24}
@media (max-width:1000px){ .jeu{grid-template-rows:130px 32px 70px 24px 42px} .badge{top:100px} }
@media (max-width:700px){ .jeu{grid-template-rows:112px 32px 70px 24px 42px} .badge{top:82px} .tete{padding:9px 12px 17px} }
/* surpiqûre sur les rubans, et état des camps qui ne déborde plus */
.jeu h2{position:relative}
.campsEtat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campsTete>div:first-child{flex:none}

/* surpiqûre en pointillés sur les rubans des cartes (on la garde) */
.jeu h2::before{content:"";position:absolute;left:8px;right:8px;top:3px;bottom:3px;border-top:1.5px dashed rgba(255,244,214,.5);border-bottom:1.5px dashed rgba(255,244,214,.5);pointer-events:none}

/* Place sous la feuille pour voir le feu de camp du fond */
body{padding-bottom:130px!important}

/* ---- Le Local : un bandeau (hauteur fixe), la page est dans local/ ---- */
.localB{position:relative;min-width:0;display:grid;grid-template-columns:168px minmax(0,1fr) 200px;gap:16px;align-items:center;height:136px;padding:10px 14px;
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;border:2.5px solid var(--brun);border-radius:12px 15px 11px 16px/15px 11px 16px 12px;box-shadow:0 5px 0 var(--brun)}
.localCv{width:168px;height:112px;border-radius:10px 12px 9px 13px/12px 9px 13px 10px;border:2.5px solid var(--brun);background:#1d2c4a;display:block;object-fit:cover}
.localTxt{display:grid;grid-template-rows:32px 36px;gap:4px;min-width:0;align-content:center}
.localTxt .kicker{height:14px;line-height:14px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.localTxt h2{height:32px;line-height:32px;font-size:24px;color:#d8794f}
.localTxt p{margin:0;font-size:13px;font-weight:700;color:#3a2410;line-height:18px;height:36px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.localAct{display:grid;gap:8px;justify-items:stretch}
.localN{height:20px;line-height:20px;font-size:12px;font-weight:700;color:var(--t2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.localAct .big{height:38px;font-size:18px;background:linear-gradient(180deg,#C4474D,#A8272D);color:#fff4d6;text-shadow:0 1px 0 rgba(30,18,8,.5)}
@media (max-width:860px){ .localB{grid-template-columns:minmax(0,1fr) 180px} .localCv{display:none} }
@media (max-width:700px){ .localB{grid-template-columns:minmax(0,1fr);height:auto;gap:8px;padding:12px} .localTxt p{height:auto;-webkit-line-clamp:3} }

/* ---- Mon scout : le bouton à côté du prénom, et sa fenêtre ---- */
.salutBtns{display:flex;gap:8px;justify-content:inherit}
.scoutVoile{position:fixed;inset:0;z-index:80;background:rgba(10,14,28,.62);display:grid;place-items:center;padding:14px}
.scoutVoile[hidden]{display:none}
.scoutFen{width:min(820px,100%);height:min(560px,100%);display:grid;grid-template-rows:44px minmax(0,1fr);gap:8px;padding:12px 16px 14px;
  background:var(--grain),linear-gradient(170deg,#efe1bf,#dcc99e);background-blend-mode:multiply,normal;border:2.5px solid var(--ink);border-radius:14px 18px 15px 19px/18px 14px 19px 15px;box-shadow:5px 6px 0 rgba(0,0,0,.55)}
.scoutTete{display:flex;align-items:center;gap:12px}
.scoutTete h2{font-size:26px;line-height:44px}
.scoutAide{flex:1;font-size:12px;font-weight:700;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scoutFen iframe{width:100%;height:100%;border:0;background:transparent}
@media (max-width:620px){ .scoutAide{display:none} .scoutFen{height:100%} }

/* ---- Les copains : liste d'amis (fenetre.moi), code d'ami, changer d'appareil ; taille fixe ---- */
.copains{position:relative;display:grid;grid-template-rows:34px auto;gap:6px;padding:10px 14px 12px;
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;border:2.5px solid var(--brun);border-radius:12px 15px 11px 16px/15px 11px 16px 12px;box-shadow:0 4px 0 var(--brun)}
.copTete{display:flex;align-items:baseline;gap:12px;height:34px}
.copTete h2{height:28px;line-height:28px;font-size:21px;padding:0 12px}
.copTete .kicker{font-size:11px}
.copGrille{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;height:120px}
.copAmis{position:relative;min-width:0;height:120px;overflow-y:auto}
.copListe{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:34px;gap:4px}
.copListe li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;height:34px;padding:0 6px 0 10px;border:1.5px solid var(--brun);border-radius:8px;background:rgba(255,252,240,.85);font-size:13px}
.copListe li b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copListe li small{color:var(--t2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.copListe li.enLigne{background:#e2f0d8;border-color:var(--c-vert)}
.copListe .ghost.small,.copListe .mid{height:26px;padding:0 9px;font-size:12px}
.copVide{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 10px;font-size:13px;color:var(--t2);font-weight:700}
.copCote{display:grid;grid-template-rows:34px 34px 34px 14px;gap:4px;min-width:0}
.copLigne{display:flex;align-items:center;gap:6px;min-width:0;height:34px;margin:0}
.copLigne>span{font-size:12px;font-weight:700;color:var(--t2);white-space:nowrap}
.copLigne b{font-family:var(--font-display);font-weight:400;font-size:17px;letter-spacing:.06em;color:#8a4318;white-space:nowrap}
.copLigne input{height:30px;min-width:0;flex:1;font-size:13px;padding:3px 8px}
.copLigne .ghost.small,.copLigne .mid{height:30px;padding:0 10px;font-size:12px}
.copAppareil .ghost.small{flex:none}
.copMsg{height:14px;line-height:14px;font-size:11.5px;font-weight:700;color:#2F6B3F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){ .copGrille{grid-template-columns:minmax(0,1fr);height:auto} .copAmis{height:120px} }