/* ==========================================
   THEME My SmartSite!
   SmartSite v0.1.1 — 2026-06-21
   Direction artistique : Digital Professional (Digital Blue)
   Framework : v0.11
========================================== */

/* --- 1. FONTS & TYPOGRAPHY --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* --- 2. DESIGN TOKENS --- */
:root {
    /* Palette — Digital Blue */
    --s2-color-primary:        #1a365d;
    --s2-color-primary-rgb:    26, 54, 93;
    --s2-color-primary-light:  #ebf4ff;
    --s2-color-primary-dark:   #0f1f38;
    --s2-color-secondary:      #4a7ab5;
    --s2-color-accent:         #06b6d4;

    /* Neutres */
    --s2-color-bg:             #ffffff;
    --s2-color-bg-alt:         #f8fafc;
    --s2-color-text:           #1e293b;
    --s2-color-text-muted:     #64748b;
    --s2-color-border:         rgba(26, 54, 93, 0.1);

    /* Polices */
    --s2-font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --s2-font-body:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Section padding */
    --s2-section-py: 6rem;

    /* Nav */
    --s2-nav-bg: rgba(255, 255, 255, 0.88);

    /* Ombres teintées */
    --s2-shadow-sm: 0 1px 4px rgba(26, 54, 93, 0.06);
    --s2-shadow:    0 4px 16px rgba(26, 54, 93, 0.08);
    --s2-shadow-lg: 0 12px 32px rgba(26, 54, 93, 0.12);

    /* Contact block — ratio info / formulaire */
    --s2-contact-cols: 5fr 7fr;
}


/* --- 3. BASE OVERRIDES --- */
::selection {
    background-color: var(--s2-color-primary-light);
    color: var(--s2-color-primary-dark);
}

.s2-section--white + .s2-section--white {
    position: relative;
}

.s2-section--white + .s2-section--white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(90%, 72rem);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent 0%, rgba(26, 54, 93, 0.04) 10%, rgba(26, 54, 93, 0.14) 50%, rgba(26, 54, 93, 0.04) 90%, transparent 100%);
}

.s2-section[id] {
    scroll-margin-top: 96px;
}


/* --- 4. NAVIGATION --- */
.s2-nav {
    background-color: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(26, 54, 93, 0.08);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.s2-nav .s2-brand > img:first-child {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: 0 0 auto;
}

.s2-nav .s2-brand > img:last-child {
    width: auto;
    height: 16px;
    display: block;
}

.s2-nav--scrolled {
    box-shadow: 0 2px 12px rgba(26, 54, 93, 0.1);
}

.s2-nav-links > li > a {
    border-bottom: 2px solid transparent;
    transition: color 0.22s ease, border-color 0.22s ease;
}

.s2-nav-links > li > a:hover {
    border-bottom-color: var(--s2-color-primary);
}

.s2-nav-cta > a {
    box-shadow: 0 2px 8px rgba(26, 54, 93, 0.2);
}

.s2-nav-cta > a:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(26, 54, 93, 0.25) !important;
}

/* Mobile nav */
@media (max-width: 991px) {
    .s2-nav-links > li > a {
        border-bottom: none;
    }
    .s2-nav-links > li > a:hover {
        border-bottom: none;
    }
}


/* --- 5. HERO --- */
.s2-hero {
    background: linear-gradient(135deg, var(--s2-color-primary) 0%, var(--s2-color-primary-dark) 100%);
    min-height: 55vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.s2-hero::before {
    content: '';
    position: absolute;
    top: -8rem;
    right: -8rem;
    width: min(34rem, 65vw);
    height: min(34rem, 65vw);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 24%, transparent 70%);
    border-radius: 999px;
    filter: blur(10px);
    pointer-events: none;
}

.s2-hero::after {
    content: '';
    position: absolute;
    left: -10rem;
    bottom: -12rem;
    width: min(42rem, 78vw);
    height: min(42rem, 78vw);
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.06) 26%, transparent 70%);
    border-radius: 999px;
    filter: blur(12px);
    pointer-events: none;
}

.s2-hero-content {
    position: relative;
    z-index: 1;
}

.s2-hero-title {
    color: #ffffff;
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    max-width: 26ch;
    text-wrap: balance;
}

.s2-hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    max-width: 38rem;
    line-height: 1.7;
    margin-top: 1.25rem;
}

.s2-hero-actions {
    margin-top: 2rem;
}

.s2-hero .s2-btn--primary {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.s2-hero .s2-btn--outline {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.s2-hero .s2-btn--outline:hover {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.s2-hero .s2-badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: 0.75rem;
}

.mysmartsite-hero-kicker {
    display: inline-block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}


/* --- 6. SECTIONS --- */
.s2-section-header--center {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.s2-section-title {
    overflow: hidden;
}

.s2-section-title h2 {
    display: inline;
}

.s2-section-title h2::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 100vw;
    height: 1px;
    background: linear-gradient(to right, rgba(26, 54, 93, 0.18), transparent);
    margin-left: 1.5rem;
    margin-bottom: 0.1em;
}

/* Tagline pill */
.s2-tagline {
    background-color: rgba(26, 54, 93, 0.07);
    color: var(--s2-color-primary);
    border-radius: var(--s2-radius-pill);
    padding: 0.35em 1em;
    display: inline-block;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Reduce gap between section title+line and lead text */
.s2-section-title {
    margin-bottom: 0.5rem !important;
}

/* Increase gap between lead text and content below */
.s2-section-header--center.s2-mb-5 {
    margin-bottom: 3.8rem !important;
}

/* Missing utility — override default p { margin-bottom: 1rem } */
.s2-mb-0 { margin-bottom: 0 !important; }


/* --- 7. COMPONENTS --- */

/* Boutons */
.s2-btn--primary {
    background-color: var(--s2-color-primary);
    border-color: var(--s2-color-primary);
    box-shadow: 0 4px 14px rgba(26, 54, 93, 0.25);
}

.s2-btn--primary:hover {
    background-color: var(--s2-color-primary-dark);
    border-color: var(--s2-color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(26, 54, 93, 0.32);
}

.s2-btn--outline {
    border-color: var(--s2-color-primary);
    color: var(--s2-color-primary);
}

.s2-btn--outline:hover {
    background-color: var(--s2-color-primary);
    border-color: var(--s2-color-primary);
    color: #ffffff;
    transform: translateY(-1px);
}

.s2-btn--ghost {
    color: var(--s2-color-primary);
}

.s2-btn--ghost:hover {
    background-color: var(--s2-color-primary-light);
    transform: translateY(-1px);
}

/* Cards */
.s2-card {
    border-radius: 1rem;
    border: 1px solid var(--s2-color-border);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}

.s2-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(26, 54, 93, 0.08);
    border-color: var(--s2-color-accent);
}

/* Feature boxes */
.s2-feature {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.s2-feature:hover {
    transform: translateY(-4px);
}

.s2-feature-icon {
    background: linear-gradient(145deg, #ffffff 0%, var(--s2-color-primary-light) 100%);
    color: var(--s2-color-primary);
    border: 1px solid rgba(26, 54, 93, 0.08);
    border-radius: 1.15rem;
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 24px rgba(26, 54, 93, 0.06);
    transition: transform 0.3s ease;
}

.s2-feature:hover .s2-feature-icon {
    transform: scale(1.08) rotate(3deg);
}

.s2-feature-text {
    font-size: 1rem;
    line-height: 1.7;
}

/* Step icons */
.s2-step-icon {
    border-radius: 50%;
    background: var(--s2-color-bg);
    box-shadow: var(--s2-shadow);
    color: var(--s2-color-primary);
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

/* Steps process */
.s2-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}

.s2-steps > div {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--s2-color-border);
    border-radius: 1.2rem;
    box-shadow: 0 12px 26px rgba(26, 54, 93, 0.05);
}

@media (max-width: 767px) {
    .s2-steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .s2-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Box highlight */
.s2-box-highlight {
    background: linear-gradient(135deg, rgba(235, 244, 255, 0.96) 0%, rgba(245, 250, 255, 0.98) 100%);
    border-color: rgba(26, 54, 93, 0.08);
    box-shadow: 0 12px 30px rgba(26, 54, 93, 0.06);
    border-radius: var(--s2-radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Callout */
.s2-callout {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(235, 244, 255, 0.95) 0%, rgba(250, 253, 255, 1) 100%);
    border: 1px solid rgba(26, 54, 93, 0.08);
    border-radius: var(--s2-radius);
    box-shadow: 0 12px 28px rgba(26, 54, 93, 0.05);
    padding: 1.5rem;
}

/* Badges */
.s2-badge--primary {
    background-color: var(--s2-color-primary-light);
    color: var(--s2-color-primary);
}

.s2-badge--neutral {
    background-color: #f1f5f9;
    color: #475569;
}

/* Icon system — mask SVG */
.s2-icon-mark {
    font-size: 0;
}

.s2-icon-mark::before {
    content: '';
    display: block;
    width: var(--s2-icon-size, 1.25rem);
    height: var(--s2-icon-size, 1.25rem);
    background: currentColor;
    -webkit-mask-image: var(--s2-icon-mask);
    mask-image: var(--s2-icon-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.s2-icon-mark--sm { --s2-icon-size: 1rem; width: 2.5rem; height: 2.5rem; }
.s2-icon-mark--md { --s2-icon-size: 1.15rem; width: 3.5rem; height: 3.5rem; }
.s2-icon-mark--lg { --s2-icon-size: 1.3rem; width: 4rem; height: 4rem; }
.s2-icon-mark--xl { --s2-icon-size: 1.45rem; width: 4.5rem; height: 4.5rem; }

/* SVG icon masks */
.s2-icon--layers { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 4 8.5 12 13l8-4.5L12 4Z'/%3E%3Cpath d='M4 12.2 12 16.7 20 12.2'/%3E%3Cpath d='M4 16.2 12 20.7 20 16.2'/%3E%3C/svg%3E"); }
.s2-icon--gear { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='M12 2.8v2.1M12 19.1v2.1M4.9 4.9l1.5 1.5M17.6 17.6l1.5 1.5M2.8 12h2.1M19.1 12h2.1M4.9 19.1l1.5-1.5M17.6 6.4l1.5-1.5'/%3E%3C/svg%3E"); }
.s2-icon--shield { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 18.2 5.3v5.2c0 4.5-2.9 7.8-6.2 9.6-3.3-1.8-6.2-5.1-6.2-9.6V5.3L12 3Z'/%3E%3Cpath d='m9.2 12.1 2 2.1 3.7-4.3'/%3E%3C/svg%3E"); }
.s2-icon--leaf { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E"); }
.s2-icon--key { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E"); }
.s2-icon--spark { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 2.8 5.5 13h5l-1.1 8.2L18 10h-5.2l.4-7.2Z'/%3E%3C/svg%3E"); }
.s2-icon--lightning { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8Z'/%3E%3C/svg%3E"); }
.s2-icon--globe { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M12 4c2.2 2.2 3.4 4.9 3.4 8s-1.2 5.8-3.4 8c-2.2-2.2-3.4-4.9-3.4-8S9.8 6.2 12 4Z'/%3E%3C/svg%3E"); }
.s2-icon--heart { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2S4 16 2.1 11.2C.7 7.6 2.7 4 6.6 4c2.3 0 3.9 1.2 5.4 3 1.5-1.8 3.1-3 5.4-3 3.9 0 5.9 3.6 4.5 7.2C20 16 12 21.2 12 21.2Z'/%3E%3C/svg%3E"); }
.s2-icon--chart { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5h16'/%3E%3Crect x='6' y='11' width='2.6' height='6' rx='1'/%3E%3Crect x='10.7' y='7.5' width='2.6' height='9.5' rx='1'/%3E%3Crect x='15.4' y='4.7' width='2.6' height='12.3' rx='1'/%3E%3C/svg%3E"); }
.s2-icon--refresh { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6'/%3E%3Cpath d='M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10'/%3E%3Cpath d='M20.49 15a9 9 0 0 1-14.85 3.36L1 14'/%3E%3C/svg%3E"); }
.s2-icon--pin { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6-5.1 6-11.1A6 6 0 1 0 6 9.9C6 15.9 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3C/svg%3E"); }
.s2-icon--message { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.8h16v9.8H9.2L4 19v-3.4z'/%3E%3C/svg%3E"); }
.s2-icon--building { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21h14'/%3E%3Cpath d='M7 21V6.9L12 4l5 2.9V21'/%3E%3Cpath d='M9 9h2M13 9h2M9 12.5h2M13 12.5h2M9 16h2M13 16h2'/%3E%3C/svg%3E"); }
.s2-icon--user { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M5.5 20.1c0-3.6 3-6.6 6.5-6.6s6.5 3 6.5 6.6'/%3E%3C/svg%3E"); }
.s2-icon--check { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.2'/%3E%3Cpath d='m9.2 12.2 1.9 2 3.8-4.4'/%3E%3C/svg%3E"); }
.s2-icon--connect { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='12' r='2.1'/%3E%3Ccircle cx='17' cy='7' r='2.1'/%3E%3Ccircle cx='17' cy='17' r='2.1'/%3E%3Cpath d='M8.8 11.1 15.2 8.5M8.8 12.9 15.2 15.5'/%3E%3C/svg%3E"); }
.s2-icon--palette { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a8 8 0 1 0 0 16h3.1a1.7 1.7 0 0 0 0-3.4h-1.1a1.1 1.1 0 0 1 0-2.2H16a1.6 1.6 0 0 0 0-3.2h-1A3.1 3.1 0 0 1 12 8.5 2 2 0 0 1 12 4Z'/%3E%3Ccircle cx='8.4' cy='10.2' r='.8'/%3E%3Ccircle cx='10' cy='14' r='.8'/%3E%3Ccircle cx='12.9' cy='11.2' r='.8'/%3E%3C/svg%3E"); }
.s2-icon--document { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.8h6l4 4V20H7z'/%3E%3Cpath d='M13 3.8v4h4'/%3E%3Cpath d='M9 11h6M9 14h6'/%3E%3C/svg%3E"); }
.s2-icon--cloud { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 18.2h9.1a3.6 3.6 0 0 0 .6-7.1 4.8 4.8 0 0 0-9.4-1.1 3.8 3.8 0 0 0-.3 8.2Z'/%3E%3C/svg%3E"); }
.s2-icon--pencil { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17.4 15.8 5.6a1.5 1.5 0 0 1 2.1 0l1.4 1.4a1.5 1.5 0 0 1 0 2.1L7.5 21H4z'/%3E%3Cpath d='M13.8 7.6 16.4 10.2'/%3E%3Cpath d='M4 21h5.2'/%3E%3Cpath d='M4 21c3-2 5-2 7 0s4 2 6 0'/%3E%3C/svg%3E"); }
.s2-icon--search { --s2-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }


/* --- 7B. EDITORIAL LAYOUT — Identité section --- */
.mysmartsite-editorial-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 1.6rem;
    align-items: start;
}

.mysmartsite-editorial-copy {
    padding: 2rem;
    background: linear-gradient(145deg, rgba(245, 250, 255, 0.94) 0%, rgba(236, 245, 255, 0.98) 100%);
    border: 1px solid rgba(26, 54, 93, 0.1);
    border-radius: 1.65rem;
    box-shadow: 0 20px 42px rgba(26, 54, 93, 0.08);
    position: relative;
    overflow: hidden;
}

.mysmartsite-editorial-copy::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 0.28rem;
    background: linear-gradient(90deg, var(--s2-color-secondary), var(--s2-color-accent));
}

.mysmartsite-editorial-panel {
    padding: 1.9rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 252, 255, 0.98) 100%);
    border: 1px solid rgba(26, 54, 93, 0.1);
    border-radius: 1.45rem;
    box-shadow: 0 18px 36px rgba(26, 54, 93, 0.06);
}

.mysmartsite-editorial-item {
    position: relative;
    padding: 1rem 0 1rem 3.1rem;
    border-top: 1px solid rgba(26, 54, 93, 0.1);
    counter-increment: editorial-step;
}

.mysmartsite-editorial-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.mysmartsite-editorial-item::before {
    content: counter(editorial-step, decimal-leading-zero);
    position: absolute;
    top: 0.95rem;
    left: 0;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(26, 54, 93, 0.08);
    color: var(--s2-color-secondary);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.mysmartsite-editorial-item:first-child::before {
    top: 0;
}

.mysmartsite-editorial-kicker {
    margin: 0 0 0.85rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--s2-color-secondary);
}

@media (max-width: 767px) {
    .mysmartsite-editorial-shell {
        grid-template-columns: 1fr;
    }
}


/* --- 7C. BENEFITS PANELS --- */
.mysmartsite-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.mysmartsite-benefit-panel {
    padding: 1.4rem 1.35rem;
    background: #ffffff;
    border: 1px solid rgba(26, 54, 93, 0.08);
    border-radius: 1.2rem;
    box-shadow: 0 12px 26px rgba(26, 54, 93, 0.05);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.mysmartsite-benefit-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(26, 54, 93, 0.08);
}

.mysmartsite-benefit-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.28rem 0.65rem;
    margin-bottom: 0.8rem;
    border-radius: 999px;
    background: var(--s2-color-primary-light);
    color: var(--s2-color-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.mysmartsite-benefit-panel h3 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
    color: var(--s2-color-primary-dark);
}

.mysmartsite-benefit-panel p {
    margin: 0;
    color: var(--s2-color-text-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .mysmartsite-benefits-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mysmartsite-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* --- 7D. STYLE CARDS (Inspirations) --- */
.mysmartsite-style-card {
    overflow: hidden;
    border-radius: 1.35rem;
    border: 1px solid rgba(26, 54, 93, 0.08);
    box-shadow: 0 16px 34px rgba(26, 54, 93, 0.06);
    background: rgba(255, 255, 255, 0.94);
}

.mysmartsite-style-card img {
    transition: transform 0.42s ease, filter 0.42s ease;
}

.mysmartsite-style-card:hover img {
    transform: scale(1.03);
    filter: saturate(1.04);
}

.mysmartsite-style-card .s2-card-body {
    padding: 1.15rem 1.2rem 1.3rem;
}


/* --- 7D-BIS. PERFORMANCE FEATURES (plain color icons) --- */
.mysmartsite-perf-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mysmartsite-perf-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    transition: transform 0.3s ease;
}

.mysmartsite-perf-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mysmartsite-perf-feature:hover .mysmartsite-perf-icon {
    transform: scale(1.1);
}

.mysmartsite-perf-icon--rose {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.mysmartsite-perf-icon--emerald {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.mysmartsite-perf-icon--sky {
    background-color: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.mysmartsite-perf-text .s2-font-medium {
    font-size: 0.98rem;
}

.mysmartsite-perf-text .s2-feature-text {
    font-size: 0.92rem;
    line-height: 1.65;
}

/* --- 7E. PRICING CARDS --- */
.mysmartsite-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

.mysmartsite-pricing-card {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 2rem;
    min-height: 100%;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(245, 250, 255, 0.98) 0%, rgba(238, 246, 255, 0.98) 100%);
    border: 1px solid rgba(26, 54, 93, 0.12);
    border-radius: 1.45rem;
    box-shadow: 0 18px 38px rgba(26, 54, 93, 0.07);
}

.mysmartsite-pricing-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 0.28rem;
    background: linear-gradient(90deg, var(--s2-color-primary), var(--s2-color-primary-dark));
}

.mysmartsite-pricing-card > .s2-badge {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.7);
    color: var(--s2-color-primary);
    border: 1px solid rgba(26, 54, 93, 0.16);
}

.mysmartsite-pricing-card h3 {
    color: var(--s2-color-primary-dark);
    margin: 0.5rem 0 0.25rem;
    font-size: 1.3rem;
}

.mysmartsite-pricing-price {
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.2rem 0.55rem;
    font-size: clamp(2.2rem, 4.3vw, 2.8rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--s2-color-primary-dark);
}

.mysmartsite-pricing-prefix {
    display: block;
    flex-basis: 100%;
    margin-bottom: 0.18rem;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--s2-color-text-muted);
}

.mysmartsite-pricing-currency {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    margin-left: 0.1rem;
    padding-bottom: 0.22rem;
    font-size: 0.82rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s2-color-secondary);
}

.mysmartsite-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.7rem;
}

.mysmartsite-pricing-features li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--s2-color-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.mysmartsite-pricing-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--s2-color-accent);
}

.mysmartsite-pricing-action {
    margin-top: auto;
}

@media (max-width: 767px) {
    .mysmartsite-pricing-grid {
        grid-template-columns: 1fr;
    }
}


/* --- 7F. OWNERSHIP PANEL --- */
.mysmartsite-ownership-panel {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
    text-align: left;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 249, 255, 0.98) 100%);
    border: 1px solid rgba(26, 54, 93, 0.12);
    border-radius: 1.6rem;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    color: var(--s2-color-text);
}

.mysmartsite-ownership-panel p {
    color: var(--s2-color-text);
}

.mysmartsite-ownership-panel::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 0.35rem;
    background: linear-gradient(90deg, var(--s2-color-accent), var(--s2-color-secondary));
}

.mysmartsite-ownership-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.mysmartsite-ownership-item {
    padding-top: 0.9rem;
    border-top: 1px solid rgba(26, 54, 93, 0.1);
}

.mysmartsite-ownership-item dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--s2-color-secondary);
}

.mysmartsite-ownership-item dd {
    margin: 0.35rem 0 0;
    font-size: 1.03rem;
    font-weight: 700;
    color: var(--s2-color-primary-dark);
}

@media (max-width: 575px) {
    .mysmartsite-ownership-list {
        grid-template-columns: 1fr;
    }
}


/* --- 8. FORMS --- */
.s2-form-group {
    margin-bottom: 1rem;
}

.s2-input,
.s2-textarea,
.s2-select {
    border-radius: 8px;
    border: 1px solid rgba(26, 54, 93, 0.15);
    padding: 0.7rem 0.9rem;
    font-family: var(--s2-font-body);
    font-size: 1rem;
    background-color: #ffffff;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.s2-input:focus,
.s2-textarea:focus,
.s2-select:focus {
    border-color: var(--s2-color-primary);
    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
    outline: none;
}

.s2-input::placeholder,
.s2-textarea::placeholder {
    color: #94a3b8;
}

.s2-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--s2-color-text);
}

/* Feedback message */
.s2-feedback {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.s2-feedback.s2-feedback--success {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.s2-feedback.s2-feedback--error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Contact wrapper */
.s2-contact-wrapper {
    border: 1px solid rgba(26, 54, 93, 0.1);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(26, 54, 93, 0.08);
}

.s2-contact-info {
    padding: 2rem;
    background: linear-gradient(180deg, rgba(235, 244, 255, 0.6), rgba(235, 244, 255, 0.3));
    border-right: 1px solid rgba(26, 54, 93, 0.1);
}

/* Reduce space between label and value in contact info */
.s2-contact-info .s2-font-medium {
    margin-bottom: 0.1rem;
    line-height: 1.3;
}

.s2-contact-form {
    padding: 2rem;
    background: linear-gradient(180deg, #ffffff, #fbfcfc);
}


/* --- 9. FOOTER --- */
.s2-footer {
    background-color: var(--s2-color-primary-light);
    color: var(--s2-color-text);
    border-top: 1px solid var(--s2-color-border);
}

.s2-footer a {
    color: var(--s2-color-text);
}

.s2-footer a:hover {
    color: var(--s2-color-primary);
}

.s2-footer-brand {
    color: var(--s2-color-primary);
    font-family: var(--s2-font-sans);
    font-size: 1.2rem;
    font-weight: 700;
}


/* --- 10. ANIMATIONS & EFFECTS --- */
.s2-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.s2-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

.s2-delay-1 { transition-delay: 0.1s; }
.s2-delay-2 { transition-delay: 0.2s; }
.s2-delay-3 { transition-delay: 0.3s; }
.s2-delay-4 { transition-delay: 0.4s; }
.s2-delay-5 { transition-delay: 0.5s; }


/* --- 11. PROJECT EXTENSIONS --- */

/* Section --primary (Propriétaire) */
.s2-section--primary {
    background: linear-gradient(135deg, var(--s2-color-primary) 0%, var(--s2-color-primary-dark) 100%);
}

.s2-section--primary .s2-tagline {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.s2-section--primary h2 {
    color: #ffffff;
}

.s2-section--primary .s2-lead {
    color: rgba(255, 255, 255, 0.82);
}

/* Nav dropdown (for parent site integration) */
.s2-dropdown-menu li > a:hover {
    transform: translateX(4px);
}

/* Performance metrics cards */
.mysmartsite-metric {
    text-align: center;
    padding: 1.5rem 1rem;
}

.mysmartsite-metric-value {
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--s2-color-accent);
}

.mysmartsite-metric-label {
    font-size: 0.85rem;
    color: var(--s2-color-text-muted);
    margin-top: 0.5rem;
}


/* --- 11b. HERO GRID & MOCKUP --- */
.s2-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.s2-hero-grid .s2-hero-content {
    max-width: 720px;
}

/* Colonne visuelle */
.s2-hero-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    justify-self: end;
    z-index: 2;
    pointer-events: none;
}

.s2-hero-mockup {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: var(--s2-radius-lg);
    box-shadow:
        0 25px 60px -15px rgba(26, 54, 93, 0.25),
        0 10px 30px -10px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(26, 54, 93, 0.06);
    overflow: hidden;
    transform: rotateY(-6deg) rotateX(2deg);
    transition: transform 600ms var(--s2-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
    pointer-events: auto;
}

.s2-hero-visual:hover .s2-hero-mockup {
    transform: rotateY(-2deg) rotateX(0deg);
}

.s2-hero-mockup-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    background: var(--s2-color-bg-alt);
    border-bottom: 1px solid var(--s2-color-border);
}

.s2-hero-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.s2-hero-mockup-dot--red    { background: #ff5f57; }
.s2-hero-mockup-dot--yellow { background: #febc2e; }
.s2-hero-mockup-dot--green  { background: #28c840; }

.s2-hero-mockup-url {
    flex: 1;
    margin-left: 0.6rem;
    height: 20px;
    background: #ffffff;
    border: 1px solid var(--s2-color-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 0.65rem;
    font-family: var(--s2-font-mono);
    font-size: 0.65rem;
    color: var(--s2-color-text-muted);
}

.s2-hero-mockup-screen {
    background: linear-gradient(180deg, #ffffff 0%, var(--s2-color-bg) 100%);
    padding: 0.85rem 1rem 1.25rem;
}

/* Mini-nav */
.s2-hero-mockup-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--s2-color-border);
    margin-bottom: 0.85rem;
}

.s2-hero-mockup-brand {
    font-family: var(--s2-font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--s2-color-primary);
    margin-right: auto;
}

.s2-hero-mockup-link {
    width: 32px;
    height: 7px;
    background: var(--s2-color-border);
    border-radius: 4px;
}

.s2-hero-mockup-link--cta {
    width: 50px;
    background: var(--s2-color-accent);
}

/* Mini-hero */
.s2-hero-mockup-body {
    padding: 0.4rem 0 1rem;
}

.s2-hero-mockup-tagline {
    width: 75px;
    height: 8px;
    background: rgba(6, 182, 212, 0.25);
    border-radius: 4px;
    margin-bottom: 0.7rem;
}

.s2-hero-mockup-h1 {
    width: 85%;
    height: 11px;
    background: var(--s2-color-primary);
    border-radius: 4px;
    margin-bottom: 0.4rem;
}

.s2-hero-mockup-h1--short {
    width: 55%;
}

.s2-hero-mockup-p {
    width: 95%;
    height: 5px;
    background: var(--s2-color-border);
    border-radius: 4px;
    margin-top: 0.7rem;
    margin-bottom: 0.3rem;
}

.s2-hero-mockup-p--short {
    width: 70%;
}

.s2-hero-mockup-btn {
    width: 90px;
    height: 22px;
    background: var(--s2-color-accent);
    border-radius: 6px;
    margin-top: 0.85rem;
}

/* Mini-cards */
.s2-hero-mockup-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-top: 0.4rem;
}

.s2-hero-mockup-card {
    background: #ffffff;
    border: 1px solid var(--s2-color-border);
    border-radius: var(--s2-radius-sm);
    padding: 0.55rem;
}

.s2-hero-mockup-card-icon {
    width: 18px;
    height: 18px;
    background: var(--s2-color-primary-light);
    border-radius: 4px;
    margin-bottom: 0.45rem;
}

.s2-hero-mockup-card-line {
    height: 5px;
    background: var(--s2-color-border);
    border-radius: 3px;
    margin-bottom: 0.28rem;
}

.s2-hero-mockup-card-line--short {
    width: 65%;
}

/* --- 12. RESPONSIVE --- */
@media (max-width: 1023px) {
    .s2-hero-visual {
        display: none;
    }
    .s2-hero-grid .s2-hero-content {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .s2-hero {
        min-height: 60vh;
    }

    .s2-hero-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .s2-section--white + .s2-section--white::before {
        display: none;
    }

    .s2-contact-info {
        border-right: none;
        border-bottom: 1px solid rgba(26, 54, 93, 0.1);
    }
}

@media (max-width: 575px) {
    .s2-hero-title {
        font-size: clamp(1.6rem, 7vw, 2rem);
    }
}