/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #0c0c0f;
    color: #f2f2f2;
    line-height: 1.5;
}

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

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {
    min-height: 72px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: #151519;
    border-bottom: 1px solid #2a2a30;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    flex-shrink: 0;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 3px;
}

.topbar nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.topbar nav a {
    color: #dedee3;
    opacity: 0.82;
    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}

.topbar nav a:hover {
    opacity: 1;
    color: #ffffff;
}


/* ============================================================
   LIEN PROFIL UTILISATEUR
   ============================================================ */

.user-menu-link {
    padding: 7px 12px;
    background: #222228;
    border: 1px solid #34343c;
    border-radius: 20px;
    color: #ffffff !important;
    opacity: 1 !important;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.user-menu-link:hover {
    background: #303038;
    border-color: #555560;
    transform: translateY(-1px);
}

.user-menu-link.active {
    border-color: #6b6b76;
    background: #303038;
}


/* ============================================================
   LIEN MEMBRES
   ============================================================ */

.members-menu-link {
    padding: 7px 12px;
    border-radius: 20px;
    color: #dedee3 !important;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.members-menu-link:hover {
    background: #25252b;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.members-menu-link.active {
    background: #303038;
    color: #ffffff !important;
}


/* ============================================================
   CONTENEUR
   ============================================================ */

.container {
    width: min(1200px, 92%);
    margin: 0 auto;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
    padding: 60px 0 35px;
}

.hero h1 {
    margin: 0 0 10px;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;
}

.hero p {
    margin: 0;
    color: #a7a7af;
    font-size: 1.1rem;
}


/* ============================================================
   FLASH
   ============================================================ */

.flash {
    margin-top: 22px;
    padding: 13px 16px;
    background: #26262e;
    border: 1px solid #3a3a43;
    border-radius: 9px;
    color: #eeeef2;
}


/* ============================================================
   GRILLE SOIRÉES
   ============================================================ */

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    padding-bottom: 70px;
}


/* ============================================================
   CARTE SOIRÉE
   ============================================================ */

.event-card {
    overflow: hidden;
    background: #17171c;
    border: 1px solid #282830;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.30);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.event-card:hover {
    transform: translateY(-4px);
    border-color: #393942;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42);
}

.event-poster {
    width: 100%;
    height: 390px;
    object-fit: cover;
    background: #202026;
    transition: transform 0.25s ease;
}

.event-card:hover .event-poster {
    transform: scale(1.015);
}

.event-content {
    padding: 22px;
}

.event-date {
    margin-bottom: 8px;
    color: #c5c5cc;
    font-size: 0.9rem;
    letter-spacing: 0.4px;
}

.event-content h2 {
    margin: 0 0 12px;
    font-size: 1.6rem;
    line-height: 1.2;
}

.location {
    color: #c8c8cf;
}

.event-description {
    color: #d2d2d7;
    white-space: pre-line;
}

.organizer {
    margin-top: 20px;
    color: #9999a1;
    font-size: 0.92rem;
}

.organizer strong {
    color: #d7d7dc;
}


/* ============================================================
   COMPTEUR PARTICIPANTS
   ============================================================ */

.event-participants-link {
    display: inline-block;
    color: inherit;
}

.event-participants-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0;
    padding: 7px 12px;
    background: #222228;
    border: 1px solid #34343c;
    border-radius: 22px;
    color: #d8d8dd;
    font-size: 0.95rem;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.event-participants-link .event-participants-count {
    cursor: pointer;
}

.event-participants-link .event-participants-count:hover {
    background: #2b2b32;
    border-color: #4b4b55;
    transform: translateY(-1px);
}

.event-participants-count strong {
    color: #ffffff;
    font-size: 1.05rem;
}

.participants-arrow {
    margin-left: 4px;
    color: #9b9ba5;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.event-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.delete-form {
    display: inline;
    margin: 0;
}


/* ============================================================
   BOUTONS
   ============================================================ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border: none;
    border-radius: 9px;
    background: #ffffff;
    color: #0c0c0f;
    font-weight: bold;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.button:hover {
    opacity: 0.90;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid #4c8b57;
    border-radius: 9px;
    background: #203525;
    color: #d6f4da;
    font-weight: bold;
}

.button-secondary:hover {
    background: #29462f;
    border-color: #61a26d;
}

.button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid #8c3030;
    border-radius: 9px;
    background: transparent;
    color: #ff7070;
    font-weight: bold;
}

.button-danger:hover {
    background: #4a1f1f;
    color: #ffaaaa;
}


/* ============================================================
   DÉTAIL SOIRÉE
   ============================================================ */

.event-detail {
    display: grid;
    grid-template-columns: minmax(280px, 430px) 1fr;
    gap: 42px;
    align-items: start;
    margin-top: 48px;
}

.detail-poster {
    width: 100%;
    border-radius: 18px;
    background: #202026;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
}

.event-detail-info h1 {
    margin: 5px 0 20px;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.08;
}


/* ============================================================
   PARTICIPATION
   ============================================================ */

.participation-box {
    margin-top: 30px;
    padding: 22px;
    background: #17171c;
    border: 1px solid #282830;
    border-radius: 14px;
}

.participant-count-link {
    display: inline-block;
    margin-bottom: 15px;
}

.participant-count {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #c8c8cf;
}

.participant-count-link .participant-count {
    cursor: pointer;
}

.participant-count strong {
    color: #ffffff;
    font-size: 1.6rem;
}

.participation-status {
    margin: 12px 0 0;
    color: #9ad8a0;
}


/* ============================================================
   PARTICIPANTS RAPIDES
   ============================================================ */

.participants-section {
    margin-top: 55px;
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.section-header-row h2 {
    margin: 0;
}

.participants-view-all {
    color: #bcbcc4;
    font-size: 0.94rem;
}

.participants-view-all:hover {
    color: #ffffff;
}

.participants-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.participant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    background: #17171c;
    border: 1px solid #282830;
    border-radius: 30px;
}

.participant-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #303038;
    font-weight: bold;
}

.participant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================================
   PAGE PARTICIPANTS
   ============================================================ */

.participants-page-header {
    padding: 52px 0 30px;
}

.participants-page-label {
    margin: 0 0 5px;
    color: #9999a1;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.84rem;
}

.participants-page-header h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.participants-total {
    color: #bcbcc4;
}

.participants-total strong {
    color: #ffffff;
    font-size: 1.5rem;
}

.participants-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding-bottom: 75px;
}

.participant-card {
    padding: 20px;
    background: #17171c;
    border: 1px solid #282830;
    border-radius: 18px;
}

.participant-card-name {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
}

.participant-card-identity {
    min-width: 0;
}

.participant-card-name h2 {
    margin: 0 0 5px;
}

.participant-description {
    margin: 0;
    color: #b8b8c0;
    font-size: 0.9rem;
    white-space: pre-line;
}

.participant-big-avatar {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #303038;
    font-size: 1.4rem;
    font-weight: bold;
}

.participant-big-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.participant-photo-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.participant-photo-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}


/* ============================================================
   DISCUSSION
   ============================================================ */


/* ============================================================
   ORGANISATEUR
   ============================================================ */

.organizer-contact {
    margin: 45px 0;
    padding: 24px;
    background: #17171c;
    border: 1px solid #303038;
    border-radius: 14px;
}

.organizer-zone {
    margin: 50px 0 80px;
    padding: 25px;
    background: #1b1414;
    border: 1px solid #552d2d;
    border-radius: 14px;
}

.organizer-zone h2 {
    margin-top: 0;
}

.organizer-zone form {
    margin-top: 18px;
}


/* ============================================================
   FORMULAIRES
   ============================================================ */

.form-page {
    padding: 50px 0 80px;
}

.account-form {
    width: 100%;
    max-width: 600px;
}

form {
    max-width: 100%;
}

label {
    display: block;
    margin-top: 18px;
    margin-bottom: 7px;
    color: #d7d7dc;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    background: #17171c;
    color: #ffffff;
    border: 1px solid #35353d;
    border-radius: 9px;
    outline: none;
}

textarea {
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #6a6a75;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}


/* ============================================================
   DESCRIPTION / BIO DU PROFIL
   ============================================================ */

.profile-description-block {
    margin-top: 28px;
}

.profile-field-help {
    margin: 0 0 10px;
    font-size: 0.88rem;
}

.profile-description-block textarea {
    min-height: 135px;
}

.character-counter {
    margin-top: 6px;
    text-align: right;
    color: #81818a;
    font-size: 0.82rem;
}


/* ============================================================
   PAGE PROFIL
   ============================================================ */

.profile-header {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 50px 0 32px;
}

.profile-main-avatar {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #303038;
    border: 2px solid #454550;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: bold;
}

.profile-main-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-label {
    margin: 0;
    color: #9999a1;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.82rem;
}

.profile-header h1 {
    margin: 3px 0;
    font-size: clamp(2rem, 4vw, 3.3rem);
}

.profile-layout {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(420px, 1.1fr);
    gap: 28px;
    align-items: start;
    padding-bottom: 80px;
}

.profile-panel {
    padding: 26px;
    background: #17171c;
    border: 1px solid #282830;
    border-radius: 18px;
}

.profile-panel h2 {
    margin-top: 0;
}

.profile-panel h3 {
    margin-bottom: 5px;
}

.profile-password-block {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #303038;
}

.profile-photo-add {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #303038;
}

.profile-save-button {
    width: 100%;
    margin-top: 28px;
}

.profile-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.profile-panel-title-row h2 {
    margin: 0;
}

.profile-photo-counter {
    padding: 5px 10px;
    background: #25252b;
    border: 1px solid #36363f;
    border-radius: 20px;
    color: #bcbcc4;
    font-size: 0.9rem;
}

.profile-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.profile-photo-card {
    overflow: hidden;
    background: #202026;
    border: 1px solid #32323a;
    border-radius: 14px;
}

.profile-photo-image {
    position: relative;
    overflow: hidden;
}

.profile-photo-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.main-photo-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.76);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.74rem;
}

.profile-photo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    color: #c5c5cc;
    font-size: 0.85rem;
}

.profile-photo-footer form {
    margin: 0;
}

.photo-delete-button {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid #713333;
    border-radius: 7px;
    color: #ff7777;
    font-size: 0.78rem;
}

.photo-delete-button:hover {
    background: #4a1f1f;
}

.profile-main-photo-info {
    margin: 18px 0 0;
    color: #9999a1;
    font-size: 0.88rem;
}

.profile-photo-limit {
    padding: 14px;
    background: #25252b;
    border: 1px solid #383840;
    border-radius: 10px;
    color: #c8c8cf;
}

.photo-compression-info {
    color: #85858e;
    font-size: 0.84rem;
}

.photo-selection-info {
    min-height: 20px;
    margin-top: 8px;
    color: #9ad8a0;
    font-size: 0.9rem;
}

.photo-upload-block {
    margin-top: 28px;
}

.profile-no-photo {
    padding: 35px 15px;
    text-align: center;
}

.profile-no-photo-avatar {
    width: 90px;
    height: 90px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #303038;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: bold;
}


/* ============================================================
   PAGE MEMBRES
   ============================================================ */

.members-header {
    padding: 52px 0 30px;
}

.members-label {
    margin: 0 0 5px;
    color: #9999a1;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.84rem;
}

.members-header h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.members-count {
    margin-top: 14px;
    color: #bcbcc4;
}

.members-count strong {
    color: #ffffff;
    font-size: 1.5rem;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding-bottom: 75px;
}

.member-card-link {
    display: block;
    height: 100%;
}

.member-card {
    height: 100%;
    padding: 20px;
    background: #17171c;
    border: 1px solid #282830;
    border-radius: 16px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.member-card-link:hover .member-card {
    transform: translateY(-3px);
    border-color: #4b4b56;
    background: #1c1c21;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.member-card-top {
    display: flex;
    align-items: center;
    gap: 18px;
}

.member-avatar {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #303038;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.7rem;
    font-weight: bold;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info {
    min-width: 0;
    flex: 1;
}

.member-title-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.member-info h2 {
    margin: 0 0 5px;
    font-size: 1.3rem;
}

.member-open-arrow {
    color: #777781;
    font-size: 1.6rem;
    line-height: 1;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.member-card-link:hover .member-open-arrow {
    color: #ffffff;
    transform: translateX(3px);
}

.current-user-badge {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 8px;
    background: #203525;
    border: 1px solid #4c8b57;
    border-radius: 12px;
    color: #bde8c4;
    font-size: 0.75rem;
}

.member-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: #9999a1;
    font-size: 0.84rem;
}

.member-stat-separator {
    color: #55555f;
}

.member-description {
    margin: 18px 0 0;
    padding-top: 15px;
    border-top: 1px solid #2c2c33;
    color: #c6c6cd;
    font-size: 0.92rem;
    white-space: pre-line;
}

.member-description-preview {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.member-description-empty {
    color: #767680;
    font-style: italic;
}

.member-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    color: #94949d;
    font-size: 0.84rem;
    transition: color 0.2s ease;
}

.member-card-link:hover .member-card-footer {
    color: #ffffff;
}


/* ============================================================
   FICHE DÉTAILLÉE D'UN MEMBRE
   ============================================================ */

.member-profile-back {
    padding-top: 30px;
}

.back-link {
    color: #aaaab3;
    font-size: 0.92rem;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: #ffffff;
}

.member-profile-hero {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 32px;
    align-items: center;
    padding: 34px 0 42px;
    border-bottom: 1px solid #25252c;
}

.member-profile-avatar {
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #303038;
    border: 2px solid #454550;
    border-radius: 50%;
    font-size: 3.2rem;
    font-weight: bold;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30);
}

.member-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-profile-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.member-profile-title-row h1 {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.7rem);
    line-height: 1;
}

.member-self-badge {
    margin: 0;
}

.member-profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.member-profile-stats > div {
    min-width: 125px;
    padding: 11px 15px;
    background: #17171c;
    border: 1px solid #292930;
    border-radius: 12px;
}

.member-profile-stats strong {
    display: block;
    color: #ffffff;
    font-size: 1.25rem;
}

.member-profile-stats span {
    color: #9696a0;
    font-size: 0.82rem;
}

.member-edit-profile-button {
    margin-top: 22px;
}

.member-profile-section {
    padding: 42px 0;
    border-bottom: 1px solid #25252c;
}

.member-profile-last-section {
    border-bottom: none;
    padding-bottom: 80px;
}

.member-profile-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.member-profile-section-title h2 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.member-section-count {
    min-width: 38px;
    padding: 5px 10px;
    text-align: center;
    background: #25252b;
    border: 1px solid #36363f;
    border-radius: 20px;
    color: #bcbcc4;
    font-size: 0.9rem;
}

.member-profile-description {
    max-width: 850px;
    padding: 22px;
    background: #17171c;
    border: 1px solid #292930;
    border-radius: 15px;
    color: #d6d6dc;
    font-size: 1.02rem;
    white-space: pre-line;
}

.member-profile-empty {
    padding: 22px;
    background: #151519;
    border: 1px dashed #34343c;
    border-radius: 14px;
    color: #777781;
}

.member-profile-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.member-profile-gallery-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 850px;
}

.member-profile-gallery-one {
    grid-template-columns: minmax(0, 520px);
}

.member-profile-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #17171c;
    border: 1px solid #292930;
    border-radius: 16px;
}

.member-profile-photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.member-profile-photo:hover img {
    transform: scale(1.02);
}

.member-profile-photo figcaption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 6px 9px;
    background: rgba(0, 0, 0, 0.74);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.76rem;
}

.member-event-list {
    display: grid;
    gap: 10px;
}

.member-event-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    background: #17171c;
    border: 1px solid #292930;
    border-radius: 14px;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.member-event-row:hover {
    background: #1e1e24;
    border-color: #454550;
    transform: translateX(2px);
}

.member-event-date-box {
    width: 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #25252b;
    border-radius: 12px;
}

.member-event-date-box strong {
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1;
}

.member-event-date-box span {
    margin-top: 4px;
    color: #90909a;
    font-size: 0.72rem;
}

.member-event-info {
    min-width: 0;
}

.member-event-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.member-event-info h3 {
    margin: 0;
    font-size: 1rem;
}

.member-event-info p {
    margin: 3px 0 0;
    color: #8e8e98;
    font-size: 0.88rem;
}

.event-status-badge {
    padding: 3px 7px;
    background: #203525;
    border: 1px solid #4c8b57;
    border-radius: 10px;
    color: #bde8c4;
    font-size: 0.70rem;
}

.member-event-arrow {
    color: #777781;
    font-size: 1.6rem;
}


/* ============================================================
   ÉTATS VIDES
   ============================================================ */

.empty-events,
.empty-participants,
.empty-members {
    padding: 35px;
    background: #17171c;
    border: 1px solid #282830;
    border-radius: 16px;
}

.muted {
    color: #9999a1;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0c0c0f;
}

::-webkit-scrollbar-thumb {
    background: #34343b;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #484852;
}


/* ============================================================
   TABLETTE
   ============================================================ */

@media (max-width: 950px) {

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .event-detail {
        grid-template-columns: 1fr;
    }

    .detail-poster {
        width: min(100%, 520px);
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .topbar {
        position: static;
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 5%;
    }

    .topbar nav {
        width: 100%;
        gap: 12px;
    }

    .hero {
        padding-top: 40px;
    }

    .events-grid {
        grid-template-columns: 1fr;
    }

    .event-poster {
        height: auto;
    }

    .participants-cards {
        grid-template-columns: 1fr;
    }

    .profile-header {
        align-items: flex-start;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }

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

    .event-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .event-actions .button,
    .event-actions form,
    .event-actions button {
        width: 100%;
    }

    .member-profile-hero {
        grid-template-columns: 100px 1fr;
        gap: 20px;
    }

    .member-profile-avatar {
        width: 100px;
        height: 100px;
        font-size: 2.2rem;
    }

    .member-profile-gallery,
    .member-profile-gallery-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   PETITS MOBILES
   ============================================================ */

@media (max-width: 500px) {

    .member-card-top {
        align-items: flex-start;
    }

    .member-avatar {
        width: 64px;
        height: 64px;
    }

    .member-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .member-stat-separator {
        display: none;
    }

    .member-profile-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .member-profile-avatar {
        width: 112px;
        height: 112px;
        margin: 0 auto;
    }

    .member-profile-title-row,
    .member-profile-stats {
        justify-content: center;
    }

    .member-profile-section-title {
        align-items: flex-start;
    }

    .member-profile-gallery,
    .member-profile-gallery-two,
    .member-profile-gallery-one {
        grid-template-columns: 1fr;
    }

    .member-event-row {
        grid-template-columns: 54px 1fr auto;
        gap: 10px;
        padding: 11px;
    }

    .member-event-date-box {
        width: 54px;
        height: 54px;
    }

}


@media (max-width: 440px) {

    .container {
        width: 94%;
    }

    .logo {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .user-menu-link,
    .members-menu-link {
        padding: 6px 9px;
    }

    .profile-header {
        flex-direction: column;
    }

    .profile-main-avatar {
        width: 72px;
        height: 72px;
    }

    .profile-panel {
        padding: 18px;
    }

    .profile-photo-grid {
        grid-template-columns: 1fr;
    }

    .button,
    .button-secondary,
    .button-danger {
        width: 100%;
    }

}


/* ============================================================
   ADMINISTRATION WEBMASTER ++
   ============================================================ */

.admin-body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top,
            #211515 0,
            #0c0c0f 42%
        );
}

.admin-login-wrapper {
    min-height: 100vh;
    width: min(520px, 92%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
}

.admin-login-card {
    width: 100%;
    padding: 36px;
    background: #151519;
    border: 1px solid #3c2c2c;
    border-radius: 20px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.46);
}

.admin-login-mark {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border-radius: 16px;
    background: #531f1f;
    border: 1px solid #8e3f3f;
    color: #ffb2b2;
    font-size: 1.5rem;
    font-weight: bold;
}

.admin-kicker {
    margin: 0 0 5px;
    color: #a87979;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.78rem;
}

.admin-login-card h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3rem);
}

.admin-login-subtitle {
    margin: 5px 0 28px;
    color: #85858e;
}

.admin-login-form label {
    margin-top: 18px;
}

.admin-login-button {
    width: 100%;
    margin-top: 28px;
    padding: 13px 18px;
    border: 1px solid #963d3d;
    border-radius: 10px;
    background: #722828;
    color: #ffffff;
    font-weight: bold;
}

.admin-login-button:hover {
    background: #843131;
}

.admin-warning {
    margin-top: 24px;
    padding: 18px;
    background: #241b1b;
    border: 1px solid #5c3636;
    border-radius: 12px;
    color: #d6c6c6;
}

.admin-warning p {
    margin-bottom: 8px;
}

.admin-warning code {
    display: inline-block;
    padding: 7px 10px;
    background: #0d0d10;
    border-radius: 7px;
    color: #ffffff;
}

.admin-topbar {
    min-height: 72px;
    padding: 0 4%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #131316;
    border-bottom: 1px solid #3a2828;
    position: sticky;
    top: 0;
    z-index: 200;
}

.admin-topbar-brand {
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 2px;
}

.admin-topbar-badge {
    margin-left: 12px;
    padding: 4px 8px;
    background: #531f1f;
    border: 1px solid #7f3939;
    border-radius: 8px;
    color: #ffb4b4;
    font-size: 0.72rem;
    font-weight: bold;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #9999a1;
}

.admin-topbar-actions form {
    margin: 0;
}

.admin-secondary-link {
    color: #d2d2d8;
}

.admin-secondary-link:hover {
    color: #ffffff;
}

.admin-logout-button {
    padding: 8px 11px;
    background: transparent;
    border: 1px solid #5c3a3a;
    border-radius: 8px;
    color: #dca5a5;
}

.admin-logout-button:hover {
    background: #351d1d;
}

.admin-container {
    width: min(1350px, 94%);
    margin: 0 auto;
}

.admin-heading {
    padding: 50px 0 28px;
}

.admin-heading h1 {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.3rem);
}

.admin-heading > p:last-child {
    color: #9999a1;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 45px;
}

.admin-stats article {
    padding: 22px;
    background: #17171c;
    border: 1px solid #302626;
    border-radius: 15px;
}

.admin-stats strong {
    display: block;
    color: #ffffff;
    font-size: 2rem;
}

.admin-stats span {
    color: #92929b;
}

.admin-section {
    padding: 38px 0;
    border-top: 1px solid #292126;
}

.admin-last-section {
    padding-bottom: 80px;
}

.admin-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.admin-section-heading h2 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.admin-count-badge {
    min-width: 42px;
    padding: 6px 10px;
    text-align: center;
    background: #292026;
    border: 1px solid #4a3037;
    border-radius: 20px;
    color: #d2a9af;
}

.admin-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
}

.admin-user-card {
    padding: 18px;
    background: #17171c;
    border: 1px solid #302a30;
    border-radius: 15px;
}

.admin-user-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-user-avatar {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #303038;
    border-radius: 50%;
    font-weight: bold;
}

.admin-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-user-info {
    min-width: 0;
}

.admin-user-info h3 {
    margin: 0;
}

.admin-user-info p {
    margin: 3px 0 0;
    color: #8e8e98;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.admin-user-description {
    margin: 15px 0 0;
    padding-top: 13px;
    border-top: 1px solid #29292f;
    color: #b5b5bd;
    font-size: 0.87rem;
    white-space: pre-line;
}

.admin-user-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 15px;
}

.admin-user-stats span {
    padding: 4px 7px;
    background: #24242a;
    border-radius: 7px;
    color: #9898a1;
    font-size: 0.76rem;
}

.admin-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}

.admin-card-actions form {
    margin: 0;
}

.admin-view-button,
.admin-delete-button {
    min-height: 36px;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: bold;
}

.admin-view-button {
    background: #27272e;
    border: 1px solid #3c3c46;
    color: #dedee4;
}

.admin-view-button:hover {
    background: #303038;
}

.admin-delete-button {
    background: #3c1a1a;
    border: 1px solid #743333;
    color: #ff8b8b;
}

.admin-delete-button:hover {
    background: #512020;
    color: #ffb0b0;
}

.admin-events-list {
    display: grid;
    gap: 10px;
}

.admin-event-row {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 14px;
    background: #17171c;
    border: 1px solid #302a30;
    border-radius: 13px;
}

.admin-event-date {
    width: 62px;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #28232a;
    border-radius: 11px;
}

.admin-event-date strong {
    font-size: 1.25rem;
}

.admin-event-date span {
    color: #8e8e97;
    font-size: 0.72rem;
}

.admin-event-main h3 {
    margin: 0;
}

.admin-event-main p {
    margin: 3px 0;
    color: #aaaaB2;
}

.admin-event-main small {
    color: #777781;
}

.admin-event-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.admin-event-actions form {
    margin: 0;
}

.admin-empty {
    padding: 20px;
    border: 1px dashed #3b3238;
    border-radius: 12px;
    color: #777781;
}

@media (max-width: 800px) {

    .admin-topbar {
        position: static;
        align-items: flex-start;
        flex-direction: column;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .admin-topbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .admin-event-row {
        grid-template-columns: 54px 1fr;
    }

    .admin-event-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

}

@media (max-width: 500px) {

    .admin-login-card {
        padding: 24px;
    }

    .admin-users-grid {
        grid-template-columns: 1fr;
    }

    .admin-card-actions,
    .admin-card-actions form,
    .admin-view-button,
    .admin-delete-button {
        width: 100%;
    }

}


/* ============================================================
   AUTHENTIFICATION - CONNEXION / INSCRIPTION
   ============================================================ */

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% 0%,
            #232329 0,
            #111115 38%,
            #0c0c0f 68%
        );
}

.auth-page {
    width: min(100%, 1100px);
    min-height: calc(100vh - 72px);
    margin: 0 auto;
    padding: 48px 20px 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-page-register {
    align-items: flex-start;
}

.auth-card {
    width: min(100%, 500px);
    padding: 34px;
    background:
        linear-gradient(
            180deg,
            rgba(28, 28, 34, 0.98),
            rgba(20, 20, 25, 0.98)
        );
    border: 1px solid #303039;
    border-radius: 22px;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.auth-card-wide {
    width: min(100%, 720px);
}

.auth-card-header {
    text-align: center;
    margin-bottom: 26px;
}

.auth-symbol {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #25252d;
    border: 1px solid #3c3c46;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 2px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.auth-kicker {
    margin: 0 0 5px;
    color: #888892;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    font-size: 0.73rem;
    font-weight: bold;
}

.auth-card h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
}

.auth-subtitle {
    max-width: 500px;
    margin: 10px auto 0;
    color: #9696a0;
    font-size: 0.95rem;
}

.auth-flash {
    margin: 0 0 22px;
}

.auth-form {
    width: 100%;
}

.auth-form label {
    margin-top: 17px;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="file"],
.auth-form textarea {
    background: #111115;
    border: 1px solid #33333c;
    color: #ffffff;
}

.auth-form input::placeholder,
.auth-form textarea::placeholder {
    color: #65656f;
}

.auth-form input:focus,
.auth-form textarea:focus {
    border-color: #666672;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.045);
}

.auth-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.auth-fields-grid label {
    margin-top: 0;
}

.auth-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 28px;
    border-radius: 11px;
    font-size: 0.96rem;
}

.auth-card-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #2c2c33;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    color: #85858f;
    font-size: 0.9rem;
}

.auth-inline-link {
    color: #ffffff;
    font-weight: bold;
}

.auth-inline-link:hover {
    text-decoration: underline;
}

.auth-file-zone {
    padding: 12px;
    background: #111115;
    border: 1px dashed #393943;
    border-radius: 11px;
}

.auth-file-zone input[type="file"] {
    padding: 8px;
    border: none;
    background: transparent;
}

.auth-card .profile-description-block {
    padding-top: 3px;
}

.auth-card .photo-upload-block {
    margin-top: 26px;
}

@media (max-width: 700px) {

    .auth-page {
        min-height: auto;
        padding: 32px 14px 50px;
        align-items: flex-start;
    }

    .auth-card,
    .auth-card-wide {
        padding: 24px;
        border-radius: 18px;
    }

    .auth-fields-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .auth-fields-grid label {
        margin-top: 17px;
    }

}

@media (max-width: 440px) {

    .auth-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .auth-card,
    .auth-card-wide {
        padding: 20px 16px;
    }

    .auth-symbol {
        width: 54px;
        height: 54px;
        border-radius: 15px;
    }

}


/* ============================================================
   PAGE D'ENTRÉE PUBLIQUE
   ============================================================ */

.landing-body {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    background: #09090c;
}

.landing-page {
    --landing-background: none;

    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background-image: var(--landing-background);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    background-color: #09090c;
}

.landing-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.16) 0%,
            rgba(0, 0, 0, 0.24) 45%,
            rgba(0, 0, 0, 0.46) 100%
        );
}

.landing-content {
    position: relative;
    z-index: 2;

    width: min(1100px, 92%);

    padding: 40px 20px;

    text-align: center;
}

.landing-eyebrow {
    margin: 0 0 14px;

    color: rgba(255, 255, 255, 0.80);

    font-size: 0.78rem;
    font-weight: bold;

    letter-spacing: 0.38rem;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.80);
}

.landing-content h1 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            3.3rem,
            10vw,
            8.5rem
        );

    font-weight: 800;
    line-height: 0.92;

    letter-spacing: 0.055em;

    text-shadow:
        0 4px 12px rgba(0, 0, 0, 0.62),
        0 12px 40px rgba(0, 0, 0, 0.62);
}

.landing-tagline {
    margin: 25px 0 0;

    color: rgba(255, 255, 255, 0.90);

    font-size:
        clamp(
            1rem,
            2vw,
            1.25rem
        );

    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.85);
}

.landing-actions {
    margin-top: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;
}

.landing-button {
    min-width: 155px;
    min-height: 48px;

    padding: 12px 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-weight: bold;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.landing-button:hover {
    transform: translateY(-2px);
}

.landing-button-primary {
    background: #ffffff;

    border: 1px solid #ffffff;

    color: #101014;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.34);
}

.landing-button-primary:hover {
    background: #ededf1;
}

.landing-button-secondary {
    background:
        rgba(
            16,
            16,
            20,
            0.58
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.62
        );

    color: #ffffff;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.28);
}

.landing-button-secondary:hover {
    background:
        rgba(
            32,
            32,
            38,
            0.80
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.85
        );
}

/* ============================================================
   ADMIN - IMAGE DE FOND DE L'ACCUEIL
   ============================================================ */

.admin-background-manager {
    display: grid;
    grid-template-columns: minmax(300px, 1.25fr) minmax(280px, 0.75fr);
    gap: 22px;
    align-items: start;
}

.admin-background-preview {
    min-height: 280px;
    overflow: hidden;
    background: #111115;
    border: 1px solid #343039;
    border-radius: 16px;
}

.admin-background-preview img {
    width: 100%;
    height: 330px;
    object-fit: cover;
}

.admin-background-placeholder {
    min-height: 280px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 30%,
            #292932,
            #111115 68%
        );
    color: #aaaab4;
}

.admin-background-placeholder strong {
    color: #ffffff;
}

.admin-background-controls {
    padding: 22px;
    background: #17171c;
    border: 1px solid #302a30;
    border-radius: 16px;
}

.admin-background-controls h3 {
    margin: 0;
}

.admin-background-controls > p {
    color: #8f8f99;
    font-size: 0.88rem;
}

.admin-background-form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.admin-background-form input[type="file"] {
    width: 100%;
}

.admin-background-delete-form {
    margin-top: 12px;
}

@media (max-width: 800px) {

    .admin-background-manager {
        grid-template-columns: 1fr;
    }

    .admin-background-preview img {
        height: 260px;
    }

}

@media (max-width: 600px) {

    .landing-body {
        overflow: auto;
    }

    .landing-content h1 {
        font-size: clamp(3rem, 16vw, 5.1rem);
        letter-spacing: 0.025em;
    }

    .landing-actions {
        flex-direction: column;
        width: 100%;
    }

    .landing-button {
        width: min(100%, 300px);
    }

}


/* ============================================================
   CRÉATION D'UNE SOIRÉE
   ============================================================ */

.create-event-body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            #232329 0,
            #111115 38%,
            #0c0c0f 72%
        );
}

.create-event-page {
    width: min(100%, 1100px);

    margin: 0 auto;

    padding:
        48px
        20px
        80px;

    display: flex;

    justify-content: center;
}

.create-event-card {
    width: min(100%, 820px);

    padding: 34px;

    background:
        linear-gradient(
            180deg,
            rgba(28, 28, 34, 0.98),
            rgba(20, 20, 25, 0.98)
        );

    border:
        1px solid #303039;

    border-radius: 22px;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.create-event-header {
    text-align: center;

    margin-bottom: 30px;
}

.create-event-icon {
    width: 62px;
    height: 62px;

    margin:
        0
        auto
        18px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #25252d;

    border:
        1px solid #3c3c46;

    border-radius: 18px;

    color: #ffffff;

    font-size: 1.45rem;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.24);
}

.create-event-kicker {
    margin:
        0
        0
        5px;

    color: #888892;

    text-transform: uppercase;

    letter-spacing: 2.2px;

    font-size: 0.73rem;
    font-weight: bold;
}

.create-event-header h1 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            2rem,
            5vw,
            3rem
        );

    line-height: 1.05;
}

.create-event-subtitle {
    max-width: 610px;

    margin:
        10px
        auto
        0;

    color: #9696a0;

    font-size: 0.95rem;
}

.create-event-flash {
    margin:
        0
        0
        22px;
}

.create-event-form {
    width: 100%;
}

.create-event-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px
        16px;
}

.create-event-field {
    min-width: 0;
}

.create-event-field-full {
    grid-column:
        1 / -1;
}

.create-event-field label {
    margin-top: 0;
}

.create-event-help {
    margin:
        -2px
        0
        9px;

    font-size: 0.86rem;
}

.create-event-form input[type="text"],
.create-event-form input[type="date"],
.create-event-form input[type="file"],
.create-event-form textarea {
    background: #111115;

    border:
        1px solid #33333c;

    color: #ffffff;
}

.create-event-form input::placeholder,
.create-event-form textarea::placeholder {
    color: #65656f;
}

.create-event-form input:focus,
.create-event-form textarea:focus {
    border-color: #666672;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.045);
}

.create-event-form textarea {
    min-height: 160px;
}

.create-event-file-zone {
    padding: 12px;

    background: #111115;

    border:
        1px dashed #393943;

    border-radius: 11px;
}

.create-event-file-zone input[type="file"] {
    padding: 8px;

    border: none;

    background: transparent;
}

.create-event-actions {
    margin-top: 30px;

    padding-top: 22px;

    border-top:
        1px solid #2c2c33;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 12px;
}

.create-event-cancel {
    min-height: 46px;

    padding:
        11px
        18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid #3a3a43;

    border-radius: 11px;

    background: #1b1b20;

    color: #c2c2c9;

    font-weight: bold;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.create-event-cancel:hover {
    background: #25252b;

    border-color: #4a4a55;

    color: #ffffff;
}

.create-event-submit {
    min-width: 190px;

    min-height: 46px;

    border-radius: 11px;
}

.create-event-menu-link {
    padding:
        7px
        12px;

    border-radius: 20px;

    color: #dedee3 !important;
}

.create-event-menu-link.active {
    background: #303038;

    color: #ffffff !important;
}


@media (max-width: 700px) {

    .create-event-page {
        padding:
            32px
            14px
            50px;
    }

    .create-event-card {
        padding: 24px;

        border-radius: 18px;
    }

    .create-event-grid {
        grid-template-columns: 1fr;
    }

    .create-event-field-full {
        grid-column: auto;
    }

    .create-event-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }

    .create-event-cancel,
    .create-event-submit {
        width: 100%;
    }

}


@media (max-width: 440px) {

    .create-event-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .create-event-card {
        padding:
            20px
            16px;
    }

    .create-event-icon {
        width: 54px;
        height: 54px;

        border-radius: 15px;
    }

}


/* ============================================================
   SIGNATURE "BY SYNED"
   ============================================================ */

/*
   Signature globale du site.
   La police privilégie des fontes calligraphiques courantes sous Windows.
   Aucun fichier de police externe n'est nécessaire.
*/

.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.logo::after {
    content: "By Syned";

    margin-top: 5px;

    color: rgba(255, 255, 255, 0.62);

    font-family:
        "Edwardian Script ITC",
        "Segoe Script",
        "Brush Script MT",
        "Lucida Handwriting",
        cursive;

    font-size: 0.88rem;
    font-style: italic;
    font-weight: 400;

    letter-spacing: 0.02em;

    text-transform: none;

    line-height: 1;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.50);
}


/* Signature centrale de la page d'entrée */

.landing-signature {
    margin:
        20px
        0
        5px;

    color: rgba(255, 255, 255, 0.90);

    font-family:
        "Edwardian Script ITC",
        "Segoe Script",
        "Brush Script MT",
        "Lucida Handwriting",
        cursive;

    font-size:
        clamp(
            2rem,
            4.2vw,
            3.4rem
        );

    font-style: italic;
    font-weight: 400;

    letter-spacing: 0.025em;

    line-height: 1;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.82),
        0 8px 28px rgba(0, 0, 0, 0.48);
}


/*
   Le sous-titre reste bien séparé visuellement
   de la signature.
*/

.landing-signature + .landing-tagline {
    margin-top: 14px;
}


@media (max-width: 700px) {

    .logo::after {
        margin-top: 4px;

        font-size: 0.82rem;
    }

    .landing-signature {
        margin-top: 17px;

        font-size:
            clamp(
                1.8rem,
                8vw,
                2.7rem
            );
    }

}


@media (max-width: 440px) {

    .logo::after {
        font-size: 0.78rem;
    }

}


/* ============================================================
   MODIFICATION D'UNE SOIRÉE
   ============================================================ */

.button-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding:
        10px
        16px;

    border:
        1px solid #555560;

    border-radius: 9px;

    background: #28282f;

    color: #eeeeF2;

    font-weight: bold;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.button-edit:hover {
    background: #35353d;

    border-color: #737380;

    transform: translateY(-1px);
}

.event-owner-actions {
    margin-top: 22px;
}

.organizer-zone-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 18px;
}

.edit-event-current-poster {
    width: min(100%, 360px);

    margin-top: 10px;

    overflow: hidden;

    background: #111115;

    border:
        1px solid #33333c;

    border-radius: 14px;
}

.edit-event-current-poster img {
    width: 100%;

    max-height: 430px;

    object-fit: cover;
}

.edit-event-remove-poster {
    margin-top: 14px;

    padding: 12px 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    background: #241919;

    border:
        1px solid #543030;

    border-radius: 10px;

    color: #e3b7b7;

    font-weight: normal;

    cursor: pointer;
}

.edit-event-remove-poster input {
    width: 18px;
    height: 18px;

    margin: 0;
}

.edit-event-no-poster {
    margin-top: 10px;

    padding: 18px;

    background: #151519;

    border:
        1px dashed #3a3a43;

    border-radius: 11px;

    color: #85858f;
}

.event-detail-no-poster {
    min-height: 320px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            #292930,
            #151519 72%
        );

    border:
        1px solid #303038;

    border-radius: 18px;

    color: #777781;
}


@media (max-width: 700px) {

    .organizer-zone-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .organizer-zone-actions .button,
    .organizer-zone-actions .button-edit {
        width: 100%;
    }

    .event-owner-actions .button-edit {
        width: 100%;
    }

}


/* ============================================================
   PARTICIPANTS CLIQUABLES -> FICHE MEMBRE
   ============================================================ */

.participant-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.participant-card-link .participant-card {
    height: 100%;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.participant-card-link:hover .participant-card {
    transform: translateY(-3px);

    background: #1d1d23;

    border-color: #484853;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.28);
}

.participant-card-title-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.participant-card-title-line h2 {
    margin-right: auto;
}

.participant-profile-arrow {
    flex-shrink: 0;

    color: #777781;

    font-size: 1.7rem;
    line-height: 1;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.participant-card-link:hover .participant-profile-arrow {
    color: #ffffff;

    transform: translateX(3px);
}

.participant-card-footer {
    margin-top: 16px;
    padding-top: 13px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    border-top:
        1px solid #2c2c33;

    color: #8e8e98;

    font-size: 0.82rem;

    transition:
        color 0.2s ease;
}

.participant-card-link:hover .participant-card-footer {
    color: #ffffff;
}


/* Mini-participants affichés directement dans la soirée */

.participant-link {
    color: inherit;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.participant-link:hover {
    transform: translateY(-2px);

    background: #202026;

    border-color: #484853;
}

.participant-mini-arrow {
    margin-left: 2px;

    color: #777781;

    font-size: 1.15rem;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.participant-link:hover .participant-mini-arrow {
    color: #ffffff;

    transform: translateX(2px);
}



/* ============================================================
   TYPE DE PROFIL : COUPLE / HOMME SEUL / FEMME SEULE
   ============================================================ */

.profile-type-block {
    margin-top: 24px;
}

.profile-type-select {
    width: 100%;

    padding:
        12px
        14px;

    background: #111115;

    border:
        1px solid #35353d;

    border-radius: 9px;

    color: #ffffff;

    outline: none;

    cursor: pointer;
}

.profile-type-select:focus {
    border-color: #6a6a75;

    box-shadow:
        0 0 0 3px
        rgba(255, 255, 255, 0.05);
}

.profile-type-select option {
    background: #17171c;

    color: #ffffff;
}

.profile-type-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;

    margin:
        5px
        0
        8px;

    padding:
        4px
        9px;

    background: #292933;

    border:
        1px solid #484854;

    border-radius: 999px;

    color: #d9d9e1;

    font-size: 0.76rem;
    font-weight: bold;

    letter-spacing: 0.02em;
}

.profile-type-badge-large {
    margin: 0;

    padding:
        6px
        11px;

    font-size: 0.82rem;
}

.member-badges {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 7px;
}

.member-badges .profile-type-badge,
.member-badges .current-user-badge {
    margin-bottom: 0;
}

.participant-type-badge {
    margin:
        1px
        0
        7px;
}



/* ============================================================
   PHOTOS PUBLIQUES / PRIVÉES
   ============================================================ */

.photo-privacy-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.photo-privacy-title h2,
.photo-privacy-title h3 {
    margin:
        7px
        0
        0;
}

.photo-privacy-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        4px
        8px;

    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: bold;

    letter-spacing: 0.10em;
}

.photo-privacy-public {
    background: #1e3424;

    border:
        1px solid #416b49;

    color: #b9e9c0;
}

.photo-privacy-private {
    background: #352327;

    border:
        1px solid #70414b;

    color: #efbac4;
}

.private-lock-icon {
    font-size: 1.25rem;

    opacity: 0.78;
}

.registration-photo-section {
    margin-top: 28px;

    padding: 20px;

    background: #151519;

    border:
        1px solid #303039;

    border-radius: 15px;
}

.private-photo-section,
.private-photo-add {
    border-color: #493038;

    background:
        linear-gradient(
            180deg,
            rgba(42, 26, 31, 0.62),
            rgba(20, 20, 25, 0.96)
        );
}

.private-file-zone {
    border-color: #583841;
}


/* ============================================================
   ESPACE PRIVÉ DU PROPRIÉTAIRE
   ============================================================ */

.profile-private-panel {
    margin:
        0
        0
        28px;

    padding: 26px;

    background:
        linear-gradient(
            180deg,
            #19171b,
            #151519
        );

    border:
        1px solid #3b3036;

    border-radius: 18px;
}

.private-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.private-panel-heading h2 {
    margin:
        7px
        0
        4px;
}

.private-panel-heading p {
    margin:
        0;
}

.private-photo-count {
    flex-shrink: 0;

    padding:
        7px
        11px;

    background: #2a2025;

    border:
        1px solid #49323a;

    border-radius: 999px;

    color: #dcb8bf;

    font-size: 0.82rem;
}

.private-photo-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 14px;
}

.private-photo-card {
    overflow: hidden;

    background: #17171c;

    border:
        1px solid #3b3036;

    border-radius: 14px;
}

.private-photo-image {
    position: relative;

    overflow: hidden;
}

.private-photo-image img {
    width: 100%;

    aspect-ratio:
        1 / 1;

    object-fit: cover;
}

.private-photo-lock {
    position: absolute;

    left: 9px;
    bottom: 9px;

    padding:
        5px
        8px;

    background:
        rgba(20, 8, 12, 0.82);

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 8px;

    color: #f4d6dc;

    font-size: 0.72rem;
}

.private-empty-state {
    padding: 24px;

    display: flex;
    align-items: center;

    gap: 16px;

    background: #141417;

    border:
        1px dashed #4c3a40;

    border-radius: 13px;

    color: #969099;
}

.private-empty-state p {
    margin:
        4px
        0
        0;
}

.private-empty-lock {
    font-size: 1.7rem;
}


/* ============================================================
   AUTORISATIONS PHOTOS PRIVÉES
   ============================================================ */

.private-access-layout {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.75fr)
        minmax(340px, 1.25fr);

    gap: 22px;
}

.private-access-grant,
.private-access-current {
    padding: 20px;

    background: #141417;

    border:
        1px solid #342c31;

    border-radius: 14px;
}

.private-access-grant h3,
.private-access-current h3 {
    margin-top: 0;
}

.private-access-form {
    width: 100%;
}

.private-access-form select {
    width: 100%;

    padding:
        12px
        14px;

    background: #101014;

    border:
        1px solid #3c3439;

    border-radius: 9px;

    color: #ffffff;
}

.private-access-submit {
    width: 100%;

    margin-top: 20px;
}

.private-access-list {
    display: grid;

    gap: 10px;
}

.private-access-row {
    padding: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    background: #1b191d;

    border:
        1px solid #3a3035;

    border-radius: 11px;
}

.private-access-row p {
    margin:
        3px
        0
        0;

    color: #9b959d;

    font-size: 0.84rem;
}

.private-access-row .profile-type-badge {
    margin:
        0
        0
        0
        7px;
}

.private-revoke-button {
    flex-shrink: 0;

    padding:
        8px
        10px;

    background: transparent;

    border:
        1px solid #73404a;

    border-radius: 8px;

    color: #ee929f;
}

.private-revoke-button:hover {
    background: #42232a;
}

.private-access-empty {
    padding: 18px;

    background: #17171b;

    border:
        1px dashed #41363c;

    border-radius: 11px;

    color: #858089;
}


/* ============================================================
   GALERIE PRIVÉE VUE PAR UN MEMBRE AUTORISÉ
   ============================================================ */

.private-member-gallery-section {
    background:
        linear-gradient(
            180deg,
            rgba(50, 27, 34, 0.18),
            transparent
        );
}

.private-label {
    color: #c6959f;
}

.private-access-status {
    margin:
        7px
        0
        0;

    color: #d5abb3;

    font-size: 0.88rem;
}

.private-count-badge {
    background: #302229;

    border-color: #5a3942;

    color: #e3bbc3;
}

.private-member-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 14px;
}

.private-member-photo {
    position: relative;

    margin: 0;

    overflow: hidden;

    background: #161418;

    border:
        1px solid #47333a;

    border-radius: 16px;
}

.private-member-photo img {
    width: 100%;

    aspect-ratio:
        1 / 1;

    object-fit: cover;
}

.private-member-photo figcaption {
    position: absolute;

    left: 10px;
    bottom: 10px;

    padding:
        6px
        9px;

    background:
        rgba(20, 8, 12, 0.82);

    border-radius: 8px;

    color: #f2d3d9;

    font-size: 0.75rem;
}


/* ============================================================
   RESPONSIVE PRIVÉ
   ============================================================ */

@media (max-width: 800px) {

    .private-access-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .private-panel-heading {
        flex-direction: column;
    }

    .private-photo-grid,
    .private-member-gallery {
        grid-template-columns: 1fr;
    }

    .private-access-row {
        flex-direction: column;
        align-items: stretch;
    }

    .private-revoke-button {
        width: 100%;
    }

}


/* ============================================================
   LIGHTBOX DES PHOTOS PRIVÉES
   ============================================================ */

.private-photo-clickable {
    cursor: zoom-in;
}

.private-photo-open {
    position: relative;

    width: 100%;

    display: block;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    cursor: zoom-in;
}

.private-photo-open img {
    transition:
        transform 0.22s ease,
        filter 0.22s ease;
}

.private-photo-open:hover img {
    transform: scale(1.025);

    filter: brightness(0.92);
}

.private-photo-zoom-hint {
    position: absolute;

    right: 10px;
    top: 10px;

    padding:
        5px
        8px;

    background:
        rgba(10, 10, 14, 0.76);

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 8px;

    color: #ffffff;

    font-size: 0.72rem;

    opacity: 0;

    transform: translateY(-3px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.private-photo-open:hover
.private-photo-zoom-hint {
    opacity: 1;

    transform: translateY(0);
}


body.lightbox-open {
    overflow: hidden;
}


.private-photo-lightbox {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 22px;
}

.private-photo-lightbox.is-open {
    display: flex;
}

.private-photo-lightbox-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.90);

    backdrop-filter:
        blur(8px);

    cursor: zoom-out;
}

.private-photo-lightbox-dialog {
    position: relative;

    z-index: 1;

    width:
        min(
            1200px,
            96vw
        );

    height:
        min(
            900px,
            92vh
        );

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        40px
        70px;

    background:
        rgba(
            15,
            15,
            18,
            0.96
        );

    border:
        1px solid #3e3439;

    border-radius: 18px;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.70);
}

.private-photo-lightbox-image-wrap {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;
}

.private-photo-lightbox-image-wrap img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.48);
}

.private-photo-lightbox-close {
    position: absolute;

    right: 14px;
    top: 12px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    color: #ffffff;

    font-size: 2rem;
    line-height: 1;
}

.private-photo-lightbox-close:hover {
    background:
        rgba(255, 255, 255, 0.15);
}

.private-photo-lightbox-nav {
    position: absolute;

    top: 50%;

    width: 48px;
    height: 64px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    transform:
        translateY(-50%);

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 12px;

    color: #ffffff;

    font-size: 2.5rem;
    line-height: 1;
}

.private-photo-lightbox-nav:hover {
    background:
        rgba(255, 255, 255, 0.15);
}

.private-photo-lightbox-prev {
    left: 12px;
}

.private-photo-lightbox-next {
    right: 12px;
}

.private-photo-lightbox-counter {
    position: absolute;

    left: 50%;
    bottom: 12px;

    transform:
        translateX(-50%);

    padding:
        6px
        11px;

    background:
        rgba(0, 0, 0, 0.54);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 999px;

    color: #d7d7dd;

    font-size: 0.78rem;
}


@media (max-width: 700px) {

    .private-photo-lightbox {
        padding: 8px;
    }

    .private-photo-lightbox-dialog {
        width: 100%;
        height: 94vh;

        padding:
            54px
            18px
            48px;

        border-radius: 13px;
    }

    .private-photo-lightbox-nav {
        top: auto;
        bottom: 8px;

        width: 44px;
        height: 40px;

        transform: none;

        font-size: 2rem;
    }

    .private-photo-lightbox-prev {
        left: 12px;
    }

    .private-photo-lightbox-next {
        right: 12px;
    }

    .private-photo-lightbox-counter {
        bottom: 14px;
    }

    .private-photo-zoom-hint {
        opacity: 1;

        transform: none;
    }

}


/* ============================================================
   PHOTOS PUBLIQUES CLIQUABLES
   Même mise en valeur que les photos privées
   ============================================================ */

.public-photo-clickable {
    cursor: zoom-in;
}

.public-photo-open,
.profile-public-photo-open {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    cursor: zoom-in;
}

.public-photo-open img,
.profile-public-photo-open img {
    width: 100%;

    transition:
        transform 0.22s ease,
        filter 0.22s ease;
}

.public-photo-open:hover img,
.profile-public-photo-open:hover img {
    transform: scale(1.025);

    filter: brightness(0.92);
}

.public-photo-zoom-hint {
    position: absolute;

    right: 10px;
    top: 10px;

    z-index: 2;

    padding:
        5px
        8px;

    background:
        rgba(10, 10, 14, 0.76);

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 8px;

    color: #ffffff;

    font-size: 0.72rem;

    opacity: 0;

    transform: translateY(-3px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.public-photo-open:hover
.public-photo-zoom-hint,
.profile-public-photo-open:hover
.public-photo-zoom-hint {
    opacity: 1;

    transform: translateY(0);
}

.profile-photo-image {
    overflow: hidden;
}

.profile-public-photo-open img {
    aspect-ratio: 1 / 1;

    object-fit: cover;
}


@media (max-width: 700px) {

    .public-photo-zoom-hint {
        opacity: 1;

        transform: none;
    }

}


/* ============================================================
   MOTS DE PASSE : VISIBILITÉ + DOUBLE SAISIE
   ============================================================ */

.password-field {
    position: relative;

    width: 100%;
}

.password-field input {
    width: 100%;

    padding-right: 52px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 7px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    transform: translateY(-50%);

    background: transparent;

    border:
        1px solid transparent;

    border-radius: 9px;

    color: #c7c7cf;

    cursor: pointer;

    opacity: 0.78;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        opacity 0.18s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background:
        rgba(255, 255, 255, 0.07);

    border-color:
        rgba(255, 255, 255, 0.12);

    opacity: 1;

    outline: none;
}

.password-toggle.is-visible {
    background:
        rgba(255, 255, 255, 0.08);

    opacity: 1;
}

.password-eye {
    display: inline-block;

    font-size: 1rem;
    line-height: 1;
}

.password-help {
    margin:
        -6px
        0
        16px;

    color: #8c8c95;

    font-size: 0.78rem;
}

.password-match-info {
    min-height: 20px;

    margin:
        7px
        0
        16px;

    font-size: 0.80rem;
}

.password-match-info.is-valid {
    color: #87cf96;
}

.password-match-info.is-invalid {
    color: #ef919d;
}


/* ============================================================
   ADMINISTRATION - SÉCURITÉ / MOT DE PASSE
   ============================================================ */

.admin-security-card {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.85fr)
        minmax(340px, 1.15fr);

    gap: 28px;

    padding: 24px;

    background:
        linear-gradient(
            145deg,
            #18171c,
            #151519
        );

    border:
        1px solid #3a2b31;

    border-radius: 16px;
}

.admin-security-intro {
    display: flex;
    align-items: flex-start;

    gap: 16px;
}

.admin-security-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #2d2025;

    border:
        1px solid #593740;

    border-radius: 14px;

    font-size: 1.35rem;
}

.admin-security-intro h3 {
    margin:
        2px
        0
        8px;
}

.admin-security-intro p {
    margin: 0;

    color: #92929b;

    line-height: 1.55;
}

.admin-password-form {
    padding: 20px;

    background: #111115;

    border:
        1px solid #30282d;

    border-radius: 13px;
}

.admin-password-form label {
    margin-top: 15px;
}

.admin-password-form label:first-of-type {
    margin-top: 0;
}

.admin-password-save-button {
    width: 100%;

    margin-top: 20px;

    padding:
        12px
        16px;

    background: #5c262c;

    border:
        1px solid #853a43;

    border-radius: 9px;

    color: #ffffff;

    font-weight: bold;
}

.admin-password-save-button:hover {
    background: #712d35;
}


@media (max-width: 850px) {

    .admin-security-card {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   MON PROFIL - PHOTOS PRIVÉES CLIQUABLES
   ============================================================ */

.profile-private-photo-open {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    cursor: zoom-in;
}

.profile-private-photo-open img {
    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    transition:
        transform 0.22s ease,
        filter 0.22s ease;
}

.profile-private-photo-open:hover img {
    transform: scale(1.025);

    filter: brightness(0.92);
}

.profile-private-photo-open:hover
.public-photo-zoom-hint {
    opacity: 1;

    transform: translateY(0);
}


@media (max-width: 700px) {

    .profile-private-photo-open
    .public-photo-zoom-hint {
        opacity: 1;

        transform: none;
    }

}


/* ============================================================
   MESSAGERIE PRIVÉE - NAVIGATION
   ============================================================ */

.messages-menu-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 7px 12px;

    border-radius: 20px;

    color: #dedee3 !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.messages-menu-link:hover {
    background: #25252b;

    color: #ffffff !important;

    transform: translateY(-1px);
}

.messages-menu-link.active {
    background: #303038;

    color: #ffffff !important;
}

.messages-menu-icon {
    font-size: 0.95rem;
}

.nav-message-badge {
    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        6px;

    background: #b33848;

    border:
        1px solid #df6272;

    border-radius: 999px;

    color: #ffffff;

    font-size: 0.70rem;
    font-weight: bold;

    line-height: 1;
}


/* ============================================================
   MEMBRES - ACTION MESSAGERIE
   ============================================================ */

.member-card-shell {
    display: flex;
    flex-direction: column;

    padding: 0;

    overflow: hidden;
}

.member-card-main-link {
    flex: 1;

    padding: 20px;
}

.member-card-shell:hover {
    transform: translateY(-3px);

    border-color: #4b4b56;

    background: #1c1c21;

    box-shadow:
        0
        14px
        34px
        rgba(0, 0, 0, 0.28);
}

.member-card-shell:hover
.member-open-arrow {
    color: #ffffff;

    transform: translateX(3px);
}

.member-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        12px
        16px;

    background: #141419;

    border-top:
        1px solid #292930;
}

.member-profile-action,
.member-message-action {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding:
        8px
        10px;

    border-radius: 9px;

    font-size: 0.82rem;
}

.member-profile-action {
    color: #9c9ca5;
}

.member-profile-action:hover {
    color: #ffffff;

    background: #24242a;
}

.member-message-action {
    background: #28222a;

    border:
        1px solid #473643;

    color: #e7cdd3;
}

.member-message-action:hover {
    background: #382b35;

    border-color: #70515f;

    color: #ffffff;
}

.member-message-profile-button {
    margin-top: 22px;

    display: inline-flex;
    align-items: center;

    gap: 9px;
}


/* ============================================================
   MESSAGERIE - BOÎTE DE RÉCEPTION
   ============================================================ */

.messaging-page {
    padding-bottom: 80px;
}

.messaging-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    padding:
        54px
        0
        30px;

    border-bottom:
        1px solid #292930;
}

.messaging-header h1 {
    margin:
        4px
        0
        9px;

    font-size:
        clamp(
            2.4rem,
            6vw,
            4.8rem
        );

    line-height: 1;
}

.messaging-header p {
    margin-bottom: 0;
}

.messaging-new-button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: 8px;
}

.conversation-list {
    display: grid;

    gap: 10px;

    padding-top: 24px;
}

.conversation-preview {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 15px;

    padding: 16px;

    background: #17171c;

    border:
        1px solid #292930;

    border-radius: 14px;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.conversation-preview:hover {
    transform: translateY(-2px);

    background: #1d1d22;

    border-color: #474750;
}

.conversation-preview.has-unread {
    background:
        linear-gradient(
            90deg,
            rgba(83, 35, 48, 0.30),
            #19191e 34%
        );

    border-color: #51333d;
}

.conversation-avatar,
.conversation-header-avatar {
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #303038;

    border-radius: 50%;

    color: #ffffff;

    font-weight: bold;
}

.conversation-avatar {
    width: 58px;
    height: 58px;

    font-size: 1.25rem;
}

.conversation-avatar img,
.conversation-header-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.conversation-preview-main {
    min-width: 0;
}

.conversation-preview-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.conversation-member-line {
    min-width: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.conversation-member-line strong {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: #ffffff;

    font-size: 1.02rem;
}

.conversation-preview-title time {
    flex-shrink: 0;

    color: #74747e;

    font-size: 0.74rem;
}

.conversation-preview-bottom {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 6px;
}

.conversation-preview-bottom p {
    flex: 1;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: #a8a8b0;

    font-size: 0.89rem;
}

.conversation-you {
    color: #d2d2d8;
}

.conversation-unread-badge {
    min-width: 25px;
    height: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        7px;

    background: #b33848;

    border-radius: 999px;

    color: #ffffff;

    font-size: 0.72rem;
    font-weight: bold;
}

.conversation-open-arrow {
    color: #6f6f78;

    font-size: 1.7rem;

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}

.conversation-preview:hover
.conversation-open-arrow {
    transform: translateX(3px);

    color: #ffffff;
}

.messaging-empty {
    max-width: 600px;

    margin:
        70px
        auto;

    padding: 34px;

    text-align: center;

    background: #17171c;

    border:
        1px solid #2d2d34;

    border-radius: 18px;
}

.messaging-empty-icon {
    width: 66px;
    height: 66px;

    margin:
        0
        auto
        18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #29232a;

    border:
        1px solid #4c3945;

    border-radius: 50%;

    font-size: 1.7rem;
}

.messaging-empty h2 {
    margin-bottom: 8px;
}

.messaging-empty p {
    margin:
        0
        0
        22px;

    color: #96969f;
}


/* ============================================================
   MESSAGERIE - CONVERSATION
   ============================================================ */

.conversation-page {
    padding-bottom: 70px;
}

.conversation-back-row {
    padding:
        28px
        0
        16px;
}

.conversation-shell {
    overflow: hidden;

    background: #141419;

    border:
        1px solid #2c2c33;

    border-radius: 18px;

    box-shadow:
        0
        18px
        55px
        rgba(0, 0, 0, 0.24);
}

.conversation-header {
    padding:
        18px
        20px;

    background:
        linear-gradient(
            90deg,
            #1d1d23,
            #17171c
        );

    border-bottom:
        1px solid #2d2d34;
}

.conversation-member {
    display: inline-flex;
    align-items: center;

    gap: 14px;
}

.conversation-header-avatar {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    border:
        1px solid #4a4a54;

    font-size: 1.3rem;
}

.conversation-private-label {
    margin:
        0
        0
        4px;

    color: #a98690;

    font-size: 0.74rem;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.conversation-header-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.conversation-header-name h1 {
    margin: 0;

    color: #ffffff;

    font-size: 1.35rem;
}

.conversation-profile-link {
    display: inline-block;

    margin-top: 4px;

    color: #85858f;

    font-size: 0.76rem;
}

.conversation-member:hover
.conversation-profile-link {
    color: #ffffff;
}

.conversation-messages {
    height:
        min(
            58vh,
            620px
        );

    min-height: 330px;

    overflow-y: auto;

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 22px;

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(75, 56, 66, 0.16),
            transparent 45%
        ),
        #111115;
}

.conversation-messages.is-empty {
    align-items: center;
    justify-content: center;
}

.message-bubble-row {
    display: flex;

    width: 100%;
}

.message-bubble-row.is-sent {
    justify-content: flex-end;
}

.message-bubble-row.is-received {
    justify-content: flex-start;
}

.message-bubble {
    max-width:
        min(
            74%,
            720px
        );

    padding:
        11px
        13px
        8px;

    border-radius: 15px;

    box-shadow:
        0
        6px
        18px
        rgba(0, 0, 0, 0.16);
}

.is-sent
.message-bubble {
    background: #3c2932;

    border:
        1px solid #65414f;

    border-bottom-right-radius: 5px;
}

.is-received
.message-bubble {
    background: #222229;

    border:
        1px solid #35353e;

    border-bottom-left-radius: 5px;
}

.message-bubble p {
    margin: 0;

    color: #f0f0f3;

    line-height: 1.5;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    margin-top: 6px;

    color: #85858e;

    font-size: 0.67rem;
}

.is-sent
.message-meta {
    color: #b3939e;
}

.message-read-state {
    color: #cda7b2;
}

.message-compose-form {
    padding: 15px;

    background: #19191e;

    border-top:
        1px solid #303038;
}

.message-compose-form textarea {
    width: 100%;

    min-height: 82px;

    resize: vertical;

    margin: 0;

    padding: 13px;

    background: #101014;

    border:
        1px solid #3b3b44;

    border-radius: 12px;

    color: #ffffff;

    line-height: 1.45;
}

.message-compose-form textarea:focus {
    border-color: #6c4b58;

    outline: none;

    box-shadow:
        0
        0
        0
        3px
        rgba(108, 75, 88, 0.15);
}

.message-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-top: 10px;
}

.message-character-count {
    color: #74747e;

    font-size: 0.73rem;
}

.message-send-button {
    display: inline-flex;
    align-items: center;

    gap: 8px;
}

.conversation-first-message {
    max-width: 440px;

    text-align: center;

    color: #8f8f98;
}

.conversation-first-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0
        auto
        14px;

    background: #29232a;

    border:
        1px solid #493641;

    border-radius: 50%;

    font-size: 1.5rem;
}

.conversation-first-message h2 {
    margin:
        0
        0
        7px;

    color: #ddddE2;
}

.conversation-first-message p {
    margin: 0;

    line-height: 1.5;
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ============================================================
   MESSAGERIE - RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {

    .messaging-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .messaging-new-button {
        width: 100%;

        justify-content: center;
    }

    .conversation-preview {
        grid-template-columns:
            50px
            minmax(0, 1fr);

        gap: 11px;
    }

    .conversation-avatar {
        width: 50px;
        height: 50px;
    }

    .conversation-open-arrow {
        display: none;
    }

    .conversation-preview-title {
        align-items: flex-start;
        flex-direction: column;

        gap: 3px;
    }

    .conversation-preview-title time {
        font-size: 0.68rem;
    }

    .conversation-messages {
        height: 55vh;

        min-height: 300px;

        padding: 14px;
    }

    .message-bubble {
        max-width: 88%;
    }

    .message-compose-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .message-send-button {
        width: 100%;

        justify-content: center;
    }

    .member-card-actions {
        flex-wrap: wrap;
    }

}


/* ============================================================
   PRÉSENCE DES MEMBRES - EN LIGNE / HORS LIGNE
   ============================================================ */

.presence-indicator {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding:
        5px
        8px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 999px;

    color: #7f7f88;

    font-size: 0.74rem;

    white-space: nowrap;
}

.presence-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    background: #696973;

    border:
        1px solid #85858f;

    border-radius: 50%;

    box-shadow:
        0
        0
        0
        2px
        rgba(105, 105, 115, 0.12);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.presence-indicator.is-online {
    background:
        rgba(39, 111, 66, 0.14);

    border-color:
        rgba(75, 171, 101, 0.30);

    color: #9bd9aa;
}

.presence-indicator.is-online
.presence-dot {
    background: #48c86b;

    border-color: #8be6a3;

    box-shadow:
        0
        0
        0
        3px
        rgba(72, 200, 107, 0.13),
        0
        0
        12px
        rgba(72, 200, 107, 0.48);
}

.presence-indicator-compact {
    padding:
        3px
        7px;

    gap: 5px;

    font-size: 0.68rem;
}

.presence-indicator-compact
.presence-dot {
    width: 8px;
    height: 8px;
}

.presence-indicator-dot-only {
    padding: 0;

    background: transparent;

    border: 0;
}

.presence-indicator-dot-only
.presence-dot {
    width: 8px;
    height: 8px;
}

.member-title-line {
    flex-wrap: wrap;
}

.member-profile-title-row {
    flex-wrap: wrap;
}

.participant-card-title-line {
    flex-wrap: wrap;
}

.conversation-member-line {
    flex-wrap: wrap;
}

.conversation-presence-row {
    margin-top: 7px;
}


/* ============================================================
   PRÉSENCE - MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .presence-text {
        font-size: 0.66rem;
    }

    .member-profile-title-row
    .presence-indicator {
        order: 3;
    }

}


/* ============================================================
   V29 - LIENS PHOTOS DANS LES CARTES MEMBRES
   ============================================================ */

.member-photo-access-links {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 9px;

    padding:
        12px
        16px;

    background: #15151a;

    border-top:
        1px solid #292930;
}

.member-private-request-form {
    margin: 0;
}

.member-photo-access-link {
    width: 100%;
    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        10px
        11px;

    background: #1c1c22;

    border:
        1px solid #313139;

    border-radius: 11px;

    color: #d8d8de;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

button.member-photo-access-link {
    font: inherit;
}

.member-photo-access-link:hover {
    transform: translateY(-1px);

    background: #24242b;

    border-color: #50505a;
}

.member-photo-public-link {
    border-color: #33453b;
}

.member-photo-public-link:hover {
    border-color: #557361;
}

.member-photo-private-link {
    border-color: #49343d;

    background:
        linear-gradient(
            145deg,
            #211a1f,
            #1a191e
        );
}

.member-photo-private-link:hover {
    border-color: #795363;
}

.member-photo-private-link.has-private-access {
    border-color: #355f45;

    background:
        linear-gradient(
            145deg,
            rgba(35, 78, 51, 0.32),
            #181b1a
        );
}

.member-photo-private-link.request-pending {
    border-color: #64563b;
}

.member-photo-private-link.no-private-photo {
    opacity: 0.68;
}

.member-photo-access-icon {
    flex-shrink: 0;

    font-size: 1rem;
}

.member-photo-access-text {
    min-width: 0;

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap:
        4px
        5px;

    line-height: 1.2;
}

.member-photo-access-text strong {
    color: #ffffff;

    font-size: 1.02rem;
}

.member-photo-access-arrow {
    margin-left: auto;

    color: #8c8c95;
}

.member-photo-access-state {
    margin-left: auto;

    color: #9999a3;

    font-size: 0.67rem;

    white-space: nowrap;
}

.has-private-access
.member-photo-access-state {
    color: #92d2a3;
}

.request-pending
.member-photo-access-state {
    color: #d1b77f;
}


/* ============================================================
   V29 - GALERIES / ACCÈS DIRECT
   ============================================================ */

#public-gallery,
#private-gallery {
    scroll-margin-top: 110px;
}

.private-gallery-locked {
    border-color: #47343b;

    background:
        linear-gradient(
            145deg,
            rgba(58, 32, 41, 0.20),
            #151519
        );
}

.private-gallery-locked-content {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 22px;

    background: #121216;

    border:
        1px dashed #4d3840;

    border-radius: 14px;
}

.private-gallery-locked-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #2b2025;

    border:
        1px solid #543943;

    border-radius: 50%;

    font-size: 1.35rem;
}

.private-gallery-locked-content h3 {
    margin:
        1px
        0
        7px;
}

.private-gallery-locked-content p {
    margin:
        0
        0
        16px;

    color: #9898a1;

    line-height: 1.55;
}

.private-gallery-request-button,
.private-gallery-request-pending-button {
    display: inline-flex;
    align-items: center;

    gap: 8px;
}


/* ============================================================
   V29 - DEMANDE D'ACCÈS DANS LA MESSAGERIE
   ============================================================ */

.private-photo-request-message {
    margin-top: 12px;

    padding: 12px;

    background:
        rgba(15, 15, 19, 0.45);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 11px;
}

.private-photo-request-heading {
    margin-bottom: 10px;

    color: #f0dce2;

    font-size: 0.82rem;
    font-weight: bold;
}

.private-photo-request-grant-form {
    display: grid;

    grid-template-columns:
        auto
        minmax(135px, 1fr)
        auto;

    align-items: center;

    gap: 8px;
}

.private-photo-request-grant-form label {
    margin: 0;

    color: #a8a1a6;

    font-size: 0.73rem;
}

.private-photo-request-grant-form select {
    width: 100%;

    padding:
        8px
        9px;

    background: #111115;

    border:
        1px solid #49404a;

    border-radius: 8px;

    color: #ffffff;
}

.private-photo-request-accept,
.private-photo-request-decline {
    padding:
        8px
        11px;

    border-radius: 8px;

    font-size: 0.76rem;
    font-weight: bold;
}

.private-photo-request-accept {
    background: #285d3a;

    border:
        1px solid #47865d;

    color: #dff5e5;
}

.private-photo-request-decline-form {
    margin-top: 8px;

    text-align: right;
}

.private-photo-request-decline {
    background: transparent;

    border:
        1px solid #62404a;

    color: #d99ba7;
}

.private-photo-request-status {
    display: inline-flex;
    align-items: center;

    padding:
        6px
        9px;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: bold;
}

.private-photo-request-status.is-pending {
    background: #392f1e;

    border:
        1px solid #655433;

    color: #dcc17f;
}

.private-photo-request-status.is-granted {
    background: #203a29;

    border:
        1px solid #3f714e;

    color: #aee1ba;
}

.private-photo-request-status.is-declined {
    background: #382329;

    border:
        1px solid #67404a;

    color: #daa0aa;
}

.message-system-badge {
    display: inline-flex;

    margin-top: 9px;

    padding:
        4px
        7px;

    background: #202026;

    border:
        1px solid #393941;

    border-radius: 999px;

    color: #9b9ba4;

    font-size: 0.66rem;
}


@media (max-width: 700px) {

    .member-photo-access-links {
        grid-template-columns: 1fr;
    }

    .private-gallery-locked-content {
        flex-direction: column;
    }

    .private-photo-request-grant-form {
        grid-template-columns: 1fr;
    }

    .private-photo-request-decline-form {
        text-align: stretch;
    }

    .private-photo-request-accept,
    .private-photo-request-decline {
        width: 100%;
    }

}


/* ============================================================
   V33 - CHOIX DE LA PHOTO PRINCIPALE
   ============================================================ */

#public-profile-gallery {
    scroll-margin-top: 110px;
}

.profile-photo-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 7px;
}

.profile-photo-footer-actions form {
    margin: 0;
}

.photo-main-button {
    padding:
        6px
        8px;

    background:
        rgba(42, 83, 52, 0.24);

    border:
        1px solid #41684b;

    border-radius: 7px;

    color: #aee0b8;

    font-size: 0.78rem;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.photo-main-button:hover {
    background: #294331;

    border-color: #659173;

    color: #ffffff;

    transform: translateY(-1px);
}

.photo-main-current {
    display: inline-flex;
    align-items: center;

    min-height: 29px;

    padding:
        5px
        8px;

    background:
        rgba(48, 105, 63, 0.22);

    border:
        1px solid #477653;

    border-radius: 7px;

    color: #a6deb2;

    font-size: 0.76rem;
    font-weight: bold;
}


@media (max-width: 700px) {

    .profile-photo-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-photo-footer-actions {
        width: 100%;

        justify-content: flex-start;
    }

}


/* ============================================================
   V34 - CHAMP DATE / CALENDRIER
   ============================================================ */

.date-picker-control {
    position: relative;

    display: flex;
    align-items: stretch;

    width: 100%;
}

.date-picker-control
.date-picker-input {
    flex: 1;

    min-width: 0;

    padding-right: 54px;

    cursor: pointer;

    color-scheme: dark;
}

.date-picker-control
.date-picker-input::-webkit-calendar-picker-indicator {
    opacity: 1;

    cursor: pointer;

    filter: invert(1);

    margin-right: 2px;
}

.date-picker-button {
    position: absolute;

    top: 1px;
    right: 1px;
    bottom: 1px;

    width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background:
        linear-gradient(
            180deg,
            #28282f,
            #1e1e24
        );

    border: 0;
    border-left:
        1px solid #3d3d46;

    border-radius:
        0
        8px
        8px
        0;

    color: #ffffff;

    font-size: 1.05rem;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.date-picker-button:hover,
.date-picker-button:focus-visible {
    background: #34343c;

    color: #ffffff;

    outline: none;
}

.date-picker-control:focus-within
.date-picker-button {
    border-left-color: #6a6a75;
}


@media (max-width: 700px) {

    .date-picker-button {
        width: 50px;

        font-size: 1.12rem;
    }

}


/* ============================================================
   V35 - CONTACTER L'ORGANISATEUR
   ============================================================ */

.event-organizer-profile-link {
    color: #e5d8dd;

    transition:
        color 0.18s ease;
}

.event-organizer-profile-link:hover {
    color: #ffffff;
}

.event-organizer-message-shortcut {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 7px;

    background: #2c2329;

    border:
        1px solid #523c47;

    border-radius: 50%;

    color: #e6ccd5;

    vertical-align: middle;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.event-organizer-message-shortcut:hover {
    background: #3c2d35;

    border-color: #755464;

    color: #ffffff;

    transform: translateY(-1px);
}

.organizer-contact {
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(48, 31, 39, 0.30),
            #17171c 48%
        );

    border-color: #473640;
}

.organizer-contact-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 17px;
}

.organizer-contact-heading h2 {
    margin:
        3px
        0
        0;
}

.organizer-contact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    padding: 17px;

    background: #121217;

    border:
        1px solid #303038;

    border-radius: 13px;
}

.organizer-contact-profile {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 14px;
}

.organizer-contact-avatar {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #303038;

    border:
        1px solid #4a4a54;

    border-radius: 50%;

    color: #ffffff;

    font-size: 1.35rem;
    font-weight: bold;
}

.organizer-contact-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.organizer-contact-identity {
    min-width: 0;

    display: flex;
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
}

.organizer-contact-role {
    color: #898992;

    font-size: 0.73rem;
}

.organizer-contact-identity strong {
    overflow: hidden;

    max-width: 320px;

    color: #ffffff;

    font-size: 1.08rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.organizer-contact-profile:hover
.organizer-contact-identity strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.organizer-contact-actions {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.organizer-profile-button,
.organizer-message-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}

.organizer-message-button {
    min-width: 190px;
}

.organizer-contact-privacy {
    margin:
        13px
        2px
        0;

    color: #82828b;

    font-size: 0.76rem;
}


@media (max-width: 760px) {

    .organizer-contact-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .organizer-contact-card {
        align-items: stretch;
        flex-direction: column;
    }

    .organizer-contact-actions {
        width: 100%;
    }

    .organizer-profile-button,
    .organizer-message-button {
        flex: 1;

        min-width: 0;
    }

}


@media (max-width: 520px) {

    .organizer-contact-actions {
        flex-direction: column;
    }

    .organizer-profile-button,
    .organizer-message-button {
        width: 100%;
    }

}


/* ============================================================
   V36 - CATALOGUE DE SOIREES COMPACT
   ============================================================ */

.events-catalogue {
    padding-bottom: 70px;
}

.events-catalogue-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    padding:
        42px
        0
        26px;
}

.events-catalogue-hero h1 {
    margin-bottom: 7px;
}

.events-catalogue-intro {
    margin: 0;

    color: #94949d !important;

    font-size: 0.96rem !important;
}

.events-catalogue-create-button {
    flex-shrink: 0;
}


/* ============================================================
   V36 - GRILLE
   ============================================================ */

.event-tiles-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 18px;
}

.event-tile {
    min-width: 0;

    overflow: hidden;

    background: #17171c;

    border:
        1px solid #2e2e36;

    border-radius: 15px;

    box-shadow:
        0
        10px
        28px
        rgba(0, 0, 0, 0.26);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.event-tile:hover {
    transform: translateY(-4px);

    border-color: #555560;

    box-shadow:
        0
        18px
        38px
        rgba(0, 0, 0, 0.38);
}

.event-tile-link {
    display: block;

    width: 100%;
    height: 100%;
}


/* ============================================================
   V36 - CARTE CARREE
   ============================================================ */

.event-tile-visual {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 25%,
            #34343c,
            #17171c 64%
        );
}

.event-tile-poster,
.event-tile-placeholder {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.event-tile-poster {
    object-fit: cover;

    transition:
        transform 0.32s ease,
        filter 0.32s ease;
}

.event-tile:hover
.event-tile-poster {
    transform: scale(1.035);

    filter: brightness(0.92);
}

.event-tile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            #4a3b42,
            #232329 55%,
            #17171c
        );

    color: rgba(255, 255, 255, 0.28);

    font-size:
        clamp(
            4rem,
            10vw,
            7rem
        );

    font-weight: bold;
}

.event-tile-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.03) 42%,
            rgba(0, 0, 0, 0.72) 73%,
            rgba(0, 0, 0, 0.94) 100%
        );

    pointer-events: none;
}


/* ============================================================
   V36 - DATE
   ============================================================ */

.event-tile-date {
    position: absolute;

    top: 11px;
    left: 11px;

    min-width: 46px;

    display: grid;

    grid-template-columns:
        auto
        auto;

    align-items: baseline;
    justify-content: center;

    column-gap: 3px;

    padding:
        6px
        8px;

    background:
        rgba(12, 12, 15, 0.82);

    border:
        1px solid rgba(255, 255, 255, 0.19);

    border-radius: 10px;

    backdrop-filter: blur(8px);

    color: #ffffff;

    line-height: 1;
}

.event-tile-date-day {
    font-size: 1rem;
    font-weight: bold;
}

.event-tile-date-month {
    font-size: 0.74rem;
}

.event-tile-date-year {
    grid-column: 1 / -1;

    margin-top: 3px;

    color: #b8b8c0;

    font-size: 0.58rem;

    text-align: center;
}


/* ============================================================
   V36 - PARTICIPANTS
   ============================================================ */

.event-tile-participants {
    position: absolute;

    top: 11px;
    right: 11px;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    min-height: 34px;

    padding:
        6px
        9px;

    background:
        rgba(12, 12, 15, 0.82);

    border:
        1px solid rgba(255, 255, 255, 0.19);

    border-radius: 999px;

    backdrop-filter: blur(8px);

    color: #ffffff;

    font-size: 0.78rem;
}

.event-tile-participants-icon {
    font-size: 0.78rem;
}


/* ============================================================
   V36 - TITRE / LIEU
   ============================================================ */

.event-tile-info {
    position: absolute;

    right: 14px;
    bottom: 13px;
    left: 14px;

    padding-right: 22px;
}

.event-tile-info h2 {
    display: -webkit-box;

    margin:
        0
        0
        4px;

    overflow: hidden;

    color: #ffffff;

    font-size:
        clamp(
            1rem,
            1.7vw,
            1.32rem
        );

    line-height: 1.12;

    text-shadow:
        0
        2px
        12px
        rgba(0, 0, 0, 0.85);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.event-tile-location {
    display: -webkit-box;

    margin: 0;

    overflow: hidden;

    color: #d0d0d6;

    font-size: 0.76rem;

    line-height: 1.2;

    text-shadow:
        0
        2px
        10px
        rgba(0, 0, 0, 0.90);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.event-tile-open {
    position: absolute;

    right: 11px;
    bottom: 11px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 1.5rem;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.event-tile:hover
.event-tile-open {
    color: #ffffff;

    transform: translateX(2px);
}

.event-tiles-empty {
    grid-column: 1 / -1;
}


/* ============================================================
   V36 - TABLETTE
   ============================================================ */

@media (max-width: 1000px) {

    .event-tiles-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 15px;
    }

}


/* ============================================================
   V36 - TELEPHONE
   ============================================================ */

@media (max-width: 700px) {

    .events-index-page
    .container {
        width: 94%;
    }

    .events-catalogue {
        padding-bottom: 34px;
    }

    .events-catalogue-hero {
        align-items: center;

        padding:
            22px
            0
            16px;
    }

    .events-catalogue-hero
    .members-label {
        margin-bottom: 2px;

        font-size: 0.68rem;
    }

    .events-catalogue-hero h1 {
        margin:
            0
            0
            3px;

        font-size: 1.75rem;
    }

    .events-catalogue-intro {
        display: none;
    }

    .events-catalogue-create-button {
        padding:
            8px
            10px;

        font-size: 0.75rem;
    }

    .event-tiles-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .event-tile {
        border-radius: 11px;

        box-shadow:
            0
            7px
            20px
            rgba(0, 0, 0, 0.28);
    }

    .event-tile-date {
        top: 7px;
        left: 7px;

        min-width: 38px;

        padding:
            5px
            6px;

        border-radius: 8px;
    }

    .event-tile-date-day {
        font-size: 0.84rem;
    }

    .event-tile-date-month {
        font-size: 0.63rem;
    }

    .event-tile-date-year {
        font-size: 0.51rem;
    }

    .event-tile-participants {
        top: 7px;
        right: 7px;

        min-height: 28px;

        padding:
            4px
            7px;

        gap: 3px;

        font-size: 0.68rem;
    }

    .event-tile-participants-icon {
        font-size: 0.68rem;
    }

    .event-tile-info {
        right: 9px;
        bottom: 8px;
        left: 9px;

        padding-right: 14px;
    }

    .event-tile-info h2 {
        margin-bottom: 3px;

        font-size:
            clamp(
                0.82rem,
                4vw,
                1rem
            );

        line-height: 1.08;
    }

    .event-tile-location {
        font-size: 0.64rem;
    }

    .event-tile-open {
        right: 7px;
        bottom: 6px;

        font-size: 1rem;
    }

}


/* ============================================================
   V36 - TRES PETITS TELEPHONES
   ============================================================ */

@media (max-width: 360px) {

    .event-tiles-grid {
        gap: 7px;
    }

    .event-tile-date {
        top: 5px;
        left: 5px;

        min-width: 34px;

        padding:
            4px
            5px;
    }

    .event-tile-participants {
        top: 5px;
        right: 5px;

        min-height: 25px;

        padding:
            3px
            6px;
    }

    .event-tile-participants-icon {
        display: none;
    }

    .event-tile-info {
        right: 7px;
        bottom: 6px;
        left: 7px;
    }

    .event-tile-info h2 {
        font-size: 0.78rem;
    }

    .event-tile-location {
        font-size: 0.59rem;
    }

}


/* ============================================================
   V37 - CATALOGUE MEMBRES COMPACT
   ============================================================ */

.members-catalogue {
    padding-bottom: 70px;
}

.members-catalogue-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 26px;

    padding:
        38px
        0
        24px;
}

.members-catalogue-hero h1 {
    margin:
        2px
        0
        5px;
}

.members-catalogue-count {
    margin: 0;

    color: #96969f;

    font-size: 0.90rem;
}

.members-catalogue-count strong {
    color: #ffffff;
}

.members-catalogue-hint {
    max-width: 380px;

    margin: 0;

    color: #85858e;

    font-size: 0.82rem;

    text-align: right;
}


/* ============================================================
   V37 - GRILLE MEMBRES
   ============================================================ */

.member-tiles-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 16px;
}

.member-tile {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background: #17171c;

    border:
        1px solid #2e2e36;

    border-radius: 15px;

    box-shadow:
        0
        10px
        26px
        rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.member-tile:hover {
    transform: translateY(-4px);

    border-color: #555560;

    box-shadow:
        0
        18px
        36px
        rgba(0, 0, 0, 0.38);
}

.member-tile-main-link {
    display: block;

    width: 100%;
    height: 100%;
}


/* ============================================================
   V37 - CARTE CARREE
   ============================================================ */

.member-tile-visual {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            #383840,
            #17171c 64%
        );
}

.member-tile-photo,
.member-tile-placeholder {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.member-tile-photo {
    object-fit: cover;

    transition:
        transform 0.32s ease,
        filter 0.32s ease;
}

.member-tile:hover
.member-tile-photo {
    transform: scale(1.035);

    filter: brightness(0.93);
}

.member-tile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            #4c3d44,
            #25252b 55%,
            #17171c
        );

    color: rgba(255, 255, 255, 0.30);

    font-size:
        clamp(
            3.2rem,
            8vw,
            6rem
        );

    font-weight: bold;
}

.member-tile-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.02) 50%,
            rgba(0, 0, 0, 0.66) 76%,
            rgba(0, 0, 0, 0.94) 100%
        );

    pointer-events: none;
}


/* ============================================================
   V37 - IDENTITE / PRESENCE
   ============================================================ */

.member-tile-info {
    position: absolute;

    right: 13px;
    bottom: 12px;
    left: 13px;

    padding-right: 22px;
}

.member-tile-info h2 {
    display: -webkit-box;

    margin:
        0
        0
        5px;

    overflow: hidden;

    color: #ffffff;

    font-size:
        clamp(
            0.96rem,
            1.45vw,
            1.18rem
        );

    line-height: 1.12;

    text-shadow:
        0
        2px
        12px
        rgba(0, 0, 0, 0.90);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.member-tile-presence {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: #b0b0b8;

    font-size: 0.70rem;

    text-shadow:
        0
        2px
        8px
        rgba(0, 0, 0, 0.90);
}

.member-tile-presence-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    background: #777781;

    border:
        1px solid #a0a0a8;

    border-radius: 50%;

    box-shadow:
        0
        0
        0
        2px
        rgba(119, 119, 129, 0.14);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.member-tile-presence.is-online {
    color: #b8e6c3;
}

.member-tile-presence.is-online
.member-tile-presence-dot {
    background: #48c86b;

    border-color: #8be6a3;

    box-shadow:
        0
        0
        0
        3px
        rgba(72, 200, 107, 0.16),
        0
        0
        11px
        rgba(72, 200, 107, 0.46);
}


/* ============================================================
   V37 - ACTIONS
   ============================================================ */

.member-tile-message {
    position: absolute;

    top: 9px;
    right: 9px;

    z-index: 4;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(18, 18, 22, 0.84);

    border:
        1px solid rgba(255, 255, 255, 0.19);

    border-radius: 50%;

    backdrop-filter: blur(8px);

    color: #f1d9e1;

    font-size: 0.92rem;

    box-shadow:
        0
        5px
        16px
        rgba(0, 0, 0, 0.28);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.member-tile-message:hover {
    transform: scale(1.07);

    background: #3b2b34;

    border-color: #755464;

    color: #ffffff;
}

.member-tile-self-badge {
    position: absolute;

    top: 9px;
    left: 9px;

    padding:
        5px
        8px;

    background:
        rgba(21, 61, 36, 0.84);

    border:
        1px solid rgba(104, 190, 128, 0.44);

    border-radius: 999px;

    backdrop-filter: blur(8px);

    color: #bde7c8;

    font-size: 0.65rem;
    font-weight: bold;
}

.member-tile-open {
    position: absolute;

    right: 9px;
    bottom: 9px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 1.35rem;

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}

.member-tile:hover
.member-tile-open {
    transform: translateX(2px);

    color: #ffffff;
}


/* ============================================================
   V37 - TABLETTE
   ============================================================ */

@media (max-width: 1100px) {

    .member-tiles-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 900px) {

    .member-tiles-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 14px;
    }

}


/* ============================================================
   V37 - TELEPHONE
   ============================================================ */

@media (max-width: 700px) {

    .members-index-page
    .container {
        width: 94%;
    }

    .members-catalogue {
        padding-bottom: 34px;
    }

    .members-catalogue-hero {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;

        padding:
            22px
            0
            16px;
    }

    .members-catalogue-hero
    .members-label {
        margin-bottom: 1px;

        font-size: 0.68rem;
    }

    .members-catalogue-hero h1 {
        margin:
            0
            0
            2px;

        font-size: 1.75rem;
    }

    .members-catalogue-count {
        font-size: 0.78rem;
    }

    .members-catalogue-hint {
        display: none;
    }

    .member-tiles-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .member-tile {
        border-radius: 11px;

        box-shadow:
            0
            7px
            20px
            rgba(0, 0, 0, 0.28);
    }

    .member-tile-info {
        right: 9px;
        bottom: 8px;
        left: 9px;

        padding-right: 13px;
    }

    .member-tile-info h2 {
        margin-bottom: 3px;

        font-size:
            clamp(
                0.82rem,
                4vw,
                0.98rem
            );
    }

    .member-tile-presence {
        gap: 4px;

        font-size: 0.62rem;
    }

    .member-tile-presence-dot {
        width: 7px;
        height: 7px;
    }

    .member-tile-message {
        top: 7px;
        right: 7px;

        width: 30px;
        height: 30px;

        font-size: 0.82rem;
    }

    .member-tile-self-badge {
        top: 7px;
        left: 7px;

        padding:
            4px
            6px;

        font-size: 0.58rem;
    }

    .member-tile-open {
        right: 6px;
        bottom: 6px;

        font-size: 0.95rem;
    }

}


/* ============================================================
   V37 - TRES PETITS TELEPHONES
   ============================================================ */

@media (max-width: 360px) {

    .member-tiles-grid {
        gap: 7px;
    }

    .member-tile-info {
        right: 7px;
        bottom: 6px;
        left: 7px;
    }

    .member-tile-info h2 {
        font-size: 0.76rem;
    }

    .member-tile-presence {
        font-size: 0.57rem;
    }

    .member-tile-message {
        top: 5px;
        right: 5px;

        width: 27px;
        height: 27px;
    }

}


/* ============================================================
   V38 - ETAT LIVE / NOTIFICATIONS
   ============================================================ */

.live-toast-container {
    position: fixed;

    top: 82px;
    right: 18px;

    z-index: 9999;

    width:
        min(
            92vw,
            350px
        );

    display: flex;
    flex-direction: column;

    gap: 9px;

    pointer-events: none;
}

.live-message-toast {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding:
        13px
        15px;

    opacity: 0;

    transform:
        translateY(-8px);

    background:
        rgba(27, 27, 33, 0.96);

    border:
        1px solid #53535f;

    border-radius: 12px;

    box-shadow:
        0
        14px
        38px
        rgba(0, 0, 0, 0.46);

    backdrop-filter:
        blur(10px);

    color: #ffffff;

    pointer-events: auto;

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        border-color 0.18s ease;
}

.live-message-toast.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}

.live-message-toast:hover {
    border-color: #7a5968;
}

.live-message-toast strong {
    color: #f2dce4;

    font-size: 0.88rem;
}

.live-message-toast span {
    overflow: hidden;

    color: #b5b5bd;

    font-size: 0.76rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   V38 - CHAT
   ============================================================ */

.conversation-shell {
    position: relative;
}

.conversation-new-messages {
    position: absolute;

    right: 18px;
    bottom: 118px;

    z-index: 20;

    padding:
        8px
        12px;

    background: #38303a;

    border:
        1px solid #725365;

    border-radius: 999px;

    color: #ffffff;

    font-size: 0.74rem;
    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0
        8px
        24px
        rgba(0, 0, 0, 0.42);
}

.conversation-new-messages[hidden] {
    display: none;
}

.message-compose-status-zone {
    min-width: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        5px
        12px;
}

.message-compose-status {
    color: #74747e;

    font-size: 0.67rem;
}

.message-compose-status.is-error {
    color: #ef9b9b;
}

.message-send-button:disabled {
    opacity: 0.55;

    cursor: wait;

    transform: none;
}

.message-read-state.is-read {
    color: #8bcfa0;
}

#messages-live-region {
    min-height: 80px;
}


/* ============================================================
   V38 - MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .live-toast-container {
        top: 70px;
        right: 4%;
        left: 4%;

        width: auto;
    }

    .conversation-new-messages {
        right: 12px;
        bottom: 112px;

        font-size: 0.68rem;
    }

    .message-compose-status {
        display: none;
    }

}


/* ============================================================
   V39 - GALERIES MEMBRES COMPACTES
   ============================================================ */

.member-gallery-hint {
    margin:
        5px
        0
        0;

    color: #777781;

    font-size: 0.74rem;
}

.member-photo-thumbnail-grid,
.member-profile-gallery.member-photo-thumbnail-grid,
.private-member-gallery.member-photo-thumbnail-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    max-width: none;

    gap: 9px;
}

.member-photo-thumbnail {
    min-width: 0;

    overflow: hidden;

    border-radius: 11px;
}

.member-photo-thumbnail
.public-photo-open,
.member-photo-thumbnail
.private-photo-open {
    display: block;

    width: 100%;
    height: 100%;
}

.member-photo-thumbnail img,
.member-profile-photo.member-photo-thumbnail img,
.private-member-photo.member-photo-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;
}

.member-photo-thumbnail:hover img {
    transform: scale(1.045);
}

.member-photo-thumbnail-grid
.public-photo-zoom-hint,
.member-photo-thumbnail-grid
.private-photo-zoom-hint {
    display: none;
}


/* Un léger repère privé, sans recouvrir la miniature. */

.member-photo-thumbnail-grid-private
.member-photo-thumbnail::after {
    content: "🔒";

    position: absolute;

    right: 6px;
    bottom: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    background:
        rgba(15, 7, 10, 0.76);

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    font-size: 0.66rem;

    pointer-events: none;
}


/* ============================================================
   V39 - TABLETTE
   ============================================================ */

@media (max-width: 1100px) {

    .member-photo-thumbnail-grid,
    .member-profile-gallery.member-photo-thumbnail-grid,
    .private-member-gallery.member-photo-thumbnail-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}


/* ============================================================
   V39 - TELEPHONE
   ============================================================ */

@media (max-width: 700px) {

    .member-profile-section {
        padding:
            17px
            12px;
    }

    .member-photo-thumbnail-grid,
    .member-profile-gallery.member-photo-thumbnail-grid,
    .private-member-gallery.member-photo-thumbnail-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 5px;
    }

    .member-photo-thumbnail {
        border-radius: 7px;
    }

    .member-photo-thumbnail-grid-private
    .member-photo-thumbnail::after {
        right: 4px;
        bottom: 4px;

        width: 20px;
        height: 20px;

        font-size: 0.55rem;
    }

    .member-gallery-hint {
        font-size: 0.68rem;
    }

    .private-photo-lightbox-image-wrap {
        touch-action: pan-y;
    }

}


/* ============================================================
   V39 - PETITS TELEPHONES
   ============================================================ */

@media (max-width: 360px) {

    .member-photo-thumbnail-grid,
    .member-profile-gallery.member-photo-thumbnail-grid,
    .private-member-gallery.member-photo-thumbnail-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 5px;
    }

}


/* ============================================================
   V40 - LISTE DES PARTICIPANTS COMPACTE
   ============================================================ */

.participants-catalogue {
    padding-bottom: 70px;
}

.participants-catalogue-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 26px;

    padding:
        38px
        0
        24px;
}

.participants-catalogue-hero h1 {
    margin:
        2px
        0
        5px;
}

.participants-catalogue-count {
    margin: 0;

    color: #96969f;

    font-size: 0.90rem;
}

.participants-catalogue-count strong {
    color: #ffffff;
}

.participants-catalogue-hint {
    max-width: 390px;

    margin: 0;

    color: #85858e;

    font-size: 0.82rem;

    text-align: right;
}

.participant-tile-badges {
    position: absolute;

    top: 9px;
    left: 9px;

    z-index: 4;

    display: flex;
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;

    max-width:
        calc(
            100%
            - 58px
        );
}

.participant-tile-badge {
    display: inline-flex;
    align-items: center;

    max-width: 100%;

    padding:
        5px
        8px;

    overflow: hidden;

    background:
        rgba(20, 20, 24, 0.84);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 999px;

    backdrop-filter: blur(8px);

    color: #ffffff;

    font-size: 0.61rem;
    font-weight: bold;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-tile-badge.is-organizer {
    background:
        rgba(78, 42, 55, 0.88);

    border-color:
        rgba(196, 120, 147, 0.42);

    color: #f0cad8;
}

.participant-tile-badge.is-self {
    background:
        rgba(21, 61, 36, 0.86);

    border-color:
        rgba(104, 190, 128, 0.44);

    color: #bde7c8;
}


/* ============================================================
   V40 - BOUTON RETOUR GLOBAL
   ============================================================ */

.site-back-button {
    position: fixed;

    left:
        max(
            14px,
            env(safe-area-inset-left)
        );

    bottom:
        max(
            14px,
            env(safe-area-inset-bottom)
        );

    z-index: 1750;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 40px;

    padding:
        8px
        13px;

    background:
        rgba(25, 25, 30, 0.92);

    border:
        1px solid #4a4a54;

    border-radius: 999px;

    backdrop-filter:
        blur(10px);

    color: #eeeeF2;

    font: inherit;

    font-size: 0.77rem;
    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0
        9px
        26px
        rgba(0, 0, 0, 0.38);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        opacity 0.18s ease;
}

.site-back-button:hover,
.site-back-button:focus-visible {
    transform:
        translateY(-2px);

    background: #323239;

    border-color: #70707b;

    outline: none;
}

.site-back-button > span:first-child {
    font-size: 1.05rem;
    line-height: 1;
}

.site-back-button[hidden] {
    display: none;
}

/*
 * Ne jamais faire passer le bouton Retour devant une photo
 * ouverte en plein écran.
 */
body.lightbox-open
.site-back-button {
    opacity: 0;

    pointer-events: none;
}


/* ============================================================
   V40 - MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .participants-index-page
    .container {
        width: 94%;
    }

    .participants-catalogue {
        padding-bottom: 58px;
    }

    .participants-catalogue-hero {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;

        padding:
            22px
            0
            16px;
    }

    .participants-catalogue-hero
    .members-label {
        margin-bottom: 1px;

        font-size: 0.68rem;
    }

    .participants-catalogue-hero h1 {
        margin:
            0
            0
            2px;

        font-size: 1.55rem;
    }

    .participants-catalogue-count {
        font-size: 0.78rem;
    }

    .participants-catalogue-hint {
        display: none;
    }

    .participant-tile-badges {
        top: 7px;
        left: 7px;

        gap: 4px;

        max-width:
            calc(
                100%
                - 50px
            );
    }

    .participant-tile-badge {
        padding:
            4px
            6px;

        font-size: 0.53rem;
    }

    .site-back-button {
        left:
            max(
                9px,
                env(safe-area-inset-left)
            );

        bottom:
            max(
                9px,
                env(safe-area-inset-bottom)
            );

        min-height: 38px;

        padding:
            7px
            11px;

        font-size: 0.71rem;
    }

}


/* ============================================================
   V41 - CHAT : BULLES COMPACTES A LARGEUR NATURELLE
   ============================================================ */

/*
 * La largeur de la bulle suit maintenant réellement le contenu.
 * Un message court donne une petite bulle ; un message long
 * s'élargit jusqu'à la largeur maximale puis passe à la ligne.
 */

.message-bubble-row {
    min-width: 0;
}

.message-bubble-row
.message-bubble {
    width: fit-content;
    inline-size: fit-content;

    min-width: 0;

    flex:
        0
        1
        auto;

    max-width:
        min(
            72%,
            680px
        );

    padding:
        8px
        10px
        6px;

    border-radius: 14px;
}

.message-bubble-row
.message-bubble p {
    width: fit-content;

    max-width: 100%;

    margin: 0;

    line-height: 1.38;
}

.message-bubble-row
.message-meta {
    width: fit-content;

    max-width: 100%;

    margin:
        4px
        0
        0
        auto;

    gap: 6px;

    font-size: 0.62rem;

    line-height: 1.15;

    white-space: nowrap;
}

.conversation-messages {
    gap: 7px;
}


/*
 * Les messages système / demandes d'accès peuvent contenir
 * des contrôles plus larges : ils gardent la largeur disponible.
 */

.message-bubble:has(
    .private-photo-request-message
) {
    width: min(
        100%,
        680px
    );
}


/* ============================================================
   V41 - TELEPHONE
   ============================================================ */

@media (max-width: 700px) {

    .message-bubble-row
    .message-bubble {
        max-width: 84%;

        padding:
            7px
            9px
            5px;

        border-radius: 13px;
    }

    .message-bubble-row
    .message-bubble p {
        line-height: 1.34;
    }

    .message-bubble-row
    .message-meta {
        margin-top: 3px;

        gap: 5px;

        font-size: 0.58rem;
    }

    .conversation-messages {
        gap: 6px;
    }

}


/* ============================================================
   V41 - TRES PETITS TELEPHONES
   ============================================================ */

@media (max-width: 360px) {

    .message-bubble-row
    .message-bubble {
        max-width: 88%;
    }

}


/* ============================================================
   V43 - ORGANISATEUR SUR LES CARTES SOIREES
   ============================================================ */

.event-tile-organizer {
    display: flex;
    align-items: center;

    gap: 4px;

    max-width: 100%;

    margin:
        5px
        0
        0;

    overflow: hidden;

    color: #c9aab5;

    font-size: 0.70rem;

    line-height: 1.15;

    text-shadow:
        0
        2px
        10px
        rgba(0, 0, 0, 0.92);

    white-space: nowrap;
}

.event-tile-organizer > span:first-child {
    flex-shrink: 0;

    color: #d8b9c4;

    font-size: 0.67rem;
}

.event-tile-organizer-label {
    flex-shrink: 0;

    color: #aaa1a6;
}

.event-tile-organizer strong {
    min-width: 0;

    overflow: hidden;

    color: #f0dbe2;

    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   V43 - TELEPHONE
   ============================================================ */

@media (max-width: 700px) {

    .event-tile-organizer {
        gap: 3px;

        margin-top: 3px;

        font-size: 0.59rem;
    }

    .event-tile-organizer > span:first-child {
        font-size: 0.57rem;
    }

}


/* ============================================================
   V43 - TRES PETITS TELEPHONES
   ============================================================ */

@media (max-width: 360px) {

    .event-tile-organizer {
        font-size: 0.54rem;
    }

    .event-tile-organizer-label {
        display: none;
    }

}


/* ============================================================
   V44 - FOOTER JURIDIQUE
   ============================================================ */

.site-legal-footer {
    width: 100%;

    padding:
        16px
        4%
        20px;

    color: #777781;

    font-size: 0.70rem;

    text-align: center;
}

.site-legal-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;
}

.site-legal-footer a {
    color: #96969f;

    text-decoration: none;
}

.site-legal-footer a:hover {
    color: #ffffff;
}

.site-legal-footer strong {
    color: #bd9ca8;
}


/* ============================================================
   V44 - INSCRIPTION / CASES LEGALES
   ============================================================ */

.registration-legal-section {
    display: grid;

    gap: 10px;

    margin-top: 8px;

    padding:
        18px
        18px
        16px;

    background:
        linear-gradient(
            180deg,
            rgba(61, 39, 48, 0.22),
            rgba(24, 24, 29, 0.72)
        );

    border:
        1px solid #46363d;

    border-radius: 14px;
}

.registration-legal-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 2px;
}

.registration-legal-heading h2 {
    margin:
        0
        0
        3px;

    font-size: 1rem;
}

.registration-legal-heading p {
    margin: 0;

    color: #94949d;

    font-size: 0.76rem;
}

.registration-legal-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #3b2931;

    border:
        1px solid #654a55;

    border-radius: 50%;

    color: #f0d8e0;

    font-size: 0.74rem;
    font-weight: bold;
}

.legal-checkbox-row {
    display: grid;

    grid-template-columns:
        20px
        1fr;

    align-items: flex-start;

    gap: 9px;

    padding:
        10px
        11px;

    background:
        rgba(16, 16, 20, 0.58);

    border:
        1px solid #35353d;

    border-radius: 10px;

    color: #d7d7dc;

    font-size: 0.78rem;
    line-height: 1.45;

    cursor: pointer;
}

.legal-checkbox-row:hover {
    border-color: #59505a;
}

.legal-checkbox-row input {
    width: 17px;
    height: 17px;

    margin-top: 2px;

    accent-color: #8f5a6d;
}

.legal-checkbox-row a {
    color: #e0b9c7;

    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-checkbox-sensitive {
    border-color: #5a3b47;
}

.registration-legal-note {
    margin:
        3px
        2px
        0;

    color: #85858e;

    font-size: 0.68rem;
    line-height: 1.45;
}


/* ============================================================
   V44 - DOCUMENTS JURIDIQUES
   ============================================================ */

.legal-page-body {
    min-height: 100vh;

    background: #101014;

    color: #ddddE2;
}

.legal-document {
    max-width: 930px;

    padding:
        42px
        0
        40px;
}

.legal-document-header {
    margin-bottom: 24px;

    padding-bottom: 20px;

    border-bottom:
        1px solid #303038;
}

.legal-document-header h1 {
    margin:
        4px
        0
        7px;

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.7rem
        );
}

.legal-document-header > p:last-child {
    margin: 0;

    color: #85858e;

    font-size: 0.76rem;
}

.legal-section {
    margin:
        0
        0
        14px;

    padding:
        20px
        22px;

    background: #17171c;

    border:
        1px solid #2c2c34;

    border-radius: 14px;
}

.legal-section h2 {
    margin:
        0
        0
        11px;

    color: #f1f1f4;

    font-size: 1.08rem;
}

.legal-section p {
    margin:
        0
        0
        10px;

    color: #b5b5bd;

    line-height: 1.62;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section ul {
    margin:
        9px
        0
        0;

    padding-left: 21px;

    color: #b5b5bd;
}

.legal-section li {
    margin-bottom: 7px;

    line-height: 1.5;
}

.legal-section a {
    color: #ddb6c4;
}

.legal-warning-box,
.legal-config-warning,
.legal-info-box {
    margin-bottom: 14px;

    padding:
        15px
        17px;

    background:
        rgba(62, 39, 47, 0.30);

    border:
        1px solid #654653;

    border-radius: 12px;

    color: #d9bdc7;
}

.legal-warning-box p,
.legal-config-warning p,
.legal-info-box p {
    margin:
        5px
        0
        0;

    color: #bdaeb4;

    font-size: 0.80rem;
    line-height: 1.5;
}

.legal-config-warning {
    background:
        rgba(93, 67, 25, 0.20);

    border-color: #66542f;

    color: #e0ca92;
}

.legal-inline-warning {
    color: #d8bc80 !important;
}

.legal-sensitive-section {
    border-color: #553a45;
}

.legal-data-table-wrap {
    overflow-x: auto;
}

.legal-data-table {
    width: 100%;

    border-collapse: collapse;

    color: #bdbdc5;

    font-size: 0.78rem;
}

.legal-data-table th,
.legal-data-table td {
    padding:
        10px
        11px;

    border:
        1px solid #35353e;

    text-align: left;
    vertical-align: top;
}

.legal-data-table th {
    background: #202026;

    color: #e4e4e8;
}

.legal-acceptance-card {
    max-width: 760px;
}


/* ============================================================
   V44 - MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .legal-document {
        width: 94%;

        padding:
            24px
            0
            28px;
    }

    .legal-section {
        padding:
            16px
            15px;

        border-radius: 11px;
    }

    .legal-section h2 {
        font-size: 1rem;
    }

    .legal-section p,
    .legal-section li {
        font-size: 0.84rem;

        line-height: 1.52;
    }

    .registration-legal-section {
        padding:
            14px
            12px;
    }

    .legal-checkbox-row {
        grid-template-columns:
            19px
            1fr;

        padding:
            9px
            9px;

        font-size: 0.74rem;
    }

    .site-legal-footer {
        padding-bottom:
            calc(
                18px
                + env(safe-area-inset-bottom)
            );
    }

}


/* ============================================================
   V45 - APERÇU INSTANTANÉ DES PHOTOS
   ============================================================ */

.instant-photo-preview-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 9px;

    margin-top: 10px;
}

.instant-photo-preview-grid[hidden],
.instant-photo-preview-grid:empty {
    display: none;
}

.instant-photo-preview-card {
    position: relative;

    margin: 0;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    background: #151519;

    border:
        1px solid #4a3d43;

    border-radius: 11px;

    box-shadow:
        0
        8px
        20px
        rgba(0, 0, 0, 0.20);
}

.instant-photo-preview-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.instant-photo-preview-card.is-private {
    border-color: #67414d;
}

.instant-photo-preview-card.is-poster {
    border-color: #56505a;
}

.instant-photo-pending-badge {
    position: absolute;

    left: 7px;
    bottom: 7px;

    z-index: 3;

    max-width:
        calc(
            100%
            - 42px
        );

    padding:
        5px
        7px;

    overflow: hidden;

    background:
        rgba(20, 20, 24, 0.88);

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 999px;

    backdrop-filter: blur(8px);

    color: #f0dce3;

    font-size: 0.60rem;
    font-weight: bold;

    line-height: 1;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.instant-photo-preview-remove {
    position: absolute;

    top: 6px;
    right: 6px;

    z-index: 4;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background:
        rgba(15, 15, 19, 0.86);

    border:
        1px solid rgba(255, 255, 255, 0.20);

    border-radius: 50%;

    color: #ffffff;

    font-size: 1.25rem;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0
        4px
        12px
        rgba(0, 0, 0, 0.32);
}

.instant-photo-preview-remove:hover {
    background: #4a252d;

    border-color: #8c4c5a;
}

.instant-photo-preview-lock {
    position: absolute;

    top: 7px;
    left: 7px;

    z-index: 3;

    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(28, 11, 17, 0.84);

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    font-size: 0.70rem;
}

.instant-photo-preview-poster-grid {
    grid-template-columns:
        minmax(
            0,
            280px
        );

    justify-content: start;
}

.edit-event-current-poster {
    position: relative;
}

.edit-event-current-poster
.instant-photo-existing-pending,
.edit-event-current-poster
.instant-photo-existing-deletion {
    right: 9px;
    bottom: 9px;
    left: 9px;

    max-width:
        calc(
            100%
            - 18px
        );

    text-align: center;
}

.edit-event-current-poster.has-instant-preview {
    border-color: #7b5261;

    box-shadow:
        0
        0
        0
        2px
        rgba(123, 82, 97, 0.13);
}

.edit-event-current-poster.is-marked-for-removal img {
    opacity: 0.32;

    filter: grayscale(0.7);
}

.edit-event-current-poster
.instant-photo-existing-deletion {
    background:
        rgba(75, 27, 35, 0.90);

    border-color:
        rgba(184, 87, 101, 0.55);

    color: #ffd3d9;
}


/* ============================================================
   V45 - TABLETTE
   ============================================================ */

@media (max-width: 1000px) {

    .instant-photo-preview-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .instant-photo-preview-poster-grid {
        grid-template-columns:
            minmax(
                0,
                260px
            );
    }

}


/* ============================================================
   V45 - TÉLÉPHONE
   ============================================================ */

@media (max-width: 700px) {

    .instant-photo-preview-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 5px;
    }

    .instant-photo-preview-card {
        border-radius: 8px;
    }

    .instant-photo-preview-poster-grid {
        grid-template-columns:
            minmax(
                0,
                220px
            );
    }

    .instant-photo-pending-badge {
        left: 5px;
        bottom: 5px;

        padding:
            4px
            6px;

        font-size: 0.53rem;
    }

    .instant-photo-preview-remove {
        top: 4px;
        right: 4px;

        width: 25px;
        height: 25px;

        font-size: 1.05rem;
    }

    .instant-photo-preview-lock {
        top: 5px;
        left: 5px;

        width: 23px;
        height: 23px;

        font-size: 0.60rem;
    }

}


/* ============================================================
   V45 - TRÈS PETITS TÉLÉPHONES
   ============================================================ */

@media (max-width: 360px) {

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

    .instant-photo-preview-poster-grid {
        grid-template-columns:
            minmax(
                0,
                190px
            );
    }

}


/* ============================================================
   V46 - DEMANDE PHOTOS PRIVÉES SANS OUVRIR LA MESSAGERIE
   ============================================================ */

.private-gallery-request-form {
    margin: 0;
}

.private-gallery-request-button:disabled {
    opacity: 0.66;

    cursor: wait;

    transform: none;
}

.private-gallery-request-pending-button {
    background:
        rgba(70, 56, 30, 0.42);

    border-color: #665a39;

    color: #dfcc92;

    cursor: default;

    pointer-events: none;
}

.private-gallery-request-pending-state {
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    gap: 8px;
}

.private-gallery-request-status-text {
    margin:
        0
        !important;

    color: #888892 !important;

    font-size: 0.74rem;

    line-height: 1.4;
}

.private-gallery-request-inline-status {
    min-height: 0;

    margin-top: 7px;

    color: #8d8d96;

    font-size: 0.72rem;

    line-height: 1.4;
}

.private-gallery-request-inline-status:empty {
    display: none;
}

.private-gallery-request-inline-status.is-success {
    color: #9fd3ac;
}

.private-gallery-request-inline-status.is-error {
    color: #efa1a1;
}


/* Bulle de confirmation locale au demandeur. */

.private-photo-request-toast {
    cursor: default;

    text-decoration: none;
}

.private-photo-request-toast strong {
    color: #bce3c6;
}

.private-photo-request-toast.is-error {
    border-color: #78464d;

    background:
        rgba(57, 27, 32, 0.97);
}

.private-photo-request-toast.is-error strong {
    color: #f1b1b8;
}

.private-photo-request-toast.is-error span {
    color: #d8b4b8;
}


/* ============================================================
   V46 - MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .private-gallery-request-button,
    .private-gallery-request-pending-button {
        width: 100%;

        justify-content: center;
    }

    .private-gallery-request-pending-state {
        width: 100%;
    }

    .private-gallery-request-status-text {
        font-size: 0.70rem;
    }

}


/* ============================================================
   V47 - PRÉFÉRENCE EMAIL NOUVELLES SOIRÉES
   ============================================================ */

.email-notification-setting {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: flex-start;
    gap: 10px;

    margin: 14px 0 18px;
    padding: 13px 14px;

    background: rgba(35, 29, 33, 0.72);
    border: 1px solid #443940;
    border-radius: 11px;

    cursor: pointer;
}

.email-notification-setting:hover {
    border-color: #62515a;
}

.email-notification-setting input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #8f5a6d;
}

.email-notification-setting span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.email-notification-setting strong {
    color: #ededf1;
    font-size: 0.82rem;
}

.email-notification-setting small {
    color: #8e8e97;
    font-size: 0.71rem;
    line-height: 1.4;
}

.email-notification-setting-register {
    margin-top: 2px;
}

@media (max-width: 700px) {

    .email-notification-setting {
        grid-template-columns: 20px 1fr;
        gap: 8px;
        padding: 11px;
    }

    .email-notification-setting strong {
        font-size: 0.77rem;
    }

    .email-notification-setting small {
        font-size: 0.67rem;
    }

}


/* ============================================================
   V48 - CONFIGURATION SMTP DANS L'ADMINISTRATION
   ============================================================ */

.admin-email-status {
    display: inline-flex;
    align-items: center;

    padding:
        7px
        10px;

    border-radius: 999px;

    font-size: 0.70rem;
    font-weight: bold;

    white-space: nowrap;
}

.admin-email-status.is-ready {
    background:
        rgba(38, 82, 51, 0.32);

    border:
        1px solid #446b4c;

    color: #acd5b5;
}

.admin-email-status.is-incomplete {
    background:
        rgba(96, 68, 31, 0.32);

    border:
        1px solid #705a38;

    color: #dec58b;
}

.admin-email-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 20px;

    align-items: start;

    margin-bottom: 22px;
}

.admin-email-intro {
    display: flex;

    gap: 14px;

    padding:
        16px
        17px;

    background: #151519;

    border:
        1px solid #33333b;

    border-radius: 13px;
}

.admin-email-icon {
    width: 42px;
    height: 42px;

    flex:
        0
        0
        42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #292128;

    border:
        1px solid #4d3b47;

    border-radius: 50%;

    font-size: 1.05rem;
}

.admin-email-intro h3 {
    margin:
        0
        0
        7px;

    color: #eeeeF1;
}

.admin-email-intro p {
    margin:
        5px
        0;

    color: #96969f;

    font-size: 0.76rem;

    line-height: 1.48;
}

.admin-email-queue {
    min-width: 160px;

    display: grid;

    gap: 8px;
}

.admin-email-queue > span {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        9px
        11px;

    background: #151519;

    border:
        1px solid #33333b;

    border-radius: 10px;

    color: #9999a2;

    font-size: 0.71rem;
}

.admin-email-queue strong {
    color: #eeeeF1;

    font-size: 0.78rem;
}

.admin-email-queue
.admin-email-config-saved {
    display: block;

    color: #9fc7a8;

    text-align: center;
}

.admin-email-form {
    padding:
        18px;

    background: #121216;

    border:
        1px solid #303038;

    border-radius: 14px;
}

.admin-email-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        15px
        18px;
}

.admin-email-grid > div {
    min-width: 0;
}

.admin-email-grid-full {
    grid-column:
        1
        /
        -1;
}

.admin-email-form label {
    display: block;

    margin-bottom: 7px;

    color: #c6c6cc;

    font-size: 0.75rem;
    font-weight: bold;
}

.admin-email-form input[type="text"],
.admin-email-form input[type="email"],
.admin-email-form input[type="password"],
.admin-email-form input[type="number"],
.admin-email-form input[type="url"] {
    width: 100%;

    box-sizing: border-box;
}

.admin-email-field-help {
    margin:
        6px
        0
        0;

    color: #777780;

    font-size: 0.67rem;

    line-height: 1.42;
}

.admin-email-security-options {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 18px;
}

.admin-email-security-options label {
    display: grid;

    grid-template-columns:
        20px
        1fr;

    gap: 8px;

    margin: 0;

    padding:
        11px
        12px;

    background: #18181d;

    border:
        1px solid #35353e;

    border-radius: 10px;

    cursor: pointer;
}

.admin-email-security-options input {
    width: 17px;
    height: 17px;

    margin-top: 2px;

    accent-color: #8f5a6d;
}

.admin-email-security-options span {
    display: flex;
    flex-direction: column;

    gap: 2px;

    color: #d2d2d7;

    font-size: 0.73rem;
}

.admin-email-security-options small {
    color: #777780;

    font-size: 0.64rem;
    font-weight: normal;

    line-height: 1.35;
}

.admin-email-test-row {
    margin-top: 18px;

    padding-top: 17px;

    border-top:
        1px solid #2d2d34;
}

.admin-email-test-row > div {
    max-width: 460px;
}

.admin-email-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 18px;
}

.admin-secondary-action-button,
.admin-email-test-button {
    min-height: 42px;

    padding:
        9px
        14px;

    border-radius: 9px;

    font: inherit;
    font-size: 0.74rem;
    font-weight: bold;

    cursor: pointer;
}

.admin-secondary-action-button {
    background: #202026;

    border:
        1px solid #414149;

    color: #c7c7cd;
}

.admin-secondary-action-button:hover {
    background: #28282f;
}

.admin-email-test-button {
    background: #49313b;

    border:
        1px solid #704b5b;

    color: #ffffff;
}

.admin-email-test-button:hover {
    background: #593b48;
}

.admin-email-retry-form {
    display: flex;
    justify-content: flex-end;

    margin-top: 11px;
}


/* ============================================================
   V48 - MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .admin-email-layout {
        grid-template-columns:
            1fr;
    }

    .admin-email-queue {
        min-width: 0;

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

    .admin-email-queue
    .admin-email-config-saved {
        grid-column:
            1
            /
            -1;
    }

    .admin-email-grid {
        grid-template-columns:
            1fr;
    }

    .admin-email-grid-full {
        grid-column: auto;
    }

    .admin-email-security-options {
        grid-template-columns:
            1fr;
    }

    .admin-email-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-secondary-action-button,
    .admin-email-test-button {
        width: 100%;
    }

    .admin-email-retry-form {
        display: block;
    }

}


/* ============================================================
   V49 - DIAGNOSTIC DES ENVOIS EMAIL
   ============================================================ */

.admin-email-queue {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

.admin-email-diagnostic {
    margin-top: 22px;

    padding-top: 20px;

    border-top:
        1px solid #303038;
}

.admin-email-diagnostic-heading {
    margin-bottom: 12px;
}

.admin-email-diagnostic-heading h3 {
    margin:
        0
        0
        5px;

    color: #eeeeF1;

    font-size: 0.95rem;
}

.admin-email-diagnostic-heading p {
    margin: 0;

    color: #81818a;

    font-size: 0.70rem;
}

.admin-email-log-list {
    display: grid;

    gap: 7px;
}

.admin-email-log-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        8px
        14px;

    align-items: center;

    padding:
        10px
        11px;

    background: #151519;

    border:
        1px solid #303038;

    border-radius: 10px;
}

.admin-email-log-main {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.admin-email-log-main strong {
    color: #ececf0;

    font-size: 0.76rem;
}

.admin-email-log-main span {
    overflow: hidden;

    color: #a0a0a9;

    font-size: 0.68rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-email-log-main small {
    color: #73737c;

    font-size: 0.64rem;
}

.admin-email-log-meta {
    display: flex;
    align-items: flex-end;
    flex-direction: column;

    gap: 4px;
}

.admin-email-log-meta small {
    color: #73737c;

    font-size: 0.61rem;
}

.admin-email-log-status {
    display: inline-flex;

    padding:
        5px
        8px;

    border-radius: 999px;

    font-size: 0.63rem;
    font-weight: bold;

    white-space: nowrap;
}

.admin-email-log-status.status-sent {
    background:
        rgba(36, 82, 49, 0.34);

    border:
        1px solid #416b49;

    color: #a8d5b1;
}

.admin-email-log-status.status-pending {
    background:
        rgba(86, 67, 30, 0.34);

    border:
        1px solid #6a5935;

    color: #dac48c;
}

.admin-email-log-status.status-failed {
    background:
        rgba(93, 40, 46, 0.35);

    border:
        1px solid #75444b;

    color: #e7a9b0;
}

.admin-email-log-status.status-skipped {
    background:
        rgba(60, 60, 67, 0.42);

    border:
        1px solid #4d4d55;

    color: #aaaab2;
}

.admin-email-log-error {
    grid-column:
        1
        /
        -1;

    padding:
        7px
        8px;

    background:
        rgba(78, 32, 39, 0.27);

    border-radius: 7px;

    color: #c88f97;

    font-size: 0.62rem;

    overflow-wrap: anywhere;
}

@media (max-width: 700px) {

    .admin-email-log-row {
        grid-template-columns:
            1fr;
    }

    .admin-email-log-meta {
        align-items: flex-start;
    }

}


/* ============================================================
   V51 - THEME SOMBRE / CLAIR
   ============================================================ */

/*
   Le thème sombre reste le thème historique et le thème par défaut.
   Le thème clair est appliqué uniquement via :
   html[data-theme="light"]
*/

html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}


/* ============================================================
   V51 - BOUTON DE THEME DANS LA NAVIGATION
   ============================================================ */

.theme-toggle {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        6px
        11px;

    background: #222228;

    border:
        1px solid #34343c;

    border-radius: 20px;

    color: #dedee3;

    font: inherit;
    font-size: 0.86rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: #303038;

    border-color: #555560;

    color: #ffffff;

    transform: translateY(-1px);

    outline: none;
}

.theme-toggle-icon {
    width: 1.05em;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1rem;
    line-height: 1;
}

.theme-toggle-label {
    white-space: nowrap;
}


/* ============================================================
   V51 - THEME CLAIR : BASE
   ============================================================ */

html[data-theme="light"] body {
    background: #f5f2f3;
    color: #242126;
}

html[data-theme="light"] a {
    color: inherit;
}

html[data-theme="light"] .topbar {
    background:
        rgba(
            252,
            250,
            251,
            0.96
        );

    border-bottom-color: #ddd6d9;

    box-shadow:
        0
        8px
        24px
        rgba(
            58,
            45,
            50,
            0.07
        );

    backdrop-filter: blur(14px);
}

html[data-theme="light"] .logo {
    color: #242126;
}

html[data-theme="light"] .topbar nav a {
    color: #4c454a;
}

html[data-theme="light"] .topbar nav a:hover {
    color: #171519;
}

html[data-theme="light"] .user-menu-link,
html[data-theme="light"] .theme-toggle {
    background: #eee8ea;

    border-color: #d7cdd1;

    color: #332d31 !important;
}

html[data-theme="light"] .user-menu-link:hover,
html[data-theme="light"] .user-menu-link.active,
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible {
    background: #e2d9dc;

    border-color: #c8b9bf;

    color: #171519 !important;
}

html[data-theme="light"] .members-menu-link,
html[data-theme="light"] .messages-menu-link {
    color: #4c454a !important;
}

html[data-theme="light"] .members-menu-link:hover,
html[data-theme="light"] .members-menu-link.active,
html[data-theme="light"] .messages-menu-link:hover,
html[data-theme="light"] .messages-menu-link.active {
    background: #e8e1e4;

    color: #1e1a1d !important;
}


/* ============================================================
   V51 - TYPOGRAPHIE / TEXTES
   ============================================================ */

html[data-theme="light"] .hero p,
html[data-theme="light"] .muted,
html[data-theme="light"] .profile-label,
html[data-theme="light"] .members-label,
html[data-theme="light"] .member-profile-label,
html[data-theme="light"] .event-date,
html[data-theme="light"] .location,
html[data-theme="light"] .event-description,
html[data-theme="light"] .participant-meta,
html[data-theme="light"] .member-card-meta,
html[data-theme="light"] .member-profile-meta,
html[data-theme="light"] .conversation-preview-meta,
html[data-theme="light"] .conversation-preview-date,
html[data-theme="light"] .conversation-message-time,
html[data-theme="light"] .message-time,
html[data-theme="light"] .password-help,
html[data-theme="light"] .photo-help,
html[data-theme="light"] .form-help,
html[data-theme="light"] small {
    color: #6e666b;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] strong {
    color: #252126;
}


/* ============================================================
   V51 - CARTES / PANNEAUX GENERIQUES
   ============================================================ */

html[data-theme="light"] .event-card,
html[data-theme="light"] .event-tile,
html[data-theme="light"] .participation-box,
html[data-theme="light"] .participant,
html[data-theme="light"] .participant-card,
html[data-theme="light"] .organizer-contact,
html[data-theme="light"] .profile-panel,
html[data-theme="light"] .member-card,
html[data-theme="light"] .member-tile,
html[data-theme="light"] .member-profile-stats > div,
html[data-theme="light"] .member-profile-description,
html[data-theme="light"] .member-profile-photo,
html[data-theme="light"] .member-event-row,
html[data-theme="light"] .empty-events,
html[data-theme="light"] .empty-participants,
html[data-theme="light"] .empty-members,
html[data-theme="light"] .conversation-preview,
html[data-theme="light"] .messaging-empty,
html[data-theme="light"] .conversation-shell,
html[data-theme="light"] .private-photo-card,
html[data-theme="light"] .private-access-grant,
html[data-theme="light"] .private-access-current,
html[data-theme="light"] .private-access-row,
html[data-theme="light"] .private-access-empty,
html[data-theme="light"] .private-member-photo,
html[data-theme="light"] .registration-photo-section,
html[data-theme="light"] .private-gallery-locked-content,
html[data-theme="light"] .organizer-contact-card {
    background: #fffdfd;

    border-color: #dfd8db;

    color: #2a2529;

    box-shadow:
        0
        12px
        34px
        rgba(
            72,
            54,
            62,
            0.07
        );
}

html[data-theme="light"] .event-card:hover,
html[data-theme="light"] .member-card-link:hover .member-card,
html[data-theme="light"] .member-card-shell:hover,
html[data-theme="light"] .conversation-preview:hover,
html[data-theme="light"] .member-event-row:hover,
html[data-theme="light"] .participant-card-link:hover .participant-card {
    background: #ffffff;

    border-color: #cfc3c8;

    box-shadow:
        0
        18px
        42px
        rgba(
            72,
            54,
            62,
            0.11
        );
}


/* ============================================================
   V51 - SOIREES / MEMBRES COMPACTS
   ============================================================ */

html[data-theme="light"] .event-tile,
html[data-theme="light"] .member-tile {
    border-color: #d9d0d4;
}

html[data-theme="light"] .event-tile-visual,
html[data-theme="light"] .member-tile-visual {
    background:
        radial-gradient(
            circle at 50% 25%,
            #eee8eb,
            #dcd3d7 64%
        );
}

/*
   Les dégradés sombres au bas des photos restent volontairement
   foncés afin de conserver la lisibilité des textes blancs
   superposés aux affiches et avatars.
*/

html[data-theme="light"] .event-tile-date,
html[data-theme="light"] .event-tile-participants,
html[data-theme="light"] .member-tile-message {
    background:
        rgba(
            255,
            255,
            255,
            0.88
        );

    border-color:
        rgba(
            70,
            55,
            61,
            0.14
        );

    color: #282227;
}

html[data-theme="light"] .member-tile-message:hover {
    background: #f0e6ea;
}


/* ============================================================
   V51 - FORMULAIRES
   ============================================================ */

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="file"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .profile-type-select,
html[data-theme="light"] .private-access-form select,
html[data-theme="light"] .private-photo-request-grant-form select,
html[data-theme="light"] .message-compose-form textarea {
    background: #ffffff;

    border-color: #d5cbcf;

    color: #292429;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #9a9095;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
    border-color: #9a7281;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            143,
            90,
            109,
            0.12
        );

    outline: none;
}

html[data-theme="light"] .profile-type-select option {
    background: #ffffff;

    color: #292429;
}

html[data-theme="light"] .password-toggle:hover,
html[data-theme="light"] .password-toggle:focus-visible,
html[data-theme="light"] .password-toggle.is-visible {
    background:
        rgba(
            76,
            59,
            66,
            0.07
        );
}


/* ============================================================
   V51 - BOUTONS
   ============================================================ */

html[data-theme="light"] .button {
    background: #2b2529;

    color: #ffffff;

    border-color: #2b2529;
}

html[data-theme="light"] .button:hover {
    background: #171418;

    border-color: #171418;
}

html[data-theme="light"] .button-secondary {
    background: #e7f1e9;

    border-color: #bdd3c2;

    color: #284f32;
}

html[data-theme="light"] .button-secondary:hover {
    background: #d8e9dc;
}

html[data-theme="light"] .button-edit,
html[data-theme="light"] .create-event-cancel,
html[data-theme="light"] .member-profile-action,
html[data-theme="light"] .admin-secondary-action-button {
    background: #eee8ea;

    border-color: #d6cbcf;

    color: #393237;
}

html[data-theme="light"] .button-edit:hover,
html[data-theme="light"] .create-event-cancel:hover,
html[data-theme="light"] .member-profile-action:hover {
    background: #e1d8dc;
}


/* ============================================================
   V51 - PROFIL / GALERIES
   ============================================================ */

html[data-theme="light"] .profile-main-avatar,
html[data-theme="light"] .participant-avatar,
html[data-theme="light"] .participant-big-avatar,
html[data-theme="light"] .member-avatar,
html[data-theme="light"] .member-profile-avatar,
html[data-theme="light"] .conversation-avatar,
html[data-theme="light"] .conversation-header-avatar,
html[data-theme="light"] .organizer-contact-avatar,
html[data-theme="light"] .profile-no-photo-avatar {
    background: #e4dce0;

    border-color: #cfc2c7;

    color: #4a3e44;
}

html[data-theme="light"] .profile-photo-counter,
html[data-theme="light"] .profile-photo-limit,
html[data-theme="light"] .member-section-count,
html[data-theme="light"] .member-event-date-box,
html[data-theme="light"] .profile-type-badge {
    background: #eee8ea;

    border-color: #d7ccd0;

    color: #51464c;
}

html[data-theme="light"] .profile-photo-card {
    background: #f5f0f2;

    border-color: #d9cfd3;
}

html[data-theme="light"] .profile-private-panel,
html[data-theme="light"] .private-photo-section,
html[data-theme="light"] .private-photo-add,
html[data-theme="light"] .private-member-gallery-section,
html[data-theme="light"] .private-gallery-locked {
    background:
        linear-gradient(
            180deg,
            #fffafa,
            #f4ecef
        );

    border-color: #dfcdd4;
}

html[data-theme="light"] .private-photo-count,
html[data-theme="light"] .private-count-badge,
html[data-theme="light"] .private-gallery-locked-icon {
    background: #eee0e5;

    color: #654756;
}


/* ============================================================
   V51 - MESSAGERIE
   ============================================================ */

html[data-theme="light"] .conversation-preview.has-unread {
    background:
        linear-gradient(
            90deg,
            rgba(
                159,
                99,
                121,
                0.14
            ),
            #fffdfd 34%
        );

    border-color: #d8c6cd;
}

html[data-theme="light"] .conversation-header {
    background:
        linear-gradient(
            90deg,
            #f0e9ec,
            #fffdfd
        );

    border-color: #ddd3d7;
}

html[data-theme="light"] .conversation-messages {
    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(
                155,
                115,
                132,
                0.11
            ),
            transparent 45%
        ),
        #f7f3f4;
}

html[data-theme="light"] .message-compose-form {
    background: #fffdfd;

    border-color: #ddd3d7;
}

html[data-theme="light"] .is-received .message-bubble {
    background: #ffffff;

    border-color: #d9d0d4;

    color: #2d282c;

    box-shadow:
        0
        5px
        16px
        rgba(
            64,
            48,
            55,
            0.06
        );
}

html[data-theme="light"] .is-sent .message-bubble {
    background: #eadce2;

    border-color: #d1bac4;

    color: #382b31;
}

html[data-theme="light"] .conversation-first-icon,
html[data-theme="light"] .messaging-empty-icon {
    background: #eee6e9;

    color: #5e4a53;
}


/* ============================================================
   V51 - STATUTS / BADGES
   ============================================================ */

html[data-theme="light"] .event-status-badge,
html[data-theme="light"] .current-user-badge,
html[data-theme="light"] .presence-indicator.is-online,
html[data-theme="light"] .photo-privacy-public {
    background: #e4f1e7;

    border-color: #bfd6c4;

    color: #315d3b;
}

html[data-theme="light"] .photo-privacy-private,
html[data-theme="light"] .event-organizer-message-shortcut,
html[data-theme="light"] .member-message-action {
    background: #efe3e8;

    border-color: #d9c2cc;

    color: #684b58;
}

html[data-theme="light"] .presence-indicator {
    background:
        rgba(
            56,
            47,
            51,
            0.04
        );

    border-color: #d9d1d4;

    color: #6b6267;
}

html[data-theme="light"] .flash {
    background: #fff8e8;

    border-color: #ead7a8;

    color: #544522;
}


/* ============================================================
   V51 - PAGES AUTHENTIFICATION / CREATION
   ============================================================ */

html[data-theme="light"] .auth-body,
html[data-theme="light"] .create-event-body {
    background:
        radial-gradient(
            circle at 50% 0%,
            #ffffff 0,
            #f7f2f4 42%,
            #eee7ea 100%
        );

    color: #2b262a;
}

html[data-theme="light"] .auth-card,
html[data-theme="light"] .create-event-card {
    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.98
            ),
            rgba(
                249,
                246,
                247,
                0.98
            )
        );

    border-color: #dcd1d5;

    box-shadow:
        0
        22px
        60px
        rgba(
            71,
            51,
            59,
            0.10
        );
}

html[data-theme="light"] .auth-symbol,
html[data-theme="light"] .create-event-icon {
    background: #eee6e9;

    border-color: #d8cbd0;

    color: #5c4650;
}

html[data-theme="light"] .auth-form input[type="text"],
html[data-theme="light"] .auth-form input[type="email"],
html[data-theme="light"] .auth-form input[type="password"],
html[data-theme="light"] .auth-form input[type="file"],
html[data-theme="light"] .auth-form textarea,
html[data-theme="light"] .create-event-form input[type="text"],
html[data-theme="light"] .create-event-form input[type="date"],
html[data-theme="light"] .create-event-form input[type="file"],
html[data-theme="light"] .create-event-form textarea,
html[data-theme="light"] .auth-file-zone,
html[data-theme="light"] .create-event-file-zone {
    background: #ffffff;

    border-color: #d7ccd0;

    color: #2b262a;
}


/* ============================================================
   V51 - PAGES LEGALES
   ============================================================ */

html[data-theme="light"] .legal-card,
html[data-theme="light"] .legal-panel,
html[data-theme="light"] .legal-section,
html[data-theme="light"] .legal-acceptance-card {
    background: #fffdfd;

    border-color: #ddd4d7;

    color: #302a2e;

    box-shadow:
        0
        12px
        32px
        rgba(
            66,
            49,
            56,
            0.06
        );
}


/* ============================================================
   V51 - SCROLLBAR
   ============================================================ */

html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #eee8ea;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c4b7bc;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #ab9ba1;
}


/* ============================================================
   V51 - LANDING
   ============================================================ */

/*
   La page d'entrée conserve volontairement son fond photo sombre
   et son contraste historique. Le thème choisi est néanmoins
   mémorisé et sera appliqué dès l'entrée dans l'espace membres.
*/


/* ============================================================
   V51 - MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .theme-toggle {
        min-height: 32px;

        padding:
            5px
            9px;

        font-size: 0.78rem;
    }

    .theme-toggle-label {
        display: none;
    }

    .theme-toggle-icon {
        width: 1.15em;
    }

}


/* ============================================================
   V52 - THEME CLAIR : CORRECTION COMPLETE DES CONTRASTES
   ============================================================ */

/*
   Palette V52.
   Les couleurs de texte sont volontairement plus foncées que V51
   afin de conserver une lecture confortable sur les fonds blancs,
   roses/gris très clairs et panneaux secondaires.
*/

html[data-theme="light"] {
    --light-bg: #f4f1f2;
    --light-surface: #fffdfd;
    --light-surface-strong: #ffffff;
    --light-surface-soft: #eee8ea;
    --light-surface-muted: #e7dfe2;

    --light-border: #d2c7cb;
    --light-border-strong: #bcaeb4;

    --light-text: #211d20;
    --light-text-secondary: #50484d;
    --light-text-muted: #62595e;
    --light-text-soft: #6b6166;

    --light-accent: #70485a;
    --light-accent-dark: #523442;
    --light-accent-soft: #efe2e7;

    --light-success-bg: #e4f1e7;
    --light-success-border: #a9c8b0;
    --light-success-text: #24512f;

    --light-warning-bg: #fff4d9;
    --light-warning-border: #dac174;
    --light-warning-text: #634c10;

    --light-danger-bg: #fae7e9;
    --light-danger-border: #d7a7ad;
    --light-danger-text: #782b35;
}


/* ============================================================
   V52 - TEXTE GENERAL
   ============================================================ */

html[data-theme="light"] body:not(.landing-body) {
    color: var(--light-text);
}

html[data-theme="light"] body:not(.landing-body) p,
html[data-theme="light"] body:not(.landing-body) li,
html[data-theme="light"] body:not(.landing-body) td,
html[data-theme="light"] body:not(.landing-body) th,
html[data-theme="light"] body:not(.landing-body) label {
    color: var(--light-text-secondary);
}

html[data-theme="light"] body:not(.landing-body) h1,
html[data-theme="light"] body:not(.landing-body) h2,
html[data-theme="light"] body:not(.landing-body) h3,
html[data-theme="light"] body:not(.landing-body) h4,
html[data-theme="light"] body:not(.landing-body) h5,
html[data-theme="light"] body:not(.landing-body) h6,
html[data-theme="light"] body:not(.landing-body) strong {
    color: var(--light-text);
}

html[data-theme="light"] body:not(.landing-body) .muted,
html[data-theme="light"] body:not(.landing-body) small,
html[data-theme="light"] body:not(.landing-body) .form-help,
html[data-theme="light"] body:not(.landing-body) .profile-field-help,
html[data-theme="light"] body:not(.landing-body) .create-event-help,
html[data-theme="light"] body:not(.landing-body) .photo-help,
html[data-theme="light"] body:not(.landing-body) .password-help,
html[data-theme="light"] body:not(.landing-body) .character-counter {
    color: var(--light-text-muted);
}

html[data-theme="light"] body:not(.landing-body) a:not(.button):not(.event-tile-link):not(.member-tile-main-link) {
    text-decoration-color:
        rgba(
            82,
            52,
            66,
            0.34
        );
}


/* ============================================================
   V52 - NAVIGATION
   ============================================================ */

html[data-theme="light"] .topbar {
    color: var(--light-text);
}

html[data-theme="light"] .logo {
    color: #181518;
}

html[data-theme="light"] .topbar nav a {
    color: #3f383c;
    opacity: 1;
}

html[data-theme="light"] .topbar nav a:hover,
html[data-theme="light"] .topbar nav a:focus-visible {
    color: #151215;
}

html[data-theme="light"] .user-menu-link,
html[data-theme="light"] .members-menu-link,
html[data-theme="light"] .messages-menu-link,
html[data-theme="light"] .theme-toggle {
    color: #332d31 !important;
}

html[data-theme="light"] .user-menu-link.active,
html[data-theme="light"] .members-menu-link.active,
html[data-theme="light"] .messages-menu-link.active {
    color: #171417 !important;
}

html[data-theme="light"] .nav-message-badge {
    background: #9e293b;
    color: #ffffff;
    border-color: #841f30;
}


/* ============================================================
   V52 - LABELS / KICKERS / PETITS TEXTES
   ============================================================ */

html[data-theme="light"] .members-label,
html[data-theme="light"] .profile-label,
html[data-theme="light"] .member-profile-label,
html[data-theme="light"] .auth-kicker,
html[data-theme="light"] .create-event-kicker,
html[data-theme="light"] .private-label,
html[data-theme="light"] .photo-privacy-title,
html[data-theme="light"] .member-profile-section-title {
    color: var(--light-accent-dark);
}

html[data-theme="light"] .events-catalogue-intro,
html[data-theme="light"] .auth-subtitle,
html[data-theme="light"] .create-event-subtitle,
html[data-theme="light"] .member-gallery-hint,
html[data-theme="light"] .photo-selection-info,
html[data-theme="light"] .profile-photo-footer {
    color: var(--light-text-secondary);
}


/* ============================================================
   V52 - FLASH / ETATS
   ============================================================ */

html[data-theme="light"] .flash,
html[data-theme="light"] .auth-flash,
html[data-theme="light"] .create-event-flash {
    background: var(--light-warning-bg);
    border-color: var(--light-warning-border);
    color: var(--light-warning-text);
}

html[data-theme="light"] .flash *,
html[data-theme="light"] .auth-flash *,
html[data-theme="light"] .create-event-flash * {
    color: inherit;
}


/* ============================================================
   V52 - FORMULAIRES
   ============================================================ */

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="file"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: #ffffff;
    border-color: var(--light-border-strong);
    color: #211d20;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #756b70;
    opacity: 1;
}

html[data-theme="light"] .create-event-form,
html[data-theme="light"] .auth-form,
html[data-theme="light"] .profile-panel form {
    color: var(--light-text);
}

html[data-theme="light"] .create-event-form label,
html[data-theme="light"] .auth-form label,
html[data-theme="light"] .profile-panel label {
    color: #413a3e;
}

html[data-theme="light"] .password-toggle {
    color: #4f464b;
}

html[data-theme="light"] .password-toggle:hover,
html[data-theme="light"] .password-toggle:focus-visible,
html[data-theme="light"] .password-toggle.is-visible {
    color: #241f22;
}

html[data-theme="light"] .password-match-info {
    color: var(--light-text-secondary);
}

html[data-theme="light"] .password-match-info.is-valid {
    color: var(--light-success-text);
}

html[data-theme="light"] .password-match-info.is-invalid {
    color: var(--light-danger-text);
}


/* ============================================================
   V52 - AUTHENTIFICATION
   ============================================================ */

html[data-theme="light"] .auth-card,
html[data-theme="light"] .auth-card-header,
html[data-theme="light"] .auth-card-footer {
    color: var(--light-text);
}

html[data-theme="light"] .auth-inline-link {
    color: var(--light-accent-dark);
    font-weight: 700;
}

html[data-theme="light"] .auth-inline-link:hover {
    color: #37232d;
}

html[data-theme="light"] .auth-submit,
html[data-theme="light"] .create-event-submit {
    background: #2c262a;
    border-color: #2c262a;
    color: #ffffff;
}

html[data-theme="light"] .auth-submit:hover,
html[data-theme="light"] .create-event-submit:hover {
    background: #171417;
    border-color: #171417;
    color: #ffffff;
}


/* ============================================================
   V52 - CREATION / MODIFICATION D'UNE SOIREE
   ============================================================ */

html[data-theme="light"] .create-event-card,
html[data-theme="light"] .create-event-header,
html[data-theme="light"] .create-event-grid,
html[data-theme="light"] .create-event-field,
html[data-theme="light"] .create-event-field-full {
    color: var(--light-text);
}

html[data-theme="light"] .create-event-cancel,
html[data-theme="light"] .back-link,
html[data-theme="light"] .button-edit {
    background: #eee8ea;
    border-color: #cfc3c8;
    color: #3a3237;
}

html[data-theme="light"] .create-event-cancel:hover,
html[data-theme="light"] .back-link:hover,
html[data-theme="light"] .button-edit:hover {
    background: #dfd5d9;
    border-color: #bdaeb4;
    color: #211c20;
}

html[data-theme="light"] .date-picker-button {
    background:
        linear-gradient(
            180deg,
            #eee7ea,
            #ddd3d7
        );

    border-color: #c6b9be;
    color: #352e32;
}

html[data-theme="light"] .date-picker-button:hover,
html[data-theme="light"] .date-picker-button:focus-visible {
    background: #d6cbd0;
    border-color: #b5a6ac;
    color: #1e1a1d;
}

html[data-theme="light"] .edit-event-current-poster {
    background: #f5eff1;
    border-color: #d7cbd0;
    color: #5f2f3a;
}

html[data-theme="light"] .edit-event-remove-poster {
    background: var(--light-danger-bg);
    border-color: var(--light-danger-border);
    color: var(--light-danger-text);
}

html[data-theme="light"] .edit-event-no-poster {
    background: #eee8ea;
    border-color: #d2c6cb;
    color: var(--light-text-secondary);
}


/* ============================================================
   V52 - CARTES SOIREES
   ============================================================ */

html[data-theme="light"] .event-card,
html[data-theme="light"] .event-content,
html[data-theme="light"] .participation-box,
html[data-theme="light"] .organizer-contact,
html[data-theme="light"] .organizer-contact-card {
    color: var(--light-text);
}

html[data-theme="light"] .event-date,
html[data-theme="light"] .location,
html[data-theme="light"] .event-description,
html[data-theme="light"] .participant-count,
html[data-theme="light"] .organizer,
html[data-theme="light"] .event-tile-location {
    color: var(--light-text-secondary);
}

html[data-theme="light"] .event-organizer-profile-link,
html[data-theme="light"] .event-organizer-message-shortcut {
    color: var(--light-accent-dark);
}

html[data-theme="light"] .event-organizer-profile-link:hover {
    color: #2f1f27;
}

html[data-theme="light"] .event-organizer-message-shortcut {
    background: #eee2e7;
    border-color: #d3bdc6;
}

html[data-theme="light"] .event-organizer-message-shortcut:hover {
    background: #dfccd3;
    color: #37232d;
}

/*
   Ces textes sont superposés sur le dégradé sombre des affiches :
   ils doivent donc rester blancs même dans le thème clair.
*/
html[data-theme="light"] .event-tile-info,
html[data-theme="light"] .event-tile-info *,
html[data-theme="light"] .event-tile-open,
html[data-theme="light"] .event-tile-organizer {
    color: #ffffff;
}

html[data-theme="light"] .event-tile-organizer {
    text-shadow:
        0
        1px
        3px
        rgba(
            0,
            0,
            0,
            0.92
        );
}

html[data-theme="light"] .event-tile-date,
html[data-theme="light"] .event-tile-participants {
    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    color: #211d20;
}


/* ============================================================
   V52 - PARTICIPANTS
   ============================================================ */

html[data-theme="light"] .participant,
html[data-theme="light"] .participant-card,
html[data-theme="light"] .participant-link,
html[data-theme="light"] .participant-card-link {
    color: var(--light-text);
}

html[data-theme="light"] .participant-meta,
html[data-theme="light"] .participant-count {
    color: var(--light-text-secondary);
}

html[data-theme="light"] .participant-mini-arrow,
html[data-theme="light"] .participants-view-all {
    color: var(--light-accent-dark);
}

html[data-theme="light"] .participants-catalogue-count,
html[data-theme="light"] .participant-tile-badge {
    background: #eee8ea;
    border-color: #d0c3c8;
    color: #44383e;
}

html[data-theme="light"] .participant-tile-badge.is-self,
html[data-theme="light"] .participant-tile-badge.is-organizer {
    color: #4a3340;
}


/* ============================================================
   V52 - PROFIL
   ============================================================ */

html[data-theme="light"] .profile-panel,
html[data-theme="light"] .profile-main-avatar,
html[data-theme="light"] .profile-type-block,
html[data-theme="light"] .profile-description-block {
    color: var(--light-text);
}

html[data-theme="light"] .profile-type-badge {
    background: #e7dfe2;
    border-color: #cfc1c6;
    color: #493d43;
}

html[data-theme="light"] .profile-photo-counter,
html[data-theme="light"] .profile-photo-limit {
    background: #eee8ea;
    border-color: #d3c7cb;
    color: #50464b;
}

html[data-theme="light"] .email-notification-setting {
    background: #f6f1f3;
    border-color: #d4c9cd;
    color: var(--light-text);
}

html[data-theme="light"] .email-notification-setting strong {
    color: #292327;
}

html[data-theme="light"] .email-notification-setting small {
    color: #5e555a;
}

html[data-theme="light"] .photo-privacy-public {
    background: var(--light-success-bg);
    border-color: var(--light-success-border);
    color: var(--light-success-text);
}

html[data-theme="light"] .photo-privacy-private {
    background: #f4e3e8;
    border-color: #d7b8c2;
    color: #704052;
}

html[data-theme="light"] .photo-main-button,
html[data-theme="light"] .photo-main-current {
    background: #e4f1e7;
    border-color: #a9c8b0;
    color: #285734;
}

html[data-theme="light"] .photo-main-button:hover {
    background: #d4e8d9;
    color: #1f492a;
}

html[data-theme="light"] .photo-delete-button {
    color: #8b3540;
}

html[data-theme="light"] .photo-delete-button:hover {
    background: #f4dde0;
    color: #6e232d;
}


/* ============================================================
   V52 - MEMBRES
   ============================================================ */

html[data-theme="light"] .member-card,
html[data-theme="light"] .member-profile-description,
html[data-theme="light"] .member-profile-stats > div,
html[data-theme="light"] .member-event-row,
html[data-theme="light"] .member-profile-empty {
    color: var(--light-text);
}

html[data-theme="light"] .member-profile-empty {
    background: #f4eff1;
    border-color: #d9cfd3;
    color: var(--light-text-secondary);
}

html[data-theme="light"] .member-event-date-box,
html[data-theme="light"] .member-section-count,
html[data-theme="light"] .members-catalogue-count {
    background: #eee8ea;
    border-color: #d0c4c8;
    color: #493f44;
}

html[data-theme="light"] .member-event-arrow,
html[data-theme="light"] .member-profile-action {
    color: var(--light-accent-dark);
}

html[data-theme="light"] .member-message-action {
    background: #eee2e7;
    border-color: #d3bdc6;
    color: #5c3848;
}

html[data-theme="light"] .member-message-action:hover {
    background: #dfccd3;
    color: #37232d;
}

/*
   Comme les cartes de soirées, les informations principales
   des cartes membres reposent sur un voile sombre au-dessus de la photo.
*/
html[data-theme="light"] .member-tile-info,
html[data-theme="light"] .member-tile-info *,
html[data-theme="light"] .member-tile-open {
    color: #ffffff;
}

html[data-theme="light"] .member-tile-presence {
    color: #f5fff7;
    text-shadow:
        0
        1px
        3px
        rgba(
            0,
            0,
            0,
            0.88
        );
}

html[data-theme="light"] .member-tile-self-badge {
    background:
        rgba(
            22,
            83,
            40,
            0.88
        );

    color: #ffffff;
}


/* ============================================================
   V52 - GALERIES PUBLIQUES / PRIVEES
   ============================================================ */

html[data-theme="light"] .profile-private-panel,
html[data-theme="light"] .private-photo-section,
html[data-theme="light"] .private-photo-add,
html[data-theme="light"] .private-gallery-locked,
html[data-theme="light"] .private-gallery-locked-content,
html[data-theme="light"] .private-access-grant,
html[data-theme="light"] .private-access-current,
html[data-theme="light"] .private-access-row,
html[data-theme="light"] .private-access-empty {
    color: var(--light-text);
}

html[data-theme="light"] .private-photo-count,
html[data-theme="light"] .private-count-badge,
html[data-theme="light"] .private-lock-icon,
html[data-theme="light"] .private-gallery-locked-icon {
    color: #654354;
}

html[data-theme="light"] .private-gallery-request-inline-status {
    color: #285734;
}

html[data-theme="light"] .private-gallery-request-pending-button {
    background: var(--light-warning-bg);
    border-color: var(--light-warning-border);
    color: var(--light-warning-text);
}

html[data-theme="light"] .private-photo-request-heading {
    color: #563845;
}

html[data-theme="light"] .private-photo-request-status.is-pending {
    background: var(--light-warning-bg);
    border-color: var(--light-warning-border);
    color: var(--light-warning-text);
}

html[data-theme="light"] .private-photo-request-status.is-granted {
    background: var(--light-success-bg);
    border-color: var(--light-success-border);
    color: var(--light-success-text);
}

html[data-theme="light"] .private-photo-request-status.is-declined {
    background: var(--light-danger-bg);
    border-color: var(--light-danger-border);
    color: var(--light-danger-text);
}

html[data-theme="light"] .private-photo-request-accept {
    background: #27623a;
    border-color: #1e502e;
    color: #ffffff;
}

html[data-theme="light"] .private-photo-request-decline {
    color: #7a303b;
}

/*
   Les légendes/commandes superposées directement sur les photos
   et la lightbox restent blanches sur fond sombre.
*/
html[data-theme="light"] .main-photo-badge,
html[data-theme="light"] .public-photo-zoom-hint,
html[data-theme="light"] .private-photo-zoom-hint,
html[data-theme="light"] .private-photo-lightbox-dialog,
html[data-theme="light"] .private-photo-lightbox-dialog *,
html[data-theme="light"] .private-photo-lightbox-close,
html[data-theme="light"] .private-photo-lightbox-nav,
html[data-theme="light"] .private-photo-lightbox-counter,
html[data-theme="light"] .private-photo-lock,
html[data-theme="light"] .member-profile-photo figcaption,
html[data-theme="light"] .private-member-photo figcaption {
    color: #ffffff;
}


/* ============================================================
   V52 - MESSAGERIE
   ============================================================ */

html[data-theme="light"] .conversation-preview,
html[data-theme="light"] .conversation-shell,
html[data-theme="light"] .conversation-header,
html[data-theme="light"] .message-compose-form {
    color: var(--light-text);
}

html[data-theme="light"] .conversation-member,
html[data-theme="light"] .conversation-member-line,
html[data-theme="light"] .conversation-header-name,
html[data-theme="light"] .conversation-profile-link,
html[data-theme="light"] .conversation-open-arrow {
    color: #2b2529;
}

html[data-theme="light"] .conversation-profile-link:hover,
html[data-theme="light"] .conversation-open-arrow:hover {
    color: var(--light-accent-dark);
}

html[data-theme="light"] .conversation-you,
html[data-theme="light"] .conversation-first-message,
html[data-theme="light"] .conversation-preview-meta,
html[data-theme="light"] .conversation-preview-date,
html[data-theme="light"] .message-meta,
html[data-theme="light"] .message-read-state {
    color: var(--light-text-muted);
}

html[data-theme="light"] .conversation-new-messages,
html[data-theme="light"] .conversation-unread-badge {
    background: #9e293b;
    color: #ffffff;
}

html[data-theme="light"] .message-compose-form textarea {
    background: #ffffff;
    border-color: #cfc3c8;
    color: var(--light-text);
}

html[data-theme="light"] .is-sent .message-bubble {
    background: #e5d2da;
    border-color: #c9aeba;
    color: #2e2328;
}

html[data-theme="light"] .is-sent .message-bubble *,
html[data-theme="light"] .is-received .message-bubble * {
    color: inherit;
}

html[data-theme="light"] .is-received .message-bubble {
    background: #ffffff;
    border-color: #cfc6ca;
    color: #292428;
}

html[data-theme="light"] .message-system-badge {
    background: #e8e1e4;
    border-color: #d0c4c8;
    color: #4e4348;
}


/* ============================================================
   V52 - PRESENCE
   ============================================================ */

html[data-theme="light"] .presence-indicator {
    background: #f0ebed;
    border-color: #d2c7cb;
    color: #575055;
}

html[data-theme="light"] .presence-indicator.is-online {
    background: var(--light-success-bg);
    border-color: var(--light-success-border);
    color: var(--light-success-text);
}

html[data-theme="light"] .presence-indicator.is-online .presence-text {
    color: var(--light-success-text);
}

html[data-theme="light"] .presence-dot {
    background: #6d676b;
}

html[data-theme="light"] .presence-indicator.is-online .presence-dot {
    background: #238a42;
}


/* ============================================================
   V52 - PAGES LEGALES
   ============================================================ */

html[data-theme="light"] .legal-page-body {
    background: #f4f1f2;
    color: var(--light-text);
}

html[data-theme="light"] .legal-document,
html[data-theme="light"] .legal-document-header,
html[data-theme="light"] .legal-section,
html[data-theme="light"] .legal-card,
html[data-theme="light"] .legal-panel,
html[data-theme="light"] .legal-acceptance-card {
    background: #fffdfd;
    border-color: #d7cdd1;
    color: var(--light-text);
}

html[data-theme="light"] .legal-section p,
html[data-theme="light"] .legal-section li,
html[data-theme="light"] .legal-section td,
html[data-theme="light"] .legal-section th {
    color: #4d454a;
}

html[data-theme="light"] .legal-section a,
html[data-theme="light"] .legal-document a {
    color: #633c4e;
    text-decoration: underline;
    text-underline-offset: 2px;
}

html[data-theme="light"] .legal-section a:hover,
html[data-theme="light"] .legal-document a:hover {
    color: #38232d;
}

html[data-theme="light"] .legal-data-table {
    background: #ffffff;
    border-color: #cfc5c9;
    color: var(--light-text);
}

html[data-theme="light"] .legal-data-table th {
    background: #e9e2e5;
    color: #332d31;
}

html[data-theme="light"] .legal-data-table td {
    background: #fffdfd;
    color: #4a4246;
}

html[data-theme="light"] .legal-checkbox-row {
    background: #f6f1f3;
    border-color: #d7cbd0;
    color: #433a3f;
}

html[data-theme="light"] .legal-checkbox-sensitive {
    background: #f8ecef;
    border-color: #ddc2cb;
}

html[data-theme="light"] .legal-info-box {
    background: #eee7ea;
    border-color: #d1c4c9;
    color: #4d4147;
}

html[data-theme="light"] .legal-warning-box,
html[data-theme="light"] .legal-config-warning {
    background: var(--light-warning-bg);
    border-color: var(--light-warning-border);
    color: var(--light-warning-text);
}

html[data-theme="light"] .legal-warning-box *,
html[data-theme="light"] .legal-config-warning * {
    color: inherit;
}

html[data-theme="light"] .site-legal-footer {
    color: #5b5357;
}

html[data-theme="light"] .site-legal-footer a {
    color: #563746;
}

html[data-theme="light"] .site-legal-footer a:hover {
    color: #2d1d25;
}


/* ============================================================
   V52 - BOUTONS DANGER / SUCCES
   ============================================================ */

html[data-theme="light"] .button-danger {
    border-color: #b96a73;
    color: #7b2933;
}

html[data-theme="light"] .button-danger:hover {
    background: #8c303b;
    border-color: #8c303b;
    color: #ffffff;
}

html[data-theme="light"] .current-user-badge,
html[data-theme="light"] .event-status-badge {
    background: var(--light-success-bg);
    border-color: var(--light-success-border);
    color: var(--light-success-text);
}


/* ============================================================
   V52 - FOCUS CLAVIER
   ============================================================ */

html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] textarea:focus-visible,
html[data-theme="light"] select:focus-visible {
    outline:
        3px
        solid
        rgba(
            112,
            72,
            90,
            0.35
        );

    outline-offset: 2px;
}


/* ============================================================
   V52 - SELECTION DE TEXTE
   ============================================================ */

html[data-theme="light"] ::selection {
    background: #6f4658;
    color: #ffffff;
}


/* ============================================================
   V53 - THEME CLAIR : CORRECTIONS CIBLEES
   ACCUEIL / CADRES SOIREES / ZONE ORGANISATEUR / MEMBRES
   ============================================================ */


/* ============================================================
   V53 - PAGE D'ACCUEIL PUBLIQUE
   ============================================================ */

/*
   V51 contenait une règle générique de thème clair sur les h1.
   Elle pouvait prendre le dessus sur le grand titre de la landing.
   Ici on verrouille volontairement le rendu de la page photo :
   texte blanc très contrasté et bouton Connexion réellement sombre.
*/

html[data-theme="light"] .landing-content {
    color: #ffffff;
}

html[data-theme="light"] .landing-content h1 {
    color: #ffffff;

    text-shadow:
        0
        3px
        10px
        rgba(
            0,
            0,
            0,
            0.95
        ),
        0
        12px
        34px
        rgba(
            0,
            0,
            0,
            0.90
        );
}

html[data-theme="light"] .landing-eyebrow {
    color:
        rgba(
            255,
            255,
            255,
            0.96
        );

    text-shadow:
        0
        2px
        9px
        rgba(
            0,
            0,
            0,
            0.95
        );
}

html[data-theme="light"] .landing-signature {
    color: #ffffff;

    text-shadow:
        0
        2px
        10px
        rgba(
            0,
            0,
            0,
            0.95
        );
}

html[data-theme="light"] .landing-tagline {
    color: #ffffff;

    text-shadow:
        0
        3px
        12px
        rgba(
            0,
            0,
            0,
            0.98
        );
}

html[data-theme="light"] .landing-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(
                0,
                0,
                0,
                0.22
            )
            0%,
            rgba(
                0,
                0,
                0,
                0.30
            )
            44%,
            rgba(
                0,
                0,
                0,
                0.58
            )
            100%
        );
}

html[data-theme="light"] .landing-button-primary {
    background: #ffffff;

    border-color: #ffffff;

    color: #171317;

    box-shadow:
        0
        12px
        30px
        rgba(
            0,
            0,
            0,
            0.34
        );
}

html[data-theme="light"] .landing-button-primary:hover,
html[data-theme="light"] .landing-button-primary:focus-visible {
    background: #f0ecee;

    border-color: #ffffff;

    color: #171317;
}

html[data-theme="light"] .landing-button-secondary {
    background:
        rgba(
            39,
            27,
            33,
            0.94
        );

    border:
        2px
        solid
        rgba(
            255,
            255,
            255,
            0.94
        );

    color: #ffffff;

    box-shadow:
        0
        12px
        30px
        rgba(
            0,
            0,
            0,
            0.42
        );

    backdrop-filter:
        blur(12px);
}

html[data-theme="light"] .landing-button-secondary:hover,
html[data-theme="light"] .landing-button-secondary:focus-visible {
    background: #171217;

    border-color: #ffffff;

    color: #ffffff;
}


/* ============================================================
   V53 - CADRES DES SOIREES
   ============================================================ */

/*
   En V52 la bordure était techniquement claire mais trop fine pour
   être perçue comme un vrai cadre. V53 crée un véritable entourage
   blanc autour de l'affiche tout en conservant le voile sombre interne
   nécessaire à la lecture du titre.
*/

html[data-theme="light"] .event-tile {
    padding: 5px;

    overflow: visible;

    background: #ffffff;

    border:
        2px
        solid
        #b8aab0;

    border-radius: 19px;

    box-shadow:
        0
        8px
        20px
        rgba(
            69,
            50,
            58,
            0.14
        ),
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.95
        )
        inset;
}

html[data-theme="light"] .event-tile:hover {
    background: #ffffff;

    border-color: #806873;

    box-shadow:
        0
        16px
        34px
        rgba(
            69,
            50,
            58,
            0.22
        );
}

html[data-theme="light"] .event-tile-link {
    overflow: hidden;

    border-radius: 13px;
}

html[data-theme="light"] .event-tile-visual {
    overflow: hidden;

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 50% 25%,
            #d9d0d4,
            #bcaeb4 64%
        );
}

/*
   Le contenu de l'affiche reste sur le voile sombre.
*/
html[data-theme="light"] .event-tile-info,
html[data-theme="light"] .event-tile-info h2,
html[data-theme="light"] .event-tile-location,
html[data-theme="light"] .event-tile-organizer,
html[data-theme="light"] .event-tile-organizer *,
html[data-theme="light"] .event-tile-open {
    color: #ffffff;
}

html[data-theme="light"] .event-tile-location,
html[data-theme="light"] .event-tile-organizer {
    text-shadow:
        0
        2px
        8px
        rgba(
            0,
            0,
            0,
            1
        );
}

html[data-theme="light"] .event-tile-date,
html[data-theme="light"] .event-tile-participants {
    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border-color:
        rgba(
            43,
            34,
            38,
            0.22
        );

    color: #241f22;

    box-shadow:
        0
        4px
        12px
        rgba(
            0,
            0,
            0,
            0.16
        );
}

html[data-theme="light"] .event-tile-date-year {
    color: #534a4f;
}


/* ============================================================
   V53 - ZONE ORGANISATEUR
   ============================================================ */

html[data-theme="light"] .organizer-zone {
    background:
        linear-gradient(
            145deg,
            #fff8fa,
            #f3e7eb
        );

    border:
        2px
        solid
        #c9aeb8;

    color: #2b2227;

    box-shadow:
        0
        14px
        34px
        rgba(
            85,
            50,
            64,
            0.11
        );
}

html[data-theme="light"] .organizer-zone h2 {
    color: #402a34;
}

html[data-theme="light"] .organizer-zone p {
    color: #514348;
}

html[data-theme="light"] .organizer-zone .button-edit {
    background: #ffffff;

    border:
        1px
        solid
        #bca6af;

    color: #4d3540;
}

html[data-theme="light"] .organizer-zone .button-edit:hover,
html[data-theme="light"] .organizer-zone .button-edit:focus-visible {
    background: #eadce1;

    border-color: #9e7e8a;

    color: #32212a;
}

html[data-theme="light"] .organizer-zone .button {
    background: #34242c;

    border-color: #34242c;

    color: #ffffff;
}

html[data-theme="light"] .organizer-zone .button:hover,
html[data-theme="light"] .organizer-zone .button:focus-visible {
    background: #1d1519;

    border-color: #1d1519;

    color: #ffffff;
}

html[data-theme="light"] .organizer-zone .button-danger {
    background: #fff7f8;

    border:
        1px
        solid
        #b95e69;

    color: #7a2632;
}

html[data-theme="light"] .organizer-zone .button-danger:hover,
html[data-theme="light"] .organizer-zone .button-danger:focus-visible {
    background: #8f303b;

    border-color: #8f303b;

    color: #ffffff;
}


/* ============================================================
   V53 - CADRES DES MEMBRES
   ============================================================ */

html[data-theme="light"] .member-tile {
    padding: 5px;

    overflow: visible;

    background: #ffffff;

    border:
        2px
        solid
        #b8aab0;

    border-radius: 19px;

    box-shadow:
        0
        8px
        20px
        rgba(
            69,
            50,
            58,
            0.14
        );
}

html[data-theme="light"] .member-tile:hover {
    background: #ffffff;

    border-color: #806873;

    box-shadow:
        0
        16px
        34px
        rgba(
            69,
            50,
            58,
            0.22
        );
}

html[data-theme="light"] .member-tile-main-link {
    overflow: hidden;

    border-radius: 13px;
}

html[data-theme="light"] .member-tile-visual {
    overflow: hidden;

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 50% 30%,
            #ddd4d8,
            #bcaeb4 64%
        );
}

html[data-theme="light"] .member-tile-info,
html[data-theme="light"] .member-tile-info h2,
html[data-theme="light"] .member-tile-info *,
html[data-theme="light"] .member-tile-open {
    color: #ffffff;
}

html[data-theme="light"] .member-tile-info h2 {
    text-shadow:
        0
        2px
        10px
        rgba(
            0,
            0,
            0,
            1
        );
}

html[data-theme="light"] .member-tile-presence {
    color: #ffffff;

    text-shadow:
        0
        2px
        8px
        rgba(
            0,
            0,
            0,
            1
        );
}

html[data-theme="light"] .member-tile-message {
    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    border:
        1px
        solid
        rgba(
            46,
            35,
            40,
            0.24
        );

    color: #4f3440;

    box-shadow:
        0
        4px
        12px
        rgba(
            0,
            0,
            0,
            0.15
        );
}

html[data-theme="light"] .member-tile-message:hover,
html[data-theme="light"] .member-tile-message:focus-visible {
    background: #eadce2;

    border-color: #b79da7;

    color: #332129;
}

html[data-theme="light"] .member-tile-self-badge {
    background:
        rgba(
            29,
            103,
            50,
            0.95
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.70
        );

    color: #ffffff;
}


/* ============================================================
   V53 - ANCIENNES CARTES MEMBRES ENCORE UTILISEES
   ============================================================ */

/*
   Certaines vues détaillées réutilisent les anciennes classes
   member-card. Elles reçoivent la même logique visuelle claire.
*/

html[data-theme="light"] .member-card,
html[data-theme="light"] .member-card-shell {
    background: #ffffff;

    border:
        2px
        solid
        #c1b3b8;

    color: #272125;

    box-shadow:
        0
        8px
        20px
        rgba(
            69,
            50,
            58,
            0.10
        );
}

html[data-theme="light"] .member-card-link:hover .member-card,
html[data-theme="light"] .member-card-shell:hover {
    background: #ffffff;

    border-color: #806873;

    box-shadow:
        0
        14px
        30px
        rgba(
            69,
            50,
            58,
            0.18
        );
}

html[data-theme="light"] .member-info h2,
html[data-theme="light"] .member-description {
    color: #292327;
}

html[data-theme="light"] .member-stats,
html[data-theme="light"] .member-description-empty,
html[data-theme="light"] .member-card-footer {
    color: #5f565b;
}

html[data-theme="light"] .member-open-arrow,
html[data-theme="light"] .member-card-link:hover .member-open-arrow,
html[data-theme="light"] .member-card-link:hover .member-card-footer {
    color: #563a47;
}

html[data-theme="light"] .member-card-actions {
    background: #f4eff1;

    border-top-color: #d7ccd0;
}


/* ============================================================
   V54 - THEME CLAIR
   LISIBILITE DES TEXTES DES CARTES + SIGNATURE BY SYNED
   ============================================================ */


/* ============================================================
   V54 - BY SYNED DANS LA BARRE DU HAUT
   ============================================================ */

/*
   La signature historique était blanche/transparente, adaptée
   uniquement à la barre sombre. En thème clair elle devient prune
   foncé et perd son ombre noire.
*/

html[data-theme="light"] .logo::after {
    color: #5a3b49;

    text-shadow: none;

    opacity: 1;
}


/* ============================================================
   V54 - BLOC TEXTE DES CARTES DE SOIREES
   ============================================================ */

/*
   Le vrai problème n'était plus la couleur du texte mais la photo :
   une affiche très claire peut rendre un titre blanc peu lisible.
   On place donc les trois informations dans un cartouche sombre
   semi-transparent, uniquement en thème clair.
*/

html[data-theme="light"] .event-tile-info {
    right: 10px;
    bottom: 10px;
    left: 10px;

    padding:
        10px
        31px
        10px
        11px;

    background:
        rgba(
            24,
            18,
            21,
            0.84
        );

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    border-radius: 11px;

    box-shadow:
        0
        5px
        16px
        rgba(
            0,
            0,
            0,
            0.32
        );

    backdrop-filter:
        blur(8px);
}

html[data-theme="light"] .event-tile-info h2 {
    margin-bottom: 5px;

    color: #ffffff;

    text-shadow:
        0
        1px
        3px
        rgba(
            0,
            0,
            0,
            0.95
        );
}

html[data-theme="light"] .event-tile-location {
    color: #f5f2f3;

    text-shadow: none;
}

html[data-theme="light"] .event-tile-organizer,
html[data-theme="light"] .event-tile-organizer span,
html[data-theme="light"] .event-tile-organizer strong {
    color: #f2dbe4;

    text-shadow: none;
}

html[data-theme="light"] .event-tile-organizer strong {
    color: #ffffff;

    font-weight: 700;
}

html[data-theme="light"] .event-tile-open {
    right: 16px;
    bottom: 17px;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    text-shadow:
        0
        1px
        3px
        rgba(
            0,
            0,
            0,
            0.75
        );
}

html[data-theme="light"] .event-tile:hover .event-tile-open {
    color: #ffffff;
}


/* ============================================================
   V54 - PSEUDO DES CARTES MEMBRES
   ============================================================ */

/*
   Même principe : le pseudo et la présence ne dépendent plus
   de la luminosité de la photo du membre.
*/

html[data-theme="light"] .member-tile-info {
    right: 10px;
    bottom: 10px;
    left: 10px;

    padding:
        9px
        30px
        9px
        10px;

    background:
        rgba(
            24,
            18,
            21,
            0.84
        );

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    border-radius: 11px;

    box-shadow:
        0
        5px
        16px
        rgba(
            0,
            0,
            0,
            0.32
        );

    backdrop-filter:
        blur(8px);
}

html[data-theme="light"] .member-tile-info h2 {
    margin-bottom: 4px;

    color: #ffffff;

    text-shadow:
        0
        1px
        3px
        rgba(
            0,
            0,
            0,
            0.95
        );
}

html[data-theme="light"] .member-tile-presence {
    color: #f0ecee;

    text-shadow: none;
}

html[data-theme="light"]
.member-tile-presence.is-online {
    color: #d9f5df;
}

html[data-theme="light"] .member-tile-open {
    right: 16px;
    bottom: 17px;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    text-shadow:
        0
        1px
        3px
        rgba(
            0,
            0,
            0,
            0.75
        );
}

html[data-theme="light"] .member-tile:hover .member-tile-open {
    color: #ffffff;
}


/* ============================================================
   V54 - MOBILE
   ============================================================ */

@media (max-width: 700px) {

    html[data-theme="light"] .event-tile-info,
    html[data-theme="light"] .member-tile-info {
        right: 7px;
        bottom: 7px;
        left: 7px;

        padding:
            7px
            24px
            7px
            8px;

        border-radius: 9px;
    }

    html[data-theme="light"] .event-tile-open,
    html[data-theme="light"] .member-tile-open {
        right: 11px;
        bottom: 12px;
    }

}

@media (max-width: 360px) {

    html[data-theme="light"] .event-tile-info,
    html[data-theme="light"] .member-tile-info {
        right: 5px;
        bottom: 5px;
        left: 5px;

        padding:
            6px
            21px
            6px
            7px;
    }

    html[data-theme="light"] .event-tile-open,
    html[data-theme="light"] .member-tile-open {
        right: 8px;
        bottom: 9px;
    }

}


/* ============================================================
   V55 - THEME CLAIR
   FIX DE SPECIFICITE CSS SUR LES CARTES PHOTO
   ============================================================ */

/*
   Cause réelle identifiée grâce aux captures V54 :
   les règles générales V52 comme

   html[data-theme="light"] body:not(.landing-body) h2
   html[data-theme="light"] body:not(.landing-body) p
   html[data-theme="light"] body:not(.landing-body) strong

   ont une spécificité supérieure aux règles V54 des cartouches.

   Résultat :
   - pseudo membre noir sur cartouche sombre ;
   - titre de soirée noir sur cartouche sombre ;
   - lieu gris sombre ;
   - pseudo organisateur noir.

   V55 reprend exactement la même chaîne de spécificité avec
   body:not(.landing-body), puis cible les cartouches.
*/


/* ============================================================
   V55 - SOIREES : TITRE / LIEU / ORGANISATEUR
   ============================================================ */

html[data-theme="light"]
body:not(.landing-body)
.event-tile-info {
    color: #ffffff;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-info h2 {
    color: #ffffff;

    text-shadow:
        0
        1px
        3px
        rgba(
            0,
            0,
            0,
            0.95
        );
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-info p {
    color: #f5f2f3;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-location {
    color: #f5f2f3;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-organizer {
    color: #f2dbe4;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-organizer span {
    color: #f2dbe4;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-organizer strong {
    color: #ffffff;
}


/* ============================================================
   V55 - MEMBRES : PSEUDO / PRESENCE
   ============================================================ */

html[data-theme="light"]
body:not(.landing-body)
.member-tile-info {
    color: #ffffff;
}

html[data-theme="light"]
body:not(.landing-body)
.member-tile-info h2 {
    color: #ffffff;

    text-shadow:
        0
        1px
        3px
        rgba(
            0,
            0,
            0,
            0.95
        );
}

html[data-theme="light"]
body:not(.landing-body)
.member-tile-info span {
    color: #f0ecee;
}

html[data-theme="light"]
body:not(.landing-body)
.member-tile-presence {
    color: #f0ecee;
}

html[data-theme="light"]
body:not(.landing-body)
.member-tile-presence.is-online,
html[data-theme="light"]
body:not(.landing-body)
.member-tile-presence.is-online span {
    color: #d9f5df;
}


/* ============================================================
   V55 - FLECHES DES CARTES
   ============================================================ */

html[data-theme="light"]
body:not(.landing-body)
.event-tile-open,
html[data-theme="light"]
body:not(.landing-body)
.member-tile-open {
    color:
        rgba(
            255,
            255,
            255,
            0.88
        );
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile:hover
.event-tile-open,
html[data-theme="light"]
body:not(.landing-body)
.member-tile:hover
.member-tile-open {
    color: #ffffff;
}


/* ============================================================
   V55 - GARDE-FOU
   ============================================================ */

/*
   Ces !important sont volontairement limités aux seuls éléments
   textuels superposés aux photos. Ils empêchent une future règle
   typographique générale de casser à nouveau leur contraste.
*/

html[data-theme="light"]
body:not(.landing-body)
.event-tile-info h2,

html[data-theme="light"]
body:not(.landing-body)
.member-tile-info h2 {
    color: #ffffff !important;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-location {
    color: #f5f2f3 !important;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-organizer {
    color: #f2dbe4 !important;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-organizer strong {
    color: #ffffff !important;
}

html[data-theme="light"]
body:not(.landing-body)
.member-tile-presence {
    color: #f0ecee !important;
}

html[data-theme="light"]
body:not(.landing-body)
.member-tile-presence.is-online {
    color: #d9f5df !important;
}


/* ============================================================
   V58 - LOCALISATION / DISTANCES
   ============================================================ */

.location-picker {
    position: relative;

    margin:
        22px
        0;

    padding:
        18px;

    background:
        #17171c;

    border:
        1px
        solid
        #303038;

    border-radius:
        14px;
}

.location-picker-heading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        10px;
}

.location-picker-heading h3 {
    margin:
        2px
        0
        0;

    font-size:
        1.05rem;
}

.location-picker-kicker {
    margin:
        0;

    color:
        #b7929f;

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.location-picker-current {
    flex:
        0
        0
        auto;

    padding:
        6px
        10px;

    background:
        #222228;

    border:
        1px
        solid
        #383840;

    border-radius:
        999px;

    color:
        #d9d9df;

    font-size:
        0.78rem;
}

.location-picker-help,
.location-picker-privacy {
    margin:
        8px
        0;

    color:
        #a9a9b1;

    font-size:
        0.86rem;

    line-height:
        1.5;
}

.location-picker-privacy {
    margin-top:
        12px;

    padding-top:
        11px;

    border-top:
        1px
        solid
        #292930;

    font-size:
        0.78rem;
}

.location-picker-controls {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        10px;

    align-items:
        end;

    margin-top:
        15px;
}

.location-picker-search {
    position:
        relative;
}

.location-picker-search label {
    display:
        block;

    margin-bottom:
        7px;
}

.location-geolocate-button {
    min-height:
        44px;

    padding:
        10px
        14px;

    background:
        #26262d;

    border:
        1px
        solid
        #41414b;

    border-radius:
        10px;

    color:
        #f2f2f5;

    font:
        inherit;

    font-size:
        0.86rem;

    cursor:
        pointer;

    transition:
        background
        0.18s
        ease,
        border-color
        0.18s
        ease,
        transform
        0.18s
        ease;
}

.location-geolocate-button:hover,
.location-geolocate-button:focus-visible {
    background:
        #32323a;

    border-color:
        #5a5a66;

    transform:
        translateY(
            -1px
        );
}

.location-geolocate-button:disabled {
    opacity:
        0.6;

    cursor:
        wait;

    transform:
        none;
}

.location-suggestions {
    position:
        absolute;

    z-index:
        60;

    top:
        calc(
            100%
            + 5px
        );

    right:
        0;

    left:
        0;

    overflow:
        auto;

    max-height:
        280px;

    padding:
        6px;

    background:
        #111115;

    border:
        1px
        solid
        #42424c;

    border-radius:
        11px;

    box-shadow:
        0
        18px
        42px
        rgba(
            0,
            0,
            0,
            0.52
        );
}

.location-suggestion {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        10px
        11px;

    background:
        transparent;

    border:
        0;

    border-radius:
        8px;

    color:
        #eeeeF2;

    text-align:
        left;

    cursor:
        pointer;
}

.location-suggestion:hover,
.location-suggestion:focus-visible {
    background:
        #25252b;

    outline:
        none;
}

.location-suggestion strong {
    color:
        #ffffff;
}

.location-suggestion span {
    color:
        #aaaaB2;

    font-size:
        0.78rem;

    text-align:
        right;
}

.location-picker-status {
    margin-top:
        11px;

    padding:
        9px
        11px;

    background:
        #202027;

    border:
        1px
        solid
        #34343d;

    border-radius:
        9px;

    color:
        #babac2;

    font-size:
        0.82rem;
}

.location-picker-status.is-valid {
    background:
        #17231b;

    border-color:
        #31543a;

    color:
        #cde5d2;
}

.location-picker-status.is-valid strong {
    color:
        #ebfff0;
}

.location-picker-status.is-error {
    background:
        #2b191d;

    border-color:
        #68313a;

    color:
        #f0c7ce;
}

.location-picker-status.is-loading {
    color:
        #e4d5db;
}


/* ============================================================
   V58 - BANNIERE LOCALISATION MANQUANTE
   ============================================================ */

.location-completion-banner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin:
        0
        0
        24px;

    padding:
        15px
        17px;

    background:
        #201a1d;

    border:
        1px
        solid
        #553b46;

    border-radius:
        13px;
}

.location-completion-banner div {
    display:
        grid;

    gap:
        3px;
}

.location-completion-banner strong {
    color:
        #ffffff;
}

.location-completion-banner span {
    color:
        #c0b8bc;

    font-size:
        0.86rem;
}


/* ============================================================
   V58 - DISTANCES SUR LES SOIREES
   ============================================================ */

.event-tile-city {
    margin:
        4px
        0
        0;

    color:
        #e8e0e3;

    font-size:
        0.72rem;

    line-height:
        1.25;
}

.event-tile-city span {
    color:
        #f5dfe7;
}

.event-location-summary {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        6px
        9px;

    margin:
        10px
        0
        14px;

    padding:
        10px
        12px;

    background:
        #202027;

    border:
        1px
        solid
        #363640;

    border-radius:
        10px;

    color:
        #cfcfd5;

    font-size:
        0.88rem;
}

.event-location-summary strong {
    color:
        #f0dce4;
}

.event-location-missing {
    margin:
        10px
        0
        14px;

    color:
        #b9aab0;

    font-size:
        0.84rem;
}


/* ============================================================
   V58 - LOCALISATION MEMBRE
   ============================================================ */

.member-location-summary {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px
        10px;

    margin:
        10px
        0
        16px;

    color:
        #c9c9cf;
}

.member-location-city {
    color:
        #eeeeF2;

    font-weight:
        700;
}

.member-location-department {
    color:
        #a9a9b1;

    font-size:
        0.86rem;
}

.member-distance-label {
    padding:
        5px
        9px;

    background:
        #2b2025;

    border:
        1px
        solid
        #583b47;

    border-radius:
        999px;

    color:
        #efdce4;

    font-size:
        0.8rem;
}


/* ============================================================
   V58 - THEME CLAIR
   ============================================================ */

html[data-theme="light"] .location-picker {
    background:
        #fffdfd;

    border-color:
        #cfc2c7;

    color:
        #272126;

    box-shadow:
        0
        8px
        22px
        rgba(
            69,
            50,
            58,
            0.07
        );
}

html[data-theme="light"] .location-picker-heading h3 {
    color:
        #211d20;
}

html[data-theme="light"] .location-picker-kicker {
    color:
        #593746;
}

html[data-theme="light"] .location-picker-current {
    background:
        #eee7ea;

    border-color:
        #cfc1c6;

    color:
        #42373d;
}

html[data-theme="light"] .location-picker-help,
html[data-theme="light"] .location-picker-privacy {
    color:
        #5c5358;
}

html[data-theme="light"] .location-picker-privacy {
    border-top-color:
        #ddd3d7;
}

html[data-theme="light"] .location-geolocate-button {
    background:
        #33262d;

    border-color:
        #33262d;

    color:
        #ffffff;
}

html[data-theme="light"] .location-geolocate-button:hover,
html[data-theme="light"] .location-geolocate-button:focus-visible {
    background:
        #1d161a;

    border-color:
        #1d161a;

    color:
        #ffffff;
}

html[data-theme="light"] .location-suggestions {
    background:
        #ffffff;

    border-color:
        #c8bbc0;

    box-shadow:
        0
        16px
        36px
        rgba(
            69,
            50,
            58,
            0.16
        );
}

html[data-theme="light"] .location-suggestion {
    color:
        #282227;
}

html[data-theme="light"] .location-suggestion strong {
    color:
        #201b1f;
}

html[data-theme="light"] .location-suggestion span {
    color:
        #62585d;
}

html[data-theme="light"] .location-suggestion:hover,
html[data-theme="light"] .location-suggestion:focus-visible {
    background:
        #f0e9ec;
}

html[data-theme="light"] .location-picker-status {
    background:
        #f0ebed;

    border-color:
        #d4c8cd;

    color:
        #51484d;
}

html[data-theme="light"] .location-picker-status.is-valid {
    background:
        #e4f1e7;

    border-color:
        #a9c8b0;

    color:
        #24512f;
}

html[data-theme="light"] .location-picker-status.is-valid strong {
    color:
        #173c21;
}

html[data-theme="light"] .location-picker-status.is-error {
    background:
        #fae7e9;

    border-color:
        #d7a7ad;

    color:
        #782b35;
}

html[data-theme="light"] .location-completion-banner {
    background:
        #fff5f8;

    border-color:
        #d4b9c3;
}

html[data-theme="light"] .location-completion-banner strong {
    color:
        #35242c;
}

html[data-theme="light"] .location-completion-banner span {
    color:
        #5b4c53;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-city,
html[data-theme="light"]
body:not(.landing-body)
.event-tile-city span {
    color:
        #f2e5ea
        !important;
}

html[data-theme="light"] .event-location-summary {
    background:
        #f3edef;

    border-color:
        #d5c8cd;

    color:
        #4f454a;
}

html[data-theme="light"] .event-location-summary strong {
    color:
        #563847;
}

html[data-theme="light"] .event-location-missing {
    color:
        #685b61;
}

html[data-theme="light"] .member-location-summary {
    color:
        #51484d;
}

html[data-theme="light"] .member-location-city {
    color:
        #292327;
}

html[data-theme="light"] .member-location-department {
    color:
        #62585d;
}

html[data-theme="light"] .member-distance-label {
    background:
        #eee1e6;

    border-color:
        #d0b9c2;

    color:
        #553744;
}


/* ============================================================
   V58 - MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .location-picker-controls {
        grid-template-columns:
            1fr;
    }

    .location-geolocate-button {
        width:
            100%;
    }

    .location-completion-banner {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .location-completion-banner .button-edit {
        align-self:
            flex-start;
    }

}


/* ============================================================
   V58 - LOCALISATION DANS LES CARTES MEMBRES
   ============================================================ */

.member-tile-location {
    display:
        block;

    margin-top:
        4px;

    color:
        #e8e0e3;

    font-size:
        0.70rem;

    line-height:
        1.25;
}

.member-tile-location span {
    color:
        #f5dfe7;
}

html[data-theme="light"]
body:not(.landing-body)
.member-tile-info
.member-tile-location,
html[data-theme="light"]
body:not(.landing-body)
.member-tile-info
.member-tile-location span {
    color:
        #f3e7eb
        !important;
}


/* ============================================================
   V59 - LOCALISATION UNIQUE DES SOIREES
   ============================================================ */

/*
   Le champ libre "Lieu" n'existe plus dans l'interface.
   La classe event-tile-location affiche désormais directement
   la commune structurée V58 et la distance éventuelle.
*/

.event-tile-distance {
    color: #f5dfe7;
}

html[data-theme="light"]
body:not(.landing-body)
.event-tile-location,
html[data-theme="light"]
body:not(.landing-body)
.event-tile-location span,
html[data-theme="light"]
body:not(.landing-body)
.event-tile-distance {
    color: #f5f2f3 !important;
}


/* ============================================================
   V60 - ETAT DES DEMANDES DE PHOTOS PRIVEES
   ============================================================ */

.private-gallery-access-state {
    display: grid;
    gap: 12px;
}

.private-gallery-access-history {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 2px;
    padding: 10px 12px;
    border: 1px solid #3b3b45;
    border-radius: 10px;
    background: #202027;
    color: #c7c7cf;
    font-size: 0.86rem;
}

.private-gallery-access-history strong {
    color: #ffffff;
}

.private-gallery-access-history.is-declined {
    background: #291a1d;
    border-color: #5e3138;
}

.private-gallery-access-history.is-declined strong {
    color: #f0c9cf;
}

.private-gallery-access-history.is-ended {
    background: #25231d;
    border-color: #56513c;
}

.private-gallery-access-history.is-ended strong {
    color: #ebe2b9;
}

.private-gallery-request-pending-button.is-granted {
    background: #18301f !important;
    border-color: #3b7049 !important;
    color: #dff5e5 !important;
}

.private-gallery-request-pending-button.is-declined {
    background: #331d22 !important;
    border-color: #74404a !important;
    color: #f1cbd1 !important;
}

.private-gallery-request-pending-button.is-ended {
    background: #302c20 !important;
    border-color: #696044 !important;
    color: #eee4bd !important;
}

html[data-theme="light"] .private-gallery-access-history {
    background: #f3eef0;
    border-color: #d5c9ce;
    color: #51484d;
}

html[data-theme="light"] .private-gallery-access-history strong {
    color: #292327;
}

html[data-theme="light"] .private-gallery-access-history.is-declined {
    background: #fae8eb;
    border-color: #d7abb2;
}

html[data-theme="light"] .private-gallery-access-history.is-declined strong {
    color: #762d38;
}

html[data-theme="light"] .private-gallery-access-history.is-ended {
    background: #f5f0df;
    border-color: #d4c99f;
}

html[data-theme="light"] .private-gallery-access-history.is-ended strong {
    color: #625720;
}

html[data-theme="light"]
.private-gallery-request-pending-button.is-granted {
    background: #e2f1e6 !important;
    border-color: #a6cbb0 !important;
    color: #20542d !important;
}

html[data-theme="light"]
.private-gallery-request-pending-button.is-declined {
    background: #fae8eb !important;
    border-color: #d8a9b0 !important;
    color: #762d38 !important;
}

html[data-theme="light"]
.private-gallery-request-pending-button.is-ended {
    background: #f4efd9 !important;
    border-color: #d1c48e !important;
    color: #62551e !important;
}


/* ============================================================
   V61 - ADMIN / DIAGNOSTIC EMAIL SUR PAGE DEDIEE
   ============================================================ */

.admin-email-diagnostic-link-card {
    display: grid;
    gap: 18px;
}

.admin-email-diagnostic-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-email-diagnostic-summary span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    background: #222228;
    border: 1px solid #363640;
    border-radius: 999px;
    color: #c7c7cf;
    font-size: 0.82rem;
}

.admin-email-diagnostic-summary strong {
    color: #ffffff;
}

.admin-email-diagnostic-summary .status-pending {
    color: #eadfbd;
}

.admin-email-diagnostic-summary .status-failed {
    color: #f0c5cb;
}

.admin-email-diagnostic-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(100%, 440px);
    padding: 13px 16px;
    background: #f0f0f3;
    border: 1px solid #ffffff;
    border-radius: 11px;
    color: #121217 !important;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.admin-email-diagnostic-link:hover,
.admin-email-diagnostic-link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
}

.admin-email-diagnostics-page {
    padding-bottom: 70px;
}

.admin-email-diagnostics-stats {
    display: grid;
    grid-template-columns: repeat(
        5,
        minmax(0, 1fr)
    );
    gap: 12px;
    margin-bottom: 24px;
}

.admin-email-diagnostics-stats article {
    display: grid;
    gap: 4px;
    padding: 16px;
    background: #18181d;
    border: 1px solid #303038;
    border-radius: 12px;
}

.admin-email-diagnostics-stats strong {
    color: #ffffff;
    font-size: 1.5rem;
}

.admin-email-diagnostics-stats span {
    color: #a9a9b1;
    font-size: 0.82rem;
}

.admin-email-filter-form {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.75fr)
        minmax(180px, 1fr)
        minmax(220px, 1.6fr)
        auto;
    gap: 12px;
    align-items: end;
}

.admin-email-filter-form > div {
    min-width: 0;
}

.admin-email-filter-form label {
    display: block;
    margin-bottom: 6px;
    color: #c9c9d0;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-email-filter-form select,
.admin-email-filter-form input {
    width: 100%;
    min-height: 42px;
    margin: 0;
}

.admin-email-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-email-filter-reset {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
}

.admin-email-log-list-dedicated {
    max-height: none;
    overflow: visible;
}

.admin-email-log-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-email-log-id {
    color: #7f7f89 !important;
    font-size: 0.75rem;
}

.admin-email-log-subject {
    color: #d0c3c8 !important;
}

.admin-email-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #303038;
}

.admin-email-page-link,
.admin-email-page-current {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.85rem;
}

.admin-email-page-link {
    background: #24242a;
    border: 1px solid #3a3a44;
    color: #f0f0f3 !important;
    text-decoration: none;
}

.admin-email-page-link:hover,
.admin-email-page-link:focus-visible {
    background: #303038;
}

.admin-email-page-link.is-disabled {
    opacity: 0.42;
    cursor: default;
}

.admin-email-page-current {
    color: #bdbdc5;
}

.admin-email-diagnostics-bottom-action {
    margin-top: 20px;
}


/* ============================================================
   V61 - ADMIN / RESPONSIVE DIAGNOSTIC EMAIL
   ============================================================ */

@media (max-width: 900px) {

    .admin-email-diagnostics-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .admin-email-filter-form {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .admin-email-filter-search,
    .admin-email-filter-actions {
        grid-column:
            1 / -1;
    }

}

@media (max-width: 600px) {

    .admin-email-diagnostics-stats,
    .admin-email-filter-form {
        grid-template-columns:
            1fr;
    }

    .admin-email-filter-search,
    .admin-email-filter-actions {
        grid-column:
            auto;
    }

    .admin-email-filter-actions {
        align-items:
            stretch;
        flex-direction:
            column;
    }

    .admin-email-pagination {
        align-items:
            stretch;
        flex-direction:
            column;
        text-align:
            center;
    }

    .admin-email-page-link,
    .admin-email-page-current {
        justify-content:
            center;
    }

}


/* ============================================================
   V63 - LCS / LIBRE CE SOIR SUR LES CARTES MEMBRES
   ============================================================ */

.member-tile-quick-actions {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}

.member-tile-quick-actions .member-tile-message {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
}

.member-tile-message-self {
    cursor: default;
    user-select: none;
}

.member-tile-message-self:hover {
    transform: none;
    background: rgba(18, 18, 22, 0.84);
    border-color: rgba(255, 255, 255, 0.19);
    color: #f1d9e1;
}

.member-tile-lcs {
    width: 34px;
    min-width: 34px;
    height: 23px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 18, 22, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    color: #f1d9e1;
    font: inherit;
    font-size: 0.60rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.24);
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

button.member-tile-lcs {
    cursor: pointer;
}

button.member-tile-lcs:hover,
button.member-tile-lcs:focus-visible {
    transform: scale(1.05);
    background: #3b2b34;
    border-color: #755464;
    color: #ffffff;
    outline: none;
}

.member-tile-lcs.is-active {
    background: #d45a85;
    border-color: #f08aaa;
    color: #ffffff;
    box-shadow:
        0 0 0 2px rgba(212, 90, 133, 0.18),
        0 5px 16px rgba(116, 30, 61, 0.40);
}

button.member-tile-lcs.is-active:hover,
button.member-tile-lcs.is-active:focus-visible {
    background: #e26794;
    border-color: #ff9cbd;
    color: #ffffff;
}

.member-tile-lcs-readonly {
    cursor: default;
    user-select: none;
}

.member-tile-lcs.is-updating {
    opacity: 0.66;
    cursor: wait;
}

.lcs-toast strong {
    color: #f1bfd1;
}


/* ============================================================
   V63 - LCS / THEME CLAIR
   ============================================================ */

html[data-theme="light"] .member-tile-lcs {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(46, 35, 40, 0.24);
    color: #4f3440;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] button.member-tile-lcs:hover,
html[data-theme="light"] button.member-tile-lcs:focus-visible {
    background: #eadce2;
    border-color: #b79da7;
    color: #332129;
}

html[data-theme="light"] .member-tile-lcs.is-active {
    background: #cf527e;
    border-color: #b83e69;
    color: #ffffff;
    box-shadow:
        0 0 0 2px rgba(207, 82, 126, 0.16),
        0 5px 14px rgba(85, 29, 49, 0.24);
}

html[data-theme="light"] button.member-tile-lcs.is-active:hover,
html[data-theme="light"] button.member-tile-lcs.is-active:focus-visible {
    background: #bd416d;
    border-color: #9d3157;
    color: #ffffff;
}

html[data-theme="light"] .member-tile-message-self:hover {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(46, 35, 40, 0.24);
    color: #4f3440;
}


/* ============================================================
   V63 - LCS / RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {

    .member-tile-quick-actions {
        top: 7px;
        right: 7px;
        gap: 4px;
    }

    .member-tile-lcs {
        width: 30px;
        min-width: 30px;
        height: 21px;
        font-size: 0.54rem;
    }

}

@media (max-width: 360px) {

    .member-tile-quick-actions {
        top: 5px;
        right: 5px;
    }

    .member-tile-lcs {
        width: 27px;
        min-width: 27px;
        height: 20px;
        font-size: 0.50rem;
    }

}


/* ============================================================
   V64 - ALBUMS PHOTOS PUBLICS / PRIVES
   ============================================================ */

.album-profile-panel {
    display: grid;
    gap: 20px;
}

.album-create-box {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(280px, 1.35fr);
    gap: 18px;
    align-items: end;
    padding: 16px;
    background: #1b1b21;
    border: 1px solid #34343d;
    border-radius: 14px;
}

.album-create-box-private {
    background: #1d171a;
    border-color: #49333b;
}

.album-create-box > div {
    display: grid;
    gap: 5px;
}

.album-create-box strong {
    color: #ffffff;
}

.album-create-box span {
    color: #a8a8b0;
    font-size: 0.84rem;
}

.album-create-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 9px;
}

.album-create-form input {
    width: 100%;
    margin: 0;
}

.album-create-button,
.album-small-action,
.album-cover-button,
.album-order-button {
    border-radius: 9px;
    border: 1px solid #5b4a52;
    background: #30262b;
    color: #f0dce3;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.album-create-button {
    min-height: 42px;
    padding: 8px 14px;
}

.album-small-action,
.album-cover-button {
    padding: 7px 10px;
    font-size: 0.78rem;
}

.album-order-button {
    width: 31px;
    min-width: 31px;
    height: 31px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.album-create-button:hover,
.album-small-action:hover,
.album-cover-button:hover,
.album-order-button:hover:not(:disabled) {
    background: #44323a;
    border-color: #8b6574;
    color: #ffffff;
}

.album-order-button:disabled {
    opacity: 0.28;
    cursor: default;
}

.owner-photo-group,
.member-album-group {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: #19191e;
    border: 1px solid #303038;
    border-radius: 15px;
}

.owner-album-group,
.member-album-card {
    background:
        linear-gradient(
            180deg,
            rgba(68, 43, 53, 0.13),
            rgba(25, 25, 30, 1)
        );
}

.owner-album-group-private,
.member-album-group-private {
    background:
        linear-gradient(
            180deg,
            rgba(84, 40, 55, 0.17),
            rgba(25, 22, 25, 1)
        );
    border-color: #49323a;
}

.owner-photo-group-heading,
.member-album-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.owner-photo-group-heading > span,
.member-album-heading > span {
    display: inline-flex;
    min-width: 31px;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border: 1px solid #3a3a43;
    border-radius: 999px;
    color: #bdbdc5;
    font-size: 0.78rem;
}

.owner-photo-group-heading h3,
.member-album-heading h3,
.owner-album-heading h3 {
    margin: 4px 0 0;
}

.album-kind-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border: 1px solid #5e5057;
    border-radius: 999px;
    color: #d8c6cd;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.album-kind-badge-private {
    border-color: #704651;
    color: #e2b7c1;
}

.owner-album-heading {
    display: grid;
    grid-template-columns:
        72px
        minmax(0, 1fr)
        minmax(230px, auto);
    gap: 14px;
    align-items: center;
}

.member-album-heading-with-cover {
    display: grid;
    grid-template-columns:
        64px
        minmax(0, 1fr);
    justify-content: start;
}

.owner-album-cover,
.member-album-cover {
    width: 72px;
    height: 72px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #24242b;
    border: 1px solid #3b3b44;
    border-radius: 13px;
    color: #aaa4aa;
    font-size: 1.8rem;
}

.member-album-cover {
    width: 64px;
    height: 64px;
}

.owner-album-cover-private,
.member-album-cover-private {
    background: #261b20;
    border-color: #523640;
}

.owner-album-cover img,
.member-album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.owner-album-heading-main,
.member-album-heading-main {
    min-width: 0;
}

.owner-album-heading-main p,
.member-album-heading-main p {
    margin: 4px 0 0;
    color: #94949d;
    font-size: 0.82rem;
}

.owner-album-management {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.album-rename-form {
    display: grid;
    grid-template-columns:
        minmax(120px, 1fr)
        auto;
    gap: 7px;
}

.album-rename-form input {
    width: 100%;
    margin: 0;
    min-height: 36px;
}

.album-photo-grid {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px, 1fr)
        );
}

.album-owner-photo-card {
    display: flex;
    flex-direction: column;
}

.album-cover-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 5px 8px;
    background: rgba(183, 72, 111, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
}

.album-owner-photo-controls {
    display: grid;
    gap: 9px;
    padding: 10px;
}

.album-owner-photo-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #bdbdc5;
    font-size: 0.78rem;
}

.album-order-actions {
    display: flex;
    gap: 5px;
}

.album-order-actions form,
.album-owner-photo-bottom-actions form {
    margin: 0;
}

.album-photo-move-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 7px;
    align-items: end;
}

.album-photo-move-form label {
    display: grid;
    gap: 4px;
    color: #9b9ba4;
    font-size: 0.72rem;
}

.album-photo-move-form select {
    width: 100%;
    min-width: 0;
    margin: 0;
    min-height: 35px;
}

.album-owner-photo-bottom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.album-cover-current {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid #79455a;
    border-radius: 8px;
    background: #39232c;
    color: #edc3d2;
    font-size: 0.74rem;
    font-weight: 700;
}

.album-empty-state {
    padding: 14px;
    border: 1px dashed #3e3e47;
    border-radius: 10px;
    color: #8d8d96;
    font-size: 0.84rem;
}

.member-album-gallery-section {
    display: grid;
    gap: 18px;
}

.member-album-group {
    padding: 14px;
}

.member-album-group .member-photo-thumbnail-grid {
    margin-top: 0;
}


/* ============================================================
   V64 - THEME CLAIR
   ============================================================ */

html[data-theme="light"] .album-create-box,
html[data-theme="light"] .owner-photo-group,
html[data-theme="light"] .member-album-group {
    background: #f8f5f6;
    border-color: #d9cfd3;
}

html[data-theme="light"] .album-create-box-private,
html[data-theme="light"] .owner-album-group-private,
html[data-theme="light"] .member-album-group-private {
    background: #f8eef1;
    border-color: #dbc0c9;
}

html[data-theme="light"] .album-create-box strong,
html[data-theme="light"] .owner-album-heading h3,
html[data-theme="light"] .member-album-heading h3,
html[data-theme="light"] .owner-photo-group-heading h3 {
    color: #2d2529;
}

html[data-theme="light"] .album-create-box span,
html[data-theme="light"] .owner-album-heading-main p,
html[data-theme="light"] .member-album-heading-main p,
html[data-theme="light"] .album-owner-photo-topline {
    color: #665a60;
}

html[data-theme="light"] .album-kind-badge {
    border-color: #c4adb6;
    color: #684954;
}

html[data-theme="light"] .album-kind-badge-private {
    border-color: #c58fa2;
    color: #7b3d53;
}

html[data-theme="light"] .owner-album-cover,
html[data-theme="light"] .member-album-cover {
    background: #eee8ea;
    border-color: #d0c2c7;
}

html[data-theme="light"] .owner-album-cover-private,
html[data-theme="light"] .member-album-cover-private {
    background: #f1e2e7;
    border-color: #d6b4bf;
}

html[data-theme="light"] .album-create-button,
html[data-theme="light"] .album-small-action,
html[data-theme="light"] .album-cover-button,
html[data-theme="light"] .album-order-button {
    background: #eee2e7;
    border-color: #c8adb7;
    color: #5b3442;
}

html[data-theme="light"] .album-create-button:hover,
html[data-theme="light"] .album-small-action:hover,
html[data-theme="light"] .album-cover-button:hover,
html[data-theme="light"] .album-order-button:hover:not(:disabled) {
    background: #e1cdd5;
    border-color: #ad8392;
    color: #3f2330;
}

html[data-theme="light"] .album-cover-current {
    background: #f1dce4;
    border-color: #d5a7b8;
    color: #7c3b53;
}

html[data-theme="light"] .album-empty-state {
    border-color: #d4c8cc;
    color: #756a6f;
}


/* ============================================================
   V64 - RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .album-create-box {
        grid-template-columns:
            1fr;
    }

    .owner-album-heading {
        grid-template-columns:
            64px
            minmax(0, 1fr);
    }

    .owner-album-management {
        grid-column:
            1 / -1;
    }

}

@media (max-width: 620px) {

    .album-create-form,
    .album-rename-form,
    .album-photo-move-form {
        grid-template-columns:
            1fr;
    }

    .owner-album-heading,
    .member-album-heading-with-cover {
        grid-template-columns:
            54px
            minmax(0, 1fr);
    }

    .owner-album-cover,
    .member-album-cover {
        width: 54px;
        height: 54px;
    }

    .album-owner-photo-bottom-actions {
        align-items:
            stretch;
        flex-direction:
            column;
    }

    .album-owner-photo-bottom-actions form,
    .album-owner-photo-bottom-actions button,
    .album-owner-photo-bottom-actions .photo-main-current,
    .album-owner-photo-bottom-actions .album-cover-current {
        width: 100%;
    }

}


/* ============================================================
   V65 - ORIGINE DYNAMIQUE DES DISTANCES
   ============================================================ */

.distance-origin-panel {
    margin: 0 0 24px;
    padding: 16px;
    display: grid;
    gap: 14px;
    background:
        linear-gradient(
            180deg,
            rgba(61, 43, 52, 0.22),
            rgba(22, 22, 27, 0.96)
        );
    border: 1px solid #3a3237;
    border-radius: 15px;
}

.distance-origin-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.distance-origin-heading h2 {
    margin: 3px 0 0;
    font-size: 1.05rem;
}

.distance-origin-current {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    max-width: 52%;
    padding: 6px 10px;
    border: 1px solid #54434b;
    border-radius: 999px;
    background: #292128;
    color: #e4ccd5;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
}

.distance-origin-modes {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 9px;
}

.distance-origin-mode {
    min-width: 0;
    min-height: 64px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);
    grid-template-rows:
        auto
        auto;
    column-gap: 8px;
    align-items: center;
    text-align: left;
    background: #1e1e24;
    border: 1px solid #383840;
    border-radius: 11px;
    color: #dedee4;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.distance-origin-mode > span:first-child {
    grid-row:
        1 / 3;
    font-size: 1.15rem;
}

.distance-origin-mode > span:nth-child(2) {
    font-weight: 800;
}

.distance-origin-mode small {
    color: #8f8f98;
    font-size: 0.70rem;
}

.distance-origin-mode:hover:not(:disabled),
.distance-origin-mode:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    background: #29242a;
    border-color: #69515c;
    outline: none;
}

.distance-origin-mode.is-active {
    background: #392934;
    border-color: #9b6479;
    box-shadow:
        0 0 0 2px rgba(155, 100, 121, 0.12);
    color: #ffffff;
}

.distance-origin-mode.is-active small {
    color: #d1aebb;
}

.distance-origin-mode:disabled {
    opacity: 0.44;
    cursor: default;
}

.distance-origin-city-panel {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 12px;
    background: #18181d;
    border: 1px solid #33333b;
    border-radius: 11px;
}

.distance-origin-city-panel[hidden] {
    display: none;
}

.distance-origin-city-panel label {
    color: #c5c5cd;
    font-size: 0.78rem;
    font-weight: 700;
}

.distance-origin-city-search-wrap {
    position: relative;
}

.distance-origin-city-search-wrap input {
    width: 100%;
    margin: 0;
    padding-right: 38px;
}

.distance-origin-city-spinner {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #c99bad;
    font-weight: 900;
}

.distance-origin-city-results {
    display: grid;
    gap: 5px;
}

.distance-origin-city-result {
    width: 100%;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #222228;
    border: 1px solid #35353d;
    border-radius: 9px;
    color: #e4e4e8;
    text-align: left;
    cursor: pointer;
}

.distance-origin-city-result:hover,
.distance-origin-city-result:focus-visible {
    background: #30272d;
    border-color: #755363;
    outline: none;
}

.distance-origin-city-result small {
    color: #8f8f97;
}

.distance-origin-city-empty {
    padding: 10px;
    border: 1px dashed #393942;
    border-radius: 8px;
    color: #85858e;
    font-size: 0.80rem;
}

.distance-origin-status {
    margin: 0;
    color: #9f9fa8;
    font-size: 0.78rem;
    line-height: 1.45;
}

.distance-origin-status.is-error {
    color: #e3a9b1;
}

[data-distance-value] {
    white-space: nowrap;
}


/* ============================================================
   V65 - THEME CLAIR
   ============================================================ */

html[data-theme="light"] .distance-origin-panel {
    background:
        linear-gradient(
            180deg,
            #fbf6f8,
            #f5f1f3
        );
    border-color: #d8c9cf;
}

html[data-theme="light"] .distance-origin-heading h2 {
    color: #2e272a;
}

html[data-theme="light"] .distance-origin-current {
    background: #efe2e7;
    border-color: #c9aeb8;
    color: #65404e;
}

html[data-theme="light"] .distance-origin-mode {
    background: #ffffff;
    border-color: #d6ced1;
    color: #393236;
}

html[data-theme="light"] .distance-origin-mode small {
    color: #756d71;
}

html[data-theme="light"] .distance-origin-mode:hover:not(:disabled),
html[data-theme="light"] .distance-origin-mode:focus-visible:not(:disabled) {
    background: #f4e9ed;
    border-color: #b58f9d;
}

html[data-theme="light"] .distance-origin-mode.is-active {
    background: #ead5dd;
    border-color: #b77b91;
    color: #3d2630;
}

html[data-theme="light"] .distance-origin-mode.is-active small {
    color: #734858;
}

html[data-theme="light"] .distance-origin-city-panel {
    background: #ffffff;
    border-color: #d7cdd1;
}

html[data-theme="light"] .distance-origin-city-panel label {
    color: #4e4549;
}

html[data-theme="light"] .distance-origin-city-result {
    background: #fbf8f9;
    border-color: #ddd3d7;
    color: #3e373a;
}

html[data-theme="light"] .distance-origin-city-result:hover,
html[data-theme="light"] .distance-origin-city-result:focus-visible {
    background: #f0e1e7;
    border-color: #bd98a6;
}

html[data-theme="light"] .distance-origin-city-result small {
    color: #756b70;
}

html[data-theme="light"] .distance-origin-status {
    color: #6d6468;
}

html[data-theme="light"] .distance-origin-status.is-error {
    color: #9b3f4e;
}


/* ============================================================
   V65 - RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {

    .distance-origin-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .distance-origin-current {
        max-width: none;
        width: fit-content;
        text-align: left;
    }

    .distance-origin-modes {
        grid-template-columns:
            1fr;
    }

    .distance-origin-mode {
        min-height: 55px;
    }

}

@media (max-width: 430px) {

    .distance-origin-panel {
        padding: 12px;
    }

    .distance-origin-current {
        width: 100%;
        justify-content: center;
    }

    .distance-origin-city-result {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

}


/* ============================================================
   V66 - GEOLOC COMPACT DANS LA BARRE DE NAVIGATION
   ============================================================ */

.geoloc-nav {
    position: relative;
    z-index: 160;
    flex-shrink: 0;
}

.geoloc-toggle {
    min-height: 34px;
    max-width: 210px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 11px;
    background: #222228;
    border: 1px solid #34343c;
    border-radius: 20px;
    color: #dedee3;
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.geoloc-toggle:hover,
.geoloc-toggle:focus-visible,
.geoloc-nav.is-open .geoloc-toggle {
    background: #303038;
    border-color: #6d5360;
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}

.geoloc-toggle-icon {
    flex: 0 0 auto;
    line-height: 1;
}

.geoloc-toggle-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 700;
}

.geoloc-toggle-mode {
    min-width: 0;
    max-width: 102px;
    overflow: hidden;
    color: #d7a9ba;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.geoloc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 170;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(1px);
}

.geoloc-backdrop[hidden] {
    display: none;
}

.geoloc-dropdown {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    z-index: 180;
    width: min(430px, calc(100vw - 24px));
    max-height: min(650px, calc(100vh - 96px));
    overflow: auto;
    padding: 15px;
    display: grid;
    gap: 12px;
    background: #18181d;
    border: 1px solid #40343a;
    border-radius: 16px;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.48);
}

.geoloc-dropdown[hidden] {
    display: none;
}

.geoloc-dropdown-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.geoloc-dropdown-heading h2 {
    margin: 2px 0 0;
    font-size: 1.05rem;
}

.geoloc-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #25252b;
    border: 1px solid #3d3d45;
    border-radius: 50%;
    color: #d8d8de;
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.geoloc-close:hover,
.geoloc-close:focus-visible {
    background: #352830;
    border-color: #795566;
    color: #ffffff;
    outline: none;
}

.geoloc-current {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    text-align: left;
}

.geoloc-modes {
    grid-template-columns: 1fr;
    gap: 7px;
}

.geoloc-modes .distance-origin-mode {
    min-height: 54px;
}

.geoloc-city-panel {
    padding: 10px;
}

.geoloc-status {
    padding-top: 2px;
}

.geoloc-privacy-note {
    margin: -3px 0 0;
    padding-top: 9px;
    border-top: 1px solid #303038;
    color: #7f7f88;
    font-size: 0.70rem;
    line-height: 1.4;
}

body.geoloc-menu-open {
    /* Sur bureau le défilement principal reste disponible.
       Le verrouillage réel est appliqué au format mobile. */
}


/* ============================================================
   V66 - THEME CLAIR
   ============================================================ */

html[data-theme="light"] .geoloc-toggle {
    background: #eee8ea;
    border-color: #d7cdd1;
    color: #332d31;
}

html[data-theme="light"] .geoloc-toggle:hover,
html[data-theme="light"] .geoloc-toggle:focus-visible,
html[data-theme="light"] .geoloc-nav.is-open .geoloc-toggle {
    background: #e2d9dc;
    border-color: #c4aeb7;
    color: #171519;
}

html[data-theme="light"] .geoloc-toggle-mode {
    color: #8a4f65;
}

html[data-theme="light"] .geoloc-backdrop {
    background: rgba(55, 42, 48, 0.13);
}

html[data-theme="light"] .geoloc-dropdown {
    background: #fbf8f9;
    border-color: #d8cbd0;
    box-shadow:
        0 24px 60px rgba(66, 48, 56, 0.22);
}

html[data-theme="light"] .geoloc-dropdown-heading h2 {
    color: #292327;
}

html[data-theme="light"] .geoloc-close {
    background: #eee8ea;
    border-color: #d5c9cd;
    color: #51474c;
}

html[data-theme="light"] .geoloc-close:hover,
html[data-theme="light"] .geoloc-close:focus-visible {
    background: #e4d7dc;
    border-color: #c3a8b2;
    color: #201b1e;
}

html[data-theme="light"] .geoloc-privacy-note {
    border-top-color: #ded4d8;
    color: #756b70;
}


/* ============================================================
   V66 - MOBILE : PANNEAU BAS
   ============================================================ */

@media (max-width: 760px) {

    body.geoloc-menu-open {
        overflow: hidden;
    }

    .geoloc-toggle {
        max-width: 180px;
    }

    .geoloc-toggle-mode {
        max-width: 78px;
    }

    .geoloc-backdrop {
        z-index: 1990;
        background: rgba(0, 0, 0, 0.58);
        backdrop-filter: blur(3px);
    }

    .geoloc-dropdown {
        position: fixed;
        left: 10px;
        right: 10px;
        top: auto;
        bottom: 10px;
        z-index: 2000;
        width: auto;
        max-height: min(78vh, 680px);
        padding: 15px;
        border-radius: 20px;
        box-shadow:
            0 -12px 50px rgba(0, 0, 0, 0.42);
    }

    .geoloc-dropdown::before {
        content: "";
        width: 42px;
        height: 4px;
        margin: -4px auto 2px;
        background: #575760;
        border-radius: 999px;
    }

    html[data-theme="light"] .geoloc-dropdown::before {
        background: #b8adb1;
    }

}

@media (max-width: 460px) {

    .geoloc-toggle {
        max-width: 154px;
        padding-left: 9px;
        padding-right: 9px;
        font-size: 0.81rem;
    }

    .geoloc-toggle-mode {
        max-width: 62px;
    }

    .geoloc-dropdown {
        left: 7px;
        right: 7px;
        bottom: 7px;
        padding: 13px;
    }

}


/* ============================================================
   V67 - SUPPRESSION COMPLETE DU COMPTE
   ============================================================ */

.profile-danger-panel {
    margin-top: 26px;
    padding: 20px;
    display: grid;
    gap: 17px;
    background:
        linear-gradient(
            180deg,
            rgba(88, 25, 35, 0.24),
            rgba(26, 18, 21, 0.98)
        );
    border: 1px solid #6f303b;
    border-radius: 16px;
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.20);
}

.profile-danger-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.profile-danger-heading h2 {
    margin: 5px 0 0;
    color: #ffffff;
}

.profile-danger-badge {
    display: inline-flex;
    width: fit-content;
    padding: 4px 9px;
    background: #5c202a;
    border: 1px solid #9d4554;
    border-radius: 999px;
    color: #ffc3cd;
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.profile-danger-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4b1c24;
    border: 1px solid #82404c;
    border-radius: 50%;
    color: #ffbdc8;
    font-size: 1.2rem;
}

.profile-danger-warning,
.account-delete-no-recovery {
    padding: 14px 15px;
    border-radius: 11px;
}

.profile-danger-warning {
    background: #3a191f;
    border: 1px solid #71323e;
}

.profile-danger-warning strong,
.account-delete-no-recovery strong {
    color: #ffd5dc;
}

.profile-danger-warning p,
.account-delete-no-recovery p {
    margin: 6px 0 0;
    color: #cdb6bb;
    line-height: 1.5;
}

.account-delete-summary {
    padding: 16px;
    background: #1d191b;
    border: 1px solid #3f3136;
    border-radius: 12px;
}

.account-delete-summary > p {
    margin: 0 0 10px;
    color: #e5dadd;
    font-weight: 700;
}

.account-delete-summary ul {
    margin: 0;
    padding-left: 22px;
    display: grid;
    gap: 8px;
    color: #bcb1b5;
    line-height: 1.48;
}

.account-delete-events-warning {
    color: #f0c1ca;
}

.account-delete-no-recovery {
    background: #281c20;
    border: 1px dashed #75404a;
}

.account-delete-form {
    display: grid;
    gap: 15px;
    padding-top: 2px;
}

.account-delete-field {
    display: grid;
    gap: 7px;
}

.account-delete-field label,
.account-delete-checkbox {
    color: #dfd5d8;
    font-weight: 700;
}

.account-delete-field input[type="text"],
.account-delete-field input[type="password"] {
    width: 100%;
    margin: 0;
    border-color: #65323d;
}

.account-delete-field input:focus {
    border-color: #bb6678;
    box-shadow:
        0 0 0 2px rgba(187, 102, 120, 0.13);
}

.account-delete-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    background: #23191c;
    border: 1px solid #51313a;
    border-radius: 10px;
    cursor: pointer;
    line-height: 1.45;
}

.account-delete-checkbox input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: #b64257;
}

.account-delete-phrase-state {
    color: #96878c;
    font-size: 0.76rem;
}

.account-delete-phrase-state.is-valid {
    color: #8dd0a4;
}

.account-delete-phrase-state.is-invalid {
    color: #efa4b0;
}

.account-delete-submit {
    min-height: 45px;
    padding: 10px 16px;
    background: #a52f43;
    border: 1px solid #d75c71;
    border-radius: 10px;
    color: #ffffff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}

.account-delete-submit:hover:not(:disabled),
.account-delete-submit:focus-visible:not(:disabled) {
    background: #bb3b52;
    border-color: #ee7185;
    transform: translateY(-1px);
    outline: none;
}

.account-delete-submit:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.account-delete-form.is-submitting {
    opacity: 0.72;
    pointer-events: none;
}


/* ============================================================
   V67 - PAGE APRES SUPPRESSION
   ============================================================ */

.account-deleted-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #0f0f13;
}

.account-deleted-shell {
    width: min(680px, 92%);
    padding: 40px 0;
}

.account-deleted-card {
    padding: 34px;
    text-align: center;
    background: #19191f;
    border: 1px solid #303039;
    border-radius: 20px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.34);
}

.account-deleted-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    background: #213428;
    border: 1px solid #41664e;
    border-radius: 50%;
    color: #b8e7c6;
    font-size: 1.55rem;
    font-weight: 900;
}

.account-deleted-card h1 {
    margin: 8px 0 14px;
    font-size: clamp(1.7rem, 5vw, 2.5rem);
}

.account-deleted-card p {
    color: #c0c0c8;
    line-height: 1.55;
}

.account-deleted-muted {
    margin-bottom: 24px;
    color: #8e8e98 !important;
    font-size: 0.84rem;
}


/* ============================================================
   V67 - THEME CLAIR
   ============================================================ */

html[data-theme="light"] .profile-danger-panel {
    background:
        linear-gradient(
            180deg,
            #fff4f6,
            #fbf7f8
        );
    border-color: #d7a0aa;
}

html[data-theme="light"] .profile-danger-heading h2 {
    color: #33272b;
}

html[data-theme="light"] .profile-danger-badge {
    background: #f3d8dd;
    border-color: #d89aa6;
    color: #7c3140;
}

html[data-theme="light"] .profile-danger-icon {
    background: #f5e0e4;
    border-color: #d6a0aa;
    color: #8d3e4d;
}

html[data-theme="light"] .profile-danger-warning {
    background: #f8e4e8;
    border-color: #d9a4ad;
}

html[data-theme="light"] .profile-danger-warning strong,
html[data-theme="light"] .account-delete-no-recovery strong {
    color: #6e2836;
}

html[data-theme="light"] .profile-danger-warning p,
html[data-theme="light"] .account-delete-no-recovery p {
    color: #71565e;
}

html[data-theme="light"] .account-delete-summary {
    background: #ffffff;
    border-color: #ddd0d4;
}

html[data-theme="light"] .account-delete-summary > p,
html[data-theme="light"] .account-delete-field label,
html[data-theme="light"] .account-delete-checkbox {
    color: #3d3236;
}

html[data-theme="light"] .account-delete-summary ul {
    color: #62565b;
}

html[data-theme="light"] .account-delete-events-warning {
    color: #82384a;
}

html[data-theme="light"] .account-delete-no-recovery,
html[data-theme="light"] .account-delete-checkbox {
    background: #fbf0f2;
    border-color: #dec1c7;
}

html[data-theme="light"] .account-delete-phrase-state {
    color: #72666b;
}

html[data-theme="light"] .account-delete-phrase-state.is-valid {
    color: #36734b;
}

html[data-theme="light"] .account-delete-phrase-state.is-invalid {
    color: #9b4050;
}


/* ============================================================
   V67 - RESPONSIVE
   ============================================================ */

@media (max-width: 620px) {

    .profile-danger-panel {
        padding: 15px;
    }

    .profile-danger-heading {
        align-items: center;
    }

    .profile-danger-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .account-deleted-card {
        padding: 24px 18px;
    }

}


/* ============================================================
   V68 - PWA / INSTALLATION
   ============================================================ */

.pwa-install-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 11px;
    background:
        linear-gradient(
            180deg,
            #2d2025,
            #22191d
        );
    border: 1px solid #69404c;
    border-radius: 20px;
    color: #f1d9e1;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.pwa-install-button[hidden] {
    display: none !important;
}

.pwa-install-button:hover,
.pwa-install-button:focus-visible {
    background:
        linear-gradient(
            180deg,
            #3a2730,
            #2c2025
        );
    border-color: #a45a70;
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}

.pwa-install-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pwa-install-label {
    white-space: nowrap;
}


/* Accueil public : même bouton, présenté comme une troisième action. */

.landing-actions .pwa-install-button {
    min-height: 46px;
    padding: 10px 18px;
    border-radius: 10px;
    backdrop-filter: blur(8px);
}


/* ============================================================
   V68 - PWA / PAGE HORS CONNEXION
   ============================================================ */

.pwa-offline-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(120, 52, 72, 0.18),
            transparent 42%
        ),
        #0c0c0f;
}

.pwa-offline-shell {
    width: min(620px, 92%);
    padding: 36px 0;
}

.pwa-offline-card {
    padding: 32px;
    text-align: center;
    background: #17171c;
    border: 1px solid #323239;
    border-radius: 20px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.38);
}

.pwa-offline-logo {
    width: 118px;
    height: 118px;
    display: block;
    margin: 0 auto 18px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.34);
}

.pwa-offline-card h1 {
    margin: 8px 0 14px;
    font-size: clamp(1.7rem, 5vw, 2.45rem);
}

.pwa-offline-card p {
    color: #c1c1c8;
    line-height: 1.56;
}

.pwa-offline-muted {
    margin-bottom: 24px;
    color: #8e8e98 !important;
    font-size: 0.86rem;
}


/* ============================================================
   V68 - THEME CLAIR
   ============================================================ */

html[data-theme="light"] .pwa-install-button {
    background:
        linear-gradient(
            180deg,
            #f3e7eb,
            #eadce1
        );
    border-color: #cfabb6;
    color: #663846;
}

html[data-theme="light"] .pwa-install-button:hover,
html[data-theme="light"] .pwa-install-button:focus-visible {
    background:
        linear-gradient(
            180deg,
            #ead9df,
            #e2d0d6
        );
    border-color: #b98595;
    color: #3b232b;
}


/* ============================================================
   V68 - RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {

    .pwa-install-label {
        max-width: 86px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

@media (max-width: 460px) {

    .pwa-install-button {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 0.81rem;
    }

    .pwa-install-label {
        max-width: 68px;
    }

    .landing-actions .pwa-install-label {
        max-width: none;
    }

    .pwa-offline-card {
        padding: 24px 18px;
    }

    .pwa-offline-logo {
        width: 96px;
        height: 96px;
        border-radius: 20px;
    }

}


/* ============================================================
   V70 - CONTACT MEMBRE -> WEBMASTER
   ============================================================ */

.webmaster-page {
    padding-top: 34px;
    padding-bottom: 48px;
}

.webmaster-header,
.webmaster-thread-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 28px;
}

.webmaster-header h1,
.webmaster-thread-header h1 {
    margin: 4px 0 10px;
}

.webmaster-contact-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    padding: 14px 16px;
    background: #17171c;
    border: 1px solid #34343c;
    border-radius: 14px;
}

.webmaster-contact-badge > span {
    font-size: 1.45rem;
}

.webmaster-contact-badge small,
.webmaster-contact-badge strong {
    display: block;
}

.webmaster-contact-badge small {
    color: #96969f;
    margin-bottom: 2px;
}

.webmaster-contact-badge strong {
    word-break: break-word;
}

.webmaster-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 24px;
    align-items: start;
}

.webmaster-panel,
.webmaster-reply-panel,
.webmaster-thread {
    background: #151519;
    border: 1px solid #2f2f36;
    border-radius: 18px;
    padding: 22px;
}

.webmaster-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.webmaster-panel-heading h2,
.webmaster-reply-panel h2 {
    margin: 2px 0 0;
}

.webmaster-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: #2a2025;
    border: 1px solid #5d3c49;
    color: #f0c5d3;
    font-weight: 700;
}

.webmaster-form {
    display: grid;
    gap: 11px;
}

.webmaster-form label {
    margin-top: 4px;
    font-weight: 700;
}

.webmaster-form input,
.webmaster-form select,
.webmaster-form textarea,
.admin-webmaster-reply-form textarea {
    width: 100%;
    color: #f4f4f6;
    background: #0f0f13;
    border: 1px solid #36363f;
    border-radius: 12px;
    padding: 12px 14px;
    outline: none;
}

.webmaster-form input:focus,
.webmaster-form select:focus,
.webmaster-form textarea:focus,
.admin-webmaster-reply-form textarea:focus {
    border-color: #8d6373;
    box-shadow: 0 0 0 3px rgba(141, 99, 115, 0.16);
}

.webmaster-form textarea,
.admin-webmaster-reply-form textarea {
    resize: vertical;
    min-height: 130px;
}

.webmaster-privacy-note {
    margin: 4px 0 6px;
    color: #a9a9b2;
    font-size: 0.9rem;
}

.webmaster-privacy-note a {
    color: #d29aae;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.webmaster-send-button {
    justify-self: start;
}

.webmaster-ticket-list {
    display: grid;
    gap: 12px;
}

.webmaster-ticket-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: #101014;
    border: 1px solid #2c2c33;
    border-radius: 13px;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

.webmaster-ticket-card:hover {
    border-color: #6d4a58;
    background: #19151a;
    transform: translateY(-1px);
}

.webmaster-ticket-card-top,
.webmaster-thread-meta,
.admin-webmaster-ticket-meta,
.admin-webmaster-ticket-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 12px;
}

.webmaster-ticket-number {
    color: #9b9ba4;
    font-size: 0.86rem;
    font-weight: 700;
}

.webmaster-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid #44444d;
    background: #232329;
    color: #dedee4;
}

.webmaster-status-waiting_webmaster {
    border-color: #815064;
    background: #2f1f26;
    color: #f1bacd;
}

.webmaster-status-waiting_user {
    border-color: #5c6687;
    background: #202534;
    color: #c8d0f1;
}

.webmaster-status-closed {
    border-color: #4d5f53;
    background: #1d2921;
    color: #bcd5c3;
}

.webmaster-empty,
.admin-empty-state {
    padding: 28px 18px;
    text-align: center;
    color: #a4a4ad;
    border: 1px dashed #383840;
    border-radius: 14px;
}

.webmaster-empty > span {
    display: block;
    margin-bottom: 8px;
    font-size: 1.5rem;
}

.webmaster-back-link {
    display: inline-flex;
    margin-bottom: 14px;
    color: #c6a3af;
    font-weight: 700;
}

.webmaster-thread-meta {
    color: #a7a7b0;
    margin-top: 10px;
}

.webmaster-thread {
    display: grid;
    gap: 14px;
    margin-bottom: 24px;
}

.webmaster-message {
    max-width: 82%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #303039;
}

.webmaster-message-user {
    margin-left: auto;
    background: #261b21;
    border-color: #593847;
}

.webmaster-message-admin {
    margin-right: auto;
    background: #1c2028;
    border-color: #3c465d;
}

.webmaster-message header,
.admin-webmaster-message header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.webmaster-message time,
.admin-webmaster-message time {
    color: #92929b;
    font-size: 0.78rem;
}

.webmaster-message-content,
.admin-webmaster-message-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.webmaster-reply-panel {
    display: grid;
    gap: 16px;
}

.site-webmaster-link {
    font-weight: 700;
}


/* ============================================================
   V70 - ADMIN WEBMASTER
   ============================================================ */

.admin-stat-alert {
    border-color: #6a3b4c !important;
    background: #24171d !important;
}

.admin-primary-button,
.admin-secondary-button,
.admin-danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.admin-primary-button {
    background: #5b3544;
    border-color: #7c4a5e;
    color: #ffffff;
}

.admin-primary-button:hover {
    background: #704153;
}

.admin-secondary-button {
    background: #24242a;
    border-color: #44444d;
    color: #f0f0f2;
}

.admin-secondary-button:hover {
    background: #303038;
}

.admin-danger-button {
    background: #3a1d22;
    border-color: #6f343e;
    color: #ffd7dd;
}

.admin-danger-button:hover {
    background: #4b252c;
}

.admin-webmaster-dashboard-summary,
.admin-webmaster-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 20px;
}

.admin-webmaster-dashboard-summary > div,
.admin-webmaster-stat {
    display: grid;
    gap: 4px;
    padding: 16px;
    background: #18181d;
    border: 1px solid #313138;
    border-radius: 13px;
}

.admin-webmaster-dashboard-summary strong,
.admin-webmaster-stat strong {
    font-size: 1.6rem;
}

.admin-webmaster-dashboard-summary span,
.admin-webmaster-stat span {
    color: #a7a7b0;
}

.admin-webmaster-stat {
    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-webmaster-stat:hover,
.admin-webmaster-stat.active {
    border-color: #775064;
    transform: translateY(-1px);
}

.admin-webmaster-list,
.admin-webmaster-dashboard-list {
    display: grid;
    gap: 10px;
}

.admin-webmaster-ticket-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 28px;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: #141419;
    border: 1px solid #2f2f37;
    border-radius: 12px;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.admin-webmaster-ticket-row:hover {
    border-color: #70495a;
    background: #1c181c;
}

.admin-webmaster-ticket-id {
    color: #b2919d;
    font-weight: 800;
}

.admin-webmaster-ticket-main {
    min-width: 0;
}

.admin-webmaster-ticket-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.admin-webmaster-ticket-title strong {
    overflow-wrap: anywhere;
}

.admin-webmaster-ticket-meta {
    margin-top: 7px;
    color: #9a9aa3;
    font-size: 0.86rem;
}

.admin-webmaster-open {
    color: #b895a2;
    font-size: 1.3rem;
    text-align: right;
}

.admin-webmaster-ticket-heading {
    display: grid;
    gap: 8px;
}

.admin-webmaster-ticket-summary {
    margin-top: 6px;
    color: #b9b9c0;
}

.admin-webmaster-thread {
    display: grid;
    gap: 14px;
    margin: 24px 0;
}

.admin-webmaster-message {
    max-width: 82%;
    padding: 15px 17px;
    border-radius: 15px;
    border: 1px solid #34343c;
}

.admin-webmaster-message-user {
    margin-right: auto;
    background: #1e2027;
    border-color: #3b4558;
}

.admin-webmaster-message-admin {
    margin-left: auto;
    background: #2a1d23;
    border-color: #5d3b49;
}

.admin-webmaster-reply-form {
    display: grid;
    gap: 12px;
}

.admin-webmaster-reply-form .admin-primary-button {
    justify-self: start;
}

.admin-webmaster-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 900px) {

    .webmaster-header,
    .webmaster-thread-header {
        display: grid;
    }

    .webmaster-contact-badge {
        min-width: 0;
        width: 100%;
    }

    .webmaster-layout {
        grid-template-columns: 1fr;
    }

    .admin-webmaster-dashboard-summary,
    .admin-webmaster-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .webmaster-message,
    .admin-webmaster-message {
        max-width: 94%;
    }

}

@media (max-width: 560px) {

    .webmaster-panel,
    .webmaster-reply-panel,
    .webmaster-thread {
        padding: 16px;
        border-radius: 14px;
    }

    .admin-webmaster-dashboard-summary,
    .admin-webmaster-stats {
        grid-template-columns: 1fr;
    }

    .admin-webmaster-ticket-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .admin-webmaster-open {
        display: none;
    }

    .webmaster-message,
    .admin-webmaster-message {
        max-width: 100%;
    }

    .webmaster-message header,
    .admin-webmaster-message header {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

}

html[data-theme="light"] .webmaster-contact-badge,
html[data-theme="light"] .webmaster-panel,
html[data-theme="light"] .webmaster-reply-panel,
html[data-theme="light"] .webmaster-thread,
html[data-theme="light"] .webmaster-ticket-card {
    background: #ffffff;
    border-color: #d8d8df;
}

html[data-theme="light"] .webmaster-form input,
html[data-theme="light"] .webmaster-form select,
html[data-theme="light"] .webmaster-form textarea {
    color: #202026;
    background: #f8f8fa;
    border-color: #cfcfd7;
}

html[data-theme="light"] .webmaster-message-user {
    background: #f9edf2;
    border-color: #dfb8c7;
}

html[data-theme="light"] .webmaster-message-admin {
    background: #eef1f7;
    border-color: #c7cfdf;
}

html[data-theme="light"] .webmaster-privacy-note,
html[data-theme="light"] .webmaster-thread-meta {
    color: #666672;
}


/* ============================================================
   V70.1 - REPONSES WEBMASTER NON LUES DANS LA MESSAGERIE
   ============================================================ */

.messaging-webmaster-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin: 0 0 22px;
    padding: 18px;
    background: linear-gradient(
        135deg,
        rgba(92, 54, 70, 0.28),
        rgba(24, 24, 29, 0.96)
    );
    border: 1px solid #5b3b49;
    border-radius: 16px;
}

.messaging-webmaster-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #34222a;
    border: 1px solid #70495a;
    color: #f0bfd0;
    font-size: 1.35rem;
}

.messaging-webmaster-content {
    min-width: 0;
}

.messaging-webmaster-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.messaging-webmaster-title-row h2 {
    margin: 2px 0 7px;
}

.messaging-webmaster-unread,
.webmaster-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 28px;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #a65773;
    color: #ffffff;
    border: 1px solid #c47792;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(166, 87, 115, 0.24);
}

.webmaster-new-badge {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 0.72rem;
}

.messaging-webmaster-button {
    white-space: nowrap;
}

@media (max-width: 720px) {

    .messaging-webmaster-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .messaging-webmaster-button {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: center;
    }

}

html[data-theme="light"] .messaging-webmaster-card {
    background: linear-gradient(
        135deg,
        #f8eaf0,
        #ffffff
    );
    border-color: #d9b0bf;
}

html[data-theme="light"] .messaging-webmaster-icon {
    background: #f2dce5;
    border-color: #d3a3b5;
    color: #733f54;
}


/* ============================================================
   V71 - MESSAGERIE UNIFIEE
   ============================================================ */

.v71-messaging-page {
    padding-bottom: 72px;
}

.v71-messaging-header,
.v71-admin-messaging-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 38px 0 24px;
    border-bottom: 1px solid #2d2d34;
}

.v71-messaging-header h1,
.v71-admin-messaging-header h1 {
    margin: 4px 0 8px;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.02;
}

.v71-messaging-header p,
.v71-admin-messaging-header p {
    max-width: 760px;
    margin-bottom: 0;
}

.v71-new-message-button {
    flex-shrink: 0;
}

.v71-messaging-region {
    padding-top: 16px;
}

.v71-conversation-list,
.v71-admin-conversation-list {
    display: grid;
    gap: 1px;
    overflow: hidden;
    background: #292930;
    border: 1px solid #292930;
    border-radius: 16px;
}

.v71-conversation-row,
.v71-admin-conversation-row {
    display: grid;
    align-items: center;
    min-width: 0;
    background: #17171c;
    transition:
        background 0.16s ease,
        transform 0.16s ease;
}

.v71-conversation-row {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
}

.v71-admin-conversation-row {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
}

.v71-conversation-row:hover,
.v71-admin-conversation-row:hover {
    background: #1d1d23;
}

.v71-conversation-row.has-unread,
.v71-admin-conversation-row.has-unread {
    background:
        linear-gradient(
            90deg,
            rgba(97, 47, 64, 0.34),
            #19191e 34%
        );
}

.v71-conversation-avatar,
.v71-admin-avatar,
.v71-chat-avatar {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #303038;
    color: #ffffff;
    font-weight: 800;
}

.v71-conversation-avatar,
.v71-admin-avatar {
    width: 58px;
    height: 58px;
}

.v71-chat-avatar {
    width: 50px;
    height: 50px;
}

.v71-conversation-avatar img,
.v71-admin-avatar img,
.v71-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v71-webmaster-avatar {
    background:
        radial-gradient(
            circle at 32% 26%,
            #6f4656,
            #2d1d24 70%
        );
    border: 1px solid #81576a;
    color: #f3cad8;
    font-size: 1.35rem;
}

.v71-presence-dot {
    position: absolute;
    right: 1px;
    bottom: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #686873;
    border: 2px solid #17171c;
}

.v71-presence-dot.is-online {
    background: #4fc16b;
}

.v71-conversation-body,
.v71-admin-conversation-main {
    min-width: 0;
}

.v71-conversation-topline,
.v71-admin-conversation-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.v71-conversation-name,
.v71-admin-conversation-top > div {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.v71-conversation-name strong,
.v71-admin-conversation-top strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
    font-size: 1rem;
}

.v71-conversation-type,
.v71-webmaster-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid #41414a;
    background: #24242a;
    color: #bdbdc5;
    font-size: 0.68rem;
    line-height: 1.2;
}

.v71-webmaster-label {
    border-color: #654252;
    background: #2b1f25;
    color: #e0b2c2;
}

.v71-conversation-topline time,
.v71-admin-conversation-top time {
    flex-shrink: 0;
    color: #81818b;
    font-size: 0.74rem;
}

.v71-conversation-bottomline,
.v71-admin-conversation-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-top: 5px;
}

.v71-conversation-bottomline p,
.v71-admin-conversation-bottom p {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #aaaab3;
    font-size: 0.88rem;
}

.v71-you {
    color: #d7d7dc;
}

.v71-webmaster-sender {
    color: #d7a9b9;
}

.v71-unread-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 999px;
    background: #b8495d;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
}

.v71-conversation-subject,
.v71-admin-last-ticket {
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #797982;
    font-size: 0.72rem;
}

.v71-messaging-empty {
    max-width: 620px;
    margin: 52px auto;
    padding: 34px 28px;
    text-align: center;
    background: #17171c;
    border: 1px solid #2d2d34;
    border-radius: 18px;
}

.v71-messaging-empty-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #29232a;
    border: 1px solid #4c3945;
    font-size: 1.55rem;
}

.v71-messaging-empty h2 {
    margin: 0 0 8px;
}

.v71-messaging-empty p {
    margin: 0 0 20px;
    color: #9898a1;
}


/* ============================================================
   V71 - CHAT MEMBRE
   ============================================================ */

.v71-chat-body {
    min-height: 100vh;
}

.v71-chat-page,
.v71-admin-chat-page {
    padding-top: 18px;
    padding-bottom: 24px;
}

.v71-chat-shell,
.v71-admin-chat-shell {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 610px;
    height: min(78vh, 820px);
    background: #121216;
    border: 1px solid #2e2e35;
    border-radius: 18px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.26);
}

.v71-chat-header,
.v71-admin-chat-header {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 14px;
    background:
        linear-gradient(
            90deg,
            #1c1c22,
            #17171c
        );
    border-bottom: 1px solid #303038;
}

.v71-chat-back {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #24242a;
    border: 1px solid #3b3b44;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
}

.v71-chat-back:hover {
    background: #303038;
}

.v71-chat-person,
.v71-admin-chat-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.v71-chat-person-main,
.v71-admin-chat-person > div:last-child {
    min-width: 0;
}

.v71-chat-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.v71-chat-name-row h1,
.v71-admin-chat-person h1 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
    font-size: 1.05rem;
}

.v71-chat-presence,
.v71-webmaster-subtitle,
.v71-admin-chat-person span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    color: #85858f;
    font-size: 0.74rem;
}

.v71-chat-presence .v71-presence-dot {
    position: static;
    width: 9px;
    height: 9px;
    border: none;
}

.v71-chat-profile-link {
    padding: 7px 10px;
    border-radius: 9px;
    color: #a8a8b0;
    font-size: 0.78rem;
}

.v71-chat-profile-link:hover {
    background: #26262c;
    color: #ffffff;
}

.v71-chat-messages {
    flex: 1;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px clamp(12px, 2.5vw, 28px) 22px;
    background:
        radial-gradient(
            circle at 50% -12%,
            rgba(91, 62, 75, 0.15),
            transparent 42%
        ),
        #101014;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.v71-chat-messages.is-empty {
    align-items: center;
    justify-content: center;
}

.v71-chat-day-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0;
    pointer-events: none;
}

.v71-chat-day-separator span {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid #313139;
    border-radius: 999px;
    background: rgba(31, 31, 37, 0.92);
    color: #8e8e98;
    font-size: 0.69rem;
    font-weight: 700;
}

.v71-chat-messages .message-bubble {
    max-width: min(76%, 720px);
}

.v71-chat-messages .message-meta {
    margin-top: 5px;
}

.v71-new-messages-button {
    position: absolute;
    right: 18px;
    bottom: 104px;
    z-index: 5;
    padding: 8px 12px;
    border: 1px solid #684654;
    border-radius: 999px;
    background: #37262e;
    color: #f0d2dc;
    font-size: 0.76rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.v71-chat-composer {
    position: relative;
    z-index: 4;
    flex-shrink: 0;
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
    background: rgba(24, 24, 29, 0.98);
    border-top: 1px solid #303038;
    backdrop-filter: blur(12px);
}

.v71-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.v71-chat-composer textarea {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 140px;
    resize: none;
    margin: 0;
    padding: 11px 13px;
    overflow-y: auto;
    border: 1px solid #3b3b44;
    border-radius: 15px;
    background: #0f0f13;
    color: #ffffff;
    line-height: 1.35;
}

.v71-chat-composer textarea:focus {
    outline: none;
    border-color: #7a5362;
    box-shadow: 0 0 0 3px rgba(122, 83, 98, 0.14);
}

.v71-send-button {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 15px;
    border-radius: 13px;
}

.v71-send-icon {
    display: none;
}

.v71-composer-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px;
    color: #73737d;
    font-size: 0.68rem;
}

.v71-webmaster-chat-note,
.v71-admin-chat-note {
    margin-top: 6px;
    color: #777781;
    font-size: 0.68rem;
}

.v71-webmaster-message-row {
    display: flex;
    width: 100%;
}

.v71-webmaster-message-row.is-sent {
    justify-content: flex-end;
}

.v71-webmaster-message-row.is-received {
    justify-content: flex-start;
}

.v71-webmaster-message-bubble {
    max-width: min(76%, 720px);
    padding: 10px 12px 8px;
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.v71-webmaster-message-row.is-sent
.v71-webmaster-message-bubble {
    background: #3c2932;
    border: 1px solid #65414f;
    border-bottom-right-radius: 5px;
}

.v71-webmaster-message-row.is-received
.v71-webmaster-message-bubble {
    background: #222229;
    border: 1px solid #35353e;
    border-bottom-left-radius: 5px;
}

.v71-ticket-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 7px;
    color: #ae8d99;
    font-size: 0.66rem;
}

.v71-ticket-context span {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
}

.v71-message-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #f0f0f3;
    line-height: 1.5;
}

.v71-message-time {
    margin-top: 6px;
    text-align: right;
    color: #898993;
    font-size: 0.66rem;
}


/* ============================================================
   V71 - ADMIN MESSAGERIE
   ============================================================ */

.v71-admin-messaging-page {
    padding-bottom: 52px;
}

.v71-admin-email {
    color: #777781;
    font-size: 0.75rem;
}

.v71-admin-chat-shell {
    height: min(76vh, 820px);
}

.v71-admin-chat-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.v71-admin-chat-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.v71-admin-chat-messages {
    padding-left: clamp(12px, 2.5vw, 30px);
    padding-right: clamp(12px, 2.5vw, 30px);
}

.v71-admin-chat-composer {
    background: #19191f;
}


/* ============================================================
   V71 - MOBILE
   ============================================================ */

@media (max-width: 700px) {

    /*
     * Sur une conversation, la barre générale devient volontairement
     * compacte : le bouton retour du chat devient la navigation principale.
     * Cela libère beaucoup de hauteur sur téléphone.
     */
    .v71-chat-body > .topbar {
        min-height: 54px;
        padding: 10px 5%;
        flex-direction: row;
        align-items: center;
    }

    .v71-chat-body > .topbar nav {
        display: none;
    }

    .v71-chat-body > .topbar .logo {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .v71-chat-body > .admin-topbar {
        min-height: 54px;
        padding: 10px 5%;
        flex-direction: row;
        align-items: center;
    }

    .v71-chat-body > .admin-topbar .admin-topbar-actions {
        display: none;
    }

    .v71-chat-body > .admin-topbar .admin-topbar-badge {
        margin-left: 8px;
    }

    .v71-messaging-page,
    .v71-chat-page {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .v71-messaging-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        padding: 24px 5% 18px;
    }

    .v71-messaging-header h1 {
        font-size: 2.25rem;
    }

    .v71-messaging-header p {
        font-size: 0.9rem;
    }

    .v71-new-message-button {
        width: 100%;
    }

    .v71-messaging-region {
        padding-top: 0;
    }

    .v71-conversation-list {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .v71-conversation-row {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 11px;
        padding: 13px 5%;
    }

    .v71-conversation-avatar {
        width: 50px;
        height: 50px;
    }

    .v71-conversation-type {
        display: none;
    }

    .v71-conversation-topline time {
        font-size: 0.68rem;
    }

    .v71-conversation-name strong {
        max-width: 180px;
    }

    .v71-conversation-subject {
        display: none;
    }

    .v71-chat-page {
        padding-top: 0;
        padding-bottom: 0;
    }

    .v71-chat-shell {
        min-height: 560px;
        height: 72dvh;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .v71-chat-header {
        min-height: 64px;
        padding: 8px 10px;
    }

    .v71-chat-avatar {
        width: 44px;
        height: 44px;
    }

    .v71-chat-profile-link {
        padding: 7px;
        font-size: 0.72rem;
    }

    .v71-chat-name-row h1 {
        max-width: 150px;
    }

    .v71-chat-messages {
        padding: 12px 9px 18px;
    }

    .v71-chat-messages .message-bubble,
    .v71-webmaster-message-bubble {
        max-width: 88%;
    }

    .v71-composer-meta {
        display: none;
    }

    .v71-chat-composer {
        padding: 9px 9px calc(9px + env(safe-area-inset-bottom));
    }

    .v71-send-label {
        display: none;
    }

    .v71-send-icon {
        display: inline;
        font-size: 1.05rem;
    }

    .v71-send-button {
        width: 46px;
        padding: 0;
        border-radius: 50%;
    }

    .v71-new-messages-button {
        right: 12px;
        bottom: 82px;
    }

    .v71-webmaster-chat-note {
        display: none;
    }

    .v71-admin-messaging-header {
        align-items: stretch;
        flex-direction: column;
        padding: 20px 0;
    }

    .v71-admin-conversation-row {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .v71-admin-avatar {
        width: 48px;
        height: 48px;
    }

    .v71-admin-email,
    .v71-admin-last-ticket {
        display: none;
    }

    .v71-admin-chat-shell {
        min-height: 560px;
        height: 72dvh;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .v71-admin-chat-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .v71-admin-chat-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 50px;
    }

    .v71-admin-chat-note {
        display: none;
    }

}


/* ============================================================
   V71 - THEME CLAIR
   ============================================================ */

html[data-theme="light"] .v71-conversation-list,
html[data-theme="light"] .v71-admin-conversation-list {
    background: #d8d8df;
    border-color: #d8d8df;
}

html[data-theme="light"] .v71-conversation-row,
html[data-theme="light"] .v71-admin-conversation-row,
html[data-theme="light"] .v71-messaging-empty,
html[data-theme="light"] .v71-chat-shell {
    background: #ffffff;
}

html[data-theme="light"] .v71-conversation-row:hover,
html[data-theme="light"] .v71-admin-conversation-row:hover {
    background: #f5f5f8;
}

html[data-theme="light"] .v71-conversation-row.has-unread,
html[data-theme="light"] .v71-admin-conversation-row.has-unread {
    background:
        linear-gradient(
            90deg,
            #f8e7ed,
            #ffffff 38%
        );
}

html[data-theme="light"] .v71-conversation-name strong,
html[data-theme="light"] .v71-admin-conversation-top strong,
html[data-theme="light"] .v71-chat-name-row h1 {
    color: #202026;
}

html[data-theme="light"] .v71-chat-header {
    background: #ffffff;
    border-bottom-color: #d8d8df;
}

html[data-theme="light"] .v71-chat-messages {
    background:
        radial-gradient(
            circle at 50% -12%,
            rgba(120, 87, 101, 0.09),
            transparent 42%
        ),
        #f6f6f8;
}

html[data-theme="light"] .v71-chat-day-separator span {
    background: #ffffff;
    border-color: #d5d5dc;
    color: #686873;
}

html[data-theme="light"] .v71-chat-composer {
    background: rgba(255, 255, 255, 0.97);
    border-top-color: #d8d8df;
}

html[data-theme="light"] .v71-chat-composer textarea {
    background: #f7f7f9;
    border-color: #cfcfd7;
    color: #202026;
}

html[data-theme="light"]
.v71-webmaster-message-row.is-received
.v71-webmaster-message-bubble {
    background: #ffffff;
    border-color: #d5d5dc;
}

html[data-theme="light"]
.v71-webmaster-message-row.is-received
.v71-message-content {
    color: #202026;
}


.v71-chat-presence.is-online .v71-presence-dot {
    background: #4fc16b;
}


.v71-unread-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    color: #d990a7;
    font-size: 0.69rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.v71-unread-divider::before,
.v71-unread-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #6f394b;
}

.v71-unread-divider span {
    flex-shrink: 0;
}


/* ============================================================
   V71.1 - MESSAGERIE SIMPLIFIEE + CONTACT ORGANISATEUR
   ============================================================ */

.v71-messaging-page {
    padding-top: 20px;
}

.v71-messaging-region {
    padding-top: 0;
}


/*
 * La carte soirée reste entièrement cliquable vers son détail.
 * L'enveloppe est un second lien indépendant placé au-dessus
 * de la carte : aucun lien HTML n'est imbriqué dans un autre.
 */
.event-tile {
    position: relative;
}

.event-tile-message-shortcut {
    position: absolute;
    top: 54px;
    right: 11px;
    z-index: 7;

    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: rgba(18, 18, 22, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;

    backdrop-filter: blur(8px);

    color: #f1d9e1;
    font-size: 0.92rem;

    box-shadow:
        0
        5px
        16px
        rgba(0, 0, 0, 0.30);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.event-tile-message-shortcut:hover,
.event-tile-message-shortcut:focus-visible {
    transform: scale(1.07);
    background: #3b2b34;
    border-color: #755464;
    color: #ffffff;
    outline: none;
}

.event-tile-message-shortcut:active {
    transform: scale(0.96);
}

@media (max-width: 700px) {

    .v71-messaging-page {
        padding-top: 8px;
    }

    .event-tile-message-shortcut {
        top: 50px;
        right: 9px;
        width: 32px;
        height: 32px;
        font-size: 0.86rem;
    }

}

html[data-theme="light"] .event-tile-message-shortcut {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(46, 35, 40, 0.25);
    color: #5e3e4b;
    box-shadow:
        0
        4px
        13px
        rgba(0, 0, 0, 0.16);
}

html[data-theme="light"] .event-tile-message-shortcut:hover,
html[data-theme="light"] .event-tile-message-shortcut:focus-visible {
    background: #f2e4e9;
    border-color: #b8899a;
    color: #3f2731;
}


/* ============================================================
   V71.2 - CONTEXTES DE CONVERSATION : PRIVE / SOIREE
   ============================================================ */

.v712-context-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid #41414a;
    font-size: 0.66rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.v712-context-pill.is-private {
    background: #222229;
    border-color: #42424b;
    color: #b8b8c0;
}

.v712-context-pill.is-event {
    background: #302027;
    border-color: #684452;
    color: #edbdcd;
}

.v712-conversation-event {
    box-shadow:
        inset 3px 0 0 #6e4555;
}

.v712-conversation-private {
    box-shadow:
        inset 3px 0 0 transparent;
}

.v712-conversation-context-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-top: 5px;
    color: #c79aaa;
    font-size: 0.76rem;
}

.v712-conversation-context-line strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #d8acbc;
}

.v712-conversation-context-line > span {
    flex-shrink: 0;
    color: #8f7580;
}

.v712-conversation-context-line.is-private {
    color: #777781;
}

.v712-archived-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid #4a4a52;
    border-radius: 999px;
    background: #24242a;
    color: #9b9ba4 !important;
    font-size: 0.62rem;
    font-weight: 700;
}


/* Bandeau de contexte placé entre l'interlocuteur et l'historique. */

.v712-chat-context {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    padding: 10px 15px;
    border-bottom: 1px solid #303038;
}

.v712-chat-context-event {
    background:
        linear-gradient(
            90deg,
            #281c22,
            #1d181c
        );
    border-bottom-color: #513541;
}

a.v712-chat-context-event:hover {
    background:
        linear-gradient(
            90deg,
            #322129,
            #211b20
        );
}

.v712-chat-context-private {
    background: #17171c;
}

.v712-chat-context-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #24242a;
    border: 1px solid #3a3a43;
    color: #d5d5db;
    font-size: 1rem;
}

.v712-chat-context-event
.v712-chat-context-icon {
    background: #3a2630;
    border-color: #654352;
    color: #f0bfd0;
}

.v712-chat-context-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.v712-chat-context-kicker {
    color: #888892;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.v712-chat-context-event
.v712-chat-context-kicker {
    color: #aa7d8d;
}

.v712-chat-context-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f0f0f3;
    font-size: 0.88rem;
}

.v712-chat-context-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9a8790;
    font-size: 0.7rem;
}

.v712-chat-context-open {
    color: #c79aaa;
    font-size: 1.35rem;
}

.v712-chat-context-archived {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border: 1px solid #4d4146;
    border-radius: 999px;
    color: #a6939b;
    font-size: 0.62rem;
    font-weight: 700;
}

.v712-chat-context-event.is-archived {
    background:
        linear-gradient(
            90deg,
            #211b1e,
            #19171a
        );
    opacity: 0.9;
}


/* L'enveloppe placée sur une soirée ouvre maintenant explicitement
   une conversation dont le contexte est cette soirée. */

.event-tile-message-shortcut::after {
    content: "Soirée";
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(18, 18, 22, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cba2b1;
    font-size: 0.6rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s ease;
}

.event-tile-message-shortcut:hover::after,
.event-tile-message-shortcut:focus-visible::after {
    opacity: 1;
}


@media (max-width: 700px) {

    .v712-conversation-context-line {
        font-size: 0.7rem;
    }

    .v712-conversation-context-line > span:not(.v712-archived-label) {
        display: none;
    }

    .v712-chat-context {
        padding: 8px 10px;
    }

    .v712-chat-context-icon {
        width: 31px;
        height: 31px;
        border-radius: 9px;
        font-size: 0.9rem;
    }

    .v712-chat-context-kicker {
        font-size: 0.58rem;
    }

    .v712-chat-context-main strong {
        font-size: 0.8rem;
    }

    .v712-chat-context-meta {
        font-size: 0.64rem;
    }

    .v712-chat-context-open {
        font-size: 1.15rem;
    }

    .v712-chat-context-archived {
        font-size: 0.56rem;
    }

    .event-tile-message-shortcut::after {
        display: none;
    }

}


html[data-theme="light"] .v712-context-pill.is-private {
    background: #f1f1f4;
    border-color: #d2d2d9;
    color: #666670;
}

html[data-theme="light"] .v712-context-pill.is-event {
    background: #f7e8ee;
    border-color: #dab2c0;
    color: #744356;
}

html[data-theme="light"] .v712-conversation-event {
    box-shadow:
        inset 3px 0 0 #b77991;
}

html[data-theme="light"] .v712-conversation-context-line strong {
    color: #7a4659;
}

html[data-theme="light"] .v712-conversation-context-line.is-private {
    color: #73737d;
}

html[data-theme="light"] .v712-chat-context-private {
    background: #fbfbfc;
    border-bottom-color: #d8d8df;
}

html[data-theme="light"] .v712-chat-context-event {
    background:
        linear-gradient(
            90deg,
            #faedf2,
            #fff8fb
        );
    border-bottom-color: #dfbdca;
}

html[data-theme="light"] .v712-chat-context-main strong {
    color: #29292f;
}

html[data-theme="light"] .v712-chat-context-event
.v712-chat-context-kicker,
html[data-theme="light"] .v712-chat-context-meta {
    color: #875d6c;
}

html[data-theme="light"] .v712-chat-context-event
.v712-chat-context-icon {
    background: #f3dce5;
    border-color: #d1a6b6;
    color: #744356;
}



/* ==========================================================
   V72 - BIBLIOTHÈQUE PERSONNELLE D'AFFICHES
   ========================================================== */

.v72-poster-library-picker {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}

.v72-poster-library-heading,
.v72-library-page-header,
.v72-profile-poster-library-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.v72-poster-library-heading h3,
.v72-profile-poster-library-shortcut h2 {
    margin: 0.2rem 0 0.35rem;
}

.v72-poster-library-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    opacity: 0.65;
}

.v72-poster-library-manage-link {
    white-space: nowrap;
    font-weight: 700;
}

.v72-poster-library-grid,
.v72-library-management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

.v72-poster-library-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.v72-poster-library-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.v72-poster-library-image,
.v72-library-management-image {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 2px solid transparent;
    aspect-ratio: 3 / 4;
}

.v72-poster-library-image img,
.v72-library-management-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v72-poster-library-card input:checked + .v72-poster-library-image {
    border-color: currentColor;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.v72-poster-library-check {
    position: absolute;
    right: 0.55rem;
    top: 0.55rem;
    display: none;
    width: 1.7rem;
    height: 1.7rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-weight: 900;
}

.v72-poster-library-card input:checked + .v72-poster-library-image .v72-poster-library-check {
    display: flex;
}

.v72-poster-library-caption {
    display: block;
    margin-top: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

.v72-poster-library-selection-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.v72-poster-library-selection-info {
    font-size: 0.86rem;
    opacity: 0.8;
}

.v72-poster-library-clear,
.v72-library-delete-button {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.v72-poster-library-empty,
.v72-library-page-empty {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
}

.v72-poster-library-empty p {
    margin: 0.25rem 0 0;
}

.v72-poster-library-page {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.v72-library-page-header {
    margin-bottom: 1.5rem;
}

.v72-library-management-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.v72-library-management-card {
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}

.v72-library-management-meta {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.7rem;
}

.v72-library-management-meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v72-library-management-meta span {
    font-size: 0.8rem;
    opacity: 0.68;
}

.v72-library-delete-form {
    margin-top: 0.8rem;
}

.v72-profile-poster-library-shortcut {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 720px) {
    .v72-poster-library-heading,
    .v72-library-page-header,
    .v72-profile-poster-library-shortcut {
        align-items: flex-start;
        flex-direction: column;
    }

    .v72-poster-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v72-library-management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
   V73 - ERGONOMIE MOBILE / MENU PROFIL COULISSANT
   ============================================================ */

.v73-mobile-menu-trigger,
.v73-mobile-topbar-balance,
.v73-mobile-menu-layer {
    display: none;
}


/* Le navigateur bureau V72 reste visuellement inchangé. */
.v73-desktop-member-nav {
    min-width: 0;
}


@media (max-width: 700px) {

    /* --------------------------------------------------------
       Barre membre compacte
       -------------------------------------------------------- */

    .v73-member-topbar {
        position: sticky;
        top: 0;
        z-index: 420;

        min-height: 68px;
        width: 100%;

        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        align-items: center;
        justify-content: initial;
        gap: 8px;

        padding:
            max(8px, env(safe-area-inset-top))
            14px
            8px;

        background: rgba(21, 21, 25, 0.96);
        border-bottom: 1px solid #2a2a30;

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .v73-member-topbar .v73-desktop-member-nav {
        display: none;
    }

    .v73-member-logo {
        min-width: 0;
        max-width: 100%;

        justify-self: center;
        align-self: center;

        color: #ffffff;
        font-size: clamp(0.92rem, 4.5vw, 1.14rem);
        font-weight: 800;
        letter-spacing: clamp(2.7px, 1vw, 4px);
        line-height: 1;
        text-align: center;
        white-space: nowrap;
    }

    .v73-member-logo::after {
        margin-top: 5px;
        font-size: 0.80rem;
    }

    .v73-mobile-menu-trigger {
        position: relative;

        display: grid;
        place-items: center;

        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;

        overflow: visible;

        background: #222228;
        border: 1px solid #3d3d47;
        border-radius: 13px;

        color: #ffffff;

        box-shadow:
            0 5px 18px rgba(0, 0, 0, 0.24);
    }

    .v73-mobile-menu-trigger:active {
        transform: scale(0.97);
    }

    .v73-mobile-menu-avatar {
        width: 100%;
        height: 100%;

        object-fit: cover;
        border-radius: 12px;
    }

    .v73-mobile-menu-avatar-fallback {
        display: grid;
        place-items: center;

        background:
            linear-gradient(
                145deg,
                #41414b,
                #242429
            );

        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .v73-mobile-menu-badge {
        position: absolute;
        top: -6px;
        right: -7px;

        min-width: 20px;
        height: 20px;
        padding: 0 5px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        background: #c94d68;
        border: 2px solid #151519;
        border-radius: 999px;

        color: #ffffff;
        font-size: 0.68rem;
        font-weight: 800;
        line-height: 1;
    }

    .v73-mobile-topbar-balance {
        display: block;
        width: 44px;
        height: 44px;
        justify-self: end;
    }


    /* --------------------------------------------------------
       Calque et tiroir
       -------------------------------------------------------- */

    .v73-mobile-menu-layer {
        position: fixed;
        inset: 0;
        z-index: 2100;

        display: block;

        visibility: hidden;
        pointer-events: none;
    }

    .v73-mobile-menu-backdrop {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;

        background: rgba(0, 0, 0, 0.64);
        border: 0;
        border-radius: 0;

        opacity: 0;

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);

        transition: opacity 0.24s ease;
    }

    .v73-mobile-menu-drawer {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;

        width: min(86vw, 350px);
        max-width: 350px;
        min-height: 100%;

        display: flex;
        flex-direction: column;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        padding:
            max(18px, env(safe-area-inset-top))
            16px
            max(20px, env(safe-area-inset-bottom));

        background:
            linear-gradient(
                180deg,
                #1a1a20 0%,
                #121216 100%
            );

        border-right: 1px solid #34343c;

        box-shadow:
            22px 0 55px rgba(0, 0, 0, 0.45);

        transform: translateX(-104%);

        transition:
            transform 0.28s cubic-bezier(0.2, 0.75, 0.2, 1);
    }

    body.v73-mobile-menu-open {
        overflow: hidden;
    }

    body.v73-mobile-menu-open
    .v73-mobile-menu-layer {
        visibility: visible;
        pointer-events: auto;
    }

    body.v73-mobile-menu-open
    .v73-mobile-menu-backdrop {
        opacity: 1;
    }

    body.v73-mobile-menu-open
    .v73-mobile-menu-drawer {
        transform: translateX(0);
    }


    /* --------------------------------------------------------
       Identité dans le tiroir
       -------------------------------------------------------- */

    .v73-mobile-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        padding-bottom: 16px;
        margin-bottom: 10px;

        border-bottom: 1px solid #303038;
    }

    .v73-mobile-drawer-profile {
        min-width: 0;

        display: flex;
        align-items: center;
        gap: 11px;

        color: #ffffff;
    }

    .v73-mobile-drawer-avatar {
        flex: 0 0 auto;

        width: 52px;
        height: 52px;

        object-fit: cover;

        border: 1px solid #4c4c56;
        border-radius: 15px;
    }

    .v73-mobile-drawer-identity {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .v73-mobile-drawer-identity strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 1rem;
    }

    .v73-mobile-drawer-identity small {
        color: #9898a2;
        font-size: 0.74rem;
    }

    .v73-mobile-menu-close {
        flex: 0 0 auto;

        width: 38px;
        height: 38px;
        padding: 0;

        display: grid;
        place-items: center;

        background: #24242a;
        border: 1px solid #3a3a43;
        border-radius: 12px;

        color: #cfcfd5;
        font-size: 1.55rem;
        line-height: 1;
    }


    /* --------------------------------------------------------
       Liens du tiroir
       -------------------------------------------------------- */

    .v73-mobile-drawer-nav {
        display: grid;
        gap: 5px;
    }

    .v73-mobile-drawer-link,
    .v73-mobile-drawer-logout {
        min-height: 48px;

        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;

        padding: 8px 11px;

        border: 1px solid transparent;
        border-radius: 13px;

        color: #d8d8de;
        font-size: 0.94rem;
        font-weight: 650;
    }

    .v73-mobile-drawer-link > span:first-child,
    .v73-mobile-drawer-logout > span:first-child {
        display: grid;
        place-items: center;

        color: #a9a9b2;
        font-size: 1rem;
    }

    .v73-mobile-drawer-link.active {
        background: #292930;
        border-color: #42424c;
        color: #ffffff;
    }

    .v73-mobile-drawer-link.active > span:first-child {
        color: #ffffff;
    }

    .v73-mobile-drawer-count {
        min-width: 25px;
        height: 25px;
        padding: 0 6px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        background: #a7445a;
        border-radius: 999px;

        color: #ffffff;
        font-size: 0.72rem;
    }


    /* --------------------------------------------------------
       Géolocalisation dans le tiroir
       -------------------------------------------------------- */

    .v73-mobile-drawer-geoloc {
        margin-top: 1px;
    }

    .v73-mobile-drawer-geoloc .geoloc-nav {
        width: 100%;
    }

    .v73-mobile-drawer-geoloc .geoloc-toggle {
        width: 100%;
        max-width: none;
        min-height: 48px;

        justify-content: flex-start;
        gap: 8px;

        padding: 8px 11px;

        background: transparent;
        border: 1px solid transparent;
        border-radius: 13px;

        color: #d8d8de;
        font-size: 0.94rem;
        font-weight: 650;
    }

    .v73-mobile-drawer-geoloc .geoloc-toggle:hover,
    .v73-mobile-drawer-geoloc .geoloc-toggle:focus-visible,
    .v73-mobile-drawer-geoloc .geoloc-nav.is-open .geoloc-toggle {
        background: #292930;
        border-color: #42424c;
        color: #ffffff;
    }

    .v73-mobile-drawer-geoloc .geoloc-toggle-icon {
        width: 28px;
        text-align: center;
    }

    .v73-mobile-drawer-geoloc .geoloc-toggle-mode {
        max-width: 92px;
        margin-left: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* --------------------------------------------------------
       Actions secondaires du tiroir
       -------------------------------------------------------- */

    .v73-mobile-drawer-secondary {
        display: grid;
        gap: 5px;

        margin-top: auto;
        padding-top: 18px;
    }

    .v73-mobile-drawer-control {
        display: block;
    }

    .v73-mobile-drawer-control .theme-toggle,
    .v73-mobile-drawer-control .pwa-install-button {
        width: 100%;
        max-width: none;
        min-height: 48px;

        justify-content: flex-start;
        gap: 10px;

        padding: 8px 11px;

        background: transparent;
        border: 1px solid transparent;
        border-radius: 13px;

        color: #d8d8de;
        font-size: 0.94rem;
        font-weight: 650;
    }

    .v73-mobile-drawer-control .theme-toggle:hover,
    .v73-mobile-drawer-control .theme-toggle:focus-visible,
    .v73-mobile-drawer-control .pwa-install-button:hover,
    .v73-mobile-drawer-control .pwa-install-button:focus-visible {
        background: #292930;
        border-color: #42424c;
        color: #ffffff;
    }

    .v73-mobile-drawer-control .theme-toggle-label,
    .v73-mobile-drawer-control .pwa-install-label {
        display: inline;
    }

    .v73-mobile-drawer-logout {
        margin-top: 5px;

        background: rgba(170, 67, 91, 0.10);
        border-color: rgba(194, 91, 115, 0.22);
        color: #e5b8c3;
    }


    /* --------------------------------------------------------
       Catalogue : plus de place utile sur téléphone
       -------------------------------------------------------- */

    .events-index-page .events-catalogue-hero {
        padding-top: 18px;
        padding-bottom: 14px;
    }

    .events-index-page .events-catalogue-hero h1 {
        font-size: clamp(1.72rem, 8vw, 2.05rem);
    }

}


@media (max-width: 560px) {

    .events-index-page .container {
        width: calc(100% - 24px);
    }

    .events-index-page .event-tiles-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .events-index-page .event-tile {
        border-radius: 15px;
    }

    .events-index-page .event-tile-visual {
        aspect-ratio: 4 / 3;
    }

    .events-index-page .event-tile-date {
        top: 10px;
        left: 10px;

        min-width: 46px;
        padding: 6px 8px;
        border-radius: 10px;
    }

    .events-index-page .event-tile-date-day {
        font-size: 1rem;
    }

    .events-index-page .event-tile-date-month {
        font-size: 0.74rem;
    }

    .events-index-page .event-tile-date-year {
        font-size: 0.58rem;
    }

    .events-index-page .event-tile-participants {
        top: 10px;
        right: 10px;

        min-height: 34px;
        padding: 6px 9px;
        gap: 5px;

        font-size: 0.78rem;
    }

    .events-index-page .event-tile-participants-icon {
        display: inline;
        font-size: 0.78rem;
    }

    .events-index-page .event-tile-info {
        right: 15px;
        bottom: 13px;
        left: 15px;
        padding-right: 24px;
    }

    .events-index-page .event-tile-info h2 {
        margin-bottom: 4px;
        font-size: clamp(1.15rem, 5.5vw, 1.45rem);
        line-height: 1.08;
    }

    .events-index-page .event-tile-location,
    .events-index-page .event-tile-organizer {
        font-size: 0.78rem;
    }

    .events-index-page .event-tile-open {
        right: 11px;
        bottom: 10px;
        font-size: 1.4rem;
    }

}


/* ============================================================
   V73 - THEME CLAIR
   ============================================================ */

@media (max-width: 700px) {

    html[data-theme="light"] .v73-member-topbar {
        background: rgba(250, 247, 248, 0.96);
        border-bottom-color: #d9d1d4;
    }

    html[data-theme="light"] .v73-member-logo {
        color: #211e20;
    }

    html[data-theme="light"] .v73-member-logo::after {
        color: rgba(66, 56, 61, 0.62);
        text-shadow: none;
    }

    html[data-theme="light"] .v73-mobile-menu-trigger {
        background: #eee8ea;
        border-color: #d3c8cc;
        color: #252126;
        box-shadow: 0 5px 18px rgba(72, 54, 63, 0.12);
    }

    html[data-theme="light"] .v73-mobile-menu-badge {
        border-color: #faf7f8;
    }

    html[data-theme="light"] .v73-mobile-menu-drawer {
        background:
            linear-gradient(
                180deg,
                #fbf8f9 0%,
                #f3eef0 100%
            );
        border-right-color: #d8cfd2;
        box-shadow: 22px 0 55px rgba(68, 49, 58, 0.24);
    }

    html[data-theme="light"] .v73-mobile-drawer-header {
        border-bottom-color: #ddd4d7;
    }

    html[data-theme="light"] .v73-mobile-drawer-profile,
    html[data-theme="light"] .v73-mobile-drawer-link,
    html[data-theme="light"] .v73-mobile-drawer-geoloc .geoloc-toggle,
    html[data-theme="light"] .v73-mobile-drawer-control .theme-toggle,
    html[data-theme="light"] .v73-mobile-drawer-control .pwa-install-button {
        color: #302a2e;
    }

    html[data-theme="light"] .v73-mobile-drawer-avatar {
        border-color: #cbbec3;
    }

    html[data-theme="light"] .v73-mobile-drawer-identity small,
    html[data-theme="light"] .v73-mobile-drawer-link > span:first-child,
    html[data-theme="light"] .v73-mobile-drawer-logout > span:first-child {
        color: #756b70;
    }

    html[data-theme="light"] .v73-mobile-menu-close {
        background: #eee8ea;
        border-color: #d5c9cd;
        color: #51474c;
    }

    html[data-theme="light"] .v73-mobile-drawer-link.active,
    html[data-theme="light"] .v73-mobile-drawer-geoloc .geoloc-toggle:hover,
    html[data-theme="light"] .v73-mobile-drawer-geoloc .geoloc-toggle:focus-visible,
    html[data-theme="light"] .v73-mobile-drawer-geoloc .geoloc-nav.is-open .geoloc-toggle,
    html[data-theme="light"] .v73-mobile-drawer-control .theme-toggle:hover,
    html[data-theme="light"] .v73-mobile-drawer-control .theme-toggle:focus-visible,
    html[data-theme="light"] .v73-mobile-drawer-control .pwa-install-button:hover,
    html[data-theme="light"] .v73-mobile-drawer-control .pwa-install-button:focus-visible {
        background: #e9e1e4;
        border-color: #d1c3c8;
        color: #1f1b1e;
    }

    html[data-theme="light"] .v73-mobile-drawer-logout {
        background: rgba(174, 79, 101, 0.08);
        border-color: rgba(174, 79, 101, 0.20);
        color: #8f4054;
    }

}
/* ============================================================
   V73.1 - AJUSTEMENTS ERGONOMIQUES MOBILE
   - avatar parfaitement contenu dans la barre
   - repere hamburger universel sur l'avatar
   - cartes de soirees moins hautes sur telephone
   ============================================================ */

@media (max-width: 700px) {

    /* Le bouton garde une empreinte fixe et ne peut plus être agrandi
       par les dimensions intrinsèques d'une photo de profil. */
    .v73-mobile-menu-trigger {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        min-height: 44px;
        max-height: 44px;

        align-self: center;
        justify-self: start;

        padding: 2px;

        box-sizing: border-box;
        overflow: visible;
        isolation: isolate;
    }

    .v73-mobile-menu-avatar {
        display: block;

        width: 38px;
        min-width: 38px;
        max-width: 38px;
        height: 38px;
        min-height: 38px;
        max-height: 38px;

        margin: 0;
        padding: 0;

        object-fit: cover;
        object-position: center;

        border-radius: 10px;
        overflow: hidden;

        line-height: 38px;
    }

    /* Petit indicateur de menu : l'avatar reste personnel mais le geste
       devient immédiatement compréhensible grâce au symbole hamburger. */
    .v73-mobile-menu-trigger::after {
        content: "☰";

        position: absolute;
        right: -5px;
        bottom: -5px;
        z-index: 3;

        width: 20px;
        height: 20px;

        display: grid;
        place-items: center;

        box-sizing: border-box;

        background: rgba(25, 25, 30, 0.97);
        border: 2px solid #151519;
        border-radius: 7px;

        color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -1px;

        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35);
        pointer-events: none;
    }

    .v73-mobile-menu-badge {
        z-index: 4;
    }

}


@media (max-width: 560px) {

    /* V73 utilisait un ratio 4:3 : agréable pour la photo, mais trop haut
       dans le catalogue. V73.1 conserve une seule colonne et rapproche
       l'encombrement vertical de celui des cartes membres. */
    .events-index-page .event-tiles-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .events-index-page .event-tile {
        border-radius: 14px;
    }

    .events-index-page .event-tile-visual {
        aspect-ratio: auto;
        height: clamp(198px, 54vw, 225px);
    }

    .events-index-page .event-tile-date {
        top: 9px;
        left: 9px;

        min-width: 43px;
        padding: 5px 7px;
        border-radius: 9px;
    }

    .events-index-page .event-tile-date-day {
        font-size: 0.94rem;
    }

    .events-index-page .event-tile-date-month {
        font-size: 0.68rem;
    }

    .events-index-page .event-tile-date-year {
        font-size: 0.54rem;
    }

    .events-index-page .event-tile-participants {
        top: 9px;
        right: 9px;

        min-height: 31px;
        padding: 5px 8px;

        font-size: 0.73rem;
    }

    .events-index-page .event-tile-participants-icon {
        font-size: 0.73rem;
    }

    .events-index-page .event-tile-message-shortcut {
        top: 47px;
        right: 9px;
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }

    .events-index-page .event-tile-info {
        right: 11px;
        bottom: 10px;
        left: 11px;
        padding-right: 22px;
    }

    .events-index-page .event-tile-info h2 {
        margin-bottom: 3px;
        font-size: clamp(1rem, 4.8vw, 1.22rem);
        line-height: 1.06;
    }

    .events-index-page .event-tile-location,
    .events-index-page .event-tile-organizer {
        font-size: 0.70rem;
    }

    .events-index-page .event-tile-organizer {
        margin-top: 3px;
    }

    .events-index-page .event-tile-open {
        right: 9px;
        bottom: 9px;
        font-size: 1.18rem;
    }

    /* Le thème clair utilise un cartouche sombre. On le compacte aussi
       pour restituer davantage de photographie malgré la carte plus basse. */
    html[data-theme="light"] .events-index-page .event-tile-info {
        right: 9px;
        bottom: 9px;
        left: 9px;

        padding: 8px 27px 8px 10px;
        border-radius: 9px;
    }

    html[data-theme="light"] .events-index-page .event-tile-info h2 {
        margin-bottom: 3px;
    }

}


@media (max-width: 360px) {

    .events-index-page .event-tile-visual {
        height: 190px;
    }

    .events-index-page .event-tile-info h2 {
        font-size: 0.96rem;
    }

    .events-index-page .event-tile-location,
    .events-index-page .event-tile-organizer {
        font-size: 0.64rem;
    }

}


/* V73.1 - déclinaison claire du petit repère hamburger. */
@media (max-width: 700px) {

    html[data-theme="light"] .v73-mobile-menu-trigger::after {
        background: rgba(255, 255, 255, 0.98);
        border-color: #faf7f8;
        color: #2a2528;
        box-shadow: 0 3px 9px rgba(72, 54, 63, 0.20);
    }

}

/* ============================================================
   V73.2 - GRILLE MOBILE 2 COLONNES + ENVELOPPES PLUS LISIBLES
   - soirées alignées sur l'ergonomie des cartes membres
   - raccourcis de messagerie plus visibles sur mobile
   ============================================================ */

@media (max-width: 560px) {

    /* Retour à deux cartes de soirée par ligne, comme les cartes membres.
       La carte redevient carrée afin d'offrir une lecture dense et homogène. */
    .events-index-page .event-tiles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .events-index-page .event-tile {
        border-radius: 11px;
    }

    .events-index-page .event-tile-visual {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .events-index-page .event-tile-date {
        top: 7px;
        left: 7px;
        min-width: 38px;
        padding: 5px 6px;
        border-radius: 8px;
    }

    .events-index-page .event-tile-date-day {
        font-size: 0.84rem;
    }

    .events-index-page .event-tile-date-month {
        font-size: 0.63rem;
    }

    .events-index-page .event-tile-date-year {
        font-size: 0.51rem;
    }

    .events-index-page .event-tile-participants {
        top: 7px;
        right: 7px;
        min-height: 28px;
        padding: 4px 7px;
        gap: 3px;
        font-size: 0.68rem;
    }

    .events-index-page .event-tile-participants-icon {
        display: inline;
        font-size: 0.68rem;
    }

    .events-index-page .event-tile-info {
        right: 9px;
        bottom: 8px;
        left: 9px;
        padding-right: 14px;
    }

    .events-index-page .event-tile-info h2 {
        margin-bottom: 3px;
        font-size: clamp(0.82rem, 4vw, 1rem);
        line-height: 1.08;
    }

    .events-index-page .event-tile-location,
    .events-index-page .event-tile-organizer {
        font-size: 0.64rem;
    }

    .events-index-page .event-tile-organizer {
        margin-top: 3px;
    }

    .events-index-page .event-tile-open {
        right: 7px;
        bottom: 6px;
        font-size: 1rem;
    }

    /* L'enveloppe des soirées est volontairement un peu plus présente
       sans empiéter sur le badge participants. */
    .events-index-page .event-tile-message-shortcut {
        top: 43px;
        right: 7px;
        width: 34px;
        height: 34px;
        font-size: 1.02rem;
    }

    /* Même traitement sur les cartes membres : on conserve le cercle
       existant mais l'icône reprend une taille immédiatement identifiable. */
    .members-index-page .member-tile-message,
    .participants-index-page .member-tile-message {
        width: 34px;
        height: 34px;
        font-size: 1.02rem;
    }

    /* En thème clair, le cartouche conserve les proportions des petites cartes. */
    html[data-theme="light"] .events-index-page .event-tile-info {
        right: 7px;
        bottom: 7px;
        left: 7px;
        padding: 7px 22px 7px 8px;
        border-radius: 8px;
    }

    html[data-theme="light"] .events-index-page .event-tile-info h2 {
        margin-bottom: 2px;
    }

}


@media (max-width: 360px) {

    .events-index-page .event-tiles-grid {
        gap: 7px;
    }

    .events-index-page .event-tile-visual {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .events-index-page .event-tile-message-shortcut {
        top: 39px;
        right: 5px;
        width: 32px;
        height: 32px;
        font-size: 0.96rem;
    }

    .members-index-page .member-tile-message,
    .participants-index-page .member-tile-message {
        width: 32px;
        height: 32px;
        font-size: 0.96rem;
    }

}