/*
|--------------------------------------------------------------------------
| CodeSommet – Component & Utility Styles
|--------------------------------------------------------------------------
| Styles that are NOT generated by Tailwind but needed by Blade components.
| main.css already contains the compiled Tailwind output.
*/

/* ── CSS Custom Properties (Design Tokens) ───────────────────────────── */
:root {
    /* Brand colours */
    --color-primary-orange: #00AEEF;
    --color-orange-hover: #0071BC;

    /* Text */
    --text-primary: #111111;
    --text-secondary: #6B7280;

    /* Backgrounds */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;

    /* Borders */
    --border-light: rgba(0, 0, 0, 0.08);

    /* Layout */
    --container-max: 1280px;
    --container-padding: 1.5rem;

    /* Typography scale */
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Font families */
    --font-inter: 'Inter', 'Inter Fallback', sans-serif;
    --font-satoshi: 'satoshi', 'satoshi Fallback', sans-serif;
    --font-phudu: 'Phudu', 'Phudu Fallback', sans-serif;
    --font-heading: var(--font-satoshi), 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: var(--font-phudu), 'Phudu', sans-serif;
    --font-body: var(--font-inter), 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Font face ────────────────────────────────────────────────────────── */
.font-heading {
    font-family: var(--font-heading);
}

/* ── Smooth scroll ────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── Marquee animations (CTA banner) ─────────────────────────────────── */
@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.animate-marquee-left {
    animation: marquee-left 30s linear infinite;
}
.animate-marquee-right {
    animation: marquee-right 30s linear infinite;
}

/* ── CTA pill marquee (tripled items, scroll -33.333% → 0%) ─────────── */
@keyframes cta-marquee {
    0%   { transform: translateX(-33.333%); }
    100% { transform: translateX(0); }
}
.animate-cta-marquee {
    animation: cta-marquee 20s linear infinite;
}

/* ── Ping animation (green dot in badges) ─────────────────────────────── */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}
.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ── Hero image fade-in on page load ──────────────────────────────────── */
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
.hero-img-reveal {
    animation: heroFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ── Scroll-driven entrance animations ────────────────────────────────── */
.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.scroll-fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.scroll-fade-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.scroll-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
.scroll-fade.is-visible,
.scroll-fade-left.is-visible,
.scroll-fade-right.is-visible,
.scroll-scale.is-visible {
    opacity: 1 !important;
    transform: none !important;
}
/* Stagger delays */
.scroll-fade[data-delay="1"], .scroll-fade-left[data-delay="1"], .scroll-fade-right[data-delay="1"] { transition-delay: 0.08s; }
.scroll-fade[data-delay="2"], .scroll-fade-left[data-delay="2"], .scroll-fade-right[data-delay="2"] { transition-delay: 0.16s; }
.scroll-fade[data-delay="3"], .scroll-fade-left[data-delay="3"], .scroll-fade-right[data-delay="3"] { transition-delay: 0.24s; }
.scroll-fade[data-delay="4"], .scroll-fade-left[data-delay="4"], .scroll-fade-right[data-delay="4"] { transition-delay: 0.32s; }
.scroll-fade[data-delay="5"], .scroll-fade-left[data-delay="5"], .scroll-fade-right[data-delay="5"] { transition-delay: 0.40s; }
.scroll-fade[data-delay="6"], .scroll-fade-left[data-delay="6"], .scroll-fade-right[data-delay="6"] { transition-delay: 0.48s; }

/* Legacy support for inline opacity:0 styles */
[style*="opacity:0"] {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[style*="opacity:0"].is-visible {
    opacity: 1 !important;
    transform: none !important;
}
[style*="opacity:0"][data-delay="1"] { transition-delay: 0.08s; }
[style*="opacity:0"][data-delay="2"] { transition-delay: 0.16s; }
[style*="opacity:0"][data-delay="3"] { transition-delay: 0.24s; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .scroll-fade, .scroll-fade-left, .scroll-fade-right, .scroll-scale,
    [style*="opacity:0"] {
        transition-duration: 0.01s !important;
        transition-delay: 0s !important;
    }
}

/* ── Logo scroll animation (infinite horizontal marquee) ─────────────── */
@keyframes logoScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.logo-scroll-container {
    animation-name: logoScroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* ── Hero text rotation animations ───────────────────────────────────── */
@keyframes scaleIn {
    0%   { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
@keyframes textFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes textReveal {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* ── Float animation (hero image) ────────────────────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* ── Shine effect (CTA buttons) ──────────────────────────────────────── */
.shine-wrapper-hero {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    z-index: 1;
}
.shine-element-hero {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(255,255,255,0.15) 10%,
        transparent 20%
    );
    animation: spin-shine-hero 3s linear infinite;
}
@keyframes spin-shine-hero {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Pulse animation ─────────────────────────────────────────────────── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Hero work showcase carousel (Pixel-Perfect section) ─────────────── */
@keyframes heroScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.hero-scroll-container {
    animation: heroScroll 5s linear infinite;
}
/* The markup sets `animation:heroScroll …` inline rather than via the class
   above, so target that element too — otherwise hover-pause never applies. */
.hero-scroll-container:hover,
[style*="heroScroll"]:hover {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-container,
    [style*="heroScroll"] {
        animation: none !important;
    }
}

/* ── Scroll-left / Scroll-right (feature carousels) ──────────────────── */
@keyframes scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* ── Process step cards spin icon ─────────────────────────────────────── */
.process-spin-icon {
    animation: spin 8s linear infinite;
}

/* ── Flip card (6 Common Problems section) ────────────────────────────── */
.flip-card {
    perspective: 1000px;
}
.flip-card-inner {
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.flip-card-front {
    backface-visibility: hidden;
}
.flip-card-back {
    backface-visibility: hidden;
    transform: rotateY(180deg);
}
/* Desktop: flip on hover */
@media (min-width: 768px) {
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}
/* Mobile: flip on tap via JS (toggled class) */
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* ── Testimonial card image hover animation ──────────────────────────── */
.testimonial-card:hover .testimonial-img-top {
    transform: translateY(-40px) !important;
}
.testimonial-card:hover .testimonial-img-bottom {
    transform: translateY(20px) !important;
}

/* ── Testimonials auto-scroller (infinite horizontal marquee) ─────────── */
@keyframes testimonialScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.testimonial-scroll-container {
    animation: testimonialScroll 60s linear infinite;
    width: max-content;
}
.testimonial-scroll-container:hover {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .testimonial-scroll-container {
        animation: none;
    }
}

/* Hide scrollbar for testimonials horizontal scroll */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ── Cal.com Booking Modal ────────────────────────────────────────────── */
.cal-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.cal-modal-overlay.is-visible {
    opacity: 1;
}
.cal-modal-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 85vh;
    max-height: 700px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s ease;
}
.cal-modal-overlay.is-visible .cal-modal-container {
    transform: scale(1) translateY(0);
}
.cal-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.cal-modal-close:hover {
    background: rgba(0, 0, 0, 0.85);
}
.cal-modal-body {
    width: 100%;
    height: 100%;
    position: relative;
}
@keyframes cal-spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
    .cal-modal-container {
        height: 90vh;
        max-height: none;
        border-radius: 12px;
    }
    .cal-modal-overlay {
        padding: 10px;
    }
}

/* ── Premium Features Hover Tooltip ───────────────────────────────── */
#feature-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#feature-tooltip.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.feature-tooltip-inner {
    width: 320px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 174, 239, 0.3),
                0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
}
.feature-tooltip-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary-orange, #00AEEF), #0071BC, #0088D4);
}
.feature-tooltip-dots {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 1px);
    background-size: 20px 20px;
}
.feature-tooltip-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent, rgba(0,0,0,0.1));
}
.feature-tooltip-content {
    position: relative;
    padding: 24px;
    color: white;
}
.feature-tooltip-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.feature-tooltip-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}
.feature-tooltip-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
}
.feature-tooltip-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2px;
    letter-spacing: -0.02em;
    font-family: var(--font-heading, 'Phudu', sans-serif);
}
.feature-tooltip-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}
.feature-tooltip-line {
    margin-top: 16px;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

/* ── Fix: force white text inside .text-white containers ─────────────── */
/* Global h1-h6 and p rules in main.css set explicit colors that override
   Tailwind's text-white inheritance. This ensures children stay white. */
.text-white h1:not(.text-black),
.text-white h2:not(.text-black),
.text-white h3:not(.text-black),
.text-white h4:not(.text-black),
.text-white h5:not(.text-black),
.text-white h6:not(.text-black),
.text-white p {
    color: inherit;
}

/* ── Preloader ───────────────────────────────────────────────────────── */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.preloader-logo {
    width: 160px;
    height: auto;
    animation: preloaderPulse 2s ease-in-out infinite;
}

.preloader-spinner {
    width: 120px;
    height: 3px;
    background: #F0F0F0;
    border-radius: 3px;
    overflow: hidden;
}

.preloader-bar {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #00AEEF, #0071BC);
    border-radius: 3px;
    animation: preloaderSlide 1.2s ease-in-out infinite;
}

@keyframes preloaderSlide {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(200%); }
    100% { transform: translateX(-100%); }
}

@keyframes preloaderPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* ── Blog Content Typography ─────────────────────────────────────────── */

.blog-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.blog-content h2 {
    font-family: var(--font-heading, 'Satoshi', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 174, 239, 0.1);
}

.blog-content h2:first-child {
    margin-top: 0;
}

.blog-content h3 {
    font-family: var(--font-heading, 'Satoshi', sans-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary, #111);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.blog-content h4 {
    font-family: var(--font-heading, 'Satoshi', sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary, #111);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-content p {
    font-size: 1.125rem;
    line-height: 1.85;
    color: var(--text-secondary, #6B7280);
    margin-bottom: 1.5rem;
}

.blog-content p:last-child {
    margin-bottom: 0;
}

.blog-content strong {
    font-weight: 600;
    color: var(--text-primary, #111);
}

.blog-content a {
    color: #00AEEF;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 174, 239, 0.3);
    transition: all 0.2s ease;
}

.blog-content a:hover {
    color: #0071BC;
    border-bottom-color: #0071BC;
}

.blog-content blockquote {
    margin: 2.5rem 0;
    padding: 2rem 2rem 2rem 2.5rem;
    border-left: 4px solid #00AEEF;
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.04), rgba(0, 113, 188, 0.02));
    border-radius: 0 16px 16px 0;
    position: relative;
}

.blog-content blockquote p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-primary, #111);
    font-style: italic;
    margin-bottom: 0;
}

.blog-content ul {
    margin: 1.75rem 0;
    padding-left: 0;
    list-style: none;
}

.blog-content ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.875rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--text-secondary, #6B7280);
}

.blog-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00AEEF;
}

.blog-content ol {
    margin: 1.75rem 0;
    padding-left: 0;
    list-style: none;
    counter-reset: blog-ol;
}

.blog-content ol li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.875rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--text-primary, #111);
    counter-increment: blog-ol;
}

.blog-content ol li::before {
    content: counter(blog-ol);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(0, 174, 239, 0.1);
    color: #00AEEF;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.blog-content ol li strong {
    color: var(--text-primary, #111);
}

.blog-content code {
    background: rgba(0, 174, 239, 0.08);
    color: #00AEEF;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: var(--font-mono, monospace);
    font-weight: 500;
}

.blog-content hr {
    margin: 3rem 0;
    border: none;
    border-top: 2px solid rgba(0, 0, 0, 0.06);
}

.blog-content img {
    border-radius: 16px;
    margin: 2rem 0;
    width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-content h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
    }

    .blog-content h3 {
        font-size: 1.2rem;
        margin-top: 2rem;
    }

    .blog-content p,
    .blog-content ul li,
    .blog-content ol li {
        font-size: 1rem;
    }

    .blog-content blockquote {
        padding: 1.5rem 1.25rem 1.5rem 1.5rem;
        margin: 2rem 0;
    }
}

/* ── Promo Banners ─────────────────────────────────────────────────── */
.promo-banner {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.promo-banner:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

/* ─── Anchor hover color guard ───────────────────────────────────────────────
   The global `a:hover{color:var(--hover-accent)}` rule in main.css has higher
   specificity (0,1,1) than a utility class like `.text-white` (0,1,0), so it
   repaints links that set their own text color. On solid-fill buttons whose
   hover background is the same blue as --hover-accent (#0071BC), the label
   turned blue-on-blue and vanished. Re-assert the explicit color on hover. */
a.text-white:hover,
a.text-white:hover span,
a.text-white:hover svg,
a:hover > .text-white,
button.text-white:hover,
button.text-white:hover span,
button.text-white:hover svg {
    color: #fff;
}

/* ── Custom Select (cs-select) ────────────────────────────────────────
   Progressive enhancement over native <select>. The native element is
   kept in the DOM (visually hidden) so form submission, validation and
   reset keep working; this markup is the visible control.
   Built by public/js/app.js → initCustomSelects(). */

.cs-select {
    position: relative;
    width: 100%;
    font-family: var(--font-body);
}

/* Native select stays for form data — hidden but focusable-by-script only */
.cs-select > select.cs-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Trigger button ──────────────────────────────────────────────── */
.cs-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.cs-select__trigger:hover {
    border-color: #d1d5db;
}

.cs-select__trigger:focus-visible,
.cs-select.is-open .cs-select__trigger {
    outline: none;
    border-color: var(--color-primary-orange);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
}

/* Placeholder state (empty value) */
.cs-select__trigger[data-placeholder="true"] .cs-select__value {
    color: var(--text-secondary);
}

.cs-select__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron */
.cs-select__arrow {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), color .15s ease;
}

.cs-select.is-open .cs-select__arrow {
    transform: rotate(180deg);
    color: var(--color-primary-orange);
}

/* ── Panel ───────────────────────────────────────────────────────── */
.cs-select__panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    /* Stop wheel/touch scrolling from chaining out to the page once the list
       hits its end (or when it doesn't scroll at all). Without this the page
       slides behind the open dropdown and the panel chases the cursor. */
    overscroll-behavior: contain;
    padding: 0.3125rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 30px -8px rgba(17, 17, 17, 0.16), 0 2px 8px -2px rgba(17, 17, 17, 0.08);
    opacity: 0;
    transform: translateY(-4px) scale(.985);
    transform-origin: top center;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s cubic-bezier(.4, 0, .2, 1), visibility .16s;
}

.cs-select.is-open .cs-select__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
}

/* Escapes a clipping ancestor (e.g. the get-quote wizard's overflow-hidden
   step container) by being moved to <body>. JS sets top/left/width inline
   against the viewport. Since it is no longer a descendant of .cs-select,
   it carries its own .is-open instead of inheriting the wrapper's. */
.cs-select__panel--fixed {
    position: fixed;
    /* Above the sticky header (70) and floating action buttons (90), but
       below the preloader / Cal.com modal / tooltip tier (99999) so an
       overlay is never painted over by a stray dropdown. */
    z-index: 95;
}

.cs-select__panel--fixed.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
}

/* Drop upward when there is no room below */
.cs-select.is-up .cs-select__panel {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom center;
    transform: translateY(4px) scale(.985);
}

.cs-select.is-up.is-open .cs-select__panel {
    transform: translateY(0) scale(1);
}

/* Scrollbar */
.cs-select__panel::-webkit-scrollbar {
    width: 6px;
}
.cs-select__panel::-webkit-scrollbar-track {
    background: transparent;
}
.cs-select__panel::-webkit-scrollbar-thumb {
    background: rgba(17, 17, 17, 0.15);
    border-radius: 3px;
}
.cs-select__panel::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 17, 17, 0.28);
}

/* ── Options ─────────────────────────────────────────────────────── */
.cs-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5625rem 0.75rem;
    border-radius: 7px;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.cs-select__option + .cs-select__option {
    margin-top: 1px;
}

/* Hover + keyboard-active share one look; brand tint, never the OS blue */
.cs-select__option:hover,
.cs-select__option.is-active {
    background: rgba(0, 174, 239, 0.08);
    color: var(--color-orange-hover);
}

.cs-select__option.is-selected {
    background: rgba(0, 174, 239, 0.12);
    color: var(--color-orange-hover);
    font-weight: 500;
}

.cs-select__option.is-selected:hover,
.cs-select__option.is-selected.is-active {
    background: rgba(0, 174, 239, 0.18);
}

.cs-select__option[aria-disabled="true"] {
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

/* Checkmark on the selected row */
.cs-select__check {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .12s ease, transform .12s ease;
}

.cs-select__option.is-selected .cs-select__check {
    opacity: 1;
    transform: scale(1);
}

/* Group labels (<optgroup>) */
.cs-select__group-label {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ── Disabled whole control ──────────────────────────────────────── */
.cs-select.is-disabled .cs-select__trigger {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* ── Error state (pairs with existing .border-red-500 validation) ── */
.cs-select.is-invalid .cs-select__trigger {
    border-color: #ef4444;
}
.cs-select.is-invalid .cs-select__trigger:focus-visible,
.cs-select.is-invalid.is-open .cs-select__trigger {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ── Size variant: compact (get-quote uses py-2 / text-sm / r8) ──── */
.cs-select--sm .cs-select__trigger {
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
}
.cs-select--sm .cs-select__panel {
    border-radius: 8px;
}

/* ── Dark surfaces (footer / dark form cards) ────────────────────── */
.cs-select--dark .cs-select__trigger {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.cs-select--dark .cs-select__trigger:hover {
    border-color: rgba(255, 255, 255, 0.22);
}
.cs-select--dark .cs-select__trigger[data-placeholder="true"] .cs-select__value {
    color: rgba(255, 255, 255, 0.55);
}

/* ── Inline validation message ───────────────────────────────────────
   Shown when a `required` select is submitted empty. The native bubble
   cannot appear (the real <select> is clipped to 1px), so the message is
   rendered here instead. Matches the pages' own error text convention. */
.cs-select__error {
    margin-top: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: #ef4444;
}

.cs-select__error[hidden] {
    display: none;
}

/* ── Touch devices ───────────────────────────────────────────────────
   Coarse pointers need bigger hit areas (Apple HIG / Material both call
   for ~44px). Gated on `pointer: coarse` so the desktop design, which
   matches the original site's field height, is left untouched. */
@media (pointer: coarse) {
    .cs-select__trigger,
    .cs-select--sm .cs-select__trigger {
        min-height: 44px;
    }

    .cs-select__option {
        min-height: 44px;
        padding-top: 0.6875rem;
        padding-bottom: 0.6875rem;
    }

    /* A tap should never be mistaken for a text selection drag. */
    .cs-select__trigger,
    .cs-select__option {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────
   The open/close transition and chevron spin are decorative. */
@media (prefers-reduced-motion: reduce) {
    .cs-select__panel,
    .cs-select__arrow,
    .cs-select__check,
    .cs-select__option {
        transition-duration: 0.01ms !important;
    }
}

/* ── Forced-colours / Windows High Contrast ──────────────────────────
   Background tints are dropped in forced-colours mode, so selection and
   keyboard position would both become invisible. Re-assert with system
   colours and a border that survives the mode. */
@media (forced-colors: active) {
    .cs-select__trigger,
    .cs-select__panel {
        border: 1px solid CanvasText;
    }
    .cs-select__option.is-active,
    .cs-select__option:hover {
        background: Highlight;
        color: HighlightText;
        forced-color-adjust: none;
    }
    .cs-select__option.is-selected .cs-select__check {
        forced-color-adjust: none;
    }
}

/* ── Comparison table header ──────────────────────────────────────────────
   The 4-column comparison grid renders a brand pill plus long compound
   labels ("SaaS & Logiciels B2B", "Agences Internationales"). The pill used
   `whitespace-nowrap`, so a long label forced it wider than its grid column
   and it overlapped the neighbouring headers. Columns are equal-width and
   cannot grow, so the text must wrap and long words must be breakable. */
.grid.grid-cols-4 > div {
    min-width: 0;            /* let grid items shrink below content width */
}
.grid.grid-cols-4 > div > .inline-flex {
    max-width: 100%;
}
.grid.grid-cols-4 > div > .inline-flex > span {
    min-width: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;      /* progressive enhancement; ignored where unsupported */
}

/* ── Floating action buttons (WhatsApp + back to top) ─────────────────
   Markup: resources/views/frontoffice/partials/floating-actions.blade.php
   Behaviour: public/js/app.js → floating actions IIFE.
   Sits below the preloader/modals (99999) but above the sticky header. */

.fab-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: none;
}

.fab-stack > * {
    pointer-events: auto;
}

.fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fixed px so the control keeps its size regardless of the root
       font-size, which this site varies by breakpoint. */
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity .35s cubic-bezier(0.22, 1, 0.36, 1),
                background-color .2s ease;
}

.fab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 6px var(--color-primary-orange);
}

.fab__icon {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
}

/* ── WhatsApp ───────────────────────────────────────────────────────── */
.fab--whatsapp {
    background: #25D366;
    color: #fff;
    box-shadow: 0 8px 22px -6px rgba(37, 211, 102, .55), 0 2px 8px -2px rgba(17, 17, 17, .12);
    /* Entrance: slides up once the page is ready */
    opacity: 0;
    transform: translateY(14px) scale(.85);
}

.fab--whatsapp.is-ready {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.fab--whatsapp:hover {
    background: #1FBE5A;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .6), 0 4px 12px -3px rgba(17, 17, 17, .16);
}

.fab--whatsapp:active {
    transform: translateY(-1px) scale(1.02);
}

.fab__icon--wa {
    width: 25px;
    height: 25px;
}

/* Halo pulsing to draw the eye — pauses on hover so it never fights the label */
.fab__pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #25D366;
    opacity: .55;
    z-index: 1;
    animation: fab-pulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Cancel the animation outright — merely pausing it freezes the halo
   mid-keyframe, where the keyframe's own opacity beats this rule. */
.fab--whatsapp:hover .fab__pulse,
.fab--whatsapp:focus-visible .fab__pulse {
    animation: none;
    opacity: 0;
}

@keyframes fab-pulse {
    0%   { transform: scale(1);    opacity: .5; }
    70%  { transform: scale(1.75); opacity: 0; }
    100% { transform: scale(1.75); opacity: 0; }
}

/* Label that expands on hover (desktop only) */
.fab__label {
    position: absolute;
    right: calc(100% + 0.625rem);
    white-space: nowrap;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    background: var(--text-primary);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    box-shadow: 0 8px 20px -8px rgba(17, 17, 17, .35);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity .28s cubic-bezier(0.22, 1, 0.36, 1),
                transform .28s cubic-bezier(0.22, 1, 0.36, 1);
}

.fab--whatsapp:hover .fab__label,
.fab--whatsapp:focus-visible .fab__label {
    opacity: 1;
    transform: translateX(0);
}

/* ── Back to top ────────────────────────────────────────────────────── */
.fab--top {
    background: var(--color-primary-orange);
    color: #fff;
    box-shadow: 0 8px 22px -6px rgba(0, 174, 239, .5), 0 2px 8px -2px rgba(17, 17, 17, .12);
    /* Hidden until the user scrolls down */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.8);
}

.fab--top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.fab--top:hover {
    background: var(--color-orange-hover);
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 14px 30px -8px rgba(0, 174, 239, .55), 0 4px 12px -3px rgba(17, 17, 17, .16);
}

.fab--top:active {
    transform: translateY(-1px) scale(1.02);
}

/* Nudge the arrow upward on hover */
.fab--top:hover .fab__icon {
    animation: fab-arrow-nudge .6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fab-arrow-nudge {
    0%   { transform: translateY(0); }
    45%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

/* Scroll-progress ring around the back-to-top button */
.fab-progress {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 1;
}

.fab-progress__track {
    fill: none;
    stroke: rgba(255, 255, 255, .28);
    stroke-width: 2.5;
}

.fab-progress__bar {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    /* 2πr with r=20 ≈ 125.66; JS drives stroke-dashoffset */
    stroke-dasharray: 125.66;
    stroke-dashoffset: 125.66;
    transition: stroke-dashoffset .12s linear;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .fab-stack {
        right: 16px;
        bottom: 16px;
        gap: 10px;
    }
    /* Fixed px, not rem: the site sets html{font-size:14px} on small screens,
       so 3rem would compute to 42px — under the 44px touch-target minimum. */
    .fab {
        width: 48px;
        height: 48px;
    }
    /* No hover on touch — the label would never show, so keep it out */
    .fab__label {
        display: none;
    }
}

/* ── Print / reduced motion ─────────────────────────────────────────── */
@media print {
    .fab-stack { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fab,
    .fab__label,
    .fab-progress__bar {
        transition-duration: .01s;
    }
    .fab__pulse,
    .fab--top:hover .fab__icon {
        animation: none;
    }
    .fab--whatsapp:hover,
    .fab--top:hover {
        transform: none;
    }
}

/* ── Offer / promo ads (home page) ────────────────────────────────────
   Markup: frontoffice/partials/promo-offer.blade.php (hero strip)
           frontoffice/partials/promo-sticky-bar.blade.php (bottom bar)
   Behaviour: public/js/app.js → promo IIFE (countdown + dismiss).
   The deadline is REAL (end of the current month, computed in PHP) —
   the countdown never resets itself to fake fresh urgency. */

/* ═══ Shared: animated gradient sheen used by both ads ═══ */
@keyframes promo-sheen {
    0%   { transform: translateX(-120%) skewX(-18deg); }
    100% { transform: translateX(320%)  skewX(-18deg); }
}

.promo-sheen {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    animation: promo-sheen 4.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
}

/* ═══ 1. Hero offer strip ═══ */
.promo-offer {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: linear-gradient(115deg, #00AEEF 0%, #0071BC 55%, #7D53FF 100%);
    color: #fff;
    box-shadow: 0 18px 44px -18px rgba(0, 113, 188, .55);
}

/* Soft moving glow behind the content */
.promo-offer::after {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 55%;
    height: 220%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent);
    animation: promo-float 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes promo-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(-8%, 6%, 0); }
}

/* Column sizing. The right-hand block holds the countdown + fine print and
   would otherwise claim most of the row, squeezing the copy to ~100px. Cap it
   and let the middle column actually take the remaining space. */
@media (min-width: 1024px) {
    .promo-offer__grid > :nth-child(1) { flex: 0 0 auto; }
    .promo-offer__grid > :nth-child(2) { flex: 1 1 auto; min-width: 0; }
    .promo-offer__grid > :nth-child(3) { flex: 0 0 auto; max-width: 21rem; }
}

/* main.css sets global colours for h1–h6 and p with a specificity that beats
   utility classes like .text-white/85, which repainted this copy grey.
   Re-assert white inside the banner. */
.promo-offer h2,
.promo-offer p,
.promo-offer div,
.promo-offer span,
.promo-offer a.promo-offer__cta:hover {
    color: inherit;
}

.promo-offer {
    color: #fff;
}

.promo-offer .promo-offer__cta {
    color: #0071BC;
}

/* Muted copy — opacity instead of text-white/xx, which the global rules beat */
.promo-offer .promo-offer__lead {
    opacity: .9;
}

.promo-offer .promo-offer__terms {
    opacity: .72;
}

.promo-offer__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(4px);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.promo-offer__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #4ADE80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: promo-dot 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes promo-dot {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); }
    70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* The big -30% figure */
.promo-offer__figure {
    font-family: var(--font-display), var(--font-phudu), sans-serif;
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: .9;
    letter-spacing: -.02em;
    font-weight: 700;
}

/* Countdown pills */
.promo-count {
    display: inline-flex;
    align-items: baseline;
    gap: .15rem;
    min-width: 3.1rem;
    padding: .45rem .5rem;
    border-radius: .625rem;
    background: rgba(0, 0, 0, .22);
    font-variant-numeric: tabular-nums;
    text-align: center;
    flex-direction: column;
}

.promo-count__num {
    font-family: var(--font-display), var(--font-phudu), sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.promo-count__lbl {
    font-size: .5625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}

/* CTA inside the strip */
.promo-offer__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border-radius: 999px;
    background: #fff;
    color: #0071BC;
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow .3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35);
}

.promo-offer__cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .45);
    color: #0071BC;
}

.promo-offer__cta svg {
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}

.promo-offer__cta:hover svg {
    transform: translateX(3px);
}

/* ═══ 1b. Offer pop-up (Temu-style modal) ═══
   Markup: frontoffice/partials/promo-popup.blade.php
   Behaviour: public/js/app.js → promo IIFE (initPopup).
   Re-uses .promo-sheen, .promo-offer__badge, .promo-offer__dot,
   .promo-offer__figure, .promo-count* and .promo-offer__cta from the strip. */
.promo-modal {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.promo-modal[hidden] {
    display: none;
}

.promo-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 20, 34, .62);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .3s ease;
}

.promo-modal.is-visible .promo-modal__overlay {
    opacity: 1;
}

.promo-modal__dialog {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 27rem;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    border-radius: 1.25rem;
    background: linear-gradient(150deg, #00AEEF 0%, #0071BC 55%, #7D53FF 100%);
    color: #fff;
    box-shadow: 0 30px 70px -20px rgba(0, 40, 80, .65);
    opacity: 0;
    transform: translateY(18px) scale(.94);
    transition: opacity .35s cubic-bezier(0.22, 1, 0.36, 1),
                transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.promo-modal.is-visible .promo-modal__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Same white-text guard the strip needs — main.css repaints h2/p otherwise. */
.promo-modal__dialog h2,
.promo-modal__dialog p,
.promo-modal__dialog div,
.promo-modal__dialog span {
    color: inherit;
}

.promo-modal__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.promo-modal__close:hover {
    background: rgba(0, 0, 0, .38);
    transform: rotate(90deg);
}

.promo-modal__body {
    position: relative;
    z-index: 1;
    padding: 2rem 1.75rem 1.5rem;
    text-align: center;
}

.promo-modal__figure-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin: 1rem 0 .25rem;
}

.promo-modal__figure-note {
    font-size: .8125rem;
    line-height: 1.25;
    font-weight: 500;
    text-align: left;
    opacity: .95;
}

.promo-modal__title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: .5rem 0 .5rem;
    color: #fff;
}

.promo-modal__lead {
    font-size: .875rem;
    line-height: 1.55;
    opacity: .9;
    margin: 0 0 1.15rem;
}

.promo-modal__countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-bottom: 1.25rem;
}

.promo-modal__cta {
    width: 100%;
    justify-content: center;
}

.promo-modal__dismiss {
    display: block;
    width: 100%;
    margin-top: .75rem;
    padding: .3rem;
    border: 0;
    background: none;
    color: #fff;
    opacity: .72;
    font-size: .8125rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: opacity .2s ease;
}

.promo-modal__dismiss:hover {
    opacity: 1;
}

.promo-modal__terms {
    margin: .9rem 0 0;
    font-size: .6875rem;
    line-height: 1.4;
    opacity: .68;
}

/* Lock background scroll while the pop-up is open. */
body.has-promo-modal {
    overflow: hidden;
}

@media (max-width: 480px) {
    .promo-modal__body {
        padding: 1.75rem 1.25rem 1.25rem;
    }
    .promo-modal__title {
        font-size: 1.3125rem;
    }
    .promo-modal__countdown {
        gap: .3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promo-modal__overlay,
    .promo-modal__dialog {
        transition-duration: .01s;
    }
    .promo-modal__dialog {
        transform: none;
    }
    .promo-modal__close:hover {
        transform: none;
    }
}

/* ═══ 2. Sticky bottom bar ═══ */
.promo-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: linear-gradient(100deg, #0F0F0F 0%, #14314a 60%, #0071BC 100%);
    color: #fff;
    box-shadow: 0 -8px 30px -12px rgba(0, 0, 0, .4);
    transform: translateY(105%);
    transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}

.promo-bar.is-visible {
    transform: translateY(0);
}

/* main.css styles `p` globally with a specificity utilities can't beat, which
   rendered this grey on the dark bar. Force white here. */
.promo-bar .promo-bar__text,
.promo-bar .promo-bar__text span {
    color: #fff;
    font-size: .875rem;
    line-height: 1.35;
}

.promo-bar .promo-bar__text .promo-bar__hl {
    color: #00AEEF;
}

.promo-bar .promo-bar__text .promo-bar__sub {
    opacity: .72;
}

.promo-bar__hl {
    color: #00AEEF;
    font-weight: 700;
}

.promo-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.15rem;
    border-radius: 999px;
    background: var(--color-primary-orange);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}

.promo-bar__cta:hover {
    background: var(--color-orange-hover);
    color: #fff;
    transform: translateY(-1px);
}

.promo-bar__close {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease;
}

.promo-bar__close:hover {
    background: rgba(255, 255, 255, .24);
}

/* Keep the floating buttons clear of the bar while it is showing */
body.has-promo-bar .fab-stack {
    bottom: 5.25rem;
}

/* ═══ Responsive ═══ */
@media (max-width: 900px) {
    .promo-bar {
        gap: .625rem;
        padding: .7rem 2.5rem .7rem .9rem;
        flex-wrap: wrap;
    }
    .promo-bar__text {
        font-size: .8125rem;
    }
}

@media (max-width: 640px) {
    .promo-offer {
        border-radius: .875rem;
    }
    .promo-bar__text .promo-bar__sub {
        display: none;
    }
}

/* ═══ Motion / print ═══ */
@media print {
    .promo-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-sheen,
    .promo-offer::after,
    .promo-offer__dot {
        animation: none;
    }
    .promo-bar {
        transition-duration: .01s;
    }
    .promo-offer__cta:hover,
    .promo-bar__cta:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Analyzer CTA card ("Comparez les Performances de Votre Site Web")
   ───────────────────────────────────────────────────────────────────────
   Bug: the card paints a hardcoded light gradient (to-orange-50) that does
   NOT flip in dark mode, while its copy uses var(--text-secondary), which
   DOES flip to rgba(248,248,248,.7). Result: near-white text on a near-white
   panel — the paragraph was effectively invisible (see [data-theme=dark]).

   Fix: make the surface theme-aware so it stays a real card in both themes,
   and pin the copy to tokens that always contrast with it. Scoped to this
   card only, so no other .to-orange-50 surface is affected.
   ═══════════════════════════════════════════════════════════════════════ */

.analyzer-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(140deg, rgba(0, 174, 239, .06) 0%, #FFF7ED 100%);
    border: 1px solid rgba(0, 174, 239, .22);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 12px 32px -12px rgba(0, 174, 239, .28);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                box-shadow .3s cubic-bezier(.4, 0, .2, 1),
                border-color .3s ease;
}

/* Soft brand glow, kept behind content and out of the a11y tree. */
.analyzer-cta::before {
    content: "";
    position: absolute;
    inset: -40% 30% auto -20%;
    height: 320px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 174, 239, .18) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.analyzer-cta:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 174, 239, .38);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 20px 44px -14px rgba(0, 174, 239, .38);
}

/* Copy: explicit colours so contrast never depends on the flipped token. */
.analyzer-cta__title { color: #0B1B2B; letter-spacing: -.01em; }

.analyzer-cta__text {
    color: #47566B;              /* ~7.2:1 on the light surface */
    text-wrap: pretty;
}

/* Icon tile */
.analyzer-cta__icon {
    background: rgba(0, 174, 239, .12);
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .18);
}

/* ── Dark theme ──────────────────────────────────────────────────────── */
[data-theme="dark"] .analyzer-cta {
    background: linear-gradient(140deg, rgba(0, 174, 239, .10) 0%, rgba(26, 26, 26, .92) 100%);
    border-color: rgba(0, 174, 239, .30);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .5),
        0 16px 40px -16px rgba(0, 0, 0, .7);
}

[data-theme="dark"] .analyzer-cta::before {
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 174, 239, .22) 0%, transparent 70%);
}

[data-theme="dark"] .analyzer-cta:hover {
    border-color: rgba(0, 174, 239, .48);
}

[data-theme="dark"] .analyzer-cta__title { color: #F8F8F8; }
[data-theme="dark"] .analyzer-cta__text  { color: rgba(248, 248, 248, .78); }

[data-theme="dark"] .analyzer-cta__icon {
    background: rgba(0, 174, 239, .18);
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .28);
}

/* ── Motion / a11y ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .analyzer-cta,
    .analyzer-cta:hover {
        transform: none;
        transition: none;
    }
}