:root {
    --red: #c00;
    --red-dark: #9e0000;
    --pink: #f3b5b5;
    --ink: #2b2522;
    --muted: #7a6f69;
    --paper: #fff;
    --cream: #fbf6f3;
    --line: #eadfd9;
    --radius: 14px;
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans: Lato, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.6 var(--sans);
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--red); }
a:hover { color: var(--red-dark); }

/* En-tête ---------------------------------------------------------------- */
.site-header {
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 16px 0;
}
.langs {
    display: flex;
    justify-content: flex-end;
    gap: 6px 16px;
    flex-wrap: wrap;
    font-size: 14px;
}
.langs a { color: var(--muted); text-decoration: none; }
.langs a:hover { color: var(--red); }
.langs a[aria-current] { color: var(--red); font-weight: 700; }
.banner img { margin: 0 auto; }

/* Menu ------------------------------------------------------------------- */
.menu {
    background: var(--red);
    border-radius: 0 60px 0 0 / 0 24px 0 0;
}
.menu ul {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 8px;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.menu a {
    display: block;
    padding: 10px 14px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
}
.menu a:hover { color: var(--pink); }
.menu a[aria-current] { color: var(--pink); }

/* Contenu ---------------------------------------------------------------- */
.page {
    max-width: 960px;
    margin: 0 auto;
    padding: 8px 16px 64px;
}
h1 {
    margin: 32px 0 12px;
    font: 600 2.1rem/1.15 var(--serif);
    color: var(--red);
}
h2 { font-size: 1rem; margin: 0 0 6px; }
p { margin: 0 0 12px; }
.big {
    font: 500 1.9rem/1.35 var(--serif);
    color: var(--ink);
    margin-top: 24px;
}
.notice {
    background: var(--cream);
    border-left: 4px solid var(--red);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
}
.back { text-decoration: none; font-weight: 700; display: inline-block; margin-top: 20px; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline b { color: var(--red); display: inline-block; min-width: 6.5em; }

/* Liste des galeries ----------------------------------------------------- */
.cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
}
.cards a {
    display: block;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--cream);
    transition: transform .2s, box-shadow .2s;
}
.cards a:hover, .cards a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgb(0 0 0 / .12);
}
.cards img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-title { display: block; padding: 10px 14px 0; font-weight: 700; }
.card-meta { display: block; padding: 0 14px 12px; color: var(--muted); font-size: 14px; }
p.card-meta { padding: 0; }

/* Galerie ---------------------------------------------------------------- */
.grid {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.grid a { display: block; border-radius: 8px; overflow: hidden; background: var(--cream); }
.grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s;
}
.grid a:hover img, .grid a:focus-visible img { transform: scale(1.05); }

/* Visionneuse ------------------------------------------------------------ */
.lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(15 10 10 / .94);
    color: #fff;
    touch-action: pan-y pinch-zoom;
}
.lightbox::backdrop { background: rgb(0 0 0 / .6); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 90px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    user-select: none;
}
.lightbox button {
    position: absolute;
    border: 0;
    background: rgb(255 255 255 / .12);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgb(255 255 255 / .28); }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; top: 50%; translate: 0 -50%; }
.lb-next { right: 12px; top: 50%; translate: 0 -50%; }
.lb-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    font-size: 14px;
}
.lb-bar a { color: var(--pink); }

/* Vidéos ----------------------------------------------------------------- */
.videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.videos figure { margin: 0; }
.videos video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius);
}
.videos figcaption { padding-top: 8px; font-weight: 700; }

/* Livre d'or ------------------------------------------------------------- */
.message {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.message h2 { color: var(--red); font-size: 15px; }
.message p { margin: 0; overflow-wrap: anywhere; }

.site-footer {
    text-align: center;
    color: var(--muted);
    font: 500 1.1rem var(--serif);
    padding: 24px 16px 40px;
    border-top: 1px solid var(--line);
}

@media (max-width: 600px) {
    h1 { font-size: 1.7rem; }
    .menu { border-radius: 0; }
    .menu a { padding: 8px 10px; font-size: 15px; }
    .lb-prev, .lb-next { top: auto; bottom: 56px; translate: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}