/*
 Theme Name:   GED Cabinet Theme
 Theme URI:    https://github.com/copyserve/ged-cabinet-wordpress
 Description:  Thème minimaliste qui sert de conteneur à la SPA React GED Cabinet.
 Author:       Copyserve
 Author URI:   https://copyserve.com
 Version:      1.0.0
 License:      Proprietary
 Text Domain:  ged-cabinet-theme
*/

/* ════════════════════════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    -webkit-font-smoothing: antialiased;
}

/* SPA container */
#ged-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#ged-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 1rem;
    color: #64748b;
}

/* ════════════════════════════════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════════════════════════════════ */

:root {
    --blue:   #0f4c81;
    --teal:   #0f766e;
    --purple: #7c3aed;
    --dark:   #0d1b2e;
    --text:   #0f172a;
    --muted:  #64748b;
    --border: #e2e8f0;
    --bg:     #f8fafc;
    --white:  #ffffff;
    --radius: 12px;
    --w:      min(1180px, calc(100% - 32px));
}

/* ════════════════════════════════════════════════════════════════════════
   BOUTONS
════════════════════════════════════════════════════════════════════════ */

.ged-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: background .15s, box-shadow .15s, color .15s, border-color .15s;
    cursor: pointer;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.ged-btn--primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
.ged-btn--primary:hover { background: #0a3a63; }

.ged-btn--outline {
    background: #fff;
    color: var(--blue);
    border-color: var(--border);
}
.ged-btn--outline:hover { background: var(--bg); }

.ged-btn--white {
    background: #fff;
    color: #0f172a;
    border-color: #fff;
}
.ged-btn--white:hover { background: #f1f5f9; }

.ged-btn--outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.4);
}
.ged-btn--outline-white:hover { border-color: rgba(255,255,255,.7); }

.ged-btn--lg { padding: 14px 24px; font-size: .95rem; }

/* ════════════════════════════════════════════════════════════════════════
   MAIN WRAPPER
════════════════════════════════════════════════════════════════════════ */

.ged-home {
    min-height: 100vh;
    background: var(--white);
    color: var(--text);
}

/* ════════════════════════════════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════════════════════════════════ */

.ged-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.ged-nav-inner {
    width: var(--w);
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ged-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.ged-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: .78rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.ged-brand-text strong {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
}

.ged-brand-text small {
    display: block;
    font-size: .75rem;
    color: var(--muted);
    margin-top: 1px;
}

.ged-nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ged-nav-links a {
    text-decoration: none;
    font-size: .9rem;
    color: #475569;
    transition: color .15s;
}
.ged-nav-links a:hover { color: var(--text); }

.ged-nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ════════════════════════════════════════════════════════════════════════
   PILL (hero badge)
════════════════════════════════════════════════════════════════════════ */

.ged-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: #1d4ed8;
    margin-bottom: 24px;
}

.ged-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════════════ */

.ged-hero {
    position: relative;
    overflow: hidden;
}

.ged-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 50%, #eef2ff 100%);
    pointer-events: none;
}

.ged-hero-inner {
    position: relative;
    width: var(--w);
    margin: 0 auto;
    padding: 80px 0 96px;
    display: grid;
    grid-template-columns: 1fr minmax(340px, 480px);
    gap: 56px;
    align-items: center;
}

.ged-hero-logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1d4ed8, #0f4c81);
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    box-shadow: 0 16px 40px rgba(15,76,129,.3);
}

.ged-hero-copy h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 20px;
}

.ged-hero-copy h1 em {
    font-style: normal;
    color: #1d4ed8;
}

.ged-hero-lead {
    font-size: 1.1rem;
    line-height: 1.75;
    color: #475569;
    max-width: 560px;
    margin-bottom: 32px;
}

.ged-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.ged-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    max-width: 480px;
}

.ged-stat {
    padding: 14px 20px;
    border-right: 1px solid var(--border);
    text-align: center;
}
.ged-stat:last-child { border-right: none; }

.ged-stat strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: #1d4ed8;
}

.ged-stat span {
    display: block;
    font-size: .72rem;
    color: var(--muted);
    margin-top: 3px;
}

/* ─── Mockup ─────────────────────────────────────────────────────────── */

.ged-mockup {
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 32px 80px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
    overflow: hidden;
}

.ged-mockup-chrome {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--border);
}

.ged-mockup-chrome > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}

.ged-mockup-url {
    margin-left: 10px;
    flex: 1;
    height: 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .72rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    padding: 0 10px;
    max-width: 240px;
}

.ged-mockup-app {
    display: grid;
    grid-template-columns: 130px 1fr;
}

.ged-mockup-sidebar {
    background: #f8fafc;
    border-right: 1px solid var(--border);
    padding: 14px 10px;
    min-height: 280px;
}

.ged-mockup-brand {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: .72rem;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.ged-mockup-nav {
    font-size: .73rem;
    color: var(--muted);
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ged-mockup-nav--active {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 700;
}

.ged-mockup-content {
    padding: 14px;
}

.ged-mockup-header {
    margin-bottom: 12px;
}

.ged-mockup-header strong {
    display: block;
    font-size: .85rem;
    color: var(--text);
}

.ged-mockup-header small {
    font-size: .72rem;
    color: var(--muted);
}

.ged-mockup-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.ged-mockup-stat {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 8px;
}

.ged-mockup-stat small {
    display: block;
    font-size: .66rem;
    color: var(--muted);
}

.ged-mockup-stat strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--blue);
    margin-top: 3px;
}

.ged-mockup-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ged-mockup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
    color: #334155;
    padding: 7px 8px;
    background: #f8fafc;
    border-radius: 7px;
    border: 1px solid var(--border);
}

.ged-mockup-row span:nth-child(2) { flex: 1; }

/* Dots */
.ged-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ged-dot--blue   { background: #3b82f6; }
.ged-dot--teal   { background: #14b8a6; }
.ged-dot--purple { background: #8b5cf6; }

/* Tags */
.ged-tag {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    background: #dbeafe;
    color: #1d4ed8;
    flex-shrink: 0;
}
.ged-tag--green  { background: #d1fae5; color: #065f46; }
.ged-tag--amber  { background: #fef3c7; color: #92400e; }

/* ════════════════════════════════════════════════════════════════════════
   SECTIONS COMMUNES
════════════════════════════════════════════════════════════════════════ */

.ged-section {
    padding: 88px 0;
}

.ged-section--alt {
    background: var(--bg);
}

.ged-section--dark {
    background: var(--dark);
    color: #e2e8f0;
    border-radius: 20px;
    margin: 0 16px;
}

.ged-section-inner {
    width: var(--w);
    margin: 0 auto;
}

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

.ged-section-header h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--text);
    margin-bottom: 14px;
    line-height: 1.15;
}

.ged-section-header p {
    color: var(--muted);
    line-height: 1.7;
    font-size: 1rem;
}

/* ════════════════════════════════════════════════════════════════════════
   FEATURES GRID
════════════════════════════════════════════════════════════════════════ */

.ged-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ged-feature-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    transition: border-color .15s, box-shadow .15s;
}

.ged-feature-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 24px rgba(15,23,42,.07);
}

.ged-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}

.ged-feature-icon svg { width: 22px; height: 22px; }

.ged-feature-icon--blue   { background: #eff6ff; color: #1d4ed8; }
.ged-feature-icon--indigo { background: #eef2ff; color: #4338ca; }
.ged-feature-icon--violet { background: #f5f3ff; color: #7c3aed; }
.ged-feature-icon--teal   { background: #f0fdfa; color: #0f766e; }
.ged-feature-icon--amber  { background: #fffbeb; color: #b45309; }
.ged-feature-icon--orange { background: #fff7ed; color: #c2410c; }
.ged-feature-icon--rose   { background: #fff1f2; color: #be123c; }
.ged-feature-icon--sky    { background: #f0f9ff; color: #0369a1; }

.ged-feature-card h3 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.ged-feature-card p {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════════
   ROLES / ESPACES
════════════════════════════════════════════════════════════════════════ */

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

.ged-role-card {
    border-radius: 24px;
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.ged-role-card--blue {
    background: linear-gradient(135deg, #1d4ed8, #0f4c81);
    color: #fff;
}

.ged-role-bg {
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image: linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.ged-role-card--teal {
    background: #f0fdfa;
    border: 1px solid #99f6e4;
}

.ged-role-card--amber {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.ged-role-body {
    position: relative;
}

.ged-role-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    background: rgba(255,255,255,.15);
    color: #fff;
}

.ged-role-icon svg { width: 22px; height: 22px; }

.ged-role-icon--teal  { background: #ccfbf1; color: #0f766e; }
.ged-role-icon--amber { background: #fef3c7; color: #b45309; }

.ged-role-kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: rgba(255,255,255,.65);
}

.ged-role-kicker--teal  { color: #0f766e; }
.ged-role-kicker--amber { color: #b45309; }

.ged-role-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 16px;
    color: inherit;
}

.ged-role-card--teal h3,
.ged-role-card--amber h3 {
    color: var(--text);
}

.ged-role-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ged-role-list li {
    font-size: .85rem;
    line-height: 1.4;
    padding-left: 18px;
    position: relative;
    color: rgba(255,255,255,.85);
}

.ged-role-card--teal .ged-role-list li,
.ged-role-card--amber .ged-role-list li {
    color: #475569;
}

.ged-role-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
}

.ged-role-card--teal .ged-role-list li::before  { background: #14b8a6; }
.ged-role-card--amber .ged-role-list li::before { background: #f59e0b; }

/* ════════════════════════════════════════════════════════════════════════
   AGENT IA
════════════════════════════════════════════════════════════════════════ */

.ged-section--dark .ged-section-inner {
    width: var(--w);
    margin: 0 auto;
}

.ged-ai-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    margin-bottom: 40px;
}

.ged-ai-tag {
    display: inline-block;
    background: var(--purple);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 6px 14px;
    margin-bottom: 24px;
}

.ged-ai-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 10px;
}

.ged-ai-subtitle {
    font-size: 1.1rem;
    color: #a78bfa;
    margin-bottom: 18px;
}

.ged-ai-desc {
    color: #94a3b8;
    line-height: 1.7;
    font-size: .95rem;
    margin-bottom: 28px;
    max-width: 460px;
}

.ged-ai-langs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ged-ai-lang {
    background: #1a2d45;
    border-radius: 10px;
    padding: 16px 12px;
    border-top: 3px solid transparent;
}

.ged-ai-lang--blue   { border-top-color: #3b82f6; }
.ged-ai-lang--purple { border-top-color: var(--purple); }
.ged-ai-lang--teal   { border-top-color: #06b6d4; }

.ged-ai-lang strong {
    display: block;
    color: #f1f5f9;
    font-size: .88rem;
    margin-bottom: 4px;
}

.ged-ai-lang span {
    color: #64748b;
    font-size: .75rem;
}

.ged-ai-features {
    list-style: none;
    display: grid;
    gap: 18px;
    align-content: start;
}

.ged-ai-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ged-ai-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    border-radius: 50%;
    background: var(--purple);
    margin-top: 4px;
    flex-shrink: 0;
}

.ged-ai-features strong {
    display: block;
    color: #f1f5f9;
    font-size: .88rem;
    margin-bottom: 3px;
}

.ged-ai-features p {
    color: #94a3b8;
    font-size: .82rem;
    line-height: 1.55;
}

.ged-ai-claim {
    background: #6d28d9;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    border-radius: 10px;
    padding: 16px 22px;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   SÉCURITÉ
════════════════════════════════════════════════════════════════════════ */

.ged-security-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ged-security-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    transition: border-color .15s, box-shadow .15s;
}

.ged-security-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 24px rgba(15,23,42,.07);
}

.ged-security-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}

.ged-security-icon svg { width: 22px; height: 22px; }

.ged-security-icon--blue   { background: #eff6ff; color: #1d4ed8; }
.ged-security-icon--teal   { background: #f0fdfa; color: #0f766e; }
.ged-security-icon--violet { background: #f5f3ff; color: #7c3aed; }
.ged-security-icon--sky    { background: #f0f9ff; color: #0369a1; }

.ged-security-card h3 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.ged-security-card p {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════════
   CTA
════════════════════════════════════════════════════════════════════════ */

.ged-cta {
    padding: 88px 0;
    background: var(--white);
}

.ged-cta-inner {
    width: min(760px, var(--w));
    margin: 0 auto;
    text-align: center;
    background: #0f172a;
    border-radius: 28px;
    padding: 56px 48px;
    color: #fff;
}

.ged-cta-inner h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.15;
}

.ged-cta-inner p {
    color: #94a3b8;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 32px;
}

.ged-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════════════════ */

.ged-footer {
    border-top: 1px solid var(--border);
    background: var(--white);
    padding: 32px 0;
}

.ged-footer-inner {
    width: var(--w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ged-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ged-footer-brand strong {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
}

.ged-footer-brand small {
    font-size: .74rem;
    color: var(--muted);
}

.ged-footer-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ged-footer-nav a {
    font-size: .82rem;
    color: var(--muted);
    text-decoration: none;
    transition: color .15s;
}

.ged-footer-nav a:hover { color: var(--text); }

.ged-footer-copy {
    font-size: .78rem;
    color: #94a3b8;
    width: 100%;
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

/* ════════════════════════════════════════════════════════════════════════
   DROPDOWN CONNEXION
════════════════════════════════════════════════════════════════════════ */

.ged-login-dropdown {
    position: relative;
}

.ged-login-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

.ged-login-chevron {
    transition: transform .15s ease;
}

.ged-login-dropdown.open .ged-login-chevron {
    transform: rotate(180deg);
}

.ged-login-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 230px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(15,23,42,.13);
    overflow: hidden;
    z-index: 200;
    padding: 4px 0;
}

.ged-login-dropdown.open .ged-login-menu {
    display: block;
}

.ged-login-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text);
    transition: background .1s;
}

.ged-login-item:hover { background: #f8fafc; }

.ged-login-item strong {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
}

.ged-login-item small {
    display: block;
    font-size: .74rem;
    color: var(--muted);
    margin-top: 1px;
    font-weight: 400;
}

.ged-login-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.ged-login-icon svg {
    width: 18px;
    height: 18px;
}

.ged-login-icon--blue  { background: #eff6ff; color: #1d4ed8; }
.ged-login-icon--teal  { background: #f0fdfa; color: #0f766e; }
.ged-login-icon--amber { background: #fffbeb; color: #b45309; }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablette
════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1020px) {
    .ged-features-grid,
    .ged-security-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ged-hero-inner {
        grid-template-columns: 1fr;
    }

    .ged-mockup {
        max-width: 540px;
    }

    .ged-hero-stats {
        max-width: 100%;
    }
}

@media (max-width: 860px) {
    .ged-nav-links {
        display: none;
    }

    .ged-ai-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .ged-roles-grid {
        grid-template-columns: 1fr;
    }

    .ged-section--dark {
        margin: 0;
        border-radius: 0;
    }

    .ged-cta-inner {
        padding: 40px 24px;
    }
}

@media (max-width: 600px) {
    .ged-features-grid,
    .ged-security-grid {
        grid-template-columns: 1fr;
    }

    .ged-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ged-stat { border-bottom: 1px solid var(--border); }
    .ged-stat:nth-child(odd) { border-right: 1px solid var(--border); }
    .ged-stat:last-child,
    .ged-stat:nth-last-child(2) { border-bottom: none; }

    .ged-ai-langs {
        grid-template-columns: 1fr;
    }

    .ged-hero-copy h1 {
        font-size: 2.1rem;
    }

    .ged-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   CABINET MANÈS LOUIS — Page publique (cml-*)
   Palette : navy #1b2a4a · gold #c9a84c · cream #f5f3ee
════════════════════════════════════════════════════════════════════════ */

:root {
    --cml-navy:   #1b2a4a;
    --cml-navy2:  #243558;
    --cml-gold:   #c9a84c;
    --cml-gold2:  #b8933a;
    --cml-cream:  #f5f3ee;
    --cml-white:  #ffffff;
    --cml-text:   #1b2a4a;
    --cml-muted:  #6b7a99;
    --cml-border: #ddd9d0;
    --cml-w:      min(1160px, calc(100% - 40px));
    --cml-r:      10px;
}

.cml-site {
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--cml-text);
}

/* ── NAV ───────────────────────────────────────────────────────────── */

.cml-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(27, 42, 74, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(201, 168, 76, .2);
}

.cml-nav-inner {
    width: var(--cml-w);
    margin: 0 auto;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cml-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.cml-brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cml-brand-text strong {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
}

.cml-brand-text small {
    display: block;
    font-size: .71rem;
    color: rgba(201, 168, 76, .8);
    margin-top: 1px;
}

.cml-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    justify-content: center;
}

.cml-nav-links a {
    text-decoration: none;
    font-size: .875rem;
    color: rgba(255,255,255,.75);
    transition: color .15s;
    white-space: nowrap;
}
.cml-nav-links a:hover { color: var(--cml-gold); }

.cml-nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cml-lang-switch {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    background: rgba(255,255,255,.05);
}

.cml-lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    font-size: .72rem;
    font-weight: 800;
    color: rgba(255,255,255,.68);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.cml-lang-switch a:hover,
.cml-lang-switch a.is-active {
    background: var(--cml-gold);
    color: var(--cml-navy);
}

/* ── BOUTONS ─────────────────────────────────────────────────────────── */

.cml-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--cml-r);
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    transition: background .15s, box-shadow .15s, color .15s, border-color .15s;
    cursor: pointer;
    border: 1.5px solid transparent;
    white-space: nowrap;
    font-family: inherit;
}

.cml-btn--primary {
    background: var(--cml-gold);
    color: var(--cml-navy);
    border-color: var(--cml-gold);
}
.cml-btn--primary:hover { background: var(--cml-gold2); border-color: var(--cml-gold2); }

.cml-btn--gold {
    background: var(--cml-gold);
    color: var(--cml-navy);
    border-color: var(--cml-gold);
    font-weight: 700;
}
.cml-btn--gold:hover { background: var(--cml-gold2); border-color: var(--cml-gold2); box-shadow: 0 4px 18px rgba(201,168,76,.35); }

.cml-btn--ghost {
    background: transparent;
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.3);
}
.cml-btn--ghost:hover { border-color: rgba(255,255,255,.6); color: #fff; }

.cml-btn--ghost-dark {
    background: transparent;
    color: var(--cml-navy);
    border-color: var(--cml-border);
}
.cml-btn--ghost-dark:hover { background: var(--cml-cream); }

.cml-btn--full {
    width: 100%;
    justify-content: center;
}

/* ── DROPDOWN ESPACE CLIENT ──────────────────────────────────────────── */

.cml-client-dropdown {
    position: relative;
}

.cml-client-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(201,168,76,.35);
    border-radius: var(--cml-r);
    color: rgba(255,255,255,.9);
    font-size: .875rem;
    font-weight: 600;
    padding: 9px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.cml-client-trigger:hover {
    background: rgba(255,255,255,.18);
    border-color: var(--cml-gold);
}

.cml-chevron {
    transition: transform .2s ease;
}
.cml-client-dropdown.open .cml-chevron {
    transform: rotate(180deg);
}

.cml-client-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 260px;
    background: #fff;
    border: 1px solid #e4ddd0;
    border-radius: 14px;
    box-shadow: 0 20px 56px rgba(27,42,74,.18);
    overflow: hidden;
    z-index: 300;
}
.cml-client-dropdown.open .cml-client-menu {
    display: block;
}

.cml-client-menu-header {
    padding: 10px 16px 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cml-muted);
    border-bottom: 1px solid #f0ebe3;
}

.cml-client-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--cml-text);
    transition: background .1s;
}
.cml-client-item:hover { background: #faf8f4; }

.cml-client-item strong {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--cml-navy);
}
.cml-client-item small {
    display: block;
    font-size: .73rem;
    color: var(--cml-muted);
    margin-top: 1px;
}

.cml-client-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 800;
    flex-shrink: 0;
}
.cml-client-icon--navy  { background: #e8ecf4; color: var(--cml-navy); }
.cml-client-icon--teal  { background: #e6f7f5; color: #0d6e6a; }
.cml-client-icon--amber { background: #fef4e0; color: #a0720a; }

/* ── HERO ────────────────────────────────────────────────────────────── */

.cml-hero {
    position: relative;
    background: var(--cml-navy);
    overflow: hidden;
    padding-bottom: 0;
}

.cml-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201,168,76,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.06) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
}

.cml-hero-glow {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 65%);
    pointer-events: none;
}

.cml-hero-inner {
    position: relative;
    width: var(--cml-w);
    margin: 0 auto;
    padding: 96px 0 80px;
    max-width: 760px;
    text-align: center;
}

.cml-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cml-gold);
    margin-bottom: 28px;
}

.cml-kicker-line {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--cml-gold);
    opacity: .6;
}

.cml-hero-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.6rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 24px;
    letter-spacing: -.01em;
}
.cml-hero-title em {
    font-style: italic;
    color: var(--cml-gold);
}

.cml-hero-lead {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255,255,255,.72);
    max-width: 620px;
    margin: 0 auto 36px;
}

.cml-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.cml-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.cml-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(201,168,76,.2);
    font-size: .78rem;
    color: rgba(255,255,255,.75);
}
.cml-badge span { color: var(--cml-gold); }

.cml-hero-wave {
    margin-top: 48px;
    line-height: 0;
}
.cml-hero-wave svg { display: block; width: 100%; height: 56px; }

/* ── SECTIONS ────────────────────────────────────────────────────────── */

.cml-section {
    padding: 88px 0;
}

.cml-section--cream  { background: var(--cml-cream); }
.cml-section--navy   { background: var(--cml-navy); color: #fff; }
.cml-section--white  { background: #fff; }

.cml-section-inner {
    width: var(--cml-w);
    margin: 0 auto;
}

.cml-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cml-gold);
    margin-bottom: 16px;
}

.cml-section-label--center {
    justify-content: center;
}

.cml-section--navy .cml-section-label {
    color: var(--cml-gold);
}

.cml-label-line {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--cml-gold);
    opacity: .7;
}

.cml-section-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--cml-navy);
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.01em;
}
.cml-section-title--white  { color: #fff; }
.cml-section-title--center { text-align: center; }

.cml-section-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #5a6a8a;
    max-width: 640px;
    margin-bottom: 48px;
}
.cml-section--navy .cml-section-lead { color: rgba(255,255,255,.65); }
.cml-section-lead--light  { color: rgba(255,255,255,.65); }
.cml-section-lead--center { text-align: center; margin-left: auto; margin-right: auto; }

/* ── SERVICES ────────────────────────────────────────────────────────── */

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

.cml-service-card {
    background: #fff;
    border: 1px solid var(--cml-border);
    border-radius: 14px;
    padding: 28px 24px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cml-service-card:hover {
    border-color: var(--cml-gold);
    box-shadow: 0 8px 32px rgba(27,42,74,.1);
    transform: translateY(-2px);
}

.cml-service-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #eef0f6;
    color: var(--cml-navy);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    transition: background .15s;
}
.cml-service-icon svg { width: 24px; height: 24px; }
.cml-service-card:hover .cml-service-icon { background: #faf4e6; color: var(--cml-gold2); }

.cml-service-card h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cml-navy);
    margin-bottom: 10px;
}
.cml-service-card p {
    font-size: .875rem;
    color: var(--cml-muted);
    line-height: 1.65;
}

/* ── PILIERS CONFIANCE ───────────────────────────────────────────────── */

.cml-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 52px;
}

.cml-pillar {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(201,168,76,.18);
    border-radius: 14px;
    padding: 28px 22px;
    transition: background .15s, border-color .15s;
}
.cml-pillar:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(201,168,76,.4);
}

.cml-pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(201,168,76,.15);
    color: var(--cml-gold);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}
.cml-pillar-icon svg { width: 22px; height: 22px; }

.cml-pillar h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .96rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.cml-pillar p {
    font-size: .84rem;
    color: rgba(255,255,255,.6);
    line-height: 1.65;
}

.cml-quote {
    border-left: 3px solid var(--cml-gold);
    padding: 20px 28px;
    background: rgba(255,255,255,.04);
    border-radius: 0 10px 10px 0;
    max-width: 680px;
    margin: 0 auto;
}
.cml-quote p {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.08rem;
    color: rgba(255,255,255,.82);
    line-height: 1.7;
    margin-bottom: 10px;
}
.cml-quote cite {
    font-size: .8rem;
    color: var(--cml-gold);
    font-style: normal;
    font-weight: 600;
}

/* ── DÉMARCHE ────────────────────────────────────────────────────────── */

.cml-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: steps;
    position: relative;
}

.cml-step {
    background: var(--cml-cream);
    border: 1px solid var(--cml-border);
    border-radius: 14px;
    padding: 28px 22px;
    position: relative;
}

.cml-step-num {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--cml-gold);
    opacity: .4;
    line-height: 1;
    margin-bottom: 14px;
}

.cml-step h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .98rem;
    font-weight: 700;
    color: var(--cml-navy);
    margin-bottom: 10px;
}
.cml-step p {
    font-size: .84rem;
    color: var(--cml-muted);
    line-height: 1.65;
}

/* ── CONTACT ─────────────────────────────────────────────────────────── */

.cml-contact-grid {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 400px);
    gap: 64px;
    align-items: start;
}

.cml-contact-left .cml-section-lead { margin-bottom: 32px; }

.cml-contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cml-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--cml-border);
    text-decoration: none;
    color: var(--cml-text);
    transition: border-color .15s, box-shadow .15s;
}
.cml-contact-item:hover { border-color: var(--cml-gold); box-shadow: 0 4px 16px rgba(27,42,74,.08); }

.cml-contact-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #eef0f6;
    color: var(--cml-navy);
    display: grid;
    place-items: center;
}
.cml-contact-icon svg { width: 18px; height: 18px; }

.cml-contact-item strong {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--cml-navy);
}
.cml-contact-item small {
    display: block;
    font-size: .8rem;
    color: var(--cml-muted);
    margin-top: 1px;
}

.cml-contact-card {
    background: var(--cml-navy);
    border-radius: 20px;
    padding: 32px 28px;
    color: #fff;
}

.cml-contact-card-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.cml-contact-card-brand strong {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .96rem;
    font-weight: 700;
    color: #fff;
}
.cml-contact-card-brand small {
    display: block;
    font-size: .72rem;
    color: rgba(201,168,76,.8);
    margin-top: 2px;
}

.cml-contact-card-sep {
    border: none;
    border-top: 1px solid rgba(255,255,255,.12);
    margin: 0 0 20px;
}

.cml-contact-card p {
    font-size: .88rem;
    color: rgba(255,255,255,.65);
    line-height: 1.7;
    margin-bottom: 24px;
}

.cml-contact-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.cml-contact-card-hours {
    text-align: center;
    font-size: .76rem;
    color: rgba(255,255,255,.4);
    margin-bottom: 0 !important;
}

/* ── FOOTER ──────────────────────────────────────────────────────────── */

.cml-footer {
    background: #111d33;
    color: rgba(255,255,255,.7);
    padding: 64px 0 32px;
}

.cml-footer-inner {
    width: var(--cml-w);
    margin: 0 auto;
}

.cml-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.cml-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cml-footer-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(201,168,76,.12);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cml-footer-brand strong {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .96rem;
    font-weight: 700;
    color: #fff;
}

.cml-footer-brand small {
    display: block;
    font-size: .72rem;
    color: rgba(201,168,76,.75);
    margin-top: 1px;
}

.cml-footer-brand div { display: flex; flex-direction: column; }

.cml-footer-brand p {
    font-size: .83rem;
    line-height: 1.65;
    color: rgba(255,255,255,.45);
    max-width: 280px;
}

.cml-footer h4 {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 14px;
}

.cml-footer ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cml-footer ul li {
    font-size: .84rem;
    color: rgba(255,255,255,.5);
}

.cml-footer ul a {
    text-decoration: none;
    color: rgba(255,255,255,.5);
    transition: color .15s;
}
.cml-footer ul a:hover { color: var(--cml-gold); }

.cml-footer-sep {
    border: none;
    border-top: 1px solid rgba(255,255,255,.08);
    margin: 0 0 24px;
}

.cml-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: .78rem;
    color: rgba(255,255,255,.35);
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Cabinet Manès Louis
════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1060px) {
    .cml-pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .cml-services-grid { grid-template-columns: repeat(2, 1fr); }
    .cml-footer-grid { grid-template-columns: 1fr 1fr; }
    .cml-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .cml-nav-links { display: none; }
    .cml-contact-grid { grid-template-columns: 1fr; gap: 36px; }
    .cml-contact-card { order: -1; }
    .cml-hero-inner { padding: 72px 0 60px; }
}

@media (max-width: 640px) {
    .cml-services-grid,
    .cml-pillars-grid,
    .cml-steps { grid-template-columns: 1fr; }
    .cml-footer-grid { grid-template-columns: 1fr; }
    .cml-hero-title { font-size: 2.2rem; }
    .cml-section { padding: 64px 0; }
    .cml-hero-badges { gap: 7px; }
    .cml-btn--full { font-size: .82rem; }
    .cml-contact-card { padding: 24px 20px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PLATEFORME NUMÉRIQUE (cml-platform-*)
════════════════════════════════════════════════════════════════════════ */

.cml-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.cml-platform-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cml-border);
    transition: box-shadow .2s, transform .2s;
}
.cml-platform-card:hover {
    box-shadow: 0 10px 36px rgba(27,42,74,.1);
    transform: translateY(-2px);
}

.cml-platform-card--teal  { border-top: 4px solid #0d9488; }
.cml-platform-card--amber { border-top: 4px solid #d97706; }

.cml-platform-card--featured {
    background: var(--cml-navy);
    border: none;
    position: relative;
    overflow: hidden;
    transform: none;
}
.cml-platform-card--featured:hover { transform: translateY(-2px); }

.cml-platform-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201,168,76,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.cml-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 20px;
    align-self: flex-start;
}
.cml-platform-badge--teal  { background: #f0fdf9; color: #0d9488; border: 1px solid #ccfbf1; }
.cml-platform-badge--gold  { background: rgba(201,168,76,.2); color: var(--cml-gold); border: 1px solid rgba(201,168,76,.35); }
.cml-platform-badge--amber { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }

.cml-platform-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.cml-platform-icon svg { width: 24px; height: 24px; }
.cml-platform-icon--teal  { background: #f0fdf9; border: 1px solid #ccfbf1; color: #0d9488; }
.cml-platform-icon--gold  { background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.25); color: var(--cml-gold); }
.cml-platform-icon--amber { background: #fffbeb; border: 1px solid #fde68a; color: #d97706; }

.cml-platform-card h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cml-navy);
    margin-bottom: 12px;
}
.cml-platform-card--featured h3 { color: #fff; }

.cml-platform-card p {
    font-size: .875rem;
    color: var(--cml-muted);
    line-height: 1.7;
    flex: 1;
}
.cml-platform-card--featured p { color: #8aa4c8; }

.cml-platform-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .15s;
    align-self: flex-start;
}
.cml-platform-cta--teal  { color: #0d9488; }
.cml-platform-cta--teal:hover  { color: #0f766e; }
.cml-platform-cta--gold  { color: var(--cml-gold); }
.cml-platform-cta--gold:hover  { color: #e0ba6a; }
.cml-platform-cta--amber { color: #d97706; }
.cml-platform-cta--amber:hover { color: #b45309; }

@media (max-width: 900px) {
    .cml-platform-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}