/* =========================================================
   SUBTOMEK - CARNET DE PLONGÉE
   Base graphique + préparation des futurs thèmes
   ========================================================= */


/* =========================================================
   THÈME PAR DÉFAUT : OCÉAN
   Plus tard, ces variables pourront changer selon le thème
   choisi par l'utilisateur.
   ========================================================= */

:root {
    --bg-main: #021a29;
    --bg-deep: #041c2c;
    --bg-middle: #07506d;
    --bg-light: #0b8aaf;

    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, .65);

    --glass-bg: rgba(255, 255, 255, .10);
    --glass-border: rgba(255, 255, 255, .14);

    --card-bg: #ffffff;
    --card-text: #082638;
    --card-muted: #74848c;

    --accent: #00a6cf;
    --accent-dark: #006d99;

    --nav-bg: rgba(2, 22, 34, .94);

    --radius-large: 24px;
    --radius-medium: 16px;
    --radius-small: 12px;

    --shadow-card: 0 15px 40px rgba(0, 0, 0, .20);
}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text-main);
    background: var(--bg-deep);
}

a {
    color: inherit;
}

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


/* =========================================================
   AUTHENTIFICATION
   ========================================================= */

.auth-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            var(--bg-light) 0%,
            var(--bg-middle) 35%,
            var(--bg-main) 75%
        );

    padding: 30px 18px;
}

.auth-container {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.brand {
    text-align: center;
    margin: 35px 0;
}

.brand strong {
    display: block;
    font-size: 2rem;
    letter-spacing: 4px;
}

.brand span {
    display: block;
    margin-top: 5px;
    opacity: .7;
}

.auth-card {
    background: rgba(255, 255, 255, .97);
    color: #092638;

    padding: 28px;

    border-radius: var(--radius-large);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .25);
}

.auth-card h1 {
    margin-top: 0;
    margin-bottom: 6px;
}

.auth-intro {
    color: #6a7c86;
    margin-top: 0;
    margin-bottom: 25px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group {
    margin-bottom: 17px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;

    font-size: .85rem;
    font-weight: 700;
}

.form-group input {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #d8e0e5;
    border-radius: var(--radius-small);

    outline: none;

    background: #f8fafb;
}

.form-group input:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(5, 140, 184, .12);
}

.btn {
    border: 0;
    cursor: pointer;
}

.btn-primary {
    width: 100%;
    padding: 15px;

    border-radius: 14px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        );

    font-weight: 800;
}

.auth-bottom {
    text-align: center;

    margin-bottom: 0;
    margin-top: 22px;

    color: #6a7c86;
}

.auth-bottom a {
    color: #007ca6;
    font-weight: 700;
}

.alert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.alert-error {
    background: #ffe9e9;
    color: #9d2525;
}


/* =========================================================
   APPLICATION
   ========================================================= */

.app-body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -10%,
            var(--bg-light) 0%,
            var(--bg-middle) 30%,
            #03283c 60%,
            var(--bg-main) 100%
        );

    background-attachment: fixed;
}

.app-shell {
    width: 100%;
    max-width: 520px;

    min-height: 100vh;

    margin: 0 auto;

    padding: 0 18px 110px;
}


/* =========================================================
   HEADER
   ========================================================= */

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 22px 2px 15px;
}

.app-header h1 {
    margin: 2px 0 0;

    font-size: 1.2rem;
}

.eyebrow {
    margin: 0;

    font-size: .62rem;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: .6;
}

.profile-bubble {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .25),
            rgba(255, 255, 255, .07)
        );

    border:
        2px solid rgba(255, 255, 255, .30);

    color: white;

    font-size: 1.1rem;
    font-weight: 800;

    text-decoration: none;

    overflow: hidden;
}

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


/* =========================================================
   BIENVENUE
   ========================================================= */

.welcome-section {
    margin: 14px 2px 22px;
}

.welcome-section p {
    margin: 0 0 2px;

    font-size: .78rem;

    opacity: .65;
}

.welcome-section h2 {
    margin: 0;

    font-size: 1.7rem;
}


/* =========================================================
   STATISTIQUES
   ========================================================= */

.stats-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    overflow: hidden;

    margin-bottom: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .16),
            rgba(255, 255, 255, .07)
        );

    border:
        1px solid var(--glass-border);

    border-radius: var(--radius-large);

    backdrop-filter: blur(12px);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .18);
}

.stat-item {
   min-height: 90px;

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

    padding: 15px 8px;

    text-align: center;
}

.stat-item:not(:last-child) {
    border-right:
        1px solid rgba(255, 255, 255, .10);
}

.stat-item strong {
    display: block;

    font-size: .95rem;

    line-height: 1.1;

    white-space: nowrap;
}

.stat-item:first-child strong {
    font-size: 1.2rem;
}

.stat-item span {
    display: block;

    margin-top: 5px;

    padding: 0 2px;

    font-size: .52rem;

    line-height: 1.15;

    opacity: .65;
}


/* =========================================================
   BOUTON AJOUTER UNE PLONGÉE
   ========================================================= */

.add-dive-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;

    margin: 18px 0 32px;

    padding: 16px;

    color: var(--card-text);
    background: var(--card-bg);

    border-radius: var(--radius-medium);

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .18);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.add-dive-button:active {
    transform: scale(.98);
}

.add-dive-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background: var(--card-text);
    color: white;

    font-size: 1.25rem;
    font-weight: 400;
}


/* =========================================================
   TITRES DE SECTIONS
   ========================================================= */

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.section-heading h2 {
    margin: 3px 0 0;

    font-size: 1.05rem;
}


/* =========================================================
   DERNIÈRE PLONGÉE
   ========================================================= */

.last-dive-section {
    margin-bottom: 20px;
}

.dive-card {
    overflow: hidden;

    background: var(--card-bg);
    color: var(--card-text);

    border-radius: 22px;

    box-shadow: var(--shadow-card);
}

.dive-card-content {
    padding: 20px;
}

.dive-card-content h3 {
    margin: 3px 0 5px;

    font-size: 1.3rem;
}

.dive-card-content > p:not(.dive-date) {
    margin: 4px 0 17px;

    color: var(--card-muted);

    font-size: .82rem;
}

.dive-date {
    margin: 0;

    color: #1680a2;

    font-size: .68rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.dive-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    margin-top: 18px;
}

.dive-data div {
    padding: 12px 5px;

    text-align: center;

    background: #f1f6f8;

    border-radius: var(--radius-small);
}

.dive-data strong {
    display: block;

    font-size: .88rem;
}

.dive-data span {
    display: block;

    margin-top: 4px;

    color: #74848c;

    font-size: .64rem;
}


/* =========================================================
   CLUB
   ========================================================= */

.club-card {
    margin-top: 20px;

    padding: 18px;

    background: var(--glass-bg);

    border:
        1px solid rgba(255, 255, 255, .10);

    border-radius: var(--radius-medium);
}

.club-card h2 {
    margin: 5px 0;

    font-size: 1rem;
}

.club-card > p:last-child {
    margin: 6px 0 0;

    font-size: .76rem;

    opacity: .65;

    line-height: 1.45;
}


/* =========================================================
   FORMULAIRE AJOUT PLONGÉE
   La fiche actuelle devient déjà plus propre.
   ========================================================= */

.content-card {
    padding: 22px;

    background: var(--card-bg);
    color: var(--card-text);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-card);
}

.content-card h2 {
    margin-top: 0;
}

.content-card form {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 22px;
}

.content-card label {
    margin-top: 8px;

    font-size: .78rem;
    font-weight: 800;
}

.content-card input,
.content-card textarea,
.content-card select {
    width: 100%;

    padding: 13px 14px;

    border:
        1px solid #d8e0e5;

    border-radius: var(--radius-small);

    outline: none;

    color: var(--card-text);
    background: #f7fafb;
}

.content-card input:focus,
.content-card textarea:focus,
.content-card select:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(0, 166, 207, .12);
}

.primary-button {
    width: 100%;

    margin-top: 18px;

    padding: 15px;

    border: 0;
    border-radius: 14px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        );

    font-weight: 800;

    cursor: pointer;
}

.success-message {
    margin: 15px 0;

    padding: 13px 14px;

    border-radius: var(--radius-small);

    background: #e6f8ef;
    color: #18744a;

    font-size: .85rem;
    font-weight: 700;
}

.error-message {
    margin: 15px 0;

    padding: 13px 14px;

    border-radius: var(--radius-small);

    background: #ffe9e9;
    color: #9d2525;

    font-size: .85rem;
}

.error-message p {
    margin: 3px 0;
}

/* =========================================================
   FORMULAIRE DE PLONGÉE - SECTIONS
   ========================================================= */

.dive-form-section {
    margin-top: 24px;
    padding: 18px;

    background: #f5f8f9;

    border: 1px solid #e5ecef;
    border-radius: var(--radius-medium);
}

.dive-form-section:first-of-type {
    margin-top: 18px;
}

.dive-form-section .eyebrow {
    color: var(--accent-dark);
    opacity: .75;
}

.dive-form-section h3 {
    margin: 4px 0 18px;

    color: var(--card-text);

    font-size: 1.05rem;
}

.dive-form-section label {
    display: block;

    margin-top: 14px;
}

.dive-form-section label:first-of-type {
    margin-top: 0;
}

/* =========================================================
   PALIERS
   ========================================================= */

.dive-stop-row {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 14px;
    padding: 14px 42px 14px 14px;

    background: white;

    border: 1px solid #dfe8ec;
    border-radius: 14px;
}

.dive-stop-row label {
    margin-top: 0;

    font-size: .68rem;
}

.dive-stop-row input {
    margin-top: 6px;
}

.add-stop-button {
    width: 100%;

    margin-top: 14px;
    padding: 12px;

    color: var(--accent-dark);
    background: rgba(0, 166, 207, .07);

    border: 1px dashed rgba(0, 109, 153, .35);
    border-radius: 12px;

    font-weight: 800;

    cursor: pointer;
}

.remove-stop-button {
    position: absolute;

    top: 50%;
    right: 10px;

    width: 28px;
    height: 28px;

    padding: 0;

    transform: translateY(-50%);

    color: #9d2525;
    background: #ffe9e9;

    border: 0;
    border-radius: 50%;

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

    cursor: pointer;
}

/* FUTURES SECTIONS */

.dive-form-coming {
    margin-top: 20px;
    padding: 16px;

    background: rgba(0, 166, 207, .06);

    border: 1px dashed rgba(0, 109, 153, .25);
    border-radius: var(--radius-medium);
}

.dive-form-coming .eyebrow {
    color: var(--accent-dark);
    opacity: .75;
}

.dive-form-coming p:last-child {
    margin: 7px 0 0;

    color: var(--card-muted);

    font-size: .75rem;
    line-height: 1.5;
}


/* ANNULER */

.dive-form-cancel {
    display: block;

    margin-top: 15px;

    color: var(--card-muted);

    text-align: center;
    text-decoration: none;

    font-size: .78rem;
}


/* =========================================================
   NAVIGATION BASSE
   ========================================================= */

.bottom-nav {
    position: fixed;

    bottom: 0;
    left: 50%;

    z-index: 100;

    display: grid;
    grid-template-columns: 1fr 1fr 70px 1fr;

    align-items: center;

    width: 100%;
    max-width: 520px;

    padding:
        10px 12px
        calc(10px + env(safe-area-inset-bottom));

    transform: translateX(-50%);

    background: var(--nav-bg);

    border-top:
        1px solid rgba(255, 255, 255, .10);

    backdrop-filter: blur(15px);
}

.bottom-nav a {
    display: block;

    text-align: center;

    text-decoration: none;

    font-size: .62rem;

    opacity: .55;
}

.bottom-nav a > span {
    display: block;

    margin-bottom: 3px;

    font-size: 1.25rem;
}

.bottom-nav a small {
    font-size: .62rem;
}

.bottom-nav a.active {
    opacity: 1;
}


/* =========================================================
   LIEN DÉCONNEXION TEMPORAIRE
   ========================================================= */

.app-shell > div a[href*="deconnexion"] {
    display: inline-block;

    padding: 8px 12px;

    font-size: .72rem;

    opacity: .55;

    text-decoration: none;
}


/* =========================================================
   FUTURS THÈMES

   Exemple :
   lorsqu'on ajoutera class="theme-night" au body,
   on pourra changer complètement l'ambiance sans refaire
   toutes les pages.
   ========================================================= */

/*
.theme-night {
    --bg-main: #050713;
    --bg-deep: #070a18;
    --bg-middle: #101a35;
    --bg-light: #17355c;

    --accent: #5e8cff;
    --accent-dark: #365dcc;
}

.theme-tropical {
    --bg-main: #06342f;
    --bg-deep: #06453e;
    --bg-middle: #087c70;
    --bg-light: #13ad9c;

    --accent: #13ad9c;
    --accent-dark: #087c70;
}
*/


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media (max-width: 380px) {

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .app-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .stat-item strong {
        font-size: 1.25rem;
    }

    .stat-item:first-child strong {
        font-size: 2rem;
    }

    .dive-data {
        gap: 5px;
    }

}



/* =========================================================
   HISTORIQUE DES PLONGÉES
   ========================================================= */

.dives-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 15px 2px 20px;
}

.dives-list-header h2 {
    margin: 0;

    font-size: 1.55rem;
}

.dives-list-header p {
    margin: 4px 0 0;

    font-size: .75rem;

    opacity: .6;
}


/* COMPTEUR */

.dives-count {
    min-width: 75px;

    padding: 10px 13px;

    text-align: center;

    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.dives-count strong {
    display: block;

    font-size: 1.25rem;
}

.dives-count span {
    display: block;

    margin-top: 2px;

    font-size: .58rem;

    opacity: .6;
}


/* FUTURE ZONE DE RECHERCHE */

.dives-filter-preview {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    padding: 13px 15px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
}

.dives-filter-preview > span {
    font-size: 1.25rem;

    opacity: .7;
}

.dives-filter-preview p {
    margin: 0;

    font-size: .72rem;

    opacity: .55;
}


/* LISTE */

.dives-list {
    display: flex;
    flex-direction: column;

    gap: 11px;
}


/* UNE PLONGÉE */

.dive-list-item {
    display: block;

    overflow: hidden;

    color: var(--card-text);
    background: var(--card-bg);

    border-radius: 18px;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .14);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.dive-list-item:active {
    transform: scale(.985);
}


/* DATE */

.dive-list-date {
    padding: 9px 15px;

    color: #1680a2;
    background: #f3f8fa;

    border-bottom: 1px solid #edf2f4;

    font-size: .62rem;
    font-weight: 800;

    letter-spacing: 1px;
}


/* CONTENU */

.dive-list-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 14px 15px;
}

.dive-list-info {
    min-width: 0;

    flex: 1;
}

.dive-list-info h3 {
    overflow: hidden;

    margin: 0;

    font-size: 1rem;

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

.dive-list-info p {
    overflow: hidden;

    margin: 4px 0 0;

    color: var(--card-muted);

    font-size: .67rem;

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


/* CHIFFRES */

.dive-list-numbers {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}

.dive-list-numbers > div {
    min-width: 54px;

    padding: 7px 6px;

    text-align: center;

    background: #f1f6f8;

    border-radius: 10px;
}

.dive-list-numbers strong {
    display: block;

    font-size: .72rem;
}

.dive-list-numbers span {
    display: block;

    margin-top: 2px;

    color: var(--card-muted);

    font-size: .52rem;
}


/* FLÈCHE */

.dive-list-arrow {
    margin-left: 2px;

    color: #1680a2 !important;

    font-size: 1.6rem !important;

    line-height: 1;
}


/* CARNET VIDE */

.empty-dives {
    padding: 35px 20px;

    text-align: center;

    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-large);
}

.empty-dives-icon {
    margin-bottom: 10px;

    font-size: 2.5rem;
}

.empty-dives h2 {
    margin: 0 0 5px;
}

.empty-dives p {
    margin: 0 0 20px;

    font-size: .8rem;

    opacity: .65;
}

.bottom-nav .nav-add {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin: -27px auto 0;

    background: white;
    color: var(--card-text);

    border-radius: 50%;

    opacity: 1;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .35);
}

.bottom-nav .nav-add span {
    margin: 0;

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



/* =========================================================
   AFFICHAGE DES PALIERS
   ========================================================= */

.dive-stop-display {
    display: grid;
    grid-template-columns: 1fr 35px 1fr;
    align-items: center;

    margin-top: 10px;
    padding: 14px;

    background: #f3f8fa;

    border: 1px solid #e5ecef;
    border-radius: 14px;

    text-align: center;
}

.dive-stop-display strong {
    display: block;

    color: var(--card-text);

    font-size: 1rem;
}

.dive-stop-display span {
    display: block;

    margin-top: 3px;

    color: var(--card-muted);

    font-size: .6rem;
}

.dive-stop-arrow {
    color: var(--accent);

    font-size: 1.2rem;
    font-weight: 800;
}

/* =========================================================
   PALIERS - RÉSUMÉ DE LA PLONGÉE
   ========================================================= */

.dive-summary-stops {
    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid #edf2f4;
}

.dive-summary-stops-title {
    margin: 0 0 8px !important;

    color: var(--card-muted) !important;

    font-size: .58rem !important;
    font-weight: 800;
    letter-spacing: 1px;
}

.dive-summary-stop {
    display: grid;

    grid-template-columns:
        1fr 1fr 32px 1fr 1fr;

    align-items: center;

    margin-top: 6px;
    padding: 9px 10px;

    background: #f3f8fa;

    border-radius: 10px;
}

.dive-summary-stop strong {
    color: var(--card-text);

    font-size: .75rem;
    text-align: center;
}

.dive-summary-stop span {
    color: var(--card-muted);

    font-size: .55rem;
    text-align: center;
}

.dive-summary-stop-arrow {
    color: var(--accent);

    text-align: center;
    font-weight: 800;
}
/* ESPACEMENT ENTRE LES BLOCS DE LA FICHE */

.dive-card + .content-card {
    margin-top: 18px;
}


/* =========================================================
   CARTES REPLIABLES
   ========================================================= */

.collapsible-card {
    padding: 0;
    overflow: hidden;
    margin-top: 8px;
}

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    padding: 18px 20px;

    color: var(--card-text);
    background: transparent;

    border: 0;

    text-align: left;
    cursor: pointer;
}

.collapsible-header small {
    display: block;

    margin-bottom: 4px;

    color: var(--accent-dark);

    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.collapsible-header strong {
    display: block;

    font-size: 1.05rem;
}

.collapsible-arrow {
    font-size: 1.25rem;

    transition: transform .2s ease;
}

.collapsible-content {
    display: none;

    padding: 0 20px 20px;
}

.collapsible-card.is-open .collapsible-content {
    display: block;
}

.collapsible-card.is-open .collapsible-arrow {
    transform: rotate(180deg);
}

/* =========================================================
   GAZ
   ========================================================= */

.gas-subsection {
    margin-top: 18px;
}

.gas-subsection h4 {
    margin: 0 0 4px;
}

.form-help {
    margin: 0 0 14px;
    font-size: .75rem;
    opacity: .7;
}

.deco-gas-row {
    position: relative;

    margin-top: 10px;
    padding: 12px;

    background: #f3f8fa;
    border-radius: 12px;
}

.deco-gas-field {
    margin-bottom: 8px;
}

.remove-deco-gas-button {
    width: 30px;
    height: 30px;

    margin-top: 6px;

    border: 0;
    border-radius: 50%;

    background: #e7eef1;

    font-size: 1.1rem;
    cursor: pointer;
}

#add-deco-gas-button {
    width: auto;
    display: inline-block;

    margin-top: 10px;
    padding: 9px 14px;

    font-size: .72rem;
}


/* =========================================================
   AFFICHAGE DÉCOMPRESSION & GAZ
   ========================================================= */

.dive-gas-group {
    margin-top: 18px;
}

.dive-gas-group:first-child {
    margin-top: 4px;
}

.dive-gas-title {
    margin: 0 0 8px;
    color: var(--card-muted);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.dive-gas-display {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 14px;

    background: #f3f8fa;
    border: 1px solid #e5ecef;
    border-radius: 12px;
}

.dive-gas-display strong {
    color: var(--card-text);
    font-size: .9rem;
}

.dive-gas-display span {
    color: var(--accent-dark);
    font-size: .75rem;
    font-weight: 800;
}

.dive-gas-switch {
    display: grid;
    grid-template-columns: 1fr 35px 1fr;
    align-items: center;

    margin-top: 8px;
    padding: 12px;

    background: #f3f8fa;
    border: 1px solid #e5ecef;
    border-radius: 12px;

    text-align: center;
}

.dive-gas-switch strong {
    display: block;
    color: var(--card-text);
    font-size: .85rem;
}

.dive-gas-switch span {
    display: block;
    margin-top: 3px;
    color: var(--card-muted);
    font-size: .58rem;
}

.dive-gas-arrow {
    color: var(--accent);
    font-weight: 800;
}

/* =========================================================
   THÈMES DU CARNET
   ========================================================= */


/* ---------------------------------------------------------
   OCÉAN
   Thème actuel / thème SUBTOMEK
   --------------------------------------------------------- */

.theme-ocean {
    --bg-main: #021a29;
    --bg-deep: #041c2c;
    --bg-middle: #07506d;
    --bg-light: #0b8aaf;

    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, .65);

    --glass-bg: rgba(255, 255, 255, .10);
    --glass-border: rgba(255, 255, 255, .14);

    --card-bg: #ffffff;
    --card-text: #082638;
    --card-muted: #74848c;

    --accent: #00a6cf;
    --accent-dark: #006d99;

    --nav-bg: rgba(2, 22, 34, .94);
}


/* ---------------------------------------------------------
   CARNET
   Inspiré cuir / papier / vieux carnet
   --------------------------------------------------------- */

.theme-pirate  {
    --bg-main: #3a2115;
    --bg-deep: #24140d;
    --bg-middle: #754522;
    --bg-light: #b5793d;

    --text-main: #fff3dc;
    --text-muted: rgba(255, 243, 220, .68);

    --glass-bg: rgba(255, 236, 200, .10);
    --glass-border: rgba(255, 224, 174, .18);

    --card-bg: #f3e2c3;
    --card-text: #402719;
    --card-muted: #80664e;

    --accent: #c77a32;
    --accent-dark: #8a471e;

    --nav-bg: rgba(42, 23, 14, .96);
}


/* ---------------------------------------------------------
   CRÉPUSCULE
   Bleu nuit / plongée du soir
   --------------------------------------------------------- */

.theme-crepuscule {
    --bg-main: #090d1b;
    --bg-deep: #101425;
    --bg-middle: #27324c;
    --bg-light: #6b536d;

    --text-main: #f7f2ec;
    --text-muted: rgba(247, 242, 236, .62);

    --glass-bg: rgba(255, 255, 255, .08);
    --glass-border: rgba(255, 255, 255, .12);

    --card-bg: #f5f1ec;
    --card-text: #252837;
    --card-muted: #747583;

    --accent: #d89a62;
    --accent-dark: #a75f3c;

    --nav-bg: rgba(9, 13, 27, .96);
}




/* =========================================================
   SÉLECTEUR DE THÈME - LABORATOIRE
   ========================================================= */

.theme-preview {
    margin: 0 0 18px;
    padding: 14px;

    background: var(--theme-card-dark, rgba(8, 35, 55, .85));

    border:
        1px solid var(--glass-border);

    border-radius: var(--radius-medium);

    backdrop-filter: blur(12px);
	
	color: #ffffff;
}

.theme-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.theme-preview-heading strong {
    display: block;

    margin-top: 3px;

    font-size: .88rem;
}

.theme-preview-heading > span {
    font-size: 1rem;
    opacity: .55;
}


.theme-selector {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px;
}


.theme-choice {
    display: flex;
    flex-direction: column;

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

    gap: 4px;

    min-width: 0;

    padding: 9px 5px;

   color: #ffffff;

    background:
        rgba(255, 255, 255, .07);

    border:
        1px solid var(--glass-border);

    border-radius: 11px;

    font-size: .64rem;
    font-weight: 700;

    cursor: pointer;

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


.theme-choice:active {
    transform: scale(.96);
}


.theme-choice-icon {
    font-size: 1.05rem;
}


.theme-choice.is-active {
    background:
        rgba(255, 255, 255, .20);

    border-color:
        rgba(255, 255, 255, .45);
}

/* =========================================================
   ACCUEIL - PLONGEUR / STATISTIQUES
   ========================================================= */

.stats-showcase {
    position: relative;

    margin-top: 115px;
}


/*
 * Illustration du plongeur.
 * Elle vient chevaucher le panneau de statistiques.
 */

.stats-guide {
    position: absolute;

    z-index: 2;

    top: -125px;
    left: 50%;

    width: 250px;

    transform: translateX(-50%);

    pointer-events: none;
}


.stats-guide-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 10px 14px rgba(0, 0, 0, .20)
        );
}


/*
 * Le panneau passe légèrement devant
 * le bas de l'illustration.
 */

.stats-showcase .stats-card {
    position: relative;

    z-index: 3;

    margin-bottom: 18px;
	border-radius:
    var(--radius-large)
    var(--radius-large)
    8px
    8px;
}



/* =========================================================
   ACCUEIL - DERNIÈRE PLONGÉE DANS LES STATISTIQUES
   ========================================================= */

.stats-last-dive {
    display: block;

   margin-top: 3px;
    padding: 14px 16px;

    color: var(--card-text);
    background: var(--card-bg);

    border-radius: var(--radius-medium);

    text-decoration: none;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .16);
		
		border-radius: 0 0 var(--radius-medium) var(--radius-medium);
}


.stats-last-dive-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.stats-last-dive-label {
    display: block;

    margin-bottom: 3px;

    color: var(--accent-dark);

    font-size: .55rem;
    font-weight: 800;

    letter-spacing: 1px;
}


.stats-last-dive-main strong {
    display: block;

    font-size: 1rem;
}


.stats-last-dive-main small {
    display: block;

    margin-top: 3px;

    color: var(--card-muted);

    font-size: .65rem;
}


.stats-last-dive-arrow {
    flex-shrink: 0;

    color: var(--accent);

    font-size: 1.8rem;

    line-height: 1;
}


.stats-last-dive-data {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 6px;

    margin-top: 11px;
    padding-top: 10px;

    border-top:
        1px solid rgba(0, 0, 0, .07);
}


.stats-last-dive-data > div {
    text-align: center;
}


.stats-last-dive-data strong {
    display: block;

    font-size: .78rem;
}


.stats-last-dive-data span {
    display: block;

    margin-top: 2px;

    color: var(--card-muted);

    font-size: .52rem;
}


/* =========================================================
   FORMULAIRE - ACCORDÉONS
   ========================================================= */

.dive-form-accordion {
    padding: 0;
    overflow: hidden;
}


.dive-form-accordion-toggle {
    width: 100%;

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

    gap: 16px;

    padding: 18px;

    border: 0;
    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;
}


.dive-form-accordion-toggle .eyebrow {
    display: block;

    margin-bottom: 4px;
}


.dive-form-accordion-toggle strong {
    display: block;

    font-size: 1.05rem;
}


.dive-form-accordion-arrow {
    flex-shrink: 0;

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

    opacity: .65;

    transition:
        transform .2s ease;
}


.dive-form-accordion-toggle[aria-expanded="true"]
.dive-form-accordion-arrow {
    transform: rotate(90deg);
}


.dive-form-accordion-content {
    padding:
        0 18px 18px;
}



/* =========================================================
   CREPUSCULE - FORMULAIRE NOUVELLE PLONGEE
   Inspiration ancien thème :
   mer sombre + lumière dorée
   ========================================================= */

.theme-crepuscule .dive-form-section {
    background:
        linear-gradient(
            145deg,
            rgba(39, 50, 76, .97),
            rgba(16, 20, 37, .99)
        );

    border:
        1px solid rgba(216, 154, 98, .22);

    color: #f7f2ec;

    box-shadow:
        0 10px 28px rgba(9, 13, 27, .34),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}


/* Petit titre : ESSENTIEL, PROFIL, CONDITIONS... */

.theme-crepuscule .dive-form-section .eyebrow {
    color: #f3dfae;
}


/* Gros titre du bloc */

.theme-crepuscule .dive-form-section h3,
.theme-crepuscule .dive-form-section h4,
.theme-crepuscule .dive-form-accordion-toggle strong {
    color: #f7f2ec;
}


/* Textes secondaires */

.theme-crepuscule .dive-form-section p,
.theme-crepuscule .dive-form-section .form-help,
.theme-crepuscule .dive-form-section label {
    color: rgba(247, 242, 236, .78);
}


/* Champs */

.theme-crepuscule .dive-form-section input,
.theme-crepuscule .dive-form-section select,
.theme-crepuscule .dive-form-section textarea {
    background: rgba(255, 255, 255, .96);

    color: #263f44;

    border-color:
        rgba(143, 198, 200, .70);
}


/* Champ sélectionné */

.theme-crepuscule .dive-form-section input:focus,
.theme-crepuscule .dive-form-section select:focus,
.theme-crepuscule .dive-form-section textarea:focus {
    border-color: #72c6cf;

    box-shadow:
        0 0 0 3px rgba(114, 198, 207, .18);
}


/* Flèche des accordéons */

.theme-crepuscule .dive-form-accordion-arrow {
    color: #d89a62;
    opacity: .90;
}

/* =========================================================
   CREPUSCULE - BLOC A COMPLETER / FUTURE VALIDATION
   ========================================================= */

.theme-crepuscule .dive-form-coming {
    background:
        linear-gradient(
            145deg,
            rgba(37, 82, 91, .18),
            rgba(27, 61, 70, .26)
        );

    border:
        1px dashed rgba(143, 198, 200, .45);

    color: #263f44;
}

.theme-crepuscule .dive-form-coming .eyebrow {
    color: #a75f3c;
}

.theme-crepuscule .dive-form-coming p {
    color: #5d6870;
}

/* =========================================================
   CREPUSCULE - BOUTON PRINCIPAL
   ========================================================= */

.theme-crepuscule .button-primary {
    background:
        linear-gradient(
            135deg,
            #62b7c0,
            #3d8d98
        );

    color: #ffffff;

    border-color: rgba(114, 198, 207, .45);

    box-shadow:
        0 8px 20px rgba(20, 53, 60, .24);
}

.theme-crepuscule .button-primary:hover {
    background:
        linear-gradient(
            135deg,
            #72c6cf,
            #469ba6
        );
}

/* =========================================================
   OCEAN - FORMULAIRE NOUVELLE PLONGEE
   Identité : bleu profond + lumière cyan
   ========================================================= */

.theme-ocean .dive-form-section {
    background:
        linear-gradient(
            145deg,
            rgba(7, 80, 109, .96),
            rgba(2, 42, 61, .98)
        );

    border:
        1px solid rgba(89, 195, 221, .30);

    color: #ffffff;

    box-shadow:
        0 10px 28px rgba(0, 28, 43, .30),
        inset 0 1px 0 rgba(255, 255, 255, .10);
}


/* Petit titre */

.theme-ocean .dive-form-section .eyebrow {
    color: #69d5ed;
}


/* Gros titre */

.theme-ocean .dive-form-section h3,
.theme-ocean .dive-form-section h4,
.theme-ocean .dive-form-accordion-toggle strong {
    color: #ffffff;
}


/* Textes secondaires */

.theme-ocean .dive-form-section p,
.theme-ocean .dive-form-section .form-help,
.theme-ocean .dive-form-section label {
    color: rgba(255, 255, 255, .78);
}


/* Champs */

.theme-ocean .dive-form-section input,
.theme-ocean .dive-form-section select,
.theme-ocean .dive-form-section textarea {
    background: rgba(255, 255, 255, .96);

    color: #082638;

    border-color: rgba(89, 195, 221, .65);
}


/* Focus */

.theme-ocean .dive-form-section input:focus,
.theme-ocean .dive-form-section select:focus,
.theme-ocean .dive-form-section textarea:focus {
    border-color: #00b8df;

    box-shadow:
        0 0 0 3px rgba(0, 184, 223, .18);
}


/* Flèche */

.theme-ocean .dive-form-accordion-arrow {
    color: #69d5ed;

    opacity: .90;
}


/* =========================================================
   PIRATE - FORMULAIRE NOUVELLE PLONGEE
   Identité : cuir sombre + parchemin + or
   ========================================================= */

.theme-pirate .dive-form-section {
    background:
        linear-gradient(
            145deg,
            rgba(105, 62, 31, .97),
            rgba(57, 32, 20, .99)
        );

    border:
        1px solid rgba(218, 169, 103, .35);

    color: #fff3dc;

    box-shadow:
        0 10px 28px rgba(42, 23, 14, .32),
        inset 0 1px 0 rgba(255, 239, 207, .10);
}


/* Petit titre */

.theme-pirate .dive-form-section .eyebrow {
    color: #e8b96f;
}


/* Gros titre */

.theme-pirate .dive-form-section h3,
.theme-pirate .dive-form-section h4,
.theme-pirate .dive-form-accordion-toggle strong {
    color: #fff3dc;
}


/* Textes secondaires */

.theme-pirate .dive-form-section p,
.theme-pirate .dive-form-section .form-help,
.theme-pirate .dive-form-section label {
    color: rgba(255, 243, 220, .78);
}


/* Champs */

.theme-pirate .dive-form-section input,
.theme-pirate .dive-form-section select,
.theme-pirate .dive-form-section textarea {
    background: rgba(255, 247, 232, .96);

    color: #402719;

    border-color: rgba(199, 122, 50, .55);
}


/* Focus */

.theme-pirate .dive-form-section input:focus,
.theme-pirate .dive-form-section select:focus,
.theme-pirate .dive-form-section textarea:focus {
    border-color: #c77a32;

    box-shadow:
        0 0 0 3px rgba(199, 122, 50, .18);
}


/* Flèche */

.theme-pirate .dive-form-accordion-arrow {
    color: #e8b96f;

    opacity: .90;
}



/* =========================================================
   BOUTON SUPPRIMER UN PALIER
   ========================================================= */

.remove-stop-button {
    width: 36px;
    height: 36px;

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

    flex: 0 0 36px;

    padding: 0;
    margin: 0;

    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 50%;

    background: rgba(0, 0, 0, .18);
    color: inherit;

    font-size: 24px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
}

.remove-stop-button:hover {
    background: rgba(0, 0, 0, .30);
}

.stop-row {
    align-items: end;
}


/* =========================================================
   ACCUEIL - PLONGEUR CLIQUABLE
   ========================================================= */

.stats-guide {
    pointer-events: auto;
}

.stats-guide-image {
    cursor: pointer;
}

/* =========================================================
   CARTE DE NIVEAU - AFFICHAGE PLEIN ÉCRAN
   ========================================================= */

#diver-document-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 20px;

    background: rgba(0, 10, 25, 0.88);
    backdrop-filter: blur(5px);

    cursor: pointer;
}

#diver-document-overlay[hidden] {
    display: none;
}

#diver-document-overlay img {
    display: block;

    max-width: 100%;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 14px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}


/* =========================================================
   SUBTOMEK - PORTE-DOCUMENTS RESPONSIVE
   ========================================================= */

/* Contenu centré */
.diver-documents-content {
    width: min(94vw, 650px);
    max-height: 94vh;

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

    gap: 14px;
}

/* Navigation */
.diver-documents-navigation {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 24px;
    width: 100%;
}

/* Grandes flèches tactiles */
#document-prev,
#document-next {
    width: 54px;
    height: 54px;

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

    border: 2px solid rgba(255,255,255,0.65);
    border-radius: 50%;

    background: rgba(0, 110, 160, 0.85);
    color: white;

    font-size: 26px;
    font-weight: bold;

    cursor: pointer;
    touch-action: manipulation;

    transition: background 0.2s, transform 0.2s;
}

#document-prev:hover,
#document-next:hover {
    background: #00a6cc;
    transform: scale(1.07);
}

/* Compteur */
#document-counter {
    color: white;
    font-size: 19px;
    font-weight: bold;
    min-width: 65px;
    text-align: center;
}

/* Pages des documents */
.diver-document-page {
    width: 100%;
    text-align: center;
}

.diver-document-page[hidden] {
    display: none;
}

/* Illustrations et documents */
.diver-document-page img {
    display: block;
    max-width: 100%;
    max-height: 68vh;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 14px;
}

/* Titres */
.diver-document-page p {
    color: white;
    font-size: 17px;
    font-weight: 600;
    margin: 12px 0 0;
}

/* Adaptation téléphone */
@media (max-width: 600px) {

    .diver-documents-content {
        width: 100%;
        gap: 18px;
    }

    .diver-documents-navigation {
        gap: 28px;
    }

    #document-prev,
    #document-next {
        width: 62px;
        height: 62px;
        font-size: 30px;
        flex-shrink: 0;
    }

    .diver-document-page img {
        max-height: 60vh;
    }

    .diver-document-page p {
        font-size: 16px;
    }
}

/* =========================================================
   PORTE-DOCUMENTS - DISPOSITION VERTICALE
   ========================================================= */

#diver-document-overlay .diver-documents-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

#diver-document-overlay .diver-document-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#diver-document-overlay .diver-document-page[hidden] {
    display: none;
}

#diver-document-overlay .diver-documents-navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 24px;
}

#diver-document-overlay .diver-document-page img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
}

@media (max-width: 600px) {
    #diver-document-overlay .diver-documents-content {
        width: 100%;
        gap: 14px;
    }

    #diver-document-overlay .diver-document-page img {
        max-height: 55vh;
    }
}





/* =========================================
   PROFIL - BOUTONS DES DOCUMENTS
   ========================================= */

.profile-document-item button[type="submit"] {
    width: 100%;
    padding: 14px 18px;
    margin-top: 10px;

    border: 0;
    border-radius: var(--radius-small);

    background: linear-gradient(
        135deg,
        var(--accent),
        var(--accent-dark)
    );

    color: #ffffff;
    font-weight: 800;
    font-size: .85rem;

    cursor: pointer;
    transition: transform .15s ease;
}

.profile-document-item button[type="submit"]:active {
    transform: scale(.98);
}


/* =========================================
   PROFIL - CHOIX DES DOCUMENTS
   ========================================= */

.document-file-label {
    display: block;
    position: relative;

    padding: 14px;
    border: 2px dashed var(--accent);
    border-radius: var(--radius-small);

    background: #f7fafb;
    color: var(--accent-dark);

    text-align: center;
    font-weight: 800;

    cursor: pointer;
}

.document-file-label input[type="file"] {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: pointer;
}

.document-file-label span {
    pointer-events: none;
}


/* PROFIL - NOM DU FICHIER SÉLECTIONNÉ */

.document-file-name {
    display: block;
    margin-top: 8px;

    color: var(--card-muted);
    font-size: .75rem;

    text-align: center;
    overflow-wrap: anywhere;
}

/* =========================================
   PROFIL - TITRES DES BLOCS REPLIABLES
   ========================================= */

details.content-card > summary {
    font-size: 1.05rem !important;
    font-weight: 800;
}


/* =========================================
   PROFIL - PLONGEURS AU-DESSUS DES STATS
   ========================================= */

.profile-showcase {
    margin-top: 115px;
}

.profile-showcase .stats-guide {
    top: -125px;
    width: 250px;
}

/* =========================================
   CARNET - PLONGEURS ET GRIMOIRE
   ========================================= */

.carnet-showcase {
    margin-top: 115px;
}

.carnet-showcase .stats-guide {
    top: -125px;
    width: 250px;
}

.carnet-showcase .dives-filter-preview {
    position: relative;
    margin-bottom: 0;
}


/* =========================================
   CARNET - PANNEAU IDENTIQUE AUX STATISTIQUES
   ========================================= */

.carnet-panel {
    position: relative;
    z-index: 3;

    padding: 18px;
    min-height: 100px;

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, .16),
        rgba(255, 255, 255, .07)
    );

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-large);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 15px 45px rgba(0, 0, 0, .18);
}


/* PROFIL - DOCUMENT DÉJÀ ENREGISTRÉ */

.document-existing {
    padding: 12px;
    background: #f3f8fa;
    border-radius: var(--radius-medium);
    text-align: center;
}

.document-thumbnail {
    display: block;
    width: 110px;
    height: 85px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 8px;
}

.document-existing p {
    color: #18744a;
    font-size: .78rem;
    font-weight: 800;
}

.document-replace-button {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--accent-dark);
    font-weight: 800;
    cursor: pointer;
}

.profile-document-item form[hidden],
.document-replace-button[hidden] {
    display: none !important;
}





/* ========================================
   CLUBS PARTENAIRES — SUBTOMEK
======================================== */

.clubs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0;
}

.club-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.club-item-name {
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 0;
}

.club-item-status {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
}

.club-item-status.is-active {
    background: rgba(70, 210, 150, 0.16);
    color: #a5f3d0;
}

.club-item-status.is-inactive {
    background: rgba(255, 190, 90, 0.16);
    color: #ffda9b;
}

.club-add-details {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 12px;
}

.club-add-details summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    list-style: none;
    padding: 7px 0;
}

.club-add-details summary::-webkit-details-marker {
    display: none;
}

.club-add-details summary:hover {
    opacity: 0.8;
}

.club-association {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.club-association label {
    font-size: 0.85rem;
    font-weight: 500;
}

.club-association input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    font-size: 0.95rem;
    background: #ffffff;
    color: #173449;
}

.club-association button {
    padding: 11px 15px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background: #ffffff;
    color: #12374b;
}

.club-association button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.club-association #messageAssociationClub {
    margin: 0;
    font-size: 0.85rem;
}

.club-association #confirmationAssociationClub {
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.club-association #confirmationAssociationClub[hidden] {
    display: none;
}


/* ========================================
   CLUBS PARTENAIRES — PROFIL SUBTOMEK
======================================== */

.profile-clubs {
    margin-top: 14px;
}

.profile-clubs-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.profile-clubs-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.profile-clubs-heading > span {
    font-size: 0.78rem;
    opacity: 0.7;
}

.profile-clubs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-club-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    background: rgba(100, 150, 180, 0.08);
}

.profile-club-item strong {
    font-size: 0.88rem;
    font-weight: 600;
    min-width: 0;
}

.profile-club-item .club-item-status {
    font-size: 0.72rem;
    padding: 4px 8px;
}

.profile-clubs .club-add-details {
    margin-top: 10px;
    padding-top: 8px;
}

.profile-clubs .club-add-details summary {
    font-size: 0.85rem;
}



/* ==========================================
   PROFIL — FORMULAIRE ASSOCIATION CLUB
   Contraste renforcé, compatible thèmes
========================================== */

.profile-clubs .club-association {
    padding: 15px;
    margin-top: 12px;
    border-radius: 12px;
    background: rgba(100, 160, 190, 0.10);
    border: 1px solid rgba(100, 160, 190, 0.25);
    gap: 12px;
}

/* Libellé du code */
.profile-clubs .club-association label {
    font-size: 0.9rem;
    font-weight: 700;
}

/* Champ de saisie */
.profile-clubs .club-association input[type="text"] {
    background: #ffffff;
    color: #173449;
    border: 2px solid #7ca8bd;
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    outline-offset: 3px;
}

/* Champ actif */
.profile-clubs .club-association input[type="text"]:focus {
    border-color: #2588b5;
    box-shadow: 0 0 0 3px rgba(37, 136, 181, 0.15);
}

/* Texte indicatif */
.profile-clubs .club-association input::placeholder {
    color: #718b9b;
    font-weight: 400;
}

/* Bouton principal */
.profile-clubs .club-association #btnAssocierClub {
    background: #237da5;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-weight: 700;
    padding: 13px 16px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.profile-clubs .club-association #btnAssocierClub:hover {
    background: #196587;
}

/* Confirmation */
.profile-clubs .club-association #confirmationAssociationClub {
    background: rgba(100, 160, 190, 0.12);
    border: 1px solid rgba(100, 160, 190, 0.25);
}

/* Bouton de confirmation */
.profile-clubs .club-association #btnConfirmerAssociationClub {
    background: #237da5;
    color: #ffffff;
}

/* Bouton annuler */
.profile-clubs .club-association #btnAnnulerAssociationClub {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
}




/* ==========================================
   FICHE PLONGÉE — EMPLACEMENT CARTE
========================================== */

.dive-site-map {
    margin-top: 22px;
}

.dive-site-map-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 700;
}

.dive-site-map-heading small {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.65;
}

.dive-site-map-preview {
    min-height: 135px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(
        135deg,
        rgba(35, 125, 165, 0.22),
        rgba(15, 60, 95, 0.38)
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 16px;
    text-align: center;
}

.dive-site-map-icon {
    font-size: 1.8rem;
    opacity: 0.85;
}

.dive-site-map-preview strong {
    font-size: 0.9rem;
}

.dive-site-map-preview small {
    font-size: 0.75rem;
    opacity: 0.75;
}


/* ==========================================
   FICHE PLONGÉE — GALERIE PHOTOS
========================================== */

.dive-photos-card {
    margin-top: 16px;
}

.dive-photos-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.dive-photos-heading .eyebrow {
    margin-bottom: 5px;
}

.dive-photos-heading h2 {
    margin: 0;
    font-size: 1.1rem;
}

.dive-photos-count {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(100, 170, 200, 0.16);
    font-size: 0.8rem;
    font-weight: 700;
}

.dive-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.dive-photo-slot {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 1px dashed rgba(130, 180, 210, 0.5);
    background: rgba(100, 160, 190, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.dive-photo-icon {
    font-size: 1.5rem;
}

.dive-photo-slot small {
    font-size: 0.72rem;
    opacity: 0.75;
}

.dive-photos-hint {
    margin: 13px 0 0;
    font-size: 0.78rem;
    opacity: 0.7;
}



/* Photos enregistrées dans la galerie */

.dive-photo-slot {
    overflow: hidden;
}

.dive-photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}


/* Miniature photo cliquable */

.dive-photo-link {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}


/* ==========================================
   PHOTOS DE PLONGÉE — AFFICHAGE EN GRAND
========================================== */

.dive-photo-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 12, 25, 0.94);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

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

.dive-photo-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 12px;
}

.dive-photo-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 1.8rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
}


/* Navigation dans les photos agrandies */

.dive-photo-lightbox-prev,
.dive-photo-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
}

.dive-photo-lightbox-prev {
    left: 10px;
}

.dive-photo-lightbox-next {
    right: 10px;
}

.dive-photo-lightbox button[hidden] {
    display: none;
}

.dive-photo-lightbox img {
    max-width: calc(100% - 90px);
}


/* Suppression des photos de plongée */

.dive-photo-slot {
    position: relative;
}

.dive-photo-delete-form {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
}

.dive-photo-delete-button {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(10, 25, 40, 0.8);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Photos de plongée — Finitions de la visionneuse
|--------------------------------------------------------------------------
*/

/* Flèches : style Océan */
.dive-photo-lightbox-prev,
.dive-photo-lightbox-next {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(12, 53, 78, 0.75);
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, transform 0.2s ease;
}

/* Position des flèches */
.dive-photo-lightbox-prev {
    left: 14px;
}

.dive-photo-lightbox-next {
    right: 14px;
}

/* Effet au survol sur ordinateur */
@media (hover: hover) {
    .dive-photo-lightbox-prev:hover,
    .dive-photo-lightbox-next:hover {
        background: rgba(22, 116, 153, 0.95);
        transform: translateY(-50%) scale(1.08);
    }
}

/* Croix de fermeture harmonisée */
.dive-photo-lightbox-close {
    top: 14px;
    right: 14px;
    background: rgba(12, 53, 78, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Photos plus grandes sur téléphone */
@media (max-width: 600px) {

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

    .dive-photo-lightbox img {
        max-width: 100%;
        max-height: 88dvh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
    }

    /* Flèches sur les côtés, par-dessus la photo */
    .dive-photo-lightbox-prev,
    .dive-photo-lightbox-next {
        width: 38px;
        height: 42px;
        font-size: 1.25rem;
        background: rgba(12, 53, 78, 0.55);
    }

    .dive-photo-lightbox-prev {
        left: 6px;
    }

    .dive-photo-lightbox-next {
        right: 6px;
    }

    .dive-photo-lightbox-close {
        top: 10px;
        right: 10px;
        z-index: 3;
    }
}



/*
|--------------------------------------------------------------------------
| Photos de plongée — Gestion repliable
|--------------------------------------------------------------------------
*/

.dive-photo-manager {
    margin-top: 16px;
}

.dive-photo-manager-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 13px 16px;
    border-radius: 12px;

    background: rgba(13, 92, 126, 0.09);
    border: 1px solid rgba(13, 92, 126, 0.22);

    color: #0d5c7e;
    font-weight: 600;
    cursor: pointer;

    list-style: none;
}

.dive-photo-manager-toggle::-webkit-details-marker {
    display: none;
}

.dive-photo-manager-arrow {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.dive-photo-manager[open] .dive-photo-manager-arrow {
    transform: rotate(180deg);
}

.dive-photo-manager-content {
    padding: 18px 4px 6px;
}


/*
|--------------------------------------------------------------------------
| Mes souvenirs — Notes de plongée
|--------------------------------------------------------------------------
*/

.dive-souvenirs-notes {
    margin-top: 22px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(13, 92, 126, 0.06);
    border: 1px solid rgba(13, 92, 126, 0.14);
}

.dive-souvenirs-notes h3 {
    margin: 0 0 12px;
    color: #0d5c7e;
    font-size: 1.05rem;
    font-weight: 700;
}

.dive-souvenirs-notes p {
    margin: 0;
    line-height: 1.7;
    overflow-wrap: anywhere;
}



/*
|--------------------------------------------------------------------------
| Mes souvenirs — Écriture et modification
|--------------------------------------------------------------------------
*/

.dive-souvenirs-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.dive-souvenirs-heading h3 {
    margin: 0;
}

.dive-souvenirs-edit-button {
    border: 1px solid rgba(13, 92, 126, 0.25);
    background: rgba(13, 92, 126, 0.08);
    color: #0d5c7e;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

#dive-souvenirs-textarea {
    display: block;
    width: 100%;
    min-height: 150px;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid rgba(13, 92, 126, 0.3);
    border-radius: 12px;
    background: #ffffff;
    color: #17364a;
    font: inherit;
    line-height: 1.6;
    resize: vertical;
}

.dive-souvenirs-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.dive-souvenirs-cancel {
    border: 1px solid rgba(13, 92, 126, 0.25);
    border-radius: 10px;
    padding: 10px 16px;
    background: transparent;
    color: #0d5c7e;
    cursor: pointer;
}

/* Respecter les éléments masqués par JavaScript */
#dive-souvenirs-form[hidden],
#dive-souvenirs-display[hidden],
.dive-souvenirs-edit-button[hidden] {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Mes souvenirs — Lire la suite / Réduire
|--------------------------------------------------------------------------
*/

.dive-souvenirs-text {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.dive-souvenirs-text.is-collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.dive-souvenirs-more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 5px 0;
    border: none;
    background: transparent;
    color: #0d5c7e;
    font-weight: 600;
    cursor: pointer;
}

.dive-souvenirs-more[hidden] {
    display: none !important;
}

.dive-souvenirs-more-arrow {
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.dive-souvenirs-more[aria-expanded="true"] .dive-souvenirs-more-arrow {
    transform: rotate(180deg);
}


/*
|--------------------------------------------------------------------------
| Carte Leaflet — Fiche de plongée
|--------------------------------------------------------------------------
*/

.dive-leaflet-map {
    width: 100%;
    height: 280px;
    border-radius: 14px;
    overflow: hidden;
    background: #10384c;
    z-index: 0;
}

.dive-map-hint {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: #648093;
    text-align: center;
}

@media (max-width: 600px) {
    .dive-leaflet-map {
        height: 230px;
    }
}


/* Confirmation d'enregistrement GPS */

.dive-gps-success {
    margin: 12px 0 0;
    color: #16836a;
    font-size: 0.9rem;
    font-weight: 600;
}


/* =========================================================
   PROFIL — CARTE IDENTITÉ COMPACTE
   ========================================================= */

.profile-identity-card {
    padding: 18px;
}

.profile-identity-card h2 {
    margin: 4px 0 2px;
}

.profile-identity-pseudo {
    margin: 0 0 10px;
    opacity: 0.7;
    font-size: 0.85rem;
}

.profile-identity-main {
    display: grid;
    gap: 5px;
}

.profile-identity-main p {
    margin: 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.profile-identity-more {
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 8px;
}

.profile-identity-more summary {
    cursor: pointer;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.profile-identity-extra {
    padding-top: 10px;
}

.profile-identity-extra p {
    margin: 5px 0;
    font-size: 0.85rem;
}


/* =========================================================
   PROFIL — MODIFICATION DISCRÈTE
   ========================================================= */

.profile-edit-button {
    display: block;
    margin: 8px 0 0 auto;
    padding: 5px 9px;
    font-size: 0.8rem;
    cursor: pointer;
}

#profile-edit-form {
    margin-top: 8px;
}

#profile-edit-form[hidden],
#profile-display[hidden] {
    display: none !important;
}

#profile-edit-form label {
    display: block;
    margin: 8px 0 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

#profile-edit-form input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 10px;
    font-size: 0.9rem;
    border-radius: 8px;
}

.profile-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.profile-edit-actions button {
    padding: 7px 10px;
    font-size: 0.85rem;
}


/* =========================================================
   PROFIL — MODIFICATION EMAIL
   ========================================================= */

.profile-email-settings {
    margin: 12px 0 18px;
}

.profile-email-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-email-heading > div {
    min-width: 0;
}

.profile-email-heading small {
    opacity: 0.7;
}

.profile-email-heading p {
    margin: 4px 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.profile-email-edit-button {
    flex-shrink: 0;
    padding: 5px 9px;
    font-size: 0.8rem;
    cursor: pointer;
}

#email-edit-form {
    margin-top: 12px;
}

#email-edit-form[hidden],
#email-edit-button[hidden] {
    display: none !important;
}

#email-edit-form label {
    display: block;
    margin: 10px 0 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

#email-edit-form input {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
}

.profile-email-note {
    font-size: 0.8rem;
    opacity: 0.75;
    margin-top: 10px;
}

.profile-email-error {
    color: #e35b5b;
    font-size: 0.85rem;
}


/* =========================================================
   PROFIL — BOUTONS MODIFIER
   ========================================================= */

.profile-edit-button,
.profile-email-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    width: auto;
    min-height: 36px;
    padding: 7px 12px;

    border: 1px solid rgba(140, 170, 190, 0.30);
    border-radius: 999px;

    background: rgba(140, 170, 190, 0.10);
    color: inherit;

    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;

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

.profile-edit-button {
    margin: 8px 0 0 auto;
}

.profile-email-edit-button {
    flex-shrink: 0;
    margin: 0;
}

.profile-edit-button:hover,
.profile-email-edit-button:hover {
    background: rgba(140, 170, 190, 0.20);
    border-color: rgba(140, 170, 190, 0.50);
}

.profile-edit-button:active,
.profile-email-edit-button:active {
    transform: scale(0.97);
}

.profile-edit-button:focus-visible,
.profile-email-edit-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .profile-edit-button,
    .profile-email-edit-button {
        transition: none;
    }
}


/* =========================================================
   PROFIL — BOUTON MODIFIER EN HAUT À DROITE
   ========================================================= */

.profile-identity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.profile-identity-header .eyebrow {
    margin: 0;
}

.profile-identity-header .profile-edit-button {
    margin: 0;
    min-height: 28px;
    padding: 4px 9px;
    font-size: 0.75rem;
}

.profile-identity-header .profile-edit-button[hidden] {
    display: none !important;
}


/* =========================================================
   PROFIL — BOUTONS ANNULER / ENREGISTRER
   ========================================================= */

.profile-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Style commun aux deux boutons */
.profile-edit-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-height: 32px;
    margin: 0;
    padding: 6px 12px;

    border: 1px solid rgba(140, 170, 190, 0.30);
    border-radius: 999px;

    background: rgba(140, 170, 190, 0.10);
    color: inherit;

    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;

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

/* Annuler : très discret */
.profile-edit-actions button[type="button"] {
    background: transparent;
    opacity: 0.8;
}

/* Enregistrer : légèrement plus visible */
.profile-edit-actions button[type="submit"] {
    background: rgba(140, 170, 190, 0.20);
    border-color: rgba(140, 170, 190, 0.45);
    opacity: 1;
}

/* Interaction */
.profile-edit-actions button:hover {
    background: rgba(140, 170, 190, 0.25);
}

.profile-edit-actions button:active {
    transform: scale(0.97);
}

.profile-edit-actions button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .profile-edit-actions button {
        transition: none;
    }
}



/* ÉTAPE 14 — CARTE GPS COMPACTE */

#dive-leaflet-map {
    width: 100%;
    height: 160px;
    min-height: 160px;
}

@media (min-width: 768px) {
    #dive-leaflet-map {
        height: 200px;
        min-height: 200px;
    }
}


/* ÉTAPE 17.1 — BOUTON BIBLIOTHÈQUE SUBTOMEK */

.dive-subtomek-library {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 12px;
}

.dive-subtomek-label {
    font-size: 13px;
    font-weight: 600;
}

.dive-subtomek-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #aab4c2;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dive-subtomek-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #94a3b8;
}

.dive-subtomek-toggle.is-active {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
    color: #15803d;
}

.dive-subtomek-toggle.is-active .dive-subtomek-dot {
    background: #16a34a;
}


/* ÉTAPE 18.1 — PANNEAU SITES REPLIABLE */

.dive-sites-details {
    margin: 10px 0;
}

.dive-sites-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(100, 130, 160, 0.08);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    list-style: none;
}

.dive-sites-summary::-webkit-details-marker {
    display: none;
}

.dive-sites-arrow {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.dive-sites-details[open] .dive-sites-arrow {
    transform: rotate(180deg);
}

.dive-sites-content {
    padding-top: 8px;
}


/* ÉTAPE 18.1B — BOUTON GPS REPLIABLE */

/* Panneau fermé : masquer le formulaire GPS */
.dive-site-map:has(.dive-sites-details:not([open]))
#dive-gps-form {
    display: none;
}

/* Panneau ouvert : afficher le formulaire GPS */
.dive-site-map:has(.dive-sites-details[open])
#dive-gps-form {
    display: block;
}


/* ÉTAPE 18.2 — CARTE GPS PLUS COMPACTE */

@media (max-width: 767px) {
    .dive-leaflet-map {
        height: 135px;
    }
}

@media (min-width: 768px) {
    .dive-leaflet-map {
        height: 180px;
    }
}


/* ÉTAPE 19.2 — FILTRE DESTINATION */

.dives-destination-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 13px;
}

.dives-destination-filter label {
    white-space: nowrap;
}

.dives-destination-filter select {
    flex: 1;
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: inherit;
    font: inherit;
}


/* ÉTAPE 19.2B — COULEURS ET FOCUS DES FILTRES */

/* Options lisibles dans le menu déroulant */
.dives-destination-filter select option {
    color: #172638;
    background-color: #ffffff;
}

/* Supprimer les contours noirs au focus */
#dives-search:focus,
#dives-destination:focus {
    outline: none;
    box-shadow: none;
}

/* Conserver un repère discret pour la navigation clavier */
#dives-search:focus-visible,
#dives-destination:focus-visible {
    outline: 2px solid rgba(80, 170, 220, 0.55);
    outline-offset: 2px;
}


/* ÉTAPE 19.3 — FILTRE PROFONDEUR */

.dives-depth-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 13px;
}

.dives-depth-filter label {
    white-space: nowrap;
}

.dives-depth-filter select {
    flex: 1;
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: inherit;
    font: inherit;
}

.dives-depth-filter select option {
    color: #172638;
    background: #ffffff;
}

.dives-depth-filter select:focus {
    outline: none;
    box-shadow: none;
}

.dives-depth-filter select:focus-visible {
    outline: 2px solid rgba(80,170,220,0.55);
    outline-offset: 2px;
}


/* ÉTAPE 19.5 — BOUTON RÉINITIALISER */

.dives-reset-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.dives-reset-button {
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.75;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    padding: 5px 2px;
}

.dives-reset-button:hover {
    opacity: 1;
}

.dives-reset-button:focus {
    outline: none;
    box-shadow: none;
}

.dives-reset-button:focus-visible {
    outline: 2px solid rgba(80, 170, 220, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ÉTAPE 20.2 — CARTE HISTORIQUE */

.dives-map-section {
    width: 100%;
    max-width: 650px;
    margin: 12px auto 18px;
}

.dives-map-heading {
    margin-bottom: 8px;
    font-size: 13px;
}

#dives-history-map {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 0;
}

@media (max-width: 767px) {
    #dives-history-map {
        height: 150px;
    }
}


/* ÉTAPE 20.5A — Carte en plein écran */

#dives-history-map:fullscreen,
#dives-history-map.leaflet-pseudo-fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
}


/* ÉTAPE 20.5B — Bouton Ma position */

#dives-history-map .dives-location-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 25px;
    font-weight: bold;
    color: #333;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
}

#dives-history-map .dives-location-button:hover {
    background: #f4f4f4;
    color: #1689e8;
}

#dives-history-map .dives-location-button:focus-visible {
    outline: 2px solid #1689e8;
    outline-offset: 2px;
}


/* ÉTAPE 20.5C — Bascule Classique / Satellite */

#dives-history-map .dives-map-style-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    background: #ffffff;
    color: #263b50;

    font-size: 19px;
    text-decoration: none;
    cursor: pointer;

    transition: background 0.2s ease;
}

#dives-history-map .dives-map-style-button.is-satellite {
    background: #dceefa;
    color: #12699b;
}

#dives-history-map .dives-map-style-button:hover {
    background: #eaf4fb;
}

#dives-history-map .dives-map-style-button:focus-visible {
    outline: 2px solid #1689e8;
    outline-offset: 2px;
}


/*
|--------------------------------------------------------------------------
| ÉTAPE 20.5D — Commandes compactes de la carte Historique
|--------------------------------------------------------------------------
*/

/* Uniquement sur la carte compacte */
#dives-history-map:not(:fullscreen):not(.leaflet-pseudo-fullscreen)
.leaflet-top.leaflet-right {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px;
    right: 6px;
    top: 6px;
}

/* Supprimer les marges verticales des commandes */
#dives-history-map:not(:fullscreen):not(.leaflet-pseudo-fullscreen)
.leaflet-top.leaflet-right .leaflet-control {
    margin: 0;
}

/* Conserver des boutons de taille homogène */
#dives-history-map:not(:fullscreen):not(.leaflet-pseudo-fullscreen)
.dives-map-style-button,
#dives-history-map:not(:fullscreen):not(.leaflet-pseudo-fullscreen)
.dives-location-button {
    width: 30px;
    height: 30px;
}


/*
|--------------------------------------------------------------------------
| ÉTAPE 20.5E — Satellite et position à gauche
|--------------------------------------------------------------------------
*/

/* Uniquement sur la petite carte */
#dives-history-map:not(:fullscreen):not(.leaflet-pseudo-fullscreen)
.leaflet-top.leaflet-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px;
    top: 6px;
    left: 6px;
}

/* Alignement des deux boutons */
#dives-history-map:not(:fullscreen):not(.leaflet-pseudo-fullscreen)
.leaflet-top.leaflet-left .dives-map-style-button,
#dives-history-map:not(:fullscreen):not(.leaflet-pseudo-fullscreen)
.leaflet-top.leaflet-left .dives-location-button {
    width: 30px;
    height: 30px;
}

/* Suppression des marges inutiles */
#dives-history-map:not(:fullscreen):not(.leaflet-pseudo-fullscreen)
.leaflet-top.leaflet-left .leaflet-control {
    margin: 0;
}


/*
|--------------------------------------------------------------------------
| ÉTAPE 20.6B — Bouton bibliothèque mondiale SUBTOMEK
|--------------------------------------------------------------------------
*/

#dives-history-map .dives-subtomek-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    background: #ffffff;
    color: #263b50;

    font-size: 19px;
    text-decoration: none;
    cursor: pointer;

    transition: background 0.2s ease;
}

#dives-history-map .dives-subtomek-button.is-active {
    background: #d9f3e6;
    color: #168052;
}

#dives-history-map .dives-subtomek-button:hover {
    background: #e8f7ef;
}

#dives-history-map .dives-subtomek-button:focus-visible {
    outline: 2px solid #168052;
    outline-offset: 2px;
}


/*
|--------------------------------------------------------------------------
| ÉTAPE 20.6C — Marqueurs mondiaux SUBTOMEK
|--------------------------------------------------------------------------
*/

#dives-history-map .subtomek-site-marker {
    background: transparent;
    border: none;
}

#dives-history-map .subtomek-site-marker span {
    display: block;
    width: 18px;
    height: 18px;
    background: #21a675;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

#dives-history-map .subtomek-cluster-icon {
    background: rgba(33, 166, 117, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dives-history-map .subtomek-cluster-icon div {
    width: 30px;
    height: 30px;
    background: #21a675;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ÉTAPE 22.6A — Liste de recherche des sites */

.dive-site-search-results:not([hidden]) {
    display: block;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 5px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}

.dive-site-search-results[hidden] {
    display: none !important;
}

.dive-site-result {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

.dive-site-result:hover,
.dive-site-result:focus-visible {
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
}

.dive-site-result + .dive-site-result {
    border-top: 1px solid #f1f5f9;
}


/* Provenance des sites dans les suggestions */

.dive-site-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dive-site-result > span:first-child {
    min-width: 0;
}

.dive-site-source {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}


/* ÉTAPE 22.7B — Recherche personnalisée des sites */

.dive-site-search-results:not([hidden]) {
    display: block;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 5px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}

.dive-site-search-results[hidden] {
    display: none !important;
}

.dive-site-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

.dive-site-result:hover,
.dive-site-result:focus-visible {
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
}

.dive-site-result + .dive-site-result {
    border-top: 1px solid #f1f5f9;
}

.dive-site-result > span:first-child {
    min-width: 0;
}

.dive-site-source {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}


/* ÉTAPE 22.7I — Nom et zone géographique */

.dive-site-description {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dive-site-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.dive-site-geography {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}


/* ==========================================================
   SUBTOMEK — Badges d'attestation des plongées
   Étape 24.28B
   ========================================================== */

.badge-attestation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 13px;
    border-radius: 30px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;

    border: 1px solid transparent;
    transition: background 0.2s ease;
}

/* Plongée attestée : vert lumineux */

.badge-attestation-ok {
    color: #047857;
    background: #d1fae5;
    border-color: #6ee7b7;

    box-shadow: 0 0 12px rgba(16, 185, 129, 0.22);
}

/* Plongée non attestée : orange avec pulsation */

.badge-attestation-attente {
    color: #9a3412;
    background: #ffedd5;
    border-color: #fdba74;

    animation: subtomek-attestation-pulse 2.5s ease-in-out infinite;
}

/* Pulsation lumineuse douce */

@keyframes subtomek-attestation-pulse {

    0%, 100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.30);
    }

    50% {
        box-shadow:
            0 0 0 5px rgba(249, 115, 22, 0.08),
            0 0 14px rgba(249, 115, 22, 0.20);
    }
}

/* Respect des préférences d'accessibilité */

@media (prefers-reduced-motion: reduce) {
    .badge-attestation-attente {
        animation: none;
    }

    .badge-attestation {
        transition: none;
    }
}



/* ==========================================================
   SUBTOMEK — Propositions de plongées des clubs
   Étape 24.30C
   ========================================================== */

.stats-club-proposals {
    margin: 12px 0;
    padding: 14px 16px;

    border-radius: 0;

    background: rgba(14, 116, 144, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.25);

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

.stats-club-proposals-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stats-club-proposals-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    flex-shrink: 0;

    border-radius: 10px;

    background: rgba(14, 165, 233, 0.15);
    color: #0284c7;

    font-size: 21px;
}

.stats-club-proposals-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.stats-club-proposals-content strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.stats-club-proposals-content small {
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.75;
}

.stats-club-proposals-count {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    flex-shrink: 0;

    border-radius: 50px;

    background: #0284c7;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
}

/* Adaptation aux petits écrans */

@media (max-width: 380px) {
    .stats-club-proposals {
        padding: 12px;
    }

    .stats-club-proposals-header {
        gap: 9px;
    }

    .stats-club-proposals-content strong {
        font-size: 12px;
    }
}


/* ==========================================================
   SUBTOMEK — Ouverture des propositions des clubs
   Étape 24.30D
   ========================================================== */

.stats-club-proposals > summary {
    list-style: none;
    cursor: pointer;
}

.stats-club-proposals > summary::-webkit-details-marker {
    display: none;
}

.stats-club-proposals-list {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(56, 189, 248, 0.22);
}

.stats-club-proposal-item {
    padding: 12px 0;
}

.stats-club-proposal-item + .stats-club-proposal-item {
    border-top: 1px solid rgba(56, 189, 248, 0.18);
}

.stats-club-proposal-item > strong {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}

.stats-club-proposal-item > small {
    display: block;
    font-size: 11px;
    opacity: 0.8;
}

.stats-club-proposal-data {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 10px;
    font-size: 12px;
}

.stats-club-proposal-data strong {
    font-weight: 700;
}


/* ==========================================================
   SUBTOMEK — Bouton de refus des propositions club
   Étape 24.31C
   ========================================================== */

.stats-club-proposal-actions {
    margin-top: 14px;
}

.stats-club-proposal-refuse {
    padding: 9px 14px;
    border: 1px solid rgba(220, 38, 38, 0.45);
    border-radius: 7px;
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.stats-club-proposal-refuse:hover {
    background: rgba(220, 38, 38, 0.16);
}


/* ==========================================================
   SUBTOMEK — Bouton d'acceptation des propositions club
   Étape 24.31F
   ========================================================== */

.stats-club-proposal-accept {
    padding: 9px 14px;
    border: 1px solid rgba(22, 163, 74, 0.45);
    border-radius: 7px;
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.stats-club-proposal-accept:hover {
    background: rgba(22, 163, 74, 0.16);
}


/* ========================================
   SUBTOMEK — FILTRE PAR PÉRIODE
======================================== */

.dives-period-field {
    position: relative;
    width: 100%;
}

.dives-period-field input {
    width: 100%;
    box-sizing: border-box;

    padding: 12px 44px 12px 16px;

    border: 1px solid #8abbea;
    border-radius: 24px;

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

    font: inherit;
    font-size: 14px;

    cursor: pointer;

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

.dives-period-field input:focus {
    outline: none;
    border-color: #1689e8;
    box-shadow: 0 0 0 3px rgba(22, 137, 232, 0.15);
}

.dives-period-field input::placeholder {
    color: #8b9bad;
    opacity: 1;
}

.dives-period-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);

    color: #1689e8;
    font-size: 20px;

    pointer-events: none;
}

/* ==========================================
   SUBTOMEK — CALENDRIER FLATPICKR
========================================== */

/* Fenêtre du calendrier */
.flatpickr-calendar {
    border: 1px solid #d7e7f7 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 35px rgba(15, 65, 110, 0.20) !important;
    overflow: hidden;
    font-family: inherit !important;
}

/* Bandeau supérieur : mois et année */
.flatpickr-months {
    background: #edf6ff;
    padding: 8px 0;
}

.flatpickr-current-month {
    font-weight: 600;
    color: #174c78;
}

/* Navigation entre les mois */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 8px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(22, 137, 232, 0.12);
}

/* Jours de la semaine */
.flatpickr-weekdays {
    background: #edf6ff;
}

span.flatpickr-weekday {
    background: #edf6ff;
    color: #47789d;
    font-weight: 600;
}

/* Jours du calendrier */
.flatpickr-day {
    border-radius: 50%;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

/* Survol d'une date */
.flatpickr-day:hover {
    background: #e2f1ff;
    border-color: #e2f1ff;
}

/* Dates de début et de fin */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #1689e8 !important;
    border-color: #1689e8 !important;
    color: #ffffff !important;
}

/* Dates comprises dans la période */
.flatpickr-day.inRange {
    background: #d9ecff !important;
    border-color: #d9ecff !important;
    color: #174c78 !important;
    box-shadow:
        -5px 0 0 #d9ecff,
         5px 0 0 #d9ecff !important;
    border-radius: 0 !important;
}

/* Début de période */
.flatpickr-day.startRange {
    border-radius: 50% 0 0 50% !important;
}

/* Fin de période */
.flatpickr-day.endRange {
    border-radius: 0 50% 50% 0 !important;
}

/* Une seule journée sélectionnée */
.flatpickr-day.selected.startRange.endRange {
    border-radius: 50% !important;
}

/* Date du jour */
.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
    border-color: #1689e8;
    color: #1689e8;
    font-weight: 700;
}

/* Calendrier adapté aux petits écrans */
@media (max-width: 480px) {
    .flatpickr-calendar {
        max-width: calc(100vw - 20px);
    }
}


/* ==========================================
   SUBTOMEK — PLONGÉES DANS LES INFOBULLES
========================================== */

.subtomek-popup-dive {
    border-bottom: 1px solid #e5edf5;
}

.subtomek-popup-dive:last-child {
    border-bottom: none;
}

.subtomek-popup-dive a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 5px;
    text-decoration: none;
    color: #174c78;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.subtomek-popup-dive a:hover {
    background: #edf6ff;
}

.subtomek-popup-dive-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subtomek-popup-dive-details strong {
    font-size: 13px;
    color: #174c78;
}

.subtomek-popup-dive-details span {
    font-size: 12px;
    color: #64748b;
}

.subtomek-popup-arrow {
    font-size: 25px !important;
    font-weight: 600;
    color: #1689e8 !important;
}

/* Éviter les infobulles trop longues */
.leaflet-popup-content .subtomek-popup-dive {
    min-width: 200px;
}

/* ==========================================
   SUBTOMEK — MISE EN ÉVIDENCE DES PLONGÉES
   DANS LES INFOBULLES
========================================== */

/* Plongée correspondant aux filtres */
.subtomek-popup-dive-matching {
    background: #e8f4ff;
    border-left: 3px solid #1689e8;
    border-radius: 8px;
}

.subtomek-popup-dive-matching a {
    padding-left: 10px;
}

/* Plongée ne correspondant pas aux filtres */
.subtomek-popup-dive-muted {
    opacity: 0.45;
}

/* Les plongées restent accessibles au survol */
.subtomek-popup-dive-muted:hover {
    opacity: 1;
    background: #f5f9fd;
    border-radius: 8px;
}

/* Sans filtre, présentation normale */
.subtomek-popup-dive:not(
    .subtomek-popup-dive-matching
):not(
    .subtomek-popup-dive-muted
) {
    opacity: 1;
}