/* Refonte « Les touches » — lot 4 : zone d'avis, verrou, rédaction, fenêtres, Discussions. */

/* ---------- plaque : la touche qui ne s'enfonce pas (contenu, pas action) ---------- */
.t-plaque{background:var(--touche);color:var(--encre);border-radius:var(--r-touche);padding:16px 18px 20px;
  box-shadow:inset 0 -5px 0 var(--touche-bord),0 2px 0 var(--touche-ombre)}

/* ---------- zone d'avis ---------- */
.t-avis{margin:30px 0 28px;max-width:760px}
.t-avis-compte{font:400 .78rem var(--f-pixel);color:var(--encre-2);margin:-4px 0 14px}
.t-avis-liste{display:grid;gap:14px}
.t-avis-vide{font:600 1rem var(--f-texte);color:var(--encre-2);margin:4px 0 0}
.t-avis-attente{display:grid;gap:14px}
.t-avis-attente div{height:96px;border-radius:var(--r-touche);background:var(--creux);animation:t-pulse 1.4s ease-in-out infinite}
.t-avis-attente div+div{height:64px}

.t-avis-tete{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px}
.t-avis-nom{font:400 .85rem var(--f-pixel);letter-spacing:.02em}
.t-avis-quand{font:400 .76rem var(--f-mono);color:var(--encre-2);margin-left:auto}
.t-avis-txt{font:500 1rem/1.55 var(--f-texte);margin:0;overflow-wrap:anywhere}
.t-avis-muet{color:var(--encre-2)}
.t-avis-h{font:400 .8rem var(--f-pixel);color:var(--lien);margin:0 0 10px}
.t-coeur{display:inline-flex;color:var(--orange)}
.t-coeur svg{width:16px;height:16px}

/* étoiles sur fond clair : creux gris, plein orange */
.theme-touches .star{color:var(--encre-inv-2)}
.theme-touches .star .fl{color:var(--orange)}
.theme-touches .stars.big .star,.theme-touches .stars.big .star svg,.theme-touches .stars.big .star .fl{width:30px;height:30px}
.theme-touches .stars.big .star .fl{width:0}
.theme-touches .stars.set{padding:7px 0}
.theme-touches .stars.set:focus-visible{outline:3px solid var(--lien);outline-offset:4px;border-radius:6px}

/* ---------- mon avis ---------- */
.t-avis-moi--attente p{font:600 1rem/1.45 var(--f-texte);margin:0 0 14px}
.t-avis-moi-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.t-avis-moi-tete .t-avis-h{margin:0}
.t-avis-note{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:0 0 12px}
.t-avis-etoiles{display:flex;align-items:center;gap:12px}
.t-avis-note-v{font:400 .82rem var(--f-mono);color:var(--encre-2);min-width:8em}
.t-jaime{display:inline-flex;align-items:center;gap:7px}
.t-jaime svg{width:18px;height:18px;flex:0 0 auto}
.t-zone{display:block;width:100%;min-height:112px;border:0;border-radius:14px;background:var(--fond);color:var(--encre);
  font:500 1rem/1.5 var(--f-texte);padding:12px 14px;resize:vertical;box-shadow:inset 0 2px 0 var(--touche-bord)}
.t-zone::placeholder{color:var(--encre-2)}
.t-zone:focus{outline:3px solid var(--lien);outline-offset:2px}
.t-coche{display:flex;align-items:center;gap:10px;min-height:44px;margin:6px 0 0;font:600 .95rem/1.35 var(--f-texte);cursor:pointer}
.t-coche 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-coche input:checked{background:var(--bleu-fond);box-shadow:none}
.t-coche 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-coche input:focus-visible{outline:3px solid var(--lien);outline-offset:3px}
.t-avis-pub{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.t-btn.t-appui[disabled]{opacity:1;transform:translateY(var(--appui));box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
/* après un déverrouillage, les textes révélés arrivent en fondu (fin du moment signature) */
.t-revele .t-avis-carte{animation:t-arrive var(--duration-fast) var(--ease-smooth-out)}
@keyframes t-arrive{from{opacity:0;transform:translateY(4px)}}

/* ---------- fil des réponses ---------- */
.t-fil{position:relative;display:grid;gap:10px;margin:14px 0 0;padding:2px 0 0 14px}
.t-fil::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:1px;background:var(--creux)}
.t-rep{padding:4px 6px;margin:-4px -6px;border-radius:10px}
.t-rep .t-avis-tete{margin:0 0 4px}
.t-rep-cite{font:400 .78rem/1.4 var(--f-mono);color:var(--encre-2);margin:0 0 4px;overflow-wrap:anywhere}
.t-rep-sup{color:var(--encre-2);font:italic 500 .95rem var(--f-texte);margin:0}
.t-rep-acts{display:flex;gap:18px;flex-wrap:wrap}
.t-lien{justify-self:start;background:none;border:0;padding:0;min-height:44px;font:800 .9rem var(--f-texte);color:var(--lien);
  cursor:pointer;text-underline-offset:3px;-webkit-tap-highlight-color:transparent}
.t-lien:hover{text-decoration:underline}
.t-eclaire{animation:t-eclaire 2.2s ease-out}
@keyframes t-eclaire{0%,40%{background:rgba(237,255,0,.55)}100%{background:transparent}}
.theme-touches .media{display:block;margin-top:10px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--creux);
  max-width:420px;cursor:zoom-in}
.theme-touches .media img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}

/* ---------- rédaction (réponse, mon avis) ---------- */
.t-redac{display:grid;gap:4px;margin-top:6px}
.t-redac-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.t-redac-envoi{margin-left:auto;display:flex;gap:10px}
.t-redac-apercu{position:relative;display:inline-block}
.t-redac-x{position:absolute;top:6px;right:6px;width:44px;height:44px;border-radius:50%;border:0;background:var(--noir);
  color:var(--encre-inv);display:grid;place-items:center;cursor:pointer}
.t-redac-x svg{width:16px;height:16px}
.t-redac-info{font:400 .82rem var(--f-mono);color:var(--encre-2);margin:8px 0 0}
/* Erreur de formulaire : un pavé en creux et un « ! » pixel sur pastille orange (jamais de texte orange). */
.t-err-l{display:flex;align-items:flex-start;gap:10px;font:700 .92rem/1.4 var(--f-texte);color:var(--encre);margin:6px 0 10px;
  background:var(--creux);border-radius:10px;padding:9px 12px 10px}
.t-err-l::before{content:"!";flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--orange);color:var(--noir);
  display:grid;place-items:center;font:400 .75rem/1 var(--f-pixel);margin-top:1px}
.t-err-l:empty{display:none}
/* Même ligne pour une information (« Ajout du GIF… ») : sans le « ! ». */
.t-err-l.t-info::before{content:none}
label.t-btn:focus-within{outline:3px solid var(--lien);outline-offset:3px}

/* ---------- avis caché : touche noire tramée + cadenas pixel (spec §3.4) ---------- */
.t-avis-carte{position:relative}
.t-avis-carte.t-verrou{background:var(--anthracite);color:var(--anthracite-encre);
  box-shadow:inset 0 -5px 0 var(--anthracite-bord),0 2px 0 #000}
.t-verrou::before,.t-verrou-mini{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px)}
.t-verrou::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity var(--duration-medium) ease}
.t-verrou>*{position:relative}
.t-verrou .t-avis-quand{color:var(--encre-inv-2)}
.t-verrou .star{color:#5a5a5f}
.t-verrou-zone{display:grid;gap:10px;width:100%;min-height:44px;padding:4px 0 2px;border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.t-verrou-zone:focus-visible{outline:3px solid var(--jaune);outline-offset:4px;border-radius:8px}
.t-verrou-tag{display:inline-flex;align-items:center;gap:8px;font:400 .75rem var(--f-pixel);color:var(--jaune)}
.t-cadenas{width:13px;height:16px;flex:0 0 auto;color:var(--jaune)}
.t-trame-l{display:grid;gap:8px}
.t-trame-l i{display:block;height:10px;border-radius:3px;background:rgba(255,255,255,.15);transform-origin:left center}
.t-verrou-txt{font:600 .92rem var(--f-texte);color:var(--encre-inv-2)}
.t-verrou-explique{font:800 .95rem/1.4 var(--f-texte);margin:10px 0 0}
.t-verrou-explique:empty{display:none}
.t-verrou-mini{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px 10px;border:0;border-radius:10px;
  background-color:var(--anthracite);color:var(--anthracite-encre);font:600 .88rem var(--f-texte);text-align:left;cursor:pointer;
  box-shadow:inset 0 -3px 0 var(--anthracite-bord);-webkit-tap-highlight-color:transparent}
.t-verrou-mini:focus-visible{outline:3px solid var(--lien);outline-offset:3px}
.t-verrou-mini .t-cadenas{width:11px;height:13px}
.t-secoue{animation:t-secoue .32s cubic-bezier(.36,.07,.19,.97)}
@keyframes t-secoue{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* déverrouillage : le cadenas saute, la trame s'efface, les lignes se rétractent, puis le texte arrive (re-rendu) */
.t-deverrouille .t-avis-carte.t-verrou{background:var(--touche);color:var(--encre);
  box-shadow:inset 0 -5px 0 var(--touche-bord),0 2px 0 var(--touche-ombre);
  transition:background-color .45s ease .12s,color .45s ease .12s,box-shadow .45s ease .12s}
.t-deverrouille .t-verrou::before{opacity:0}
.t-deverrouille .t-verrou .t-cadenas,.t-deverrouille .t-verrou-mini .t-cadenas{animation:t-ouvre .36s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes t-ouvre{40%{transform:translateY(-5px) rotate(-14deg) scale(1.25)}100%{transform:translateY(-8px) rotate(-18deg) scale(.6);opacity:0}}
.t-deverrouille .t-trame-l i{transform:scaleX(0);transition:transform .42s cubic-bezier(.2,.7,.3,1)}
.t-deverrouille .t-trame-l i:nth-child(2){transition-delay:.05s}
.t-deverrouille .t-trame-l i:nth-child(3){transition-delay:.1s}
.t-deverrouille .t-trame-l i:nth-child(4){transition-delay:.15s}
.t-deverrouille .t-verrou-tag,.t-deverrouille .t-verrou-txt,.t-deverrouille .t-verrou-explique{opacity:0;transition:opacity .25s ease}
.t-deverrouille .t-avis-moi--attente{opacity:.5;transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){
  .t-secoue,.t-eclaire,.t-revele .t-avis-carte,.t-deverrouille .t-verrou .t-cadenas,.t-deverrouille .t-verrou-mini .t-cadenas{animation:none}
  .t-eclaire{outline:2px solid var(--lien)}
  .t-deverrouille .t-avis-carte.t-verrou,.t-deverrouille .t-trame-l i{transition:none}
  .t-deverrouille{opacity:.4;transition:opacity .25s ease}
  .t-avis-attente div,.t-disc-attente div{animation:none}
}

/* ---------- fenêtres : confirmation et GIF ---------- */
.modal{background:rgba(11,11,12,.55)}
.modal .modal-box{background:var(--touche);color:var(--encre);border:0;border-radius:22px;padding:22px 20px 20px;
  box-shadow:inset 0 -6px 0 var(--touche-bord),0 24px 60px -20px rgba(0,0,0,.6)}
.modal .modal-box h2{font:900 1.4rem var(--f-texte);letter-spacing:-.03em;margin:0 0 10px;color:var(--encre)}
.modal .modal-box p{font:500 .98rem/1.5 var(--f-texte);color:var(--encre-2)}
.modal .modal-acts{gap:10px}
.modal .modal-box{max-height:calc(100dvh - 32px);overflow:auto}
/* Recadrage de la photo de profil : aperçu carré (le glisser ne défile pas la page), cercle = ce qui restera visible. */
.t-recadre .modal-box{max-width:360px}
.t-recadre-vue{position:relative;width:min(280px,100%);aspect-ratio:1;margin:0 auto 16px;border-radius:var(--r-petit);overflow:hidden;background:var(--creux)}
.t-recadre-vue canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-3px}
.t-recadre-vue canvas.t-prise{cursor:grabbing}
.t-recadre-vue canvas:focus-visible{outline:3px solid var(--lien)}
.t-recadre-vue::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(11,11,12,.45),inset 0 0 0 2px var(--touche);pointer-events:none}
.t-recadre-zoom{display:block;width:100%;min-height:44px;margin:0 0 18px;accent-color:var(--lien)}
.t-recadre-zoom:focus-visible{outline:3px solid var(--lien);outline-offset:2px}
.modal .gif-choix[disabled]{opacity:.5;cursor:progress}
.t-champ--petit{min-height:50px;margin:0 0 12px}
.t-champ--petit input{padding:11px 0 13px;font-size:1rem}
.modal .gif-res{gap:8px}
.modal .gif-choix{padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--creux);cursor:pointer}
.modal .gif-choix img{display:block;width:100%;height:110px;object-fit:cover}
.modal .gif-choix:focus-visible{outline:3px solid var(--lien);outline-offset:2px}
.modal .gif-giphy{font:400 .72rem var(--f-mono);color:var(--encre-2)}

/* ---------- Discussions ---------- */
.t-disc-h{flex-direction:column;align-items:flex-start}
.t-disc-h p{margin:0;font:600 1rem var(--f-texte);color:var(--encre-2)}
.t-disc-liste{display:grid;gap:12px;max-width:760px}
.t-disc{display:flex;gap:14px;padding:12px 16px 16px 12px;color:var(--encre);text-decoration:none}
.t-disc-aff{flex:0 0 56px;width:56px;height:84px;border-radius:10px;object-fit:cover;background:var(--creux)}
.t-disc-b{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.t-disc-titre{font:800 1.02rem/1.2 var(--f-texte);letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
.t-disc-action{margin:0;font:500 .92rem/1.4 var(--f-texte);color:var(--encre-2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.t-disc-action .t-avis-nom,.t-disc-action b{color:var(--encre)}
.t-disc-action b{font-weight:800}
.t-disc-extrait{margin:0;font:500 .98rem/1.45 var(--f-texte);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-disc-vign{max-height:90px;width:auto;border-radius:8px}
.t-disc-quand{margin:2px 0 0;font:400 .76rem var(--f-mono);color:var(--encre-2);display:flex;align-items:center;gap:8px}
.t-disc .t-verrou-mini{margin:0;cursor:inherit}
.t-disc--retire{box-shadow:none;background:var(--fond);outline:1.5px dashed var(--touche-bord);outline-offset:-1.5px}
.t-disc--retire .t-disc-aff{opacity:.35}
.t-disc-attente{display:grid;gap:12px;max-width:760px}
.t-disc-attente div{height:110px;border-radius:var(--r-touche);background:var(--creux);animation:t-pulse 1.4s ease-in-out infinite}

/* Couleurs des amis (lot 6, option B) : chaque avis et chaque réponse sur une plaque teintée
   de la couleur de son auteur ; l'avis verrouillé garde sa plaque anthracite. */
.t-avis-carte:not(.t-verrou){background:var(--ami-t,var(--touche));box-shadow:inset 0 -5px 0 rgba(0,0,0,.1),0 2px 0 var(--touche-ombre)}
.t-fil::before{display:none}
.t-rep{background:var(--ami-t,var(--touche));padding:10px 12px 12px;margin:0;border-radius:14px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.1)}
.t-avis-tete .t-av{margin-right:-2px}
/* Discussions : chaque ligne prend la teinte de son auteur, comme sur les fiches. */
.t-disc[class*="t-ami-"]{background:var(--ami-t);box-shadow:inset 0 -5px 0 rgba(0,0,0,.1),0 2px 0 var(--touche-ombre),0 12px 20px -14px rgba(0,0,0,.35)}
.t-disc-action .t-av{vertical-align:middle;margin-right:6px}