/* =====================================================================
   MOBILE PREMIUM — UI/UX renforcée pour portfolio 3K€+
   Cible : 390×844 (iPhone 12+). Appliqué via @media (max-width: 768px).
   Principe : breathing room, hiérarchie typo forte, touch targets ≥ 48px,
   cartes avec présence (border + shadow), transitions consistantes.
   ===================================================================== */

@media (max-width: 768px) {

    /* ============== HERO — breathing premium ============== */
    #home {
        padding-top: calc(var(--nav-h, 64px) + 1.5rem) !important;
        padding-bottom: 4rem !important;
    }
    .hero-content {
        gap: 1.25rem;
    }
    .hero-badge {
        padding: 0.55rem 0.95rem !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.01em;
        line-height: 1.4;
        align-self: flex-start;
        margin-bottom: 0.5rem;
    }
    .hero-badge-text {
        font-weight: 500;
    }
    .hero-dual {
        gap: 0.7rem;
        flex-wrap: wrap;
        margin: 0.5rem 0 1rem;
    }
    .hero-dual-tag {
        padding: 0.5rem 0.9rem !important;
        font-size: 0.82rem !important;
        font-weight: 600;
    }
    .hero-title {
        font-size: clamp(2.4rem, 12vw, 3.4rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.04em !important;
        font-weight: 800;
        margin: 1.25rem 0 1.5rem !important;
        word-spacing: 0.05em;
    }
    /* Évite que les chars splités ("d","u") cassent au milieu d'un mot */
    .hero-title > span[data-split="chars"],
    .hero-title .typewriter-wrap {
        display: inline-block;
        white-space: nowrap;
    }
    .hero-sub {
        font-size: 1.02rem !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.78) !important;
        margin: 0 0 1.75rem !important;
        max-width: 88%;
    }

    /* CTAs hero — hiérarchie cohérente ============== */
    .hero-actions {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem !important;
        align-items: stretch;
        margin-top: 1.5rem;
    }
    .hero-actions .btn-primary {
        width: 100%;
        min-height: 56px !important;
        font-size: 1rem !important;
        font-weight: 700;
        letter-spacing: -0.005em;
        padding: 1rem 1.5rem !important;
        border-radius: 14px !important;
        /* Halo retiré : le module 100 l'éteignait déjà ici par !important,
           cette déclaration ne peignait donc plus rien — elle ne laissait
           que deux bleus codés en dur dans l'inventaire. */
    }
    .hero-actions .btn-secondary {
        width: 100%;
        min-height: 52px !important;
        font-size: 0.95rem !important;
        font-weight: 500;
        padding: 0.85rem 1.25rem !important;
        text-align: center;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px !important;
        color: var(--ink, #efe9d8);
    }
    .hero-actions .voice-intro-btn {
        width: 100%;
        min-height: 52px !important;
        border-radius: 12px !important;
        padding: 0.85rem 1.25rem !important;
        font-size: 0.95rem !important;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* ============== SHOWCASE CARDS — présence premium ============== */
    .hero-showcase {
        gap: 1rem !important;
        margin-top: 2rem !important;
    }
    .showcase-card {
        padding: 1.25rem 1.35rem !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
    }
    .showcase-status-name {
        font-size: 1.15rem !important;
        font-weight: 700;
    }
    .showcase-status-detail {
        font-size: 0.88rem !important;
        color: rgba(255, 255, 255, 0.68) !important;
    }
    .showcase-status-cta {
        min-height: 48px;
        padding: 0.75rem 1.1rem !important;
        border-radius: 12px !important;
        font-weight: 600;
    }
    .showcase-quickcta {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 0.7rem 0.95rem !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
    }
    .atelier-card-title {
        font-size: 1.6rem !important;
        line-height: 1.05;
    }
    .atelier-card-sub {
        font-size: 0.92rem !important;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.7) !important;
    }
    .atelier-card-cta {
        min-height: 44px;
        font-weight: 600;
    }

    /* ============== SECTIONS — spacing premium ============== */
    section {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
    .section-label {
        font-size: 0.78rem !important;
        letter-spacing: 0.16em;
        font-weight: 600;
        margin-bottom: 0.85rem !important;
    }
    .section-title {
        font-size: clamp(2rem, 9.5vw, 2.8rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.035em !important;
        margin-bottom: 1.25rem !important;
    }
    .section-sub {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.7) !important;
        max-width: 92%;
        margin-bottom: 2.25rem !important;
    }

    /* ============== SERVICES — cards premium ============== */
    .service-card {
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 1.5rem 1.4rem !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28) !important;
    }
    .service-num {
        font-size: 4rem !important;
    }
    .service-title {
        font-size: 1.35rem !important;
        line-height: 1.15 !important;
        font-weight: 700;
        margin-top: 0.85rem !important;
    }
    .service-desc {
        font-size: 0.95rem !important;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.72) !important;
    }

    /* ============== ABOUT — photo + breathing ============== */
    #about {
        padding-top: 5rem !important;
    }
    .about-img-wrap {
        margin: 0 auto 2rem !important;
        max-width: 280px;
    }
    .about-img-wrap img {
        border-radius: 18px !important;
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    }
    .about-img-badge {
        margin-top: 1rem;
    }
    .about-text {
        font-size: 1rem !important;
        line-height: 1.65 !important;
        margin-bottom: 1.25rem !important;
    }
    .about-text::first-letter {
        font-size: 3.4em !important;
    }

    /* ============== MANIFESTO — typographie premium ============== */
    .manifesto-item {
        grid-template-columns: 50px 1fr !important;
        gap: 0.9rem !important;
        padding: 1.5rem 0 !important;
        align-items: start;
    }
    .manifesto-num {
        font-size: 0.78rem !important;
        font-family: 'JetBrains Mono', monospace;
        opacity: 0.85;
    }
    .manifesto-title {
        font-size: 1.18rem !important;
        line-height: 1.22 !important;
        font-weight: 700;
        letter-spacing: -0.015em;
        margin-bottom: 0.5rem !important;
    }
    .manifesto-text {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.65) !important;
    }
    .editorial-quote {
        font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
        line-height: 1.3 !important;
        padding: 0 0.5rem;
    }

    /* ============== WORK — bento cards ============== */
    .bento-card {
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    }

    /* ============== SKILLS ============== */
    .skill-bar {
        margin-bottom: 1.1rem !important;
    }
    .skill-label {
        font-size: 0.92rem !important;
        font-weight: 500;
        margin-bottom: 0.45rem;
    }

    /* ============== CONTACT ============== */
    .form-group input,
    .form-group textarea {
        min-height: 52px;
        padding: 0.95rem 1.1rem !important;
        font-size: 16px !important; /* anti iOS zoom */
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .form-group textarea {
        min-height: 140px;
    }
    .btn-submit {
        min-height: 56px;
        font-size: 1rem !important;
        font-weight: 700;
        padding: 1rem 1.5rem !important;
        border-radius: 14px !important;
    }

    /* ============== HEADER MOBILE — premium touch ============== */
    #header {
        /* fond quasi-solide : le backdrop-filter est neutralisé globalement
           (charte zéro latence), donc l'opacité seule empêche le contenu de
           transparaître sous le header fixe. */
        background: linear-gradient(180deg, rgba(5, 8, 17, 0.98), rgba(5, 8, 17, 0.96)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .logo {
        font-size: 1.1rem;
    }
    .theme-toggle,
    .hamburger {
        min-width: 44px;
        min-height: 44px;
    }
    .hamburger-line {
        background: var(--ink, #efe9d8);
        height: 2px;
    }

    /* ============== NAV LINKS OVERLAY — typographie magazine ============== */
    .nav-links {
        gap: 0 !important;
    }
    .nav-link {
        font-size: 2.2rem !important;
        font-weight: 700;
        padding: 1.15rem 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        letter-spacing: -0.025em !important;
    }
    .nav-cta {
        margin-top: 2rem;
        min-height: 56px;
        padding: 1rem 1.5rem !important;
        border-radius: 14px !important;
        font-size: 1.05rem !important;
        font-weight: 700;
    }

    /* ============== BOTTOM TOGGLES — palette + sons premium ============== */
    .palette-toggle,
    .sound-toggle {
        bottom: 1rem !important;
        left: 1rem !important;
        min-height: 44px;
        padding: 0.55rem 0.95rem !important;
        background: rgba(15, 21, 37, 0.85) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 100px !important;
        font-size: 0.8rem !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }

    /* ============== UTILITIES ============== */
    .grain {
        opacity: 0.04 !important;
    }
    /* Smoother scroll feel sur iOS */
    html, body {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============== LIVE PULSES — animations très visibles ============== */
@keyframes live-pulse-ring {
    0%   { transform: translate(-50%, -50%) scale(0.9); opacity: 0.85; }
    80%  { opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
@keyframes live-pulse-core {
    0%, 100% { transform: scale(1); filter: brightness(1) saturate(1.1); }
    50%      { transform: scale(1.18); filter: brightness(1.35) saturate(1.6); }
}
.hero-badge-dot.is-pulsing,
.showcase-pulse.is-pulsing,
.meta-pulse.is-pulsing,
.availability-pulse.is-pulsing,
.live-dot.is-pulsing {
    position: relative;
    background: #4ade80 !important;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.6), 0 0 0 1px rgba(74, 222, 128, 0.3);
    animation: live-pulse-core 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.hero-badge-dot.is-pulsing::after,
.showcase-pulse.is-pulsing::after,
.meta-pulse.is-pulsing::after,
.availability-pulse.is-pulsing::after,
.live-dot.is-pulsing::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.55);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: live-pulse-ring 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.hero-badge-dot.is-pulsing::before,
.showcase-pulse.is-pulsing::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: live-pulse-ring 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
    animation-delay: 0.4s;
}

/* Eyebrow draw (préservé) */
@keyframes eyebrow-underline-draw {
    0% { transform: scaleX(0); transform-origin: left center; opacity: 0.4; }
    60% { opacity: 1; }
    100% { transform: scaleX(1); transform-origin: left center; opacity: 1; }
}
.section-label.is-pulse::before,
.section-label.is-pulse::after {
    animation: eyebrow-underline-draw 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Tech rotator — encadrement + glow vivant */
.tech-currently {
    position: relative;
    overflow: visible;
}
#tech-currently-rotator {
    display: inline-block;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-shadow: 0 0 18px currentColor;
    will-change: transform, opacity, color;
}

/* Hero badge text rotator — slide + accent dash */
.hero-badge {
    overflow: hidden;
    position: relative;
}
.hero-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(74, 222, 128, 0.15) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: badge-shimmer 4.2s linear infinite;
}
@keyframes badge-shimmer {
    0%, 60% { transform: translateX(-100%); }
    80% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}
.hero-badge-text {
    display: inline-block;
    will-change: transform, opacity;
    transition: opacity 280ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Live "ONLINE" indicator that can be inserted in header */
.live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 100px;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: #4ade80;
    text-transform: uppercase;
    font-weight: 600;
}
.live-status-pill .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    position: relative;
}

/* Scroll progress bar TOP - visible bar */
.live-scroll-progress {
    /* Retirée (dé-IA-isation) : la barre de progression dégradée en haut de
       page est un marqueur visuel « design généré ». */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 999;
    transition: width 80ms ease-out;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
    animation: live-scroll-shimmer 3s linear infinite;
}
/* Pages éditoriales (tarifs, design-system, carnet, atelier, légal) :
   barre en or pour rester dans la palette charbon/or, pas le bleu du portfolio. */
.editorial-page .live-scroll-progress {
    background: linear-gradient(90deg, #c8a25c, #e8c889, #c8a25c);
    box-shadow: 0 0 12px rgba(200, 162, 92, 0.45);
}
@keyframes live-scroll-shimmer {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-badge-dot.is-pulsing,
    .showcase-pulse.is-pulsing,
    .meta-pulse.is-pulsing,
    .availability-pulse.is-pulsing,
    .live-dot.is-pulsing,
    .hero-badge-dot.is-pulsing::after,
    .hero-badge-dot.is-pulsing::before,
    .showcase-pulse.is-pulsing::after,
    .showcase-pulse.is-pulsing::before,
    .meta-pulse.is-pulsing::after,
    .availability-pulse.is-pulsing::after,
    .live-dot.is-pulsing::after {
        animation: none;
    }
    .section-label.is-pulse::before,
    .section-label.is-pulse::after,
    .hero-badge::after,
    .live-scroll-progress {
        animation: none;
    }
}

/* ============== SECTION LIFE — anims vivantes par section ============== */
@keyframes about-photo-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(-0.3deg); }
}
@keyframes quote-mark-drift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(2deg); }
}
@keyframes section-active-breathe {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
@keyframes service-glow-once {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    40%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
@keyframes manifesto-num-glow {
    0%, 100% { text-shadow: 0 0 0 currentColor; opacity: 0.85; }
    50%      { text-shadow: 0 0 14px currentColor; opacity: 1; }
}
/* Section active accent breathing — eyebrow + watermark */
section.is-active-section .section-label::before,
section.is-active-section .section-label::after {
    animation: section-active-breathe 3.2s ease-in-out infinite;
}

/* Service card glow once on viewport entry (mobile) */
.service-card.is-glow {
    animation: service-glow-once 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.service-card {
    will-change: transform;
}

/* Manifesto active item — num glow + accent line draw */
#manifesto .manifesto-item.is-in-focus .manifesto-num {
    animation: manifesto-num-glow 2.4s ease-in-out infinite;
    color: var(--color-accent, #3b82f6);
}
#manifesto .manifesto-item.is-in-focus .manifesto-title {
    transition: color 360ms ease;
}

/* Tech pills shimmer subtle */
.tech-pill.has-shimmer,
.tech-icon-item.has-shimmer {
    position: relative;
    overflow: hidden;
}
.tech-pill.has-shimmer::after,
/* Reflet « shimmer » RETIRÉ : il animait background-position sur un
   dégradé — propriété NON composite, donc repaint à chaque image, sur
   27 pastilles en boucle infinie. Et un reflet qui balaie du contenu
   est le langage visuel du CHARGEMENT : l'œil lisait « ça attend »,
   d'où la latence ressentie. Le défilé du marquee suffit. */
/* Contact form glow on focus.
   Les trois couleurs sont DÉRIVÉES de var(--accent) aux opacités
   d'origine : cette règle porte !important, donc aucune règle de couloir
   ne pouvait la reprendre depuis styles.css — c'est ici qu'il faut la
   brancher. Sans ça, un champ mis au point en couloir Design s'entourait
   d'un liseré, d'un halo et d'un fond BLEUS pendant que le reste du
   formulaire était en terre cuite. Sur une page sans couloir, --accent
   vaut #3b82f6 en thème sombre : valeurs inchangées au pixel. */
.form-group.is-focused input,
.form-group.is-focused textarea {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
    transition: border-color 280ms ease, box-shadow 280ms ease, background 280ms ease;
}

/* Editorial quote marks float */
.editorial-quote-mark {
    display: inline-block;
    will-change: transform;
}

/* About photo float */
#about .about-img-wrap img {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    #about .about-img-wrap img,
    .editorial-quote-mark,
    .service-card.is-glow,
    #manifesto .manifesto-item.is-in-focus .manifesto-num,
    .tech-pill.has-shimmer::after,
    .tech-icon-item.has-shimmer::after,
    section.is-active-section .section-label::before,
    section.is-active-section .section-label::after {
        animation: none !important;
    }
}

/* ============== TÉMOIGNAGES — section social proof premium ============== */
#testimonials {
    padding: clamp(4rem, 8vw, 8rem) 0;
    position: relative;
    background: var(--color-bg, #050811);
}
#testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(200, 162, 92, 0.04), transparent 70%),
        radial-gradient(ellipse 50% 30% at 20% 80%, rgba(59, 130, 246, 0.03), transparent 70%);
    pointer-events: none;
}
.testimonials-head {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    position: relative;
    z-index: 2;
}
.testimonials-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
    position: relative;
    z-index: 2;
}
.testimonial-card {
    position: relative;
    padding: clamp(1.75rem, 2.4vw, 2.5rem) clamp(1.5rem, 2.2vw, 2.25rem) clamp(1.5rem, 2vw, 2rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 480ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 320ms ease;
}
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 162, 92, 0.4), transparent);
    opacity: 0.6;
}
@media (hover: hover) {
    .testimonial-card:hover {
        transform: translateY(-6px);
        border-color: rgba(200, 162, 92, 0.18);
        box-shadow: 0 22px 52px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(200, 162, 92, 0.1);
    }
}
.testimonial-mark {
    display: block;
    font-family: 'Syne', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 4.5rem;
    line-height: 0.6;
    color: var(--color-gold, #c8a25c);
    opacity: 0.85;
    margin: 0;
}
.testimonial-quote {
    font-family: 'Onest', system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    flex: 1;
    letter-spacing: -0.005em;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold, #c8a25c), var(--color-accent, #3b82f6));
    color: rgba(5, 8, 17, 0.95);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(200, 162, 92, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.testimonial-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    letter-spacing: -0.005em;
}
.testimonial-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

/* Mobile testimonials */
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .testimonial-card {
        padding: 1.75rem 1.5rem 1.5rem !important;
        border-radius: 18px !important;
    }
    .testimonial-mark {
        font-size: 3.5rem !important;
    }
    .testimonial-quote {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    .testimonial-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.74rem !important;
    }
    .testimonial-name {
        font-size: 0.85rem !important;
    }
    .testimonial-role {
        font-size: 0.7rem !important;
    }
}

/* ============== CHIFFRES-CLÉS — stats premium ============== */
#stats {
    padding: clamp(3rem, 6vw, 6rem) 0;
    position: relative;
    background: var(--color-bg, #050811);
}
.stats-head {
    max-width: 720px;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.stats-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.6vw, 1.6rem);
}
.stat-card {
    padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.25rem, 1.8vw, 1.75rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
    overflow: hidden;
    transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gold, #c8a25c), transparent);
}
@media (hover: hover) {
    .stat-card:hover {
        transform: translateY(-4px);
        border-color: rgba(200, 162, 92, 0.2);
    }
}
.stat-num {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-ink, #efe9d8);
    background: linear-gradient(135deg, var(--color-gold, #c8a25c), var(--color-accent, #3b82f6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.35rem;
}
.stat-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.005em;
}
.stat-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.85rem !important;
    }
    .stat-card {
        padding: 1.25rem 1rem !important;
        border-radius: 14px !important;
    }
    .stat-num {
        font-size: 2rem !important;
    }
}

/* ============== PROCESS — comment on travaille ============== */
#process {
    padding: clamp(4rem, 8vw, 8rem) 0;
    background: var(--color-bg, #050811);
    position: relative;
}
#process::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 40% at 80% 30%, rgba(59, 130, 246, 0.04), transparent 70%);
    pointer-events: none;
}
/* Pages éditoriales : ces sections portfolio (#process, #faq…) ne doivent
   pas hériter du fond navy ni du glow bleu — palette or/charbon. */
.editorial-page #process,
.editorial-page #faq,
.editorial-page #stats,
.editorial-page #testimonials {
    background: transparent !important;
}
.editorial-page #process::before,
.editorial-page #faq::before,
.editorial-page #stats::before,
.editorial-page #testimonials::before {
    display: none !important;
}
.process-head {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    position: relative;
    z-index: 2;
}
.process-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(2.5rem, 4vw, 4rem);
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
}
.process-step {
    position: relative;
    padding: clamp(1.5rem, 2.2vw, 2rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease;
}
.process-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -16px;
    width: 12px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), transparent);
    transform: translateY(-50%);
}
.process-step:last-child::after { display: none; }
@media (hover: hover) {
    .process-step:hover {
        transform: translateY(-4px);
        border-color: rgba(59, 130, 246, 0.18);
    }
}
.process-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-accent, #3b82f6);
    letter-spacing: 0.08em;
}
.process-step-title {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}
.process-step-text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
    flex: 1;
}
.process-step-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: rgba(200, 162, 92, 0.8);
    letter-spacing: 0.04em;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.process-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 100px;
    background: rgba(74, 222, 128, 0.06);
    border: 1px solid rgba(74, 222, 128, 0.18);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.trust-icon {
    color: #4ade80;
    font-weight: 700;
}
@media (max-width: 768px) {
    .process-steps {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    .process-step::after { display: none; }
    .process-step {
        padding: 1.25rem 1.25rem !important;
        border-radius: 16px !important;
    }
    .process-trust {
        gap: 0.5rem !important;
    }
    .trust-badge {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.78rem !important;
    }
}

/* ============== FAQ — accordion premium ============== */
#faq {
    padding: clamp(4rem, 8vw, 8rem) 0;
    background: var(--color-bg, #050811);
}
.faq-head {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 880px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.faq-item details {
    width: 100%;
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0.5rem;
    cursor: pointer;
    list-style: none;
    transition: background 280ms ease, padding 280ms ease;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover {
    background: rgba(255, 255, 255, 0.02);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 12px;
}
.faq-q {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.92);
    flex: 1;
}
.faq-icon {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-gold, #c8a25c);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 162, 92, 0.4);
    border-radius: 50%;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), background 280ms ease;
    flex-shrink: 0;
}
.faq-item details[open] .faq-icon {
    transform: rotate(45deg);
    background: rgba(200, 162, 92, 0.12);
}
.faq-a {
    padding: 0 1.5rem clamp(1.25rem, 2vw, 1.75rem);
    max-width: 720px;
    animation: faq-slide-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-a p {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}
@keyframes faq-slide-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
    .faq-item summary {
        gap: 1rem !important;
        padding: 1.1rem 0.25rem !important;
    }
    .faq-q {
        font-size: 1rem !important;
    }
    .faq-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 1.15rem !important;
    }
    .faq-a {
        padding: 0 0.5rem 1.25rem !important;
    }
    .faq-a p {
        font-size: 0.95rem !important;
    }
}

/* ============== NO-LIST — ce que je ne fais pas ============== */
#no-list {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: var(--color-bg, #050811);
    position: relative;
}
#no-list::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 40% at 70% 30%, rgba(228, 100, 100, 0.025), transparent 70%);
    pointer-events: none;
}
.no-list-head {
    max-width: 720px;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    position: relative;
    z-index: 2;
}
.no-list-head em {
    font-family: serif;
    font-style: italic;
    font-weight: 500;
    color: #ff8a6b;
    background: linear-gradient(135deg, #ff8a6b 0%, #ffb38a 60%, #c8a25c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 138, 107, 0.15);
    /* Fallback si background-clip ne marche pas */
    color: #ff8a6b;
}
@supports (-webkit-text-fill-color: transparent) {
    .no-list-head em {
        -webkit-text-fill-color: transparent;
    }
}
html[data-theme="light"] .no-list-head em {
    background: linear-gradient(135deg, #c4451f, #8c5e1f);
    -webkit-background-clip: text;
    background-clip: text;
    color: #c4451f;
}
.no-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 1.8vw, 1.5rem);
    position: relative;
    z-index: 2;
}
.no-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.5rem, 2.2vw, 2rem);
    background: linear-gradient(180deg, rgba(228, 100, 100, 0.02), rgba(255, 255, 255, 0.005));
    border: 1px solid rgba(228, 100, 100, 0.12);
    border-radius: 18px;
    transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease;
}
@media (hover: hover) {
    .no-item:hover {
        transform: translateY(-4px);
        border-color: rgba(228, 100, 100, 0.28);
    }
}
.no-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(228, 100, 100, 0.12);
    border: 1px solid rgba(228, 100, 100, 0.35);
    color: #e46464;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}
.no-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}
.no-title {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}
.no-text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}
@media (max-width: 768px) {
    .no-list {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    .no-item {
        padding: 1.25rem 1.1rem !important;
        border-radius: 16px !important;
    }
    .no-title {
        font-size: 1rem !important;
    }
    .no-text {
        font-size: 0.9rem !important;
    }
}

/* ============== STICKY CTA MOBILE ============== */
.sticky-cta {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 90;
    display: none;
    padding: 0.85rem 1.5rem 0.85rem 1.25rem;
    /* Était un DÉGRADÉ dans une PILULE (border-radius: 100px) : deux
       interdits de la charte cumulés sur le seul bouton flottant du site,
       et sur mobile, donc le plus vu. Aplat de l'accent (contraste blanc
       5,2:1) et rayon aligné sur les autres boutons. Même correctif que
       sur le portfolio.
       Tâche 8, passe de correction 3 : ce fichier est hors de
       src/styles/portfolio/, donc hors du relevé initial — trouvé lors du
       balayage demandé. C'est un appel à l'action (lien vers #contact),
       pas une illustration : classé accent, migré. var(--accent-deep) —
       pas var(--accent) brut, qui échoue le contraste texte blanc en
       couloir design (3,51:1, mesuré ailleurs dans ce chantier) — même
       jeton dérivé que .btn-primary:hover et .showcase-status-cta,
       déjà validé aux 2 couloirs (6,61:1 dev · 4,96:1 design).
       Repli #2563eb conservé : ce fichier charge aussi sur des pages sans
       data-couloir (Layout.astro : 404, mentions-légales, confidentialité,
       marketplace — elles n'importent même pas styles.css, --accent-deep
       y est indéfini) — sans repli, le bouton y perdrait tout fond. */
    background: var(--accent-deep, #2563eb);
    color: white;
    text-decoration: none;
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    border-radius: 12px;
    /* Ombre portée neutre et douce (élévation). Avant : glow bleu + un anneau
       4px navy (0 0 0 4px rgba(5,8,17,.6)) pensé pour fond sombre → sur fond
       CLAIR il ressortait comme un gros contour foncé. On garde juste une ombre
       propre + un liseré interne discret, valable dans les deux thèmes. */
    box-shadow:
        0 10px 26px -8px rgba(20, 24, 40, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.14) inset;
    align-items: center;
    gap: 0.5rem;
    transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease;
    white-space: nowrap;
}
.sticky-cta.is-visible {
    transform: translateX(-50%) translateY(0);
}
.sticky-cta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    flex-shrink: 0;
}
.sticky-cta-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 280ms ease;
}
.sticky-cta:hover .sticky-cta-arrow {
    transform: translateX(3px);
}
@media (max-width: 768px) {
    .sticky-cta {
        display: inline-flex;
        bottom: env(safe-area-inset-bottom, 1rem);
        margin-bottom: 1rem;
    }
}

/* ============== FILTRE DES TRAVAUX — une ligne de liens ==============
   C'étaient quatre pilules (fond, contour, border-radius: 100px) : la
   charte du projet les bannit. Même fonction, registre éditorial — mono
   capitales séparées par des points médians, l'actif souligné.

   Le contrat de public/assets/work-filter.js est INCHANGÉ : mêmes
   crochets .work-filter-btn / data-filter / aria-selected / .is-active,
   mêmes compteurs data-count-*, et un <button> reste un <button>. Seule
   l'apparence change ; le bundle n'a pas à être régénéré pour ce module.

   Les couleurs reprennent le calibrage du module 126 (0,75 d'alpha, juste
   au-dessus de 4,5:1 pour du petit texte espacé) plutôt que --gray-2, qui
   à 0,55 ne tenait pas le seuil sur ce fond. L'actif passe au blanc plein
   et porte le seul soulignement. --gray-4 / --gray-5 sont réinversés par
   le module 020 en thème clair : plus besoin des deux surcharges
   html[data-theme="light"] qui vivaient ici. */
.work-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 2rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--gray-5);
}
.work-filter-btn {
    appearance: none;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    color: rgba(255, 255, 255, 0.75);
    padding: 0.4rem 0.15rem;
    min-height: 30px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--pas-etiquette);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 220ms ease, border-color 220ms ease;
}
.work-filter-btn:hover,
.work-filter-btn:focus-visible {
    color: var(--white);
}
.work-filter-btn.is-active {
    color: var(--white);
    border-bottom-color: currentColor;
}
.work-filter-count {
    opacity: 0.6;
}
.work-filter-sep {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--pas-etiquette);
    color: var(--gray-4);
    user-select: none;
}
html[data-theme="light"] .work-filter-btn {
    color: rgba(10, 14, 26, 0.75);
}
.bento-card.is-hidden {
    display: none !important;
}
@media (max-width: 768px) {
    .work-filter {
        gap: 0.45rem !important;
        margin: 1rem 0 1.5rem !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .work-filter-btn {
        transition: none;
    }
}

/* ============== COOKIE BANNER GDPR — discrete bottom-right pill ============== */
.cookie-banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: auto;
    z-index: 90;
    padding: 0;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
    transform: translateY(14px);
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease;
    max-width: 340px;
}
.cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.cookie-banner-inner {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem 1rem 0.9rem;
}
.cookie-banner-content {
    flex: 1;
}
.cookie-banner-title {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 0.15rem;
    letter-spacing: -0.005em;
}
.cookie-banner-desc {
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}
.cookie-banner-link {
    color: var(--color-gold, #c8a25c);
    text-decoration: underline;
    text-decoration-color: rgba(200, 162, 92, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 200ms ease;
}
.cookie-banner-link:hover {
    text-decoration-color: var(--color-gold, #c8a25c);
}
.cookie-banner-actions {
    display: flex;
    gap: 0.4rem;
    align-self: flex-end;
}
.cookie-banner-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 0.45rem 0.95rem;
    /* 6px, pas 100px. Une pilule est bannie par la charte du projet, et
       celle-ci restait la dernière du site : le chantier « deux couloirs »
       ne l'avait redressée que dans le couloir Design (132), donc elle
       revenait en couloir Dev et sur toute page sans couloir. 6px est le
       rayon de la famille des petits boutons de barre (.nav-cta,
       .showcase-status-cta, .voice-intro-btn) — la même valeur que celle
       que le jeton --radius leur donne en couloir Dev. */
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 200ms ease, background 200ms ease;
}
.cookie-banner-btn-primary {
    background: var(--color-ink, #efe9d8);
    color: rgba(5, 8, 17, 0.95);
}
.cookie-banner-btn-primary:hover {
    transform: translateY(-1px);
    background: white;
}
@media (max-width: 640px) {
    .cookie-banner {
        right: 0.75rem !important;
        left: 0.75rem !important;
        bottom: 0.75rem !important;
        max-width: none !important;
        border-radius: 12px !important;
    }
    .cookie-banner-inner {
        padding: 0.85rem 1rem !important;
        gap: 0.6rem !important;
    }
    .cookie-banner-title {
        font-size: 0.85rem !important;
    }
    .cookie-banner-desc {
        font-size: 0.75rem !important;
    }
    .cookie-banner-actions {
        align-self: stretch !important;
    }
    .cookie-banner-btn {
        flex: 1;
        padding: 0.6rem 0.95rem !important;
        font-size: 0.7rem !important;
    }
}
html[data-theme="light"] .cookie-banner {
    background: rgba(250, 246, 236, 0.92);
    border-color: rgba(10, 14, 26, 0.08);
}
html[data-theme="light"] .cookie-banner-title {
    color: rgba(10, 14, 26, 0.95);
}
html[data-theme="light"] .cookie-banner-desc {
    color: rgba(10, 14, 26, 0.65);
}
html[data-theme="light"] .cookie-banner-btn-primary {
    background: rgba(10, 14, 26, 0.92);
    color: #faf6ec;
}

/* ============== FORM SUCCESS BANNER ============== */
.form-success-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.08), rgba(74, 222, 128, 0.03));
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 360ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.form-success-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.form-success-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.5);
    color: #4ade80;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-success-title {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.2rem;
    letter-spacing: -0.01em;
}
.form-success-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
.btn-submit.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.6rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: spin 700ms linear infinite;
    vertical-align: -2px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Light theme additions */
html[data-theme="light"] #stats,
html[data-theme="light"] #process,
html[data-theme="light"] #faq,
html[data-theme="light"] #no-list {
    background: #faf6ec;
}
html[data-theme="light"] .stat-card,
html[data-theme="light"] .process-step {
    background: linear-gradient(180deg, rgba(10, 14, 26, 0.03), rgba(10, 14, 26, 0.005));
    border-color: rgba(10, 14, 26, 0.08);
}
html[data-theme="light"] .stat-label,
html[data-theme="light"] .process-step-title,
html[data-theme="light"] .faq-q {
    color: rgba(10, 14, 26, 0.92);
}
html[data-theme="light"] .stat-meta,
html[data-theme="light"] .process-step-text,
html[data-theme="light"] .faq-a p {
    color: rgba(10, 14, 26, 0.62);
}
html[data-theme="light"] .faq-list,
html[data-theme="light"] .faq-item {
    border-color: rgba(10, 14, 26, 0.1);
}
html[data-theme="light"] .trust-badge {
    color: rgba(10, 14, 26, 0.85);
}

/* Light theme */
html[data-theme="light"] #testimonials {
    background: #faf6ec;
}
html[data-theme="light"] .testimonial-card {
    background: linear-gradient(180deg, rgba(10, 14, 26, 0.04), rgba(10, 14, 26, 0.01));
    border-color: rgba(10, 14, 26, 0.08);
}
html[data-theme="light"] .testimonial-quote {
    color: rgba(10, 14, 26, 0.88);
}
html[data-theme="light"] .testimonial-name {
    color: rgba(10, 14, 26, 0.92);
}
html[data-theme="light"] .testimonial-role {
    color: rgba(10, 14, 26, 0.5);
}
html[data-theme="light"] .testimonial-author {
    border-top-color: rgba(10, 14, 26, 0.08);
}

/* ============== iPhone SE / vieux mobiles (< 380px) ============== */
@media (max-width: 380px) {
    .hero-title {
        font-size: 2.15rem !important;
    }
    .section-title {
        font-size: 1.85rem !important;
    }
    .hero-actions .btn-primary {
        font-size: 0.95rem !important;
        min-height: 52px !important;
    }
}


/* ═══ THÈME CLAIR — correctifs ══════════════════════════════════════
   Cette feuille a été écrite en supposant un fond sombre : elle force
   du texte blanc et des ombres noires très marquées, avec !important.
   Sur le fond crème du thème clair, ça donnait :
     · « Réponse en moyenne sous 2h » en blanc sur crème → contraste
       1,05 (invisible) ;
     · une ombre à 38 % de noir sous chaque avis client → un voile gris
       sale autour des cartes, 45 % au survol.
   On rétablit l'encre et des ombres calibrées pour le clair. Les
   valeurs sombres restent intactes. */
html[data-theme="light"] .showcase-status-detail {
    color: rgba(10, 14, 26, 0.62) !important;
}
html[data-theme="light"] .testimonial-card {
    box-shadow: 0 14px 38px rgba(10, 14, 26, 0.07) !important;
}
html[data-theme="light"] .testimonial-card:hover {
    box-shadow: 0 22px 52px rgba(10, 14, 26, 0.10),
                0 0 0 1px rgba(200, 162, 92, 0.18) !important;
}