/* ============ */
/* === BASE === */
/* ============ */
* {
    /*Tout le site*/
    margin: 0;
    padding: 0;
    /* largeur et la hauteur incluent padding et bordure */
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}

body {
    /*Contenue du site*/
    background: linear-gradient(180deg, #f6f9fc, #edf3f9);
    color: #0a3d62;
}

/* =============== */
/* === NAV BAR === */
/* =============== */
.nav {
    position: absolute;
    top: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    background: white;
    list-style: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}

.imgLinkNav {
    width: 6%;
    height: auto;
    margin: 1%;
    margin-left: 4%;
}

.imgNav {
    width: 100%;
    transition: transform .3s ease;
}

.imgNav:hover {
    transform: scale(1.05);
}

a:visited {
    text-decoration: none;
}

.linkNav {
    position: relative;
    font-size: 180%;
    margin: 2.5%;
    text-decoration: none;
    color: #0a3d62;
}

.linkNav:hover {
    color: #17a2b8;
}

/* afficher après */
.linkNav::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 3px;
    border-radius: 5px;
    background: linear-gradient(90deg, #17a2b8, #74c0fc);
    transition: width .25s ease-out;
}

.linkNav:hover::after {
    width: 100%;
}

/* Hamburger (caché sur PC) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    padding: 10px;
    z-index: 2200;
    position: relative;
}

.nav-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    margin: 6px 0;
    background: #0a3d62;
    border-radius: 3px;
    transition: transform .35s ease, opacity .25s ease, background .3s ease;
    transform-origin: center;
}

/* Animation Hamburger -> X */
.nav-toggle.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Sur PC : le wrapper est invisible pour le layout */
.nav-links {
    display: contents;
}

/* Backdrop du drawer (caché sur PC) */
.nav-backdrop {
    display: none;
}

/* ================ */
/* === CONTENUE === */
/* ================ */
.contained {
    max-width: 1200px;
    margin: 140px auto 60px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin-top: 11%;
}

/* ============== */
/* === TITRES === */
/* ============== */
h2 {
    font-size: 2rem;
    font-weight: 700;
}

h3 {
    font-size: 1.5rem;
    margin-top: 20px;
}

/* =================== */
/* === IMAGE INDEX === */
/* =================== */

.imgHomePage {
    width: 70%;
    max-width: 850px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform .3s ease;
}

.imgHomePage:hover {
    transform: scale(1.02);
}

/* =================== */
/* === FORMULAIRES === */
/* =================== */
.form {
    width: 100%;
    max-width: 400px;
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.formLabel {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

input,
select {
    width: 100%;
    padding: 12px;
    margin-bottom: 18px;
    border-radius: 10px;
    border: 1px solid #cfd9e3;
    font-size: 1rem;
}

/* quand un champ est sélectionné */
input:focus,
select:focus {
    outline: none;
    border-color: #1e90ff;
    box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.2);
}

input[type="submit"] {
    border: none;
    cursor: pointer;
    padding: 12px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(90deg, #0077cc, #4db7ff);
    color: white;
    transition: transform .2s ease, box-shadow .2s ease;
}

input[type="submit"]:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ====================== */
/* === GRILLE COURSES === */
/* ====================== */
.grille {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

.item {
    background: linear-gradient(90deg, #0077cc, #4db7ff);
    color: white;
    padding: 22px;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    transition: transform .25s ease, box-shadow .25s ease;
}

.item:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.item p {
    font-size: 1.05rem;
    line-height: 1.6rem;
}

/* seulement les boutons submit à l'intérieur d'un input*/
.item input[type="submit"] {
    margin-top: 12px;
    width: 100%;
}

/* ============================ */
/* === TABLEAUX CLASSEMENTS === */
/* ============================ */
form:has(.table) {
    max-width: 100%;
    width: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    margin-left: auto;
    margin-right: auto;
    /* CENTRAGE RÉEL */
    width: max-content;
    /* largeur basée sur le contenu */
    max-width: 100%;

    border-collapse: collapse;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

/* En-tête */
.table tr:first-child {
    background: linear-gradient(90deg, #0077cc, #42b6ff);
    color: white;
    font-weight: 700;
}

/* Cellules */
.column {
    padding: 16px 20px;
    border-bottom: 1px solid #d6e6f5;
    font-size: 1rem;
    white-space: nowrap;
    /* empêche le retour à la ligne */
}

/* Inputs dans le tableau */
.table input {
    width: 100%;
    min-width: 160px;
    margin: 0;
    white-space: nowrap;
}

form:has(.table) input[type="submit"] {
    width: auto;
    min-width: 240px;
    padding: 14px 36px;
    margin: 20px auto 0;
    /* centrage horizontal */
    display: block;
}


/* ============== */
/* === RADIOS === */
/* ============== */
form label[for="skipper"],
form label[for="organisateur"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 25px;
    font-weight: 600;
    cursor: pointer;
}

input[type="radio"] {
    width: auto;
    margin: 0;
    transform: scale(1.2);
    accent-color: #0077cc;
    cursor: pointer;
}

/* ====================== */
/* === EXTENSION FORM === */
/* ====================== */
#extension_form {
    margin-top: 20px;
    padding: 18px;
    border-radius: 14px;
    background: #f3f8ff;
    border: 1px solid #d6e6f5;
}

/* =============== */
/* === ERREURS === */
/* =============== */
.erreurs {
    margin-top: 15px;
    padding: 15px;
    border-radius: 12px;
    background: #ffe6e6;
    color: #b30000;
    font-weight: 600;
}

/* ================================ */
/* === INSCRIPTION COURSES      === */
/* ================================ */
.raceRegistrations {
    display: flex;
    flex-direction: column;
    width: 40%;
    top: 30%;
    position: absolute;
    text-align: center;
    background-color: white;
    padding: 1.8%;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.optionPosition {
    display: flex;
    flex-direction: row;
    font-size: 180%;
    background-color: white;
    gap: 3%;
    justify-content: center;
}

.optionsPositionInput {
    width: 100%;
    display: flex;
    background-color: white;
    align-items: center;
    font-size: 120%;
}

.optionsPositionInput label {
    display: flex;
    align-items: center;
    gap: 22px;
}

.optionsPositionInput input[type="checkbox"] {
    transform: scale(1.8);
    margin: 0;
}

.submitInscriptionOptions {
    margin-top: 3.5%;
}

.raceRegistrations h4 {
    margin-bottom: 3%;
}

.inscriptionCancel {
    border: none;
    cursor: pointer;
    padding: 12px;
    border-radius: 12px;
    font-size: 80%;
    font-weight: 700;
    background: red;
    color: white;
    transition: transform .2s ease, box-shadow .2s ease;
}

.inscriptionCancel:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.btn-inscription {
    background: white !important;
    color: black !important;
}

/* ================================= */
/* === BOUTONS MODE CLASSEMENT   === */
/* ================================= */
.mode-toggle {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.mode-btn {
    border: 2px solid #0077cc;
    cursor: pointer;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    background: white;
    color: #0077cc;
    transition: all .25s ease;
}

.mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 119, 204, 0.2);
    background: #f0f7ff;
}

.mode-btn-active {
    background: linear-gradient(135deg, #0077cc, #4db7ff);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(0, 119, 204, 0.35);
}

.mode-btn-active:hover {
    background: linear-gradient(135deg, #0066b3, #3da8f0);
}

/* ================================= */
/* === BADGES OPTIONS            === */
/* ================================= */
.option-badge {
    display: inline-block;
    padding: 2px 8px;
    margin: 1px 2px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e8f4fd, #d0ebff);
    color: #0a3d62;
    border: 1px solid #b8d9f0;
}

.option-none {
    background: #f0f0f0;
    color: #999;
    border-color: #ddd;
}

/* ================================= */
/* === CELLULES SPECIALES        === */
/* ================================= */
.rang-cell {
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0077cc;
}

.center-cell {
    text-align: center;
}

.rang-bht {
    font-size: 1.2rem;
    color: #0a3d62;
}

.pts-bht-cell {
    background: #eaf4ff;
    font-size: 1.05rem;
}

.row-no-result td {
    color: #aaa;
    font-style: italic;
}

.table tr:nth-child(even):not(:first-child) {
    background: #f8fbfe;
}

/* ================================= */
/* === PODIUM                    === */
/* ================================= */
.row-podium-1 td {
    background: linear-gradient(90deg, #ffd700, #ffe766) !important;
    color: #5a4000 !important;
    font-weight: 700;
}

.row-podium-2 td {
    background: linear-gradient(90deg, #b0c4d8, #d4dfe8) !important;
    color: #3a4a5a !important;
    font-weight: 600;
}

.row-podium-3 td {
    background: linear-gradient(90deg, #cd7f32, #e6a964) !important;
    color: #4a2e00 !important;
    font-weight: 600;
}

.row-podium-1 .rang-cell,
.row-podium-2 .rang-cell,
.row-podium-3 .rang-cell {
    color: inherit !important;
}

/* ================================= */
/* === TABLE DETAIL              === */
/* ================================= */
.table-detail .column {
    padding: 10px 14px;
    font-size: 0.9rem;
}

/* ================================= */
/* === RECAP / EXPLICATION       === */
/* ================================= */
.recap-box {
    width: 100%;
    max-width: 900px;
    margin-top: 30px;
    padding: 30px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.recap-box h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.5rem;
    color: #0a3d62;
}

.recap-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8f0f8;
}

.recap-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.recap-section h4 {
    font-size: 1.1rem;
    color: #0077cc;
    margin-bottom: 10px;
}

.recap-section p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #3a5a72;
    margin-bottom: 8px;
}

.recap-section ul,
.recap-section ol {
    margin: 8px 0 8px 20px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #3a5a72;
}

.recap-section li {
    margin-bottom: 4px;
}

.recap-note {
    font-size: 0.88rem !important;
    color: #7a9ab5 !important;
    font-style: italic;
    margin-top: 6px;
}

.table-recap {
    margin-top: 10px;
    margin-bottom: 10px;
}

.table-recap .column {
    padding: 8px 14px;
    font-size: 0.88rem;
}

.table-compact .column {
    padding: 6px 10px;
    font-size: 0.82rem;
}

/* ================================= */
/* === COURSE CARDS (Account)    === */
/* ================================= */
.course-card {
    width: 100%;
    max-width: 600px;
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.course-card h4 {
    font-size: 1.2rem;
    color: #0a3d62;
    border-bottom: 2px solid #e8f0f8;
    padding-bottom: 10px;
}

.options-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.options-form .optionPosition {
    font-size: 100%;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

.options-form .optionsPositionInput {
    width: auto;
    font-size: 100%;
}

.options-form .optionsPositionInput label {
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #d6e6f5;
    cursor: pointer;
    transition: background .2s ease;
}

.options-form .optionsPositionInput label:hover {
    background: #f0f7ff;
}

.options-form .optionsPositionInput input[type="checkbox"] {
    transform: scale(1.3);
    accent-color: #0077cc;
}

.course-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.course-card-actions input[type="submit"] {
    flex: 1;
    margin: 0;
}

.btn-unregister {
    background: linear-gradient(90deg, #e74c3c, #ff6b6b) !important;
    margin-top: 0;
    width: 100%;
}

.btn-unregister:hover {
    box-shadow: 0 6px 18px rgba(231, 76, 60, 0.3) !important;
}

/* ============================================ */
/* === VIEW SWITCH (cartes / tableau)       === */
/* ============================================ */
/* Caché sur PC */
.view-switch {
    display: none;
}

/* ============================================ */
/* === KEYFRAMES (drawer + bottom sheet)    === */
/* ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

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

/* ============================================ */
/* === MOBILE (max-width 600px)             === */
/* ============================================ */
@media (max-width: 600px) {

    /* ----- Body lock quand drawer ouvert ----- */
    body.nav-open {
        overflow: hidden;
    }

    /* ============================================ */
    /* === NAV BAR : barre fine + drawer        === */
    /* ============================================ */
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 8px 14px;
        height: 60px;
        z-index: 2100;
        backdrop-filter: saturate(1.2) blur(8px);
        background: rgba(255, 255, 255, 0.94);
    }

    .imgLinkNav {
        width: 44px;
        height: 44px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .imgLinkNav .imgNav {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    .nav-toggle {
        display: block;
        width: 48px;
        height: 48px;
        padding: 10px;
        margin-left: 0;
        border-radius: 12px;
    }

    .nav-toggle:active {
        background: rgba(0, 119, 204, 0.08);
    }

    /* ----- Drawer : slide depuis la droite ----- */
    .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 78%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        background: white;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
        padding: 80px 0 30px;
        gap: 2px;
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.2, .8, .2, 1);
        z-index: 2050;
        overflow-y: auto;
    }

    .nav-links.open {
        transform: translateX(0);
    }

    .linkNav {
        font-size: 1.15rem;
        font-weight: 600;
        margin: 0;
        padding: 18px 26px;
        width: 100%;
        text-align: left;
        border-bottom: 1px solid #edf3f9;
        display: flex;
        align-items: center;
        min-height: 56px;
        color: #0a3d62;
        transition: background .2s ease, padding .2s ease;
    }

    .linkNav:active {
        background: #f0f7ff;
        padding-left: 32px;
    }

    .linkNav::after {
        display: none;
    }

    /* ----- Backdrop du drawer ----- */
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 61, 98, 0.45);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
        z-index: 2000;
    }

    .nav-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* ============================================ */
    /* === CONTENU                              === */
    /* ============================================ */
    .contained {
        margin: 0 auto;
        margin-top: 76px;
        padding: 12px 14px 90px;
        gap: 18px;
        max-width: 100%;
    }

    h2 {
        font-size: 1.35rem;
        text-align: center;
        padding: 0 8px;
    }

    h3 {
        font-size: 1.1rem;
        text-align: center;
        padding: 0 8px;
    }

    /* --- IMAGE INDEX --- */
    .imgHomePage {
        width: 100%;
        border-radius: 14px;
    }

    /* ============================================ */
    /* === FORMULAIRES : tap targets 44px+       === */
    /* ============================================ */
    .form {
        padding: 18px;
        border-radius: 14px;
    }

    input,
    select,
    textarea {
        /* 16px minimum pour éviter zoom iOS */
        font-size: 16px;
        padding: 13px 14px;
        margin-bottom: 14px;
        min-height: 48px;
        border-radius: 12px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-height: 0;
        margin-bottom: 0;
    }

    input[type="submit"],
    button[type="submit"] {
        padding: 14px;
        font-size: 1rem;
        min-height: 52px;
        border-radius: 14px;
        width: 100%;
    }

    input[type="submit"]:active,
    button[type="submit"]:active {
        transform: scale(0.98);
    }

    /* ============================================ */
    /* === GRILLE COURSES : cartes tactiles      === */
    /* ============================================ */
    .grille {
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
    }

    .item {
        padding: 18px 20px;
        border-radius: 16px;
    }

    .item:hover {
        transform: none;
    }

    .item:active {
        transform: scale(0.98);
    }

    .item p {
        font-size: 1rem;
        line-height: 1.55rem;
    }

    .item input[type="submit"] {
        margin-top: 14px;
    }

    /* ============================================ */
    /* === TABLEAUX : transformation en cartes   === */
    /* ============================================ */
    form:has(.table) {
        padding: 0;
    }

    .table-wrap {
        overflow-x: visible;
    }

    /* Par défaut en mobile : vue cartes */
    .table-wrap.view-table {
        overflow-x: auto;
    }

    .table-wrap.view-cards .table,
    .table-wrap:not(.view-table) .table {
        display: block;
        width: 100%;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }

    /* Masquer l'entête en mode cartes (remplacée par data-label) */
    .table-wrap.view-cards .table tr:first-child,
    .table-wrap:not(.view-table) .table tr:first-child {
        display: none;
    }

    .table-wrap.view-cards .table tr,
    .table-wrap:not(.view-table) .table tr {
        display: block;
        background: white !important;
        border-radius: 14px;
        margin-bottom: 12px;
        padding: 14px 16px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        position: relative;
    }

    .table-wrap.view-cards .table tr:nth-child(even):not(:first-child),
    .table-wrap:not(.view-table) .table tr:nth-child(even):not(:first-child) {
        background: white !important;
    }

    .table-wrap.view-cards .table .column,
    .table-wrap:not(.view-table) .table .column {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px dashed #e8f0f8;
        white-space: normal;
        font-size: 0.92rem;
        text-align: right;
        gap: 12px;
    }

    .table-wrap.view-cards .table .column:last-child,
    .table-wrap:not(.view-table) .table .column:last-child {
        border-bottom: none;
    }

    /* Label à gauche via data-label */
    .table-wrap.view-cards .table .column::before,
    .table-wrap:not(.view-table) .table .column::before {
        content: attr(data-label);
        font-weight: 700;
        color: #0077cc;
        text-align: left;
        flex: 0 0 45%;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Podium en mode cartes : bordure colorée */
    .table-wrap.view-cards .row-podium-1,
    .table-wrap:not(.view-table) .row-podium-1 {
        border-left: 6px solid #ffd700;
        background: linear-gradient(90deg, #fffaea, #ffffff 30%) !important;
    }

    .table-wrap.view-cards .row-podium-2,
    .table-wrap:not(.view-table) .row-podium-2 {
        border-left: 6px solid #b0c4d8;
        background: linear-gradient(90deg, #f4f7fa, #ffffff 30%) !important;
    }

    .table-wrap.view-cards .row-podium-3,
    .table-wrap:not(.view-table) .row-podium-3 {
        border-left: 6px solid #cd7f32;
        background: linear-gradient(90deg, #fdf4e9, #ffffff 30%) !important;
    }

    .table-wrap.view-cards .row-podium-1 td,
    .table-wrap.view-cards .row-podium-2 td,
    .table-wrap.view-cards .row-podium-3 td,
    .table-wrap:not(.view-table) .row-podium-1 td,
    .table-wrap:not(.view-table) .row-podium-2 td,
    .table-wrap:not(.view-table) .row-podium-3 td {
        background: transparent !important;
        color: #0a3d62 !important;
    }

    /* Mode "table" classique : scroll horizontal */
    .table-wrap.view-table .table {
        display: table;
        width: max-content;
    }

    .table-wrap.view-table .table tr {
        display: table-row;
    }

    .table-wrap.view-table .table .column {
        display: table-cell;
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .table-wrap.view-table .table .column::before {
        content: none;
    }

    .table input {
        min-width: 70px;
        font-size: 16px;
        padding: 10px;
        min-height: 44px;
    }

    form:has(.table) input[type="submit"] {
        min-width: 0;
        width: 100%;
        padding: 14px;
        margin-top: 16px;
    }

    /* ============================================ */
    /* === MODE TOGGLE : segmented control       === */
    /* ============================================ */
    .mode-toggle {
        gap: 0;
        background: #edf3f9;
        border-radius: 12px;
        padding: 4px;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .mode-toggle form {
        flex: 1;
        display: flex;
    }

    .mode-btn {
        flex: 1;
        padding: 10px 12px;
        font-size: 0.85rem;
        border: none;
        background: transparent;
        color: #0a3d62;
        border-radius: 9px;
        transition: all .2s ease;
        min-height: 42px;
        width: 100%;
    }

    .mode-btn:hover {
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .mode-btn.active,
    .mode-btn-active {
        background: white;
        color: #0077cc;
        box-shadow: 0 2px 8px rgba(0, 119, 204, 0.18);
    }

    /* ----- View switch (cartes / tableau) ----- */
    .view-switch {
        display: flex;
        gap: 0;
        background: #edf3f9;
        border-radius: 12px;
        padding: 4px;
        width: 100%;
        max-width: 280px;
        margin: 0 auto 6px;
    }

    .view-switch .mode-btn {
        min-height: 38px;
        font-size: 0.82rem;
    }

    /* ============================================ */
    /* === BOTTOM SHEET : inscription course     === */
    /* ============================================ */
    .sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 61, 98, 0.55);
        backdrop-filter: blur(3px);
        z-index: 2500;
        animation: fadeIn .25s ease;
    }

    .raceRegistrations {
        position: fixed;
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        transform: none;
        padding: 22px 20px 32px;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
        z-index: 2600;
        animation: slideUp .35s cubic-bezier(.2, .8, .2, 1);
        max-height: 85vh;
        overflow-y: auto;
    }

    /* Petite barre grise en haut (indication "swipe") */
    .raceRegistrations::before {
        content: "";
        display: block;
        width: 48px;
        height: 5px;
        background: #cfd9e3;
        border-radius: 5px;
        margin: 0 auto 16px;
    }

    .raceRegistrations h4 {
        font-size: 1.05rem;
        margin-bottom: 16px;
        text-align: center;
    }

    .raceRegistrations form {
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    /* Options en grille compacte 5 colonnes */
    .optionPosition {
        font-size: 100%;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 10px;
    }

    .optionsPositionInput {
        width: calc(20% - 7px);
        font-size: 100%;
        display: flex;
        justify-content: center;
    }

    .optionsPositionInput label {
        flex-direction: column;
        gap: 6px;
        padding: 10px 4px;
        border-radius: 12px;
        border: 1px solid #d6e6f5;
        background: #f8fbfe;
        width: 100%;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        min-height: 58px;
        transition: all .2s ease;
    }

    .optionsPositionInput label:has(input:checked) {
        background: linear-gradient(135deg, #0077cc, #4db7ff);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(0, 119, 204, 0.3);
    }

    .optionsPositionInput input[type="checkbox"] {
        transform: scale(1);
        width: 18px;
        height: 18px;
        min-height: 0;
        margin: 0;
    }

    .submitInscriptionOptions {
        margin-top: 14px;
    }

    .inscriptionCancel {
        font-size: 0.95rem;
        padding: 13px;
        margin-top: 10px;
        width: 100%;
        border-radius: 14px;
    }

    /* ============================================ */
    /* === BADGES OPTIONS                        === */
    /* ============================================ */
    .option-badge {
        font-size: 0.75rem;
        padding: 3px 8px;
        margin: 2px;
    }

    /* ============================================ */
    /* === COURSE CARDS (Account)                === */
    /* ============================================ */
    .course-card {
        padding: 18px;
        border-radius: 16px;
    }

    .course-card h4 {
        font-size: 1.1rem;
    }

    /* Options en grille 5x2 dans account */
    .options-form .optionPosition {
        gap: 6px;
        justify-content: center;
    }

    .options-form .optionsPositionInput {
        width: calc(20% - 5px);
    }

    .options-form .optionsPositionInput label {
        flex-direction: column;
        padding: 8px 2px;
        font-size: 0.72rem;
        font-weight: 700;
        min-height: 52px;
        justify-content: center;
        background: #f8fbfe;
    }

    .options-form .optionsPositionInput label:has(input:checked) {
        background: linear-gradient(135deg, #0077cc, #4db7ff);
        color: white;
        border-color: transparent;
    }

    .options-form .optionsPositionInput input[type="checkbox"] {
        transform: scale(0.9);
        width: 16px;
        height: 16px;
    }

    .course-card-actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-unregister {
        margin-top: 6px;
    }

    /* ============================================ */
    /* === RECAP / EXPLICATIONS                  === */
    /* ============================================ */
    .recap-box {
        padding: 18px 16px;
        border-radius: 16px;
    }

    .recap-box h3 {
        font-size: 1.15rem;
    }

    .recap-section {
        margin-bottom: 18px;
        padding-bottom: 14px;
    }

    .recap-section h4 {
        font-size: 1rem;
    }

    .recap-section p,
    .recap-section ul,
    .recap-section ol {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .recap-section ul,
    .recap-section ol {
        margin-left: 16px;
    }

    /* ============================================ */
    /* === RADIOS (register.php)                 === */
    /* ============================================ */
    form label[for="skipper"],
    form label[for="organisateur"] {
        display: flex;
        padding: 12px 16px;
        background: #f8fbfe;
        border: 1px solid #d6e6f5;
        border-radius: 12px;
        margin: 6px 0;
        min-height: 48px;
    }

    /* ============================================ */
    /* === TOUCH : éliminer hovers collants      === */
    /* ============================================ */
    .imgNav:hover,
    .item:hover,
    input[type="submit"]:hover,
    button[type="submit"]:hover,
    .mode-btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ============================================ */
/* === SAFE-AREA iOS (notch / home bar)      === */
/* ============================================ */
@supports (padding: max(0px)) {
    @media (max-width: 600px) {
        .nav {
            padding-top: max(8px, env(safe-area-inset-top));
            height: calc(60px + env(safe-area-inset-top));
        }

        .contained {
            margin-top: calc(76px + env(safe-area-inset-top));
            padding-bottom: max(90px, calc(30px + env(safe-area-inset-bottom)));
        }

        .raceRegistrations {
            padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom)));
        }

        .nav-links {
            padding-top: calc(80px + env(safe-area-inset-top));
        }
    }
}