/* Refonte « Les touches » — lot 2 : Films, Chercher, fiche film, fiche à ajouter. */

/* ---------- en-tête d'écran, retour ---------- */
.t-ecran-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 14px;margin:0 0 18px}
.t-ecran-h h1{font:900 clamp(1.9rem,6vw,2.8rem) var(--f-texte);letter-spacing:-.04em;line-height:.95;margin:0;text-wrap:balance}
.t-retour{display:inline-flex;align-items:center;gap:6px;width:auto;min-height:44px;padding:9px 14px 12px;margin:0 0 16px;
  font:800 .95rem var(--f-texte);border-radius:14px}
.t-retour svg{width:18px;height:18px}

/* ---------- filtres : pastilles-touches et sélecteurs en touches ---------- */
.t-filtres{display:grid;gap:12px;margin:0 0 22px}
.t-filtres-ligne{display:flex;flex-wrap:wrap;gap:12px 18px}
.t-filtres-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.t-filtres-plus{display:grid;gap:12px}
.t-filtres-btn[aria-expanded="true"]{background:var(--noir);color:var(--encre-inv);box-shadow:inset 0 -4px 0 #2a2a2b,0 1px 0 #000}
@media (max-width:899px){.t-filtres-plus[data-ferme]{display:none}}
@media (min-width:900px){
  .t-filtres-btn{display:none}
  .t-filtres{grid-template-columns:auto auto 1fr;align-items:end;gap:18px}
  .t-filtres-plus{display:contents}
  .t-selects{max-width:640px}
}
.t-filtre{display:flex;flex-direction:column;gap:6px;min-width:0}
.t-filtre-lb{font:400 .75rem var(--f-pixel);color:var(--encre-2)}
.t-puces{display:flex;gap:6px;flex-wrap:wrap}
.t-puce{border:0;border-radius:12px;padding:9px 13px 12px;min-height:44px;background:var(--touche);color:var(--encre);
  font:800 .92rem var(--f-texte);letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 -4px 0 var(--touche-bord),0 1px 0 var(--touche-ombre);
  transition:transform var(--duree-appui) ease,box-shadow var(--duree-appui) ease,background-color var(--duree) ease}
.t-puce:active{transform:translateY(3px);box-shadow:inset 0 -1px 0 var(--touche-bord)}
.t-puce[aria-pressed="true"]{background:var(--bleu-fond);color:var(--encre-inv);box-shadow:inset 0 -4px 0 #01208a,0 1px 0 #011a70}
.t-selects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.t-select{appearance:none;-webkit-appearance:none;width:100%;min-height:46px;border:0;border-radius:12px;
  padding:10px 34px 13px 12px;background:var(--touche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0b0c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px;
  color:var(--encre);font:700 .9rem var(--f-texte);text-overflow:ellipsis;cursor:pointer;
  box-shadow:inset 0 -4px 0 var(--touche-bord),0 1px 0 var(--touche-ombre)}
@media (max-width:520px){.t-selects{grid-template-columns:1fr 1fr}.t-selects .t-filtre:last-child{grid-column:1/-1}}

/* ---------- grille de touches ---------- */
.t-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:14px}
@media (min-width:900px){.t-grille{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}}
.t-attente-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:14px}
.t-attente-grille div{aspect-ratio:2/3.4;border-radius:var(--r-touche);background:var(--creux);animation:t-pulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.t-attente-grille div{animation:none}}
.t-bas-ajout{margin:26px 0 8px}

/* ---------- états : vide, erreur ---------- */
.t-vide .t-btn,.t-erreur .t-btn{margin-top:16px}
.t-erreur{padding:32px 0}
.t-erreur p{font:800 1.15rem var(--f-texte);letter-spacing:-.02em;margin:0}

/* ---------- Chercher ---------- */
.t-champ{display:flex;align-items:center;gap:10px;background:var(--touche);border-radius:16px;padding:0 16px;margin:0 0 22px;
  min-height:58px;box-shadow:inset 0 -5px 0 var(--touche-bord),0 2px 0 var(--touche-ombre)}
.t-champ svg{width:22px;height:22px;flex:0 0 auto;color:var(--encre-2)}
.t-champ input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--encre);
  font:700 1.1rem var(--f-texte);letter-spacing:-.01em;padding:14px 0 17px}
.t-champ input::placeholder{color:var(--encre-2);font-weight:500}
.t-champ:focus-within{outline:3px solid var(--lien);outline-offset:3px}
.t-groupe{margin:0 0 30px}

/* disponibilité : les mots d'abord, la couleur renforce */
.t-dispo-ajout{background:var(--touche);color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}
.t-dispo-bientot,.t-dispo-route{background:var(--orange);color:var(--noir)}
.t-dispo-route .t-rond{background:var(--noir)}
.t-dispo-route .t-rond::after{background:var(--noir)}

/* ---------- fiches (film chez nous, titre à ajouter) ---------- */
.t-fiche{display:grid;grid-template-columns:118px 1fr;gap:16px 18px;align-items:start}
.t-fiche-aff{position:relative;grid-row:span 1;aspect-ratio:2/3;border-radius:var(--r-petit);overflow:hidden;background:var(--creux);
  box-shadow:0 2px 0 var(--touche-ombre)}
/* Le relief « touche » est posé PAR-DESSUS l'image : en inset sur le conteneur, l'affiche le masquait. */
.t-fiche-aff::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 -5px 0 rgba(0,0,0,.16)}
.t-fiche-aff img{width:100%;height:100%;object-fit:cover;display:block}
.t-fiche-tete{display:flex;flex-direction:column;gap:10px;min-width:0;align-self:end}
.t-fiche h1{font:900 clamp(1.6rem,6vw,2.8rem) var(--f-texte);letter-spacing:-.04em;line-height:.98;margin:0;text-wrap:balance;overflow-wrap:anywhere}
.t-fiche-corps{grid-column:1/-1;display:flex;flex-direction:column;gap:16px;min-width:0}
@media (min-width:760px){
  /* Deux rangées : l'en-tête puis le corps juste dessous (sans vide sous le titre). */
  .t-fiche{grid-template-columns:minmax(220px,300px) 1fr;grid-template-rows:auto 1fr;gap:28px 36px}
  .t-fiche-aff{grid-row:span 2}
  .t-fiche-corps{grid-column:2;align-self:start}
  .t-fiche-tete{align-self:start;padding-top:8px}
}
.t-sig>[aria-hidden="true"]{display:none}
.t-sig{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:400 .82rem var(--f-mono);color:var(--encre-2)}

/* la note de la bande : le surlignage jaune de la spec */
.t-cote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.t-cote-n{font:400 1.9rem var(--f-pixel);line-height:1;background:var(--jaune);color:var(--noir);padding:8px 10px 6px;border-radius:12px;
  box-shadow:inset 0 -4px 0 var(--jaune-bord)}
.t-cote-n small{font-size:.5em}
.t-cote-txt{display:flex;flex-direction:column;gap:3px}
.t-cote-lb{font:400 .75rem var(--f-pixel)}
.t-cote-det{font:400 .8rem var(--f-mono);color:var(--encre-2);display:inline-flex;align-items:center;gap:4px}
.t-cote-det svg{width:14px;height:14px;color:var(--orange)}
.t-cote-vide{font:800 1.02rem var(--f-texte);letter-spacing:-.01em}
.t-peuple{font:400 .82rem var(--f-mono);color:var(--encre-2);margin:0}
.t-peuple strong{color:var(--encre);font-weight:600}
.t-syn{font:500 1.02rem/1.55 var(--f-texte);margin:0;max-width:62ch;color:var(--encre)}
.t-syn-vide{color:var(--encre-2)}
.t-syn-bloc{display:flex;flex-direction:column;align-items:flex-start;gap:0}
/* Simple dépliage, pas une action : lien bleu collé au texte (cible de 44 px). */
.t-syn-plus{min-height:44px;padding:0;border:0;background:none;color:var(--lien);font:700 .95rem var(--f-texte);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.t-syn-plus:focus-visible{outline:3px solid var(--lien);outline-offset:3px;border-radius:4px}
.t-syn--replie{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.t-fiche .t-actions{margin:0}
.t-fiche .t-actions .t-btn svg{width:18px;height:18px}
.t-confirme{background:var(--touche);border-radius:14px;padding:14px 16px;font:600 .95rem/1.45 var(--f-texte);margin:0;
  box-shadow:inset 0 0 0 1.5px var(--touche-bord)}
.t-confirme:empty{display:none}

/* saisons à cocher */
.t-saisons h2,.t-section-h{font:900 1.3rem var(--f-texte);letter-spacing:-.035em;margin:0 0 12px}
.t-saisons-aide{font:600 .95rem var(--f-texte);color:var(--encre-2);margin:-4px 0 12px}
.t-saisons ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.t-saison{display:flex;align-items:center;gap:12px;padding:12px 14px 15px;min-height:56px}
label.t-saison{cursor:pointer}
.t-saison input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;flex:0 0 auto;border-radius:7px;
  background:var(--touche);box-shadow:inset 0 0 0 2px var(--encre);display:grid;place-items:center;cursor:pointer}
.t-saison input:checked{background:var(--bleu-fond);box-shadow:none}
.t-saison input:checked::after{content:"";width:6px;height:11px;border:solid var(--encre-inv);border-width:0 3px 3px 0;transform:translateY(-1px) rotate(45deg)}
.t-saison-t{font:800 1rem var(--f-texte);letter-spacing:-.01em}
.t-saison-m{font:400 .8rem var(--f-mono);color:var(--encre-2);margin-left:auto}
.t-saison .t-pastille{margin-left:8px}
.t-saison--off{background:var(--creux);box-shadow:none;cursor:default}
.t-saison--off .t-saison-m{margin-left:auto}

/* bande-annonce : une touche avec sa vignette */
.t-bande{margin:30px 0 0}
.t-bande-cadre{position:relative;display:block;width:100%;max-width:720px;aspect-ratio:16/9;padding:0;overflow:hidden}
.t-bande-cadre img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-touche) var(--r-touche) 0 0}
.t-bande-cadre .t-jouer{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:18px;background:var(--jaune);
  display:grid;place-items:center;box-shadow:inset 0 -4px 0 var(--jaune-bord),0 6px 18px -6px rgba(0,0,0,.5)}
.t-bande-cadre .t-jouer svg{width:26px;height:26px;color:var(--noir)}
.t-bande-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}