:root {
 /* ── Couleurs principales ── */
 --c-primary: #0a0a0a;
 --c-link: #0b5fbf;
 --c-brand: #5245fd;
 --c-highlight: #1259D9;
 --c-accent: #a433f3;
 --c-dark: #1a1a1e;
 --c-white: #fff;
 --c-black: #000;

 /* ── Couleurs de texte secondaires ── */
 --c-gray: #6b6d75;
 --c-gray-dark: #333;
 --c-gray-body: #444;
 --c-gray-muted: #555;
 --c-gray-light: #aaa;
 --c-gray-stat: #666;
 --c-gray-dim: #bbb;
 --c-gray-icon: #3a3b41;
 --c-gray-copy: #696b6f;

 /* ── Couleurs de fond ── */
 --bg-topbar: #FBFBFC;
 --bg-surface: #f4f4f8;
 --bg-section: #f8f8fb;
 --bg-card: #f5f5f5;
 --bg-warm: #f5f0e8;
 --bg-navy: #1c1f3c;

 /* ── Couleurs de bordure ── */
 --b-topbar: #d1d2d6;
 --b-outline: #ccc;
 --b-footer: #cecece;

 /* ── Couleurs de boutons et hovers ── */
 --btn-light: #e6e6e6;
 --btn-medium: #e0e0e0;
 --hover-light: #d8d8d8;
 --hover-medium: #d0d0d0;

 /* ── Couleurs spéciales ── */
 --c-purple: #c084fc;
 --overlay-bg: rgba(0, 0, 0, 0.45);
 --footer-link: rgba(0, 0, 0, 0.54);
 --footer-link-hover: rgba(0, 0, 0, 0.86);
 --cta-light-border: #fff;

 /* ── Tailles de texte ── */
 --fs-xs: 12px;
 --fs-sm: 14px;
 --fs-base: 17px;
 --fs-md: 19px;

 /* ── Tailles responsives — Titres de page ── */
 --fs-hero-title: 96px;
 --fs-section-h2: 72px;
 --fs-section-subtitle: 32px;

 /* ── Tailles responsives — Statistiques ── */
 --fs-stat-num: 88px;
 --fs-stat-suffix: 52px;
 --fs-stat-label: 14px;

 /* ── Tailles responsives — Features & Mosaïque ── */
 --fs-feat-title: 56px;
 --fs-feat-body: 19px;
 --fs-mosaic-h: 56px;
 --fs-mosaic-icon-xl: 156px;
 --fs-mosaic-lightning: 280px;
 --fs-mosaic-pin: 310px;

 /* ── Tailles responsives — Apps & Trial ── */
 --fs-apps-title: 23px;
 --fs-apps-desc: 17px;
 --fs-trial-visual: 200px;
 --fs-trial-link: 21px;

 /* ── Tailles responsives — Modales ── */
 --fs-modal-band-sub: 22px;
 --fs-modal-band-body: 19px;
 --fs-modal-cta: 24px;
 --fs-modal-visual: 100px;
 --fs-modal-visual-lg: 150px;
 --fs-modal-visual-xl: 200px;
 --fs-modal-visual-solo: 200px;
 --fs-modal-emoji: 140px;
 --fs-modal-emoji-lg: 260px;
 --fs-hero-grid: 75px;

 /* ── Espacements de sections ── */
 --sp-section-t: 80px;
 --sp-physical-t: 96px;
 --sp-standout-t: 120px;
 --sp-standout-b: 144px;
 --sp-trial-t: 144px;
 --sp-trial-b: 144px;
 --sp-stats: 64px;
 --sp-mosaic-t: 12px;
 --sp-universe-b: 80px;
 --sp-industry-b: 60px;

 /* ── Espacements de modales ── */
 --sp-modal-close: 16px;
 --sp-modal-body-t: 76px;
 --sp-modal-body-x: calc(2 * var(--sp-modal-close) + 38px);
 --sp-modal-body-b: 76px;
 --sp-mu1-hero-t: calc(var(--sp-modal-body-t) + var(--sp-modal-close));

 /* ── Dimensions et espacements ── */
 --topbar-h: 50px;
 --container-w: 1320px;
 --mw-section: 780px;
 --mw-hero: 1050px;
 --rail-inset: max(0px, calc((100vw - var(--container-w)) / 2 + 12px));
 --hero-img-h: clamp(700px, 25vw, 900px);
 --bottom-img-h: 500px;
 --hero-offset: 448px;
 --hero-inner-h: 600px;
 --rail-card-w: 380px;
}

/* ── Reset ── */
html { overflow-x: hidden; min-width: 320px; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a, button,
a *, button * { cursor: pointer; user-select: none; }
:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ── Classes de section partagées ── */
.section-center { text-align: center; background: var(--c-white); }
.section-alt { text-align: center; background: var(--bg-section); }
body {
 font-family: 'Inter', sans-serif;
 -webkit-font-smoothing: antialiased;
 padding-top: calc(var(--topbar-h) + 30px); /* offset for fixed navbar + audience bar */
 overflow-x: hidden;
}

/* ── AUDIENCE BAR ── */
.audience-bar {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1001;
 height: 30px;
 background: #fff;
 border-bottom: 1px solid rgba(0,0,0,0.07);
 display: flex;
 align-items: center;
 justify-content: flex-end;
 padding-right: 24px;
 transition: transform 0.2s ease, opacity 0.2s ease;
}
body.scrolled .audience-bar {
 transform: translateY(-100%);
 opacity: 0;
 pointer-events: none;
}
body.scrolled .topbar {
 top: 0;
}
.audience-bar-inner {
 display: flex;
 align-items: center;
 gap: 8px;
}
.audience-label {
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.09em;
 text-transform: uppercase;
 text-decoration: none;
 line-height: 1;
}
.audience-label-off { color: var(--c-gray); }
.audience-label-on  { color: var(--c-text); }
.audience-toggle {
 width: 30px;
 height: 17px;
 background: var(--c-brand);
 border-radius: 9px;
 position: relative;
 flex-shrink: 0;
}
.audience-toggle-thumb {
 position: absolute;
 right: 2px;
 top: 50%;
 transform: translateY(-50%);
 width: 13px;
 height: 13px;
 background: #fff;
 border-radius: 50%;
}

/* ── TOPBAR ── */
.topbar {
 position: fixed;
 top: 30px;
 left: 0;
 right: 0;
 z-index: 1000;
 transition: top 0.2s ease;
 display: flex;
 align-items: center;
 height: var(--topbar-h);
 background: var(--bg-topbar);
 border-bottom: 1px solid var(--b-topbar);
}
.topbar-inner {
 position: relative;
 display: flex;
 align-items: center;
 width: 100%;
 max-width: var(--container-w);
 margin: 0 auto;
 padding: 0 24px;
}
.topbar-logo {
 display: flex;
 align-items: center;
 flex-shrink: 0;
 text-decoration: none;
 color: var(--c-black);
}
.topbar-logo:hover { opacity: 0.85; }
.topbar-logo svg { shape-rendering: geometricPrecision; }
.topbar-logo-suffix { margin-left: 3px; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--c-black); transform: translateY(1.2px); }
.topbar-nav {
 display: flex;
 align-items: center;
 gap: 16px;
 margin-left: auto;
 margin-right: 20px;
}
.topbar-nav a {
 font-size: var(--fs-xs);
 font-weight: 400;
 text-decoration: none;
 white-space: nowrap;
 color: var(--c-primary);
}
.topbar-nav a:hover { opacity: 0.85; }
.topbar-toggle {
 display: none;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 32px;
 height: 32px;
 margin-left: auto;
 margin-right: 12px;
 background: none;
 border: none;
}
.topbar-toggle:hover { opacity: 0.75; }
.topbar-toggle .bi { font-size: 22px; color: var(--c-primary); }
.topbar-toggle .topbar-toggle-open { display: none; }
.topbar-toggle.open .topbar-toggle-closed { display: none; }
.topbar-toggle.open .topbar-toggle-open { display: inline-block; }
.topbar-panel {
 position: fixed;
 top: calc(var(--topbar-h) + 30px);
 left: 0;
 right: 0;
 z-index: 999;
 overflow: hidden;
 height: 0;
 visibility: hidden;
 opacity: 0;
 background: var(--bg-topbar);
 border-bottom: 1px solid var(--b-topbar);
 transition: height 0.28s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.28s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.28s, top 0.2s ease;
}
body.scrolled .topbar-panel {
 top: var(--topbar-h);
}
.topbar-panel.open { visibility: visible; opacity: 1; }
.topbar-panel a {
 display: block;
 padding: 10px 0;
 font-size: var(--fs-sm);
 font-weight: 400;
 text-decoration: none;
 color: var(--c-primary);
}
.topbar-panel a:hover { opacity: 0.85; }
.topbar-dropdown-inner { max-width: var(--container-w); margin: 0 auto; padding: 8px 24px 16px; }
.topbar-solutions-dropdown-inner {
 max-width: var(--container-w);
 margin: 0 auto;
 padding: 0 24px;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
}
.topbar-solutions-dropdown .topbar-solutions-col {
 display: flex;
 flex-direction: column;
 padding: 20px 40px 24px;
 border-right: 1px solid var(--b-topbar);
 text-decoration: none;
}
.topbar-solutions-dropdown .topbar-solutions-col:first-child { padding-left: 0; }
.topbar-solutions-dropdown .topbar-solutions-col:last-child { border-right: none; padding-right: 0; }
.topbar-solutions-dropdown .topbar-solutions-col:hover { opacity: 1; }
.topbar-solutions-dropdown .topbar-solutions-col-title {
 display: flex;
 align-items: center;
 gap: 5px;
 font-size: var(--fs-sm);
 font-weight: 600;
 color: var(--c-primary);
 margin-bottom: 6px;
 padding: 0;
}
.topbar-solutions-dropdown .topbar-solutions-col-title .topbar-solutions-col-chevron {
 font-size: 11px;
 opacity: 0.4;
 flex-shrink: 0;
}
.topbar-solutions-dropdown .topbar-solutions-col:hover .topbar-solutions-col-chevron {
 opacity: 1;
}
.topbar-solutions-dropdown .topbar-solutions-col-icon {
 font-size: 14px;
 color: var(--c-brand);
 margin-right: 7px;
 flex-shrink: 0;
}
.topbar-solutions-dropdown .topbar-solutions-col-desc {
 display: block;
 font-size: var(--fs-xs);
 color: var(--c-gray-muted);
 line-height: 1.55;
 padding: 0;
 font-weight: 400;
}
.topbar-solutions-dropdown .topbar-solutions-col:hover .topbar-solutions-col-title { color: var(--c-brand); }
.topbar.solutions-open,
.topbar.dropdown-open { border-bottom-color: transparent; }
.topbar-backdrop { display: none; position: fixed; inset: 0; z-index: 998; }
.topbar.dropdown-open .topbar-backdrop,
.topbar.solutions-open .topbar-backdrop { display: block; }
.topbar-mobile-sub { display: none; }
.topbar-mobile-sub a { padding-left: 16px; }
.topbar-mobile-label {
 display: block;
 padding: 10px 0;
 font-size: var(--fs-sm);
 color: var(--c-primary);
}
.topbar-actions {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-shrink: 0;
}
.topbar-btn-outline,
.topbar-btn-fill {
 padding: 4px 11px;
 font-size: var(--fs-xs);
 font-weight: 400;
 line-height: 14px;
 text-decoration: none;
 white-space: nowrap;
}
.topbar-btn-outline {
 color: var(--c-primary);
 border: 1px solid var(--b-outline);
}
.topbar-btn-outline:hover { opacity: 0.85; }
.topbar-btn-mobile-only { display: none; }
.topbar-btn-fill {
 color: var(--c-white);
 background: var(--c-link);
 border: 1px solid var(--c-link);
}
.topbar-btn-fill:hover { opacity: 0.9; }
.topbar-btn-short { display: none; }
.heading-highlight { color: var(--c-highlight); }
.list-plain { list-style: none; padding-left: 0; }
.img-fluid { max-width: 100%; height: auto; }
.img-nudge-left { position: relative; left: -6px; }

/* ── Titres de section ── */
.section-h2, .mf1-title, .mu1-title {
 font-weight: 600;
 color: var(--c-primary);
}
.section-h2 {
 max-width: var(--mw-section);
 margin: 0 auto 48px;
 font-size: var(--fs-section-h2);
 letter-spacing: -0.04em;
 line-height: 1.05;
}
.section-h2 .emoji { display: inline-block; font-size: 1.15em; line-height: 0; vertical-align: -0.05em; margin: 0 -0.08em; }
.section-h2 .emoji-badge { display: inline-block; position: relative; width: 1.3em; height: 1.1em; vertical-align: -0.08em; margin: -0.15em -0.10em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 90'%3E%3Cpath d='M50 76C24 58 2 42 2 24C2 10 14 2 30 2C40 2 47 8 50 13C53 8 60 2 70 2C86 2 98 10 98 24C98 42 76 58 50 76Z' fill='%2381AFF9' stroke='%2381AFF9' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; clip-path: url(#heart-clip); }
.section-h2 .emoji-badge .emoji { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); font-size: 0.55em; line-height: 1; }
.section-h2 .emoji-badge--deep .emoji { top: 62%; font-size: 0.75em; }

/* ── Couleurs par section ── */
.industry .heading-highlight { color: #D85A30; }
.industry .emoji-badge { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 90'%3E%3Cpath d='M50 76C24 58 2 42 2 24C2 10 14 2 30 2C40 2 47 8 50 13C53 8 60 2 70 2C86 2 98 10 98 24C98 42 76 58 50 76Z' fill='%23F9A860' stroke='%23F9A860' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.apps .heading-highlight { color: #D85A30; }


.hero-title {
 max-width: var(--mw-hero);
 font-size: var(--fs-hero-title);
 font-weight: 600;
 letter-spacing: -0.05em;
 line-height: 0.92;
}

/* ── Sous-titres ── */
.section-subtitle {
 font-size: var(--fs-section-subtitle);
 font-weight: 600;
 line-height: 0.99;
 letter-spacing: 0.007em;
}
.section-subtitle-dark {
 max-width: var(--mw-section);
 margin: 0 auto 120px;
 color: var(--c-primary);
}

/* ── Bouton + des cartes ── */
.card-plus {
 position: absolute;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 38px;
 height: 38px;
 color: var(--c-gray-icon);
 background: var(--btn-light);
}
.card-plus:hover { background: var(--hover-medium); }
.card-plus i { font-size: 20px; -webkit-text-stroke: 2px; }

/* ── Rail carousel ── */
.rail-scroll {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 scroll-padding-left: var(--rail-inset);
 margin-top: -8px;
 margin-bottom: -8px;
 padding-top: 8px;
 padding-bottom: 8px;
 scrollbar-width: none;
}
.rail-scroll::before,
.rail-scroll::after {
 content: '';
 flex: none;
 width: var(--rail-inset);
}
.rail-nav {
 display: flex;
 justify-content: flex-end;
 gap: 8px;
 margin-top: 40px;
 padding-right: var(--rail-inset);
}
.rail-nav-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 font-size: 18px;
 color: var(--c-gray-muted);
 background: var(--btn-light);
 border: none;
}
.rail-nav-btn i { -webkit-text-stroke: 2px; }
.rail-nav-btn:hover { background: var(--hover-light); }
.rail-nav-btn.disabled, .rail-nav-btn.disabled * { opacity: 0.4; cursor: default; pointer-events: none; }

/* ── Boutons CTA ── */
.cta-outline,
.cta-outline-light {
 display: inline-block;
 padding: 14px 24px;
 font-size: var(--fs-base);
 letter-spacing: -0.03em;
 line-height: 1.18;
 text-decoration: none;
}
.cta-outline {
 color: var(--c-dark);
 border: 2px solid var(--c-dark);
}
.cta-outline:hover,
.cta-outline:active { background: var(--c-dark); color: var(--c-white); }
.cta-outline-light {
 color: var(--c-white);
 border: 2px solid var(--cta-light-border);
}
.cta-outline-light:hover,
.cta-outline-light:active { background: var(--c-white); color: var(--c-dark); border-color: var(--c-white); }

/* ── HERO ── */
.hero {
 display: flex;
 flex-direction: column;
 min-height: calc(100vh + var(--hero-offset));
 text-align: center;
 background: var(--c-white);
}
.hero-inner {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: var(--hero-inner-h);
 padding: 36px 0 60px;
}
.hero-h1 { margin-bottom: 40px; }
.heading-dark { color: var(--c-primary); }
.heading-accent { color: var(--c-accent); }
.hero-sub {
 max-width: var(--mw-hero);
 margin: 0 auto 44px;
 color: var(--c-gray-muted);
}

/* ── Lien d'action ── */
.link-action {
 line-height: 1.33;
 letter-spacing: -0.03em;
 text-decoration: none;
 text-underline-offset: 4px;
 color: var(--c-link);
}
.link-action:hover { text-decoration: underline; }
.link-action .bi-chevron-right { margin-left: 0.15em; font-size: 0.55em; vertical-align: 0.15em; -webkit-text-stroke: 1px; }
.link-action .bi-arrow-up-right { margin-left: 0.15em; font-size: 0.75em; vertical-align: baseline; -webkit-text-stroke: 0.5px; }
.hero-link,
.industry-link,
.apps-link { font-size: 24px; }
.hero-link { display: inline-block; }
.hero-img,
.bottom-img { overflow: hidden; }
.hero-img { height: var(--hero-img-h); }
.bottom-img { height: var(--bottom-img-h); }
.hero-img img,
.bottom-img img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.bottom-img img { object-position: center 60%; }

/* ── ENVELOPE ── */
.envelope-deco {
 position: relative;
 z-index: 2;
 height: 0;
 pointer-events: none;
}
.envelope-deco img {
 position: relative;
 top: -75px;
 left: 48%;
 display: block;
 height: max(340px, calc(13.65vw + 60px));
 width: auto;
 max-width: none;
 transform: rotate(-3deg);
 transform-origin: left center;
}

/* ── STATS ── */
.stats { padding: var(--sp-stats) 0; background: var(--c-white); }
.stat-num {
 font-size: var(--fs-stat-num);
 font-weight: 600;
 letter-spacing: -0.045em;
 line-height: 1;
 color: var(--c-primary);
}
.stat-suffix { font-size: var(--fs-stat-suffix); font-weight: 600; letter-spacing: -0.04em; }
.stat-label { margin-top: 10px; font-size: var(--fs-stat-label); color: var(--c-gray-stat); }

/* ── PHYSIQUE ── */
.physical { padding: var(--sp-physical-t) 0 0; }
.physical-sub {
 max-width: var(--mw-section);
 margin: 0 auto;
 color: var(--c-gray-dark);
}

/* ── FEATURES ── */
.features { padding: 144px 0 48px; background: var(--c-white); }
/* Reset bouton (ces cartes sont des <button>) */
.features .col-12, .features .col-md-6,
.universe .col-12, .universe .col-lg-4 { overflow: visible; }
.feat-card, .univ-card { width: 100%; font: inherit; color: inherit; border: none; transition: transform 0.22s ease; }
button.feat-card, button.univ-card { cursor: pointer; }
button.feat-card:hover, button.univ-card:hover { transform: scale(1.03); }
.feat-card {
 position: relative;
 height: 100%;
 padding: 85px 42px 130px;
 background: var(--bg-surface);
}
.feat-icon {
 display: block;
 height: 130px;
 margin-bottom: 15px;
 font-size: 130px;
 line-height: 1;
 color: var(--c-brand);
}
.feat-title, .mosaic-h, .mosaic-branding, .mosaic-support-word {
 font-weight: 600;
 letter-spacing: -0.015em;
 line-height: 1.07;
}
.feat-title { font-size: var(--fs-feat-title); margin-bottom: 18px; color: var(--c-primary); }
.mosaic-h, .mosaic-branding, .mosaic-support-word { font-size: var(--fs-mosaic-h); }
.feat-body, .mosaic-body {
 font-size: var(--fs-feat-body);
 font-weight: 600;
 line-height: 1.3;
 letter-spacing: 0.01em;
}
.feat-body { max-width: 755px; color: var(--c-gray-dark); }
.feat-card-half { text-align: center; }
.feat-card-full { text-align: left; }
.feat-plus { bottom: 40px; right: 63px; }

/* ── UNIVERS ── */
.universe { padding: var(--sp-section-t) 0 var(--sp-universe-b); }
.univ-card {
 position: relative;
 display: flex;
 flex-direction: column;
 height: 100%;
 padding: 62px 32px 125px;
 text-align: left;
 background: var(--c-white);
}
.univ-label,
.mu1-surtitle {
 font-size: var(--fs-md);
 font-weight: 600;
 letter-spacing: -0.03em;
 color: var(--c-gray);
}
.univ-label { line-height: 0.95; }
.univ-icon {
 display: block;
 margin-top: 48px;
 margin-bottom: 20px;
 font-size: 64px;
 line-height: 1;
 color: var(--c-brand);
}
.univ-title, .trial-card-title {
 font-size: 28px;
 font-weight: 600;
 line-height: 1.15;
 letter-spacing: 0.01em;
 color: var(--c-primary);
}
.univ-title { margin-bottom: 20px; }
.univ-body {
 font-size: var(--fs-base);
 font-weight: 600;
 line-height: 1.4;
 letter-spacing: -0.02em;
 color: var(--c-gray-body);
}
.univ-plus { bottom: 40px; right: 32px; }

/* ── MÉTIER ── */
.industry, .testimonial { padding: var(--sp-section-t) 0 var(--sp-industry-b); }
.rail-wrap { text-align: left; }
.rail-gap-14 { gap: 14px; }
.industry-card, .apps-card {
 position: relative;
 display: flex;
 flex-direction: column;
 flex: 0 0 var(--rail-card-w);
 scroll-snap-align: start;
}
.industry-card { background: var(--c-white); min-height: 380px; padding: 50px 20px 0 40px; }
.industry-emoji {
 display: flex;
 align-items: center;
 height: 70px;
 margin-top: 18px;
 margin-bottom: 50px;
 font-size: 70px;
 line-height: 1;
}
.industry-type, .industry-desc {
 font-size: 32px;
 font-weight: 600;
 line-height: 1.12;
}
.industry-type { color: var(--c-gray-light); }
.industry-desc { margin: 0 0 110px 0; color: var(--c-primary); }
.industry-link {
 position: absolute;
 bottom: 36px;
 left: 40px;
}

/* ── DISTINGUE ── */
.standout { padding: var(--sp-standout-t) 0 var(--sp-standout-b); }
.heading-margin-44 { margin: 0 auto 44px; }


/* ── MOSAIC ── */
.mosaic { padding: var(--sp-mosaic-t) 0 50px; background: var(--c-white); }
.mosaic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 0; }
.mosaic-card { position: relative; overflow: hidden; }
.mosaic-card.mosaic-full { padding: 72px 67px; }
.mosaic-card:not(.mosaic-full) { padding: 72px 44px; }
.mosaic-full { grid-column: 1 / -1; }
.mosaic-blue { color: var(--c-white); background: var(--c-brand); }
.mosaic-dark { color: var(--c-white); background: var(--bg-navy); }
.mosaic-light { color: var(--c-primary); background: var(--bg-warm); }
.mosaic-icon-xl {
 display: block;
 margin-bottom: 20px;
 font-size: var(--fs-mosaic-icon-xl);
 line-height: 1;
 color: var(--c-white);
}
.mosaic-h { max-width: 760px; margin: 0 auto 17px; }
.mosaic-body { max-width: 760px; margin-bottom: 44px; opacity: 0.82; }
.mosaic-body-center { margin: 0 auto 44px; text-align: center; }

/* Carte API */
.mosaic-api-wrap { display: flex; align-items: center; gap: 56px; }
.mosaic-lightning { font-size: var(--fs-mosaic-lightning); line-height: 1; color: var(--c-purple); }
.mosaic-accent { color: var(--c-purple); }

/* Carte localisation */
.mosaic-pin-wrap {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-end;
 height: 100%;
}
.mosaic-pin-ico {
 display: block;
 margin-bottom: 36px;
 font-size: var(--fs-mosaic-pin);
 line-height: 1;
 color: var(--c-white);
 opacity: 0.92;
}

/* Carte branding */
.mosaic-branding-card { display: flex; align-items: center; justify-content: center; }
.mosaic-branding { max-width: 320px; margin: 0 auto; text-align: center; }
.mosaic-branding .dim { color: var(--c-gray-dim); }
.mosaic-branding .blue { color: var(--c-brand); }

/* Carte support */
.mosaic-support {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 658px;
 max-width: 100%;
 margin: 0 auto 17px;
}
.mosaic-support-word { display: block; color: var(--c-white); }
.mosaic-support-word-offset { padding-left: 12%; }
.mosaic-icon-indigo { color: var(--c-brand); }

/* ── APPS ── */
.apps { padding: var(--sp-section-t) 0 36px; }
.apps-scroll { gap: 20px; padding-bottom: 4px; }
.apps-card-placeholder {
 width: 50%;
 margin-bottom: 14px;
 aspect-ratio: 3 / 2;
 overflow: hidden;
 border-radius: 8px;
}
.apps-card-placeholder img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apps-card-body { width: 100%; padding: 0 0 48px 12px; }
.item-title {
 font-size: var(--fs-apps-title);
 font-weight: 600;
 letter-spacing: -0.03em;
 line-height: 1.19;
}
.item-body {
 font-size: var(--fs-feat-body);
 font-weight: 600;
 line-height: 1.3;
 letter-spacing: 0.01em;
}
.apps-card-title {
 margin-bottom: 14px;
 color: var(--c-dark);
}
.apps-card-desc {
 color: var(--c-gray);
}
.apps-link { position: absolute; bottom: 0; left: 12px; }
.apps-nav-btn { background: var(--btn-medium); }
.apps-nav-btn:hover { background: var(--hover-medium); }

/* ── ESSAYER ── */
.trial { padding: var(--sp-trial-t) 0 var(--sp-trial-b); }
.trial-h2 { margin: 0 auto 40px; }
.trial-sub {
 max-width: var(--mw-hero);
 margin: 0 auto 44px;
 font-weight: 600;
 color: var(--c-primary);
}
.trial-btn { margin-bottom: 80px; }
.trial-btn-short { display: none; }
.trial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trial-hero-card {
 position: relative;
 display: flex;
 align-items: stretch;
 grid-column: 1 / -1;
 overflow: hidden;
 background: var(--bg-card);
}
.trial-hero-card-content {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 62px 32px;
 text-align: center;
}
.trial-hero-card-content .trial-card-title { margin-bottom: 20px; }
.trial-hero-card-visual-wrap { flex: 1; min-height: 200px; }
.trial-hero-card-visual {
 position: absolute;
 bottom: -0.12em;
 right: 15%;
 font-size: var(--fs-trial-visual);
 line-height: 1;
 pointer-events: none;
}
.trial-hero-card-link { font-size: var(--fs-trial-link); }
.trial-card { padding: 62px 32px; text-align: center; background: var(--bg-card); }
.trial-card-icon {
 display: block;
 margin-bottom: 20px;
 font-size: 64px;
 line-height: 1;
 color: var(--c-primary);
}
.trial-card-title { margin-bottom: 10px; }
.trial-card-desc {
 margin: 0;
 font-size: var(--fs-base);
 letter-spacing: -0.02em;
 line-height: 1.4;
 color: var(--c-gray-body);
}

/* ── FOOTER ── */
.site-footer-spacer { height: 20px; background: var(--c-white); }
.site-footer { padding: 35px 0 17px; background: var(--bg-surface); }
.footer-hr { border: none; border-top: 1px solid var(--b-footer); }
.footer-links { display: flex; flex-wrap: wrap; margin-top: 17px; }
.footer-links-col {
 flex: 1 1 calc(25% - 18px);
 min-width: 0;
 margin: 0 20px 0 0;
 list-style: none;
}
.footer-links-col:last-child { margin-right: 0; }
.footer-col-title { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 600; line-height: 16px; color: var(--c-primary); }
.footer-links-col li { margin-bottom: 10px; }
.footer-links-col a {
 display: inline-block;
 font-size: var(--fs-sm);
 line-height: 16px;
 text-decoration: underline;
 text-underline-offset: 2px;
 color: var(--footer-link);
}
.footer-links-col a:hover { color: var(--footer-link-hover); }
.footer-hr-bottom { margin-top: 45px; }
.footer-copyright { margin: 17px 0 0; font-size: var(--fs-xs); text-align: left; color: var(--c-gray-copy); }

/* ── MODALES ── */
/* Bootstrap modal overrides */
#mainModal { --bs-modal-bg: var(--c-white); }
#mainModal .modal-dialog {
 max-width: calc(var(--container-w) + 24px);
 width: calc(100% - var(--sp-modal-edge, 32px) * 2);
 margin: 40px auto;
}
#mainModal .modal-content {
 position: relative;
 padding-top: var(--sp-modal-close);
 background: var(--c-white);
 overflow: clip;
 border-radius: 0;
 border: none;
}
.modal-backdrop { --bs-backdrop-bg: rgba(0,0,0,0.45); --bs-backdrop-opacity: 1; }
.modal-close {
 position: sticky;
 top: var(--sp-modal-close);
 z-index: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 38px;
 height: 38px;
 margin: 0 var(--sp-modal-close) -38px auto;
 padding: 0;
 color: var(--c-gray-icon);
 background: var(--btn-light);
 border: none;
 cursor: pointer;
}
.modal-close i { font-size: 20px; -webkit-text-stroke: 2px; }
.modal-close:hover { background: var(--hover-medium); }
.modal-body { padding: var(--sp-modal-body-t) var(--sp-modal-body-x) var(--sp-modal-body-b); }
.modal-cta { display: inline-block; margin-top: 48px; margin-left: 30px; font-size: var(--fs-modal-cta); }
.modal-cta-mid { display: none; }
.modal-cta-short { display: none; }

/* Titres modales */
.mf1-title, .mu1-title { font-size: var(--fs-modal-title, 40px); letter-spacing: -0.015em; line-height: 1.1; }
.mf1-title { margin: 0 0 30px; }
.mf1-title-sm { margin-bottom: 32px; }
.mf1-band-sub { margin: 0 0 12px; font-size: var(--fs-modal-band-sub); font-weight: 600; line-height: 1.3; color: var(--c-white); }
.mf1-band-body { font-size: var(--fs-modal-band-body); font-weight: 600; line-height: 1.45; color: var(--c-white); }

/* Carte d'en-tête modale */
.mf1-card-top {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 24px;
 align-items: start;
 margin-bottom: 24px;
 padding: 32px 30px;
 overflow: hidden;
 background: var(--c-brand);
}

/* Colonnes modales */
.mf1-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.mf1-cols > *, .mu1-cols > *, .mu1-grid > *, .mf1-card-top > * { min-width: 0; }
.mf1-col-dark, .mf1-col-light { display: flex; flex-direction: column; padding: 32px 30px; overflow: hidden; }
.mf1-col-dark { background: var(--bg-navy); }
.mf1-col-light { background: var(--c-white); }
.mf1-col-sub,
.mu1-section-title { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--c-primary); }
.mf1-col-sub { margin: 0 0 12px; }
.mf1-col-dark .mf1-col-sub { color: var(--c-white); }
.mf1-col-body, .mu1-section-text { font-size: 19px; font-weight: 600; color: var(--c-gray); line-height: 1.45; }
.mf1-col-body { margin: 0 0 24px; }
.mf1-col-dark .mf1-col-body { color: var(--c-white); }
.mf1-col-purple { background: var(--c-brand); }

/* Placeholders modales */
.mf1-ph, .mf1-ph-wide, .mf1-card-top-ph, .mf1-ph-square,
.modal-ph-inset, .mu1-col-ph, .mu1-ph-wide {
 display: flex; align-items: center; justify-content: center; overflow: hidden; max-width: 100%; container-type: inline-size;
}
.mf1-ph { width: 100%; margin-top: auto; padding-top: 24px; aspect-ratio: 16/10; }
.mf1-ph-wide { width: 100%; aspect-ratio: 16/9; }
.mf1-ph-wide:has(img) { aspect-ratio: auto; align-items: flex-end; padding-top: 24px; }
.mf1-card-top-ph { aspect-ratio: 16/10; }
.modal-card-clear { padding: 32px 30px; overflow: hidden; }
.modal-card-clear > :last-child { margin-bottom: 0; }
.mf1-section { margin-top: 40px; }
.mf1-col-body-intro { margin-bottom: 32px; }
.mf1-ph-wide-intro { margin-bottom: 36px; }
.modal-bg-navy { background: var(--bg-navy); }
.modal-visual { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; width: 100%; height: 100%; gap: 0.25em; font-size: min(var(--fs-modal-visual), 18vw, 28cqi); color: var(--c-brand); }
.modal-visual-lg { font-size: min(var(--fs-modal-visual-lg), 24vw, 28cqi); }
.modal-visual-xl { font-size: min(var(--fs-modal-visual-xl), 28vw, 28cqi); }
.modal-visual-solo { font-size: min(var(--fs-modal-visual-solo), 30vw); }
.modal-visual .bi-thicken { -webkit-text-stroke: 0.015em currentColor; }
.modal-visual-light { color: var(--c-white); }
.modal-visual-dark { color: var(--c-brand); }
.modal-emoji { font-size: min(var(--fs-modal-emoji), 22vw); line-height: 0.9; }
.modal-emoji-lg { font-size: min(var(--fs-modal-emoji-lg), 30vw); }
.modal-ph-inset { margin: 0 8px 30px; aspect-ratio: 21 / 9; }
.modal-ph-inset .modal-visual { font-size: min(var(--fs-modal-visual-lg), 22vw, 28cqi); }

/* Modales univers */
.mu1-hero {
 position: relative; overflow: hidden;
 height: 280px; margin: calc(-1 * var(--sp-mu1-hero-t)) calc(-1 * var(--sp-modal-body-x)) 44px;
}
.mu1-hero-grid {
 position: absolute; top: 50%; left: 50%;
 transform: translate(-50%, -50%) rotate(-15deg);
 font-size: var(--fs-hero-grid);
}
.mu1-hero-row { display: flex; }
.mu1-hero-row--off { margin-left: 0.625em; }
.mu1-hero-grid i { display: block; width: 1.25em; height: 1.25em; line-height: 1.25em; text-align: center; flex-shrink: 0; }
.mu1-hero--op { background: var(--bg-surface); }
.mu1-hero--op .mu1-hero-grid { color: var(--c-gray-icon); }
.mu1-hero--op .mu1-hero-grid i { opacity: 0.35; font-size: 0.85em; -webkit-text-stroke: 0.3px; }
.mu1-hero--op .mu1-hero-row { gap: 0.18em; }
.mu1-hero--op .mu1-hero-row + .mu1-hero-row { margin-top: 0.1em; }
.mu1-hero--scatter .mu1-hero-grid { transform: translate(-50%, -50%); }
.mu1-hero--scatter .mu1-hero-grid > span { position: absolute; transform: translate(-50%, -50%); }
.mu1-hero--mk { background: var(--c-brand); }
.mu1-hero--mk .mu1-hero-grid { color: #81AFF9; }
.mu1-hero--mk .mu1-hero-grid i { opacity: 1; }
.mu1-hero--api { background: var(--bg-navy); }
.mu1-hero--api .mu1-hero-grid { color: var(--c-purple); }
.mu1-surtitle { margin: 0 0 12px; }
.mu1-title { margin: 0 0 16px; }
.mu1-intro { max-width: 720px; margin: 0 0 32px; font-size: var(--fs-base); line-height: 1.45; color: var(--c-gray); }
.mu1-section-title { margin: 0 0 10px; }
.mu1-section-text { margin: 0 0 44px; }
.mu1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mu1-block { padding: 32px 30px; overflow: hidden; background: var(--bg-surface); }
.mu1-block-icon { display: block; margin-bottom: 12px; font-size: 40px; color: var(--c-primary); }
.mu1-block-title { margin: 0 0 6px; font-size: var(--fs-md); font-weight: 600; color: var(--c-primary); }
.mu1-block-text { font-size: 15px; line-height: 1.45; color: var(--c-gray); }
.mu1-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 44px; }
.mu1-cols > div { padding: 32px 30px; }
.mu1-cols .mu1-section-text { margin-bottom: 0; }
.mu1-col-ph { width: 100%; margin-bottom: 16px; aspect-ratio: 16 / 10; }
.mu1-ph-wide { margin: 0 8px 16px; aspect-ratio: 21 / 9; }
.mf1-ph-square { width: 100%; max-width: 200px; margin: 24px auto 0; aspect-ratio: 1 / 1; }
.mt-44 { margin-top: 44px; }

/* ── RESPONSIVE ── */

/* ── XXL → XL (≥1200px < 1400px) ── */
@media (max-width: 1399.98px) {
 :root {
  --container-w: 1140px;
  --hero-img-h: 602px;
  --bottom-img-h: 460px;
  --hero-offset: 385px;
  --rail-card-w: 360px;
 }
}

/* ── XL → LG (≥992px < 1200px) ── */
@media (max-width: 1199.98px) {
 :root {
  --container-w: 960px;
  --bottom-img-h: 400px;
  --mw-hero: 868px;
  --mw-section: 612px;
  --rail-card-w: 340px;
  --fs-hero-title: 80px;
  --fs-section-h2: 64px;
  --fs-stat-num: 72px;
  --fs-stat-suffix: 44px;
  --fs-mosaic-h: 40px;
  --fs-mosaic-icon-xl: 130px;
  --fs-mosaic-lightning: 190px;
  --fs-mosaic-pin: 246px;
 }
 /* Mosaic — LG */
 .mosaic-h { max-width: 608px; }
 .mosaic-body { max-width: 608px; }
 .mosaic-card.mosaic-full { padding: 72px 43px; }
 .mosaic-card:not(.mosaic-full) { padding: 72px 42px; }
 .mosaic-branding { max-width: 230px; }
 .mosaic-support { width: 540px; }
}

/* ── LG → MD (≥768px < 992px) ── */
@media (max-width: 991.98px) {
 /* Topbar */
 .topbar-nav { display: none; }
 .topbar-toggle { display: flex; }
 .topbar-solutions-dropdown { display: none; }
 .topbar-mobile-sub { display: block; }
 .topbar-btn-desktop-only { display: none; }
 .topbar-btn-mobile-only { display: inline-block; }
 :root {
  --container-w: 720px;
  --mw-hero: 672px;
  --mw-section: min(497px, 76%);
  --fs-hero-title: 64px;
  --fs-section-h2: 52px;
  --hero-img-h: 508px;
  --bottom-img-h: 340px;
  --hero-offset: 325px;
  --hero-inner-h: 520px;
  --rail-card-w: 320px;
  --fs-stat-num: 60px;
  --fs-stat-suffix: 36px;
  --fs-section-subtitle: 26px;
  --fs-feat-title: 40px;
  --fs-feat-body: 17px;
  --fs-trial-visual: 160px;
  --fs-modal-visual: 80px;
  --fs-modal-visual-lg: 120px;
  --fs-modal-visual-xl: 150px;
  --fs-modal-visual-solo: 160px;
  --fs-modal-emoji-lg: 200px;
  --sp-section-t: 64px;
  --sp-physical-t: 72px;
  --sp-standout-t: 80px;
  --sp-standout-b: 72px;
  --sp-trial-t: 92px;
  --sp-trial-b: 120px;
  --sp-mosaic-t: 10px;
  --sp-industry-b: 48px;
  --fs-modal-title: 32px;
  --sp-modal-body-t: 68px;
  --sp-modal-body-b: 64px;
 }
 /* Envelope decoration */
 .envelope-deco img { left: 45%; height: 280px; top: -60px; transform: rotate(-8deg); }

 /* section-subtitle */
 .section-subtitle { line-height: 1.1; }

 /* Section padding */
 .trial-hero-card-content { padding: 50px 24px; }
 .trial-hero-card-visual-wrap { min-height: 160px; }
 .trial-card { padding: 50px 24px; }
 .footer-links-col { flex: 1 1 calc(50% - 20px); margin-bottom: 20px; }

 /* Modal responsive */
 .mf1-cols, .mf1-card-top, .mu1-grid, .mu1-cols { grid-template-columns: 1fr; }
}

/* ── MD → SM (≥576px < 768px) ── */
@media (max-width: 767.98px) {
 :root {
  --container-w: 540px;
  --mw-hero: min(504px, 92%);
  --mw-section: min(401px, 92%);
  --hero-img-h: 378px;
  --bottom-img-h: 260px;
  --hero-offset: 242px;
  --hero-inner-h: 500px;
  --fs-hero-title: 48px;
  --fs-section-h2: 42px;
  --fs-stat-num: 44px;
  --fs-stat-suffix: 26px;
  --fs-stat-label: 12px;
  --fs-section-subtitle: 22px;
  --fs-mosaic-icon-xl: 110px;
  --fs-mosaic-lightning: 110px;
  --fs-mosaic-pin: 236px;
  --fs-apps-title: 19px;
  --fs-apps-desc: 14px;
  --fs-trial-visual: 140px;
  --fs-hero-grid: 53px;
  --fs-modal-visual: 56px;
  --fs-modal-visual-lg: 88px;
  --fs-modal-visual-xl: 110px;
  --fs-modal-visual-solo: 120px;
  --fs-modal-emoji: 96px;
  --fs-modal-emoji-lg: 140px;
  --sp-section-t: 56px;
  --sp-physical-t: 56px;
  --sp-standout-t: 72px;
  --sp-standout-b: 60px;
  --sp-trial-t: 76px;
  --sp-trial-b: 96px;
  --sp-stats: 48px;
  --sp-universe-b: 64px;
  --sp-industry-b: 40px;
  --sp-modal-body-t: 68px;
  --sp-modal-edge: 16px;
  --sp-mu1-hero-t: var(--sp-modal-body-t);
 }
 .topbar-btn-full { display: none; }
 .topbar-btn-short { display: inline; }
 .footer-links-col { flex: 1 1 100%; margin-right: 0; margin-bottom: 20px; }
 /* Envelope decoration */
 .envelope-deco img { left: 42%; height: 220px; top: -35px; transform: rotate(-12deg); }
 /* Hero breathing room */
 .hero-inner { padding: var(--sp-section-t) 24px 124px; }

 /* Close button en bas à droite + CTA modale */
 #mainModal .modal-content { display: flex; flex-direction: column; padding-top: 0; }
 .modal-body { order: 0; }
 .modal-close {
  order: 1;
  position: sticky;
  top: auto;
  bottom: 56px;
  margin: calc(-1 * var(--sp-modal-body-b) - 38px) var(--sp-modal-close) 56px auto;
 }
 .modal-cta { display: block; margin-left: 30px; }

 /* Masquer scrollbar modale mobile */
 #mainModal { scrollbar-width: none; }
 #mainModal::-webkit-scrollbar { display: none; }

 /* section-subtitle */
 .section-subtitle { line-height: 1.2; }

 /* Features */
 .feat-card { text-align: center; }

 /* Univers */
 .univ-body { max-width: 340px; }

 /* Mosaic — single column */
 .mosaic-grid { grid-template-columns: 1fr; }
 .mosaic-card.mosaic-full,
 .mosaic-card:not(.mosaic-full) { padding: 50px 33px; }
 .mosaic-h { max-width: 438px; }
 .mosaic-body { max-width: 438px; }
 .mosaic-api-wrap { flex-direction: column; gap: 32px; align-items: center; text-align: center; }
 .mosaic-pin-wrap { justify-content: center; }
 .mosaic-support { width: 360px; }

 /* Univers icon spacing */
 .univ-icon { margin-top: 43px; }

 /* Section padding */
 .trial-grid { grid-template-columns: 1fr; }
 .trial-hero-card { flex-direction: column; }
 .trial-hero-card-content { padding: 48px 32px 24px; }
 .trial-hero-card-visual-wrap { min-height: 180px; order: 1; }
 .trial-hero-card-visual { right: auto; left: 50%; transform: translateX(-50%); }
 .trial-card { padding: 48px 32px; }

 /* Modal responsive */
 .mu1-hero { height: 200px; }
}

/* ── SM → XS (< 576px) ── */
@media (max-width: 575.98px) {
 :root {
  --hero-img-h: 280px;
  --bottom-img-h: 200px;
  --hero-offset: 179px;
  --hero-inner-h: 420px;
  --rail-card-w: calc(100vw - 56px);
  --rail-inset: 12px;
  --fs-stat-num: 32px;
  --fs-stat-suffix: 20px;
  --fs-stat-label: 11px;
  --fs-section-subtitle: 20px;
  --fs-trial-visual: 120px;
  --fs-trial-link: 19px;
  --fs-modal-title: 28px;
  --fs-modal-band-body: 15px;
  --fs-hero-grid: 48px;
  --fs-modal-visual: 48px;
  --fs-modal-visual-lg: 72px;
  --fs-modal-visual-xl: 88px;
  --fs-modal-visual-solo: 96px;
  --fs-modal-emoji: 72px;
  --fs-modal-emoji-lg: 96px;
  --sp-section-t: 48px;
  --sp-physical-t: 48px;
  --sp-standout-t: 64px;
  --sp-standout-b: 56px;
  --sp-trial-t: 64px;
  --sp-stats: 36px;
  --sp-universe-b: 56px;
  --sp-industry-b: 36px;
  --sp-modal-body-t: 68px;
  --sp-modal-edge: 10px;
  --fs-feat-title: 36px;
  --fs-mosaic-h: 36px;
  --mw-hero: 100%;
  --mw-section: min(401px, 100%);
 }
 /* Container breathing room */
 .container { --bs-gutter-x: 40px; }

 /* Envelope decoration */
 .envelope-deco img { left: 38%; height: 170px; top: -5px; transform: rotate(-18deg); }

 /* Hero */
 .hero-inner { padding: var(--sp-section-t) 24px 120px; }

 /* Resserrement typographique */
 .hero-title { letter-spacing: -0.05em; line-height: 0.95; }
 .section-h2 { letter-spacing: -0.04em; line-height: 1.08; }
 .section-subtitle { line-height: 1.28; letter-spacing: 0; }
 .feat-body, .mosaic-body { line-height: 1.28; letter-spacing: 0; }
 .feat-title { letter-spacing: -0.02em; line-height: 1.07; }
 .univ-body { line-height: 1.35; }

 /* Features */
 .feat-card { padding: 85px 33px 130px; }

 /* Section padding */
 .trial-hero-card-content { padding: 40px 24px 20px; }
 .trial-hero-card-visual-wrap { min-height: 160px; }
 .trial-card { padding: 40px 24px; }

 /* Modal responsive */
 .mu1-hero { height: 180px; }
 .mu1-block { padding: 32px 30px; }
 /* CTA : texte intermédiaire */
 .modal-cta-full { display: none; }
 .modal-cta-mid { display: inline; }
}

/* ── Seuil topbar (< 440px) ── */
@media (max-width: 439.98px) {
 .topbar-btn-fill { display: none; }
}

/* ── XXS (< 420px) ── */
@media (max-width: 419.98px) {
 .modal-cta-mid { display: none; }
 .modal-cta-short { display: inline; }
 :root {
  --sp-modal-close: 10px;
  --sp-modal-edge: 6px;
  --fs-hero-title: 42px;
  --fs-section-h2: 42px;
  --fs-feat-title: 32px;
  --fs-mosaic-h: 32px;
 }
 .hero-title { letter-spacing: -0.06em; line-height: 1.08; }
 .section-h2 { letter-spacing: -0.05em; line-height: 1.1; }
 .section-h2 .emoji { font-size: 0.75em; }
 .hero-link, .industry-link, .apps-link { font-size: 20px; }
 .mf1-card-top, .mf1-col-dark, .mf1-col-light, .modal-card-clear, .mu1-cols > div { padding: 24px 18px; }
 .mu1-block { padding: 22px 14px; }
 .modal-cta { margin-left: 18px; }
 .container { --bs-gutter-x: 48px; }
 .hero-inner { padding: var(--sp-section-t) 24px 120px; }
}

/* ── Accessibilité — mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── Pricing plans grid ── */
.pricing-plan-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 align-items: start;
}
.pricing-plan-badge {
 text-align: center;
 margin-bottom: 0;
 font-weight: 700;
 font-size: 15px;
 background: var(--c-brand);
 color: #fff;
 border-radius: 0;
 padding: 6px 16px;
 box-sizing: border-box;
}
.pricing-plan-badge-placeholder {
 height: 40px; /* matches badge height */
}
/* ── Pricing plan elements (all devices) ── */
.pricing-plan-card { background: #fff !important; }
.pricing-plan-name { font-size: 28px; font-weight: 700; margin: 0 0 8px; }
.pricing-plan-amount { font-size: 36px; font-weight: 700; margin-bottom: 4px; }
.pricing-plan-period { font-style: italic; color: var(--c-gray-body); font-size: 14px; }
.pricing-plan-gift { font-size: 14px; margin-top: 8px; }
.pricing-plan-dash { display: none; }
.pricing-plan-toggle { display: none; }

/* Desktop */
@media (min-width: 992px) {
 .pricing-plan-summary { text-align: center; }
 .pricing-plan-nameprice { text-align: center; }
 .pricing-plan-period { display: block; margin-bottom: 8px; margin-top: 4px; }
 .pricing-plan-cta-wrap { margin-top: 24px; margin-bottom: 16px; text-align: center; }
 .pricing-plan-gift { text-align: center; margin-bottom: 24px; }
 .pricing-plan-details { display: block !important; }
}

/* Mobile / Tablette */
@media (max-width: 991.98px) {
 .pricing-plan-grid { grid-template-columns: 1fr; gap: 36px; }
 .pricing-plan-badge-placeholder { display: none; }
 .pricing-plan-card { margin-top: 0 !important; padding: 20px 20px !important; }
 .pricing-plan-summary { text-align: center; }
 .pricing-plan-nameprice {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin-bottom: 16px;
 }
 .pricing-plan-dash { display: inline; font-weight: 400; }
 .pricing-plan-name { font-size: 20px; margin: 0; }
 .pricing-plan-amount { font-size: 20px; font-weight: 700; margin: 0; }
 .pricing-plan-period { font-size: 13px; margin: 0; }
 .pricing-plan-cta-wrap { text-align: center; margin-bottom: 0; }
 .pricing-plan-gift { font-size: 13px; margin-top: 10px; text-align: center; }
 .pricing-plan-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-brand);
  cursor: pointer;
  padding: 12px 0 4px;
  margin-bottom: 4px;
 }
 .pricing-plan-toggle .bi-chevron-down { transition: transform 0.25s ease; }
 .pricing-plan-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
 .pricing-plan-details { display: none; margin-top: 16px; }
 .pricing-plan-details.is-open { display: block; }
}

/* ── Simulator ── */
.pricing-simulator-wrap {
 background: var(--c-white);
 border-radius: 16px;
 padding: 36px 40px;
 max-width: 720px;
 margin: 0 auto;
}
.pricing-simulator-title {
 font-size: 17px;
 font-weight: 600;
 margin-bottom: 20px;
 color: var(--c-primary);
}
.simul-choices {
 display: flex;
 gap: 12px;
 margin-bottom: 24px;
}
.simul-choice {
 flex: 1 1 0;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 background: #fff;
 border: 2px solid var(--c-brand);
 border-radius: 8px;
 padding: 10px 18px;
 cursor: pointer;
 font-weight: 600;
 font-size: 15px;
 color: var(--c-primary);
 transition: background 0.15s, color 0.15s;
 user-select: none;
}
.simul-choice input[type="checkbox"] {
 accent-color: var(--c-brand);
 width: 18px;
 height: 18px;
 cursor: pointer;
}
.simul-choice:has(input:checked) {
 background: var(--c-brand);
 color: #fff;
}
.simul-define-row {
 display: flex;
 gap: 24px;
 flex-wrap: wrap;
 margin-bottom: 20px;
}
.simul-define-col {
 flex: 1;
 min-width: 180px;
}
.simul-envoi-row {
 display: flex;
 gap: 24px;
 flex-wrap: wrap;
 margin-bottom: 20px;
}
.simul-envoi-row > label {
 flex: 1;
 min-width: 180px;
}
.simul-field-label {
 display: block;
 font-size: 14px;
 font-weight: 600;
 color: var(--c-primary);
 margin-bottom: 12px;
}
.simul-field-label i {
 display: inline;
 margin-right: 4px;
 color: var(--c-brand);
}
.simul-input,
.simul-select {
 display: block;
 margin-top: 6px;
 border: 1px solid #d0d5dd;
 border-radius: 8px;
 padding: 8px 12px;
 font-size: 14px;
 width: 100%;
 background: #fff;
 color: var(--c-primary);
 outline: none;
 transition: border-color 0.15s;
}
.simul-input:focus,
.simul-select:focus {
 border-color: var(--c-brand);
}
.simul-result {
 margin-top: 24px;
 padding: 20px;
 background: var(--bg-surface, #f8f9fa);
 border-radius: 10px;
}
.simul-result-price {
 font-size: 28px;
 font-weight: 700;
 color: var(--c-brand);
 margin: 0 0 4px;
}
.simul-result-detail {
 font-size: 14px;
 color: var(--c-gray-body);
}
.simul-waiting {
 font-size: 15px;
 color: var(--c-gray-body);
 line-height: 1.6;
}
.simul-error {
 color: #c0392b;
 font-size: 14px;
 margin-top: 12px;
}
@media (max-width: 767px) {
 .pricing-simulator-wrap { padding: 24px 20px; }
 .simul-choices { flex-direction: column; gap: 8px; }
 .simul-choice { flex: none; width: 100%; justify-content: flex-start; padding: 10px 16px; font-size: 14px; }
 /* Cols déplacés inline après leur label sur mobile */
 .simul-choices .simul-define-col { width: 100%; padding: 12px 0 4px; }
 .simul-choices .simul-define-col > div { display: block !important; }
 .simul-define-row,
 .simul-envoi-row { flex-direction: column; gap: 0; }
}



/* =================================================================
   PAGES INTERNES - CSS migre depuis les style inline
   ================================================================= */

/* ── Global pages internes ── */
.topbar-nav a[aria-current="page"] { color: var(--c-brand); }

/* ── Surtitle hero (pages internes) ── */
.hero-surtitle {
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--c-brand);
 margin-bottom: 20px;
}

/* ── Hero compact sans illustration ── */
.hero--page { min-height: auto; }
.hero--page .hero-inner {
 min-height: 0;
 padding: 72px 24px 64px;
}
.hero-ctas {
 display: flex;
 align-items: center;
 gap: 20px;
 flex-wrap: wrap;
 justify-content: center;
}
.hero-cta-rdv {
 font-size: 24px;
 letter-spacing: -0.03em;
 text-decoration: none;
 color: var(--c-link);
 line-height: 1.33;
}
.hero-cta-rdv:hover { text-decoration: underline; }
.hero-cta-rdv .bi { font-size: 0.75em; vertical-align: baseline; margin-left: 0.15em; -webkit-text-stroke: 0.5px; }

/* ── Processus (partagé : courrier opérationnel & marketing) ── */
.process-steps {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0;
 margin-top: 64px;
 counter-reset: step;
}
@media (max-width: 575px) {
 .process-steps { grid-template-columns: 1fr; gap: 24px; }
}
.process-step {
 padding: 0 32px;
 border-left: 1px solid var(--b-topbar);
 counter-increment: step;
}
.process-step:first-child { border-left: none; padding-left: 0; }
.process-step:last-child { padding-right: 0; }
@media (max-width: 575px) {
 .process-step { border-left: none; padding: 0; }
}
.process-step-num {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: var(--c-brand);
 color: var(--c-white);
 font-size: var(--fs-sm);
 font-weight: 600;
 margin-bottom: 20px;
}
.process-step-num::before { content: counter(step); }
.process-step-title {
 color: var(--c-primary);
 margin-bottom: 8px;
}
.process-step-body { color: var(--c-gray-muted); }

/* ── Avantages (partagé : courrier opérationnel & marketing) ── */
.avantages-section {
 padding: calc(var(--section-pt, 96px) * 2) 0 var(--section-pt, 96px);
 background: var(--c-white);
}
.avantages-intro {
 max-width: var(--mw-section);
 margin: 0 auto 72px;
 text-align: center;
}
.avantages-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 border-top: 1px solid var(--b-topbar);
}
.avantage-item {
 padding: 40px 32px 44px 32px;
 border-right: 1px solid var(--b-topbar);
}
.avantage-item:nth-child(3n+1) { padding-left: 0; }
.avantage-item:last-child,
.avantage-item:nth-child(3n) { border-right: none; padding-right: 0; }
.avantage-item:not(:nth-child(-n+3)) { border-top: 1px solid var(--b-topbar); }
.avantage-num {
 display: block;
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.12em;
 color: var(--c-brand);
 margin-bottom: 28px;
}
.avantage-icon {
 display: block;
 font-size: 28px;
 color: var(--c-primary);
 margin-bottom: 16px;
}
.avantage-title {
 color: var(--c-primary);
 margin-bottom: 10px;
}
.avantage-body {
 color: var(--c-gray-muted);
 margin: 0;
}
@media (max-width: 767px) {
 .avantages-grid { grid-template-columns: repeat(2, 1fr); }
 .avantage-item { padding: 28px 24px 32px 24px; border-right: 1px solid var(--b-topbar); }
 .avantage-item:not(:nth-child(-n+2)) { border-top: 1px solid var(--b-topbar); }
 .avantage-item:nth-child(odd) { padding-left: 0; }
 .avantage-item:nth-child(even) { border-right: none; padding-right: 0; }
}
@media (max-width: 479px) {
 .avantages-grid { grid-template-columns: 1fr; }
 .avantage-item,
 .avantage-item:nth-child(odd),
 .avantage-item:nth-child(even) { padding: 24px 0 28px 0; border-right: none; }
 .avantage-item:not(:first-child) { border-top: 1px solid var(--b-topbar); }
}

/* ── Double CTA (partagé : opérationnel, marketing, API) ── */
.dual-cta {
 display: flex;
 align-items: center;
 gap: 20px;
 flex-wrap: wrap;
 justify-content: center;
 margin-top: 40px;
}
.dual-cta-rdv {
 display: inline-block;
 padding: 14px 24px;
 font-size: var(--fs-base);
 letter-spacing: -0.03em;
 line-height: 1.18;
 text-decoration: none;
 color: var(--c-dark);
 border: 2px solid var(--c-dark);
}
.dual-cta-rdv:hover,
.dual-cta-rdv:active { background: var(--c-dark); color: var(--c-white); }


/* ─────────────────────────────────────────────
   PAGE : COURRIER OPÉRATIONNEL
   ───────────────────────────────────────────── */

.hero-illus {
 margin: 0;
 height: 320px;
}
@media (min-width: 768px) { .hero-illus { height: 420px; } }


.modes-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 margin-top: 64px;
}
@media (max-width: 767px) {
 .modes-grid { grid-template-columns: 1fr; }
}
.mode-card {
 padding: 36px 28px;
 background: var(--c-white);
 text-align: left;
}
.mode-icon {
 display: block;
 font-size: 40px;
 color: var(--c-brand);
 margin-bottom: 20px;
}
.mode-title {
 color: var(--c-primary);
 margin-bottom: 8px;
}
.mode-delay {
 display: inline-block;
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--c-brand);
 background: rgba(82,69,253,0.08);
 padding: 3px 8px;
 border-radius: 4px;
 margin-bottom: 16px;
}
.mode-body { color: var(--c-gray-muted); }


/* ─────────────────────────────────────────────
   PAGE : COURRIER MARKETING
   ───────────────────────────────────────────── */

.hero-mk {
 background: var(--c-brand);
 text-align: center;
 padding: 80px 0 0;
 overflow: hidden;
}
.hero-mk-surtitle {
 color: rgba(255,255,255,0.6)!important;
}
.hero-mk-title {
 color: var(--c-white)!important;
 margin-left: auto;
    margin-right: auto;
}
.hero-mk-sub {
 color: rgba(255,255,255,0.75)!important;
}
.hero-mk-ctas {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 70px;
 justify-content: center;
 margin-bottom: 72px;
}
@media (min-width: 768px) {
 .hero-mk-ctas { flex-direction: row; gap: 50px; }
}
.hero-mk-cta,
.hero-mk-cta-rdv {
 font-size: 22px;
 letter-spacing: -0.03em;
 text-decoration: none;
 color: var(--c-white);
 line-height: 1.33;
}
.hero-mk-cta:hover,
.hero-mk-cta-rdv:hover { color: var(--c-white); text-decoration: underline; }
.hero-mk-cta .bi,
.hero-mk-cta-rdv .bi { font-size: 0.75em; vertical-align: baseline; margin-left: 0.15em; -webkit-text-stroke: 0.5px; }
.hero-mk-illus {
 margin: 0;
 height: 340px;
}
@media (min-width: 768px) { .hero-mk-illus { height: 460px; } }

.stat-section { padding: var(--section-pt, 96px) 0; }
.stat-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 2px;
 background: var(--b-topbar);
 border: 1px solid var(--b-topbar);
 margin-top: 56px;
}
.stat-cell {
 background: var(--c-white);
 padding: 56px 48px;
}
.stat-big {
 font-size: clamp(64px, 10vw, 120px);
 font-weight: 600;
 letter-spacing: -0.05em;
 line-height: 1;
 color: var(--c-brand);
 margin-bottom: 16px;
}
.stat-label {
 color: var(--c-primary);
 margin-bottom: 12px;
}
.stat-desc {
 color: var(--c-gray-muted);
 max-width: 400px;
 margin: 0;
}
.stat-cell--muted .stat-big { color: var(--c-gray-dim); }
.stat-cell--muted { background: var(--bg-surface); }
@media (max-width: 767px) {
 .stat-grid { grid-template-columns: 1fr; }
 .stat-cell { padding: 36px 28px; }
}

.formats-section {
 padding: var(--section-pt, 96px) 0;
 background: var(--bg-surface);
}
.formats-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
 margin-top: 56px;
}
@media (max-width: 767px) { .formats-grid { grid-template-columns: 1fr; } }
.format-card {
 background: var(--c-white);
 padding: 40px 36px 36px;
 text-align: left;
}
.format-icon {
 display: block;
 font-size: 40px;
 color: var(--c-brand);
 margin-bottom: 18px;
}
.format-title {
 color: var(--c-primary);
 margin-bottom: 0;
}
.format-body {
 color: var(--c-gray);
 margin-top: 16px;
}

.perso-section {
 padding: var(--section-pt, 96px) 0;
 background: var(--bg-surface);
}
.perso-intro {
 max-width: 680px;
 margin: 0 auto 64px;
 text-align: center;
}
.perso-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0;
 border-top: 2px solid var(--c-brand);
}
.perso-item {
 padding: 36px 32px 40px;
 border-right: 1px solid var(--b-topbar);
}
.perso-item:first-child { padding-left: 0; }
.perso-item:last-child { border-right: none; padding-right: 0; }
.perso-icon {
 display: block;
 font-size: 32px;
 color: var(--c-brand);
 margin-bottom: 20px;
}
.perso-title {
 color: var(--c-primary);
 margin-bottom: 10px;
}
.perso-body {
 color: var(--c-gray-muted);
 margin: 0;
}
@media (max-width: 767px) {
 .perso-grid { grid-template-columns: 1fr; }
 .perso-item { border-right: none; border-top: 1px solid var(--b-topbar); padding: 28px 0 32px; }
 .perso-item:first-child { border-top: none; }
}

.targeting-section { padding: var(--section-pt, 96px) 0; }
.targeting-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 margin-top: 56px;
}
@media (max-width: 767px) { .targeting-grid { grid-template-columns: 1fr; } }
.targeting-card {
 padding: 44px 40px;
 background: var(--bg-surface);
}
@media (max-width: 575px) { .targeting-card { padding: 32px 24px; } }
.targeting-icon {
 display: block;
 font-size: 40px;
 color: var(--c-brand);
 margin-bottom: 24px;
}
.targeting-title {
 color: var(--c-primary);
 margin-bottom: 12px;
}
.targeting-body {
 color: var(--c-gray-muted);
 margin: 0;
}

.integration-section {
 padding: var(--section-pt, 96px) 0;
 background: var(--c-primary);
}
.integration-section .section-h2 { color: var(--c-white); }
.integration-subtitle {
 color: rgba(255,255,255,0.6);
 max-width: 540px;
 margin: 16px auto 0;
 text-align: center;
}
.integration-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 2px;
 background: rgba(255,255,255,0.08);
 margin-top: 56px;
}
@media (max-width: 575px) { .integration-grid { grid-template-columns: 1fr; } }
.integration-card {
 background: var(--c-primary);
 padding: 36px 28px;
}
.integration-card-icon {
 display: block;
 font-size: 32px;
 color: rgba(255,255,255,0.55);
 margin-bottom: 20px;
}
.integration-card-name {
 color: var(--c-white);
 margin-bottom: 10px;
}
.integration-card-body {
 color: rgba(255,255,255,0.5);
 margin: 0;
}
.integration-webhook-note {
 margin-top: 40px;
 text-align: center;
 font-size: var(--fs-sm);
 color: rgba(255,255,255,0.45);
}
.integration-webhook-note a {
 color: rgba(255,255,255,0.7);
 text-decoration: underline;
}
.integration-webhook-note a:hover { color: var(--c-white); }


/* ─────────────────────────────────────────────
   PAGE : CATALOGUE D'APPS
   ───────────────────────────────────────────── */

.hero-apps {
 background: var(--bg-surface);
 text-align: center;
 padding: 96px 0 80px;
}
.hero-apps-surtitle {
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--c-brand);
 margin-bottom: 24px;
}
.hero-apps-title {
 font-size: clamp(36px, 5.5vw, 72px);
 font-weight: 600;
 letter-spacing: -0.04em;
 line-height: 1.05;
 color: var(--c-primary);
 max-width: 880px;
 margin: 0 auto 24px;
}
.hero-apps-sub {
 color: var(--c-gray-muted);
 max-width: 560px;
 margin: 0 auto 44px;
}
.hero-apps-ctas {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 28px;
 flex-wrap: wrap;
}
.hero-apps-cta-primary {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 15px 28px;
 background: var(--c-brand);
 color: var(--c-white);
 font-size: var(--fs-base);
 font-weight: 600;
 letter-spacing: -0.02em;
 text-decoration: none;
 line-height: 1.2;
}
.hero-apps-cta-primary:hover { background: #4338e0; color: var(--c-white); }
.hero-apps-cta-secondary {
 font-size: var(--fs-base);
 color: var(--c-gray-muted);
 text-decoration: none;
 letter-spacing: -0.02em;
}
.hero-apps-cta-secondary:hover { color: var(--c-primary); text-decoration: underline; }

.why-section { padding: var(--section-pt, 96px) 0; }
.why-intro {
 max-width: 680px;
 margin: 0 auto 64px;
 text-align: center;
}
.why-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0;
 border-top: 2px solid var(--c-brand);
}
.why-item {
 padding: 36px 32px 40px;
 border-right: 1px solid var(--b-topbar);
}
.why-item:first-child { padding-left: 0; }
.why-item:last-child { border-right: none; padding-right: 0; }
.why-icon {
 display: block;
 font-size: 32px;
 color: var(--c-brand);
 margin-bottom: 20px;
}
.why-title {
 color: var(--c-primary);
 margin-bottom: 10px;
}
.why-body {
 color: var(--c-gray-muted);
 margin: 0;
}
@media (max-width: 767px) {
 .why-grid { grid-template-columns: 1fr; }
 .why-item { border-right: none; border-top: 1px solid var(--b-topbar); padding: 28px 0 32px; }
 .why-item:first-child { border-top: none; }
}

.solves-section {
 padding: var(--section-pt, 96px) 0;
 background: var(--c-primary);
}
.solves-section .section-h2 { color: var(--c-white); text-align: center; }
.solves-subtitle {
 color: rgba(255,255,255,0.55);
 max-width: 540px;
 margin: 16px auto 0;
 text-align: center;
}
.solves-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 2px;
 background: rgba(255,255,255,0.07);
 margin-top: 56px;
}
@media (max-width: 767px) { .solves-grid { grid-template-columns: 1fr; } }
.solves-card {
 background: var(--c-primary);
 padding: 44px 40px;
}
@media (max-width: 575px) { .solves-card { padding: 32px 24px; } }
.solves-card-icon {
 display: block;
 font-size: 36px;
 color: rgba(255,255,255,0.45);
 margin-bottom: 24px;
}
.solves-card-title {
 color: var(--c-white);
 margin-bottom: 10px;
}
.solves-card-body {
 color: rgba(255,255,255,0.5);
 margin: 0;
}

.evolution-section { padding: var(--section-pt, 96px) 0; }
.evolution-intro {
 max-width: 640px;
 margin: 0 auto 56px;
 text-align: center;
}
.evolution-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
}
@media (max-width: 767px) { .evolution-grid { grid-template-columns: 1fr; } }
.evolution-card {
 background: var(--bg-surface);
 padding: 36px 32px 40px;
}
.evolution-card-num {
 display: block;
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.12em;
 color: var(--c-brand);
 margin-bottom: 28px;
}
.evolution-card-icon {
 display: block;
 font-size: 28px;
 color: var(--c-primary);
 margin-bottom: 16px;
}
.evolution-card-title {
 color: var(--c-primary);
 margin-bottom: 8px;
}
.evolution-card-body {
 color: var(--c-gray-muted);
 margin: 0;
}

.catalogue-section {
 padding: var(--section-pt, 96px) 0 calc(var(--section-pt, 96px) * 1.5);
 background: var(--bg-surface);
}
.catalogue-category-header {
 display: flex;
 align-items: center;
 gap: 16px;
 margin: 64px 0 24px;
 padding-bottom: 16px;
 border-bottom: 1px solid var(--b-topbar);
}
.catalogue-category-header:first-of-type { margin-top: 48px; }
.catalogue-category-label {
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--c-brand);
 margin: 0;
}
.catalogue-category-count {
 font-size: var(--fs-xs);
 color: var(--c-gray-dim);
 margin: 0;
}
.catalogue-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
}
@media (max-width: 991px) { .catalogue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .catalogue-grid { grid-template-columns: 1fr; } }
.catalogue-card {
 background: var(--c-white);
 display: flex;
 flex-direction: column;
}
.catalogue-card-img {
 width: 80%;
 height: auto;
 display: block;
 margin: 0 auto;
}
.catalogue-card-body {
 padding: 24px 24px 16px;
 flex: 1;
}
.catalogue-card-title {
 color: var(--c-primary);
 margin-bottom: 8px;
}
.catalogue-card-desc {
 color: var(--c-gray-muted);
 margin: 0;
}
.catalogue-card-link {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 14px 24px;
 font-size: var(--fs-sm);
 font-weight: 600;
 color: var(--c-brand);
 text-decoration: none;
 border-top: 1px solid var(--b-topbar);
}
.catalogue-card-link:hover { color: var(--c-brand); text-decoration: underline; }

.custom-section {
 padding: calc(var(--section-pt, 96px) * 1.5) 0;
 background: var(--c-brand);
 text-align: center;
}
.custom-section-icon {
 font-size: 56px;
 display: block;
 margin-bottom: 32px;
 color: rgba(255,255,255,0.6);
}
.custom-section-title {
 color: var(--c-white);
 max-width: 720px;
 margin: 0 auto 20px;
}
.custom-section-body {
 color: rgba(255,255,255,0.65);
 max-width: 520px;
 margin: 0 auto 44px;
}
.custom-section-actions {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 28px;
 flex-wrap: wrap;
}
.custom-section-cta {
 display: inline-block;
 padding: 15px 32px;
 background: var(--c-white);
 color: var(--c-brand);
 font-size: var(--fs-base);
 font-weight: 600;
 letter-spacing: -0.02em;
 text-decoration: none;
 line-height: 1.2;
}
.custom-section-cta:hover { background: rgba(255,255,255,0.92); color: var(--c-brand); }


/* ─────────────────────────────────────────────
   PAGE : DÉVELOPPEURS / API
   ───────────────────────────────────────────── */

.hero-dev {
 background: var(--c-primary);
 text-align: center;
 padding: 80px 0 0;
 overflow: hidden;
}
.hero-dev-surtitle {
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: rgba(255,255,255,0.45);
 margin-bottom: 24px;
}
.hero-dev-title {

 color: var(--c-white);

}
.hero-dev-sub {
 color: rgba(255,255,255,0.55);

}
.hero-dev-ctas {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 16px;
 flex-wrap: wrap;
 margin-bottom: 64px;
     margin-top: 80px;
}
.hero-dev-cta-primary {
 display: inline-block;
 padding: 13px 28px;
 background: var(--c-brand);
 color: var(--c-white);
 font-size: var(--fs-base);
 font-weight: 600;
 letter-spacing: -0.02em;
 text-decoration: none;
}
.hero-dev-cta-primary:hover { background: #4338e0; color: var(--c-white); }
.hero-dev-cta-secondary {
 display: inline-block;
 padding: 12px 28px;
 border: 1px solid rgba(255,255,255,0.25);
 color: rgba(255,255,255,0.7);
 font-size: var(--fs-base);
 font-weight: 400;
 letter-spacing: -0.02em;
 text-decoration: none;
}
.hero-dev-cta-secondary:hover { border-color: rgba(255,255,255,0.55); color: var(--c-white); }

.hero-dev-code-wrap {
 max-width: 700px;
 margin: 0 auto;
 text-align: left;
}
.hero-dev-code {
 background: #0c0c0d;
 border: 1px solid rgba(255,255,255,0.07);
 border-bottom: none;
}
.hero-dev-code-bar {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 11px 16px;
 background: rgba(255,255,255,0.03);
 border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-dev-code-dot {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: rgba(255,255,255,0.12);
 flex-shrink: 0;
}
.hero-dev-code-endpoint {
 margin-left: 8px;
 font-family: 'Courier New', Courier, monospace;
 font-size: 11px;
 color: rgba(255,255,255,0.3);
 letter-spacing: 0.02em;
}
.hero-dev-code-endpoint .c-method { color: #7dd3fc; }
.hero-dev-code-endpoint .c-path { color: rgba(255,255,255,0.45); }
.hero-dev-code-pre {
 margin: 0;
 padding: 20px 22px 4px;
 font-family: 'Courier New', Courier, monospace;
 font-size: 12.5px;
 line-height: 1.75;
 color: rgba(255,255,255,0.7);
 overflow-x: auto;
 white-space: pre;
}
.c-key { color: #93c5fd; }
.c-str { color: #86efac; }
.c-comment { color: rgba(255,255,255,0.25); font-style: italic; }
.hero-dev-code-response {
 padding: 10px 22px 18px;
 font-family: 'Courier New', Courier, monospace;
 font-size: 12px;
 color: rgba(255,255,255,0.3);
}
.c-ok { color: #4ade80; }

.approach-section { padding: var(--section-pt, 96px) 0; }
.approach-intro {
 max-width: 640px;
 margin: 0 auto 56px;
 text-align: center;
}
.approach-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 2px;
 background: var(--b-topbar);
}
@media (max-width: 767px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-card {
 background: var(--c-white);
 padding: 48px 44px;
}
@media (max-width: 575px) { .approach-card { padding: 32px 24px; } }
.approach-card-icon {
 display: block;
 font-size: 40px;
 color: var(--c-brand);
 margin-bottom: 24px;
}
.approach-card-label {
 display: inline-block;
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--c-brand);
 margin-bottom: 16px;
}
.approach-card-title {
 color: var(--c-primary);
 margin-bottom: 14px;
 line-height: 1.15;
}
.approach-card-body {
 color: var(--c-gray-muted);
 margin: 0 0 28px;
}
.approach-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 28px;
}
.approach-tag {
 display: inline-block;
 padding: 4px 10px;
 background: var(--bg-surface);
 font-family: 'Courier New', Courier, monospace;
 font-size: 11px;
 color: var(--c-gray-muted);
 letter-spacing: 0.02em;
}
.approach-card-link {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: var(--fs-sm);
 font-weight: 600;
 color: var(--c-brand);
 text-decoration: none;
}
.approach-card-link:hover { text-decoration: underline; color: var(--c-brand); }

.types-section {
 padding: var(--section-pt, 96px) 0;
 background: var(--bg-surface);
}
.types-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 10px;
 margin-top: 56px;
}
@media (max-width: 991px) { .types-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .types-grid { grid-template-columns: repeat(2, 1fr); } }
.type-card {
 background: var(--c-white);
 padding: 28px 16px 24px;
 text-align: center;
}
.type-icon {
 display: block;
 font-size: 36px;
 color: var(--c-brand);
 margin-bottom: 12px;
}
.type-title {
 font-size: 14px;
 font-weight: 600;
 color: var(--c-primary);
 letter-spacing: -0.02em;
 line-height: 1.3;
 margin-bottom: 0;
}
.type-mode {
 display: block;
 font-size: var(--fs-xs);
 color: var(--c-gray-dim);
 margin-top: 5px;
}

.cap-section {
 padding: var(--section-pt, 96px) 0;
 background: var(--c-primary);
}
.cap-section .section-h2 { color: var(--c-white); text-align: center; }
.cap-subtitle {
 color: var(--c-white);
 max-width: 540px;
 margin: 16px auto 56px;
 text-align: center;
}
.cap-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2px;
 background: rgba(255,255,255,0.07);
}
@media (max-width: 767px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .cap-grid { grid-template-columns: 1fr; } }
.cap-card {
 background: var(--c-primary);
 padding: 36px 28px;
}
.cap-card-icon {
 display: block;
 font-size: 32px;
 color: var(--c-white);
 margin-bottom: 20px;
}
.cap-card-title {
 color: var(--c-white);
 margin-bottom: 8px;
}
.cap-card-body {
 color: var(--c-white);
 margin: 0;
}
.cap-card-code {
 display: inline;
 font-family: 'Courier New', Courier, monospace;
 font-size: inherit;
 background: rgba(255,255,255,0.08);
 color: #7dd3fc;
 padding: 1px 5px;
}
.cap-doc-link {
 display: block;
 margin-top: 44px;
 text-align: center;
 font-size: var(--fs-sm);
 color: var(--c-white);
}
.cap-doc-link a { color: var(--c-white); text-decoration: underline; }
.cap-doc-link a:hover { color: var(--c-white); }

.nocode-section { padding: var(--section-pt, 96px) 0; }
.nocode-intro {
 max-width: 640px;
 margin: 0 auto 56px;
 text-align: center;
}
.nocode-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
}
@media (max-width: 767px) { .nocode-grid { grid-template-columns: 1fr; } }
.nocode-card {
 background: var(--bg-surface);
 padding: 36px 28px 32px;
}
.nocode-card-icon {
 display: block;
 font-size: 36px;
 color: var(--c-brand);
 margin-bottom: 20px;
}
.nocode-card-name {
 color: var(--c-primary);
 margin-bottom: 10px;
}
.nocode-card-body {
 color: var(--c-gray-muted);
 margin: 0;
}
.nocode-card-link {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 margin-top: 20px;
 font-size: var(--fs-sm);
 font-weight: 600;
 color: var(--c-brand);
 text-decoration: none;
}
.nocode-card-link:hover { text-decoration: underline; }

.dev-av-section {
 padding: var(--section-pt, 96px) 0;
 background: var(--bg-surface);
}
.dev-av-intro {
 max-width: 640px;
 margin: 0 auto 64px;
 text-align: center;
}
.dev-av-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 border-top: 1px solid var(--b-topbar);
}
@media (max-width: 767px) { .dev-av-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .dev-av-grid { grid-template-columns: 1fr; } }
.dev-av-item {
 background: var(--c-white);
 padding: 36px 28px 40px;
 border-right: 1px solid var(--b-topbar);
 border-bottom: 1px solid var(--b-topbar);
}
.dev-av-item:nth-child(3n) { border-right: none; }
@media (max-width: 767px) {
 .dev-av-item:nth-child(3n) { border-right: 1px solid var(--b-topbar); }
 .dev-av-item:nth-child(2n) { border-right: none; }
}
@media (max-width: 479px) {
 .dev-av-item:nth-child(2n) { border-right: 1px solid var(--b-topbar); }
 .dev-av-item { border-right: none; }
}
.dev-av-num {
 display: block;
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.12em;
 color: var(--c-brand);
 margin-bottom: 24px;
}
.dev-av-icon {
 display: block;
 font-size: 28px;
 color: var(--c-primary);
 margin-bottom: 14px;
}
.dev-av-title {
 color: var(--c-primary);
 margin-bottom: 8px;
}
.dev-av-body {
 color: var(--c-gray-muted);
 margin: 0;
}