/* =========================================================
   PORTAIL V2 — FEUILLE DE STYLE GLOBALE
   12e Région Colombophile
   Version 1.0
   À charger APRÈS les autres feuilles CSS du site.
   ========================================================= */

:root{
    --site-max-width: 1880px;
    --site-gutter: clamp(10px, 1.15vw, 24px);

    --color-navy: #062f5f;
    --color-navy-dark: #031f3f;
    --color-blue: #0b63b6;
    --color-blue-dark: #0751a1;
    --color-blue-soft: #eaf3ff;

    --color-bg: #f3f6fa;
    --color-surface: #ffffff;
    --color-text: #10213d;
    --color-muted: #60708a;
    --color-border: #d8e1ec;

    --color-success: #166534;
    --color-success-bg: #dcfce7;
    --color-warning: #92400e;
    --color-warning-bg: #fef3c7;
    --color-danger: #991b1b;
    --color-danger-bg: #fee2e2;

    --radius-sm: 9px;
    --radius-md: 14px;
    --radius-lg: 22px;

    --shadow-sm: 0 8px 20px rgba(15,23,42,.08);
    --shadow-md: 0 14px 34px rgba(15,23,42,.12);
    --shadow-lg: 0 28px 70px rgba(0,0,0,.22);
}

/* ---------- Base ---------- */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    min-height:100%;
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--color-text);
    background:var(--color-bg);
    line-height:1.45;
}

img,
svg,
video{
    max-width:100%;
    height:auto;
}

a{
    color:var(--color-blue-dark);
    text-decoration:none;
}

a:hover{
    text-decoration:none;
}

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

/* ---------- Largeur générale ---------- */

.container,
.main-container,
.page-container,
.content-container,
.wrapper,
.site-wrapper,
.layout-container,
.admin-container{
    width:min(calc(100vw - (var(--site-gutter) * 2)), var(--site-max-width)) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

main,
.main-content,
.page-content{
    max-width:none;
}

.page-wrap,
.page,
.main-content{
    padding-left:0 !important;
    padding-right:0 !important;
}

/* ---------- En-tête global ---------- */

.site-header,
.topbar,
.main-header,
header[role="banner"]{
    background:linear-gradient(90deg,var(--color-navy-dark),var(--color-navy));
    color:#fff;
    box-shadow:0 6px 24px rgba(0,0,0,.16);
}

.topbar-inner,
.header-inner,
.site-header-inner{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}

.brand,
.site-brand,
.logo-link{
    display:flex;
    align-items:center;
    gap:13px;
    color:#fff;
}

.brand strong,
.site-brand strong{
    display:block;
}

.brand small,
.site-brand small{
    display:block;
    margin-top:3px;
    color:#dbeafe;
}

/* ---------- Navigation ---------- */

.nav,
.nav-buttons,
.main-nav,
.site-nav{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.nav a,
.nav-button,
.main-nav a,
.site-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border-radius:11px;
    color:#fff;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.10);
    font-weight:800;
    transition:.18s ease;
}

.nav a:hover,
.nav-button:hover,
.main-nav a:hover,
.site-nav a:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.18);
}

.nav a.active,
.nav-button.active,
.main-nav a.active,
.site-nav a.active{
    background:#fff;
    color:var(--color-blue-dark);
}

/* ---------- Cartes et panneaux ---------- */

.card,
.panel,
.main-shell,
.form-shell,
.dashboard-shell,
.admin-shell,
.content-shell,
.widget{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.main-shell,
.form-shell,
.dashboard-shell,
.admin-shell,
.content-shell{
    width:100% !important;
    max-width:none !important;
}

.card,
.panel,
.widget{
    border-radius:var(--radius-md);
}

.card:hover,
.panel:hover,
.widget:hover{
    box-shadow:var(--shadow-md);
}

/* ---------- Titres ---------- */

h1,
h2,
h3,
h4{
    color:var(--color-navy);
    line-height:1.2;
}

h1{
    font-size:clamp(1.9rem,3.2vw,3rem);
}

h2{
    font-size:clamp(1.35rem,2vw,2rem);
}

/* ---------- Boutons ---------- */

.button,
.btn,
button[type="submit"],
input[type="submit"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 17px;
    border:0;
    border-radius:var(--radius-sm);
    background:linear-gradient(145deg,var(--color-blue),var(--color-blue-dark));
    color:#fff;
    font-weight:900;
    cursor:pointer;
    transition:.18s ease;
}

.button:hover,
.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(11,99,182,.20);
}

.button.secondary,
.btn-secondary{
    background:var(--color-blue-soft);
    color:var(--color-blue-dark);
}

.button.danger,
.btn-danger{
    background:#b91c1c;
    color:#fff;
}

/* ---------- Formulaires ---------- */

.field{
    margin-bottom:16px;
}

.field label,
form label{
    display:block;
    margin-bottom:7px;
    color:#334155;
    font-weight:800;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
select,
textarea{
    width:100%;
    min-height:46px;
    padding:10px 13px;
    border:1px solid #cfd9e5;
    border-radius:var(--radius-sm);
    background:#fff;
    color:var(--color-text);
    transition:.16s ease;
}

textarea{
    min-height:120px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--color-blue);
    box-shadow:0 0 0 4px rgba(11,99,182,.10);
}

/* ---------- Tableaux ---------- */

.table-card,
.table-wrapper{
    width:100%;
    overflow:hidden;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:#fff;
}

.table-scroll{
    width:100%;
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
}

thead th{
    padding:13px 12px;
    text-align:left;
    background:#eef4fb;
    color:#14345c;
    font-size:.79rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    border-bottom:1px solid var(--color-border);
}

tbody td{
    padding:13px 12px;
    border-bottom:1px solid #e8edf4;
    vertical-align:middle;
}

tbody tr:last-child td{
    border-bottom:0;
}

tbody tr:hover{
    background:#f8fbff;
}

/* ---------- Messages ---------- */

.notice,
.alert,
.message{
    margin:16px 0;
    padding:14px 16px;
    border-radius:11px;
    background:var(--color-blue-soft);
    color:var(--color-navy);
    line-height:1.5;
}

.notice.ok,
.alert-success{
    background:var(--color-success-bg);
    color:var(--color-success);
}

.notice.warning,
.alert-warning{
    background:var(--color-warning-bg);
    color:var(--color-warning);
}

.notice.danger,
.alert-danger{
    background:var(--color-danger-bg);
    color:var(--color-danger);
}

/* ---------- Badges ---------- */

.badge,
.status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:900;
}

.badge.open,
.status.open,
.badge.success{
    background:var(--color-success-bg);
    color:var(--color-success);
}

.badge.closed,
.status.closed,
.badge.warning{
    background:var(--color-warning-bg);
    color:var(--color-warning);
}

/* ---------- Grilles ---------- */

.grid,
.cards-grid,
.stats-grid,
.form-grid{
    display:grid;
    gap:clamp(12px,1vw,20px);
}

.stats-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* ---------- Espacements ---------- */

.content,
.form-body,
.card-body,
.panel-body{
    padding:clamp(16px,1.4vw,28px);
}

.hero,
.hero-card,
.page-header{
    padding-left:clamp(18px,1.5vw,30px);
    padding-right:clamp(18px,1.5vw,30px);
}

/* ---------- Pied de page ---------- */

.footer,
.site-footer{
    margin-top:40px;
    padding:24px 0;
    background:var(--color-navy-dark);
    color:#cbd5e1;
}

/* ---------- Signalements ---------- */

.ranking-map-layout{
    display:grid;
    grid-template-columns:minmax(0,2.15fr) minmax(340px,.85fr);
    gap:clamp(12px,1vw,20px);
}

.ranking-column,
.map-column{
    min-width:0;
}

#live-ranking table{
    width:100%;
    table-layout:fixed;
    min-width:0;
}

#live-ranking .table-scroll{
    overflow-x:hidden;
}

#live-ranking .name,
#live-ranking .club{
    white-space:normal;
    overflow-wrap:anywhere;
}

/* ---------- Administration ---------- */

.admin-layout{
    display:grid;
    grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    gap:20px;
}

.admin-sidebar{
    background:var(--color-navy-dark);
    color:#fff;
    border-radius:var(--radius-md);
    padding:18px;
}

.admin-sidebar a{
    display:block;
    padding:10px 12px;
    border-radius:9px;
    color:#fff;
    font-weight:800;
}

.admin-sidebar a:hover,
.admin-sidebar a.active{
    background:rgba(255,255,255,.12);
}

/* ---------- Responsive ---------- */

@media(max-width:1100px){
    .ranking-map-layout{
        grid-template-columns:1fr;
    }

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

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

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

@media(max-width:850px){
    .topbar-inner,
    .header-inner,
    .site-header-inner{
        flex-direction:column;
        align-items:flex-start;
        padding:15px 0;
    }

    .nav,
    .nav-buttons,
    .main-nav,
    .site-nav{
        width:100%;
    }

    .nav a,
    .nav-button,
    .main-nav a,
    .site-nav a{
        flex:1;
    }

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

@media(max-width:760px){
    :root{
        --site-gutter:8px;
    }

    .container,
    .main-container,
    .page-container,
    .content-container,
    .wrapper,
    .site-wrapper,
    .layout-container,
    .admin-container{
        width:calc(100vw - 16px) !important;
    }

    .nav a,
    .nav-button,
    .main-nav a,
    .site-nav a{
        min-width:100%;
    }

    .content,
    .form-body,
    .card-body,
    .panel-body{
        padding:14px;
    }

    thead th,
    tbody td{
        padding:10px 8px;
    }
}