@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #f4f2fb;
    --surface: #ffffff;
    --glass: rgba(255, 255, 255, 0.62);
    --glass-strong: rgba(255, 255, 255, 0.8);
    --text: #1a1625;
    --muted: #8b8398;
    --accent: #5b3df0;
    --accent-dark: #4527c9;
    --accent-soft: #efeaff;
    --coral: #ff7a59;
    --border: rgba(236, 232, 247, 0.9);
    --error: #c0392b;
    --error-soft: #fdecea;
    --success: #1e8a4c;
    --shadow: 0 2px 6px rgba(26, 22, 37, 0.04), 0 12px 28px rgba(91, 61, 240, 0.1);
    --radius: 16px;
    --sidebar-width: 232px;
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Site entièrement pensé en clair, aucun thème sombre implémenté — sans
   ceci, un navigateur/OS en mode sombre repeint le fond en noir (couleur
   "Canvas" système) alors que le texte reste sombre, illisible sur les
   pages sans fond propre (mentions-legales.php, cgv.php...). */
:root { color-scheme: light; }
body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Fond, uniquement sur les pages authentifiées (app + connexion) — jamais
   sur la page publique d'œuvre, qui doit rester simple et rapide. */
body:has(.sidebar), .auth-page {
    background-image:
        linear-gradient(180deg, rgba(244,242,251,0.5) 0%, rgba(244,242,251,0.65) 100%),
        url('dd.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--bg);
}

h1, h2 { font-weight: 700; letter-spacing: -0.01em; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* App shell (pages authentifiées uniquement — pas la page publique) */

body:has(.sidebar) {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--glass-strong);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.1rem;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text);
    padding: 0 0.4rem;
    margin-bottom: 2rem;
}
.brand-logo { height: 48px; width: 48px; object-fit: contain; flex-shrink: 0; }

.auth-logo {
    display: block;
    height: 58px;
    width: 58px;
    object-fit: contain;
    margin: 0 auto 0.75rem;
}

.nav-group { margin-bottom: 1.25rem; }
.nav-group-label {
    display: block;
    padding: 0 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.sidebar nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.8; }
.sidebar nav a:hover { color: var(--text); background: var(--bg); }
.sidebar nav a.active { color: var(--accent-dark); background: var(--accent-soft); font-weight: 600; }
.sidebar nav a.active svg { opacity: 1; }
.nav-unread-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--coral);
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

/* Sur desktop, .sidebar-menu ne doit rien changer à la mise en page actuelle
   (nav-group/spacer/profil restent des enfants flex directs de .sidebar) —
   il ne redevient une vraie boîte (le tiroir déroulant) que sur mobile. */
.sidebar-menu { display: contents; }

.sidebar-spacer { flex: 1; }

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem;
    border-radius: 12px;
    background: var(--bg);
}
.sidebar-profile-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    padding: 0.15rem;
}
.sidebar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #a78bfa 130%);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.sidebar-avatar-img { object-fit: cover; }
.sidebar-profile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sidebar-profile-text strong { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-profile-text span { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-profile-actions { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }
.sidebar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    padding: 0;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-icon-btn svg { width: 15px; height: 15px; }
.sidebar-icon-btn:hover { background: var(--surface); color: var(--text); }
.sidebar-logout:hover { color: var(--error); }

/* Modal "Mon profil" (nav.php) — <dialog> natif, pas de librairie JS */

@keyframes modal-rise {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.profile-modal {
    border: none;
    border-radius: 22px;
    padding: 0;
    width: min(480px, calc(100vw - 2rem));
    background: var(--surface);
    box-shadow: 0 20px 60px rgba(26, 22, 37, 0.25);
    color: var(--text);
}
.profile-modal::backdrop { background: rgba(26, 22, 37, 0.45); backdrop-filter: blur(3px); }
.profile-modal[open] { animation: modal-rise 0.22s cubic-bezier(0.16, 1, 0.3, 1); }

.profile-modal-form { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; }
.profile-modal-header { display: flex; align-items: center; justify-content: space-between; }
.profile-modal-header h2 { font-size: 1.25rem; margin: 0; }
.profile-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.profile-modal-close svg { width: 17px; height: 17px; }
.profile-modal-close:hover { background: var(--bg); color: var(--text); }

.profile-name-field { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.profile-name-field .hint { font-weight: 500; font-size: 0.78rem; }
.profile-name-field input,
.profile-name-field textarea {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(139, 131, 152, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    resize: vertical;
}
.profile-name-field input:focus,
.profile-name-field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.required { color: var(--error); }

.profile-fields { display: flex; gap: 1.25rem; align-items: flex-start; }
.profile-fields .profile-avatar-picker { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.profile-fields .profile-avatar-wrap { position: relative; width: 84px; height: 84px; }
.profile-fields .profile-avatar-circle {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.profile-avatar-circle:hover { border-color: var(--accent); }
.profile-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-placeholder { font-size: 0.72rem; color: var(--muted); }
.profile-fields .profile-avatar-plus {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--surface);
    cursor: pointer;
}
.profile-avatar-input { display: none; }
.profile-avatar-hint { font-size: 0.68rem; color: var(--muted); text-align: center; max-width: 100px; }

.profile-fields .profile-bio-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.profile-bio-field textarea {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(139, 131, 152, 0.06);
    resize: vertical;
    min-height: 84px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.profile-bio-field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }

.profile-social-fields { display: flex; flex-direction: column; gap: 0.6rem; }
.profile-social-fields-label { font-size: 0.72rem; color: var(--muted); }
.profile-social-fields label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.profile-social-fields input {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(139, 131, 152, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.profile-social-fields input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }

.profile-modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 0.25rem; }
.btn-ghost {
    padding: 0.7rem 1.15rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-ghost:hover { background: var(--bg); }
.btn-primary {
    padding: 0.7rem 1.4rem;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(91, 61, 240, 0.22);
    transition: background 0.15s ease, transform 0.12s ease;
}
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }

/* Confirmation de déconnexion (client/includes/nav.php) */
.confirm-modal {
    border: none;
    border-radius: 22px;
    padding: 0;
    width: min(340px, calc(100vw - 2rem));
    background: var(--surface);
    box-shadow: 0 20px 60px rgba(26, 22, 37, 0.25);
    color: var(--text);
    overflow: hidden;
}
.confirm-modal::backdrop { background: rgba(26, 22, 37, 0.45); backdrop-filter: blur(3px); }
.confirm-modal[open] { animation: modal-rise 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.confirm-modal-body { padding: 2rem 1.75rem 1.5rem; text-align: center; }
.confirm-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: 1rem;
}
.confirm-modal-icon svg { width: 26px; height: 26px; }
.confirm-modal-body h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.confirm-modal-body p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.confirm-modal-actions { display: flex; border-top: 1px solid var(--border); }
.confirm-modal-actions button, .confirm-modal-actions a {
    flex: 1;
    text-align: center;
    padding: 0.95rem;
    font-size: 0.92rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s ease;
}
.confirm-modal-actions button { color: var(--muted); border-right: 1px solid var(--border); }
.confirm-modal-actions button:hover, .confirm-modal-actions a:hover { background: var(--bg); }

/* Bandeau titre + texte d'intro, en carte "verre" pour rester lisible
   au-dessus du fond photo (voir contact.php) — le texte gris de .hint se
   fond sinon dans le fond très clair par endroits. */
.page-intro {
    background: var(--glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}
.page-intro h1 { margin: 0 0 0.4rem; }
.page-intro .hint { margin: 0; }

/* Fil de discussion artiste <-> fondateur (contact.php) */
.message-thread {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 0.5rem;
    margin: 1.5rem 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.message-thread::-webkit-scrollbar { width: 6px; }
.message-thread::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.message-thread-empty { text-align: center; padding: 1rem 0; }
.message-sender-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0 0.4rem 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.message-thread > .message-sender-label:first-child { margin-top: 0.75rem; }
.message-sender-avatar { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.message-sender-founder-tag {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--muted);
    opacity: 0.85;
}
.message-sender-founder-tag::before { content: '· '; }
.message-bubble-row { display: flex; margin-top: 0.6rem; margin-bottom: 0.75rem; }
.message-bubble-row.is-grouped { margin-top: -0.35rem; }
.message-bubble-row.is-mine { justify-content: flex-end; }
.message-bubble-row.is-them { justify-content: flex-start; }
.message-bubble {
    max-width: 75%;
    padding: 0.65rem 0.9rem;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(26, 22, 37, 0.06);
}
.message-bubble-row.is-mine .message-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.message-bubble-row.is-them .message-bubble { background: #fff; border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; }
.message-bubble-date { display: block; margin-top: 0.3rem; font-size: 0.68rem; opacity: 0.6; }
.message-form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 0.4rem 0.4rem 0.4rem 1.1rem;
    box-shadow: var(--shadow);
}
.message-form textarea {
    flex: 1;
    border: none;
    background: none;
    resize: none;
    padding: 0.55rem 0;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    max-height: 120px;
    color: var(--text);
}
.message-form textarea:focus { outline: none; }
.message-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(91, 61, 240, 0.28);
    transition: background 0.15s ease, transform 0.12s ease;
}
.message-send-btn svg { width: 18px; height: 18px; }
.message-send-btn:hover { background: var(--accent-dark); transform: scale(1.06); }
.message-send-btn.is-loading { display: flex; align-items: center; justify-content: center; }

@media (max-width: 480px) {
    .message-bubble { max-width: 88%; }
    .profile-fields { flex-direction: column; align-items: center; }
    .profile-bio-field { width: 100%; }
}

/* Mise en page générale */

main { flex: 1 1 auto; min-width: 0; padding: 2rem 2.25rem; max-width: 1040px; margin: 0 auto; }
main.narrow { max-width: 460px; }

h1 { font-size: 1.55rem; margin: 0 0 0.3rem; }

.hint { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

.stock-cards { display: flex; gap: 1rem; margin: 1.75rem 0; flex-wrap: wrap; }
.stock-card {
    flex: 1;
    min-width: 180px;
    background: var(--glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow);
}
.stock-label { display: block; font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.stock-value { display: block; font-size: 2.1rem; font-weight: 700; margin-top: 0.2rem; letter-spacing: -0.02em; }

.quick-links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.quick-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.15rem;
    background: var(--accent);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 16px rgba(91, 61, 240, 0.25);
    transition: background 0.15s ease, transform 0.1s ease;
}
.quick-links a:hover { background: var(--accent-dark); transform: translateY(-1px); }
.quick-link-disabled {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.15rem;
    background: var(--border);
    color: var(--muted);
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: not-allowed;
}

.badge { padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: #eee; letter-spacing: 0.01em; }
.badge-sub-active { background: #dcf3e3; color: #1e7d43; }
.badge-sub-expired { background: var(--error-soft); color: #a3301f; }
.badge-sub-none { background: #efecf7; color: #6b6478; }

.link-secondary { color: var(--accent); font-size: 0.9rem; text-decoration: none; font-weight: 500; }
.link-secondary:hover { text-decoration: underline; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.back-link svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.15s ease; }
.back-link:hover { color: var(--accent-dark); text-decoration: underline; }
.back-link:hover svg { transform: translateX(-3px); }

/* Connexion / inscription / onboarding */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}
.auth-form {
    background: var(--glass-strong);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    padding: 2.25rem 2rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: 340px;
    box-shadow: var(--shadow);
}
.auth-form h1 { font-size: 1.3rem; text-align: center; margin-bottom: 0.25rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.auth-form input, .auth-form textarea {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.98rem;
    font-family: inherit;
    resize: vertical;
    background: var(--bg);
}
.auth-form input:focus, .auth-form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.address-autocomplete-wrap { position: relative; }
.address-autocomplete-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.3rem;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.address-autocomplete-results.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Spécificité volontairement plus élevée que ".auth-form button" (et tout
   bouton d'action générique) : sans ça, une suggestion héritait du style du
   bouton de soumission du formulaire (fond plein, ombre...). */
.address-autocomplete-results .address-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.65rem;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    font-size: 0.85rem;
    font-weight: 400;
    font-family: inherit;
    line-height: 1.35;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.address-autocomplete-results .address-autocomplete-item:hover,
.address-autocomplete-results .address-autocomplete-item:focus-visible {
    background: var(--bg);
    outline: none;
}
.address-autocomplete-item-icon { flex-shrink: 0; width: 15px; height: 15px; color: var(--muted); }

.onboarding-form { gap: 0.85rem; }
.onboarding-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 1.1rem;
    background: rgba(139, 131, 152, 0.05);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.onboarding-section .profile-fields { margin: 0; }
.onboarding-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.onboarding-section-title { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.onboarding-section-note {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--bg);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}
.auth-form button {
    padding: 0.75rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(91, 61, 240, 0.25);
}
.auth-form button:hover { background: var(--accent-dark); }
.error { color: var(--error); font-size: 0.88rem; }
.success-text { color: var(--accent-dark); font-size: 0.88rem; }

/* Saisie de code OTP (6 chiffres) — vérification email / mot de passe oublié */

.otp-group {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin: 0.25rem 0;
}
.otp-box {
    width: 3rem;
    height: 3.4rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.otp-box:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.otp-box:disabled { opacity: 0.7; }
.otp-group.otp-error .otp-box {
    border-color: var(--error);
    animation: otp-shake 0.35s ease;
}
.otp-group.otp-success .otp-box {
    border-color: #22c55e;
    background: #eafff2;
    color: #15803d;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
@keyframes otp-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}
.otp-resend { text-align: center; font-size: 0.88rem; color: var(--muted); margin: 0; }
.otp-resend a, .otp-resend button {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.otp-resend button:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* Connexion — deux colonnes */

.signin-page {
    display: flex;
    min-height: 100vh;
    background: var(--bg);
}

.signin-form-col {
    flex: 1 1 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.signin-form-wrap { width: 100%; max-width: 380px; }
.signin-logo { height: 48px; width: 48px; object-fit: contain; margin-bottom: 1.5rem; }
.signin-title { font-size: 2.25rem; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.signin-subtitle { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.75rem; }

.signin-form { display: flex; flex-direction: column; gap: 1.25rem; }
.signin-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; color: var(--muted); }

.signin-input-wrap {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(139, 131, 152, 0.06);
    backdrop-filter: blur(6px);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.signin-input-wrap:focus-within { border-color: #c4b5fd; background: var(--accent-soft); }
.signin-input-wrap input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
}
.signin-input-wrap input:focus { outline: none; }
.signin-password-wrap { position: relative; }
.signin-password-wrap input { padding-right: 2.75rem; }
.signin-password-wrap button {
    position: absolute;
    top: 0; bottom: 0; right: 0.85rem;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
}
.signin-password-wrap button svg { width: 19px; height: 19px; }
.signin-password-wrap button:hover { color: var(--text); }

.signin-row { display: flex; align-items: center; justify-content: space-between; }
.signin-checkbox { display: flex !important; flex-direction: row !important; align-items: center; gap: 0.5rem; font-size: 0.88rem !important; color: var(--text) !important; cursor: pointer; }
.signin-checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }

.signin-submit {
    padding: 0.9rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(91, 61, 240, 0.28);
    transition: background 0.15s ease, transform 0.1s ease;
}
.signin-submit:hover { background: var(--accent-dark); transform: translateY(-1px); }

.signin-footer { text-align: center; font-size: 0.9rem; color: var(--muted); margin-top: 1.75rem; }
.signin-footer a { color: var(--accent); font-weight: 600; text-decoration: none; }
.signin-footer a:hover { text-decoration: underline; }

.signin-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--muted);
    font-size: 0.82rem;
}
.signin-divider::before, .signin-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.signin-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.signin-google:hover { background: var(--bg); box-shadow: var(--shadow); }

.signin-hero-col {
    flex: 1 1 480px;
    position: relative;
    padding: 1rem;
    display: none;
}
.signin-hero-image {
    position: absolute;
    inset: 1rem;
    border-radius: 28px;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
}
.signin-hero-card {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
    right: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(26, 22, 37, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 1.1rem 1.25rem;
    color: white;
}
.signin-hero-card img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); }
.signin-hero-card strong { display: block; font-size: 0.95rem; margin-bottom: 0.25rem; }
.signin-hero-card p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.85); line-height: 1.4; }

@media (min-width: 900px) {
    .signin-hero-col { display: block; }
}

/* Achat de puces */

main h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; }
main h2:first-of-type { margin-top: 1.5rem; }

.purchase-card {
    background: var(--glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    max-width: 420px;
}
.purchase-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: -1.5rem -1.5rem 1.25rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(239, 234, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius) var(--radius) 0 0;
}
.purchase-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.09), transparent 65%);
    pointer-events: none;
}
.purchase-photo img { position: relative; width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(91,61,240,0.2)); }
.purchase-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.purchase-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.purchase-form select {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.98rem;
    font-family: inherit;
    background: var(--bg);
}
.purchase-form select:focus { outline: none; border-color: var(--accent); }

.quantity-slider-head { display: flex; align-items: baseline; justify-content: space-between; }
.quantity-slider-head strong { font-size: 1.15rem; font-weight: 700; color: var(--accent-dark); }
input.quantity-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    margin: 0.5rem 0;
    border-radius: 999px;
    background: var(--border);
    outline: none;
    cursor: pointer;
}
input.quantity-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: transparent; }
input.quantity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--surface);
    box-shadow: 0 2px 8px rgba(91, 61, 240, 0.35);
    cursor: pointer;
    transition: transform 0.12s ease;
}
input.quantity-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
input.quantity-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border); }
input.quantity-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
input.quantity-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--surface);
    box-shadow: 0 2px 8px rgba(91, 61, 240, 0.35);
    cursor: pointer;
}
.quantity-slider-ticks { position: relative; height: 1.9rem; margin-top: 0.1rem; }
.quantity-slider-ticks span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
.quantity-slider-ticks span:first-child { transform: translateX(0); align-items: flex-start; }
.quantity-slider-ticks span:last-child { transform: translateX(-100%); align-items: flex-end; }
.quantity-slider-ticks span em { font-style: normal; font-size: 0.66rem; font-weight: 700; color: var(--accent-dark); }

.purchase-price-old { color: var(--muted); text-decoration: line-through; margin-right: 0.35rem; }
.purchase-discount-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    background: var(--coral);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}
.purchase-savings {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0.45rem 0.85rem;
    background: rgba(30, 138, 76, 0.12);
    border: 1px solid rgba(30, 138, 76, 0.3);
    border-radius: 999px;
    color: var(--success);
    font-size: 0.85rem;
    font-weight: 600;
}
.purchase-savings strong { font-weight: 700; }
.purchase-discount-badge[hidden], .purchase-savings[hidden] { display: none; }
.purchase-shipping-line {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0.45rem 0.85rem;
    background: rgba(91, 61, 240, 0.08);
    border: 1px solid rgba(91, 61, 240, 0.22);
    border-radius: 999px;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
}
.purchase-shipping-line.is-free {
    background: rgba(30, 138, 76, 0.12);
    border-color: rgba(30, 138, 76, 0.3);
    color: var(--success);
}
.purchase-delivery-line {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.5rem 0 0;
    padding: 0.45rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}
.purchase-delivery-line svg { width: 15px; height: 15px; flex-shrink: 0; }
.purchase-form button {
    padding: 0.75rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
}
.purchase-form button:hover { background: var(--accent-dark); }

/* Tableaux */

.table-scroll { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.chips-table { width: 100%; border-collapse: collapse; background: var(--glass); }
.chips-table th {
    padding: 0.7rem 0.9rem;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.chips-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 0.9rem;
}
.chips-table tbody tr:last-child td { border-bottom: none; }
.chips-table tbody tr:hover { background: var(--bg); }

.badge-en_stock { background: #e0f2f1; color: #00695c; }
.badge-attribuee { background: #fff3cd; color: #8a6a00; }
.badge-expediee { background: #dbe6ff; color: #2b4fb3; }
.badge-active { background: #dcf3e3; color: #1e7d43; }
.badge-desactivee { background: var(--error-soft); color: #a3301f; }
.badge-perdue_remplacee { background: #efecf7; color: #6b6478; }

.inline-form { display: inline-flex; align-items: center; gap: 0.4rem; }
.inline-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--surface);
}
.link-inline {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: none;
}
.link-inline:hover { text-decoration: underline; }
.link-inline-danger { color: var(--error); }

/* Formulaires génériques (œuvres, etc.) */

@keyframes card-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .stacked-form, .artwork-photo-frame { animation: none !important; }
}

.stacked-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: var(--shadow);
    animation: card-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.stacked-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
.stacked-form input, .stacked-form select, .stacked-form textarea {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
    background: rgba(139, 131, 152, 0.06);
    resize: vertical;
    min-width: 0;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.stacked-form input:focus, .stacked-form select:focus, .stacked-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.stacked-form button {
    padding: 0.85rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(91, 61, 240, 0.22);
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.stacked-form button:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(91, 61, 240, 0.3); }
.stacked-form button:active { transform: translateY(0); }
.stacked-form button.danger { background: var(--error); box-shadow: 0 6px 18px rgba(192, 57, 43, 0.2); }
.stacked-form button.danger:hover:not(:disabled) { background: #a3301f; }
.stacked-form button:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; box-shadow: none; transform: none; }

.dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 168px;
    padding: 1.5rem;
    border: 1.5px dashed var(--border);
    border-radius: 14px;
    background: rgba(139, 131, 152, 0.04);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone.dropzone-active { border-color: var(--accent); background: var(--accent-soft); }
.dropzone-prompt { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--accent);
}
.dropzone-icon svg { width: 20px; height: 20px; }
.dropzone-text { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text); line-height: 1.4; }
.dropzone-hint { font-size: 0.75rem; color: var(--muted); }

.dropzone-preview { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; width: 100%; }
.dropzone-preview[hidden], .dropzone-prompt[hidden] { display: none; }
/* Ni aspect-ratio ni object-fit:cover : la miniature garde exactement les
   mêmes proportions que la photo affichée côté visiteur (voir .public-photo
   plus bas) — juste plafonnée en taille pour rester dans le formulaire. */
.dropzone-preview img { max-width: 100%; max-height: 320px; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }
.dropzone-preview-info { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.dropzone-filename { font-size: 0.85rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.danger-zone {
    margin-top: 1.75rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--error-soft);
    background: rgba(192, 57, 43, 0.045);
    border-radius: 20px;
}
.danger-zone h2 { font-size: 1rem; color: var(--error); margin: 0 0 0.4rem; }
.danger-zone p { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.9rem; line-height: 1.5; }
.danger-zone .stacked-form { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; padding: 0; gap: 0; animation: none; }

.artwork-photo-frame {
    border-radius: 20px;
    overflow: hidden;
    margin: 1.25rem 0 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    animation: card-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.artwork-photo {
    max-width: 100%;
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}
.artwork-photo-frame:hover .artwork-photo { transform: scale(1.02); }

.preview-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.preview-cta svg { width: 16px; height: 16px; }
.preview-cta:hover { background: var(--accent-soft); transform: translateY(-1px); }

/* Mes œuvres */

.artwork-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.artwork-card {
    position: relative;
    background: var(--glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.artwork-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(26,22,37,0.04), 0 16px 32px rgba(91,61,240,0.12); }
.artwork-card-link { display: block; text-decoration: none; color: var(--text); }
.artwork-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.artwork-card-preview {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(26, 22, 37, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease;
}
.artwork-card-preview:hover { background: rgba(26, 22, 37, 0.9); }
.artwork-card-placeholder {
    width: 100%;
    height: 160px;
    background: var(--bg);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.artwork-card-body { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.artwork-card-body strong { font-size: 1rem; font-weight: 600; }
.artwork-card-body .badge { align-self: flex-start; }

/* Mes puces */

.chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.chip-card {
    background: var(--glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chip-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(26,22,37,0.04), 0 16px 32px rgba(91,61,240,0.12); }
.chip-card-photo {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem;
    background: linear-gradient(135deg, rgba(239, 234, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.chip-card-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.09), transparent 65%);
    pointer-events: none;
}
.chip-card-photo img { position: relative; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(91,61,240,0.18)); }
.chip-card-number {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255,255,255,0.85);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(26,22,37,0.08);
}
.chip-card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.chip-card-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.badge-type { background: var(--accent-soft); color: var(--accent-dark); }
.chip-card-artwork { margin: 0; font-size: 0.85rem; color: var(--muted); }
.chip-card-artwork strong { color: var(--text); }
.chip-card-unlinked {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chip-card-attach { flex-wrap: wrap; }
.chip-card-upgrade { margin-top: 0.15rem; }

.lifetime-note {
    margin-top: 2rem;
    padding: 1.1rem 1.25rem;
    background: var(--accent-soft);
    border: 1px solid #ded4fb;
    border-radius: var(--radius);
    max-width: 560px;
}
.lifetime-note p { margin: 0 0 0.75rem; font-size: 0.88rem; color: var(--text); line-height: 1.5; }
.lifetime-note .inline-form { flex-wrap: wrap; }

.dashboard-alert {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: #fff8e6;
    border: 1px solid #f5e3ae;
    border-radius: var(--radius);
    max-width: 560px;
}
.dashboard-alert p { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--text); line-height: 1.5; }

/* Menu mobile — bouton hamburger qui ouvre un tiroir déroulant complet
   (labels, profil) au lieu d'entasser des icônes dans une barre. */

@keyframes menu-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}
.sidebar-toggle svg { width: 19px; height: 19px; }
.sidebar-toggle:hover { background: var(--bg); }

@media (max-width: 860px) {
    body:has(.sidebar) { flex-direction: column; }
    .sidebar {
        position: relative;
        flex: none;
        width: 100%;
        height: auto;
        flex-direction: column;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; }
    .brand { margin-bottom: 0; }
    .sidebar-toggle { display: inline-flex; }

    .sidebar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--glass-strong);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        padding: 0.5rem 1rem 1rem;
        z-index: 20;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    .sidebar.menu-open .sidebar-menu { display: flex; animation: menu-drop 0.18s ease; }

    .nav-group { margin-bottom: 0.5rem; }
    .nav-group-label { display: block; }
    .sidebar nav { flex-direction: column; gap: 0.15rem; }
    .sidebar nav a span:not(.sr-only) { display: inline; }
    .sidebar-spacer { display: none; }
    .sidebar-profile { margin-left: 0; margin-top: 0.5rem; padding-top: 0.85rem; border-top: 1px solid var(--border); border-radius: 0; background: none; }
    .sidebar-profile-text { display: flex; }

    main { width: 100%; max-width: 100%; margin: 0; padding: 1.5rem 1.1rem; }
    main.narrow { margin: 0; }
    .stock-cards { flex-direction: column; }
}

/* Page publique d'œuvre (visiteur qui scanne une puce) — thème sombre distinct
   du reste du site (client + backoffice restent inchangés), pensé pour être
   lu d'un coup d'œil sur mobile juste après un scan. Pas d'image de fond
   lourde ici (voir commentaire plus haut) : juste des dégradés CSS, légers et
   rapides à charger. */

.public-page {
    --pub-bg: #0c0a18;
    --pub-surface: rgba(255, 255, 255, 0.045);
    --pub-surface-strong: rgba(255, 255, 255, 0.07);
    --pub-border: rgba(255, 255, 255, 0.12);
    --pub-text: #f3f0fb;
    --pub-muted: #9a91b8;
    --pub-accent: #8b5cf6;
    background:
        radial-gradient(ellipse 900px 520px at 12% -8%, rgba(139, 92, 246, 0.18), transparent 60%),
        radial-gradient(ellipse 700px 500px at 105% 105%, rgba(91, 61, 240, 0.14), transparent 60%),
        var(--pub-bg);
    color: var(--pub-text);
    min-height: 100vh;
}
.public-page .hint { color: var(--pub-muted); }

.public-notice {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--pub-muted);
    gap: 0.5rem;
}
.public-notice img { height: 38px; width: auto; margin-bottom: 0.6rem; opacity: 0.92; }
.public-notice p { margin: 0; color: var(--pub-text); font-size: 1rem; }
.public-notice p.hint { font-size: 0.88rem; }
.public-notice-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    color: var(--pub-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.public-notice-instagram svg { width: 15px; height: 15px; }
.public-notice-instagram:hover { color: var(--pub-text); border-color: rgba(255, 255, 255, 0.28); }

.public-artwork { max-width: 1040px; margin: 0 auto; padding: clamp(1.75rem, 6vw, 4.5rem) 1.25rem; }

.public-hero {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 28px;
    padding: clamp(1.5rem, 4vw, 3rem);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.public-hero-text { min-width: 0; }
.public-hero-media { order: -1; display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 860px) {
    .public-hero { flex-direction: row; align-items: flex-start; gap: 3rem; }
    .public-hero-text { flex: 1 1 380px; }
    .public-hero-media { order: 2; flex: 0 1 380px; }
}

.public-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pub-muted);
    margin-bottom: 1.25rem;
}

.public-hero-text h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.15; margin: 0 0 0.5rem; font-weight: 700; letter-spacing: -0.01em; }
.public-artist { color: var(--pub-muted); font-size: 1rem; margin: 0 0 1.5rem; }
.public-story { font-size: 1.02rem; line-height: 1.75; color: var(--pub-text); opacity: 0.92; margin: 0 0 1.75rem; white-space: pre-line; }

.public-info-list { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; }
.public-info-block { border: 1px solid var(--pub-border); border-radius: 14px; padding: 1rem 1.15rem; background: var(--pub-surface-strong); }
.public-info-label { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--pub-muted); margin-bottom: 0.4rem; }
.public-info-block p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--pub-text); white-space: pre-line; }

.public-brand { display: flex; align-items: center; gap: 0.6rem; padding-top: 1.5rem; border-top: 1px solid var(--pub-border); }
.public-brand img { height: 17px; width: auto; opacity: 0.85; }
.public-brand span { font-size: 0.8rem; color: var(--pub-muted); letter-spacing: 0.02em; }
.public-brand-instagram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid var(--pub-border);
    color: var(--pub-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.public-brand-instagram svg { width: 14px; height: 14px; }
.public-brand-instagram:hover { color: var(--pub-text); border-color: rgba(255, 255, 255, 0.28); }

/* Pas de aspect-ratio/object-fit:cover imposé ici — l'œuvre s'affiche dans
   ses proportions réelles, jamais recadrée (voir aussi .dropzone-preview-img
   dans oeuvres/nouvelle.php, qui doit montrer exactement le même rendu à
   l'artiste au moment de l'upload). */
.public-photo-frame { border-radius: 20px; overflow: hidden; border: 1px solid var(--pub-border); background: rgba(255, 255, 255, 0.03); }
.public-photo { width: 100%; height: auto; display: block; }

.public-artist-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    background: var(--pub-surface-strong);
    text-align: center;
    text-decoration: none;
    color: var(--pub-text);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.public-artist-card:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
/* Carte artiste déplacée tout en bas de la fiche (demandé le 2026-09-12) —
   sortie de .public-hero-media, elle vit maintenant comme un bloc à part
   après la carte principale plutôt que collée sous la photo. */
.public-artist-card-bottom { max-width: 360px; margin: 1rem auto 0; }
.public-artist-avatar-wrap { position: relative; display: inline-block; margin-bottom: 0.15rem; }
.public-artist-avatar-badge {
    position: absolute;
    bottom: 0;
    right: -2px;
    z-index: 2;
    display: flex;
    border-radius: 50%;
    background: var(--pub-surface-strong);
    padding: 2px;
}
.public-artist-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.public-artist-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pub-accent) 0%, #6d28d9 130%);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}
.public-artist-name { font-weight: 700; font-size: 1rem; }
.public-artist-role { font-size: 0.7rem; letter-spacing: 0.06em; color: var(--pub-muted); }
.public-artist-card:hover .public-artist-role { color: var(--pub-text); }

/* Fiche œuvre publique sur mobile (demandé le 2026-09-12) — c'est très
   majoritairement un scan depuis un téléphone (voir CLAUDE.md), donc tout
   ce qui a été dimensionné pour le confort desktop (clamp() avec un
   plancher encore généreux, cadre très arrondi, gros espacements) doit
   se resserrer nettement en dessous de 640px plutôt que de juste réduire
   un peu. */
@media (max-width: 640px) {
    .public-artwork { padding: 0.5rem 0.6rem; }
    .public-hero { padding: 0.85rem 0.85rem; border-radius: 16px; gap: 0.9rem; }
    .public-badge { padding: 0.22rem 0.6rem; font-size: 0.58rem; margin-bottom: 0.6rem; }
    .public-hero-text h1 { font-size: 1.15rem; line-height: 1.25; margin-bottom: 0.3rem; }
    .public-artist { font-size: 0.8rem; margin-bottom: 0.85rem; }
    .public-story { font-size: 0.82rem; line-height: 1.5; margin-bottom: 1rem; }
    .public-info-list { gap: 0.5rem; margin-bottom: 1rem; }
    .public-info-block { padding: 0.6rem 0.75rem; border-radius: 10px; }
    .public-info-label { font-size: 0.58rem; margin-bottom: 0.2rem; }
    .public-info-block p { font-size: 0.78rem; line-height: 1.4; }
    /* Cadre rétréci plutôt que la photo recadrée (voir le commentaire plus
       haut sur .public-photo-frame : jamais de crop) — max-width + margin
       auto la centre en gardant ses proportions réelles. */
    .public-photo-frame { border-radius: 12px; max-width: 62%; margin: 0 auto; }
    .public-artist-card { padding: 0.65rem 0.75rem; border-radius: 10px; gap: 0.2rem; }
    .public-artist-avatar, .public-artist-avatar-fallback { width: 34px; height: 34px; }
    .public-artist-avatar-fallback { font-size: 0.8rem; }
    .public-artist-name { font-size: 0.82rem; }
    .public-artist-role { font-size: 0.62rem; }
    .public-brand { padding-top: 0.85rem; }
    .public-brand img { height: 12px; }
    .public-brand span { font-size: 0.65rem; }
    .public-brand-instagram { width: 22px; height: 22px; }
    .public-brand-instagram svg { width: 12px; height: 12px; }
}

/* Badge "vérifié" façon Twitter/X (includes/verified-badge.php), à côté du
   nom de chaque artiste sur les pages publiques. */
.verified-badge {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: var(--pub-accent, #8b5cf6);
}
.verified-badge-shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; }
.verified-badge-check { position: absolute; inset: 0; z-index: 1; margin: auto; width: 52%; height: 52%; }
.verified-badge-shimmer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.verified-badge-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: verified-badge-sweep 2s ease-in-out infinite;
}
@keyframes verified-badge-sweep {
    0% { transform: translateX(-100%); }
    25% { transform: translateX(200%); }
    100% { transform: translateX(200%); }
}
@media (prefers-reduced-motion: reduce) {
    .verified-badge-shimmer { display: none; }
}

/* Profil public d'un artiste (artiste.php) */

.artist-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: clamp(2rem, 5vw, 3rem) 1.5rem;
}
.artist-profile-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.artist-profile-avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    z-index: 2;
    display: flex;
    border-radius: 50%;
    background: var(--pub-bg);
    padding: 3px;
}
.artist-profile-avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -18px;
    background: radial-gradient(circle, var(--pub-accent) 0%, transparent 70%);
    opacity: 0.35;
    filter: blur(20px);
    z-index: 0;
}
.artist-profile-avatar {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--pub-border);
    display: block;
}
.artist-profile-avatar-fallback {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pub-accent) 0%, #6d28d9 130%);
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
}
.artist-profile-header h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.25rem 0 0; }
.artist-profile-bio { max-width: 480px; color: var(--pub-muted); font-size: 0.98rem; line-height: 1.65; white-space: pre-line; margin: 0.25rem 0 0; }

.artist-social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    max-width: 420px;
    margin-top: 1.5rem;
}
.artist-social-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.9rem 0.55rem 0.55rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: var(--pub-surface-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--pub-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.artist-social-link:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
.artist-social-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--pub-text);
}
.artist-social-link-icon svg { width: 15px; height: 15px; }
.artist-social-link-arrow { width: 13px; height: 13px; color: var(--pub-muted); transition: color 0.15s ease, transform 0.15s ease; }
.artist-social-link:hover .artist-social-link-arrow { color: var(--pub-text); transform: translate(1px, -1px); }

.artist-profile-subheading { font-size: 1.1rem; margin: 1rem 0 1.1rem; padding: 0 0.25rem; }

.artist-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.1rem;
}
.artist-work-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--pub-border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--pub-surface);
    text-decoration: none;
    color: var(--pub-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}
.artist-work-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}
.artist-work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.artist-work-card:hover img { transform: scale(1.08); }
.artist-work-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--pub-muted); font-size: 0.82rem; background: rgba(255, 255, 255, 0.02); }
.artist-work-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.82) 100%);
    pointer-events: none;
}
.artist-work-card-title {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Bandeau d'aperçu (oeuvres/apercu.php) — même thème sombre que la page
   publique, pour que l'artiste voie un rendu fidèle en dessous. */
.preview-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 1rem;
    padding: 0.75rem 1.25rem;
    background: rgba(139, 92, 246, 0.18);
    border-bottom: 1px solid var(--pub-border);
    color: var(--pub-text);
    font-size: 0.85rem;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.preview-banner a {
    color: var(--pub-text);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}
.preview-banner a:hover { background: rgba(255, 255, 255, 0.08); }

/* Loader "gooey blobs" — voir includes/loader-gooey.php. Le flou + la matrice
   de couleurs (filtre SVG posé sur le conteneur) fait fusionner visuellement
   les trois puces quand elles se rapprochent, d'où l'effet "gluant". */
.loader-gooey { display: none; align-items: center; vertical-align: middle; }
button.is-loading .loader-gooey { display: inline-flex; }
button.is-loading > span:not(.loader-gooey) { display: none; }
.loader-gooey-blobs { display: flex; gap: 4px; }
.loader-gooey-blob {
    display: block;
    border-radius: 50%;
    animation: loader-gooey-move var(--loader-gooey-duration, 1.5s) ease-in-out infinite;
}
@keyframes loader-gooey-move {
    0%, 100% { transform: translateX(0) scale(1); }
    25% { transform: translateX(var(--loader-gooey-offset, 15px)) scale(1.2); }
    50% { transform: translateX(0) scale(1); }
    75% { transform: translateX(calc(var(--loader-gooey-offset, 15px) * -1)) scale(1.2); }
}

/* Mes commandes — frise de suivi (client/includes/order-timeline.php) */
.order-section-heading { margin-top: 2rem; }
.order-card {
    background: var(--glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}
.order-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.order-timeline { list-style: none; margin: 0; padding: 0; }
.order-timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding-bottom: 1.5rem;
}
.order-timeline-step:last-child { padding-bottom: 0; }
.order-timeline-step::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.order-timeline-step:last-child::before { display: none; }
.order-timeline-step.is-done::before { background: var(--accent); }
.order-timeline-dot {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: var(--bg);
}
.order-timeline-dot svg { width: 14px; height: 14px; }
.order-timeline-step.is-done .order-timeline-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.order-timeline-step.is-current .order-timeline-dot { border-color: var(--accent); }
.order-timeline-content { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.15rem; }
.order-timeline-step.is-pending .order-timeline-content strong { color: var(--muted); font-weight: 600; }
.order-timeline-step.is-current .order-timeline-content strong { color: var(--accent); }
.order-timeline-date { font-size: 0.82rem; color: var(--muted); }

/* Facture (client/factures/voir.php) — feuille "papier" volontairement
   toujours blanche, indépendante du thème clair/sombre de l'appli, puisque
   c'est un document destiné à être imprimé/exporté en PDF. */
.invoice-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 720px;
    margin: 1.5rem auto 0;
    padding: 0 1.5rem;
}
/* Feuille au format A4 réel (210×297mm, en unités mm pour un rendu
   identique écran/impression) — bannière colorée en haut, corps en colonne
   flexible dont le pied est poussé en bas (margin-top:auto) pour que la
   page reste "pleine" même avec une seule ligne de facturation. */
.invoice-sheet {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 1.5rem auto 3rem;
    background: #fff;
    color: #1a1625;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}
.invoice-banner {
    background: linear-gradient(135deg, var(--accent) 0%, #7c5cf5 100%);
    color: #fff;
    border-radius: 22px;
    margin: 2.25rem 3rem 0;
    padding: 2.25rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.invoice-issuer { display: flex; align-items: center; gap: 1.1rem; }
.invoice-logo { height: 56px; width: auto; }
.invoice-issuer-details { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.78); }
.invoice-issuer-details strong { color: #fff; font-size: 1rem; margin-bottom: 0.25rem; }
.invoice-meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.invoice-eyebrow { display: block; color: rgba(255, 255, 255, 0.75); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; }
.invoice-meta h1 { margin: 0 0 0.7rem; font-size: 1.9rem; color: #fff; }
.invoice-status-badge {
    display: inline-block;
    padding: 0.25rem 0.8rem;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.invoice-body {
    padding: 3rem 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 0 0 2.75rem; }
.invoice-parties p { margin: 0.2rem 0; font-size: 0.94rem; color: #4a4458; }
.invoice-parties strong { color: #1a1625; }
.invoice-section-label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: #a79dc4; font-weight: 700; margin-bottom: 0.6rem; }
.invoice-lines { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.95rem; }
.invoice-lines th {
    text-align: left;
    padding: 0.8rem 0.25rem;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a79dc4;
    font-weight: 700;
    border-bottom: 1px solid #ece8f5;
}
.invoice-lines td { padding: 1.1rem 0.25rem; border-bottom: 1px solid #f1eef7; }
.invoice-lines th:nth-child(2), .invoice-lines td:nth-child(2) { text-align: center; width: 50px; }
.invoice-lines th:nth-child(3), .invoice-lines td:nth-child(3) { text-align: right; width: 110px; }
.invoice-lines th:last-child, .invoice-lines td:last-child { text-align: right; }
.invoice-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f6f4fc;
    border-radius: 12px;
    padding: 1.15rem 1.5rem;
    margin-bottom: 0.75rem;
}
.invoice-total-box span { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: #766e85; font-weight: 700; }
.invoice-total-box strong { font-size: 1.65rem; color: #1a1625; }
.invoice-tva-note { margin: 0; font-size: 0.8rem; color: #a79dc4; }
.invoice-footer { margin-top: auto; padding-top: 2.5rem; border-top: 1px solid #ece8f5; text-align: center; }
.invoice-thanks { margin: 0 0 0.4rem; font-weight: 600; color: #1a1625; font-size: 0.98rem; }
.invoice-legal { margin: 0; font-size: 0.78rem; color: #a79dc4; }
@media (max-width: 560px) {
    .invoice-sheet { width: 100%; min-height: 0; border-radius: 0; }
    .invoice-banner { flex-direction: column; align-items: flex-start; margin: 1.25rem 1rem 0; padding: 1.75rem 1.5rem; border-radius: 18px; }
    .invoice-meta { text-align: left; align-items: flex-start; margin-top: 1.5rem; }
    .invoice-body { padding: 1.75rem 1.5rem 2rem; }
    .invoice-parties { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media print {
    @page { size: A4; margin: 0; }
    .no-print { display: none !important; }
    body.invoice-page { background: #fff; }
    .invoice-sheet { box-shadow: none; margin: 0; border-radius: 0; width: 210mm; min-height: 297mm; }
    /* Sans ça, Chrome/Safari suppriment les couleurs de fond à l'impression
       par défaut (économie d'encre) — la bannière violette, le badge
       "Payée" et l'encart total ressortiraient blancs/plats sur papier. */
    .invoice-banner, .invoice-status-badge, .invoice-total-box {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Pages légales (mentions-legales.php, CGV/CGU à venir) — texte simple sur
   fond clair, pas de sidebar (page publique, jamais authentifiée). */
.legal-page {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem 5rem;
}
.legal-eyebrow {
    display: block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.legal-page h1 { font-size: 2.1rem; margin: 0 0 1.25rem; }
.legal-intro { color: var(--muted); font-size: 1.02rem; line-height: 1.6; margin: 0; }
.legal-divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.legal-page h2 { font-size: 1.15rem; margin: 0 0 1.1rem; }
.legal-page p { line-height: 1.65; margin: 0 0 1rem; }
.legal-page p:last-child { margin-bottom: 0; }
.legal-page em { color: var(--error); font-style: normal; font-weight: 600; }
.legal-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; margin: 0; }
.legal-fields dt { font-weight: 600; }
.legal-fields dd { margin: 0; color: var(--muted); }

/* Page d'accueil publique (client/accueil.php) — vitrine montrée avant toute
   inscription/connexion. Esthétique épurée (revue le 2026-09-12) : fond
   blanc, cartes bordées plutôt que translucides, un seul accent de couleur
   utilisé avec parcimonie plutôt que des dégradés partout. */
/* Apparition en douceur des sections de la page d'accueil au défilement —
   activée en JS (voir accueil.php, IntersectionObserver) qui ajoute
   .is-visible. Masqué UNIQUEMENT si .js est posé sur <html> (script synchrone
   tout en haut de <head>, avant le rendu) : JS désactivé/bloqué, moteur sans
   JS, ou prefers-reduced-motion -> tout reste normalement visible, jamais de
   contenu caché faute de script qui ne s'exécute pas.*/
.js .landing-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .landing-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .landing-reveal { opacity: 1; transform: none; transition: none; }
}

.landing-page {
    --land-bg: #ffffff;
    --land-surface: #ffffff;
    --land-surface-subtle: #f7f6fa;
    --land-border: #e7e3f0;
    --land-text: #17141f;
    --land-muted: #6b6478;
    --land-shadow: 0 1px 2px rgba(23, 20, 31, 0.04), 0 10px 28px rgba(23, 20, 31, 0.06);
    background:
        radial-gradient(ellipse 900px 560px at 12% -6%, rgba(139, 92, 246, 0.14), transparent 60%),
        radial-gradient(ellipse 700px 520px at 100% 8%, rgba(255, 122, 89, 0.09), transparent 55%),
        radial-gradient(ellipse 800px 600px at 50% 100%, rgba(91, 61, 240, 0.1), transparent 60%),
        var(--land-bg);
    color: var(--land-text);
    min-height: 100vh;
    overflow-x: hidden;
}
.landing-page a { color: inherit; }

/* Nav flottante, centrée en haut de l'écran — pilule avec flou d'arrière-
   plan plutôt qu'une barre pleine largeur. .landing-page main prévoit le
   padding-top correspondant (voir plus bas) puisque la nav est retirée du
   flux normal (position: fixed). */
.landing-nav-float {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 1rem 1rem 0;
}
.landing-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: calc(100% - 2rem);
    padding: 0.5rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--land-border);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 2px rgba(23, 20, 31, 0.03), 0 8px 24px rgba(23, 20, 31, 0.06);
}
.landing-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.95rem; text-decoration: none; letter-spacing: -0.01em; padding: 0 0.5rem; }
.landing-brand img { height: 22px; width: auto; }
.landing-nav-divider { width: 1px; height: 20px; background: var(--land-border); }
.landing-nav-links { display: none; gap: 0.15rem; font-size: 0.85rem; font-weight: 500; color: var(--land-muted); }
.landing-nav-links a { white-space: nowrap; text-decoration: none; padding: 0.5rem 0.7rem; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease; }
.landing-nav-links a:hover { color: var(--land-text); background: var(--land-surface-subtle); }
.landing-nav-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; padding-right: 0.15rem; }
.landing-link { text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--land-muted); transition: color 0.15s ease; white-space: nowrap; padding: 0.5rem 0.6rem; }
.landing-link:hover { color: var(--land-text); }
.landing-nav .landing-cta-btn { padding: 0.55rem 1.1rem; font-size: 0.82rem; }
/* Repoussé de 860px a 960px (2026-09-13, réajusté après le retrait du
   lien "Mentions légales") : la navbar est passée de 2 à 3 liens de
   section, qui cassaient sur deux lignes avant ce seuil faute de place. */
@media (min-width: 960px) { .landing-nav-links { display: flex; } }
@media (max-width: 480px) {
    .landing-nav-divider:first-of-type { display: none; }
    .landing-nav-actions { gap: 0.4rem; }
    .landing-link { display: none; }
}

/* La nav flottante est position: fixed, retirée du flux normal — la
   première section de la page a besoin de cet espace pour ne pas démarrer
   sous elle. Annule aussi la règle générique "main { max-width: 1040px; }"
   (pensée pour les pages internes avec sidebar) : sur l'accueil public,
   elle empêchait le hero cinématique de couvrir toute la largeur de
   l'écran, laissant deux bandes blanches sur les côtés. */
.landing-page main { padding-top: 5.5rem; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }

.landing-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.35rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #5b3df0, #8b5cf6);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(91, 61, 240, 0.28);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.landing-cta-btn:hover { box-shadow: 0 8px 22px rgba(91, 61, 240, 0.38); transform: translateY(-1px); }
.landing-cta-lg { padding: 0.95rem 1.85rem; font-size: 0.95rem; }

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--accent-soft);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent-dark);
    margin-bottom: 1.25rem;
}
.landing-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* "Verre liquide" — pastille translucide avec léger flou et une bordure en
   dégradé fine. ::after plutôt que ::before : certains éléments qui portent
   déjà cette classe (comme .landing-eyebrow) utilisent ::before pour leur
   propre puce décorative — les deux coexistent ainsi sans se marcher dessus. */
.liquid-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.liquid-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 20%,
        rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.45) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Hero cinématique (#cine-hero, accueil.php) — porté d'une maquette
   "Lumora" fournie par le fondateur : plusieurs visuels de fond en fondu
   enchaîné au clic sur un sélecteur en bas, badge/CTA en verre liquide,
   texte qui bascule clair/sombre selon le visuel actif. Adapté avec le
   contenu et les images de Prismatik — pas de vidéo (aucun asset vidéo
   Prismatik n'existe, et il n'était pas question de relier des vidéos
   d'une autre marque), des photos qui se fondent à la place. */
.cine-hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    /* Remonte le hero derrière la nav flottante (padding-top global de
       .landing-page main, annulé ici) pour un vrai plein-écran, comme la
       maquette d'origine où la vidéo passe sous la nav. */
    margin-top: -5.5rem;
    display: flex;
    flex-direction: column;
    background: #0a0a0c;
}
.cine-hero-bg { position: absolute; inset: 0; }
.cine-hero-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1000ms ease-in-out;
}
.cine-hero-scene.is-active { opacity: 1; }

/* Superposition "hublot" (PNG transparent fourni par la maquette) — donne
   l'impression de regarder la vidéo à travers une fenêtre, avec un léger
   bercement continu ("train-bob"). scale(1.03) constant pour que les bords
   ne se découvrent jamais pendant le mouvement vertical. */
.cine-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    animation: cine-train-bob 3s ease-in-out infinite;
}
@keyframes cine-train-bob {
    0%, 100% { transform: translateY(0) scale(1.03); }
    50% { transform: translateY(-6px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
    .cine-hero-overlay { animation: none; transform: scale(1.03); }
}

.cine-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.15) 30%, rgba(10, 10, 12, 0.25) 70%, rgba(10, 10, 12, 0.75) 100%);
}

.cine-hero-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
    padding: calc(5.5rem + 2rem) 1.25rem 2rem;
    color: #fff;
    transition: color 700ms ease;
}
/* Bascule sombre quand la scène active est claire (photo de puce sur fond
   blanc) — sinon le texte blanc y devient illisible. */
.cine-hero-content[data-bg="light"] { color: #182c41; }
.cine-hero-content[data-bg="light"] .cine-sub { color: rgba(24, 44, 65, 0.72); }
.cine-hero-content[data-bg="light"] .cine-badge { color: #182c41; }

.cine-badge {
    display: inline-flex;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.cine-hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0;
    max-width: 16ch;
}
.cine-hero-content h1 em {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(120deg, #b9a4ff, #ff9d7a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cine-sub { font-size: 1.05rem; line-height: 1.65; max-width: 44ch; margin: 0; color: rgba(255, 255, 255, 0.75); transition: color 700ms ease; }

.cine-cta { border-radius: 999px; padding: 0.5rem; }
/* a.cine-cta-btn (pas juste .cine-cta-btn) : la règle globale
   ".landing-page a { color: inherit; }" est plus spécifique qu'une simple
   classe (classe + type l'emporte sur une classe seule) et écrasait sinon
   ce texte en blanc hérité de .cine-hero-content — illisible sur le fond
   blanc du bouton. */
a.cine-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    background: #fff;
    color: #17141f;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.cine-cta-btn:hover { transform: scale(1.03); }

.cine-switcher { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem; margin-top: 0.5rem; }
.cine-switcher button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.3rem 0.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.cine-switcher button:hover { opacity: 0.8; }
.cine-switcher button.is-active { opacity: 1; border-color: currentColor; }

/* Conteneur générique centré, réutilisé par chaque section de la page —
   la section elle-même reste pleine largeur (fond, bordure) pendant que ce
   conteneur cadre le contenu, voir le commentaire plus bas sur la
   séparation des sections. */
.landing-container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

.landing-section-head { max-width: 600px; margin: 0 auto 3.5rem; text-align: center; }
.landing-section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.25; margin: 0.5rem 0 0; font-weight: 700; letter-spacing: -0.01em; }
.landing-section-lead { font-size: 1.05rem; line-height: 1.6; color: var(--land-muted); margin: 1rem 0 0; }

/* Séparation des sections (demandé le 2026-09-12, revu le 2026-09-13) :
   chaque section pleine largeur porte son propre fond dégradé (voir plus
   bas), sans bordure ni ligne franche entre elles — à la place, un fondu
   blanc en haut de chaque section (même teinte que son propre voile)
   dissout la coupure avec la section précédente plutôt que de la trancher
   net. */
/* Fonds dégradés fournis par le fondateur (2026-09-13), pour remplacer les
   aplats blancs/teintés plats des sections publiques — convertis en JPEG
   (~3 Mo en PNG à l'origine, inutile pour un simple dégradé flouté) et
   redimensionnés à 1600px de large, la taille d'affichage max en
   background-size: cover. Voile blanc superposé (opacité variable) pour
   garder le texte lisible ; fondu haut (180px) pour la transition avec la
   section au-dessus. */
.landing-steps {
    padding: 5rem 0 6rem;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 180px),
        linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        url('section-bg-2.jpg') center/cover no-repeat;
}
.landing-steps-grid { display: flex; flex-direction: column; gap: 1.25rem; }
/* Connecteurs entre les cartes (flèches) : masqués par défaut (empilement
   mobile, où l'ordre de lecture haut-en-bas suffit déjà à montrer la
   progression), affichés uniquement quand les 3 étapes sont côte à côte. */
.landing-step-connector { display: none; }
@media (min-width: 780px) {
    .landing-steps-grid { flex-direction: row; align-items: stretch; gap: 0; }
    .landing-step-connector {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        color: #d9d3e8;
    }
    .landing-step-connector svg { width: 18px; height: 18px; }
}
.landing-step {
    position: relative;
    flex: 1 1 0;
    overflow: hidden;
    background: var(--land-surface);
    border: 1px solid var(--land-border);
    border-radius: 18px;
    padding: 2.25rem 1.85rem 2rem;
    text-align: left;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.landing-step:hover { box-shadow: var(--land-shadow); border-color: #d5cfe4; transform: translateY(-4px); }
.landing-step:hover .landing-step-ghost { opacity: 0.16; }
/* Grand chiffre en filigrane, dans l'Instrument Serif déjà chargée pour
   l'accent du hero (voir .cine-hero-content h1 em) — relie visuellement
   cette section au hero plutôt que d'introduire une police de plus. */
.landing-step-ghost {
    position: absolute;
    top: -0.6rem;
    right: 0.9rem;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 4.75rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.09;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.2s ease;
}
.landing-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #5b3df0, #8b5cf6);
    color: #fff;
    margin-bottom: 1.35rem;
    box-shadow: 0 4px 12px rgba(91, 61, 240, 0.25);
}
.landing-step-icon svg { width: 20px; height: 20px; }
.landing-step h3 { font-size: 1.02rem; margin: 0 0 0.55rem; letter-spacing: -0.005em; }
.landing-step p { font-size: 0.9rem; line-height: 1.6; color: var(--land-muted); margin: 0; }

/* Section "à propos de la marque" (remplace l'ancienne galerie coverflow,
   retirée le 2026-09-13). Trois essais précédents rejetés : icônes
   flottantes sans cadre ("trop plat"), cartes bordées identiques à
   .landing-step juste en dessous ("se ressemblent trop"), puis une rangée
   séparée par de simples filets ("toujours du texte brut", 2026-09-13).
   Quatrième forme : cartes en verre dépoli (fond translucide + flou),
   même matière que .liquid-glass utilisé dans le hero — un vrai relief de
   carte, mais sur un matériau différent des cartes pleines et opaques de
   .landing-step, posé directement sur la photo de fond plutôt que de
   l'ignorer. */
/* Première section après le hero sombre (vidéo) : le fondu haut part du
   même presque-noir que le bas du hero (.cine-hero-scrim) plutôt que du
   blanc utilisé pour les autres transitions plus bas sur la page — sinon
   la coupure sombre → couleur vive resterait nette. */
.landing-about {
    padding: 5rem 0 6rem;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(10, 10, 12, 0.82), rgba(10, 10, 12, 0) 220px),
        linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
        url('section-bg-1.jpg') center/cover no-repeat;
}
.landing-about-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 780px) { .landing-about-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.landing-about-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.85rem 1.6rem;
    border-radius: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landing-about-item:hover { transform: translateY(-4px); }
/* Variante claire de .liquid-glass (définie pour le hero sombre) : fond
   blanc translucide plutôt que blanc quasi-invisible, sinon aucun relief
   sur un fond déjà pâle. Le ::after (bordure en dégradé) de .liquid-glass
   reste hérité tel quel. */
.liquid-glass-light {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 10px 30px rgba(91, 61, 240, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.landing-about-item:hover.liquid-glass-light { box-shadow: 0 16px 36px rgba(91, 61, 240, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.6); }
.landing-about-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #5b3df0, #8b5cf6);
    color: #fff;
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 14px rgba(91, 61, 240, 0.35);
}
.landing-about-icon svg { width: 21px; height: 21px; }
.landing-about-item h3 { font-size: 1.02rem; margin: 0 0 0.5rem; letter-spacing: -0.005em; }
.landing-about-item p { font-size: 0.88rem; line-height: 1.6; color: var(--land-muted); margin: 0; }

.landing-preview {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 6rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 180px),
        linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
        url('section-bg-3.jpg') center/cover no-repeat;
}
.landing-preview-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}
.landing-preview-copy { max-width: 460px; text-align: center; }
.landing-preview-copy h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0.6rem 0 0.9rem; font-weight: 700; letter-spacing: -0.01em; }
.landing-preview-copy p { color: var(--land-muted); line-height: 1.65; margin: 0; font-size: 0.98rem; }

.landing-feature-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.landing-feature-list li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.92rem; font-weight: 600; color: var(--land-text); justify-content: center; }
.landing-feature-list svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 4px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-dark);
}

/* Variante "riche" du même .landing-feature-list (icône + titre + courte
   description), réservée à .landing-preview : la version compacte d'une
   ligne (icône + texte) restait trop plate à côté du reste de la page une
   fois les sections voisines passées en cartes (2026-09-13). Modificateur
   plutôt que nouvelle classe pour garder .landing-value (même liste, texte
   court) sur la version compacte d'origine. */
.landing-feature-list-rich { gap: 1.15rem; }
.landing-feature-list-rich li {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    font-size: inherit;
    font-weight: inherit;
}
.landing-feature-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-dark);
}
.landing-feature-icon svg { width: 16px; height: 16px; }
.landing-feature-list-rich li strong { display: block; font-size: 0.95rem; font-weight: 600; color: var(--land-text); }
.landing-feature-list-rich li p { margin: 0.3rem 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--land-muted); font-weight: 400; }

.landing-preview-mock { position: relative; }
/* Halo dégradé flouté derrière le téléphone — donne de la profondeur à une
   simple capture d'écran posée sur fond blanc, sans détourner l'attention
   de l'image elle-même. */
.landing-preview-glow {
    position: absolute;
    inset: -15%;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 55% at 45% 30%, rgba(139, 92, 246, 0.22), transparent 70%),
        radial-gradient(ellipse 55% 50% at 65% 75%, rgba(255, 122, 89, 0.16), transparent 70%);
    filter: blur(30px);
}
/* Vraie capture de la fiche œuvre publique, plutôt qu'une reconstitution
   en CSS — un aperçu honnête puisque c'est littéralement ce que voit le
   visiteur, pas une réinterprétation. */
.landing-preview-photo {
    position: relative;
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 24px 40px rgba(23, 20, 31, 0.16));
}

@media (min-width: 780px) {
    .landing-preview-inner { flex-direction: row; text-align: left; justify-content: space-between; gap: 4rem; }
    .landing-preview-copy { text-align: left; }
    .landing-feature-list li { justify-content: flex-start; }
}

/* Section "bénéfice artiste" (demandée le 2026-09-13) : contrairement à
   .landing-preview qui montre une vraie capture de la fiche œuvre, ici
   aucune donnée réelle d'artiste n'est présentable de façon générique — la
   carte est donc une reconstitution illustrative (nom fictif, vraies
   photos d'exemple déjà utilisées ailleurs sur le site), pas une capture
   d'écran. Fond teinté pour garder l'alternance blanc / gris-violet entre
   sections. */
.landing-value {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 6rem;
    /* Réutilise section-bg-1.jpg (déjà sur .landing-about) — un seul jeu de
       3 images fourni pour 4 sections, voir le commentaire au-dessus de
       .landing-steps. Referme la page sur la même palette que "La marque". */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 180px),
        linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
        url('section-bg-1.jpg') center/cover no-repeat;
}
.landing-value-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}
.landing-value-copy { max-width: 460px; text-align: center; }
.landing-value-copy h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0.6rem 0 0.9rem; font-weight: 700; letter-spacing: -0.01em; }
.landing-value-copy p { color: var(--land-muted); line-height: 1.65; margin: 0; font-size: 0.98rem; }

.landing-value-mock { position: relative; width: 100%; max-width: 340px; margin: 0 auto; }
.value-mock-card {
    position: relative;
    background: var(--land-surface);
    border: 1px solid var(--land-border);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--land-shadow);
    text-align: left;
}
.value-mock-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; }
.value-mock-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b3df0, #8b5cf6);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.value-mock-id { display: flex; flex-direction: column; }
.value-mock-id strong { font-size: 0.95rem; }
.value-mock-id span { font-size: 0.78rem; color: var(--land-muted); }
.value-mock-socials { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
.value-mock-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    flex-shrink: 0;
}
.value-mock-social svg { width: 15px; height: 15px; }
.value-mock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.value-mock-grid img,
.value-mock-more {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}
.value-mock-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 700;
    font-size: 0.85rem;
}

@media (min-width: 780px) {
    .landing-value-inner { flex-direction: row-reverse; justify-content: space-between; gap: 4rem; }
    .landing-value-copy { text-align: left; }
    .landing-value .landing-feature-list li { justify-content: flex-start; }
    .landing-value-mock { margin: 0; }
}

/* Clôture de page (revue le 2026-09-13) : CTA + marquee défilant fusionnés
   dans une seule section sombre pleine largeur, plutôt qu'une carte
   flottante suivie d'un bandeau séparé — l'ancienne version laissait de
   grands vides blancs entre les deux et avant le footer, ce qui cassait
   l'unité de la page. Halo dégradé identique en logique à celui du fond
   général (.landing-page) pour que cette section sombre reste dans la
   même famille visuelle que le reste plutôt qu'un simple aplat noir. */
.landing-closing {
    position: relative;
    overflow: hidden;
    background: #17141f;
    padding-top: clamp(3.5rem, 7vw, 5rem);
}
.landing-closing::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 700px 420px at 18% 0%, rgba(139, 92, 246, 0.25), transparent 60%),
        radial-gradient(ellipse 600px 400px at 88% 15%, rgba(255, 122, 89, 0.16), transparent 60%);
    pointer-events: none;
}
.landing-closing-cta {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
    padding: 0 1.5rem clamp(3rem, 6vw, 4rem);
    text-align: center;
}
.landing-closing-cta h2 { text-wrap: balance; }
.landing-closing-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin: 0 0 0.75rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.landing-closing-cta p { color: #a49bb8; margin: 0 0 2rem; font-size: 1rem; }
.landing-closing-cta .landing-cta-btn { background: #fff; color: #17141f !important; }
.landing-closing-cta .landing-cta-btn:hover { background: #e9e6ef; }

.landing-footer {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    border-top: 1px solid var(--land-border);
}
.landing-footer-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.landing-footer-brand img { height: 18px; width: auto; }
.landing-footer-links { display: flex; gap: 1.5rem; font-size: 0.85rem; }
.landing-footer-links a { text-decoration: none; color: var(--land-muted); transition: color 0.15s ease; }
.landing-footer-links a:hover { color: var(--land-text); }
.landing-footer-copy { width: 100%; font-size: 0.78rem; color: var(--land-muted); text-align: center; margin-top: 0.5rem; }
.legal-fields a { color: var(--accent); }