/*
Theme Name: Washingtonia
Theme URI: https://washingtonia.ma/
Author: Omar AMDJEHDI
Author URI: https://hfarming.ma/
Description: Theme sur mesure de la Maison Washingtonia, fait a partir de la landing page officielle. Accueil une page, blog dynamique, formulaire de contact serveur, mode sombre et bouton WhatsApp.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: washingtonia
*/
        :root {
            --bg: #F6F1E6;
            --bg-alt: #EFE8D6;
            --surface: #FFFFFF;
            --ink: #16261F;
            --muted: #5D6357;
            --line: #E0D8C4;
            --olive: #10312A;
            --olive-700: #1C463B;
            --olive-600: #27584A;
            --gold: #C8A24B;
            --gold-700: #A9842F;
            --gold-soft: #E4CE94;
            --shadow: 0 1px 2px rgba(22, 38, 31, .04), 0 12px 32px -16px rgba(22, 38, 31, .18);
        }

        html.dark {
            --bg: #0B1814;
            --bg-alt: #0E201A;
            --surface: #13271F;
            --ink: #ECE7D6;
            --muted: #9BA396;
            --line: #213A30;
            --olive: #10312A;
            --olive-700: #2C5A4B;
            --olive-600: #377866;
            --gold: #D8B65F;
            --gold-700: #C8A24B;
            --gold-soft: #ECDAA4;
            --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 22px 46px -20px rgba(0, 0, 0, .6);
        }

        html { scroll-behavior: smooth; }
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--bg);
            color: var(--ink);
            transition: background-color .4s ease, color .4s ease;
        }
        .font-display { font-family: 'Cormorant Garamond', serif; }
        section[id] { scroll-margin-top: 88px; }
        ::selection { background: var(--gold); color: #14241E; }
        *:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

        /* ===================== SIGNATURES ===================== */
        /* Eyebrow : libellé doré, lettrage espacé, avec filet */
        .eyebrow {
            display: inline-flex; align-items: center; gap: .7rem;
            font-size: .72rem; font-weight: 600; letter-spacing: .3em;
            text-transform: uppercase; color: var(--gold);
        }
        .eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold); opacity: .8; }
        .eyebrow.is-center::after { content: ""; width: 30px; height: 1px; background: var(--gold); opacity: .8; }

        .rule { width: 64px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
        .rule.is-center { background: var(--gold); margin-inline: auto; }

        /* Filet d'or fin entre sections */
        .hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

        /* Boutons */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
            font-weight: 600; font-size: .9rem; letter-spacing: .015em;
            padding: .9rem 1.7rem; border-radius: .55rem; cursor: pointer;
            transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease, color .25s ease;
            border: 1px solid transparent;
        }
        .btn-gold { background: var(--gold); color: #14241E; }
        .btn-gold:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(200, 162, 75, .65); }
        .btn-olive { background: var(--olive); color: #F4EFE2; }
        .btn-olive:hover { background: var(--olive-700); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(16, 49, 42, .7); }
        .btn-ghost { background: transparent; color: currentColor; border-color: currentColor; }
        .btn-ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); transform: translateY(-2px); }

        /* Cartes */
        .card {
            background: var(--surface); border: 1px solid var(--line); border-radius: 1rem;
            box-shadow: var(--shadow);
            transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
        }
        .card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); box-shadow: 0 28px 52px -22px rgba(22, 38, 31, .28); }

        .card-olive { background: var(--olive); color: #EFEADB; border: 1px solid var(--olive-700); border-radius: 1rem; }

        /* Lignes de service */
        .srow { border-top: 1px solid var(--line); padding: 1.15rem 0; transition: padding-left .3s ease; }
        .srow:first-child { border-top: none; }
        .srow:hover { padding-left: .5rem; }
        .srow-mark { color: var(--gold); font-weight: 700; }

        /* Lien de navigation avec soulignage doré */
        .navlink { position: relative; transition: color .25s ease; }
        .navlink::after {
            content: ""; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 0;
            background: var(--gold); transition: width .3s ease;
        }
        .navlink:hover::after { width: 100%; }
        .nav-solid {
            background: color-mix(in srgb, var(--bg) 86%, transparent);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--line);
            box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .5);
        }

        /* Champs de formulaire */
        .field {
            width: 100%; padding: .85rem 1.05rem; background: var(--bg);
            border: 1px solid var(--line); border-radius: .6rem; color: var(--ink);
            transition: border-color .2s ease, box-shadow .2s ease;
        }
        .field::placeholder { color: var(--muted); opacity: .8; }
        .field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 162, 75, .22); }

        /* Étiquette dorée */
        .tag-gold {
            background: var(--gold); color: #14241E; font-size: .66rem; letter-spacing: .1em;
            text-transform: uppercase; font-weight: 700; padding: .32rem .7rem; border-radius: .4rem;
        }

        /* Hero : voiles de lisibilité + indice de défilement */
        .hero-scrim-top { background: linear-gradient(to bottom, rgba(7, 18, 14, .55), transparent 36%); }
        .hero-scrim-bottom { background: linear-gradient(to top, rgba(7, 18, 14, .60), transparent 42%); }
        .scrolldot {
            width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .65);
            border-radius: 999px; color: #fff; display: flex; align-items: center; justify-content: center;
            backdrop-filter: blur(2px); transition: all .3s ease;
        }
        .scrolldot:hover { border-color: var(--gold); color: var(--gold); transform: translateY(4px); }

        /* ===== BANNIÈRE DÉFILANTE (droite → gauche) ===== */
        .hero-banner-track {
            display: flex; width: max-content; height: 100%;
            animation: heroScroll 60s linear infinite; will-change: transform;
        }
        .hero-banner-img { height: 100%; width: auto; flex-shrink: 0; display: block; user-select: none; -webkit-user-drag: none; }
        /* 4 copies → défilement d'exactement une image (-25 %) : couverture garantie, boucle continue */
        @keyframes heroScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } }

        /* Atmosphère lumineuse (Coin IA) */
        .glow { filter: blur(110px); opacity: .35; }

        .loader { transition: opacity .6s ease-out, visibility .6s; }
        @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        .loader-line { transform-origin: center; animation: lineGrow 1.4s ease-in-out infinite alternate; }

        /* ===== NAVBAR MOBILE ===== */
        @media (max-width: 639px) {
            .navbar-container { padding-left: 14px !important; padding-right: 14px !important; overflow: hidden; }
            .navbar-logo { gap: 8px !important; font-size: 1rem !important; min-width: 0 !important; overflow: hidden; }
            .navbar-logo img { width: 30px !important; height: 30px !important; flex-shrink: 0; }
            .navbar-logo .logo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .navbar-tools { gap: 4px !important; flex-shrink: 0 !important; }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-banner-track, .loader-line { animation: none; }
            html { scroll-behavior: auto; }
        }

/* ===== Pages internes (blog, articles) ===== */
.wa-inner { padding-top: 120px; padding-bottom: 96px; }
.wa-prose { font-size: 1.05rem; line-height: 1.8; }
.wa-prose h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; margin: 2rem 0 1rem; }
.wa-prose h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; margin: 1.6rem 0 .8rem; }
.wa-prose p { margin-bottom: 1.1rem; }
.wa-prose ul, .wa-prose ol { margin: 0 0 1.1rem 1.4rem; list-style: disc; }
.wa-prose a { color: var(--gold-700); text-decoration: underline; }
.wa-prose img { border-radius: .8rem; margin: 1.2rem 0; }
.wa-notice { padding: .8rem 1rem; border-radius: .6rem; font-size: .9rem; text-align: center; }
.wa-notice.ok { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-700); }
.wa-notice.err { background: #fde8e8; color: #9b1c1c; }
.wa-hp { position: absolute; left: -9999px; }
.nav-links .page-numbers { padding: .5rem .9rem; border: 1px solid var(--line); border-radius: .5rem; margin: 0 .2rem; }
.nav-links .current { background: var(--gold); color: #14241E; }
/* Barre admin WordPress (connecté) */
body.admin-bar nav.nav-solid { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar nav.nav-solid { top: 46px; } }