/* Les fiches des apps (/sites/<app>/ et /en/sites/<app>/) : une carte pixel qui tient dans l'écran, posée sur le décor du hub.
   S'ajoute à pixel.css : même grille (--px), mêmes plaques sombres, même police, même cadre en marches d'escalier.
   Pages générées par outils/gen-fiches.mjs ; la couleur de l'app (--ac) vient de la classe c-<app> du <body>.
   La police Pixelify Sans du site n'a ni ▶ ni ◄ : les flèches sont dessinées en CSS, pixel par pixel (des ombres pleines). */
.carte,.site,.play{
  --cadre:0 calc(var(--px)*-1) 0 0 var(--c),0 var(--px) 0 0 var(--c),calc(var(--px)*-1) 0 0 0 var(--c),var(--px) 0 0 0 var(--c)}
.fiche{--s:72px}
.fiche .top{justify-content:center}

/* Le retour à l'accueil : l'enseigne, précédée d'une flèche ◄ en pixels */
.retour-hub{display:inline-flex;align-items:center;min-height:44px}
.retour-hub::before{content:"";flex:none;width:var(--px);height:var(--px);margin:0 calc(var(--px)*6) 0 calc(var(--px)*-2);background:currentColor;
  box-shadow:calc(var(--px)*3) calc(var(--px)*-3) 0 0,calc(var(--px)*2) calc(var(--px)*-2) 0 0,calc(var(--px)*3) calc(var(--px)*-2) 0 0,
    var(--px) calc(var(--px)*-1) 0 0,calc(var(--px)*2) calc(var(--px)*-1) 0 0,calc(var(--px)*3) calc(var(--px)*-1) 0 0,
    var(--px) 0 0 0,calc(var(--px)*2) 0 0 0,calc(var(--px)*3) 0 0 0,
    var(--px) var(--px) 0 0,calc(var(--px)*2) var(--px) 0 0,calc(var(--px)*3) var(--px) 0 0,
    calc(var(--px)*2) calc(var(--px)*2) 0 0,calc(var(--px)*3) calc(var(--px)*2) 0 0,calc(var(--px)*3) calc(var(--px)*3) 0 0}

/* La carte : une cartouche, avec son étiquette à la couleur de l'app */
.fiche main.carte{--c:color-mix(in srgb,var(--ac) 70%,#000);flex:none;display:flex;flex-direction:column;gap:18px;
  margin:clamp(14px,3.5vh,40px) var(--px) 20px;padding:0 18px 18px;background:var(--plaque);
  box-shadow:var(--cadre),0 calc(var(--px)*3) 0 0 rgba(0,0,0,.4),0 0 30px 2px color-mix(in srgb,var(--ac) 32%,transparent);
  animation:pop .45s steps(5) both}
.tete{display:flex;align-items:center;gap:16px;margin:0 -18px;padding:16px 18px;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--ac) 30%,var(--plaque)) 0 50%,color-mix(in srgb,var(--ac) 22%,var(--plaque)) 50%);
  border-bottom:var(--px) solid color-mix(in srgb,var(--ac) 65%,var(--plaque))}
.tete .tile{flex:none}
.titres{min-width:0}
.carte h1{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:2px;text-transform:uppercase;color:#ffe9fb;overflow-wrap:anywhere;
  text-shadow:3px 3px 0 color-mix(in srgb,var(--ac) 55%,#000)}
.accroche{margin-top:6px;font-size:17px;line-height:1.3;color:#ffe9b8}

/* Les trois points clés, puces carrées à la couleur de l'app */
.points{list-style:none;display:flex;flex-direction:column;gap:11px;padding:0 2px}
.points li{position:relative;padding-left:calc(var(--px)*5);font-size:15px;line-height:1.38;color:var(--ink)}
.points li::before{content:"";position:absolute;left:0;top:.45em;width:calc(var(--px)*2);height:calc(var(--px)*2);background:var(--ac);
  box-shadow:var(--px) var(--px) 0 0 color-mix(in srgb,var(--ac) 45%,#000)}

/* Les boutons : voir le site de l'app (couleur de l'app), puis Google Play */
.actions{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.site,.play{display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px 16px;margin:0 var(--px);text-decoration:none;text-align:center}
.site:active,.play:active{transform:translateY(var(--px))}
/* Voir le site : le bouton principal, aux couleurs de l'app, avec une flèche ↗ dessinée en pixels (5 × 5, la base est son coin bas-gauche) */
.site{--c:color-mix(in srgb,var(--ac) 55%,#000);gap:0;text-wrap:balance;font-size:18px;font-weight:700;letter-spacing:1px;line-height:1.15;text-transform:uppercase;color:var(--plaque);
  background:var(--ac);box-shadow:var(--cadre),inset 0 var(--px) 0 0 rgba(255,255,255,.35),0 calc(var(--px)*2) 0 calc(var(--px)*1) rgba(0,0,0,.45),0 0 18px 1px color-mix(in srgb,var(--ac) 45%,transparent)}
.site::before{content:"";flex:none;position:relative;top:calc(var(--px)*2);width:var(--px);height:var(--px);margin-right:calc(var(--px)*8);color:currentColor;background:currentColor;
  box-shadow:calc(var(--px)*2) calc(var(--px)*-4) 0 0,calc(var(--px)*3) calc(var(--px)*-4) 0 0,calc(var(--px)*4) calc(var(--px)*-4) 0 0,
    calc(var(--px)*4) calc(var(--px)*-3) 0 0,calc(var(--px)*4) calc(var(--px)*-2) 0 0,calc(var(--px)*3) calc(var(--px)*-3) 0 0,
    calc(var(--px)*2) calc(var(--px)*-2) 0 0,var(--px) calc(var(--px)*-1) 0 0}
.site:hover{background:color-mix(in srgb,var(--ac) 82%,#fff)}
/* Le bouton Google Play, en pixels en attendant le badge officiel (décision de H. du 15/10/2026) :
   un triangle de lecture générique, sans le logo ni les couleurs de Google. */
.play{--c:#fff3d6;gap:calc(var(--px)*5);color:var(--ink);background:#0b0818;font-size:19px;font-weight:700;line-height:1.05;letter-spacing:.5px;
  box-shadow:var(--cadre),0 calc(var(--px)*2) 0 calc(var(--px)*1) rgba(0,0,0,.45)}
.play small{display:block;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#d9cfee}
a.play::before{content:"";flex:none;width:var(--px);height:var(--px);margin-left:calc(var(--px)*-3);color:#fff3d6;background:currentColor;
  box-shadow:0 calc(var(--px)*-3) 0 0,0 calc(var(--px)*-2) 0 0,var(--px) calc(var(--px)*-2) 0 0,0 calc(var(--px)*-1) 0 0,var(--px) calc(var(--px)*-1) 0 0,
    calc(var(--px)*2) calc(var(--px)*-1) 0 0,var(--px) 0 0 0,calc(var(--px)*2) 0 0 0,calc(var(--px)*3) 0 0 0,0 var(--px) 0 0,var(--px) var(--px) 0 0,
    calc(var(--px)*2) var(--px) 0 0,0 calc(var(--px)*2) 0 0,var(--px) calc(var(--px)*2) 0 0,0 calc(var(--px)*3) 0 0}
a.play span{text-align:left}
a.play:hover{background:#1a1433;--c:#fff}
.play.bientot{--c:#5b4a99;min-height:46px;font-size:15px;font-weight:400;color:#cfc4ea;background:transparent;box-shadow:var(--cadre)}
.marque{font-size:11.5px;line-height:1.3;text-align:center;color:#a99cc9}

/* Le pied, plus serré que sur l'accueil */
.fiche .foot{padding-bottom:14px}

/* Écrans bas (petits téléphones, paysage) : tout se resserre pour tenir sans défiler — et, si ce n'est pas possible, la page défile ; rien n'est rogné */
@media(max-height:760px){
  .fiche{--s:48px}
  .fiche main.carte{gap:14px;margin-top:12px;padding-bottom:16px}
  .tete{padding:12px 18px}
  .carte h1{font-size:23px}
  .accroche{font-size:16px}
  .points{gap:8px}
  .points li{font-size:14px;line-height:1.34}
  .site,.play{min-height:48px}
  .fiche .top{margin-top:10px;padding-top:8px;padding-bottom:9px}
}
@media(max-width:340px){.carte h1{font-size:20px;letter-spacing:1px}.tete{gap:12px}}

@media(prefers-reduced-motion:reduce){
  .fiche main.carte{animation:none}
}