/* css/cards.css — composants partagés de la page portfolio : carte simple (.card), avatar (.pill), vignette
   cliquable (.shot), lightbox plein écran et modale vidéo. Restylé aux jetons ana.sh (css/ana.css) le 2026-09-13 :
   la page ne montre plus que ce que portfolio.php utilise encore — plus aucune couleur « forêt ». */

/* carte simple : fond blanc, bord gris, coin arrondi (jetons ana.css) — sert de socle à .work (voir portfolio.css,
   qui retire ce cadre pour les sections de projet) et à la carte penderie en bas de page */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:var(--shadow)}

/* icône emoji dans un .hd (l'icône svg elle-même est déjà stylée par .hd svg dans ana.css) */
.hd .ico{width:16px;height:16px;display:grid;place-items:center;font-size:13px;line-height:1;flex:none}

/* avatar + libellé — générique ; l'en-tête de la page portfolio l'agrandit (voir css/portfolio.css) */
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:500;color:var(--fg)}
.pill img,.pill .av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none;margin:0}
.pill .av{display:grid;place-items:center;background:var(--g100);color:var(--fg);font-size:12px;font-weight:600;font-style:normal}

/* vignette cliquable (bande d'images de la page portfolio) */
.shot{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--g100);
  padding:0;margin:0;display:block;width:100%;font:inherit;cursor:zoom-in;transition:border-color .18s,transform .18s}
.shot:hover{border-color:var(--line-2);transform:translateY(-1px)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .18s}

/* ── photogrammes en grand (lightbox) : fond sombre + flou constants, quel que soit le thème de la page ── */
.lightbox{position:fixed;inset:0;z-index:90;display:none;place-items:center;
  padding:clamp(46px,5vw,64px) clamp(14px,4vw,72px);background:rgba(16,24,40,.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lightbox.show{display:grid}
.lightbox figure{margin:0;display:grid;gap:13px;justify-items:center;max-width:100%}
.lightbox img{max-width:100%;max-height:76vh;width:auto;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  object-fit:contain;background:#000;box-shadow:0 30px 90px -40px rgba(0,0,0,.6)}
.lightbox figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.lb-btn{position:absolute;background:#fff;border:1px solid var(--line);color:#101828;
  width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:16px;
  line-height:1;padding:0;box-shadow:var(--shadow);transition:.2s}
.lb-btn:hover{border-color:var(--line-2);background:#f9fafb}
.lb-btn[hidden]{display:none}
.lb-close{top:clamp(12px,2vw,20px);right:clamp(12px,2vw,20px);font-size:14px}
.lb-prev{left:clamp(10px,2vw,22px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(10px,2vw,22px);top:50%;transform:translateY(-50%)}
@media(max-width:680px){
  .lb-prev{left:10px}.lb-next{right:10px}
  .lightbox img{max-height:66vh}
}
@media(prefers-reduced-motion:reduce){
  .shot,.shot img,.lb-btn{transition:none!important}
}

/* ── modale vidéo (« projection ») : même traitement fond sombre + flou ── */
.screen-modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:24px;
  background:rgba(16,24,40,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.screen-modal.show{display:grid}
.screen-box{width:min(1100px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:0 30px 90px -40px rgba(0,0,0,.5)}
.screen-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--fg)}
.screen-head button{background:#fff;border:1px solid var(--line);color:var(--g500);font-size:14px;cursor:pointer;
  padding:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transition:.2s}
.screen-head button:hover{color:var(--fg);border-color:var(--line-2)}
.screen-box video{width:100%;display:block;max-height:74vh;background:#000}