/* sandrodiventi.be — CV / portfolio */

/* ---------- Barre du haut ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 68px; }
.brand { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.15rem; text-decoration: none; letter-spacing: var(--display-tracking); }
.brand .dot { color: var(--accent); }
#nav { display: flex; align-items: center; gap: 24px; }
#nav a:not(.btn) { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
#nav a:not(.btn):hover { color: var(--ink); }
#nav .btn { padding: .55em 1.1em; font-size: .9rem; }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(36px, 7vw, 88px); align-items: center;
  padding-top: clamp(32px, 7vh, 80px); padding-bottom: clamp(32px, 6vh, 64px);
}
.hero-photo { position: relative; }
.hero-photo .frame {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--photo-shape);
  box-shadow: 14px 14px 0 var(--accent); position: relative; z-index: 1; background: var(--bg-alt);
}
[data-theme="minuit"] .hero-photo .frame { aspect-ratio: 1; box-shadow: 0 0 0 6px var(--surface), 0 0 0 8px var(--accent), 0 30px 80px -20px var(--accent); }
[data-theme="ardoise"] .hero-photo .frame, [data-theme="editorial"] .hero-photo .frame { box-shadow: var(--shadow-hover); }
.hero-photo .frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo .frame .placeholder span { font-size: 5rem !important; }
.hero-photo .badge {
  position: absolute; z-index: 2; left: -14px; bottom: 26px; transform: rotate(-4deg);
  background: var(--accent-3); color: #fff; font-weight: 700; font-size: .85rem;
  padding: .5em 1em; border-radius: var(--radius-pill); box-shadow: var(--shadow);
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.headline { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--ink-soft); margin: .4em 0 0; line-height: 1.3; }
.headline strong { color: var(--accent); font-weight: inherit; }
.intro { color: var(--ink-soft); margin-top: 1.1em; max-width: 58ch; }
.intro p { margin: 0 0 .6em; }
.facts { list-style: none; padding: 0; margin: 1.2em 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-soft); font-size: .93rem; font-weight: 600; }
.facts:empty { display: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 1.8em; }

/* ---------- Portfolio ---------- */
.group { margin-top: 36px; }
.group-title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin-bottom: 18px; color: var(--ink); }
.group-title::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tone, var(--accent)); transform: rotate(45deg); }
.group-title .n { color: var(--ink-faint); font-weight: 500; font-size: .85em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }

.work {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s;
}
.work:hover, .work:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.work:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.work-cover { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.work-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.work:hover .work-cover img { transform: scale(1.05); }
.work-cover .year {
  position: absolute; top: 12px; right: 12px; z-index: 1; font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink);
  padding: .3em .75em; border-radius: var(--radius-pill);
}
.work-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.work-body h4 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem; margin: 0; letter-spacing: var(--display-tracking); line-height: 1.15; }
.work-body p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.work-body .tags { margin-top: auto; padding-top: 6px; }

/* ---------- Modale de détail ---------- */
.detail-cover { aspect-ratio: 21 / 8; overflow: hidden; }
.detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.detail-cover .placeholder span { font-size: 4rem !important; }
.detail-content { padding: clamp(22px, 4vw, 40px); }
.detail-content h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--ink-faint); font-weight: 600; font-size: .92rem; margin: .7em 0 1.2em; }
.detail-text { color: var(--ink-soft); max-width: 68ch; }
.detail-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4em 0 0; }
.media-group { margin-top: 34px; }
.media-group h3 { font-size: 1.2rem; margin-bottom: 14px; }
.media { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.media.wide { grid-template-columns: 1fr; }
.m-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.m-item .cap { padding: 10px 14px 12px; font-size: .9rem; }
.m-item .cap strong { display: block; }
.m-item .cap span { color: var(--ink-soft); }
.m-image button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.m-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.m-video .ratio { aspect-ratio: 16 / 9; background: #000; }
.m-video iframe, .m-video video { width: 100%; height: 100%; border: 0; display: block; }
a.m-site { display: block; text-decoration: none; color: inherit; transition: transform .2s; }
a.m-site:hover { transform: translateY(-3px); }
.browser { padding: 8px 10px 0; background: var(--bg-alt); }
.browser-bar { display: flex; align-items: center; gap: 5px; padding-bottom: 7px; }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.browser-bar i:nth-child(2) { background: #febc2e; } .browser-bar i:nth-child(3) { background: #28c840; }
.browser-bar span { flex: 1; margin-left: 6px; font-size: .72rem; color: var(--ink-faint); background: var(--surface); border-radius: 5px; padding: 1px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser-shot { aspect-ratio: 16 / 10; border-radius: 6px 6px 0 0; overflow: hidden; }
.browser-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Parcours & compétences ---------- */
.cv { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.cv[hidden] { display: none; }
.cv h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 26px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 26px 36px; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--accent);
}
.timeline .when { font-size: .82rem; font-weight: 700; color: var(--accent-2); text-transform: var(--eyebrow-transform); letter-spacing: .05em; }
.timeline h3 { font-size: 1.15rem; margin: .15em 0 .1em; }
.timeline .where { color: var(--ink-soft); font-weight: 600; font-size: .93rem; }
.timeline p { margin: .4em 0 0; color: var(--ink-soft); font-size: .95rem; }
.skill-group { margin-bottom: 22px; }
.skill-group h3 { font-size: 1rem; margin-bottom: 10px; color: var(--ink-soft); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.skill-group .tags { gap: 8px; }
.skill-group .chip { font-size: .85rem; padding: .55em .95em; }

/* ---------- Contact ---------- */
.contact-band {
  margin: 40px 0 24px; padding: clamp(40px, 7vw, 76px) clamp(24px, 5vw, 64px); text-align: center;
  background: var(--ink); color: var(--bg); border-radius: calc(var(--radius) * 1.4);
  position: relative; overflow: hidden;
}
[data-theme="minuit"] .contact-band { background: linear-gradient(135deg, #4f46e5, #0e7490); color: #fff; }
.contact-band::before, .contact-band::after { content: ""; position: absolute; border-radius: 50%; opacity: .85; }
.contact-band::before { width: 220px; height: 220px; background: var(--accent-2); left: -80px; bottom: -110px; }
.contact-band::after { width: 150px; height: 150px; background: var(--accent-3); right: 7%; top: -70px; }
.contact-band > * { position: relative; z-index: 1; }
.contact-band h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.contact-band div { max-width: 52ch; margin: 1em auto 2em; opacity: .8; }
.contact-band .btn { background: var(--bg); color: var(--ink); }

@media (max-width: 860px) {
  .cv { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photo { max-width: 260px; }
  #nav a:not(.btn) { display: none; }
  .grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
}