@charset "utf-8";

:root {
    --black:   #1B2444;
    --accent:  #D97706;
    --white:   #ffffff;
    --surface: #f7f6f3;
    --border:  #e9e9e7;
    --muted:   #9b9a97;
    --noir:   #1B2444;   /* navy — fonds sombres / hero */
    --noir-2: #141B36;   /* navy plus profond */
    --creme:  #FFFFFF;   /* texte sur navy / fonds clairs */
    --dore:   #F5C77E;   /* amber clair — eyebrow / accents doux */
    --saumon: #D97706;   /* amber — CTA */
    --marron: #4A5170;   /* slate — texte secondaire / lignes */
    --saumon-fonce:#B45309;
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* ========== HEADER ========== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #F0F2F8;
    backdrop-filter: blur(21px);
    height: 56px;
    display: flex;
    align-items: center;
    transition:background .3s ease,padding .3s ease,box-shadow .3s ease
    
}
header.scrolled{
      background:rgba(27,36,68,.82);
      backdrop-filter:blur(12px);

}
header.scrolled nav{ 

  padding:14px 32px;
  box-shadow:0 12px 34px -18px rgba(0,0,0,.6);
}
header.scrolled nav a{ 
    color: #ffffff;
}
header.scrolled .hamburger-line{
    background: #ffffff;
}
header.scrolled .mobile-menu-toggle:hover{
    background: rgba(255, 255, 255, 0.12);
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    transition:background .3s ease,padding .3s ease,box-shadow .3s ease;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.logo:hover {
    opacity: 0.75;
}

.logo img {
    height: 30px;
    width: auto;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 2px;
}

.nav-links a {
    color: #1B2444;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s ease;
    letter-spacing: 0;
    white-space: nowrap;
}

.nav-links a:hover {
    background: #F5C77E;
    color: #1B2444;
}


.nav-links button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: #1B2444;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s ease;
    letter-spacing: 0;
    white-space: nowrap;
}

.nav-links button:hover {
    background: #f1f1ef;
    color: #1B2444;
}

.nav-links button.active {
    background: #f1f1ef;
    color: #1B2444;
}

.ev {
    background: #D97706 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 7px 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    margin-left: 20px;
}

.ev:hover {
    background: #b86004 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}


/* ========== MOBILE MENU ========== */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
    gap: 4px;
}

.mobile-menu-toggle:hover {
    background: #f1f1ef;
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background: #1B2444;
    border-radius: 2px;
    transition: all 0.25s ease;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

.mobile-nav {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    background: #ffffff;
    border: 1px solid #e9e9e7;
    border-radius: 16px;
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    z-index: 99;
    justify-content: center;
    margin:0 auto;
    text-align: center;
}

.mobile-nav.active {
    display: flex;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mobile-nav a {
    color: #1B2444;
    text-decoration: none;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.15s ease;
}

.mobile-nav a:hover {
    background: #f7f6f3;
}

.mobile-nav a.ev {
    background: #D97706;
    color: #ffffff !important;
    text-align: center;
    font-weight: 600;
    margin-top: 4px;
}

.mobile-nav a.external-link {
    border: 1px solid #e9e9e7;
    text-align: center;
}
/* ========== HERO ========== */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 56px;
}

.hero-content {
    max-width: 860px;
    padding: 96px 40px 80px;
    animation: heroAppear 0.7s ease-out;
}

@keyframes heroAppear {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    color: #1B2444;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}

.hero-description {
    max-width: 850px;
    margin: 0 auto 40px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.hero-description p {
    font-size: 1.3rem;
    color: #6b6b6b;
    line-height: 1.75;
    font-weight: 400;
}

.hero-subtitle {
    font-size: 0.72rem;
    color: #1B2444;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

/* CTA */
.cta-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    padding: 11px 28px;
    background: #D97706;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-button:hover {
    background: #b86004;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.28);
}

.cta-button.secondary {
    background: transparent;
    border: 1.5px solid #d5d5d3;
    color: #1B2444;
    box-shadow: none;
}

.cta-button.secondary:hover {
    background: #f7f6f3;
    border-color: #b8b8b6;
    box-shadow: none;
}

.cta-button.third {
    background: transparent;
    border: 1.5px solid #d5d5d3;
    color: #ffffff;
    box-shadow: none;
}

.cta-button.third:hover {
    background: #f7f6f3;
    border-color: #b8b8b6;
    color: #1B2444;
    box-shadow: none;
}

.cta-button.fourth {
    background: #1B2444;
    border: 1.5px solid #d5d5d3;
    color: #ffffff;
    box-shadow: none;
}

.cta-button.fourth:hover {
    background: #ffffff;
    border-color: #b8b8b6;
    color: #1B2444;
    box-shadow: none;
}

.cta-button.fifth {
    background: #ffffff;
    border: 1.5px solid #d5d5d3;
    color: #D97706;
    box-shadow: none;
}

.cta-button.fifth:hover {
    background: #D97706;
    border-color: #b8b8b6;
    color: #ffffff;
    box-shadow: none;
}

.cta-button.sixth {
    background: #D97706;
    border: 1.5px solid #d5d5d3;
    color: #ffffff;
    box-shadow: none;
}

.cta-button.sixth:hover {
    background: #ffffff;
    border-color: #b8b8b6;
    color: #D97706;
    box-shadow: none;
}

.cta-button.seven {
    background: #ffffff;
    border: 1.5px solid #d5d5d3;
    color: #1B2444;
    box-shadow: none;
}

.cta-button.seven:hover {
    background: #1B2444;
    border-color: #b8b8b6;
    color: #ffffff;
    box-shadow: none;
}

.cta-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--amber);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.cta-primary:hover {
  background: #F0AD2C;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232,160,32,.35);
}
/* Partners */
.partenaires {
    overflow: hidden;
}

.partenaires img {
    height: 80px;
    width: auto;
    margin: 0 40px;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    filter: grayscale(1);
}

.partenaires img:hover {
    opacity: 0.5;
}

/* ========== FEATURES SECTION ========== */
.features {
    padding: 112px 0 96px;
}
.features img{
    width: 50%;
}
.features-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.features-header {
    text-align: center;
    margin-bottom: 60px;
}

.features-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #D97706;
    margin-bottom: 16px;
    background: rgba(217, 119, 6, 0.08);
    padding: 4px 14px;
    border-radius: 50px;
}

.features-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 800;
    color: #1B2444;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
}

.features-subtitle {
    font-size: 1.05rem;
    color: #6b6b6b;
    font-weight: 400;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Cards grid */
.features-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
    margin-bottom: 44px;
}

.feature-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 44px 38px;
    border: 1px solid #e9e9e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    grid-column: 1/3;
    min-width: 535px;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.feature-card--accent {
    background: #1B2444;
    border-color: transparent;
    grid-column: 3/4;
}

.feature-card--accent:hover {
    box-shadow: 0 10px 40px rgba(27, 36, 68, 0.25);
}

.feature-card-icon {
    font-size: 2rem;
    line-height: 1;
}

.feature-card-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(217, 119, 6, 0.09);
    color: #D97706;
    border-radius: 50px;
    padding: 4px 12px;
    width: fit-content;
}

.feature-card-tag--light {
    background: rgba(245, 200, 66, 0.18);
    color: #F5C842;
}

.feature-card-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #1B2444;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.feature-card--accent .feature-card-title {
    color: #ffffff;
}

.feature-card-desc {
    font-size: 0.93rem;
    color: #6b6b6b;
    line-height: 1.75;
    font-weight: 400;
}

.feature-card--accent .feature-card-desc {
    color: rgba(255, 255, 255, 0.6);
}

.feature-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.feature-card-list li {
    font-size: 0.9rem;
    color: #37352f;
    font-weight: 400;
    padding-left: 22px;
    position: relative;
}

.feature-card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #D97706;
    font-weight: 700;
    font-size: 0.8rem;
    top: 2px;
}

.feature-card--accent .feature-card-list li {
    color: rgba(255, 255, 255, 0.78);
}

.feature-card-btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.18s ease;
    width: fit-content;
}

.feature-card-btn--primary {
    background: #D97706;
    color: #ffffff;
}

.feature-card-btn--primary:hover {
    background: #b86004;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.28);
}

.feature-card-btn--light {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.feature-card-btn--light:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

/* Stats bar */
.features-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 48px;
    width: 95%;
    margin: 0 auto;
}

.features-stat {
    text-align: center;
    flex: 1;
}

.features-stat-number {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #D97706;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}

.features-stat-label {
    display: block;
    font-size: 0.85rem;
    color: #1B2444;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.features-stat-divider {
    width: 2px;
    height: 36px;
    background: #1B2444;
    flex-shrink: 0;
}

.subtitle {
    font-size: 0.72rem;
    color: #1B2444;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    text-align: center;
}

/* ========== PROFIL SECTION ========== */
.profil {
    padding: 100px 40px;
    border-top: 1px solid #e9e9e7;
    color: #1B2444;
}

.profil .wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
    max-width: 1100px;
    margin: 0 auto;
}

.profil .one {
    flex: 0 0 auto;
}

.profil .two {
    flex: 1;
    text-align: left;
    margin-right: 0;
}

.profil img {
    width: 340px;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    display: block;
}

.profil .feature-card-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1B2444;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    line-height: 1.2;
}

.profil p {
    font-size: 0.97rem;
    color: #6b6b6b;
    line-height: 1.8;
    margin-bottom: 16px;
    font-weight: 400;
}

.contact .wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}

.contact .one{
    grid-column: 1;
    grid-row: 1 / 3;
}

.marquee {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scroll-left 18s linear infinite;
    margin-bottom: 75px;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


.popup {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 2rem;
  max-width: 560px;
  width: 90%;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.popup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #9b9a97;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.popup-close:hover {
  background: #f1f1ef;
  color: #1B2444;
}

.btn-primary {
  background: black;
  color: white;
  border: none;
}




        .for-who {
            padding: 5rem 2rem;
        }
        .for-who-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .for-who-container .subtitle{
            font-size: 1.03rem;
        }

        .section-eyebrow {
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #1B2444;
            margin-bottom: 1rem;
            text-align: center;
        }
        .section-title {
            font-size: clamp(1.8rem, 3.5vw, 2.75rem);
            font-weight: 800;
            line-height: 1.15;
            margin-bottom: 1rem;
            text-align: center;
            color: #1B2444;
        }
        .section-subtitle {
            font-size: 1.05rem;
            color: var(--muted);
            max-width: 560px;
            margin-bottom: 3rem;
            margin:0 auto; 
            text-align: center;
        }
        .for-who-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        .who-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
        }
        .who-card--accent {
            background: var(--black);
            border-color: transparent;
            color: var(--white);
        }
        .who-card-icon { font-size: 2rem; margin-bottom: 1rem; }
        .who-card h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 1.25rem;
        }
        .who-card--accent h3 { color: var(--white); }
        .who-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
        .who-list li {
            font-size: .9rem;
            display: flex;
            align-items: flex-start;
            gap: .5rem;
        }
        .who-card--accent .who-list li { color: rgba(255,255,255,0.85); }
        .who-badge {
            display: inline-block;
            margin-top: 1.5rem;
            background: #1B2444;
            color: #ffffff;
            font-size: .78rem;
            font-weight: 700;
            padding: .35rem .9rem;
            border-radius: 999px;
        }
 
        /* ── Fonctionnalités ── */
        .for-who-container .features-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .features {
            padding: 5rem 2rem;
        }
        .features-container { max-width: 1200px; margin: 0 auto; }
        .features-header { margin-bottom: 3rem; }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.25rem;
            align-items: start;
        }
        .feat-card {
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            transition: box-shadow .2s, transform .2s;
            background: #ffffff;
            text-align: left;
            position: relative;
            height: auto;
        }

        .feat-card img{
            display: flex;
            width: 60%;
            margin: 0 auto;
            text-align: center;
            margin-bottom: 20px;
        }

        .b img{
            margin-top: 40%;
        
        }

        .feat-card:hover {
            box-shadow: 0 8px 32px rgba(0,0,0,.07);
            transform: translateY(-3px);
        }
        .feat-icon {
            font-size: 1.75rem;
            margin-bottom: 1rem;
            display: block;
        }
        .feat-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: .6rem;
        }
        .feat-desc {
            font-size: 1.2rem;
            color: #1B2444;
            line-height: 1.65;
        }
 

        /* ── review ── */
        .rev {
            padding: 5rem 2rem;
        }
        .rev-container { max-width: 1200px; margin: 0 auto; }
        .rev-header { margin-bottom: 3rem; }
        .rev-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
        }
        .rev-card {
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            transition: box-shadow .2s, transform .2s;
            background: #ffffff;
            text-align: left;
            position: relative;
            height: auto;
        }

        .rev-card img{
            width: 100%;
        }

        .b img{
            margin-top: 40%;
        
        }

        .rev-card .z::before {
            content: '\201C';
            position: absolute;
            top: -9px;
            left: 20px;
            font-size: 3rem;
            font-family: Georgia, serif;
            color: #1B2444;
            line-height: 1;
        }

        .rev-card .z::after {
            content: '\201D';
            position: absolute;
            bottom:-32px;
            right: 20px;
            font-size: 3rem;
            font-family: Georgia, serif;
            color: #1B2444;
            line-height: 1;
        }

        .rev-card:hover {
            box-shadow: 0 8px 32px rgba(0,0,0,.07);
            transform: translateY(-3px);
        }
        .rev-icon {
            font-size: 1.75rem;
            margin-bottom: 1rem;
            display: block;
        }
        .rev-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: .6rem;
        }
        .rev-desc {
            font-size: 1.2rem;
            color: #1B2444;
            line-height: 1.65;
        }

        .rev-grid li {
            font-size: 1.2rem;

        }

        .rev-card .enf::before {
            content: '\201C';
            position: absolute;
            top: -9px;
            left: 20px;
            font-size: 3rem;
            font-family: Georgia, serif;
            color: #D97706;
            line-height: 1;
        }

        .rev-card .enf::after {
            content: '\201D';
            position: absolute;
            bottom:-32px;
            right: 20px;
            font-size: 3rem;
            font-family: Georgia, serif;
            color: #D97706;
            line-height: 1;
        }
        
        .avis-hidden {
            display: none;
        }
                /* ── Stats ── */
        .atelier .stats{
            background: #D97706;
        }

        .atelier .stat-item{
            background: #D97706;
        }
        .stats {
            background: #1B2444;
            padding: 4rem 2rem;
        }
        .stats-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .stats-eyebrow {
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #ffffff;
            text-align: center;
            margin-bottom: 2.5rem;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: #ffffff;
        }
        .stat-item {
            background: #1B2444;
            padding: 2rem 1.5rem;
            text-align: center;
        }
        .stat-number {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 800;
            color: #ffffff;
            display: block;
        }
        .stat-label {
            font-size: .85rem;
            color: #ffffff;
            margin-top: .25rem;
        }
 
        /* ── Comparatif ── */
        .comparatif {
            padding: 5rem 2rem;
            background: #ffffff;
        }
        .comparatif-container { max-width: 1200px; margin: 0 auto; }
        .comp-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 2.5rem;
            font-size: .9rem;
            margin: 0 auto;
            text-align: center;
        }
        .comp-table th {
            padding: 1rem 1.25rem;
            text-align: left;
            font-weight: 700;
            font-size: .8rem;
            letter-spacing: .05em;
            text-transform: uppercase;
            border-bottom: 2px solid var(--border);
        }
        .comp-table th:first-child { border-bottom-color: transparent; }
        .comp-table th.col-silence {
            background: var(--black);
            color: var(--white);
            border-radius: 12px 12px 0 0;
        }
        .comp-table td {
            padding: .9rem 1.25rem;
            border-bottom: 1px solid var(--border);
            color: #1B2444;
        }
        .comp-table td:first-child { font-weight: 600; color: var(--black); }
        .comp-table td.col-silence {
            background: rgba(0,0,0,.03);
            font-weight: 700;
            color: var(--black);
        }
        .check { color: #22c55e; font-size: 1rem; }
        .cross { color: #ef4444; font-size: 1rem; }
 
        /* ── Tarifs ── */
        .tarifs {
            padding: 5rem 2rem;
            text-align: center;
        }

        .tarifs a{
            margin: 0 auto;
        }
        .tarifs-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .tarifs-grid {
            display: grid;
            gap: 1.5rem;
            margin-top: 3rem;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
        .tarif-card {
            position: relative;
            border: 3.5px solid var(--border);
            border-radius: 20px;
            padding: 2.25rem;
            background: #FFFFFF;
        }

        .tarif-card--accent {
            background: var(--black);
            border-color: transparent;
            color: var(--white);
        }
        .tarif-tag {
            display: inline-block;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            background: #D97706;
            color: #ffffff;
            padding: .3rem .75rem;
            border-radius: 999px;
            margin-bottom: 1.25rem;
        }
        .tarif-price {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: .3rem;
            color: #1B2444;
        }
        .tarif-card--accent .tarif-price { color: var(--accent); }
        .tarif-period {
            font-size: .85rem;
            color: #1B2444;
            margin-bottom: 1.5rem;
        }
        .tarif-card--accent .tarif-period { color: rgba(255,255,255,0.65); }
        .tarif-desc {
            font-size: .9rem;
            line-height: 1.7;
            color: #1B2444;
            margin-bottom: 1.75rem;
        }
        .tarif-card--accent .tarif-desc { color: rgba(255,255,255,0.8); }
        .tarif-btn {
            display: inline-block;
            padding: .8rem 1.5rem;
            border-radius: 999px;
            font-weight: 700;
            font-size: .875rem;
            text-decoration: none;
            background: #D97706;
            color: #ffffff;
            transition: transform .2s;
        }
        .tarif-btn:hover { transform: translateY(-2px); }
        .tarif-btn--ghost {
            background: transparent;
            border: 1.5px solid rgba(255, 255, 255, 0.3);
            color: #ffffff;
        }
        .tarif-btn--ghost:hover { border-color: #1B2444; }


/* ========== FOOTER ========== */
.copy{
    margin: 0 auto;
    text-align: center;
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d5d5d3;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9b9a97;
}

.agents-left {
  width: 360px;
  flex-shrink: 0;
  padding: 28px 24px;
  border-right: 1px solid #e9e9e7;
  display: flex;
  flex-direction: column;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1000px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-nav .nav-dropdown-menu--large {
        display: none !important;
        position: static;
        transform: none;
        min-width: 0;
        width: 100%;
        margin-top: 6px;
        box-shadow: none;
        flex-direction: column;
    }

    .mobile-nav .nav-dropdown.open .nav-dropdown-menu--large {
        display: flex !important;
    }

    .mobile-nav .nav-dropdown-toggle {
        padding: 11px 16px;
        border-radius: 8px;
        color: #1B2444;
        text-decoration: none;
    }
}

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
    /* Footer grid → 2 columns */
    footer .wrap {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    footer .wrap .one  { grid-column: 1; grid-row: 1; }
    footer .wrap .two  { grid-column: 2; grid-row: 1; }
    footer .wrap .three{ grid-column: 1; grid-row: 2; }
    footer .wrap .four { grid-column: 2; grid-row: 2; }

    /* Comparatif table: hide 3rd column on tablet */
    .comp-table th:last-child,
    .comp-table td:last-child {
        display: none;
    }

    /* Stats → 2×2 */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Tarifs → stack */
    .tarifs-grid {
    }

    /* For-who → stack */
    .for-who-grid {
        grid-template-columns: 1fr;
    }

    .for-who-container .features-grid {
    grid-template-columns: repeat(2, 1fr);
}
    /* Features grid silence page → 2 cols */
    .feat-card ~ .feat-card ~ .feat-card {
        grid-column: auto;
    }
    .fund-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}
.rev-grid {
    grid-template-columns: repeat(2, 1fr);
}
.step-visual{
        display: none;
    }
    .step-visual.browser{
        display: none;
    }
    /* Agents → colonne sur tablet */
    .agents-wrap {
        flex-direction: column;
        max-width: 100%;
    }
    .agents-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9e9e7;
    }
    .agents-right {
        min-height: 340px;
    }
    .av-panel img,
    .av-panel video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
    nav {
        padding: 0 20px;
    }

    /* Hero */
    .hero-content {
        padding: 80px 24px 60px;
    }
    .hero h1 {
        font-size: clamp(1.9rem, 7vw, 2.8rem);
    }
    .hero-description p {
        font-size: 1rem;
    }

    /* CTA buttons */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-button {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    /* Features (index) */
    .features {
        padding: 64px 0 48px;
    }
    .features-container {
        padding: 0 20px;
    }
    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .for-who-container .features-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
}
    .fund-grid {
    grid-template-columns: 1fr !important;
}
    .feature-card {
        padding: 28px 22px;
    }
    .feature-card-btn {
        width: 100%;
        display: block;
        text-align: center;
    }

    /* Stats bar */
    .features-stats {
        flex-direction: column;
        gap: 20px;
        padding: 28px 20px;
    }
    .features-stat-divider {
        width: 48px;
        height: 1px;
    }

    /* Profil */
    .profil {
        padding: 64px 20px;
    }
    .profil .wrap {
        flex-direction: column;
        gap: 28px;
    }
    .profil img {
        width: 100%;
        max-width: 440px;
    }
    .profil .feature-card-title {
        font-size: 1.6rem;
    }

    /* Section titles */
    .section-title {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
    }
    .section-subtitle {
        font-size: 0.95rem;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* Silence page: features grid → 1 col */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Comparatif: scrollable on mobile */
    .comparatif {
        padding: 3rem 0;
    }
    .comparatif-container {
        padding: 0 16px;
        overflow-x: auto;
    }
    .comp-table {
        min-width: 480px;
        font-size: 0.8rem;
    }
    .comp-table th,
    .comp-table td {
        padding: 0.75rem 0.9rem;
    }

    /* Restore hidden column on mobile (scroll instead) */

    .comp-table th:last-child,
    .comp-table td:last-child {
        display: none;
    }

    /* Tarifs cards */
    .tarif-card {
        padding: 1.75rem 1.25rem;
    }
    .tarif-price {
        font-size: 2rem;
    }

    /* FAQ */
    .faq {
        padding: 3rem 1rem;
    }
    summary {
        font-size: 0.9rem;
        padding: 0.9rem 1rem;
    }

    /* CTA final */
    .cta-final {
        padding: 4rem 1.25rem;
    }
    .cta-final-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-final-buttons .cta-button {
        width: 100%;
        max-width: 300px;
    }

    /* Pricing cards (tarifs.html) */
    .cards {
        flex-direction: column;
        align-items: center;
        padding: 2rem 1rem;
    }
    .card {
        width: 100%;
        max-width: 360px;
    }
    .step-visual{
        display: none;
    }
    .step-visual.browser{
        display: none;
    }
    /* Agents mobile — menu à onglets façon notion.com */
    .agents-wrap {
        border-radius: 12px;
    }

    /* La liste devient une barre d'onglets (pills) qui défile horizontalement */
    .agents-left {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 8px;
        padding: 14px 16px;
        border-right: none;
        border-bottom: 1px solid #e9e9e7;
        scrollbar-width: none;
    }
    .agents-left::-webkit-scrollbar {
        display: none;
    }

    /* Le titre et le sous-titre du bloc passent au-dessus des onglets, en compact */
    .agents-tag {
    }
    .agents-title {
        width: 100%;
        font-size: 15px;
        margin-bottom: 10px;
    }

    /* Chaque item devient une pastille (icône + libellé), sans description visible */
    .agent-item {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-top: none;
        border: 1px solid #e9e9e7;
        border-radius: 999px;
        background: #fff;
        scroll-snap-align: start;
        transition: background 0.15s, border-color 0.15s;
    }
    .agent-item.active {
        background: #1B2444;
        border-color: #1B2444;
    }
    .agent-item.active .agent-label {
        color: #fff;
    }

    .agent-ico {
        width: 26px;
        height: 26px;
    }
    .agent-ico i {
        font-size: 13px;
    }

    .agent-label {
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        color: #1B2444;
        display: none;
    }

    /* La description ne s'affiche plus dans la liste : elle passe en légende sous le média */
    .agent-desc {
        display: none !important;
    }

    .agents-right {
        min-height: 260px;
    }
    .av-panel img,
    .av-panel video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .agents-mobile-caption {
        display: block;
        padding: 14px 20px 18px;
        font-size: 13.5px;
        line-height: 1.5;
        color: #6b6b6b;
        text-align: center;
    }


    /* Footer → single column */
    footer .wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    footer .wrap .one,
    footer .wrap .two,
    footer .wrap .three,
    footer .wrap .four {
        grid-column: 1;
        grid-row: auto;
    }
    footer .wrap .one img {
        padding-top: 0;
        width: 120px;
    }
    footer {
        padding: 28px 20px 20px;
    }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .features-stats {
        padding: 20px 16px;
    }
    .feature-card {
        padding: 24px 18px;
    }
    .hero h1 {
        font-size: clamp(1.7rem, 8vw, 2.4rem);
        letter-spacing: -0.02em;
    }
    .hero-content {
        padding: 72px 18px 48px;
    }
    .partenaires img {
        height: 56px;
        margin: 0 20px;
    }
    .features-stat-number {
        font-size: 1.6rem;
    }
    .profil .feature-card-title {
        font-size: 1.4rem;
    }
    .tarif-price {
        font-size: 1.75rem;
    }
    .cta-final h2 {
        font-size: 1.5rem;
    }

    .rev-grid {
    grid-template-columns: 1fr;
}
.rev-grid li {
    font-size: 1rem;
}
.rev-card {
    padding: 1.5rem;
}
.fund-grid {
    grid-template-columns: 1fr !important;
}
.agents-right {
    min-height: 200px;
}
.av-panel img,
.av-panel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-item {
    padding: 7px 12px;
}
.agent-label {
    font-size: 12px;
}
.agents-mobile-caption {
    font-size: 13px;
    padding: 12px 16px 16px;
}

}








        /* ── FAQ ── */
        .faq {
            padding: 5rem 2rem;
        }
        .faq-container { max-width: 760px; margin: 0 auto; }
        .faq-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: .5rem; }
        details {
            border-radius: 12px;
            background: var(--creme);
            overflow: hidden;
        }

        details:hover{
            background: var(--dore);
        }
        summary {
            padding: 1.1rem 1.5rem;
            font-weight: 600;
            font-size: .95rem;
            cursor: pointer;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        summary::after {
            content: '+';
            font-size: 1.25rem;
            color: #1B2444;
            transition: transform .2s;
        }
        details[open] summary::after {
            transform: rotate(45deg);
        }
        .faq-answer {
            padding: 0 1.5rem 1.25rem;
            font-size: .9rem;
            color: #1B2444;
            line-height: 1.7;
        }
 

                /* ── CTA final ── */
        .cta-finalAtelier {
            padding: 6rem 2rem;
            background: #1B2444;
            text-align: center;
            position: relative;
            overflow: hidden;
            margin-bottom: 110px;
        }
        .cta-finalAtelier::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .cta-finalAtelier h2 {
            font-size: clamp(1.75rem, 4vw, 3rem);
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 1rem;
        }
        .cta-finalAtelier p {
            color: #ffffff ;
            font-size: 1rem;
            margin-bottom: 2.25rem;
        }

        .cta-final {
            padding: 6rem 2rem;
            background: #1B2444;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .cta-final::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        .cta-final-inner { position: relative; z-index: 1; }
        .cta-final h2 {
            font-size: clamp(1.75rem, 4vw, 3rem);
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 1rem;
        }
        .cta-final p {
            color: #ffffff ;
            font-size: 1rem;
            margin-bottom: 2.25rem;
        }
        .cta-final-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }


  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;color:var(--noir);background:
        radial-gradient(120% 90% at 80% 10%, #F0F2F8, transparent 55%),
        radial-gradient(100% 80% at 10% 90%, #F0F2F8, transparent 50%),
         #F0F2F8;line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:'Inter',sans-serif;line-height:1.08;letter-spacing:-0.02em}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
  .accent{color:var(--saumon)}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:1rem;padding:15px 28px;border-radius:999px;text-decoration:none;transition:.2s;border:none;cursor:pointer; text-align: center; justify-content: center;}
  .btn-primary{background:var(--saumon);color:var(--creme)}
  .btn-primary:hover{background:var(--saumon-fonce);transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--creme);border:1.5px solid rgba(246,246,246,.35)}
  .btn-ghost:hover{border-color:var(--creme)}
  .btn-dark{background:var(--noir);color:var(--creme)}
  .btn-dark:hover{background:var(--marron)}

.hero{min-height:100vh;
        color:var(--creme);display:flex;align-items:center;position:relative;overflow:hidden}
  .hero-grain{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .hero-inner{position:relative;text-align:center;max-width:920px;margin:0 auto;padding:120px 28px 80px}
  .eyebrow{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dore);font-weight:600;margin-bottom:26px}
  .hero h1{font-size:clamp(2.6rem,6.5vw,5.2rem);font-weight:800}
  .hero h1 em{font-style:normal;color:var(--saumon)}
  .hero .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:rgba(246,246,246,.82);max-width:640px;margin:28px auto 40px}
  .hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:rgba(246,246,246,.5);font-size:.8rem;letter-spacing:.1em}

  /* ============================================================
     2. LE TRUC DE FOU — bandeau transformation
     ============================================================ */
  .wow{background:var(--noir-2);color:var(--creme);padding:90px 0;text-align:center}
  .wow h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:800}
  .wow .three{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:10px}
  .wow .three b{color:var(--creme)}
  .wow p{color:var(--creme);margin-top:22px;font-size:1.1rem}

  /* ============================================================
     3. L'ADN — piliers, INDÉPENDANTS des formats
     ============================================================ */
  .dna{padding:110px 0}
  .section-head{text-align:center;max-width:680px;margin:0 auto 60px}
  .section-head .tag{display:inline-block;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--saumon-fonce);font-weight:700;background:rgba(217,119,6,.12);padding:7px 16px;border-radius:999px;margin-bottom:18px}
  .section-head h2{font-size:clamp(2rem,4vw,3rem);font-weight:800}
  .section-head p{color:var(--marron);font-size:1.1rem;margin-top:18px}
  .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
  .pillar{background:#fff;border:1px solid #e6e8f0;border-radius:20px;padding:36px 32px;transition:.2s}
  .pillar:hover{transform:translateY(-4px);box-shadow:0 20px 50px -25px rgba(27,36,68,.45)}
  .pillar .ic{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,var(--noir),var(--saumon));display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:20px}
  .pillar h3{font-size:1.3rem;margin-bottom:10px}
  .pillar p{color:var(--marron)}

  /* ============================================================
     4. LES FORMATS — la cerise sur le gâteau (plus bas !)
     ============================================================ */
  .formats{padding:110px 0;}
  .fcards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:10px}
  .fcard{border-radius:24px;padding:44px 40px;display:flex;flex-direction:column;min-height:380px}
  .fcard.atelier{background:#fff;color:var(--noir);border:1px solid #e6e8f0}
  .fcard.silence{background:linear-gradient(160deg,var(--noir),#243057);color:var(--creme)}
  .fcard .ftag{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;opacity:.7;margin-bottom:14px}
  .fcard h3{font-size:1.9rem;font-weight:800;margin-bottom:14px}
  .fcard .punch{font-size:1.15rem;font-weight:600;margin-bottom:18px}
  .fcard.atelier .punch{color:var(--saumon-fonce)}
  .fcard.silence .punch{color:var(--saumon)}
  .fcard .desc{font-size:.98rem;margin-bottom:auto;opacity:.85}
  .fcard .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

  /* ============================================================
     5. PREUVE SOCIALE
     ============================================================ */
  .proof{padding:80px 0;text-align:center}
  .proof .lbl{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--marron);margin-bottom:30px}
  .logos{display:flex;justify-content:center;align-items:center;gap:46px;flex-wrap:wrap;opacity:.65;margin-bottom:70px;font-weight:700;color:var(--marron)}
  .logos span{font-size:1.05rem}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;background:var(--noir);border-radius:24px;padding:48px 30px;color:var(--creme)}
  .stat .num{font-family:'Inter';font-size:2.6rem;font-weight:800;color:var(--saumon)}
  .stat .cap{font-size:.85rem;letter-spacing:.05em;color:var(--dore);text-transform:uppercase;margin-top:6px}

  /* ============================================================
     6. CTA FINAL + FOOTER
     ============================================================ */
  .final{padding:120px 0;text-align:center}
  .final h2{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;max-width:760px;margin:0 auto 22px}
  .final p{color:var(--marron);font-size:1.15rem;margin-bottom:36px}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
  .foot .ico{gap: 6px; margin: auto auto; display:flex; align-items:center;}
  .foot-links{display:flex;gap:24px;flex-wrap:wrap}
    footer a{color:rgba(246,246,246,.7);text-decoration:none}
  footer a:hover{color:var(--creme)}
    footer{background:var(--noir);color:rgba(246,246,246,.7);padding:50px 0;font-size:.9rem}

  @media (max-width: 768px) {
    .foot {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
    }
    .foot .logo img {
      height: 26px;
    }
    .foot-links {
      justify-content: center;
      gap: 14px 20px;
      order: 2;
    }
    .foot .ico {
      order: 3;
      gap: 14px;
    }
    .foot .copy {
      order: 4;
      font-size: 0.82rem;
    }
  }

  /* ---------- bandeau logos (remonté, façon Notion) ---------- */
  .trust{padding:42px 0 10px;text-align:center}
  .trust .lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--marron);margin-bottom:22px}
  .trust .logos{display:flex;justify-content:center;align-items:center;gap:46px;flex-wrap:wrap;opacity:.6;font-weight:700;color:var(--marron)}
  .trust .logos span{font-size:1.02rem}

  /* ============================================================
     ÉTAPES — switcher interactif façon Notion (clic → anim latérale)
     ============================================================ */
  .steps{padding:110px 0;color:var(--noir)}
  .steps .section-head h2{color:var(--noir)}
  .steps .section-head p{color:#1B2444}
  .steps .section-head .tag{background:rgba(217,119,6,.12);color:var(--saumon-fonce)}
  .steps-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:50px;align-items:center}
  .steps-list{display:flex;flex-direction:column;gap:6px}
  .step-tab{text-align:left;background: #FAF8FB;border:none;border-left:2px solid var(--noir);padding:16px 22px;cursor:pointer;border-radius:0 12px 12px 0;transition:.25s;color:var(--noir);font-family:inherit}
  .step-tab:hover{background:rgba(255, 0, 0, 0.04)}
  .step-tab.active{background:rgba(217,119,6,.12);border-left:2px solid var(--saumon); color: var(--accent);}
  .step-tab .st-num{font-family:'Inter';font-size:.78rem;color:var(--noir);font-weight:700;letter-spacing:.12em}
  .step-tab h3{font-size:1.18rem;margin:3px 0 0;font-family:'Inter'}
  .step-tab p{font-size:.92rem;color:var(--noir);max-height:0;overflow:hidden;transition:max-height .35s ease,margin .35s ease}
  .step-tab.active p{max-height:90px;margin-top:8px}
  .step-visual{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:#0f1430;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
  .step-shot{position:absolute;top:14px;left:16px;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--noir);z-index:2}
  .step-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transform:translateX(28px);transition:opacity .45s ease,transform .45s ease;pointer-events:none;padding:30px;text-align:center; background: radial-gradient(120% 90% at 80% 10%, rgba(217,119,6,.28), transparent 55%),
        radial-gradient(100% 80% at 10% 90%, rgba(245,199,126,.14), transparent 50%),
         #FAF8FB}
  .step-panel.active{opacity:1;transform:translateX(0)}
  .step-panel .big{font-size:3.4rem}
  .step-panel .cap{font-family:'Inter';font-size:1.35rem;font-weight:700; color: var(--noir)}
  .step-panel .sub{color:var(--noir);font-size:.95rem;max-width:340px}

  /* ---------- bandeau hybride (formats pas figés) ---------- */
  .hybrid{margin-top:34px; margin-bottom:34px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:linear-gradient(120deg,#fbecd6,#fdf6ec);border:1px solid #f0dcbf;border-radius:18px;padding:26px 32px}
  .hybrid p{margin:0;color:var(--noir);font-size:1.02rem}
  .hybrid strong{color:var(--saumon-fonce)}
  .hybrid .btn{align-items: center; margin: 0 auto;}
  @media(max-width:820px){
    nav{padding:18px 22px}.nav-links{display:none}
    .pillars,.fcards,.stats,.steps-grid{grid-template-columns:1fr}
    .stats{padding:30px}
    .step-tab p{max-height:90px;margin-top:8px}
  }
#F0F2F8
  /* ============================================================
     CRAFT — profondeur, mouvement, apparitions (sans photo)
     ============================================================ */

  /* nav qui se solidifie au scroll */

  /* sheen qui traverse le bouton principal au survol */


  /* hero : mesh dégradé animé + éléments flottants */
  .hero-inner{z-index:3}
  .hero-mesh{position:absolute;inset:-25% -15%;z-index:0;pointer-events:none;
    background:
      radial-gradient(38% 40% at 22% 32%, rgba(217,119,6,.40), transparent 60%),
      radial-gradient(34% 44% at 80% 18%, rgba(245,199,126,.24), transparent 62%),
      radial-gradient(46% 42% at 66% 82%, rgba(217,119,6,.40), transparent 60%);
    filter:blur(24px);animation:meshFloat 20s ease-in-out infinite alternate}
  @keyframes meshFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-4%,3%,0) scale(1.1)}}
  .hero-decor{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  .chip{position:absolute;background:#d977067c;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:14px;padding:11px 16px;font-size:.82rem;font-weight:600;color: var(--noir);display:flex;gap:9px;align-items:center;box-shadow:0 24px 48px -24px rgba(0,0,0,.6);animation:floaty 7s ease-in-out infinite}
  .chip .e{font-size:1.15rem}
  .chip-1{top:21%;left:6%;animation-delay:0s}
  .chip-2{top:63%;left:10%;animation-delay:1.4s}
  .chip-3{top:25%;right:7%;animation-delay:.7s}
  .chip-4{top:69%;right:9%;animation-delay:2.1s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
  @media(max-width:980px){.chip{display:none}}

  /* visuel des étapes en fenêtre navigateur */
  .step-visual.browser{background:linear-gradient(160deg,var(--marron),var(--marron))}
  .bf-bar{position:absolute;top:0;left:0;right:0;height:40px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;padding:0 16px;z-index:3}
  .bf-bar .dot{width:11px;height:11px;border-radius:50%;margin-right:7px}
  .bf-bar .url{margin-left:14px;font-size:.72rem;color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);padding:5px 16px;border-radius:8px}
  .url{margin-left:14px;font-size:.72rem;color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);padding:5px 16px;border-radius:8px}
  .browser .step-shot{top:52px;left:18px}
  .browser .step-panel{top:40px}
  .bf-progress{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
  .bf-progress i{width:8px;height:8px;border-radius:50%;background:var(--dore);transition:.35s ease}
  .bf-progress i.on{background:var(--noir);width:22px;border-radius:4px}

  /* apparitions au scroll */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .hero-mesh,.chip{animation:none}
  }


.hero-grain{position:absolute;inset:0;opacity:.04;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .hero-inner{position:relative;text-align:center;max-width:920px;margin:0 auto;padding:120px 28px 80px}
  .eyebrow{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dore);font-weight:600;margin-bottom:26px}
  .hero h1{font-size:clamp(2.6rem,6.5vw,5.2rem);font-weight:800}
  .hero h1 em{font-style:normal;color:var(--saumon)}
  .hero .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:rgba(27,36,68,.45);max-width:640px;margin:28px auto 40px}
  .hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:rgba(246,246,246,.5);font-size:.8rem;letter-spacing:.1em}

  







/*Tarifs */
  .funding{padding:80px 0}
  .fund-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
  .fund{background:#fff;border:1px solid #e8eaf1;border-radius:16px;padding:24px 20px;text-align:center}
  .fund .e{font-size:1.7rem}
  .fund h4{font-family:'Inter';font-size:1rem;margin:10px 0 6px}
  .fund p{color:var(--marron);font-size:.86rem}

  .product{padding:80px 0 30px}
  .product .head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:34px}
  .product .head h2{font-size:2rem;font-weight:800}
  .product .head .badge{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--saumon-fonce);background:rgba(217,119,6,.12);padding:6px 14px;border-radius:999px}
  .product .head .sub{color:var(--marron);width:100%;font-size:1.05rem}

  .devis{background:linear-gradient(160deg,var(--noir),#243057);color:var(--creme);border-radius:24px;padding:48px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
  .devis h3{font-size:1.7rem;font-weight:800;margin-bottom:12px}
  .devis p{color:rgba(255,255,255,.78);margin-bottom:14px}
  .devis ul{list-style:none;margin-top:8px}
  .devis li{padding:7px 0 7px 26px;position:relative;color:rgba(255,255,255,.85)}
  .devis li::before{content:"✓";position:absolute;left:0;color:var(--saumon);font-weight:700}
  .devis .box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:30px;text-align:center}
  .devis .box .big{font-family:'Inter';font-size:1.8rem;font-weight:800}
  .devis .box .small{color:rgba(255,255,255,.6);font-size:.9rem;margin:6px 0 22px}
  .devis .box .btn{width:100%;justify-content:center}


  @media (max-width: 820px) {
  .product .head h2{font-size:1.6rem}
  .devis{
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 28px;
    border-radius: 18px;
  }
  .devis h3{font-size:1.35rem}
  .devis .box{padding: 24px 20px}
}







  .agents-wrap {
  display: flex;
  border: 1px solid #e9e9e7;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  margin: 0 auto;
  max-width: 88%;
  
}



.agents-tag {
  font-size: 12px;
  color: #9b9a97;
  margin-bottom: 4px;
}

.agents-title {
  font-size: 17px;
  font-weight: 700;
  color: #1B2444;
  margin-bottom: 16px;
  line-height: 1.3;
}

.agent-item {
  display: flex;
  align-items: center;     
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #e9e9e7;
  cursor: pointer;
  transition: opacity 0.15s;
}

.agent-item:hover { opacity: 0.7; }

.agent-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.agent-ico i { font-size: 18px; }

.agent-label {
  font-size: 16px;
  font-weight: 600;
  color: #1B2444;

  }

.agent-desc {
  font-size: 14px;
  color: #9b9a97;
  line-height: 1.4;
  margin-top: 3px;
  text-align:left;
}

.agents-right {
  flex: 1;
  background:transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

.av-panel {
  display: none;
  position: absolute;
  inset: 0;
}

.av-panel.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.av-panel img,
.av-panel video {
  width: 90%;
  height: 90%;
  object-fit: cover;
  border-radius: 8px;
  margin: 0;
}

/* Légende mobile (masquée sur desktop, où la description est déjà visible dans la liste) */
.agents-mobile-caption {
  display: none;
}















.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav-dropdown-toggle .ti {
  font-size: 20px;
  transition: transform 0.2s;
}
.nav-dropdown:hover .nav-dropdown-toggle .ti {
  transform: rotate(180deg);
}

.nav-dropdown-menu--large {
  display: none;
  position: absolute;
  top: calc(100%);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid #e9e9e7;
  border-radius: 16px;
  padding: 20px;
  padding-left: 35px;
  padding-right: 35px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
  z-index: 200;
  flex-direction: row;
  gap: 8px;
  min-width: 485px;
}

.nav-dropdown:hover .nav-dropdown-menu--large {
  display: flex;
}


.dd-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dd-col-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9b9a97;
  padding: 0 10px 8px;
}

.dd-sep {
  width: 1px;
  background: #e9e9e7;
  margin: 0 8px;
}

.dd-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #1B2444;
  transition: background 0.15s;
}

.dd-card:hover { background: #f5f5f3; }

.dd-card-ico { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }

.dd-card strong { display: block; font-size: 14px; font-weight: 600; color: #1B2444; }
.dd-card small  { display: block; font-size: 12.5px; color: #9b9a97; margin-top: 1px; }




.proof-grid-wrap {
  position: relative;
}

.proof-grid-wrap.collapsed .features-grid {
  max-height: 520px;
  overflow: hidden;
}

.proof-fade {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, #f0f0f5);
  pointer-events: none;
}

.proof-grid-wrap.collapsed .proof-fade {
  display: block;
}

.sep {
    margin-top: 8px;
    margin-bottom: 8px;
    border-top: 2px solid var(--muted);
    border-radius: 5px;
}



/* Conteneur principal pour gérer le positionnement */
.agents-scroll-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Les effets de dégradé blanc (fade) sur les bords */
.agents-scroll-wrapper::before,
.agents-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none; /* Laisse passer les clics au travers */
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Dégradé gauche */
.agents-scroll-wrapper.can-scroll-left::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
    opacity: 1;
}

/* Dégradé droit */
.agents-scroll-wrapper.can-scroll-right::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
    opacity: 1;
}

/* Style des boutons flèches Notion */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #ffffff;
    border: 1px solid #e9e9e7;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: #37352f;
    opacity: 0; /* Caché par défaut */
    pointer-events: none; /* Inactif quand caché */
    transition: opacity 0.2s ease, background 0.2s ease;
}

.scroll-arrow i {
    font-size: 12px;
}

.scroll-arrow:hover {
    background: #f1f1ef;
}

/* Quand le JS indique qu'on peut scroller, on affiche la flèche */
.agents-scroll-wrapper.can-scroll-left .scroll-left,
.agents-scroll-wrapper.can-scroll-right .scroll-right {
    opacity: 1;
    pointer-events: auto;
}

.scroll-left {
    left: 8px;
}

.scroll-right {
    right: 8px;
}