/* ================================================================
   MAITRESTRAVAUX — THÈME PREMIUM "Votre projet mérite un Maître."
   Palette : Or riche · Ivoire chaud · Brun élégant
================================================================ */

/* ── Désactive l'animation du titre banner ────────────────────── */
.banner-section .text__word {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}
.banner-section .text__line-bg {
    display: none !important;
}
.banner-section .text__first {
    animation: none !important;
}

/* ── VARIABLES GLOBALES ────────────────────────────────────────── */
:root {
    /* Or — ambre vif, lumineux, premium (exit le kaki) */
    --or:           #E09200;
    --or-hover:     #C47B00;
    --or-pale:      #FFD060;
    --or-bg:        rgba(224, 146, 0, 0.08);
    --or-border:    rgba(224, 146, 0, 0.25);
    --or-glow:      0 10px 30px rgba(224, 146, 0, 0.30);

    /* Fonds chauds */
    --ivoire:       #FFFDF8;
    --creme:        #F8F2E4;
    --beige:        #EDE0C4;
    --beige-sombre: #D9C9A8;

    /* Sombre chaud (jamais noir pur) */
    --brun-nuit:    #1C1410;
    --brun-fonce:   #2E2118;
    --brun-moyen:   #6B5D4F;
    --brun-clair:   #9C8B7A;

    /* Overrides variables existantes */
    --mt-jaune:       #E09200;
    --mt-jaune-hover: #C47B00;
    --mt-noir:        #1C1410;
    --mt-noir-light:  #2E2118;
}

/* ── BODY & BASE ───────────────────────────────────────────────── */
body {
    background-color: var(--ivoire) !important;
    color: var(--brun-nuit) !important;
}

/* ── REMPLACER LE JAUNE AMBRE (#FBBF24) PAR L'OR RICHE ─────────── */
/* Backgrounds or */
[style*="#FBBF24"], [style*="FBBF24"] { background: var(--or) !important; }

/* ── SECTIONS CLAIRES (fond ivoire) ───────────────────────────── */
.how-it-works-hero {
    background: linear-gradient(180deg, var(--ivoire) 0%, var(--creme) 100%) !important;
}
.hiw-title { color: var(--brun-nuit) !important; }
.hiw-sub   { color: var(--brun-moyen) !important; }
.hiw-eyebrow { background: rgba(224,146,0,.12); color: var(--or-hover) !important; }
.hiw-eyebrow i { color: var(--or) !important; }
.hiw-num { background: var(--brun-nuit) !important; color: var(--or-pale) !important; }
.hiw-step {
    background: #fff !important;
    border-color: var(--beige) !important;
    box-shadow: 0 2px 16px rgba(28,20,16,.06) !important;
}
.hiw-step:hover {
    border-color: var(--or-border) !important;
    box-shadow: 0 15px 40px rgba(28,20,16,.10) !important;
}
.hiw-icon { background: #000 !important; box-shadow: 0 8px 20px rgba(0,0,0,.25) !important; }
.hiw-step h4 { color: var(--brun-nuit) !important; }
.hiw-step p  { color: var(--brun-moyen) !important; }
.hiw-arrow   { color: var(--beige) !important; }
.btn-hiw-primary {
    background: var(--or) !important;
    color: #fff !important;
    box-shadow: var(--or-glow) !important;
}
.btn-hiw-primary:hover { background: var(--or-hover) !important; color: #fff !important; }
.hiw-reassure { color: var(--brun-moyen) !important; }

/* ── SECTION COMPAGNONS NETWORK ───────────────────────────────── */
.compagnons-network {
    background: var(--brun-nuit) !important;
}
.cn-box {
    background: linear-gradient(135deg, var(--brun-fonce) 0%, #26190F 100%) !important;
    border-color: var(--or-border) !important;
}
.cn-box::before {
    background: radial-gradient(ellipse at 100% 0%, rgba(224,146,0,.14) 0%, transparent 60%) !important;
}
.cn-eyebrow { color: var(--or) !important; }
.cn-title { color: #fff !important; }
.cn-title .gold { color: var(--or) !important; }
.cn-intro { color: rgba(255,255,255,.72) !important; }
.cn-pillar:hover { background: rgba(224,146,0,.07) !important; border-color: var(--or-border) !important; }
.cn-pillar-icon { background: rgba(224,146,0,.12) !important; border-color: var(--or-border) !important; }
.cn-pillar-icon i { color: var(--or) !important; }
.cn-link { color: var(--or) !important; }

/* Marquee logos */
.cn-marquee-label { color: rgba(255,255,255,.35) !important; }
.cn-chip { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.09) !important; }
.cn-chip:hover { background: rgba(224,146,0,.08) !important; border-color: var(--or-border) !important; }

/* ── SECTIONS SERVICES (cartes) ───────────────────────────────── */
.card-btn-primary {
    background: linear-gradient(135deg, var(--or) 0%, var(--or-hover) 100%) !important;
    box-shadow: 0 8px 20px rgba(224,146,0,.30) !important;
    color: #fff !important;
}
.card-btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    border: 1.5px solid var(--or-border) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--or-hover) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .25s !important;
}
.card-btn-ghost:hover {
    background: var(--or-bg) !important;
    border-color: var(--or) !important;
    color: var(--or) !important;
}

/* Thumb badge & hover line */
.service-card .thumb::before { background: linear-gradient(135deg, var(--or), var(--or-hover)) !important; }
.thumb-badge { background: rgba(224,146,0,.15) !important; border-color: var(--or-border) !important; color: var(--or-hover) !important; }

/* ── TUNNEL MODALE INTAKE ─────────────────────────────────────── */
.pi-modal { background: #fff !important; }
.pi-header { background: linear-gradient(180deg, var(--creme) 0%, #fff 100%) !important; }
.pi-brand h3 { color: var(--brun-nuit) !important; }
.pi-eyebrow { color: var(--or-hover) !important; }
.pi-progress-fill { background: linear-gradient(90deg, var(--or), var(--or-hover)) !important; }
.pi-progress-steps li.active { color: var(--brun-nuit) !important; }
.pi-progress-steps li.done  { color: var(--or) !important; }
.pi-step-title { color: var(--brun-nuit) !important; }
.pi-step-sub   { color: var(--brun-moyen) !important; }

/* Cards type projet */
.pi-card { border-color: var(--beige) !important; }
.pi-card:hover { border-color: var(--or) !important; box-shadow: 0 10px 24px rgba(224,146,0,.12) !important; }
.pi-card:has(input:checked) { border-color: var(--or) !important; background: #FDF8EE !important; box-shadow: 0 10px 24px rgba(224,146,0,.20) !important; }
.pi-card input:checked ~ .pi-card-icon { background: var(--or) !important; color: #fff !important; }
.pi-card-icon { background: var(--creme) !important; }
.pi-num { background: var(--brun-nuit) !important; color: var(--or-pale) !important; }

/* Pills */
.pi-pills input:checked + span { background: var(--brun-nuit) !important; color: var(--or-pale) !important; border-color: var(--brun-nuit) !important; }
.pi-pills label:hover span { background: #FDF8EE !important; }

/* Inputs */
.pi-input:focus { border-color: var(--or) !important; box-shadow: 0 0 0 3px rgba(224,146,0,.15) !important; }

/* Boutons */
.pi-btn-primary {
    background: var(--or) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(224,146,0,.35) !important;
}
.pi-btn-primary:hover { background: var(--or-hover) !important; }
.pi-final-icon { background: #22C55E !important; }
.pi-teaser { background: linear-gradient(135deg, var(--brun-nuit), var(--brun-fonce)) !important; border-color: var(--or-border) !important; }
.pi-teaser-label { color: var(--or) !important; }

/* ── ESPACE CLIENT (user/projects) ───────────────────────────────*/
.mp-section { background: var(--brun-nuit) !important; }
.mp-title { color: #fff !important; }
.mp-sub   { color: rgba(255,255,255,.65) !important; }
.mp-eyebrow { background: rgba(224,146,0,.12) !important; color: var(--or) !important; }
.mp-card { background: linear-gradient(160deg, var(--brun-fonce) 0%, #261A10 100%) !important; border-color: rgba(255,255,255,.08) !important; }
.mp-card:hover { border-color: var(--or-border) !important; }
.mp-card-icon { background: linear-gradient(135deg, var(--or) 0%, var(--or-hover) 100%) !important; box-shadow: 0 8px 20px rgba(224,146,0,.25) !important; }
.mp-next-label { color: var(--or) !important; }
.mp-lock { background: rgba(224,146,0,.08) !important; border-color: var(--or-border) !important; }
.mp-lock i { color: var(--or) !important; }
.mp-btn-gold { background: var(--or) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(224,146,0,.30) !important; }
.mp-btn-gold:hover { background: var(--or-hover) !important; color: #fff !important; }
.mp-btn-dark:hover { background: var(--or) !important; border-color: var(--or) !important; }
.mp-empty { background: var(--brun-fonce) !important; border-color: rgba(255,255,255,.1) !important; }
.mp-empty-icon { background: rgba(224,146,0,.10) !important; }
.mp-empty-icon i { color: var(--or) !important; }
.mp-badge-orange { background: rgba(224,146,0,.18) !important; color: var(--or) !important; }

/* ── ESPACE CLIENT (user/projects/show) ──────────────────────── */
.pd-section { background: var(--brun-nuit) !important; }
.pd-hero { background: linear-gradient(135deg, var(--brun-fonce) 0%, #261A10 100%) !important; border-color: var(--or-border) !important; }
.pd-hero-icon { background: linear-gradient(135deg, var(--or) 0%, var(--or-hover) 100%) !important; box-shadow: 0 12px 30px rgba(224,146,0,.30) !important; }
.pd-eyebrow { color: var(--or) !important; }
.pd-meta i   { color: var(--or) !important; }
.pd-next { background: rgba(224,146,0,.08) !important; border-color: var(--or-border) !important; }
.pd-next span { color: var(--or) !important; }
.pd-banner-wait { background: rgba(224,146,0,.08) !important; border-color: var(--or-border) !important; }
.pd-banner-wait > i { color: var(--or) !important; }
.pd-panel { background: var(--brun-fonce) !important; border-color: rgba(255,255,255,.08) !important; }
.pd-panel-title i { color: var(--or) !important; }
.pd-timeline-item.active .pd-timeline-dot { background: var(--or) !important; border-color: var(--or) !important; box-shadow: 0 0 0 5px rgba(224,146,0,.15) !important; }
.pd-advisor-avatar { background: linear-gradient(135deg, var(--or) 0%, var(--or-hover) 100%) !important; }
.pd-advisor-waiting i { color: var(--or) !important; }
.pd-help-btn { background: var(--or) !important; color: #fff !important; }
.pd-help-btn:hover { background: var(--or-hover) !important; color: #fff !important; }
.pd-recap dt { color: var(--or) !important; }
.pd-qualif-list li span { color: var(--or) !important; }
.pd-back:hover { color: var(--or) !important; }

/* ── HEADER / NAV ────────────────────────────────────────────── */
/* ws-round-btn géré exclusivement par le bloc TRICOLORE en bas */

/* Lien "Le Portail Officiel" — badge tricolore drapeau français */
.nav-menu-moe .nav-item-portail-fr .nav-link {
    background: rgba(255,255,255,.07) !important;
    background-image: linear-gradient(
        90deg,
        rgba(0,35,149,.18)   0%,
        rgba(255,255,255,.08) 50%,
        rgba(237,41,57,.18)  100%
    ) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
    transition: background-image .3s ease, border-color .3s ease, opacity .2s ease !important;
}
.nav-menu-moe .nav-item-portail-fr .nav-link:hover {
    background-image: linear-gradient(
        90deg,
        rgba(0,35,149,.35)   0%,
        rgba(255,255,255,.15) 50%,
        rgba(237,41,57,.35)  100%
    ) !important;
    border-color: rgba(255,255,255,.25) !important;
    opacity: 1 !important;
}

/* Override état actif (page accueil) — toujours tricolore, jamais or */
.nav-menu-moe .nav-item-portail-fr.nav-item-active .nav-link,
.nav-menu-moe .nav-item-portail-fr.nav-item-active .nav-link:focus {
    background: rgba(255,255,255,.07) !important;
    background-image: linear-gradient(
        90deg,
        rgba(0,35,149,.18)   0%,
        rgba(255,255,255,.08) 50%,
        rgba(237,41,57,.18)  100%
    ) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.9) !important;
}
@keyframes wsShimmer {
    0%   { background-position: 150% center; }
    100% { background-position: -110% center; }
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.btn-cta-footer { background: var(--or) !important; border-color: var(--or) !important; }
.btn-cta-footer:hover { background: var(--or-hover) !important; }

/* ── BADGES & STATUTS ────────────────────────────────────────── */
.mp-badge-yellow, .mp-badge-orange {
    background: rgba(224,146,0,.15) !important;
    color: var(--or) !important;
}

/* ── SCROLL TO TOP ───────────────────────────────────────────── */
.scroll-top {
    background: var(--or) !important;
    color: #fff !important;
}

/* ── BOUTONS GÉNÉRAUX ────────────────────────────────────────── */
.btn-primary, .btn-accent, .theme-btn,
[class*="btn-primary"] {
    background: var(--or) !important;
    border-color: var(--or) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-accent:hover {
    background: var(--or-hover) !important;
    border-color: var(--or-hover) !important;
}

/* ── LIENS ACTIFS / ICÔNES ───────────────────────────────────── */
a.cn-link:hover i { color: var(--or) !important; }

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
    background: var(--beige-sombre) !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--or) !important;
}

/* ================================================================
   ANIMATIONS GOLD PREMIUM
================================================================ */

/* Shimmer sweep — balayage lumineux sur fond or */
@keyframes goldShimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* Pulse glow — halo pulsant */
@keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(224,146,0,0),
                            0 8px 24px rgba(224,146,0,.28); }
    50%       { box-shadow: 0 0 0 8px rgba(224,146,0,.12),
                            0 16px 40px rgba(224,146,0,.45); }
}

/* Shine — trait lumineux qui traverse */
@keyframes goldSweep {
    0%   { left: -80%; }
    100% { left: 130%;  }
}

/* Border rotate — gradient border qui tourne */
@keyframes borderSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Float doux */
@keyframes floatGold {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Gradient text animation */
@keyframes gradientText {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── TITRES ANIMÉS ────────────────────────────────────────────── */
/* Gradient text sur les sections hero */
.hiw-title .gold,
.cn-title .gold {
    background: linear-gradient(90deg,
        #E09200 0%, #FFD060 30%, #E8B84B 50%, #FFD060 70%, #E09200 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 4s linear infinite !important;
}

/* ── BOUTONS CTA PRIMAIRES — SHIMMER ──────────────────────────── */
/* ws-round-btn retiré ici — géré par le bloc TRICOLORE en bas du fichier */
.btn-hiw-primary,
.pi-btn-primary,
.card-btn-primary,
.mp-btn-gold,
.pd-help-btn,
.btn-cta-footer {
    background: linear-gradient(110deg,
        #C47B00 0%,
        #E09200 30%,
        #FFD060 50%,
        #E09200 70%,
        #C47B00 100%) !important;
    background-size: 200% auto !important;
    color: #fff !important;
    animation: goldShimmer 3.5s linear infinite !important;
    box-shadow: 0 8px 24px rgba(224,146,0,.35),
                0 2px  8px rgba(224,146,0,.20) !important;
    transition: box-shadow .3s, transform .2s !important;
}
.btn-hiw-primary:hover,
.pi-btn-primary:hover,
.card-btn-primary:hover,
.mp-btn-gold:hover,
.pd-help-btn:hover,
.btn-cta-footer:hover {
    animation-play-state: paused !important;
    background: linear-gradient(110deg, #C47B00, #E09200) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(224,146,0,.50),
                0 4px  12px rgba(224,146,0,.30) !important;
}

/* ── ICÔNES DORÉES — GLOW PULSANT ────────────────────────────── */
.hiw-icon,
.mp-card-icon,
.pd-hero-icon {
    animation: goldPulse 3s ease-in-out infinite !important;
}

/* ── BADGE EYEBROW — SHIMMER SUBTLE ──────────────────────────── */
.hiw-eyebrow,
.mp-eyebrow,
.pd-eyebrow {
    position: relative;
    overflow: hidden;
}
.hiw-eyebrow::after,
.mp-eyebrow::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -80%;
    width: 50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: goldSweep 3s ease-in-out infinite;
}

/* ── SCROLL-TOP — FLOAT ──────────────────────────────────────── */
.scroll-top {
    animation: floatGold 3s ease-in-out infinite !important;
}

/* ================================================================
   SERVICE CARDS — DESIGN PREMIUM SOMBRE
   Inspiré InfoCard : conic-gradient border + clip-path title reveal
================================================================ */

/* Wrapper externe — conic-gradient border toujours visible, suit la souris */
.service-card-wrap {
    --sc-rotation: 145deg;
    position: relative;
    border-radius: 20px;
    padding: 2px;
    background: conic-gradient(
        from var(--sc-rotation),
        #E09200 0deg,
        #F0D060 55deg,
        #E09200 110deg,
        #251A10 110deg,
        #251A10 360deg
    );
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
    transition: box-shadow .4s ease;
    cursor: pointer;
}
.service-card-wrap:hover {
    box-shadow: 0 20px 60px rgba(224,146,0,.30),
                0 0 0 1px rgba(224,146,0,.2);
}

/* ── Carte intérieure ────────────────────────────────────────── */
.service-card {
    position: relative !important;
    background: linear-gradient(160deg, #251A10 0%, #1C1410 60%, #201510 100%) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    overflow: hidden !important;
    z-index: 1;
    transition: transform .35s cubic-bezier(.16,1,.3,1),
                border-color .35s,
                box-shadow .35s !important;
    /* Remove old white background */
}
.service-card::before {
    /* Remplace l'ancienne barre dorée top */
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: radial-gradient(ellipse at 50% -30%,
        rgba(224,146,0,.18) 0%,
        transparent 65%) !important;
    z-index: 0 !important;
    transform: none !important; /* annuler l'ancien scaleX */
}

/* Subtle dot pattern */
.service-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important; pointer-events: none !important;
    background-image:
        radial-gradient(rgba(224,146,0,.07) 1px, transparent 1px) !important;
    background-size: 22px 22px !important;
    z-index: 0 !important;
}

.service-card:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(224,146,0,.35) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,.5),
                0 0 0 1px rgba(224,146,0,.2),
                0 0 40px rgba(224,146,0,.12) !important;
}

/* ── IMAGE ───────────────────────────────────────────────────── */
.service-card .thumb {
    position: relative !important;
    display: block !important;
    height: 200px !important;
    overflow: hidden !important;
    z-index: 1 !important;
}
.service-card .thumb img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    transition: transform .6s cubic-bezier(.16,1,.3,1) !important;
    filter: brightness(.85) saturate(.9) !important;
}
.service-card:hover .thumb img {
    transform: scale(1.08) !important;
    filter: brightness(.95) saturate(1.05) !important;
}
/* Gradient bas image — fondu vers fond sombre */
.service-card .thumb::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(28,20,16,.6) 70%,
        rgba(28,20,16,.95) 100%
    ) !important;
    z-index: 1 !important;
    opacity: 1 !important;
}
/* Badge */
.service-card .thumb-badge {
    position: absolute !important;
    top: 12px !important; left: 12px !important;
    z-index: 2 !important;
    background: rgba(28,20,16,.75) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(224,146,0,.35) !important;
    color: #FFD060 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    display: flex !important; align-items: center !important; gap: 5px !important;
}
.service-card .thumb-badge i { color: #E09200 !important; }

/* ── CONTENU ─────────────────────────────────────────────────── */
.service-card .content {
    position: relative !important;
    z-index: 2 !important;
    padding: 18px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: transparent !important;
}

/* Catégorie */
.service-card .card-category {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #E09200 !important;
    background: rgba(224,146,0,.12) !important;
    border: 1px solid rgba(224,146,0,.28) !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    width: fit-content !important;
}

/* ── TITRE — CLIP-PATH GOLD REVEAL ──────────────────────────── */
.service-card .card-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    position: relative !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
}

/* Fond or qui monte via clip-path — sur le block title (pleine largeur) */
.service-card .card-title::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(110deg,
        #C47B00 0%, #E09200 35%, #FFD060 52%, #E09200 68%, #C47B00 100%) !important;
    background-size: 200% auto !important;
    border-radius: 6px !important;
    z-index: 0 !important;
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%) !important;
    transition: clip-path .42s cubic-bezier(.1,.5,.5,1) !important;
    pointer-events: none !important;
}
.service-card:hover .card-title::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    animation: goldShimmer 2s linear infinite !important;
}

/* Le lien reste au-dessus du fond */
.service-card .card-title a {
    color: #FFFDF8 !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    background-image: none !important;
    transition: color .35s !important;
}
.service-card:hover .card-title a {
    color: #1C1410 !important;
}

/* ── BÉNÉFICES ───────────────────────────────────────────────── */
.service-card .card-benefits {
    list-style: none !important;
    padding: 0 !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 7px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    padding-top: 12px !important;
}
.service-card .card-benefits li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    color: rgba(255,253,248,.65) !important;
    font-weight: 500 !important;
}
.service-card .card-benefits li i {
    flex-shrink: 0 !important;
    width: 18px !important; height: 18px !important;
    border-radius: 50% !important;
    background: rgba(224,146,0,.15) !important;
    color: #E09200 !important;
    font-size: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background .3s, transform .3s !important;
}
.service-card:hover .card-benefits li i {
    background: rgba(224,146,0,.28) !important;
    transform: scale(1.1) !important;
}

/* ── ACTIONS ─────────────────────────────────────────────────── */
.service-card .card-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 4px !important;
}
.service-card .card-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 8px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    transition: all .25s !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.service-card .card-btn i {
    font-size: 12px !important;
    flex-shrink: 0 !important;
}
.service-card .card-btn-ghost {
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,253,248,.75) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    box-shadow: none !important;
}
.service-card .card-btn-ghost:hover {
    background: rgba(224,146,0,.12) !important;
    color: #FFD060 !important;
    border-color: rgba(224,146,0,.4) !important;
}
.service-card .card-btn-primary {
    background: linear-gradient(110deg,
        #C47B00 0%, #E09200 40%, #FFD060 55%, #E09200 70%, #C47B00 100%) !important;
    background-size: 200% auto !important;
    color: #1C1410 !important;
    font-weight: 800 !important;
    animation: goldShimmer 3.5s linear infinite !important;
    box-shadow: 0 6px 18px rgba(224,146,0,.35) !important;
}
.service-card .card-btn-primary:hover {
    animation-play-state: paused !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(224,146,0,.55) !important;
    color: #1C1410 !important;
}
.service-card .card-btn i {
    font-size: 13px !important;
    transition: transform .25s !important;
}
.service-card .card-btn-primary:hover i { transform: translateX(3px) !important; }

/* ── SECTION SERVICES — fond sombre cohérent avec work_feature ──────── */
section:has(.service-card-wrap) {
    background: linear-gradient(180deg, #0f0f0f 0%, #100c08 100%) !important;
    position: relative;
}

/* ================================================================
   SECTION SERVICES — titre clair sur fond sombre
================================================================ */
section:has(.service-card-wrap) .section-title,
section:has(.service-card-wrap) .section-subtitle,
section:has(.service-card-wrap) h2,
section:has(.service-card-wrap) h3 {
    color: #FFFDF8 !important;
}
section:has(.service-card-wrap) .sub-title {
    color: rgba(240,216,152,.75) !important;
}

/* Section title gradient */
.section-title-gold {
    background: linear-gradient(90deg,
        #E09200 0%, #FFD060 35%, #E8B84B 50%, #FFD060 65%, #E09200 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 5s linear infinite;
}

/* ── LIGNE SÉPARATRICE DORÉE ANIMÉE ──────────────────────────── */
.gold-divider {
    height: 2px;
    width: 60px;
    background: linear-gradient(90deg, transparent, #E09200, #FFD060, #E09200, transparent);
    background-size: 200% auto;
    animation: goldShimmer 2.5s linear infinite;
    border-radius: 2px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════
   BOUTON ws-round-btn — TRICOLORE ANIMÉ
   Bleu Marine → Blanc → Rouge · Drapeau français
   Glow cyclique · double anneau · sweep blanc
══════════════════════════════════════════════════════ */

/* Défilement tricolore continu */
@keyframes wsTrioFlow {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* Glow + anneau cyclique : bleu → blanc → rouge (tons atténués) */
@keyframes wsTrioRing {
    0%, 100% {
        box-shadow:
            0 0 0 0px  rgba(41,82,152,.60),
            0 0 0 0px  rgba(41,82,152,.20),
            0 0 14px   rgba(41,82,152,.30),
            0 6px 22px rgba(0,8,30,.50),
            inset 0 1px 0 rgba(180,205,240,.20);
    }
    16% {
        box-shadow:
            0 0 0 9px  rgba(41,82,152,0),
            0 0 0 20px rgba(41,82,152,0),
            0 0 14px   rgba(41,82,152,.30),
            0 6px 22px rgba(0,8,30,.50),
            inset 0 1px 0 rgba(180,205,240,.20);
    }
    33% {
        box-shadow:
            0 0 0 0px  rgba(200,210,225,.55),
            0 0 0 0px  rgba(200,210,225,.22),
            0 0 12px   rgba(180,190,210,.25),
            0 6px 22px rgba(0,8,30,.45),
            inset 0 1px 0 rgba(240,245,255,.35);
    }
    49% {
        box-shadow:
            0 0 0 9px  rgba(200,210,225,0),
            0 0 0 20px rgba(200,210,225,0),
            0 0 12px   rgba(180,190,210,.25),
            0 6px 22px rgba(0,8,30,.45),
            inset 0 1px 0 rgba(240,245,255,.35);
    }
    66% {
        box-shadow:
            0 0 0 0px  rgba(160,50,50,.60),
            0 0 0 0px  rgba(160,50,50,.22),
            0 0 14px   rgba(160,50,50,.30),
            0 6px 22px rgba(50,0,0,.45),
            inset 0 1px 0 rgba(240,200,200,.18);
    }
    82% {
        box-shadow:
            0 0 0 9px  rgba(160,50,50,0),
            0 0 0 20px rgba(160,50,50,0),
            0 0 14px   rgba(160,50,50,.30),
            0 6px 22px rgba(50,0,0,.45),
            inset 0 1px 0 rgba(240,200,200,.18);
    }
}

/* Anneau 2 décalé (via ::before) */
@keyframes wsTrioRing2 {
    0%, 100% { box-shadow: 0 0 0 0px  rgba(41,82,152,.28),  0 6px 22px rgba(0,8,30,.45), inset 0 1px 0 rgba(200,215,240,.12); }
    50%      { box-shadow: 0 0 0 26px rgba(160,50,50,0),    0 6px 22px rgba(0,8,30,.45), inset 0 1px 0 rgba(200,215,240,.12); }
}

/* Sweep blanc lumineux */
@keyframes wsTrioSweep {
    0%        { left: -120%; }
    28%, 100% { left: 140%;  }
}

/* Icône */
@keyframes wsTrioIcon {
    0%, 55%, 100% { transform: translateX(0) scale(1);    opacity: 1; }
    30%           { transform: translateX(10px) scale(.8); opacity: 0; }
    32%           { transform: translateX(-6px) scale(.8); opacity: 0; }
    46%           { transform: translateX(0) scale(1.15);  opacity: 1; }
}

/* Hover : glow doux bleu → rouge */
@keyframes wsTrioHoverGlow {
    0%, 100% {
        box-shadow:
            0 0 0 2px  rgba(41,82,152,.85),
            0 0 20px   rgba(41,82,152,.45),
            0 0 55px   rgba(41,82,152,.18),
            0 10px 35px rgba(0,8,30,.70),
            inset 0 1px 0 rgba(180,205,240,.30);
    }
    50% {
        box-shadow:
            0 0 0 2px  rgba(160,50,50,.85),
            0 0 25px   rgba(160,50,50,.50),
            0 0 65px   rgba(160,50,50,.20),
            0 12px 40px rgba(50,0,0,.70),
            inset 0 1px 0 rgba(240,200,200,.25);
    }
}

/* ── BASE STATE ── */
.ws-round-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 32px !important;
    border-radius: 50px !important;
    border: 1.5px solid rgba(80,110,180,.30) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    z-index: 1 !important;
    text-decoration: none !important;

    /* Bleu ardoise → blanc cassé → rouge bordeaux → blanc → bleu (tons atténués) */
    background: linear-gradient(
        90deg,
        #1a2e5a  0%,
        #1e3a72  7%,
        #2952A3 14%,
        #7a96c8 22%,
        #c8d5e8 28%,
        #eef0f5 33%,
        #c8d5e8 38%,
        #d8b8b8 44%,
        #9b3232 51%,
        #7a2020 58%,
        #d8b8b8 64%,
        #c8d5e8 70%,
        #eef0f5 76%,
        #7a96c8 82%,
        #2952A3 89%,
        #1a2e5a 100%
    ) !important;
    background-size: 300% auto !important;
    animation:
        wsTrioFlow 6s linear infinite,
        wsTrioRing 5.5s ease-in-out infinite !important;

    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    letter-spacing: 0.45px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow:
        0 1px 3px rgba(0,0,0,.75),
        0 0 12px rgba(0,0,0,.5) !important;

    transition:
        transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
        filter 0.3s ease,
        border-color .3s ease !important;
}

/* ── Anneau 2 décalé (::before) ── */
.ws-round-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: wsTrioRing2 4.8s ease-out 2.4s infinite !important;
}

/* ── Sweep blanc ── */
.ws-round-btn::after {
    content: '' !important;
    position: absolute !important;
    top: -10% !important;
    left: -120% !important;
    width: 50% !important;
    height: 120% !important;
    background: linear-gradient(
        105deg,
        transparent 10%,
        rgba(255,255,255,.75) 50%,
        transparent 90%
    ) !important;
    transform: skewX(-18deg) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    animation: wsTrioSweep 4s ease-in-out infinite !important;
    border-radius: 0 !important;
}

/* ── Icône animée ── */
.ws-round-btn i,
.ws-round-btn .fas,
.ws-round-btn .fa-angle-double-right {
    color: #ffffff !important;
    display: inline-block !important;
    font-size: 13px !important;
    animation: wsTrioIcon 2.6s ease-in-out infinite !important;
    position: relative !important;
    z-index: 4 !important;
}

/* ── HOVER STATE ── */
.ws-round-btn:hover {
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.08) !important;
    filter: brightness(1.08) saturate(1.1) !important;
    border-color: rgba(140,170,220,.6) !important;
    animation:
        wsTrioFlow 1.5s linear infinite,
        wsTrioHoverGlow 1s ease-in-out infinite !important;
}

/* Sweep ultra-rapide au hover */
.ws-round-btn:hover::after {
    animation: wsTrioSweep 0.9s ease-in-out infinite !important;
    background: linear-gradient(
        105deg,
        transparent 10%,
        rgba(255,255,255,.90) 50%,
        transparent 90%
    ) !important;
}

/* ── ACTIVE / CLIC ── */
.ws-round-btn:active {
    transform: translateY(-1px) scale(0.96) !important;
    filter: brightness(1.25) !important;
    transition: transform 0.07s ease, filter 0.07s ease !important;
}