/* =============================================================================
   Atelier Lumen — feuille de styles du site public
   Sommaire
     1. Polices
     2. Jetons de design
     3. Base et typographie
     4. Éléments d'interface (liens, boutons, pastilles)
     5. En-tête et navigation
     6. Hero
     7. Manifeste
     8. Sections, titres de section
     9. À la une
    10. Tuiles de galeries
    11. Grille de cartes
    12. Bandeau de séries (page galerie)
    13. Mur justifié (galeries)
    14. Visionneuse
    15. Prose (contenu markdown)
    16. Formulaire de contact
    17. Pied de page
    18. Pages intérieures
    19. Animations
    20. Adaptations et préférences
    21. Galeries privées (accès client)
    22. Mode sombre
   ========================================================================== */

/* 1. Polices ---------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Jetons ----------------------------------------------------------------- */
:root {
    color-scheme: light dark;

    --paper: #fbfaf7;
    --paper-warm: #f4f0e8;
    --paper-deep: #ebe5da;
    --surface: #ffffff;
    --night: #16130f;
    --ink: #16130f;
    --ink-soft: #453f36;
    --muted: #867e73;
    --line: #e2dcd1;
    --line-strong: #cfc6b8;
    --accent: #b0592a;
    --accent-quiet: #d59a6b;
    --glass: rgba(251, 250, 247, 0.88);
    --glass-menu: rgba(251, 250, 247, 0.97);
    --ok: #2f6b46;
    --ok-ink: #245136;
    --danger: #a02b1c;
    --danger-ink: #7d2317;
    --banner-bg: #fdf3e6;
    --banner-line: #ebd4b6;
    --banner-ink: #7a4a16;

    --rail: clamp(1.15rem, 4.6vw, 4.75rem);
    --gutter: clamp(1.1rem, 2.4vw, 2rem);
    --maxw: 104rem;
    --measure: 34rem;

    --font-display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
    --font-hero: "Cormorant Garamond", "Hoefler Text", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
    --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --step-1: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    --step-2: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
    --step-3: clamp(1.8rem, 1.2rem + 3vw, 3.4rem);
    --step-4: clamp(2.4rem, 1.3rem + 5.4vw, 5.6rem);
    --step-5: clamp(3rem, 1.2rem + 9vw, 8.5rem);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --shadow-soft: 0 1.5rem 3rem -2rem rgba(22, 19, 15, 0.35);
}

/* 2b. Mode sombre ------------------------------------------------------------ */
/*  Trois états : `html[data-theme="dark"]` (choix explicite),
    `html[data-theme="light"]` (choix explicite), et aucun attribut (mode
    automatique : on suit le système via `prefers-color-scheme`). Le JS
    (`site.js`, `initTheme`) résout le choix au chargement et le mémorise en
    `localStorage` ; sans JavaScript, le mode automatique s'applique seul. */
html[data-theme="dark"] {
    color-scheme: dark;
    --paper: #16130f;
    --paper-warm: #1e1a15;
    --paper-deep: #2a231b;
    --surface: #1e1a15;
    --night: #100e0b;
    --ink: #f1eadd;
    --ink-soft: #d5cbb8;
    --muted: #a79b87;
    --line: #38322b;
    --line-strong: #4f463a;
    --accent: #d0824a;
    --accent-quiet: #e3ac7e;
    --glass: rgba(22, 19, 15, 0.88);
    --glass-menu: rgba(22, 19, 15, 0.97);
    --ok: #5da87c;
    --ok-ink: #a9d8bc;
    --danger: #d96a52;
    --danger-ink: #f0b3a4;
    --banner-bg: #2a2116;
    --banner-line: #4f3f28;
    --banner-ink: #e3c893;
    --shadow-soft: 0 1.5rem 3rem -2rem rgba(0, 0, 0, 0.75);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --paper: #16130f;
        --paper-warm: #1e1a15;
        --paper-deep: #2a231b;
        --surface: #1e1a15;
        --night: #100e0b;
        --ink: #f1eadd;
        --ink-soft: #d5cbb8;
        --muted: #a79b87;
        --line: #38322b;
        --line-strong: #4f463a;
        --accent: #d0824a;
        --accent-quiet: #e3ac7e;
        --glass: rgba(22, 19, 15, 0.88);
        --glass-menu: rgba(22, 19, 15, 0.97);
        --ok: #5da87c;
        --ok-ink: #a9d8bc;
        --danger: #d96a52;
        --danger-ink: #f0b3a4;
        --banner-bg: #2a2116;
        --banner-line: #4f3f28;
        --banner-ink: #e3c893;
        --shadow-soft: 0 1.5rem 3rem -2rem rgba(0, 0, 0, 0.75);
    }
}

/* 3. Base ------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--paper);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
    font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
    text-align: left;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body:has(.lightbox.is-open) {
    overflow: hidden;
}

body.is-locked {
    overflow: hidden;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
}

/* `<picture>` ne doit pas générer de boîte : sans cela, un `<img>` en
   `height: 100%` / `object-fit: cover` se résout contre la hauteur automatique
   de `<picture>` et ne remplit jamais son conteneur. */
picture {
    display: contents;
}

img {
    height: auto;
}

/* L'attribut `hidden` doit toujours l'emporter. Sans cette règle, une règle
   `display` du même fichier (`.lightbox`, `.grid`, `.mobile-menu`, `.card`…)
   annulerait le masquage demandé en HTML ou en JavaScript. */
[hidden] {
    display: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.015em;
}

p {
    margin: 0;
}

dl,
dd,
dt,
ul,
ol,
figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

::selection {
    background: var(--ink);
    color: var(--paper);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.1rem;
    background: var(--ink);
    color: var(--paper);
    font-size: var(--step--1);
}
.skip-link:focus {
    left: 0.75rem;
    top: 0.75rem;
}

/* 4. Interface -------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease),
        transform 0.35s var(--ease);
}
.button--primary {
    background: var(--ink);
    color: var(--paper);
}
.button--primary:hover {
    background: var(--accent);
    transform: translateY(-1px);
}
.button--ghost {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    backdrop-filter: blur(6px);
}
.button--ghost:hover {
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
}
.button--quiet {
    border-color: var(--line-strong);
    color: var(--ink-soft);
}
.button--quiet:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 0.2rem;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arrow:hover {
    color: var(--accent);
    border-color: var(--accent);
    gap: 0.9rem;
}

.tag {
    display: inline-block;
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.badge {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(22, 19, 15, 0.82);
    color: #fff;
    backdrop-filter: blur(6px);
}

/* 5. En-tête ---------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    color: var(--ink);
    background: var(--glass);
    backdrop-filter: blur(14px) saturate(140%);
    transition: background 0.45s var(--ease), color 0.45s var(--ease), box-shadow 0.45s var(--ease),
        backdrop-filter 0.45s var(--ease);
}
.site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: var(--line);
    transition: opacity 0.45s var(--ease);
}
/* Sur une page avec image d'ouverture, l'en-tête flotte en clair au-dessus. */
body.has-hero .site-header:not(.is-scrolled) {
    background: transparent;
    color: #fff;
    backdrop-filter: none;
}
body.has-hero .site-header:not(.is-scrolled)::after {
    opacity: 0;
}
body.has-hero .site-header:not(.is-scrolled) .brand__role {
    opacity: 0.85;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.1rem var(--rail);
}

.brand {
    display: grid;
    line-height: 1.15;
}
.brand__name {
    font-family: var(--font-hero);
    font-style: italic;
    font-size: clamp(1.24rem, 1.05rem + 0.62vw, 1.62rem);
    line-height: 1.06;
    letter-spacing: 0;
    word-spacing: 0.04em;
}
.brand__role {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.7;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.9rem;
}
.site-nav__link {
    position: relative;
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0;
}
.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
}
.site-nav__link--cta {
    padding: 0.5rem 1.15rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    letter-spacing: 0.14em;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.site-nav__link--cta::after {
    content: none;
}
.site-nav__link--cta:hover,
.site-nav__link--cta:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.site-nav__group {
    position: relative;
}
.site-nav__link--toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.3s var(--ease);
}
.site-nav__group[data-open="true"] .caret {
    transform: rotate(180deg);
}

.site-nav__menu {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: 50%;
    translate: -50% 0;
    min-width: 14rem;
    display: grid;
    padding: 0.5rem;
    background: var(--glass-menu);
    backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.4rem);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.site-nav__group[data-open="true"] .site-nav__menu,
.site-nav__group:hover .site-nav__menu,
.site-nav__group:focus-within .site-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-nav__menu a {
    padding: 0.55rem 0.85rem;
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    transition: background 0.2s var(--ease);
}
.site-nav__menu a:hover {
    background: var(--paper-warm);
    color: var(--accent);
}

.nav-toggle {
    display: none;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
}
.nav-toggle span {
    display: block;
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    transition: transform 0.35s var(--ease);
}
.nav-toggle span + span {
    margin-top: 0.35rem;
    width: 1.1rem;
    margin-left: auto;
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-content: center;
    gap: 2rem;
    padding: 4.5rem var(--rail) 3rem;
    background: var(--night);
    color: #f3efe8;
}
.mobile-menu nav {
    display: grid;
    gap: 0.35rem;
}
.mobile-menu nav a {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 1.2rem + 3vw, 2.6rem);
    line-height: 1.25;
}
.mobile-menu__cta {
    justify-self: start;
    margin-top: 1.1rem;
    padding: 0.3rem 1.25rem;
    border: 1px solid var(--accent-quiet);
    border-radius: 999px;
    color: var(--accent-quiet);
    font-size: clamp(1.4rem, 1rem + 2.4vw, 2rem);
}
.mobile-menu__foot {
    display: grid;
    gap: 0.3rem;
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* 6. Hero ------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: end;
    padding: 8rem var(--rail) clamp(2rem, 6vh, 4.5rem);
    color: #fff;
    background: var(--night);
    overflow: hidden;
}
.hero__media {
    position: absolute;
    inset: 0;
    background: var(--photo-color, #1b1815);
}
.hero__media picture,
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero__media img {
    animation: hero-zoom 24s var(--ease) forwards;
}
@keyframes hero-zoom {
    from {
        transform: scale(1.06);
    }
    to {
        transform: scale(1);
    }
}
.hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(12, 10, 8, 0.82) 0%,
        rgba(12, 10, 8, 0.42) 42%,
        rgba(12, 10, 8, 0.18) 70%,
        rgba(12, 10, 8, 0.4) 100%
    );
}
.hero--empty {
    min-height: 62svh;
}
.hero__content {
    position: relative;
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
    display: grid;
    gap: 1.1rem;
    justify-items: start;
}
.hero__eyebrow {
    font-size: var(--step--1);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.85;
}
.hero__title {
    font-family: var(--font-hero);
    font-style: italic;
    font-weight: 400;
    font-size: calc(var(--step-5) * 1.14);
    line-height: 1.02;
    letter-spacing: 0;
    word-spacing: 0.04em;
    max-width: 20ch;
}
.hero__tagline {
    max-width: 46ch;
    font-size: var(--step-1);
    font-family: var(--font-display);
    line-height: 1.35;
    opacity: 0.92;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.6rem;
}
.hero__actions .button--quiet {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.hero__actions .button--quiet:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.92);
    border-color: transparent;
}
.hero__credit {
    position: absolute;
    right: var(--rail);
    bottom: clamp(2rem, 6vh, 4.5rem);
    max-width: 22ch;
    font-size: var(--step--1);
    text-align: right;
    opacity: 0.6;
}

/* 7. Manifeste -------------------------------------------------------------- */
.statement {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(4rem, 12vh, 9rem) var(--rail) clamp(2rem, 6vh, 4rem);
    display: grid;
    gap: 1.6rem;
}
.statement__text {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.28;
    max-width: 30ch;
    text-wrap: balance;
}

/* 8. Sections --------------------------------------------------------------- */
.section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(3.5rem, 10vh, 7rem) var(--rail);
}
.section__head {
    display: grid;
    gap: 0.7rem;
    margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.section__head--row {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.5rem;
}
.section__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: var(--step--1);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
}
.section__eyebrow::before {
    content: "";
    width: 1.9rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.section__title {
    font-size: var(--step-3);
}
.section__lead {
    max-width: 52ch;
    color: var(--ink-soft);
}
.section__hint {
    font-size: var(--step--1);
    color: var(--muted);
    letter-spacing: 0.04em;
}
.gallery-note {
    margin: calc(-1 * clamp(1.2rem, 3vh, 2.2rem)) 0 clamp(1.6rem, 4vh, 2.6rem);
    font-size: var(--step--1);
    color: var(--muted);
}

/* 9. À la une --------------------------------------------------------------- */
.featured {
    display: grid;
    gap: clamp(3.5rem, 9vh, 6.5rem);
}
.featured__item {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}
.featured__item--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}
.featured__item--reverse .featured__media {
    order: 2;
}
.featured__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--photo-color, var(--paper-deep));
}
.featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}
.featured__media:hover img {
    transform: scale(1.035);
}
.featured__body {
    display: grid;
    gap: 1rem;
    align-content: center;
}
.featured__title {
    font-size: var(--step-3);
    max-width: 22ch;
}
.featured__title a:hover {
    color: var(--accent);
}
.featured__subtitle {
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--ink-soft);
}
.featured__excerpt {
    max-width: 46ch;
    color: var(--ink-soft);
}
.featured__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    margin-top: 0.6rem;
}
.featured__meta {
    font-size: var(--step--1);
    color: var(--muted);
    letter-spacing: 0.06em;
}

/* 10. Tuiles ---------------------------------------------------------------- */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--gutter);
}
.tile {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--photo-color, var(--paper-deep));
    aspect-ratio: 3 / 4;
    color: #fff;
}
.tile__media,
.tile__media picture,
.tile__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tile__media img {
    transition: transform 1.2s var(--ease);
}
.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 10, 8, 0.86) 0%, rgba(12, 10, 8, 0.12) 58%);
    transition: opacity 0.5s var(--ease);
}
.tile:hover .tile__media img {
    transform: scale(1.05);
}
.tile__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: grid;
    gap: 0.3rem;
    padding: clamp(1.1rem, 2.4vw, 1.8rem);
}
.tile__label {
    font-family: var(--font-display);
    font-size: var(--step-2);
}
.tile__count {
    font-size: var(--step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.78;
}
.tile__desc {
    font-size: var(--step--1);
    line-height: 1.5;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.45s var(--ease), max-height 0.45s var(--ease);
}
.tile:hover .tile__desc,
.tile:focus-visible .tile__desc {
    opacity: 0.85;
    max-height: 6rem;
}

/* 11. Grille ---------------------------------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem) var(--gutter);
}
.card__link {
    display: grid;
    gap: 1.1rem;
}
.card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--photo-color, var(--paper-deep));
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}
.card__link:hover .card__media img {
    transform: scale(1.045);
}
.card__body {
    display: grid;
    gap: 0.5rem;
}
.card__meta {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: var(--step--1);
    color: var(--muted);
    letter-spacing: 0.05em;
}
.card__title {
    font-size: var(--step-2);
    max-width: 24ch;
}
.card__link:hover .card__title {
    color: var(--accent);
}
.card__subtitle {
    font-size: var(--step--1);
    color: var(--ink-soft);
}
.card__excerpt {
    font-size: var(--step--1);
    color: var(--ink-soft);
    line-height: 1.55;
}
.card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--step--1);
    color: var(--muted);
    letter-spacing: 0.05em;
}
.card__sep {
    opacity: 0.5;
}
.grid__empty {
    padding: 3rem 0;
    color: var(--muted);
}
.grid__empty a {
    border-bottom: 1px solid currentColor;
}

/* 12. Bandeau de séries ----------------------------------------------------- */
.strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--gutter);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--rail);
}
.strip__item {
    display: grid;
    gap: 0.75rem;
}
.strip__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--photo-color, var(--paper-deep));
}
.strip__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease), opacity 0.5s var(--ease);
}
.strip__item:hover .strip__media img {
    transform: scale(1.05);
}
.strip__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    display: block;
}
.strip__meta {
    display: block;
    font-size: var(--step--1);
    color: var(--muted);
    letter-spacing: 0.05em;
}

/* 13. Mur justifié ---------------------------------------------------------- */
.wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--gutter);
    /* Sans JavaScript, chaque vignette garde son rapport d'aspect naturel :
       on aligne en haut pour éviter les aplats de couleur sous les images
       les plus courtes. Le mur justifié (JS) remplace ce comportement. */
    align-items: start;
}
.wall.is-justified {
    display: flex;
    flex-wrap: wrap;
    /* Les rangées complètes remplissent la largeur ; seules les dernières
       rangées incomplètes (une photo restée seule) sont ainsi centrées. */
    justify-content: center;
    gap: var(--gutter);
    align-items: flex-start;
}
.wall.is-justified .photo {
    flex: 0 0 auto;
}
.photo {
    margin: 0;
    display: grid;
    gap: 0.6rem;
}
.photo__frame {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--photo-color, var(--paper-deep));
}
.photo__frame img {
    width: 100%;
    height: auto;
    transition: opacity 0.6s var(--ease);
}
.wall.is-justified .photo__frame img {
    height: 100%;
    /* `contain` : la photographie est toujours montrée en entier. Le cadre
       ayant le rapport d'aspect de l'image, aucun liseré n'apparaît. */
    object-fit: contain;
}
.photo__hint {
    position: absolute;
    inset: 0;
    background: rgba(12, 10, 8, 0);
    transition: background 0.4s var(--ease);
}
.photo__frame:hover .photo__hint {
    background: rgba(12, 10, 8, 0.12);
}
.photo__frame::after {
    content: "";
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(251, 250, 247, 0.92) no-repeat center / 0.95rem
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316130f' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 10V4h6M20 14v6h-6M4 4l7 7M20 20l-7-7'/%3E%3C/svg%3E");
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.photo__frame:hover::after {
    opacity: 1;
    transform: scale(1);
}
.photo__caption {
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--muted);
    max-width: 46ch;
}

/* 14. Visionneuse ----------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: rgba(10, 9, 7, 0.96);
    backdrop-filter: blur(10px);
    color: #f3efe8;
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}
.lightbox.is-open {
    opacity: 1;
}
.lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem var(--rail);
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.8;
}
.lightbox__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.lightbox__btn {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    color: inherit;
    transition: background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
.lightbox__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 clamp(1rem, 6vw, 5rem);
}
.lightbox__image {
    max-width: min(100%, 96rem);
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: var(--photo-color, #14120f);
    box-shadow: 0 2rem 5rem -2rem rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.lightbox__image.is-ready {
    opacity: 1;
    transform: scale(1);
}
.lightbox__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    color: #f3efe8;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.16);
}
.lightbox__nav--prev {
    left: clamp(0.6rem, 2vw, 2rem);
}
.lightbox__nav--next {
    right: clamp(0.6rem, 2vw, 2rem);
}
.lightbox__meta {
    display: grid;
    gap: 0.45rem;
    max-width: 72rem;
    margin: 0 auto;
    width: 100%;
    padding: 1rem var(--rail) 1.6rem;
    font-size: var(--step--1);
    line-height: 1.55;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}
.lightbox__meta.is-visible {
    opacity: 1;
}
.lightbox__caption {
    font-family: var(--font-display);
    font-size: var(--step-1);
}
.lightbox__exif {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}
.lightbox__link {
    justify-self: start;
    border-bottom: 1px solid rgba(243, 239, 232, 0.4);
    letter-spacing: 0.06em;
}
.lightbox__link:hover {
    border-color: transparent;
    color: var(--accent-quiet);
}

/* 15. Prose ----------------------------------------------------------------- */
.prose {
    max-width: var(--measure);
    font-size: var(--step-1);
    line-height: 1.7;
    color: var(--ink-soft);
}
.prose > * + * {
    margin-top: 1.15em;
}
.prose h2 {
    font-size: var(--step-2);
    color: var(--ink);
    margin-top: 2.2em;
}
.prose h3 {
    font-size: var(--step-1);
    color: var(--ink);
    margin-top: 1.8em;
}
.prose strong {
    color: var(--ink);
    font-weight: 600;
}
.prose a {
    color: var(--ink);
    border-bottom: 1px solid var(--line-strong);
}
.prose a:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.prose ul,
.prose ol {
    padding-left: 1.2rem;
    list-style: none;
}
.prose li {
    position: relative;
    margin-top: 0.5em;
}
.prose ul li::before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 0.72em;
    width: 0.42rem;
    height: 1px;
    background: var(--accent);
}
.prose ol {
    counter-reset: item;
}
.prose ol li::before {
    counter-increment: item;
    content: counter(item) ".";
    position: absolute;
    left: -1.5rem;
    font-size: 0.85em;
    color: var(--accent);
}
.prose blockquote {
    margin: 2em 0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--accent);
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.35;
    color: var(--ink);
}
.prose img {
    margin: 2em 0;
}
.prose hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.5em 0;
}
.prose code {
    font-size: 0.9em;
    background: var(--paper-warm);
    padding: 0.15em 0.4em;
}

/* 16. Formulaire ------------------------------------------------------------ */
.contact-form {
    display: grid;
    gap: 1.25rem;
    max-width: 46rem;
}
.contact-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1.25rem;
}
.field {
    display: grid;
    gap: 0.45rem;
}
.field__label {
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.field__label em {
    font-style: normal;
    color: var(--accent);
}
.field input,
.field select,
.field textarea {
    font: inherit;
    font-size: var(--step-0);
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    padding: 0.6rem 0;
    border-radius: 0;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea {
    border: 1px solid var(--line-strong);
    padding: 0.9rem;
    resize: vertical;
    line-height: 1.6;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ink);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
    outline: none;
}
.field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 0.75rem) 1.15rem, calc(100% - 0.4rem) 1.15rem;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
}
.contact-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contact-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
}
.contact-form__status {
    font-size: var(--step--1);
    color: var(--muted);
}
.contact-form__status.is-error {
    color: var(--danger);
}
.contact-form__status.is-ok {
    color: var(--ok);
}
.spinner {
    display: none;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
    border-top-color: currentColor;
    animation: spin 0.8s linear infinite;
}
.is-busy .spinner {
    display: block;
}
.is-busy {
    opacity: 0.85;
    pointer-events: none;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 17. Pied de page ---------------------------------------------------------- */
.site-footer {
    margin-top: clamp(4rem, 12vh, 8rem);
    padding: clamp(3rem, 8vh, 5.5rem) var(--rail) 2rem;
    background: var(--night);
    color: rgba(243, 239, 232, 0.82);
}
.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(auto-fit, minmax(10rem, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    max-width: var(--maxw);
    margin: 0 auto;
}
.site-footer__name {
    font-family: var(--font-display);
    font-size: var(--step-2);
    color: #f3efe8;
}
.site-footer__role,
.site-footer__note {
    font-size: var(--step--1);
    opacity: 0.7;
    margin-top: 0.35rem;
    max-width: 34ch;
}
.site-footer__cols {
    display: contents;
}
.site-footer__cols > div {
    display: grid;
    gap: 0.6rem;
    align-content: start;
}
.site-footer__title {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-quiet);
    margin-bottom: 0.4rem;
}
.site-footer ul {
    display: grid;
    gap: 0.4rem;
}
.site-footer a:hover {
    color: #fff;
}
.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.8rem;
    max-width: var(--maxw);
    margin: clamp(2.5rem, 6vh, 4rem) auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(243, 239, 232, 0.16);
    font-size: var(--step--1);
    opacity: 0.65;
}
.site-footer__base span {
    padding: 0 0.4rem;
}

/* 18. Pages intérieures ----------------------------------------------------- */
.page {
    padding-top: clamp(6rem, 16vh, 9rem);
}
.page-head {
    display: grid;
    gap: 0.9rem;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--rail) clamp(2rem, 6vh, 3.5rem);
}
.page-head__title {
    font-size: var(--step-4);
    max-width: 20ch;
}
.page-head__lead {
    max-width: 56ch;
    font-size: var(--step-1);
    color: var(--ink-soft);
}
.page-head__meta {
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.page-head--category .page-head__title {
    font-style: italic;
}

.filters {
    display: grid;
    gap: 0.9rem;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--rail) clamp(2rem, 5vh, 3rem);
}
.filters__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.filters__label {
    font-size: var(--step--1);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 0.5rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.95rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: var(--step--1);
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chip:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.chip__count {
    font-size: 0.72rem;
    opacity: 0.6;
}
.page-reportages .grid,
.page-galerie .grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--rail) clamp(2rem, 6vh, 4rem);
}

.reportage__head {
    display: grid;
    gap: 1rem;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--rail) clamp(2rem, 5vh, 3.5rem);
}
.reportage__crumbs {
    display: flex;
    gap: 0.6rem;
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.reportage__crumbs a:hover {
    color: var(--accent);
}
.reportage__title {
    font-size: var(--step-4);
    max-width: 24ch;
}
.reportage__subtitle {
    font-family: var(--font-display);
    font-size: var(--step-2);
    color: var(--ink-soft);
    max-width: 40ch;
}
.reportage__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 1.2rem 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    max-width: 62rem;
}
.reportage__meta dt {
    font-size: var(--step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.2rem;
}
.reportage__meta dd {
    font-size: var(--step-0);
}
.reportage__cover {
    display: grid;
    gap: 0.7rem;
    max-width: 78rem;
    margin: 0 auto clamp(2rem, 6vh, 4rem);
    padding: 0 var(--rail);
}
.reportage__cover figcaption {
    font-size: var(--step--1);
    color: var(--muted);
}
.reportage__body,
.reportage__lead {
    max-width: var(--maxw);
    margin: 0 auto clamp(2rem, 6vh, 3.5rem);
    padding: 0 var(--rail);
}
.reportage__lead {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.4;
    color: var(--ink);
    max-width: 40ch;
    margin-left: max(var(--rail), calc((100vw - var(--maxw)) / 2 + var(--rail)));
}
.reportage__foot {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--rail);
}
.reportage__share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.reportage__share a {
    border-bottom: 1px solid var(--line-strong);
}
.reportage__share a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.standard {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--rail) clamp(2rem, 6vh, 4rem);
    align-items: start;
}
.standard__aside {
    position: sticky;
    top: 7rem;
}
.vcard {
    display: grid;
    gap: 0.55rem;
    padding: 1.6rem;
    background: var(--paper-warm);
    border: 1px solid var(--line);
}
.vcard__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
}
.vcard__role {
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.vcard ul {
    display: grid;
    gap: 0.35rem;
    font-size: var(--step-0);
    margin-top: 0.7rem;
}
.vcard a {
    border-bottom: 1px solid var(--line-strong);
}
.vcard a:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.vcard__socials {
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
}
.page--contact .page-head {
    padding-bottom: clamp(1rem, 3vh, 2rem);
}

.cta {
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(3.5rem, 10vh, 7rem) var(--rail);
}
.cta__title {
    font-size: var(--step-4);
}
.cta__text {
    color: var(--ink-soft);
    max-width: 44ch;
}
.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 0.8rem;
}

/* Prestations (accueil) ----------------------------------------------------- */
.prestations-teaser {
    display: grid;
    gap: 1.4rem;
    justify-items: start;
    max-width: 54ch;
}
.prestations-teaser .section__lead {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.5;
}

/* Collectif (accueil) ------------------------------------------------------- */
.collectif {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    padding: clamp(2rem, 6vh, 3.5rem) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.collectif__logo {
    display: grid;
    place-items: center;
    width: clamp(8.5rem, 16vw, 13rem);
    aspect-ratio: 1;
    padding: clamp(1rem, 3vw, 1.8rem);
    background: #fbfaf7;
    border: 1px solid var(--line);
    border-radius: 0.35rem;
    transition: transform 0.5s var(--ease);
}
.collectif__logo:hover {
    transform: translateY(-0.2rem);
}
.collectif__logo img {
    width: 100%;
    height: auto;
}
.collectif__body {
    display: grid;
    gap: 0.9rem;
    justify-items: start;
}
.collectif__title {
    font-size: var(--step-2);
}
.collectif__text {
    max-width: 56ch;
    color: var(--ink-soft);
    line-height: 1.6;
}

.banner {
    max-width: var(--maxw);
    margin: 0 auto 1.5rem;
    padding: 0.8rem var(--rail);
}
.banner--draft {
    background: var(--banner-bg);
    border-bottom: 1px solid var(--banner-line);
    color: var(--banner-ink);
    font-size: var(--step--1);
}
.banner--draft a {
    border-bottom: 1px solid currentColor;
}

.page--error {
    min-height: 60svh;
}
/* 18. Pages intérieures (suite) ---------------------------------------------- */
/*  Une « feuille » à deux colonnes : le message d'un côté, la photo du chat
    d'http.cat qui regarde la scène de l'autre (voir partials/error-cat). */
.error-sheet {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--rail) clamp(3rem, 8vh, 6rem);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
.error-sheet__body {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}
.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding-top: 1rem;
}

/* Messages contextuels (formulaire) */
.notice {
    padding: 0.85rem 1.1rem;
    border-left: 2px solid var(--accent);
    background: var(--paper-warm);
    font-size: var(--step--1);
    max-width: 46rem;
}
.notice--ok {
    border-color: var(--ok);
    color: var(--ok-ink);
}
.notice--error {
    border-color: var(--danger);
    color: var(--danger-ink);
}

/* 19. Animations ------------------------------------------------------------ */
.has-js [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.has-js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
.is-leaving {
    opacity: 0.25;
    transition: opacity 0.25s var(--ease);
}

/* 20. Adaptations ----------------------------------------------------------- */
@media (max-width: 1080px) {
    .standard {
        grid-template-columns: minmax(0, 1fr);
    }
    .standard__aside {
        position: static;
    }
    .featured__item,
    .featured__item--reverse {
        grid-template-columns: minmax(0, 1fr);
    }
    .featured__item--reverse .featured__media {
        order: 0;
    }
}

@media (max-width: 900px) {
    .site-nav {
        display: none;
    }
    .nav-toggle {
        display: grid;
    }
    .reportage__lead {
        margin-left: auto;
    }
    .hero__credit {
        position: static;
        text-align: left;
        margin-top: 1.5rem;
        max-width: none;
    }
    .section__head--row {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 640px) {
    :root {
        --measure: 100%;
    }
    .hero {
        min-height: 88svh;
        padding-top: 7rem;
    }
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr);
    }
    .site-footer__base {
        justify-content: flex-start;
    }
    .lightbox__bar {
        padding-inline: 1rem;
    }
    .lightbox__stage {
        padding-inline: 0.5rem;
    }
    .wall.is-justified {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .collectif {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .has-js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .site-header,
    .private-header,
    .private-intro__actions,
    .mobile-menu,
    .lightbox,
    .site-footer__cols {
        display: none !important;
    }
}

/* 21. Galeries privées (accès client) --------------------------------------- */
/*  Pages servies uniquement après validation d'un mot de passe : mise en page
    sobre, sans navigation complète, centrée sur la galerie et son téléchargement. */

/* 21.a Protection des images (dissuasion) ----------------------------------- */
/*  Empêche l'enregistrement par clic droit, le glisser-déposer de l'image et
    la sélection « longue pression » sur mobile. Ce n'est pas une protection
    absolue (une capture d'écran reste possible) : c'est un frein au pillage
    automatique, complété côté serveur par des URL imprévisibles et par
    l'absence de toute adresse publique pour les photos privées. */
img,
.photo__frame,
.lightbox__image {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.page-private {
    text-align: left;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

.private-header {
    border-bottom: 1px solid var(--line);
    background: var(--glass);
    backdrop-filter: blur(12px) saturate(140%);
}
.private-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1rem var(--rail);
    width: 100%;
}
.private-header__actions {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}
.private-header__link {
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.private-header__link:hover {
    color: var(--accent);
}
.private-header__link--button {
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
}

/* Sur un téléphone, l'en-tête privé doit tenir sur une ligne : on retire le
   sous-titre du logo et on resserre l'espacement entre les deux actions. */
@media (max-width: 560px) {
    .private-header__inner {
        gap: 0.75rem;
        padding: 0.85rem var(--rail);
    }
    .private-header .brand__role {
        display: none;
    }
    .private-header__actions {
        gap: 0.9rem;
        white-space: nowrap;
    }
    .private-header__link {
        font-size: var(--step--1);
        letter-spacing: 0.06em;
    }
}

/* 21.b Écran de connexion --------------------------------------------------- */
.private-shell {
    flex: 1;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 8vh, 6rem) var(--rail);
}
.private-card {
    width: min(30rem, 100%);
    display: grid;
    gap: 1rem;
    padding: clamp(1.8rem, 5vw, 3rem);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}
.private-card__title {
    font-family: var(--font-hero);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.05;
}
.private-card__lead {
    color: var(--ink-soft);
    max-width: 34ch;
}
.private-card__hint {
    font-size: var(--step--1);
    color: var(--muted);
}
.private-card__foot {
    font-size: var(--step--1);
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 0.9rem;
}
.private-form {
    display: grid;
    gap: 1rem;
    margin-top: 0.4rem;
}
.private-form__submit {
    justify-self: start;
}

/* 21.c Galerie -------------------------------------------------------------- */
.private-main {
    flex: 1;
    text-align: left;
}
.private-intro {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(2.5rem, 8vh, 5rem) var(--rail) clamp(1rem, 3vh, 2rem);
    display: grid;
    gap: 0.7rem;
}
.private-intro__title {
    font-family: var(--font-hero);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.2rem, 1.3rem + 4vw, 4.4rem);
    line-height: 1.02;
    max-width: 24ch;
}
.private-intro__client {
    font-size: var(--step-1);
    font-family: var(--font-display);
    color: var(--ink-soft);
}
.private-intro__message {
    max-width: 60ch;
    color: var(--ink-soft);
    line-height: 1.6;
    white-space: pre-line;
}
.private-intro__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.4rem;
}
.private-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.6rem;
    margin-top: 1rem;
}
.private-intro__hint {
    font-size: var(--step--1);
    color: var(--muted);
    max-width: 46ch;
}
.private-wall {
    padding-top: 0;
}
.private-wall__hint {
    margin-top: 1.6rem;
    font-size: var(--step--1);
    color: var(--muted);
}

.private-footer {
    margin-top: auto;
    padding: 2rem var(--rail);
    border-top: 1px solid var(--line);
    font-size: var(--step--1);
    color: var(--muted);
    display: grid;
    gap: 0.3rem;
    text-align: center;
}
.private-footer__note {
    opacity: 0.8;
}

.empty-state {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 2rem var(--rail) 4rem;
    color: var(--muted);
}

/* 22. Mode sombre — bouton de bascule ---------------------------------------- */
/*  Placé dans l'en-tête, visible aussi sur mobile (hors du menu burger). */
.theme-toggle {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid transparent;
    border-radius: 50%;
    color: inherit;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.theme-toggle:hover {
    border-color: currentColor;
}
.theme-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
}
.theme-toggle__moon {
    display: none;
}
html[data-theme="dark"] .theme-toggle__sun {
    display: none;
}
html[data-theme="dark"] .theme-toggle__moon {
    display: block;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle__sun {
        display: none;
    }
    html:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle__moon {
        display: block;
    }
}

@media (max-width: 640px) {
    .private-header__actions {
        gap: 1rem;
    }
    .private-intro__actions {
        align-items: flex-start;
    }
}

/* 23. Pages d'erreur et maintenance (photos http.cat) ----------------------- */
/*  Chaque page d'erreur — 404, 500, et le 503 de la maintenance — est
    accompagnée d'une photo du service http.cat. Les fichiers sont LIVRÉS AVEC
    LE SITE, dans `public/img/http-cats/` : rien n'est demandé à un domaine
    tiers à l'exécution (voir `lib/error-cats.js`). */
.http-cat {
    margin: 0;
    display: grid;
    gap: 0.75rem;
    width: 100%;
    max-width: 32rem;
    justify-self: start;
}
.http-cat__image {
    display: block;
    width: 100%;
    height: auto;
    background: var(--paper-deep);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-soft);
}
.http-cat__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--ink-soft);
}
.http-cat__credit {
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    white-space: nowrap;
}
.http-cat__credit:hover {
    color: var(--accent);
}

/* Page « site en maintenance » (503) — volontairement SANS navigation. */
.page--maintenance {
    min-height: 100svh;
    padding-top: 0;
}
.maintenance {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(2.5rem, 8vh, 6rem) var(--rail) clamp(2rem, 6vh, 4rem);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
.maintenance__mark {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.3rem;
}
.maintenance__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
}
.maintenance__role {
    font-size: var(--step--1);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.maintenance__body {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}
.maintenance__title {
    font-family: var(--font-hero);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
    line-height: 1.03;
    max-width: 22ch;
}
.maintenance__lead {
    max-width: 48ch;
    font-size: var(--step-1);
    line-height: 1.6;
    color: var(--ink-soft);
}
.maintenance__until {
    font-family: var(--font-display);
    color: var(--accent);
    max-width: 48ch;
}
.maintenance__hint {
    max-width: 52ch;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--muted);
}
.maintenance__foot {
    grid-column: 1 / -1;
    margin-top: clamp(1rem, 4vh, 2.5rem);
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.35rem;
    font-size: var(--step--1);
    color: var(--muted);
}
.maintenance__foot a {
    border-bottom: 1px solid currentColor;
}
.maintenance__foot a:hover {
    color: var(--accent);
}

@media (max-width: 900px) {
    .error-sheet,
    .maintenance {
        grid-template-columns: minmax(0, 1fr);
    }
}