/* ==========================================================================
   SEGICI — système visuel
   daisyUI fournit les composants ; cette feuille porte la direction artistique.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

[data-theme="segici"] {
    color-scheme: light;
    --color-base-100: #ffffff;
    --color-base-200: #f5f7fc;
    --color-base-300: #e6e9f2;
    --color-base-content: #0b1020;
    --color-primary: #1e1ca8;
    --color-primary-content: #ffffff;
    --color-secondary: #00a5ff;
    --color-secondary-content: #001a33;
    --color-accent: #00a5ff;
    --color-accent-content: #001a33;
    --color-neutral: #0b1020;
    --color-neutral-content: #f8faff;
    --color-info: #00a5ff;
    --color-info-content: #001a33;
    --color-success: #0f8a63;
    --color-success-content: #ffffff;
    --color-warning: #d98b00;
    --color-warning-content: #241a00;
    --color-error: #c0392b;
    --color-error-content: #ffffff;
    --radius-selector: 0.5rem;
    --radius-field: 0.75rem;
    --radius-box: 1.25rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}

:root {
    --ink: #0b1020;
    --ink-2: #141b33;
    --blue: #1e1ca8;
    --blue-2: #2b28d0;
    --sky: #00a5ff;
    --sky-soft: #e8f7ff;
    --muted: #5c667f;
    --muted-2: #7a839a;
    --line: #e6e9f2;
    --line-strong: #d5dae8;
    --surface: #f5f7fc;
    --surface-2: #eef2fa;
    --green: #0f8a63;
    --red: #c0392b;
    --wrap: 1180px;
    --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.05);
    --shadow-md: 0 18px 44px rgba(11, 16, 32, 0.09);
    --shadow-lg: 0 30px 80px rgba(11, 16, 32, 0.14);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: 'Manrope', 'Inter', sans-serif;
    color: var(--ink);
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 700;
}

h3 {
    font-size: 1.12rem;
    font-weight: 700;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
    flex: none;
}

img {
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

:focus-visible {
    outline: 3px solid rgba(0, 165, 255, 0.6);
    outline-offset: 3px;
}

::selection {
    background: rgba(30, 28, 168, 0.18);
    color: var(--ink);
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform 0.2s var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
}

.wrap {
    width: min(100% - 48px, var(--wrap));
    margin-inline: auto;
}

.section {
    position: relative;
    padding: clamp(64px, 8vw, 104px) 0;
}

.section--tint {
    background: linear-gradient(180deg, #f7f9fd 0%, #f4f6fb 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section--dark {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
}

.section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 420px at 88% 4%, rgba(0, 165, 255, 0.18), transparent 62%),
        radial-gradient(620px 420px at 4% 100%, rgba(30, 28, 168, 0.4), transparent 64%);
    pointer-events: none;
}

.section--dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%);
    pointer-events: none;
}

.section--dark > .wrap {
    position: relative;
    z-index: 1;
}

.section--dark h2,
.section--dark h3 {
    color: #fff;
}

.section--dark .section-head p,
.section--dark .lead {
    color: #b9c5dd;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow--light {
    color: #8fdcff;
}

.lead {
    max-width: 65ch;
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.13rem);
    line-height: 1.7;
}

.section-head {
    max-width: 760px;
    margin-bottom: clamp(34px, 5vw, 56px);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head--center .lead,
.section-head--center p {
    margin-inline: auto;
}

.section-head p {
    margin-top: 16px;
    color: var(--muted);
    font-size: 1.03rem;
}

.section-foot {
    margin-top: 32px;
}

.text-gradient {
    background: linear-gradient(105deg, #c9efff 0%, #00a5ff 52%, #8fdcff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ico {
    width: 22px;
    height: 22px;
}

.ico--xs {
    width: 15px;
    height: 15px;
}

.ico--sm {
    width: 18px;
    height: 18px;
}

/* --------------------------------------------------------------------------
   Boutons et liens
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 20px;
    border-width: 1px;
    border-radius: 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    transition:
        background-color 0.25s var(--ease),
        border-color 0.25s var(--ease),
        color 0.25s var(--ease),
        transform 0.25s var(--ease),
        box-shadow 0.25s var(--ease);
}

.btn .ico {
    transition: transform 0.25s var(--ease);
}

.btn:hover .ico {
    transform: translateX(2px);
}

.btn-lg {
    height: 52px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 14px;
    font-size: 0.94rem;
}

.btn-sm {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.78rem;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(30, 28, 168, 0.22);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2422c4 0%, #1a1894 100%);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(30, 28, 168, 0.3);
}

.btn-outline {
    border-color: var(--line-strong);
    background: #fff;
    color: var(--ink);
}

.btn-outline:hover {
    border-color: var(--blue);
    background: #f7f8ff;
    color: var(--blue);
}

.btn-light {
    border-color: #fff;
    background: #fff;
    color: var(--blue);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.btn-light:hover {
    background: #eef4ff;
    color: var(--blue);
    transform: translateY(-1px);
}

.btn-ghost-light {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.btn-ghost-light:hover {
    border-color: rgba(255, 255, 255, 0.46);
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}

.btn-header {
    height: 42px;
    min-height: 42px;
    font-size: 0.82rem;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}

.link-arrow:hover {
    gap: 12px;
    color: var(--blue-2);
}

.badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8faff;
    color: #4b556e;
    font-family: 'Inter', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.badge--blue {
    border-color: #dfe3ff;
    background: #eef0ff;
    color: var(--blue);
}

.badge--sky {
    border-color: #c9eeff;
    background: #e8f7ff;
    color: #00618f;
}

.badge--green {
    border-color: #cdeee3;
    background: #edf9f4;
    color: #0b6b4d;
}

.badge--muted {
    border-color: var(--line);
    background: #f5f6f9;
    color: #64708a;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.topbar {
    background: var(--ink);
    color: #aab7d0;
    font-size: 0.7rem;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 34px;
}

.topbar__agreement {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: none;
}

.topbar__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.topbar__links a:hover {
    color: #fff;
}

.topbar .ico {
    color: #6fb8e8;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: box-shadow 0.3s var(--ease);
}

.site-header.is-scrolled {
    box-shadow: 0 12px 34px rgba(11, 16, 32, 0.08);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 14px 0;
    transition: padding 0.3s var(--ease);
}

.site-header.is-scrolled .header__inner {
    padding: 8px 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: none;
}

.brand__mark {
    display: block;
    flex: none;
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 6px 14px rgba(0, 75, 172, 0.26));
}

.brand__mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.brand__text strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 1.04rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    line-height: 1.1;
}

.brand__text small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.brand--light .brand__text strong {
    color: #fff;
}

.brand--light .brand__text small {
    color: #93a2bf;
}

.nav {
    display: flex;
    align-items: center;
    gap: 3px;
}

.nav a {
    position: relative;
    padding: 8px 9px;
    border-radius: 8px;
    color: #3c465c;
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 0.2s, background-color 0.2s;
}

.nav a:hover {
    background: #f5f7fc;
    color: var(--blue);
}

.nav a.is-active {
    color: var(--blue);
}

.nav a.is-active::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: 2px;
    left: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--blue);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.burger span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.25s var(--ease), opacity 0.2s;
}

.burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
    opacity: 0;
}

.burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 14px 24px 22px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 24px 40px rgba(11, 16, 32, 0.1);
}

.mobile-nav nav {
    display: grid;
}

.mobile-nav nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.mobile-nav nav a.is-active {
    color: var(--blue);
}

.mobile-nav__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding-top: 18px;
    color: var(--muted);
    font-size: 0.82rem;
}

.mobile-nav__contact a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* --------------------------------------------------------------------------
   Hero accueil
   -------------------------------------------------------------------------- */

.home-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(58px, 8vw, 104px) 0 clamp(72px, 9vw, 116px);
    background:
        radial-gradient(900px 560px at 88% 2%, rgba(0, 165, 255, 0.18), transparent 62%),
        radial-gradient(720px 520px at 2% 96%, rgba(30, 28, 168, 0.55), transparent 66%),
        var(--ink);
    color: #fff;
}

.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(ellipse 90% 80% at 55% 45%, #000 20%, transparent 100%);
    pointer-events: none;
}

.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/hero_img_outil_blueprint.svg');
    background-repeat: no-repeat;
    background-position: 92% 48%;
    background-size: min(860px, 66%) auto;
    opacity: 0.34;
    mix-blend-mode: screen;
    mask-image: radial-gradient(ellipse 58% 78% at 82% 48%, #000 18%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 58% 78% at 82% 48%, #000 18%, transparent 76%);
    pointer-events: none;
}

.hero-worker {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: min(820px, 78vw);
    pointer-events: none;
    filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.5));
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
}

.hero-worker img {
    display: block;
    width: auto;
    height: 100%;
}

.hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #dbe6ff;
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hero-eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sky);
    box-shadow: 0 0 0 5px rgba(0, 165, 255, 0.16);
}

.home-hero h1 {
    max-width: 15ch;
    color: #fff;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    line-height: 1.04;
}

.hero__lead {
    max-width: 54ch;
    margin-top: 24px;
    color: #b9c5dd;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #aab7d0;
    font-size: 0.78rem;
    list-style: none;
}

.hero__proof li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero__proof .ico {
    color: #6fb8e8;
}

.hero__visual {
    position: relative;
    align-self: end;
    padding: 18px 10px;
}

.convention-card {
    position: relative;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(13, 20, 43, 0.9), rgba(13, 20, 43, 0.68));
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.convention-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    pointer-events: none;
}

.convention-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 6px 16px;
}

.convention-card__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c7d4ea;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.convention-card__status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #54e3a1;
    box-shadow: 0 0 0 5px rgba(84, 227, 161, 0.12);
}

.convention-card__tag {
    padding: 4px 9px;
    border: 1px solid rgba(0, 165, 255, 0.35);
    border-radius: 999px;
    background: rgba(0, 165, 255, 0.12);
    color: #9fe4ff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.party-flow {
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
}

.party {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
}

.party--primary {
    border-color: rgba(0, 165, 255, 0.34);
    background: linear-gradient(135deg, rgba(30, 28, 168, 0.9), rgba(0, 165, 255, 0.24));
}

.party__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.party--primary .party__icon {
    background: rgba(255, 255, 255, 0.16);
}

.party strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 0.96rem;
    font-weight: 700;
    color: #fff;
}

.party p {
    margin-top: 2px;
    color: #b9c5dd;
    font-size: 0.76rem;
    line-height: 1.4;
}

.party__num {
    color: rgba(255, 255, 255, 0.44);
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.convention-card__flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding: 11px 14px;
    border: 1px solid rgba(0, 165, 255, 0.22);
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.26);
    color: #d7e8ff;
    font-size: 0.72rem;
    font-weight: 600;
}

.flow-line {
    color: var(--sky);
}

.float-badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
    animation: float 5.5s ease-in-out infinite;
}

.float-badge .ico {
    color: var(--blue);
}

.float-badge--top {
    top: 0;
    right: 4px;
}

.float-badge--bottom {
    bottom: 0;
    left: -14px;
    animation-delay: -2.4s;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

/* --------------------------------------------------------------------------
   Bandeaux de confiance et chiffres
   -------------------------------------------------------------------------- */

.trust-strip {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.trust-strip__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    padding: 22px 0;
}

.trust-strip__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-right: 24px;
    border-right: 1px solid var(--line);
}

.trust-strip__item:last-child {
    border-right: 0;
    padding-right: 0;
}

.trust-strip__item > .ico {
    margin-top: 2px;
    color: var(--blue);
}

.trust-strip__item strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
}

.trust-strip__item span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.metrics-band {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 30px 0;
}

.metric {
    padding: 4px 28px;
    border-right: 1px solid var(--line);
    text-align: center;
}

.metric:first-child {
    padding-left: 0;
}

.metric:last-child {
    border-right: 0;
    padding-right: 0;
}

.metric strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--blue);
}

.metric span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Circuit et cartes
   -------------------------------------------------------------------------- */

.circuit {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.circuit::before {
    content: '';
    position: absolute;
    top: 58px;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

.circuit__card {
    position: relative;
    z-index: 1;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}

.circuit__card:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 28, 168, 0.22);
    box-shadow: var(--shadow-md);
}

.circuit__step {
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.circuit__icon {
    position: absolute;
    top: -20px;
    right: 18px;
    z-index: 2;
    display: block;
    width: 116px;
    height: auto;
    pointer-events: none;
    transition: transform 0.3s var(--ease);
}

.circuit__card:hover .circuit__icon {
    transform: translateY(-4px);
}

.circuit__card h3 {
    margin-top: 92px;
    font-size: 1.18rem;
}

.circuit__card p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.92rem;
}

.circuit-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 30px;
    padding: 16px 20px;
    border-left: 3px solid var(--sky);
    border-radius: 0 12px 12px 0;
    background: #eff6ff;
    color: #26324d;
    font-size: 0.89rem;
}

.circuit-note .ico {
    margin-top: 2px;
    color: var(--blue);
}

.circuit-note strong {
    color: var(--ink);
}

.audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.audience-card {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.audience-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--sky));
}

.audience-card--alt::before {
    background: linear-gradient(90deg, var(--sky), #7ee0ff);
}

.audience-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.audience-card__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.audience-card h3 {
    margin-top: 12px;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.audience-card__lead {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.95rem;
}

.check-list {
    display: grid;
    gap: 11px;
    margin: 22px 0 26px;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #3e4760;
    font-size: 0.9rem;
    line-height: 1.55;
}

.check-list .ico {
    margin-top: 3px;
    color: var(--green);
}

.check-list--compact {
    margin: 18px 0 0;
    gap: 9px;
}

.check-list--compact li {
    font-size: 0.84rem;
}

.check-list--light li {
    color: rgba(255, 255, 255, 0.82);
}

.check-list--light .ico {
    color: #9fe4ff;
}

/* --------------------------------------------------------------------------
   Flux sombre
   -------------------------------------------------------------------------- */

.flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.flow__node {
    padding: 26px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    text-align: center;
}

.flow__node--accent {
    border-color: rgba(0, 165, 255, 0.4);
    background: linear-gradient(160deg, rgba(0, 165, 255, 0.16), rgba(30, 28, 168, 0.26));
    box-shadow: 0 20px 60px rgba(0, 165, 255, 0.1);
}

.flow__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.1);
    color: #9fe4ff;
}

.flow__node h3 {
    margin-bottom: 6px;
    font-size: 1rem;
}

.flow__node p {
    color: #aab7d0;
    font-size: 0.8rem;
    line-height: 1.45;
}

.flow__arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--sky);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flow__arrow .ico {
    animation: nudge 2.8s ease-in-out infinite;
}

@keyframes nudge {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.75;
    }
    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}

.flow__note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    padding: 14px 18px;
    border: 1px solid rgba(0, 165, 255, 0.22);
    border-radius: 12px;
    background: rgba(0, 165, 255, 0.06);
    color: #c7d4ea;
    font-size: 0.82rem;
    text-align: left;
}

.flow__note .ico {
    margin-top: 1px;
    color: #8fdcff;
}

/* --------------------------------------------------------------------------
   Vidéo explicative
   -------------------------------------------------------------------------- */

.video-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(30px, 4vw, 60px);
    align-items: center;
}

.video-feature__copy h2 {
    max-width: 18ch;
}

.video-feature__copy .lead {
    margin-top: 16px;
    max-width: 46ch;
}

.video-feature__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 8px 13px;
    border: 1px solid rgba(30, 28, 168, 0.12);
    border-radius: 999px;
    background: #eef0ff;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.video-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    background: var(--ink);
    box-shadow: var(--shadow-md);
}

.video-frame__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-frame__embed,
.video-frame__embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.video-frame__media {
    position: absolute;
    inset: 0;
    background: var(--ink);
}

.video-frame__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/hero_img_outil_blueprint.svg');
    background-repeat: no-repeat;
    background-position: 82% 48%;
    background-size: 92% auto;
    opacity: 0.22;
    mix-blend-mode: screen;
    mask-image: radial-gradient(ellipse 80% 80% at 78% 50%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 78% 50%, #000 20%, transparent 80%);
}

.video-frame__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(8, 16, 37, 0.78), rgba(8, 16, 37, 0.24));
}

.video-frame__icon {
    position: absolute;
    right: 8%;
    bottom: -12%;
    z-index: 2;
    width: 32%;
    max-width: 210px;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.38));
}

.video-frame__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--blue);
    transform: translate(-50%, -50%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.video-frame__play .ico {
    width: 30px;
    height: 30px;
    margin-left: 3px;
    fill: currentColor;
}

.video-frame__badge {
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 3;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(8, 16, 37, 0.45);
    color: #dbe6ff;
    font-family: 'Manrope', sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.video-frame__note {
    position: absolute;
    right: 22px;
    bottom: 18px;
    left: 22px;
    z-index: 3;
    color: #c9d4e9;
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Bibliothèque et cartes dossier
   -------------------------------------------------------------------------- */

.section--library {
    position: relative;
    overflow: hidden;
}

.section--library::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -48px;
    width: clamp(220px, 42vw, 520px);
    aspect-ratio: 805 / 775;
    background: url('../img/dossier.png') center / contain no-repeat;
    opacity: 0.14;
    transform: translateY(-50%);
    pointer-events: none;
}

.section--library > .wrap {
    position: relative;
    z-index: 1;
}

.library-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: clamp(30px, 4vw, 48px);
}

.library-head .section-head {
    margin-bottom: 0;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dossier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dossier-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.3s var(--ease),
        box-shadow 0.3s var(--ease),
        border-color 0.3s var(--ease);
}

.dossier-card[hidden] {
    display: none;
}

.dossier-card:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 28, 168, 0.2);
    box-shadow: var(--shadow-md);
}

.dossier-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.dossier-card__num {
    color: #e3e7f3;
    font-family: 'Manrope', sans-serif;
    font-size: 2.35rem;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.9;
    transition: color 0.3s;
}

.dossier-card:hover .dossier-card__num {
    color: #cdd4ea;
}

.dossier-card__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.dossier-card h3 {
    font-size: 1.08rem;
    line-height: 1.35;
}

.dossier-card h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.dossier-card {
    position: relative;
}

.dossier-card p {
    color: var(--muted);
    font-size: 0.87rem;
    line-height: 1.6;
}

.dossier-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 0.7rem;
    font-weight: 600;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--blue);
    font-weight: 700;
    white-space: nowrap;
}

.dossier-card:hover .card-link .ico {
    transform: translate(1px, -1px);
}

.card-link .ico {
    transition: transform 0.25s var(--ease);
}

/* --------------------------------------------------------------------------
   Garanties et bandeaux
   -------------------------------------------------------------------------- */

.guarantees {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--line);
}

.guarantee {
    padding: 28px;
    background: #fff;
    transition: background-color 0.25s;
}

.guarantee:hover {
    background: #fafbff;
}

.guarantee__ref {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--sky);
    font-family: 'Manrope', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.guarantee h3 {
    font-size: 1.02rem;
}

.guarantee p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Hero des pages intérieures
   -------------------------------------------------------------------------- */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(46px, 6vw, 78px) 0 clamp(48px, 6vw, 76px);
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(720px 380px at 92% -10%, rgba(0, 165, 255, 0.13), transparent 62%),
        radial-gradient(560px 360px at 0% 110%, rgba(30, 28, 168, 0.07), transparent 62%),
        linear-gradient(180deg, #f4f7fd 0%, #fff 100%);
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(30, 28, 168, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 28, 168, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    pointer-events: none;
}

.page-hero > .wrap {
    position: relative;
    z-index: 1;
}

.page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.page-hero__copy h1 {
    max-width: 18ch;
    font-size: clamp(2.35rem, 4.4vw, 3.8rem);
}

.page-hero__copy .lead {
    margin-top: 20px;
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.page-hero--compact {
    padding-bottom: clamp(42px, 5vw, 62px);
}

.page-hero--compact h1,
.page-hero--compact .lead {
    max-width: 880px;
}

.page-hero--compact .lead {
    margin-top: 18px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    color: var(--muted-2);
    font-size: 0.72rem;
    font-weight: 500;
}

.breadcrumbs a:hover {
    color: var(--blue);
}

.breadcrumbs span {
    color: #b3bbcc;
}

.hero-panel {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background:
        radial-gradient(360px 260px at 100% 0%, rgba(0, 165, 255, 0.17), transparent 70%),
        var(--ink);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.hero-panel__label {
    margin-bottom: 14px;
    color: #8fdcff;
    font-family: 'Manrope', sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mini-flow {
    list-style: none;
}

.mini-flow li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.mini-flow li:last-child {
    border-bottom: 0;
}

.mini-flow__num {
    color: #8fdcff;
    font-family: 'Manrope', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.mini-flow strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
}

.mini-flow small {
    display: block;
    margin-top: 2px;
    color: #aab7d0;
    font-size: 0.72rem;
    line-height: 1.35;
}

.mini-flow .ico {
    color: #5f7599;
}

.hero-panel__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #b9c5dd;
    font-size: 0.72rem;
    font-weight: 600;
}

.hero-panel__foot .ico {
    color: #8fdcff;
}

.panel-list {
    display: grid;
    gap: 13px;
    list-style: none;
}

.panel-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #c7d4ea;
    font-size: 0.84rem;
    line-height: 1.45;
}

.panel-list .ico {
    margin-top: 2px;
    color: #8fdcff;
}

/* --------------------------------------------------------------------------
   Trois parties
   -------------------------------------------------------------------------- */

.party-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.party-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.party-card--primary {
    border-color: transparent;
    background:
        radial-gradient(320px 260px at 100% 0%, rgba(0, 165, 255, 0.24), transparent 70%),
        linear-gradient(150deg, #1e1ca8, #151455);
    color: #fff;
}

.party-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 13px;
    background: #eef0ff;
    color: var(--blue);
}

.party-card__icon--sky {
    background: var(--sky-soft);
    color: #0079bd;
}

.party-card__icon--light {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.party-card__role {
    margin-bottom: 6px;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.party-card--primary .party-card__role {
    color: #9fe4ff;
}

.party-card h3 {
    font-size: 1.24rem;
}

.party-card--primary h3 {
    color: #fff;
}

.party-card > p:not(.party-card__role) {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.party-card--primary > p:not(.party-card__role) {
    color: #c7d4ea;
}

/* --------------------------------------------------------------------------
   Expertises, risques, bénéfices
   -------------------------------------------------------------------------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 28, 168, 0.2);
    box-shadow: var(--shadow-md);
}

.feature-card--accent {
    border-color: #dce3ff;
    background: linear-gradient(150deg, #f2f4ff, #fff 70%);
}

.feature-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: #eef0ff;
    color: var(--blue);
}

.feature-card--accent .feature-card__icon {
    background: var(--sky-soft);
    color: #0079bd;
}

.feature-card h3 {
    font-size: 1.04rem;
}

.feature-card p {
    margin-top: 9px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

.risk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.risk-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.risk-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: #fdf1ef;
    color: var(--red);
}

.risk-card h3 {
    font-size: 1.02rem;
}

.risk-card p {
    margin-top: 9px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.benefit-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}

.benefit-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 165, 255, 0.3);
    box-shadow: var(--shadow-md);
}

.benefit-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--sky-soft);
    color: #0079bd;
}

.benefit-card h3 {
    font-size: 1.02rem;
}

.benefit-card p {
    margin-top: 9px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Comparatif, étapes, parcours
   -------------------------------------------------------------------------- */

.compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.compare {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.compare th,
.compare td {
    padding: 17px 20px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 0.86rem;
    line-height: 1.5;
}

.compare thead th {
    background: #f7f9fd;
    color: var(--muted);
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.compare tbody th {
    width: 22%;
    color: var(--ink);
    font-weight: 600;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
    border-bottom: 0;
}

.compare tbody tr:hover {
    background: #fbfcff;
}

.compare td {
    color: var(--muted);
}

.compare td:last-child {
    color: #173a33;
    font-weight: 600;
    background: rgba(15, 138, 99, 0.035);
}

.compare__badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf9f4;
    color: #0b6b4d;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.compare__badge--muted {
    background: #f3f4f8;
    color: #68738b;
}

.step-list {
    display: grid;
    list-style: none;
}

.step-list li {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
}

.step-list li:last-child {
    border-bottom: 1px solid var(--line);
}

.step-list__num {
    color: #cbd2e6;
    font-family: 'Manrope', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
}

.step-list h3 {
    font-size: 1.02rem;
}

.step-list p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.87rem;
}

.journey {
    display: grid;
    gap: 16px;
}

.journey--four {
    grid-template-columns: repeat(4, 1fr);
}

.journey__step {
    position: relative;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

.journey__num {
    display: block;
    margin-bottom: 18px;
    color: #8fdcff;
    font-family: 'Manrope', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
}

.journey__step h3 {
    font-size: 0.98rem;
}

.journey__step p {
    margin-top: 8px;
    color: #aab7d0;
    font-size: 0.8rem;
    line-height: 1.55;
}

.assurance-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--line);
}

.assurance {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 22px;
    background: #fff;
}

.assurance > .ico {
    margin-top: 2px;
    color: var(--blue);
}

.assurance strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
}

.assurance span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Split et listes d'articles
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 80px);
    align-items: start;
}

.split--faq {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.split__copy h2 {
    max-width: 16ch;
}

.split__copy .lead {
    margin-top: 16px;
}

.split__copy > p:not(.eyebrow):not(.lead) {
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.93rem;
}

.split__copy .link-arrow,
.split__copy .btn {
    margin-top: 24px;
}

.article-list {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.article-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
}

.article-row:last-child {
    border-bottom: 0;
}

.article-row span {
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.8;
    text-transform: uppercase;
}

.article-row p {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
    display: grid;
    gap: 10px;
}

.faq details {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.25s;
}

.faq details[open] {
    border-color: rgba(30, 28, 168, 0.24);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px;
    color: var(--ink);
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '+';
    color: var(--blue);
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
}

.faq details[open] summary::after {
    content: '−';
}

.faq__body {
    padding: 0 20px 18px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Bibliothèque : statistiques, filtres
   -------------------------------------------------------------------------- */

.library-stats {
    display: inline-grid;
    grid-template-columns: repeat(4, auto);
    gap: 0;
    margin-top: 32px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.library-stats > div {
    padding: 14px 24px;
    border-right: 1px solid var(--line);
    text-align: center;
}

.library-stats > div:last-child {
    border-right: 0;
}

.library-stats strong {
    display: block;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.1;
}

.library-stats span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-bottom: 30px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.filter-group__label {
    margin-right: 4px;
    color: var(--muted-2);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.filter-btn {
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #566079;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.filter-btn:hover {
    border-color: #c3caee;
    color: var(--blue);
}

.filter-btn.is-active {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}

.filter-count {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.filter-empty {
    padding: 28px;
    border: 1px dashed var(--line-strong);
    border-radius: 16px;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Dossier détaillé
   -------------------------------------------------------------------------- */

.dossier-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 16px;
    margin-top: 22px;
}

.meta-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.meta-dot::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sky);
}

.dossier-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.dossier-aside {
    position: sticky;
    top: 112px;
    display: grid;
    gap: 14px;
}

.aside-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.aside-card__label {
    margin-bottom: 14px;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.aside-meta {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
}

.aside-meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}

.aside-meta > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.aside-meta dt {
    color: var(--muted-2);
    font-size: 0.7rem;
}

.aside-meta dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: right;
}

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

.aside-toc {
    display: grid;
    gap: 2px;
}

.aside-toc .aside-card__label {
    margin-bottom: 8px;
}

.aside-toc a {
    display: block;
    padding: 6px 0;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.45;
    transition: color 0.2s;
}

.aside-toc a:hover {
    color: var(--blue);
}

.dossier-content {
    min-width: 0;
}

.content-section {
    margin-bottom: clamp(38px, 5vw, 54px);
    scroll-margin-top: 112px;
}

.content-section h2 {
    margin-bottom: 14px;
    font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.content-section > p {
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.75;
}

.content-section > p + p {
    margin-top: 14px;
}

.content-section a,
.legal-content a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.callout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    border-radius: 14px;
}

.callout > .ico {
    margin-top: 2px;
}

.callout p {
    color: #3e4760;
    font-size: 0.94rem;
    line-height: 1.7;
}

.callout--risk {
    border: 1px solid #f0d9d5;
    border-left: 3px solid var(--red);
    background: #fdf7f6;
}

.callout--risk > .ico {
    color: var(--red);
}

.callout--insight {
    display: block;
    padding: 26px;
    border: 1px solid #dce3ff;
    border-left: 3px solid var(--blue);
    background: linear-gradient(135deg, #f2f4ff, #fbfcff);
}

.callout__label {
    margin-bottom: 8px;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.callout--insight p:last-child {
    color: #26324d;
    font-size: 1rem;
    line-height: 1.7;
}

.themes {
    scroll-margin-top: 100px;
}

.themes__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.themes__head h2 {
    font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.themes__head .eyebrow {
    margin-bottom: 10px;
}

.topic-list {
    display: grid;
    gap: 10px;
}

.topic {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.25s;
}

.topic[open] {
    border-color: rgba(30, 28, 168, 0.22);
}

.topic > summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 12px;
    padding: 17px 20px;
    cursor: pointer;
    list-style: none;
}

.topic > summary::-webkit-details-marker {
    display: none;
}

.topic__range {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: 7px;
    background: #eef0ff;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.67rem;
    font-weight: 800;
}

.topic__title {
    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.topic__count {
    color: var(--muted-2);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

.topic__chevron {
    color: var(--muted-2);
    transition: transform 0.25s var(--ease);
}

.topic[open] .topic__chevron {
    transform: rotate(180deg);
    color: var(--blue);
}

.point-list {
    display: grid;
    padding: 0 20px 8px;
    list-style: none;
}

.point-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.point__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f3f5fb;
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
}

.point-list h3 {
    font-size: 0.88rem;
    line-height: 1.4;
}

.point-list p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.65;
}

.dossier-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.dossier-nav__link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.dossier-nav__link:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 28, 168, 0.24);
    box-shadow: var(--shadow-sm);
}

.dossier-nav__link span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dossier-nav__link:not(.dossier-nav__link--next) span .ico {
    transform: rotate(180deg);
}

.dossier-nav__link strong {
    color: var(--ink);
    font-family: 'Manrope', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.dossier-nav__link--next {
    text-align: right;
}

.dossier-nav__link--next span {
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}

.contact-info .section-head {
    margin-bottom: 26px;
}

.agency-list {
    display: grid;
    gap: 12px;
}

.agency-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.agency-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #eef0ff;
    color: var(--blue);
}

.agency-card__name {
    color: var(--ink);
    font-family: 'Manrope', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
}

.agency-card__address {
    margin: 4px 0 9px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.agency-card a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 14px;
    color: var(--muted);
    font-size: 0.77rem;
    font-weight: 500;
    transition: color 0.2s;
}

.agency-card a:hover {
    color: var(--blue);
}

.agency-card a.agency-card__map {
    margin-top: 8px;
    color: var(--blue);
    font-weight: 600;
}

.contact-direct {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 15px 18px;
    border-radius: 12px;
    background: #eef4ff;
    color: #26324d;
    font-size: 0.8rem;
}

.contact-direct > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.contact-direct > a:last-child {
    color: var(--blue);
    font-weight: 700;
}

.contact-steps {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.contact-steps ol {
    display: grid;
    gap: 14px;
    list-style: none;
}

.contact-steps li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
}

.contact-steps li > span {
    color: var(--blue);
    font-family: 'Manrope', sans-serif;
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1.8;
}

.contact-steps strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
}

.contact-steps small {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 0.75rem;
}

.form-card {
    padding: clamp(24px, 3.4vw, 38px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-md);
    scroll-margin-top: 110px;
}

.form-card h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.form-intro {
    margin-top: 8px;
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 0.88rem;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 15px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
}

.alert .ico {
    margin-top: 1px;
}

.alert--success {
    border: 1px solid #cdeee3;
    background: #f0fbf6;
    color: #0b6b4d;
}

.alert--error {
    border: 1px solid #f0d9d5;
    background: #fdf7f6;
    color: #9b3025;
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.field {
    min-width: 0;
    margin-bottom: 17px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    color: #333d54;
    font-size: 0.78rem;
    font-weight: 600;
}

.field label .req {
    color: var(--red);
}

.field label .field__optional {
    color: var(--muted-2);
    font-size: 0.7rem;
    font-weight: 400;
}

.input,
.select,
.textarea {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fbfcff;
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.textarea {
    height: auto;
    min-height: 138px;
    padding: 11px 13px;
    line-height: 1.6;
    resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: #bcc5da;
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30, 28, 168, 0.11);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--red);
    background: #fffafa;
}

.field__error {
    margin-top: 5px;
    color: var(--red);
    font-size: 0.72rem;
    line-height: 1.4;
}

.field--consent {
    margin-top: 2px;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.55;
    cursor: pointer;
}

.consent input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--blue);
    flex: none;
}

.consent a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-card .btn-block {
    margin-top: 6px;
}

.form-note {
    margin-top: 12px;
    color: var(--muted-2);
    font-size: 0.7rem;
    text-align: center;
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Mentions légales
   -------------------------------------------------------------------------- */

.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.legal-content {
    max-width: 760px;
}

.legal-content .content-section h2 {
    font-size: 1.45rem;
}

.legal-content .content-section p {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.75;
}

.legal-aside {
    position: sticky;
    top: 112px;
}

/* --------------------------------------------------------------------------
   CTA et footer
   -------------------------------------------------------------------------- */

.cta {
    padding: clamp(48px, 6vw, 76px) 0;
    background: #fff;
}

.cta__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 32px;
    align-items: center;
    overflow: hidden;
    padding: clamp(34px, 5vw, 64px);
    border-radius: 28px;
    background:
        radial-gradient(540px 360px at 92% 0%, rgba(0, 165, 255, 0.4), transparent 65%),
        linear-gradient(120deg, #111633 0%, #1e1ca8 62%, #075f9e 100%);
    box-shadow: 0 30px 80px rgba(30, 28, 168, 0.24);
}

.cta__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 100% at 50% 50%, #000 20%, transparent 100%);
    pointer-events: none;
}

.cta__copy,
.cta__actions {
    position: relative;
    z-index: 1;
}

.cta__copy h2 {
    max-width: 20ch;
    color: #fff;
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}

.cta__copy p:last-child {
    max-width: 54ch;
    margin-top: 14px;
    color: #d3dcf4;
    font-size: 0.94rem;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.site-footer {
    padding: clamp(52px, 7vw, 80px) 0 26px;
    background: var(--ink);
    color: #aab7d0;
}

.footer__top {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr 0.8fr;
    gap: clamp(28px, 4vw, 56px);
    padding-bottom: 42px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__brand p {
    max-width: 34ch;
    margin-top: 18px;
    color: #8f9db9;
    font-size: 0.8rem;
    line-height: 1.65;
}

.footer__agreement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px !important;
    color: #c7d4ea !important;
    font-size: 0.74rem !important;
    font-weight: 600;
}

.footer__agreement .ico {
    margin-top: 2px;
    color: #8fdcff;
}

.footer__agreement span {
    color: #8f9db9;
    font-weight: 400;
}

.footer__col h3 {
    margin-bottom: 16px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.footer__col ul {
    display: grid;
    gap: 9px;
    list-style: none;
}

.footer__col ul a {
    color: #aab7d0;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.footer__col ul a:hover {
    color: #fff;
}

.footer-agency {
    margin-bottom: 18px;
}

.footer-agency strong {
    display: block;
    color: #e8edf8;
    font-size: 0.78rem;
    font-weight: 600;
}

.footer-agency p {
    margin: 4px 0 7px;
    color: #8f9db9;
    font-size: 0.72rem;
    line-height: 1.45;
}

.footer-agency a {
    display: block;
    margin-top: 3px;
    color: #aab7d0;
    font-size: 0.72rem;
    transition: color 0.2s;
}

.footer-agency a:hover {
    color: #fff;
}

.footer__mail,
.footer__site {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #aab7d0;
    font-size: 0.78rem;
    transition: color 0.2s;
}

.footer__mail:hover,
.footer__site:hover {
    color: #fff;
}

.footer__cta {
    margin-top: 14px;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 22px;
    color: #75829e;
    font-size: 0.67rem;
}

.footer__legal {
    flex-basis: 100%;
    order: 3;
    line-height: 1.5;
}

.footer__links {
    display: flex;
    gap: 18px;
}

.footer__links a {
    color: #8f9db9;
    transition: color 0.2s;
}

.footer__links a:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.page-404 {
    min-height: 58vh;
    display: grid;
    align-items: center;
}

.page-404__inner {
    max-width: 680px;
}

.page-404__code {
    margin-bottom: 10px;
    background: linear-gradient(120deg, var(--blue), var(--sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(5rem, 14vw, 10rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 0.9;
}

.page-404__inner h1 {
    margin-top: 8px;
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}

.page-404__inner .lead {
    margin-top: 14px;
}

.page-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

/* --------------------------------------------------------------------------
   Apparition au scroll
   -------------------------------------------------------------------------- */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.75s var(--ease),
        transform 0.75s var(--ease);
    transition-delay: var(--d, 0ms);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
    .header__inner {
        gap: 18px;
    }

    .nav a {
        padding: 8px 8px;
        font-size: 0.8rem;
    }
}

@media (max-width: 1100px) {
    .header__inner {
        gap: 12px;
    }

    .nav a {
        padding: 8px 6px;
        font-size: 0.76rem;
    }

    .brand__text small {
        display: none;
    }

    .footer__top {
        grid-template-columns: 1.4fr 0.7fr 1.1fr;
    }

    .footer__col:last-child {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px 24px;
        padding-top: 8px;
    }

    .footer__col:last-child h3 {
        width: 100%;
        margin-bottom: 0;
    }

    .footer__col:last-child .footer__mail,
    .footer__col:last-child .footer__site,
    .footer__col:last-child .footer__cta {
        margin: 0;
    }
}

@media (max-width: 980px) {
    .nav,
    .header__actions .btn {
        display: none;
    }

    .burger {
        display: inline-flex;
    }

    .hero__grid,
    .page-hero__grid {
        grid-template-columns: 1fr;
    }

    .video-feature {
        grid-template-columns: 1fr;
    }

    .video-frame {
        max-width: 680px;
    }

    .home-hero h1 {
        max-width: 18ch;
    }

    .hero__visual {
        max-width: 540px;
        width: 100%;
        margin-top: 10px;
    }

    .hero__proof {
        max-width: 620px;
    }

    .page-hero__copy h1 {
        max-width: 22ch;
    }

    .trust-strip__inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 0;
    }

    .trust-strip__item {
        padding: 14px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .trust-strip__item:last-child {
        border-bottom: 0;
    }

    .circuit,
    .party-cards,
    .library-grid,
    .dossier-grid,
    .feature-grid,
    .risk-grid,
    .benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .circuit::before {
        display: none;
    }

    .audience-grid,
    .split,
    .split--faq,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .audience-grid {
        gap: 16px;
    }

    .guarantees {
        grid-template-columns: repeat(2, 1fr);
    }

    .journey--four,
    .assurance-band {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__top {
        grid-template-columns: 1fr 1fr;
    }

    .footer__col:last-child {
        grid-column: auto;
        display: block;
        padding-top: 0;
    }

    .footer__col:last-child h3 {
        margin-bottom: 16px;
    }

    .footer__col:last-child .footer__mail,
    .footer__col:last-child .footer__site {
        margin-bottom: 10px;
    }

    .footer__col:last-child .footer__cta {
        margin-top: 14px;
    }

    .dossier-layout {
        grid-template-columns: 1fr;
    }

    .dossier-aside {
        position: static;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-aside {
        position: static;
        max-width: 420px;
    }

    .flow {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 460px;
        margin-inline: auto;
    }

    .flow__arrow {
        padding: 4px 0;
    }

    .flow__arrow .ico {
        transform: rotate(90deg);
        animation: none;
    }

    .cta__panel {
        grid-template-columns: 1fr;
    }

    .cta__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .wrap {
        width: min(100% - 32px, var(--wrap));
    }

    .topbar__agreement {
        display: none;
    }

    .topbar__inner {
        justify-content: center;
        min-height: 32px;
    }

    .topbar__links {
        gap: 16px;
    }

    .brand__text small {
        display: none;
    }

    .header__inner {
        padding: 11px 0;
    }

    .home-hero {
        padding-top: 48px;
    }

    .home-hero h1 {
        font-size: clamp(2rem, 7.6vw, 2.8rem);
    }

    .home-hero::after {
        background-position: 50% 88%;
        background-size: 470px auto;
        opacity: 0.24;
        mask-image: radial-gradient(ellipse 75% 30% at 50% 88%, #000 10%, transparent 78%);
        -webkit-mask-image: radial-gradient(ellipse 75% 30% at 50% 88%, #000 10%, transparent 78%);
    }

    .hero__lead {
        margin-top: 18px;
    }

    .hero__actions .btn,
    .page-hero__actions .btn,
    .cta__actions .btn {
        flex: 1 1 auto;
    }

    .hero__proof {
        gap: 10px 18px;
        margin-top: 26px;
        padding-top: 20px;
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr);
        padding: 10px 0;
    }

    .metric {
        padding: 18px 12px;
    }

    .metric:nth-child(2) {
        border-right: 0;
    }

    .metric:nth-child(3),
    .metric:nth-child(4) {
        border-top: 1px solid var(--line);
    }

    .metric:first-child {
        padding-left: 12px;
    }

    .circuit,
    .party-cards,
    .library-grid,
    .dossier-grid,
    .feature-grid,
    .risk-grid,
    .benefit-grid,
    .guarantees {
        grid-template-columns: 1fr;
    }

    .guarantees {
        gap: 1px;
    }

    .guarantee {
        padding: 22px;
    }

    .library-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .library-head .btn {
        width: 100%;
    }

    .journey--four,
    .assurance-band {
        grid-template-columns: 1fr;
    }

    .split {
        gap: 32px;
    }

    .split__copy h2 {
        max-width: none;
    }

    .library-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .library-stats > div {
        padding: 13px 16px;
    }

    .library-stats > div:nth-child(2) {
        border-right: 0;
    }

    .library-stats > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

    .filter-bar {
        align-items: flex-start;
        gap: 12px;
    }

    .filter-count {
        width: 100%;
        margin-left: 0;
        padding-top: 4px;
        border-top: 1px solid var(--line);
    }

    .dossier-aside {
        grid-template-columns: 1fr;
    }

    .aside-toc {
        display: none;
    }

    .themes__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .topic > summary {
        grid-template-columns: 44px minmax(0, 1fr) 18px;
        padding: 15px 16px;
    }

    .topic__count {
        display: none;
    }

    .point-list {
        padding: 0 16px 8px;
    }

    .dossier-nav {
        grid-template-columns: 1fr;
    }

    .field-grid {
        grid-template-columns: 1fr;
    }

    .contact-direct {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .footer__col:last-child {
        grid-column: auto;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer__legal {
        order: 0;
    }

    .cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta__actions .btn {
        width: 100%;
    }

    .page-hero {
        padding-top: 36px;
    }

    .hero-panel {
        padding: 22px;
    }

    .float-badge {
        display: none;
    }

    .convention-card {
        padding: 12px;
    }

    .article-row {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 14px 16px;
    }

    .compare th,
    .compare td {
        padding: 14px 16px;
    }
}

@media (max-width: 480px) {
    .brand__mark {
        width: 38px;
        height: 38px;
    }

    .brand__text strong {
        font-size: 0.96rem;
    }

    .topbar__links a:last-child {
        display: none;
    }

    .hero-eyebrow {
        font-size: 0.64rem;
        letter-spacing: 0.06em;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .party {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 11px;
        padding: 11px 12px;
    }

    .party__icon {
        width: 40px;
        height: 40px;
    }

    .convention-card__flow {
        font-size: 0.65rem;
        padding: 10px 11px;
    }

    .page-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .filter-group {
        gap: 5px;
    }

    .filter-btn {
        padding: 0 10px;
    }

    .dossier-card {
        padding: 20px;
    }

    .form-card {
        padding: 20px;
    }

    .footer__links {
        flex-direction: column;
        gap: 6px;
    }
}