/* --------------------------------------------------------
   Exonobis — styles.css (final ++ bubbles serrées & XL)
   Palette :
   - Primaire : #4C49D4
   - Anthracite (texte) : #1e1e1e
   - Gris moyen : #6b7280
   - Gris clair : #eef1f5
   Typos :
   - Titres : "Space Grotesk"
   - Texte  : "Poppins"
---------------------------------------------------------*/

/* ========== Reset & base ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: #1e1e1e;
    background: #ffffff;
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1.6;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

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

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

button,
input {
    font: inherit;
}

.container {
    width: min(1200px, 90vw);
    margin-inline: auto;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ========== Variables ========== */
:root {
    --primary: #4C49D4;
    --text: #1e1e1e;
    --muted: #6b7280;
    --bg-soft: #eef1f5;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .06);
    --white: #ffffff;

    /* Sticky topbar height */
    --topbar-h: 30px;

    /* Tailles des bulles (XL) - responsive avec clamp */
    --bubble-lg: clamp(340px, 35vw, 520px);
    /* 🔹 très grandes bulles (1 et 4) */
    --bubble-sm: clamp(120px, 14vw, 180px);
    /* 🔹 très petites bulles (2 et 3) */
}

/* ========== Topbar (tel + email) ========== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--primary);
    color: var(--white);
    font-size: 0.85rem;
    height: var(--topbar-h);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 0;
    width: min(1200px, 90vw);
    margin-inline: auto;
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 0 rgba(76, 73, 212, 0.10);
    transition: color .2s ease, opacity .2s ease;
}

.topbar__item:hover {
    color: #fff;
    opacity: 1;
}

.topbar__item svg {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.topbar__item svg path {
    fill: #fff;
    opacity: .95;
}

/* ========== Header / Navbar (collante) ========== */
.site-header {
    position: sticky;
    top: var(--topbar-h);
    z-index: 999;
    background: #fff;
    border-bottom: 1px solid #f0f2f6;
    backdrop-filter: saturate(180%) blur(8px);
    margin-top: 0;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 0;
    /* navbar plus fine */
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.brand__name {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.1rem;
}

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

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

.nav__link {
    display: inline-block;
    padding: 8px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    opacity: .9;
    transition: color .2s ease, opacity .2s ease;
}

.nav__link:is(:hover, :focus) {
    color: var(--primary);
    background: transparent;
    opacity: 1;
}

.nav__link.is-active {
    color: var(--primary);
    background: transparent;
    opacity: 1;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}

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

.btn--primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(76, 73, 212, .22);
}

.btn--primary:hover {
    box-shadow: 0 12px 26px rgba(76, 73, 212, .28);
}

.nav__cta {
    margin-left: 6px;
}

.nav__cta.btn--primary {
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 400; 
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    box-shadow: none;
    background: var(--primary);
    color: #fff;
}

.nav__cta.btn--primary:hover {
    background: #3e3bcc;
    box-shadow: none;
}

/* sticky (piloté par main.js) */
.site-header.scrolled {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    border-color: transparent;
}

/* Bouton burger (caché desktop) */
.nav-toggle {
    display: none;
    background: 0;
    border: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    position: relative
}

.nav-toggle span {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: #1e1e1e;
    transition: transform .2s, opacity .2s
}

.nav-toggle span:nth-child(1) {
    top: 12px
}

.nav-toggle span:nth-child(2) {
    top: 19px
}

.nav-toggle span:nth-child(3) {
    top: 26px
}

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

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0
}

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



/* ===== Footer ===== */
.site-footer {
    background: #f8f9fd;
    border-top: 1px solid #e8eaf2;
    padding: 32px 0;
    color: var(--muted);
}

.footer__inner {
    display: flex;
    align-items: center;
    /* centre verticalement */
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

/* Logo Exonobis à gauche, bien centré verticalement */
.footer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 600;
}

/* Mentions légales & co — très discrètes */
.footer__legal a {
    color: rgba(0, 0, 0, 0.4);
    /* gris clair, discret */
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer__legal a:hover {
    color: var(--primary);
    /* effet violet au survol */
}

/* Version mobile */
@media (max-width: 768px) {
    .footer__inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}


/* ==== Message de succès du formulaire téléphone simple (dans section 1 à côté du héro) ==== */
/* ==== Modale <dialog> ==== */
.callback-dialog {
    border: none;
    border-radius: 16px;
    padding: 28px 32px;
    width: min(92vw, 360px);
    color: #1e1e1e;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    text-align: center;
}

.callback-dialog::backdrop {
    background: rgba(0, 0, 0, .45);
}

.callback-dialog h3 {
    margin: 0 0 8px;
    color: #4C49D4;
    font-weight: 700;
}

.callback-dialog a {
    color: #4C49D4;
    text-decoration: underline;
    font-weight: 500;
}

.callback-dialog__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #4C49D4;
    cursor: pointer;
    line-height: 1;
}

/* Mobile : nav cachée par défaut (Menu Burger) */
@media (max-width: 768px) {
    .nav-toggle {
        display: inline-block
    }

    .nav {
        position: absolute;
        top: calc(var(--topbar-h) + 56px);
        /* sous la barre */
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #f0f2f6;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s, transform .2s
    }

    .nav.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto
    }

    .nav__list {
        flex-direction: column;
        padding: 10px
    }

    .nav__cta {
        margin: 8px 10px 12px
    }
}

/* ========== Icônes génériques ========== */
.icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.icon--phone,
.icon--mail,
.icon--call {
    width: 20px;
    height: 20px;
}

.icon--spark {
    width: 16px;
    height: 16px;
}

/* ========== Sections ========== */
.section {
    padding: 64px 0;
}

.section--hero {
    padding: 90px 0 40px;
}

/* ========== HERO ========== */
.hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 40px;
}

.hero__content {
    order: 1;
}

.hero__media {
    order: 2;
}

.hero__media img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: none;
    background: transparent;
}

/* eyebrow (réutilisable) */
.eyebrow,
.hero__content .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: #f5f6ff;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.eyebrow .icon--spark {
    width: 14px;
    height: 14px;
    color: var(--primary);
}

.hero__title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 10px 0 12px;
    letter-spacing: -.02em;
}

.hero__subtitle {
    color: var(--muted);
    font-size: 1.05rem;
    margin: 0 0 20px;
}

.rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 28px;
}

.rating__count {
    color: var(--muted);
    font-weight: 500;
}

/* ===== Callback ===== */
.callback {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    border: 1px solid #e8eaf2;
    box-shadow: var(--shadow);
    transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}

.callback:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(76, 73, 212, .12);
}

.callback__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .92rem;
}

.callback__label svg {
    width: 18px;
    height: 18px;
}

.callback__label svg path {
    fill: var(--primary);
}

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

.callback input[type="tel"] {
    background: transparent;
    border: none;
    border-bottom: 2px solid #e5e7eb;
    padding: 12px 2px 10px;
    color: var(--text);
    outline: none;
}

.callback input[type="tel"]::placeholder {
    color: #a0a6b3;
}

.callback input[type="tel"]:focus {
    border-bottom-color: var(--primary);
}

.btn--call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--primary);
    border: none;
    color: #fff;
    box-shadow: 0 6px 16px rgba(76, 73, 212, .22);
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}

.btn--call:hover {
    background: #3e3bcc;
    box-shadow: 0 10px 22px rgba(76, 73, 212, .28);
}

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

.btn--call svg {
    width: 18px;
    height: 18px;
}

.btn--call svg path {
    fill: #fff;
}

/* ========== SECTION 2 (story) ========== */

/* Section + fond ondulé gris clair (fournis assets/pattern-waves.svg) */
.story {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding-bottom: 120px;
    /* ✅ plus d'espace en bas */
}

.story::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/pattern-waves.svg") center/560px no-repeat;
    opacity: .08;
    pointer-events: none;
    z-index: 0;
}

/* Grille principale */
.story__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    /* bulles / texte */
    align-items: center;
    gap: 56px;
}

/* BULLes — très rapprochées + XXL pour 1 & 4 */
.story__bubbles {
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 18px;
    justify-items: center;
    align-items: center;

    position: relative;
    /* nécessaire pour positionner le ::before */
    z-index: 0;
    /* garde les bulles au-dessus */
}

/* Fond SVG avec opacité séparée */
.story__bubbles::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/background-waves.svg") no-repeat center/cover;
    opacity: 0.1;
    /* 👈 ajuste ici la transparence du SVG */
    z-index: -1;
    /* passe le SVG derrière les bulles */
}

.story__content {
    order: 2;
}

.story__bubbles img {
    position: static;
    width: 100%;
    max-width: var(--bubble-sm);
    /* base : SM */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 999px;
    box-shadow: var(--shadow);
    --offset: 0px;
    /* décalage vertical doux */
    transform: translateY(var(--offset));
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}

/* Grosses bulles bien plus grandes */
.story__bubbles img:nth-child(1),
.story__bubbles img:nth-child(4) {
    max-width: var(--bubble-lg);
    /* ✅ XL */
}

/* Légers offsets pour l'effet */
.story__bubbles img:nth-child(2) {
    --offset: 28px;
}

.story__bubbles img:nth-child(3) {
    --offset: -28px;
}

/* Hover : conserve l’offset et lève un peu */
.story__bubbles img:hover {
    transform: translateY(calc(var(--offset) - 6px));
    box-shadow: 0 12px 28px rgba(76, 73, 212, .28);
}

/* Texte section 2 : index.html */
.story__title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.2;
    margin: 0 0 12px;
}

.story__content p {
    color: var(--muted);
    margin: 0 0 12px;
}

.metrics {
    display: flex;
    gap: 28px;
    margin-top: 14px;
}

.metric {
    display: grid;
    gap: 2px;
}

.metric__value {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
}

.metric__label {
    color: var(--muted);
}

/* ========== SECTION 3 (parallax) : index.html ========== */
/* 🎨 Variables locales — tu peux modifier librement */
.section--parallax.services {
    --primary: #4C49D4;
    --text: #1e1e1e;
    --light: #ffffff;
    --overlay-dark: rgba(8, 10, 30, 0.85);
    --overlay-darker: rgba(10, 12, 32, 0.92);
    --glow: rgba(76, 73, 212, 0.35);
    --card-bg: rgba(8, 10, 32, 0.8);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-blur: 6px;
    --section-padding: 90px;
    --grid-gap: 20px;
}

/* ===== Structure & fond parallax ===== */
.section--parallax.services {
    position: relative;
    padding: var(--section-padding) 0;
    color: #e8ecff;
    background-image: url("assets/fond-parallax-index.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* effet parallax */
    overflow: hidden;
    isolation: isolate;
}

/* Overlay + lueur violette */
.services__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 80% 85%, var(--glow), transparent 60%),
        linear-gradient(180deg, var(--overlay-dark), var(--overlay-darker));
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
}

/* ===== En-tête ===== */
.services__header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 32px;
}

.services__header .eyebrow {
    background: rgba(255, 255, 255, .12);
    color: #cfd3ff;
}

.services__header h2 {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    letter-spacing: .01em;
    margin: 10px 0 12px;
    color: var(--light);
}

.services__lead {
    max-width: 820px;
    margin: 0 auto 16px;
    color: #c7cbea;
}

/* Pills (petites pastilles sous le texte) */
.services__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.services__pills li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #dfe3ff;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .86rem;
}

/* ===== Cartes (SECTION 3) ===== */

/* Grille 2×2 */
.services__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: var(--grid-gap);
    align-items: stretch;
    /* les cartes gardent la même hauteur */
}

/* Carte effet glass */
.service-card {
    --card-gap: 10px;

    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(var(--card-blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--card-blur)) saturate(120%);
    border-radius: 8px;
    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--card-gap);

    transition: transform .15s ease, box-shadow .2s ease;
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 50px rgba(0, 0, 0, .40);
}

/* Contenu (icône, titre, texte, liste) */
.service-card__body {
    display: grid;
    gap: var(--card-gap);
}

/* Icône */
.service-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #4C49D4;
    color: #fff;
    padding: 8px;
}

.service-card__icon svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

/* Titre */
.service-card__title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
}

/* Description */
.service-card__desc {
    color: #c8ccee;
    line-height: 1.5;
    margin: 0;
    /* ✅ collé au titre */
}

/* Liste */
.service-card__bullets {
    margin: 0;
    padding-left: 18px;
    color: #d4d8ff;
}

.service-card__bullets li {
    margin: 4px 0;
}

/* Bouton (plat + espacement de ~1cm ≈ 40–50px) */
.service-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;

    margin-top: 48px;
    /* espace entre le contenu et le bouton */

    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    /* ✅ gras conservé */
    letter-spacing: 0.5px;

    background: #4C49D4;
    color: #fff;
    border: 1px solid #4C49D4;
    border-radius: 999px;
    box-shadow: none;
    text-align: center;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.service-card__cta:hover {
    background: #fff;
    color: #1e1e1e;
    border-color: #fff;
}


/* ===== Section 4 — CTA : index.html ===== */
.section--cta {
    --cta-bg: #4C49D4;
    --cta-text: #ffffff;

    background: var(--cta-bg);
    color: var(--cta-text);
    text-align: center;
}

.section--cta .cta__inner {
    width: min(1200px, 90vw);
    margin-inline: auto;
    min-height: 280px;
    /* hauteur équivalente au visuel fourni */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    /* espace entre le texte et le bouton */
    padding: 40px 20px;
}

/* Titre principal */
.section--cta h2 {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--cta-text);
}

/* Bouton CTA */
.section--cta .btn {
    background: #ffffff;
    color: #4C49D4;
    border: none;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 18px rgba(255, 255, 255, 0.25);
    transition: all 0.25s ease;
}

.section--cta .btn:hover {
    background: #f5f5ff;
    box-shadow: 0 10px 24px rgba(255, 255, 255, 0.35);
}



/* ===== Section 5 — Formulaire de contact : index.html ===== */
.section--contact {
    background: #fff;
    padding: 150px 0; /* ↑ haut/bas | gauche/droite */

}

/* ===== Disposition formulaire + image ===== */
.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* formulaire à gauche, image à droite */
    align-items: center;
    gap: 40px;
}

.contact__form-wrap {
    order: 1;
    /* formulaire à gauche */
}

.contact__image {
    position: relative;
    order: 2;
    /* image à droite */
}

.contact__image img {
    width: 100%;
    height: auto;
    border-radius: 0;
    /* ✅ plus de coins arrondis */
    box-shadow: none;
    /* ✅ plus d’ombre */
    object-fit: cover;
}

/* Texte superposé sur l'image */
.contact__overlay-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    background: transparent;
    /* ✅ plus de voile noir */
    border-radius: 12px;
    padding: 20px;
}

.contact__overlay-text h3 {
    font-size: 1.5rem;
    line-height: 1.5;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 6px rgba(76, 73, 212, 0.95);
    /* 💜 ombre douce violet */
}

.contact__title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    margin: 0 0 18px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    text-align: center; /* ✅ centre le titre */
}

.contact-form {
    background: #fff;
    border: 1px solid #e8eaf2;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 24px;
}

.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 14px;
}

.form-group {
    display: grid;
    gap: 6px;
}

.form-group label {
    font-size: 0.95rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"] {
    width: 100%;
    padding: 6px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


/*Votre message*/
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    outline: none;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(76, 73, 212, 0.12);
}

.form-group--full {
    grid-column: 1 / -1;
}

.contact-form textarea {
    font-family: "Poppins", system-ui, sans-serif;
    /* même que le reste du site */
    font-size: 0.8rem;
    /* lisible mais sobre */
    color: var(--text);
}
/*Fin - Votre message*/

/* Messages d'erreur propres (uniquement quand JS ajoute .invalid) */
.error-msg {
    color: #e63946;
    font-size: 0.85rem;
    margin-top: 4px;
    display: block;
}

.contact-form input.invalid,
.contact-form textarea.invalid {
    border-color: #e63946;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, .15);
}

/* Message d’erreur personnalisé */
.contact-form input::placeholder {
    color: #a0a6b3;
}

.contact-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(76, 73, 212, 0.12);
}

/* Consentement */
.form-consent {
    margin: 10px 0 18px;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
    color: var(--muted);
    font-size: 0.95rem;
}

.checkbox input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
}

.checkbox a {
    color: var(--primary);
    text-decoration: underline;
}

/* Actions "Envoyer" formulaire */
.form-actions {
    display: flex;
    justify-content: flex-start;
}
/* 🔹 Taille du bouton "Envoyer" */
.form-actions .btn--primary {
    min-width: 240px;
    /* ajuste la longueur ici */
    padding: 6px 28px;
    /* un peu plus d’espace */
    text-align: center;
    font-weight: 400;
    /* enlève le gras */
    text-transform: uppercase;
    /* met en majuscule */
}
.form-actions .btn--primary:hover {
    background: #1E1E1E;
    color: #fff;
    border-color: #4C49D4;
    font-weight: 400;
    /* enlève le gras */
    text-transform: uppercase;
    /* met en majuscule */
}



/* =======================================================
   PORTFOLIO — styles dédiés à la page portfolio.html
   - Grille responsive (3 / 2 / 1 colonnes)
   - Cartes cliquables avec légère animation au survol
   - Respect de la charte (variables + typographies)
   ======================================================= */

/* ---- Section ---- */
.section--portfolio {
    background: #fff;
    padding: 80px 0 100px;
    /* espace généreux pour respirer */
}

.section--portfolio h1 {
    /* même esprit typographique que le site */
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 10px 0 22px;
    color: var(--text);
}

/* ---- Grille 3 colonnes (desktop) ---- */
.portfolio__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* 3 cartes par ligne */
    gap: 28px;
    /* espacement harmonieux */
    margin-top: 12px;
}

/* Réinitialisations UL déjà faites globalement, on ajoute la sémantique carte */
.portfolio__item {
    /* permet aux cartes de s’étirer en hauteur uniformément */
    display: flex;
}

/* Le lien englobe toute la carte pour une zone cliquable confortable */
.portfolio__link {
    display: block;
    width: 100%;
    text-decoration: none;
}

/* ---- Carte ---- */
.portfolio__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    background: #fff;
    border: 1px solid #e8eaf2;
    border-radius: 12px;
    overflow: hidden;
    /* masque l’image au zoom */
    box-shadow: var(--shadow);

    /* animation douce au survol/focus (accessibilité OK) */
    transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Image d’aperçu “live” (mShots) */
.portfolio__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    /* ratio stable pour éviter le CLS */
    object-fit: cover;
    transform: scale(1);
    transition: transform .35s ease;
}

/* Légende sous l’image (titre + domaine) */
.portfolio__caption {
    padding: 14px 14px 16px;
    display: grid;
    gap: 4px;
    text-align: center;
}

.portfolio__title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.portfolio__url {
    font-size: .9rem;
    color: var(--muted);
}

/* ---- Effets d’interaction ---- */
.portfolio__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
    border-color: rgba(76, 73, 212, .35);
    /* touche de violet */
}

.portfolio__card:hover .portfolio__img {
    transform: scale(1.02);
    /* zoom léger sur l’aperçu */
}

/* Focus visible au clavier (a11y) sur le lien => met en avant la carte */
.portfolio__link:focus-visible .portfolio__card {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(76, 73, 212, .18), 0 14px 34px rgba(0, 0, 0, .12);
}

/* =======================================================
   Ajustement de centrage : eyebrow + titre
   ======================================================= */
.section--portfolio .eyebrow {
    display: inline-flex;
    /* conserve le style d’origine */
    justify-content: center;
    /* centre le contenu à l’intérieur */
    align-items: center;
    margin: 0 auto 10px;
    /* centre horizontalement et ajoute espace dessous */
    text-align: center;
}

.section--portfolio h1 {
    text-align: center;
    /* centre le titre */
}
/* =======================================================
   Pastille (eyebrow) centrée — version spécifique Portfolio
   ======================================================= */
.eyebrow--center {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* On garde le style visuel de l'eyebrow existante */
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: #f5f6ff;
    padding: 6px 12px;
    border-radius: 999px;

    /* Centrage horizontal */
    margin: 0 auto 12px;
    text-align: center;
}

/* Icône à l’intérieur (identique à la version originale) */
.eyebrow--center .icon--spark {
    width: 14px;
    height: 14px;
    color: var(--primary);
}

/* Centrage fiable de la pastille uniquement sur la page Portfolio */
.eyebrow--center {
    display: block;
    /* au lieu de inline / inline-flex */
    width: max-content;
    /* largeur = contenu */
    margin: 0 auto 12px;
    /* centre horizontalement */
}

/* === FIX centrage pastille Portfolio (spécificité > .section--portfolio .eyebrow) === */
.section--portfolio .eyebrow.eyebrow--center {
    display: block;
    /* devient un bloc */
    width: max-content;
    /* largeur = contenu */
    margin: 0 auto 12px;
    /* centrage horizontal */
    text-align: center;
    /* par sécurité */
    justify-content: center;
    align-items: center;
}

/* Titre centré (au cas où) */
.section--portfolio h1 {
    text-align: center;
}

/* ---- Responsive Portfolio---- */
/* ---- Responsive Portfolio : on garde la même logique que l’original ---- */
@media (max-width: 768px) {
    .eyebrow--center {
        justify-content: center;
        margin: 0 auto 12px;
        max-width: calc(100% - 24px);
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .eyebrow--center {
        font-size: 0.72rem;
        letter-spacing: 0.10em;
        padding: 6px 10px;
    }
}

/* Tablette : 2 colonnes */
@media (max-width: 1100px) {
    .portfolio__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

/* Mobile : 1 colonne */
@media (max-width: 640px) {
    .section--portfolio {
        padding: 56px 0 72px;
    }

    .portfolio__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .portfolio__title {
        font-size: 1rem;
    }

    .portfolio__url {
        font-size: .88rem;
    }
}

/* ---- Préférence utilisateur : réduire les animations ---- */
@media (prefers-reduced-motion: reduce) {

    .portfolio__card,
    .portfolio__img {
        transition: none;
    }
}

/* PATCH Responsive Portfolio — centrage + pas de rognage */
/* Tablette et moins : on commence à détendre l'affichage */
@media (max-width: 1100px) {

    /* Évite le rognage des screenshots, montre le haut (navbar) */
    .portfolio__img {
        object-fit: contain;
        /* ne rogne plus */
        object-position: top center;
        /* focus en haut pour voir la navbar */
        background: #fff;
        /* bandes blanches si besoin */
    }
}

/* Mobile : 1 colonne centrée + hauteur confortable de l'aperçu */
@media (max-width: 640px) {

    /* Centre chaque carte dans la colonne */
    .portfolio__grid {
        grid-template-columns: 1fr;
        /* déjà présent chez toi, je le renforce */
        justify-items: center;
        /* centre horizontalement les items */
    }

    /* Largeur max de la carte pour un rendu propre */
    .portfolio__item,
    .portfolio__link,
    .portfolio__card {
        width: 100%;
        max-width: 420px;
        /* ajuste à 440/480 si tu veux plus large */
        margin-inline: auto;
        /* sécurité de centrage */
    }

    /* L’aperçu montre toute la largeur du site sans rognage */
    .portfolio__img {
        width: 100%;
        height: 44vh;
        /* hauteur généreuse mais mobile-friendly */
        max-height: 520px;
        object-fit: contain;
        /* stoppe le rognage */
        object-position: top center;
        /* navbar visible */
    }
}

/* PATCH — Réduction du padding des cartes en responsive */
@media (max-width: 640px) {
    .portfolio__caption {
        padding: 1px 1px 1px;
        /* ↓ moins de marge interne */
        gap: 2px;
        /* ↓ espace entre le titre et le lien */
    }

    .portfolio__title {
        font-size: 0.95rem;
        /* ↓ taille légère pour compacter */
    }

    .portfolio__url {
        font-size: 0.85rem;
        /* ↓ légère réduction aussi */
    }
}

/* 1) Reset des marges par défaut de <figure>/<figcaption> */
.section--portfolio .portfolio__card {
    margin: 0;
}

.section--portfolio .portfolio__caption {
    margin: 0;
}

/* 2) Mobile : carte centrée + espaces réduits */
@media (max-width: 640px) {

    /* Centre les items et limite la largeur pour un rendu propre */
    .portfolio__grid {
        justify-items: center;
    }

    .portfolio__item,
    .portfolio__link,
    .portfolio__card {
        width: 100%;
        max-width: 420px;
        /* ajuste 440/480 si tu veux plus large */
        margin-inline: auto;
    }

    /* ↓ Hauteur d’aperçu un peu plus faible pour réduire la zone blanche globale */
    .portfolio__img {
        height: 36vh;
        /* (avant 44vh) -> moins de "blanc" total */
        max-height: 360px;
        object-fit: contain;
        /* on ne rogne pas */
        object-position: top center;
        /* on garde la navbar visible */
        background: #fff;
    }

    /* ↓ Vraie réduction du “blanc” de la zone texte */
    .portfolio__caption {
        padding: 8px 10px 10px;
        /* (avant 14px 14px 16px) */
        gap: 2px;
        /* espace mini entre titre & url */
    }

    .portfolio__title {
        font-size: 0.95rem;
        line-height: 1.2;
    }

    .portfolio__url {
        font-size: 0.85rem;
        line-height: 1.2;
    }

    /* Sécurité : aucune marge parasite autour des cartes */
    .portfolio__item {
        padding: 0;
    }
}

/* =======================================================
   PATCH mobile — supprimer la bande blanche sous l’aperçu
   ======================================================= */

/* sécurité : aucune marge parasite */
.section--portfolio .portfolio__card,
.section--portfolio .portfolio__caption {
    margin: 0;
}

@media (max-width: 640px) {

    /* carte centrée */
    .portfolio__grid {
        justify-items: center;
    }

    .portfolio__item,
    .portfolio__link,
    .portfolio__card {
        width: 100%;
        max-width: 420px;
        /* ajuste si tu veux plus large */
        margin-inline: auto;
    }

    /* >>> Remplir la zone sans bande vide et montrer la navbar (haut) */
    .portfolio__img {
        width: 100%;
        height: 40vh;
        /* ~ écran, ajuste 36–48vh selon ton goût */
        max-height: 420px;
        object-fit: cover;
        /* plus de « contain » */
        object-position: top center;
        /* on garde le haut (navbar du site) */
        background: #fff;
        /* au cas où */
    }

    /* légende compacte et centrée */
    .portfolio__caption {
        padding: 8px 10px;
        /* réduit */
        text-align: center;
    }

    .portfolio__title {
        font-size: 0.95rem;
        line-height: 1.2;
    }

    .portfolio__url {
        font-size: 0.85rem;
        line-height: 1.2;
    }
}



/* tarifs.css — section tarifs (conserve la base styles.css) */

/* --- Titres en Outfit uniquement --- */
/* --- Titres et textes de la section tarifs --- */
.section--pricing-hero .pricing-subtitle,
.section--pricing .plan__name {
    font-family: "Roboto", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-weight: 650;
    color: #303030;
}

/* --- Hero pricing --- */
.section--pricing-hero {
    background: #fff;
    padding: 64px 0 24px;
}

.pricing-hero {
    text-align: center;
}

/* Titre principal (H1) de la page tarifs */
.pricing-title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 3.6vw, 2.6rem);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    color: var(--text);
    text-transform: uppercase;
}

.pricing-subtitle {
    color: var(--muted);
    margin: 0 0 16px;
    font-weight: 500;
}

/* Badges "Sans engagement" */
.pricing-badges {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 8px 0 0;
}

.pricing-badges li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f4f6ff;
    color: #3944d4;
    border: 1px solid rgba(76, 73, 212, .18);
    font-weight: 600;
    font-size: .92rem;
}

/* --- Grid des cartes --- */
.section--pricing {
    padding: 8px 0 80px;
    background: #fff;
}

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

/* --- Carte plan --- */
.plan {
    background: #fff;
    border: 1px solid #e8eaf2;
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .10);
    border-color: rgba(76, 73, 212, .28);
}

/* Badge au-dessus, centré, sans chevaucher le titre */
.plan__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #4C49D4;
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 700;
    font-size: .8rem;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(76, 73, 212, .35);
    z-index: 2;
}

/* Mise en avant Business : vrai encadrement violet + léger glow */
.plan.is-featured {
    position: relative;
    border: 2px solid #4C49D4;
    box-shadow: 0 20px 60px rgba(76, 73, 212, .18);
}

/* Effet hover uniquement pour les boutons de la page Tarifs */
.section--pricing .btn--primary:hover,
.section--pricing-hero .btn--primary:hover {
    background-color: #3a37b5;
    /* un violet un peu plus sombre */
    transform: translateY(-2px);
    /* léger effet de soulèvement */
    box-shadow: 0 8px 18px rgba(76, 73, 212, 0.25);
    /* ombre douce */
    transition: all 0.25s ease;
}

/* Optionnel : petit effet retour au relâchement */
.section--pricing .btn--primary,
.section--pricing-hero .btn--primary {
    transition: all 0.25s ease;
}

/* Ajustement du padding pour compenser la bordure plus épaisse */
@media (min-width: 1025px) {
    .plan.is-featured {
        padding: 21px;
    }
}

.plan__head {
    text-align: center;
}

.plan__name {
    margin: 2px 0 6px;
    font-size: 1.3rem;
    font-weight: 700;
}

.plan__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.plan__big {
    font-size: 2.1rem;
    font-weight: 800;
    color: #4C49D4;
    letter-spacing: -.02em;
}

.plan__per {
    color: var(--muted);
    font-weight: 600;
}

/* Features */
.plan__features {
    margin: 2px 0 8px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    color: var(--text);
}

.plan__features li {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}

.plan__features li.ok::before,
.plan__features li.no::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    display: inline-block;
    mask-size: 18px 18px;
    -webkit-mask-size: 18px 18px;
}

.plan__features li.ok::before {
    background: #22c55e;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center;
}

.plan__features li.no {
    color: #9aa1b2;
}

.plan__features li.no::before {
    background: #9aa1b2;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E") no-repeat center;
}

/* CTA bouton */
.plan__foot {
    margin-top: auto;
}

.plan__btn {
    width: 100%;
    height: 44px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .plan__big {
        font-size: 2rem;
    }
}

/* ===== SECTION SERVICES ===== */
/* Fond légèrement violet clair, pleine largeur */
.section--services {
    background: linear-gradient(180deg, #fafaff 0%, #f5f6ff 100%);
    padding: 80px 0;
    /* espace vertical autour de la section */
}

/* Boîte principale contenant le texte + les 4 blocs */
.services__box {
    background: #ffffff;
    border-radius: 20px;
    /* coins arrondis */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* ombre douce */
    padding: 50px 40px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    /* texte à gauche, icônes à droite */
    align-items: center;
    gap: 60px;
}

/* Titre de la partie gauche */
.services__intro h2 {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text);
}

/* Paragraphe sous le titre */
.services__intro p {
    color: var(--muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Bouton "Découvrir nos services" */
.services__btn {
    border: 1px solid #4C49D4;
    color: #4C49D4;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    /* bouton bien arrondi */
    transition: all 0.25s ease;
}

.services__btn:hover {
    background: #4C49D4;
    /* fond violet au hover */
    color: #fff;
    transform: translateY(-2px);
    /* léger effet de soulèvement */
}

/* Grille de 4 services */
.services__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 2 colonnes */
    gap: 24px 48px;
    /* espace entre lignes et colonnes */
}

/* Conteneur de l’icône */
.service__icon {
    background: rgba(76, 73, 212, 0.08);
    /* fond violet très clair */
    border-radius: 12px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* Titres des petits blocs */
.service h3 {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

/* Paragraphe de chaque bloc */
.service p {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
}



/* ===== SECTION 3 — Closing parallax (tarifs.css) ===== */
.section--pricing-closing {
    /* Parallax propre et isolé (n’interfère pas avec .section--parallax.services de l’index) */
    --closing-overlay-dark: rgba(10, 12, 32, .82);
    --closing-glow: rgba(76, 73, 212, .35);

    position: relative;
    padding: 90px 0;
    color: #eef0ff;
    background-image: url("assets/background-parallax-pricing.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* parallax */
    overflow: hidden;
    isolation: isolate;
}

.pricing-closing__overlay {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(900px 420px at 85% 20%, var(--closing-glow), transparent 99.9%),
            linear-gradient(180deg, rgba(238, 238, 238, 0.05), var(--closing-overlay-dark));
        z-index: 0;
        pointer-events: none;
}

.pricing-closing__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 1.2fr;
    /* image / texte */
    align-items: center;
    gap: 44px;
}

/* Media gauche */
.closing__media {
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

.closing__media img {
    display: block;
    width: 100%;
    height: auto;
    /* garde les proportions */
    max-width: 100%;
    max-height: 520px;
    /* limite sur desktop si tu veux */
    object-fit: contain;
    /* pas de crop */
    object-position: center;
    background: transparent;
}

/* Contenu droit */
.closing__content {
    display: grid;
    gap: 14px;
}

.closing__eyebrow {
    display: flex;
    /* passe en flex block */
    justify-content: center;
    /* centre horizontalement */
    align-items: center;
    /* centre verticalement */
    background: rgba(255, 255, 255, .12);
    color: #dfe3ff;
    padding: 6px 18px;
    /* un peu plus d’espace */
    border-radius: 999px;
    font-size: .86rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    width: fit-content;
    /* s’ajuste à la largeur du texte */
    margin: 0 auto;
}

.closing__title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    line-height: 1.2;
    margin: 4px 0 4px;
    color: #fff;
}

.closing__title .accent {
    color: #cfd3ff;
    text-shadow: 0 2px 18px rgba(76, 73, 212, .45);
    white-space: nowrap;
}

.closing__lead {
    color: #c7cbef;
    margin: 2px 0 8px;
    max-width: 60ch;
}

/* Bullets */
.closing__bullets {
    display: grid;
    gap: 10px;
    margin: 6px 0 10px;
    padding: 0;
    list-style: none;
}

.closing__bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e8eaff;
}

.closing__bullets svg {
    flex: 0 0 auto;
    color: #9fe6b4;
}

.closing__bullets strong {
    color: #ffffff;
    font-weight: 700;
}

/* CTA */
.closing__cta {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.section--pricing-closing .btn--primary {
    height: 46px;
    padding: 0 22px;
    font-weight: 700;
    letter-spacing: .02em;
    background: #4C49D4;
    border-color: #4C49D4;
    box-shadow: 0 10px 26px rgba(76, 73, 212, .28);
    transition: transform .18s ease, box-shadow .25s ease, background-color .25s ease;
}

.section--pricing-closing .btn--primary:hover {
    transform: translateY(-2px);
    background: #3f3bd0;
    box-shadow: 0 16px 36px rgba(76, 73, 212, .36);
}

.cta-note {
    font-size: .9rem;
    color: #cfd3ff;
}

/* Centrage du texte "Sans engagement • Résiliable à tout moment" */
.section--pricing-closing .cta-note {
    text-align: center;
    display: block;
    width: 100%;
    margin-inline: auto;
}




/* ===========================
   CONTACT — style "screen"
   =========================== */
.section--contact-hero {
    background: #f7f6fb;
    /* fond très léger façon carte */
    padding: 80px 0;
}

.contact-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    /* gauche texte / droite formulaire */
    gap: 48px;
    align-items: center;
}

.contact-hero__title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.1;
    margin: 10px 0 12px;
    letter-spacing: -.01em;
}

.contact-hero__lead {
    color: var(--muted);
    max-width: 56ch;
}

/* Pastilles contact (mail / tel) */
.contact-pills {
    margin-top: 22px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e8eaf2;
    box-shadow: var(--shadow);
    font-weight: 500;
}

.pill svg {
    width: 18px;
    height: 18px;
    fill: #4C49D4;
}

/* Carte formulaire à droite */
.contact-card {
    background: #faf9ff;
    border: 1px solid #ebe9f7;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 12px 32px rgba(76, 73, 212, .08);
}

.contact-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-card .form-group--full {
    grid-column: 1 / -1;
}

.contact-card label {
    display: block;
    font-size: .92rem;
    color: #565b67;
    margin-bottom: 6px;
}

.contact-card input,
.contact-card textarea {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid #e2e4ee;
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-card textarea {
    resize: vertical;
}

.contact-card input:focus,
.contact-card textarea:focus {
    outline: none;
    border-color: #b9bbf7;
    box-shadow: 0 0 0 3px rgba(76, 73, 212, .12);
}

/* Consent + bouton */
/* Consentement RGPD — retrait suspendu propre (case + texte) */
.contact-card__consent {
    display: grid;
    grid-template-columns: 18px 1fr;
    /* case | texte */
    align-items: start;
    column-gap: 10px;
    margin: 14px 0 18px;
    color: var(--muted);
    font-size: 0.82rem;
    /* petit comme demandé */
    line-height: 1.4;
}

.contact-card__consent input {
    width: 16px;
    height: 16px;
    margin: 0;
    /* pas de décalage vertical parasite */
    accent-color: var(--primary);
}

.contact-card__consent span {
    display: block;
    /* force l’alignement multi-ligne */
    white-space: normal;
}

.contact-card__consent span a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 500;
}

.contact-card__submit {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ===== Fix RGPD: garder la case à gauche et le texte à droite, sur 1 même ligne ===== */
.checkbox.contact-card__consent {
    display: grid !important;
    /* écrase .checkbox { display:flex } */
    grid-template-columns: 18px 1fr;
    column-gap: 10px;
    align-items: start;
    margin: 14px 0 18px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.checkbox.contact-card__consent input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0 0;
    /* aligne avec la 1re ligne de texte */
    accent-color: var(--primary);
    display: block;
}

.checkbox.contact-card__consent span {
    display: block;
    /* les lignes suivantes restent sous le texte, pas sous la case */
    white-space: normal;
}

.checkbox.contact-card__consent span a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 500;
}

/* FAQ */
.section--faq {
    background: #f7f6fb;
    padding: 56px 0 90px;
}

.faq {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.faq details {
    background: #fff;
    border: 1px solid #e8eaf2;
    border-radius: 12px;
    padding: 12px 16px;
}

.faq details[open] {
    box-shadow: var(--shadow);
    border-color: rgba(76, 73, 212, .28);
}

.faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

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

.faq p {
    color: var(--muted);
    margin: 10px 2px 2px;
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-hero__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .contact-card__grid {
        grid-template-columns: 1fr;
    }
}



/* ===== Responsive / Parallax fallback iOS/Android ===== */
@media (max-width: 1024px) {
    .section--pricing-closing {
        background-attachment: scroll;
        /* désactive parallax mobile (fiable) */
        padding: 70px 0;
    }

    .pricing-closing__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .closing__media img {
        max-height: 360px;
        /* ajuste 300–420px selon ton visuel */
        height: auto;
        object-fit: contain;
        /* surtout pas cover ici */
    }
}

@media (max-width: 640px) {
    .section--pricing-closing {
        padding: 56px 0;
    }

    .closing__title {
        font-size: clamp(1.35rem, 5.4vw, 1.8rem);
    }

    .closing__lead {
        font-size: .98rem;
    }

    .cta-note {
        font-size: .86rem;
    }
}


/* --- Responsive --- */
/* Sur mobile, tout passe en colonne */
@media (max-width: 992px) {
    .services__box {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 24px;
    }

    .services__grid {
        grid-template-columns: 1fr;
        /* une seule colonne */
    }
}


/* Masquer la description des puces en mobile (section closing) */
@media (max-width: 640px) {
    .closing__bullets .bullet-note {
        display: none;
    }

    .closing__bullets li {
        display: grid;
        grid-template-columns: 18px 1fr;
        column-gap: 8px;
        align-items: center;
        line-height: 1.4;
    }

    .closing__bullets svg {
        width: 18px;
        height: 18px;
        display: block;
        margin-top: 2px;
    }

    .closing__bullets strong {
        white-space: normal;
    }
}






/* ======================================================================*/
/*RESPONSIVE INDEX.HTML et Base du site : */

/* Parallax fallback mobile (iOS/Android désactive fixed) [Section 3] */
@media (max-width: 1024px) {
    .section--parallax.services {
        background-attachment: scroll;
        /* désactive parallax mobile */
    }

    .services__grid {
        grid-template-columns: 1fr;
        /* 1 carte par ligne sur tablette */
    }
}

@media (min-width: 1280px) {
    .services__grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        /* ✅ garde 2 colonnes */
    }
}

/* Eyebrow responsive (centré + anti rognage) */
@media (max-width: 768px) {

    .eyebrow,
    .hero__content .eyebrow {
        justify-content: center;
        margin: 0 auto 12px;
        max-width: calc(100% - 24px);
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {

    .eyebrow,
    .hero__content .eyebrow {
        justify-content: center;
        margin: 0 auto 10px;
        max-width: calc(100% - 20px);
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.72rem;
        letter-spacing: 0.10em;
        padding: 6px 10px;
    }
}

/* ==== HERO mobile — callback centré + image sous le formulaire ==== */
@media (max-width: 768px) {
    .hero__grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    /* ordre : texte + formulaire, puis l'image */
    .hero__content {
        order: 1
    }

    .hero__media {
        order: 2
    }

    /* centre proprement le formulaire */
    .callback {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .callback__row {
        grid-template-columns: minmax(0, 1fr) 44px
    }

    .btn--call {
        width: 44px;
        height: 44px;
        padding: 0
    }

    /* image visible et centrée */
    .hero__media img {
        display: block;
        width: 90%;
        max-width: 420px;
        margin: 0 auto;
        height: auto;
    }
}

/* ==== HERO mobile : image visible sous le formulaire ==== */
@media (max-width: 768px) {
    .hero__grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    /* on remet l'ordre : texte + formulaire d'abord, image ensuite */
    .hero__content {
        order: 1;
    }

    .hero__media {
        order: 2;
    }

    .hero__media img {
        width: 90%;
        max-width: 400px;
        margin: 0 auto;
        height: auto;
    }
}

/* ==== Section "Forgez votre visibilité" - responsive ==== */
@media (max-width: 768px) {
    .story__grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .story__bubbles {
        order: 2;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .story__bubbles img {
        max-width: 120px;
        aspect-ratio: 1/1;
    }

    .story__content {
        order: 1;
        padding: 0 20px;
    }

    .story__title {
        font-size: 1.5rem;
    }
}


/*==== Section 4 "Contactez-nous pour boostez présence en ligne - CTA" - responsive ==== */
@media (max-width: 768px) {
    .section--cta .cta__inner {
        min-height: 220px;
        padding: 32px 16px;
    }

    .section--cta h2 {
        font-size: 1.4rem;
    }

    .section--cta .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}


/*==== Section 5 - responsive ==== */
@media (max-width: 768px) {
    .contact-form {
        padding: 20px;
    }

    .contact-form__grid {
        grid-template-columns: 1fr;
    }

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

/* Section contact : mobile = image + texte AU-DESSUS du formulaire */
@media (max-width: 768px) {
    .contact__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact__image {
        order: 1;
    }

    .contact__form-wrap {
        order: 2;
    }

    /* montre toute l’image, pas rognée */
    .contact__image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        /* au lieu de cover */
    }

    /* le texte n’est plus en overlay pour éviter le chevauchement */
    .contact__overlay-text {
        position: static;
        background: transparent;
        text-shadow: none;
        color: #1e1e1e;
        padding: 8px 0 0;
        text-align: center;
    }

    .contact__overlay-text h3 {
        font-size: 1rem;
        /* plus petit sur mobile */
        line-height: 1.4;
        margin: 0;
    }
}
/**/

/* MENU BURGER Responsive : Desktop inchangé */
@media (min-width: 769px) {
    .nav {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto
    }
}
/* ===== Fix menu burger : recoller le menu sous la navbar ===== */
@media (max-width: 768px) {

    /* verrouille le scroll quand le menu est ouvert (déjà géré en JS) */
    body.noscroll {
        overflow: hidden;
    }

    /* garde une hauteur fiable du header mobile */
    .site-header .header__inner {
        min-height: 56px;
    }

    /* le menu s’ouvre immédiatement sous le header, sans espace */
    .nav {
        position: absolute;
        top: 100% !important;
        /* ✅ au lieu de calc(var(--topbar-h) + 56px) */
        left: 0;
        right: 0;
        margin: 0;
        transform: translateY(0) !important;
        /* neutralise l’offset initial */
        z-index: 999;
        border-top: 1px solid #f0f2f6;
    }
}