/*
 * gregoirebaucher.fr — feuille de style commune.
 * Papier clair, encre anthracite, Baskervville pour la signature et les
 * titres, police système pour le texte et les commandes. Grille de 4 px.
 */

@font-face {
    font-family: "Baskervville";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/baskervville-latin-ext-400-normal-WzzThMB.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Baskervville";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/baskervville-latin-400-normal-ehGHSSZ.woff2") format("woff2");
    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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --paper: #F8F7F3;
    --surface: #FFFFFF;
    --ink: #20211F;
    --ink-soft: #51534E;
    --accent: #244B64;
    --line: #D6D4CB;
    --placeholder: #E8E6DE;
    --danger: #8A2318;

    --serif: "Baskervville", Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --gutter: clamp(16px, 4vw, 48px);
    --measure: 66ch;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 16px;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.55;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

h2 {
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}

p {
    margin: 0 0 16px;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-thickness: 2px;
}

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

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -80px;
    z-index: 20;
    padding: 12px 16px;
    background: var(--ink);
    color: var(--paper);
}

.skip-link:focus {
    top: 8px;
}

/* ---------- Topbar ---------- */

.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 32px;
    padding: 20px var(--gutter) 12px;
    border-bottom: 1px solid var(--line);
}

.topbar__signature {
    font-family: var(--serif);
    font-size: 1.625rem;
    line-height: 1.2;
    color: var(--ink);
    text-decoration: none;
    padding: 6px 0;
}

.topbar__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topbar__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.topbar__nav a:hover {
    border-bottom-color: var(--ink-soft);
}

.topbar__nav a[aria-current] {
    border-bottom-color: var(--ink);
}

/* ---------- Page ---------- */

.page {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px var(--gutter) 72px;
}

.page-head {
    margin-bottom: 32px;
}

.page-head h1 + * {
    margin-top: 12px;
}

.meta {
    color: var(--ink-soft);
    margin: 0 0 16px;
}

.section {
    margin-top: 56px;
}

.section > h2 {
    margin-bottom: 20px;
}

.section > h2 a {
    color: inherit;
}

.section > h2 + .meta {
    margin-top: -12px;
}

.back-link {
    margin-bottom: 24px;
}

.back-link a::before {
    content: "← ";
}

.action-link {
    font-weight: 600;
}

.action-link::after {
    content: " →";
}

.hint {
    color: var(--ink-soft);
    font-size: 0.9375rem;
    margin: 8px 0 0;
}

.notice {
    max-width: var(--measure);
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--ink-soft);
    border-radius: 2px;
}

.notice--error {
    border-left-color: var(--danger);
}

.notice--success {
    border-left-color: var(--accent);
}

/* ---------- Commandes ---------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--ink);
    border-radius: 2px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--paper);
}

.button--primary {
    background: var(--ink);
    color: var(--paper);
}

.button--primary:hover {
    background: #000;
}

.button--danger {
    border-color: var(--danger);
    color: var(--danger);
}

.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="file"],
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--ink-soft);
    border-radius: 2px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* ---------- Accueil ---------- */

.home {
    display: grid;
    gap: 32px;
    align-items: center;
}

.home__name {
    margin-bottom: 20px;
}

.home__presentation {
    max-width: 34rem;
    font-size: 1.125rem;
    color: var(--ink);
}

.home__photo {
    margin: 0;
}

.home__photo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    background: var(--placeholder);
}

.home__photo a {
    display: block;
}

.home__photo figcaption {
    margin-top: 8px;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.home--text-only {
    padding: 8vh 0;
}

@media (min-width: 900px) {
    .home {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 56px;
    }
}

/* ---------- Listes d'événements ---------- */

.mode-switch {
    display: flex;
    gap: 24px;
}

.mode-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.mode-switch a:hover {
    border-bottom-color: var(--ink-soft);
}

.mode-switch a[aria-current] {
    border-bottom-color: var(--ink);
    font-weight: 600;
}

.event-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 40px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-card {
    scroll-margin-top: 24px;
}

.event-card a {
    display: block;
    color: var(--ink);
    text-decoration: none;
}

.event-card__cover {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--placeholder);
    overflow: hidden;
}

.event-card__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card__title {
    display: block;
    margin-top: 12px;
    font-family: var(--serif);
    font-size: 1.375rem;
    line-height: 1.2;
}

.event-card a:hover .event-card__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.event-card__date {
    display: block;
    margin-top: 4px;
    color: var(--ink-soft);
}

.event-cover {
    margin: 0 0 40px;
    max-width: 900px;
}

.event-cover img {
    display: block;
    background: var(--placeholder);
}

/* ---------- Galerie en rangées justifiées ----------
 * Chaque vignette garde le rapport de forme de sa photo. L'ordre du DOM est
 * celui de l'affichage. La dernière rangée n'est pas étirée.
 */

.gallery {
    --row: 230px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery::after {
    content: "";
    flex-grow: 1000000;
}

.shot {
    position: relative;
    flex-grow: calc(var(--ratio) * 100);
    flex-basis: calc(var(--ratio) * var(--row));
    aspect-ratio: var(--ratio);
    min-width: 0;
    max-width: 100%;
    background: var(--placeholder);
}

.shot__open {
    display: block;
    width: 100%;
    height: 100%;
}

.shot__open img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Case de sélection : toujours visible, cible de 44 px, lisible sur une
   image blanche comme sur une image noire (fond blanc, bord encre, liseré). */
.shot__select {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
}

.shot__select input,
.viewer__select input,
.check {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 2px solid var(--ink);
    border-radius: 2px;
    background: #FFFFFF;
    box-shadow: 0 0 0 2px #FFFFFF;
    cursor: pointer;
}

.shot__select input:checked,
.viewer__select input:checked,
.check:checked {
    background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='square' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.shot:has(input:checked) {
    outline: 3px solid var(--ink);
    outline-offset: -3px;
}

.shot:has(input:checked) .shot__open img {
    opacity: 0.82;
}

@media (max-width: 640px) {
    .gallery {
        --row: 150px;
        gap: 6px;
    }
}

/* Petit téléphone : deux paysages par rangée. */
@media (max-width: 480px) {
    .gallery {
        --row: 104px;
    }
}

/* ---------- Bordereau de sélection ---------- */

.selection-tools {
    margin-bottom: 16px;
}

.selection-tools + .section {
    margin-top: 32px;
}

.selection-tools:not(:has(button:not([hidden]))) {
    display: none;
}

.selection-bar {
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 24px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
}

/* Collé en bas d'écran seulement quand une sélection existe. */
.selection-bar[data-empty="false"] {
    position: sticky;
    bottom: 0;
    border-bottom: 0;
}

/* Un élément qui reçoit le focus n'est pas amené sous le bordereau. */
html:has(.selection-bar[data-empty="false"]) {
    scroll-padding-bottom: 150px;
}

@media (max-width: 520px) {
    .selection-bar {
        gap: 6px 12px;
        padding: 8px 12px;
    }

    .selection-bar__summary {
        flex-basis: 100%;
        font-size: 0.9375rem;
    }

    .selection-bar__actions {
        flex: 1;
        flex-wrap: nowrap;
    }

    .selection-bar__actions .button {
        padding-inline: 12px;
    }

    .selection-bar__actions .button--primary {
        flex: 1;
    }

    .selection-bar__long {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.selection-bar__summary {
    margin: 0;
    font-weight: 600;
}

.selection-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selection-bar__status {
    flex-basis: 100%;
    margin: 0;
}

.selection-bar__status:empty {
    display: none;
}

.selection-bar__status[data-kind="error"] {
    color: var(--danger);
    font-weight: 600;
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 40px;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.pagination span {
    color: var(--ink-soft);
}

/* ---------- Mes photos ---------- */

.search {
    max-width: 34rem;
    margin-bottom: 32px;
}

.search__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search__row input {
    flex: 1 1 14rem;
    width: auto;
}

/* ---------- Archive ---------- */

.archive {
    max-width: var(--measure);
    margin-bottom: 32px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 2px;
}

.archive__state {
    font-size: 1.125rem;
}

/* ---------- Pages de texte ---------- */

.prose {
    max-width: var(--measure);
}

.prose h1 {
    margin-bottom: 28px;
}

.prose h2 {
    margin: 40px 0 12px;
}

.to-complete {
    padding: 0 4px;
    background: #FFF1B8;
    color: var(--ink);
    border-bottom: 1px dashed var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

/* ---------- Visionneuse ---------- */

.viewer {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #121311;
    color: #F4F3EF;
}

.viewer[open] {
    display: grid;
    /* Colonne et rangée de l'image bornées : une grande photo ne pousse
       jamais les commandes hors de l'écran. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    overflow: hidden;
}

.viewer::backdrop {
    background: #121311;
}

.viewer__bar,
.viewer__actions,
.viewer__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 8px 16px;
}

.viewer__actions {
    flex-wrap: wrap;
    padding-bottom: 0;
}

.viewer__title {
    min-width: 0;
    margin: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer__caption {
    font-weight: 400;
    color: #C9C7BF;
}

.viewer__caption::before {
    content: "· ";
}

.viewer__bar .viewer__button {
    flex: none;
}

.viewer__size {
    margin-left: 0.35em;
    font-weight: 400;
}

.viewer__select {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.viewer__select input {
    border-color: #F4F3EF;
    background-color: transparent;
    box-shadow: none;
}

.viewer__select input:checked {
    background-color: #F4F3EF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23121311' stroke-width='3.2' stroke-linecap='square' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.viewer__download,
.viewer__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid #F4F3EF;
    border-radius: 2px;
    background: transparent;
    color: #F4F3EF;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.viewer__download {
    background: #F4F3EF;
    color: #121311;
    font-weight: 600;
}

.viewer__button[disabled] {
    opacity: 0.4;
    cursor: default;
}

.viewer :focus-visible {
    outline-color: #FFFFFF;
}

.viewer__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 8px;
    touch-action: pan-y pinch-zoom;
}

.viewer__stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.viewer__position {
    margin: 0;
    color: #C9C7BF;
}

/* ---------- Pied de page ---------- */

.footer {
    padding: 20px var(--gutter) 28px;
    border-top: 1px solid var(--line);
}

.footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink-soft);
}

.footer li:last-child {
    margin-left: auto;
}

@media (max-width: 520px) {
    .footer li:last-child {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}