/*
 * custom.css — Design System vin.co
 * Aligné sur la charte du site principal (vin.co/about/css/style.css)
 *
 * Sommaire :
 *   1. Polices        6. Sections        11. Tarifs
 *   2. Tokens         7. Cartes          12. Tableau
 *   3. Base           8. Étapes          13. Formulaire
 *   4. Navigation     9. Clients         14. Bifurcation
 *   5. Boutons       10. Témoignages     15. Footer / Anim / Responsive
 *
 * Toutes les couleurs du site sont définies dans le bloc :root ci-dessous.
 * Aucun code hexadécimal ne subsiste ailleurs dans le projet.
 */

/* ════════════════════════════════════════════════════════════
   1. POLICES — Roboto, auto-hébergée sur vin.co
   Les fichiers sont déjà présents sur le domaine : aucun appel
   externe (Google Fonts) n'est nécessaire.
════════════════════════════════════════════════════════════ */
@font-face {
    font-family: "Roboto";
    src: url(/fonts/Roboto/Roboto-Light.ttf);
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: "Roboto";
    src: url(/fonts/Roboto/Roboto-Regular.ttf);
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Roboto";
    src: url(/fonts/Roboto/Roboto-Medium.ttf);
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Roboto";
    src: url(/fonts/Roboto/Roboto-Bold.ttf);
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Roboto";
    src: url(/fonts/Roboto/Roboto-Black.ttf);
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* ════════════════════════════════════════════════════════════
   2. TOKENS — source unique de vérité
════════════════════════════════════════════════════════════ */
:root {
    /* — Marque — */
    --c-primary:        #891769;  /* mauve vin.co */
    --c-primary-hover:  #a12778;
    --c-primary-light:  #ae1486;
    --c-primary-soft:   #a12778;  /* labels de section */
    --c-primary-pale:   #e8bcdb;  /* sur fond mauve */
    --c-primary-extrapale:   #f6f1f5;  /* sur fond mauve */
    --c-plum:           #3f1134;  /* mauve profond */
    --c-plum-deep:      #450835;
    --c-plum:   #2a1925;

    /* — Action (CTA de conversion) — */
    --c-action:         #9abd00;  /* vert lime vin.co */
    --c-action-hover:   #a8ce00;
    --c-action-text:    #6b8400;  /* vert lisible sur fond clair */

    /* — Dégradé du hero (charte .home-enjoy-22-wines) — */
    --grad-hero-1:      #FFFFFF;
    --grad-hero-2:      #f5faff;
    --grad-hero-3:      #eaf4fd;

    /* — Fonds — */
    --c-bg:             #FAF8FA;
    --c-bg-alt:         #F9F9F9;
    --c-white:          #FFFFFF;

    /* — Texte — */
    --c-text:           #313131;
    --c-text-soft:      #6a6a6a;
    --c-text-muted:     #a3a3a3;

    /* — Bordures — */
    --c-border:         #d6d6d6;
    --c-border-light:   #dfdfdf;

    /* — Accents fonctionnels (modules, cas d'usage, ressources) — */
    --c-accent-mauve:       #891769;
    --c-accent-mauve-soft:  rgba(137, 23, 105, 0.09);
    --c-accent-blue:        #1862fb;
    --c-accent-blue-soft:   rgba(24, 98, 251, 0.09);
    --c-accent-green:       #9abd00;
    --c-accent-green-soft:  rgba(154, 189, 0, 0.14);
    --c-accent-plum:        #3f1134;
    --c-accent-plum-soft:   rgba(63, 17, 52, 0.09);
    --c-accent-amber:       #cf7f14;
    --c-accent-amber-soft:  rgba(207, 127, 20, 0.11);

    /* — Filières (charte vin.co) — */
    --c-wines:          #ae1833;
    --c-spirits:        #cf7f14;
    --c-beers:          #be4d15;
    --c-alcohol-free:   #6ec982;
    --c-groceries:      #6f795f;
    --c-europe:         #0E47CB;

    /* — Typographie — */
    --font-body:    'Roboto', Arial, sans-serif;
    --font-display: 'Roboto', Arial, sans-serif;

    /* — Géométrie — */
    --section-py:  4.5rem;
    --radius-sm:   10px;
    --radius-md:   20px;
    --radius-lg:   20px;
    --radius-pill: 30px;

    /* — Ombres (vin.co : diffuses et légères) — */
    --shadow-card:  0 0 15px 4px rgba(0, 0, 0, 0.07);
    --shadow-hover: 0 0 15px 4px rgba(0, 0, 0, 0.12);
    --shadow-nav:   0 1px 0 var(--c-border-light);

    --transition: 0.25s ease;
}

/* ════════════════════════════════════════════════════════════
   3. BASE
════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--c-text);
    background-color: var(--c-bg);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

/* Titres légers, comme sur vin.co (poids 200/300) */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 300;
    color: var(--c-text);
    line-height: 1.25;
}
h1 { font-size: clamp(2rem, 4.5vw, 3em); font-weight: 300; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4em); font-weight: 300; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5em); font-weight: 400; }

p {
    line-height: 1.6em;
    color: var(--c-text);
    font-weight: 400;
}

a { color: var(--c-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-primary-hover); }
img { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════════════════════
   4. NAVIGATION — fond blanc, soulignement mauve à l'actif
════════════════════════════════════════════════════════════ */
.navbar-vinco {
    background: var(--c-white);
    border-bottom: 1px solid var(--c-border-light);
    padding: 0.75rem 0;
    transition: box-shadow var(--transition);
}
.navbar-vinco.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

.brand-logo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--c-primary);
    letter-spacing: -0.01em;
}
.brand-dot { color: var(--c-action); }

.navbar-vinco .nav-link {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--c-plum);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.6rem 0.9rem;
    border-top: solid 4px transparent;
    transition: color var(--transition), border-color var(--transition);
}
.navbar-vinco .nav-link:hover { color: var(--c-primary); }
.navbar-vinco .nav-link.active {
    color: var(--c-primary);
    border-top-color: var(--c-primary);
}

.sister-link {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--c-text-soft);
    border-bottom: 1px dotted var(--c-text-muted);
}
.sister-link:hover { color: var(--c-primary); }
.navbar-toggler {border:none;}
/* ════════════════════════════════════════════════════════════
   5. BOUTONS — pilules, comme .btn-default-22 sur vin.co
════════════════════════════════════════════════════════════ */
.btn-primary-vinco {
    display: inline-block;
    background: var(--c-primary);
    color: var(--c-white);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-pill);
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    transition: background var(--transition), border-color var(--transition);
}
.btn-primary-vinco:hover,
.btn-primary-vinco:focus {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    color: var(--c-white);
}

.btn-secondary-vinco {
    display: inline-block;
    background: var(--c-white);
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-pill);
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    transition: background var(--transition), color var(--transition);
}
.btn-secondary-vinco:hover,
.btn-secondary-vinco:focus {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    color: var(--c-white);
}

/* Le bouton "or" devient le vert de conversion vin.co */
.btn-gold {
    display: inline-block;
    background: var(--c-action);
    color: var(--c-white);
    border: 1px solid var(--c-action);
    border-radius: var(--radius-pill);
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    transition: background var(--transition), border-color var(--transition);
}
.btn-gold:hover,
.btn-gold:focus {
    background: var(--c-action-hover);
    border-color: var(--c-action-hover);
    color: var(--c-white);
}

/* Le bouton pour afficher sur fond plum */
.btn-plum {
    display: inline-block;
    background: var(--c-white);
    color: var(--c-primary);
    border: 1px solid var(--c-white);
    border-radius: var(--radius-pill);
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    transition: background var(--transition), color var(--transition);
}
.btn-plum:hover,
.btn-plum:focus {
    background: var(--c-plum);
    border-color: var(--c-primary-pale);
    color: var(--c-primary-pale);
}
.btn-plum-revert {
    display: inline-block;
    background: var(--c-primary);
    color: var(--c-white);
    border: 1px solid var(--c-primary-pale);
    border-radius: var(--radius-pill);
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    transition: background var(--transition), color var(--transition);
}
.btn-plum-revert:hover,
.btn-plum-revert:focus {
    background: var(--c-plum);
    border-color: var(--c-primary-pale);
    color: var(--c-white);
}
.btn-lg-vinco { padding: 0.8rem 1.9rem; font-size: 1.1rem; }

/* Boutons Bootstrap utilisés dans les filtres d'ancres */
.btn-outline-secondary {
    border-radius: var(--radius-pill) !important;
    border-color: var(--c-border) !important;
    color: var(--c-text) !important;
    font-weight: 300;
}
.btn-outline-secondary:hover {
    background: var(--c-border) !important;
    color: var(--c-text) !important;
}

/* ════════════════════════════════════════════════════════════
   6. HERO — dégradé pastel animé, comme .home-enjoy-22-wines
════════════════════════════════════════════════════════════ */
.hero-vinco {
    /*background: linear-gradient(60deg, var(--grad-hero-1), var(--grad-hero-2), var(--grad-hero-3), var(--grad-hero-1));   */
    background: linear-gradient(180deg, #fff 0, #fbf8fa 100%);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    padding: 4.5rem 0;
    position: relative;
}

/* .hero-fullheight-wrap entoure UNIQUEMENT la nav (+ le bandeau
   webinaire éventuel) et le hero — jamais le reste de la page.
   C'est nécessaire : si on flexait <body> en entier, flex:1 n'aurait
   plus d'espace libre à donner au hero une fois toutes les sections
   suivantes (logos, témoignages, CTA, footer) comptées, et il
   resterait à sa hauteur naturelle. En scopant le conteneur flex à
   ce seul wrapper, le hero absorbe exactement l'espace restant sous
   la nav pour occuper 100vh au total. */
@media (min-width: 992px) {
    .hero-fullheight-wrap {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .hero-fullheight-wrap .hero-vinco {
        flex: 1;
        display: flex;
        align-items: center;
    }
}

@keyframes gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-vinco { animation: none; }
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--c-accent-mauve-soft);
    color: var(--c-primary);
    font-size: 0.82rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1.25rem;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3em);
    font-weight: 300;
    color: var(--c-primary);
    line-height: 1.2;
    margin-bottom: 1.25rem;
}
.hero-title em {     
    font-style: normal; color: var(--c-plum); 
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--c-text);
    line-height: 1.5;
    max-width: 560px;
    margin-bottom: 2rem;
}

.hero-cta-group { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}
.hero-stat-number {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--c-primary);
    display: block;
    line-height: 1;
}
.hero-stat-label {
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--c-text-soft);
    margin-top: 0.25rem;
    display: block;
}

/* Maquette du hero — repassée en clair */
.hero-card-mockup {
    background: var(--c-white);
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}
.mockup-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-border-light);
}
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
.mockup-dot-red   { background: #ff5f57; }
.mockup-dot-amber { background: #ffbd2e; }
.mockup-dot-green { background: #28c840; }
.mockup-title-bar {
    flex: 1; height: 8px;
    background: var(--c-bg);
    border-radius: 4px;
    margin-left: 0.5rem;
}
.mockup-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; align-items: center; }
.mockup-thumb {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-hover));
    flex-shrink: 0;
}
.mockup-line-group { flex: 1; }
.mockup-line { height: 8px; border-radius: 4px; background: var(--c-bg); margin-bottom: 5px; }
.mockup-line.short  { width: 60%; }
.mockup-line.medium { width: 80%; }
.mockup-badge {
    font-size: 0.68rem;
    font-weight: 400;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--c-accent-green-soft);
    color: var(--c-action-text);
    flex-shrink: 0;
}

/* Le hero clair impose de repasser les textes de la maquette en sombre */
.hero-vinco .mockup-header span { color: var(--c-text-muted) !important; }
.hero-vinco .mockup-line { background: var(--c-bg) !important; }
.hero-vinco .hero-card-mockup > div:last-child span { color: var(--c-text-muted) !important; }

/* ════════════════════════════════════════════════════════════
   7. SECTIONS
════════════════════════════════════════════════════════════ */
section { padding: var(--section-py) 0; }

.section-hero {

    background: linear-gradient(180deg, #fff 0, #fbf8fa 100%);
    padding:4rem 0 3rem;
}
.section-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-primary-soft);
    margin-bottom: 0.6rem;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 300;
    color: var(--c-primary);
    margin:0 auto 1rem;
    max-width: 930px;
}

.section-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--c-text);
    max-width: 640px;
    margin: 0 auto 2.5rem;
    line-height: 1.5;
}

.section-line {
    display: block;
    width: 48px;
    height: 2px;
    background: var(--c-primary);
    margin: 1rem auto 0;
}
.section-line-left {
    display: block;
    width: 48px;
    height: 2px;
    margin-top:1rem;
    background: var(--c-primary);

}
.bg-white  { background: var(--c-white); }
.bg-soft  { background: var(--c-bg-alt); }
.bg-plum  { background: var(--c-plum); }
.text-body { color: var(--c-text) !important; }
.text-body-soft { color: var(--c-text-soft) !important; }
.text-brand { color: var(--c-primary) !important; }



/* ════════════════════════════════════════════════════════════
   8. CARTES — arrondi 20px, ombre diffuse (cf. .avantages-bloc)
════════════════════════════════════════════════════════════ */
.problem-card,
.step-card,
.usecase-card,
.audience-card,
.testimonial-card {
    background: var(--c-white);
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius-md);
    padding: 2rem;
    height: 100%;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition), transform var(--transition);
}
.problem-card:hover,
.step-card:hover,
.usecase-card:hover,
.audience-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

.problem-icon {
    width: 56px; height: 56px;
    background: var(--c-accent-mauve-soft);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    color: var(--c-primary);
    margin-bottom: 1.25rem;
}

.step-number {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--c-accent-mauve-soft);
    line-height: 1;
    position: absolute;
    top: 1rem; right: 1.25rem;
}
.step-card { position: relative; }

.step-icon {
    width: 56px; height: 56px;
    background: var(--c-primary);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: var(--c-white);
    margin-bottom: 1.25rem;
}

.usecase-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-primary);
    background: var(--c-accent-mauve-soft);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 1rem;
}

.audience-card { text-align: center; /*border-top: 3px solid var(--c-primary);*/ }
.audience-icon { font-size: 3rem; color: var(--c-primary); margin-bottom: 1rem; }

/* ════════════════════════════════════════════════════════════
   9. CLIENTS
════════════════════════════════════════════════════════════ */
.clients-strip {
    background: var(--c-white);
    padding: 2.5rem 0;
    border-top: 1px solid var(--c-border-light);
    border-bottom: 1px solid var(--c-border-light);
}
.client-logo-item {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--c-text-soft);
    white-space: nowrap;
    transition: color var(--transition);
}
.client-logo-item:hover { color: var(--c-primary); }

/* Marquee logos clients */
.logo-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
    display: flex;
    width: max-content;
    animation: logo-marquee 90s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
    .logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
}
.logo-marquee-item {
    flex: 0 0 auto;
    padding: 0 2rem;          /* padding et non gap : boucle à -50% sans saut */
    display: flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity var(--transition);
}
.logo-marquee-item:hover { opacity: 1; }
.logo-marquee-item img { height: 60px; width: auto; display: block; }

@keyframes logo-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/*@media (prefers-reduced-motion: reduce) {
    .logo-marquee { overflow-x: auto; }
    .logo-marquee-track { animation: none; }
}*/
@media (prefers-reduced-motion: reduce) {
    .logo-marquee-track { animation-duration: 180s; }   /* 2x plus lent, mais toujours en mouvement */
}


/* ════════════════════════════════════════════════════════════
   10. TÉMOIGNAGES
════════════════════════════════════════════════════════════ */
.testimonial-text {
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--c-text);
    margin-bottom: 1.5rem;
}
.testimonial-author { display: flex; align-items: center; gap: 0.85rem; }
.testimonial-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--c-white);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.testimonial-name { font-weight: 500; font-size: 0.95rem; color: var(--c-text); margin: 0; }
.testimonial-role { font-size: 0.82rem; font-weight: 300; color: var(--c-text-soft); margin: 0; }

/* ════════════════════════════════════════════════════════════
   11. TARIFS
════════════════════════════════════════════════════════════ */
.pricing-card {
    background: var(--c-white);
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius-md);
    padding: 2.5rem 2rem;
    height: 100%;
    position: relative;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition), transform var(--transition);
}
.pricing-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border: 1px solid var(--c-primary-pale);}

.pricing-card.featured {
    border: 2px solid var(--c-primary);
    transform: scale(1.02);
}
.pricing-card.featured:hover { transform: scale(1.02) translateY(-3px); }

.pricing-badge {
    position: absolute;
    top: 0px; left: 50%;
    transform: translateX(-50%);
    background: var(--c-primary);
    color: var(--c-white);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    padding: 5px 16px;
    border-radius: 18px 18px 0 0 ;
    white-space: nowrap;
        width: 100%;
    text-align: center;
}

.pricing-plan {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-soft);
    margin-bottom: 0.5rem;
}
.pricing-price {
    font-family: var(--font-display);
    font-size: 3em;
    font-weight: 500;
    color: var(--c-text);
    line-height: 1;
}
.pricing-currency { font-size: 1.4rem; vertical-align: top; padding-top: 0.4rem; }
.pricing-period   { font-size: 0.9rem; font-weight: 300; color: var(--c-text-soft); }

.pricing-features { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.pricing-features li {
    padding: 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border-light);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.pricing-features li:last-child { border-bottom: none; }
.check { color: var(--c-action); flex-shrink: 0; margin-top: 3px; }
.cross { color: var(--c-text-muted); flex-shrink: 0; margin-top: 3px; }

/* Le texte "pour qui" n'apparaît qu'au survol/focus de la carte */
.pricing-target {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding-top: 0;
    border-top: none;
    transition: opacity .2s ease, max-height .25s ease, margin .25s ease, padding .25s ease;
}
.pricing-card:hover .pricing-target,
.pricing-card:focus-within .pricing-target {
    opacity: 1;
    max-height: 110px;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-border-light);
}
@media (hover: none) {
    .pricing-target {
        opacity: 1;
        max-height: 110px;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--c-border-light);
    }
}

/* Invite au survol : "Voir le positionnement →" — masquée sur tactile
   puisque .pricing-target y est déjà visible en permanence */
.pricing-more {
    margin-top: auto;
    padding-top: 0.85rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-text-muted);
    transition: color .2s ease;
}
.pricing-more span { display: inline-block; transition: transform .2s ease; }
.pricing-card:hover .pricing-more { color: var(--c-primary); }
.pricing-card:hover .pricing-more span { transform: translateX(4px); }
@media (hover: none) {
    .pricing-more { display: none; }
}

/* ════════════════════════════════════════════════════════════
   12. TABLEAU COMPARATIF
════════════════════════════════════════════════════════════ */
.comparison-table {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--c-border-light);
}
.comparison-table thead th {
    background: var(--c-bg-alt);
    color: var(--c-text);
    font-weight: 500;
    font-size: 0.92rem;
    padding: 1rem;
    border: none;
}
/*.comparison-table thead th:first-child { background: var(--c-plum); }*/

.comparison-table tbody td {
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    font-weight: 300;
    vertical-align: middle;
    background: var(--c-white);
    border-color: var(--c-border-light);
}
.comparison-table tbody tr:nth-child(odd) td { background: var(--c-bg-alt); }
.comparison-table tbody tr td.comparison-table-group {
    background:var(--c-primary-extrapale)!important;
    color:var(--c-primary);font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.6rem 1rem;
}

/* Ligne dépliable "Marché d'applications" / "Compliance Suite" */
.toggle-apps-row { cursor: pointer; }
.btn-apps-detail {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-left: .75rem; padding: .2rem .7rem;
    font-size: .8rem; font-weight: 500;
    color: var(--c-primary); background: var(--c-primary-extrapale);
    border: 1px solid transparent; border-radius: 999px;
}
.btn-apps-detail:hover, .btn-apps-detail:focus-visible { border-color: var(--c-primary); }

/* Détail d'une app : nom + prix sur une ligne, description dessous */
.comparison-table tbody td.app-cell { padding-left: 2rem;}
.app-cell-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.app-cell-name { font-weight: 500; }
.app-cell-price { font-size: .85rem; color: var(--c-plum); white-space: nowrap; }
.app-cell-desc { margin-top: .2rem; font-size: .82rem; line-height: 1.4; color: var(--c-text-soft); }

/* Largeurs de colonnes fixes : le tableau ne bouge plus quand on ouvre / ferme un détail */
.comparison-table { table-layout: fixed; min-width: 760px; }
.comparison-table thead th:first-child { width: 38%; }


/* ════════════════════════════════════════════════════════════
   13. FORMULAIRE
════════════════════════════════════════════════════════════ */
.demo-form-wrapper {
    background: var(--c-white);
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 3rem;
}
.form-label-vinco {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--c-text);
    margin-bottom: 0.4rem;
}
.form-control-vinco {
    width: 100%;
    height: 50px;
    padding: 4px 15px;
    border: 1px solid var(--c-text-muted);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: var(--c-text);
    background: var(--c-white);
    transition: border-color var(--transition);
}
textarea.form-control-vinco { height: auto; padding: 12px 15px; }
.form-control-vinco:focus {
    outline: none;
    border-color: var(--c-primary);
}

.badge-conform {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--c-accent-green-soft);
    color: var(--c-action-text);
    font-size: 0.85rem;
    font-weight: 400;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
}

/* ════════════════════════════════════════════════════════════
   14. BIFURCATION NUTRIVIN
════════════════════════════════════════════════════════════ */
.bifurcation-banner {
    background: var(--c-white);
    border-top: 1px solid var(--c-border-light);
    border-bottom: 1px solid var(--c-border-light);
    font-size: 1rem;
    font-weight: 300;
    color: var(--c-text);
}
.bifurcation-link {
    color: var(--c-primary);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bifurcation-link:hover { color: var(--c-primary-hover); }

/* ════════════════════════════════════════════════════════════
   14bis. SECTIONS CTA MAUVES
   Section pleine largeur en fond mauve marque (fin de page, ou hero
   d'une page comme plateforme.php) : un seul point de vérité pour tout
   ce que ce fond mauve doit recolorer — texte, hero, boutons.
   Avant : les pages posaient un dégradé sombre en style inline, neutralisé
   par un bloc de sélecteurs d'attribut [style*="2d1215"] plus bas dans ce
   fichier. Fragile (dépend d'un fragment de couleur codé en dur dans le
   HTML) et dupliqué avec ce bloc-ci qui faisait déjà la même chose pour
   .section-label/h2/.section-line. Les pages utilisent maintenant
   directement class="section-cta" — plus de style inline à faire
   correspondre, plus besoin de !important (une seule règle par élément,
   positionnée après les styles de base qu'elle surcharge).
════════════════════════════════════════════════════════════ */
.section-cta {
    background: var(--c-primary);
    padding: 5rem 0;
}
.section-cta .section-label { color: var(--c-primary-pale); }
.section-cta .section-line  { background: var(--c-primary-pale); }
.section-cta .section-title,
.section-cta h2 { color: var(--c-white); margin-bottom: 1rem; }

/* Hero de page sur fond mauve (ex : plateforme.php) */
.section-cta .hero-label {
    background: rgba(255,255,255,0.15);
    color: var(--c-white);
    border-color: rgba(255,255,255,0.3);
}
.section-cta .hero-title,
.section-cta .hero-title em { color: var(--c-white); }
.section-cta .hero-subtitle { color: rgba(255,255,255,0.88); }

/* Boutons : le mauve de .btn-primary-vinco se fondrait dans ce fond, donc
   bascule sur la couleur d'action ; le contour de .btn-secondary-vinco
   passe en blanc pour rester lisible. */
.section-cta .btn-primary-vinco {
    background: var(--c-action);
    border-color: var(--c-action);
}
.section-cta .btn-primary-vinco:hover {
    background: var(--c-action-hover);
    border-color: var(--c-action-hover);
}
.section-cta .btn-secondary-vinco {
    background: transparent;
    color: var(--c-white);
    border-color: rgba(255,255,255,0.6);
}
.section-cta .btn-secondary-vinco:hover {
    background: var(--c-white);
    color: var(--c-primary);
}
/* ════════════════════════════════════════════════════════════
   15. FOOTER — clair, comme vin.co
════════════════════════════════════════════════════════════ */
.footer-vinco {
    background: var(--c-bg);
    border-top: 1px solid var(--c-border-light);
    color: var(--c-text-muted);
}
.footer-logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--c-primary);
}
.footer-logo span { color: var(--c-action); }
.footer-tagline {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--c-text-soft);
    line-height: 1.5;
    margin-top: 0.5rem;
}
.footer-heading {
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: 1rem;
}
.footer-links { margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--c-text-soft);
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--c-primary); }
.footer-divider { border-color: var(--c-border-light); margin-top: 1rem; }
.footer-copy { font-size: 0.85rem; font-weight: 300; color: var(--c-text-muted); }

.social-icon {
    width: 38px; height: 38px;
    background: var(--c-white);
    border: 1px solid var(--c-border-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-text-soft);
    font-size: 1rem;
    transition: background var(--transition), color var(--transition);
}
.social-icon:hover { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }

/* ════════════════════════════════════════════════════════════
   16. ACCORDÉONS (FAQ)
════════════════════════════════════════════════════════════ */
.accordion-item {
    border: 1px solid var(--c-border-light) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}
.accordion-button {
    font-family: var(--font-body);
    font-weight: 400 !important;
    color: var(--c-text) !important;
    background: var(--c-white) !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) { color: var(--c-primary) !important; }
.accordion-body { font-weight: 300; line-height: 1.6em; }

/* ════════════════════════════════════════════════════════════
   17. ANIMATIONS
════════════════════════════════════════════════════════════ */
[data-fade-in] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-fade-in].visible { opacity: 1; transform: translateY(0); }
[data-fade-in][data-delay="1"] { transition-delay: 0.08s; }
[data-fade-in][data-delay="2"] { transition-delay: 0.16s; }
[data-fade-in][data-delay="3"] { transition-delay: 0.24s; }
[data-fade-in][data-delay="4"] { transition-delay: 0.32s; }

/* ════════════════════════════════════════════════════════════
   18. RESPONSIVE
════════════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {
    :root { --section-py: 3rem; }

    .hero-vinco { padding: 3rem 0; }
    .hero-stats { gap: 1.5rem; }
    .pricing-card.featured { transform: none; }
    .pricing-card.featured:hover { transform: translateY(-3px); }
    .navbar-vinco .nav-link { border-top: none; }
    .navbar-vinco .nav-link.active {
        background: var(--c-accent-mauve-soft);
        border-radius: var(--radius-sm);
    }
    .section-title { margin:0 auto 1rem auto; }
}

@media screen and (max-width: 576px) {
    :root { --section-py: 2.25rem; }
    .hero-cta-group { flex-direction: column; }
    .hero-cta-group > a { width: 100%; }
    .demo-form-wrapper { padding: 1.5rem; }

}

/* ════════════════════════════════════════════════════════════
   19. CARROUSEL SCROLL-SNAP (témoignages)
   Défilement natif (scroll-snap) + flèches/points/avance auto en JS
   progressif : sans lui, le carrousel reste utilisable au doigt/trackpad.
════════════════════════════════════════════════════════════ */
.carousel-snap-wrap { position: relative; }

.carousel-track {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* Glisser à la souris : la main n'apparaît que sur les appareils à souris */
@media (hover: hover) and (pointer: fine) {
    .carousel-track { cursor: grab; }
}
.carousel-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;   /* sinon le navigateur « recolle » pendant le geste */
    scroll-behavior: auto;
    -webkit-user-select: none;
            user-select: none;
}


.carousel-item-snap {
    flex: 0 0 88%;
    scroll-snap-align: center;
}
@media (min-width: 768px) {
    .carousel-item-snap { flex: 0 0 47%; }
}
@media (min-width: 992px) {
    /* 28% (pas 31.5%) pour qu'un bout de la carte suivante dépasse toujours,
       comme sur mobile : sans ça, le nombre de cartes de référence tient
       pile dans le .container et rien n'indique que ça scrolle sur desktop
       (pas de swipe pour donner l'indice, contrairement au tactile). */
    .carousel-item-snap { flex: 0 0 28%; scroll-snap-align: start; }
}
.carousel-track .testimonial-card { height: 100%; }

/* 3 témoignages ou moins : sur desktop tout tient, on remplace le carrousel
   par des colonnes égales (pas de défilement, pas de main, pas de points).
   Mobile/tablette inchangés : le glissement y reste nécessaire. */
@media (min-width: 992px) {
    .carousel-fit .carousel-track {
        overflow: visible;
        cursor: default;
    }
    .carousel-fit .carousel-item-snap {
        flex: 1 1 0;
        min-width: 0;
    }
    .carousel-fit .carousel-dots { display: none; }
}

/* Fondu de bord, en renfort de la carte partielle ci-dessus : opt-in via
   .carousel-fade-right sur .carousel-snap-wrap. --fade-edge-color doit
   correspondre au fond de la section (par défaut celui de .bg-soft,
   surchargeable en style="--fade-edge-color:var(--c-white)" sur fond blanc).
   La classe .is-end (posée par initCarouselFade(), main.js) masque le
   fondu une fois le défilement arrivé en bout de piste, pour ne pas
   laisser croire qu'il reste du contenu caché derrière la dernière carte. */
.carousel-fade-right { --fade-edge-color: var(--c-bg-alt); }
.carousel-fade-right::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0.5rem; /* laisse la barre de défilement masquée (padding-bottom du track) hors du fondu */
    width: 70px;
    background: linear-gradient(to right, transparent, var(--fade-edge-color));
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.carousel-fade-right.is-end::after { opacity: 0; }
@media (max-width: 991px) {
    /* Le peek + le tactile suffisent déjà sur mobile/tablette. */
    .carousel-fade-right::after { display: none; }
}

.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
}
.carousel-dot {
    width: 8px; height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.carousel-dot:hover { background: rgba(255,255,255,0.6); }
.carousel-dot.active { background: #fff; transform: scale(1.3); }

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

/* ════════════════════════════════════════════════════════════
   20. INFO-BULLES (tarifs.php — détail des apps)
════════════════════════════════════════════════════════════ */
.tooltip-inner {
    max-width: 240px;
    padding: 0.6rem 0.85rem;
    text-align: left;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   21. IMAGES EN DÉBORD (bleed) — pages apps
   .bleed-right / .bleed-left tirent un élément (typiquement une
   image en dernière colonne d'un .row dans un .container) vers le
   bord de la fenêtre, au-delà de la largeur du conteneur. Technique
   de la marge négative : le calc() correspond à l'espace entre le
   bord du .container centré et celui du viewport, moins une marge
   de respiration (--bleed-gutter) pour éviter un rognage trop sec
   contre le bord. Sans effet si l'élément n'est pas dans un
   .container centré.

   .bleed-bottom tire un élément vers le bas de sa <section> (au-delà
   du padding-bottom de la section, cf. `section{padding:var(--section-py) 0}`
   plus haut). Utile quand une image est plus haute que le texte à
   côté d'elle dans un .row flex : comme elle définit déjà la hauteur
   de la ligne, `align-self-end` n'a aucune marge de manœuvre pour la
   déplacer. À poser sur la colonne (.col-*), pas sur l'image elle-même.
════════════════════════════════════════════════════════════ */
:root { --bleed-gutter: 3rem; }

.bleed-right { margin-right: calc(50% - 50vw + var(--bleed-gutter)); }
.bleed-left  { margin-left:  calc(50% - 50vw + var(--bleed-gutter)); }
.bleed-bottom { margin-bottom: calc(-1 * var(--section-py)); }

@media screen and (max-width: 991px) {
    /* Sur mobile, la colonne image passe généralement sous le texte :
       le débord n'a plus de sens visuel, on le désactive. */
    .bleed-right, .bleed-left, .bleed-bottom { margin-right: 0; margin-left: 0; margin-bottom: 0; }
}

/* ════════════════════════════════════════════════════════════
   22. IMAGES CADRÉES
   .img-framed reprend le même arrondi et le même liseré que les
   cartes du site (.problem-card, .testimonial-card...) pour qu'une
   simple <img> (screenshot, photo produit...) se fonde dans la même
   charte, sans l'ombre portée des cartes (volontairement absente ici
   pour rester léger sur une image déjà posée dans la page).
════════════════════════════════════════════════════════════ */
.img-framed {
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border-light);
}