/* ==========================================================================
   Dinner Data — charte graphique (octobre 2026)
   Chargée après app.min.css et custom.min.css : elle remplace les couleurs,
   polices et images du thème Velzon sans modifier ses fichiers.
   Référence : artefact « Charte Dinner Data ».
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800;900&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap");

:root,
[data-bs-theme="light"],
[data-theme="default"] {
    /* Couleurs de la charte */
    --dd-creme: #fde5c9;
    --dd-creme-claire: #fff4e6;
    --dd-creme-soutenue: #f7d6ae;
    --dd-encre: #00243c;
    --dd-encre-douce: #5b4a3a;
    --dd-marine: #00243c;
    --dd-sur-marine: #fde5c9;
    --dd-petrole: #055966;
    --dd-sarcelle: #0ab1a5;
    --dd-sur-sarcelle: #00243c;
    --dd-sarcelle-texte: #05766e;
    --dd-argent: #b0aca5;
    --dd-filet: #e8c9a2;
    --dd-bordure: #8c6f4e;
    --dd-focus: #00243c;
    --dd-positif: #05766e;
    --dd-attention: #8f5306;
    --dd-critique: #a1261b;

    --dd-font-titre: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
    --dd-font-texte: Manrope, "Segoe UI", system-ui, sans-serif;
    --dd-font-donnee: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

    /* Variables du thème Velzon / Bootstrap */
    --vz-font-sans-serif: var(--dd-font-texte);
    --vz-body-font-family: var(--dd-font-texte);
    --vz-body-bg: var(--dd-creme);
    --vz-body-bg-rgb: 253, 229, 201;
    --vz-body-color: var(--dd-encre);
    --vz-body-color-rgb: 0, 36, 60;
    --vz-heading-color: var(--dd-encre);
    --vz-secondary-color: var(--dd-encre-douce);
    --vz-emphasis-color: var(--dd-encre);
    --vz-card-bg: var(--dd-creme-claire);
    --vz-card-bg-custom: var(--dd-creme-claire);
    --vz-secondary-bg: var(--dd-creme-claire);
    --vz-tertiary-bg: var(--dd-creme-soutenue);
    --vz-light: var(--dd-creme-soutenue);
    --vz-light-rgb: 247, 214, 174;
    --vz-border-color: var(--dd-filet);
    --vz-input-bg: var(--dd-creme-claire);
    --vz-input-border-custom: var(--dd-bordure);
    --vz-header-bg: var(--dd-creme);
    --vz-footer-bg: var(--dd-creme-soutenue);
    --vz-link-color: var(--dd-sarcelle-texte);
    --vz-link-color-rgb: 5, 118, 110;
    --vz-link-hover-color: var(--dd-encre);
    --vz-primary: var(--dd-marine);
    --vz-primary-rgb: 0, 36, 60;
    --vz-primary-text-emphasis: var(--dd-marine);
    --vz-primary-bg-subtle: var(--dd-creme-soutenue);
    --vz-success: var(--dd-sarcelle-texte);
    --vz-success-rgb: 5, 118, 110;
    --vz-info: var(--dd-petrole);
    --vz-info-rgb: 5, 89, 102;
    --vz-warning: var(--dd-attention);
    --vz-danger: var(--dd-critique);
}

/* --- Base -------------------------------------------------------------- */
body {
    background-color: var(--dd-creme);
    color: var(--dd-encre);
    font-family: var(--dd-font-texte);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.ff-secondary.fw-semibold {
    font-family: var(--dd-font-titre);
    color: inherit;
    letter-spacing: 0.005em;
}

h1, .h1, .display-4 { font-weight: 800; }
h2, .h2, h3, .h3 { font-weight: 700; }

.ff-secondary, .ff-primary { font-family: var(--dd-font-texte) !important; }

a { color: var(--dd-sarcelle-texte); }
a:hover { color: var(--dd-encre); }

:focus-visible {
    outline: 2px solid var(--dd-focus);
    outline-offset: 2px;
}

/* Fonds : le blanc devient crème partout */
.bg-white, .bg-light, .section.bg-white, .layout-wrapper.landing,
.main-content, .page-content, #page-topbar {
    background-color: var(--dd-creme) !important;
}

.card, .modal-content, .dropdown-menu, .accordion-item, .list-group-item {
    background-color: var(--dd-creme-claire);
    border-color: var(--dd-filet);
}

.card {
    border: 0;
    box-shadow: 0 1px 0 rgba(0, 36, 60, 0.08), 0 8px 24px rgba(0, 36, 60, 0.08);
}

.form-control, .form-select {
    background-color: var(--dd-creme-claire);
    border-color: var(--dd-bordure);
    color: var(--dd-encre);
}

.form-control:focus, .form-select:focus {
    border-color: var(--dd-encre);
    box-shadow: 0 0 0 2px var(--dd-creme), 0 0 0 4px var(--dd-focus);
}

.text-muted { color: var(--dd-encre-douce) !important; }
.text-primary { color: var(--dd-encre) !important; }
.text-success { color: var(--dd-positif) !important; }
.text-green { color: var(--dd-sarcelle) !important; }

/* --- Boutons ----------------------------------------------------------- */
.btn { font-family: var(--dd-font-texte); font-weight: 700; border-radius: 8px; }

.btn-primary {
    --vz-btn-bg: var(--dd-marine);
    --vz-btn-border-color: var(--dd-marine);
    --vz-btn-hover-bg: var(--dd-petrole);
    --vz-btn-hover-border-color: var(--dd-petrole);
    --vz-btn-active-bg: var(--dd-petrole);
    --vz-btn-active-border-color: var(--dd-petrole);
    --vz-btn-focus-shadow-rgb: 0, 36, 60;
    --vz-btn-color: var(--dd-sur-marine);
    --vz-btn-hover-color: var(--dd-sur-marine);
    --vz-btn-active-color: var(--dd-sur-marine);
}

/* Bouton d'accent (anciennement vert) : sarcelle, texte marine */
.btn-success1, .btn-success {
    --vz-btn-bg: var(--dd-sarcelle);
    --vz-btn-border-color: var(--dd-sur-sarcelle);
    --vz-btn-hover-bg: #13c4b7;
    --vz-btn-hover-border-color: var(--dd-sur-sarcelle);
    --vz-btn-active-bg: #099a8f;
    --vz-btn-active-border-color: var(--dd-sur-sarcelle);
    --vz-btn-focus-shadow-rgb: 10, 177, 165;
    --vz-btn-color: var(--dd-sur-sarcelle);
    --vz-btn-hover-color: var(--dd-sur-sarcelle);
    --vz-btn-active-color: var(--dd-sur-sarcelle);
    background-image: none !important;
    border-width: 2px;
}

/* Ancien bouton dégradé marine-vert */
.colobtn {
    background: var(--dd-marine) !important;
    color: var(--dd-sur-marine) !important;
}

/* --- En-tête du site public ------------------------------------------- */
.navbar-landing, #navbar.navbar-landing {
    background: var(--dd-creme) !important;
    border-bottom: 1px solid var(--dd-filet);
    box-shadow: none !important;
}

.navbar-landing .navbar-nav .nav-item .nav-link {
    font-family: var(--dd-font-titre);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--dd-encre);
}

.navbar-landing .navbar-nav .nav-item .nav-link:hover,
.navbar-landing .navbar-nav .nav-item .nav-link.active {
    color: var(--dd-encre);
    box-shadow: inset 0 -2px 0 var(--dd-sarcelle);
}

/* --- Bandeau d'accueil -------------------------------------------------- */
.nft-hero {
    background-image: url(../images/charte/dd-accueil-bandeau.jpg) !important;
    background-position: center right !important;
    background-size: cover !important;
}

.nft-hero .bg-overlay {
    background: linear-gradient(90deg, rgba(0, 36, 60, 0.92) 0%, rgba(0, 36, 60, 0.80) 38%, rgba(0, 36, 60, 0) 64%) !important;
    opacity: 1 !important;
}

.nft-hero h1 {
    font-family: var(--dd-font-titre);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.95 !important;
    color: var(--dd-sur-marine) !important;
}

.nft-hero h6, .nft-hero .display-6 {
    font-family: var(--dd-font-texte);
    font-weight: 700;
    color: var(--dd-sur-marine) !important;
}

.nft-hero .lead { color: rgba(253, 229, 201, 0.85) !important; }

@media (max-width: 991.98px) {
    .nft-hero .bg-overlay {
        background: rgba(0, 36, 60, 0.82) !important;
    }
}

/* --- Bandeaux marine (appel à l'action en bas de page, sections bg-primary) */
.bg-primary {
    background-color: var(--dd-marine) !important;
}

.bg-primary .bg-overlay-pattern, .bg-overlay-pattern {
    background-image: none !important;
}

/* --- Pied de page ------------------------------------------------------- */
footer.SurveyForm, .custom-footer {
    background-color: var(--dd-creme-soutenue) !important;
    color: var(--dd-encre);
    border-top: 1px solid var(--dd-filet);
}

footer.SurveyForm a, .footer-list a { color: var(--dd-encre); }
footer.SurveyForm a:hover, .footer-list a:hover { color: var(--dd-sarcelle-texte); }

/* --- Pages connexion / inscription / mot de passe ----------------------- */
.auth-one-bg {
    background-image: url(../images/charte/dd-connexion-fond.jpg) !important;
    background-position: center !important;
    background-size: cover !important;
}

.auth-one-bg .bg-overlay {
    background: rgba(0, 36, 60, 0.55) !important;
    opacity: 1 !important;
}

.auth-page-content .card, .auth-page-wrapper .card {
    background-color: var(--dd-creme-claire);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* --- Tableau de bord (_Admin) ------------------------------------------ */
.app-menu.navbar-menu, .navbar-menu {
    background: var(--dd-marine) !important;
}

/* --- Chiffres ---------------------------------------------------------- */
.counter-value, .fs-22.fw-semibold, .ff-data {
    font-family: var(--dd-font-donnee);
    font-variant-numeric: tabular-nums;
}

/* --- Page « Comment ça marche » : captures d'écran manquantes ----------
   Le dossier assets/images/Howitworks n'existe pas : on masque ces images
   jusqu'à ce que de nouvelles captures de la plateforme soient prêtes. */
img[src*="Howitworks"] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}