/* Refonte « Les touches » — socle : remise à zéro et éléments transverses (écrans, étoiles,
   fenêtres, message, visionneuse, GIF). Remplace l'ancien <style> de index.html (lot 5). */

/* ---------- remise à zéro ---------- */
:root{color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
/* Fond clair dès le premier affichage : plus d'éclair sombre au chargement. */
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--f-texte);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* Textes courants : pas de mot seul en dernière ligne (les titres, eux, sont en « balance »). */
p,.t-syn,.t-avis-txt,.t-disc-extrait{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
img{display:block;max-width:100%}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
::selection{background:var(--jaune);color:var(--noir)}
input,textarea{caret-color:var(--lien)}
:focus-visible{outline:3px solid var(--lien);outline-offset:3px}

.screen{display:flex;flex-direction:column;min-height:100%}
/* Un écran qui apparaît : fondu et léger glissement de 8 px (250 ms). Jamais quand il est simplement redessiné. */
.screen:not([hidden]){animation:t-ecran var(--duration-fast) var(--ease-smooth-out)}
@keyframes t-ecran{from{opacity:0;transform:translateY(var(--distance-base))}}
@media (prefers-reduced-motion:reduce){.screen:not([hidden]){animation:t-ecran-calme var(--duration-quick) linear}@keyframes t-ecran-calme{from{opacity:0}}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1em;height:1em;flex:0 0 auto;display:block}

/* ---------- contour des images : un liseré de 1 px, noir pur à 10 % (blanc pur en mode sombre).
   Une affiche claire ne se fond plus dans la touche blanche qui la porte. ---------- */
.t-carte-aff img,.t-fiche-aff img,.t-saison-vig img,img:is(.t-ep-img,.t-disc-aff,.t-dmd-aff,.t-pers-photo,.t-pers-grande){
  outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
.t-carte-aff img,.t-fiche-aff img,.t-saison-vig img{border-radius:inherit}
:root[data-theme="sombre"] :is(.t-carte-aff img,.t-fiche-aff img,.t-saison-vig img,img:is(.t-ep-img,.t-disc-aff,.t-dmd-aff,.t-pers-photo,.t-pers-grande)){
  outline-color:oklch(1 0 0 / .1)}

/* ---------- étoiles (notes) ---------- */
.stars{display:inline-flex;gap:2px;line-height:0}
.star{position:relative;width:15px;height:15px;flex:0 0 auto}
.star svg{width:15px;height:15px;display:block}
.star .fl{position:absolute;top:0;left:0;height:15px;overflow:hidden}
.stars.set{cursor:pointer;touch-action:none;user-select:none}

/* ---------- fenêtres (confirmation, GIF) ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--gouttiere)}
.modal-box{max-width:420px;width:100%}
.modal-box p{margin:0 0 20px}
.modal-acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.gif-box{max-width:600px}
.gif-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));max-height:52vh;overflow:auto;margin:4px 0 12px}
.gif-giphy{margin-right:auto;align-self:center}

/* Ouverture : le voile se fond et la boîte grandit de 0,96 à 1 (--duration-fast). Fermeture (js/fenetre.js) :
   plus courte (--duration-quick), sans élan. Le « hidden » est remis après la sortie. */
.modal:not([hidden]),#visionneuse:not([hidden]){animation:t-voile var(--duration-fast) var(--ease-smooth-out)}
.modal:not([hidden]) .modal-box,#visionneuse:not([hidden]) img{animation:t-boite var(--duration-fast) var(--ease-smooth-out)}
.modal.t-sort,#visionneuse.t-sort{animation:t-voile var(--duration-quick) var(--ease-smooth-out) reverse forwards;pointer-events:none}
.modal.t-sort .modal-box,#visionneuse.t-sort img{animation:t-boite var(--duration-quick) var(--ease-smooth-out) reverse forwards}
@keyframes t-voile{from{opacity:0}}
@keyframes t-boite{from{opacity:0;transform:scale(var(--scale-large))}}
@media (prefers-reduced-motion:reduce){
  .modal:not([hidden]),.modal:not([hidden]) .modal-box,#visionneuse:not([hidden]),#visionneuse:not([hidden]) img{animation:none}
}

/* ---------- message bref ---------- */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);z-index:120;max-width:calc(100% - 32px);
  transform:translate(-50%,16px);background:var(--jaune);color:var(--noir);font:700 .95rem/1.35 var(--f-texte);
  padding:12px 18px 14px;border-radius:14px;box-shadow:inset 0 -4px 0 var(--jaune-bord),0 10px 24px -12px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transform:translate(-50%,var(--distance-base));
  /* Sortie : plus lente et plus douce que l'entrée (toast close = --duration-medium). */
  transition:opacity var(--duration-medium) var(--ease-smooth-out),transform var(--duration-medium) var(--ease-smooth-out)}
.toast.on{opacity:1;transform:translate(-50%,0);transition-duration:var(--duration-fast)}
.toast.t-actif{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:6px 6px 8px 18px}
.t-toast-x{border:0;border-radius:10px;min-height:44px;padding:8px 14px 10px;background:var(--noir);color:var(--encre-inv);
  font:800 .92rem var(--f-texte);box-shadow:inset 0 -3px 0 #2a2a2b}
@media (prefers-reduced-motion:reduce){.toast{transition:opacity var(--duration-fast);transform:translate(-50%,0)}}

/* ---------- image en grand ---------- */
.media{cursor:zoom-in;max-width:min(100%,360px)}
#visionneuse{position:fixed;inset:0;z-index:110;background:rgba(11,11,12,.94);display:flex;align-items:center;justify-content:center;
  padding:20px;cursor:zoom-out}
#visionneuse img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
.vis-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:48px;height:48px;border-radius:14px;border:0;
  background:var(--touche);color:var(--encre);display:grid;place-items:center;font-size:1.2rem;
  box-shadow:inset 0 -4px 0 var(--touche-bord)}