/* ==========================================================================
   UIPACT — Feuille de style commune
   Nouvelle charte graphique (navy & or) + mode sombre + footer pro + icônes
   À charger APRÈS le <style> propre à chaque page.
   ========================================================================== */

:root {
    /* --- Nouvelle charte graphique : Navy & Or --- */
    --color-blue-dark: #101B3D;
    --color-cyan-vibrant: #101B3D;
    --color-purple-dark: #C9A24B;
    --color-fuchsia-vibrant: #C9A24B;

    --color-navy: #101B3D;
    --color-navy-light: #1C2C5C;
    --color-gold: #C9A24B;
    --color-gold-light: #E4C77A;

    /* Blanc cassé */
    --bg-color: #FAF7F1;
    --bg-alt-color: #F1EAD9;
    --card-bg: #FFFFFF;
    --header-bg: #FFFFFF;
    --footer-bg: #0B1330;
    --border-color: rgba(16, 27, 61, 0.08);

    --transition-theme: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* --- Mode sombre --- */
html[data-theme="dark"] {
    --bg-color: #0E1730;
    --bg-alt-color: #131F42;
    --card-bg: #16204A;
    --header-bg: #0B1330;
    --footer-bg: #070C1E;
    --text-color: #EDEAE0;
    --border-color: rgba(201, 162, 75, 0.18);
}

html[data-theme="dark"] body { color: var(--text-color); }

html[data-theme="dark"] header {
    background-color: var(--header-bg);
    box-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .nav-links a { color: var(--text-color); }
html[data-theme="dark"] .dropdown-content {
    background-color: var(--card-bg);
    border-top-color: var(--color-gold);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .dropdown-content a { border-bottom-color: rgba(255,255,255,0.06); color: var(--text-color); }
html[data-theme="dark"] .dropdown-content a:hover { background-color: var(--bg-alt-color); }
@media (max-width: 768px) {
    html[data-theme="dark"] .nav-links { background-color: var(--header-bg); }
    html[data-theme="dark"] .nav-links li { border-bottom-color: rgba(255,255,255,0.06); }
}

html[data-theme="dark"] .hero {
    background-color: var(--bg-color);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(201, 162, 75, 0.14), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(201, 162, 75, 0.07), transparent 45%),
        repeating-linear-gradient(135deg, rgba(201, 162, 75, 0.05) 0px, rgba(201, 162, 75, 0.05) 1px, transparent 1px, transparent 56px);
}
html[data-theme="dark"] .hero-title { -webkit-text-fill-color: initial; background: none; color: var(--color-gold-light); }
html[data-theme="dark"] .hero-subtitle { color: #B9B6AC; }
html[data-theme="dark"] .ticker-wrap { background-color: var(--card-bg); border-bottom-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .ticker-item { color: var(--color-gold-light); }
html[data-theme="dark"] .ticker-item span { color: var(--color-gold); }
html[data-theme="dark"] .section-title { -webkit-text-fill-color: initial; background: none; color: var(--color-gold-light); }
html[data-theme="dark"] .brand-name { -webkit-text-fill-color: initial; background: none; color: var(--color-gold-light); }
html[data-theme="dark"] .service-title { color: var(--color-gold-light); }
html[data-theme="dark"] .burger-menu span { background-color: var(--color-gold); }
html[data-theme="dark"] #scrollTopBtn:hover { background: var(--color-navy-light); }

/* Halos de survol : plus de rose/violet, uniquement de l'or */
.cta-menu-button:hover,
.cta-button:hover,
.popup-btn:hover,
.btn-black:hover,
.btn-portfolio:hover,
#scrollTopBtn:hover {
    box-shadow: 0 5px 15px rgba(201, 162, 75, 0.45) !important;
}

/* --- Compatibilité avec l'ancien système body.dark-mode (ex: ux-ui.html) --- */
body.dark-mode {
    --text-color: #EDEAE0 !important;
    --text-muted: #B9B6AC !important;
    --bg-color: #0E1730 !important;
    --bg-alt-color: #131F42 !important;
    --bg-header: #0B1330 !important;
    --bg-box: #16204A !important;
    --shadow-color: rgba(0,0,0,0.35) !important;
}
body.dark-mode .process-link { color: var(--color-gold-light) !important; }

/* --- Boutons de filtre (portfolio) en mode sombre --- */
html[data-theme="dark"] .filter-btn {
    border-color: var(--color-gold);
    color: var(--color-gold-light);
}
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .filter-btn:hover {
    background-color: var(--color-gold);
    color: var(--color-navy);
}
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .project-image { background-color: var(--card-bg); }

/* --- Popup Instagram --- */
html[data-theme="dark"] .popup-content h3,
html[data-theme="dark"] .popup-content p { color: var(--text-color); }
.popup-content h3 { color: var(--color-navy); }

/* --- Formulaire de contact en mode sombre --- */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .phone-wrapper {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: rgba(255,255,255,0.15) !important;
}
html[data-theme="dark"] .flag-sim { background-color: var(--bg-alt-color) !important; border-color: rgba(255,255,255,0.1) !important; }
html[data-theme="dark"] .form-select option { background-color: var(--card-bg); color: var(--text-color); }
html[data-theme="dark"] .valider-btn { background-color: var(--color-gold); color: var(--color-navy); }
html[data-theme="dark"] .valider-btn:hover { background-color: var(--color-gold-light); }

/* --- Tarifs (grilles de prix des pages service) --- */
html[data-theme="dark"] .tarif-item,
html[data-theme="dark"] .tarifs-title { color: var(--text-color); }
html[data-theme="dark"] .tarif-disclaimer { color: #9C9A92; }

/* --- Textes gris codés en dur (illisibles en mode sombre) --- */
html[data-theme="dark"] .service-list,
html[data-theme="dark"] .service-text,
html[data-theme="dark"] .page-intro,
html[data-theme="dark"] .carousel-caption,
html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .portfolio-item-tag,
html[data-theme="dark"] .service-description {
    color: #C9C6BC;
}
html[data-theme="dark"] .market-card {
    background: var(--card-bg);
    color: var(--text-color);
}
html[data-theme="dark"] .market-card h3 { color: var(--color-gold-light); }
html[data-theme="dark"] .market-card p { color: #C9C6BC; }
html[data-theme="dark"] .service-highlight { color: #C9C6BC; }

/* Séparation nette entre la section contact et le footer */
footer.site-footer { border-top: 1px solid rgba(201, 162, 75, 0.25); }
html[data-theme="dark"] .project-title { color: var(--color-gold-light); }
html[data-theme="dark"] .project-card { background-color: var(--card-bg); }
html[data-theme="dark"] .process-link { color: var(--color-gold-light); }

html[data-theme="dark"] .service-card,
html[data-theme="dark"] .portfolio-item,
html[data-theme="dark"] .about-text,
html[data-theme="dark"] .popup-content,
html[data-theme="dark"] .service-text {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}
html[data-theme="dark"] .legal-content,
html[data-theme="dark"] .legal-content p,
html[data-theme="dark"] .legal-content li,
html[data-theme="dark"] .legal-content strong { color: var(--text-color); }
html[data-theme="dark"] .legal-content h2,
html[data-theme="dark"] .legal-content h3,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .section-title-impact,
html[data-theme="dark"] .contact-title,
html[data-theme="dark"] .portfolio-header h1,
html[data-theme="dark"] .service-title-page,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 { color: var(--color-gold-light); }
html[data-theme="dark"] .text-block strong { color: var(--color-gold-light); }
html[data-theme="dark"] strong { color: var(--color-gold-light); }
html[data-theme="dark"] .btn-portfolio { background-color: var(--color-gold); color: var(--color-navy) !important; }
html[data-theme="dark"] .btn-portfolio:hover { background-color: var(--color-gold-light); }

/* Séparateurs verticaux entre les colonnes de valeurs (Stratégie / Créativité / Précision) */
.values-grid { position: relative; }
.value-item + .value-item { border-left: 1px solid rgba(16, 27, 61, 0.12); }
html[data-theme="dark"] .value-item + .value-item { border-left-color: rgba(201, 162, 75, 0.2); }
@media (max-width: 768px) {
    .value-item + .value-item { border-left: none; border-top: 1px solid rgba(16, 27, 61, 0.12); padding-top: 30px; }
    html[data-theme="dark"] .value-item + .value-item { border-left: none; border-top-color: rgba(201, 162, 75, 0.2); }
}
html[data-theme="dark"] .page-header { background-color: var(--bg-alt-color); }
html[data-theme="dark"] .service-description,
html[data-theme="dark"] .portfolio-item-tag,
html[data-theme="dark"] .service-intro,
html[data-theme="dark"] p { color: var(--text-color); }
html[data-theme="dark"] .close-popup { color: #B9B6AC; }

html[data-theme="dark"] .contact-input,
html[data-theme="dark"] .contact-textarea {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: rgba(255,255,255,0.15);
}

body { transition: var(--transition-theme); }
header, .service-card, .portfolio-item, .about-text, .dropdown-content, footer,
.contact-input, .contact-textarea, .popup-content { transition: var(--transition-theme); }

/* ==========================================================================
   Bouton mode clair / sombre
   ========================================================================== */
.theme-toggle {
    position: relative;
    width: 54px;
    height: 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
    border: 1px solid var(--color-gold);
    cursor: pointer;
    margin-right: 16px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    flex-shrink: 0;
    transition: var(--transition-theme);
}
.theme-toggle .toggle-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-navy);
    display: flex; align-items: center; justify-content: center;
    transform: translateX(0);
    transition: transform .3s ease;
}
html[data-theme="dark"] .theme-toggle .toggle-thumb { transform: translateX(24px); }
.theme-toggle svg { width: 13px; height: 13px; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

@media (max-width: 768px) {
    .theme-toggle { order: 2; margin-right: 10px; margin-left: auto; }
    .burger-menu { order: 3; }
    .logo-container { order: 1; }
}

/* ==========================================================================
   Icônes de service — remplacement des formes géométriques
   ========================================================================== */
.service-icon-circle, .service-icon-large {
    background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light)) !important;
    color: var(--color-gold);
}
.service-icon-circle svg { width: 34px; height: 34px; }
.service-icon-large svg { width: 46px; height: 46px; }

/* ==========================================================================
   Footer professionnel
   ========================================================================== */
footer.site-footer {
    background-color: var(--footer-bg);
    color: #C9C6BC;
    padding: 70px 20px 0;
    text-align: left;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand-block { display: flex; flex-direction: column; gap: 14px; }
.footer-brand-block img {
    height: 34px;
    width: auto;
    object-fit: contain;
    align-self: flex-start;
    display: block;
    filter: brightness(0) invert(1);
}
@media (max-width: 560px) {
    .footer-brand-block img { align-self: center; }
}
.footer-brand-block .footer-brand-name {
    font-size: 1.4rem; font-weight: 700; letter-spacing: 1px;
    background: linear-gradient(to right, var(--color-gold-light), var(--color-gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.footer-tagline { font-size: 0.9rem; line-height: 1.6; color: #A7A499; max-width: 300px; }
.footer-col h4 {
    color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px;
    margin: 0 0 18px; padding-bottom: 10px; position: relative;
}
.footer-col h4::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px;
    background: var(--color-gold);
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: #C9C6BC; text-decoration: none; font-size: 0.9rem; transition: color 0.3s, padding-left 0.3s; }
.footer-col a:hover { color: var(--color-gold); padding-left: 4px; }

footer.site-footer .social-links { margin: 4px 0 0; justify-content: flex-start; }
footer.site-footer .social-links a {
    width: 40px; height: 40px; background-color: rgba(255,255,255,0.06); color: #fff;
}
footer.site-footer .social-links a:hover {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--color-navy);
}
footer.site-footer .social-links svg { width: 18px; height: 18px; }

.footer-bottom {
    max-width: 1200px; margin: 0 auto; padding: 22px 0;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 0.8rem; color: #8B8A82;
}
.footer-bottom a { color: #8B8A82; text-decoration: none; }
.footer-bottom a:hover { color: var(--color-gold); }
.footer-signature { color: #6E6D66; }

@media (max-width: 900px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-brand-block { align-items: center; }
    .footer-tagline { max-width: 100%; }
    footer.site-footer .social-links { justify-content: center; }
    .footer-col { align-items: center; }
    .footer-col h4::after { left: 50%; transform: translateX(-50%); }
    .footer-bottom { justify-content: center; text-align: center; }
}