/* ══════════════════════════════════════════════
   SOFIA — Design System
   Palette : #d0c4df · #c792df · #4a4a4a
   Typo    : DM Sans + Playfair Display
══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

:root {
    /* Palette */
    --blush:        #d0c4df;
    --rose:         #c792df;
    --rose-hover:   #b070cc;
    --cta:          #ADEEC5;
    --cta-hover:    #85DBA8;
    --cta-text:     #1a4a2e;
    --plum:         #4a4a4a;
    --plum-light:   #888888;

    /* Neutres */
    --bg:           #FAFAFA;
    --white:        #FFFFFF;
    --border:       #dddfdf;
    --border-light: #eaeaea;

    /* Tokens */
    --radius-btn:   24px;
    --radius-card:  20px;
    --radius-sm:    12px;
    --shadow:       0 2px 16px rgba(74,74,74,0.07);
    --shadow-hover: 0 8px 30px rgba(74,74,74,0.13);
    --transition:   0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── BASE ─────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #111111;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-top: 72px;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    line-height: 1.2;
    font-weight: 600;
    color: #111111;
}

/* ── CONTAINER ──────────────────────────── */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ══════════════════════════════════════════
   RESPONSIVE: 1024px (Large Tablet)
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .container { padding: 0 24px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE: 900px (Tablet)
   ══════════════════════════════════════════ */
@media (max-width: 900px) {
    .container { padding: 0 20px; }
}

@media (max-width: 768px) {
    .container { padding: 0 16px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE: 720px (Small Tablet)
   ══════════════════════════════════════════ */
@media (max-width: 720px) {
    h1 { font-size: clamp(32px, 6vw, 40px); }
    h2 { font-size: clamp(26px, 4.5vw, 34px); }
    h3 { font-size: clamp(20px, 3.5vw, 26px); }
}

/* ══════════════════════════════════════════
   RESPONSIVE: 600px (Mobile)
   ══════════════════════════════════════════ */
@media (max-width: 600px) {
    h1 { font-size: clamp(28px, 5vw, 36px); }
    h2 { font-size: clamp(24px, 4vw, 32px); }
    h3 { font-size: clamp(18px, 3vw, 24px); }
    .container { padding: 0 16px; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
}

/* ── HEADER / NAV ───────────────────────── */
header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    background: rgba(251,246,246,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(93,87,107,0.06);
    transition: box-shadow var(--transition);
}

header.scrolled { box-shadow: 0 2px 20px rgba(93,87,107,0.08); }

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 900px) {
    nav { padding: 0 20px; }
}

@media (max-width: 768px) {
    nav { padding: 0 16px; }
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--plum);
    letter-spacing: -0.3px;
}
.logo span { color: var(--rose); }

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

.nav-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--plum-light);
    padding: 6px 0;
    transition: color var(--transition);
}
.nav-links a:hover,
.nav-links a.active { color: var(--plum); }

.nav-cta {
    background: var(--cta) !important;
    color: var(--cta-text) !important;
    padding: 10px 24px !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
}
.nav-cta:hover {
    background: var(--cta-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(173,238,197,0.5) !important;
}

.lang-badge {
    font-size: 12px;
    font-weight: 500;
    color: var(--plum-light);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: var(--radius-btn);
    cursor: default;
}

/* ── BUTTONS ────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-btn);
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    text-decoration: none;
}

.btn-rose {
    background: var(--cta);
    color: var(--cta-text);
}
.btn-rose:hover {
    background: var(--cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(173,238,197,0.5);
}

.btn-outline {
    background: transparent;
    color: var(--plum);
    border: 1.5px solid var(--border);
}
.btn-outline:hover {
    border-color: var(--rose);
    color: var(--rose);
    transform: translateY(-1px);
}

/* ── SECTION HELPERS ────────────────────── */
section { padding: 96px 32px; }

.section-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 12px;
}

.section-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--rose-hover);
    margin-bottom: 12px;
    display: block;
}

.txt-rose { color: var(--rose-hover); }

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    font-weight: 600;
    color: var(--plum);
    line-height: 1.2;
    margin-bottom: 16px;
}

.section-lead {
    font-size: 17px;
    color: #333333;
    max-width: 560px;
    line-height: 1.75;
}

/* ── FOOTER ─────────────────────────────── */
footer {
    background: var(--plum);
    padding: 48px 32px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
}
.footer-logo span { color: var(--blush); }

.footer-links {
    display: flex;
    gap: 28px;
    list-style: none;
    flex-wrap: wrap;
}
.footer-links a {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--white); }

.footer-copy { font-size: 13px; color: rgba(255,255,255,0.35); }

/* ── NAV STATES ─────────────────────────── */
.nav-soon {
    font-size: 15px;
    font-weight: 500;
    color: var(--border);
    cursor: not-allowed;
    padding: 6px 0;
}

.nav-lang {
    position: relative;
}

.nav-lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background 0.15s;
    line-height: 1;
}

.nav-lang-btn:hover { background: #f5f0fa; }

.nav-lang-flag { font-size: 20px; line-height: 1; }

.nav-lang-chevron {
    color: #aaa;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.nav-lang.is-open .nav-lang-chevron { transform: rotate(180deg); }

.nav-lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    padding: 6px;
    list-style: none;
    margin: 0;
    min-width: 160px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
}

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

.nav-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #bbb;
    cursor: not-allowed;
}

.nav-lang-option--active {
    color: var(--plum);
    background: #f8f5ff;
    cursor: default;
}

/* ── STICKY CTA ─────────────────────────── */
.sticky-cta {
    position: fixed;
    bottom: 92px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cta);
    color: var(--cta-text);
    padding: 12px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(173,238,197,0.5);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s;
    z-index: 997;
}

.sticky-cta.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sticky-cta:hover {
    background: var(--cta-hover);
    box-shadow: 0 6px 28px rgba(173,238,197,0.7);
    transform: translateY(-2px);
}

/* ── BACK TO TOP ────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--rose);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(199,146,223,0.45);
    transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition);
    opacity: 0;
    pointer-events: none;
    z-index: 998;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(199,146,223,0.5);
}

/* ══════════════════════════════════════════════
   PAGE — Accueil (index)
══════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────── */
.hero {
    background: var(--bg);
    padding: 0 24px;
    height: calc(100vh - 72px - 68px);
    display: flex;
    align-items: center;
}

.hero-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.hero-eyebrow svg { flex-shrink: 0; color: var(--rose); }

.hero h1 {
    font-size: clamp(42px, 5.5vw, 64px);
    line-height: 1.0;
    color: #111;
    margin-bottom: 14px;
    letter-spacing: -2px;
}

.hero-tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(18px, 2.2vw, 23px);
    font-weight: 600;
    background: linear-gradient(135deg, #c792df, #7a38a0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 36px;
}

.hero-bio {
    font-size: 17px;
    color: #666;
    line-height: 1.75;
    max-width: 420px;
    margin-bottom: 12px;
}

.hero-bio-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.hero-bio-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #444;
    font-weight: 500;
}

.hero-bio-list li::before {
    content: '';
    width: 7px;
    height: 7px;
    min-width: 7px;
    background: var(--rose);
    border-radius: 50%;
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}

.hero-stats-row {
    display: flex;
    gap: 32px;
    border-top: 1px solid var(--border-light);
    padding-top: 28px;
}

.hero-stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.hero-stat-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, rgba(208,196,223,0.6), rgba(199,146,223,0.3));
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-stat-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--rose-hover);
    fill: none;
    stroke-width: 2;
}

.hero-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    font-weight: 700;
    color: #111;
    display: block;
    line-height: 1;
}

.hero-stat-lbl {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

.hero-photo-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-photo-frame {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4/5;
    background: var(--blush);
    border-radius: 28px;
    border: 6px solid rgba(208,196,223,0.5);
    transform: rotate(2deg);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(199,146,223,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-badge {
    position: absolute;
    bottom: 36px;
    left: -16px;
    background: var(--white);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 8px 32px rgba(74,74,74,0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

.hero-badge-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #d0c4df, #c792df);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.hero-badge strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.hero-badge span {
    font-size: 12px;
    color: #888;
}

/* ── RIBBON ─────────────────────────────── */
.ribbon {
    background: var(--rose);
    padding: 22px 0;
    overflow: hidden;
    white-space: nowrap;
}

.ribbon-track {
    display: inline-flex;
    animation: marquee 28s linear infinite;
}

.ribbon-item {
    color: var(--white);
    font-size: clamp(13px, 2.5vw, 15px);
    font-weight: 500;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    gap: 32px;
    letter-spacing: 0.3px;
}

.ribbon-item::after {
    content: '✦';
    opacity: 0.45;
    font-size: 9px;
}

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

/* ── PORTES D'ENTRÉE ────────────────────── */
.services-alt {
    padding: 120px 24px;
    background: var(--white);
}

.services-alt-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.srows-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.srows-header h2 {
    font-size: clamp(28px, 4vw, 40px);
    color: #111;
    margin: 10px 0 16px;
    line-height: 1.2;
}

.srows-lead {
    font-size: 17px;
    color: #666;
    line-height: 1.8;
}

.srow-door-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--rose-hover);
    display: block;
    margin-bottom: 8px;
}

.srow-who {
    font-size: 16px;
    color: #888;
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.6;
}

.srow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.srow-reverse .srow-visual { order: 2; }
.srow-reverse .srow-text   { order: 1; }

.srow-visual {
    aspect-ratio: 4/3;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    box-shadow: var(--shadow);
}

.srow-text h3 {
    font-size: 30px;
    color: #111;
    margin: 10px 0 20px;
    line-height: 1.25;
}

.srow-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.srow-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    color: #555;
    line-height: 1.65;
}

.srow-bullets li::before {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: linear-gradient(135deg, rgba(208,196,223,0.7), rgba(199,146,223,0.4));
    border-radius: 50%;
    margin-top: 3px;
}

/* ── MINI UI MOCKS ──────────────────────── */
.sv-mock {
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    font-size: 14px;
    padding: 24px 22px;
    overflow: hidden;
    background: #f4f0f9;
}

.sv-searchbar {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 8px 14px;
    font-size: 12px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.sv-results { display: flex; flex-direction: column; gap: 5px; }

.sv-result {
    background: white;
    border-radius: 10px;
    padding: 9px 11px;
    border: 1.5px solid transparent;
}

.sv-result.sv-first {
    background: rgba(199,146,223,0.09);
    border-color: rgba(199,146,223,0.3);
}

.sv-pos {
    font-size: 9px;
    font-weight: 700;
    color: var(--rose-hover);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.sv-pos.sv-grey { color: #ccc; }
.sv-domain { font-size: 10px; color: #1a6e3c; margin-bottom: 2px; }

.sv-title {
    font-size: 12px;
    color: #1a0dab;
    font-weight: 600;
    line-height: 1.35;
}

.sv-result.sv-first .sv-title { color: #222; }
.sv-desc { font-size: 10px; color: #666; line-height: 1.45; margin-top: 3px; }

.sv-gpt-mock {
    background: white !important;
    padding: 16px 18px !important;
    gap: 0;
}

.sv-gpt-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 11px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}

.sv-gpt-icon {
    width: 20px;
    height: 20px;
    background: #19c37d;
    border-radius: 50%;
    flex-shrink: 0;
}

.sv-gpt-brand { font-size: 11px; font-weight: 700; color: #222; }

.sv-gpt-user {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.sv-gpt-user-msg {
    background: #f0f0f0;
    border-radius: 14px 14px 4px 14px;
    padding: 7px 12px;
    font-size: 11px;
    color: #333;
    max-width: 82%;
    line-height: 1.45;
}

.sv-gpt-resp-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

.sv-gpt-resp-icon {
    width: 20px;
    height: 20px;
    background: #19c37d;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
}

.sv-gpt-resp-text {
    font-size: 11px;
    color: #111;
    line-height: 1.75;
    flex: 1;
}

.sv-gpt-hl {
    background: rgba(199,146,223,0.2);
    border-radius: 3px;
    padding: 0 3px;
    font-weight: 700;
    color: var(--rose-hover);
}

.sv-gpt-ref {
    font-size: 8px;
    font-weight: 700;
    color: white;
    background: #aaa;
    border-radius: 3px;
    padding: 0 3px;
    vertical-align: super;
    margin-left: 1px;
    line-height: 1;
}

.sv-gpt-sources {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
    margin-top: auto;
}

.sv-gpt-src {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f8f8f8;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 9px;
    color: #555;
    line-height: 1;
}

.sv-gpt-src-num {
    width: 14px;
    height: 14px;
    background: #19c37d;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    flex-shrink: 0;
}

.sv-insta-mock {
    background: white !important;
    padding: 0 !important;
    overflow: hidden;
    justify-content: flex-start !important;
}

.sv-insta-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #efefef;
}

.sv-insta-logo {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    font-style: italic;
}

.sv-insta-icons { display: flex; gap: 14px; font-size: 15px; color: #111; }

.sv-insta-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 14px 8px;
}

.sv-insta-avatar-ring {
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    flex-shrink: 0;
}

.sv-insta-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c792df, #7a38a0);
    border: 2px solid white;
    display: block;
}

.sv-insta-stats {
    display: flex;
    gap: 10px;
    flex: 1;
    justify-content: space-around;
}

.sv-insta-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.sv-insta-stat strong { font-size: 13px; font-weight: 700; color: #111; }
.sv-insta-stat span { font-size: 10px; color: #555; }

.sv-insta-bio { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.sv-insta-username { font-size: 12px; font-weight: 700; color: #111; }
.sv-insta-biotext { font-size: 11px; color: #333; line-height: 1.45; }

.sv-insta-follow {
    margin: 0 14px 12px;
    width: calc(100% - 28px);
    background: #0095f6;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    display: block;
}

.sv-insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.sv-insta-post {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.sv-newsletter-mock {
    background: #f0ecf6 !important;
    padding: 16px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0;
}

.sv-nl-wrap {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(100,60,160,0.12);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sv-nl-header {
    background: linear-gradient(135deg, #7a38a0, #c792df);
    padding: 18px 20px;
    text-align: center;
}

.sv-nl-brand {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    display: block;
}

.sv-nl-edition {
    font-size: 9px;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 3px;
    display: block;
}

.sv-nl-hero {
    background: linear-gradient(135deg, #f6f2fb, #ede8f5);
    padding: 14px 18px 12px;
    border-bottom: 1px solid #ede8f5;
}

.sv-nl-greeting {
    font-size: 10px;
    color: #999;
    margin-bottom: 4px;
    display: block;
}

.sv-nl-subject {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    line-height: 1.35;
}

.sv-nl-body {
    padding: 14px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sv-nl-text {
    font-size: 11px;
    color: #555;
    line-height: 1.7;
}

.sv-nl-offer {
    background: linear-gradient(135deg, rgba(199,146,223,0.12), rgba(208,196,223,0.18));
    border: 1px solid rgba(199,146,223,0.3);
    border-radius: 10px;
    padding: 10px 13px;
}

.sv-nl-offer-title {
    font-size: 12px;
    font-weight: 700;
    color: #7a38a0;
    display: block;
    margin-bottom: 2px;
}

.sv-nl-offer-sub { font-size: 10px; color: #888; }

.sv-nl-cta {
    display: block;
    background: linear-gradient(135deg, #9060c0, #7a38a0);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 0;
    border-radius: 100px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(122,56,160,0.3);
}

.sv-nl-footer {
    padding: 8px 18px;
    border-top: 1px solid #f4f0f9;
    text-align: center;
    font-size: 9px;
    color: #ccc;
}

.sv-ads-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    color: #5f6368;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 1px 4px;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
}

.sv-sep-line { text-align: center; font-size: 9px; color: #ccc; padding: 4px 0; }

/* ── PARETO ─────────────────────────────── */
.pareto-section {
    padding: 120px 24px;
    background: var(--bg);
}

.pareto-wrap { max-width: 1100px; margin: 0 auto; }

.pareto-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 64px;
}

.pareto-header h2 {
    font-size: clamp(28px, 4vw, 40px);
    color: #111;
    margin: 10px 0 18px;
    line-height: 1.2;
}

.pareto-header p { font-size: 17px; color: #555; line-height: 1.8; }

.pareto-split-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-hover);
}

.pareto-col { padding: 52px 48px; }
.pareto-col-grey   { background: #f2f2f2; }
.pareto-col-violet { background: linear-gradient(140deg, #9060c0 0%, #7a38a0 100%); }

.pareto-pct {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 8vw, 72px);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    display: block;
}

.pareto-col-grey  .pareto-pct { color: #c8c8c8; }
.pareto-col-violet .pareto-pct { color: rgba(255,255,255,0.9); }

.pareto-col-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 36px;
    display: block;
}

.pareto-col-grey  .pareto-col-label { color: #aaa; }
.pareto-col-violet .pareto-col-label { color: rgba(255,255,255,0.65); }

.pareto-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 36px;
}

.pareto-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 1.4;
}

.pareto-col-grey  .pareto-item { color: #aaa; }
.pareto-col-violet .pareto-item { color: rgba(255,255,255,0.92); font-weight: 500; }

.pi-dot {
    width: 7px; height: 7px; min-width: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pareto-col-grey  .pi-dot { background: #ccc; }
.pareto-col-violet .pi-dot { background: rgba(255,255,255,0.7); }

.pareto-result {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 100px;
}

.pareto-col-grey  .pareto-result { background: #e8e8e8; color: #aaa; }
.pareto-col-violet .pareto-result { background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.2); }

/* ── SERVICES GRID ──────────────────────── */
.services-section {
    padding: 120px 24px;
    background: var(--blush);
}

.services-head {
    max-width: 1200px;
    margin: 0 auto 56px;
    text-align: center;
}

.services-head h2 {
    font-size: clamp(26px, 3.5vw, 36px);
    color: #111;
    line-height: 1.2;
}

.services-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sg-card {
    background: var(--white);
    border-radius: var(--radius-card);
    padding: 32px 28px 28px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}

.sg-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.sg-icon { font-size: 30px; margin-bottom: 16px; line-height: 1; }

.sg-card h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
    line-height: 1.3;
}

.sg-pro-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--rose-hover);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

.sg-card p { font-size: 14px; color: #666; line-height: 1.7; flex: 1; }

.sg-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rose-hover);
    margin-top: 18px;
    transition: gap var(--transition);
}

.sg-link::after { content: '→'; }
.sg-link:hover { gap: 9px; }

/* ── RÉASSURANCE ────────────────────────── */
.reassurance-section {
    padding: 96px 24px;
    background: var(--white);
    border-top: 1px solid var(--border-light);
}

.reassurance-inner {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.reassurance-item {
    padding: 32px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

.reassurance-item:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.reassurance-front {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.reassurance-value {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #111, #555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.reassurance-icon { font-size: 32px; line-height: 1; }
.reassurance-label { font-size: 16px; font-weight: 700; color: #111; line-height: 1.3; }

.reassurance-toggle {
    margin-top: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #ddd;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}

.reassurance-toggle:hover {
    border-color: var(--rose);
    background: var(--rose);
}

.reassurance-toggle-icon {
    position: relative;
    width: 12px;
    height: 1.5px;
    background: #555;
    transition: background 0.2s;
}

.reassurance-toggle-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 1.5px;
    background: #555;
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.3s, background 0.2s;
}

.reassurance-toggle:hover .reassurance-toggle-icon,
.reassurance-toggle:hover .reassurance-toggle-icon::before { background: #fff; }

.reassurance-item.is-open .reassurance-toggle {
    border-color: var(--rose);
    background: var(--rose);
}

.reassurance-item.is-open .reassurance-toggle .reassurance-toggle-icon,
.reassurance-item.is-open .reassurance-toggle .reassurance-toggle-icon::before { background: #fff; }

.reassurance-item.is-open .reassurance-toggle-icon::before {
    transform: translateY(-50%) rotate(0deg);
}

.reassurance-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.reassurance-body > p {
    overflow: hidden;
    min-height: 0;
    margin: 0;
    padding-top: 0;
    font-size: 14px;
    color: #777;
    line-height: 1.75;
    transition: padding-top 0.35s ease;
}

.reassurance-item.is-open .reassurance-body {
    grid-template-rows: 1fr;
}

.reassurance-item.is-open .reassurance-body > p {
    padding-top: 16px;
}

/* ── PÉDAGOGIE SEO/GEO ──────────────────── */
.seo-section {
    padding: 120px 24px;
    background: var(--white);
}

.seo-wrap { max-width: 1200px; margin: 0 auto; }

.seo-header { text-align: center; margin-bottom: 64px; }

.seo-header h2 {
    font-size: clamp(32px, 3.5vw, 44px);
    color: #111;
    margin-top: 10px;
}

.seo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.seo-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 48px 44px;
}

.seo-card-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--rose-hover);
    display: block;
    margin-bottom: 10px;
}

.seo-card h3 {
    font-size: clamp(24px, 2.5vw, 30px);
    color: #111;
    margin-bottom: 20px;
    line-height: 1.2;
}

.seo-card-def {
    font-size: 17px;
    font-weight: 600;
    color: #111;
    line-height: 1.65;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.seo-steps { display: flex; flex-direction: column; gap: 14px; }

.seo-step { display: flex; align-items: flex-start; gap: 14px; }

.seo-step-num {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d0c4df, #c792df);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.seo-step-text { font-size: 15px; color: #555; line-height: 1.55; padding-top: 3px; }
.seo-step-text strong { color: #111; font-weight: 600; }

.seo-conclusion {
    margin-top: 20px;
    background: linear-gradient(135deg, rgba(208,196,223,0.35), rgba(199,146,223,0.18));
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rose-hover);
}

/* ── CONTACT ────────────────────────────── */
.contact-section {
    padding: 120px 24px;
    background: linear-gradient(135deg, #9060c0 0%, #c792df 100%);
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: -160px; right: -160px;
    width: 520px; height: 520px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    pointer-events: none;
}

.contact-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.contact-copy {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.contact-label {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 100px;
    margin-bottom: 24px;
}

.contact-title {
    font-size: clamp(28px, 3.5vw, 42px);
    color: white;
    margin-bottom: 20px;
    line-height: 1.15;
}

.contact-lead-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-lead {
    font-size: 17px;
    color: rgba(255,255,255,0.82);
    line-height: 1.8;
    margin: 0;
    flex: 1;
}

.contact-next-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.55);
    margin: 0 0 16px;
}

.contact-next-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-next-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.contact-next-num {
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    min-width: 22px;
    flex-shrink: 0;
    padding-top: 2px;
}

.contact-next-step p {
    font-size: 14px;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    margin: 0;
}

.contact-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,0.35);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.contact-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

.contact-reassure {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.contact-reassure li {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-reassure li::before {
    content: '✓';
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-card {
    background: white;
    border-radius: 24px;
    padding: 44px 40px;
    box-shadow: 0 24px 64px rgba(80,40,120,0.22);
}

.contact-form { display: flex; flex-direction: column; gap: 20px; }

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.cf-field { display: flex; flex-direction: column; gap: 6px; }

.cf-field label { font-size: 13px; font-weight: 600; color: #444; }

.cf-required { color: var(--rose); }
.cf-optional { font-weight: 400; color: #aaa; font-size: 12px; }

.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field input[type="url"],
.cf-field input[type="tel"] {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: #111;
    background: var(--bg);
    transition: border-color var(--transition);
    outline: none;
}

.cf-field input:focus { border-color: var(--rose); background: white; }

.cf-lang-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.cf-lang-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
}

.cf-lang-pill input { display: none; }

.cf-lang-pill:has(input:checked) {
    border-color: var(--cta);
    background: rgba(173,238,197,0.15);
    color: var(--cta-text);
    font-weight: 700;
}

.cf-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cf-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    transition: all var(--transition);
}

.cf-check input[type="checkbox"] { display: none; }

.cf-check-box {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    font-size: 11px;
    background: white;
}

.cf-check:has(input:checked) .cf-check-box {
    background: var(--cta);
    border-color: var(--cta);
    color: var(--cta-text);
}

.cf-check:has(input:checked) .cf-check-box::after { content: '✓'; }

.cf-check:has(input:checked) {
    background: rgba(199,146,223,0.08);
    border-color: rgba(199,146,223,0.3);
    color: #222;
    font-weight: 500;
}

.cf-submit {
    background: var(--cta);
    color: var(--cta-text);
    border: none;
    border-radius: 100px;
    padding: 16px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    margin-top: 4px;
}

.cf-submit:hover {
    background: var(--cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(173,238,197,0.5);
}

/* ══════════════════════════════════════════════
   PAGE — Discuter de votre business
══════════════════════════════════════════════ */
.discuter-section {
    background: var(--bg);
    padding: 100px 24px 80px;
}

.discuter-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.discuter-title-block {
    margin-bottom: 56px;
}

.discuter-title-block h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 48px);
    color: #111;
    line-height: 1.15;
    margin-top: 12px;
}

.discuter-inner {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 64px;
    align-items: start;
}

.discuter-left {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.discuter-name {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--rose);
    margin: 0;
}

.discuter-message {
    font-size: 15px;
    color: #555;
    line-height: 1.75;
    margin: 0;
    font-style: italic;
}

.discuter-photo-wrap {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
    margin-top: 8px;
}

.discuter-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.discuter-right {
    padding-top: 4px;
}

/* ══════════════════════════════════════════════
   PAGE — Cas pratiques
══════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────── */
.cp-hero {
    background: var(--bg);
    padding: 80px 24px 64px;
    border-bottom: 1px solid var(--border-light);
}

.cp-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

.cp-hero-inner h1 {
    font-size: clamp(32px, 4.5vw, 48px);
    color: #111;
    margin: 14px 0 20px;
    line-height: 1.1;
}

.cp-hero-inner p {
    font-size: 17px;
    color: #666;
    line-height: 1.8;
    max-width: 520px;
}

/* ── LISTE DES CAS ──────────────────────── */
.cp-cases {
    padding: 80px 24px 100px;
    background: var(--white);
}

.cp-cases-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* ── UN CAS ─────────────────────────────── */
.cp-case {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── CLIENT HEADER — ruban violet ────────── */
.cp-case-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--rose);
    padding: 20px 28px;
    border-radius: 14px;
}

.cp-logo { flex-shrink: 0; }

.cp-logo-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3);
    background: white;
}

.cp-logo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}

.cp-client-name {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.cp-header-dot { color: rgba(255,255,255,0.35); font-size: 16px; }

.cp-client-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
}

.cp-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: white;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 14px;
    border-radius: 100px;
    white-space: nowrap;
    margin-left: auto;
}

/* ── WIDGET ANALYTICS ───────────────────── */
.cp-widget {
    background: #f4f0f9;
    border-radius: 20px;
    border: 1px solid var(--border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow);
}

.cp-widget-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 4px;
}

.cp-widget-metric {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.cp-widget-range {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.cp-widget-done {
    font-size: 11px;
    font-weight: 600;
    color: #4a9e70;
    background: rgba(74,158,112,0.1);
    border: 1px solid rgba(74,158,112,0.2);
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
}

/* ── CHART CARD (boîte blanche interne) ─── */
.cp-chart-card {
    background: white;
    border-radius: 14px;
    border: 1px solid var(--border-light);
    padding: 16px 20px 0;
    overflow: visible;
    position: relative;
}

.cp-ylabels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.cp-yl-high {
    font-size: 12px;
    font-weight: 700;
    color: #111;
}

.cp-yl-low {
    font-size: 11px;
    color: #ccc;
}

.cp-chart-wrap {
    position: relative;
    height: 180px;
}

.cp-chart-svg {
    display: block;
    width: 100%;
    height: 180px;
}

/* ── MARQUEURS INTERACTIFS ───────────────── */
.cp-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    transform: translateX(-14px);
    cursor: pointer;
    z-index: 10;
}

.cp-marker-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: #ddd;
    transition: background 0.2s;
}

.cp-marker:hover .cp-marker-line {
    background: var(--rose);
    opacity: 0.5;
}

.cp-marker-dot {
    position: absolute;
    left: 50%;
    top: var(--dot-top, 90px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ADEEC5;
    border: 2.5px solid white;
    transform: translate(-50%, -50%);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 0 3px rgba(173,238,197,0.35);
}

.cp-marker:hover .cp-marker-dot {
    background: var(--rose);
    transform: translate(-50%, -50%) scale(1.35);
    box-shadow: 0 0 0 5px rgba(199,146,223,0.2);
}

/* ── LABELS STATIQUES DE CLICS ──────────── */
.cp-chart-labels {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.cp-clabel {
    position: absolute;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #777;
    background: white;
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid #eee;
    white-space: nowrap;
    line-height: 1.4;
}

.cp-clabel--right {
    transform: none;
}

/* ── TOOLTIP SUR LE MARQUEUR ─────────────── */
.cp-marker-tooltip {
    position: absolute;
    top: 10px;
    left: 20px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 14px 16px;
    width: 200px;
    box-shadow: 0 4px 24px rgba(80,60,100,0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 30;
}

.cp-marker--flip .cp-marker-tooltip {
    left: auto;
    right: 20px;
}

.cp-marker:hover .cp-marker-tooltip {
    opacity: 1;
}

.cp-mtt-month {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--rose-hover);
    margin-bottom: 5px;
}

.cp-marker-tooltip strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
}

.cp-marker-tooltip ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cp-marker-tooltip ul li {
    font-size: 12px;
    color: #666;
    padding-left: 12px;
    position: relative;
    line-height: 1.4;
}

.cp-marker-tooltip ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ADEEC5;
}

/* ── KPIs EN CARTES ──────────────────────── */
.cp-kpis-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background: #faf7fc;
    border-radius: 20px;
    padding: 24px;
}

.cp-kpi-card {
    background: white;
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    box-shadow: 0 1px 8px rgba(100,80,120,0.06);
}

.cp-kpi-val {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--rose-hover);
    line-height: 1;
    font-style: italic;
}

.cp-kpi-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    text-align: center;
}

/* ── ACTIONS MENÉES ──────────────────────── */
.cp-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cp-actions-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-light);
    padding: 0 0 16px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    text-align: left;
}

.cp-actions-toggle:hover { color: var(--rose-hover); }

.cp-toggle-icon {
    flex-shrink: 0;
    color: #bbb;
    transition: transform 0.3s ease;
}

.cp-actions-toggle[aria-expanded="true"] .cp-toggle-icon {
    transform: rotate(180deg);
    color: var(--rose-hover);
}

.cp-actions-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 0;
}

.cp-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cp-action-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: box-shadow 0.2s, transform 0.2s;
}

.cp-action-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.cp-action-icon {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 14px;
}

.cp-action-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
    line-height: 1.3;
}

.cp-action-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* ── MÉTA : timing + budget ───────────────── */
.cp-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cp-meta-item {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-meta-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #bbb;
}

.cp-meta-value {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: #111;
}

/* ── SLIDER AVANT / APRÈS ────────────────── */
.cp-slider-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 24px;
}

.cp-slider-context {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 16px;
}

.cp-slider-context-icon { font-size: 20px; line-height: 1; }

.cp-slider-context-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.cp-slider-context-sub {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
}

.cp-slider {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    width: 100%;
    max-width: 500px;
    aspect-ratio: 532 / 680;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    background: white;
}

.cp-slider-after,
.cp-slider-before {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

.cp-slider-after img,
.cp-slider-before img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    display: block;
}

.cp-slider-before {
    clip-path: inset(0 50% 0 0);
    z-index: 2;
}

.cp-slider-handle {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.cp-slider-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: white;
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
}

.cp-slider-btn {
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.22);
    position: relative;
    z-index: 1;
    border: 2px solid rgba(255,255,255,0.9);
}

.cp-slider-label {
    position: absolute;
    bottom: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 14px;
    border-radius: 100px;
    pointer-events: none;
    z-index: 4;
}

.cp-slider-label--before {
    left: 14px;
    background: rgba(0,0,0,0.55);
    color: white;
    backdrop-filter: blur(4px);
}

.cp-slider-label--after {
    right: 14px;
    background: rgba(255,255,255,0.92);
    color: #111;
    border: 1px solid rgba(0,0,0,0.08);
    backdrop-filter: blur(4px);
}

/* ══════════════════════════════════════════════
   PAGE — À propos
══════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────── */
.ap-hero {
    padding: 80px 24px 96px;
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
}

.ap-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 72px;
    align-items: center;
}

.ap-hero-photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ap-hero-img {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 3/4;
    box-shadow: var(--shadow-hover);
}

.ap-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.ap-hero-locs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    background: var(--bg);
    padding: 10px 20px;
    border-radius: 100px;
    border: 1px solid var(--border-light);
}

.ap-loc-sep-inline { color: #ddd; }

.ap-hero-text h1 {
    font-size: clamp(36px, 4.5vw, 54px);
    color: #111;
    margin: 14px 0 20px;
    line-height: 1.1;
}

.ap-hero-tagline {
    font-size: 18px;
    color: #555;
    line-height: 1.75;
    margin: 0 0 36px;
    max-width: 460px;
}

.ap-hero-stats {
    display: flex;
    gap: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--border-light);
}

.ap-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ap-hero-stat-val {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: #111;
    line-height: 1;
}

.ap-hero-stat-lbl {
    font-size: 12px;
    color: #aaa;
    font-weight: 500;
}

/* ── PARCOURS ────────────────────────────── */
.ap-parcours {
    padding: 96px 24px;
    background: var(--bg);
}

.ap-parcours-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.ap-parcours-inner .srows-header {
    text-align: center;
    margin-bottom: 56px;
}

.ap-timeline {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 0;
    align-items: center;
}

.ap-tl-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: var(--shadow);
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.ap-tl-card--now {
    background: linear-gradient(160deg, #fdf8ff, #f5eeff);
    border-color: rgba(199,146,223,0.3);
}

.ap-tl-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #bbb;
    margin-bottom: 14px;
}

.ap-tl-tag--now { color: var(--rose-hover); }

.ap-tl-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: #111;
    margin: 0 0 16px;
}

.ap-tl-card p {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin: 0 0 24px;
    flex: 1;
}

.ap-tl-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(0,0,0,0.05);
    color: #888;
    align-self: flex-start;
}

.ap-tl-badge--plus {
    background: rgba(173,238,197,0.25);
    color: #3a9a6a;
}

.ap-tl-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}

.ap-tl-line {
    flex: 1;
    width: 1px;
    background: var(--border-light);
}

/* ── PASSIONS ────────────────────────────── */
.ap-passions {
    padding: 96px 24px;
    background: var(--white);
}

.ap-passions-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.ap-passions-inner .srows-header {
    text-align: center;
    margin-bottom: 56px;
}

.ap-passion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ap-passion-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    background: white;
}

.ap-passion-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.ap-passion-photo {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ap-passion-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-passion-emoji {
    font-size: 52px;
    line-height: 1;
}

.ap-passion-body {
    padding: 24px 26px 28px;
}

.ap-passion-body h3 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    color: #111;
    margin: 0 0 10px;
}

.ap-passion-body p {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    margin: 0;
}

/* ── LOCALISATION ────────────────────────── */
.ap-location {
    padding: 80px 24px;
    background: var(--bg);
    border-top: 1px solid var(--border-light);
}

.ap-location-inner {
    max-width: 740px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    gap: 0;
    align-items: center;
}

.ap-loc-card {
    background: white;
    border-radius: 20px;
    padding: 36px 32px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    text-align: center;
}

.ap-loc-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 16px;
}

.ap-loc-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: #111;
    margin: 0 0 10px;
}

.ap-loc-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    margin: 0;
}

.ap-loc-arrow {
    font-size: 24px;
    color: #ccc;
    text-align: center;
}

/* ── BANNIÈRE CLAIM ──────────────────────── */
.ap-banner {
    background: linear-gradient(135deg, rgba(173,238,197,0.08), rgba(199,146,223,0.06));
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 48px 24px;
}

.ap-banner-inner {
    max-width: 740px;
    margin: 0 auto;
    text-align: center;
}

.ap-banner h2 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: #111;
    margin: 0 0 16px;
}

.ap-banner p {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

/* ── MON QUOTIDIEN ────────────────────────── */
.ap-quotidien {
    padding: 96px 24px;
    background: var(--white);
}

.ap-quotidien-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.ap-quotidien-inner .srows-header {
    text-align: center;
    margin-bottom: 64px;
}

.ap-quotidien-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 56px;
}

.ap-quotidien-block--text-right {
    grid-template-columns: 1fr 1fr;
}

.ap-quotidien-block--text-right .ap-quotidien-photo {
    order: 2;
}

.ap-quotidien-block--text-right .ap-quotidien-text {
    order: 1;
}

.ap-quotidien-photo {
    aspect-ratio: 4/3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.ap-quotidien-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-quotidien-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: #111;
    margin: 0 0 16px;
}

.ap-quotidien-text p {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

/* ── MA TRANSITION ────────────────────────── */
.ap-transition {
    padding: 96px 24px;
    background: var(--bg);
    border-top: 1px solid var(--border-light);
}

.ap-transition-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.ap-transition-inner .srows-header {
    text-align: center;
    margin-bottom: 56px;
}

.ap-transition-content {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 32px;
    align-items: center;
}

.ap-transition-col {
    background: white;
    border-radius: 16px;
    padding: 36px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
}

.ap-transition-col h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: #111;
    margin: 0 0 16px;
}

.ap-transition-col p {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin: 0 0 20px;
}

.ap-transition-stat {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 14px;
    background: rgba(173,238,197,0.2);
    color: #2a7f55;
    border-radius: 100px;
}

.ap-transition-separator {
    text-align: center;
    font-size: 28px;
    color: #c792df;
    font-weight: 300;
}

/* ══════════════════════════════════════════════
   PAGE — Approche (rapports pré-audit)
══════════════════════════════════════════════ */

/* ── HERO (réutilise styles .hero) ─── */
.approche-hero {
    background: var(--bg);
    padding: 100px 24px 80px;
}

.approche-hero .hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.approche-hook {
    font-size: 17px;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

.approche-hook strong {
    color: #111;
    font-weight: 600;
}

/* ── ÉTAT DES LIEUX ────────────────────── */
.approche-etatlieux {
    padding: 80px 24px 100px;
    background: var(--bg);
}

.approche-etatlieux .container {
    max-width: 1100px;
}

.approche-etatlieux h2 {
    font-size: clamp(26px, 3.5vw, 36px);
    color: #111;
    margin: 0 0 56px;
    text-align: center;
    line-height: 1.2;
}

.approche-stats-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 600px;
    margin: 0 auto;
}

.approche-stats-block h3 {
    font-size: 18px;
    color: #111;
    margin: 0 0 24px;
    font-weight: 700;
}

.approche-stats-actual {
    background: white;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
}

.approche-stats-potential {
    background: linear-gradient(135deg, rgba(173,238,197,0.08), rgba(199,146,223,0.06));
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(173,238,197,0.3);
}

.approche-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-light);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.approche-stats-potential .stat-card {
    background: rgba(255,255,255,0.6);
    border-color: rgba(173,238,197,0.25);
}

.stat-card-highlighted {
    background: rgba(173,238,197,0.15);
    border-color: rgba(173,238,197,0.3);
}

.stat-value {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--rose-hover);
    line-height: 1;
}

.stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    line-height: 1.4;
}

/* ── 3 AXES À ACTIVER ─────────────────── */
.approche-axes {
    padding: 100px 24px 120px;
    background: var(--white);
}

.approche-axes .container {
    max-width: 1100px;
}

.approche-axes h2 {
    font-size: clamp(26px, 3.5vw, 36px);
    color: #111;
    margin: 0 0 64px;
    text-align: center;
    line-height: 1.2;
}

/* ── AXES (new full-width structure) ────── */
.axis-section {
    margin-bottom: 64px;
    padding-bottom: 64px;
    border-bottom: 1px solid var(--border-light);
}

.axis-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.axis-title {
    font-size: clamp(20px, 2.5vw, 28px);
    color: #111;
    margin: 0 0 16px;
    font-weight: 700;
    line-height: 1.2;
}

.axis-intro {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin: 0 0 36px;
    max-width: 700px;
}

.axis-intro strong {
    color: #111;
    font-weight: 600;
}

.axis-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.axis-subsection {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.axis-subsection h4 {
    font-size: 16px;
    color: #111;
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
}

.pages-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pages-list li {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    padding-left: 24px;
    position: relative;
}

.pages-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--cta);
    font-weight: 600;
}

/* ── TABLES (Potentiel du marché) ───── */
.axis-table-group {
    margin-top: 24px;
}

.axis-table-group h5 {
    font-size: 14px;
    color: #111;
    margin: 0 0 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.axis-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.axis-table thead {
    background: var(--bg);
}

.axis-table th {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
}

.axis-table th:last-child {
    text-align: right;
}

.axis-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}

.axis-table tbody tr:last-child {
    border-bottom: none;
}

.axis-table tbody tr:hover {
    background: rgba(173,238,197,0.06);
}

.axis-table td {
    font-size: 14px;
    color: #555;
    padding: 12px 16px;
    line-height: 1.4;
}

.axis-table td:last-child {
    text-align: right;
    color: var(--cta);
    font-weight: 600;
}

.axis-summary {
    margin-top: 20px;
    padding: 16px 18px;
    background: rgba(173,238,197,0.08);
    border-left: 3px solid var(--cta);
    border-radius: 8px;
    font-size: 14px;
    color: #111;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── BURGER BUTTON (desktop: caché) ──────── */
.nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    order: 10;
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
header.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
header.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── TABLETTE / PAYSAGE (≤ 900px) ────────── */
@media (max-width: 900px) {

    /* — Services grid : 2 colonnes — */
    .services-grid { grid-template-columns: repeat(2, 1fr); }

    /* — SEO section — */
    .seo-grid { grid-template-columns: 1fr; }

    /* — Portes d'entrée — */
    .srow { grid-template-columns: 1fr; gap: 32px; }
    .srow-reverse .srow-visual { order: -1; }

    /* — CAS PRATIQUES — */
    .cp-actions-grid { grid-template-columns: 1fr; }

    /* — À PROPOS parcours — */
    .ap-timeline { grid-template-columns: 1fr; gap: 0; }
    .ap-tl-divider {
        flex-direction: row;
        padding: 16px 0;
        height: 48px;
    }
    .ap-tl-line { flex: 1; height: 1px; width: auto; }

    /* — À PROPOS localisation — */
    .ap-location-inner { grid-template-columns: 1fr; }
    .ap-loc-arrow { padding: 12px 0; font-size: 28px; }

    /* — À PROPOS quotidien & transition — */
    .ap-quotidien-block { grid-template-columns: 1fr; gap: 32px; }
    .ap-quotidien-block--text-right .ap-quotidien-photo { order: 1; }
    .ap-quotidien-block--text-right .ap-quotidien-text { order: 2; }
    .ap-transition-content { grid-template-columns: 1fr; gap: 24px; }
    .ap-transition-separator { display: none; }
}

/* ── MOBILE (≤ 768px) ────────────────────── */
@media (max-width: 768px) {

    /* — NAV HAMBURGER — */
    .nav-burger { display: flex; }
    .nav-lang { display: none; }
    nav { padding: 0 20px; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: white;
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        flex-direction: column;
        gap: 0;
        padding: 8px 0 16px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.07);
        z-index: 998;
        list-style: none;
    }
    header.nav-open .nav-links { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links > li > a:not(.nav-cta) {
        display: block;
        padding: 14px 24px;
        font-size: 16px;
        border-bottom: 1px solid var(--border-light);
        color: #333;
    }
    .nav-soon { display: none; }
    .nav-links .nav-cta {
        margin: 12px 20px 0;
        display: block;
        text-align: center;
    }

    /* — HERO HOMEPAGE — */
    .hero { height: auto; padding: 48px 20px 40px; }
    .hero-inner { display: flex; flex-direction: column; gap: 0; position: relative; }
    .hero-inner > div:first-child { order: 1; }
    .hero-inner > .hero-photo-wrap { order: 0; }
    .hero-eyebrow { font-size: 12px; padding: 6px 14px; margin-bottom: 20px; }
    .hero h1 { font-size: clamp(28px, 7vw, 44px); margin-bottom: 12px; }
    .hero-tagline { font-size: clamp(14px, 4vw, 18px); margin-bottom: 24px; }
    .hero-bio { font-size: 14px; margin-bottom: 10px; max-width: 100%; }
    .hero-bio-list { gap: 6px; margin-bottom: 20px; }
    .hero-bio-list li { font-size: 14px; gap: 8px; }
    .hero-actions { margin-bottom: 40px; }
    .hero-photo-wrap { margin-top: 20px; margin-bottom: 40px; }
    .hero-photo-frame { max-width: 280px; }
    .hero-badge { left: 20px; bottom: 20px; }
    .hero-stats-row { gap: 12px; padding-top: 20px; border-top: 1px solid var(--border-light); justify-content: center; }
    .hero-stat-item { gap: 4px; }
    .hero-stat-num { font-size: 20px; }
    .hero-stat-lbl { font-size: 10px; }

    /* — PORTES D'ENTRÉE — */
    .services-alt { padding: 48px 20px; }
    .services-alt-inner { padding: 0; }
    .srows-header { margin-bottom: 40px; }
    .srows-header h2 { font-size: clamp(20px, 5vw, 26px); }
    .srows-lead { font-size: 14px; }
    .sv-mock { padding: 16px 14px; font-size: 12px; }
    .srow { padding: 0; gap: 24px; flex-direction: column; }
    .srow-text { order: 1; max-width: 100%; }
    .srow-visual { order: 2; }
    .srow.srow-reverse .srow-text { order: 1; }
    .srow.srow-reverse .srow-visual { order: 2; }
    .srow-text h3 { font-size: 18px; }
    .srow-text p { font-size: 14px; line-height: 1.7; }

    /* — SERVICES GRID — */
    .services-section { padding: 48px 0; }
    .services-grid { grid-template-columns: 1fr; padding: 0 20px; gap: 16px; }
    .sg-card { padding: 24px 20px; }
    .sg-card h3 { font-size: 16px; margin-bottom: 10px; }
    .sg-card p { font-size: 13px; line-height: 1.6; }

    /* — PARETO, REASSURANCE — */
    .pareto-section { padding: 48px 20px; }
    .pareto-grid { grid-template-columns: 1fr; gap: 16px; }
    .pareto-split-card { grid-template-columns: 1fr; gap: 0; }
    .pareto-col { padding: 32px 20px; }
    .reassurance-grid { grid-template-columns: 1fr; gap: 14px; }
    .reassurance-inner { grid-template-columns: 1fr; }

    /* — SEO section — */
    .seo-section { padding: 48px 20px; }
    .seo-wrap { padding: 0; }
    .seo-item h4 { font-size: 15px; }

    /* — DISCUTER (Sidebar) — */
    .discuter-inner { grid-template-columns: 1fr; gap: 32px; }
    .discuter-left { position: static; margin-bottom: 20px; }

    /* — CTA CONTACT — */
    .contact-section { padding: 48px 20px; }
    .contact-inner { grid-template-columns: 1fr; gap: 32px; }
    .contact-copy { order: 1; gap: 18px; }
    .contact-card { order: 2; padding: 20px 16px; }
    .contact-title { font-size: clamp(22px, 6vw, 32px); }
    .contact-lead-row { flex-direction: column; gap: 14px; }
    .contact-photo { width: 80px; height: 80px; }
    .contact-lead { font-size: 14px; }
    .contact-next-title { font-size: 10px; }
    .contact-next-step { gap: 10px; }
    .contact-next-step p { font-size: 13px; }
    .contact-reassure li { font-size: 13px; gap: 6px; }
    .cf-row { grid-template-columns: 1fr; gap: 12px; }
    .cf-field label { font-size: 12px; }
    .cf-field input { font-size: 14px; padding: 10px 12px; }

    /* — CAS PRATIQUES — */
    .cp-hero { padding: 48px 20px 40px; }
    .cp-cases { padding: 48px 20px 60px; }
    .cp-case-header { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
    .cp-tag { margin-left: 0; }
    .cp-widget { padding: 14px; }
    .cp-chart-wrap { height: 140px; }
    .cp-chart-svg { height: 140px; }
    .cp-clabel { font-size: 9px; padding: 1px 4px; }
    .cp-marker-tooltip { width: 150px; }
    .cp-kpis-section { grid-template-columns: repeat(3, 1fr); padding: 16px; gap: 10px; }
    .cp-kpi-val { font-size: 28px; }
    .cp-meta-row { grid-template-columns: 1fr; gap: 12px; }
    .cp-slider-wrap { padding: 14px; }

    /* — APPROCHE — */
    .approche-hero { padding: 48px 20px 40px; }
    .approche-hero h1 { font-size: clamp(28px, 5vw, 40px); }
    .approche-hook { font-size: 15px; }
    .approche-etatlieux { padding: 48px 20px 60px; }
    .approche-etatlieux h2 { margin-bottom: 40px; font-size: 24px; }
    .approche-stats-stack { gap: 24px; }
    .approche-stats-grid { grid-template-columns: 1fr; }
    .approche-axes { padding: 48px 20px 60px; }
    .approche-axes h2 { margin-bottom: 40px; font-size: 24px; }
    .axis-section { margin-bottom: 48px; padding-bottom: 48px; }
    .axis-title { font-size: 22px; }
    .axis-intro { font-size: 14px; }
    .axis-table { font-size: 13px; }
    .axis-table th,
    .axis-table td { padding: 10px 12px; font-size: 13px; }

    /* — À PROPOS — */
    .ap-banner { padding: 40px 20px; }
    .ap-banner h2 { font-size: 24px; }
    .ap-hero { padding: 60px 20px; }
    .ap-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .ap-hero-img { max-width: 280px; margin: 0 auto; aspect-ratio: 3/4; }
    .ap-hero-text h1 { font-size: 46px; }
    .ap-hero-stats { flex-wrap: wrap; gap: 24px; }
    .ap-hero-tagline { font-size: 16px; }
    .ap-parcours { padding: 60px 20px; }
    .ap-quotidien { padding: 60px 20px; }
    .ap-quotidien-block { margin-bottom: 40px; }
    .ap-quotidien-text h3 { font-size: 20px; }
    .ap-transition { padding: 60px 20px; }
    .ap-transition-col { padding: 24px; }
    .ap-transition-col h3 { font-size: 18px; }
    .ap-location { padding: 60px 20px; }
    .ap-passion-grid { grid-template-columns: 1fr; }
}

/* ── MOBILE PORTRAIT (≤ 480px) ───────────── */
/* ══════════════════════════════════════════
   RESPONSIVE: 480px (Small Phone)
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
    h1 { font-size: clamp(24px, 4.5vw, 32px); }
    h2 { font-size: clamp(20px, 3.5vw, 28px); }
    h3 { font-size: clamp(16px, 2.5vw, 22px); }

    .services-grid { grid-template-columns: 1fr; }
    .cp-kpis-section { grid-template-columns: 1fr; }
    .cp-kpi-card { padding: 20px 16px; }
    .cp-kpi-val { font-size: 34px; font-style: normal; }
    .ap-quotidien-block { gap: 20px; }
    .ap-quotidien-photo { aspect-ratio: 3/2; }
    .ap-quotidien-text h3 { font-size: 18px; }
    .ap-transition-col { padding: 20px; }
    .hero h1 { font-size: clamp(24px, 7vw, 34px); }
    .hero-tagline { font-size: clamp(12px, 3vw, 14px); }
    .hero-bio-list li { font-size: 13px; }
    .hero-stat-num { font-size: 22px; }
    .contact-title { font-size: 26px; }
    .contact-inner { gap: 24px; }
    .contact-card { padding: 20px 16px; }
    .contact-lead { font-size: 13px; }
    .contact-photo { width: 72px; height: 72px; }
    .cf-field input { font-size: 13px; padding: 8px 10px; }
    .ap-tl-card { padding: 24px 20px; }
    .ap-loc-card { padding: 24px 20px; }
    .cp-case-header { gap: 8px; }
    .cp-client-name { font-size: 15px; }
}