/* ===== Mise en page ===== */
.about-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }

.about-text { font-size: 0.98rem; color: var(--text); line-height: 1.9; font-weight: 300; margin-bottom: 24px; }
.skills-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.skills-list li { padding: 6px 16px; border: 1px solid var(--line); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--muted); }

/* ===== Vignette du CV ===== */
.about-photo { aspect-ratio: 1 / 1.414; position: relative; }
.about-photo::after {
  content: ''; position: absolute; bottom: -24px; right: -24px;
  width: 80px; height: 80px; border: 1px solid var(--gold); pointer-events: none;
}

.cv-thumb {
  position: relative; display: block; width: 100%; height: 100%;
  border: 1px solid var(--line); background: var(--surface); overflow: hidden;
  cursor: zoom-in; box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  transition: transform .25s, box-shadow .25s;
}
.cv-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cv-thumb:hover, .cv-thumb:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }

.cv-thumb-hint {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px;
  background: rgba(30, 25, 20, .75); color: #fff;
  font-size: .8rem; letter-spacing: .08em; text-align: center;
  opacity: 0; transform: translateY(100%);
  transition: opacity .25s, transform .25s;
}
.cv-thumb:hover .cv-thumb-hint,
.cv-thumb:focus-visible .cv-thumb-hint { opacity: 1; transform: none; }

/* ===== Modal ===== */
.cv-modal {
  width: min(900px, 94vw); height: 92vh; max-width: 94vw; max-height: 92vh;
  padding: 0; border: 0; background: var(--surface); color: var(--text); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.cv-modal[open] { display: flex; flex-direction: column; }
.cv-modal::backdrop { background: rgba(20, 16, 12, .65); backdrop-filter: blur(2px); }

.cv-modal-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.cv-modal-title { margin-right: auto; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cv-modal iframe { flex: 1; width: 100%; border: 0; }

.cv-download {
  padding: 8px 20px; border: 1px solid var(--gold); color: var(--gold);
  font-size: .8rem; letter-spacing: .08em; text-decoration: none;
  transition: background .2s, color .2s;
}
.cv-download:hover { background: var(--gold); color: var(--bg); }

.cv-close { border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--muted); cursor: pointer; }
.cv-close:hover { color: var(--gold); }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; margin: 0 auto; }
  .cv-modal { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
}