/*
 * Thème global AOCDTF Réunion
 * Phase 6 - contraste renforcé
 *
 * Principe :
 * - arrière-plan sable assumé ;
 * - contenus blanc chaud ;
 * - brun Compagnons comme couleur d'identité ;
 * - préparation native du futur mode sombre.
 */

:root {
    color-scheme: light;

    /* Identité */
    --app-primary: #6b4516;
    --app-primary-rgb: 107, 69, 22;
    --app-primary-hover: #543510;
    --app-primary-strong: #3f280c;
    --app-accent: #b88746;
    --app-accent-soft: #ead8bd;

    /* Arrière-plan : volontairement plus présent */
    --app-bg-start: #eadcc8;
    --app-bg-middle: #dfcbae;
    --app-bg-end: #cfb38e;
    --app-glow-primary: rgba(107, 69, 22, .12);
    --app-glow-sand: rgba(255, 250, 241, .38);

    /* Surfaces : nettement séparées du fond */
    --app-surface: rgba(255, 253, 249, .98);
    --app-surface-solid: #fffdf9;
    --app-surface-soft: #f7efe4;
    --app-surface-muted: #efe2d0;
    --app-calendar-cell: #fffaf3;
    --app-calendar-alt: #faf2e7;

    /* Texte / bordures */
    --app-text: #26313c;
    --app-heading: #171d24;
    --app-muted: #625b53;
    --app-border: #d2b995;
    --app-border-strong: #b99667;
    --app-border-soft: rgba(107, 69, 22, .17);

    /* Relief */
    --app-shadow-sm: 0 .22rem .7rem rgba(67, 43, 13, .10);
    --app-shadow: 0 .55rem 1.35rem rgba(67, 43, 13, .14);
    --app-shadow-hover: 0 .9rem 2rem rgba(67, 43, 13, .19);

    /* Bootstrap */
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-link-color: var(--app-primary);
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-body-bg: var(--app-bg-middle);
    --bs-body-color: var(--app-text);
    --bs-heading-color: var(--app-heading);
    --bs-border-color: var(--app-border);
}

/* Futur mode sombre : déjà prêt, pas encore activé */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --app-primary: #ddb176;
    --app-primary-rgb: 221, 177, 118;
    --app-primary-hover: #ecc58f;
    --app-primary-strong: #f2d3a6;
    --app-accent: #d6a360;
    --app-accent-soft: #4a3926;

    --app-bg-start: #15120f;
    --app-bg-middle: #211a14;
    --app-bg-end: #302317;
    --app-glow-primary: rgba(221, 177, 118, .09);
    --app-glow-sand: rgba(255, 255, 255, .025);

    --app-surface: rgba(42, 35, 28, .98);
    --app-surface-solid: #2a231c;
    --app-surface-soft: #332a21;
    --app-surface-muted: #3d3125;
    --app-calendar-cell: #2c251e;
    --app-calendar-alt: #312920;

    --app-text: #f2ede7;
    --app-heading: #fff9f1;
    --app-muted: #c2b7ab;
    --app-border: #594735;
    --app-border-strong: #7b6044;
    --app-border-soft: rgba(221, 177, 118, .16);

    --app-shadow-sm: 0 .22rem .7rem rgba(0, 0, 0, .25);
    --app-shadow: 0 .55rem 1.35rem rgba(0, 0, 0, .34);
    --app-shadow-hover: 0 .9rem 2rem rgba(0, 0, 0, .44);
}

html {
    background-color: var(--app-bg-end);
}

body {
    min-height: 100vh;
    color: var(--app-text);
    background-color: var(--app-bg-middle);
    background-image:
        radial-gradient(circle at 8% 7%, var(--app-glow-sand) 0, transparent 30rem),
        radial-gradient(circle at 92% 82%, var(--app-glow-primary) 0, transparent 34rem),
        linear-gradient(135deg, var(--app-bg-start) 0%, var(--app-bg-middle) 52%, var(--app-bg-end) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

body > main {
    background: transparent;
}

/* Surfaces */
.card,
.modal-content,
.dropdown-menu,
.accordion-item {
    color: var(--app-text);
    background: var(--app-surface);
    border: 1px solid var(--app-border) !important;
}

.card {
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(2px);
}

.card-header,
.card-footer,
.accordion-button:not(.collapsed) {
    color: var(--app-heading);
    background: linear-gradient(180deg, var(--app-surface-soft), var(--app-surface-muted));
    border-color: var(--app-border);
}

.list-group-item {
    color: var(--app-text);
    background-color: var(--app-surface-solid);
    border-color: var(--app-border);
}

/* Formulaires */
.form-control,
.form-select,
.input-group-text {
    color: var(--app-text);
    background-color: var(--app-surface-solid);
    border-color: var(--app-border);
}

.form-control:focus,
.form-select:focus {
    color: var(--app-text);
    background-color: var(--app-surface-solid);
    border-color: var(--app-border-strong);
    box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .13);
}

/* Textes / utilitaires */
.text-muted,
.text-body-secondary {
    color: var(--app-muted) !important;
}

.bg-light {
    background-color: var(--app-surface-soft) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--app-border) !important;
}

/* Boutons */
.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-primary-strong);
    --bs-btn-active-border-color: var(--app-primary-strong);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary-strong);
    --bs-btn-active-border-color: var(--app-primary-strong);
}

a {
    transition: color .15s ease;
}

.badge.bg-primary-subtle {
    background-color: rgba(var(--app-primary-rgb), .11) !important;
    color: var(--app-primary) !important;
    border-color: rgba(var(--app-primary-rgb), .28) !important;
}

/* Footer */
.app-footer {
    background: linear-gradient(135deg, var(--app-primary-strong), var(--app-primary));
}

/* ============================================================
   Trombinoscope
   ============================================================ */

.member-card {
    background: var(--app-surface-solid) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

.member-card:hover {
    border-color: var(--app-border-strong) !important;
    box-shadow: var(--app-shadow-hover) !important;
}

/* ============================================================
   Planning
   ============================================================ */

.planning-toolbar {
    background: var(--app-surface-solid) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
}

#calendar {
    padding: .5rem;
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    background: var(--app-surface-solid);
    box-shadow: var(--app-shadow);
}

.fc {
    --fc-page-bg-color: var(--app-surface-solid);
    --fc-neutral-bg-color: var(--app-surface-soft);
    --fc-border-color: var(--app-border);
    --fc-neutral-text-color: var(--app-muted);
    --fc-list-event-hover-bg-color: var(--app-surface-soft);
    color: var(--app-text);
}

.fc .fc-scrollgrid {
    overflow: hidden;
    border-color: var(--app-border);
    border-radius: .45rem;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--app-border);
}

.fc .fc-col-header-cell {
    background: var(--app-surface-muted);
}

.fc .fc-col-header-cell-cushion {
    padding: .45rem .25rem;
    color: var(--app-primary);
    font-weight: 700;
}

.fc .fc-daygrid-day,
.fc .fc-timegrid-col {
    background-color: var(--app-calendar-cell);
}

.fc .fc-daygrid-day:nth-child(even) {
    background-color: var(--app-calendar-alt);
}

.fc .fc-day-today {
    background: #f5e7bd !important;
}

[data-bs-theme="dark"] .fc .fc-day-today {
    background: #4a3a20 !important;
}

.fc .fc-toolbar-title {
    color: var(--app-heading);
}

.fc .fc-button-primary {
    --fc-button-bg-color: #24394b;
    --fc-button-border-color: #24394b;
    --fc-button-hover-bg-color: #182a39;
    --fc-button-hover-border-color: #182a39;
    --fc-button-active-bg-color: var(--app-primary);
    --fc-button-active-border-color: var(--app-primary);
}

/* ============================================================
   Dashboards
   ============================================================ */

.dashboard-page-title {
    color: var(--app-primary) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.dashboard-card {
    position: relative;
    overflow: hidden;
    background: var(--app-surface-solid) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--app-primary), var(--app-accent));
}

.dashboard-card:hover {
    transform: translateY(-3px);
    border-color: var(--app-border-strong) !important;
    box-shadow: var(--app-shadow-hover) !important;
}

.dashboard-card .card-title {
    color: var(--app-heading);
}

.dashboard-card .card-text {
    color: var(--app-text);
}

.dashboard-card--green::before { background: linear-gradient(90deg, #198754, #64b88b); }
.dashboard-card--blue::before { background: linear-gradient(90deg, #23658d, #54a6c8); }
.dashboard-card--gold::before { background: linear-gradient(90deg, #a66b12, #e0ad4b); }
.dashboard-card--slate::before { background: linear-gradient(90deg, #495867, #8795a1); }

/* Mobile */
@media (max-width: 767.98px) {
    body {
        background-attachment: scroll;
        background-image:
            radial-gradient(circle at 0% 0%, var(--app-glow-sand) 0, transparent 20rem),
            linear-gradient(160deg, var(--app-bg-start) 0%, var(--app-bg-middle) 56%, var(--app-bg-end) 100%);
    }

    .card {
        backdrop-filter: none;
    }

    #calendar {
        padding: .25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    .dashboard-card,
    .member-card {
        transition: none !important;
    }

    .dashboard-card:hover,
    .member-card:hover {
        transform: none !important;
    }
}


/* ============================================================
   PROFILS — contraste des surfaces
   Le fond sable global reste visible autour des cartes.
   ============================================================ */

body .container .card:not(.member-card):not(.dashboard-card) {
    background: var(--app-surface-solid);
    border-color: #cdb28d !important;
    box-shadow: 0 .45rem 1.25rem rgba(67, 43, 13, .13) !important;
}

body .container .card:not(.member-card):not(.dashboard-card) > .card-body {
    background: var(--app-surface-solid);
}

body .container .card:not(.member-card):not(.dashboard-card) > .card-header {
    background: linear-gradient(180deg, #fbf5ec 0%, #f3e7d6 100%);
    color: var(--app-heading);
    border-bottom: 1px solid var(--app-border);
}

/* Fiche membre : alternance très légère des informations */
body .container .card .list-group-item {
    background: #fffdf9;
    border-color: #e3d3bd;
}

body .container .card .list-group-item:nth-child(even) {
    background: #fbf6ef;
}

/* Modification du profil : champs blancs sur carte blanc chaud */
body .container .card .form-control,
body .container .card .form-select {
    background-color: #ffffff;
    border-color: #cdb895;
    color: var(--app-text);
}

body .container .card .form-control:disabled,
body .container .card .form-control[readonly] {
    background-color: #eef1f4;
    border-color: #d7dce1;
    color: #46515c;
    opacity: 1;
}

body .container .card .form-control:focus,
body .container .card .form-select:focus {
    background-color: #ffffff;
    border-color: var(--app-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .12);
}

body .container .card hr {
    border-color: var(--app-border-strong);
    opacity: .55;
}

/* Équivalent futur mode sombre */
[data-bs-theme="dark"] body .container .card:not(.member-card):not(.dashboard-card),
[data-bs-theme="dark"] body .container .card:not(.member-card):not(.dashboard-card) > .card-body,
[data-bs-theme="dark"] body .container .card .list-group-item {
    background: var(--app-surface-solid);
}

[data-bs-theme="dark"] body .container .card:not(.member-card):not(.dashboard-card) > .card-header {
    background: linear-gradient(180deg, #382e24 0%, #30271f 100%);
}

[data-bs-theme="dark"] body .container .card .list-group-item:nth-child(even) {
    background: var(--app-surface-soft);
}

[data-bs-theme="dark"] body .container .card .form-control,
[data-bs-theme="dark"] body .container .card .form-select {
    background-color: #211c17;
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-bs-theme="dark"] body .container .card .form-control:disabled,
[data-bs-theme="dark"] body .container .card .form-control[readonly] {
    background-color: #332c25;
    border-color: #4c4034;
    color: #c9c0b7;
}


/* ============================================================
   BANDEAU INSTITUTIONNEL GLOBAL
   Même présentation détachée que l'accueil.
   ============================================================ */

.app-hero {
    width: calc(100% - 2rem);
    max-width: 1320px;
    margin: 1rem auto 0;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 15%, rgba(255,255,255,.10) 0, transparent 19rem),
        linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-strong) 100%);
    box-shadow: var(--app-shadow);
}

.app-hero .container {
    max-width: 1240px;
}

@media (max-width: 991.98px) {
    .app-hero {
        width: calc(100% - 1rem);
        margin-top: .5rem;
        border-radius: 1rem;
    }

    .app-hero .d-flex {
        justify-content: center !important;
    }

    .app-hero h1 {
        flex-basis: 100%;
        order: 2;
        font-size: 1.05rem;
        line-height: 1.35;
    }

    .app-hero a:first-child {
        order: 1;
    }

    .app-hero .d-flex > .d-flex {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-left: 0 !important;
    }

    .app-hero img {
        height: 92px !important;
    }
}

@media (max-width: 575.98px) {
    .app-hero {
        width: calc(100% - .8rem);
        margin-top: .4rem;
        border-radius: .9rem;
    }

    .app-hero .container {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .app-hero img {
        height: 78px !important;
    }
}

/* ============================================================
   ACCUEIL — bandeau institutionnel détaché + accueil public
   ============================================================ */

.home-hero {
    width: calc(100% - 2rem);
    max-width: 1320px;
    margin: 1rem auto 0;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 15%, rgba(255,255,255,.10) 0, transparent 19rem),
        linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-strong) 100%);
    box-shadow: var(--app-shadow);
}

.home-hero .container {
    max-width: 1240px;
}

.home-public-intro,
.home-public-card,
.home-member-access {
    border-radius: 1rem;
}

.home-public-intro {
    padding: clamp(1.35rem, 3vw, 2.5rem);
    color: var(--app-text);
    background:
        linear-gradient(135deg,
            rgba(255,253,249,.94),
            rgba(247,239,228,.94));
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
}

.home-public-kicker {
    display: inline-block;
    color: var(--app-primary);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.home-public-intro .lead {
    max-width: 54rem;
    color: var(--app-muted);
    font-size: 1.05rem;
}

.home-public-card,
.home-member-access {
    background: var(--app-surface-solid) !important;
}

.home-public-card__icon,
.home-member-access__icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    color: var(--app-primary);
    background: rgba(var(--app-primary-rgb), .10);
    border: 1px solid rgba(var(--app-primary-rgb), .18);
    font-size: 1.35rem;
}

.home-member-access {
    position: relative;
    overflow: hidden;
}

.home-member-access::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--app-primary), var(--app-accent));
}

.home-public-news__item {
    min-height: 10rem;
    padding: 1rem;
    border-radius: .85rem;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
}

[data-bs-theme="dark"] .home-public-intro {
    background:
        linear-gradient(135deg,
            rgba(42,35,28,.97),
            rgba(51,42,33,.97));
}

@media (max-width: 991.98px) {
    .home-hero {
        width: calc(100% - 1rem);
        margin-top: .5rem;
        border-radius: 1rem;
    }

    .home-hero .d-flex {
        justify-content: center !important;
    }

    .home-hero h1 {
        flex-basis: 100%;
        order: 2;
        font-size: 1.05rem;
        line-height: 1.35;
    }

    .home-hero a:first-child {
        order: 1;
    }

    .home-hero .d-flex > .d-flex {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-left: 0 !important;
    }

    .home-hero img {
        height: 92px !important;
    }
}

@media (max-width: 575.98px) {
    .home-hero {
        width: 100%;
        margin-top: .4rem;
        border-radius: .9rem;
    }

    .home-hero .container {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .home-hero img {
        height: 78px !important;
    }

    .home-public {
        margin-top: 1rem !important;
    }

    .home-public-intro {
        padding: 1.25rem;
    }

    .home-public-intro .display-6 {
        font-size: 1.75rem;
    }

    .home-public-news__item {
        min-height: auto;
    }
}

/* ============================================================
   Accueil public — titre et photo "Qui sommes-nous ?"
   ============================================================ */

.home-public-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.55rem);
    line-height: 1.15;
    letter-spacing: .1px;
}

.home-about-layout {
    display: flow-root;
}

.home-about-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
}

.home-about-heading .home-public-card__icon {
    flex: 0 0 auto;
}

.home-about-photo {
    float: right;
    width: min(44%, 310px);
    margin: 0 0 1rem 1.5rem;
}

.home-about-photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--app-border);
    border-radius: .9rem;
    box-shadow: var(--app-shadow-sm);
}

.home-about-text p {
    text-align: left;
}

@media (max-width: 767.98px) {
    .home-public-title {
        font-size: 1.7rem;
    }

    .home-about-heading {
        gap: .7rem;
        margin-bottom: 1rem;
    }

    .home-about-photo {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 1.15rem 0;
    }

    .home-about-photo img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}