/* Compléments applicatifs. */
picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-photo picture,
.split-photo picture {
    height: auto;
}

.mosaique a:hover img,
.mosaique a:focus-visible img,
.galerie figure:hover img {
    transform: none;
}

.galerie .serie[data-theme] .serie-titre {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.galerie .serie-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.galerie .serie-link:focus-visible {
    outline-offset: -4px;
}

.galerie figcaption {
    pointer-events: auto;
}

.breadcrumbs {
    padding-top: 30px;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 10px;
    z-index: 100;
    background: var(--fond);
    padding: 12px;
}

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

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

#main-content,
main,
.wrap,
.form-grid > * {
    min-width: 0;
}

.champ ul {
    color: var(--accent-fonce);
}

.champ input[type="checkbox"],
.champ input[type="radio"] {
    width: auto;
}

.champ textarea {
    width: 100%;
}

.thread {
    max-width: 760px;
    margin: auto;
    padding: 40px 20px 80px;
    overflow-wrap: anywhere;
}

.thread article {
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
}

.thread article p {
    white-space: pre-wrap;
}

.secret-link {
    display: block;
    overflow-wrap: anywhere;
    padding: 20px;
    background: var(--fond-2);
}

@media (width <=360px) {
    .nav-inner {
        gap: 8px;
    }

    .brand {
        font-size: 1.45rem;
    }

    .lang-switch {
        margin-left: 0;
    }

    .hero-ctas .btn {
        white-space: normal;
    }
}

/* Le contenu reste visible sans JavaScript et lors de captures complètes. */
.reveal {
    opacity: 1;
    transform: none;
}

.strip a:hover img {
    transform: none;
}

.gallery-entry {
    min-width: 0;
}

.gallery-entry.cache {
    display: none;
}

.gallery-description {
    margin: 18px 2px 24px;
    font-size: 0.95rem;
    color: var(--encre);
    text-wrap: pretty;
}

.preview-notice {
    margin-top: 24px;
    padding: 20px;
    border: 2px solid var(--accent-fonce);
    background: var(--fond-2);
}

.photo-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pack-summary {
    margin-block: 24px 12px;
    padding-block: 12px;
    border-block: 1px solid var(--line);
}