/* ============================================================
   Galette – Modern UI Override  (galette_local.css)
   Chargé automatiquement par elements/header.html.twig
   ============================================================ */

/* ── Google Font ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design tokens ───────────────────────────────────────── */
:root {
    --g-font:        'Inter', system-ui, -apple-system, sans-serif;
    --g-radius:      10px;
    --g-radius-sm:   6px;
    --g-radius-lg:   16px;
    --g-shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --g-shadow:      0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
    --g-shadow-lg:   0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
    --g-transition:  all .18s ease;
    --g-primary:     #4f46e5;
    --g-primary-h:   #4338ca;
    --g-primary-lt:  #eef2ff;
    --g-secondary:   #6366f1;
    --g-success:     #10b981;
    --g-warning:     #d97706;
    --g-danger:      #ef4444;
    --g-info:        #3b82f6;
    --g-bg:          #f8fafc;
    --g-surface:     #ffffff;
    --g-border:      #e2e8f0;
    --g-text:        #0f172a;
    --g-text-muted:  #475569;
    --g-sidebar-bg:  #1e1b4b;
    --g-sidebar-txt: #ffffff;
    --g-sidebar-act: #4f46e5;
    --g-header-bg:   #4f46e5;
    --g-header-txt:  #ffffff;
}

/* ── Base ────────────────────────────────────────────────── */
body, .ui.form, .ui.menu, .ui.segment, .ui.table,
.ui.modal, .ui.dropdown, button, input, select, textarea {
    font-family: var(--g-font) !important;
}

body {
    background-color: var(--g-bg) !important;
    color: var(--g-text) !important;
}

/* ── Sidebar (menu latéral) ──────────────────────────────── */
#sidemenu,
nav#sidebarmenu {
    background: var(--g-sidebar-bg) !important;
    border-right: none !important;
    box-shadow: 2px 0 20px rgba(0,0,0,.15) !important;
}

#sidemenu .ui.block.brand.header,
#sidemenu .ui.block.huge.brand.header {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    padding: 1.2rem 1rem .6rem !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
}

#sidemenu .sub.tiny.header {
    color: #000000 !important;
    font-size: .72rem !important;
    font-weight: 400 !important;
}

/* Nav items */
#sidemenu .ui.vertical.menu .item,
#sidemenu .ui.vertical.menu a.item,
nav#sidebarmenu .item {
    color: #000000 !important;
    border-radius: var(--g-radius-sm) !important;
    margin: 2px 8px !important;
    padding: .65rem .9rem !important;
    transition: var(--g-transition) !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
}

#sidemenu .ui.vertical.menu .item:hover,
#sidemenu .ui.vertical.menu a.item:hover,
nav#sidebarmenu .item:hover {
    background: rgba(255,255,255,.15) !important;
    color: #001f5b !important;
}

#sidemenu .ui.vertical.menu .active.item,
#sidemenu .ui.vertical.menu a.active.item {
    background: var(--g-sidebar-act) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79,70,229,.4) !important;
}

#sidemenu .ui.vertical.menu .item i.icon,
nav#sidebarmenu .item i.icon {
    color: #000000 !important;
}

/* Accordion titles in sidebar */
#sidemenu .ui.accordion .title,
#sidemenu .ui.accordion.menu .item .title {
    color: #ffffff !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    padding: .9rem .9rem .4rem !important;
    margin: 0 8px !important;
}

/* Compact menu toggle */
#sidemenu .ui.toggle.checkbox label {
    color: #000000 !important;
    font-size: .8rem !important;
}

/* ── Top bar ─────────────────────────────────────────────── */
#topbar,
nav#topbarmenu,
.ui.fixed.menu:not(.vertical) {
    background: var(--g-surface) !important;
    border-bottom: 1px solid var(--g-border) !important;
    box-shadow: var(--g-shadow-sm) !important;
}

/* ── Page header (titre de page) ─────────────────────────── */
.ui.horizontal.segments.header {
    background: linear-gradient(135deg, var(--g-primary) 0%, var(--g-secondary) 100%) !important;
    border: none !important;
    border-radius: var(--g-radius) !important;
    box-shadow: var(--g-shadow) !important;
    margin-bottom: 1.5rem !important;
    padding: .8rem 1.2rem !important;
}

.ui.horizontal.segments.header h1,
.ui.horizontal.segments.header .ui.center.aligned.segment h1 {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.ui.horizontal.segments.header .ui.segment {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Titre page non connecté */
.ui.block.center.aligned.header {
    background: linear-gradient(135deg, var(--g-primary) 0%, var(--g-secondary) 100%) !important;
    border: none !important;
    border-radius: var(--g-radius) !important;
    color: #ffffff !important;
    box-shadow: var(--g-shadow) !important;
    margin-bottom: 1.5rem !important;
}

.ui.block.center.aligned.header h1 {
    color: #ffffff !important;
}

/* ── Segments / Cards ────────────────────────────────────── */
.ui.segment:not(.basic):not(.inverted):not(.accordion-styled) {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius) !important;
    box-shadow: var(--g-shadow-sm) !important;
    background: var(--g-surface) !important;
}

.ui.segments:not(.basic) {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius) !important;
    box-shadow: var(--g-shadow-sm) !important;
}

.ui.segments:not(.basic) > .ui.segment {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

.ui.segments:not(.basic) > .ui.segment:first-child {
    border-top-left-radius: var(--g-radius) !important;
    border-top-right-radius: var(--g-radius) !important;
}

.ui.segments:not(.basic) > .ui.segment:last-child {
    border-bottom-left-radius: var(--g-radius) !important;
    border-bottom-right-radius: var(--g-radius) !important;
    border-bottom: none !important;
}

/* Yellow accent segments */
.ui.yellow.segment:not(.inverted) {
    border-top: 3px solid var(--g-warning) !important;
    border-radius: var(--g-radius) !important;
}

/* Secondary segment (ex: mot de passe perdu) */
.ui.secondary.segment {
    background: var(--g-bg) !important;
    border-top: 1px solid var(--g-border) !important;
}

/* ── Formulaires ─────────────────────────────────────────── */
.ui.form .field > label {
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: var(--g-text) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-bottom: .35rem !important;
}

.ui.form .field.required > label::after {
    color: var(--g-danger) !important;
}

.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="number"],
.ui.form input[type="date"],
.ui.form input[type="tel"],
.ui.form input[type="url"],
.ui.form textarea,
.ui.form select,
.ui.input > input {
    border: 1.5px solid #94a3b8 !important;
    border-radius: var(--g-radius-sm) !important;
    padding: .65rem .9rem !important;
    font-size: 1rem !important;
    color: var(--g-text) !important;
    background: var(--g-surface) !important;
    transition: var(--g-transition) !important;
    box-shadow: none !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.input > input:focus {
    border-color: var(--g-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important;
    outline: none !important;
}

.ui.form input[readonly],
.ui.form input[disabled],
.ui.form textarea[disabled] {
    background: var(--g-bg) !important;
    color: #334155 !important;
    cursor: not-allowed !important;
}

/* Input avec icône */
.ui.left.icon.input > i.icon {
    color: #334155 !important;
}

.ui.left.icon.input > input {
    padding-left: 2.8rem !important;
}

/* Select dropdown Semantic */
.ui.search.dropdown,
.ui.selection.dropdown {
    border: 1.5px solid #94a3b8 !important;
    border-radius: var(--g-radius-sm) !important;
    font-size: 1rem !important;
    color: var(--g-text) !important;
    transition: var(--g-transition) !important;
}

.ui.search.dropdown:focus,
.ui.selection.dropdown:focus,
.ui.selection.active.dropdown {
    border-color: var(--g-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important;
}

.ui.selection.dropdown .menu {
    border: 1.5px solid var(--g-border) !important;
    border-radius: 0 0 var(--g-radius-sm) var(--g-radius-sm) !important;
    box-shadow: var(--g-shadow) !important;
}

.ui.selection.dropdown .menu .item:hover {
    background: var(--g-primary-lt) !important;
    color: var(--g-primary) !important;
}

/* Checkbox toggle */
.ui.toggle.checkbox input:checked ~ label::before {
    background: var(--g-primary) !important;
}

.ui.toggle.checkbox label {
    font-size: .9rem !important;
    color: var(--g-text) !important;
}

/* ── Boutons ─────────────────────────────────────────────── */
.ui.button {
    border-radius: var(--g-radius-sm) !important;
    font-family: var(--g-font) !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    letter-spacing: .02em !important;
    transition: var(--g-transition) !important;
    box-shadow: none !important;
}

.ui.primary.button,
.ui.primary.buttons .button {
    background: var(--g-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79,70,229,.35) !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
    background: var(--g-primary-h) !important;
    box-shadow: 0 4px 14px rgba(79,70,229,.45) !important;
    transform: translateY(-1px) !important;
}

.ui.primary.button:active {
    transform: translateY(0) !important;
}

.ui.basic.button,
.ui.basic.buttons .button {
    border: 1.5px solid #94a3b8 !important;
    color: var(--g-text) !important;
    background: var(--g-surface) !important;
    box-shadow: none !important;
}

.ui.basic.button:hover {
    background: var(--g-bg) !important;
    border-color: var(--g-primary) !important;
    color: var(--g-primary) !important;
}

.ui.red.button, .ui.red.buttons .button {
    background: var(--g-danger) !important;
}

.ui.green.button, .ui.green.buttons .button {
    background: var(--g-success) !important;
}

.ui.orange.button, .ui.orange.buttons .button {
    background: var(--g-warning) !important;
    color: #ffffff !important;
}

/* Bouton fluid (login) */
.ui.fluid.button {
    border-radius: var(--g-radius-sm) !important;
    padding: .85rem !important;
    font-size: 1rem !important;
}

/* Bouton circulaire (back to top, doc) */
.ui.circular.button {
    border-radius: 50% !important;
}

/* ── Tables ──────────────────────────────────────────────── */
.ui.table {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--g-shadow-sm) !important;
}

.ui.table thead th {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    border-bottom: 2px solid #94a3b8 !important;
    padding: .85rem 1rem !important;
}

.ui.table tbody tr {
    transition: background .12s ease !important;
}

.ui.table tbody tr:hover {
    background: var(--g-primary-lt) !important;
}

.ui.table tbody td {
    border-top: 1px solid var(--g-border) !important;
    padding: .75rem 1rem !important;
    font-size: .95rem !important;
    color: var(--g-text) !important;
}

.ui.table tfoot th {
    background: var(--g-bg) !important;
    border-top: 2px solid var(--g-border) !important;
}

/* ── Messages / Alertes ──────────────────────────────────── */
.ui.message {
    border-radius: var(--g-radius) !important;
    border: none !important;
    box-shadow: none !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
}

.ui.positive.message, .ui.success.message {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-left: 4px solid var(--g-success) !important;
}

.ui.negative.message, .ui.error.message {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-left: 4px solid var(--g-danger) !important;
}

.ui.warning.message {
    background: #fffbeb !important;
    color: #92400e !important;
    border-left: 4px solid var(--g-warning) !important;
}

.ui.info.message {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-left: 4px solid var(--g-info) !important;
}

/* ── Labels / Badges ─────────────────────────────────────── */
.ui.label {
    border-radius: 20px !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    padding: .3em .75em !important;
}

.ui.primary.label {
    background: var(--g-primary-lt) !important;
    color: var(--g-primary) !important;
    border: 1px solid rgba(79,70,229,.2) !important;
}

.ui.orange.label {
    background: #fff7ed !important;
    color: #c2410c !important;
}

/* ── Modals ──────────────────────────────────────────────── */
.ui.modal {
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow-lg) !important;
    border: none !important;
}

.ui.modal > .header {
    border-radius: var(--g-radius-lg) var(--g-radius-lg) 0 0 !important;
    background: linear-gradient(135deg, var(--g-primary) 0%, var(--g-secondary) 100%) !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    padding: 1.2rem 1.5rem !important;
}

.ui.modal > .content {
    padding: 1.5rem !important;
}

.ui.modal > .actions {
    border-top: 1px solid var(--g-border) !important;
    background: var(--g-bg) !important;
    border-radius: 0 0 var(--g-radius-lg) var(--g-radius-lg) !important;
    padding: 1rem 1.5rem !important;
}

/* ── Accordion ───────────────────────────────────────────── */
.ui.styled.accordion:not(.basic) {
    border-radius: var(--g-radius) !important;
    border: 1px solid var(--g-border) !important;
    box-shadow: var(--g-shadow-sm) !important;
}

.ui.styled.accordion:not(.basic) .title {
    font-weight: 600 !important;
    color: var(--g-text) !important;
    font-size: .92rem !important;
}

.ui.styled.accordion:not(.basic) .active.title {
    background: var(--g-primary-lt) !important;
    color: var(--g-primary) !important;
    border-radius: var(--g-radius) var(--g-radius) 0 0 !important;
}

/* ── Pagination ──────────────────────────────────────────── */
.ui.pagination.menu {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-sm) !important;
    box-shadow: none !important;
}

.ui.pagination.menu .item {
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
    min-width: 2.4rem !important;
    justify-content: center !important;
}

.ui.pagination.menu .active.item {
    background: var(--g-primary) !important;
    color: #ffffff !important;
}

.ui.pagination.menu .item:hover:not(.active) {
    background: var(--g-primary-lt) !important;
    color: var(--g-primary) !important;
}

/* ── Tabs ────────────────────────────────────────────────── */
.ui.tabular.menu {
    border-bottom: 2px solid var(--g-border) !important;
}

.ui.tabular.menu .item {
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    border-radius: 0 !important;
    transition: var(--g-transition) !important;
}

.ui.tabular.menu .active.item {
    background: transparent !important;
    border-bottom: 2px solid var(--g-primary) !important;
    color: var(--g-primary) !important;
    font-weight: 600 !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.page-footer {
    border-top: 1px solid var(--g-border) !important;
    background: var(--g-surface) !important;
}

.page-footer .footer-wrapper {
    padding: 1rem !important;
}

.page-footer .ui.horizontal.bulleted.link.list .item {
    color: #334155 !important;
    font-size: .88rem !important;
    transition: var(--g-transition) !important;
}

.page-footer .ui.horizontal.bulleted.link.list .item:hover {
    color: var(--g-primary) !important;
}

/* ── Back to top ─────────────────────────────────────────── */
#back2top {
    background: var(--g-primary) !important;
    color: #ffffff !important;
    box-shadow: var(--g-shadow) !important;
    transition: var(--g-transition) !important;
}

#back2top:hover {
    background: var(--g-primary-h) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--g-shadow-lg) !important;
}

/* ── Page de connexion ───────────────────────────────────── */
.front_page .ui.segment:not(.basic) {
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow-lg) !important;
    padding: 2rem !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}

.front_page .ui.large.header {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--g-text) !important;
}

/* ── Carte membre ────────────────────────────────────────── */
#member_card .ui.segment {
    border-radius: var(--g-radius) !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .ui.horizontal.segments.header {
        border-radius: var(--g-radius-sm) !important;
        padding: .6rem .8rem !important;
    }

    .ui.table {
        font-size: .88rem !important;
    }

    .ui.button {
        font-size: .88rem !important;
    }
}

/* ── Utilitaires ─────────────────────────────────────────── */
.ui.divider {
    border-color: var(--g-border) !important;
}

.ui.breadcrumb .divider {
    color: #334155 !important;
}

.ui.breadcrumb .section {
    font-size: .92rem !important;
    color: #334155 !important;
}

.ui.breadcrumb .active.section {
    color: var(--g-primary) !important;
    font-weight: 600 !important;
}

/* Icônes de tooltip */
i.circular.basic.question.icon.tooltip {
    background: var(--g-primary-lt) !important;
    color: var(--g-primary) !important;
    border: 1px solid rgba(79,70,229,.2) !important;
    transition: var(--g-transition) !important;
}

i.circular.basic.question.icon.tooltip:hover {
    background: var(--g-primary) !important;
    color: #ffffff !important;
}

/* Champ exemple / aide */
.exemple {
    font-size: .85rem !important;
    color: #475569 !important;
    margin-top: .25rem !important;
    font-style: italic !important;
}

/* Lien mot de passe perdu */
a.password-lost {
    color: var(--g-primary) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    transition: var(--g-transition) !important;
}

a.password-lost:hover {
    color: var(--g-primary-h) !important;
}

/* Scrollbar moderne */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--g-bg); }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }