/* ============================================================
   Polices auto-hébergées (dossier fonts/, sous-ensembles latin
   et hébreu de fontsource) : plus aucun appel à Google Fonts,
   le site fonctionne hors ligne et dans l'application native.
   touch-action: manipulation supprime le zoom au double-tap
   sans interdire le zoom par pincement (accessibilité).
   ============================================================ */
html,body,button,a{touch-action:manipulation}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/baloo-2-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/baloo-2-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/baloo-2-latin-800-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/nunito-latin-900-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/frank-ruhl-libre-hebrew-500-normal.woff2) format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/frank-ruhl-libre-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/frank-ruhl-libre-hebrew-700-normal.woff2) format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/frank-ruhl-libre-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/frank-ruhl-libre-hebrew-900-normal.woff2) format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/frank-ruhl-libre-latin-900-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* pastels */
  --sky:#d7ebff;
  --rose:#ffe0ec;
  --mint:#dcf3dd;
  --sun:#fff2cc;
  --cream:#fffcf6;
  /* couleurs vives du logo */
  --blue:#2f86d8;
  --navy:#22447e;
  --yellow:#f4b52c;
  --green:#63bd45;
  --coral:#e2493f;
  /* texte */
  --ink:#2b3a55;
  --ink-soft:#6c7f9c;
  --line:#e3ebf6;
  --shadow:0 10px 26px rgba(45,70,120,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Baloo 2","Trebuchet MS",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  /* Le ciel de l’affiche : bleu franc en haut, qui s’éclaircit vers le bas.
     Deux halos très doux gardent un peu de la chaleur des pastels d’avant. */
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(255,255,255,.30) 0%, transparent 60%),
    radial-gradient(700px 520px at 6% 92%, rgba(255,255,255,.34) 0%, transparent 62%),
    linear-gradient(180deg,
      #2fa4ef  0%,
      #4bbaf3 22%,
      #63c8f5 45%,
      #79d2f6 68%,
      #8ad9f7 88%,
      #96def8 100%);
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}
/* Le ciel est peint sur un calque fixe derrière la page plutôt qu'avec
   background-attachment:fixed : dans la WebView de l'app (iOS), ce dernier
   fait apparaître des rectangles autour des images qui ont une ombre. */
body{ background-attachment:scroll }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(255,255,255,.30) 0%, transparent 60%),
    radial-gradient(700px 520px at 6% 92%, rgba(255,255,255,.34) 0%, transparent 62%),
    linear-gradient(180deg,
      #2fa4ef  0%,
      #4bbaf3 22%,
      #63c8f5 45%,
      #79d2f6 68%,
      #8ad9f7 88%,
      #96def8 100%);
}
/* ---------- lisibilité sur le ciel ----------
   Depuis que le fond est un vrai bleu, les textes posés directement dessus
   (sans carte blanche derrière) passent en blanc, avec une ombre douce qui
   les décolle du dégradé. Tout ce qui vit dans une carte blanche ne bouge pas. */
.claim,
#count,
.sitefoot,
.sitefoot a,
.sitefoot .sig{
  color:#fff;
  text-shadow:0 1px 2px rgba(16,47,79,.30), 0 2px 10px rgba(16,47,79,.20);
}
#count b{ color:#fff }
.sitefoot a{ opacity:.94 }
.sitefoot a:hover{ opacity:1 }

.wrap{max-width:1100px;margin:0 auto;padding:22px 20px 40px;position:relative;z-index:1}

/* ---------- décor de la page d'accueil ---------- */
.decor{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.decor .nuage{
  position:absolute;height:auto;opacity:.85;
  filter:drop-shadow(0 10px 24px rgba(45,70,120,.10));
}
.decor .n1{width:170px;left:3%;top:13%;animation:drift 26s ease-in-out infinite}
.decor .n2{width:130px;right:5%;top:30%;animation:drift 32s ease-in-out infinite reverse}
.decor .n3{width:150px;left:20%;bottom:8%;opacity:.6;animation:drift 38s ease-in-out infinite}
.decor .n4{width:96px;right:12%;top:9%;opacity:.75;animation:float 12s ease-in-out infinite}
.decor .n5{width:88px;left:10%;top:48%;opacity:.5;animation:float 14s ease-in-out infinite 1s}
.decor .n6{width:110px;right:8%;bottom:14%;opacity:.6;animation:drift 30s ease-in-out infinite reverse}
@media (max-width:560px){
  .decor .nuage{opacity:.5}
  .decor .n1{width:120px;top:24%}
  .decor .n2{width:100px}
}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(34px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* ---------- barre haute ---------- */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.brandbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* ---------- l’en-tête : tout centré, la mascotte en médaillon ----------
   Sur un téléphone, le logo, le titre, le slogan et les deux boutons ne
   tiennent pas sur une même ligne : tout se comprime et devient laid.
   On empile donc au centre — médaillon rond, titre, slogan dans une
   pastille blanche — et les deux boutons se posent en haut à droite. */
.topbar{
  display:block;
  position:relative;
  text-align:center;
}
.brandbar{
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
  border-radius:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.brandbar .logo{
  width:clamp(84px,24vw,116px);
  border-radius:50%;
  border:5px solid #fff;
  box-shadow:0 8px 20px rgba(20,60,110,.22);
}
.brandbar .hero{ text-align:center; min-width:0; padding:0 }
.brandbar .rule{ display:none }
/* le slogan dans une pastille blanche, comme sur l’affiche */
.brandbar .claim{
  display:inline-block;
  margin:2px auto 0;
  padding:9px 16px;
  border-radius:999px;
  background:#fff;
  color:#12365c;
  text-shadow:none;
  font-size:clamp(13px,4.1vw,18px);
  box-shadow:0 6px 16px rgba(20,60,110,.14);
  max-width:100%;
}
/* les deux boutons se posent dans le coin, ils ne poussent plus le titre */
.topbar .topbtns{ position:absolute; top:0; right:0 }
@media (max-width:430px){
  .brandbar .claim{ padding:8px 13px }
  .topbar .topbtns{ gap:8px }
  .topbar .langbtn{ height:40px;padding:0 12px;font-size:13px }
  .topbar .gear{ width:40px;height:40px;font-size:18px }
}

.logo{
  width:clamp(64px,9vw,92px);height:auto;flex:none;display:block;
  border-radius:24%;
  box-shadow:0 8px 20px rgba(45,70,120,.18);
}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.top .right{display:flex;align-items:center;gap:10px}
.back{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:#fff;border:2px solid var(--line);border-radius:999px;
  padding:8px 18px 8px 8px;color:var(--ink);font-weight:700;font-size:15px;
  box-shadow:0 4px 12px rgba(45,70,120,.08);transition:transform .15s
}
.back:active{transform:scale(.95)}
.back .mini{width:30px;height:30px;border-radius:30%;display:block}

/* bouton réglages */
.gear{
  flex:none;width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:#fff;border:2px solid var(--line);color:var(--navy);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(45,70,120,.1);transition:transform .18s ease;
}
.gear:hover{transform:rotate(35deg)}
.gear:active{transform:scale(.92)}

.hero{text-align:left;padding:4px 0 2px}
.hero.center{text-align:center}
h1{
  margin:0;
  font-size:clamp(30px,5.6vw,54px);
  letter-spacing:.5px;font-weight:800;line-height:1.05;
  /* les titres sont posés sur le ciel : en blanc, avec une ombre douce */
  color:#fff;
  text-shadow:0 2px 4px rgba(16,47,79,.28), 0 4px 14px rgba(16,47,79,.18);
}
/* ---------- le titre en lettres colorées, comme sur l’affiche ---------- */
.marque{
  direction:ltr;               /* le logotype se lit toujours de gauche à droite, même en hébreu */
  unicode-bidi:isolate;
  font-family:"Nunito","Baloo 2",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(40px,13.5vw,70px);
  letter-spacing:-.005em;
  white-space:nowrap;          /* ARYE LAND tient sur une seule ligne */
  color:inherit;
  text-shadow:none;
}
.marque span{
  display:inline-block;
  /* le contour blanc épais est dessiné par une couronne d’ombres :
     c’est la méthode qui marche partout, y compris sur les vieux iPhone */
  /* Contour blanc + relief, comme sur l’affiche.
     Repli pour les vieux navigateurs : une couronne d’ombres.
     Navigateurs récents : un vrai contour, et l’ombre portée sous
     la lettre ET son contour — c’est ce qui donne le volume.        */
  text-shadow:
    -3px -3px 0 #fff,  0 -3px 0 #fff,  3px -3px 0 #fff,
    -3px  0   0 #fff,                  3px  0   0 #fff,
    -3px  3px 0 #fff,  0  3px 0 #fff,  3px  3px 0 #fff,
     0 6px 12px rgba(20,60,110,.22);
}
.marque .sp{ width:.26em; text-shadow:none }
@supports (paint-order: stroke){
  .marque span{
    text-shadow:none;
    -webkit-text-stroke:.055em #fff;
    paint-order:stroke fill;
    filter:drop-shadow(0 .035em 0 rgba(60,40,20,.28))
           drop-shadow(0 .075em .035em rgba(20,60,110,.28));
  }
  .marque .sp{ -webkit-text-stroke:0; filter:none }
}
/* les couleurs des lettres, reprises de l’affiche */
.marque .l1{ color:#EF3B2C }
.marque .l2{ color:#F5901E }
.marque .l3{ color:#2F86D8 }
.marque .l4{ color:#7DBE2E }
.marque .l6{ color:#2F86D8 }
.marque .l7{ color:#9B3FD8 }
.marque .l8{ color:#F5901E }
.marque .l9{ color:#EE3E8E }

@media (max-width:380px){
  .marque span{
    text-shadow:
      -2px -2px 0 #fff, 0 -2px 0 #fff, 2px -2px 0 #fff,
      -2px  0   0 #fff,                2px  0   0 #fff,
      -2px  2px 0 #fff, 0  2px 0 #fff, 2px  2px 0 #fff,
       0 4px 0 rgba(20,60,110,.16), 0 7px 12px rgba(20,60,110,.18);
  }
}

.rule{
  width:150px;height:5px;margin:14px 0 0;border-radius:5px;
  background:linear-gradient(90deg,var(--blue),var(--green),var(--yellow),var(--coral));
  opacity:.75;
}
.hero.center .rule{margin:14px auto 0}
.claim{
  margin:10px 0 0;font-size:clamp(15px,2vw,19px);font-weight:700;
  color:#fff;line-height:1.4;max-width:520px;
  text-shadow:0 1px 2px rgba(16,47,79,.30), 0 2px 10px rgba(16,47,79,.20);
}

/* ---------- accueil : mascotte + bulle ---------- */
.welcome{
  display:flex;align-items:flex-end;justify-content:center;gap:14px;
  margin:18px auto 0;max-width:760px;
}
.mascot{
  width:clamp(130px,19vw,196px);height:auto;display:block;flex:none;
  filter:drop-shadow(0 10px 16px rgba(45,70,120,.18));
  animation:bob 3.2s ease-in-out infinite;transform-origin:50% 100%;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.bubble{
  position:relative;background:#fff;border:3px solid var(--sky);border-radius:26px;
  padding:18px 24px;margin-bottom:36px;max-width:360px;
  font-size:clamp(17px,2.4vw,22px);font-weight:700;line-height:1.35;color:var(--navy);
  box-shadow:0 8px 22px rgba(45,70,120,.12);
}
.bubble::before,.bubble::after{
  content:"";position:absolute;left:-15px;bottom:22px;
  border:9px solid transparent;border-right-color:var(--sky);
}
.bubble::after{left:-10px;border-right-color:#fff}
@media (max-width:560px){
  .welcome{flex-direction:column;align-items:center;gap:0}
  .bubble{margin:2px 0 0;text-align:center}
  .bubble::before,.bubble::after{
    left:50%;top:-21px;bottom:auto;margin-left:-9px;
    border-right-color:transparent;border-bottom-color:var(--sky);
  }
  .bubble::after{top:-16px;border-bottom-color:#fff}
}

/* ---------- grille des jeux ---------- */
/* Le chemin d'Arye Land : les jeux se suivent le long d'un sentier pointillé,
   une étape à gauche, une étape à droite, comme un jeu de l'oie. */
.games{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;
  margin:30px auto 0;width:100%;
  position:relative;padding:0 0 26px;
}
.games .game{width:100%}
/* ---------- les intertitres du tri par catégorie ----------
   Ils occupent toute la largeur de la grille : les tuiles reprennent
   dessous, et l'œil comprend d'un coup où commence chaque famille. */
.catsep{
  grid-column:1 / -1;margin:14px 0 -4px;
  font-size:clamp(17px,4.2vw,22px);font-weight:800;color:#fff;
  text-shadow:0 1px 3px rgba(16,47,79,.35);
  display:flex;align-items:center;gap:8px;
}
.catsep:first-child{margin-top:0}
.catsep span{font-size:1.15em;line-height:1}

.game{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:#fff;border-radius:26px;padding:22px 20px 20px;
  border:3px solid var(--line);box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;overflow:hidden;
}
.game::before{content:"";position:absolute;inset:0;height:8px;background:var(--blue)}
.game:active{transform:translateY(2px) scale(.985)}
@media (hover:hover){
  .game:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(45,70,120,.2)}
  .game:hover .emoji{animation:wiggle .6s ease}
}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-11deg)}65%{transform:rotate(9deg)}}
.game .emoji{
  font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:21px;margin-bottom:12px;
  background:var(--sky);box-shadow:inset 0 -4px 0 rgba(45,70,120,.06);
}
.game h2{margin:0 0 5px;font-size:20px;color:var(--navy)}
.game p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.4}
.tag{
  display:inline-block;margin-top:12px;font-size:12.5px;font-weight:800;
  padding:6px 14px;border-radius:999px;background:var(--blue);color:#fff
}
.game.soon{opacity:.72;filter:saturate(.55);pointer-events:none}
.game.soon .tag{background:#fff;color:var(--ink-soft);border:2px solid var(--line)}

/* ---------- memory ---------- */
.hud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:4px 0 18px}
.stat{
  background:#fff;border:2px solid var(--line);border-radius:999px;
  padding:9px 18px;font-weight:800;font-size:16px;box-shadow:0 4px 12px rgba(45,70,120,.07);
  display:flex;align-items:center;gap:8px
}
.stat span{color:var(--blue)}
.btn{
  border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:16px;
  padding:12px 24px;border-radius:999px;color:#fff;
  background:var(--blue);box-shadow:0 5px 0 #1c63a8, 0 10px 18px rgba(47,134,216,.3);
  transition:transform .1s, box-shadow .1s
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #1c63a8,0 6px 12px rgba(47,134,216,.3)}
.btn.gold{background:var(--yellow);box-shadow:0 5px 0 #c8901a,0 10px 18px rgba(244,181,44,.3);color:#5b3f00}
.btn.gold:active{box-shadow:0 1px 0 #c8901a,0 6px 12px rgba(244,181,44,.3)}
.btn.ghost{
  background:#fff;color:var(--ink);border:2px solid var(--line);
  box-shadow:0 4px 12px rgba(45,70,120,.08)
}
.btn.ghost:active{transform:translateY(2px);box-shadow:0 2px 8px rgba(45,70,120,.08)}

.board{
  display:grid;gap:clamp(8px,1.6vw,16px);
  grid-template-columns:repeat(4,1fr);width:100%;
  max-width:min(760px, calc((100dvh - 270px) * 1.34));
  margin:0 auto;
}
@media (max-width:430px){
  .board{grid-template-columns:repeat(3,1fr);max-width:min(430px, calc((100dvh - 250px) * 0.78))}
}
.card{position:relative;aspect-ratio:1/1;cursor:pointer;perspective:1000px;background:none;border:none;padding:0}
.inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.2,.2,1);border-radius:20px}
.card.flipped .inner,.card.matched .inner{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:20px;overflow:hidden;box-shadow:0 6px 16px rgba(45,70,120,.16);
  display:flex;align-items:center;justify-content:center;
}
.cardback{border:3px solid #fff}
.cardback i{
  font-style:normal;font-weight:800;color:var(--navy);
  font-size:clamp(30px,7vw,52px);line-height:1;
  text-shadow:0 2px 0 rgba(255,255,255,.7);
}
.cardback.c0{background:var(--sky)}
.cardback.c1{background:var(--rose)}
.cardback.c2{background:var(--mint)}
.cardback.c3{background:var(--sun)}
.front{transform:rotateY(180deg);background:#fff;border:3px solid var(--line)}
.front .pic{width:100%;height:100%;background-image:url(animaux.webp);background-size:600% 200%;background-repeat:no-repeat}
.card.matched{animation:pop .45s ease;pointer-events:none}
.card.matched .front{border-color:var(--green);box-shadow:0 0 0 4px rgba(99,189,69,.35),0 6px 16px rgba(45,70,120,.16)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
.card.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- fin de partie ---------- */
.overlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(34,68,126,.42);backdrop-filter:blur(4px);z-index:50;padding:20px
}
.overlay.show{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--cream);border:4px solid var(--sky);border-radius:32px;
  padding:32px 30px;text-align:center;max-width:420px;width:100%;
  box-shadow:0 30px 60px rgba(20,40,80,.3);animation:rise .4s cubic-bezier(.2,1.3,.4,1)
}
@keyframes rise{from{transform:translateY(30px) scale(.9);opacity:0}}
.modal h2{margin:0 0 6px;font-size:34px;color:var(--blue)}
.modal .score{font-size:18px;color:var(--ink-soft);margin:10px 0 22px;line-height:1.6}
.modal .btn{margin:5px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:49}
.foot{text-align:center;margin-top:34px;color:var(--ink-soft);font-size:14px}

/* ---------- pied de page du site ---------- */
.sitefoot{
  max-width:1100px;margin:26px auto 0;padding:22px 20px 34px;
  border-top:2px solid rgba(255,255,255,.45);position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;
}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.sitefoot a{color:#fff;text-decoration:none;font-size:14px;font-weight:700}
.sitefoot a:hover{color:#fff;text-decoration:underline}
.sitefoot .sig{color:#fff;font-size:14px;font-weight:600}
.sitefoot .sig b{color:#fff;font-weight:800}

/* ---------- écrans ---------- */
.screen{display:none}
.screen.active{display:block}

/* ---------- puzzle : choix du niveau ---------- */
.levels{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin-top:8px;
}
.lvl{
  position:relative;display:block;text-align:left;cursor:pointer;font-family:inherit;
  background:#fff;border:3px solid var(--line);border-radius:24px;padding:12px 12px 16px;
  box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease;
}
.lvl:active{transform:translateY(2px) scale(.985)}
@media (hover:hover){.lvl:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(45,70,120,.2)}}
.lvl .thumb{
  display:block;width:100%;aspect-ratio:3/2;border-radius:16px;
  background-image:url(puzzles.webp);background-size:300% 200%;background-repeat:no-repeat;
  border:2px solid var(--line);
}
.lvl .lname{display:block;margin-top:10px;font-size:20px;font-weight:800;color:var(--navy)}
.lvl .lhint{display:block;font-size:14px;color:var(--ink-soft)}
.lvl .badge{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  background:var(--green);color:#fff;font-size:22px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(45,70,120,.25);
}
.lvl.done{background:linear-gradient(180deg,#fff 60%,var(--mint))}

/* ---------- puzzle : plateau ---------- */
.playzone{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.modelbox{
  background:#fff;border:3px solid var(--line);border-radius:20px;padding:10px;
  box-shadow:0 6px 16px rgba(45,70,120,.1);flex:none;
}
.modeltitle{display:block;font-size:13px;font-weight:800;color:var(--ink-soft);margin-bottom:6px;text-align:center}
.model{
  width:clamp(120px,17vw,190px);aspect-ratio:3/2;border-radius:12px;
  background-image:url(puzzles.webp);background-size:300% 200%;background-repeat:no-repeat;
}
.pboard{
  display:grid;gap:4px;
  width:100%;max-width:min(640px, calc((100dvh - 320px) * 1.5));
  aspect-ratio:3/2;padding:6px;background:#fff;border:3px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);
}
.piece{
  border:none;padding:0;cursor:pointer;border-radius:10px;
  background-image:url(puzzles.webp);background-size:900% 600%;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);
  transition:transform .12s ease, box-shadow .12s ease;
}
.piece.sel{
  transform:scale(.93);
  box-shadow:inset 0 0 0 3px #fff, 0 0 0 4px var(--yellow), 0 6px 14px rgba(45,70,120,.25);
  z-index:2;
}
.piece.ok{box-shadow:inset 0 0 0 2px rgba(99,189,69,.9)}
.piece.pop{animation:ppop .3s ease}
@keyframes ppop{0%{transform:scale(.88)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@media (max-width:640px){
  .playzone{flex-direction:column-reverse;align-items:center}
  .modelbox{display:flex;align-items:center;gap:10px;padding:8px 12px}
  .modeltitle{margin:0}
  .model{width:110px}
  .pboard{max-width:min(560px, calc((100dvh - 330px) * 1.5))}
}

/* ---------- réglages parents ---------- */
.ms-ov{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(34,68,126,.5);backdrop-filter:blur(5px);z-index:70;padding:18px;
}
.ms-ov.show{display:flex;animation:fade .25s}
.ms-panel{
  background:#fff;border:3px solid var(--line);border-radius:28px;
  padding:26px 26px 22px;max-width:460px;width:100%;
  box-shadow:0 30px 60px rgba(20,40,80,.32);animation:rise .35s cubic-bezier(.2,1.3,.4,1);
  max-height:92vh;overflow:auto;
}
.ms-panel h2{margin:0;font-size:25px;color:var(--navy)}
.ms-panel .ms-sub{margin:6px 0 20px;color:var(--ink-soft);font-size:15px;line-height:1.45}
.ms-label{display:block;font-weight:800;font-size:15px;color:var(--navy);margin:0 0 10px}
.ms-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.ms-chip{
  cursor:pointer;font-family:inherit;font-weight:800;font-size:15px;
  padding:10px 16px;border-radius:999px;border:2px solid var(--line);
  background:#fff;color:var(--ink);transition:transform .12s ease;
}
.ms-chip:active{transform:scale(.94)}
.ms-chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.ms-used{
  background:var(--cream);border:2px solid var(--line);border-radius:18px;
  padding:14px 16px;margin-bottom:18px;font-size:15px;color:var(--ink-soft);line-height:1.5;
}
.ms-used b{color:var(--navy)}
.ms-pin{
  width:100%;font-family:inherit;font-size:30px;font-weight:800;text-align:center;
  letter-spacing:12px;padding:14px 10px;border-radius:18px;
  border:2px solid var(--line);background:var(--cream);color:var(--navy);margin-bottom:12px;
}
.ms-pin:focus{outline:none;border-color:var(--blue)}
.ms-err{color:var(--coral);font-weight:700;font-size:14px;margin:0 0 12px;min-height:20px}
.ms-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:6px}
.ms-links{
  margin-top:20px;padding-top:16px;border-top:2px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 18px;
}
.ms-links a{color:var(--ink-soft);font-size:14px;font-weight:700;text-decoration:none}
.ms-links a:hover{color:var(--blue);text-decoration:underline}
.ms-links + .ms-actions{margin-top:18px}

/* ---------- pages légales ---------- */
.legal{
  max-width:820px;margin:0 auto;background:#fff;border:3px solid var(--line);
  border-radius:28px;padding:clamp(24px,4vw,46px);box-shadow:var(--shadow);
}
.legal h1{font-size:clamp(26px,4vw,38px);margin-bottom:6px;color:var(--navy);text-shadow:none}
.legal .updated{color:var(--ink-soft);font-size:14px;font-weight:600;margin:0 0 26px}
.legal h2{
  font-size:20px;color:var(--navy);margin:32px 0 10px;
  padding-top:18px;border-top:2px solid var(--line);
}
.legal h2:first-of-type{border-top:none;padding-top:0;margin-top:22px}
.legal h3{font-size:16px;color:var(--navy);margin:20px 0 6px}
.legal p,.legal li{font-size:15.5px;line-height:1.68;color:var(--ink);font-weight:500}
.legal ul{padding-left:22px;margin:10px 0}
.legal li{margin-bottom:7px}
.legal a{color:var(--blue);font-weight:700}
.legal .todo{
  background:var(--sun);border-radius:8px;padding:2px 8px;
  font-weight:800;color:#7a5600;white-space:nowrap;
}
.legal table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14.5px}
.legal th,.legal td{border:2px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.legal th{background:var(--cream);color:var(--navy);font-weight:800}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------- Où est Shmouel ? ---------- */
.shhero{
  display:flex;align-items:center;gap:18px;max-width:720px;margin:6px auto 0;
  background:#fff;border:3px solid var(--line);border-radius:24px;padding:14px 20px;
  box-shadow:0 6px 18px rgba(45,70,120,.1);
}
.shhero .shportrait{width:clamp(56px,9vw,78px);height:auto;display:block;flex:none}
.shhero p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.shhero b{color:var(--navy)}

.shgrid{
  display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
  max-width:720px;margin:0 auto;
}
.shchip{
  position:relative;cursor:pointer;font-family:inherit;aspect-ratio:1/1;
  background:#fff;border:3px solid var(--line);border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 4px 12px rgba(45,70,120,.08);transition:transform .15s ease;
}
.shchip b{font-size:19px;color:var(--navy);line-height:1}
.shchip span{font-size:13px;line-height:1}
.shchip:active{transform:scale(.94)}
.shchip.ok{background:linear-gradient(180deg,#fff 55%,var(--mint));border-color:var(--green)}
.shchip.ok span{color:var(--green);font-weight:800}
.shchip.lock{opacity:.45;cursor:not-allowed;background:var(--cream)}

.shbar{
  display:flex;align-items:center;gap:12px;max-width:1000px;margin:2px auto 10px;
  background:#fff;border:2px solid var(--line);border-radius:999px;padding:7px 18px 7px 8px;
  box-shadow:0 4px 12px rgba(45,70,120,.08);
}
.shbar .shmini{width:34px;height:auto;display:block;flex:none}
.shbar-txt{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.shbar-txt b{color:var(--navy);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shbar-txt span{color:var(--ink-soft);font-size:13px;font-weight:700}
.shmiss{color:var(--coral);font-weight:800;font-size:14px;flex:none}

.viewport{
  position:relative;overflow:hidden;width:100%;max-width:1000px;margin:0 auto;
  aspect-ratio:3/2;border-radius:22px;border:3px solid var(--line);
  box-shadow:var(--shadow);background:var(--cream);touch-action:none;cursor:crosshair;
}
.cvz{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.scene{width:100%;height:100%;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none}
.sh-wrap{position:absolute;overflow:hidden;pointer-events:none}
.sh-wrap img{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
.sh-wrap.clipped{-webkit-mask-image:linear-gradient(#000 92%,transparent 100%);mask-image:linear-gradient(#000 92%,transparent 100%)}
.sh-wrap.found{animation:shpop .9s ease}
@keyframes shpop{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(1.05)}}

.hintring{
  position:absolute;width:24%;aspect-ratio:1/1;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;display:none;
  box-shadow:0 0 0 4px rgba(244,181,44,.9), 0 0 0 2000px rgba(34,68,126,.28);
}
.hintring.show{display:block;animation:hintpulse 1.6s ease-in-out infinite}
@keyframes hintpulse{0%,100%{opacity:.85}50%{opacity:.35}}

.ripple{
  position:absolute;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  pointer-events:none;border:3px solid var(--coral);animation:rip .7s ease-out forwards;
}
.ripple.good{border-color:var(--green)}
@keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}

@media (max-width:560px){
  .shhero{flex-direction:column;text-align:center;gap:10px}
  .shgrid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}
}

.gear.zbtn{font-size:26px;font-weight:800}
.gear.zbtn:hover{transform:none}

/* ---------- L'aleph-beth ---------- */
.palgrid{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  max-width:820px;margin:0 auto;
}
.pal{
  cursor:pointer;font-family:inherit;text-align:left;
  background:#fff;border:3px solid var(--line);border-radius:22px;padding:16px 18px;
  box-shadow:var(--shadow);transition:transform .16s ease, box-shadow .16s ease;
  display:flex;flex-direction:column;gap:3px;
}
.pal:active{transform:translateY(2px) scale(.985)}
@media (hover:hover){.pal:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(45,70,120,.18)}}
.palnum{font-size:13px;font-weight:800;color:var(--ink-soft);letter-spacing:.4px;text-transform:uppercase}
.palttl{font-size:21px;font-weight:800;color:var(--navy)}
.palst{font-size:14px;font-weight:700;color:var(--blue);margin-top:4px}
.pal.ok{background:linear-gradient(180deg,#fff 58%,var(--mint));border-color:var(--green)}
.pal.ok .palst{color:var(--green)}
.pal.lock{opacity:.5;cursor:not-allowed;background:var(--cream)}
.pal.lock .palst{color:var(--ink-soft)}

.alphahead{
  text-align:center;font-size:19px;color:var(--ink-soft);font-weight:800;
  margin:34px 0 12px;
}
.alphabet{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:820px;margin:0 auto;
  direction:rtl;
}
.alet{
  font-family:"Frank Ruhl Libre",serif;font-weight:700;
  width:clamp(44px,7vw,58px);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(26px,4.4vw,34px);line-height:1;color:var(--navy);
  background:#fff;border:2px solid var(--line);border-radius:14px;
  box-shadow:0 3px 9px rgba(45,70,120,.07);
}
.alet.fin{background:var(--sun);border-color:#efd79a}

.progbar{
  width:100%;max-width:620px;height:9px;margin:2px auto 18px;
  background:#fff;border:2px solid var(--line);border-radius:99px;overflow:hidden;
}
.progbar span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--green));transition:width .35s ease;
}

.cible{
  font-family:"Frank Ruhl Libre",serif;font-weight:900;
  width:clamp(140px,26vw,210px);aspect-ratio:1/1;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(88px,17vw,140px);line-height:1;color:var(--navy);
  background:linear-gradient(180deg,#fff 60%,var(--sky));
  border:4px solid var(--sky);border-radius:34px;
  box-shadow:0 12px 30px rgba(45,70,120,.16);
}
.cible.pop{animation:cpop .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes cpop{from{transform:scale(.82);opacity:0}}

.choix{
  display:grid;gap:clamp(10px,2vw,16px);max-width:640px;margin:0 auto;
  grid-template-columns:repeat(3,1fr);
}
.choix.n4{grid-template-columns:repeat(2,1fr);max-width:420px}
.choix.n6{grid-template-columns:repeat(3,1fr)}
.choix.n8{grid-template-columns:repeat(4,1fr);max-width:680px}
.choix.n10{grid-template-columns:repeat(5,1fr);max-width:760px}
.let{
  font-family:"Frank Ruhl Libre",serif;font-weight:700;cursor:pointer;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-size:clamp(34px,7vw,58px);line-height:1;color:var(--navy);
  background:#fff;border:3px solid var(--line);border-radius:22px;
  box-shadow:0 5px 14px rgba(45,70,120,.1);transition:transform .12s ease;
}
.let:active{transform:scale(.93)}
@media (hover:hover){.let:hover{border-color:var(--blue)}}
.let.bon{background:linear-gradient(180deg,#fff 50%,var(--mint));border-color:var(--green);animation:pop .45s ease}
.let.rate{background:var(--cream);border-color:var(--coral);opacity:.55;animation:shake .4s}

@media (max-width:560px){
  .choix.n8{grid-template-columns:repeat(4,1fr)}
  .choix.n10{grid-template-columns:repeat(5,1fr);gap:8px}
}

/* separateurs de paliers dans le choix des puzzles */
.palsep{
  grid-column:1/-1;margin:22px 0 2px;font-size:18px;color:var(--ink-soft);
  display:flex;align-items:center;gap:10px;
}
.palpip{width:16px;height:16px;border-radius:5px;background:var(--blue);flex:none}
.palpip.p1{background:var(--green)}
.palpip.p2{background:var(--coral)}
.lvl .badge{font-size:20px}

/* ---------- tuiles de l'accueil ---------- */
.game:nth-child(9n+1)::before{background:#2f86d8}
.game:nth-child(9n+1){background:linear-gradient(180deg,#fff 62%,#d7ebff)}
.game:nth-child(9n+1) .emoji{background:#d7ebff}
.game:nth-child(9n+1) .tag{background:#2f86d8}
.game:nth-child(9n+2)::before{background:#63bd45}
.game:nth-child(9n+2){background:linear-gradient(180deg,#fff 62%,#dcf3dd)}
.game:nth-child(9n+2) .emoji{background:#dcf3dd}
.game:nth-child(9n+2) .tag{background:#63bd45}
.game:nth-child(9n+3)::before{background:#f4b52c}
.game:nth-child(9n+3){background:linear-gradient(180deg,#fff 62%,#fff2cc)}
.game:nth-child(9n+3) .emoji{background:#fff2cc}
.game:nth-child(9n+3) .tag{background:#f4b52c}
.game:nth-child(9n+4)::before{background:#2fb0a8}
.game:nth-child(9n+4){background:linear-gradient(180deg,#fff 62%,#dff3f1)}
.game:nth-child(9n+4) .emoji{background:#dff3f1}
.game:nth-child(9n+4) .tag{background:#2fb0a8}
.game:nth-child(9n+5)::before{background:#8f6ed5}
.game:nth-child(9n+5){background:linear-gradient(180deg,#fff 62%,#ece4fb)}
.game:nth-child(9n+5) .emoji{background:#ece4fb}
.game:nth-child(9n+5) .tag{background:#8f6ed5}
.game:nth-child(9n+6)::before{background:#e2493f}
.game:nth-child(9n+6){background:linear-gradient(180deg,#fff 62%,#ffe0ec)}
.game:nth-child(9n+6) .emoji{background:#ffe0ec}
.game:nth-child(9n+6) .tag{background:#e2493f}
.game:nth-child(9n+7)::before{background:#3f7fb5}
.game:nth-child(9n+7){background:linear-gradient(180deg,#fff 62%,#dbeaf6)}
.game:nth-child(9n+7) .emoji{background:#dbeaf6}
.game:nth-child(9n+7) .tag{background:#3f7fb5}
.game:nth-child(9n+8)::before{background:#d98b3a}
.game:nth-child(9n+8){background:linear-gradient(180deg,#fff 62%,#fbe8d2)}
.game:nth-child(9n+8) .emoji{background:#fbe8d2}
.game:nth-child(9n+8) .tag{background:#d98b3a}
.game:nth-child(9n)::before{background:#7aa63f}
.game:nth-child(9n){background:linear-gradient(180deg,#fff 62%,#e7f0d6)}
.game:nth-child(9n) .emoji{background:#e7f0d6}
.game:nth-child(9n) .tag{background:#7aa63f}

.game .emoji{font-size:34px}
.game:nth-child(9n+4) .emoji{font-family:"Frank Ruhl Libre",serif;font-weight:900;font-size:40px}
.age{
  position:absolute;top:18px;right:16px;z-index:2;
  background:#fff;border:2px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:12.5px;font-weight:800;color:var(--ink-soft);
  box-shadow:0 3px 8px rgba(45,70,120,.08);
}
.game h2{padding-right:8px}

/* Pastille « Nouveau » sur les derniers jeux créés */
.neuf{
  position:absolute;top:-8px;left:12px;z-index:3;
  background:linear-gradient(135deg,#ff5a5f,#e0301e);color:#fff;
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;
  letter-spacing:.02em;box-shadow:0 4px 10px rgba(224,48,30,.35);
  transform:rotate(-4deg);animation:neufPop 2.4s ease-in-out infinite;
}
@keyframes neufPop{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(-4deg) scale(1.08)}}
[dir="rtl"] .neuf,html[lang="he"] .neuf{left:auto;right:12px;transform:rotate(4deg)}


/* ---------- boutons illustrés (ibtn) — ajout pour les anciens jeux ---------- */
.ibtn{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;font-family:inherit;border:none;background:none;padding:6px}
.ibtn .ico{width:clamp(56px,11vw,74px);height:clamp(56px,11vw,74px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:clamp(28px,5.5vw,36px);
  background:var(--blue);color:#fff;box-shadow:0 5px 0 #1c63a8,0 10px 18px rgba(47,134,216,.3);
  transition:transform .1s}
.ibtn:active .ico{transform:translateY(4px);box-shadow:0 1px 0 #1c63a8}
.ibtn span{font-size:13px;font-weight:800;color:var(--ink-soft)}
.ibtn.gold .ico{background:var(--yellow);color:#5b3f00;box-shadow:0 5px 0 #c8901a,0 10px 18px rgba(244,181,44,.3)}
.ibtn.ghost .ico{background:#fff;color:var(--ink);border:2px solid var(--line);box-shadow:0 4px 12px rgba(45,70,120,.08)}

/* boutons illustrés dans les fenêtres de victoire */
.modal .ibtn{margin:4px 6px}
.modal .btnrow{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}

/* version compacte dans la barre du haut, à côté du bouton réglages */
.top .ibtn{padding:2px 4px}
.top .ibtn .ico{width:46px;height:46px;font-size:22px}
.top .ibtn span{font-size:11px}

/* ---------- accueil : grille compacte sur téléphone (2 colonnes) ---------- */
@media (max-width:640px){
  .games{grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;padding:0 0 20px}
  .game{padding:14px 11px 12px;border-radius:20px;border-width:2px}
  .game::before{height:6px}
  .game .emoji{width:44px;height:44px;border-radius:14px;font-size:23px;margin-bottom:8px}
  .game:nth-child(9n+4) .emoji{font-size:26px}
  .game h2{font-size:14.5px;line-height:1.2;margin-bottom:3px}
  .game p{font-size:12px;line-height:1.3}
  .tag{margin-top:8px;font-size:12px;padding:4px 10px}
  .age{top:9px;right:8px;padding:2px 7px;font-size:12px;border-width:1.5px}
  .game h2{padding-right:0}
}
@media (max-width:360px){
  .games{gap:9px}
  .game{padding:12px 9px 10px}
  .game h2{font-size:13px}
  .game p{font-size:12px}
}

/* ---------- iOS : pas de zoom par double-tape, pas de rebond ---------- */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{overscroll-behavior:none}
/* la zone de « Où est Shmouel ? » garde son propre pincement */
.viewport{touch-action:none}

/* ============================================================
   « Ajouter à l’écran d’accueil » — bandeau destiné aux parents
   (n’apparaît que sur la page d’accueil, jamais dans un jeu)
   ============================================================ */
.addbar{
  position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:55;display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:24px;
  background:var(--cream,#fffdf8);border:3px solid var(--line);
  box-shadow:0 14px 40px rgba(45,70,120,.24);
  transform:translateY(140%);opacity:0;
  transition:transform .42s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
}
.addbar.show{transform:translateY(0);opacity:1}
@media (min-width:720px){
  .addbar{left:50%;right:auto;transform:translate(-50%,140%);max-width:660px;width:calc(100% - 40px)}
  .addbar.show{transform:translate(-50%,0)}
}
.addmasc{width:54px;height:auto;flex:none;display:block}
.addtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.addtxt b{font-size:15px;color:var(--ink);line-height:1.25}
.addtxt span{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.addbtns{display:flex;flex-direction:column;gap:5px;flex:none}
.addgo{
  font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;
  padding:10px 16px;border-radius:16px;border:none;color:#fff;
  background:var(--blue);box-shadow:0 4px 0 #1c63a8;white-space:nowrap;
}
.addgo:active{transform:translateY(3px);box-shadow:0 1px 0 #1c63a8}
.addgo span{font-size:17px;vertical-align:-1px}
.addno{
  font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;
  background:none;border:none;color:var(--ink-soft);text-decoration:underline;padding:2px;
}
@media (max-width:430px){
  .addbar{flex-wrap:wrap;gap:10px}
  .addmasc{width:46px}
  .addtxt{flex-basis:calc(100% - 58px)}
  .addbtns{flex-direction:row;align-items:center;gap:10px;width:100%;justify-content:flex-end}
}

/* le mode d’emploi iPhone / iPad */
.addhow{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(28,45,80,.5);opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.addhow.show{opacity:1;pointer-events:auto}
.addcard{
  position:relative;width:100%;max-width:400px;background:#fff;border-radius:26px;
  border:3px solid var(--line);padding:20px 18px 18px;text-align:center;
  box-shadow:0 24px 60px rgba(20,35,70,.4);
  transform:scale(.9);transition:transform .32s cubic-bezier(.2,.9,.3,1.2);
}
.addhow.show .addcard{transform:scale(1)}
.addcard h2{margin:0 6px 12px 0;padding-right:34px;font-size:20px;color:var(--ink)}
.addx{
  position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--line);background:#fff;color:var(--ink-soft);
  font-size:15px;font-family:inherit;cursor:pointer;line-height:1;
}
.addsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left}
.addsteps li{display:flex;align-items:center;gap:10px}
.addsteps i{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;
  font-style:normal;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.addsteps li>span{
  flex:none;width:44px;height:44px;border-radius:14px;background:#eef6ff;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--blue);font-weight:800;
}
.addsteps p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.35}
.addsteps b{color:var(--ink)}
.addnote{margin:14px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.addok{
  margin-top:14px;width:100%;font-family:inherit;font-weight:800;font-size:16px;cursor:pointer;
  padding:12px;border-radius:18px;border:none;color:#fff;background:var(--blue);box-shadow:0 4px 0 #1c63a8;
}
.addok:active{transform:translateY(3px);box-shadow:0 1px 0 #1c63a8}

/* ============================================================
   Accueil — le compteur de jeux et le tri par âge
   ============================================================ */
.pick{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0 2px}
.count{margin:0;font-size:15px;color:var(--ink-soft);text-align:center;line-height:1.35}
.count b{color:var(--ink)}
.sortbar{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  background:#fff;border:2px solid var(--line);border-radius:999px;padding:5px 8px 5px 12px;
  box-shadow:0 4px 12px rgba(45,70,120,.08)}
.sortlab{font-size:13px;font-weight:800;color:var(--ink-soft)}
.sortbtn{font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;
  border:none;background:none;color:var(--ink-soft);
  padding:6px 13px;min-height:40px;border-radius:999px;transition:background .15s,color .15s}
.sortbtn.on{background:var(--blue);color:#fff}
@media (hover:hover){.sortbtn:not(.on):hover{background:#eef4fc;color:var(--ink)}}
/* points du tutoriel (tuto.js) : le dessin reste à 14 px, la zone de toucher
   s’étend à 32 × 32 px grâce à un pseudo-élément transparent */
.tu-dot{position:relative}
.tu-dot::before{content:"";position:absolute;left:-9px;top:-9px;right:-9px;bottom:-9px;border-radius:50%}
.tu-nav .tu-dots{gap:18px}
@media (max-width:400px){
  .count{font-size:14px}
  .sortbar{padding:5px 6px 5px 10px;gap:4px}
  .sortbtn{font-size:12.5px;padding:6px 10px;min-height:40px}
  .sortlab{font-size:12px}
}

/* la voix de l'aleph-beth (essai avec la synthese du telephone) */
.voixrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 14px}
.voixbtn{flex:none;width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:var(--blue);border:none;color:#fff;font-size:24px;
  box-shadow:0 4px 0 #1c63a8,0 8px 16px rgba(47,134,216,.3);transition:transform .1s}
.voixbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #1c63a8}

/* ---------- Arye Land : boutons hauts et globe ---------- */
.topbtns{display:flex;align-items:center;gap:10px;flex:none}
.langbtn{
  flex:none;height:48px;padding:0 16px;border-radius:999px;cursor:pointer;
  background:#fff;border:2px solid var(--line);color:var(--navy);
  font-weight:800;font-size:15px;font-family:inherit;
  box-shadow:0 4px 12px rgba(45,70,120,.1);transition:transform .15s;
}
.langbtn:active{transform:scale(.94)}

/* Arye debout sur son globe — le dessin d'Arye ne change pas */
.welcome{align-items:center}
.monde{position:relative;display:flex;flex-direction:column;align-items:center;flex:none}
.monde .mascot{position:relative;z-index:2}
.globe{
  width:clamp(220px,32vw,320px);height:auto;display:block;z-index:1;
  margin-top:-52px;
  filter:drop-shadow(0 14px 22px rgba(45,70,120,.24));
}
.bubble{margin-bottom:64px}
@media (max-width:560px){
  .bubble{margin-bottom:0;margin-top:6px}
  .globe{width:min(66vw,250px);margin-top:-40px}
}

/* ---------- pied des pages de texte ----------
   Sur une page longue, le pied arrive tout en bas du dégradé, là où le ciel
   est presque blanc : le texte blanc n'y tient plus. On repasse en bleu. */
.page-texte .sitefoot,
.page-texte .sitefoot a,
.page-texte .sitefoot .sig{
  color:var(--navy);
  text-shadow:none;
}
.page-texte .sitefoot a{ opacity:1; text-decoration:underline }

/* En hébreu, la page est en RTL : une suite « 0 / 50 » y est réordonnée par
   le navigateur et s'affiche « 50 / 0 », ce qui se lit comme un score faux.
   On isole ces compteurs en LTR — les chiffres gardent leur ordre, la mise
   en page reste celle de la carte. */
.ltr,
[dir="rtl"] .cpt,
[dir="rtl"] .dstar,
[dir="rtl"] .cnt{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}

/* La démonstration du jeu des brakhot affiche le nom translittéré puis le mot
   hébreu. En hébreu l'un répète l'autre : on masque la seconde ligne. */
[dir="rtl"] .heb-dbl{ display:none }

/* ---------- porte parent / boutique ----------
   parent.js et boutique.js réutilisent la fenêtre des réglages (.ms-ov,
   .ms-panel) ; ici seulement ce qui leur est propre. La porte passe
   au-dessus de tout (message de pause z=60, réglages z=70). */
.pg-panel{ max-width:400px; text-align:center }
.pg-panel .ms-sub{ margin-bottom:12px }
.pg-q{
  margin:8px 0 14px; font-weight:800; font-size:20px; line-height:1.4; color:var(--navy);
}
.pg-q .ltr{ color:var(--blue); font-size:24px }
.pg-num{ letter-spacing:6px; max-width:160px; display:block; margin:0 auto 12px }
.pg-panel .ms-actions{ justify-content:center }
.ms-lien{
  background:none; border:0; padding:6px 4px; cursor:pointer; font-family:inherit;
  font-weight:700; font-size:14px; color:var(--ink-soft); text-decoration:underline;
}
.ms-lien:hover{ color:var(--blue) }
.ms-oubli{ margin:10px 0 0; text-align:center }
.ms-donnees{
  margin-top:18px; padding-top:16px; border-top:2px solid var(--line);
}
.ms-danger{ color:var(--coral) !important; border-color:rgba(226,73,63,.45) !important }
.btn.ms-danger{ background:var(--coral); color:#fff !important; box-shadow:0 5px 0 #b3362e, 0 10px 18px rgba(226,73,63,.3) }
.btn.ms-danger:active{ box-shadow:0 1px 0 #b3362e, 0 6px 12px rgba(226,73,63,.3) }
[disabled].ms-pin,[disabled].btn{ opacity:.55; cursor:not-allowed }

.bq-ov{ z-index:95; padding-top:calc(18px + var(--sat, 0px)); padding-bottom:calc(18px + var(--sab, 0px)) }
.bq-panel{ max-height:calc(100dvh - 36px - var(--sat, 0px) - var(--sab, 0px)) }          /* au-dessus du tutoriel (90), sous la porte parent (96) */
.pg-ov{ z-index:96 }
.bq-panel{ position:relative; text-align:center; max-width:440px }
.bq-detail{ display:block; margin-top:4px; font-size:11px; font-weight:400; opacity:.75; word-break:break-word }
.bq-x{
  position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%;
  border:2px solid var(--line); background:#fff; color:var(--ink-soft); font-size:18px;
  cursor:pointer; padding:0; font-family:inherit;
}
[dir="rtl"] .bq-x{ right:auto; left:12px }
.bq-tete{ font-size:52px; line-height:1; margin-bottom:6px }
.bq-offres{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:16px 0 10px }
.bq-offre{
  position:relative; flex:1 1 160px; max-width:200px; padding:18px 14px 16px;
  border:2px solid var(--line); border-radius:22px; background:var(--cream);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.bq-offre.bq-mieux{ border-color:var(--yellow); box-shadow:0 0 0 4px rgba(244,181,44,.25) }
.bq-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--yellow); color:#5b3f00; font-size:12px; font-weight:800;
  padding:4px 12px; border-radius:999px;
}
.bq-nom{ font-weight:800; font-size:17px; color:var(--navy) }
.bq-prix{ font-weight:900; font-size:26px; color:var(--blue); line-height:1.1 }
.bq-prix small{ font-size:13px; color:var(--ink-soft); font-weight:700 }
.bq-offre .btn{ margin-top:4px; padding:10px 20px; font-size:15px }
.bq-gratuit{ margin:0 0 8px }
.bq-essai{
  display:inline-block; margin:6px 0 4px; padding:4px 12px; border-radius:999px;
  background:var(--green, #58b957); color:#fff; font-weight:800; font-size:13px;
}
.bq-apres{ font-size:12px; color:var(--ink-soft); font-weight:700; margin-top:-2px }
.bq-pourquoi{ font-weight:800; color:var(--navy) }
.bq-bloque .bq-x{ display:none }
/* la tuile d'un jeu fermé : un peu voilée, un cadenas en haut à gauche */
.game.verrou{ opacity:.88 }
.game.verrou .emoji{ filter:grayscale(.35) }
/* le cadenas se pose sur le coin de la case de l'emoji */
.game .cadenas{
  position:absolute; top:66px; left:66px; z-index:3;
  width:30px; height:30px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; box-shadow:0 3px 8px rgba(16,47,79,.22);
}
[dir="rtl"] .game .cadenas,html[lang="he"] .game .cadenas{ left:auto; right:66px }
@media (max-width:640px){
  .game .cadenas{ top:42px; left:42px; width:26px; height:26px; font-size:14px }
  [dir="rtl"] .game .cadenas,html[lang="he"] .game .cadenas{ left:auto; right:42px }
}
.bq-actif{ text-align:center; color:var(--navy); font-weight:700 }
.bq-web{ text-align:center; margin-top:8px }
.bq-legal{ font-size:12px; line-height:1.45; color:var(--ink-soft); margin:12px 0 0 }

/* ============================================================
   L'entrée de la bibliothèque, sur l'accueil
   Un bandeau, pas une tuile : la bibliothèque n'est pas un jeu,
   elle ne compte donc ni dans les 50 jeux ni dans les niveaux.
   Même esprit visuel que la bannière du défi du jour, mais dans
   les bleus du livre pour qu'on ne les confonde pas.
   ============================================================ */
.porte{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(12px,3vw,22px);
  margin-top:clamp(12px,3vw,20px);
}
@media (max-width:520px){ .porte{grid-template-columns:1fr} }
.pc-paracha{background:linear-gradient(150deg,#e9dcff,#f7c8dd)}
/* display:grid l'emporterait sur l'attribut hidden : on le dit ici */
.porte[hidden]{display:none}

/* ---------- la page des jeux ----------
   Une fois « Les jeux » choisi, l'accueil s'efface entierement : plus de
   mascotte, plus de bulle, plus de grande marque. Il reste ce qu'il y a
   dans la bibliotheque — un bouton « Accueil » a gauche, un titre au
   milieu — pour que les deux moities du site se ressemblent. */
.jx-back, .jx-tete{ display:none }
body.aux-jeux .jx-back{ display:inline-flex; position:absolute; top:0; left:0 }
body.aux-jeux .jx-tete{ display:block }
body.aux-jeux .brandbar,
body.aux-jeux .welcome,
body.aux-jeux .bubble{ display:none }
/* la barre garde la hauteur des boutons, qui sont posés en absolu */
body.aux-jeux .topbar{ min-height:48px; margin-bottom:10px }
@media (max-width:430px){ body.aux-jeux .topbar{ min-height:40px } }
body.aux-jeux .jx-back .mini{ width:26px; height:26px }
@media (max-width:430px){
  body.aux-jeux .jx-back{ padding:6px 12px 6px 6px; font-size:13px }
}

.jx-tete{ text-align:center; margin:0 0 6px }
.jx-tete h1{
  margin:0; font-size:clamp(22px,5.5vw,32px); line-height:1.15; color:#fff;
  text-shadow:0 1px 2px rgba(16,47,79,.30), 0 2px 10px rgba(16,47,79,.20);
}
.jx-tete p{
  margin:3px 0 0; font-size:clamp(13px,3.2vw,17px); line-height:1.25;
  font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(16,47,79,.30);
}
body.aux-jeux .count{ margin-top:10px }
.porte-carte{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;text-decoration:none;color:var(--navy);
  min-height:clamp(150px,34vw,210px);padding:clamp(16px,4vw,26px) 16px;
  border-radius:30px;border:4px solid #fff;
  box-shadow:0 10px 26px rgba(45,70,120,.18);
  transition:transform .16s ease, box-shadow .16s ease;
}
.porte-carte:active{transform:scale(.97)}
@media (hover:hover){ .porte-carte:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(45,70,120,.24)} }
.pc-jeux{background:linear-gradient(150deg,#ffd98a,#ffb03a)}
.pc-livre{background:linear-gradient(150deg,var(--sky),var(--mint))}
.porte-ico{font-size:clamp(46px,12vw,70px);line-height:1}
.porte-carte b{font-size:clamp(19px,4.8vw,26px);font-weight:800;line-height:1.15}
.porte-sous{font-size:clamp(13px,3.2vw,16px);font-weight:700;color:var(--ink-soft);line-height:1.3}

/* le retour vers la porte, une fois les jeux depliés */
.porte-retour{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  padding:8px 16px;min-height:40px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:800;color:var(--navy);
  background:#fff;border:3px solid var(--line);box-shadow:0 4px 12px rgba(45,70,120,.12);
}
.porte-retour[hidden]{display:none}

/* tant que l'enfant n'a pas choisi « Les jeux », la grille et son tri
   restent repliés : il n'a qu'une seule question devant les yeux. */
body:not(.aux-jeux) .sortbar,
body:not(.aux-jeux) .games,
body:not(.aux-jeux) .count,
body:not(.aux-jeux) #defiBar{ display:none }

.livrebar{
  display:flex;align-items:center;gap:12px;
  min-height:64px;padding:10px 16px;margin-top:12px;border-radius:20px;
  text-decoration:none;color:var(--navy);
  background:linear-gradient(120deg,var(--sky),var(--mint));
  border:3px solid #fff;box-shadow:0 8px 20px rgba(45,70,120,.14);
  transition:transform .15s ease;
}
.livrebar:active{transform:scale(.98)}
.livrebar-ico{font-size:30px;line-height:1;flex:none}
.livrebar-txt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.livrebar-txt b{font-size:17px;font-weight:800;color:var(--navy);line-height:1.2}
.livrebar-txt span{font-size:13px;font-weight:700;color:var(--ink-soft);line-height:1.25}
.livrebar-fleche{font-size:26px;line-height:1;flex:none;color:var(--blue);font-weight:800}
/* en hébreu, la flèche montre l'autre côté */
[dir="rtl"] .livrebar-fleche{transform:scaleX(-1)}
@media (max-width:420px){
  .livrebar{padding:9px 12px;gap:10px}
  .livrebar-txt b{font-size:16px}
}

/* ============================================================
   L'ACCUEIL, EN PLUS COMPACT

   Le haut de l'accueil (le logo, Arye sur son globe, la bulle, le
   compteur, le défi, la bibliothèque, le tri) poussait les jeux très
   bas : 1078 px sur un téléphone, 1163 px sur un ordinateur — dans les
   deux cas il fallait défiler un écran entier avant de voir un seul jeu.

   Deux réponses, une par forme d'écran :
   · sur un téléphone, on resserre les écarts et on rapetisse un peu
     Arye et son globe, sans rien déplacer ;
   · sur un ordinateur, la fenêtre est large et vide sur les côtés :
     Arye passe à gauche et tout le reste à droite, en deux colonnes.
   ============================================================ */

/* ---------- 1. resserrer, sur tous les écrans ---------- */
.accueil .hero{ padding:2px 0 0 }
.accueil .rule{ margin-top:9px }
.accueil .claim{ margin-top:7px }
.accueil .welcome{ margin-top:6px }
.accueil .bubble{ padding:14px 20px }
.accueil .pick{ gap:8px; margin:10px 0 0 }
.accueil .games{ margin-top:16px }

/* ---------- 2. téléphone : on gagne de la hauteur partout un peu ----------
   Aucun bloc ne disparaît : le logo, Arye, la bulle, le défi et la
   bibliothèque sont tous encore là, simplement moins écartés. Le
   sous-titre de la bibliothèque, lui, passe sur l'ordinateur seulement :
   sur un téléphone la ligne « La bibliothèque d'Arye » suffit.          */
@media (max-width:560px){
  .accueil .logo{ width:62px }
  .accueil .rule{ margin-top:0 }
  .accueil .claim{ margin-top:5px; padding:6px 12px; font-size:15px }

  /* le bandeau des profils : même message, moins haut */
  .accueil #famBar{ margin-top:8px }
  .accueil #famBar .fbtxt,
  .accueil #famBar > *{ font-size:12px }

  .accueil .welcome{ margin-top:0 }
  .accueil .mascot{ width:clamp(100px,28vw,138px) }
  .accueil .globe{ width:min(49vw,186px); margin-top:-30px }

  .accueil .bubble{ margin-top:4px; padding:11px 15px; font-size:15.5px; border-width:2px }
  .accueil .pick{ gap:7px; margin-top:8px }
  .accueil .count{ font-size:13.5px }

  .accueil .livrebar{ padding:7px 12px; gap:9px }
  .accueil .livrebar-ico{ font-size:24px }
  .accueil .livrebar-txt b{ font-size:15.5px }
  .accueil .livrebar-txt span{ display:none }   /* le sous-titre, sur ordinateur seulement */
  .accueil .livrebar{ min-height:52px }
  .accueil .games{ margin-top:12px }

  /* Le bouton de l'album garde 44 px de haut — une cible tactile
     confortable — mais sa largeur reste libre : depuis qu'il porte son nom
     (« Mon album »), une largeur fixe de 44 px faisait déborder l'icône sur
     le profil d'à côté et le mot par-dessus le rond. */
  .accueil .fam-albumbtn{ width:auto; height:44px; font-size:13.5px; padding:0 12px 0 9px }
  .accueil .fam-albumbtn .fam-albumico{ font-size:19px }
  .accueil .fam-vide{ font-size:12.5px; padding:4px 2px }
  .accueil .defi-banniere{ min-height:46px; padding:8px 12px }
  .accueil .sortbar{ padding:4px 6px 4px 10px }
  .accueil .sortbtn{ padding:6px 11px }
}

/* les marges propres du défi et de la bibliothèque s'ajoutaient à
   l'espacement de .pick : dans cette colonne, c'est le gap qui décide. */
.accueil #defiBar{ margin:0 }
.accueil .livrebar{ margin-top:0 }

/* ---------- 2 bis. la bulle est passée sous Arye, dans .pick ----------
   Elle y est au même endroit qu'avant sur un téléphone (juste sous le
   globe), et sur un ordinateur elle rejoint la colonne de droite, ce qui
   équilibre les deux colonnes et remonte les jeux d'autant.
   Sa flèche pointe donc toujours vers le haut, quelle que soit la taille
   de l'écran.                                                            */
.accueil .bubble{
  margin:6px 0 0; max-width:none; text-align:center;
}
.accueil .bubble::before,.accueil .bubble::after{
  left:50%; top:-21px; bottom:auto; margin-left:-9px;
  border-right-color:transparent; border-bottom-color:var(--sky);
}
.accueil .bubble::after{ top:-16px; border-bottom-color:#fff }

/* ---------- 3. ordinateur : deux colonnes ----------
   Le .wrap redevient une grille : Arye occupe la colonne de gauche, la
   bulle et les boutons celle de droite, et les jeux reprennent toute la
   largeur en dessous. Aucun changement dans le HTML : c'est le même
   empilement, simplement replié.                                       */
@media (min-width:1000px){
  .accueil .wrap{
    display:grid;
    grid-template-columns:minmax(0,44%) minmax(0,1fr);
    column-gap:28px; align-items:center;
  }
  /* .fixe n'existe que pour le téléphone : sur l'ordinateur il s'efface
     et la grille voit directement ses enfants */
  .accueil .fixe{ display:contents }
  /* ce qui garde toute la largeur */
  .accueil .wrap > .haut,
  .accueil .wrap > .topbar,
  .accueil .wrap > #famBar,
  .accueil .wrap > .games,
  .accueil .wrap > nav,
  .accueil .wrap > .sig{ grid-column:1 / -1 }

  .accueil .wrap > .welcome{ grid-column:1; margin:0; max-width:none }
  .accueil .wrap > .pick{ grid-column:2; margin:0; align-items:stretch }

  /* Sur la page des jeux, Arye et la bulle ne sont plus affiches : la
     grille en deux colonnes n'a plus d'objet, tout redevient une pile
     centree, comme dans la bibliotheque. */
  .accueil.aux-jeux .wrap{ display:block }
  .accueil.aux-jeux .wrap > .pick{ align-items:center }

  /* la colonne de gauche ne porte plus qu'Arye : un cran plus petit
     pour que les deux colonnes fassent à peu près la même hauteur */
  .accueil .welcome{ flex-direction:column; gap:0 }
  .accueil .mascot{ width:clamp(140px,12vw,168px) }
  .accueil .globe{ width:clamp(230px,20vw,272px); margin-top:-44px }
  .accueil .bubble{ margin:0 0 4px; font-size:19px; padding:16px 22px }
  /* en deux colonnes, Arye est à gauche de la bulle : la flèche repointe
     vers lui, au lieu de désigner le ciel au-dessus. */
  .accueil .bubble::before,.accueil .bubble::after{
    left:-15px; top:auto; bottom:24px; margin-left:0;
    border-bottom-color:transparent; border-right-color:var(--sky);
  }
  .accueil .bubble::after{ left:-10px; bottom:24px; border-right-color:#fff }
  /* en hébreu la page se lit de droite à gauche : Arye passe à droite,
     et la flèche de la bulle avec lui. */
  [dir="rtl"] .accueil .bubble::before,
  [dir="rtl"] .accueil .bubble::after{
    left:auto; right:-15px;
    border-right-color:transparent; border-left-color:var(--sky);
  }
  [dir="rtl"] .accueil .bubble::after{ right:-10px; border-left-color:#fff }

  /* la colonne de droite : tout à la même largeur, aligné à gauche */
  .accueil .pick > *{ align-self:stretch }
  .accueil .count{ text-align:start; font-size:16px }
  .accueil .sortbar{ align-self:start }
  .accueil .livrebar{ max-width:none }
  .accueil #defiBar > *{ width:100% }

  /* ... sauf sur la page des jeux, ou la pile est de nouveau centree */
  .accueil.aux-jeux .pick > *{ align-self:center }
  .accueil.aux-jeux .count{ text-align:center }
}


/* ============================================================
   L'APPLICATION SUR IPHONE — zones système, barre haute collée,
   et un accueil qui tient dans l'écran sans défiler
   ============================================================ */

/* ---------- 1. les zones système ----------
   viewport-fit=cover étend la page sous l'heure et la batterie (et sous
   la barre d'accueil en bas). En haut, c'est la barre des boutons qui
   rend cette place (§2) ; en bas, le .wrap. */
:root{
  --sat:env(safe-area-inset-top, 0px);      /* l'heure, la batterie */
  --sab:env(safe-area-inset-bottom, 0px);   /* la barre d'accueil */
}
html{ overflow-x:clip }
.wrap{ padding-top:0; padding-bottom:calc(40px + var(--sab)) }
.sitefoot{ padding-bottom:calc(34px + var(--sab)) }

/* ---------- 2. le cadre du haut reste collé en haut ----------
   Sur la page des jeux et dans la bibliothèque, tout le cadre — le
   bouton de retour, la roue des parents, le titre et son sous-titre —
   ne quitte jamais l'écran : il se colle sous l'heure quand la liste
   défile, sur un fond de ciel flou qui garde l'heure et la batterie
   lisibles. Dans les jeux eux-mêmes, c'est la petite barre .top.
   Sur le web (pas de zone système) le cadre n'a que sa hauteur normale. */
.top,
.lv-haut,
body.aux-jeux .haut{
  position:sticky; top:0; z-index:55;
  padding-top:calc(8px + var(--sat)); padding-bottom:6px;
  margin-bottom:6px;
}
.top::before,
.lv-haut::before,
body.aux-jeux .haut::before{
  content:""; position:absolute; top:0; bottom:0; z-index:-1;
  left:50%; width:100vw; margin-left:-50vw;
  background:linear-gradient(180deg, rgba(47,164,239,.97) 0%, rgba(47,164,239,.86) 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
/* dans le cadre de la bibliothèque, la petite barre n'est plus collée
   toute seule : c'est le cadre entier qui l'est */
.lv-haut .top{ position:static; padding-top:0; padding-bottom:0; margin-bottom:2px }
.lv-haut .top::before{ content:none }
.lv-haut .lv-tete{ margin-bottom:0 }
/* la page des jeux : la barre garde la hauteur de ses boutons (posés en
   absolu), le titre se range juste dessous, dans le même cadre */
body.aux-jeux .topbar{ padding-top:0; margin-bottom:6px }
body.aux-jeux .jx-back,
body.aux-jeux .topbar .topbtns{ top:0 }
body.aux-jeux .jx-tete{ margin-bottom:0 }
/* sur l'accueil (la porte), rien ne défile : la barre garde juste sa
   marge sous l'heure, sans fond */
body.accueil:not(.aux-jeux) .topbar{ padding-top:calc(6px + var(--sat)) }
body.accueil:not(.aux-jeux) .topbar .topbtns{ top:calc(6px + var(--sat)) }

/* ---------- 3. l'accueil tient dans l'écran, sans défiler ----------
   Sur un téléphone ou une tablette, la porte (titre, Arye sur son globe,
   la bulle, les deux cartes) occupe exactement la hauteur de l'écran :
   les cartes se posent en bas, Arye prend la place qui reste au milieu.
   Rien ne dépasse, rien ne bouge. */
@media (max-width:999px){
  /* la page est figée : le corps est cloué à l'écran (position:fixed),
     ce qui supprime aussi le petit rebond d'iOS quand on tire la page */
  html:has(body.accueil:not(.aux-jeux)){ height:100%; overflow:hidden; overscroll-behavior:none }
  body.accueil:not(.aux-jeux){
    position:fixed; inset:0; width:100%; height:100%;
    overflow:hidden; overscroll-behavior:none;
  }
  body.accueil:not(.aux-jeux) .wrap{
    height:100%; min-height:0; box-sizing:border-box;
    display:flex; flex-direction:column;
    padding-bottom:calc(12px + var(--sab));
  }
  body.accueil:not(.aux-jeux) .fixe{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
  }
  body.accueil:not(.aux-jeux) .haut{ flex:none }
  /* si la hauteur manque (Safari avec ses barres, iPhone SE), c'est le
     monde d'Arye qui se resserre : les trois cartes restent toujours
     entières et visibles — la paracha ne passe jamais sous le bord. */
  body.accueil:not(.aux-jeux) .welcome{ flex:0 1 auto; min-height:56px; overflow:hidden; display:flex; align-items:flex-end; justify-content:center }
  body.accueil:not(.aux-jeux) .monde{ flex:none; margin-top:auto }
  body.accueil:not(.aux-jeux) .pick{ flex:none }
  /* sur le site (pas l'application), on garde tout de même un défilement
     de secours : mieux vaut faire glisser la page que perdre une carte */
  html:not(.natif) body.accueil:not(.aux-jeux){ overflow-y:auto }

  /* ---------- 3 ter. la page des jeux : seule la grille défile ----------
     Tout le haut (barre, titre, profils, compteur, défi du jour, tri) est
     immobile ; la grille des jeux occupe le reste de l'écran et défile
     seule, en glissant sous le bord du cadre. */
  body.accueil.aux-jeux{
    position:fixed; inset:0; width:100%; height:100%;
    overflow:hidden; overscroll-behavior:none;
  }
  body.accueil.aux-jeux .wrap{
    height:100%; min-height:0; box-sizing:border-box;
    display:flex; flex-direction:column; padding-bottom:0;
  }
  body.accueil.aux-jeux .fixe{ flex:none }
  body.accueil.aux-jeux .haut{ position:static }
  body.accueil.aux-jeux .haut::before{ content:none }
  body.accueil.aux-jeux .games{
    flex:1 1 auto; min-height:0; width:auto;
    /* dans une grille à hauteur fixe qui défile, les lignes « auto »
       s'écrasent (les tuiles sont en overflow:hidden) : on les force à
       leur hauteur de contenu */
    grid-auto-rows:max-content; align-content:start;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    margin:6px -14px 0; padding:10px 14px calc(24px + var(--sab));
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14px);
    mask-image:linear-gradient(180deg, transparent 0, #000 14px);
  }
  body.accueil.aux-jeux .pick{ margin-bottom:0 }
  body.accueil:not(.aux-jeux) .welcome{
    flex:1 1 auto; min-height:0; margin:0;
    display:flex; align-items:center; justify-content:center;
  }
  body.accueil:not(.aux-jeux) .pick{ flex:none; margin-top:0 }
  body.accueil:not(.aux-jeux) .games,
  body.accueil:not(.aux-jeux) .jx-tete{ display:none }
}
@media (max-width:560px){
  .accueil .brandbar{ gap:2px }
  .accueil .brandbar .logo,
  .accueil .logo{ width:54px; border-width:4px; box-shadow:0 5px 14px rgba(20,60,110,.22) }
  .accueil .marque{ font-size:clamp(34px,11vw,44px); line-height:1.05 }
  .accueil .brandbar .claim{ font-size:13.5px; padding:5px 12px; margin-top:2px }

  .accueil #famBar{ margin-top:6px; min-height:0 }
  .accueil #famBar .fam-vide{ padding:2px 0 }

  /* trois cartes en bas depuis la paracha : Arye et son globe laissent
     un peu de place, et le bloc central peut se comprimer sans déborder */
  .accueil .mascot{ width:clamp(72px,19vw,90px) }
  .accueil .globe{ width:min(36vw,140px); margin-top:-22px }
  body.accueil:not(.aux-jeux) .welcome{ overflow:hidden }

  .accueil .bubble{ margin-top:0; padding:9px 14px; font-size:15px; line-height:1.3 }
  .accueil .bubble::before{ top:-19px }
  .accueil .bubble::after{ top:-14px }
  .accueil .pick{ gap:6px }

  .porte{ grid-template-columns:1fr 1fr; gap:12px; margin-top:8px }
  .porte-carte{
    min-height:120px; padding:12px 8px 10px; gap:4px;
    border-radius:24px; border-width:3px;
  }
  /* la troisième carte, plus basse, prend toute la largeur sous les deux autres */
  .pc-paracha{ grid-column:1 / -1; min-height:0; flex-direction:row; gap:12px; padding:10px 14px }
  .pc-paracha .porte-ico{ font-size:34px }
  .porte-ico{ font-size:46px }
  .porte-carte b{ font-size:17px; line-height:1.15 }
  .porte-sous{ display:none }
}
/* écrans courts (iPhone SE, ou paysage) : Arye et son globe rapetissent
   encore pour que les cartes restent entières */
@media (max-width:999px) and (max-height:720px){
  .accueil .mascot{ width:72px }
  .accueil .globe{ width:120px; margin-top:-18px }
  .accueil .marque{ font-size:32px }
  .porte-carte{ min-height:112px }
  .porte-ico{ font-size:38px }
  .pc-paracha{ min-height:0; padding:8px 14px }
  .pc-paracha .porte-ico{ font-size:30px }
}
@media (max-width:999px) and (max-height:600px){
  .accueil .welcome{ display:none }
  .accueil #famBar{ display:none }
}
@media (max-width:375px){
  .porte-carte b{ font-size:15.5px }
}

/* ---------- 3 bis. le bouton de l'album ----------
   Un rond avec un livre, seul à droite du bandeau, ne se comprend pas :
   il devient une pastille avec son nom, à côté des profils. */
.fam-albumbtn{
  width:auto; height:44px; padding:0 14px 0 10px; border-radius:999px;
  gap:7px; font-family:inherit; font-weight:800; font-size:14px;
  color:var(--navy) !important; text-shadow:none;
}
.fam-albumbtn .fam-albumico{ font-size:20px; line-height:1 }
/* « #famBar * { color:#fff } » (famille.css) l'emportait sur cette ligne :
   le nom du bouton s'écrivait en blanc sur une pastille blanche, donc
   invisible. Le !important remet le bleu marine, comme sur le bouton. */
.fam-albumbtn .fam-albumtxt{ color:var(--navy) !important; text-shadow:none; white-space:nowrap }

/* ---------- 4. les tableaux des pages légales sur téléphone ----------
   Quatre colonnes ne tiennent pas dans 390 px : chaque ligne devient une
   petite carte, avec le nom de la colonne devant chaque valeur. */
@media (max-width:640px){
  .legal table, .legal tbody, .legal tr, .legal td{ display:block; width:100% }
  .legal thead, .legal tr:first-child:has(th){ display:none }
  .legal tr{ border:2px solid var(--line); border-radius:14px; background:#fff; margin:0 0 12px; padding:6px 0; overflow:hidden }
  .legal td{ border:0; border-top:1px solid var(--line); padding:8px 12px; font-size:14px; line-height:1.4 }
  .legal td:first-child{ border-top:0; font-weight:800; color:var(--navy) }
  .legal td::before{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px }
  .legal td:nth-child(1)::before{ content:"Donnée" }
  .legal td:nth-child(2)::before{ content:"Où" }
  .legal td:nth-child(3)::before{ content:"Durée" }
  .legal td:nth-child(4)::before{ content:"Pourquoi" }
}

/* ---------- la voix des jeux (voix.js) : le bouton 🔊 ---------- */
.vx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(180deg,#54a3ec,#2f86d8);box-shadow:0 4px 0 #1c63a8;
  font-size:22px;line-height:1;vertical-align:middle;margin-inline-start:10px;
  -webkit-tap-highlight-color:transparent;
}
.vx-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #1c63a8}
.vx-ligne{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 8px}
/* petit haut-parleur posé dans une carte-réponse (mot, nom de nekouda) */
.vx-mini{
  position:absolute;top:6px;inset-inline-end:6px;width:34px;height:34px;border-radius:50%;
  border:0;background:#e8f2ff;color:#1c63a8;font-size:17px;line-height:34px;text-align:center;
  padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.vx-mini:active{background:#cfe3ff}

/* réglages parents : la section « Histoires téléchargées » (contenu.js) */
.ms-contenu{ margin-top:18px; padding-top:16px; border-top:2px solid var(--line) }
.ms-contenu:empty{ display:none }

/* ---------- la date du jour (jour.js) et la paracha de la semaine ---------- */
.jour{
  margin:0; font-size:13px; font-weight:800; line-height:1.3; text-align:center;
  color:#fff; text-shadow:0 1px 2px rgba(16,47,79,.30);
}
.jour[hidden]{ display:none }
.jour-hebreu{ font-family:'Frank Ruhl Libre','Noto Serif Hebrew',serif; font-size:15px; unicode-bidi:isolate }
.porte-txt{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0 }
.porte-badge{
  display:inline-block; max-width:100%; padding:3px 11px; border-radius:999px;
  background:#fff; color:#7a3fa0; font-size:13px; font-weight:800; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.porte-badge[hidden]{ display:none }
@media (max-width:999px){
  .pc-paracha .porte-txt{ align-items:flex-start; text-align:left }
  html[dir="rtl"] .pc-paracha .porte-txt{ align-items:flex-end; text-align:right }
  .porte-badge{ font-size:12px; padding:2px 9px }
  .jour{ font-size:12px }
  .jour-hebreu{ font-size:13.5px }
}