/* =========================================================
   DealRunner UI — clean marketplace style
   Inspiration : interface claire type Vinted
   ========================================================= */

:root {
/* Palette officielle Clivyo */
--clivyo-blue: #02318E;
--clivyo-turquoise: #03B3C3;
--clivyo-white: #FFFFFF;
--clivyo-dark: #0F172A;


--bg: #FFFFFF;
--page: #FFFFFF;
--soft: #F6FBFF;
--soft-2: #EEF9FB;
--soft-3: #FAFDFF;

--text: #0F172A;
--text-strong: #02318E;
--muted: #64748B;
--muted-2: #94A3B8;

--line: #E2E8F0;
--line-strong: #BFD7F5;

--primary: #02318E;
--primary-hover: #021F5C;
--primary-soft: #EAF2FF;
--primary-soft-2: #DFFBFD;

--accent: #03B3C3;
--accent-hover: #0299A8;
--accent-soft: #E6FBFD;

--success: #067647;
--success-bg: #ECFDF3;
--danger: #D92D20;
--danger-bg: #FEF3F2;
--warning: #7A4B00;
--warning-bg: #FFF8E6;
--warning-line: #F2C94C;

--radius-xs: 10px;
--radius-sm: 14px;
--radius-md: 18px;
--radius-lg: 28px;

--shadow-soft: 0 14px 38px rgba(2, 49, 142, .07);
--shadow-tiny: 0 2px 10px rgba(2, 49, 142, .055);

--container: min(100% - clamp(28px, 7vw, 150px), 1440px);
--content: min(100%, 1180px);


}


/* =========================================================
   Base
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 15px;
    letter-spacing: -0.01em;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

::selection {
    background: var(--primary-soft-2);
}


/* =========================================================
   Layout
   ========================================================= */

.container {
    width: var(--container);
    max-width: 1440px;
    margin: clamp(28px, 4vw, 56px) auto;
}

.page-simple {
    width: var(--content);
    max-width: 1180px;
    margin: 0 auto;
}

.matcher {
    width: var(--content);
    max-width: 1180px;
    margin: 0 auto;
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 42px);
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
}

/* =========================================================
   Typography
   ========================================================= */

h1,
h2,
h3 {
    color: var(--text-strong);
    line-height: 1.08;
    letter-spacing: -0.05em;
    margin-top: 0;
}

h1 {
    font-size: clamp(1.35rem, 4vw, 3.75rem);
    max-width: 980px;
    margin-bottom: 12px;
}

h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
    margin-bottom: 12px;
}

h3 {
    font-size: 1.12rem;
    margin-bottom: 10px;
}

p {
    color: var(--muted);
    margin-top: 0;
}

.page-intro {
    max-width: 780px;
    font-size: clamp(1.02rem, 1.3vw, 1.22rem);
    color: var(--muted);
    margin-bottom: clamp(24px, 3vw, 38px);
}

.lead {
    color: var(--muted);
    font-size: 1.15rem;
    max-width: 760px;
}

.tiny {
    color: var(--muted);
    font-size: .86rem;
}

.muted {
    color: var(--muted);
    font-size: 14px;
}

hr {
    width: 100%;
    border: 0;
    border-top: 1px solid #edf2f1;
    margin: 12px 0;
}

/* =========================================================
   Cards — sans gros cadres
   ========================================================= */

.card {
    background: #ffffff;
    border: 0;
    border-radius: var(--radius-lg);
    padding: clamp(22px, 3vw, 34px);
    box-shadow: none;
}

.hero-card,
.auth-layout .card,
.narrow {
    width: min(100%, 720px);
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
    padding: clamp(18px, 4vw, 54px) 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--primary);
    background: var(--primary-soft);
    font-weight: 500;
    font-size: 14px;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
    border: 0;
    border-radius: 999px;
    padding: 13px 19px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    min-height: 46px;
    transition: transform .14s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn.primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(2, 49, 142, .17);
}

.btn.primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 12px 28px rgba(2, 49, 142, .22);
}

.btn.secondary {
    background: #ffffff;
    color: var(--primary);
    border: 1px solid var(--line-strong);
}

.btn.small {
    min-height: 38px;
    padding: 9px 14px;
    font-size: 13px;
}

/* =========================================================
   Forms
   ========================================================= */

.form {
    display: grid;
    gap: 18px;
}

.lead-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
    background: var(--soft);
    border: 0;
    border-radius: 34px;
    padding: clamp(24px, 3.4vw, 46px);
    box-shadow: none;
}

.lead-form > input[type="hidden"],
.lead-form > .shazam-zone,
.lead-form > .match-results,
.lead-form > hr,
.lead-form > h2,
.lead-form > .check,
.lead-form > button[type="submit"] {
    grid-column: 1 / -1;
}

.lead-form > button[type="submit"] {
    justify-self: start;
    min-width: min(100%, 280px);
    margin-top: 4px;
}

.form label {
    display: grid;
    gap: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.form input,
.form select,
.form textarea {
    width: 100%;
    border: 0;
    border-radius: 16px;
    background: #ffffff;
    color: var(--text-strong);
    padding: 15px 16px;
    min-height: 52px;
    outline: none;
    box-shadow: inset 0 0 0 1px #dce8e5;
    transition: box-shadow .16s ease, background .16s ease;
}

.form input::placeholder,
.form textarea::placeholder {
    color: #98a2b3;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    box-shadow: inset 0 0 0 2px rgba(2, 49, 142, .55), 0 0 0 4px rgba(2, 49, 142, .08);
}

.form textarea {
    min-height: 132px;
    resize: vertical;
}

.check {
    display: flex !important;
    align-items: flex-start;
    gap: 11px !important;
    color: var(--muted) !important;
    font-weight: 500 !important;
    line-height: 1.45;
}

.check input {
    width: auto;
    min-height: auto;
    margin-top: 4px;
    box-shadow: none;
    accent-color: var(--primary);
}

/* =========================================================
   Search / Shazam scan — version pro sans +
   ========================================================= */

.shazam-zone {
    display: grid;
    place-items: center;
    gap: 14px;
    padding: 10px 0 18px;
}

.shazam-btn {
    width: 142px;
    height: 142px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    isolation: isolate;
    transition: transform .18s ease;
}

.shazam-btn:hover {
    transform: scale(1.035);
}

.scan-orb {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
    overflow: visible;
    background:
        radial-gradient(circle at 34% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 32%),
        radial-gradient(circle at 70% 78%, rgba(255,255,255,.16), rgba(255,255,255,0) 34%),
        linear-gradient(145deg, #02318E 0%, #03B3C3 100%);
    box-shadow:
        0 20px 44px rgba(2, 49, 142, .22),
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -18px 35px rgba(0,0,0,.08);
}

/* Symbole central type onde sonore, sans + */
.scan-mark {
    width: 54px;
    height: 54px;
    position: relative;
    z-index: 6;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.scan-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.16);
    position: relative;
    z-index: 7;
}

.scan-arc {
    position: absolute;
    width: 38px;
    height: 38px;
    border: 4px solid #ffffff;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    opacity: .96;
}

.scan-arc-left {
    transform: rotate(-135deg) translateX(-6px);
}

.scan-arc-right {
    transform: rotate(45deg) translateX(-6px);
}

.scan-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.52);
    pointer-events: none;
}

.scan-ring-1 {
    inset: 21px;
    opacity: .65;
}

.scan-ring-2 {
    inset: 10px;
    opacity: .38;
}

.scan-ring-3 {
    inset: -7px;
    opacity: 0;
    border-color: rgba(2, 49, 142, .26);
}

.scan-glow {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2, 49, 142, .20), rgba(2, 49, 142, 0) 68%);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.shazam-btn::before,
.shazam-btn::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px solid rgba(2, 49, 142, .24);
    opacity: 0;
    pointer-events: none;
}

/* Animation au clic */
.shazam-btn.scanning .scan-orb {
    animation: shazam-orb-breathe 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-logo-wrap {
    animation: shazam-mark-float 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-arc-left {
    animation: shazam-arc-left 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-arc-right {
    animation: shazam-arc-right 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-dot {
    animation: shazam-dot 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-ring-1 {
    animation: shazam-ring-inner 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-ring-2 {
    animation: shazam-ring-inner 1.08s ease-in-out .16s infinite;
}

.shazam-btn.scanning .scan-ring-3 {
    animation: shazam-wave 1.35s ease-out infinite;
}

.shazam-btn.scanning .scan-glow {
    animation: shazam-glow 1.35s ease-out infinite;
}

.shazam-btn.scanning::before {
    animation: shazam-pulse 1.35s ease-out infinite;
}

.shazam-btn.scanning::after {
    animation: shazam-pulse 1.35s ease-out .42s infinite;
}

@keyframes shazam-orb-breathe {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 20px 44px rgba(2, 49, 142, .22),
            inset 0 1px 0 rgba(255,255,255,.42),
            inset 0 -18px 35px rgba(0,0,0,.08);
    }

    50% {
        transform: scale(.965);
        box-shadow:
            0 28px 62px rgba(2, 49, 142, .30),
            inset 0 1px 0 rgba(255,255,255,.42),
            inset 0 -18px 35px rgba(0,0,0,.08);
    }
}

@keyframes shazam-mark-float {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.04) rotate(-2deg);
    }
}

@keyframes shazam-arc-left {
    0%, 100% {
        transform: rotate(-135deg) translateX(-6px) scale(1);
        opacity: .95;
    }

    50% {
        transform: rotate(-135deg) translateX(-9px) scale(1.08);
        opacity: 1;
    }
}

@keyframes shazam-arc-right {
    0%, 100% {
        transform: rotate(45deg) translateX(-6px) scale(1);
        opacity: .95;
    }

    50% {
        transform: rotate(45deg) translateX(-9px) scale(1.08);
        opacity: 1;
    }
}

@keyframes shazam-dot {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(255,255,255,.16);
    }

    50% {
        transform: scale(.72);
        box-shadow: 0 0 0 11px rgba(255,255,255,.08);
    }
}

@keyframes shazam-ring-inner {
    0%, 100% {
        transform: scale(.92);
        opacity: .36;
    }

    50% {
        transform: scale(1.04);
        opacity: .72;
    }
}

@keyframes shazam-wave {
    0% {
        transform: scale(.86);
        opacity: .42;
    }

    100% {
        transform: scale(1.48);
        opacity: 0;
    }
}

@keyframes shazam-pulse {
    0% {
        transform: scale(.76);
        opacity: .38;
    }

    100% {
        transform: scale(1.62);
        opacity: 0;
    }
}

@keyframes shazam-glow {
    0% {
        transform: scale(.82);
        opacity: .45;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

#radarText {
    color: var(--muted);
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}

/* =========================================================
   Match results
   ========================================================= */

.match-results {
    display: grid;
    gap: 10px;
    margin-top: -2px;
}

.match-results h3 {
    margin: 0;
}

.match-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 0;
    border-radius: 20px;
    padding: 18px;
    margin: 0;
    background: #ffffff;
    box-shadow: var(--shadow-tiny);
}

.match-card strong {
    display: block;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 500;
}

.match-card span {
    display: block;
    color: var(--muted);
    font-size: 14px;
    margin-top: 4px;
}

.match-card em {
    display: inline-block;
    margin-top: 7px;
    color: var(--primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.match-card.selected {
    background: #e9f7f5;
    box-shadow: inset 0 0 0 2px rgba(2, 49, 142, .18);
}

/* =========================================================
   Alerts / states
   ========================================================= */

.warning-box {
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--warning-bg);
    border: 0;
    color: var(--warning);
    margin: 6px 0;
}

.loading-line {
    padding: 14px 16px;
    border-radius: 18px;
    background: #eaf6f4;
    color: var(--primary);
    margin: 6px 0;
    font-weight: 500;
}

.alert {
    padding: 14px 16px;
    border-radius: 18px;
    margin-bottom: 18px;
    border: 0;
}

.alert.success {
    background: var(--success-bg);
    color: var(--success);
}

.alert.error {
    background: var(--danger-bg);
    color: var(--danger);
}

/* =========================================================
   Auth / tabs
   ========================================================= */

.auth-layout {
    display: grid;
    place-items: center;
}

.tabs {
    display: flex;
    gap: 10px;
    margin: 16px 0 24px;
    flex-wrap: wrap;
}

.tabs a {
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.tabs a.active {
    background: var(--primary-soft);
    color: var(--primary);
}

/* =========================================================
   Tables / status / misc
   ========================================================= */

.table-wrap {
    overflow: auto;
    border: 0;
    border-radius: 22px;
    background: var(--soft);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

th,
td {
    padding: 14px 16px;
    border-bottom: 1px solid #e7efed;
    text-align: left;
}

th {
    color: var(--muted);
    font-size: .88rem;
    font-weight: 500;
}

.status {
    display: inline-flex;
    align-items: center;
    background: var(--primary-soft);
    color: var(--primary);
    border: 0;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .82rem;
    font-weight: 500;
}
.status-new {
    background: #eef4ff;
    color: #175cd3;
}

.status-waiting-consent {
    background: var(--warning-bg);
    color: var(--warning);
}

.status-matched {
    background: #fff1e6;
    color: #b54708;
}

.status-waiting {
    background: var(--warning-bg);
    color: var(--warning);
}

.status-accepted {
    background: var(--primary-soft);
    color: var(--primary);
}

.status-info {
    background: #eef4ff;
    color: #175cd3;
}

.status-success {
    background: var(--success-bg);
    color: var(--success);
}

.status-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.status-disputed {
    background: #f4ebff;
    color: #6941c6;
}
.big {
    font-size: 2rem;
    font-weight: 500;
}

.events {
    display: grid;
    gap: 8px;
    color: var(--muted);
}

.address-suggestions {
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    margin-top: -8px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.address-suggestion {
    display: block;
    width: 100%;
    border: 0;
    background: #ffffff;
    padding: 13px 15px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
}

.address-suggestion:hover {
    background: var(--soft);
}

.footer {
    padding: 38px 24px;
    text-align: center;
    color: var(--muted);
    border-top: 1px solid #eef2f1;
    margin-top: clamp(50px, 6vw, 90px);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (min-width: 1280px) {
    .lead-form {
        grid-template-columns: repeat(2, minmax(320px, 1fr));
    }

    .matcher.page-simple {
        max-width: 1180px;
    }
}

@media (max-width: 980px) {
    :root {
        --container: min(100% - 34px, 920px);
    }

    .hero,
    .grid2,
    .grid3 {
        grid-template-columns: 1fr;
    }

    .lead-form {
        grid-template-columns: 1fr;
        border-radius: 28px;
    }

    .lead-form > button[type="submit"] {
        width: 100%;
    }
}



@media (max-width: 720px) {
:root {
--container: min(100% - 26px, 720px);
}


body {
    font-size: 14px;
}



.container {
    margin: 24px auto;
}

h1 {
    font-size: clamp(2rem, 10vw, 3rem);
}

.page-intro {
    font-size: 1rem;
    margin-bottom: 24px;
}

.lead-form {
    padding: 20px;
    border-radius: 24px;
    gap: 18px;
}

.shazam-zone {
    padding: 4px 0 8px;
}

.shazam-btn {
    width: 112px;
    height: 112px;
}

.scan-orb {
    width: 96px;
    height: 96px;
}

.scan-mark {
    width: 46px;
    height: 46px;
}

.scan-logo-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    z-index: 8;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(255, 255, 255, .96);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .10),
        inset 0 0 0 1px rgba(255, 255, 255, .72);
}

.scan-logo {
    width: 98px;
    max-width: none;
    height: auto;
    display: block;
    transform: translateY(2px);
    user-select: none;
    pointer-events: none;
}

.scan-arc {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.scan-dot {
    width: 7px;
    height: 7px;
}

.match-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.match-card .btn {
    width: 100%;
}

.card {
    padding: 20px;
    border-radius: 24px;
}

.btn {
    width: 100%;
}

.tabs a {
    flex: 1;
    justify-content: center;
    text-align: center;
}


}

@media (max-width: 420px) {
:root {
--container: min(100% - 20px, 420px);
}



.lead-form {
    padding: 16px;
    border-radius: 22px;
}

.form input,
.form select,
.form textarea {
    min-height: 50px;
    padding: 13px 14px;
}


}



/* Micro-interactions Shazam premium */

.shazam-btn {
    -webkit-tap-highlight-color: transparent;
}

.shazam-btn:disabled {
    cursor: wait;
}

.scan-tap-pulse {
    position: absolute;
    inset: 10px;
    border-radius: 999px;
    background: rgba(2, 49, 142, .16);
    pointer-events: none;
    animation: scan-tap .82s ease-out forwards;
}

@keyframes scan-tap {
    0% {
        transform: scale(.75);
        opacity: .55;
    }

    100% {
        transform: scale(1.72);
        opacity: 0;
    }
}

.shazam-btn.is-success .scan-orb {
    animation: scan-success-pop .62s cubic-bezier(.2, .9, .2, 1);
}

.shazam-btn.is-error .scan-orb {
    animation: scan-error-shake .38s ease;
}

@keyframes scan-success-pop {
    0% {
        transform: scale(.94);
    }

    55% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes scan-error-shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }
}

.match-card.selected-pop {
    animation: selected-card-pop .42s ease;
}

@keyframes selected-card-pop {
    0% {
        transform: scale(.985);
    }

    55% {
        transform: scale(1.012);
    }

    100% {
        transform: scale(1);
    }
}

.select-company-btn.is-active {
    background: var(--primary-soft);
    color: var(--primary);
}

/* =========================================================
   Shazam heartbeat permanent — bouton vivant au repos
   ========================================================= */

/* Au repos, le bouton bat comme un cœur */
.shazam-btn:not(.scanning):not(.is-success):not(.is-error) .scan-orb {
    animation: shazam-heartbeat 2.15s ease-in-out infinite;
    will-change: transform, box-shadow;
}

/* Le symbole interne respire légèrement */
.shazam-btn:not(.scanning):not(.is-success):not(.is-error) .scan-logo-wrap {
    animation: shazam-mark-heartbeat 2.15s ease-in-out infinite;
    will-change: transform;
}

/* Le petit point central pulse doucement */
.shazam-btn:not(.scanning):not(.is-success):not(.is-error) .scan-dot {
    animation: shazam-dot-heartbeat 2.15s ease-in-out infinite;
}

/* Les anneaux respirent en arrière-plan */
.shazam-btn:not(.scanning):not(.is-success):not(.is-error) .scan-ring-1 {
    animation: shazam-soft-ring 2.15s ease-in-out infinite;
}

.shazam-btn:not(.scanning):not(.is-success):not(.is-error) .scan-ring-2 {
    animation: shazam-soft-ring 2.15s ease-in-out .18s infinite;
}

/* Glow subtil en continu */
.shazam-btn:not(.scanning):not(.is-success):not(.is-error) .scan-glow {
    animation: shazam-soft-glow 2.15s ease-in-out infinite;
}

/* Petite onde externe permanente très discrète */
.shazam-btn:not(.scanning):not(.is-success):not(.is-error)::before {
    animation: shazam-idle-wave 2.15s ease-out infinite;
}

/* Quand on clique, l’animation scanning reprend le dessus */
.shazam-btn.scanning .scan-orb {
    animation: shazam-orb-breathe 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-logo-wrap {
    animation: shazam-mark-float 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-dot {
    animation: shazam-dot 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-ring-1 {
    animation: shazam-ring-inner 1.08s ease-in-out infinite;
}

.shazam-btn.scanning .scan-ring-2 {
    animation: shazam-ring-inner 1.08s ease-in-out .16s infinite;
}

.shazam-btn.scanning .scan-glow {
    animation: shazam-glow 1.35s ease-out infinite;
}

/* Battement type cœur : petit battement + gros battement */
@keyframes shazam-heartbeat {
    0% {
        transform: scale(1);
        box-shadow:
            0 20px 44px rgba(2, 49, 142, .22),
            inset 0 1px 0 rgba(255,255,255,.42),
            inset 0 -18px 35px rgba(0,0,0,.08);
    }

    12% {
        transform: scale(.965);
    }

    22% {
        transform: scale(1.055);
        box-shadow:
            0 24px 58px rgba(2, 49, 142, .28),
            inset 0 1px 0 rgba(255,255,255,.42),
            inset 0 -18px 35px rgba(0,0,0,.08);
    }

    34% {
        transform: scale(.985);
    }

    46% {
        transform: scale(1.025);
        box-shadow:
            0 22px 50px rgba(2, 49, 142, .25),
            inset 0 1px 0 rgba(255,255,255,.42),
            inset 0 -18px 35px rgba(0,0,0,.08);
    }

    64%,
    100% {
        transform: scale(1);
        box-shadow:
            0 20px 44px rgba(2, 49, 142, .22),
            inset 0 1px 0 rgba(255,255,255,.42),
            inset 0 -18px 35px rgba(0,0,0,.08);
    }
}

@keyframes shazam-mark-heartbeat {
    0%,
    100% {
        transform: scale(1);
    }

    22% {
        transform: scale(1.06);
    }

    46% {
        transform: scale(1.025);
    }
}

@keyframes shazam-dot-heartbeat {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(255,255,255,.16);
    }

    22% {
        transform: scale(.78);
        box-shadow: 0 0 0 12px rgba(255,255,255,.10);
    }

    46% {
        transform: scale(.9);
        box-shadow: 0 0 0 8px rgba(255,255,255,.12);
    }
}

@keyframes shazam-soft-ring {
    0%,
    100% {
        transform: scale(.94);
        opacity: .36;
    }

    22% {
        transform: scale(1.06);
        opacity: .78;
    }

    46% {
        transform: scale(1);
        opacity: .54;
    }
}

@keyframes shazam-soft-glow {
    0%,
    100% {
        transform: scale(.9);
        opacity: .16;
    }

    22% {
        transform: scale(1.18);
        opacity: .34;
    }

    46% {
        transform: scale(1.05);
        opacity: .22;
    }
}

@keyframes shazam-idle-wave {
    0% {
        transform: scale(.76);
        opacity: .18;
    }

    55% {
        transform: scale(1.28);
        opacity: 0;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

/* Accessibilité : si l’utilisateur demande moins d’animations */
@media (prefers-reduced-motion: reduce) {
    .shazam-btn,
    .scan-orb,
    .scan-mark,
    .scan-dot,
    .scan-ring,
    .scan-glow,
    .shazam-btn::before,
    .shazam-btn::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
CLIVYO — ajustements finaux de marque
========================================================= */


h1,
h2,
h3 {
color: var(--clivyo-blue);
}


.match-card em,
.tabs a.active,
.status,
.status-accepted,
.loading-line {
color: var(--clivyo-blue);
}

.btn.primary {
background: var(--clivyo-blue);
color: var(--clivyo-white);
box-shadow: 0 10px 24px rgba(2, 49, 142, .18);
}

.btn.primary:hover {
background: var(--primary-hover);
box-shadow: 0 12px 28px rgba(2, 49, 142, .24);
}

.btn.secondary {
color: var(--clivyo-blue);
border-color: rgba(2, 49, 142, .20);
}

.badge,
.tabs a.active,
.status,
.status-accepted,
.select-company-btn.is-active {
background: var(--primary-soft);
color: var(--clivyo-blue);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
box-shadow:
inset 0 0 0 2px rgba(3, 179, 195, .65),
0 0 0 4px rgba(3, 179, 195, .12);
}

.check input {
accent-color: var(--clivyo-turquoise);
}

.scan-orb {
background:
radial-gradient(circle at 34% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 32%),
radial-gradient(circle at 70% 78%, rgba(255,255,255,.16), rgba(255,255,255,0) 34%),
linear-gradient(145deg, var(--clivyo-blue) 0%, var(--clivyo-turquoise) 100%);
box-shadow:
0 20px 44px rgba(2, 49, 142, .22),
inset 0 1px 0 rgba(255,255,255,.42),
inset 0 -18px 35px rgba(0,0,0,.08);
}

.scan-ring-3 {
border-color: rgba(3, 179, 195, .34);
}

.scan-glow {
background: radial-gradient(circle, rgba(3, 179, 195, .24), rgba(3, 179, 195, 0) 68%);
}

.shazam-btn::before,
.shazam-btn::after {
border-color: rgba(3, 179, 195, .32);
}

.scan-tap-pulse {
background: rgba(3, 179, 195, .18);
}

.match-card.selected {
background: #EAFBFD;
box-shadow: inset 0 0 0 2px rgba(3, 179, 195, .28);
}

.table-wrap {
background: var(--soft);
}

th,
td {
border-bottom-color: #E2E8F0;
}

.footer{
border-color: #E2E8F0;
}






/* =========================================================
CLIVYO — PAGE D’ACCUEIL PREMIUM ÉPURÉE
Remplace entièrement l’ancien bloc CSS de la page d’accueil.
À placer tout en bas de style.css
========================================================= */

/* ---------------------------------------------------------
   Variables locales avec valeurs de secours
--------------------------------------------------------- */
:root {
    --home-blue: var(--clivyo-blue, #02318E);
    --home-turquoise: var(--clivyo-turquoise, #03B3C3);
    --home-dark: var(--clivyo-dark, #0F172A);
    --home-muted: var(--muted, #64748B);
    --home-soft: var(--soft, #F6FAFD);
    --home-line: var(--line, rgba(2, 49, 142, .11));
    --home-blue-soft: var(--primary-soft, rgba(2, 49, 142, .07));
    --home-accent-soft: var(--accent-soft, rgba(3, 179, 195, .11));
    --home-white: #FFFFFF;
    --home-container: min(1180px, calc(100vw - 40px));
    --home-radius-xl: 34px;
    --home-radius-lg: 26px;
    --home-radius-md: 18px;
    --home-shadow: 0 24px 70px rgba(2, 49, 142, .09);
    --home-shadow-soft: 0 14px 40px rgba(2, 49, 142, .06);
}

/* ---------------------------------------------------------
   Sécurité de mise en page
--------------------------------------------------------- */
.home-hero,
.home-section,
.home-security,
.home-cta,
.home-hero *,
.home-section *,
.home-security *,
.home-cta * {
    box-sizing: border-box;
}

.home-hero,
.home-section,
.home-security,
.home-cta {
    width: 100%;
    min-width: 0;
}

.home-hero a,
.home-section a,
.home-security a,
.home-cta a {
    -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.home-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, .72fr);
    align-items: center;
    gap: clamp(40px, 6vw, 92px);
    padding: clamp(54px, 8vw, 112px) 0 clamp(48px, 7vw, 86px);
}

.home-hero::before,
.home-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.home-hero::before {
    top: -90px;
    right: -14vw;
    width: min(620px, 58vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(3, 179, 195, .15) 0%,
            rgba(3, 179, 195, .07) 34%,
            rgba(3, 179, 195, 0) 70%
        );
}

.home-hero::after {
    left: 0;
    bottom: 12px;
    width: min(540px, 48vw);
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(2, 49, 142, .18),
        rgba(3, 179, 195, .18),
        transparent
    );
}

.home-hero__content {
    min-width: 0;
    max-width: 790px;
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--home-blue);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.home-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--home-blue),
        var(--home-turquoise)
    );
    flex: 0 0 auto;
}

.home-hero h1 {
    max-width: 790px;
    margin: 0;
    color: var(--home-blue);
    font-size: clamp(2.75rem, 5.15vw, 5.15rem);
    font-weight: 750;
    line-height: .98;
    letter-spacing: -.065em;
    text-wrap: balance;
}

.home-hero h1 span {
    display: block;
    margin-top: .12em;
    color: var(--home-dark);
    font-weight: 650;
}

.home-lead {
    max-width: 690px;
    margin: clamp(22px, 3vw, 30px) 0 0;
    color: var(--home-muted);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.68;
    text-wrap: pretty;
}

.home-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: clamp(26px, 4vw, 36px);
}

.home-actions .btn {
    min-height: 52px;
    padding: 0 21px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease;
}

.home-actions .btn.primary {
    box-shadow: 0 12px 30px rgba(2, 49, 142, .18);
}

.home-actions .btn.secondary {
    background: transparent;
    border-color: rgba(2, 49, 142, .17);
}

.home-actions .btn:hover {
    transform: translateY(-2px);
}

.home-actions .btn:active {
    transform: translateY(0);
}

.home-actions .btn:focus-visible {
    outline: 3px solid rgba(3, 179, 195, .25);
    outline-offset: 3px;
}

.home-actions--center {
    justify-content: center;
}

/* ---------------------------------------------------------
   PREUVES DE CONFIANCE
--------------------------------------------------------- */
.home-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 25px;
}

.home-trust span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--home-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.home-trust span::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--home-accent-soft);
    color: var(--home-turquoise);
    font-size: 11px;
    font-weight: 900;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   CARTE EXEMPLE DE COMMISSION
--------------------------------------------------------- */
.home-hero__card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: clamp(25px, 3.2vw, 36px);
    border: 1px solid rgba(2, 49, 142, .09);
    border-radius: var(--home-radius-xl);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .94));
    box-shadow: var(--home-shadow);
}

.home-hero__card::before {
    content: "";
    position: absolute;
    top: -115px;
    right: -95px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(3, 179, 195, .18),
        rgba(3, 179, 195, 0) 68%
    );
    pointer-events: none;
}

.home-card-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--home-line);
}

.home-card-top span {
    max-width: 150px;
    color: var(--home-muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.home-card-top strong {
    color: var(--home-blue);
    font-size: clamp(2.35rem, 4.2vw, 3.7rem);
    font-weight: 760;
    line-height: .9;
    letter-spacing: -.075em;
    white-space: nowrap;
}

.home-example {
    display: grid;
    gap: 0;
    margin: 0 0 22px;
}

.home-example div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 14px 0;
    border-bottom: 1px solid rgba(2, 49, 142, .08);
    border-radius: 0;
    background: transparent;
}

.home-example div:last-child {
    border-bottom: 0;
}

.home-example span {
    min-width: 0;
    color: var(--home-muted);
    font-size: 13px;
    line-height: 1.45;
}

.home-example strong {
    color: var(--home-dark);
    font-size: 14px;
    font-weight: 750;
    text-align: right;
    white-space: nowrap;
}

.home-example div:nth-child(3) strong {
    color: var(--home-blue);
}

.home-example div:nth-child(4) strong {
    color: var(--home-turquoise);
}

.home-hero__card > p {
    position: relative;
    margin: 0;
    padding: 15px 16px;
    border-radius: 16px;
    background: rgba(2, 49, 142, .045);
    color: var(--home-muted);
    font-size: 13px;
    line-height: 1.6;
    text-wrap: pretty;
}

/* ---------------------------------------------------------
   SECTIONS GÉNÉRALES
--------------------------------------------------------- */
.home-section {
    position: relative;
    padding: clamp(58px, 8vw, 100px) 0;
}

.home-section + .home-section {
    border-top: 1px solid rgba(2, 49, 142, .075);
}

.home-section__head {
    max-width: 790px;
    margin-bottom: clamp(34px, 5vw, 54px);
}

.home-section__head h2,
.home-security h2,
.home-cta h2 {
    margin: 0;
    color: var(--home-blue);
    font-size: clamp(2.2rem, 4.1vw, 4rem);
    font-weight: 730;
    line-height: 1.02;
    letter-spacing: -.06em;
    text-wrap: balance;
}

.home-section__head > p:last-child,
.home-security > div:first-child > p:last-child,
.home-cta > p:not(.home-eyebrow) {
    max-width: 720px;
    margin: 18px 0 0;
    color: var(--home-muted);
    font-size: clamp(.98rem, 1.2vw, 1.12rem);
    line-height: 1.7;
    text-wrap: pretty;
}

/* ---------------------------------------------------------
   PROTECTION / ANTI-CONTOURNEMENT
--------------------------------------------------------- */
.home-security {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(360px, 1.12fr);
    align-items: center;
    gap: clamp(36px, 6vw, 80px);
    margin: clamp(26px, 4vw, 48px) 0 0;
    padding: clamp(34px, 5vw, 62px);
    overflow: hidden;
    border: 1px solid rgba(2, 49, 142, .09);
    border-radius: var(--home-radius-xl);
    background:
        linear-gradient(135deg, #F7FBFF 0%, #FFFFFF 72%);
    box-shadow: var(--home-shadow-soft);
}

.home-security::before {
    content: "";
    position: absolute;
    left: -130px;
    bottom: -160px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(3, 179, 195, .14),
        rgba(3, 179, 195, 0) 70%
    );
    pointer-events: none;
    z-index: -1;
}

.home-security > div {
    min-width: 0;
}

.home-security__list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--home-line);
}

.home-security__list div {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 19px 0 19px 44px;
    border-bottom: 1px solid var(--home-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.home-security__list div::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 19px;
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    background: var(--home-accent-soft);
    color: var(--home-turquoise);
    font-size: 13px;
    font-weight: 900;
}

.home-security__list strong {
    display: block;
    margin: 0;
    color: var(--home-dark);
    font-size: 15px;
    font-weight: 730;
    line-height: 1.35;
}

.home-security__list span {
    color: var(--home-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* ---------------------------------------------------------
   CTA FINAL — PLEINE LARGEUR
--------------------------------------------------------- */

.home-cta {
    position: relative;
    isolation: isolate;

    /* Même largeur que les autres sections */
    width: 100%;
    max-width: none;

    margin: clamp(60px, 9vw, 112px) 0 0;
    padding:
        clamp(52px, 7vw, 88px)
        clamp(28px, 7vw, 96px);

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: var(--home-radius-xl);

    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(3, 179, 195, .20),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #02318E 0%,
            #022A7B 48%,
            #021F5C 100%
        );

    box-shadow:
        0 30px 80px rgba(2, 31, 92, .22),
        0 8px 24px rgba(2, 49, 142, .10);

    color: var(--home-white);
    text-align: center;
}

/* Reflet turquoise */
.home-cta::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: -210px;
    left: 50%;

    width: 520px;
    height: 390px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(3, 179, 195, .30),
        rgba(3, 179, 195, 0) 70%
    );

    transform: translateX(-50%);
    pointer-events: none;
}

/* Reflet discret en bas à droite */
.home-cta::after {
    content: "";

    position: absolute;
    z-index: -1;
    right: -150px;
    bottom: -190px;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(255, 255, 255, .11),
        rgba(255, 255, 255, 0) 68%
    );

    pointer-events: none;
}

/* Contenu centré sans étirer les textes */
.home-cta__content {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Petit titre */
.home-cta .home-eyebrow {
    justify-content: center;

    margin: 0 auto 17px;

    color: rgba(255, 255, 255, .82);
}

.home-cta .home-eyebrow::before {
    background: var(--home-turquoise);
}

/* Titre principal */
.home-cta h2 {
    max-width: 850px;
    margin: 0 auto;

    color: var(--home-white);

    font-size: clamp(2.3rem, 4.4vw, 4.35rem);
    font-weight: 760;
    line-height: 1.02;
    letter-spacing: -.06em;
    text-wrap: balance;
}

/* Texte d’introduction */
.home-cta .home-cta__lead {
    max-width: 700px;
    margin: 21px auto 0;

    color: rgba(255, 255, 255, .78);

    font-size: clamp(1rem, 1.3vw, 1.12rem);
    font-weight: 450;
    line-height: 1.7;
    text-wrap: pretty;
}

/* Boutons */
.home-cta .home-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;

    margin: 31px 0 0;
}

.home-cta .btn {
    min-height: 52px;
    padding: 0 22px;

    border-radius: 16px;

    font-size: 14px;
    font-weight: 780;
}

.home-cta .btn.primary {
    color: var(--home-blue);
    background: var(--home-white);
    border-color: var(--home-white);

    box-shadow:
        0 13px 30px rgba(0, 0, 0, .15),
        0 2px 7px rgba(0, 0, 0, .08);
}

.home-cta .btn.primary:hover {
    color: #01266F;
    background: #F7FBFF;

    transform: translateY(-2px);
    box-shadow:
        0 17px 36px rgba(0, 0, 0, .18),
        0 3px 8px rgba(0, 0, 0, .08);
}

.home-cta .btn.secondary {
    color: var(--home-white);

    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .22);

    box-shadow: none;
}

.home-cta .btn.secondary:hover {
    color: var(--home-white);

    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .34);

    transform: translateY(-2px);
}

/* Ligne de réassurance */
.home-cta__reassurance {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 28px;

    margin: 30px auto 0;
    padding-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, .12);

    color: rgba(255, 255, 255, .66);

    font-size: 11.5px;
    line-height: 1.4;
}

.home-cta__reassurance > span {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.home-cta__reassurance > span::before {
    content: "✓";

    width: 19px;
    height: 19px;
    flex: 0 0 19px;

    display: grid;
    place-items: center;

    margin-right: 3px;

    border-radius: 50%;

    color: #FFFFFF;
    background: rgba(3, 179, 195, .24);

    font-size: 10px;
    font-weight: 900;
}

.home-cta__reassurance strong {
    color: rgba(255, 255, 255, .94);
    font-weight: 800;
}

/* ---------------------------------------------------------
   CTA FINAL — TABLETTE
--------------------------------------------------------- */

@media (max-width: 920px) {
    .home-cta {
        margin-top: 72px;
        padding: 58px 40px;
    }

    .home-cta__content {
        max-width: 760px;
    }

    .home-cta h2 {
        max-width: 720px;
    }
}

/* ---------------------------------------------------------
   CTA FINAL — MOBILE
--------------------------------------------------------- */

@media (max-width: 720px) {
    .home-cta {
        width: 100%;
        margin: 58px 0 0;
        padding: 42px 22px;

        border-radius: 25px;

        text-align: left;
    }

    .home-cta::before {
        top: -170px;
        left: 70%;

        width: 390px;
        height: 310px;
    }

    .home-cta::after {
        right: -170px;
        bottom: -210px;
    }

    .home-cta .home-eyebrow {
        justify-content: flex-start;

        margin-right: 0;
        margin-bottom: 15px;
        margin-left: 0;
    }

    .home-cta h2 {
        max-width: none;
        margin: 0;

        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.04;
        text-align: left;
    }

    .home-cta .home-cta__lead {
        max-width: none;
        margin: 17px 0 0;

        font-size: 14px;
        line-height: 1.65;
        text-align: left;
    }

    .home-cta .home-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;

        width: 100%;
        margin-top: 27px;
    }

    .home-cta .home-actions .btn {
        width: 100%;
        min-height: 52px;

        justify-content: center;

        padding-right: 16px;
        padding-left: 16px;

        text-align: center;
        white-space: normal;
    }

    .home-cta__reassurance {
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;

        margin-top: 26px;
        padding-top: 21px;

        text-align: left;
    }

    .home-cta__reassurance > span {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   CTA FINAL — TRÈS PETIT MOBILE
--------------------------------------------------------- */

@media (max-width: 420px) {
    .home-cta {
        padding: 38px 18px;
        border-radius: 22px;
    }

    .home-cta h2 {
        font-size: clamp(1.9rem, 9.7vw, 2.6rem);
    }

    .home-cta .home-cta__lead {
        font-size: 13.5px;
    }
}

/* ---------------------------------------------------------
   ÉCRANS LARGES
--------------------------------------------------------- */
@media (min-width: 1440px) {
    .home-hero {
        gap: 104px;
    }

    .home-hero__card {
        max-width: 430px;
        justify-self: end;
    }
}

/* ---------------------------------------------------------
   TABLETTES ET PETITS ORDINATEURS
--------------------------------------------------------- */
@media (max-width: 1100px) {
    .home-hero {
        grid-template-columns: minmax(0, 1fr) minmax(310px, .68fr);
        gap: 44px;
    }

    .home-hero h1 {
        font-size: clamp(2.75rem, 5.6vw, 4.35rem);
    }

    .home-security {
        grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
        gap: 38px;
    }
}

@media (max-width: 920px) {
    .home-hero {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 38px;
        padding-top: 52px;
    }

    .home-hero::before {
        right: -25vw;
        width: 78vw;
    }

    .home-hero__content {
        max-width: 780px;
    }

    .home-hero__card {
        width: min(100%, 650px);
        max-width: none;
    }

    .home-security {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ---------------------------------------------------------
   MOBILES
--------------------------------------------------------- */
@media (max-width: 720px) {
    :root {
        --home-radius-xl: 25px;
        --home-radius-lg: 21px;
        --home-radius-md: 16px;
    }

    .home-hero {
        gap: 30px;
        padding: 36px 0 34px;
    }

    .home-hero::after {
        display: none;
    }

    .home-eyebrow {
        margin-bottom: 14px;
        font-size: 10px;
        letter-spacing: .065em;
    }

    .home-eyebrow::before {
        width: 21px;
    }

    .home-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.65rem);
        line-height: 1;
        letter-spacing: -.06em;
    }

    .home-hero h1 span {
        margin-top: .16em;
    }

    .home-lead {
        margin-top: 19px;
        font-size: .98rem;
        line-height: 1.63;
    }

    .home-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 9px;
        margin-top: 25px;
    }

    .home-actions .btn {
        width: 100%;
        min-height: 51px;
        justify-content: center;
        padding-right: 17px;
        padding-left: 17px;
        white-space: normal;
        text-align: center;
    }

    .home-trust {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 21px;
    }

    .home-trust span {
        width: fit-content;
        font-size: 12px;
    }

    .home-hero__card {
        padding: 23px;
        box-shadow: 0 18px 48px rgba(2, 49, 142, .09);
    }

    .home-card-top {
        margin-bottom: 18px;
        padding-bottom: 18px;
    }

    .home-card-top strong {
        font-size: clamp(2.25rem, 12vw, 3rem);
    }

    .home-example div {
        gap: 12px;
        padding: 13px 0;
    }

    .home-example span,
    .home-example strong {
        font-size: 13px;
    }

    .home-hero__card > p {
        padding: 14px;
        font-size: 12px;
    }

    .home-section {
        padding: 52px 0;
    }

    .home-section__head {
        margin-bottom: 30px;
    }

    .home-section__head h2,
    .home-security h2,
    .home-cta h2 {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.03;
    }

    .home-section__head > p:last-child,
    .home-security > div:first-child > p:last-child,
    .home-cta > p:not(.home-eyebrow) {
        margin-top: 15px;
        font-size: .95rem;
        line-height: 1.65;
    }

    .home-security {
        gap: 25px;
        margin-top: 15px;
        padding: 26px 22px;
    }

    .home-security__list div {
        padding: 17px 0 17px 41px;
    }

    .home-security__list div::before {
        top: 17px;
        width: 25px;
        height: 25px;
    }

}

/* ---------------------------------------------------------
   TRÈS PETITS MOBILES
--------------------------------------------------------- */
@media (max-width: 420px) {
    .home-hero {
        padding-top: 29px;
    }

    .home-hero h1 {
        font-size: clamp(2.15rem, 12.5vw, 3rem);
    }

    .home-card-top {
        display: grid;
        gap: 13px;
    }

    .home-card-top span {
        max-width: none;
    }

    .home-card-top strong {
        font-size: 2.55rem;
    }

    .home-example div {
        grid-template-columns: minmax(0, 1fr) minmax(90px, auto);
    }

    .home-example strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .home-security {
        padding-right: 18px;
        padding-left: 18px;
    }


}

/* ---------------------------------------------------------
   MODE PAYSAGE MOBILE
--------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
    .home-hero {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .home-section {
        padding-top: 42px;
        padding-bottom: 42px;
    }
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .home-actions .btn {
        transition: none;
    }

    .home-actions .btn:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------
   IMPRESSION
--------------------------------------------------------- */
@media print {
    .home-hero::before,
    .home-hero::after,
    .home-hero__card::before,
    .home-security::before,
    .home-cta::before,
    .home-cta::after {
        display: none !important;
    }

    .home-hero,
    .home-section,
    .home-security,
    .home-cta {
        break-inside: avoid;
    }

    .home-hero__card,
    .home-security,
    .home-cta {
        box-shadow: none;
    }
}



/* =========================================================
   CLIVYO — DASHBOARD PREMIUM ÉPURÉ
   Remplace entièrement l'ancien bloc CSS du dashboard.
   À conserver tout en bas de style.css.
   ========================================================= */

/* ---------- Variables locales + icônes ---------- */
:where(.dash-hero, .dash-stats, .dash-grid, .dash-section) {
    --dash-blue: var(--clivyo-blue, #02318E);
    --dash-blue-dark: #021F5C;
    --dash-turquoise: var(--clivyo-turquoise, #03B3C3);
    --dash-turquoise-dark: #018A98;
    --dash-ink: var(--clivyo-dark, #10213A);
    --dash-muted: var(--muted, #6B7A90);
    --dash-page: #F5F8FC;
    --dash-surface: #FFFFFF;
    --dash-soft: #F6F9FC;
    --dash-soft-blue: #EEF5FF;
    --dash-line: rgba(2, 49, 142, .10);
    --dash-line-strong: rgba(2, 49, 142, .16);
    --dash-shadow: 0 16px 46px rgba(19, 49, 92, .07);
    --dash-shadow-hover: 0 20px 52px rgba(19, 49, 92, .11);
    --dash-success: #078B61;
    --dash-success-bg: #ECF8F3;
    --dash-warning: #A86508;
    --dash-warning-bg: #FFF7E8;
    --dash-danger: #C43D4B;
    --dash-danger-bg: #FFF0F2;
    --dash-radius-xl: 26px;
    --dash-radius-lg: 20px;
    --dash-radius-md: 14px;

    --dash-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --dash-icon-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7V6a2 2 0 0 0-2-2H5a3 3 0 0 0 0 6h15v8a2 2 0 0 1-2 2H5a3 3 0 0 1-3-3V7'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E");
    --dash-icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4M8.6 13.5l6.8 4'/%3E%3C/svg%3E");
    --dash-icon-file-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 15l2 2 4-4'/%3E%3C/svg%3E");
    --dash-icon-coins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='8' cy='6' rx='5' ry='3'/%3E%3Cpath d='M3 6v4c0 1.7 2.2 3 5 3s5-1.3 5-3V6M3 10v4c0 1.7 2.2 3 5 3 1 0 2-.2 2.8-.5'/%3E%3Cpath d='M13 10.5c.8-.3 1.9-.5 3-.5 2.8 0 5 1.3 5 3s-2.2 3-5 3-5-1.3-5-3c0-1 .7-1.9 2-2.5Z'/%3E%3Cpath d='M11 13v4c0 1.7 2.2 3 5 3s5-1.3 5-3v-4'/%3E%3C/svg%3E");
    --dash-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    --dash-icon-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 14h4l2 3h4l2-3h4'/%3E%3C/svg%3E");
    --dash-icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3'/%3E%3Cpath d='M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
    --dash-icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
    --dash-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --dash-icon-hash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E");
    --dash-icon-bank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-6 9 6'/%3E%3Cpath d='M5 10v8M9 10v8M15 10v8M19 10v8M3 21h18M2 18h20'/%3E%3C/svg%3E");
    --dash-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h3'/%3E%3C/svg%3E");
    --dash-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --dash-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E");
    --dash-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
    --dash-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

@supports selector(body:has(.dash-hero)) {
    body:has(.dash-hero) {
        background: #F5F8FC;
    }
}

:where(.dash-hero, .dash-stats, .dash-grid, .dash-section),
:where(.dash-hero, .dash-stats, .dash-grid, .dash-section) * {
    box-sizing: border-box;
}

/* ---------- En-tête ---------- */
.dash-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(24px, 4vw, 58px);
    width: 100%;
    margin: 0 0 clamp(22px, 3vw, 34px);
    padding: clamp(12px, 2vw, 22px) 0 clamp(24px, 3vw, 34px);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--dash-line);
    border-radius: 0;
    box-shadow: none;
}

.dash-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: clamp(72px, 11vw, 150px);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--dash-blue), var(--dash-turquoise));
}

.dash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 0 11px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dash-blue);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.dash-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--dash-turquoise);
    box-shadow: 0 0 0 5px rgba(3, 179, 195, .10);
}

.dash-hero h1 {
    max-width: 820px;
    margin: 0;
    color: var(--dash-blue);
    font-size: clamp(2.25rem, 4.4vw, 4.25rem);
    font-weight: 760;
    line-height: .99;
    letter-spacing: -.062em;
    text-wrap: balance;
}

.dash-lead {
    max-width: 720px;
    margin: 15px 0 0;
    color: var(--dash-muted);
    font-size: clamp(.98rem, 1.15vw, 1.12rem);
    line-height: 1.65;
}

.dash-hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

/* ---------- Boutons du dashboard ---------- */
:where(.dash-hero, .dash-grid, .dash-section) .btn {
    --dash-icon: var(--dash-icon-plus);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease;
}

:where(.dash-hero, .dash-grid, .dash-section) .btn::before,
.dash-inline-form .btn::before {
    content: "";
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--dash-icon) center / contain no-repeat;
    mask: var(--dash-icon) center / contain no-repeat;
}

:where(.dash-hero, .dash-grid, .dash-section) .btn.primary {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--dash-blue), #0149B5);
    border-color: var(--dash-blue);
    box-shadow: 0 10px 24px rgba(2, 49, 142, .18);
}

:where(.dash-hero, .dash-grid, .dash-section) .btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(2, 49, 142, .25);
}

:where(.dash-hero, .dash-grid, .dash-section) .btn.secondary {
    color: var(--dash-blue);
    background: rgba(255, 255, 255, .72);
    border-color: var(--dash-line-strong);
    box-shadow: none;
}

:where(.dash-hero, .dash-grid, .dash-section) .btn.secondary:hover {
    color: var(--dash-blue-dark);
    background: #FFFFFF;
    border-color: rgba(2, 49, 142, .28);
    transform: translateY(-1px);
}

.dash-hero__actions a[href*="find-company"] {
    --dash-icon: var(--dash-icon-plus);
}

.dash-hero__actions a[href="#retraits"],
.dash-hero__actions a[href*="admin-payouts"] {
    --dash-icon: var(--dash-icon-wallet);
}

.dash-hero__actions a[href="#leads"] {
    --dash-icon: var(--dash-icon-inbox);
}

.dash-hero__actions a[href*="company-profile"] {
    --dash-icon: var(--dash-icon-sliders);
}

.dash-hero__actions a[href*="admin-review-quotes"] {
    --dash-icon: var(--dash-icon-file-check);
}

.dash-inline-form .btn,
.dash-paypal-form .btn,
.payout-native-panel .btn {
    --dash-icon: var(--dash-icon-download);
}

.payout-identity-callout .btn {
    --dash-icon: var(--dash-icon-shield);
}

.btn:disabled,
button:disabled {
    cursor: not-allowed !important;
    opacity: .46 !important;
    transform: none !important;
    box-shadow: none !important;
}

:where(.dash-hero, .dash-grid, .dash-section) .btn:focus-visible,
.dash-edit-payout-btn:focus-visible,
.payout-config-btn:focus-visible,
.dash-code:focus-visible {
    outline: 3px solid rgba(3, 179, 195, .28);
    outline-offset: 3px;
}

/* ---------- Statistiques : un seul ensemble, moins de cases ---------- */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 clamp(24px, 3vw, 36px);
    padding: 1px;
    overflow: hidden;
    border-radius: var(--dash-radius-xl);
    background: var(--dash-line);
    box-shadow: var(--dash-shadow);
}

.dash-stats:has(.dash-stat:nth-child(5)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-stat {
    --dash-icon: var(--dash-icon-coins);
    position: relative;
    min-width: 0;
    min-height: 145px;
    padding: clamp(20px, 2.2vw, 27px);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--dash-surface);
    box-shadow: none;
}

.dash-stat::before {
    content: "";
    position: absolute;
    top: 21px;
    right: 21px;
    width: 20px;
    height: 20px;
    color: var(--dash-blue);
    background: currentColor;
    opacity: .62;
    -webkit-mask: var(--dash-icon) center / contain no-repeat;
    mask: var(--dash-icon) center / contain no-repeat;
}

.dash-stat:nth-child(1) { --dash-icon: var(--dash-icon-wallet); }
.dash-stat:nth-child(2) { --dash-icon: var(--dash-icon-share); }
.dash-stat:nth-child(3) { --dash-icon: var(--dash-icon-wallet); }
.dash-stat:nth-child(4) { --dash-icon: var(--dash-icon-file-check); }
.dash-stat:nth-child(5) { --dash-icon: var(--dash-icon-coins); }
.dash-stat:nth-child(6) { --dash-icon: var(--dash-icon-pin); }

.dash-stat--primary {
    background:
        radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .32), transparent 43%),
        linear-gradient(145deg, var(--dash-blue) 0%, var(--dash-blue-dark) 100%);
}

.dash-stat--primary::before {
    color: #FFFFFF;
    opacity: .78;
}

.dash-stat span {
    display: block;
    max-width: calc(100% - 36px);
    margin: 0 0 17px;
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.dash-stat strong {
    display: block;
    color: var(--dash-blue);
    font-size: clamp(1.8rem, 2.8vw, 2.7rem);
    font-weight: 760;
    line-height: 1;
    letter-spacing: -.06em;
}

.dash-stat small {
    display: block;
    margin-top: 11px;
    color: var(--dash-muted);
    font-size: 12px;
    line-height: 1.45;
}

.dash-stat--primary span,
.dash-stat--primary strong,
.dash-stat--primary small {
    color: #FFFFFF;
}

.dash-stat--primary small {
    opacity: .76;
}

/* ---------- Grille principale ---------- */
.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    align-items: start;
    gap: clamp(16px, 2.3vw, 24px);
    margin: 0 0 clamp(38px, 5vw, 64px);
}

.dash-grid:has(> article:nth-of-type(3)) {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(240px, .8fr));
}

.dash-panel {
    position: relative;
    min-width: 0;
    padding: clamp(22px, 2.8vw, 32px);
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius-xl);
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow);
}

.dash-panel--money {
    border-top: 3px solid var(--dash-blue);
}

.dash-panel--cta {
    background:
        radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .12), transparent 38%),
        linear-gradient(145deg, #F7FBFF 0%, #FFFFFF 72%);
    box-shadow: none;
}

.dash-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 24px;
}

.dash-panel h2 {
    margin: 0;
    color: var(--dash-blue);
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    font-weight: 750;
    line-height: 1.04;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.dash-panel h3 {
    margin: 0 0 10px;
    color: var(--dash-ink);
    font-size: 1rem;
    line-height: 1.3;
}

.dash-panel p {
    color: var(--dash-muted);
    line-height: 1.62;
}

.dash-pill,
.dash-count {
    --dash-icon: var(--dash-icon-wallet);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--dash-line);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--dash-blue);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.dash-pill::before,
.dash-count::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--dash-icon) center / contain no-repeat;
    mask: var(--dash-icon) center / contain no-repeat;
}

.dash-count {
    --dash-icon: var(--dash-icon-inbox);
}

/* ---------- Zone argent ---------- */
.dash-money-box {
    position: relative;
    margin: 0;
    padding: 4px 0 25px;
    border: 0;
    border-bottom: 1px solid var(--dash-line);
    border-radius: 0;
    background: transparent;
}

.dash-money-box span,
.dash-money-box small {
    display: block;
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
}

.dash-money-box span {
    letter-spacing: .035em;
    text-transform: uppercase;
}

.dash-money-box strong {
    display: block;
    margin: 10px 0 9px;
    color: var(--dash-blue);
    font-size: clamp(2.65rem, 5vw, 4.45rem);
    font-weight: 780;
    line-height: .94;
    letter-spacing: -.075em;
}

.dash-money-box--pending {
    margin: 16px 0 0;
    padding: 15px 17px;
    border: 1px solid rgba(3, 179, 195, .22);
    border-radius: var(--dash-radius-md);
    background: rgba(3, 179, 195, .07);
}

.dash-money-box--pending span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--dash-turquoise-dark);
}

.dash-money-box--pending span::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--dash-icon-clock) center / contain no-repeat;
    mask: var(--dash-icon-clock) center / contain no-repeat;
}

.dash-money-box--pending strong {
    margin: 7px 0 4px;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

/* ---------- Informations : lignes simples au lieu de cases ---------- */
.dash-info-list {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
    border-top: 1px solid var(--dash-line);
}

.dash-info-list > div,
.dash-info-list .dash-info-row--action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 54px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--dash-line);
    border-radius: 0;
    background: transparent;
}

.dash-info-list span {
    color: var(--dash-muted);
    font-size: 13px;
    line-height: 1.4;
}

.dash-info-list strong {
    color: var(--dash-ink);
    font-size: 13px;
    font-weight: 730;
    line-height: 1.4;
    text-align: right;
    overflow-wrap: anywhere;
}

.dash-info-value-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-width: 0;
}

.dash-edit-payout-btn {
    --dash-icon: var(--dash-icon-pencil);
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--dash-line);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--dash-blue);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.dash-edit-payout-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dash-edit-payout-btn::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--dash-icon) center / contain no-repeat;
    mask: var(--dash-icon) center / contain no-repeat;
}

.dash-edit-payout-btn:hover,
.dash-edit-payout-btn.is-active {
    color: #FFFFFF;
    background: var(--dash-blue);
    border-color: var(--dash-blue);
    transform: translateY(-1px);
}

/* ---------- Actions et formulaires de retrait ---------- */
.dash-actions-stack {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.dash-inline-form {
    display: inline-flex;
    margin: 0;
}

.dash-note {
    position: relative;
    margin: 16px 0 0;
    padding: 12px 14px 12px 42px;
    border: 1px solid rgba(168, 101, 8, .14);
    border-radius: 12px;
    background: var(--dash-warning-bg);
    color: var(--dash-warning) !important;
    font-size: 12px;
    line-height: 1.55;
}

.dash-note::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 14px;
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: var(--dash-icon-clock) center / contain no-repeat;
    mask: var(--dash-icon-clock) center / contain no-repeat;
}

.dash-note--success {
    border-color: rgba(7, 139, 97, .15);
    background: var(--dash-success-bg);
    color: var(--dash-success) !important;
}

.dash-note--success::before {
    -webkit-mask-image: var(--dash-icon-check);
    mask-image: var(--dash-icon-check);
}

.dash-paypal-form,
.payout-config-box {
    width: 100%;
    margin-top: 4px;
    padding: 22px 0 0;
    border-top: 1px solid var(--dash-line);
}

.payout-config-box[hidden],
.dash-paypal-form[hidden],
.payout-native-panel[hidden] {
    display: none !important;
}

.payout-config-box > p,
.dash-paypal-form > p {
    max-width: 700px;
    margin: 0 0 18px;
    font-size: 14px;
}

.payout-identity-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 0;
    padding: 16px 17px;
    border: 1px solid rgba(2, 49, 142, .12);
    border-radius: var(--dash-radius-md);
    background: var(--dash-soft-blue);
}

.payout-identity-callout > div {
    min-width: 0;
}

.payout-identity-callout strong {
    display: block;
    color: var(--dash-blue);
    font-size: 14px;
}

.payout-identity-callout p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
}

.payout-identity-callout--success {
    border-color: rgba(7, 139, 97, .14);
    background: var(--dash-success-bg);
}

.payout-identity-callout--success strong {
    color: var(--dash-success);
}

.payout-config-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.payout-config-btn {
    --dash-icon: var(--dash-icon-bank);
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon title"
        "icon text";
    column-gap: 12px;
    row-gap: 2px;
    width: 100%;
    min-height: 108px;
    padding: 16px;
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius-md);
    background: #FFFFFF;
    color: var(--dash-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.payout-config-btn:nth-child(2) {
    --dash-icon: var(--dash-icon-card);
}

.payout-config-btn::before {
    content: "";
    grid-area: icon;
    align-self: start;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background-color: var(--dash-blue);
    background-image: linear-gradient(rgba(2, 49, 142, .10), rgba(2, 49, 142, .10));
    -webkit-mask: var(--dash-icon) center / 20px 20px no-repeat;
    mask: var(--dash-icon) center / 20px 20px no-repeat;
}

.payout-config-btn span {
    grid-area: label;
    color: var(--dash-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.payout-config-btn strong {
    grid-area: title;
    color: var(--dash-blue);
    font-size: 14px;
    line-height: 1.3;
}

.payout-config-btn small {
    grid-area: text;
    color: var(--dash-muted);
    font-size: 11px;
    line-height: 1.45;
}

.payout-config-btn:hover,
.payout-config-btn.is-active {
    border-color: rgba(2, 49, 142, .34);
    background: var(--dash-soft-blue);
    transform: translateY(-1px);
}

.payout-native-panel {
    margin-top: 14px;
    padding: 20px;
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius-lg);
    background: var(--dash-soft);
}

.payout-native-panel .form,
.dash-paypal-form .form {
    display: grid;
    gap: 15px;
    margin: 0;
}

.payout-native-panel label,
.dash-paypal-form label {
    display: grid;
    gap: 7px;
    color: var(--dash-ink);
    font-size: 12px;
    font-weight: 700;
}

.payout-native-panel input,
.dash-paypal-form input,
.stripe-card-field {
    width: 100%;
    min-height: 50px;
    padding: 14px 15px;
    border: 1px solid var(--dash-line-strong);
    border-radius: 12px;
    outline: none;
    background: #FFFFFF;
    color: var(--dash-ink);
    font: inherit;
    box-shadow: 0 1px 0 rgba(2, 49, 142, .02);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.payout-native-panel input::placeholder,
.dash-paypal-form input::placeholder {
    color: #9AA7B8;
}

.payout-native-panel input:focus,
.dash-paypal-form input:focus,
.stripe-card-field:focus-within {
    border-color: var(--dash-turquoise);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(3, 179, 195, .10);
}

.stripe-card-field {
    display: flex;
    align-items: center;
}

.stripe-card-field .StripeElement {
    width: 100%;
}

.payout-form-message {
    min-height: 18px;
    margin: 0 !important;
    font-size: 12px;
    font-weight: 650;
}

.payout-form-message.is-loading {
    color: var(--dash-blue);
}

.payout-form-message.is-success {
    color: var(--dash-success);
}

.payout-form-message.is-error {
    color: var(--dash-danger);
}

/* ---------- Listes de bénéfices ---------- */
.dash-checks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 24px;
    padding-top: 19px;
    border-top: 1px solid var(--dash-line);
}

.dash-checks span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 650;
}

.dash-checks span::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--dash-turquoise);
    -webkit-mask: var(--dash-icon-check) center / 11px 11px no-repeat;
    mask: var(--dash-icon-check) center / 11px 11px no-repeat;
}

/* ---------- Sections et tableaux ---------- */
.dash-section {
    margin-top: clamp(34px, 5vw, 58px);
}

.dash-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 17px;
}

.dash-section__head h2 {
    margin: 0;
    color: var(--dash-blue);
    font-size: clamp(1.75rem, 3vw, 2.8rem);
    font-weight: 760;
    line-height: 1;
    letter-spacing: -.055em;
}

.dash-table {
    position: relative;
    width: 100%;
    overflow: auto;
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius-xl);
    background: var(--dash-surface);
    box-shadow: 0 12px 36px rgba(19, 49, 92, .055);
    scrollbar-width: thin;
    scrollbar-color: rgba(2, 49, 142, .24) transparent;
}

.dash-table::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dash-table::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(2, 49, 142, .24);
    background-clip: padding-box;
}

.dash-table table {
    width: 100%;
    min-width: 790px;
    border-collapse: collapse;
    border-spacing: 0;
}

.dash-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 14px 17px;
    border: 0;
    border-bottom: 1px solid var(--dash-line);
    background: #F8FAFD;
    color: var(--dash-muted);
    font-size: 10px;
    font-weight: 780;
    line-height: 1.35;
    letter-spacing: .075em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.dash-table td {
    padding: 15px 17px;
    border: 0;
    border-bottom: 1px solid var(--dash-line);
    color: var(--dash-ink);
    font-size: 13px;
    line-height: 1.45;
    vertical-align: middle;
}

.dash-table tbody tr {
    transition: background-color .16s ease;
}

.dash-table tbody tr:hover {
    background: #F9FCFF;
}

.dash-table tbody tr:last-child td {
    border-bottom: 0;
}

.dash-table td small {
    display: block;
    margin-top: 2px;
    color: var(--dash-muted);
    font-size: 10px;
}

.dash-code {
    --dash-icon: var(--dash-icon-hash);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--dash-blue);
    font-weight: 760;
    text-decoration: none;
    white-space: nowrap;
}

.dash-code::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    background: currentColor;
    opacity: .72;
    -webkit-mask: var(--dash-icon) center / contain no-repeat;
    mask: var(--dash-icon) center / contain no-repeat;
}

.dash-code:hover {
    color: var(--dash-turquoise-dark);
}

/* Bouton “Voir” remplacé visuellement par une icône */
.dash-table .btn.small {
    --dash-icon: var(--dash-icon-eye);
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    overflow: hidden;
    border-color: var(--dash-line);
    background: var(--dash-soft-blue);
    color: var(--dash-blue);
    font-size: 0;
    box-shadow: none;
}

.dash-table .btn.small::before {
    width: 17px;
    height: 17px;
}

.dash-table .btn.small:hover {
    color: #FFFFFF;
    background: var(--dash-blue);
    border-color: var(--dash-blue);
}

/* Statuts plus légers : texte + point coloré, sans grosse capsule */
.dash-table .status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dash-muted);
    font-size: 11px;
    font-weight: 720;
    line-height: 1.35;
    white-space: nowrap;
}

.dash-table .status::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.dash-table .status-new,
.dash-table .status-info {
    color: #1769C2;
}

.dash-table .status-waiting {
    color: #B66A08;
}

.dash-table .status-accepted,
.dash-table .status-success {
    color: var(--dash-success);
}

.dash-table .status-danger {
    color: var(--dash-danger);
}

.dash-table .status-disputed {
    color: #8A52C7;
}

/* ---------- États vides ---------- */
.dash-empty {
    padding: clamp(34px, 5vw, 56px);
    border: 1px dashed rgba(2, 49, 142, .20);
    border-radius: var(--dash-radius-xl);
    background:
        radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .09), transparent 34%),
        rgba(255, 255, 255, .68);
    text-align: center;
    box-shadow: none;
}

.dash-empty::before {
    content: "";
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 17px;
    border-radius: 15px;
    background-color: var(--dash-blue);
    -webkit-mask: var(--dash-icon-inbox) center / 26px 26px no-repeat;
    mask: var(--dash-icon-inbox) center / 26px 26px no-repeat;
}

.dash-empty h3 {
    margin: 0 0 8px;
    color: var(--dash-blue);
    font-size: 1.35rem;
    line-height: 1.25;
}

.dash-empty p {
    max-width: 560px;
    margin: 0 auto 20px;
    color: var(--dash-muted);
    line-height: 1.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .dash-grid:has(> article:nth-of-type(3)) {
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    }

    .dash-grid:has(> article:nth-of-type(3)) > article:nth-of-type(3) {
        grid-column: 2;
    }
}

@media (max-width: 1020px) {
    .dash-stats,
    .dash-stats:has(.dash-stat:nth-child(5)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-grid,
    .dash-grid:has(> article:nth-of-type(3)) {
        grid-template-columns: 1fr;
    }

    .dash-grid:has(> article:nth-of-type(3)) > article:nth-of-type(3) {
        grid-column: auto;
    }
}

@media (max-width: 820px) {
    .dash-hero {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 22px;
    }

    .dash-hero__actions {
        justify-content: flex-start;
    }

    .dash-panel__head {
        align-items: flex-start;
    }

    .payout-identity-callout {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .dash-hero {
        padding-top: 4px;
    }

    .dash-hero h1 {
        font-size: clamp(2.2rem, 12vw, 3.25rem);
    }

    .dash-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .dash-hero__actions .btn {
        width: 100%;
    }

    .dash-stat {
        min-height: 132px;
        padding: 19px;
    }

    .dash-stat--primary {
        grid-column: span 2;
    }

    .dash-panel {
        padding: 21px;
        border-radius: 21px;
    }

    .dash-panel__head,
    .dash-section__head {
        display: grid;
        align-items: start;
    }

    .dash-money-box strong {
        font-size: clamp(2.5rem, 15vw, 3.6rem);
    }

    .dash-actions-stack {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dash-actions-stack .btn,
    .dash-inline-form,
    .dash-inline-form .btn {
        width: 100%;
    }

    .dash-info-list > div,
    .dash-info-list .dash-info-row--action {
        align-items: flex-start;
    }

    .dash-info-value-action {
        max-width: 65%;
    }

    .payout-config-actions {
        grid-template-columns: 1fr;
    }

    .payout-native-panel {
        padding: 17px;
    }

    .dash-table {
        border-radius: 18px;
    }

    .dash-table th,
    .dash-table td {
        padding: 13px 14px;
    }
}

@media (max-width: 460px) {
    .dash-stats,
    .dash-stats:has(.dash-stat:nth-child(5)) {
        grid-template-columns: 1fr;
    }

    .dash-stat--primary {
        grid-column: auto;
    }

    .dash-stat {
        min-height: 124px;
    }

    .dash-info-list > div,
    .dash-info-list .dash-info-row--action {
        display: grid;
        gap: 6px;
    }

    .dash-info-value-action {
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }

    .dash-info-list strong {
        text-align: left;
    }

    .dash-pill,
    .dash-count {
        width: fit-content;
    }

    .dash-checks {
        display: grid;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.dash-hero, .dash-stats, .dash-grid, .dash-section) *,
    :where(.dash-hero, .dash-stats, .dash-grid, .dash-section) *::before,
    :where(.dash-hero, .dash-stats, .dash-grid, .dash-section) *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
CLIVYO — Page Trouver une entreprise premium
À placer tout en bas de style.css
========================================================= */

.finder-page {
width: var(--content);
max-width: 1180px;
margin: 0 auto;
}

.finder-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
gap: clamp(24px, 4vw, 54px);
align-items: end;
margin-bottom: clamp(26px, 4vw, 46px);
padding: clamp(24px, 4vw, 46px);
border-radius: 38px;
background:
radial-gradient(circle at 88% 8%, rgba(3, 179, 195, .18), transparent 34%),
linear-gradient(135deg, #F6FBFF 0%, #FFFFFF 62%);
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.finder-eyebrow,
.finder-step-label {
display: inline-flex;
align-items: center;
width: fit-content;
margin: 0 0 12px;
padding: 7px 12px;
border-radius: 999px;
background: var(--primary-soft);
color: var(--clivyo-blue);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.02em;
}

.finder-hero h1 {
margin: 0;
max-width: 760px;
color: var(--clivyo-blue);
font-size: clamp(2.35rem, 5.4vw, 4.75rem);
line-height: .96;
letter-spacing: -0.075em;
}

.finder-lead {
max-width: 720px;
margin: 18px 0 0;
color: var(--muted);
font-size: clamp(1rem, 1.25vw, 1.18rem);
line-height: 1.55;
}

.finder-hero__card {
padding: 22px;
border-radius: 28px;
background: #FFFFFF;
box-shadow:
0 18px 55px rgba(2, 49, 142, .07),
inset 0 0 0 1px rgba(2, 49, 142, .07);
}

.finder-hero__card strong {
display: block;
margin-bottom: 14px;
color: var(--clivyo-blue);
font-size: 1.05rem;
}

.finder-mini-steps {
display: grid;
gap: 10px;
}

.finder-mini-steps span {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: 14px;
}

.finder-mini-steps span::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--clivyo-turquoise);
flex: 0 0 auto;
}

.finder-layout {
display: grid;
grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
gap: clamp(20px, 3vw, 30px);
align-items: start;
}

.finder-side {
position: sticky;
top: 100px;
}

.finder-side__box {
padding: 26px;
border-radius: 32px;
background:
radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .14), transparent 36%),
var(--soft);
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .07);
}

.finder-side__box h2 {
margin: 0 0 10px;
color: var(--clivyo-blue);
font-size: clamp(1.55rem, 2.6vw, 2.2rem);
line-height: 1;
letter-spacing: -0.065em;
}

.finder-side__box p {
margin: 0;
color: var(--muted);
}

.finder-checklist {
display: grid;
gap: 10px;
margin-top: 22px;
}

.finder-checklist span {
display: flex;
align-items: center;
gap: 10px;
color: var(--clivyo-dark);
font-size: 14px;
font-weight: 500;
}

.finder-checklist span::before {
content: "✓";
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--clivyo-turquoise);
font-size: 13px;
font-weight: 500;
flex: 0 0 auto;
}

.finder-form {
padding: clamp(22px, 3.2vw, 38px);
border-radius: 36px;
background:
radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .10), transparent 34%),
#FFFFFF;
box-shadow:
0 22px 70px rgba(2, 49, 142, .07),
inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.finder-form__section {
display: grid;
gap: 16px;
margin-bottom: 18px;
}

.finder-form__section--intro {
grid-template-columns: minmax(0, 1fr) 190px;
align-items: center;
gap: 24px;
}

.finder-form__section h2 {
margin: 0 0 10px;
color: var(--clivyo-blue);
font-size: clamp(1.65rem, 3vw, 2.55rem);
line-height: 1;
letter-spacing: -0.065em;
}

.finder-form__section p {
margin: 0;
max-width: 660px;
color: var(--muted);
}

.finder-radar {
padding: 0;
justify-self: center;
}

.finder-radar #radarText {
max-width: 180px;
font-size: 13px;
}

.finder-fields {
display: grid;
gap: 18px;
margin-bottom: 20px;
}

.finder-fields--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finder-full {
margin-bottom: 18px;
}

.finder-results {
margin: 4px 0 28px;
}

.finder-consent {
margin: 8px 0 4px;
padding: 16px;
border-radius: 22px;
background: var(--soft);
}

.finder-consent span {
color: var(--clivyo-dark);
}

.finder-submit {
display: flex;
align-items: center;
gap: 18px;
margin-top: 10px;
padding-top: 22px;
border-top: 1px solid var(--line);
}

.finder-submit .btn {
flex: 0 0 auto;
}

.finder-submit p {
max-width: 520px;
margin: 0;
color: var(--muted);
font-size: 13px;
}

.finder-form select,
.finder-form input,
.finder-form textarea {
background: #FFFFFF;
}

.finder-form textarea {
min-height: 150px;
}

@media (max-width: 1100px) {
.finder-layout {
grid-template-columns: 1fr;
}


.finder-side {
    position: relative;
    top: auto;
}

.finder-side__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 320px);
    gap: 20px;
    align-items: start;
}

.finder-checklist {
    margin-top: 0;
}


}

@media (max-width: 820px) {
.finder-hero {
grid-template-columns: 1fr;
align-items: start;
}


.finder-hero__card {
    max-width: 520px;
}

.finder-form__section--intro {
    grid-template-columns: 1fr;
}

.finder-radar {
    justify-self: center;
}

.finder-fields--two {
    grid-template-columns: 1fr;
}

.finder-side__box {
    grid-template-columns: 1fr;
}


}

@media (max-width: 720px) {
.finder-hero {
padding: 24px;
border-radius: 28px;
margin-bottom: 22px;
}


.finder-hero h1 {
    font-size: clamp(2.25rem, 12vw, 3.45rem);
}

.finder-form,
.finder-side__box {
    border-radius: 26px;
    padding: 22px;
}

.finder-submit {
    display: grid;
    gap: 12px;
}

.finder-submit .btn {
    width: 100%;
}

.finder-radar .shazam-btn {
    width: 120px;
    height: 120px;
}

.finder-radar .scan-orb {
    width: 102px;
    height: 102px;
}


}

/* =========================================================
CLIVYO — Masquer les conseils latéraux sur petit écran
========================================================= */

@media (max-width: 1200px) {
.finder-hero {
display: none !important;
}


.finder-side {
    display: none !important;
}

.finder-layout {
    display: block !important;
}

.finder-form {
    width: 100% !important;
}

.finder-page {
    margin-top: 0 !important;
}


}



/* =========================================================
   CLIVYO — Page recommandation / Lead premium
   Version épurée + journal anti-triche à hauteur fixe
   À placer tout en bas de style.css
========================================================= */

/* ---------- Base locale ---------- */
.lead-page {
    --lead-blue: var(--clivyo-blue, #02318E);
    --lead-turquoise: var(--clivyo-turquoise, #03B3C3);
    --lead-dark: var(--clivyo-dark, #0F172A);
    --lead-muted: var(--muted, #64748B);
    --lead-line: var(--line, #E5ECF4);
    --lead-soft: var(--soft, #F6F9FC);
    --lead-blue-soft: var(--primary-soft, #EEF4FF);
    --lead-accent-soft: var(--accent-soft, #EAFBFC);
    --lead-success: var(--success, #12805C);
    --lead-success-bg: var(--success-bg, #EAF8F2);
    --lead-warning: var(--warning, #A15C00);
    --lead-warning-bg: var(--warning-bg, #FFF7E8);
    --lead-danger: var(--danger, #C9362B);
    --lead-danger-bg: var(--danger-bg, #FFF0EE);
    --lead-shadow: 0 18px 55px rgba(2, 49, 142, .065);

    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
    color: var(--lead-dark);
}

.lead-page *,
.lead-page *::before,
.lead-page *::after {
    box-sizing: border-box;
}

.lead-page [hidden] {
    display: none !important;
}

/* ---------- Statuts ---------- */
.lead-page .status,
.lead-page .status-paid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(2, 49, 142, .08);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--lead-blue);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

.lead-page .status::before,
.lead-page .status-paid::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
    flex: 0 0 auto;
}

.lead-page .status-new,
.lead-page .status-matched,
.lead-page .status-waiting,
.lead-page .status-waiting-consent {
    background: #FFF9EA;
    color: #9A6500;
}

.lead-page .status-accepted,
.lead-page .status-info {
    background: #EEF5FF;
    color: var(--lead-blue);
}

.lead-page .status-success,
.lead-page .status-paid {
    background: var(--lead-success-bg);
    color: var(--lead-success);
}

.lead-page .status-danger {
    background: var(--lead-danger-bg);
    color: var(--lead-danger);
}

.lead-page .status-disputed {
    background: #F5F0FF;
    color: #6941C6;
}

/* ---------- Retour ---------- */
.lead-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-bottom: 22px;
    color: var(--lead-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    transition: color .2s ease, transform .2s ease;
}

.lead-back::before {
    content: "←";
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--lead-line);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--lead-blue);
    box-shadow: 0 5px 16px rgba(2, 49, 142, .06);
}

.lead-back:hover {
    color: var(--lead-blue);
    transform: translateX(-2px);
}

/* Cache l'ancienne flèche textuelle présente dans le lien sans modifier le HTML. */
.lead-back {
    font-size: 0;
}

.lead-back::after {
    content: "Retour au tableau de bord";
    font-size: 14px;
}

/* ---------- Hero épuré ---------- */
.lead-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(26px, 5vw, 70px);
    margin-bottom: clamp(28px, 4vw, 46px);
    padding: clamp(8px, 1vw, 14px) 0 clamp(28px, 4vw, 42px);
    border-bottom: 1px solid var(--lead-line);
}

.lead-hero::after {
    content: "";
    position: absolute;
    right: 2%;
    bottom: -1px;
    width: min(280px, 35%);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--lead-turquoise));
}

.lead-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 0 11px;
    color: var(--lead-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.lead-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lead-turquoise);
    box-shadow: 0 0 0 5px rgba(3, 179, 195, .10);
}

.lead-hero h1 {
    max-width: 790px;
    margin: 0;
    color: var(--lead-blue);
    font-size: clamp(2.15rem, 4.6vw, 4.35rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.065em;
}

.lead-intro {
    max-width: 735px;
    margin: 17px 0 0;
    color: var(--lead-muted);
    font-size: clamp(.98rem, 1.2vw, 1.12rem);
    line-height: 1.65;
}

.lead-hero__status {
    display: grid;
    justify-items: end;
    gap: 11px;
    flex: 0 0 auto;
    padding-bottom: 4px;
}

.lead-hero__status small {
    color: var(--lead-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Structure ---------- */
.lead-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    gap: clamp(24px, 4vw, 52px);
    align-items: start;
}

.lead-main,
.lead-side {
    display: grid;
    gap: clamp(26px, 4vw, 42px);
    min-width: 0;
}

.lead-side {
    position: sticky;
    top: 92px;
}

/* ---------- Panneaux : moins de cartes ---------- */
.lead-panel {
    position: relative;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.lead-main > .lead-panel:not(:last-child) {
    padding-bottom: clamp(28px, 4vw, 44px);
    border-bottom: 1px solid var(--lead-line);
}

.lead-side > .lead-panel {
    padding: clamp(22px, 2.5vw, 30px);
    border: 1px solid rgba(2, 49, 142, .08);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 14px 38px rgba(2, 49, 142, .055);
    overflow: hidden;
}

.lead-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 21px;
}

.lead-panel h2 {
    margin: 0;
    color: var(--lead-blue);
    font-size: clamp(1.45rem, 2.3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.lead-side .lead-panel h2 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.lead-panel h3 {
    margin: 0 0 10px;
    color: var(--lead-blue);
    font-size: 1.05rem;
    line-height: 1.3;
}

.lead-panel p {
    color: var(--lead-muted);
    line-height: 1.62;
}

.lead-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid rgba(2, 49, 142, .08);
    border-radius: 999px;
    background: var(--lead-blue-soft);
    color: var(--lead-blue);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

/* ---------- Détails du besoin : lignes + icônes ---------- */
.lead-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--lead-line);
    border-bottom: 1px solid var(--lead-line);
}

.lead-info-grid > div {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";
    align-items: center;
    column-gap: 13px;
    row-gap: 3px;
    min-width: 0;
    padding: 19px 18px 19px 0;
}

.lead-info-grid > div:nth-child(odd) {
    padding-right: 24px;
    border-right: 1px solid var(--lead-line);
}

.lead-info-grid > div:nth-child(even) {
    padding-left: 24px;
}

.lead-info-grid > div:nth-child(n + 3) {
    border-top: 1px solid var(--lead-line);
}

.lead-info-grid > div::before {
    grid-area: icon;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--lead-blue-soft);
    color: var(--lead-blue);
    font-size: 16px;
    font-weight: 800;
}

.lead-info-grid > div:nth-child(1)::before { content: "▦"; }
.lead-info-grid > div:nth-child(2)::before { content: "⌖"; }
.lead-info-grid > div:nth-child(3)::before { content: "€"; }
.lead-info-grid > div:nth-child(4)::before { content: "⌂"; }
.lead-info-grid > div:nth-child(5)::before { content: "◷"; }
.lead-info-grid > div:nth-child(6)::before { content: "%"; }

.lead-info-grid span,
.lead-contact-list span,
.lead-commission-box span {
    color: var(--lead-muted);
    font-size: 12px;
    font-weight: 650;
}

.lead-info-grid span {
    grid-area: label;
}

.lead-info-grid strong {
    grid-area: value;
}

.lead-info-grid strong,
.lead-contact-list strong,
.lead-commission-box strong {
    min-width: 0;
    color: var(--lead-dark);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------- Description ---------- */
.lead-description {
    position: relative;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--lead-turquoise);
    background: transparent;
    color: var(--lead-dark);
    font-size: 15px;
    line-height: 1.78;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------- Contact ---------- */
.lead-contact-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .10), transparent 34%),
        #FFFFFF !important;
}

.lead-protected,
.lead-unlocked {
    position: relative;
    margin-bottom: 18px;
    padding: 15px 16px 15px 48px;
    border-radius: 17px;
}

.lead-protected::before,
.lead-unlocked::before {
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
}

.lead-protected {
    background: var(--lead-warning-bg);
}

.lead-protected::before {
    content: "!";
    background: #FFFFFF;
    color: var(--lead-warning);
}

.lead-unlocked {
    background: var(--lead-success-bg);
}

.lead-unlocked::before {
    content: "✓";
    background: #FFFFFF;
    color: var(--lead-success);
}

.lead-protected strong { color: var(--lead-warning); }
.lead-unlocked strong { color: var(--lead-success); }

.lead-protected p,
.lead-unlocked p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.55;
}

.lead-contact-list,
.lead-commission-box {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--lead-line);
}

.lead-contact-list > div,
.lead-commission-box > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--lead-line);
    background: transparent;
}

.lead-contact-list strong,
.lead-commission-box strong {
    max-width: 215px;
    text-align: right;
}

/* ---------- Action entreprise ---------- */
.lead-action-panel {
    border-color: rgba(3, 179, 195, .22) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .13), transparent 34%),
        linear-gradient(145deg, #F8FCFF, #FFFFFF 62%) !important;
}

.lead-action-panel > p:not(.lead-eyebrow):first-of-type {
    margin-top: 13px;
}

.lead-action-panel form {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.lead-page .form label {
    display: grid;
    gap: 8px;
    color: var(--lead-dark);
    font-size: 13px;
    font-weight: 700;
}

.lead-page .form input[type="text"],
.lead-page .form input[type="email"],
.lead-page .form input[type="number"],
.lead-page .form input[type="file"],
.lead-page .form input:not([type]),
.lead-page .stripe-card-field {
    width: 100%;
    min-height: 50px;
    padding: 14px 15px;
    border: 1px solid #D9E3EF;
    border-radius: 14px;
    outline: 0;
    background: #FFFFFF;
    color: var(--lead-dark);
    font: inherit;
    box-shadow: 0 1px 0 rgba(2, 49, 142, .02);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.lead-page .form input:focus,
.lead-page .stripe-card-field:focus-within {
    border-color: var(--lead-turquoise);
    box-shadow: 0 0 0 4px rgba(3, 179, 195, .12);
}

.lead-page .form input[type="file"] {
    padding: 10px;
    color: var(--lead-muted);
}

.lead-page .form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: var(--lead-blue-soft);
    color: var(--lead-blue);
    font-weight: 750;
    cursor: pointer;
}

.lead-check {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start;
    gap: 12px !important;
    padding: 15px !important;
    border: 1px solid rgba(2, 49, 142, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
}

.lead-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--lead-turquoise);
    flex: 0 0 auto;
}

.lead-check span {
    color: var(--lead-dark);
    font-size: 13px;
    font-weight: 550;
    line-height: 1.55;
}

.lead-note {
    position: relative;
    margin: 15px 0 0;
    padding: 12px 14px 12px 39px;
    border-radius: 14px;
    background: var(--lead-warning-bg);
    color: var(--lead-warning) !important;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.55 !important;
}

.lead-note::before {
    content: "i";
    position: absolute;
    left: 14px;
    top: 12px;
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
}

.lead-quote-box {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--lead-line);
}

.lead-quote-box > p {
    margin: 8px 0 0;
    font-size: 13px;
}

/* ---------- Boutons ---------- */
.lead-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 17px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}

.lead-page .btn.primary {
    border: 1px solid var(--lead-blue);
    background: var(--lead-blue);
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(2, 49, 142, .18);
}

.lead-page .btn.primary::after {
    content: "→";
    font-size: 15px;
}

.lead-page .btn.secondary {
    border: 1px solid var(--lead-line);
    background: #FFFFFF;
    color: var(--lead-blue);
}

.lead-page .btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.lead-page .btn.primary:hover:not(:disabled) {
    box-shadow: 0 14px 30px rgba(2, 49, 142, .24);
}

.lead-page .btn:disabled,
.lead-page button:disabled {
    cursor: not-allowed;
    opacity: .52;
    transform: none !important;
    box-shadow: none !important;
}

/* ---------- Bloc protection ---------- */
.lead-security-panel {
    border: 0 !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .30), transparent 45%),
        linear-gradient(145deg, var(--lead-blue), #021F5C) !important;
    box-shadow: 0 18px 38px rgba(2, 49, 142, .16) !important;
}

.lead-security-panel .lead-eyebrow,
.lead-security-panel h2,
.lead-security-panel .lead-security-list span {
    color: #FFFFFF;
}

.lead-security-panel .lead-eyebrow::before {
    background: var(--lead-turquoise);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .10);
}

.lead-security-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.lead-security-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--lead-dark);
    font-size: 13px;
    font-weight: 650;
}

.lead-security-list span::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lead-accent-soft);
    color: var(--lead-turquoise);
    font-size: 12px;
    font-weight: 900;
    flex: 0 0 auto;
}

.lead-security-panel .lead-security-list span::before {
    background: rgba(255, 255, 255, .13);
    color: #FFFFFF;
}

/* ---------- Journal anti-triche ---------- */
.lead-timeline-panel {
    min-width: 0;
}

.lead-timeline-scroll {
    position: relative;
    height: 430px;
    min-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 2px 18px 14px 2px;
    border-top: 1px solid var(--lead-line);
    border-bottom: 1px solid var(--lead-line);
    scroll-behavior: smooth;
}

.lead-timeline-scroll::before,
.lead-timeline-scroll::after {
    content: "";
    position: sticky;
    left: 0;
    z-index: 4;
    display: block;
    height: 14px;
    pointer-events: none;
}

.lead-timeline-scroll::before {
    top: 0;
    margin-bottom: -14px;
    background: linear-gradient(#FFFFFF, rgba(255,255,255,0));
}

.lead-timeline-scroll::after {
    bottom: 0;
    margin-top: -14px;
    background: linear-gradient(rgba(255,255,255,0), #FFFFFF);
}

.lead-timeline-scroll::-webkit-scrollbar {
    width: 9px;
}

.lead-timeline-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.lead-timeline-scroll::-webkit-scrollbar-thumb {
    border: 3px solid #FFFFFF;
    border-radius: 999px;
    background: rgba(2, 49, 142, .22);
}

.lead-timeline-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(2, 49, 142, .38);
}

.lead-timeline-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(2, 49, 142, .28) transparent;
}

.lead-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 18px 0 4px;
    list-style: none;
}

.lead-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    min-width: 0;
    padding: 0 0 22px;
}

.lead-timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 35px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(var(--lead-turquoise), var(--lead-line));
}

.lead-timeline__dot {
    position: relative;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(3, 179, 195, .18);
    border-radius: 13px;
    background: var(--lead-accent-soft);
    color: var(--lead-turquoise);
    box-shadow: none;
    margin: 0;
}

.lead-timeline__dot::before {
    content: "✓";
    font-size: 13px;
    font-weight: 900;
}

.lead-timeline li > div {
    min-width: 0;
    padding: 3px 0 0;
}

.lead-timeline strong {
    display: block;
    color: var(--lead-dark);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.lead-timeline p {
    margin: 5px 0 0;
    color: var(--lead-muted);
    font-size: 12px;
    line-height: 1.45;
}

.lead-timeline-loader,
.lead-timeline-end,
.lead-timeline-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px;
    color: var(--lead-muted);
    font-size: 12px;
    font-weight: 650;
    text-align: center;
}

.lead-timeline-loader__spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(2, 49, 142, .14);
    border-top-color: var(--lead-turquoise);
    border-radius: 50%;
    animation: leadTimelineSpin .7s linear infinite;
}

.lead-timeline-error {
    color: var(--lead-danger);
}

.lead-timeline-sentinel {
    width: 100%;
    height: 1px;
}

@keyframes leadTimelineSpin {
    to { transform: rotate(360deg); }
}

/* ---------- État vide ---------- */
.lead-empty {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: 24px;
    border: 1px dashed rgba(2, 49, 142, .16);
    border-radius: 18px;
    background: linear-gradient(145deg, #FAFCFF, #FFFFFF);
    color: var(--lead-muted);
    font-size: 13px;
    text-align: center;
}

/* ---------- Messages Stripe ---------- */
.lead-page .payout-form-message {
    min-height: 20px;
    margin: 0;
    font-size: 12px;
    font-weight: 650;
}

.lead-page .payout-form-message.is-loading { color: var(--lead-blue); }
.lead-page .payout-form-message.is-success { color: var(--lead-success); }
.lead-page .payout-form-message.is-error { color: var(--lead-danger); }

/* ---------- Focus clavier ---------- */
.lead-page a:focus-visible,
.lead-page button:focus-visible,
.lead-page input:focus-visible,
.lead-timeline-scroll:focus-visible {
    outline: 3px solid rgba(3, 179, 195, .25);
    outline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .lead-layout {
        grid-template-columns: 1fr;
    }

    .lead-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .lead-side > .lead-action-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .lead-page {
        width: min(100% - 28px, 1220px);
    }

    .lead-hero {
        display: grid;
        align-items: start;
        gap: 22px;
        padding-bottom: 28px;
    }

    .lead-hero h1 {
        font-size: clamp(2.25rem, 12vw, 3.65rem);
    }

    .lead-hero__status {
        justify-items: start;
    }

    .lead-layout,
    .lead-main,
    .lead-side {
        gap: 28px;
    }

    .lead-side {
        grid-template-columns: 1fr;
    }

    .lead-main > .lead-panel:not(:last-child) {
        padding-bottom: 30px;
    }

    .lead-panel__head {
        align-items: center;
    }

    .lead-info-grid {
        grid-template-columns: 1fr;
    }

    .lead-info-grid > div,
    .lead-info-grid > div:nth-child(odd),
    .lead-info-grid > div:nth-child(even) {
        padding: 16px 0;
        border-right: 0;
    }

    .lead-info-grid > div:nth-child(n + 2) {
        border-top: 1px solid var(--lead-line);
    }

    .lead-contact-list strong,
    .lead-commission-box strong {
        max-width: 58%;
    }

    .lead-timeline-scroll {
        height: 370px;
        padding-right: 10px;
    }

    .lead-page .btn,
    .lead-action-panel form,
    .lead-action-panel .btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .lead-panel__head {
        display: grid;
        align-items: start;
    }

    .lead-side > .lead-panel {
        padding: 20px;
        border-radius: 21px;
    }

    .lead-contact-list > div,
    .lead-commission-box > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .lead-contact-list strong,
    .lead-commission-box strong {
        max-width: 100%;
        text-align: left;
    }

    .lead-timeline-scroll {
        height: 350px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lead-page *,
    .lead-page *::before,
    .lead-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}




/* =========================================================
CLIVYO — Auth premium UX
À placer tout en bas de style.css
========================================================= */

.auth-page {
width: var(--content);
max-width: 1180px;
margin: 0 auto;
}

.auth-shell {
display: grid;
grid-template-columns: minmax(320px, .82fr) minmax(0, 1fr);
gap: clamp(24px, 4vw, 54px);
align-items: start;
padding: clamp(22px, 4vw, 44px);
border-radius: 38px;
background:
radial-gradient(circle at 8% 8%, rgba(3, 179, 195, .16), transparent 32%),
linear-gradient(135deg, #F6FBFF 0%, #FFFFFF 62%);
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.auth-shell--login {
align-items: center;
min-height: min(660px, calc(100vh - 170px));
}

.auth-visual {
position: sticky;
top: 110px;
padding: clamp(10px, 2vw, 22px);
}

.auth-eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
margin: 0 0 14px;
padding: 7px 12px;
border-radius: 999px;
background: var(--primary-soft);
color: var(--clivyo-blue);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.02em;
}

.auth-visual h1 {
max-width: 760px;
margin: 0;
color: var(--clivyo-blue);
font-size: clamp(2rem, 4.2vw, 3.85rem);
line-height: 1.04;
letter-spacing: -0.055em;
}

.auth-visual p {
max-width: 520px;
margin: 18px 0 0;
color: var(--muted);
font-size: clamp(1rem, 1.2vw, 1.16rem);
line-height: 1.6;
}

.auth-benefits {
display: grid;
gap: 11px;
margin-top: 26px;
}

.auth-benefits span {
display: flex;
align-items: center;
gap: 10px;
color: var(--clivyo-dark);
font-size: 14px;
font-weight: 500;
}

.auth-benefits span::before {
content: "✓";
display: inline-grid;
place-items: center;
width: 23px;
height: 23px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--clivyo-turquoise);
font-size: 13px;
font-weight: 500;
flex: 0 0 auto;
}

.auth-card {
padding: clamp(24px, 3vw, 38px);
border-radius: 34px;
background: #FFFFFF;
box-shadow:
0 22px 70px rgba(2, 49, 142, .08),
inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.auth-card--wide {
max-width: 760px;
justify-self: end;
width: 100%;
}

.auth-card__head {
margin-bottom: 22px;
}

.auth-card__head h2 {
margin: 0;
color: var(--clivyo-blue);
font-size: clamp(1.9rem, 3vw, 2.85rem);
line-height: 1;
letter-spacing: -0.07em;
}

.auth-card__head p {
max-width: 620px;
margin: 12px 0 0;
color: var(--muted);
}

.auth-form {
gap: 18px;
}

.auth-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

.auth-full {
grid-column: 1 / -1;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
background: #FFFFFF;
}

.auth-form textarea {
min-height: 120px;
}

.auth-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 24px;
padding: 6px;
border-radius: 999px;
background: var(--soft);
}

.auth-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 14px;
border-radius: 999px;
color: var(--muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
text-align: center;
}

.auth-tabs a.active {
background: #FFFFFF;
color: var(--clivyo-blue);
box-shadow: 0 8px 20px rgba(2, 49, 142, .08);
}

.auth-section {
padding: clamp(18px, 2.4vw, 24px);
border-radius: 26px;
background: var(--soft);
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .06);
}

.auth-section + .auth-section {
margin-top: 4px;
}

.auth-section__head {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 18px;
}

.auth-section__head > span {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: var(--clivyo-blue);
color: #FFFFFF;
font-size: 13px;
font-weight: 500;
flex: 0 0 auto;
}

.auth-section__head h3 {
margin: 0 0 4px;
color: var(--clivyo-blue);
font-size: 1.22rem;
letter-spacing: -0.045em;
}

.auth-section__head p {
margin: 0;
color: var(--muted);
font-size: 14px;
}

.auth-fieldset {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
margin: 0;
padding: 0;
border: 0;
}

.auth-fieldset .check {
padding: 12px 13px;
border-radius: 18px;
background: #FFFFFF;
}

.auth-fieldset .check span {
color: var(--clivyo-dark);
}

.auth-consent {
margin-top: 18px;
padding: 16px;
border-radius: 20px;
background: #FFFFFF;
}

.auth-consent span {
color: var(--clivyo-dark);
}

.auth-switch {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 14px;
}

.auth-switch a {
color: var(--clivyo-blue);
text-decoration: none;
font-weight: 500;
}

.auth-switch a:hover {
text-decoration: underline;
}

.auth-card .btn.primary {
width: 100%;
}

.auth-page .address-suggestions {
grid-column: 1 / -1;
margin: -8px 0 2px;
}

@media (max-width: 980px) {
.auth-shell {
grid-template-columns: 1fr;
}


.auth-visual {
    position: relative;
    top: auto;
    padding: 0;
}

.auth-card--wide {
    max-width: none;
    justify-self: stretch;
}


}

@media (max-width: 720px) {
.auth-shell {
padding: 22px;
border-radius: 28px;
gap: 24px;
}


.auth-visual h1 {
    font-size: clamp(2.25rem, 12vw, 3.4rem);
}

.auth-card {
    padding: 22px;
    border-radius: 26px;
}

.auth-grid,
.auth-fieldset {
    grid-template-columns: 1fr;
}

.auth-tabs {
    grid-template-columns: 1fr;
    border-radius: 24px;
}

.auth-tabs a {
    border-radius: 18px;
}

.auth-section {
    padding: 18px;
    border-radius: 22px;
}

.auth-switch {
    display: grid;
    gap: 10px;
}


}


/* =========================================================
CLIVYO — Page confirmation client premium UX
À placer tout en bas de style.css
========================================================= */

.client-confirm-page {
width: var(--content);
max-width: 1180px;
margin: 0 auto;
}

.client-confirm-hero {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(22px, 4vw, 54px);
margin-bottom: clamp(24px, 4vw, 42px);
padding: clamp(24px, 4vw, 44px);
border-radius: 38px;
background:
radial-gradient(circle at 88% 8%, rgba(3, 179, 195, .18), transparent 34%),
linear-gradient(135deg, #F6FBFF 0%, #FFFFFF 62%);
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.client-confirm-eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
margin: 0 0 12px;
padding: 7px 12px;
border-radius: 999px;
background: var(--primary-soft);
color: var(--clivyo-blue);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.02em;
}

.client-confirm-hero h1 {
margin: 0;
max-width: 820px;
color: var(--clivyo-blue);
font-size: clamp(2.3rem, 5vw, 4.6rem);
line-height: .96;
letter-spacing: -0.075em;
}

.client-confirm-lead {
max-width: 720px;
margin: 16px 0 0;
color: var(--muted);
font-size: clamp(1rem, 1.25vw, 1.18rem);
line-height: 1.55;
}

.client-confirm-status {
display: grid;
justify-items: end;
gap: 10px;
flex: 0 0 auto;
}

.client-confirm-status small {
color: var(--muted);
font-size: 13px;
}

.client-confirm-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 8px 13px;
border-radius: 999px;
background: var(--warning-bg);
color: var(--warning);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}

.client-confirm-badge.success {
background: var(--success-bg);
color: var(--success);
}

.client-confirm-layout {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
gap: clamp(20px, 3vw, 30px);
align-items: start;
}

.client-confirm-main,
.client-confirm-side {
display: grid;
gap: clamp(18px, 2.5vw, 24px);
}

.client-confirm-side {
position: sticky;
top: 100px;
}

.client-confirm-panel {
padding: clamp(22px, 3vw, 34px);
border-radius: 32px;
background: #FFFFFF;
box-shadow:
0 18px 55px rgba(2, 49, 142, .07),
inset 0 0 0 1px rgba(2, 49, 142, .07);
}

.client-confirm-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
}

.client-confirm-panel h2 {
margin: 0;
color: var(--clivyo-blue);
font-size: clamp(1.55rem, 2.8vw, 2.45rem);
line-height: 1;
letter-spacing: -0.065em;
}

.client-confirm-panel p {
color: var(--muted);
}

.client-confirm-text {
max-width: 720px;
margin-bottom: 18px;
}

.client-confirm-info {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.client-confirm-info div,
.client-confirm-email-box {
display: grid;
gap: 5px;
padding: 15px;
border-radius: 20px;
background: var(--soft);
}

.client-confirm-info span,
.client-confirm-email-box span {
color: var(--muted);
font-size: 13px;
font-weight: 500;
}

.client-confirm-info strong,
.client-confirm-email-box strong {
color: var(--clivyo-dark);
font-size: 15px;
overflow-wrap: anywhere;
}

.client-confirm-email-box {
margin-bottom: 18px;
}

.client-confirm-form {
margin-top: 8px;
}

.client-confirm-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

.client-confirm-full {
grid-column: 1 / -1;
}

.client-confirm-check {
margin-top: 6px;
padding: 16px;
border-radius: 22px;
background: var(--soft);
}

.client-confirm-check span {
color: var(--clivyo-dark);
}

.client-confirm-warning {
background:
radial-gradient(circle at 100% 0%, rgba(242, 201, 76, .16), transparent 35%),
#FFFFFF;
}

.client-confirm-warning h2 {
color: var(--warning);
}

.client-confirm-security {
background:
radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .14), transparent 36%),
var(--soft);
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .07);
}

.client-confirm-checklist {
display: grid;
gap: 10px;
margin-top: 18px;
}

.client-confirm-checklist span {
display: flex;
align-items: center;
gap: 10px;
color: var(--clivyo-dark);
font-size: 14px;
font-weight: 500;
}

.client-confirm-checklist span::before {
content: "✓";
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--clivyo-turquoise);
font-size: 13px;
font-weight: 500;
flex: 0 0 auto;
}

.client-confirm-success {
text-align: center;
background:
radial-gradient(circle at 50% 0%, rgba(6, 118, 71, .14), transparent 35%),
#FFFFFF;
}

.client-confirm-success-icon {
display: inline-grid;
place-items: center;
width: 56px;
height: 56px;
margin-bottom: 18px;
border-radius: 999px;
background: var(--success-bg);
color: var(--success);
font-size: 26px;
font-weight: 500;
}

.client-confirm-success p {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}

@media (max-width: 1100px) {
.client-confirm-layout {
grid-template-columns: 1fr;
}


.client-confirm-side {
    position: relative;
    top: auto;
}


}

@media (max-width: 720px) {
.client-confirm-hero {
display: grid;
align-items: start;
padding: 24px;
border-radius: 28px;
}


.client-confirm-hero h1 {
    font-size: clamp(2.25rem, 12vw, 3.4rem);
}

.client-confirm-status {
    justify-items: start;
}

.client-confirm-panel {
    border-radius: 26px;
    padding: 22px;
}

.client-confirm-panel__head {
    display: grid;
    align-items: start;
}

.client-confirm-info,
.client-confirm-grid {
    grid-template-columns: 1fr;
}

.client-confirm-form .btn {
    width: 100%;
}


}


/* =========================================================
CLIVYO — Recherche intelligente secteurs / inscription
À ajouter tout en bas de style.css
========================================================= */

.auth-sector-search {
margin-bottom: 16px;
}

.auth-sector-groups,
.sector-groups {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 14px 0 18px;
}

.auth-sector-group-btn,
.sector-group-btn {
border: 0;
border-radius: 999px;
padding: 10px 14px;
background: var(--soft);
color: var(--muted);
font-weight: 500;
font-size: 13px;
cursor: pointer;
transition: background .16s ease, color .16s ease, transform .14s ease;
}

.auth-sector-group-btn:hover,
.sector-group-btn:hover {
transform: translateY(-1px);
background: var(--primary-soft);
color: var(--clivyo-blue);
}

.auth-sector-group-btn.is-active,
.sector-group-btn.is-active {
background: var(--clivyo-blue);
color: #FFFFFF;
}

.auth-sector-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
border: 0;
padding: 0;
margin: 0;
}

.auth-sector-card {
position: relative;
display: grid !important;
gap: 7px !important;
align-content: start;
padding: 16px 16px 16px 46px;
border-radius: 22px;
background: #FFFFFF;
box-shadow:
inset 0 0 0 1px rgba(2, 49, 142, .08),
0 8px 24px rgba(2, 49, 142, .045);
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.auth-sector-card:hover {
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px rgba(3, 179, 195, .34),
0 12px 30px rgba(2, 49, 142, .075);
}

.auth-sector-card input {
position: absolute;
left: 16px;
top: 18px;
width: 18px;
height: 18px;
min-height: 18px;
margin: 0;
accent-color: var(--clivyo-turquoise);
}

.auth-sector-card:has(input:checked) {
background: #EAFBFD;
box-shadow:
inset 0 0 0 2px rgba(3, 179, 195, .36),
0 12px 30px rgba(2, 49, 142, .075);
}

.auth-sector-card span {
color: var(--muted);
font-size: 12px;
font-weight: 500;
}

.auth-sector-card strong {
color: var(--clivyo-blue);
font-size: 15px;
line-height: 1.2;
}

.auth-sector-card small {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}

.auth-sector-card em,
.sector-choice-card em,
.match-badges em {
display: inline-flex;
width: fit-content;
align-items: center;
justify-content: center;
margin-top: 4px;
padding: 5px 9px;
border-radius: 999px;
font-size: 11px;
font-style: normal;
font-weight: 600;
}

.auth-sector-card em.success,
.sector-choice-card em.success {
background: var(--success-bg);
color: var(--success);
}

.auth-sector-card em.medium,
.sector-choice-card em.medium {
background: var(--primary-soft);
color: var(--clivyo-blue);
}

.auth-sector-card em.warning,
.sector-choice-card em.warning {
background: var(--warning-bg);
color: var(--warning);
}

.auth-sector-note {
margin: 14px 0 0;
padding: 13px 15px;
border-radius: 18px;
background: var(--warning-bg);
color: var(--warning);
font-size: 13px;
}

.finder-smart-search {
grid-column: 1 / -1;
display: grid;
gap: 14px;
margin-bottom: 8px;
}

.sector-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
max-height: 460px;
overflow: auto;
padding-right: 4px;
}

.sector-choice-card {
border: 0;
text-align: left;
display: grid;
gap: 7px;
padding: 17px;
border-radius: 22px;
background: #FFFFFF;
cursor: pointer;
box-shadow:
inset 0 0 0 1px rgba(2, 49, 142, .08),
0 8px 24px rgba(2, 49, 142, .045);
transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.sector-choice-card:hover {
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px rgba(3, 179, 195, .34),
0 12px 30px rgba(2, 49, 142, .075);
}

.sector-choice-card.is-selected {
background: #EAFBFD;
box-shadow:
inset 0 0 0 2px rgba(3, 179, 195, .36),
0 12px 30px rgba(2, 49, 142, .075);
}

.sector-choice-card span {
color: var(--muted);
font-size: 12px;
font-weight: 500;
}

.sector-choice-card strong {
color: var(--clivyo-blue);
font-size: 15px;
line-height: 1.2;
}

.sector-choice-card small {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}

.sector-notice {
display: grid;
gap: 10px;
}

.sector-notice-card {
padding: 15px 16px;
border-radius: 20px;
background: var(--soft);
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.sector-notice-card strong {
display: block;
color: var(--clivyo-blue);
margin-bottom: 6px;
}

.sector-notice-card span {
display: inline-flex;
width: fit-content;
margin-bottom: 8px;
padding: 5px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}

.sector-notice-card.success span {
background: var(--success-bg);
color: var(--success);
}

.sector-notice-card.medium span {
background: var(--primary-soft);
color: var(--clivyo-blue);
}

.sector-notice-card.warning span,
.sector-notice-card.danger span {
background: var(--warning-bg);
color: var(--warning);
}

.sector-notice-card p {
margin: 0;
color: var(--muted);
font-size: 13px;
}

.match-results-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
}

.match-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}

.match-badges em {
margin: 0;
background: var(--primary-soft);
color: var(--clivyo-blue);
}

.match-badges .muted-badge {
background: var(--soft);
color: var(--muted);
}

@media (max-width: 860px) {
.auth-sector-grid,
.sector-choice-grid {
grid-template-columns: 1fr;
max-height: none;
}


.auth-sector-card,
.sector-choice-card {
    border-radius: 18px;
}


}


/* =========================================================
CLIVYO — Correction filtre secteurs + état vide
========================================================= */

.sector-choice-card.is-hidden,
.auth-sector-card.is-hidden {
display: none !important;
}

.sector-empty-state {
margin-top: 14px;
padding: 18px;
border-radius: 24px;
background:
radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .12), transparent 38%),
var(--soft);
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.sector-empty-state strong {
display: block;
color: var(--clivyo-blue);
font-size: 16px;
margin-bottom: 6px;
}

.sector-empty-state p {
margin: 0;
color: var(--muted);
font-size: 14px;
}

.sector-empty-suggestions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 14px;
}

.sector-empty-suggestions span {
color: var(--muted);
font-size: 13px;
font-weight: 500;
}

.sector-empty-suggestions button {
border: 0;
border-radius: 999px;
padding: 8px 11px;
background: #FFFFFF;
color: var(--clivyo-blue);
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .10);
}

.sector-empty-suggestions button:hover {
background: var(--primary-soft);
}

/* =========================================================
CLIVYO — Mise en avant des entreprises trouvées
========================================================= */

.finder-results.results-highlight {
animation: clivyoResultsFocus 1.4s ease both;
}

@keyframes clivyoResultsFocus {
0% {
box-shadow: 0 0 0 0 rgba(3, 179, 195, .35);
}


45% {
    box-shadow: 0 0 0 8px rgba(3, 179, 195, .12);
}

100% {
    box-shadow: 0 0 0 0 rgba(3, 179, 195, 0);
}


}


.payout-native-panel {
    margin-top: 16px;
    padding: 20px;
    border-radius: 26px;
    background: #FFFFFF;
    box-shadow:
        0 14px 34px rgba(2, 49, 142, .06),
        inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.payout-native-panel h3 {
    margin: 0 0 16px;
    color: var(--clivyo-blue);
    font-size: 1.05rem;
}

.stripe-card-field {
    width: 100%;
    min-height: 52px;
    padding: 16px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #dce8e5;
}

.payout-form-message {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.payout-form-message.is-loading {
    color: var(--muted);
}

.payout-form-message.is-success {
    color: var(--success);
}

.payout-form-message.is-error {
    color: var(--danger);
}

/* =========================================================
CLIVYO — Retrait en cours
========================================================= */

.dash-money-box--pending {
margin-top: 14px;
background:
radial-gradient(circle at 100% 0%, rgba(255, 184, 77, .18), transparent 38%),
#FFF7E8 !important;
box-shadow: inset 0 0 0 1px rgba(180, 83, 9, .12) !important;
}

.dash-money-box--pending span,
.dash-money-box--pending small {
color: #92400E !important;
}

.dash-money-box--pending strong {
color: #B45309 !important;
}


/* =========================================================
CLIVYO — Icônes modification méthodes de retrait
========================================================= */

.dash-info-row--action {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
}

.dash-info-value-action {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
min-width: 0 !important;
}

.dash-info-value-action strong {
min-width: 0 !important;
word-break: break-word !important;
}

.dash-edit-payout-btn {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border: 0 !important;
border-radius: 999px !important;
display: inline-grid !important;
place-items: center !important;
background: var(--primary-soft) !important;
color: var(--clivyo-blue) !important;
cursor: pointer !important;
font-size: 15px !important;
font-weight: 700 !important;
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .10) !important;
transition: transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.dash-edit-payout-btn:hover {
transform: translateY(-1px) !important;
background: #FFFFFF !important;
box-shadow:
0 10px 22px rgba(2, 49, 142, .10),
inset 0 0 0 1px rgba(3, 179, 195, .28) !important;
}

.dash-edit-payout-btn:focus-visible {
outline: 3px solid rgba(3, 179, 195, .25) !important;
outline-offset: 2px !important;
}

@media (max-width: 720px) {
.dash-info-row--action {
align-items: flex-start !important;
}


.dash-info-value-action {
    justify-content: flex-end !important;
}


}


/* =========================================================
CLIVYO — Page validation identité retrait
========================================================= */

.payout-identity-page {
width: var(--content);
max-width: 920px;
margin: 0 auto;
}

.payout-identity-hero {
margin-bottom: 22px;
padding: clamp(24px, 4vw, 42px);
border-radius: 34px;
background:
radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .16), transparent 36%),
#FFFFFF;
box-shadow:
0 18px 55px rgba(2, 49, 142, .06),
inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.payout-identity-hero h1 {
margin: 0;
color: var(--clivyo-blue);
font-size: clamp(2rem, 4vw, 3.45rem);
line-height: 1;
letter-spacing: -0.065em;
}

.payout-identity-hero p {
max-width: 680px;
margin: 14px 0 0;
color: var(--muted);
}

.payout-identity-card,
.payout-identity-success {
padding: clamp(22px, 3vw, 34px);
border-radius: 30px;
background: #FFFFFF;
box-shadow:
0 22px 70px rgba(2, 49, 142, .07),
inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.payout-identity-card h2,
.payout-identity-success h2 {
margin: 0 0 10px;
color: var(--clivyo-blue);
}

.payout-identity-card > p,
.payout-identity-success p {
margin: 0 0 20px;
color: var(--muted);
}

.payout-identity-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.payout-identity-grid label {
display: grid;
gap: 8px;
color: var(--clivyo-dark);
font-size: 14px;
font-weight: 600;
}

.payout-terms-check {
display: flex;
gap: 10px;
margin: 18px 0;
color: var(--muted);
font-size: 14px;
}

.payout-identity-callout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin: 16px 0;
padding: 18px;
border-radius: 24px;
background:
radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .12), transparent 38%),
var(--soft);
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.payout-identity-callout strong {
display: block;
color: var(--clivyo-blue);
margin-bottom: 4px;
}

.payout-identity-callout p {
margin: 0;
color: var(--muted);
font-size: 14px;
}

.payout-identity-callout--success {
background:
radial-gradient(circle at 100% 0%, rgba(34, 197, 94, .12), transparent 38%),
#F0FDF4;
}

@media (max-width: 720px) {
.payout-identity-grid {
grid-template-columns: 1fr;
}


.payout-identity-callout {
    align-items: stretch;
    flex-direction: column;
}

.payout-identity-callout .btn {
    width: 100%;
}


}

/* =========================================================
CLIVYO — Affichage contrôlé des configurations retrait
========================================================= */

#payoutStripeConfigBox[hidden],
#paypalConfigBox[hidden] {
display: none !important;
}

.dash-edit-payout-btn.is-active {
background: var(--clivyo-blue) !important;
color: #FFFFFF !important;
box-shadow:
0 10px 22px rgba(2, 49, 142, .16),
inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
}



/* =========================================================
   CLIVYO MATCH V1 — À AJOUTER À LA FIN DE /assets/css/style.css
   ========================================================= */

.clivyo-match-page {
    --clivyo-blue: #02318E;
    --clivyo-turquoise: #03B3C3;
    --clivyo-dark: #0F172A;
    --clivyo-muted: #536B8A;
    --clivyo-soft: #F4F9FC;
}

.clivyo-match-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 28px;
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(3, 179, 195, 0.18), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f4f9fc 100%);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(2, 49, 142, 0.08);
}

.clivyo-match-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: var(--clivyo-dark);
}

.clivyo-match-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.clivyo-match-examples button,
.quick-need-card,
.smart-suggestion-card {
    appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.clivyo-match-examples button {
    padding: 10px 13px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--clivyo-blue);
    border: 1px solid rgba(2, 49, 142, 0.10);
    box-shadow: 0 10px 24px rgba(2, 49, 142, 0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.clivyo-match-examples button:hover {
    transform: translateY(-1px);
    border-color: rgba(3, 179, 195, 0.45);
    box-shadow: 0 14px 30px rgba(2, 49, 142, 0.10);
}

.clivyo-match-promise {
    display: grid;
    gap: 10px;
    padding: 22px;
    border-radius: 24px;
    color: #ffffff;
    background:
        radial-gradient(circle at top right, rgba(3, 179, 195, 0.45), transparent 35%),
        linear-gradient(145deg, #02318E, #071D54);
    box-shadow: 0 22px 50px rgba(2, 49, 142, 0.25);
}

.clivyo-match-promise strong {
    font-size: 18px;
}

.clivyo-match-promise span {
    display: block;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.12);
}

.clivyo-smart-search label {
    display: grid;
    gap: 10px;
    font-weight: 800;
    color: var(--clivyo-dark);
}

.clivyo-smart-search input[type="search"] {
    min-height: 62px;
    border-radius: 20px;
    border: 1px solid rgba(2, 49, 142, 0.14);
    padding: 0 18px;
    font-size: 17px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8), 0 18px 42px rgba(15, 23, 42, 0.06);
}

.clivyo-smart-search input[type="search"]:focus {
    outline: none;
    border-color: rgba(3, 179, 195, 0.7);
    box-shadow: 0 0 0 4px rgba(3, 179, 195, 0.12), 0 18px 42px rgba(15, 23, 42, 0.06);
}

.smart-suggestions {
    margin-top: 14px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(2,49,142,.06), rgba(3,179,195,.08));
    border: 1px solid rgba(3, 179, 195, 0.18);
}

.smart-suggestion-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 12px;
}

.smart-suggestion-head strong {
    color: var(--clivyo-dark);
    font-size: 18px;
}

.smart-suggestion-head span {
    color: var(--clivyo-muted);
    font-size: 14px;
}



.smart-questionnaire {
    margin: 22px 0;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(2, 49, 142, 0.08);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}


.scan-logo-letter {
    position: relative;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    font-size: 35px;
    font-weight: 950;
    color: #ffffff;
    letter-spacing: -0.08em;
    background: linear-gradient(145deg, var(--clivyo-blue), var(--clivyo-turquoise));
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35), 0 18px 40px rgba(2,49,142,0.24);
}

.shazam-btn.scanning .scan-logo-letter {
    animation: clivyoBeat .78s ease-in-out infinite;
}

@keyframes clivyoBeat {
    0%, 100% { transform: scale(1); }
    38% { transform: scale(1.08); }
    62% { transform: scale(0.96); }
}

.clivyo-match-card {
    align-items: center;
}

.clivyo-match-score {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.clivyo-match-score strong {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 13px;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
}

.clivyo-match-score em {
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    color: var(--clivyo-blue);
    background: rgba(3, 179, 195, 0.10);
}

@media (max-width: 980px) {
    .clivyo-match-hero,
    .finder-layout,
    .smart-question-grid {
        grid-template-columns: 1fr;
    }

    .smart-suggestion-list,
    .quick-need-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .clivyo-match-hero {
        padding: 20px;
        border-radius: 22px;
    }

    .smart-suggestion-list,
    .quick-need-grid {
        grid-template-columns: 1fr;
    }

    .smart-suggestion-head {
        display: grid;
    }

    .clivyo-match-examples {
        display: grid;
    }

    .scan-logo-letter {
        width: 58px;
        height: 58px;
        font-size: 30px;
    }
}


.sector-catalog-toggle-wrap {
  margin: 18px 0 0;
}

.sector-catalog-toggle {
  border: 1px solid #dbeafe;
  background: #f8fbff;
  color: #003b8f;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 61, 143, 0.06);
}

.sector-catalog-toggle:hover {
  background: #eef6ff;
  border-color: #bfdbfe;
}

.sector-catalog[hidden] {
  display: none !important;
}

.sector-catalog {
  margin-top: 18px;
}

.clivyo-match-page .sector-choice-grid {
  margin-top: 16px;
}


/* =========================================================
   CLIVYO MATCH — URGENCE SIMPLE
   ========================================================= */

.smart-urgency-card {
    padding: 20px;
}

.urgent-toggle {
    display: block;
    cursor: pointer;
}

.urgent-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.urgent-toggle-ui {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(3, 179, 195, 0.12), transparent 34%),
        #ffffff;
    border: 1px solid rgba(2, 49, 142, 0.10);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.urgent-toggle:hover .urgent-toggle-ui {
    transform: translateY(-1px);
    border-color: rgba(3, 179, 195, 0.45);
    box-shadow: 0 20px 46px rgba(15, 23, 42, 0.10);
}

.urgent-toggle-dot {
    width: 52px;
    height: 32px;
    flex: 0 0 52px;
    border-radius: 999px;
    background: #EAF2FF;
    border: 1px solid rgba(2, 49, 142, 0.12);
    position: relative;
    transition: background .18s ease, border-color .18s ease;
}

.urgent-toggle-dot::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.20);
    transition: transform .18s ease;
}

.urgent-toggle input:checked + .urgent-toggle-ui {
    border-color: rgba(239, 68, 68, 0.35);
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, 0.14), transparent 34%),
        #ffffff;
}

.urgent-toggle input:checked + .urgent-toggle-ui .urgent-toggle-dot {
    background: linear-gradient(135deg, #EF4444, #F97316);
    border-color: transparent;
}

.urgent-toggle input:checked + .urgent-toggle-ui .urgent-toggle-dot::after {
    transform: translateX(20px);
}

.urgent-toggle-ui strong {
    display: block;
    color: var(--clivyo-dark);
    font-size: 16px;
}

.urgent-toggle-ui small {
    display: block;
    margin-top: 4px;
    color: var(--clivyo-muted);
    line-height: 1.35;
}

@media (max-width: 640px) {
    .urgent-toggle-ui {
        align-items: flex-start;
    }
}

/* =========================================================
   CLIVYO MATCH — DESIGN ÉPURÉ SUGGESTIONS + FAMILLES
   ========================================================= */

.clivyo-smart-search {
    position: relative;
}

.sector-family-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 8px;
    padding: 4px 2px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.sector-family-icons::-webkit-scrollbar {
    display: none;
}

.sector-family-icon {
    appearance: none;
    border: 1px solid rgba(2, 49, 142, 0.10);
    background: rgba(255, 255, 255, 0.86);
    color: var(--clivyo-blue);
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.sector-family-icon span {
    display: grid;
    place-items: center;
    font-size: 21px;
    line-height: 1;
}

.sector-family-icon:hover {
    transform: translateY(-1px);
    border-color: rgba(3, 179, 195, 0.45);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.sector-family-icon.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(2, 49, 142, 0.18);
}

.smart-suggestions {
    margin-top: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.smart-suggestion-head--clean {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 10px;
    margin: 0;
}

.smart-suggestion-head--clean strong {
    font-size: 15px;
    font-weight: 950;
    letter-spacing: -0.02em;
    color: var(--clivyo-dark);
}

.smart-suggestion-head--clean span {
    font-size: 13px;
    color: var(--clivyo-muted);
}

.smart-suggestion-stack {
    display: grid;
    gap: 0;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(2, 49, 142, 0.08);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(10px);
}

.smart-suggestion-row {
    appearance: none;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(2, 49, 142, 0.07);
    background: transparent;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition:
        background .16s ease,
        transform .16s ease;
}

.smart-suggestion-row:last-child {
    border-bottom: 0;
}

.smart-suggestion-row:hover {
    background: rgba(3, 179, 195, 0.075);
}

.smart-suggestion-row:active {
    transform: scale(0.995);
}

.smart-suggestion-row.is-best {
    background:
        linear-gradient(90deg, rgba(3, 179, 195, 0.10), transparent 42%),
        rgba(255, 255, 255, 0.52);
}

.suggestion-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(244, 249, 252, 0.95);
    color: var(--clivyo-blue);
    font-size: 20px;
    box-shadow: inset 0 0 0 1px rgba(2, 49, 142, 0.06);
}

.suggestion-row-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.suggestion-row-main strong {
    color: var(--clivyo-dark);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.2;
}

.suggestion-row-main small {
    color: var(--clivyo-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smart-suggestion-row em {
    justify-self: end;
    font-style: normal;
    font-size: 12px;
    font-weight: 950;
    color: var(--clivyo-blue);
    background: rgba(3, 179, 195, 0.11);
    padding: 7px 9px;
    border-radius: 999px;
}

.suggestion-row-arrow {
    color: rgba(2, 49, 142, 0.45);
    font-size: 24px;
    line-height: 1;
}

.smart-suggestion-empty--clean {
    border-radius: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(2, 49, 142, 0.08);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.smart-suggestion-empty--clean strong {
    color: var(--clivyo-dark);
}

.smart-suggestion-empty--clean p {
    margin: 4px 0 0;
    color: var(--clivyo-muted);
}

@media (max-width: 640px) {
    .sector-family-icons {
        gap: 8px;
        margin-top: 10px;
        padding-bottom: 6px;
    }

    .sector-family-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .sector-family-icon span {
        font-size: 19px;
    }

    .smart-suggestion-row {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 13px 14px;
    }

    .suggestion-row-icon {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .suggestion-row-main strong {
        font-size: 14px;
    }

    .suggestion-row-main small {
        font-size: 12px;
    }

    .suggestion-row-arrow {
        display: none;
    }

    .smart-suggestion-row em {
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* =========================================================
   CLIVYO MATCH — ICÔNES PRO + SÉLECTION VISIBLE
   ========================================================= */

.sector-family-icon {
    position: relative;
}

.sector-family-svg {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
}

.sector-family-svg svg,
.suggestion-row-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sector-family-icon span {
    font-size: initial !important;
}

.sector-family-icon.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: var(--clivyo-turquoise);
    box-shadow: 0 0 0 4px rgba(3, 179, 195, 0.14);
}

.suggestion-row-icon {
    color: var(--clivyo-blue);
}

.smart-suggestion-row {
    position: relative;
}

.smart-suggestion-row.is-selected {
    background:
        linear-gradient(90deg, rgba(2, 49, 142, 0.10), rgba(3, 179, 195, 0.08)),
        #ffffff !important;
    box-shadow:
        inset 4px 0 0 var(--clivyo-turquoise),
        inset 0 0 0 1px rgba(3, 179, 195, 0.30);
}

.smart-suggestion-row.is-selected .suggestion-row-icon {
    color: #ffffff;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
    box-shadow: 0 10px 22px rgba(2, 49, 142, 0.18);
}

.smart-suggestion-row.is-selected .suggestion-row-main strong {
    color: var(--clivyo-blue);
}

.smart-suggestion-row.is-selected .suggestion-row-main strong::after {
    content: "Sélectionné";
    display: inline-flex;
    margin-left: 8px;
    transform: translateY(-1px);
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(3, 179, 195, 0.12);
    color: var(--clivyo-blue);
    font-size: 11px;
    font-weight: 950;
    vertical-align: middle;
}

.smart-suggestion-row.is-selected .suggestion-row-arrow {
    font-size: 0;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
}

.smart-suggestion-row.is-selected .suggestion-row-arrow::before {
    content: "✓";
    font-size: 14px;
    font-weight: 950;
}

.smart-suggestion-row.is-selected em {
    color: #ffffff;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
}

@media (max-width: 640px) {
    .smart-suggestion-row.is-selected .suggestion-row-main strong::after {
        display: table;
        margin: 5px 0 0;
    }
}

/* =========================================================
   CLIVYO MATCH — BARRE TYPE MARKETPLACE PREMIUM
   ========================================================= */

.clivyo-match-page .finder-layout {
    display: block;
}

.clivyo-match-page .finder-side {
    display: none !important;
}

.clivyo-match-page .finder-form {
    max-width: 920px;
    margin: 0 auto;
}

.clivyo-search-panel {
    position: relative;
    margin-bottom: 24px;
    padding: 18px;
    

    backdrop-filter: blur(14px);
}

.clivyo-search-label {
    display: grid;
    gap: 10px;
    margin: 0;
    font-weight: 950;
    color: var(--clivyo-dark);
}

.clivyo-search-label > span {
    font-size: 14px;
    letter-spacing: -0.01em;
}

.clivyo-search-label input[type="search"] {
    width: 100%;
    min-height: 66px;
    border-radius: 999px;
    border: 1px solid rgba(2, 49, 142, 0.12);
    padding: 0 52px 0 22px;
    font-size: 17px;
    font-weight: 850;
    color: var(--clivyo-blue);
    background: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.80),
        0 16px 40px rgba(15, 23, 42, 0.06);
}

.clivyo-search-label input[type="search"]:focus {
    outline: none;
    border-color: rgba(3, 179, 195, 0.78);
    box-shadow:
        0 0 0 4px rgba(3, 179, 195, 0.13),
        0 18px 44px rgba(15, 23, 42, 0.08);
}

.clivyo-family-icons {
    margin: 14px 0 10px;
    padding: 2px 2px 8px;
}

.selected-sector-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 10px;
    padding: 12px 14px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(2, 49, 142, 0.10), rgba(3, 179, 195, 0.08)),
        #ffffff;
    border: 1px solid rgba(3, 179, 195, 0.30);
    box-shadow:
        inset 4px 0 0 var(--clivyo-turquoise),
        0 14px 34px rgba(15, 23, 42, 0.06);
}

.selected-sector-bar[hidden] {
    display: none !important;
}

.selected-sector-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
    box-shadow: 0 12px 26px rgba(2, 49, 142, 0.18);
}

.selected-sector-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.selected-sector-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.selected-sector-copy small {
    color: var(--clivyo-muted);
    font-size: 12px;
    font-weight: 800;
}

.selected-sector-copy strong {
    color: var(--clivyo-blue);
    font-size: 16px;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-sector-clear {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 9px 12px;
    cursor: pointer;
    font-weight: 950;
    color: var(--clivyo-blue);
    background: rgba(3, 179, 195, 0.11);
}

.selected-sector-clear:hover {
    background: rgba(3, 179, 195, 0.18);
}

.clivyo-search-options {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.clivyo-search-options::-webkit-scrollbar {
    display: none;
}

.clivyo-action-pill {
    appearance: none;
    min-height: 48px;
    border: 1px solid rgba(2, 49, 142, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--clivyo-blue);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.clivyo-action-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(3, 179, 195, 0.42);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

.clivyo-action-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--clivyo-blue);
    background: rgba(3, 179, 195, 0.10);
}

.clivyo-action-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.urgent-action-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.urgent-action-pill:has(input:checked) {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
    box-shadow: 0 14px 32px rgba(2, 49, 142, 0.18);
}

.urgent-action-pill:has(input:checked) .clivyo-action-icon {
    color: #ffffff;
    background: rgba(255,255,255,0.18);
}

.clivyo-geo-button {
    font: inherit;
    font-weight: 900;
}

.clivyo-geo-button.scanning {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
}

.clivyo-city-pill,
.clivyo-budget-pill {
    padding-right: 10px;
}

.clivyo-city-pill input,
.clivyo-budget-pill input {
    width: 110px;
    min-height: 34px;
    border: 0;
    outline: none;
    border-radius: 999px;
    padding: 0 10px;
    color: var(--clivyo-dark);
    font-weight: 850;
    background: rgba(244, 249, 252, 0.96);
}

.clivyo-budget-pill input {
    width: 78px;
}

.clivyo-city-pill input::placeholder,
.clivyo-budget-pill input::placeholder {
    color: rgba(83, 107, 138, 0.75);
}

.clivyo-search-status {
    margin-top: 10px;
    padding: 0 4px;
    color: var(--clivyo-muted);
    font-size: 13px;
    font-weight: 750;
}

.clivyo-match-page .smart-questionnaire,
.clivyo-match-page .smart-urgency-card {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.clivyo-match-page .finder-form__section:not(:has(+ .finder-fields)) {
    margin-top: 24px;
}

@media (max-width: 720px) {
    .clivyo-search-panel {
        padding: 14px;
        border-radius: 24px;
    }

    .clivyo-search-label input[type="search"] {
        min-height: 58px;
        font-size: 15px;
        padding-left: 18px;
    }

    .selected-sector-bar {
        align-items: flex-start;
    }

    .selected-sector-copy strong {
        white-space: normal;
    }

    .clivyo-search-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        overflow: visible;
    }

    .clivyo-action-pill {
        min-width: 0;
        justify-content: flex-start;
        border-radius: 18px;
    }

    .clivyo-city-pill,
    .clivyo-budget-pill {
        grid-column: span 2;
    }

    .clivyo-city-pill input,
    .clivyo-budget-pill input {
        width: 100%;
    }
}

/* =========================================================
   CLIVYO MATCH — CORRECTION DESIGN PREMIUM FINAL
   Corrige les bugs .form label / .form input
   ========================================================= */

.clivyo-match-page .finder-form {
    max-width: 920px !important;
    margin: 0 auto !important;
    padding: clamp(18px, 3vw, 34px) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at top left, rgba(3, 179, 195, 0.10), transparent 34%),
        #ffffff !important;
    box-shadow:
        0 24px 70px rgba(2, 49, 142, 0.07),
        inset 0 0 0 1px rgba(2, 49, 142, 0.07) !important;
}

.clivyo-match-page .clivyo-search-panel {
    padding: 18px !important;
    margin: 0 0 24px !important;
   

}

/* Label recherche uniquement */
.clivyo-match-page .clivyo-search-label {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    color: var(--clivyo-dark) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.clivyo-match-page .clivyo-search-label input[type="search"] {
    width: 100% !important;
    min-height: 64px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(2, 49, 142, 0.12) !important;
    padding: 0 54px 0 22px !important;
    background: #ffffff !important;
    color: var(--clivyo-blue) !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.8),
        0 16px 40px rgba(15, 23, 42, 0.06) !important;
}

.clivyo-match-page .clivyo-search-label input[type="search"]:focus {
    outline: none !important;
    border-color: rgba(3, 179, 195, 0.78) !important;
    box-shadow:
        0 0 0 4px rgba(3, 179, 195, 0.13),
        0 18px 44px rgba(15, 23, 42, 0.08) !important;
}

/* Icônes familles */
.clivyo-match-page .clivyo-family-icons,
.clivyo-match-page .sector-family-icons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 14px 0 18px !important;
    padding: 2px 2px 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.clivyo-match-page .sector-family-icons::-webkit-scrollbar {
    display: none !important;
}

/* Secteur choisi */
.clivyo-match-page .selected-sector-bar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 14px 0 14px !important;
    padding: 13px 14px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(90deg, rgba(2, 49, 142, 0.10), rgba(3, 179, 195, 0.08)),
        #ffffff !important;
    border: 1px solid rgba(3, 179, 195, 0.34) !important;
    box-shadow:
        inset 4px 0 0 var(--clivyo-turquoise),
        0 14px 34px rgba(15, 23, 42, 0.06) !important;
}

.clivyo-match-page .selected-sector-bar[hidden] {
    display: none !important;
}

.clivyo-match-page .selected-sector-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise)) !important;
    box-shadow: 0 12px 26px rgba(2, 49, 142, 0.18) !important;
}

.clivyo-match-page .selected-sector-copy {
    min-width: 0 !important;
    flex: 1 !important;
    display: grid !important;
    gap: 2px !important;
}

.clivyo-match-page .selected-sector-copy small {
    color: var(--clivyo-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.clivyo-match-page .selected-sector-copy strong {
    color: var(--clivyo-blue) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.clivyo-match-page .selected-sector-clear {
    appearance: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    font-weight: 950 !important;
    color: var(--clivyo-blue) !important;
    background: rgba(3, 179, 195, 0.12) !important;
    box-shadow: none !important;
}

.clivyo-match-page .selected-sector-clear:hover {
    background: rgba(3, 179, 195, 0.20) !important;
}

/* =========================================================
   OPTIONS SOUS LA BARRE : Urgent / Localisation / Ville / Budget
   ========================================================= */

.clivyo-match-page .clivyo-search-options {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 14px 0 0 !important;
    padding: 0 0 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.clivyo-match-page .clivyo-search-options::-webkit-scrollbar {
    display: none !important;
}

/* Très important : neutralise .form label */
.clivyo-match-page .clivyo-action-pill {
    appearance: none !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    min-height: 48px !important;
    height: 48px !important;
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    margin: 0 !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(2, 49, 142, 0.10) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--clivyo-blue) !important;

    font: inherit !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;

    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04) !important;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease !important;
}

.clivyo-match-page .clivyo-action-pill:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(3, 179, 195, 0.42) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07) !important;
}

.clivyo-match-page .clivyo-action-icon {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    color: var(--clivyo-blue) !important;
    background: rgba(3, 179, 195, 0.10) !important;
}

.clivyo-match-page .clivyo-action-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Urgent */
.clivyo-match-page .urgent-action-pill input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.clivyo-match-page .urgent-action-pill:has(input:checked) {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise)) !important;
    box-shadow: 0 14px 32px rgba(2, 49, 142, 0.18) !important;
}

.clivyo-match-page .urgent-action-pill:has(input:checked) .clivyo-action-icon {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
}

/* Bouton géolocalisation */
.clivyo-match-page .clivyo-geo-button {
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    width: auto !important;
}

.clivyo-match-page .clivyo-geo-button.scanning {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise)) !important;
}

/* Ville + Budget : neutralise .form input */
.clivyo-match-page .clivyo-city-pill,
.clivyo-match-page .clivyo-budget-pill {
    justify-content: flex-start !important;
    padding-right: 10px !important;
}

.clivyo-match-page .clivyo-city-pill input,
.clivyo-match-page .clivyo-budget-pill input {
    width: 112px !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;

    border: 0 !important;
    outline: none !important;
    border-radius: 999px !important;
    padding: 0 11px !important;

    color: var(--clivyo-dark) !important;
    background: rgba(244, 249, 252, 0.98) !important;
    font-size: 14px !important;
    font-weight: 850 !important;

    box-shadow: inset 0 0 0 1px rgba(2, 49, 142, 0.08) !important;
}

.clivyo-match-page .clivyo-budget-pill input {
    width: 78px !important;
}

.clivyo-match-page .clivyo-city-pill input:focus,
.clivyo-match-page .clivyo-budget-pill input:focus {
    box-shadow:
        inset 0 0 0 1px rgba(3, 179, 195, 0.55),
        0 0 0 3px rgba(3, 179, 195, 0.10) !important;
}

.clivyo-match-page .clivyo-city-pill input::placeholder,
.clivyo-match-page .clivyo-budget-pill input::placeholder {
    color: rgba(83, 107, 138, 0.72) !important;
}

/* Statut sous les options */
.clivyo-match-page .clivyo-search-status {
    margin: 10px 4px 0 !important;
    padding: 0 !important;
    color: var(--clivyo-muted) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    text-align: left !important;
}

/* Supprime la grosse carte "secteur notice" */
.clivyo-match-page .sector-notice {
    display: none !important;
}

/* Résultats entreprises */
.clivyo-match-page .finder-results {
    margin: 18px 0 28px !important;
}

.clivyo-match-page .match-results-head {
    margin-bottom: 12px !important;
}

.clivyo-match-page .match-results-head h3 {
    color: var(--clivyo-blue) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    letter-spacing: -0.02em !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {
    .clivyo-match-page .finder-form {
        padding: 16px !important;
        border-radius: 26px !important;
    }

    .clivyo-match-page .clivyo-search-panel {
        padding: 14px !important;
        border-radius: 24px !important;
    }

    .clivyo-match-page .clivyo-search-label input[type="search"] {
        min-height: 58px !important;
        font-size: 15px !important;
        padding-left: 18px !important;
    }

    .clivyo-match-page .selected-sector-bar {
        align-items: flex-start !important;
        border-radius: 20px !important;
    }

    .clivyo-match-page .selected-sector-copy strong {
        white-space: normal !important;
    }

    .clivyo-match-page .clivyo-search-options {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        overflow: visible !important;
    }

    .clivyo-match-page .clivyo-action-pill {
        width: 100% !important;
        height: 48px !important;
        border-radius: 18px !important;
        justify-content: flex-start !important;
    }

    .clivyo-match-page .clivyo-city-pill,
    .clivyo-match-page .clivyo-budget-pill {
        grid-column: span 2 !important;
    }

    .clivyo-match-page .clivyo-city-pill input,
    .clivyo-match-page .clivyo-budget-pill input {
        width: 100% !important;
        flex: 1 !important;
    }
}



/* =========================================================
   CLIVYO — INSCRIPTION ENTREPRISE PRO
   ========================================================= */

.auth-section--company-sectors {
  gap: 18px;
}

.auth-sector-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.auth-sector-search {
  display: grid;
  gap: 8px;
}

.auth-sector-search span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.auth-sector-counter {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--muted);
  background: var(--soft);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.auth-sector-counter.is-valid {
  color: var(--clivyo-blue);
  background: rgba(3, 179, 195, 0.12);
}

.auth-sector-counter.is-error {
  color: #ffffff;
  background: linear-gradient(135deg, #D92D20, #F97316);
  animation: clivyo-shake .35s ease;
}

.auth-sector-groups {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.auth-sector-groups::-webkit-scrollbar {
  display: none;
}

.auth-sector-group-btn {
  appearance: none;
  border: 1px solid rgba(2, 49, 142, 0.10);
  border-radius: 999px;
  padding: 10px 13px;
  color: var(--clivyo-blue);
  background: #ffffff;
  cursor: pointer;
  font-weight: 950;
  white-space: nowrap;
}

.auth-sector-group-btn.is-active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
}

.auth-sector-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.auth-sector-fieldset legend {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-sector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 470px;
  overflow: auto;
  padding: 3px 4px 8px;
  scrollbar-width: thin;
}

.auth-sector-card {
  position: relative;
  display: grid !important;
  gap: 6px !important;
  min-height: 142px;
  border-radius: 22px;
  padding: 16px 16px 15px;
  background: #ffffff;
  border: 1px solid rgba(2, 49, 142, 0.08);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.auth-sector-card:hover {
  transform: translateY(-1px);
  border-color: rgba(3, 179, 195, 0.36);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.auth-sector-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-sector-card::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(2, 49, 142, 0.18);
  background: #ffffff;
}

.auth-sector-card.is-selected {
  border-color: rgba(3, 179, 195, 0.42);
  background:
    linear-gradient(90deg, rgba(2, 49, 142, 0.07), rgba(3, 179, 195, 0.08)),
    #ffffff;
  box-shadow:
    inset 4px 0 0 var(--clivyo-turquoise),
    0 18px 42px rgba(2, 49, 142, 0.08);
}

.auth-sector-card.is-selected::after {
  content: "✓";
  display: grid;
  place-items: center;
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
  font-size: 13px;
  font-weight: 950;
}

.auth-sector-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.auth-sector-card strong {
  max-width: calc(100% - 34px);
  color: var(--clivyo-blue);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.auth-sector-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.auth-sector-card em {
  width: fit-content;
  margin-top: auto;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.auth-sector-card em.success {
  color: var(--success);
  background: var(--success-bg);
}

.auth-sector-card em.medium,
.auth-sector-card em.warning {
  color: var(--warning);
  background: var(--warning-bg);
}

.auth-sector-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.auth-urgent-card {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px !important;
  border-radius: 24px;
  padding: 16px;
  background:
    radial-gradient(circle at top left, rgba(3, 179, 195, 0.10), transparent 34%),
    #ffffff;
  border: 1px solid rgba(2, 49, 142, 0.08);
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.auth-urgent-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-urgent-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--clivyo-blue);
  background: rgba(3, 179, 195, 0.10);
}

.auth-urgent-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-urgent-card strong {
  display: block;
  color: var(--clivyo-dark);
  font-size: 15px;
  font-weight: 950;
}

.auth-urgent-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.auth-urgent-card:has(input:checked) {
  border-color: rgba(3, 179, 195, 0.38);
  background:
    linear-gradient(90deg, rgba(2, 49, 142, 0.08), rgba(3, 179, 195, 0.08)),
    #ffffff;
  box-shadow:
    inset 4px 0 0 var(--clivyo-turquoise),
    0 18px 42px rgba(2, 49, 142, 0.08);
}

.auth-urgent-card:has(input:checked) .auth-urgent-icon {
  color: #ffffff;
  background: linear-gradient(135deg, var(--clivyo-blue), var(--clivyo-turquoise));
}

@keyframes clivyo-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@media (max-width: 760px) {
  .auth-sector-toolbar {
    grid-template-columns: 1fr;
  }

  .auth-sector-counter {
    justify-content: flex-start;
  }

  .auth-sector-grid {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .auth-urgent-card {
    align-items: flex-start;
  }
}


.payout-choice-box {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 18px;
    background: #f8fafc;
}

.payout-choice-box h3 {
    margin: 0 0 14px;
    font-size: 16px;
}

.payout-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.payout-choice-card {
    margin: 0;
}

.payout-choice-card button {
    width: 100%;
    min-height: 118px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 16px;
    background: #ffffff;
    padding: 14px;
    text-align: left;
    cursor: pointer;
}

.payout-choice-card button span {
    display: block;
    font-size: 12px;
    color: #64748b;
}

.payout-choice-card button strong {
    display: block;
    margin-top: 6px;
    font-size: 16px;
    color: #0f172a;
}

.payout-choice-card button small {
    display: block;
    margin-top: 8px;
    color: #64748b;
}

.payout-choice-card button.is-selected {
    border-color: #03B3C3;
    box-shadow: 0 0 0 3px rgba(3, 179, 195, 0.14);
}

.payout-choice-card button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 760px) {
    .payout-choice-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CLIVYO — CARTE EXEMPLE DE COMMISSION
========================================================= */

.home-hero__card {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: clamp(28px, 4vw, 38px);

    border: 1px solid rgba(2, 49, 142, .10);
    border-radius: 34px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(3, 179, 195, .14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(247, 251, 255, .98)
        );

    box-shadow:
        0 30px 70px rgba(15, 23, 42, .10),
        0 8px 24px rgba(2, 49, 142, .05);
}

/* Petit reflet décoratif discret */
.home-hero__card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -90px;
    right: -80px;

    width: 220px;
    height: 220px;
    border-radius: 50%;

    background: rgba(3, 179, 195, .07);
    filter: blur(4px);
    pointer-events: none;
}

/* =========================================================
   HAUT DE LA CARTE
========================================================= */

.home-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 24px;

    padding-bottom: 22px;
    border-bottom: 1px solid rgba(2, 49, 142, .12);
}

.home-card-top__label {
    padding-top: 7px;

    color: #496183;

    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.home-card-top__amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;

    text-align: right;
}

.home-card-top__amount strong {
    color: #02318E;

    font-size: clamp(44px, 6vw, 60px);
    font-weight: 850;
    line-height: .95;
    letter-spacing: -.055em;
    white-space: nowrap;
}

.home-card-top__amount span {
    color: #64748B;

    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

/* =========================================================
   DÉTAIL DU CALCUL
========================================================= */

.home-example {
    margin-top: 25px;
}

.home-example__row {
    min-height: 51px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    padding: 12px 0;

    border-bottom: 1px solid rgba(2, 49, 142, .09);
}

.home-example__row > span {
    color: #587093;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.home-example__row > strong {
    color: #0F172A;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

/* Montant réellement perçu */
.home-example__row--highlight > span {
    color: #02318E;
    font-weight: 700;
}

.home-example__row--highlight > strong {
    color: #02318E;
    font-size: 15px;
}

/* Part correspondant au service */
.home-example__row--service {
    border-bottom: 0;
}

.home-example__row--service > strong {
    color: #03A8B8;
}

/* =========================================================
   MESSAGE DE RÉASSURANCE
========================================================= */

.home-card-message {
    margin-top: 22px;
    padding: 18px 19px;

    border: 0;
    border-radius: 18px;

    background: rgba(2, 49, 142, .045);
}

.home-card-message > strong {
    display: block;
    margin-bottom: 7px;

    color: #173A70;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}

.home-card-message > p {
    margin: 0;

    color: #587093;

    font-size: 12.5px;
    font-weight: 450;
    line-height: 1.65;
}

/* =========================================================
   AVANTAGES
========================================================= */

.home-card-benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px 18px;

    margin: 18px 0 0;
    padding: 0;

    list-style: none;
}

.home-card-benefits li {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #536B8A;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.home-card-benefits li > span {
    color: #03A8B8;
    font-size: 13px;
    font-weight: 900;
}

/* =========================================================
   MENTION INDICATIVE
========================================================= */

.home-card-disclaimer {
    max-width: 350px;
    margin: 15px auto 0 !important;

    color: #8492A8 !important;

    font-size: 9.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: center;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 760px) {
    .home-hero__card {
        padding: 26px 22px;
        border-radius: 28px;
    }

    .home-card-top {
        gap: 16px;
        padding-bottom: 20px;
    }

    .home-card-top__amount strong {
        font-size: clamp(42px, 13vw, 54px);
    }

    .home-example {
        margin-top: 20px;
    }

    .home-card-message {
        padding: 17px;
    }

    .home-card-benefits {
        justify-content: flex-start;
        gap: 10px 16px;
    }
}

@media (max-width: 420px) {
    .home-hero__card {
        padding: 23px 18px;
        border-radius: 25px;
    }

    .home-card-top {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .home-card-top__label {
        max-width: 100px;
        padding-top: 4px;
        font-size: 12px;
    }

    .home-card-top__amount strong {
        font-size: 43px;
    }

    .home-card-top__amount span {
        font-size: 10px;
    }

    .home-example__row {
        min-height: 48px;
        gap: 14px;
    }

    .home-example__row > span {
        font-size: 12px;
    }

    .home-example__row > strong {
        font-size: 13px;
    }

    .home-example__row--highlight > strong {
        font-size: 14px;
    }

    .home-card-message {
        margin-top: 18px;
        padding: 16px;
        border-radius: 16px;
    }

    .home-card-message > strong {
        font-size: 12.5px;
    }

    .home-card-message > p {
        font-size: 12px;
        line-height: 1.6;
    }

    .home-card-benefits {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 16px;
    }

    .home-card-benefits li {
        font-size: 11px;
    }

    .home-card-disclaimer {
        margin-top: 14px !important;
        font-size: 9px !important;
        text-align: left;
    }
}

/* =========================================================
   CLIVYO — FONCTIONNEMENT PREMIUM
   Bloc unique et isolé pour éviter les conflits de page
========================================================= */

.home-process {
    position: relative;
    width: 100%;
    padding-top: clamp(76px, 9vw, 120px);
    padding-bottom: clamp(76px, 9vw, 115px);
}

.home-process__head {
    max-width: 760px;
    margin: 0 auto clamp(46px, 6vw, 72px);
    text-align: center;
}

.home-process__head .home-eyebrow {
    margin-bottom: 12px;
}

.home-process__head h2 {
    max-width: 700px;
    margin: 0 auto 18px;
    color: #0F172A;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.home-process__head > p:last-child {
    max-width: 650px;
    margin: 0 auto;
    color: #5D718F;
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 450;
    line-height: 1.7;
}

.home-process .home-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    border-top: 1px solid rgba(2, 49, 142, .11);
    border-bottom: 1px solid rgba(2, 49, 142, .11);
}

.home-process .home-steps::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -1px;
    left: 0;
    width: 33.333%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #02318E, #03B3C3);
}

.home-process .home-step {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 330px;
    padding: clamp(32px, 4vw, 50px) clamp(28px, 3.5vw, 46px);
    border: 0;
    border-right: 1px solid rgba(2, 49, 142, .10);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: background-color .25s ease;
}

.home-process .home-step:last-child {
    border-right: 0;
}

@media (hover: hover) {
    .home-process .home-step:hover {
        background: linear-gradient(180deg, rgba(3, 179, 195, .035), rgba(2, 49, 142, .018));
    }
}

.home-process .home-step__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    margin: 0 0 28px;
}

.home-process .home-step__number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 15px;
    color: #02318E;
    background: rgba(2, 49, 142, .07);
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
}

.home-process .home-step:nth-child(2) .home-step__number {
    color: #0498A8;
    background: rgba(3, 179, 195, .11);
}

.home-process .home-step--featured .home-step__number {
    color: #FFFFFF;
    background: linear-gradient(135deg, #02318E, #0756C7);
    box-shadow: 0 10px 24px rgba(2, 49, 142, .18);
}

.home-process .home-step__status {
    min-width: 0;
    color: #8A99AD;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .06em;
    text-align: right;
    text-transform: uppercase;
}

.home-process .home-step h3 {
    max-width: 340px;
    margin: 0 0 13px;
    padding: 0;
    color: #0F172A;
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.home-process .home-step > p {
    max-width: 390px;
    margin: 0;
    padding: 0;
    color: #5D718F;
    font-size: 14px;
    font-weight: 450;
    line-height: 1.7;
}

.home-process .home-step__benefit {
    position: absolute;
    right: clamp(28px, 3.5vw, 46px);
    bottom: 38px;
    left: clamp(28px, 3.5vw, 46px);
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 0;
    color: #496183;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.home-process .home-step__benefit > span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #0299A9;
    background: rgba(3, 179, 195, .10);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.home-process__reassurance {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 28px auto 0;
    padding: 0;
    color: #73839A;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.home-process__reassurance > span:not([aria-hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.home-process__reassurance strong {
    color: #173A70;
    font-weight: 800;
}

.home-process__reassurance > span[aria-hidden] {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: #03B3C3;
}

@media (max-width: 980px) {
    .home-process .home-steps {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .home-process .home-steps::before {
        width: 90px;
    }

    .home-process .home-step {
        display: block;
        min-height: 0;
        padding: 34px 28px 35px;
        border-right: 0;
        border-bottom: 1px solid rgba(2, 49, 142, .09);
    }

    .home-process .home-step:last-child {
        border-bottom: 0;
    }

    .home-process .home-step__top {
        margin-bottom: 20px;
    }

    .home-process .home-step__benefit {
        position: static;
        width: 100%;
        margin-top: 22px;
    }
}

@media (max-width: 760px) {
    .home-process {
        padding-top: 62px;
        padding-bottom: 66px;
    }

    .home-process__head {
        max-width: none;
        margin: 0 0 36px;
        text-align: left;
    }

    .home-process__head .home-eyebrow {
        margin-bottom: 10px;
    }

    .home-process__head h2 {
        max-width: 500px;
        margin: 0 0 15px;
        font-size: clamp(29px, 8.3vw, 38px);
        line-height: 1.08;
        letter-spacing: -.04em;
    }

    .home-process__head h2 br {
        display: none;
    }

    .home-process__head > p:last-child {
        max-width: 520px;
        margin: 0;
        font-size: 14px;
        line-height: 1.65;
    }

    .home-process .home-steps {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        border: 0;
    }

    .home-process .home-steps::before {
        content: none;
        display: none;
    }

    .home-process .home-steps::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 22px;
        bottom: 22px;
        left: 21px;
        width: 1px;
        background: linear-gradient(180deg, rgba(2, 49, 142, .18), rgba(3, 179, 195, .28), rgba(2, 49, 142, .14));
    }

    .home-process .home-step {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        min-height: 0;
        margin: 0 0 30px;
        padding: 0 0 34px 70px;
        border: 0;
        border-bottom: 1px solid rgba(2, 49, 142, .08);
        background: transparent;
    }

    .home-process .home-step:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .home-process .home-step__top {
        display: block;
        width: 100%;
        min-height: 0;
        margin: 0 0 7px;
        padding: 0;
    }

    .home-process .home-step__number {
        position: absolute;
        z-index: 2;
        top: 0;
        left: -70px;
        width: 44px;
        height: 44px;
        border: 4px solid #FFFFFF;
        box-sizing: border-box;
    }

    .home-process .home-step__status {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0 0 6px;
        color: #71839C;
        font-size: 9px;
        line-height: 1.3;
        letter-spacing: .07em;
        text-align: left;
    }

    .home-process .home-step h3 {
        max-width: none;
        margin: 0 0 10px;
        font-size: clamp(20px, 5.7vw, 23px);
        line-height: 1.18;
    }

    .home-process .home-step > p {
        max-width: 500px;
        margin: 0;
        font-size: 13.5px;
        line-height: 1.65;
    }

    .home-process .home-step__benefit {
        position: static;
        display: flex;
        width: 100%;
        max-width: none;
        margin: 17px 0 0;
        padding: 0;
        font-size: 11.5px;
        white-space: normal;
    }

    .home-process__reassurance {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin: 30px 0 0;
        padding: 17px 0 0;
        border-top: 1px solid rgba(2, 49, 142, .09);
        text-align: left;
    }

    .home-process__reassurance > span:not([aria-hidden]) {
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 37px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(2, 49, 142, .06);
    }

    .home-process__reassurance > span:not([aria-hidden])::before {
        content: "✓";
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        margin-right: 3px;
        border-radius: 50%;
        color: #0299A9;
        background: rgba(3, 179, 195, .10);
        font-size: 10px;
        font-weight: 900;
    }

    .home-process__reassurance > span:not([aria-hidden]):last-of-type {
        border-bottom: 0;
    }

    .home-process__reassurance > span[aria-hidden] {
        display: none;
    }
}

@media (max-width: 380px) {
    .home-process {
        padding-top: 56px;
        padding-bottom: 60px;
    }

    .home-process__head {
        margin-bottom: 32px;
    }

    .home-process__head h2 {
        font-size: 28px;
    }

    .home-process .home-step {
        padding-left: 60px;
    }

    .home-process .home-steps::after {
        left: 19px;
    }

    .home-process .home-step__number {
        left: -60px;
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .home-process .home-step h3 {
        font-size: 20px;
    }

    .home-process .home-step > p {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-process .home-step {
        transition: none;
    }
}