/* ============================================================
   Agence La Centrale TP — Design system autonome
   Langage LCTP : noir / or / hover blanc / glow léger
   Ne dépend pas du kernel site mère.
   ============================================================ */

/* ── Reset minimal ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--noir); color: var(--blanc); font-family: var(--font); line-height: 1.65; min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, select, textarea { font: inherit; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ── Variables ────────────────────────────────────────────── */
:root {
    --or:          #d4af37;
    --or-hover:    #f0c84a;
    --or-dim:      rgba(212,175,55,.12);
    --or-border:   rgba(212,175,55,.22);
    --or-active:   rgba(212,175,55,.55);
    --noir:        #0a0a0a;
    --surface:     #111;
    --surface-2:   #171717;
    --surface-card:#1c1c1c;
    --blanc:       #f5f3ee;
    --gris-soft:   #d2cbbd;
    --gris-muted:  #a79f90;
    --rouge:       #c0392b;
    --vert:        #27ae60;
    --glow:        0 0 24px rgba(212,175,55,.18);
    --glow-hover:  0 0 32px rgba(212,175,55,.32);
    --radius:      14px;
    --radius-sm:   8px;
    --max-width:   1240px;
    --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --transition:  180ms ease;
}

/* ── Typographie ──────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }
p  { color: var(--gris-soft); }
strong { color: var(--blanc); }
.text-or { color: var(--or); }
.text-muted { color: var(--gris-muted); font-size: .875rem; }

/* ── Layout ───────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}
section { padding: 80px 0; }
section + section { padding-top: 0; }
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or);
    background: var(--or-dim);
    border: 1px solid var(--or-border);
    border-radius: 20px;
    padding: 4px 14px;
    margin-bottom: 16px;
}
.section-title { margin-bottom: 16px; }
.section-intro { color: var(--gris-soft); max-width: 640px; font-size: 1.05rem; margin-bottom: 48px; }
.section-center { text-align: center; }
.section-center .section-intro { margin-left: auto; margin-right: auto; }

/* ── Barre or fine en haut de page ─────────────────────────── */
.page-stripe { height: 3px; background: linear-gradient(90deg, transparent, var(--or), transparent); }

/* ── Navigation ───────────────────────────────────────────── */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10,10,10,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--or-border);
}
.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    gap: 24px;
}
.nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
}
.nav__logo-img {
    height: 64px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: block;
}
@media (max-width: 900px) {
    .nav__inner { height: 72px; }
    .nav__logo-img {
        height: 56px;
        max-width: 220px;
    }
}
@media (max-width: 540px) {
    .nav__inner { height: 64px; padding: 0 16px; }
    .nav__logo-img {
        height: 48px;
        max-width: 170px;
    }
}
.nav__logo-badge {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--or);
    border: 1px solid var(--or-border);
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 4px;
}
.nav__links {
    display: flex;
    align-items: center;
    gap: 32px;
}
.nav__links a {
    font-size: .875rem;
    color: var(--gris-soft);
    transition: color var(--transition);
}
.nav__links a:hover { color: var(--blanc); }
.nav__cta-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav__cta { flex-shrink: 0; }
.btn-tp.nav__cta { border-radius: 50px; }
.nav__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}
.nav__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--blanc);
    border-radius: 2px;
    transition: var(--transition);
}
.nav__mobile { display: none; }

/* ── Boutons ───────────────────────────────────────────────── */
.btn-tp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    font-size: .9rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--or);
    background: var(--or);
    color: #111;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn-tp:hover {
    background: transparent;
    color: var(--blanc);
    border-color: var(--blanc);
    box-shadow: var(--glow-hover);
}
.btn-tp--lg { padding: 14px 32px; font-size: 1rem; }
.btn-tp--outline {
    background: transparent;
    color: var(--or);
    border-color: var(--or);
}
.btn-tp--outline:hover {
    background: var(--or);
    color: #111;
}
.btn-tp--ghost {
    background: transparent;
    border-color: var(--or-border);
    color: var(--gris-soft);
}
.btn-tp--ghost:hover { border-color: var(--or); color: var(--or); }
.btn-tp--full { width: 100%; justify-content: center; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(212,175,55,.08) 0%, transparent 70%);
    pointer-events: none;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 20px;
}
.hero__eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 1.5px;
    background: var(--or);
}
.hero__title { margin-bottom: 24px; }
.hero__title em { font-style: normal; color: var(--or); }
.hero__text { font-size: 1.1rem; margin-bottom: 36px; max-width: 480px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__visual {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--glow);
    align-self: center;
}
.hero__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    object-fit: cover;
}
.hero__mockup-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}
.hero__mockup-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--or-border);
}
.hero__mockup-url {
    flex: 1;
    height: 10px;
    background: var(--or-dim);
    border-radius: 4px;
    margin-left: 8px;
}
.hero__mockup-content { display: flex; flex-direction: column; gap: 10px; }
.hero__mockup-line {
    height: 8px;
    background: var(--or-dim);
    border-radius: 4px;
}
.hero__mockup-line--short { width: 60%; }
.hero__mockup-line--long  { width: 85%; }
.hero__mockup-line--gold  { width: 40%; background: rgba(212,175,55,.35); }

/* ── Trust bar ─────────────────────────────────────────────── */
.trust-bar {
    border-top: 1px solid var(--or-border);
    border-bottom: 1px solid var(--or-border);
    padding: 20px 0;
    background: var(--surface);
}
.trust-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}
.trust-bar__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: var(--gris-soft);
}
.trust-bar__icon { color: var(--or); font-size: 1rem; }

/* ── Plans ─────────────────────────────────────────────────── */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}
.plan-card {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all var(--transition);
}
.plan-card:hover {
    border-color: var(--or-active);
    box-shadow: var(--glow);
    transform: translateY(-2px);
}
.plan-card--featured {
    border-color: var(--or);
    background: linear-gradient(160deg, #1c1c1c 0%, #171510 100%);
    box-shadow: var(--glow);
}
.plan-card__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--or);
    color: #111;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    white-space: nowrap;
}
.plan-card__name {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 8px;
}
.plan-card__price {
    margin-bottom: 6px;
}
.plan-card__amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--blanc);
    line-height: 1;
}
.plan-card__currency { font-size: 1.2rem; vertical-align: top; margin-top: 6px; display: inline-block; }
.plan-card__period { font-size: .8rem; color: var(--gris-muted); margin-top: 4px; }
.plan-card__desc { font-size: .875rem; color: var(--gris-soft); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--or-border); }
.plan-card__features { flex: 1; margin-bottom: 28px; }
.plan-card__feature {
    display: flex;
    gap: 10px;
    font-size: .875rem;
    color: var(--gris-soft);
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.plan-card__feature:last-child { border-bottom: none; }
.plan-card__check { color: var(--or); flex-shrink: 0; font-size: .9rem; margin-top: 1px; }
.plan-card__cross { color: var(--gris-muted); flex-shrink: 0; font-size: .9rem; margin-top: 1px; }
.plan-card__feature--inactive { color: var(--gris-muted); }
.plan-card__cta { margin-top: auto; }

/* ── Bloc prix pro (mensuel / annuel) ─────────────────────────────────── */
.plan-card__price {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 22px;
}
.plan-price {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px 12px;
    transition: border-color var(--transition), background var(--transition);
}
.plan-price:hover {
    border-color: var(--or);
}
.plan-price--annuel {
    border-color: rgba(212,175,55,.45);
    background: linear-gradient(160deg, rgba(212,175,55,.06) 0%, rgba(212,175,55,.02) 100%);
}
.plan-price__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.plan-price__tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris-muted);
}
.plan-price--annuel .plan-price__tag {
    color: var(--or);
}
.plan-price__savings {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--or);
    color: #111;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(212,175,55,.25);
}
.plan-price__savings::before {
    content: '★';
    font-size: .72rem;
    line-height: 1;
}
.plan-price__main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 2px;
    line-height: 1;
}
.plan-price__amount-old {
    flex: 0 0 100%;
    font-size: .95rem;
    font-weight: 600;
    color: var(--gris-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(212,175,55,.65);
    text-decoration-thickness: 2px;
    opacity: .9;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}
.plan-price__deal {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6b35, #d4af37);
    color: #000;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-left: auto;
    box-shadow: 0 0 10px rgba(255,107,53,.35);
}
.plan-price__amount {
    display: inline-flex;
    align-items: baseline;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--blanc);
    letter-spacing: -0.03em;
    line-height: 1;
}
.plan-price__currency {
    font-size: 1.25rem;
    font-weight: 700;
    margin-left: 2px;
    letter-spacing: 0;
}
.plan-price--promo .plan-price__amount {
    color: var(--or);
    text-shadow: 0 0 18px rgba(212,175,55,.25);
}
.plan-price--annuel .plan-price__amount {
    color: var(--or);
}
.plan-price__unit {
    font-size: .9rem;
    font-weight: 600;
    color: var(--gris-soft);
    line-height: 1.1;
    letter-spacing: .01em;
}
.plan-price__unit small {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--gris-muted);
    letter-spacing: .08em;
    margin-left: 3px;
    padding: 2px 5px;
    border: 1px solid rgba(212,175,55,.3);
    border-radius: 4px;
    vertical-align: 1px;
}
.plan-price__note {
    font-size: .76rem;
    color: var(--gris-muted);
    margin: 8px 0 0;
    line-height: 1.4;
}
.plan-price__note strong {
    color: var(--blanc);
    font-weight: 700;
}
.plan-price--annuel .plan-price__note strong {
    color: var(--or);
}
.plan-price-sep {
    position: relative;
    text-align: center;
    height: 1px;
    background: var(--or-border);
    margin: 2px 10px;
}
.plan-price-sep span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface);
    color: var(--gris-muted);
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 0 10px;
}
.plan-card--featured .plan-price-sep span {
    background: #1a1812;
}

/* ── Plan target (profil cible) ─────────────────────────────── */
.plan-card__target {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--gris-soft);
    background: rgba(212,175,55,.08);
    border: 1px solid var(--or-border);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 10px;
    width: fit-content;
}
.plan-card__target strong {
    color: var(--blanc);
    font-weight: 600;
}
.plan-card--featured .plan-card__target {
    background: rgba(212,175,55,.15);
    border-color: rgba(212,175,55,.4);
}
.plan-card__pour-qui {
    font-size: .88rem;
    color: var(--gris-soft);
    line-height: 1.5;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--or-border);
}

/* ── Ruban lancement ────────────────────────────────────────── */
.lancement-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 820px;
    margin: 0 auto 40px;
    padding: 14px 22px;
    border: 1px solid var(--or);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(212,175,55,.12), rgba(212,175,55,.04));
    box-shadow: 0 6px 24px rgba(212,175,55,.15);
}
.lancement-banner__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255,140,0,.5));
}
.lancement-banner__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: .9rem;
    color: var(--gris-soft);
}
.lancement-banner__titre {
    color: var(--or);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .82rem;
}
.lancement-banner__detail {
    color: var(--gris-soft);
}
@media (max-width: 600px) {
    .lancement-banner { border-radius: 14px; padding: 12px 18px; }
}

/* ── ROI callout ────────────────────────────────────────────── */
.roi-callout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: 880px;
    margin: 10px auto 54px;
    padding: 24px 28px;
    background: var(--surface);
    border-left: 3px solid var(--or);
    border-radius: var(--radius-sm);
}
.roi-callout__icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}
.roi-callout__body p {
    margin: 0 0 8px;
    font-size: 1rem;
    color: var(--blanc);
    line-height: 1.55;
}
.roi-callout__body strong {
    color: var(--or);
}
.roi-callout__sub {
    font-size: .86rem !important;
    color: var(--gris-soft) !important;
    margin-bottom: 0 !important;
}

/* ── Toujours inclus ────────────────────────────────────────── */
.includes-band {
    margin: 0 auto 50px;
    max-width: 1100px;
    padding: 32px 30px;
    background: linear-gradient(160deg, var(--surface-card) 0%, var(--surface) 100%);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
}
.includes-band__title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blanc);
    margin: 0 0 22px;
    letter-spacing: .01em;
}
.includes-band__title::before,
.includes-band__title::after {
    content: '·';
    color: var(--or);
    margin: 0 12px;
}
.includes-band__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 28px;
}
@media (max-width: 760px) {
    .includes-band__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .includes-band__grid { grid-template-columns: 1fr; }
}
.includes-band__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    color: var(--gris-soft);
    line-height: 1.4;
}
.includes-band__item em {
    font-style: normal;
    color: var(--gris-muted);
    font-size: .82rem;
}
.includes-band__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(212,175,55,.12);
    color: var(--or);
    font-size: .75rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* ── Trust strip ────────────────────────────────────────────── */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 18px 20px;
}
.trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--gris-soft);
}
.trust-strip__item span {
    font-size: 1rem;
    filter: grayscale(20%);
}

/* ── Addons grid ────────────────────────────────────────────── */
.addons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .addons-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .addons-grid { grid-template-columns: 1fr; }
}
.addon-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    transition: border-color var(--transition), transform var(--transition);
}
.addon-card:hover {
    border-color: var(--or);
    transform: translateY(-2px);
}
.addon-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.addon-card__icon {
    font-size: 1.4rem;
    line-height: 1;
}
.addon-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanc);
    margin: 0;
    letter-spacing: -0.01em;
}
.addon-card__desc {
    font-size: .84rem;
    color: var(--gris-soft);
    line-height: 1.5;
    margin: 0 0 14px;
    flex: 1;
}
.addon-card__footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--or-border);
}
.addon-card__price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--or);
    letter-spacing: -0.02em;
}
.addon-card__price em {
    font-style: normal;
    font-size: .72rem;
    font-weight: 500;
    color: var(--gris-muted);
    margin-left: 2px;
}
.addon-card__plan-min {
    font-size: .72rem;
    color: var(--gris-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    text-align: right;
}

/* ── FAQ prix (réutilise .faq-list / .faq-item) ─────────────── */
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 4px;
    font-size: .95rem;
    color: var(--blanc);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after/* ── Section Deep Dive Admin ── */
.admin-deep-dive {
    padding: 60px 0;
    border-top: 1px solid rgba(212,175,55,0.1);
}
.adm-features-grid {
    margin-top: 50px;
}
.adm-feat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 30px;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.adm-feat-card:hover {
    background: rgba(212, 175, 55, 0.04);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-8px);
}
.adm-feat-card:hover .adm-feat-icon {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
}
.adm-feat-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: inline-block;
    transition: transform 0.4s ease;
}
.adm-feat-card h3 {
    font-size: 1.25rem;
    color: var(--blanc);
    margin-bottom: 12px;
    font-weight: 700;
}
.adm-feat-card p {
    font-size: 0.95rem;
    color: var(--gris-muted);
    line-height: 1.6;
    margin: 0;
}
.adm-feat-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle at top right, rgba(212,175,55,0.1), transparent);
    pointer-events: none;
}
{
    content: '+';
    color: var(--or);
    font-size: 1.3rem;
    font-weight: 300;
    flex-shrink: 0;
    transition: transform var(--transition);
    line-height: 1;
}
.faq-item[open] summary::after {
    transform: rotate(45deg);
}
.faq-item__content {
    padding: 0 4px 20px;
    font-size: .88rem;
    color: var(--gris-soft);
    line-height: 1.6;
}
.faq-item__content strong { color: var(--blanc); }

/* ── CTA hésitation ─────────────────────────────────────────── */
.cta-hesit {
    max-width: 900px;
    margin: 60px auto 0;
    padding: 0 20px;
}
.cta-hesit__inner {
    display: flex;
    gap: 26px;
    align-items: center;
    padding: 30px 34px;
    background: linear-gradient(135deg, rgba(212,175,55,.08) 0%, rgba(212,175,55,.02) 100%);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
}
.cta-hesit__icon {
    font-size: 2.4rem;
    line-height: 1;
    flex-shrink: 0;
}
.cta-hesit__body {
    flex: 1;
}
.cta-hesit__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--blanc);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.cta-hesit__text {
    font-size: .9rem;
    color: var(--gris-soft);
    line-height: 1.55;
    margin: 0 0 16px;
}
.cta-hesit__text strong { color: var(--or); }
.cta-hesit__body .btn-tp { display: inline-flex; width: auto; }
@media (max-width: 640px) {
    .cta-hesit__inner { flex-direction: column; text-align: center; padding: 26px 22px; }
    .cta-hesit__body .btn-tp { width: 100%; justify-content: center; }
}

/* ── Métiers ───────────────────────────────────────────────── */
.metiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 40px;
}
.metier-card {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    font-size: .9rem;
    color: var(--gris-soft);
    transition: all var(--transition);
}
.metier-card:hover { border-color: var(--or); color: var(--blanc); }
.metier-card__icon { font-size: 1.2rem; margin-bottom: 6px; }
.metier-card--b {
    border-style: dashed;
    opacity: .7;
}
.metier-card--b .metier-card__tag {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--or);
    opacity: .7;
    margin-top: 4px;
}

/* ── Étapes ────────────────────────────────────────────────── */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
    position: relative;
}
.steps-grid::before {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(12.5% + 12px);
    right: calc(12.5% + 12px);
    height: 1px;
    background: linear-gradient(90deg, var(--or-border), var(--or-active), var(--or-border));
}
.step-card { text-align: center; position: relative; }
.step-card__num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-card);
    border: 1.5px solid var(--or);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 800;
    color: var(--or);
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
}
.step-card__title { font-size: 1rem; font-weight: 600; color: var(--blanc); margin-bottom: 8px; }
.step-card__text { font-size: .85rem; color: var(--gris-muted); line-height: 1.6; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list { margin-top: 40px; max-width: 740px; margin-left: auto; margin-right: auto; }
.faq-item {
    border-bottom: 1px solid var(--or-border);
}
.faq-item:first-child { border-top: 1px solid var(--or-border); }
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 4px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--blanc);
    gap: 16px;
}
.faq-item summary:hover { color: var(--or); }
.faq-chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--or-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--or);
    font-size: .7rem;
    transition: transform var(--transition);
}
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
    padding: 0 4px 20px;
    font-size: .9rem;
    color: var(--gris-soft);
    line-height: 1.7;
}

/* ── CTA strip ─────────────────────────────────────────────── */
.cta-strip {
    background: linear-gradient(135deg, var(--surface) 0%, #1a1505 100%);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    padding: 60px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0 24px;
}
.cta-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.1) 0%, transparent 65%);
    pointer-events: none;
}
.cta-strip__title { margin-bottom: 12px; color: var(--blanc); }
.cta-strip__text  { margin-bottom: 32px; color: var(--gris-soft); }
.cta-strip__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Formulaires ───────────────────────────────────────────── */
.form-section {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    padding: 40px 36px;
    max-width: 680px;
    margin: 0 auto;
}
.form-section__title { margin-bottom: 8px; }
.form-section__intro { font-size: .9rem; margin-bottom: 32px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-label {
    font-size: .825rem;
    font-weight: 600;
    color: var(--gris-soft);
    letter-spacing: .02em;
}
.form-required { color: var(--or); margin-left: 2px; }
.form-input,
.form-select,
.form-textarea {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    color: var(--blanc);
    padding: 11px 14px;
    font-size: .925rem;
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--or-active);
    box-shadow: 0 0 0 3px rgba(212,175,55,.1);
}
.form-input::placeholder { color: var(--gris-muted); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a79f90' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-select option { background: #1c1c1c; }
.form-textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: .8rem; color: var(--gris-muted); margin-top: 4px; }
.form-error-msg { font-size: .8rem; color: #e74c3c; margin-top: 4px; display: none; }
.form-group.has-error .form-input,
.form-group.has-error .form-select { border-color: #e74c3c; }
.form-group.has-error .form-error-msg { display: block; }
.form-group.is-valid .form-input { border-color: var(--vert); }

/* État SIRET */
.siret-feedback {
    font-size: .8rem;
    margin-top: 5px;
    min-height: 18px;
    transition: opacity var(--transition);
}
.siret-feedback--ok    { color: var(--vert); }
.siret-feedback--warn  { color: var(--or); }
.siret-feedback--error { color: #e74c3c; }

/* Checkbox */
.form-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}
.form-checkbox-input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--or);
}
.form-checkbox-label { font-size: .875rem; color: var(--gris-soft); line-height: 1.6; }
.form-checkbox-label a { color: var(--or); text-decoration: underline; }

/* Honeypot */
.hp-field { display: none !important; }

/* Plans radio */
.plan-radio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; }
.plan-radio-input { display: none; }
.plan-radio-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1.5px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    cursor: pointer;
    transition: all var(--transition);
}
.plan-radio-input:checked + .plan-radio-label {
    border-color: var(--or);
    background: var(--or-dim);
}
.plan-radio-label:hover { border-color: var(--or-active); }
.plan-radio-name { font-size: .875rem; font-weight: 600; color: var(--blanc); }
.plan-radio-price { font-size: .8rem; color: var(--or); }
.plan-radio-zone { font-size: .75rem; color: var(--gris-muted); }

/* ── Récapitulatif paiement ────────────────────────────────── */
.recap-card {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    padding: 36px;
    max-width: 520px;
    margin: 0 auto;
}
.recap-card__header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--or-border); }
.recap-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: .9rem; color: var(--gris-soft); }
.recap-row + .recap-row { border-top: 1px solid rgba(255,255,255,.05); }
.recap-row strong { color: var(--blanc); }
.recap-total { font-size: 1.1rem; font-weight: 700; color: var(--blanc); border-top: 1px solid var(--or-border); margin-top: 12px; padding-top: 12px; }
.recap-total span { color: var(--or); font-size: 1.3rem; }
.recap-note { font-size: .78rem; color: var(--gris-muted); text-align: center; margin-top: 16px; }

/* ── Badges ────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}
.badge--or     { background: var(--or-dim); color: var(--or); border: 1px solid var(--or-border); }
.badge--green  { background: rgba(39,174,96,.12); color: #2ecc71; border: 1px solid rgba(39,174,96,.25); }
.badge--muted  { background: rgba(255,255,255,.06); color: var(--gris-muted); border: 1px solid rgba(255,255,255,.1); }

/* ── Page succès ────────────────────────────────────────────── */
.success-box {
    text-align: center;
    max-width: 560px;
    margin: 80px auto;
    padding: 0 24px;
}
.success-box__icon {
    font-size: 3rem;
    margin-bottom: 24px;
    display: block;
}
.success-box__title { margin-bottom: 16px; }
.success-box__text  { font-size: 1rem; margin-bottom: 32px; }
.success-box__slug  { display: inline-block; background: var(--or-dim); border: 1px solid var(--or-border); border-radius: 6px; padding: 8px 18px; font-family: monospace; color: var(--or); font-size: .9rem; margin-bottom: 32px; }

/* ── Footer ────────────────────────────────────────────────── */
.footer {
    border-top: 1px solid var(--or-border);
    padding: 56px 0 0;
    margin-top: 80px;
}
.footer__top {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px 48px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
    border-bottom: 1px solid var(--or-border);
}
.footer__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
}
.footer__logo-img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}
.footer__logo-badge {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--or);
    border: 1px solid var(--or-border);
    padding: 2px 7px;
    border-radius: 4px;
}
.footer__desc {
    font-size: .825rem;
    color: var(--gris-muted);
    line-height: 1.7;
    max-width: 280px;
}
.footer__col-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 16px;
}
.footer__col-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer__col-links a {
    font-size: .825rem;
    color: var(--gris-muted);
    transition: color var(--transition);
}
.footer__col-links a:hover { color: var(--or); }
.footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer__brand { font-size: .8rem; color: var(--gris-muted); }
.footer__brand strong { color: var(--gris-soft); }
.footer__links { display: flex; gap: 20px; }
.footer__links a { font-size: .75rem; color: var(--gris-muted); transition: color var(--transition); }
.footer__links a:hover { color: var(--or); }
.footer__copy { font-size: .75rem; color: var(--gris-muted); }

/* ── Crédit footer (mailto premium) ────────────────────────── */
.footer__credit { margin-top: 14px; text-align: center; width: 100%; }

.site-credit-flash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 18px;
  border: 1px solid #d4af37;
  border-radius: 999px;
  background: #000;
  color: #d4af37;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(212,175,55,.28);
  transition: all .3s ease;
  max-width: 100%;
}
.site-credit-flash:hover {
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 18px rgba(255,255,255,.22), 0 0 22px rgba(212,175,55,.35);
  transform: translateY(-2px);
}
.site-credit-flash:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .site-credit-flash { font-size: 13px; padding: 9px 14px; letter-spacing: .6px; }
}

/* ── Pages légales ─────────────────────────────────────────── */
.legal-page { max-width: 760px; margin: 60px auto; padding: 0 24px; }
.legal-page h1 { margin-bottom: 8px; }
.legal-page .updated { font-size: .8rem; color: var(--gris-muted); margin-bottom: 40px; }
.legal-page h2 { font-size: 1.2rem; margin: 32px 0 12px; color: var(--or); }
.legal-page p, .legal-page li { font-size: .9rem; color: var(--gris-soft); margin-bottom: 12px; line-height: 1.8; }
.legal-page li { padding-left: 16px; position: relative; }
.legal-page li::before { content: '–'; position: absolute; left: 0; color: var(--or); }

/* ── Alertes / messages ────────────────────────────────────── */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    margin-bottom: 20px;
}
.alert--error { background: rgba(192,57,43,.12); border: 1px solid rgba(192,57,43,.3); color: #e74c3c; }
.alert--warn  { background: rgba(212,175,55,.1);  border: 1px solid var(--or-border);  color: var(--or); }
.alert--ok    { background: rgba(39,174,96,.1);   border: 1px solid rgba(39,174,96,.3); color: #2ecc71; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 980px) {
    .hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .hero__visual { display: none; }
    .plans-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid::before { display: none; }
    .plan-radio-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    section { padding: 60px 0; }
    .nav__links { display: none; }
    .nav__burger { display: flex; }
    .nav__mobile.is-open {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--or-border);
    }
    .nav__mobile a {
        display: block;
        padding: 14px 24px;
        font-size: .9rem;
        color: var(--gris-soft);
        border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .nav__mobile a:hover { color: var(--or); }
    .steps-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .trust-bar__inner { gap: 20px; }
    .cta-strip { padding: 40px 24px; margin: 0; }
    .form-section { padding: 28px 20px; }
    .footer__top { grid-template-columns: 1fr; gap: 32px; }
    .footer__desc { max-width: 100%; }
    .footer__inner { flex-direction: column; text-align: center; }
    .footer__links { flex-wrap: wrap; justify-content: center; }
    .hero { padding: 60px 0 48px; }
}

/* ============================================================
   Tunnel inscription / paiement
   ============================================================ */

.page-main { padding: 48px 0 80px; }

.tunnel-wrap {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
}
.tunnel-wrap--narrow { max-width: 600px; }

.tunnel-header { text-align: center; margin-bottom: 40px; }
.tunnel-step {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 12px;
}
.tunnel-title { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--blanc); margin-bottom: 8px; }
.tunnel-subtitle { font-size: .95rem; color: var(--gris-muted); }
.tunnel-back-link {
    color: var(--or);
    font-size: .85rem;
    margin-left: 8px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tunnel-back-link:hover { color: var(--or-hover); }

/* ── Inscription form — multi-section ────────────────────────── */
.inscription-form .form-section {
    max-width: 100%;
    margin-bottom: 20px;
    border: 1px solid var(--or-border);
}
.inscription-form .form-section legend.form-section__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanc);
    margin-bottom: 24px;
    padding: 0 8px;
}

.form-hint {
    font-size: .775rem;
    color: var(--gris-muted);
    line-height: 1.6;
    margin-top: 6px;
}
.form-hint a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }

/* Checkbox row error state */
.form-checkbox-row.has-error .form-error-msg { display: block; }
.form-checkbox-row .form-error-msg { display: none; font-size: .8rem; color: #e74c3c; margin-top: 4px; }

.form-submit-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
}
.form-submit-hint { font-size: .8rem; color: var(--gris-muted); text-align: center; }
.btn-submit { width: 100%; max-width: 380px; justify-content: center; }

/* ── Plan radio cards — label wraps input ────────────────────── */
/* Distinct du pattern landing (input hidden + label sibling) */
.plan-radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1.5px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 16px 16px 12px;
    cursor: pointer;
    transition: all var(--transition);
    overflow: hidden;
}
.plan-radio-card:hover { border-color: var(--or-active); }
.plan-radio-card:has(input[type=radio]:checked) {
    border-color: var(--or);
    background: linear-gradient(160deg, rgba(212,175,55,.08) 0%, transparent 60%);
    box-shadow: var(--glow);
}
.plan-radio-card--featured { border-color: rgba(212,175,55,.4); }
.plan-radio-card input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.plan-radio-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--or);
    color: #111;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-bottom-left-radius: 6px;
}
.plan-radio-card .plan-radio-name {
    font-size: .875rem;
    font-weight: 700;
    color: var(--blanc);
}
.plan-radio-card .plan-radio-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--or);
}
.plan-radio-card .plan-radio-price small {
    font-size: .75rem;
    font-weight: 400;
    color: var(--gris-muted);
}
.plan-radio-feats {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.plan-radio-feats li {
    font-size: .775rem;
    color: var(--gris-muted);
    padding-left: 12px;
    position: relative;
}
.plan-radio-feats li::before {
    content: '·';
    position: absolute;
    left: 2px;
    color: var(--or);
}
.plan-radio-ttc {
    font-size: .72rem;
    color: var(--gris-muted);
    margin-top: 4px;
    border-top: 1px solid var(--or-border);
    padding-top: 6px;
}

/* ============================================================
   Page paiement
   ============================================================ */

.paiement-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
    margin-top: 8px;
}

/* ── Recap card (paiement) ─────────────────────────────────── */
.recap-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanc);
    margin-bottom: 20px;
}
.recap-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.recap-list__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: .875rem;
}
.recap-list__row:last-child { border-bottom: none; }
.recap-list__row dt { color: var(--gris-muted); flex-shrink: 0; }
.recap-list__row dd { color: var(--gris-soft); text-align: right; word-break: break-word; min-width: 0; }
.recap-list__row--plan { flex-direction: column; gap: 4px; }
.recap-list__row--plan dt { color: var(--blanc); }
.recap-plan-detail {
    display: block;
    font-size: .775rem;
    color: var(--gris-muted);
    font-weight: 400;
    margin-top: 2px;
}
.recap-price-ht { color: var(--or) !important; font-weight: 700; }

.recap-divider { border: none; border-top: 1px solid var(--or-border); margin: 20px 0; }

.recap-fiscal { display: flex; flex-direction: column; gap: 0; }
.recap-fiscal__row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: .875rem;
    color: var(--gris-soft);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.recap-fiscal__row:last-child { border-bottom: none; }
.recap-fiscal__row dt { color: var(--gris-muted); }
.recap-fiscal__row--total {
    border-top: 1px solid var(--or-border);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 1rem;
}
.recap-fiscal__row--total dt,
.recap-fiscal__row--total dd { color: var(--blanc); }

.recap-billing-note {
    font-size: .775rem;
    color: var(--gris-muted);
    text-align: center;
    margin-top: 16px;
}

/* ── Paiement action card ────────────────────────────────────── */
.paiement-action { position: sticky; top: 88px; }
.paiement-card {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    padding: 32px 28px;
}
.paiement-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blanc);
    margin-bottom: 12px;
}
.paiement-card__text { font-size: .9rem; margin-bottom: 24px; line-height: 1.65; }

.btn-payer { width: 100%; justify-content: center; font-size: 1rem; padding: 16px; }
.btn-payer:disabled {
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Stripe indisponible */
.paiement-indisponible {
    padding: 20px 22px;
    background: rgba(212,175,55,.07);
    border: 1px solid rgba(212,175,55,.25);
    border-radius: var(--radius-sm);
    text-align: center;
    color: var(--gris-soft);
}
.paiement-indisponible__icon { font-size: 1.4rem; display: block; margin-bottom: 8px; }
.paiement-indisponible strong { color: var(--or); display: block; margin-bottom: 8px; }
.paiement-indisponible p { font-size: .875rem; line-height: 1.6; margin: 0; }

.paiement-securite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: .775rem;
    color: var(--gris-muted);
}
.paiement-cgu-note {
    font-size: .75rem;
    color: var(--gris-muted);
    text-align: center;
    margin-top: 16px;
    line-height: 1.6;
}
.paiement-cgu-note a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
    .paiement-layout {
        grid-template-columns: 1fr;
    }
    .paiement-action { position: static; }
}

/* ============================================================
   Page merci
   ============================================================ */

.success-box__lead { font-size: 1.05rem; color: var(--gris-soft); margin-bottom: 28px; }
.success-box__slug-preview {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin: 0 auto 28px;
    display: inline-block;
    text-align: center;
}
.success-box__slug-label { font-size: .775rem; color: var(--gris-muted); margin-bottom: 6px; }
.success-box__slug { margin-bottom: 0; }

.success-steps {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 32px 0;
}
.success-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 20px;
}
.success-step__num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--or-dim);
    border: 1.5px solid var(--or-border);
    color: var(--or);
    font-size: .8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-step strong { display: block; color: var(--blanc); margin-bottom: 4px; font-size: .9rem; }
.success-step p { font-size: .85rem; color: var(--gris-muted); line-height: 1.65; margin: 0; }

.success-box__support {
    font-size: .85rem;
    color: var(--gris-muted);
    margin-bottom: 28px;
}
.success-box__support a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }
.success-box__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   Pages légales (cgv, mentions-legales)
   ============================================================ */

.page-legal .legal-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

.legal-header { padding: 48px 0 32px; }
.legal-header h1 { color: var(--blanc); margin-bottom: 12px; }
.legal-meta { font-size: .875rem; color: var(--gris-muted); line-height: 1.7; }
.legal-meta a { color: var(--or); }

.legal-toc {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 24px 28px;
    margin-bottom: 40px;
}
.legal-toc__title { font-size: .85rem; font-weight: 700; color: var(--or); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .07em; }
.legal-toc ol { padding-left: 0; counter-reset: toc-counter; }
.legal-toc li {
    counter-increment: toc-counter;
    padding: 4px 0;
    font-size: .875rem;
    color: var(--gris-muted);
}
.legal-toc li::before { content: counter(toc-counter) '. '; color: var(--or); font-size: .75rem; }
.legal-toc a { color: var(--gris-soft); transition: color var(--transition); }
.legal-toc a:hover { color: var(--or); }

.legal-article {
    margin-bottom: 48px;
    scroll-margin-top: 88px;
}
.legal-article h2 {
    font-size: 1.2rem;
    color: var(--or);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--or-border);
}
.legal-article h3 { font-size: 1rem; color: var(--blanc); margin: 24px 0 10px; }
.legal-article p { font-size: .9rem; color: var(--gris-soft); line-height: 1.8; margin-bottom: 14px; }
.legal-article p:last-child { margin-bottom: 0; }
.legal-article ul, .legal-article ol { padding-left: 0; margin: 12px 0 16px; }
.legal-article li {
    font-size: .9rem;
    color: var(--gris-soft);
    line-height: 1.7;
    padding: 4px 0 4px 20px;
    position: relative;
}
.legal-article ul li::before { content: '–'; position: absolute; left: 4px; color: var(--or); }
.legal-article a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; }
.legal-article a:hover { color: var(--or-hover); }
.legal-article code {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: .875em;
    color: var(--or);
    font-family: monospace;
}

.legal-address {
    font-style: normal;
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    font-size: .9rem;
    color: var(--gris-soft);
    line-height: 1.9;
    display: inline-block;
    margin: 12px 0;
}
.legal-address strong { color: var(--blanc); }
.legal-address a { color: var(--or); }

.legal-defs dt { font-weight: 600; color: var(--blanc); margin-top: 16px; font-size: .9rem; }
.legal-defs dd { font-size: .875rem; color: var(--gris-soft); line-height: 1.7; padding-left: 16px; margin-bottom: 4px; }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin: 16px 0 20px;
}
.legal-table th {
    background: var(--surface-card);
    color: var(--or);
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--or-border);
    font-size: .8rem;
}
.legal-table td {
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.07);
    color: var(--gris-soft);
    vertical-align: top;
}
.legal-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }

.legal-footer {
    border-top: 1px solid var(--or-border);
    padding-top: 28px;
    margin-top: 40px;
    font-size: .8rem;
    color: var(--gris-muted);
}
.legal-footer p { font-size: .8rem; color: var(--gris-muted); margin-bottom: 6px; }
.legal-footer a { color: var(--or); }

@media (max-width: 700px) {
    .legal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tunnel-wrap { padding: 0 16px; }
    .paiement-card { padding: 24px 18px; }
    .recap-list__row { flex-direction: column; gap: 2px; }
    .recap-list__row dd { text-align: left; }
}

/* ============================================================
   Wizard inscription — multi-étapes (Lot 12B)
   Réutilise tokens var(--or), var(--or-border), var(--surface).
   ============================================================ */
.wiz-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: wiz-step;
}
.wiz-progress__step {
    flex: 1;
    position: relative;
    padding: 0;
    text-align: center;
    counter-increment: wiz-step;
}
.wiz-progress__step::before {
    content: counter(wiz-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 6px;
    border-radius: 50%;
    border: 1.5px solid var(--or-border);
    background: var(--surface);
    color: var(--gris-muted);
    font-weight: 700;
    font-size: .85rem;
    transition: all .2s;
}
.wiz-progress__step::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 1.5px;
    background: var(--or-border);
    z-index: -1;
}
.wiz-progress__step:last-child::after { display: none; }
.wiz-progress__step.is-done::before {
    content: "✓";
    background: var(--or);
    border-color: var(--or);
    color: #000;
}
.wiz-progress__step.is-active::before {
    border-color: var(--or);
    color: var(--or);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .15);
}
.wiz-progress__label {
    display: block;
    font-size: .72rem;
    color: var(--gris-muted);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.wiz-progress__step.is-active .wiz-progress__label,
.wiz-progress__step.is-done .wiz-progress__label { color: var(--blanc); }

.wiz-pane { display: none; animation: wizFadeIn .25s ease; }
.wiz-pane.is-active { display: block; }
@keyframes wizFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wiz-pane__title {
    font-size: 1.15rem;
    color: var(--blanc);
    margin: 0 0 6px;
}
.wiz-pane__sub {
    font-size: .9rem;
    color: var(--gris-muted);
    margin: 0 0 22px;
}

.wiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--or-border);
}
.wiz-nav__spacer { flex: 1; }
.wiz-prev,
.wiz-next,
.wiz-submit { min-width: 140px; justify-content: center; }
.wiz-prev[hidden],
.wiz-next[hidden],
.wiz-submit[hidden] { display: none !important; }

.wiz-recap {
    background: var(--surface);
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.wiz-recap__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--or-border);
    font-size: .9rem;
}
.wiz-recap__row:last-child { border-bottom: 0; }
.wiz-recap__row dt { color: var(--gris-muted); flex: 0 0 40%; }
.wiz-recap__row dd { color: var(--blanc); margin: 0; text-align: right; word-break: break-word; }
.wiz-recap__edit {
    display: inline-block;
    margin-top: 12px;
    color: var(--or);
    font-size: .8rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.wiz-recap__edit:hover { color: var(--or-hover); }

/* Métiers — grid checkbox responsive */
.metiers-check-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.metiers-check-grid.has-error .metiers-check-group { border-color: #e74c3c; }
.metiers-check-group {
    border: 1px solid var(--or-border);
    border-radius: var(--radius-sm);
    padding: 14px;
    background: var(--surface);
}
.metiers-check-group__label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--or);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 10px;
}
.metiers-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: .92rem;
    color: var(--blanc);
    cursor: pointer;
}
.metiers-check-item input[type="checkbox"] { accent-color: var(--or); }
.metiers-check-item input[type="checkbox"]:disabled + * { opacity: .45; cursor: not-allowed; }

.form-textarea { resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.5; }
.form-hint-inline { color: var(--gris-muted); font-size: .8rem; font-weight: 400; margin-left: 6px; }
.form-optional { color: var(--gris-muted); font-size: .78rem; font-weight: 400; }

/* ── Lot 12C-2 : Upload logo onboarding ─────────────────────── */
.btn-tp--sm { padding: 8px 16px; font-size: .85rem; }

.logo-upload-zone {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px dashed var(--or-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.logo-upload-preview {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--or-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.logo-upload-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.logo-upload-placeholder {
    color: var(--gris-muted);
    font-size: .72rem;
    text-align: center;
    padding: 4px;
    line-height: 1.2;
}
.logo-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.logo-upload-actions .form-hint { margin: 0; }

.wiz-recap__logo {
    max-width: 80px;
    max-height: 60px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--or-border);
    background: rgba(255,255,255,0.04);
    padding: 4px;
    object-fit: contain;
    display: block;
    margin-left: auto;
}

.recap-logo {
    margin: 0 0 18px;
    display: flex;
    justify-content: center;
}
.recap-logo__img {
    max-width: 140px;
    max-height: 90px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--or-border);
    background: rgba(255,255,255,0.04);
    padding: 8px;
}
.recap-preview-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 16px 0 0;
}
.recap-preview-cta__hint {
    color: var(--gris-muted);
    font-size: .75rem;
}

@media (max-width: 700px) {
    .wiz-progress__label { display: none; }
    .wiz-progress__step::before { width: 28px; height: 28px; font-size: .8rem; }
    .wiz-progress__step::after { top: 14px; }
    .metiers-check-grid { grid-template-columns: 1fr; gap: 12px; }
    .wiz-nav { flex-wrap: wrap; }
    .wiz-prev, .wiz-next, .wiz-submit { min-width: 0; flex: 1 1 auto; }
    .wiz-recap__row { flex-direction: column; gap: 4px; }
    .wiz-recap__row dd { text-align: left; }
    .wiz-recap__row dt { flex: 0 0 auto; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
    .wiz-recap__logo { margin-left: 0; }
    .logo-upload-zone { flex-direction: column; align-items: stretch; }
    .logo-upload-preview { align-self: center; }
}

/* ── Section "Ce qui est inclus / Extensions" (index.php) ──── */
.inclus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 40px;
}
.inclus-bloc {
    padding: 28px;
    border-radius: var(--radius);
}
.inclus-bloc--socle {
    background: var(--surface);
    border: 1px solid var(--or-border);
}
.inclus-bloc--ext {
    background: rgba(212,175,55,.04);
    border: 1px solid rgba(212,175,55,.15);
}
.inclus-bloc__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--or-border);
}
.inclus-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    color: var(--gris-soft);
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.inclus-item__check { color: #7ec87e; font-weight: 700; flex-shrink: 0; }

.inclus-ext-group__title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-muted);
    margin-bottom: 8px;
}
.inclus-ext-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    color: var(--gris-soft);
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.inclus-ext-item__dot {
    color: var(--or);
    font-weight: 700;
    width: 14px;
    flex-shrink: 0;
    text-align: center;
}
.inclus-ext-item--soon {
    opacity: .55;
}
.inclus-ext-item__dot--soon {
    color: var(--gris-muted);
}
.inclus-ext-item__soon {
    margin-left: auto;
    font-size: .68rem;
    background: rgba(255,200,60,.12);
    color: #f0c060;
    padding: 1px 7px;
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: .04em;
    flex-shrink: 0;
}

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

/* ── Section "Pour qui" ─────────────────────────────────────── */
.pourqui-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.pourqui-card {
    background: var(--surface-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.pourqui-card:hover {
    border-color: var(--or-border);
    box-shadow: var(--glow);
}
.pourqui-card__icon {
    font-size: 1.8rem;
    margin-bottom: 14px;
    display: block;
}
.pourqui-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanc);
    margin-bottom: 10px;
}
.pourqui-card__text {
    font-size: .85rem;
    color: var(--gris-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Plan card "pour qui" tagline ───────────────────────────── */
.plan-card__pour-qui {
    font-size: .8rem;
    color: var(--gris-muted);
    line-height: 1.55;
    margin: 0 0 20px;
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--or-border);
}

@media (max-width: 980px) {
    .pourqui-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pourqui-grid { grid-template-columns: 1fr; }
}

/* ── Métiers par famille ─────────────────────────────────── */
.metiers-families {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.metier-family {
    background: var(--surface-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius);
    padding: 20px;
}
.metier-family__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.metier-family__icon { font-size: 1.25rem; }
.metier-family__label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--or);
}
.metier-family__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.metier-family__list li {
    font-size: .82rem;
    color: var(--gris-muted);
    padding-left: 14px;
    position: relative;
    line-height: 1.4;
}
.metier-family__list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--or-border);
}
.metiers-note {
    margin: 28px auto 0;
    font-size: .8rem;
    color: var(--gris-muted);
    text-align: center;
    max-width: 560px;
}
@media (max-width: 980px) {
    .metiers-families { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .metiers-families { grid-template-columns: 1fr; }
}

/* ── Ce que vous pilotez ─────────────────────────────────── */
.pilotez-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 40px;
}
.pilotez-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius);
    padding: 16px;
}
.pilotez-item__icon {
    font-size: 1.35rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.pilotez-item__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pilotez-item__body strong {
    font-size: .88rem;
    color: var(--blanc);
    font-weight: 600;
}
.pilotez-item__body span {
    font-size: .77rem;
    color: var(--gris-muted);
    line-height: 1.4;
}
@media (max-width: 980px) {
    .pilotez-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .pilotez-grid { grid-template-columns: 1fr; }
}

/* ── Mockups produit ─────────────────────────────────────── */
.screen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.screen-grid--5 {
    grid-template-columns: repeat(6, 1fr);
}
.screen-grid--5 .screen-card { grid-column: span 2; }
.screen-grid--5 .screen-card:nth-child(4) { grid-column: 2 / span 2; }
.screen-grid--5 .screen-card:nth-child(5) { grid-column: 4 / span 2; }
.screen-card {
    background: var(--surface-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius);
    overflow: hidden;
}
.screen-card__caption {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--or);
    padding: 14px 18px 0;
}
.screen-card__desc {
    font-size: .82rem;
    color: var(--gris-muted);
    padding: 10px 18px 18px;
    line-height: 1.5;
    margin: 0;
}
.screen-mockup {
    margin: 10px 18px;
    background: #0d1018;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 7px;
    overflow: hidden;
    font-size: .72rem;
}
.smk-topbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    background: #161b26;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.smk-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    flex-shrink: 0;
}
.smk-title {
    font-size: .66rem;
    color: rgba(255,255,255,.42);
    margin-left: 6px;
    font-weight: 500;
}
.smk-body { padding: 12px; }
/* stats row */
.smk-stats { display: flex; gap: 7px; margin-bottom: 10px; }
.smk-stat {
    flex: 1;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 5px;
    padding: 7px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.smk-stat--accent { border-color: rgba(212,175,55,.22); }
.smk-stat__num { font-size: .9rem; font-weight: 700; color: var(--blanc); }
.smk-stat--accent .smk-stat__num { color: var(--or); }
.smk-stat__label { font-size: .58rem; color: rgba(255,255,255,.35); }
.smk-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.smk-row--sm { gap: 6px; }
.smk-bar {
    height: 4px; border-radius: 2px;
    background: rgba(212,175,55,.18); flex: 1; position: relative; overflow: hidden;
}
.smk-bar::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--or); border-radius: 2px;
}
.smk-bar--84::after { width: 84%; }
.smk-label-sm { font-size: .6rem; color: rgba(255,255,255,.32); white-space: nowrap; }
.smk-badge {
    font-size: .6rem; padding: 3px 8px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.35);
}
.smk-badge--active { border-color: rgba(90,200,90,.22); color: rgba(90,210,90,.65); }
/* leads */
.smk-lead-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.smk-lead-row:last-child { border-bottom: 0; }
.smk-lead-row--faded { opacity: .5; }
.smk-lead-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.14); flex-shrink: 0;
}
.smk-lead-dot--new { background: var(--or); }
.smk-lead-dot--read { background: rgba(255,255,255,.28); }
.smk-lead-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.smk-lead-name { font-size: .66rem; color: rgba(255,255,255,.78); font-weight: 500; }
.smk-lead-meta { font-size: .57rem; color: rgba(255,255,255,.28); }
.smk-lead-tag {
    font-size: .57rem; padding: 2px 6px; border-radius: 3px;
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.35); white-space: nowrap;
}
.smk-lead-tag--new { background: rgba(212,175,55,.14); color: rgba(212,175,55,.9); }
/* devis fields */
.smk-field-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.smk-field-row:last-of-type { border-bottom: 0; }
.smk-field-label { font-size: .6rem; color: rgba(255,255,255,.3); }
.smk-field-val { font-size: .66rem; color: rgba(255,255,255,.68); font-weight: 500; max-width: 130px; text-align: right; }
.smk-field-val--accent { color: var(--or); font-weight: 700; font-size: .76rem; }
.smk-divider { height: 1px; background: rgba(255,255,255,.06); margin: 8px 0; }
.smk-btn-row { display: flex; justify-content: flex-end; }
.smk-btn { font-size: .63rem; padding: 5px 12px; border-radius: 4px; cursor: default; }
.smk-btn--primary { background: var(--or); color: #111; font-weight: 700; }
/* profil */
.smk-profile-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.smk-logo-ph {
    width: 28px; height: 28px; border-radius: 5px; flex-shrink: 0;
    background: rgba(212,175,55,.18); border: 1px solid rgba(212,175,55,.28);
}
.smk-profile-info { display: flex; flex-direction: column; gap: 2px; }
.smk-profile-name { font-size: .7rem; color: rgba(255,255,255,.82); font-weight: 600; }
.smk-profile-meta { font-size: .58rem; color: rgba(90,210,90,.62); }
.smk-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.smk-tag {
    font-size: .58rem; padding: 2px 7px; border-radius: 3px;
    background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.18);
    color: rgba(212,175,55,.78);
}
.smk-zones { display: flex; gap: 5px; flex-wrap: wrap; }
.smk-zone { font-size: .58rem; padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.38); }
.smk-zone--more { color: rgba(255,255,255,.22); }
@media (max-width: 760px) {
    .screen-grid { grid-template-columns: 1fr; }
    .screen-grid--5 { grid-template-columns: 1fr; }
    .screen-grid--5 .screen-card { grid-column: span 1; }
    .screen-grid--5 .screen-card:nth-child(4),
    .screen-grid--5 .screen-card:nth-child(5) { grid-column: span 1; }
}

/* ── Ce que vous obtenez vraiment ───────────────────────── */
.obtenez-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 40px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.obtenez-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: .88rem;
    color: var(--blanc);
    font-weight: 500;
}
.obtenez-item__arrow {
    color: var(--or);
    font-weight: 700;
    flex-shrink: 0;
}
@media (max-width: 760px) {
    .obtenez-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .obtenez-grid { grid-template-columns: 1fr; }
}

/* ── Screen card — caption below mockup ─────────────────── */
.screen-card__caption {
    font-size: .92rem;
    font-weight: 700;
    color: var(--blanc);
    padding: 14px 18px 4px;
    line-height: 1.4;
}

/* ── Apparence mockup extras ─────────────────────────────── */
.smk-apparence-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.smk-apparence-info { display: flex; flex-direction: column; gap: 2px; }
.smk-apparence-label { font-size: .68rem; color: rgba(255,255,255,.72); font-weight: 600; }
.smk-apparence-hint  { font-size: .55rem; color: rgba(255,255,255,.3); }
.smk-color-row { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.smk-color-swatch {
    width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.12);
}
.smk-color-swatch--or   { background: var(--or); }
.smk-color-swatch--dark { background: #1a1a1a; }
.smk-color-label { font-size: .58rem; color: rgba(255,255,255,.38); }
.smk-cover-ph {
    height: 28px; border-radius: 4px;
    background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.14);
    display: flex; align-items: center; justify-content: center;
}
.smk-cover-label { font-size: .56rem; color: rgba(255,255,255,.25); }

/* ── Section Rejoindre Agence ────────────────────────────── */
.rejoindre-section {
    background: #111820;
    padding: 72px 0;
    border-top: 1px solid rgba(212,175,55,.15);
    border-bottom: 1px solid rgba(212,175,55,.15);
}
.rejoindre-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.rejoindre-eyebrow {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--or);
    margin: 0 0 20px;
    opacity: .85;
}
.rejoindre-phrase {
    font-size: clamp(1.15rem, 2.6vw, 1.6rem);
    font-weight: 700;
    color: #f0ece4;
    line-height: 1.45;
    margin: 0 0 36px;
}
.rejoindre-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center;
}
.rejoindre-list li {
    background: rgba(212,175,55,.08);
    border: 1px solid rgba(212,175,55,.22);
    border-radius: 6px;
    padding: 10px 22px;
    font-size: .88rem;
    font-weight: 600;
    color: rgba(240,236,228,.85);
}
.rejoindre-list li::before {
    content: '→ ';
    color: var(--or);
    font-weight: 700;
}

/* ── Bloc contact (tunnel + home) ─────────────────────────── */
.contact-block {
    margin-top: 32px;
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    padding: 20px 24px;
    background: rgba(212,175,55,.04);
    text-align: center;
}
.contact-block--home {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 28px;
}
.contact-block__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanc);
    margin: 0 0 6px;
}
.contact-block__sub {
    font-size: .88rem;
    color: var(--gris-muted);
    margin: 0 0 16px;
}
.contact-block__links {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; justify-content: center;
}
.contact-block__link {
    color: var(--or);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
}
.contact-block__link:hover { text-decoration: underline; }

/* ── Contact info block (contact.php) ────────────────────── */
.contact-info-block {
    display: flex; gap: 32px; flex-wrap: wrap;
    margin: 28px 0;
    padding: 20px 24px;
    background: var(--surface-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius);
}
.contact-info-block--btns {
    gap: 12px;
    align-items: center;
    padding: 24px;
}
.contact-info-block__item { display: flex; flex-direction: column; gap: 4px; }
.contact-info-block__label { font-size: .78rem; color: var(--gris-muted); text-transform: uppercase; letter-spacing: .06em; }
.contact-info-block__value { font-size: 1rem; font-weight: 600; color: var(--or); text-decoration: none; }
.contact-info-block__value:hover { text-decoration: underline; }

/* ── Form success banner ─────────────────────────────────── */
.form-success-banner {
    display: flex; align-items: flex-start; gap: 14px;
    background: rgba(60,180,90,.1);
    border: 1px solid rgba(60,180,90,.28);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    color: var(--blanc);
    font-size: .92rem;
}
.form-success-banner__icon {
    font-size: 1.2rem;
    color: #3cb45a;
    flex-shrink: 0;
    margin-top: 1px;
}
.contact-form-intro { color: var(--gris-muted); margin: 20px 0 6px; font-size: .9rem; }
.contact-form-note  { color: var(--gris-muted); font-size: .82rem; margin-top: 14px; text-align: center; }

/* ── Promo recap fiscal (paiement.php) ───────────────────── */
.recap-fiscal__row--promo {
    color: #3cb45a;
    font-weight: 600;
}
.recap-promo-remise {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(60,180,90,.08);
    border: 1px solid rgba(60,180,90,.22);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: .82rem;
    color: #3cb45a;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ── Form optional label ─────────────────────────────────── */
.form-optional { font-size: .78rem; font-weight: 400; color: var(--gris-muted); }

/* ── SEO Breadcrumb ──────────────────────────────────────── */
.seo-breadcrumb {
    font-size: .8rem;
    color: var(--gris-muted);
    padding: 20px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.seo-breadcrumb a {
    color: var(--gris-muted);
    text-decoration: none;
    transition: color .15s;
}
.seo-breadcrumb a:hover { color: var(--or); }
.seo-breadcrumb span[aria-hidden] { opacity: .4; }

/* ── Offre lancement banner ──────────────────────────────── */
.lancement-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(212,175,55,.12) 0%, rgba(212,175,55,.06) 100%);
    border: 1px solid rgba(212,175,55,.3);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.lancement-banner__badge {
    flex-shrink: 0;
    background: var(--or);
    color: var(--noir);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}
.lancement-banner__body {
    flex: 1;
    font-size: .88rem;
    color: var(--blanc);
    line-height: 1.5;
}
.lancement-banner__headline { color: var(--or); }
.lancement-banner__conditions {
    display: block;
    font-size: .75rem;
    color: var(--gris-muted);
    margin-top: 2px;
}
.lancement-banner__cta {
    flex-shrink: 0;
    background: var(--or);
    color: var(--noir);
    font-size: .82rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity .15s;
    white-space: nowrap;
}
.lancement-banner__cta:hover { opacity: .85; }
.lancement-banner--tunnel { margin-bottom: 16px; }

/* Plan card promo price */
.plan-card__price-promo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.plan-card__price-old {
    font-size: .85rem;
    color: var(--gris-muted);
    text-decoration: line-through;
}
.plan-card__price-badge {
    background: rgba(212,175,55,.2);
    color: var(--or);
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}
.plan-card__lancement-note {
    font-size: .72rem;
    color: var(--gris-muted);
    margin-top: 4px;
}
.plan-radio-price-old {
    font-size: .8rem;
    color: var(--gris-muted);
    text-decoration: line-through;
    margin-right: 4px;
}

/* ============================================================
   FINITION RESPONSIVE MOBILE — passe complète
   Cibles : 320px / 360px / 375px / 390px / 414px / 768px
   Ne casse pas le desktop.
   ============================================================ */

/* ── Global overflow prevention ──────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { min-width: 0; }
img { max-width: 100%; height: auto; }

/* ── Nav mobile — 700px ──────────────────────────────────── */
@media (max-width: 700px) {
    /* Cacher le bouton Contact (présent dans le menu burger) */
    .nav__cta-contact { display: none; }
    .nav__inner { padding: 0 16px; height: 60px; }
    /* Réduire la taille du CTA principal pour éviter le débordement */
    .nav__cta { font-size: .8rem; padding: 9px 16px; }
}

@media (max-width: 380px) {
    /* Masquer le badge "Agence" pour économiser de la place */
    .nav__logo-badge { display: none; }
    .nav__logo { font-size: .88rem; }
    /* Compacter encore le CTA si nécessaire */
    .nav__cta { font-size: .75rem; padding: 8px 12px; }
}

/* ── Hero mobile ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .hero { padding: 40px 0 36px; }
    .hero__text { font-size: .95rem; margin-bottom: 28px; }
    .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero__actions .btn-tp {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .hero { padding: 32px 0 28px; }
    .hero__title { font-size: clamp(1.65rem, 7.5vw, 2rem); }
    .hero__eyebrow { font-size: .68rem; }
}

/* ── Trust bar ───────────────────────────────────────────── */
@media (max-width: 560px) {
    .trust-bar__inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 18px;
    }
    .trust-bar__item { font-size: .78rem; }
}
@media (max-width: 380px) {
    .trust-bar__inner { flex-direction: column; align-items: center; gap: 8px; }
}

/* ── Container padding réduit sur très petit écran ───────── */
@media (max-width: 400px) {
    .container { padding: 0 14px; }
    section { padding: 44px 0; }
}

/* ── Section intro : taille réduite ─────────────────────── */
@media (max-width: 560px) {
    .section-intro { font-size: .9rem; margin-bottom: 32px; }
    .section-label { font-size: .65rem; }
    .section-title { font-size: clamp(1.4rem, 5.5vw, 2rem); }
}

/* ── Lancement banner mobile ─────────────────────────────── */
@media (max-width: 700px) {
    .lancement-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 16px;
    }
    .lancement-banner__cta {
        align-self: stretch;
        text-align: center;
    }
}

/* ── Plans grid — très petit écran ──────────────────────── */
@media (max-width: 480px) {
    .plans-grid { max-width: 100%; }
    .plan-card { padding: 22px 18px; }
    .plan-card__name { font-size: 1.05rem; }
}

/* ── Plan radio (inscription) ────────────────────────────── */
@media (max-width: 480px) {
    .plan-radio { padding: 18px 16px; }
}

/* ── Tunnel inscription / paiement ──────────────────────── */
@media (max-width: 560px) {
    .tunnel-wrap { padding: 0 14px; }
    .form-section { padding: 22px 16px; }
    .page-main { padding: 28px 0 60px; }
}
@media (max-width: 400px) {
    .tunnel-wrap { padding: 0 10px; }
    .form-section { padding: 18px 14px; }
    .form-control { font-size: .88rem; }
}

/* ── Rejoindre section ───────────────────────────────────── */
@media (max-width: 560px) {
    .rejoindre-section { padding: 48px 0; }
    .rejoindre-phrase { font-size: .92rem; line-height: 1.65; }
    .rejoindre-list { gap: 8px; }
    .rejoindre-list li { font-size: .88rem; }
}

/* ── Pour qui grid — section "ce que vos prospects voient" */
@media (max-width: 560px) {
    .pourqui-grid { gap: 12px; }
    .pourqui-card { padding: 20px 18px; }
    .pourqui-card__icon { font-size: 1.5rem; margin-bottom: 10px; }
    .pourqui-card__title { font-size: .92rem; }
}

/* ── Obtenez grid ────────────────────────────────────────── */
@media (max-width: 400px) {
    .obtenez-item { padding: 12px 14px; font-size: .82rem; }
}

/* ── Pilotez grid ────────────────────────────────────────── */
@media (max-width: 400px) {
    .pilotez-item { gap: 10px; padding: 14px 14px; }
    .pilotez-item__icon { font-size: 1.2rem; min-width: 28px; }
    .pilotez-item__body strong { font-size: .88rem; }
    .pilotez-item__body span   { font-size: .78rem; }
}

/* ── Screen grid (mockups) ───────────────────────────────── */
@media (max-width: 560px) {
    .screen-grid { gap: 10px; }
    .screen-card__caption { font-size: .82rem; padding: 10px 14px 4px; }
}

/* ── Section inclus ──────────────────────────────────────── */
@media (max-width: 480px) {
    .inclus-ext-item { font-size: .82rem; padding: 9px 12px; }
    .inclus-features-list li { font-size: .82rem; }
}

/* ── FAQ ─────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .faq-list { margin-top: 24px; }
    .faq-item summary { font-size: .88rem; padding: 14px 0; }
    .faq-answer { font-size: .85rem; }
}

/* ── CTA strip ───────────────────────────────────────────── */
@media (max-width: 560px) {
    .cta-strip { padding: 40px 16px; }
    .cta-strip__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .cta-strip__actions .btn-tp {
        width: 100%;
        justify-content: center;
    }
}

/* ── Contact page ────────────────────────────────────────── */
@media (max-width: 600px) {
    .contact-info-block { flex-direction: column; gap: 20px; padding: 18px 16px; }
    .contact-info-block--btns { flex-direction: column; align-items: stretch; }
    .contact-info-block--btns .btn-tp {
        width: 100%;
        justify-content: center;
    }
}

/* ── Footer ──────────────────────────────────────────────── */
@media (max-width: 560px) {
    .footer__inner { gap: 24px; }
    .footer__copy { font-size: .75rem; }
}

/* ── Formulaires : pleine largeur ────────────────────────── */
@media (max-width: 600px) {
    .form-control, .form-select {
        width: 100%;
        font-size: .9rem;
    }
    .btn-submit { max-width: 100%; }
}

/* ── Pour qui section home (plans) ──────────────────────── */
@media (max-width: 560px) {
    .pourqui2-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 380px) {
    .pourqui2-grid { grid-template-columns: 1fr; }
}

/* ── Sommaire métiers ────────────────────────────────────── */
@media (max-width: 560px) {
    .metiers-families { gap: 10px; }
    .metier-family { padding: 16px 14px; }
    .metier-family__title { font-size: .88rem; }
    .metier-family__list li { font-size: .78rem; }
}

/* ═══════════════════════════════════════════════════════════
   NOUVELLES SECTIONS — Google vs Agence / 3 étages /
   Cockpit mobile / Diffusion QR
   ══════════════════════════════════════════════════════════ */

/* ── Tableau comparatif Google vs Agence ──────────────────── */
.gva-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 32px;
}
.gva-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    background: var(--surface, #1a1a1a);
    border-radius: 10px;
    overflow: hidden;
}
.gva-table thead tr {
    background: var(--or, #c9a84c);
    color: #0a0a0a;
}
.gva-table thead th {
    padding: 14px 18px;
    text-align: center;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.gva-table thead th:first-child {
    text-align: left;
}
.gva-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .15s;
}
.gva-table tbody tr:last-child {
    border-bottom: none;
}
.gva-table tbody tr:hover {
    background: rgba(255,255,255,.03);
}
.gva-table tbody td {
    padding: 12px 18px;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
}
.gva-table tbody td:first-child {
    text-align: left;
    font-weight: 400;
    color: var(--text-muted, #aaa);
    font-size: .88rem;
}
.gva-ok {
    color: #7ec87e;
    background: rgba(126,200,126,.07);
}
.gva-ko {
    color: #ff8080;
    background: rgba(255,128,128,.07);
}
.gva-maybe {
    color: #ccc870;
    background: rgba(204,200,112,.07);
}
@media (max-width: 600px) {
    .gva-table thead th,
    .gva-table tbody td {
        padding: 10px 10px;
        font-size: .8rem;
    }
}

/* ── Section 3 étages ────────────────────────────────────── */
.etages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.etage-card {
    background: var(--card, #141414);
    border: 1px solid rgba(201,168,76,.18);
    border-radius: 12px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.etage-card__icon {
    font-size: 2rem;
    line-height: 1;
}
.etage-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--or, #c9a84c);
    margin: 0;
}
.etage-card__text {
    font-size: .88rem;
    color: var(--text-muted, #aaa);
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 760px) {
    .etages-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ── Cockpit mobile — layout 2 colonnes ──────────────────── */
.cockpit-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 40px;
}
@media (max-width: 760px) {
    .cockpit-layout {
        grid-template-columns: 1fr;
        gap: 32px;
        justify-items: center;
    }
}

/* ── Mockup smartphone cockpit ───────────────────────────── */
.cockpit-phone {
    width: 380px;
    max-width: 100%;
    background: #0e0e0e;
    border: 2px solid rgba(201,168,76,.45);
    border-radius: 28px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 0 60px rgba(201,168,76,.18), 0 24px 48px rgba(0,0,0,.5);
}
.cockpit-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0 8px;
    border-bottom: 1px solid rgba(201,168,76,.2);
}
.cockpit-brand {
    font-size: .78rem;
    font-weight: 700;
    color: var(--or, #c9a84c);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cockpit-badge-notif {
    background: #e53e3e;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 7px;
    line-height: 1.4;
}
.cockpit-score-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(201,168,76,.08);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .75rem;
    color: var(--text-muted, #aaa);
}
.cockpit-score-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--or, #c9a84c);
}
.cockpit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.cockpit-btn {
    position: relative;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: default;
    transition: background .15s;
}
.cockpit-btn--alert {
    background: rgba(229,62,62,.15);
    border-color: rgba(229,62,62,.3);
}
.cockpit-btn__icon {
    font-size: 1.7rem;
    line-height: 1;
}
.cockpit-btn__label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted, #aaa);
    text-align: center;
    line-height: 1.2;
}
.cockpit-btn__badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #e53e3e;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 1px 5px;
    line-height: 1.4;
}
.cockpit-activity {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.cockpit-activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cockpit-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
}
.cockpit-dot--new {
    background: #48bb78;
    box-shadow: 0 0 6px rgba(72,187,120,.6);
}
.cockpit-activity-text {
    font-size: .72rem;
    color: var(--text-muted, #aaa);
    line-height: 1.3;
}

/* ── Liste features à droite du cockpit ──────────────────── */
.cockpit-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cockpit-features li {
    position: relative;
    padding-left: 22px;
    font-size: .92rem;
    color: var(--text, #e0e0e0);
    line-height: 1.5;
}
.cockpit-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--or, #c9a84c);
    font-weight: 700;
}

/* ── Section diffusion / usages QR ───────────────────────── */
.diffusion-usages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
}
.diffusion-usage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: var(--surface, #1a1a1a);
    border: 1px solid rgba(201,168,76,.22);
    border-radius: 16px;
    padding: 28px 24px 22px;
    min-width: 130px;
    transition: border-color .2s, background .2s, transform .15s;
}
.diffusion-usage:hover {
    border-color: rgba(201,168,76,.6);
    background: rgba(201,168,76,.07);
    transform: translateY(-2px);
}
.diffusion-usage__icon {
    font-size: 2.8rem;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(201,168,76,.2));
}
.diffusion-usage__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--gris-soft, #ccc);
    text-align: center;
    line-height: 1.3;
}
@media (max-width: 480px) {
    .diffusion-usage {
        min-width: 90px;
        padding: 18px 14px 16px;
    }
    .diffusion-usage__icon { font-size: 2.2rem; }
    .diffusion-usage__label { font-size: .75rem; }
}


/* ── Avant / Après ────────────────────────────────────────── */
.avant-apres-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
}
.avant-apres-col {
    border-radius: var(--radius);
    padding: 32px 28px;
}
.avant-apres-col--avant {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
}
.avant-apres-col--apres {
    background: rgba(212,175,55,.05);
    border: 1px solid var(--or-border);
}
.avant-apres-col__header {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 14px;
}
.avant-apres-col--avant .avant-apres-col__header {
    color: var(--gris-muted);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.avant-apres-col--apres .avant-apres-col__header {
    color: var(--or);
    border-bottom: 1px solid var(--or-border);
}
.avant-apres-col ul { display: flex; flex-direction: column; gap: 13px; }
.avant-apres-col li {
    font-size: .9rem;
    line-height: 1.55;
    padding-left: 22px;
    position: relative;
}
.avant-apres-col--avant li { color: var(--gris-muted); }
.avant-apres-col--avant li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: rgba(192,57,43,.75);
    font-weight: 700;
}
.avant-apres-col--apres li { color: var(--gris-soft); }
.avant-apres-col--apres li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--or);
    font-weight: 700;
}
@media (max-width: 640px) {
    .avant-apres-grid { grid-template-columns: 1fr; }
}

/* ── Timeline (riche) ─────────────────────────────────────── */
.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 56px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(to bottom, var(--or-border), rgba(212,175,55,.04));
    z-index: 0;
}
.timeline-step {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    padding-bottom: 44px;
    position: relative;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step__num {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface-card);
    border: 2px solid var(--or-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--or);
    position: relative;
    z-index: 1;
}
.timeline-step__body { flex: 1; padding-top: 10px; }
.timeline-step__tag {
    display: inline-block;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-muted);
    margin-bottom: 5px;
}
.timeline-step__body h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--blanc);
    margin-bottom: 8px;
}
.timeline-step__body p {
    font-size: .9rem;
    color: var(--gris-soft);
    line-height: 1.7;
    margin-bottom: 12px;
}
.timeline-step__badge {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    color: var(--or);
    background: var(--or-dim);
    border: 1px solid var(--or-border);
    border-radius: 6px;
    padding: 4px 12px;
}
@media (max-width: 600px) {
    .timeline::before { left: 19px; }
    .timeline-step { gap: 16px; }
    .timeline-step__num { width: 40px; height: 40px; font-size: .9rem; }
}

/* ── Témoignages ──────────────────────────────────────────── */
.temoignages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.temoignage-card {
    background: var(--surface-card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.temoignage-card:hover {
    border-color: var(--or-border);
    box-shadow: var(--glow);
}
.temoignage-card::before {
    content: '\201C';
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 4.5rem;
    color: var(--or);
    opacity: .15;
    line-height: 1;
    font-family: Georgia, serif;
    pointer-events: none;
}
.temoignage-card__quote {
    font-size: .92rem;
    color: var(--gris-soft);
    line-height: 1.75;
    flex: 1;
    padding-top: 14px;
}
.temoignage-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 16px;
}
.temoignage-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--or-dim);
    border: 1px solid var(--or-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--or);
    flex-shrink: 0;
}
.temoignage-card__author strong { display: block; font-size: .875rem; color: var(--blanc); }
.temoignage-card__author span { font-size: .77rem; color: var(--gris-muted); }
@media (max-width: 900px) {
    .temoignages-grid { grid-template-columns: 1fr; }
}

/* ── Bloc vidéo placeholder ───────────────────────────────── */
.video-section { max-width: 800px; margin: 0 auto; }
.video-placeholder {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    cursor: default;
}
.video-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(212,175,55,.07), transparent 65%);
    pointer-events: none;
}
.video-placeholder__play {
    width: 72px;
    height: 72px;
    background: var(--or);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #111;
    position: relative;
    z-index: 1;
    padding-left: 5px;
    opacity: .6;
}
.video-placeholder__label {
    position: relative;
    z-index: 1;
    font-size: .9rem;
    color: var(--gris-muted);
    text-align: center;
}
.video-placeholder__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--or);
    background: var(--or-dim);
    border: 1px solid var(--or-border);
    border-radius: 4px;
    padding: 3px 8px;
    z-index: 1;
}

/* ── Plans page — pitch header ───────────────────────────── */
.plans-pitch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 52px;
}
.plans-pitch-item {
    background: var(--surface-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-sm);
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.plans-pitch-item__icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.plans-pitch-item__body strong {
    display: block;
    font-size: .9rem;
    color: var(--blanc);
    margin-bottom: 4px;
}
.plans-pitch-item__body span {
    font-size: .82rem;
    color: var(--gris-muted);
    line-height: 1.5;
    display: block;
}
@media (max-width: 700px) {
    .plans-pitch { grid-template-columns: 1fr; }
}

/* ── Demo Player interactif ───────────────────────────────── */
.dp-wrap { max-width: 820px; margin: 0 auto; }
.dp {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--glow);
}
.dp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}
.dp-counter {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--or);
    background: var(--or-dim);
    border: 1px solid var(--or-border);
    border-radius: 4px;
    padding: 2px 8px;
    flex-shrink: 0;
}
.dp-step-text strong { display: block; font-size: .95rem; color: var(--blanc); margin-bottom: 1px; }
.dp-step-text span   { font-size: .78rem; color: var(--gris-muted); }
.dp-body {
    position: relative;
    min-height: 320px;
    display: grid;
    padding: 32px 24px;
    align-items: center;
}
.dp-screen {
    grid-area: 1/1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dp-screen--active { opacity: 1; pointer-events: auto; }
.dp-footer {
    padding: 14px 24px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}
.dp-progress-track {
    height: 2px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    margin-bottom: 12px;
    overflow: hidden;
}
.dp-progress-bar { height: 100%; width: 0%; background: var(--or); border-radius: 2px; }
.dp-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.dp-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--or-border);
    background: transparent;
    color: var(--gris-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .8rem;
    transition: all var(--transition);
}
.dp-btn:hover { border-color: var(--or); color: var(--or); }
.dp-dots { display: flex; gap: 7px; }
.dp-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    cursor: pointer; border: none;
    transition: all .2s;
}
.dp-dot--active { background: var(--or); transform: scale(1.3); }

/* ── Slide 1 : SERP ──────────────────────────────────────── */
.ds1 { width: 100%; max-width: 500px; }
.ds1-bar {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface); padding: 8px 12px;
    border-radius: 8px 8px 0 0;
    border: 1px solid rgba(255,255,255,.07); border-bottom: none;
}
.ds1-dots { display: flex; gap: 5px; }
.ds1-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.12); }
.ds1-url {
    flex: 1; background: rgba(255,255,255,.06); border-radius: 4px;
    padding: 4px 10px; font-size: .73rem; color: var(--gris-muted);
}
.ds1-body {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 0 0 8px 8px;
    padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.ds1-result { padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.04); }
.ds1-ad {
    font-size: .63rem; font-weight: 600; color: #7ec8e3;
    background: rgba(126,200,227,.12); border-radius: 3px;
    padding: 1px 5px; display: inline-block; margin-bottom: 3px;
}
.ds1-title { font-size: .8rem; color: #8ab4f8; display: block; margin-bottom: 2px; }
.ds1-site  { font-size: .7rem; color: var(--gris-muted); }
.ds1-absent {
    text-align: center; padding: 10px;
    font-size: .78rem; color: rgba(210,60,40,.9);
    border: 1px dashed rgba(210,60,40,.3); border-radius: 6px;
}

/* ── Slide 2 : Formulaire ────────────────────────────────── */
.ds2 { width: 100%; max-width: 380px; }
.ds2-head {
    font-size: .95rem; font-weight: 600; color: var(--blanc);
    text-align: center; margin-bottom: 16px;
}
.ds2-field {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px; padding: 8px 12px; margin-bottom: 8px;
    opacity: 0; transform: translateY(8px);
}
.dp-screen--active .ds2-field                   { animation: dpFadeUp .4s forwards; }
.dp-screen--active .ds2-field:nth-child(3)       { animation-delay: .25s; }
.dp-screen--active .ds2-field:nth-child(4)       { animation-delay: .5s; }
@keyframes dpFadeUp { to { opacity: 1; transform: none; } }
.ds2-label { font-size: .68rem; color: var(--gris-muted); display: block; margin-bottom: 2px; }
.ds2-val   { font-size: .875rem; color: var(--blanc); }
.ds2-plans { display: flex; gap: 7px; margin: 10px 0; opacity: 0; transform: translateY(8px); }
.dp-screen--active .ds2-plans { animation: dpFadeUp .4s .75s forwards; }
.ds2-plan {
    flex: 1; text-align: center; padding: 7px 4px;
    border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
    font-size: .75rem; color: var(--gris-muted);
}
.ds2-plan--on { border-color: var(--or); color: var(--or); background: var(--or-dim); }
.ds2-cta {
    width: 100%; text-align: center; background: var(--or); color: #111;
    font-weight: 700; font-size: .875rem; padding: 10px;
    border-radius: 6px; opacity: 0;
}
.dp-screen--active .ds2-cta { animation: dpFadeUp .4s 1s forwards; }

/* ── Slide 3 : Vitrine ───────────────────────────────────── */
.ds3 { width: 100%; max-width: 460px; }
.ds3-url-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: .78rem;
}
.ds3-url { color: #8ab4f8; }
.ds3-live { color: var(--vert); font-size: .72rem; font-weight: 600; }
.ds3-score { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .8rem; color: var(--gris-muted); }
.ds3-track { flex: 1; height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.ds3-fill  { height: 100%; background: var(--or); border-radius: 3px; width: 0; }
.dp-screen--active .ds3-fill { animation: ds3Fill 1.4s .3s forwards; }
@keyframes ds3Fill { to { width: 84%; } }
.ds3-num { color: var(--or); font-weight: 700; font-size: .9rem; width: 34px; text-align: right; }
.ds3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ds3-chip {
    font-size: .72rem; background: var(--surface);
    border: 1px solid rgba(255,255,255,.08); border-radius: 4px;
    padding: 3px 8px; color: var(--gris-soft);
    opacity: 0;
}
.dp-screen--active .ds3-chip:nth-child(1) { animation: dpFadeUp .3s .5s forwards; }
.dp-screen--active .ds3-chip:nth-child(2) { animation: dpFadeUp .3s .7s forwards; }
.dp-screen--active .ds3-chip:nth-child(3) { animation: dpFadeUp .3s .9s forwards; }
.dp-screen--active .ds3-chip:nth-child(4) { animation: dpFadeUp .3s 1.1s forwards; }
.dp-screen--active .ds3-chip:nth-child(5) { animation: dpFadeUp .3s 1.3s forwards; }
.ds3-seo {
    font-size: .75rem; color: var(--or); background: var(--or-dim);
    border: 1px solid var(--or-border); border-radius: 4px;
    padding: 5px 12px; text-align: center; opacity: 0;
}
.dp-screen--active .ds3-seo { animation: dpFadeUp .4s 1.55s forwards; }

/* ── Slide 4 : Lead ──────────────────────────────────────── */
.ds4 { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 380px; }
.ds4-notif {
    width: 100%;
    background: var(--surface); border: 1px solid var(--or-border);
    border-radius: 12px; padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    opacity: 0; transform: translateY(-16px);
}
.dp-screen--active .ds4-notif { animation: ds4Drop .45s .3s forwards; }
@keyframes ds4Drop { to { opacity: 1; transform: none; } }
.ds4-icon  { font-size: 1.4rem; }
.ds4-notif strong { display: block; font-size: .875rem; color: var(--blanc); }
.ds4-notif span   { font-size: .78rem; color: var(--gris-muted); }
.ds4-card {
    width: 100%;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px; padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    opacity: 0;
}
.dp-screen--active .ds4-card { animation: dpFadeUp .4s .85s forwards; }
.ds4-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--or); flex-shrink: 0; }
.ds4-info strong { display: block; font-size: .875rem; color: var(--blanc); }
.ds4-info span   { font-size: .77rem; color: var(--gris-muted); }
.ds4-badge { font-size: .68rem; font-weight: 700; color: #111; background: var(--or); border-radius: 4px; padding: 2px 8px; }
.ds4-action {
    font-size: .8rem; color: var(--or); border: 1px solid var(--or-border);
    border-radius: 6px; padding: 6px 14px; opacity: 0;
}
.dp-screen--active .ds4-action { animation: dpFadeUp .4s 1.3s forwards; }

/* ── Slide 5 : Devis ─────────────────────────────────────── */
.ds5 { width: 100%; max-width: 380px; }
.ds5-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; font-size: .95rem; font-weight: 600; color: var(--blanc);
}
.ds5-check {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--vert); display: flex; align-items: center;
    justify-content: center; color: #fff; font-size: .95rem;
    opacity: 0; transform: scale(.4);
}
.dp-screen--active .ds5-check { animation: ds5Pop .35s .3s forwards; }
@keyframes ds5Pop { to { opacity: 1; transform: scale(1); } }
.ds5-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .875rem;
}
.ds5-lbl    { color: var(--gris-muted); }
.ds5-val    { color: var(--blanc); }
.ds5-amount { color: var(--or); font-weight: 700; font-size: 1rem; }
.ds5-comm {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 16px; padding: 14px;
    background: var(--or-dim); border: 1px solid var(--or-border); border-radius: 8px;
    opacity: 0; transform: translateY(8px);
}
.dp-screen--active .ds5-comm { animation: dpFadeUp .4s .75s forwards; }
.ds5-pct { font-size: 2.2rem; font-weight: 800; color: var(--or); line-height: 1; }
.ds5-comm span { font-size: .8rem; color: var(--gris-muted); line-height: 1.4; }

/* ── Stats strip ─────────────────────────────────────────── */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin: 0;
}
.stat-item {
    padding: 36px 24px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.06);
}
.stat-item:last-child { border-right: none; }
.stat-item__num {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--or);
    line-height: 1;
    margin-bottom: 6px;
    display: block;
}
.stat-item__label { font-size: .8rem; color: var(--gris-muted); line-height: 1.4; }

/* ── Scroll reveal — visible par défaut (no-JS friendly) ───── */
[data-reveal] {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .1s; }
[data-reveal][data-delay="2"] { transition-delay: .2s; }
[data-reveal][data-delay="3"] { transition-delay: .3s; }

@media (max-width: 700px) {
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-item { border-bottom: 1px solid rgba(255,255,255,.06); }
    .stat-item:nth-child(2), .stat-item:nth-child(4) { border-right: none; }
    .stat-item__num { font-size: 1.9rem; }
    .dp-body { padding: 20px 16px; min-height: 280px; }
}

.form-error-banner{max-width:760px;margin:0 auto 18px;background:rgba(140,20,20,.18);border:1px solid rgba(255,90,90,.35);color:#ffd2d2;padding:14px 18px;border-radius:12px;}


/* ── Catalogue métiers complet ───────────────────────────── */
.metiers-families--catalog {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.metier-family--catalog {
  min-height: 100%;
  background: linear-gradient(180deg, rgba(21,21,21,.95), rgba(16,16,16,.98));
  border: 1px solid rgba(212,175,55,.16);
}
.metier-family--catalog .metier-family__label {
  font-size: .98rem;
  line-height: 1.3;
}
.metier-family--catalog .metier-family__list {
  gap: 8px;
}
.metier-family--catalog .metier-family__list li {
  font-size: .84rem;
  color: var(--gris-soft);
}
@media (max-width: 980px) {
  .metiers-families--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .metiers-families--catalog {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
  }
  .metier-family--catalog { scroll-snap-align: start; }
}


.metier-categories-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.metier-category-card{background:var(--surface);border:1px solid rgba(212,175,55,.14);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:14px;min-height:100%}
.metier-category-card__icon{font-size:28px;line-height:1}
.metier-category-card__title{margin:0;font-size:1.05rem;color:var(--blanc)}
.metier-category-card__list{margin:0;padding-left:18px;color:var(--gris-clair);display:grid;gap:8px;font-size:.92rem;line-height:1.5}
.metier-category-card__more{margin-top:auto;color:var(--or);font-size:.85rem;font-weight:600}
@media (max-width: 1024px){.metier-categories-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 680px){.metier-categories-grid{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;padding-bottom:6px}.metier-category-card{min-width:84%;scroll-snap-align:start}}
.nav__logo-mark img{border-radius:12px;background:#fff;padding:2px}
.footer__logo-img{max-height:64px}

/* ── Hero compact (pages internes) ──────────────────────────── */
.hero--sm { padding: 48px 0 36px; }
.hero--sm .hero__inner { grid-template-columns: 1fr; gap: 0; }
.hero--sm .hero__title { font-size: clamp(1.5rem, 4vw, 2.2rem); }
@media (max-width: 760px) { .hero--sm { padding: 36px 0 28px; } }

/* ── Grille de cards génériques ─────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .cards-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 540px) { .cards-grid { grid-template-columns: 1fr; } }
.card {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover { border-color: var(--or-active); box-shadow: var(--glow); }
.card__icon { font-size: 1.6rem; line-height: 1; }
.card__title { font-size: .95rem; font-weight: 600; color: var(--blanc); margin: 0; }
.card p { font-size: .875rem; color: var(--gris-soft); line-height: 1.6; margin: 0; }
.card__link { font-size: .8rem; color: var(--or); font-weight: 600; margin-top: auto; padding-top: 8px; }
.card__link:hover { color: var(--or-active); }
.card__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .875rem; color: var(--gris-soft); }
.card__list li::before { content: '✓ '; color: var(--or); font-weight: 700; }
.card--check { border-left: 3px solid var(--or); }
.card--cross .card__list li::before { content: '✗ '; color: var(--gris-muted); }

/* ── Feature list (pages annexes) ───────────────────────────── */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 40px;
    border: 1px solid var(--or-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--or-border);
    background: var(--surface-card);
    transition: background var(--transition);
}
.feature-item:last-child { border-bottom: none; }
.feature-item:hover { background: rgba(212,175,55,.04); }
.feature-item__icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
    width: 32px;
    text-align: center;
}
.feature-item__body h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--blanc);
    margin: 0 0 6px;
}
.feature-item__body p {
    font-size: .875rem;
    color: var(--gris-soft);
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 540px) {
    .feature-item { padding: 18px 16px; gap: 14px; }
}

/* ── Notice info ─────────────────────────────────────────────── */
.notice {
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: .875rem;
    line-height: 1.6;
    margin-top: 32px;
}
.notice--info {
    background: rgba(212,175,55,.08);
    border: 1px solid var(--or-border);
    color: var(--gris-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   LOT 3 — Vitrine : galerie, avis, certifications
   Préfixe : vit-*  (même espace de noms que vitrine-template.php)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Galerie chantier ────────────────────────────────────────────────────── */
.vit-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
}
@media (max-width: 720px) {
    .vit-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .vit-gallery { grid-template-columns: 1fr; }
}
.vit-gallery__item {
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    aspect-ratio: 4 / 3;
}
.vit-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.vit-gallery__item:hover .vit-gallery__img {
    transform: scale(1.04);
}

/* ── Admin galerie ───────────────────────────────────────────────────────── */
.ec-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.ec-gallery-item {
    background: var(--surface-card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    overflow: hidden;
    padding-bottom: 12px;
}
.ec-gallery-item--off { opacity: .6; }
.ec-gallery-item__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(255,255,255,.04);
    overflow: hidden;
}
.ec-gallery-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ec-gallery-item__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,.7);
    color: #aaa;
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 4px;
}
.ec-gallery-item form { padding: 0 10px; }

/* ── Avis clients (vitrine) ──────────────────────────────────────────────── */
.vit-avis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 24px;
}
@media (max-width: 560px) {
    .vit-avis-grid { grid-template-columns: 1fr; }
}
.vit-avis-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vit-avis-card__stars {
    color: #d4af37;
    font-size: 1rem;
    letter-spacing: 2px;
}
.vit-avis-card__text {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--gris-soft, #ccc);
    margin: 0;
    flex: 1;
}
.vit-avis-card__author {
    font-size: .8rem;
    color: var(--gris-muted, #888);
    margin: 0;
    font-style: italic;
}

/* ── Certifications (vitrine) ────────────────────────────────────────────── */
.vit-certs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.vit-cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    padding: 8px 16px;
    font-size: .875rem;
    transition: border-color .15s, background .15s;
}
.vit-cert-badge:hover {
    background: rgba(212,175,55,.06);
    border-color: rgba(212,175,55,.3);
}
.vit-cert-badge__icon {
    font-size: 1rem;
    line-height: 1;
}
.vit-cert-badge__label {
    color: var(--gris-soft, #ccc);
    text-decoration: none;
    font-weight: 500;
}
a.vit-cert-badge__label:hover { color: #d4af37; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   PHASE E — Landing premium
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Hero avec image de fond ───────────────────────────── */
.hero--img { padding: 120px 0 90px; min-height: 520px; }
.hero--img .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero--img .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    opacity: .35;
    filter: contrast(1.05) saturate(.85);
}
.hero--img .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10,10,10,.55) 0%,
        rgba(10,10,10,.78) 60%,
        rgba(10,10,10,.95) 100%);
    pointer-events: none;
}
.hero--img .hero__inner { position: relative; z-index: 1; }
.hero__inner--single { grid-template-columns: 1fr; max-width: 880px; }

@media (max-width: 700px) {
    .hero--img { padding: 80px 0 60px; min-height: auto; }
    .hero--img .hero__bg img { opacity: .25; }
}

/* ── 2. Proof strip / chiffres ────────────────────────────── */
.proof-strip {
    background: var(--surface);
    border-top: 1px solid var(--or-border);
    border-bottom: 1px solid var(--or-border);
    padding: 28px 0;
}
.proof-strip__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
.proof-item { display: flex; flex-direction: column; gap: 4px; }
.proof-item__num {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--or);
    line-height: 1;
}
.proof-item__lbl {
    font-size: .8rem;
    color: var(--gris-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
}
@media (max-width: 700px) {
    .proof-strip__inner { grid-template-columns: repeat(2, 1fr); }
    .proof-item__num { font-size: 1.4rem; }
}

/* ── 5. Tableau comparatif ────────────────────────────────── */
.compare-table {
    margin-top: 32px;
    border: 1px solid var(--or-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-card);
}
.compare-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    border-top: 1px solid rgba(212,175,55,.1);
}
.compare-row:first-child { border-top: 0; }
.compare-row--head {
    background: rgba(212,175,55,.06);
    font-weight: 700;
    color: var(--or);
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .05em;
}
.compare-cell {
    padding: 14px 18px;
    font-size: .9rem;
    border-left: 1px solid rgba(212,175,55,.08);
}
.compare-cell:first-child { border-left: 0; }
.compare-cell--us {
    background: rgba(212,175,55,.04);
    border-left: 1px solid var(--or-border);
}
.cmp-yes { color: var(--or); font-weight: 600; }
.cmp-yes::before { content: '✓ '; }
.cmp-no { color: #888; }
.cmp-no::before { content: '— '; }
.compare-note {
    text-align: center;
    margin-top: 18px;
    font-size: .85rem;
    color: var(--gris-soft);
    font-style: italic;
}
@media (max-width: 700px) {
    .compare-row { grid-template-columns: 1fr 1fr; }
    .compare-row > .compare-cell:nth-child(2) { display: none; }
    .compare-row--head > .compare-cell:nth-child(2) { display: none; }
}

/* ── 6. Mockups back-office ───────────────────────────────── */
.mockup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 36px;
}
.mockup-card {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mockup-card__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(0,0,0,.4);
    border-bottom: 1px solid rgba(212,175,55,.1);
}
.mockup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(212,175,55,.3);
    flex-shrink: 0;
}
.mockup-dot:nth-child(1) { background: rgba(255,90,90,.5); }
.mockup-dot:nth-child(2) { background: rgba(255,200,90,.5); }
.mockup-dot:nth-child(3) { background: rgba(120,220,140,.5); }
.mockup-url {
    flex: 1;
    font-family: monospace;
    font-size: .7rem;
    color: var(--gris-soft);
    background: rgba(212,175,55,.05);
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mockup-card__body { padding: 18px; flex: 1; }
.mockup-row--title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--or);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mockup-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.mockup-stat {
    background: rgba(212,175,55,.05);
    border: 1px solid rgba(212,175,55,.15);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}
.mockup-stat__num {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--or);
}
.mockup-stat__lbl {
    display: block;
    font-size: .65rem;
    color: var(--gris-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}
.mockup-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 56px;
    padding: 6px 4px;
    border-top: 1px dashed rgba(212,175,55,.15);
}
.mockup-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--or) 0%, rgba(212,175,55,.4) 100%);
    border-radius: 2px 2px 0 0;
    min-height: 4px;
}
.mockup-list { display: flex; flex-direction: column; gap: 8px; }
.mockup-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(212,175,55,.08);
    border-radius: 6px;
}
.mockup-pill {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 12px;
    flex-shrink: 0;
    letter-spacing: .03em;
}
.mockup-pill--new { background: rgba(212,175,55,.18); color: var(--or); }
.mockup-pill--mid { background: rgba(120,160,255,.15); color: #9ab5ff; }
.mockup-pill--ok  { background: rgba(120,220,140,.15); color: #8fde9d; }
.mockup-list-text {
    font-size: .8rem;
    color: var(--gris-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mockup-doc { display: flex; flex-direction: column; gap: 8px; }
.mockup-doc-line {
    height: 8px;
    background: rgba(212,175,55,.12);
    border-radius: 3px;
}
.mockup-doc-line--90 { width: 90%; }
.mockup-doc-line--80 { width: 80%; }
.mockup-doc-line--70 { width: 70%; }
.mockup-doc-line--60 { width: 60%; }
.mockup-doc-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--or-border);
    font-size: .85rem;
    font-weight: 700;
    color: var(--or);
}
.mockup-doc-total__num { font-size: 1rem; }
.mockup-card__caption {
    padding: 10px 18px;
    margin: 0;
    font-size: .75rem;
    color: var(--gris-soft);
    text-align: center;
    border-top: 1px solid rgba(212,175,55,.08);
    background: rgba(0,0,0,.2);
}
.mockup-note {
    text-align: center;
    margin-top: 24px;
    font-size: .8rem;
    color: var(--gris-muted, #888);
    font-style: italic;
}
@media (max-width: 900px) {
    .mockup-grid { grid-template-columns: 1fr; }
}

/* ── 7. Marque blanche / mini-site ────────────────────────── */
.white-label {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
}
.white-label__text p {
    font-size: 1rem;
    margin: 16px 0 20px;
    color: var(--gris-soft);
}
.white-label__list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.white-label__list li {
    padding-left: 26px;
    position: relative;
    font-size: .92rem;
    color: var(--gris-soft);
}
.white-label__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--or);
    font-weight: 700;
}
.white-label__img {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--or-border);
    box-shadow: var(--glow);
}
.white-label__img img {
    display: block;
    width: 100%;
    height: auto;
}
.section-title--left { text-align: left; }
@media (max-width: 900px) {
    .white-label { grid-template-columns: 1fr; gap: 28px; }
}

/* ── 8. Mobile chantier (frame iPhone) ────────────────────── */
.mobile-chantier {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 48px;
    align-items: center;
}
.mobile-chantier__phone {
    display: flex;
    justify-content: center;
}
.phone-frame {
    width: 240px;
    height: 480px;
    border: 8px solid #1a1a1a;
    border-radius: 38px;
    background: #0a0a0a;
    box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px var(--or-border);
    position: relative;
    overflow: hidden;
}
.phone-notch {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 18px;
    background: #1a1a1a;
    border-radius: 12px;
    z-index: 2;
}
.phone-screen {
    height: 100%;
    background: linear-gradient(160deg, #111 0%, #0a0a0a 100%);
    padding: 28px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.phone-bar {
    display: flex;
    justify-content: space-between;
    font-size: .55rem;
    color: var(--gris-soft);
    margin-bottom: 6px;
    padding: 0 6px;
}
.phone-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.phone-logo {
    font-size: .55rem;
    font-weight: 700;
    color: var(--or);
    letter-spacing: .1em;
    text-align: center;
    padding: 8px;
    border: 1px dashed var(--or-border);
    border-radius: 4px;
}
.phone-h1 {
    height: 14px;
    background: rgba(212,175,55,.18);
    border-radius: 3px;
    margin: 4px 0;
}
.phone-line {
    height: 5px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
}
.phone-line--80 { width: 80%; }
.phone-line--70 { width: 70%; }
.phone-line--60 { width: 60%; }
.phone-line--50 { width: 50%; }
.phone-cta {
    background: var(--or);
    color: #111;
    font-size: .65rem;
    font-weight: 700;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    margin: 6px 0;
}
.phone-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 4px 0;
}
.phone-card-mini {
    height: 40px;
    background: rgba(212,175,55,.05);
    border: 1px solid rgba(212,175,55,.15);
    border-radius: 4px;
}
.mobile-chantier__list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-chantier__list li {
    padding-left: 26px;
    position: relative;
    font-size: .92rem;
    color: var(--gris-soft);
}
.mobile-chantier__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--or);
    font-weight: 700;
}
@media (max-width: 900px) {
    .mobile-chantier { grid-template-columns: 1fr; gap: 28px; }
    .mobile-chantier__phone { order: 2; }
}

/* ── 9. Features grid ─────────────────────────────────────── */
.features-grid {
    list-style: none;
    padding: 0;
    margin: 36px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.feature-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-radius: 8px;
    transition: border-color .15s, transform .15s;
}
.feature-tile:hover {
    border-color: var(--or);
    transform: translateY(-1px);
}
.feature-tile__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.feature-tile__lbl {
    font-size: .85rem;
    color: var(--gris-soft);
}
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .features-grid { grid-template-columns: 1fr; } }

/* ── 11. Témoignages ──────────────────────────────────────── */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 32px;
}
.testi-card {
    background: var(--surface-card);
    border: 1px solid var(--or-border);
    border-left: 3px solid var(--or);
    border-radius: 8px;
    padding: 22px;
    margin: 0;
}
.testi-card blockquote {
    margin: 0 0 12px;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--blanc);
    font-style: italic;
}
.testi-card figcaption {
    font-size: .8rem;
    color: var(--or);
    font-weight: 600;
}
.testi-note {
    text-align: center;
    margin-top: 18px;
    font-size: .75rem;
    color: var(--gris-muted, #888);
    font-style: italic;
}
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }

/* ── Showcase Section Enhancements ────────────────────────── */
.showcase-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}
.showcase-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 20px rgba(212,175,55,0.1);
}
.showcase-img {
    transition: filter 0.4s ease;
    filter: grayscale(20%) brightness(0.9);
}
.showcase-card:hover .showcase-img {
    filter: grayscale(0%) brightness(1.1);
}

@media (max-width: 768px) {
    .hero__inner { flex-direction: column; text-align: center; }
    .hero__mockup { display: none; }
    .cards-grid { grid-template-columns: 1fr; }
}

/* ── Section Deep Dive Admin ── */
.admin-deep-dive {
    padding: 60px 0;
    border-top: 1px solid rgba(212,175,55,0.1);
}
.adm-features-grid {
    margin-top: 50px;
}
.adm-feat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 30px;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.adm-feat-card:hover {
    background: rgba(212, 175, 55, 0.04);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-8px);
}
.adm-feat-card:hover .adm-feat-icon {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
}
.adm-feat-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: inline-block;
    transition: transform 0.4s ease;
}
.adm-feat-card h3 {
    font-size: 1.25rem;
    color: var(--blanc);
    margin-bottom: 12px;
    font-weight: 700;
}
.adm-feat-card p {
    font-size: 0.95rem;
    color: var(--gris-muted);
    line-height: 1.6;
    margin: 0;
}
.adm-feat-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle at top right, rgba(212,175,55,0.1), transparent);
    pointer-events: none;
}
/* ── FAQ Premium ─────────────────────────────────────────── */
.faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}
.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.faq-item[open] {
    background: rgba(212, 175, 55, 0.03);
    border-color: rgba(212, 175, 55, 0.2);
}
.faq-item summary {
    padding: 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--blanc);
    transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item:hover summary { color: var(--or); }
.faq-chevron {
    font-size: 0.8rem;
    color: var(--or);
    transition: transform 0.3s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
    padding: 0 20px 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gris-soft);
}
@media (max-width: 900px) {
    .faq-list { grid-template-columns: 1fr; }
}