/* Styles des galeries privées (sélection ♥, numéros, barre de sélection) et de la
   visionneuse adaptative. Fichier séparé de style.css pour que les mises à jour
   n'écrasent jamais vos personnalisations (couleurs, typographie...). */

/* =========================================================
   GALERIES PRIVÉES : sélection ♥, numéros, barre de sélection
   ========================================================= */
.page-content--narrow { grid-template-columns: 1fr; max-width: 480px; }
.gallery-title { font-size: 1.6rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.gallery-lead { color: var(--ink-soft); margin: 0 0 24px; }
.private-gallery-head .gallery-lead { margin: 0; font-size: 0.92rem; }

.private-gallery-head {
    max-width: var(--max-w);
    margin: 44px auto 0;
    padding: 0 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.private-gallery-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.private-gallery-actions [hidden] { display: none; }
.private-gallery-msg { max-width: var(--max-w); margin: 20px auto 0; padding: 0 24px; }
.private-gallery-hint { max-width: var(--max-w); margin: 18px auto 0; padding: 0 24px; color: var(--ink-soft); font-size: 0.92rem; }
.tag-filter--tight { margin-top: 14px; }

.admin-preview-banner {
    background: #fff8e6;
    color: #7a5c00;
    border-bottom: 1px solid #f0dca0;
    padding: 10px 24px;
    font-size: 0.85rem;
    text-align: center;
}
.admin-preview-banner a { text-decoration: underline; margin-left: 6px; }

.gallery-cell { position: relative; min-width: 0; }
.gallery-cell .gallery-item { height: 100%; }
.photo-num {
    position: absolute;
    left: 10px;
    bottom: 10px;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.55);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
}
.fav-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.fav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    color: #1d1d1f;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.fav-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.fav-btn:hover { transform: scale(1.06); }
.fav-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fav-btn[aria-pressed="true"] { background: #e0245e; color: #fff; }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.gallery-cell.is-fav .gallery-item { box-shadow: 0 0 0 3px #e0245e; }

.selection-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    max-width: var(--max-w);
    margin: 28px auto 0;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
}
.selection-bar-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.selection-bar-count { font-weight: 600; padding-top: 10px; }
.selection-bar-note { margin: 8px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.selection-send { flex: 0 1 460px; }
.selection-send summary { list-style: none; display: flex; margin-left: auto; width: fit-content; }
.selection-send summary::-webkit-details-marker { display: none; }
.selection-send[open] summary { display: none; }
.selection-send-form { display: flex; flex-direction: column; gap: 8px; }
.selection-send-form label { font-size: 0.85rem; color: var(--ink-soft); }
.selection-send-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--surface);
    resize: vertical;
}
.selection-send-actions { display: flex; justify-content: flex-end; gap: 8px; }

.lightbox picture { display: contents; }
.lightbox-fav { position: absolute; bottom: 24px; right: 24px; }

@media (max-width: 640px) {
    .private-gallery-head { margin-top: 28px; }
    .private-gallery-actions, .private-gallery-actions .btn { width: 100%; }
    .fav-btn { width: 40px; height: 40px; }
    .fav-form { top: 6px; right: 6px; }
    .photo-num { left: 6px; bottom: 6px; }
    .selection-bar { padding-left: 16px; padding-right: 16px; }
    .selection-send { flex-basis: 100%; }
    .selection-send summary { width: 100%; }
    .lightbox-fav { bottom: 16px; right: 50%; transform: translateX(50%); }
}

/* =========================================================
   Défilement continu de la galerie (petits écrans)
   ========================================================= */
.gallery-more {
    max-width: var(--max-w);
    margin: 8px auto 70px;
    padding: 0 24px;
    text-align: center;
}
.gallery-more-btn {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 12px 24px;
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    min-height: 44px;
}
.gallery-more-btn[hidden] { display: none; }
.gallery-more-status { color: var(--ink-soft); font-size: 0.9rem; margin: 12px 0 0; min-height: 1.4em; }
.pagination[hidden] { display: none; }
.gallery-previous { display: none; }

@media (max-width: 860px) {
    .gallery-previous {
        display: block;
        max-width: var(--max-w);
        margin: 20px auto 0;
        padding: 0 24px;
        color: var(--ink-soft);
        font-size: 0.9rem;
    }
}

/* =========================================================
   Mode sombre : texte des éléments "pleins" (tag actif, page en
   cours, boutons principaux...). Leur fond prend la couleur du
   texte (var(--ink)), qui devient claire en mode sombre : le
   texte doit donc s'inverser lui aussi, au lieu de rester blanc.
   ========================================================= */
:root { --on-ink: #ffffff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --on-ink: #121214; }
}
:root[data-theme="dark"] { --on-ink: #121214; }

.tag-filter a.active,
.pagination .current,
.submit-btn,
.btn-primary,
.skip-link,
.selection-send summary.btn-primary { color: var(--on-ink); }

/* ---------- Présentation de la page d'accueil (H1 + texte) ----------
   Titre volontairement discret : taille d'un texte courant, pour ne pas prendre
   le pas sur les photos, tout en donnant à Google un vrai titre de page. */
.home-intro {
    max-width: var(--max-w);
    margin: 40px auto 0;
    padding: 0 24px;
}
.home-intro-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--ink);
}
.home-intro-text {
    margin: 4px 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.home-intro + .tag-filter { margin-top: 20px; }
.home-intro ~ .gallery:not(.gallery--after-filter) { padding-top: 24px; }
.home-intro ~ .gallery-empty:not(.gallery-empty--after-filter) { margin-top: 30px; }
@media (max-width: 640px) {
    .home-intro { margin-top: 24px; }
    .home-intro-text { font-size: 0.92rem; }
}

/* ---------- Formulaire de contact : message mis en forme ---------- */
.rich-editor {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rich-editor.is-focused { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(0,113,227,0.15); }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--hairline); }
.rich-btn {
    min-width: 34px; height: 32px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; background: transparent; color: var(--ink);
    font: inherit; font-size: 0.95rem; cursor: pointer;
}
.rich-btn:hover { background: var(--hairline); }
.rich-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rich-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.rich-italic em { font-family: Georgia, 'Times New Roman', serif; }
.rich-sep { width: 1px; height: 20px; background: var(--hairline); margin: 0 6px; }
.rich-color { min-width: 30px; padding: 0 4px; }
.rich-swatch { width: 18px; height: 18px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.rich-swatch--reset { background: var(--surface); color: var(--ink); font-size: 0.72rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: inset 0 0 0 1px var(--hairline); }
.rich-area {
    min-height: 150px; max-height: 420px; overflow-y: auto;
    padding: 12px 14px; font-size: 0.98rem; line-height: 1.55; color: var(--ink);
    outline: none; overflow-wrap: anywhere; white-space: pre-wrap;
}
.rich-editor.is-empty .rich-area::before { content: attr(data-placeholder); color: var(--ink-soft); pointer-events: none; }
@media (max-width: 480px) {
    .rich-toolbar { gap: 0; padding: 4px 6px; flex-wrap: nowrap; }
    .rich-btn { min-width: 34px; height: 38px; padding: 0 4px; }
    .rich-color { min-width: 30px; padding: 0 3px; }
    .rich-sep { margin: 0 3px; }
}
.contact-form .form-hint { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); display: flex; gap: 6px; }
.contact-form .form-hint::before { content: '🔒'; font-size: 0.75rem; line-height: 1.6; }

/* ---------- Bouton "revenir en haut" (mobile) ---------- */
.to-top { display: none; }
@media (max-width: 860px) {
    .to-top {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom) + var(--to-top-lift, 0px));
        z-index: 150; /* sous la visionneuse photo (200) et le menu */
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid var(--hairline);
        background: var(--surface);
        color: var(--ink);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
        cursor: pointer;
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease, bottom .2s ease, background-color .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
    .to-top:active { transform: scale(0.94); }
    .to-top:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
}
/* Thème sombre : ombre plus marquée pour détacher le bouton du fond. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .to-top { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55); }
}
:root[data-theme="dark"] .to-top { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }