.personal-page { --personal-gap: 28px; }
.personal-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding-top: 35px; padding-bottom: 65px; align-items: center; }
.back-to-lab { display: inline-block; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.personal-hero .eyebrow { margin-top: 36px; }
.personal-hero h1 { font-size: clamp(65px, 8vw, 110px); line-height: .99; letter-spacing: -.065em; }
.personal-lead { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; margin-top: 26px; max-width: 470px; }
.personal-intro { color: var(--muted); font-size: 15px; max-width: 470px; }
.personal-hero-collage { position: relative; height: 520px; margin-top: 20px; }
.memory-photo { min-width: 0; }
.memory-photo > a { display: block; position: relative; background: #ecece4; overflow: hidden; }
.memory-photo img { width: 100%; height: auto; transition: transform .35s ease; }
.memory-photo a:hover img { transform: scale(1.025); }
.memory-photo figcaption { padding: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.memory-photo figcaption strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 3px; }
.photo-enlarge { position: absolute; right: 9px; bottom: 9px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fffffff2; color: var(--ink); box-shadow: 0 2px 8px #0001; }
.personal-hero-collage .memory-photo { position: absolute; background: #fff; padding: 12px 12px 16px; box-shadow: 0 5px 15px #11142316; animation: memory-arrive .7s ease both; }
.personal-hero-collage .memory-photo::before { content: ''; position: absolute; z-index: 2; width: 68px; height: 24px; left: calc(50% - 34px); top: -10px; transform: rotate(-6deg); background: #d9caadbd; box-shadow: 0 1px 2px #0001; }
.personal-hero-collage .memory-photo:first-child { width: 75%; top: 28px; left: 0; transform: rotate(-5deg); }
.personal-hero-collage .memory-photo:nth-child(2) { width: 44%; right: 0; top: 160px; transform: rotate(6deg); animation-delay: .1s; }
.personal-hero-collage .memory-photo:nth-child(2) img { aspect-ratio: 3 / 4; object-fit: cover; }
.personal-hero-collage .memory-photo figcaption span { display: none; }
.personal-hero-collage .photo-enlarge { width: 25px; height: 25px; font-size: 12px; }
.collage-note { position: absolute; left: 8px; bottom: 25px; font-size: 23px; line-height: 1.4; color: var(--accent-ink); transform: rotate(-7deg); }
.collage-line { position: absolute; bottom: 0; left: 150px; width: 180px; height: 60px; pointer-events: none; }
@keyframes memory-arrive { from { opacity: .1; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.personal-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; position: sticky; top: 10px; z-index: 5; border: 1px solid var(--line); background: #f8f8f5f5; border-radius: 40px; padding: 12px 22px; box-shadow: 0 3px 15px #11142308; }
.personal-nav a { padding: 5px 3px; font-size: 14px; line-height: 1.5; }
.personal-nav a:hover, .personal-nav a[aria-current] { color: var(--accent-ink); }
.personal-nav a span { font-family: monospace; font-size: 10px; color: var(--accent-ink); margin-right: 7px; }
.personal-section { padding-block: 80px; scroll-margin-top: 110px; }
.personal-section + .personal-section { border-top: 1px solid var(--line); }
.personal-section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 36px; }
.personal-section h2 { font-size: clamp(36px, 4.3vw, 62px); line-height: 1.03; }
.personal-section-copy { max-width: 520px; font-size: 16px; color: var(--muted); }
.personal-side-note { color: var(--accent-ink); font-size: 19px; line-height: 1.45; margin-top: 18px; }
.live-tickets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; padding-top: 8px; }












.travel-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 28px; align-items: start; }
.travel-grid > .memory-photo { grid-column: span 2; background: #fff; padding: 10px 10px 16px; box-shadow: 0 3px 10px #1114230e; }
.travel-grid > .memory-photo:nth-child(-n+2) { grid-column: span 3; }
.travel-grid .memory-photo img { aspect-ratio: 4 / 3; object-fit: contain; background: #eeeee8; }
.travel-grid .memory-photo:nth-child(2n) { transform: rotate(.6deg); }
.travel-grid .memory-photo:nth-child(3n) { transform: rotate(-.7deg); }
.travel-more { margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.travel-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; font-size: 14px; font-weight: 650; padding: 18px 0; }
.travel-more > summary::-webkit-details-marker { display: none; }
.travel-more > summary span { font-size: 25px; color: var(--accent-ink); font-weight: 400; transition: transform .2s; }
.travel-more[open] > summary span { transform: rotate(45deg); }
.travel-grid--more { padding-bottom: 28px; }
.travel-grid--more > .memory-photo:nth-child(-n+2) { grid-column: span 2; }
.travel-note { font-size: 21px; line-height: 1.4; color: var(--accent-ink); text-align: right; margin-top: 28px; transform: rotate(-3deg); }
.games-paper { background: #f1eee5; padding: 48px; border: 1px solid #e4dfd2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; position: relative; }
.games-copy p:not(.eyebrow) { margin-top: 23px; color: var(--muted); max-width: 500px; }
.game-drawing { min-width: 0; transform: rotate(-5deg); }
.game-drawing svg { width: 100%; }
.game-drawing > span { display: block; font-size: 24px; color: var(--accent-ink); text-align: right; padding-right: 25px; }
.sport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ski-memory { position: relative; max-width: 440px; margin-inline: auto; width: 100%; }
.ski-memory .memory-photo { background: #fff; padding: 12px 12px 17px; box-shadow: 0 5px 15px #11142314; transform: rotate(-2deg); }
.ski-memory .memory-photo img { aspect-ratio: 3 / 4; object-fit: contain; }


.f1-memory { min-width: 0; padding: 20px; }
.f1-memory h3 { font-size: 35px; }
.f1-memory > p:not(.eyebrow) { color: var(--muted); margin-top: 14px; }
.track-drawing { width: 100%; max-width: 440px; color: var(--ink); margin-top: 20px; }
.f1-memory .f1-note { color: var(--accent-ink) !important; font-size: 23px; line-height: 1.4; text-align: right; margin-top: 0; transform: rotate(-5deg); }
.personal-outro { padding-block: 60px 80px; border-top: 1px solid var(--line); }
.personal-outro h2 { font-size: clamp(30px,3.8vw,50px); }
.personal-outro-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 30px; margin-top: 28px; }
body.has-memory-viewer { overflow: hidden; }
.memory-viewer { width: min(1100px,calc(100vw - 40px)); max-width: none; max-height: 94vh; max-height: 94dvh; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.memory-viewer::backdrop { background: #080c19dc; }
.memory-viewer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.memory-viewer-top .eyebrow { margin: 0; }
.memory-viewer-top button { background: #fff; border: 1px solid var(--line); border-radius: 25px; padding: 7px 16px; min-height: 42px; font-size: 13px; }
.memory-viewer-top button span { font-size: 20px; margin-left: 8px; }
.memory-viewer h2 { font-size: 27px; line-height: 1.25; margin-top: 18px; letter-spacing: -.025em; }
#memory-viewer-caption { font-size: 14px; color: var(--muted); margin-top: 7px; }
.memory-viewer-image { width: auto; max-width: 100%; max-height: 70vh; max-height: 70dvh; object-fit: contain; margin: 20px auto 0; }

@media (max-width: 980px) {
 .personal-hero { gap: 25px; }
 .personal-hero-collage { height: 450px; }
 .personal-hero-collage .memory-photo:nth-child(2) { width: 49%; top: 145px; }
 .personal-hero h1 { font-size: clamp(56px,8vw,83px); }
 .personal-section-heading { gap: 30px; }
 .live-tickets { gap: 18px; }


 .travel-grid { gap: 20px; }
 .travel-grid > .memory-photo, .travel-grid--more > .memory-photo:nth-child(-n+2) { grid-column: span 3; }
 .games-paper { padding: 30px; }
 .sport-grid { gap: 25px; }
}
@media (max-width: 700px) {
 .personal-hero { grid-template-columns: 1fr; gap: 0; padding-top: 18px; padding-bottom: 35px; }
 .personal-hero h1 { font-size: clamp(60px,12vw,84px); }
 .personal-hero .eyebrow { margin-top: 28px; }
 .personal-hero-collage { height: 440px; max-width: 450px; width: 100%; margin-inline: auto; margin-top: 30px; }
 .personal-hero-collage .memory-photo:first-child { width: 75%; }
 .personal-hero-collage .memory-photo:nth-child(2) { width: 43%; top: 140px; }
 .collage-note { font-size: 20px; bottom: 10px; }
 .collage-line { left: 110px; bottom: -12px; width: 150px; }
 .personal-nav { gap: 6px 17px; padding: 10px 14px; top: 6px; border-radius: 22px; justify-content: space-around; }
 .personal-nav a { font-size: 12px; }
 .personal-nav a span { display: none; }
 .personal-section { padding-block: 50px; scroll-margin-top: 95px; }
 .personal-section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; }
 .personal-section h2 { font-size: 40px; }
 .personal-section-copy { font-size: 15px; }
 .live-tickets { grid-template-columns: 1fr; gap: 24px; }



 .travel-grid { grid-template-columns: 1fr; gap: 25px; }
 .travel-grid > .memory-photo, .travel-grid > .memory-photo:nth-child(-n+2) { grid-column: 1; }
 .travel-grid .memory-photo img { max-height: 380px; }
 .travel-note { font-size: 18px; }
 .games-paper { grid-template-columns: 1fr; padding: 25px; gap: 16px; }
 .game-drawing { max-width: 400px; margin-inline: auto; }
 .sport-grid { grid-template-columns: 1fr; gap: 45px; }
 .ski-memory { max-width: 370px; }
 .f1-memory { padding: 0; }
 .track-drawing { margin-inline: auto; }
 .personal-outro { padding-block: 40px 55px; }
 .memory-viewer { width: calc(100vw - 18px); padding: 15px; }
 .memory-viewer-top .eyebrow { max-width: 160px; font-size: 9px; }
 .memory-viewer h2 { font-size: 23px; }
}
@media (max-width: 380px) {
 .personal-hero-collage { height: 370px; }
 .personal-hero-collage .memory-photo:nth-child(2) { top: 125px; }
 .collage-note { font-size: 18px; }
 .personal-nav { gap: 4px 12px; padding-inline: 10px; }
 .personal-nav a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
 .personal-hero-collage .memory-photo { animation: none; }
}


/* Photos des artistes et listes personnelles. */
.band-photo { min-width: 0; background: #fff; padding: 9px 9px 18px; box-shadow: 0 4px 12px #11142314; transform: rotate(-1deg); }
.band-photo:nth-child(2) { transform: rotate(1.2deg); }
.band-photo:nth-child(3) { transform: rotate(-.5deg); }
.band-photo > a { display: block; position: relative; overflow: hidden; background: #111423; }
.band-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.band-photo a:hover img { transform: scale(1.025); }
.band-photo figcaption { padding: 17px 8px 0; }
.band-photo h3 { font-size: clamp(22px,2.2vw,30px); line-height: 1.1; letter-spacing: -.03em; }
.concert-roll { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.concert-roll h3 { font-size: 22px; line-height: 1.3; }
.concert-names { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 32px; padding: 0; margin: 22px 0 0; list-style: none; }
.concert-names li { padding-block: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.travel-destinations { margin-bottom: 30px; }
.travel-destinations .eyebrow { margin-bottom: 12px; }
.travel-destinations ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.travel-destinations li { border: 1px solid var(--line); border-radius: 25px; padding: 6px 14px; font-size: 13px; color: var(--muted); background: #ffffff60; }
.photo-credits { margin-bottom: 25px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.photo-credits > summary { width: fit-content; cursor: pointer; }
.photo-credits ul { padding-left: 17px; margin-block: 12px 8px; }
.photo-credits a { text-decoration: underline; text-underline-offset: 3px; }
.photo-credits p { max-width: 750px; }
@media (max-width: 980px) { .concert-names { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) {
 .band-photo h3 { font-size: 29px; }
 .concert-roll { margin-top: 30px; }
 .concert-names { gap: 8px 18px; }
 .concert-names li { font-size: 14px; }
 .travel-destinations li { font-size: 12px; padding: 6px 12px; }
}


/* Souvenirs de concert : un récit personnel sous chaque photographie. */
.band-anecdote { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.band-anecdote p + p { margin-top: 12px; }
.band-photo:has(.band-anecdote) { padding-bottom: 22px; }
@media (max-width: 700px) { .band-anecdote { font-size: 15px; line-height: 1.65; } }