/* Réglages réservés aux téléphones : tout est sous html.tel (classe ajoutée dans index.html seulement pour un écran tactile de petite taille).
   L'affichage sur ordinateur et sur tablette n'est jamais modifié par ce fichier. */
html.tel #pied{font-size:8px}
html.tel.boost-fixe #pied{left:62px;right:0;padding:0 8px 0 4px;line-height:1.7;bottom:4px}
html.tel.boost-fixe #pied .modbtn{display:block;margin:4px 0 0 auto;pointer-events:auto}
html.tel.boost-fixe:has(#choixActions:not([hidden])) #pied{display:none}      /* pendant le choix des boosters, les boutons du bas ont toute la place */
html.tel:not(.boost-fixe) .pied{padding:0 8px 0 62px;margin-bottom:70px}      /* la roue des réglages ne recouvre plus le pied de page ni la fin du contenu */
html.tel #bfRegBtn{width:40px;height:40px;left:8px;bottom:8px;border-width:3px;box-shadow:3px 3px 0 var(--line)}
html.tel #bfRegBtn svg{width:24px;height:24px}
html.tel #rateRow.rate-panel{padding-left:58px}      /* la roue des réglages ne cache plus « Dealer » dans la barre du bas */
html.tel main{padding-bottom:60px}

/* téléphone en mode paysage : l'écran est trop bas pour le jeu (boosters coupés, boutons hors de l'écran) → on demande de tourner le téléphone */
#bfPortrait{display:none}
@media (orientation:landscape){
  html.tel #bfPortrait{display:flex;position:fixed;inset:0;z-index:100000;align-items:center;justify-content:center;text-align:center;padding:20px;background:var(--bg,#17133a);color:var(--ink,#f1ecff)}
  html.tel #bfPortrait span{display:block;font-size:34px;margin-bottom:10px}
  html.tel #bfPortrait p{margin:0;font-size:12px;line-height:1.7}
  html.tel body{overflow:hidden}
}

/* téléphone : la hauteur utile est celle de l'écran visible (barre d'adresse du navigateur comprise), pas la plus grande : les boutons du bas ne sont plus coupés */
html.tel main{min-height:100dvh}
html.tel .boost-stage{min-height:calc(100dvh - 190px);gap:20px;padding:12px 0 24px}
html.tel #boostStage.coupe{min-height:calc(100dvh - 150px)}
html.tel #fond{height:100dvh}
html.tel .arena-actions{padding-bottom:env(safe-area-inset-bottom,0px)}
html.tel.boost-fixe main{padding-bottom:0!important}
html.tel #boostmsg{padding:0 12px 0 58px;box-sizing:border-box}      /* la roue des réglages ne cache plus la phrase d'aide du bas */

/* ---- téléphone : Valider / Annuler un peu plus haut ---- */
html.tel #choixActions{margin-bottom:18px}
html.tel .boost-stage{padding-bottom:48px}

/* ---- téléphone : éditeur de cartes — la carte occupe l'écran, toutes les options défilent en dessous, de gauche à droite ---- */
html.tel .studio{display:flex;flex-direction:column;gap:10px}
html.tel .studio .center{order:-1;position:static;width:100%}
html.tel .studio .card{width:min(100%,calc((100dvh - 200px) * .8))}
html.tel .studio .side{display:flex;flex-direction:row;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 4px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
html.tel .studio .side:empty{display:none}
html.tel .studio .side .panel{flex:0 0 min(80vw,300px);box-sizing:border-box;margin:0 0 4px;max-height:260px;overflow-y:auto;scroll-snap-align:start}

/* ---- téléphone : visionneuse — carte plus grande, infos au-dessus, boutons en dessous ---- */
html.tel #viewDialog{--vw:min(90vw,calc((100dvh - 320px) * .818));width:var(--vw);height:auto}
html.tel #viewDialog[open]{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
html.tel #viewDialog .vside{display:contents}
html.tel #viewDialog .vcard{order:10;flex:0 0 100%;width:100%}
html.tel #viewDialog #vTitre{order:1;flex:0 0 100%;box-sizing:border-box;text-align:center;font-size:12px;padding:6px 10px}
html.tel #viewDialog #vCreateur{order:2;font-size:10px;padding:5px 10px}
html.tel #viewDialog #vRarete{order:3;padding:5px 10px;margin:0}
html.tel #viewDialog #vGold{order:4;margin:0}
html.tel #viewDialog #vVote{order:20;position:static;flex:0 0 100%;box-sizing:border-box;width:auto;max-width:none;margin:0}
html.tel #viewDialog #vFloat{order:21;margin:0}
html.tel #viewDialog #vNav{order:22;margin:0}
html.tel #viewDialog #vActions>*{order:23}
html.tel #viewDialog #vSignal{order:24}
html.tel #viewDialog #vMsg{order:25;flex:0 0 100%;text-align:center}
html.tel #viewDialog #vClose{order:26}
html.tel #viewDialog .vitem{--sx:0px;--sy:18px}
html.tel #vueEditeur,html.tel .studio{min-width:0;max-width:100%;box-sizing:border-box}
html.tel .studio>*{min-width:0;max-width:100%}
html.tel #viewDialog #vIncline{position:static;order:11;flex:0 0 100%;top:auto}

/* couches : boutons un peu plus grands au doigt, lignes plus hautes (la liste montre toujours 5 couches) */
html.tel .laylist{--rh:58px;height:auto;min-height:calc(2 * (var(--rh) + 4px));max-height:calc(4 * (var(--rh) + 4px))}      /* la liste suit le nombre de couches (de 2 à 4 lignes visibles, ensuite elle défile) : plus de grand vide en bas de l'éditeur */
html.tel .lrow button.lib{width:24px;height:24px;min-width:0;min-height:0;padding:2px}
html.tel .lrow .lnom{min-height:0;height:24px;padding:1px 6px;font-size:8px}
html.tel .lrow .lnom-in{height:24px;min-height:0}
html.tel .lrow .lop{height:16px}

/* Téléphone : le booster qui s'ouvre est plus gros, et le ciseau un peu plus bas */
html.tel .packs.file .pack.ouvert{--zoom:1.15;--zy:calc(var(--pw) * .02)}
html.tel #boostStage.coupe .sci-zone{margin-top:26px}

/* échanges sur téléphone : bandes plus compactes */
html.tel #trDialog .trtuile{width:80px}
html.tel #trDialog .trslot .trtuile{width:66px}
html.tel #trDialog .trhead{padding:6px 10px;gap:8px}
html.tel #trDialog .trmid{font-size:20px;padding:0 4px}
html.tel #trDialog .trhalf{padding:4px 5px;border-width:3px}
html.tel #trDialog .trfoot .hint{display:none}
html.tel #trDialog .trzone{padding:6px}

/* Téléphones très longs et étroits (et petits écrans type iPhone SE) (iPhone 16 / 16 Pro Max, Pixel 9 / 9 Pro / 10, Galaxy A55…) : visionneuse plus petite et resserrée,
   pour que le cadre et les infos restent loin des bords de l'écran */
html.tel.long #viewDialog{--vw:min(78vw,calc((100dvh - 330px) * .818));height:fit-content;max-height:100dvh;align-content:center;gap:8px 6px}
html.tel.long #viewDialog #vTitre{font-size:11px;padding:4px 8px}
html.tel.long #viewDialog #vCreateur{font-size:9px;padding:4px 8px}
html.tel.long #viewDialog #vRarete{font-size:9px;padding:4px 8px}
html.tel.long #viewDialog #vFloat,html.tel.long #viewDialog #vGold{font-size:9px;padding:5px 8px}
html.tel.long #viewDialog #vActions button,html.tel.long #viewDialog #vSignal,html.tel.long #viewDialog #vClose,html.tel.long #viewDialog #vNav button{font-size:9px;padding:6px 10px}

/* visionneuse téléphone : la carte garde sa propre ligne (même rétrécie), et si tout ne tient pas à l'écran les boutons se resserrent (voir mobile.js) */
html.tel #viewDialog::before,html.tel #viewDialog::after{content:"";flex:0 0 100%;height:0;margin:-4px 0}
html.tel #viewDialog::before{order:9}html.tel #viewDialog::after{order:11}
html.tel #viewDialog #vCard{margin-left:auto;margin-right:auto}
html.tel #viewDialog.serre{gap:6px 4px}
html.tel #viewDialog.serre button{padding:5px 9px;font-size:9px;min-height:0;box-shadow:3px 3px 0 var(--line);border-width:3px;line-height:1.3}
html.tel #viewDialog.serre #vNav{gap:6px;padding:2px 6px;font-size:9px}
html.tel #viewDialog.serre #vNav button{padding:3px 8px}
html.tel #viewDialog.serre #vTitre{padding:3px 8px;font-size:10px}
html.tel #viewDialog.serre #vCreateur,html.tel #viewDialog.serre #vRarete,html.tel #viewDialog.serre #vFloat,html.tel #viewDialog.serre #vGold{padding:3px 8px;font-size:9px;line-height:1.3}
/* la boîte garde une largeur confortable pour les infos et boutons ; seule la carte suit --vw (calculé d'après la hauteur de l'écran) */
html.tel #viewDialog{width:min(92vw,400px)}
html.tel #viewDialog .vcard{flex:0 0 auto;width:var(--vw)}
/* échanges sur téléphone : loupe petite (les boutons du site ont une taille minimale au doigt), cartes plus courtes */
html.tel #trDialog .trloupe{min-width:0;min-height:0;width:20px;height:20px;padding:0;font-size:10px;right:2px;top:2px;box-shadow:1px 1px 0 var(--line);border-width:2px}
html.tel #trDialog .trtuile .rar{display:none}
html.tel #trDialog .trstrip{overflow-y:auto}
html.tel #trDialog .trhead .trx{min-width:0;min-height:0;padding:2px 8px}
html.tel #trDialog .trfoot{padding:6px 8px 8px}
/* dossiers de la galerie : le message « aucune carte… » reste dans la bande, sans déborder sous le gros bouton */
html.tel .dstrip .empty{flex:0 1 auto;box-sizing:border-box;max-width:calc(100vw - 210px);min-width:0;white-space:normal;text-align:center;margin-left:12px}

/* visionneuse (tablettes, petits écrans d'ordinateur) : boutons resserrés quand le panneau de droite dépasse de l'écran (voir mobile.js) */
#viewDialog.serre button{padding:5px 9px;font-size:9px;min-height:0;box-shadow:3px 3px 0 var(--line);border-width:3px;line-height:1.3}
#viewDialog.serre .vside{gap:6px}

/* Halo du bouton « Oh dealer ! » : la scène des boosters était coupée 16 px avant chaque bord de l'écran (marges de la page).
   On l'élargit jusqu'aux bords de l'écran en compensant avec un rembourrage : le contenu ne bouge pas. */
html.tel #boostStage{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}

/* Pages « Oh dealer ! » et choix des boosters sur téléphone : aucun défilement possible (ni au doigt, ni par rebond).
   Le corps de la page est collé à l'écran visible ; ce qui dépasse est simplement coupé (il n'y a là que des éléments invisibles). */
html.tel.boost-fixe,html.tel.boost-fixe body{overflow:hidden!important;overscroll-behavior:none}
html.tel.boost-fixe body{position:fixed;inset:0;width:100%;height:100dvh}
/* la phrase du dealer (« Alors, lesquels tu prends ? »…) reste toujours visible, collée en bas de l'écran, au-dessus du pied de page */
html.tel.boost-fixe #boostmsg{position:fixed;left:0;right:0;bottom:34px;z-index:4;pointer-events:none}
html.tel.boost-fixe:has(#choixActions:not([hidden])) #boostmsg{bottom:2px}

/* Téléphone : les phrases du dealer (« Alors, lesquels tu prends ? »…) ne s'affichent plus. Seuls les messages d'erreur restent visibles (ils expliquent pourquoi rien ne se passe). */
html.tel #boostmsg:not(.erreur){display:none}

/* Sélecteur de couleur maison (voir mobile.js) : réglages teinte / saturation / valeur, gros curseurs tactiles */
html.tel #selCoul{width:min(92vw,420px);padding:14px;border:3px solid var(--line);background:var(--panel);color:var(--ink);box-shadow:6px 6px 0 var(--line)}
html.tel #selCoul::backdrop{background:rgba(0,0,0,.7)}
html.tel #selCoul h2{font-size:11px;margin:0 0 10px}
html.tel #selCoul .sc-apercu{height:54px;border:3px solid var(--line);margin-bottom:12px}
html.tel #selCoul .sc-ligne{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;font-size:9px;margin:10px 0}
html.tel #selCoul input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;border:3px solid var(--line);border-radius:0;padding:0;margin:0}
html.tel #selCoul input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:38px;background:var(--panel);border:3px solid var(--line);border-radius:0;box-shadow:2px 2px 0 var(--line)}
html.tel #selCoul input[type=range]::-moz-range-thumb{width:18px;height:34px;background:var(--panel);border:3px solid var(--line);border-radius:0}
html.tel #selCoul .sc-hex{margin-top:6px;font-size:12px;text-transform:lowercase}
html.tel #selCoul .sc-actions{display:flex;gap:10px;margin-top:14px}

/* Galerie sur téléphone : dossiers plus compacts, cartes plus petites (plus de cartes à l'écran), et bandes de cartes qui vont jusqu'au bord de l'écran (elles étaient coupées 16 px avant) */
html.tel .dossiers{margin-right:-16px;gap:12px}
html.tel .dcol{width:92px;gap:6px}
html.tel .dbtn{font-size:8px;padding:9px 4px!important;box-shadow:4px 4px 0 var(--line);border-width:3px}
html.tel .dbtn small{font-size:6px}
html.tel .dossier.rentre .dbtn small{top:calc(9px + 12px + 8px)}
html.tel .dopts{left:6px;right:6px;bottom:6px;gap:4px}
html.tel .dopt{font-size:6.5px;padding:5px 3px;box-shadow:2px 2px 0 var(--line)}
html.tel .dstrip{gap:12px;padding:30px 24px 30px 20px}
html.tel .dstrip .mini button:not(.lien),html.tel #galerie .mini button:not(.lien){font-size:8px;padding:6px 4px;min-height:0;box-shadow:3px 3px 0 var(--line);border-width:3px}
html.tel .dstrip .mini{width:clamp(88px,26vw,112px)}
html.tel .dossier.ouvert .dstrip{min-height:170px}
html.tel .dstrip .empty{max-width:calc(100vw - 150px);margin-left:8px}
/* résultats de la recherche : 3 colonnes de cartes étroites */
html.tel .saved.big{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:16px 10px}

/* Galerie (téléphone) : plus de nom de créateur sous les cartes */
html.tel :is(#galerie,.dstrip) .mini .t:has(> .lien){display:none}
html.tel .dstrip{padding-top:46px;padding-bottom:42px;margin-top:-40px;margin-bottom:-40px}

/* Galerie (téléphone) : « Favoris » et « Tri » ne sont plus sur les dossiers, ils sont dans la fenêtre « Tout voir » */
html.tel .dopt:not([data-opt="tout"]){display:none}
html.tel .tv-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 10px}
html.tel .tv-opts button{font-size:8px;padding:6px 8px;min-height:0;line-height:1.4;box-shadow:3px 3px 0 var(--line);border-width:3px}
html.tel .tv-opts button[aria-pressed=true]{background:var(--accent);color:var(--on-accent,#fff)}
/* texte des boutons de dossier : un cran plus petit pour ne plus dépasser */
html.tel .dbtn{font-size:7px}
html.tel .dbtn small{font-size:6px}
html.tel .dopt{font-size:6px;padding:5px 2px;line-height:1.3;overflow-wrap:anywhere}
/* cartes : au-dessus du relief du bouton (ombre), mais coupées net à son bord ; halo qui s'estompe en haut, en bas et près du bouton */
html.tel .dstrip{position:relative;z-index:3}

/* Couches (téléphone) : la liste défile au doigt ; on réordonne en tirant la poignée ⠿ */
html.tel .lrow{touch-action:pan-y;cursor:default}
html.tel .lrow .lpoi{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;font-size:16px;line-height:1;touch-action:none;cursor:grab;color:inherit;opacity:.8}
html.tel .lrow.apercu{touch-action:pan-y}
html.tel .degpanel{width:min(230px,calc(100vw - 20px))}