/* Championnat de l'Est J/22 — style commun (tables reprises de la mise en page Voile Gaspé).
   Les couleurs/polices viennent des JETONS définis dans nav.css (:root) —
   un thème les redéfinit dans courses/themes/<nom>.css. */

body {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--c-text);
    margin: 0;
    background: var(--c-bg);
}

.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 12px 40px;
}

/* 16px minimum sur tous les champs : évite le zoom automatique d'iOS Safari au focus */
input[type=text], input[type=number], input[type=email], input[type=tel],
input[type=password], input[type=date], input[type=time], select, textarea {
    font-size: 16px;
}

/* Paire étiquette+champ des formulaires en ligne : passe à la ligne d'un bloc */
.fld {
    display: inline-block;
    white-space: nowrap;
    margin: 3px 8px 3px 0;
}

/* ---- Barre de navigation : styles PARTAGÉS dans nav.css (site + courses + regate) ---- */
.show-sm { display: none; }             /* libellés courts, affichés seulement sur téléphone */

/* ---- En-tête de régate ---- */
.regatta-header {
    text-align: center;
    margin: 18px 0 8px;
    position: relative;
    min-height: 60px;
}
.regatta-header h1 { margin: 0 0 4px; font-size: 24px; font-family: var(--font-heading); }
.regatta-header .sub { color: var(--c-text-2); font-size: 14px; margin: 2px 0; }
.burgeeLeft  { position: absolute; left: 0;  top: 0; max-width: 60px; max-height: 60px; }
.burgeeRight { position: absolute; right: 0; top: 0; max-width: 60px; max-height: 60px; }

h2 { text-align: center; font-size: 18px; margin: 24px 0 6px; font-family: var(--font-heading); }
h3 { text-align: center; font-size: 15px; margin: 18px 0 4px; font-family: var(--font-heading); }
.centerline { text-align: center; color: #555; margin: 2px 0; }
.status-final   { color: #06660e; font-weight: bold; }
.status-pending { color: #a35b00; font-weight: bold; }

/* ---- Tables (style repris de J22r.htm) ---- */
.tablewrap { overflow-x: auto; margin: 10px 0; }
table.res {
    font-family: var(--font-table);
    color: var(--c-tbl-text);
    font-size: 12px;
    text-shadow: 1px 1px 0 #fff;
    background: var(--c-tbl-frame);
    border: 1px solid #ccc;
    border-radius: var(--r-s);
    box-shadow: 0 1px 2px var(--c-tbl-shadow);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
table.res th {
    border-top: 1px solid var(--c-tbl-cell);
    border-bottom: 1px solid var(--c-tbl-border);
    background: var(--c-tbl-head);
    padding: 8px 6px;
    white-space: nowrap;
}
table.res td {
    padding: 8px 6px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid var(--c-tbl-border);
    border-left: 1px solid var(--c-tbl-border);
    background: var(--c-tbl-cell);
    text-align: center;
    white-space: nowrap;
}
table.res td:first-child { border-left: 0; }
table.res tr:nth-child(even) td { background: var(--c-tbl-zebra); }
table.res td.left, table.res th.left { text-align: left; padding-left: 10px; white-space: normal; }

/* Podium : identité des résultats — IDENTIQUE dans tous les thèmes (pas de variables) */
td.firstPlace  { background: gold   !important; color: #000; text-shadow: none; font-weight: bold; }
td.secondPlace { background: skyblue!important; color: #000; text-shadow: none; font-weight: bold; }
td.thirdPlace  { background: orange !important; color: #000; text-shadow: none; font-weight: bold; }

.score { line-height: 1.1; display: block; }
.excludedScore { color: #AA4444; text-decoration: line-through; line-height: 1.1; display: block; }
.codeTag { font-size: 10px; color: var(--c-accent-text); display: block; }

/* ---- Formulaires ---- */
.formbox {
    max-width: 560px;
    margin: 14px auto;
    background: var(--c-bg-form);
    border: 1px solid var(--c-border);
    border-radius: var(--r-m);
    padding: 16px 20px;
}
.formbox label { display: block; font-weight: bold; margin: 12px 0 3px; }
.formbox .req::after { content: " *"; color: var(--c-accent-text); }
.formbox input[type=text], .formbox input[type=email], .formbox input[type=tel],
.formbox input[type=password], .formbox input[type=date], .formbox input[type=time],
.formbox input[type=number], .formbox select, .formbox textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px;
    font-size: 16px;
    border: 1px solid var(--c-border-input);
    border-radius: var(--r-s);
}
.btn {
    display: inline-block;
    background: var(--c-primary);
    color: #fff;
    border: 0;
    border-radius: var(--r-s);
    padding: 10px 22px;
    font-size: 15px;
    font-family: var(--font-body);
    cursor: pointer;
    margin-top: 14px;
    text-decoration: none;
    text-shadow: none; /* annule l'ombre blanche héritée des tables */
}
.btn:hover { background: var(--c-primary-dark); }
.btn:disabled { background: #b8c2cc; color: #f3f5f7; cursor: default; }
.btn:disabled:hover { background: #b8c2cc; }
.btn.small { padding: 5px 10px; font-size: 12px; margin: 0; }
.btn.danger { background: var(--c-danger); }
.btn.gray { background: #777; }

.msg-ok  { background: #e2f4e2; border: 1px solid #9c9; padding: 10px 14px; border-radius: var(--r-s); margin: 12px auto; max-width: 560px; text-align: center; }
.msg-err { background: #f8e2e2; border: 1px solid #c99; padding: 10px 14px; border-radius: var(--r-s); margin: 12px auto; max-width: 560px; text-align: center; }

/* ---- Page d'accueil : avis, horaire, météo, marées ---- */
.notice-box {
    max-width: 700px;
    margin: 8px auto;
    background: var(--c-note-bg);
    border: 1px solid var(--c-note-border);
    border-radius: var(--r-m);
    padding: 10px 14px;
    font-size: 14px;
}
.notice-date { color: var(--c-note-text); font-size: 11px; font-weight: bold; margin-bottom: 3px; }

/* Cartes journée : horaire + météo + marées */
.day-grid {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 980px;
    margin: 12px auto 0;
}
.day-card {
    flex: 1 1 280px;
    max-width: 330px;
    background: var(--c-bg);
    border: 1px solid var(--c-border-card);
    border-radius: var(--r-l);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.day-sec-grow { flex: 1 1 auto; } /* l'horaire s'étire : météo et marées restent au bas */
.day-head {
    background: var(--c-primary);
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 8px 6px;
    font-size: 14.5px;
    text-transform: capitalize;
    font-family: var(--font-ui);
}
.day-sec { padding: 8px 12px 10px; border-top: 1px solid var(--c-hairline); }
.day-sec:first-of-type { border-top: 0; }
.day-sec-title {
    font-size: 10.5px;
    font-weight: bold;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8fa4b8;
    margin-bottom: 4px;
}
.sched-item { padding: 2px 0; font-size: 13px; line-height: 1.35; }
.sched-time {
    display: inline-block;
    min-width: 70px;
    font-weight: bold;
    color: var(--c-primary);
    vertical-align: top;
}
.wx-line { font-size: 13.5px; padding: 2px 0; }
.wx-temp { font-size: 19px; font-weight: bold; }
.wx-line small, .tide-line small { color: #888; }
.wx-line.unavail { color: var(--c-text-3); font-style: italic; font-size: 12.5px; }
.tide-line { font-size: 13.5px; padding: 2px 0; }
.srcnote { color: var(--c-text-3); font-size: 11px; line-height: 1.5; margin-top: 14px; }

.footer { margin-top: 34px; text-align: center; color: var(--c-text-3); font-size: 11px; }
.footer a { color: var(--c-text-3); }

/* ---- Admin : saisie des arrivées ---- */
.race-admin-box { border: 1px solid var(--c-border); border-radius: var(--r-m); padding: 10px 14px; margin: 14px 0; background: var(--c-bg-box); }
.inline-form { display: inline; }
.tapline { margin: 8px 0; }
.tapline button {
    font-size: 15px; padding: 8px 12px; margin: 3px;
    border: 1px solid var(--c-primary); background: var(--c-bg); color: var(--c-primary);
    border-radius: var(--r-s); cursor: pointer;
}
.tapline button.tapped { background: var(--c-primary); color: #fff; }
.tapline button.coded { opacity: .45; text-decoration: line-through; }

/* Liste des arrivées : rangées interactives */
/* ---- Impression : pages publiques propres, économes en encre ---- */
@media print {
    .nav, .event-bar, .footer, .btn, .nav-burger, form, .srcnote a { display: none !important; }
    body { background: #fff; }
    .page { max-width: none; margin: 0; padding: 0; }
    table.res, table.res th, table.res td {
        background: #fff !important;
        color: #000 !important;
        text-shadow: none !important;
        box-shadow: none !important;
        border-color: #888 !important;
    }
    table.res td, table.res th { border: 1px solid #999; }
    table.res tr { page-break-inside: avoid; }
    td.firstPlace, td.secondPlace, td.thirdPlace { background: #fff !important; font-weight: bold; }
    /* « PDF couleur » : les podiums restent colorés (bouton sur la page des résultats) */
    body.print-color td.firstPlace,
    body.print-color td.secondPlace,
    body.print-color td.thirdPlace {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body.print-color td.firstPlace  { background: gold    !important; }
    body.print-color td.secondPlace { background: skyblue !important; }
    body.print-color td.thirdPlace  { background: orange  !important; }
    h2, h3 { page-break-after: avoid; }
    .excludedScore { text-decoration: line-through; }   /* retraits lisibles sans couleur */
    .codeTag { color: #000; }
}

/* Séparateur discret entre classes dans les listes de participants */
table.res tr.class-start td { border-top: 2px solid var(--c-border-strong); }

/* ---- Sections repliables de l'administration ---- */
details.admin-sec {
    border: 1px solid var(--c-border-card);
    border-radius: var(--r-l);
    background: var(--c-bg);
    margin: 12px 0;
    padding: 0 10px 4px;
}
details.admin-sec > summary {
    cursor: pointer;
    padding: 10px 2px;
    font-size: 15px;
    font-family: var(--font-heading);
    list-style-position: inside;
}
details.admin-sec[open] > summary { border-bottom: 1px solid var(--c-hairline); margin-bottom: 8px; }
details.admin-sec .race-admin-box { border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }

/* ---- Zone de dépôt de documents (avis de course / instructions) ---- */
.dropzone {
    display: inline-block;
    border: 2px dashed var(--c-border-strong);
    border-radius: var(--r-l);
    padding: 5px 10px;
    font-size: 12.5px;
    color: #567;
    background: #fafcfe;
    margin: 2px 6px;
}
.dropzone.dragover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.dropzone input[type=file] { font-size: 12px; max-width: 210px; }

/* Colonnes de largeur IDENTIQUE d'une classe à l'autre (tables empilées) */
table.arrivals { table-layout: fixed; }
table.arrivals th:nth-child(1) { width: 96px; }
table.arrivals th:nth-child(2) { width: 64px; }
table.arrivals th:nth-child(4) { width: 92px; }
table.arrivals tr[data-eid] { cursor: pointer; }
table.arrivals tr.scored td { background: #e2eef8; }
table.arrivals tr.scored .pos-cell input { font-weight: bold; }
table.arrivals tr.coded-row td { background: var(--c-bg-hover); color: var(--c-text-3); }
table.arrivals tr.coded-row td.left { text-decoration: line-through; }
table.arrivals tr.zone-start td { border-top: 2px solid var(--c-border-strong); }
table.arrivals tr:not(.scored) .nudges { visibility: hidden; }

/* Flèches de réordonnancement (saisie des arrivées) */
.pos-cell { white-space: nowrap; }
.nudges { display: inline-flex; flex-direction: column; vertical-align: middle; margin-left: 4px; gap: 2px; }
.pos-nudge {
    border: 1px solid var(--c-border-strong);
    background: #f2f6fa;
    color: var(--c-primary);
    border-radius: var(--r-s);
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    cursor: pointer;
}
.pos-nudge:active { background: var(--c-primary); color: #fff; }

@media (max-width: 600px) {
    .burgeeLeft, .burgeeRight { max-width: 40px; max-height: 40px; }
    .regatta-header { padding: 0 46px; }
    .regatta-header h1 { font-size: 18px; }
    .hide-sm { display: none; } /* colonnes secondaires masquées sur téléphone */
    .show-sm { display: inline; }

    /* Tables plus compactes */
    table.res th, table.res td { padding: 6px 3px; }

    /* Pied de page sur 3 lignes : club / adresse / liens */
    .footer .f-club, .footer .f-addr, .footer .f-links { display: block; margin: 2px 0; }
    .footer .f-sep { display: none; }

    /* Moins de marges latérales : chaque pixel compte pour les tableaux */
    .page { padding-left: 6px; padding-right: 6px; }
    details.admin-sec { padding-left: 6px; padding-right: 6px; }

    /* Les champs à taille fixe (size=34, etc.) ne doivent JAMAIS déborder l'écran :
       c'est ce débordement qui créait la grande marge à droite sur téléphone */
    input, select, textarea { max-width: 100%; box-sizing: border-box; }

    /* Tables un peu plus denses : colonnes resserrées */
    table.res { font-size: 11px; }
    table.res th, table.res td { padding: 5px 2px; }
}

/* ---- Hub multi-volets ---- */
.area-grid {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 980px;
    margin: 18px auto;
}
.area-card {
    flex: 1 1 280px;
    max-width: 320px;
    border: 1px solid var(--c-border-card);
    border-radius: var(--r-xl);
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
    padding: 18px;
    text-align: center;
    background: var(--c-bg);
}
.area-card h2 { margin: 4px 0 8px; font-size: 18px; }
.area-card p { color: var(--c-text-2); font-size: 13.5px; min-height: 40px; }
.area-card.disabled { opacity: .55; background: var(--c-tbl-zebra); }
.area-card.disabled .soon {
    display: inline-block;
    background: var(--c-text-3);
    color: #fff;
    border-radius: var(--r-s);
    padding: 6px 14px;
    font-size: 13px;
}
.area-card .sublink { display: block; margin-top: 8px; font-size: 12px; }

/* ---- Menus déroulants, rangée d'événement, bloc Comité/langue : voir nav.css ---- */

/* Barre globale au-dessus des applications (ex. /regate/) */
.site-topbar {
    background: var(--c-primary);
    text-align: center;
    padding: 6px 4px;
}
.site-topbar a {
    color: #dce8f2;
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 12.5px;
    padding: 2px 10px;
    display: inline-block;
}
.site-topbar a:hover { color: #fff; text-decoration: underline; }