/* Refonte « Les touches » — composants (spec §3.3, §3.4, §4.1). */

/* ---------- touche : épaisse, arrondie, elle s'enfonce ---------- */
.t-touche{display:block;background:var(--touche);color:var(--encre);border:0;border-radius:var(--r-touche);
  font:inherit;text-align:left;text-decoration:none;cursor:pointer;width:100%;
  box-shadow:inset 0 -5px 0 var(--touche-bord),0 2px 0 var(--touche-ombre),0 12px 20px -14px rgba(0,0,0,.35);
  transition:transform var(--duree-appui) ease,box-shadow var(--duree-appui) ease}
/* Pas de reflet gris d'iOS par-dessus les touches : l'appui suffit. */
.t-touche,.t-btn,.t-nav-item,.t-logo{-webkit-tap-highlight-color:transparent}
/* À la souris : la touche se tend de 2 px sous le curseur, avant de s'enfoncer à l'appui (règles :active plus bas).
   Pas sur écran tactile (le survol y resterait collé), ni sur les pavés qui ne sont pas eux-mêmes une action. */
@media (hover:hover) and (pointer:fine){
  :is(a,button).t-touche:not([disabled]):hover:not(:active,.t-appui),label.t-touche:not(.t-saison--off):hover:not(:active),
  .t-btn:not([disabled]):hover:not(:active,.t-appui),.t-puce:hover:not(:active),.t-vu-btn:hover:not(:active,.t-appui),
  .t-nav--haut .t-nav-item:hover:not(:active){transform:translateY(-2px)}
}
.t-touche:active,.t-touche.t-appui{transform:translateY(var(--appui));
  box-shadow:inset 0 -1px 0 var(--touche-bord),0 1px 0 var(--touche-ombre),0 4px 8px -6px rgba(0,0,0,.35)}

/* ---------- boutons ---------- */
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;
  padding:13px 18px;font:800 1rem var(--f-texte);letter-spacing:-.01em;cursor:pointer;text-decoration:none;
  min-height:48px;transition:transform var(--duree-appui) ease,box-shadow var(--duree-appui) ease}
.t-btn svg{width:18px;height:18px}
.t-btn--jaune{background:var(--jaune);color:var(--noir);box-shadow:inset 0 -5px 0 var(--jaune-bord),0 2px 0 #9aa600}
.t-btn--blanc{background:var(--touche);color:var(--encre);box-shadow:inset 0 -5px 0 var(--touche-bord),0 2px 0 var(--touche-ombre)}
.t-btn--noir{background:var(--noir);color:var(--encre-inv);box-shadow:inset 0 -5px 0 #2a2a2b,0 2px 0 #000}
/* Action sans retour (se déconnecter) : touche rouge, texte blanc (contraste 4,8:1). */
.t-btn--danger{background:#d92d20;color:#fff;box-shadow:inset 0 -5px 0 #a81d14,0 2px 0 #7f150f}
.t-btn:active{transform:translateY(var(--appui));box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
.t-btn[disabled]{opacity:.55;cursor:default}

/* ---------- pastilles, accroches, rond « en cours » ---------- */
.t-pastille{display:inline-flex;align-items:center;gap:5px;font:400 .75rem var(--f-pixel);letter-spacing:.02em;
  padding:3px 7px;border-radius:8px;background:var(--noir);color:var(--encre-inv);line-height:1.2}
.t-pastille--jaune{background:var(--jaune);color:var(--noir)}
.t-pastille--orange{background:var(--orange);color:var(--noir)}
.t-pastille--blanc{background:var(--touche);color:var(--encre)}
.t-mono{font:400 .76rem var(--f-mono);color:var(--encre-2)}
.t-rond{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--orange);position:relative;flex:0 0 auto}
.t-rond::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--orange);animation:t-clignote 1.2s steps(2,start) infinite}
.t-rond{background:#ffb08f}
@keyframes t-clignote{50%{opacity:0}}
/* Vignettes : une couleur par sens, texte noir partout, toujours sur une ligne. */
.t-pastille{white-space:nowrap}
.t-pastille--film{background:var(--bleu-vif);color:var(--noir)}
.t-pastille--serie{background:var(--jaune);color:var(--noir)}
.t-pastille--vu,.t-dispo-la{background:var(--menthe);color:var(--noir)}
.t-peuple-mini{font:400 .75rem var(--f-mono);color:var(--encre-2)}
.t-note{font:400 .75rem var(--f-pixel);background:var(--jaune);color:var(--noir);padding:1px 5px;border-radius:5px}

/* ---------- barre du haut ---------- */
.t-haut{position:sticky;top:0;z-index:50;background:var(--haut-fond);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding-top:env(safe-area-inset-top,0px);box-shadow:0 1px 0 var(--haut-trait)}
.t-haut-in{max-width:var(--largeur);margin:0 auto;padding:10px var(--gouttiere);display:flex;align-items:center;gap:12px;min-height:var(--haut-h)}
.t-logo{font:900 1.3rem var(--f-texte);letter-spacing:-.055em;color:var(--encre);background:none;border:0;padding:4px 2px;cursor:pointer;min-height:44px}
.t-logo b{background:var(--jaune);padding:0 4px;border-radius:6px;font-weight:900}
.t-haut-droite{margin-left:auto;display:flex;align-items:center;gap:10px}
.t-carre{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;padding:0;font:900 1rem var(--f-texte)}
.t-carre svg{width:21px;height:21px}
/* La lettre de Mon espace s'allume comme un onglet quand on y est. */
.t-carre[aria-current="page"]{background:var(--jaune);color:var(--noir);box-shadow:inset 0 -5px 0 var(--jaune-bord),0 2px 0 #9aa600}
.t-cloche{position:relative}
.t-cloche .t-compte{position:absolute;top:-6px;right:-8px;display:inline-flex;align-items:center;gap:4px;background:var(--noir);color:var(--encre-inv);
  font:400 .7rem var(--f-pixel);border-radius:9px;padding:3px 6px}
.t-cloche .t-compte .t-rond{width:7px;height:7px}

/* ---------- navigation : barre du bas (téléphone), rangée du haut (ordinateur) ---------- */
.t-nav{display:flex;gap:6px}
.t-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:64px;min-height:48px;
  padding:6px 10px;border:0;border-radius:14px;background:none;color:inherit;font:400 .75rem var(--f-pixel);letter-spacing:0;
  text-decoration:none;cursor:pointer;position:relative;transition:transform var(--duree-appui) ease}
.t-nav-item svg{width:21px;height:21px}
.t-nav-item:active{transform:translateY(2px)}
.t-nav-item[aria-current="page"]{background:var(--jaune);color:var(--noir)}
.t-nav-item .t-compte{position:absolute;top:2px;right:8px;background:var(--orange);color:var(--noir);font:400 .7rem var(--f-pixel);border-radius:7px;padding:1px 4px}
.t-bas{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:0 10px calc(10px + env(safe-area-inset-bottom,0px))}
.t-bas .t-nav{max-width:520px;margin:0 auto;background:var(--noir);color:var(--encre-inv);border-radius:22px;padding:8px;justify-content:space-around;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
/* Bulle jaune de la barre du bas : un seul élément qui glisse d'un onglet à l'autre (ui.js, placeBulle). */
.t-bas .t-nav{position:relative}
/* Téléphones (< 420 px) : les onglets se partagent toute la largeur, la bulle jaune garde de l'air autour du mot. */
@media (max-width:419px){.t-bas .t-nav{gap:0;padding:6px 4px}.t-bas .t-nav-item{flex:1 1 auto;min-width:0;padding:6px 4px;font-size:.72rem}}
/* Très petits écrans (iPhone SE en affichage agrandi, 320 px) : onglets resserrés. */
@media (max-width:359px){.t-bas{padding-left:6px;padding-right:6px}.t-bas .t-nav{gap:2px;padding:6px}.t-bas .t-nav-item{flex:1 1 auto;min-width:0;padding:6px 2px;font-size:.6rem}}
.t-nav-bulle{position:absolute;top:0;left:0;width:0;height:0;border-radius:14px;background:var(--jaune);opacity:0;
  pointer-events:none;will-change:transform,width;transition:opacity var(--duration-fast) ease}
.t-nav--bas .t-nav-item{transition:transform var(--duree-appui) ease,color var(--duration-fast) ease}
.t-nav--bas.a-bulle .t-nav-item[aria-current="page"]{background:none}
.t-nav--haut{display:none}
/* Téléphone : seul l'onglet de la page en cours montre son nom ; les autres ne gardent que l'icône (le nom reste lu par les lecteurs d'écran). */
.t-nav--bas .t-nav-item{gap:0}
.t-nav--bas .t-nav-txt{display:grid;grid-template-rows:1fr;opacity:1;line-height:1.55;
  transition:grid-template-rows var(--duration-fast) var(--ease-smooth-out),opacity var(--duration-quick) ease}
.t-nav--bas .t-nav-txt>span{min-height:0;overflow:hidden}
.t-nav--bas .t-nav-item:not([aria-current="page"]) .t-nav-txt{grid-template-rows:0fr;opacity:0}
@media (prefers-reduced-motion:reduce){.t-nav--bas .t-nav-txt{transition:none}}
@media (min-width:900px){
  .t-bas{display:none}
  .t-nav--haut{display:flex;margin-left:18px}
  .t-nav--haut .t-nav-item{flex-direction:row;font-size:.75rem;min-height:44px;background:var(--touche);
    box-shadow:inset 0 -4px 0 var(--touche-bord),0 1px 0 var(--touche-ombre)}
  .t-nav--haut .t-nav-item[aria-current="page"]{background:var(--jaune);box-shadow:inset 0 -4px 0 var(--jaune-bord)}
  .t-nav--haut .t-nav-item:active{transform:translateY(3px);box-shadow:inset 0 -1px 0 var(--touche-bord)}
}
.t-btn--petit{min-height:44px;padding:9px 14px 12px;font-size:.92rem;border-radius:14px}
/* Téléphone : les messages passent au-dessus de la barre du bas au lieu de la masquer. */
@media (max-width:899px){.theme-touches .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}}
/* Focus sur fond sombre (barre du bas, pavés anthracite) : le bleu n'y ressort pas, le jaune si. */
.t-bas :focus-visible,.t-vedette :focus-visible{outline-color:var(--jaune)}

/* ---------- couleurs des amis (lot 6) : une couleur fixe par ami, tirée de son nom ; toi en bleu-vif.
   Texte noir sur chaque couleur (≥ 4,5:1) ; --ami-t = teinte claire des plaques. ---------- */
.t-ami-0{--ami:#ff7a3d;--ami-t:#ffe1d3}
.t-ami-1{--ami:#7cf5b4;--ami-t:#dcfbea}
.t-ami-2{--ami:#a3b5ff;--ami-t:#e4e9ff}
.t-ami-3{--ami:#edff00;--ami-t:#f9ffbf}
.t-ami-4{--ami:#ff9ecf;--ami-t:#ffe3f1}
.t-ami-moi{--ami:#3d7bff;--ami-t:#dbe6ff}
.t-av{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;flex:0 0 auto;background:var(--ami,var(--creux));color:var(--noir);
  font:400 .78rem/1 var(--f-pixel);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.t-av--petit{width:24px;height:24px;font-size:.7rem}
.t-av--photo{overflow:hidden}
.t-av--photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;pointer-events:none}
.acct-btn img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;pointer-events:none}

/* ---------- mode sombre (lot 7) : teintes des amis assombries (texte clair dessus) ---------- */
:root[data-theme="sombre"] .t-ami-0{--ami-t:#3b2419}
:root[data-theme="sombre"] .t-ami-1{--ami-t:#163428}
:root[data-theme="sombre"] .t-ami-2{--ami-t:#232a45}
:root[data-theme="sombre"] .t-ami-3{--ami-t:#30331a}
:root[data-theme="sombre"] .t-ami-4{--ami-t:#3d2232}
:root[data-theme="sombre"] .t-ami-moi{--ami-t:#1c2a4d}

/* Touche clair / sombre de la barre du haut : lune en clair, soleil en sombre. */
/* Les deux icônes occupent la même case et se relaient en fondu (opacité, échelle, flou). */
.t-theme svg{grid-area:1/1;transition:opacity var(--duration-fast) cubic-bezier(.2,0,0,1),scale var(--duration-fast) cubic-bezier(.2,0,0,1),filter var(--duration-fast) cubic-bezier(.2,0,0,1)}
.t-theme .i-soleil,:root[data-theme="sombre"] .t-theme .i-lune{opacity:0;scale:.25;filter:blur(4px)}
:root[data-theme="sombre"] .t-theme .i-soleil{opacity:1;scale:1;filter:none}
@media (prefers-reduced-motion:reduce){.t-theme svg{transition:none}}
/* « pop » sur sa touche jaune : toujours en noir. */
.t-logo b,.t-porte-logo b,.t-porte-mini b{color:var(--noir)}
/* Très petits écrans (< 360 px) : trois touches en haut à droite ; le logo se resserre pour qu'elles gardent 44 px. */
@media (max-width:359px){.t-logo{font-size:1.12rem}.t-haut-droite{gap:6px}}

/* ---------- mode sombre : silhouettes et séparations (critique du lot 7) ---------- */
/* Objets noirs (barre du bas, touche noire, filtres ouverts) : un fin liseré clair pour garder leur forme. */
:root[data-theme="sombre"] .t-bas .t-nav{box-shadow:0 0 0 1px rgba(255,255,255,.09),0 10px 30px -12px #000}
:root[data-theme="sombre"] .t-btn--noir,:root[data-theme="sombre"] .t-filtres-btn[aria-expanded="true"]{box-shadow:inset 0 -5px 0 #000,0 0 0 1px rgba(255,255,255,.1)}
/* Champs de saisie : un contour visible (≥ 3:1 avec la touche). */
:root[data-theme="sombre"] .t-saisie,:root[data-theme="sombre"] .t-zone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
/* Fenêtres : fond plus sombre derrière, boîte bordée. */
:root[data-theme="sombre"] .modal{background:rgba(0,0,0,.72)}
:root[data-theme="sombre"] .modal .modal-box,:root[data-theme="sombre"] .t-guide-b{background:#2a2a2f;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 60px -20px #000}
/* Affiches très claires : légèrement atténuées dans la salle obscure. */
:root[data-theme="sombre"] .t-carte-aff img,:root[data-theme="sombre"] .t-vedette-art img,:root[data-theme="sombre"] .t-fiche-aff img{filter:brightness(.9)}

/* Pastille VU ✓ en tête de fiche (lot 8) : une petite touche qui propose de retirer le titre de ses vus.
   Zone de toucher agrandie à 44 px sans changer son aspect. */
.t-vu-btn{position:relative;border:0;cursor:pointer;font:inherit;font:400 .75rem var(--f-pixel);
  box-shadow:inset 0 -3px 0 #3fc988;transition:transform var(--duree-appui) ease,box-shadow var(--duree-appui) ease}
.t-vu-btn::before{content:"";position:absolute;inset:-12px -8px}
.t-vu-btn:active,.t-vu-btn.t-appui{transform:translateY(2px);box-shadow:inset 0 -1px 0 #3fc988}

/* Barre du bas (téléphone) : l'onglet de la page s'élargit pour afficher son nom en entier ; les autres, réduits à l'icône, la montrent en grand. */
@media (max-width:899px){
  .t-bas .t-nav .t-nav-item{flex:1 1 0;min-width:0;transition:flex-grow var(--duration-fast) var(--ease-smooth-out),transform var(--duree-appui) ease,color var(--duration-fast) ease}
  .t-bas .t-nav .t-nav-item[aria-current="page"]{flex-grow:2.3}
  .t-bas .t-nav .t-nav-item svg{width:28px;height:28px;transition:transform var(--duration-fast) var(--ease-smooth-out)}
  .t-bas .t-nav .t-nav-item[aria-current="page"] svg{transform:scale(.82)}
  .t-nav--bas .t-nav-txt>span{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.t-bas .t-nav .t-nav-item,.t-bas .t-nav .t-nav-item svg{transition:none}}