/* ==========================================================================
   STG WEB SOLUTIONS — Design system
   Palette : blanc cassé / navy profond / bleu électrique → violet
   Typo    : Manrope (titres) + Inter (texte courant)
   Signature visuelle : motif "fenêtre navigateur" (barre de titre à points)
   ========================================================================== */

:root {
    /* Couleurs */
    --color-bg: #FAFBFD;
    --color-bg-alt: #F1F3F9;
    --color-dark: #0A1128;
    --color-dark-soft: #121A34;
    --color-primary: #14213D;
    --color-secondary: #2A3A5C;
    --color-accent: #3652F6;
    --color-accent-2: #7B5CFA;
    --color-accent-soft: #EEF0FE;
    --color-text: #1B2233;
    --color-muted: #5B6478;
    --color-border: #E4E7EE;
    --color-light: #FFFFFF;
    --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
    --gradient-dark: linear-gradient(160deg, var(--color-dark) 0%, #1A2550 100%);

    /* Typo */
    --font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Espacements */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.75rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-2xl: 7.5rem;

    /* Rayons & ombres */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 8px rgba(10, 17, 40, 0.06);
    --shadow-md: 0 12px 32px rgba(10, 17, 40, 0.08);
    --shadow-lg: 0 24px 60px rgba(10, 17, 40, 0.14);

    /* Layout */
    --container: 1180px;
    --header-height: 84px;
}

/* --------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-primary);
    line-height: 1.15;
    margin: 0 0 var(--space-sm);
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 var(--space-sm); color: var(--color-muted); text-align: justify; }
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}
section { padding: var(--space-2xl) 0; position: relative; }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--gradient-dark); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.72); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: var(--space-sm);
}
.section-dark .eyebrow { background: rgba(255,255,255,0.1); color: #B9C2FF; }

.section-head { max-width: 680px; margin-bottom: var(--space-lg); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p.lead { font-size: 1.1rem; }

/* Accessibilité : focus visible */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-dark);
    color: #fff;
    padding: 0.75rem 1.25rem;
    z-index: 999;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    padding: 0.9rem 1.7rem;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.btn-primary {
    background: var(--gradient-accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(54, 82, 246, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(54, 82, 246, 0.36); }
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); }
.section-dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.3); }
.section-dark .btn-secondary:hover { border-color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.88rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* --------------------------------------------------------------------
   Header
   -------------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    background: rgba(250, 251, 253, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.site-header.is-scrolled {
    box-shadow: 0 4px 24px rgba(10, 17, 40, 0.07);
    border-color: var(--color-border);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    transition: height 0.25s ease;
}
.site-header.is-scrolled .container { height: 68px; }

.brand-logo { width: 196px; height: auto; display: block; }
.footer-brand-logo { width: 190px; }
.footer-col > p { color: rgba(255,255,255,0.82); text-align: left; }

.logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.logo .logo-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--gradient-accent);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.85rem; font-weight: 800;
    flex-shrink: 0;
}

.main-nav { display: flex; }
.main-nav ul { display: flex; gap: 2rem; }
.main-nav a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-secondary);
    position: relative;
    padding: 0.4rem 0;
    transition: color 0.2s ease;
}
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--gradient-accent);
    transition: width 0.25s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--color-primary); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 1rem; }
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 0.5rem;
}
.nav-toggle span {
    width: 24px; height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.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); }

.mobile-nav {
    display: none;
    position: fixed;
    top: var(--header-height); left: 0; right: 0; bottom: 0;
    background: var(--color-light);
    z-index: 490;
    padding: var(--space-lg) 1.5rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
    overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav a {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-primary);
}
.mobile-nav .btn { margin-top: var(--space-md); }

/* --------------------------------------------------------------------
   Signature : fenêtre navigateur (motif récurrent)
   -------------------------------------------------------------------- */
.browser-frame {
    background: var(--color-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
}
.browser-frame__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}
.browser-frame__bar span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--color-border);
}
.browser-frame__bar span:nth-child(1) { background: #FF5F57; }
.browser-frame__bar span:nth-child(2) { background: #FEBC2E; }
.browser-frame__bar span:nth-child(3) { background: #28C840; }
.browser-frame__url {
    margin-left: 0.75rem;
    flex: 1;
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    font-size: 0.72rem;
    color: var(--color-muted);
    font-family: var(--font-body);
}
.browser-frame__body { padding: 1.4rem; }

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */
.hero {
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-2xl);
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -180px; right: -180px;
    width: 560px; height: 560px;
    background: var(--gradient-accent);
    opacity: 0.08;
    border-radius: 50%;
    filter: blur(10px);
}
.hero .container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-xl);
    align-items: center;
}
.hero h1 { margin-bottom: var(--space-sm); }
.hero .lead { font-size: 1.15rem; color: var(--color-secondary); }
.hero .sub { font-size: 0.98rem; }
.hero .cta-row { margin-top: var(--space-md); }

.hero-visual { position: relative; }
.hero-visual .browser-frame { animation: floatUp 6s ease-in-out infinite; }
.hero-mini-cards { display: flex; gap: 0.7rem; margin-top: 1rem; }
.hero-mini-card {
    flex: 1;
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.7rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.hero-mini-card .dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 auto 0.5rem; }
.hero-mini-card:nth-child(1) .dot { background: var(--color-accent); }
.hero-mini-card:nth-child(2) .dot { background: var(--color-accent-2); }
.hero-mini-card:nth-child(3) .dot { background: #22C55E; }
.hero-mini-card span { font-size: 0.78rem; font-weight: 700; color: var(--color-primary); font-family: var(--font-display); }
.hero-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-bottom: 1rem; }
.hero-bars i { flex: 1; background: var(--color-bg-alt); border-radius: 4px; display: block; }
.hero-bars i:nth-child(1) { height: 40%; background: var(--color-accent-soft); }
.hero-bars i:nth-child(2) { height: 70%; background: var(--gradient-accent); }
.hero-bars i:nth-child(3) { height: 50%; background: var(--color-accent-soft); }
.hero-bars i:nth-child(4) { height: 90%; background: var(--gradient-accent); }
.hero-bars i:nth-child(5) { height: 35%; background: var(--color-accent-soft); }

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

/* --------------------------------------------------------------------
   Bande de confiance
   -------------------------------------------------------------------- */
.trust-strip { padding: var(--space-lg) 0; background: var(--color-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.trust-strip .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}
.trust-item { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-weight: 700; color: var(--color-primary); font-size: 0.95rem; }
.trust-item .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* --------------------------------------------------------------------
   Cartes génériques
   -------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card .ico {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-sm);
    font-size: 1.3rem;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { margin-bottom: 0; font-size: 0.95rem; }

/* --------------------------------------------------------------------
   Tarifs
   -------------------------------------------------------------------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    align-items: stretch;
}
.price-card {
    position: relative;
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card.is-featured { border: 2px solid var(--color-accent); box-shadow: var(--shadow-md); }
.price-badge {
    position: absolute;
    top: -14px; left: var(--space-md);
    background: var(--gradient-accent);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
}
.price-card h3 { font-size: 1.15rem; line-height: 1.25; min-height: 2.9em; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); font-family: var(--font-display); font-weight: 700; }
.price-value { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.35rem 0 0.2rem; }
.price-value .amount { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: var(--color-primary); }
.price-value .tag { font-size: 0.85rem; color: var(--color-muted); font-weight: 600; }
.price-desc { font-size: 0.95rem; margin-bottom: var(--space-sm); }
.price-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: var(--space-md); flex-grow: 1; }
.price-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; color: var(--color-text); }
.price-list li .check {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.price-actions { margin-top: auto; display: flex; flex-direction: column; }
.price-actions .btn { flex-shrink: 0; }
.price-note { font-size: 0.78rem; color: var(--color-muted); margin-top: var(--space-sm); text-align: center; }
.price-actions .price-note { min-height: 3.4em; display: flex; align-items: flex-start; justify-content: center; }

/* --------------------------------------------------------------------
   IA — section spéciale
   -------------------------------------------------------------------- */
.ia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.ia-closing {
    margin-top: var(--space-lg);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--color-primary);
    max-width: 720px;
    margin-left: auto; margin-right: auto;
}
.ia-closing span { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------------
   Plateformes
   -------------------------------------------------------------------- */
.platform-card { text-align: left; }
.platform-card .platform-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--color-primary); margin-bottom: 0.35rem; display: block; }

/* --------------------------------------------------------------------
   Timeline / process
   -------------------------------------------------------------------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); position: relative; }
.timeline::before {
    content: '';
    position: absolute;
    top: 26px; left: 6%; right: 6%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-border) 0%, var(--color-accent) 50%, var(--color-border) 100%);
    z-index: 0;
}
.timeline-step { position: relative; z-index: 1; }
.timeline-step .num {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--color-light);
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-sm);
}
.timeline-final {
    text-align: center;
    margin-top: var(--space-lg);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.1rem;
}

/* --------------------------------------------------------------------
   Après livraison
   -------------------------------------------------------------------- */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.support-card { background: var(--color-light); border-radius: var(--radius-lg); padding: var(--space-lg); border: 1px solid var(--color-border); }
.support-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.support-card .big { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--color-primary); margin: 0.3rem 0 0.6rem; }
.support-highlight {
    margin-top: var(--space-md);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    background: var(--gradient-dark);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------
   Cibles / profils
   -------------------------------------------------------------------- */
.profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
.profile-chip {
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 0.9rem;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--color-primary);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.profile-chip:hover { border-color: var(--color-accent); transform: translateY(-3px); }

/* --------------------------------------------------------------------
   FAQ Accordéon
   -------------------------------------------------------------------- */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { background: var(--color-light); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: none;
    padding: 1.15rem 1.4rem;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
}
.faq-question .plus {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.25s ease;
    font-weight: 800;
}
.faq-item.is-open .faq-question .plus { transform: rotate(45deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-answer-inner { padding: 0 1.4rem 1.3rem; font-size: 0.95rem; color: var(--color-muted); }

/* --------------------------------------------------------------------
   Formulaire de contact
   -------------------------------------------------------------------- */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.contact-info-card { background: var(--gradient-dark); color: #fff; border-radius: var(--radius-lg); padding: var(--space-lg); position: sticky; top: calc(var(--header-height) + 20px); }
.contact-info-card h3 { color: #fff; }
.contact-info-card p { color: rgba(255,255,255,0.75); }
.contact-phone { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff; margin-top: var(--space-md); display: inline-flex; align-items: center; gap: 0.6rem; }
.contact-phone .ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; }

.form-group { margin-bottom: var(--space-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.form-group label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; margin-bottom: 0.4rem; color: var(--color-primary); }
.form-group .required { color: var(--color-accent); }
.form-control {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-light);
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); outline: none; }
textarea.form-control { min-height: 140px; resize: vertical; }
.form-hint { font-size: 0.8rem; color: var(--color-muted); margin-top: 0.35rem; }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--color-muted); }
.checkbox-row input { margin-top: 0.25rem; }
.honeypot-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; }

.form-feedback { padding: 1rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: var(--space-sm); font-size: 0.95rem; font-weight: 600; }
.form-feedback.success { background: #ECFDF3; color: #067647; border: 1px solid #ABEFC6; }
.form-feedback.error { background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; }

/* --------------------------------------------------------------------
   Sticky mobile CTA
   -------------------------------------------------------------------- */
.mobile-sticky-cta {
    display: none;
    position: fixed;
    bottom: 14px; left: 14px; right: 14px;
    z-index: 480;
}
.mobile-sticky-cta .btn { width: 100%; }

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.site-footer { background: var(--color-dark); color: rgba(255,255,255,0.7); padding: var(--space-xl) 0 var(--space-md); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.15rem; display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.8rem; }
.footer-col h4 { color: #fff; font-family: var(--font-display); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a:hover { color: #fff; }
.footer-phone { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 700; margin-top: 0.5rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-md); font-size: 0.82rem; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------------
   Page interne générique (mentions légales, confidentialité, etc.)
   -------------------------------------------------------------------- */
.page-hero { padding: calc(var(--header-height) + var(--space-lg)) 0 var(--space-lg); background: var(--color-bg-alt); }
.legal-content { max-width: 780px; margin: 0 auto; }
.legal-content h2 { margin-top: var(--space-lg); }
.legal-content ul { list-style: disc; padding-left: 1.3rem; margin-bottom: var(--space-sm); }
.legal-content li { margin-bottom: 0.4rem; color: var(--color-muted); }

/* --------------------------------------------------------------------
   Animations au scroll
   -------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-visual .browser-frame { animation: none; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero .container { grid-template-columns: 1fr; }
    .hero-visual { order: -1; max-width: 480px; margin: 0 auto; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .ia-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .timeline { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
    .timeline::before { display: none; }
    .contact-wrap { grid-template-columns: 1fr; }
    .contact-info-card { position: static; }
    .profile-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-strip .container { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .main-nav, .header-actions .btn-primary { display: none; }
    .nav-toggle { display: flex; }
    .mobile-nav { display: block; }
    .grid-2, .grid-3, .grid-4, .ia-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .timeline { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; gap: var(--space-md); }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .mobile-sticky-cta { display: block; }
    section { padding: var(--space-xl) 0; }
    body { padding-bottom: 70px; }
}

@media (max-width: 480px) {
    .container { padding: 0 1.1rem; }
    .brand-logo { width: 175px; }
    .footer-brand-logo { width: 180px; }
    .price-value .amount { font-size: 2.2rem; }
}

/* --------------------------------------------------------------------
   Optimisations STG Web Solutions
   -------------------------------------------------------------------- */
.platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.platform-card { min-height: 220px; display: flex; flex-direction: column; }
.platform-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: .55rem; }
.platform-name { display: block; font-family: var(--font-display); font-weight: 800; color: var(--color-primary); font-size: 1.05rem; margin-bottom: .35rem; }
.platform-ai-card { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 1rem; }
.platform-ai-icon { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-soft); color: var(--color-accent); font-size: 2rem; }
.platform-ai-card p { margin-bottom: 0; }

@media (max-width: 1024px) {
    .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-ai-card { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .platform-grid { grid-template-columns: 1fr; }
    .platform-ai-card { grid-column: auto; grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr; }
    .price-card h3 { min-height: 0; }
}


/* =====================================================================
   STG WEB SOLUTIONS — THÈME DE LA MAQUETTE DE RÉFÉRENCE
   ===================================================================== */
:root{
    --color-bg:#06152f;
    --color-bg-alt:#071c3e;
    --color-dark:#020b1d;
    --color-dark-soft:#071a37;
    --color-primary:#f5f8ff;
    --color-secondary:#d6e2f5;
    --color-accent:#ffd34d;
    --color-accent-2:#12a9ff;
    --color-accent-soft:rgba(18,169,255,.10);
    --color-text:#eef5ff;
    --color-muted:#c3d0e4;
    --color-border:rgba(29,128,224,.65);
    --color-light:#0b2146;
    --gradient-accent:linear-gradient(135deg,#ffd34d 0%,#ffbd2e 100%);
    --gradient-dark:linear-gradient(160deg,#020a1b 0%,#08204a 100%);
    --shadow-sm:0 5px 20px rgba(0,0,0,.18);
    --shadow-md:0 15px 45px rgba(0,0,0,.28);
    --shadow-lg:0 25px 80px rgba(0,0,0,.40);
    --container:1120px;
    --header-height:64px;
}
html,body{background:#06152f;color:var(--color-text);}
body{
    font-size:14px;
    background:
      radial-gradient(circle at 85% 12%,rgba(0,122,255,.10),transparent 28rem),
      radial-gradient(circle at 8% 55%,rgba(0,122,255,.08),transparent 24rem),
      #06152f;
}
h1,h2,h3,h4{color:#fff;}
h2{font-size:clamp(1.7rem,3vw,2.35rem);letter-spacing:.02em;}
p{color:#c6d3e8;text-align: justify !important;}
a{color:inherit;}
.container{padding-left:1.1rem;padding-right:1.1rem;}
section{padding:3.1rem 0;}
.section-alt,.reference-section-alt{background:linear-gradient(180deg,#071a38 0%,#06152f 100%);}
.eyebrow{background:rgba(18,169,255,.12);color:#7dccff;border:1px solid rgba(18,169,255,.18);}
.section-head{max-width:800px;margin-bottom:1.2rem;}
.section-head.center{text-align:center;}
.section-head h2{margin-bottom:.1rem;text-transform:uppercase;}
.section-head h2 span{color:var(--color-accent);}
.section-head p{font-size:.83rem;color:#d3def0;margin:0 auto;max-width:760px;text-align:center;}

/* Header */
.site-header{
    height:var(--header-height);
    background:rgba(2,11,29,.88);
    border-bottom:1px solid rgba(33,118,204,.25);
    box-shadow:0 5px 25px rgba(0,0,0,.18);
}
.site-header .container{height:var(--header-height);}
.brand-logo{width:150px;}
.main-nav ul{gap:1.45rem;}
.main-nav a{font-size:.78rem;color:#d8e4f6;padding:.2rem 0;}
.main-nav a:hover,.main-nav a.active{color:#fff;}
.main-nav a::after{background:var(--color-accent);height:2px;}
.header-actions{gap:.5rem;}
.header-actions .btn{font-size:.72rem;padding:.55rem 1rem;}
.logo .logo-mark{background:linear-gradient(135deg,#12a9ff,#ffd34d);}

/* Buttons */
.btn{font-size:.76rem;padding:.65rem 1.15rem;border-width:1px;}
.btn-primary{background:var(--gradient-accent);color:#071226;box-shadow:0 8px 25px rgba(255,211,77,.18);}
.btn-primary:hover{box-shadow:0 12px 30px rgba(255,211,77,.25);}
.btn-secondary,.btn-outline{background:transparent;color:#fff;border-color:#ffd34d;}
.btn-secondary:hover,.btn-outline:hover{color:#071226;background:#ffd34d;border-color:#ffd34d;}
.btn-block{width:100%;}

/* Hero */
.hero-reference{
    min-height:280px;
    padding:64px 0 0;
    background:
      linear-gradient(90deg,#06152f 0%,rgba(6,21,47,.98) 40%,rgba(6,21,47,.20) 66%,rgba(6,21,47,.75) 100%),
      #06152f;
    overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:45% 55%;min-height:280px;align-items:center;}
.hero-text{position:relative;z-index:2;padding:1.4rem 0 1.5rem;}
.hero-kicker{display:block;color:#ffd34d;font-size:.8rem;font-weight:800;letter-spacing:.12em;margin-bottom:.35rem;}
.hero h1{font-size:clamp(2.6rem,6vw,4.25rem);line-height:.9;margin:0 0 .45rem;font-weight:900;letter-spacing:-.03em;}
.hero h1 span{color:#ffd34d;}
.hero-subtitle{font-size:1.15rem;font-weight:800;color:#f7f9ff;margin-bottom:.45rem;}
.hero-copy{font-size:.83rem;line-height:1.45;max-width:520px;color:#e0e8f5;text-align:left;}
.hero .cta-row{margin-top:.9rem;gap:.65rem;}
.hero-photo{
    position:relative;
    min-height:280px;
    background-image:url('../hero-devices.jpg');
    background-size:cover;
    background-position:center;
    margin-left:-5%;
}
.hero-photo-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#06152f 0%,rgba(6,21,47,.15) 35%,rgba(6,21,47,.08) 100%);}
.hero-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(0,136,255,.10);filter:blur(45px);right:12%;top:10%;}

/* Cards / grids */
.reference-card,.solution-card,.approach-card,.reference-price-card,.contact-mini,.contact-form-reference{
    background:linear-gradient(145deg,rgba(8,35,76,.96),rgba(4,23,53,.96));
    border:1px solid rgba(20,126,224,.72);
    box-shadow:0 10px 35px rgba(0,0,0,.18);
}
.reference-card{border-radius:11px;padding:.75rem 1.05rem;display:grid;grid-template-columns:68px 1fr;gap:.75rem;align-items:center;min-height:82px;}
.reference-card h3{font-size:.92rem;margin:0 0 .2rem;}
.reference-card p{font-size:.73rem;line-height:1.35;margin:0;color:#c7d5e9;}
.promise-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;}
.reference-icon{
    width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    border:2px solid #1aa8ff;box-shadow:0 0 15px rgba(18,169,255,.18);
    color:#ffd34d;font-size:1.45rem;background:rgba(0,116,255,.08);
}

/* Pricing */
.reference-pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;align-items:stretch;}
.reference-price-card{position:relative;border-radius:10px;padding:.85rem 1rem;display:flex;flex-direction:column;min-height:235px;}
.reference-price-card.featured{border:2px solid #ffd34d;box-shadow:0 0 28px rgba(255,211,77,.08);}
.offer-badge{position:absolute;right:9px;top:8px;background:#ffd34d;color:#0a1830;font-weight:800;font-size:.62rem;padding:.28rem .55rem;border-radius:5px;}
.offer-icon{height:38px;display:flex;align-items:center;justify-content:center;color:#19b6ff;font-size:2rem;}
.reference-price-card h3{font-size:1rem;text-align:center;margin:.05rem 0 .15rem;}
.reference-price-card>p{font-size:.69rem;text-align:center;line-height:1.3;min-height:37px;margin-bottom:.45rem;}
.reference-price-card ul{display:flex;flex-direction:column;gap:.22rem;margin-bottom:.7rem;}
.reference-price-card li{font-size:.7rem;color:#e1e9f5;}
.reference-price-card li::first-letter{color:#ffd34d;}
.reference-price-card .btn{margin-top:auto;font-size:.68rem;padding:.5rem .8rem;}

/* Solutions */
.solutions-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.55rem;}
.solution-card{border-radius:9px;min-height:118px;padding:.55rem .5rem;text-align:center;}
.solution-icon{height:35px;display:flex;align-items:center;justify-content:center;font-size:1.65rem;font-weight:900;color:#19b6ff;text-shadow:0 0 10px rgba(25,182,255,.25);}
.solution-card h3{font-size:.78rem;margin:.05rem 0 .2rem;}
.solution-card p{font-size:.61rem;line-height:1.25;text-align:left;color:#c8d5e8;margin:0;}
.solution-ai{margin-top:.55rem;border:1px solid rgba(18,126,224,.8);border-radius:10px;padding:.55rem 1rem;display:grid;grid-template-columns:70px 1fr;align-items:center;gap:.75rem;background:linear-gradient(145deg,rgba(6,32,71,.96),rgba(3,20,47,.96));}
.ai-icon{width:50px;height:50px;border:2px solid #18b6ff;display:flex;align-items:center;justify-content:center;color:#18b6ff;font-weight:900;font-size:1rem;box-shadow:0 0 15px rgba(18,182,255,.12);}
.solution-ai h3{font-size:.82rem;margin:0 0 .1rem;}
.solution-ai p{font-size:.65rem;line-height:1.3;margin:0;color:#cbd7e8;}

/* Approach */
.approach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;}
.approach-card{min-height:62px;border-radius:9px;padding:.5rem .75rem;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:.55rem;align-items:center;}
.approach-card>div{grid-row:1/3;font-size:1.7rem;color:#ffd34d;text-align:center;}
.approach-card h3{font-size:.7rem;margin:0;}
.approach-card p{font-size:.58rem;line-height:1.2;margin:0;color:#c7d5e8;}

/* Contact */
.contact-reference{padding-top:2.5rem;padding-bottom:2.5rem;}
.contact-reference-grid{display:grid;grid-template-columns:43% 57%;gap:.9rem;align-items:center;}
.contact-reference-intro h2{text-align:left;margin:0 0 .1rem;}
.contact-reference-intro h2 span{color:#ffd34d;}
.contact-reference-intro>p{font-size:.72rem;margin-bottom:.7rem;}
.contact-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;}
.contact-mini{border-radius:8px;padding:.65rem .55rem;display:flex;flex-direction:column;min-height:68px;}
.contact-mini strong{font-size:.65rem;color:#fff;margin-bottom:.25rem;}
.contact-mini span{font-size:.66rem;color:#fff;}
.contact-mini small{font-size:.52rem;color:#ffd34d;margin-top:.2rem;}
.contact-form-reference{border-radius:10px;padding:.7rem .8rem;}
.form-row{gap:.45rem;}
.form-group{margin-bottom:.45rem;}
.form-group label{font-size:.62rem;color:#fff;margin-bottom:.2rem;}
.form-control{background:rgba(25,58,103,.72);border:1px solid rgba(100,154,218,.28);color:#fff;border-radius:5px;padding:.42rem .55rem;font-size:.65rem;}
.form-control::placeholder{color:#91a8c7;}
.form-control:focus{border-color:#19b6ff;box-shadow:0 0 0 3px rgba(25,182,255,.10);}
textarea.form-control{min-height:55px;resize:vertical;}
.checkbox-row{font-size:.58rem;color:#b7c7dc;}
.form-hint{color:#a9bad0;}
.required{color:#ffd34d;}
.form-feedback.success{background:rgba(24,184,108,.12);color:#8cf0bb;border-color:rgba(24,184,108,.35);}
.form-feedback.error{background:rgba(255,70,70,.10);color:#ffb1b1;border-color:rgba(255,70,70,.35);}

/* Footer */
.site-footer{background:#020b1d;color:#aebed3;padding:1.35rem 0 .7rem;border-top:1px solid rgba(28,125,218,.28);}
.footer-top{grid-template-columns:1.45fr .7fr .9fr 1.35fr;gap:1rem;padding-bottom:1rem;}
.footer-logo{display:block;margin-bottom:.45rem;}
.footer-brand-logo{width:145px;}
.footer-brand-col>p{color:#c1cde0;text-align:left;font-size:.65rem;margin:0 0 .55rem;}
.footer-col h4{font-size:.65rem;color:#fff;margin-bottom:.45rem;}
.footer-col ul{gap:.25rem;}
.footer-col li,.footer-col a,.footer-hosting p{font-size:.59rem;color:#b6c4d8;}
.footer-col a:hover{color:#fff;}
.footer-hosting p{line-height:1.3;margin-bottom:.25rem;text-align:left;}
.footer-hosting strong{color:#fff;}
.footer-socials{display:flex;gap:.3rem;}
.footer-socials span{width:22px;height:22px;border:1px solid rgba(255,211,77,.65);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffd34d;font-size:.65rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:.6rem;font-size:.55rem;color:#93a7c2;}

/* Other pages */
.page-hero{padding:calc(var(--header-height) + 2rem) 0 1.5rem;background:linear-gradient(180deg,#071a38,#06152f);}
.legal-content,.contact-wrap{color:#d8e3f2;}
.legal-content h2{color:#fff;font-size:1.3rem;border-left:3px solid #ffd34d;padding-left:.55rem;}
.legal-content p,.legal-content li{color:#c1cfe2;font-size:.84rem;}
.card,.support-card,.faq-item{background:linear-gradient(145deg,#08244c,#051a38);border-color:rgba(20,126,224,.62);color:#fff;}
.card h3,.support-card h3,.faq-question{color:#fff;}
.card p,.support-card p,.faq-answer-inner{color:#c1cfe2;}
.faq-item{border-radius:10px;}
.form-control option{background:#0b2146;color:#fff;}
.mobile-nav{background:#031027;}
.mobile-nav a{color:#fff;border-color:rgba(255,255,255,.08);}
.mobile-sticky-cta{background:#031027;border-top:1px solid rgba(255,211,77,.3);}

/* Responsive */
@media (max-width: 1024px){
    .main-nav ul{gap:.9rem;}
    .main-nav a{font-size:.7rem;}
    .hero-grid{grid-template-columns:48% 52%;}
    .solutions-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width: 720px){
    .site-header{height:60px;}
    .site-header .container{height:60px;}
    .brand-logo{width:135px;}
    .hero-reference{padding-top:60px;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-photo{min-height:190px;margin-left:0;order:-1;}
    .hero-text{padding-top:1rem;}
    .hero h1{font-size:3rem;}
    .promise-grid,.reference-pricing,.contact-reference-grid{grid-template-columns:1fr;}
    .solutions-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .approach-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .contact-mini-grid{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr 1fr;}
    .footer-hosting{grid-column:1/-1;}
}
@media (max-width: 480px){
    .hero h1{font-size:2.6rem;}
    .solutions-grid,.approach-grid{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr;}
    .footer-hosting{grid-column:auto;}
}

/* =====================================================================
   V3 — logos de plateformes + typographie agrandie
   ===================================================================== */
:root{
    --header-height:72px;
    --base-font-size:16px;
}
body{font-size:16px;}
.site-header,.site-header .container{height:72px;}
.brand-logo{width:195px !important;max-width:195px;}
.header-actions .btn{font-size:.8rem;padding:.62rem 1.05rem;}
.main-nav ul{gap:1.6rem;}
.main-nav a{font-size:.82rem;}
.hero-text{padding-top:1.8rem;padding-bottom:1.8rem;}
.hero-kicker{font-size:.9rem;}
.hero-subtitle{font-size:1.25rem;}
.hero-copy{font-size:.92rem;line-height:1.52;max-width:570px;}
.hero h1{font-size:clamp(3rem,6vw,4.55rem);}
.section-head h2{font-size:clamp(2rem,3.2vw,2.65rem);}
.section-head p{font-size:.94rem;}
.reference-card{min-height:102px;padding:.9rem 1.15rem;}
.reference-card h3{font-size:1.02rem;}
.reference-card p{font-size:.82rem;line-height:1.45;}
.reference-icon{width:62px;height:62px;font-size:1.6rem;}
.reference-price-card{min-height:270px;padding:1rem 1.1rem;}
.reference-price-card h3{font-size:1.12rem;}
.reference-price-card>p{font-size:.8rem;line-height:1.42;min-height:47px;}
.reference-price-card li{font-size:.79rem;}
.reference-price-card .btn{font-size:.76rem;padding:.6rem .85rem;}
.solution-card{min-height:160px;padding:.75rem .65rem;}
.solution-card h3{font-size:.9rem;margin:.12rem 0 .3rem;}
.solution-card p{font-size:.72rem;line-height:1.38;}
.solution-icon.solution-logo-wrap{height:55px;display:flex;align-items:center;justify-content:center;}
.solution-logo{
    width:auto;
    max-width:110px;
    height:45px;
    object-fit:contain;
    display:block;
}
.solution-card:nth-child(1) .solution-logo{max-width:112px;}
.solution-card:nth-child(2) .solution-logo{max-width:116px;}
.solution-card:nth-child(3) .solution-logo{max-width:112px;}
.solution-card:nth-child(4) .solution-logo{max-width:105px;}
.solution-card:nth-child(5) .solution-logo{max-width:105px;}
.solution-card:nth-child(6) .solution-logo{max-width:86px;height:48px;}
.solution-ai{padding:.7rem 1.15rem;}
.solution-ai h3{font-size:.92rem;}
.solution-ai p{font-size:.73rem;line-height:1.4;}
.approach-card{min-height:78px;padding:.65rem .85rem;}
.approach-card h3{font-size:.8rem;}
.approach-card p{font-size:.66rem;line-height:1.35;}
.contact-reference-intro h2{font-size:2.1rem;}
.contact-reference-intro>p{font-size:.8rem;}
.contact-mini strong,.contact-mini span{font-size:.72rem;}
.contact-mini small{font-size:.58rem;}
.form-group label{font-size:.68rem;}
.form-control{font-size:.72rem;padding:.5rem .6rem;}
.site-footer{font-size:.9rem;}
.footer-brand-col>p,.footer-col li,.footer-col a,.footer-hosting p{font-size:.68rem;}
.footer-col h4{font-size:.72rem;}
.footer-bottom{font-size:.62rem;}
@media (max-width:720px){
    .site-header,.site-header .container{height:64px;}
    .brand-logo{width:170px !important;max-width:170px;}
    .hero h1{font-size:3.15rem;}
    .hero-copy{font-size:.9rem;}
    .reference-card p{font-size:.8rem;}
    .solution-card p{font-size:.71rem;}
}

/* =====================================================================
   V4 — Équilibre bleu / blanc + page Offres corrigée
   ===================================================================== */
:root{
    --color-bg:#ffffff;
    --color-bg-alt:#f5f7fa;
    --color-dark:#081426;
    --color-dark-soft:#10233d;
    --color-primary:#14253f;
    --color-secondary:#536176;
    --color-text:#18263a;
    --color-muted:#5c6879;
    --color-border:#d9e1eb;
    --color-light:#ffffff;
    --color-accent:#d6a81f;
    --color-accent-2:#1677c8;
    --color-accent-soft:rgba(214,168,31,.10);
    --gradient-accent:linear-gradient(135deg,#e4bd45,#c99a16);
    --shadow-sm:0 4px 16px rgba(13,30,52,.07);
    --shadow-md:0 10px 30px rgba(13,30,52,.10);
    --shadow-lg:0 18px 45px rgba(13,30,52,.14);
}

/* Base */
html,body{background:#fff;color:var(--color-text);}
body{
    font-size:16px;
    background:#fff;
}
h1,h2,h3,h4{color:#14253f;}
p{color:#536176;}
a{color:#14253f;}
section{background:#fff;color:#18263a;}
.reference-section-alt,.section-alt{background:#f5f7fa;}
.section-head p{color:#647184;}
.eyebrow{background:#f3f6fa;color:#1677c8;border:1px solid #d8e1eb;}

/* Header white / premium */
.site-header{
    height:72px;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid #e4e9ef;
    box-shadow:0 3px 18px rgba(13,30,52,.07);
}
.site-header .container{height:72px;}
.main-nav a{color:#33445a;}
.main-nav a:hover,.main-nav a.active{color:#14253f;}
.main-nav a::after{background:#d6a81f;}
.header-actions .btn-primary{color:#17243a;}
.header-actions .btn-secondary{color:#14253f;}

/* Hero stays dark, but is now a single accent area */
.hero-reference{
    background:
      linear-gradient(90deg,rgba(5,18,38,.98) 0%,rgba(8,27,55,.94) 44%,rgba(8,27,55,.18) 72%,rgba(8,27,55,.60) 100%),
      #071a34;
}
.hero-copy{color:#e4ebf5;}
.hero-subtitle{color:#fff;}
.hero-kicker{color:#e4bd45;}
.hero h1{color:#fff;}
.hero h1 span{color:#e4bd45;}

/* Promise cards */
.reference-card,.solution-card,.approach-card,.reference-price-card,.contact-mini,.contact-form-reference{
    background:#fff;
    border:1px solid #dbe3ec;
    box-shadow:var(--shadow-sm);
}
.reference-card:hover,.solution-card:hover,.approach-card:hover,.reference-price-card:hover{
    box-shadow:var(--shadow-md);
}
.reference-card h3,.solution-card h3,.approach-card h3,.reference-price-card h3{color:#14253f;}
.reference-card p,.solution-card p,.approach-card p,.reference-price-card p{color:#5b687a;}
.reference-icon{
    border-color:#1677c8;
    color:#c79618;
    background:#f7fafc;
    box-shadow:none;
}

/* Offers page: guaranteed 3 columns on desktop */
.offers-main-section{padding-top:2.5rem;}
.pricing-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:1.25rem !important;
    align-items:stretch !important;
}
.price-card{
    background:#fff !important;
    border:1px solid #d9e1eb !important;
    color:#18263a;
    box-shadow:0 8px 28px rgba(13,30,52,.08);
    min-width:0;
    border-radius:14px;
}
.price-card.is-featured{
    border:2px solid #d6a81f !important;
    box-shadow:0 12px 35px rgba(214,168,31,.13);
}
.price-card h3{color:#14253f !important;}
.price-value .amount{color:#14253f !important;}
.price-value .tag{color:#697587 !important;}
.price-desc{color:#59677a !important;}
.price-list li{color:#26364b !important;}
.price-list li .check{background:#fff8df;color:#b7890f;}
.price-note{color:#697587 !important;}
.price-card .btn-secondary,.price-card .btn-outline{
    color:#14253f;
    border-color:#d6a81f;
    background:#fff;
}
.price-card .btn-secondary:hover,.price-card .btn-outline:hover{
    background:#d6a81f;color:#fff;
}
.price-card .btn-primary{color:#14253f;}
.price-badge{color:#14253f;background:#e4bd45;}

/* Homepage offers */
.reference-price-card{background:#fff;}
.reference-price-card.featured{border-color:#d6a81f;background:#fff;}
.reference-price-card h3,.reference-price-card li{color:#14253f;}
.reference-price-card>p{color:#59677a;}
.reference-price-card .btn-outline{color:#14253f;border-color:#d6a81f;}
.reference-price-card .btn-outline:hover{background:#d6a81f;color:#fff;}

/* Solutions */
.solution-icon{color:#1677c8;text-shadow:none;}
.solution-ai{background:#fff;border-color:#d9e1eb;box-shadow:var(--shadow-sm);}
.solution-ai h3{color:#14253f;}
.solution-ai p{color:#5b687a;}
.ai-icon{border-color:#1677c8;color:#1677c8;box-shadow:none;}

/* Approach */
.approach-card>div{color:#c99a16;}
.approach-card p{color:#5b687a;}

/* Contact */
.contact-reference{background:#f5f7fa;}
.contact-mini strong,.contact-mini span{color:#14253f;}
.contact-mini small{color:#a0780e;}
.contact-form-reference{box-shadow:0 10px 30px rgba(13,30,52,.07);}
.form-group label{color:#33445a;}
.form-control{
    background:#fff;
    border-color:#d6dee8;
    color:#18263a;
}
.form-control::placeholder{color:#8b97a7;}
.form-control option{background:#fff;color:#18263a;}
.form-control:focus{border-color:#1677c8;box-shadow:0 0 0 3px rgba(22,119,200,.10);}

/* Other pages */
.page-hero{
    background:linear-gradient(180deg,#f7f9fb,#fff);
    border-bottom:1px solid #e7ebf0;
}
.card,.support-card,.faq-item{
    background:#fff;
    border-color:#d9e1eb;
    color:#18263a;
    box-shadow:var(--shadow-sm);
}
.card h3,.support-card h3,.faq-question{color:#14253f;}
.card p,.support-card p,.faq-answer-inner{color:#59677a;}
.legal-content p,.legal-content li{color:#536176;}
.legal-content h2{color:#14253f;border-color:#d6a81f;}

/* Footer remains dark for contrast */
.site-footer{
    background:#081426;
    color:#aebbc9;
    border-top:1px solid #132b4a;
}
.footer-brand-col>p,.footer-col li,.footer-col a,.footer-hosting p{color:#b8c4d2;}
.footer-col h4{color:#fff;}
.footer-col a:hover{color:#fff;}
.footer-hosting strong{color:#fff;}
.footer-bottom{color:#8e9caf;border-color:rgba(255,255,255,.10);}

/* Mobile */
@media(max-width:900px){
    .pricing-grid{grid-template-columns:1fr 1fr !important;}
}
@media(max-width:640px){
    .pricing-grid{grid-template-columns:1fr !important;}
}

/* V5 — thème clair professionnel */
html,body,main,section{background:#fff !important;color:#1b2a3d !important;}
section.section-alt,section.reference-section-alt{background:#f6f8fb !important;}
.page-hero{background:linear-gradient(180deg,#f7f9fb,#fff) !important;border-bottom:1px solid #e5eaf0 !important;}
.page-hero h1,.page-hero h2,.section-head h1,.section-head h2{color:#12243b !important;}
.page-hero p,.section-head p,.lead{color:#687588 !important;}
.site-header{background:#fff !important;border-bottom:1px solid #e4e9ef !important;box-shadow:0 3px 18px rgba(17,34,54,.06) !important;}
.main-nav a{color:#33445a !important;}
.main-nav a:hover,.main-nav a.active{color:#12243b !important;}
.card,.support-card,.faq-item,.platform-card,.reference-card,.solution-card,.approach-card,.reference-price-card,.contact-mini,.contact-form-reference{
    background:#fff !important;color:#1b2a3d !important;border:1px solid #dce3eb !important;
    box-shadow:0 8px 24px rgba(17,34,54,.055) !important;
}
.card h3,.support-card h3,.faq-question,.platform-name,.platform-card h3,.reference-card h3,.solution-card h3,.approach-card h3{color:#12243b !important;}
.card p,.support-card p,.faq-answer-inner,.platform-card p,.reference-card p,.solution-card p,.approach-card p{color:#5d6b7d !important;}

.platform-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:1rem !important;}
.platform-card{min-height:210px !important;padding:1.15rem !important;text-align:center !important;border-radius:12px !important;}
.platform-logo{height:72px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin-bottom:.45rem !important;}
.platform-logo img{display:block !important;width:auto !important;max-width:170px !important;height:64px !important;max-height:64px !important;object-fit:contain !important;}
.platform-name{display:block !important;font-size:1.05rem !important;font-weight:800 !important;margin-bottom:.35rem !important;}
.platform-card p{font-size:.82rem !important;line-height:1.45 !important;text-align:center !important;margin:0 !important;}
.platform-ai-card{grid-column:1/-1 !important;min-height:100px !important;display:grid !important;grid-template-columns:70px 1fr !important;gap:1rem !important;align-items:center !important;text-align:left !important;}
.platform-ai-card .platform-name,.platform-ai-card p{text-align:left !important;}
.platform-ai-icon{width:56px !important;height:56px !important;border:2px solid #d3a51e !important;border-radius:12px !important;background:#fff9e7 !important;color:#b4850b !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:1.05rem !important;font-weight:800 !important;}

.pricing-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
.price-card{background:#fff !important;}
.price-card h3,.price-value .amount{color:#12243b !important;}
.price-desc,.price-list li,.price-note{color:#5d6b7d !important;}
.btn-primary{background:linear-gradient(135deg,#e5c24d,#c99c1b) !important;color:#15253a !important;}
.btn-secondary,.btn-outline{background:#fff !important;color:#15253a !important;border-color:#d1a72b !important;}
.btn-secondary:hover,.btn-outline:hover{background:#d1a72b !important;color:#fff !important;}
.contact-reference{background:#f6f8fb !important;}
.form-control{background:#fff !important;color:#1b2a3d !important;border-color:#d6dee8 !important;}
.site-footer{background:#0b1728 !important;color:#b7c3d2 !important;}
.hero-reference{background:linear-gradient(90deg,rgba(7,20,39,.98),rgba(8,27,51,.90) 48%,rgba(8,27,51,.16) 78%,rgba(8,27,51,.45)),#081a31 !important;}

@media(max-width:900px){.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:640px){.platform-grid{grid-template-columns:1fr !important;}.platform-ai-card{grid-column:auto !important;grid-template-columns:1fr !important;}}

/* =====================================================================
   V6 — Logo header visible + interface réellement lisible à 100 %
   ===================================================================== */
body{font-size:18px !important;}
.site-header,.site-header .container{height:82px !important;}
.brand-logo{width:235px !important;max-width:235px !important;height:auto !important;}
.main-nav ul{gap:1.75rem !important;}
.main-nav a{font-size:.9rem !important;padding:.3rem 0 !important;}
.header-actions .btn{font-size:.84rem !important;padding:.7rem 1.15rem !important;}

section{padding:4rem 0 !important;}
.page-hero{padding:4.2rem 0 2.8rem !important;}
.section-head{max-width:900px !important;margin-bottom:1.8rem !important;}
.section-head h1{font-size:clamp(2.5rem,4vw,3.5rem) !important;}
.section-head h2{font-size:clamp(2.2rem,3.5vw,3rem) !important;}
.section-head p,.lead{font-size:1.05rem !important;line-height:1.6 !important;}

.reference-card{min-height:135px !important;padding:1.2rem 1.45rem !important;gap:1rem !important;}
.reference-card h3{font-size:1.18rem !important;}
.reference-card p{font-size:.94rem !important;line-height:1.55 !important;}
.reference-icon{width:72px !important;height:72px !important;font-size:1.75rem !important;}

.reference-pricing{gap:1.25rem !important;}
.reference-price-card{min-height:330px !important;padding:1.25rem 1.35rem !important;}
.reference-price-card h3{font-size:1.3rem !important;}
.reference-price-card>p{font-size:.9rem !important;line-height:1.5 !important;min-height:58px !important;}
.reference-price-card li{font-size:.88rem !important;}
.reference-price-card .btn{font-size:.82rem !important;padding:.7rem .9rem !important;}

.pricing-grid{gap:1.5rem !important;}
.price-card{padding:1.55rem 1.45rem 1.35rem !important;}
.price-card h3{font-size:1.35rem !important;min-height:3.1em !important;}
.price-value .amount{font-size:3.05rem !important;}
.price-value .tag{font-size:.95rem !important;}
.price-desc{font-size:1rem !important;line-height:1.55 !important;}
.price-list{gap:.7rem !important;}
.price-list li{font-size:.94rem !important;line-height:1.4 !important;}
.price-list li .check{width:23px !important;height:23px !important;font-size:.75rem !important;}
.price-note{font-size:.8rem !important;line-height:1.4 !important;}

.platform-grid{gap:1.15rem !important;}
.platform-card{min-height:255px !important;padding:1.35rem !important;}
.platform-logo{height:82px !important;margin-bottom:.65rem !important;}
.platform-logo img{height:72px !important;max-height:72px !important;max-width:190px !important;}
.platform-name{font-size:1.2rem !important;margin-bottom:.45rem !important;}
.platform-card p{font-size:.9rem !important;line-height:1.5 !important;}
.platform-ai-card{min-height:125px !important;grid-template-columns:80px 1fr !important;gap:1.15rem !important;}
.platform-ai-icon{width:64px !important;height:64px !important;font-size:1.15rem !important;}

.approach-grid{gap:1rem !important;}
.approach-card{min-height:92px !important;padding:.8rem 1rem !important;grid-template-columns:52px 1fr !important;}
.approach-card h3{font-size:.9rem !important;}
.approach-card p{font-size:.75rem !important;line-height:1.4 !important;}

.contact-reference-grid{gap:1.2rem !important;}
.contact-reference-intro h2{font-size:2.6rem !important;}
.contact-reference-intro>p{font-size:.95rem !important;}
.contact-mini{min-height:88px !important;padding:.8rem .7rem !important;}
.contact-mini strong,.contact-mini span{font-size:.82rem !important;}
.contact-mini small{font-size:.66rem !important;}
.contact-form-reference{padding:1rem 1.1rem !important;}
.form-group{margin-bottom:.65rem !important;}
.form-group label{font-size:.76rem !important;}
.form-control{font-size:.82rem !important;padding:.62rem .7rem !important;}
textarea.form-control{min-height:85px !important;}

.footer-brand-logo{width:190px !important;max-width:190px !important;}
.footer-brand-col>p,.footer-col li,.footer-col a,.footer-hosting p{font-size:.76rem !important;}
.footer-col h4{font-size:.82rem !important;}
.footer-bottom{font-size:.68rem !important;}

@media(max-width:900px){
    body{font-size:17px !important;}
    .brand-logo{width:205px !important;}
    .main-nav a{font-size:.8rem !important;}
    section{padding:3.2rem 0 !important;}
}
@media(max-width:640px){
    .site-header,.site-header .container{height:68px !important;}
    .brand-logo{width:190px !important;}
    .hero h1{font-size:3.1rem !important;}
    .reference-card{min-height:120px !important;}
    .reference-card p{font-size:.9rem !important;}
}

/* V7 — icônes offres + logos plateformes robustes */
.offer-icon{
    height:74px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.offer-icon img{
    width:58px !important;
    height:58px !important;
    object-fit:contain !important;
    display:block !important;
}
.platform-logo img{
    background:transparent !important;
}

/* V8 — Justification des textes */
body p,
.card p,
.support-card p,
.reference-card p,
.solution-card p,
.platform-card p,
.reference-price-card > p,
.price-desc,
.price-note,
.price-list li,
.legal-content p,
.legal-content li,
.faq-answer-inner,
.approach-card p,
.solution-ai p,
.platform-ai-card p,
.contact-reference-intro > p,
.footer-brand-col > p,
.footer-hosting p {
    text-align: justify !important;
    text-justify: inter-word;
}

/* Les petits textes centrés restent centrés lorsque leur composition l'exige */
.section-head p,
.platform-card p {
    text-align: justify !important;
}

/* Sur les listes, conserver une lecture naturelle */
.price-list li {
    text-align: left !important;
}

/* Footer : justification sans dégrader les blocs courts */
.footer-brand-col > p,
.footer-hosting p {
    text-align: justify !important;
}

/* Mobile : éviter des espaces excessifs sur les très petites largeurs */
@media (max-width: 480px) {
    p,
    .card p,
    .reference-card p,
    .solution-card p,
    .platform-card p,
    .price-desc,
    .price-note,
    .legal-content p,
    .legal-content li,
    .approach-card p,
    .solution-ai p {
        text-align: justify !important;
    }
}

/* SWS Studio / SWS Studio */
.offers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.offer-card{position:relative;padding:30px;border:1px solid rgba(0,0,0,.1);border-radius:18px;background:#fff;box-shadow:0 10px 35px rgba(0,0,0,.06)}
.offer-card h3{font-size:28px;margin:0 0 8px}
.offer-subtitle{font-weight:700}
.offer-card li{margin:6px 0}
.offer-price{font-size:34px;font-weight:900;margin-top:20px}
.offer-price small{font-size:14px;font-weight:600}
.offer-badge{position:absolute;top:18px;right:18px;font-size:11px;font-weight:900;letter-spacing:.08em;padding:6px 9px;border-radius:999px;background:#111;color:#fff}
@media(max-width:800px){.offers-grid{grid-template-columns:1fr}}

/* SWS Studio — four offers on desktop */
#offres .reference-pricing{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:1rem !important;}
#offres .reference-price-card{min-width:0;}
#offres .offer-logo{width:118px;height:42px;object-fit:contain;display:block;margin:0 auto 4px;}
#offres .offer-icon{min-height:48px;display:flex;align-items:center;justify-content:center;}
#offres .reference-price-card h3{min-height:2.5em;}
@media (max-width:1100px){#offres .reference-pricing{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (max-width:620px){#offres .reference-pricing{grid-template-columns:1fr !important;}}


/* =====================================================================
   SWS Studio + navigation / offres centrées
   ===================================================================== */
.reference-pricing{
    max-width: 930px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}
.reference-price-card{
    width: 100%;
}
.solution-card-link{
    display:block;
    height:100%;
    color:inherit;
}
.solution-more{
    display:inline-block;
    margin-top:.45rem;
    font-size:.68rem;
    font-weight:800;
    color:#ffd34d;
}
.sws-platform-logo img{
    max-width:220px !important;
    height:auto !important;
}
.sws-platform-link{
    margin-top:.65rem;
    align-self:flex-start;
}
.sws-page-hero .section-head{
    margin-bottom:1rem;
}
.sws-branding{
    display:flex;
    justify-content:center;
    margin-bottom:1.2rem;
}
.sws-page-logo{
    width:min(390px, 78vw);
    height:auto;
    filter:drop-shadow(0 12px 22px rgba(54,82,246,.14));
}
.sws-intro-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:var(--space-xl);
    align-items:start;
}
.sws-feature-panel{
    display:grid;
    gap:.65rem;
}
.sws-feature{
    background:var(--color-light);
    border:1px solid var(--color-border);
    border-radius:14px;
    padding:1rem 1.1rem;
    box-shadow:var(--shadow-sm);
}
.sws-feature>span{
    color:#d6a81f;
    font-weight:900;
    margin-right:.5rem;
}
.sws-feature strong{
    color:var(--color-primary);
}
.sws-feature p{
    margin:.35rem 0 0 1.55rem;
    font-size:.82rem;
}
.sws-advantages .card,
.sws-audience .card{
    min-height:170px;
}
.sws-hosting-grid{
    max-width:900px;
    margin:0 auto;
}
.sws-dark-card{
    border:1px solid rgba(29,128,224,.65);
    border-radius:16px;
    padding:1.3rem;
    background:rgba(7,28,62,.72);
}
.sws-dark-card .ico{
    margin-bottom:.4rem;
}
.sws-dark-card p{
    color:#cbd7e8;
}
.sws-price-box{
    max-width:900px;
    margin:0 auto;
    padding:1.6rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
    border:1px solid var(--color-border);
    border-radius:18px;
    background:var(--color-light);
    box-shadow:var(--shadow-md);
}
.sws-price-box h2{
    margin-bottom:.25rem;
}
.sws-price-box p{
    margin:0;
}
.sws-price{
    text-align:center;
    min-width:190px;
}
.sws-price .amount{
    display:block;
    font-family:var(--font-display);
    font-size:3rem;
    font-weight:800;
    color:var(--color-primary);
    line-height:1;
}
.sws-price .tag{
    display:inline-block;
    margin-top:.4rem;
    color:var(--color-muted);
    font-size:.75rem;
}
.sws-price-details{
    max-width:900px;
    margin:1rem auto 0;
    text-align:center;
}
.sws-price-details p{
    margin:0;
    font-size:.82rem;
}
.site-method-grid{
    max-width:1050px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem;
}
.site-method-grid .price-card{
    height:100%;
}
@media (max-width:900px){
    .sws-intro-grid{grid-template-columns:1fr;}
    .site-method-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
    .reference-pricing{max-width:420px;}
    .sws-price-box{flex-direction:column;align-items:flex-start;}
    .sws-price{text-align:left;min-width:0;}
    .sws-price .amount{font-size:2.5rem;}
}


/* Ajustement section NOS OFFRES */
.offers-grid {
  width: min(100%, 1080px);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.offer-card {
  min-height: 430px;
  padding: 28px 24px;
}

@media (max-width: 900px) {
  .offers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .offers-grid {
    grid-template-columns: 1fr;
  }
}


/* Correction finale — SWS Studio */
.sws-page-hero{
    padding-top: calc(82px + 2.6rem) !important;
    padding-bottom: 3.2rem !important;
    overflow: visible !important;
}
.sws-branding{
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    padding-top: .25rem !important;
}
.sws-page-logo{
    display:block !important;
    width: min(560px, 86vw) !important;
    max-width: 560px !important;
    height:auto !important;
    object-fit:contain !important;
    margin:0 auto !important;
    filter: drop-shadow(0 10px 22px rgba(54,82,246,.12)) !important;
}
#offres .reference-pricing{
    width: min(100%, 1080px) !important;
    max-width:1080px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:1.25rem !important;
    justify-items:stretch !important;
}
#offres .reference-price-card{
    width:100% !important;
    box-sizing:border-box !important;
}
@media (max-width:1100px){
  #offres .reference-pricing{grid-template-columns:repeat(3,minmax(0,1fr)) !important; width:calc(100% - 2rem) !important;}
}
@media (max-width:900px){
  #offres .reference-pricing{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .sws-page-hero{padding-top:calc(72px + 2rem) !important;}
}
@media (max-width:620px){
  #offres .reference-pricing{grid-template-columns:1fr !important; width:min(100%,420px) !important;}
  .sws-page-logo{width:min(500px,92vw) !important;}
  .sws-page-hero{padding-top:calc(64px + 1.5rem) !important;}
}
\n\n/* Exemples de sites SWS Studio */\n.sws-examples-section{background:#f7f9fc;}\n.sws-examples-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem;
  width: min(100%, 1120px);
  margin: 2rem auto 0;
  align-items: stretch;
}
.sws-example-card {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: left;
  cursor: pointer;
}
.sws-example-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.sws-example-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.sws-example-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .85rem 1rem 1rem;
}
.sws-example-caption strong { color: var(--color-primary); }
.sws-example-caption span { color: var(--color-muted); font-size: .8rem; }
@media (max-width: 720px) {
  .sws-examples-grid { grid-template-columns: 1fr !important; }
}
\n

/* Hero accueil — nouvelle identité visuelle */
.hero-reference{
    background:
      radial-gradient(circle at 82% 30%, rgba(54,82,246,.30), transparent 30%),
      radial-gradient(circle at 68% 78%, rgba(123,92,250,.22), transparent 34%),
      linear-gradient(120deg, #07152f 0%, #0c1e43 46%, #142c5c 100%) !important;
}
.hero-reference::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to right, transparent 0%, black 45%, black 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 45%, black 100%);
}
.hero-reference .hero-grid{position:relative;z-index:2;}
.hero-reference .hero-photo{
    background-image:
      linear-gradient(135deg, rgba(10,17,40,.12), rgba(54,82,246,.10)),
      url('../hero-devices.jpg');
    background-blend-mode:overlay;
}
.hero-reference .hero-photo-overlay{
    background:linear-gradient(90deg,#07152f 0%,rgba(7,21,47,.12) 48%,rgba(7,21,47,.18) 100%);
}

/* Exemples SWS Studio — galerie 2 × 2 cliquable */
.sws-examples-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.4rem;
    max-width:1180px;
    margin:0 auto;
}
.sws-example-card{
    appearance:none;
    border:1px solid var(--color-border);
    padding:0;
    width:100%;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    text-align:left;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.sws-example-card:hover,.sws-example-card:focus-visible{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
    border-color:#9ba9ff;
}
.sws-example-card img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1.5/1;
    object-fit:cover;
}
.sws-example-caption{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:.9rem 1.1rem 1rem;
    color:var(--color-primary);
}
.sws-example-caption strong{font-size:1rem;}
.sws-example-caption span{font-size:.76rem;color:var(--color-muted);}
.sws-lightbox{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
    background:rgba(5,10,25,.84);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
}
.sws-lightbox.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.sws-lightbox-inner{
    width:min(1100px,94vw);
    max-height:92vh;
    overflow:auto;
    border-radius:18px;
    background:#fff;
    box-shadow:0 28px 80px rgba(0,0,0,.35);
}
.sws-lightbox-inner>img{
    display:block;
    width:100%;
    max-height:70vh;
    object-fit:contain;
    background:#f5f7fb;
}
.sws-lightbox-info{padding:1.25rem 1.5rem 1.4rem;}
.sws-lightbox-info h3{margin:0 0 .4rem;}
.sws-lightbox-info p{margin:0;color:var(--color-muted);}
.sws-lightbox-close{
    position:fixed;
    top:1rem;
    right:1.2rem;
    z-index:1002;
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(10,17,40,.75);
    color:#fff;
    font-size:1.8rem;
    line-height:1;
}
body.sws-lightbox-open{overflow:hidden;}
@media(max-width:720px){
    .sws-examples-grid{grid-template-columns:1fr;}
    .sws-example-card img{aspect-ratio:1.5/1;}
    .sws-lightbox{padding:1rem;}
    .sws-lightbox-inner{width:96vw;}
}

/* =========================================================
   PORTFOLIO — STG WEB SOLUTIONS
   ========================================================= */
.portfolio-hero{position:relative;overflow:hidden;padding:calc(var(--header-height) + 5rem) 0 4.5rem;background:#0a1128;color:#fff;isolation:isolate}
.portfolio-hero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 20%,rgba(125,145,255,.20),transparent 34%),radial-gradient(circle at 15% 75%,rgba(199,108,53,.15),transparent 30%),linear-gradient(135deg,#071022,#101a35 60%,#0a1128)}
.portfolio-hero .container{max-width:1040px;text-align:center}
.portfolio-kicker,.portfolio-eyebrow,.portfolio-cta>div>span{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#c77b45;margin-bottom:.9rem}
.portfolio-hero h1{margin:0 auto 1.25rem;font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:clamp(2.8rem,6vw,5.3rem);line-height:1.02;letter-spacing:-.035em}
.portfolio-hero h1 span{color:#d9b18d}
.portfolio-hero p{max-width:720px;margin:0 auto;color:#d5dced;font-size:1rem;line-height:1.8}
.portfolio-hero-stats{display:flex;justify-content:center;gap:clamp(2rem,8vw,7rem);margin-top:3.5rem}
.portfolio-hero-stats div{display:flex;flex-direction:column;gap:.2rem}.portfolio-hero-stats strong{font-family:Manrope,sans-serif;font-size:1.35rem}.portfolio-hero-stats span{font-size:.72rem;color:#b9c3d5}
.portfolio-section{background:#f7f4ee;padding:2.25rem 0 5rem}
.portfolio-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:.55rem;margin:0 auto 3rem;position:sticky;top:72px;z-index:5;padding:.65rem;background:rgba(247,244,238,.9);backdrop-filter:blur(12px);border:1px solid rgba(20,27,42,.08);border-radius:999px;width:max-content;max-width:100%}
.portfolio-filter{border:1px solid #ded8cc;background:#fffaf3;color:#4e4a43;border-radius:999px;padding:.65rem 1rem;font:600 .75rem Inter,sans-serif;cursor:pointer;transition:.2s ease}.portfolio-filter:hover,.portfolio-filter.is-active{background:#0a1128;color:#fff;border-color:#0a1128}
.portfolio-list{display:flex;flex-direction:column;gap:1.15rem}
.portfolio-project{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:center;gap:clamp(2rem,5vw,5.5rem);padding:3rem clamp(1.4rem,4vw,4.5rem);background:rgba(255,255,255,.62);border:1px solid rgba(38,43,52,.07);border-radius:26px;box-shadow:0 15px 45px rgba(36,30,18,.06);overflow:hidden}
.portfolio-project-reverse{grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr)}.portfolio-project-reverse .portfolio-device-wrap{order:2}.portfolio-project-reverse .portfolio-copy{order:1}
.portfolio-copy{max-width:570px}.portfolio-eyebrow{margin:0 0 .65rem;color:#ba6331;font-size:.65rem}.portfolio-copy h2{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.05;color:#161a22}.portfolio-copy h3{margin:.55rem 0 .9rem;font:600 1rem Inter,sans-serif;color:#555b65}.portfolio-copy p{margin:0;color:#626873;line-height:1.8;font-size:.92rem}.portfolio-tags{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.35rem}.portfolio-tags span{padding:.45rem .72rem;border:1px solid #ded8cc;border-radius:999px;background:#fffaf4;color:#5b554e;font-size:.7rem;font-weight:700}
.portfolio-device-wrap{min-width:0;display:flex;justify-content:center;align-items:center}.portfolio-device{position:relative;width:min(100%,560px);padding:12px 12px 0;background:#15171a;border-radius:18px 18px 9px 9px;box-shadow:0 24px 45px rgba(0,0,0,.2)}
.portfolio-device-macbook{padding:9px 9px 16px;border-radius:15px 15px 7px 7px;background:#25272a}.portfolio-device-imac{padding-top:13px}
.device-topbar{height:21px;display:flex;align-items:center;gap:5px;padding:0 8px;color:#7f858c;font-size:.46rem}.device-topbar span{width:6px;height:6px;border-radius:50%;background:#74787d}.device-topbar b{margin-left:auto;margin-right:auto;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.device-screen-scroll{position:relative;height:300px;overflow-y:auto;overflow-x:hidden;background:#fff;border-radius:7px 7px 3px 3px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#b7b0a4 transparent}.device-screen-scroll::-webkit-scrollbar{width:7px}.device-screen-scroll::-webkit-scrollbar-thumb{background:#b7b0a4;border-radius:99px}.device-screen-scroll img{display:block;width:100%;height:auto;max-width:none}
.device-hint{position:absolute;right:20px;bottom:28px;padding:.42rem .65rem;border-radius:999px;background:rgba(10,17,40,.82);color:#fff;font-size:.58rem;opacity:0;transform:translateY(5px);transition:.2s ease;pointer-events:none}.portfolio-device:hover .device-hint,.device-screen-scroll:focus + .device-hint{opacity:1;transform:none}
.imac-neck{width:22%;height:22px;margin:0 auto;background:linear-gradient(90deg,#999,#e6e6e6,#999);border-radius:0 0 5px 5px}.imac-foot{width:42%;height:8px;margin:0 auto;background:linear-gradient(90deg,#777,#f1f1f1,#777);border-radius:50% 50% 4px 4px;box-shadow:0 4px 5px rgba(0,0,0,.18)}
.macbook-base{position:absolute;left:-6%;bottom:-15px;width:112%;height:15px;background:linear-gradient(#bfc3c7,#8d9298);border-radius:0 0 9px 9px;box-shadow:0 7px 12px rgba(0,0,0,.18)}.macbook-base:after{content:"";position:absolute;left:44%;top:2px;width:12%;height:3px;border-radius:0 0 5px 5px;background:#777}
.portfolio-cta{margin-top:3rem;padding:2.5rem 3rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;background:#0a1128;color:#fff;border-radius:24px}.portfolio-cta h2{margin:.2rem 0 .35rem;font-family:Georgia,'Times New Roman',serif;font-size:2rem;font-weight:500}.portfolio-cta p{margin:0;color:#b9c3d5}.portfolio-cta .btn{white-space:nowrap;background:#fff;color:#0a1128;border-color:#fff}
.portfolio-project.is-hidden{display:none}
@media(max-width:900px){.portfolio-project,.portfolio-project-reverse{grid-template-columns:1fr;gap:2rem;padding:2rem 1.25rem}.portfolio-project-reverse .portfolio-device-wrap,.portfolio-project-reverse .portfolio-copy{order:initial}.portfolio-device{width:min(100%,620px)}.portfolio-copy{max-width:none}.portfolio-toolbar{top:60px;border-radius:18px}.portfolio-cta{flex-direction:column;align-items:flex-start}}
@media(max-width:600px){.portfolio-hero{padding-top:calc(var(--header-height) + 3.5rem)}.portfolio-hero h1{font-size:2.55rem}.portfolio-hero p{font-size:.9rem}.portfolio-hero-stats{gap:1.3rem}.portfolio-hero-stats strong{font-size:1.1rem}.portfolio-hero-stats span{font-size:.62rem}.portfolio-section{padding-bottom:3rem}.portfolio-toolbar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;width:100%;padding:.5rem;border-radius:14px}.portfolio-filter{white-space:nowrap}.portfolio-project{border-radius:18px;padding:1.5rem 1rem}.device-screen-scroll{height:245px}.portfolio-copy h2{font-size:2rem}.portfolio-cta{padding:2rem 1.35rem}.portfolio-cta h2{font-size:1.7rem}}

/* ================================================================
   PORTFOLIO V2 — maquette portfolio / appareils réalistes
   Scoped pour ne pas modifier les autres pages du site.
   ================================================================ */
.portfolio-page{background:#f8f5ef;color:#26231f;}
.portfolio-page p{text-align:left!important;color:#68645e;}
.portfolio-page .site-header{background:rgba(10,9,8,.18);border-bottom-color:rgba(255,255,255,.14);box-shadow:none;}
.portfolio-page .site-header.is-scrolled{background:rgba(18,16,14,.94);border-bottom-color:rgba(255,255,255,.12);}
.portfolio-page .main-nav a{color:rgba(255,255,255,.9);}
.portfolio-page .main-nav a:hover,.portfolio-page .main-nav a.active{color:#fff;}
.portfolio-page .main-nav a::after{background:#d9a46a;}
.portfolio-page .nav-toggle span{background:#fff;}
.portfolio-page .header-actions .btn-primary{background:#fff;color:#4d321f;box-shadow:0 8px 25px rgba(0,0,0,.12);}

.portfolio-hero{position:relative;min-height:430px;padding:150px 0 44px;overflow:hidden;background:#1b1713;color:#fff;}
.portfolio-hero:before{content:"";position:absolute;inset:0;background:url('../hero-devices.jpg') center/cover no-repeat;filter:brightness(.48) saturate(.65);transform:scale(1.03);}
.portfolio-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,10,8,.72),rgba(13,10,8,.58) 50%,rgba(13,10,8,.82));}
.portfolio-hero-inner{position:relative;z-index:2;text-align:center;max-width:1050px;}
.portfolio-kicker{display:block;margin-bottom:14px;color:#d2a06c;font:700 11px/1 Inter,sans-serif;letter-spacing:.2em;}
.portfolio-hero h1{margin:0;color:#fff;font:500 clamp(42px,5vw,70px)/.98 Georgia,'Times New Roman',serif;letter-spacing:-.03em;}
.portfolio-hero h1 em{font-style:normal;color:#e5c4a2;}
.portfolio-hero-inner>p{max-width:650px;margin:20px auto 0;color:rgba(255,255,255,.82)!important;text-align:center!important;font-size:15px;line-height:1.7;}
.portfolio-hero-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;max-width:850px;margin:48px auto 0;text-align:left;}
.portfolio-hero-highlights>div{display:flex;align-items:center;gap:12px;color:#fff;}
.ph-icon{width:38px;height:38px;border:1px solid rgba(229,196,162,.55);border-radius:50%;display:grid;place-items:center;color:#e5c4a2;font-size:16px;flex:0 0 auto;}
.portfolio-hero-highlights strong{display:block;font:600 13px Inter,sans-serif;}
.portfolio-hero-highlights small{display:block;margin-top:3px;color:rgba(255,255,255,.58);font:400 10px Inter,sans-serif;}

.portfolio-section{padding:22px 0 70px;background:#f8f5ef;}
.portfolio-section>.container{max-width:1180px;}
.portfolio-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 auto 32px;position:sticky;top:72px;z-index:20;padding:9px;background:rgba(248,245,239,.94);backdrop-filter:blur(12px);border:1px solid #e5ded3;border-radius:999px;width:max-content;max-width:100%;}
.portfolio-filter{border:1px solid #e2dbd0;background:#fffdf9;color:#625b53;border-radius:999px;padding:9px 15px;font:600 11px Inter,sans-serif;white-space:nowrap;transition:.2s;}
.portfolio-filter:hover,.portfolio-filter.is-active{background:#171411;color:#fff;border-color:#171411;}

.portfolio-list{display:flex;flex-direction:column;gap:16px;}
.portfolio-project{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:42px;min-height:400px;padding:38px 48px;background:linear-gradient(135deg,#fffdf9,#f7f1e8);border:1px solid #eee5d8;border-radius:18px;box-shadow:0 12px 38px rgba(50,39,25,.055);overflow:hidden;}
.portfolio-project-reverse{grid-template-columns:.98fr 1.02fr;}
.portfolio-project-reverse .portfolio-device-wrap{order:2;}
.portfolio-project-reverse .portfolio-copy{order:1;}
.portfolio-copy{max-width:500px;}
.portfolio-eyebrow{display:block;margin:0 0 7px;color:#b66b39;font:700 10px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;}
.portfolio-copy h2{margin:0;color:#24201b;font:500 clamp(29px,3vw,43px)/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.025em;}
.portfolio-copy h3{margin:7px 0 12px;color:#514a42;font:500 15px/1.35 Inter,sans-serif;}
.portfolio-copy p{margin:0;color:#706a62!important;font:400 13px/1.75 Inter,sans-serif;text-align:left!important;}
.portfolio-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;}
.portfolio-tags span{padding:7px 11px;border:1px solid #ded5c8;border-radius:999px;background:#fffaf2;color:#665e55;font:600 10px Inter,sans-serif;}

/* appareils : écran haut, large et réellement scrollable */
.portfolio-device-wrap{display:flex;justify-content:center;align-items:center;min-width:0;overflow:visible;}
.portfolio-device{position:relative;width:min(100%,590px);padding:12px 12px 0;background:#171717;border-radius:15px 15px 7px 7px;box-shadow:0 25px 42px rgba(24,18,12,.22);}
.portfolio-device-imac{padding-top:12px;}
.portfolio-device-macbook{padding:10px 10px 17px;background:linear-gradient(145deg,#262626,#111);border-radius:14px 14px 5px 5px;}
.device-bezel-top{height:18px;position:relative;display:flex;align-items:center;justify-content:center;}
.device-camera{width:5px;height:5px;border-radius:50%;background:#353535;box-shadow:inset 0 0 0 1px #090909;}
.device-dots{position:absolute;left:7px;top:6px;display:flex;gap:4px;}
.device-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#777;}
.device-screen-scroll{position:relative;height:322px;overflow-y:auto;overflow-x:hidden;background:#fff;border-radius:4px;scroll-behavior:smooth;overscroll-behavior:contain;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);}
.device-screen-scroll:focus{outline:2px solid #d4a16d;outline-offset:2px;}
.device-screen-scroll img{display:block!important;width:100%!important;max-width:none!important;height:auto!important;margin:0!important;}
.device-scroll-label{position:absolute;right:18px;bottom:25px;padding:7px 10px;border-radius:999px;background:rgba(18,15,12,.78);color:#fff;font:600 9px Inter,sans-serif;opacity:0;transform:translateY(5px);transition:.2s;pointer-events:none;}
.portfolio-device:hover .device-scroll-label{opacity:1;transform:none;}
.imac-neck{width:17%;height:34px;margin:0 auto;background:linear-gradient(90deg,#8e8e8e,#ececec 50%,#9b9b9b);border-radius:0 0 5px 5px;}
.imac-foot{width:40%;height:10px;margin:0 auto;background:linear-gradient(90deg,#888,#eee 50%,#888);border-radius:50% 50% 3px 3px;box-shadow:0 5px 7px rgba(0,0,0,.2);}
.macbook-base{position:absolute;left:-5%;bottom:-14px;width:110%;height:15px;background:linear-gradient(#bfc1c3,#7d8083);border-radius:0 0 10px 10px;box-shadow:0 7px 12px rgba(0,0,0,.2);}
.macbook-base span{position:absolute;left:43%;top:2px;width:14%;height:3px;background:#8b8d8f;border-radius:0 0 6px 6px;}

.portfolio-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:30px;padding:28px 34px;background:#161412;color:#fff;border-radius:16px;}
.portfolio-cta>div>span{display:block;color:#d2a06c;font:700 10px Inter,sans-serif;letter-spacing:.17em;}
.portfolio-cta h2{margin:5px 0 4px;color:#fff;font:500 26px Georgia,serif;}
.portfolio-cta p{margin:0;color:#bbb4aa!important;font-size:12px;text-align:left!important;}
.portfolio-cta .btn{background:#fff;color:#34251b;border-color:#fff;box-shadow:none;font-size:12px;padding:12px 18px;}
.portfolio-cta .btn b{font-size:16px;}
.portfolio-project.is-hidden{display:none!important;}

@media(max-width:1000px){
 .portfolio-project,.portfolio-project-reverse{grid-template-columns:1fr 1fr;padding:30px;gap:25px;}
 .portfolio-device{width:100%;}
 .device-screen-scroll{height:270px;}
 .portfolio-copy h2{font-size:32px;}
 .portfolio-hero-highlights{gap:20px;}
}
@media(max-width:760px){
 .portfolio-page .site-header{background:rgba(18,16,14,.9);}
 .portfolio-page .mobile-nav{background:#171411;}
 .portfolio-page .mobile-nav a{color:#fff;}
 .portfolio-hero{min-height:520px;padding:125px 0 35px;}
 .portfolio-hero h1{font-size:43px;}
 .portfolio-hero-inner>p{font-size:13px;}
 .portfolio-hero-highlights{grid-template-columns:1fr;gap:14px;margin-top:32px;max-width:330px;}
 .portfolio-toolbar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;width:100%;border-radius:14px;}
 .portfolio-project,.portfolio-project-reverse{grid-template-columns:1fr;padding:25px 18px;gap:25px;}
 .portfolio-project-reverse .portfolio-device-wrap,.portfolio-project-reverse .portfolio-copy{order:initial;}
 .portfolio-device{width:min(100%,620px);}
 .device-screen-scroll{height:260px;}
 .portfolio-copy{max-width:none;}
 .portfolio-copy h2{font-size:31px;}
 .portfolio-cta{flex-direction:column;align-items:flex-start;padding:24px;}
}

/* ================================================================
   PORTFOLIO FINAL — navigation + mockups
   Corrections strictement limitées à .portfolio-page
   ================================================================ */
.portfolio-page .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 86px !important;
    min-height: 86px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e9e2d8 !important;
    box-shadow: 0 4px 18px rgba(25,20,15,.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.portfolio-page .site-header .container {
    height: 86px !important;
    max-width: 1400px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    gap: 28px !important;
}
.portfolio-page .brand-logo {
    width: 188px !important;
    max-width: 188px !important;
    height: auto !important;
    flex: 0 0 auto !important;
}
.portfolio-page .main-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
}
.portfolio-page .main-nav ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.05rem !important;
    white-space: nowrap !important;
}
.portfolio-page .main-nav li,
.portfolio-page .main-nav a {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}
.portfolio-page .main-nav a {
    color: #273449 !important;
    font-size: .84rem !important;
    line-height: 1 !important;
    padding: .45rem 0 !important;
}
.portfolio-page .main-nav a:hover,
.portfolio-page .main-nav a.active {
    color: #15233a !important;
}
.portfolio-page .main-nav a::after {
    background: #d6a81f !important;
}
.portfolio-page .header-actions {
    flex: 0 0 auto !important;
}
.portfolio-page .header-actions .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 154px !important;
    white-space: nowrap !important;
    background: #d6a81f !important;
    color: #17243a !important;
    border-color: #d6a81f !important;
    border-radius: 999px !important;
    box-shadow: 0 7px 18px rgba(214,168,31,.22) !important;
}

/* Le hero commence réellement sous le menu */
.portfolio-page .portfolio-hero {
    margin-top: 0 !important;
    min-height: 365px !important;
    height: 365px !important;
    padding: 58px 0 36px !important;
}
.portfolio-page .portfolio-hero-inner {
    max-width: 1080px !important;
}
.portfolio-page .portfolio-hero h1 {
    font-size: clamp(48px, 4.2vw, 72px) !important;
}

/* Mockups : aucun rectangle noir autour de l'iMac/MacBook */
.portfolio-page .portfolio-device-wrap {
    padding: 8px 12px 18px !important;
}
.portfolio-page .portfolio-device {
    width: min(100%, 570px) !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.portfolio-page .portfolio-device-imac {
    padding-top: 0 !important;
}
.portfolio-page .portfolio-device-macbook {
    padding: 0 0 16px !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.portfolio-page .device-bezel-top {
    height: 20px !important;
    padding: 0 10px !important;
    background: #171717 !important;
    border-radius: 13px 13px 0 0 !important;
}
.portfolio-page .device-screen-scroll {
    height: 292px !important;
    border-radius: 0 0 4px 4px !important;
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 18px 28px rgba(20,15,10,.13) !important;
    scrollbar-width: thin !important;
}
.portfolio-page .device-screen-scroll img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
.portfolio-page .imac-neck {
    width: 15% !important;
    height: 28px !important;
    background: linear-gradient(90deg,#999,#f0f0f0 50%,#999) !important;
    margin: 0 auto !important;
}
.portfolio-page .imac-foot {
    width: 38% !important;
    height: 9px !important;
    background: linear-gradient(90deg,#8d8d8d,#f5f5f5 50%,#8d8d8d) !important;
    margin: 0 auto !important;
    border-radius: 50% 50% 4px 4px !important;
}
.portfolio-page .macbook-base {
    left: -5% !important;
    bottom: -7px !important;
    width: 110% !important;
    height: 13px !important;
    background: linear-gradient(#c9cbcd,#85888b) !important;
    border-radius: 0 0 10px 10px !important;
}
.portfolio-page .macbook-base span {
    top: 2px !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
    .portfolio-page .site-header .container { gap: 16px !important; padding-left: 18px !important; padding-right: 18px !important; }
    .portfolio-page .brand-logo { width: 165px !important; max-width: 165px !important; }
    .portfolio-page .main-nav ul { gap: .72rem !important; }
    .portfolio-page .main-nav a { font-size: .74rem !important; }
    .portfolio-page .header-actions .btn-primary { min-width: 132px !important; padding-left: .8rem !important; padding-right: .8rem !important; font-size: .72rem !important; }
}

@media (max-width: 760px) {
    .portfolio-page .site-header,
    .portfolio-page .site-header .container { height: 68px !important; min-height: 68px !important; }
    .portfolio-page .site-header .container { padding: 0 18px !important; }
    .portfolio-page .brand-logo { width: 160px !important; max-width: 160px !important; }
    .portfolio-page .main-nav { display: none !important; }
    .portfolio-page .header-actions .btn-primary { display: none !important; }
    .portfolio-page .nav-toggle { display: flex !important; }
    .portfolio-page .nav-toggle span { background: #15233a !important; }
    .portfolio-page .portfolio-hero { height: auto !important; min-height: 500px !important; padding: 62px 0 36px !important; }
    .portfolio-page .portfolio-hero h1 { font-size: 43px !important; }
    .portfolio-page .device-screen-scroll { height: 250px !important; }
}


/* =====================================================================
   STG WEB SOLUTIONS — FINAL UI PASS 2026-09-06
   Header global + portfolio devices + homepage premium/futuristic pass.
   These rules intentionally come last so they neutralise legacy overrides.
   ===================================================================== */

/* ---------- GLOBAL HEADER: one clean line on every page ---------- */
:root{--stg-header-h:84px;--stg-ink:#14253f;--stg-gold:#d7aa25;--stg-navy:#07172d;}
.site-header{
  position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
  z-index:5000 !important;height:var(--stg-header-h) !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid #e7ebf0 !important;
  box-shadow:0 8px 30px rgba(13,29,49,.07) !important;
  backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;
}
.site-header .container{
  height:var(--stg-header-h) !important;min-height:var(--stg-header-h) !important;
  display:flex !important;align-items:center !important;gap:24px !important;
  max-width:1240px !important;padding-left:20px !important;padding-right:20px !important;
}
.logo{flex:0 0 auto !important;display:flex !important;align-items:center !important;}
.brand-logo{width:176px !important;max-width:176px !important;height:auto !important;display:block !important;}
.main-nav{display:flex !important;align-items:center !important;justify-content:center !important;flex:1 1 auto !important;min-width:0 !important;}
.main-nav ul{display:flex !important;align-items:center !important;justify-content:center !important;flex-wrap:nowrap !important;gap:1.45rem !important;width:max-content !important;max-width:100% !important;}
.main-nav li{display:block !important;flex:0 0 auto !important;white-space:nowrap !important;}
.main-nav a{display:inline-block !important;white-space:nowrap !important;word-break:normal !important;overflow-wrap:normal !important;color:#243650 !important;font-size:.86rem !important;font-weight:600 !important;line-height:1.1 !important;padding:.35rem 0 !important;}
.main-nav a:hover,.main-nav a.active{color:#15263e !important;}
.main-nav a::after{background:var(--stg-gold) !important;height:2px !important;bottom:-4px !important;}
.header-actions{display:flex !important;align-items:center !important;gap:.5rem !important;flex:0 0 auto !important;}
.header-actions .btn-primary{display:inline-flex !important;white-space:nowrap !important;min-width:154px !important;height:48px !important;padding:.65rem 1.15rem !important;background:linear-gradient(135deg,#e7c54c,#c99d20) !important;color:#16263e !important;border:0 !important;box-shadow:0 10px 24px rgba(194,149,22,.18) !important;}
.nav-toggle{display:none !important;}

/* Reserve the fixed header everywhere so no page starts underneath it. */
body{padding-top:var(--stg-header-h) !important;}
.site-header + .mobile-nav{top:var(--stg-header-h) !important;}

/* Portfolio keeps the same white header; never turn it transparent. */
.portfolio-page .site-header,.portfolio-page .site-header.is-scrolled{
  background:rgba(255,255,255,.96) !important;border-bottom:1px solid #e7ebf0 !important;
  box-shadow:0 8px 30px rgba(13,29,49,.07) !important;
}
.portfolio-page .main-nav a{color:#243650 !important;}
.portfolio-page .main-nav a:hover,.portfolio-page .main-nav a.active{color:#15263e !important;}
.portfolio-page .header-actions .btn-primary{background:linear-gradient(135deg,#e7c54c,#c99d20) !important;color:#16263e !important;}

@media (max-width:1180px) and (min-width:901px){
  .site-header .container{gap:14px !important;}
  .brand-logo{width:155px !important;max-width:155px !important;}
  .main-nav ul{gap:.88rem !important;}
  .main-nav a{font-size:.76rem !important;}
  .header-actions .btn-primary{min-width:132px !important;height:44px !important;font-size:.72rem !important;padding:.55rem .8rem !important;}
}
@media (max-width:900px){
  :root{--stg-header-h:72px;}
  .site-header,.site-header .container{height:var(--stg-header-h) !important;min-height:var(--stg-header-h) !important;}
  .site-header .container{padding:0 18px !important;}
  .brand-logo{width:160px !important;max-width:160px !important;}
  .main-nav,.header-actions .btn-primary{display:none !important;}
  .header-actions{margin-left:auto !important;}
  .nav-toggle{display:flex !important;}
  .nav-toggle span{background:#14253f !important;}
  body{padding-top:var(--stg-header-h) !important;}
}

/* ---------- PORTFOLIO: clean Apple-like device mockups ---------- */
.portfolio-page .portfolio-hero{
  min-height:430px !important;height:auto !important;padding:78px 0 52px !important;
  margin-top:0 !important;background:#08090c !important;
}
.portfolio-page .portfolio-hero .container{max-width:1040px !important;}
.portfolio-page .portfolio-hero h1{font-size:clamp(3rem,5.2vw,5.2rem) !important;line-height:1.01 !important;}
.portfolio-page .portfolio-section{background:#fbfaf7 !important;padding-top:3.5rem !important;}
.portfolio-page .portfolio-project{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:center !important;min-height:330px !important;padding:28px 38px !important;
  border:1px solid #ebe2d5 !important;background:linear-gradient(135deg,#fffdf9,#f7f3ec) !important;
  box-shadow:0 14px 40px rgba(40,28,17,.055) !important;border-radius:18px !important;overflow:visible !important;
}
.portfolio-page .portfolio-project + .portfolio-project{margin-top:16px !important;}
.portfolio-page .portfolio-device-wrap{padding:10px 18px 28px !important;min-height:310px !important;}
.portfolio-page .portfolio-device{
  position:relative !important;width:min(100%,560px) !important;background:transparent !important;
  padding:0 !important;border-radius:0 !important;box-shadow:none !important;
}
.portfolio-page .portfolio-device-imac{padding:0 !important;}
.portfolio-page .portfolio-device-macbook{padding:0 0 20px !important;background:transparent !important;}
.portfolio-page .device-topbar{
  height:19px !important;display:flex !important;align-items:center !important;gap:5px !important;
  padding:0 9px !important;background:linear-gradient(#222,#111) !important;border-radius:12px 12px 0 0 !important;
}
.portfolio-page .device-topbar span{width:5px !important;height:5px !important;background:#777 !important;}
.portfolio-page .device-topbar b{display:none !important;}
.portfolio-page .device-screen-scroll{
  height:285px !important;overflow-y:auto !important;overflow-x:hidden !important;background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;border-top:0 !important;border-radius:0 0 5px 5px !important;
  box-shadow:0 20px 32px rgba(28,25,20,.13) !important;scrollbar-width:thin !important;
  scrollbar-color:#b7b0a5 transparent !important;
}
.portfolio-page .device-screen-scroll::-webkit-scrollbar{width:6px !important;}
.portfolio-page .device-screen-scroll::-webkit-scrollbar-thumb{background:#b9b1a5 !important;border-radius:20px !important;}
.portfolio-page .device-screen-scroll img{width:100% !important;max-width:none !important;height:auto !important;margin:0 !important;display:block !important;}
.portfolio-page .device-hint{display:none !important;}
.portfolio-page .imac-neck{width:15% !important;height:30px !important;margin:0 auto !important;background:linear-gradient(90deg,#9da0a2,#f4f4f4 50%,#9da0a2) !important;border-radius:0 0 3px 3px !important;box-shadow:0 4px 8px rgba(0,0,0,.10) !important;}
.portfolio-page .imac-foot{width:39% !important;height:8px !important;margin:0 auto !important;background:linear-gradient(90deg,#929598,#f7f7f7 50%,#929598) !important;border-radius:50% 50% 5px 5px !important;box-shadow:0 4px 7px rgba(0,0,0,.13) !important;}
.portfolio-page .macbook-base{left:-4% !important;bottom:-9px !important;width:108% !important;height:13px !important;background:linear-gradient(#d8dadd,#979a9e) !important;border-radius:0 0 12px 12px !important;box-shadow:0 7px 12px rgba(0,0,0,.16) !important;}
.portfolio-page .macbook-base:after{background:#888 !important;}
.portfolio-page .portfolio-copy{padding:12px 22px !important;}
.portfolio-page .portfolio-copy h2{font-family:Georgia,'Times New Roman',serif !important;font-size:clamp(2rem,3vw,3rem) !important;line-height:1 !important;color:#29251f !important;}
.portfolio-page .portfolio-copy h3{font-family:Georgia,'Times New Roman',serif !important;font-size:1.15rem !important;color:#514a41 !important;}
.portfolio-page .portfolio-copy p{font-size:.95rem !important;line-height:1.65 !important;color:#6e675e !important;}
.portfolio-page .portfolio-eyebrow{color:#b86631 !important;letter-spacing:.16em !important;}
.portfolio-page .portfolio-tags span{background:#fffdf9 !important;border:1px solid #e6d8c8 !important;color:#675e53 !important;}
.portfolio-page .portfolio-project-reverse .portfolio-device-wrap{order:2 !important;}
.portfolio-page .portfolio-project-reverse .portfolio-copy{order:1 !important;}
@media(max-width:900px){
  .portfolio-page .portfolio-project,.portfolio-page .portfolio-project-reverse{grid-template-columns:1fr !important;padding:24px 18px !important;gap:8px !important;}
  .portfolio-page .portfolio-project-reverse .portfolio-device-wrap,.portfolio-page .portfolio-project-reverse .portfolio-copy{order:initial !important;}
  .portfolio-page .portfolio-device{width:min(100%,620px) !important;}
}
@media(max-width:600px){
  .portfolio-page .portfolio-hero{padding:58px 0 40px !important;min-height:420px !important;}
  .portfolio-page .portfolio-hero h1{font-size:2.7rem !important;}
  .portfolio-page .device-screen-scroll{height:230px !important;}
  .portfolio-page .portfolio-copy h2{font-size:2rem !important;}
}

/* ---------- HOMEPAGE: premium futuristic, restrained and stable ---------- */
.hero-reference{
  min-height:650px !important;padding:72px 0 52px !important;display:flex !important;align-items:center !important;
  background:
    radial-gradient(circle at 78% 24%,rgba(48,105,255,.20),transparent 25%),
    radial-gradient(circle at 58% 85%,rgba(215,170,37,.10),transparent 28%),
    linear-gradient(120deg,#061124 0%,#081a34 52%,#0b203c 100%) !important;
}
.hero-reference::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:46px 46px;mask-image:linear-gradient(to bottom,black,transparent 92%);
}
.hero-reference::after{
  content:'';position:absolute;width:520px;height:520px;right:-170px;top:50px;border:1px solid rgba(117,154,255,.18);border-radius:50%;box-shadow:0 0 0 45px rgba(117,154,255,.025),0 0 0 95px rgba(117,154,255,.018);pointer-events:none;
}
.hero-reference .hero-grid{min-height:520px !important;grid-template-columns:47% 53% !important;gap:34px !important;position:relative;z-index:2;}
.hero-reference .hero-text{padding:2rem 0 !important;}
.hero-reference .hero-kicker{font-size:.82rem !important;letter-spacing:.18em !important;color:#e7c54c !important;margin-bottom:1rem !important;}
.hero-reference h1{font-size:clamp(4rem,7vw,6.9rem) !important;line-height:.86 !important;letter-spacing:-.055em !important;color:#fff !important;text-shadow:0 12px 50px rgba(0,0,0,.28);}
.hero-reference h1 span{color:#e8c34b !important;}
.hero-reference .hero-subtitle{font-size:1.1rem !important;color:#fff !important;letter-spacing:.02em !important;margin:1rem 0 .8rem !important;}
.hero-reference .hero-copy{font-size:1rem !important;line-height:1.75 !important;color:#bfcde0 !important;max-width:590px !important;text-align:left !important;}
.hero-reference .cta-row{margin-top:1.6rem !important;}
.hero-reference .btn-primary{background:linear-gradient(135deg,#e8c54b,#c99d20) !important;color:#12243b !important;box-shadow:0 15px 40px rgba(215,170,37,.20) !important;}
.hero-reference .btn-secondary{border-color:rgba(255,255,255,.25) !important;background:rgba(255,255,255,.05) !important;color:#fff !important;backdrop-filter:blur(8px) !important;}
.hero-reference .hero-photo{min-height:470px !important;margin-left:0 !important;border-radius:28px !important;overflow:hidden !important;background-size:cover !important;background-position:center !important;border:1px solid rgba(255,255,255,.13) !important;box-shadow:0 35px 90px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.05) !important;transform:perspective(1200px) rotateY(-3deg) !important;}
.hero-reference .hero-photo::before{content:'';position:absolute;inset:14px;border:1px solid rgba(255,255,255,.12);border-radius:20px;pointer-events:none;z-index:2;}
.hero-reference .hero-photo-overlay{background:linear-gradient(180deg,rgba(4,16,32,.06),rgba(4,16,32,.34)) !important;}
.hero-reference .hero-glow{width:360px !important;height:360px !important;right:18% !important;top:16% !important;background:rgba(48,126,255,.18) !important;filter:blur(70px) !important;}
.reference-section{padding:6.5rem 0 !important;}
.reference-section-alt{background:linear-gradient(180deg,#f7f9fc,#eef3f8) !important;}
.section-head h2{letter-spacing:-.035em !important;}
.reference-card,.solution-card,.approach-card,.reference-price-card,.contact-mini,.contact-form-reference{
  border:1px solid #e1e7ee !important;border-radius:20px !important;box-shadow:0 14px 40px rgba(14,32,55,.055) !important;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease !important;
}
.reference-card:hover,.solution-card:hover,.approach-card:hover,.reference-price-card:hover{transform:translateY(-6px) !important;box-shadow:0 24px 55px rgba(14,32,55,.10) !important;border-color:#d5b54b !important;}
.reference-icon{border:1px solid #d8b13b !important;background:#fffaf0 !important;color:#b4870d !important;}
.solution-ai{border-radius:22px !important;border:1px solid #dce4ec !important;box-shadow:0 18px 45px rgba(14,32,55,.06) !important;}

@media(max-width:900px){
  .hero-reference{min-height:auto !important;padding:48px 0 !important;}
  .hero-reference .hero-grid{grid-template-columns:1fr !important;min-height:0 !important;}
  .hero-reference .hero-photo{min-height:330px !important;transform:none !important;order:-1 !important;}
  .hero-reference h1{font-size:clamp(3.3rem,12vw,5rem) !important;}
}
@media(max-width:600px){
  .hero-reference .hero-photo{min-height:260px !important;border-radius:20px !important;}
  .hero-reference .hero-copy{font-size:.92rem !important;}
  .reference-section{padding:4.5rem 0 !important;}
}

/* Final header positioning: sticky keeps the header in the document flow.
   This removes the overlap/double-offset on ALL pages. */
.site-header{
  position:sticky !important;
  top:0 !important;
}
body{padding-top:0 !important;}

/* Keep the mobile drawer attached to the sticky header. */
.mobile-nav{top:var(--stg-header-h) !important;}

/* More natural device proportions. */
.portfolio-page .portfolio-device-wrap{align-self:center !important;}
.portfolio-page .portfolio-device-imac{width:min(100%,540px) !important;}
.portfolio-page .portfolio-device-macbook{width:min(100%,560px) !important;}
.portfolio-page .portfolio-device-imac .device-screen-scroll{height:300px !important;}
.portfolio-page .portfolio-device-macbook .device-screen-scroll{height:295px !important;}

@media(max-width:900px){
  .portfolio-page .portfolio-device-imac,.portfolio-page .portfolio-device-macbook{width:min(100%,620px) !important;}
  .portfolio-page .portfolio-device-imac .device-screen-scroll,.portfolio-page .portfolio-device-macbook .device-screen-scroll{height:260px !important;}
}
@media(max-width:600px){
  .portfolio-page .portfolio-device-imac .device-screen-scroll,.portfolio-page .portfolio-device-macbook .device-screen-scroll{height:225px !important;}
}