/* Refonte « Les touches » — accueil connecté (lot 1). */
.t-accueil h1{font:900 clamp(1.9rem,6vw,3rem) var(--f-texte);letter-spacing:-.04em;line-height:.95;margin:0 0 18px;text-wrap:balance}

/* film mis en avant : une grande touche paysage */
.t-vedette{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;padding:0;margin:0 0 28px}
/* Pavés anthracite : le film à la une et la touche des potes. */
.t-vedette.t-touche,.t-potes.t-touche{background:var(--anthracite);color:var(--anthracite-encre);
  box-shadow:inset 0 -5px 0 var(--anthracite-bord),0 2px 0 var(--touche-ombre),0 12px 20px -14px rgba(0,0,0,.45)}
.t-vedette.t-touche:active,.t-potes.t-touche:active{box-shadow:inset 0 -1px 0 var(--anthracite-bord),0 1px 0 var(--touche-ombre)}
.t-vedette .t-meta{color:var(--encre-inv-2);column-gap:14px}
.t-vedette .t-mono{color:var(--encre-inv-2)}
.t-vedette .t-prog .t-barre{background:#34343a}
.t-vedette .t-prog .t-barre i{background:var(--bleu-vif)}
.t-vedette-art{background:#26262a}
.t-vedette-art{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-touche) var(--r-touche) 0 0}
.t-vedette-art img{width:100%;height:100%;object-fit:cover;display:block}
.t-vedette-art .t-pastille{position:absolute;top:12px;left:12px}
.t-vedette-corps{padding:14px 16px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.t-vedette h2{font:900 clamp(1.5rem,4.5vw,2.2rem) var(--f-texte);letter-spacing:-.045em;line-height:1;margin:0;text-wrap:balance}
.t-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:400 .8rem var(--f-mono);color:var(--encre-2)}
.t-prog{display:flex;align-items:center;gap:10px}
.t-prog .t-barre{flex:1;height:8px;border-radius:4px;background:var(--creux);overflow:hidden}
.t-prog .t-barre i{display:block;height:100%;background:var(--bleu-fond)}
.t-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (min-width:760px){
  .t-vedette{grid-template-columns:1.35fr 1fr}
  .t-vedette-art{aspect-ratio:auto;min-height:300px;border-radius:var(--r-touche) 0 0 var(--r-touche)}
  /* L'image remplit la case sans en dicter la hauteur (une affiche 2:3 étirait la une à 934 px). */
  .t-vedette-art img{position:absolute;inset:0}
  .t-vedette-corps{justify-content:flex-end;padding:22px}
}

/* rangées */
.t-rang{margin:0 0 30px}
.t-rang-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.t-rang-h h2{font:900 1.3rem var(--f-texte);letter-spacing:-.035em;margin:0}
/* Sur téléphone, environ 2,4 cartes : la troisième, coupée au bord, montre qu'on peut faire défiler. */
.t-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(124px,36.5vw,212px);gap:14px;overflow-x:auto;
  padding:8px 8px 14px;margin:-4px -8px 0;scroll-padding-inline:8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.t-rail::-webkit-scrollbar{display:none}
/* À la souris, pas de glisser au doigt : une fine barre signale la suite de la rangée. */
@media (hover:hover) and (pointer:fine){
  .t-rail{scrollbar-width:thin;scrollbar-color:var(--touche-bord) transparent}
  .t-rail::-webkit-scrollbar{display:block;height:8px}
  .t-rail::-webkit-scrollbar-thumb{background:var(--touche-bord);border-radius:4px}
}
.t-rail>*{scroll-snap-align:start}

/* carte de film : une touche avec son affiche */
.t-carte{padding:8px;display:flex;flex-direction:column;gap:8px}
/* Arrondi concentrique : celui de la touche moins sa marge (18 − 8 = 10 px). */
.t-carte-aff{position:relative;aspect-ratio:2/3;border-radius:calc(var(--r-touche) - 8px);overflow:hidden;background:var(--creux)}
.t-carte-aff img{width:100%;height:100%;object-fit:cover;display:block}
.t-carte-aff .t-repli{position:absolute;inset:0;display:flex;align-items:flex-end;padding:10px;font:800 .9rem var(--f-texte);letter-spacing:-.02em}
.t-carte-aff .t-pastilles{position:absolute;top:6px;left:6px;right:6px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:4px}
.t-carte-aff .t-mini{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(11,11,12,.25)}
.t-carte-aff .t-mini i{display:block;height:100%;background:var(--bleu-fond)}
.t-carte-titre{font:800 .92rem var(--f-texte);letter-spacing:-.02em;line-height:1.15;margin:0 2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Année et note collées en bas, que le titre tienne sur une ou deux lignes. */
.t-carte-bas{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:auto 2px 2px;font:400 .75rem var(--f-pixel);color:var(--encre-2)}

/* Couleur à l'appui : la carte prend une teinte tirée au hasard le temps de l'appui (ui.js). */
.t-carte.t-flash{background:var(--flash)}
.t-carte.t-flash .t-carte-titre,.t-carte.t-flash .t-carte-bas,.t-carte.t-flash .t-peuple-mini{color:var(--flash-encre)}

/* touche vers les discussions */
.t-potes{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;margin:0 0 30px;font:800 1.05rem var(--f-texte);letter-spacing:-.02em}
.t-potes span:first-child{display:flex;align-items:center;gap:10px}
.t-potes .ico{width:22px;height:22px;flex:0 0 auto}
.t-potes .t-fleche{width:42px;height:42px;border-radius:50%;background:var(--bleu-fond);color:var(--encre-inv);display:grid;place-items:center;flex:0 0 auto;font-weight:900}
.t-ajout{margin:4px 0 30px}

/* états */
.t-vide{max-width:52ch;padding:40px 0}
.t-vide h2{font:900 1.6rem var(--f-texte);letter-spacing:-.04em;margin:0 0 8px}
.t-vide p{color:var(--encre-2);margin:0;line-height:1.5}
.t-attente{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(124px,36.5vw,212px);gap:14px;overflow:hidden}
.t-attente div{aspect-ratio:2/3.4;border-radius:var(--r-touche);background:var(--creux);animation:t-pulse 1.4s ease-in-out infinite}
.t-attente .t-large{grid-column:span 3;aspect-ratio:auto;height:220px}
@keyframes t-pulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.t-attente div{animation:none}}

/* Bandeau qui défile (lot 6) : pleine largeur, collé sous la barre du haut, fond bleu et texte blanc,
   messages en pixel séparés par un rond orange. */
.t-bandeau{background:var(--bleu);color:var(--encre-inv);min-height:32px;padding:6px 0}
.t-bandeau-fen{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.t-bandeau-piste{display:flex;width:max-content;animation:t-defile 30s linear infinite}
.t-bandeau-copie{display:flex;align-items:center;flex:0 0 auto}
.t-bandeau-copie span{font:400 .75rem/20px var(--f-pixel);text-transform:uppercase;letter-spacing:.02em;color:#fff;white-space:nowrap}
.t-bandeau-copie i{display:block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin:0 16px;flex:0 0 auto}
/* Le doigt ou la souris posés dessus : le bandeau s'arrête pour qu'on lise. */
.t-bandeau-fen:hover .t-bandeau-piste,.t-bandeau-fen:active .t-bandeau-piste{animation-play-state:paused}
@keyframes t-defile{to{transform:translateX(-50%)}}
/* Mouvement réduit : les messages restent fixes, sur une ligne coupée. */
@media (prefers-reduced-motion:reduce){
  .t-bandeau-piste{animation:none;width:auto}
  .t-bandeau-copie+.t-bandeau-copie{display:none}
}

/* Film à la une : l'image et le titre mènent à la fiche. */
.t-vedette-lien{position:absolute;inset:0;display:block;cursor:pointer}
.t-vedette-lien img{width:100%;height:100%;object-fit:cover;display:block}
.t-vedette-art .t-pastille{pointer-events:none;z-index:1}
.t-vedette-titre{color:inherit;text-decoration:none}
.t-vedette-titre:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}