/* ============================================================
   PARISI CYBER — Page /portfolio (PORT-02, spec §20)
   ============================================================
   Complément de style.css et digital.css, jamais un remplacement :
   navigation, hero, cartes de tâches, garanties et pied de page
   viennent de ces deux feuilles. Ce fichier ne porte que la vidéo,
   la fiche d'expérience, le mur de technologies et le certificat.

   Aucun nouveau jeton de couleur. Aucune animation : rien à
   désactiver sous `prefers-reduced-motion`. Aucune ressource
   externe (CSP `default-src 'self'`).
   ============================================================ */

/* ── Titres de bloc ──────────────────────────────────────── */
.bloc-titre {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-0);
  margin: 22px 0 8px;
}
.bloc-titre:first-child { margin-top: 0; }

/* Ligne « employeur · lieu · dates » sous le titre d'une expérience. */
.experience-meta {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-3);
  margin: 0 0 16px;
}

/* ── 2. Vidéo ────────────────────────────────────────────── */
.application-grille {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}
.portfolio-video { margin: 0; min-width: 0; }
.portfolio-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1432 / 720;
  background: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.portfolio-video figcaption {
  margin-top: 10px;
  font-size: .88rem;
  color: var(--text-2);
}
.transcription {
  margin-top: 12px;
  font-size: .92rem;
  color: var(--text-2);
}
.transcription summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 0;
}
.transcription p { margin-top: 8px; line-height: 1.65; }
.application-texte p { color: var(--text-2); line-height: 1.65; }

/* ── 4. Bilan des automatisations ────────────────────────── */
.automatisation-bilan {
  margin-top: 36px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text-2);
  line-height: 1.65;
}
.automatisation-bilan strong { color: var(--text-0); }

/* ── 5. Mur de technologies ──────────────────────────────── */
.techno-groupes {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.techno-groupe {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.techno-benefice {
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 16px;
  text-wrap: pretty;
}
.techno-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.techno {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-1);
}
.techno img { flex: none; width: 22px; height: 22px; }
/* Élément sans logo : le texte peut être long, il passe à la ligne. */
.techno-texte { border-radius: var(--radius-sm); }

/* ── 6. Certificat ───────────────────────────────────────── */
.certification-grille {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
}
.certificat { margin: 0; min-width: 0; }
.certificat a { display: block; border-radius: var(--radius); }
.certificat img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.certificat figcaption {
  margin-top: 10px;
  font-size: .88rem;
  color: var(--text-2);
}
.certification-texte { display: flex; flex-direction: column; gap: 14px; }
.certification-texte p { color: var(--text-2); line-height: 1.65; }
.certification-texte strong { color: var(--text-0); }
.certificat-numero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: .88rem;
}
.certificat-numero code {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-0);
  overflow-wrap: anywhere;
}

/* ── 8. Contact ──────────────────────────────────────────── */
.contact-final { text-align: center; }
.contact-final .section-sub { margin-left: auto; margin-right: auto; }
.contact-final-action { margin-top: 24px; }

/* ── Focus visible (vidéo, résumé, liens du certificat) ──── */
.portfolio-video video:focus-visible,
.transcription summary:focus-visible,
.certificat a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Petits écrans ───────────────────────────────────────── */
@media (max-width: 860px) {
  .application-grille,
  .certification-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .techno-groupe { padding: 16px; }
}