/* ════════════════════════════════════════════════════════════
   EchoBridge, styles de la page d'accueil, version 2.0
   Charte officielle (alignée plateforme + reels)
   ════════════════════════════════════════════════════════════ */
:root {
  --eb-navy:      #043740;
  --eb-navy-mid:  #0A5868;
  --eb-teal-deep: #015464;
  --eb-teal:      #009EA0;
  --eb-teal-lt:   #54CAC3;
  --eb-teal-pale: #E6F7F7;
  --eb-bg:        #F2FAFA;
  --eb-white:     #FFFFFF;
  --eb-text:      #043740;
  --eb-gray:      #3E5A5A;
  --eb-border:    #D4EEEE;
  --eb-red:       #EF4444;
  --eb-amber:     #F59E0B;

  /* Jost d'abord : c'est la police des titres reglee dans UiCore, servie sur
     toutes les pages. Glacial Indifference reste en second, pour le jour ou
     on la charge depuis Fontshare. Sans Jost en tete, les gabarits PHP
     retombaient sur Nunito pendant que la page d'accueil, elle, etait en
     Jost : deux typographies de titre sur le meme site. */
  --eb-font-title: 'Jost', 'Glacial Indifference', 'Nunito', system-ui, sans-serif;
  --eb-font-body:  'Nunito', system-ui, sans-serif;
}

/* Reset léger pour la zone homepage */
.hero, .how-it-works, .platform-tour, .features, .value-prop, .cta-section {
  font-family: var(--eb-font-body);
  color: var(--eb-text);
  box-sizing: border-box;
}
.hero *, .how-it-works *, .platform-tour *, .features *, .value-prop *, .cta-section * {
  box-sizing: border-box;
}

/* ════════════════ HERO ════════════════ */
.hero {
  background: linear-gradient(135deg, var(--eb-navy) 0%, var(--eb-teal-deep) 60%, var(--eb-teal) 100%);
  padding: 96px 24px 84px;
  text-align: center;
  color: var(--eb-white);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 1200px; height: 1200px;
  background: radial-gradient(circle, rgba(84,202,195,.25) 0%, transparent 60%);
  pointer-events: none;
}
.hero-content {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.hero .subtitle {
  display: inline-block;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 8px 18px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  color: var(--eb-teal-lt);
}
.hero h1 {
  font-family: var(--eb-font-title);
  font-size: 4.2em;
  font-weight: 900;
  letter-spacing: -2px;
  margin: 0 0 24px;
  line-height: 1;
}
.hero-accent { color: var(--eb-teal-lt); }
.hero p {
  font-size: 1.2em;
  line-height: 1.55;
  margin: 0 auto 40px;
  max-width: 660px;
  opacity: .92;
}
.hero-cta-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.cta-button {
  display: inline-block;
  background: var(--eb-white);
  color: var(--eb-teal-deep);
  padding: 18px 38px;
  border-radius: 100px;
  font-family: var(--eb-font-title);
  font-weight: 800;
  font-size: 1.05em;
  letter-spacing: .5px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.2);
}
.cta-button-ghost {
  display: inline-block;
  background: transparent;
  color: var(--eb-white);
  padding: 18px 38px;
  border-radius: 100px;
  font-family: var(--eb-font-title);
  font-weight: 700;
  font-size: 1.05em;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,.4);
  transition: background .2s ease, border-color .2s ease;
}
.cta-button-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.7);
}
.hero-trust {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .92em;
  color: rgba(255,255,255,.78);
  font-weight: 600;
}

/* ════════════════ SECTION HEADERS COMMUNS ════════════════ */
.section-title {
  font-family: var(--eb-font-title);
  text-align: center;
  font-size: 2.8em;
  font-weight: 900;
  color: var(--eb-navy);
  letter-spacing: -1.5px;
  margin: 0 0 12px;
}
.section-subtitle {
  text-align: center;
  font-size: 1.15em;
  color: var(--eb-gray);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.5;
}

/* ════════════════ HOW IT WORKS ════════════════ */
.how-it-works {
  padding: 80px 24px;
  background: var(--eb-white);
}
.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.step {
  text-align: center;
  padding: 38px 28px;
  background: var(--eb-bg);
  border-radius: 18px;
  border: 1px solid var(--eb-border);
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,158,160,.18);
  border-color: var(--eb-teal);
}
.step-number {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--eb-teal-lt) 0%, var(--eb-teal) 100%);
  color: var(--eb-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--eb-font-title);
  font-size: 1.8em;
  font-weight: 900;
  margin: 0 auto 22px;
  box-shadow: 0 10px 24px rgba(0,158,160,.35);
}
.step h3 {
  font-family: var(--eb-font-title);
  font-size: 1.35em;
  font-weight: 800;
  color: var(--eb-navy);
  margin: 0 0 12px;
}
.step p {
  color: var(--eb-gray);
  font-size: .98em;
  line-height: 1.6;
  margin: 0;
}

/* ════════════════ PLATFORM TOUR (nouveau bloc) ════════════════ */
.platform-tour {
  padding: 80px 24px;
  background: linear-gradient(180deg, var(--eb-bg) 0%, var(--eb-white) 100%);
}
.tour-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 32px;
}
.tour-eyebrow {
  display: inline-block;
  font-size: .82em;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eb-teal);
  background: var(--eb-teal-pale);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.tour-side {
  max-width: 1240px;
  margin: 0 auto 56px;
}
.tour-side-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}
.tour-pill {
  display: inline-block;
  font-family: var(--eb-font-title);
  font-size: .92em;
  font-weight: 900;
  padding: 10px 22px;
  border-radius: 100px;
  margin-bottom: 16px;
  letter-spacing: .5px;
}
.tour-pill-teal {
  background: var(--eb-teal);
  color: var(--eb-white);
}
.tour-pill-navy {
  background: var(--eb-navy);
  color: var(--eb-teal-lt);
}
.tour-side-header h3 {
  font-family: var(--eb-font-title);
  font-size: 1.9em;
  font-weight: 800;
  color: var(--eb-navy);
  letter-spacing: -0.8px;
  margin: 0 0 14px;
  line-height: 1.15;
}
.tour-side-header p {
  font-size: 1.05em;
  color: var(--eb-gray);
  line-height: 1.55;
  margin: 0;
}

.tour-grid {
  display: grid;
  gap: 30px;
}
.tour-grid-mobile { grid-template-columns: repeat(3, 1fr); }
.tour-grid-desktop { grid-template-columns: repeat(2, 1fr); }
.tour-grid-desktop .tour-card-wide { grid-column: 1 / -1; }

.tour-card {
  background: var(--eb-white);
  border-radius: 22px;
  padding: 30px 26px 26px;
  border: 1px solid var(--eb-border);
  box-shadow: 0 14px 40px rgba(4,55,64,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.tour-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(4,55,64,.12);
}
.tour-card figcaption {
  text-align: center;
  margin-top: 22px;
}
.tour-card h4 {
  font-family: var(--eb-font-title);
  font-size: 1.2em;
  font-weight: 800;
  color: var(--eb-navy);
  margin: 0 0 8px;
}
.tour-card p {
  font-size: .95em;
  color: var(--eb-gray);
  line-height: 1.55;
  margin: 0;
}

/* ── Frame iPhone ── */
.phone-frame {
  width: 260px;
  max-width: 100%;
  margin: 0 auto;
  background: #0a0a0a;
  border-radius: 32px;
  padding: 7px;
  box-shadow: 0 30px 60px rgba(0,0,0,.22), 0 0 0 4px rgba(255,255,255,.04);
  position: relative;
}
.phone-frame::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 18px;
  background: #0a0a0a;
  border-radius: 12px;
  z-index: 2;
}
.phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  background: var(--eb-bg);
}

/* ── Frame MacBook ── */
.laptop-frame {
  background: #0a0a0a;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 30px 70px rgba(0,0,0,.22);
  position: relative;
  margin: 0 auto;
  max-width: 100%;
}
.laptop-frame::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -10px;
  left: -3%;
  width: 106%;
  height: 12px;
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 0 0 10px 10px;
}
.laptop-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--eb-bg);
}
.laptop-frame-sm { max-width: 480px; }

.tour-footer-cta {
  text-align: center;
  margin-top: 30px;
}
.tour-footer-cta .cta-button {
  background: var(--eb-teal);
  color: var(--eb-white);
  box-shadow: 0 14px 40px rgba(0,158,160,.45);
}

/* ════════════════ FEATURES ════════════════ */
.features {
  padding: 80px 24px;
  background: var(--eb-bg);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  max-width: 1200px;
  margin: 0 auto;
}
.feature-card {
  background: var(--eb-white);
  padding: 32px 28px;
  border-radius: 18px;
  border-top: 4px solid var(--eb-teal);
  box-shadow: 0 6px 20px rgba(4,55,64,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(4,55,64,.12);
}
.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--eb-teal-lt) 0%, var(--eb-teal) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  margin-bottom: 18px;
  color: var(--eb-white);
}
.feature-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}
.feature-card h3 {
  font-family: var(--eb-font-title);
  font-size: 1.25em;
  font-weight: 800;
  color: var(--eb-navy);
  margin: 0 0 10px;
}
.feature-card p {
  color: var(--eb-gray);
  font-size: .95em;
  line-height: 1.55;
  margin: 0;
}

/* ════════════════ VALUE PROP ════════════════ */
.value-prop {
  padding: 80px 24px;
  background: linear-gradient(135deg, var(--eb-tealDeep, var(--eb-teal-deep)) 0%, var(--eb-navy) 100%);
  color: var(--eb-white);
  text-align: center;
}
.value-prop-content {
  max-width: 920px;
  margin: 0 auto;
}
.value-prop h2 {
  font-family: var(--eb-font-title);
  font-size: 2.8em;
  font-weight: 900;
  letter-spacing: -1px;
  margin: 0 0 24px;
}
.value-prop > .value-prop-content > p {
  font-size: 1.15em;
  line-height: 1.6;
  margin: 0 auto 48px;
  max-width: 720px;
  opacity: .92;
}
.benefits-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin: 0;
}
.benefit-item {
  padding: 26px 22px;
  background: rgba(255,255,255,.07);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.15);
  text-align: left;
}
.benefit-item::before {
  content: "✓";
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  font-weight: 900;
  margin-bottom: 14px;
  background: var(--eb-teal-lt);
  color: var(--eb-navy);
  border-radius: 50%;
}
.benefit-item h4 {
  font-family: var(--eb-font-title);
  font-size: 1.1em;
  font-weight: 800;
  margin: 0 0 6px;
}
.benefit-item p {
  font-size: .95em;
  opacity: .88;
  line-height: 1.5;
  margin: 0;
}

/* ════════════════ CTA FINAL ════════════════ */
.cta-section {
  padding: 110px 24px;
  background: var(--eb-white);
  text-align: center;
}
.cta-section h2 {
  font-family: var(--eb-font-title);
  font-size: 4em;
  font-weight: 900;
  letter-spacing: -2px;
  color: var(--eb-navy);
  margin: 0 0 18px;
  text-transform: uppercase;
}
.cta-section p {
  font-size: 1.1em;
  color: var(--eb-gray);
  margin: 0 auto 40px;
  max-width: 580px;
}
.cta-button-dark {
  background: var(--eb-teal);
  color: var(--eb-white);
  font-family: var(--eb-font-title);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cta-button-dark:hover {
  background: var(--eb-teal-deep);
}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 980px) {
  .hero h1 { font-size: 3em; }
  .section-title, .value-prop h2, .cta-section h2 { font-size: 2.2em; }
  .tour-grid-mobile { grid-template-columns: repeat(2, 1fr); }
  .tour-grid-desktop { grid-template-columns: 1fr; }
  .tour-grid-desktop .tour-card-wide { grid-column: auto; }
}
@media (max-width: 640px) {
  .hero { padding: 80px 18px 70px; }
  .hero h1 { font-size: 2.4em; }
  .hero .subtitle, .tour-eyebrow { font-size: .72em; letter-spacing: 2px; }
  .section-title, .value-prop h2 { font-size: 1.9em; }
  .cta-section h2 { font-size: 2.4em; }
  .tour-grid-mobile { grid-template-columns: 1fr; }
  .phone-frame { width: 230px; }
  .hero-cta-group { flex-direction: column; align-items: stretch; padding: 0 12px; }
  .cta-button, .cta-button-ghost { padding: 16px 26px; font-size: 1em; }
}

/* ════════════ SECTIONS AJOUTÉES (refonte août 2026) ════════════ */
.eb-section { padding: 88px 24px; }
.eb-section > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.eb-narrow { max-width: 760px; }
.eb-situation, .eb-reperes, .eb-faq { background: var(--eb-bg); }
.eb-presentation, .eb-methode, .eb-referentiels { background: var(--eb-white); }

.eb-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.eb-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }

.eb-card {
  background: var(--eb-white); border: 1px solid var(--eb-border);
  border-radius: 20px; padding: 34px 28px;
}
.eb-card h3 {
  font-family: var(--eb-font-title); font-size: 1.25em; font-weight: 800;
  color: var(--eb-navy); margin: 0 0 12px; line-height: 1.25;
}
.eb-card p { color: var(--eb-gray); line-height: 1.6; margin: 0; }

.eb-lead { font-size: 1.15em; line-height: 1.65; color: var(--eb-navy); margin: 0 0 32px; }

.eb-limites {
  background: var(--eb-teal-pale); border-radius: 20px; padding: 30px 32px;
}
.eb-limites p { color: var(--eb-teal-deep); line-height: 1.65; margin: 0 0 12px; }
.eb-limites-cle {
  font-family: var(--eb-font-title); font-weight: 800;
  color: var(--eb-navy) !important; margin-bottom: 0 !important;
}

.eb-frise { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; list-style: none; padding: 0; margin: 0 auto; }
.eb-frise-item { background: var(--eb-bg); border: 1px solid var(--eb-border); border-radius: 20px; padding: 30px 26px; }
.eb-frise-num {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--eb-teal); color: var(--eb-white);
  font-family: var(--eb-font-title); font-weight: 900; font-size: 1.2em; margin-bottom: 16px;
}
.eb-frise-item h3 { font-family: var(--eb-font-title); font-size: 1.2em; color: var(--eb-navy); margin: 0 0 10px; }
.eb-frise-item p { color: var(--eb-gray); line-height: 1.6; margin: 0; font-size: .96em; }

.eb-repere { text-align: center; }
.eb-repere-n {
  font-family: var(--eb-font-title); font-size: 3.4em; font-weight: 900;
  color: var(--eb-navy); line-height: 1; font-variant-numeric: tabular-nums; margin: 0 0 10px;
}
.eb-repere-l { color: var(--eb-gray); line-height: 1.5; margin: 0; font-size: .96em; }

.eb-ref { border-top: 3px solid var(--eb-teal); padding-top: 18px; }
.eb-ref-n { font-family: var(--eb-font-title); font-size: 1.3em; font-weight: 900; color: var(--eb-navy); margin: 0 0 8px; }
.eb-ref-d { color: var(--eb-gray); line-height: 1.55; margin: 0; font-size: .94em; }

.eb-faq-item {
  background: var(--eb-white); border: 1px solid var(--eb-border);
  border-radius: 16px; padding: 20px 24px; margin-bottom: 14px;
}
.eb-faq-item summary {
  font-family: var(--eb-font-title); font-weight: 800; font-size: 1.05em;
  color: var(--eb-navy); cursor: pointer; list-style: none;
}
.eb-faq-item summary::-webkit-details-marker { display: none; }
.eb-faq-item summary::after { content: '+'; float: right; color: var(--eb-teal); font-size: 1.3em; line-height: 1; }
.eb-faq-item[open] summary::after { content: '\2212'; }
.eb-faq-item p { color: var(--eb-gray); line-height: 1.65; margin: 14px 0 0; }

.eb-cta { background: var(--eb-navy); text-align: center; color: var(--eb-white); }
.eb-cta h2 { font-family: var(--eb-font-title); font-size: 2.6em; font-weight: 900; margin: 0 0 16px; }
.eb-cta > p { font-size: 1.1em; opacity: .88; margin: 0 auto 32px; max-width: 560px; }
/* La mention d'essai etait a 70 % d'opacite sur navy : illisible.
   Le teal clair passe 6,5:1 sur ce fond. */
.eb-cta .eb-mention { opacity: 1; color: var(--eb-teal-lt); font-size: .95em; margin-top: 20px; }
.cta-button-dark { background: var(--eb-teal-lt); color: var(--eb-navy); }

.eb-mention { color: var(--eb-gray); font-size: .92em; line-height: 1.6; text-align: center; margin-top: 28px; }

.eb-home :focus-visible { outline: 2px solid var(--eb-teal); outline-offset: 2px; }

@media (max-width: 768px) {
  .eb-section { padding: 56px 20px; }
  .eb-cta h2 { font-size: 2em; }
  .eb-repere-n { font-size: 2.8em; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-home *, .eb-home *::before, .eb-home *::after {
    animation: none !important; transition: none !important;
  }
}

/* ════════════ TARIFS ════════════ */
.eb-offre {
  background: var(--eb-white); border: 1px solid var(--eb-border);
  border-radius: 22px; padding: 36px 30px; display: flex; flex-direction: column;
}
.eb-offre-phare { border-color: var(--eb-teal); border-width: 2px; }
.eb-offre-badge {
  align-self: flex-start; background: var(--eb-teal); color: var(--eb-white);
  font-family: var(--eb-font-title); font-weight: 800; font-size: .78em;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin: 0 0 16px;
}
.eb-offre-nom { font-family: var(--eb-font-title); font-size: 1.5em; font-weight: 900; color: var(--eb-navy); margin: 0 0 14px; }
.eb-offre-prix { margin: 0 0 6px; }
.eb-offre-montant {
  font-family: var(--eb-font-title); font-size: 2.6em; font-weight: 900;
  color: var(--eb-navy); line-height: 1; font-variant-numeric: tabular-nums;
}
.eb-offre-unite { display: block; color: var(--eb-gray); font-size: .92em; margin-top: 6px; }
.eb-offre-users { color: var(--eb-teal-deep); font-weight: 700; margin: 0 0 14px; }
.eb-offre-pour { color: var(--eb-gray); line-height: 1.6; margin: 0 0 22px; }
.eb-offre-liste { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.eb-offre-liste li { position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--eb-navy); line-height: 1.55; font-size: .96em; }
.eb-offre-liste li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 14px; height: 8px; border-left: 2px solid var(--eb-teal);
  border-bottom: 2px solid var(--eb-teal); transform: rotate(-45deg);
}
.cta-button-ghost-dark {
  display: inline-block; text-align: center; background: transparent;
  color: var(--eb-teal-deep); padding: 16px 32px; border-radius: 100px;
  font-family: var(--eb-font-title); font-weight: 800; text-decoration: none;
  border: 2px solid var(--eb-teal);
}
.eb-offre .cta-button { text-align: center; }

/* ════════════ DÉMONSTRATION ════════════ */
.eb-attentes { list-style: none; padding: 0; margin: 0; }
.eb-attentes li { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.eb-attentes p { color: var(--eb-navy); line-height: 1.65; margin: 0; padding-top: 8px; }
.eb-attentes .eb-frise-num { flex: 0 0 auto; margin-bottom: 0; }
.eb-demo-form { background: var(--eb-bg); }

/* ════════════ PAGES LÉGALES ════════════ */
.eb-legal { background: var(--eb-white); }
.eb-legal-corps { color: var(--eb-navy); line-height: 1.7; }
.eb-legal-corps h2 {
  font-family: var(--eb-font-title); font-size: 1.5em; font-weight: 900;
  color: var(--eb-navy); margin: 44px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--eb-border);
}
.eb-legal-corps h3 { font-family: var(--eb-font-title); font-size: 1.15em; font-weight: 800; color: var(--eb-teal-deep); margin: 30px 0 10px; }
.eb-legal-corps h4 { font-family: var(--eb-font-title); font-size: 1.02em; font-weight: 800; color: var(--eb-navy); margin: 22px 0 8px; }
.eb-legal-corps p { margin: 0 0 14px; }
.eb-legal-corps ul { margin: 0 0 18px; padding-left: 22px; }
.eb-legal-corps li { margin-bottom: 8px; }
.eb-legal-corps a { color: var(--eb-teal-deep); text-decoration: underline; }
.eb-legal-corps blockquote {
  background: var(--eb-teal-pale); border-radius: 14px;
  padding: 18px 22px; margin: 0 0 22px;
}
.eb-legal-corps blockquote p { margin: 0; color: var(--eb-teal-deep); }
.eb-legal-corps hr { border: 0; border-top: 1px solid var(--eb-border); margin: 34px 0; }
.eb-legal-corps code { background: var(--eb-bg); padding: 2px 6px; border-radius: 4px; font-size: .92em; }

/* Tableau récapitulatif des traceurs. Le conteneur défile seul sur mobile,
   la page n'a donc jamais de défilement horizontal. */
.eb-legal-corps table {
  display: block; overflow-x: auto; width: 100%;
  border-collapse: collapse; margin: 0 0 22px; font-size: .95em;
}
.eb-legal-corps th,
.eb-legal-corps td {
  border: 1px solid var(--eb-border); padding: 10px 14px;
  text-align: left; vertical-align: top;
}
.eb-legal-corps th {
  background: var(--eb-teal-pale); color: var(--eb-navy);
  font-family: var(--eb-font-title); font-weight: 800;
}
.eb-legal-corps td code { white-space: nowrap; }

/* Grille à deux colonnes, page Fonctionnalités */
.eb-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }

/* ════════════ CONTACT ════════════ */
.eb-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.eb-contact-titre { font-family: var(--eb-font-title); font-size: 1.1em; font-weight: 800; color: var(--eb-teal-deep); margin: 0 0 8px; }
.eb-contact-grid > div > h2:not(:first-child) { margin-top: 28px; }
.eb-contact-grid p { color: var(--eb-navy); line-height: 1.7; margin: 0; }
.eb-contact-grid a { color: var(--eb-teal-deep); }

/* ════════════ SCHÉMA D'ANONYMAT ════════════ */
.eb-anonymat { background: var(--eb-bg); }

.eb-pipeline {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  max-width: 1100px; margin: 0 auto;
}
.eb-pipeline-etape { position: relative; text-align: center; padding: 0 18px; }

/* Trait de liaison entre les étapes, purement décoratif. */
.eb-pipeline-etape::before {
  content: ''; position: absolute; top: 34px; left: -50%;
  width: 100%; height: 2px; background: var(--eb-teal-lt); opacity: .55;
}
.eb-pipeline-etape:first-child::before { display: none; }

.eb-pipeline-pastille {
  position: relative; z-index: 1;
  width: 68px; height: 68px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--eb-white);
  border: 2px solid var(--eb-teal); color: var(--eb-teal);
  display: flex; align-items: center; justify-content: center;
}
.eb-pipeline-pastille svg { width: 30px; height: 30px; }

.eb-pipeline-rang {
  font-family: var(--eb-font-title); font-size: .76em; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--eb-teal); margin: 0 0 6px;
}
.eb-pipeline-etape h3 {
  font-family: var(--eb-font-title); font-size: 1.08em; font-weight: 800;
  color: var(--eb-navy); margin: 0 0 10px; line-height: 1.3;
}
.eb-pipeline-texte { color: var(--eb-gray); font-size: .93em; line-height: 1.6; margin: 0; }

.eb-anonymat-cle {
  max-width: 780px; margin: 56px auto 0; text-align: center;
  font-size: 1.12em; line-height: 1.65; color: var(--eb-navy);
  background: var(--eb-white); border: 1px solid var(--eb-border);
  border-radius: 20px; padding: 30px 34px;
}

@media (max-width: 900px) {
  .eb-pipeline { grid-template-columns: 1fr; gap: 34px; }
  .eb-pipeline-etape {
    padding: 0; display: grid; grid-template-columns: 68px 1fr;
    gap: 20px; text-align: left; align-items: start;
  }
  .eb-pipeline-etape::before { top: -34px; left: 33px; width: 2px; height: 34px; }
  .eb-pipeline-pastille { grid-row: 1 / span 3; margin: 0; }
  .eb-pipeline-rang, .eb-pipeline-etape h3, .eb-pipeline-texte { grid-column: 2; }
}

@media print {
  .eb-pipeline { grid-template-columns: repeat(4, 1fr); }
  .eb-pipeline-pastille { border-color: #043740; color: #043740; }
}

/* ════════════ BANDEAU LÉGAL DE BAS DE PAGE ════════════ */
.eb-footer-legal { background: var(--eb-navy); padding: 22px 24px; }
.eb-footer-legal-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  align-items: center; justify-content: space-between;
}
.eb-footer-legal-list { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; }
.eb-footer-legal-list a {
  color: var(--eb-teal-lt); text-decoration: none; font-size: .92em;
}
.eb-footer-legal-list a:hover, .eb-footer-legal-list a:focus-visible { text-decoration: underline; }
.eb-footer-legal-copy { color: rgba(255, 255, 255, .6); font-size: .88em; margin: 0; }

/* ══════════════════════════════════════════════════════════
   RÉVÉLATION AU DÉFILEMENT
   Le masquage n'est actif que si le script a pu s'exécuter.
   Sans JavaScript, rien n'est caché.
   ══════════════════════════════════════════════════════════ */
.eb-reveal-actif .eb-home [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}
.eb-reveal-actif .eb-home [data-reveal].eb-vu {
  opacity: 1;
  transform: none;
  transition: opacity .45s cubic-bezier(.22, .61, .36, 1) calc(var(--r, 0) * 60ms),
              transform .45s cubic-bezier(.22, .61, .36, 1) calc(var(--r, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .eb-reveal-actif .eb-home [data-reveal] { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   RUPTURE DU RYTHME
   Toutes les sections ne se ressemblent plus : certaines sont
   alignées à gauche, les grilles ne sont plus toutes égales.
   ══════════════════════════════════════════════════════════ */

/* La situation : titre à gauche, cartes décalées en escalier. */
.eb-situation .section-title,
.eb-situation .section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.eb-situation .section-subtitle { max-width: 62ch; margin-bottom: 64px; }

@media (min-width: 901px) {
  .eb-situation .eb-card:nth-child(2) { transform: translateY(38px); }
  .eb-situation .eb-card:nth-child(3) { transform: translateY(76px); }
  .eb-situation .eb-grid-3 { margin-bottom: 76px; }
  .eb-reveal-actif .eb-situation [data-reveal].eb-vu:nth-child(2) { transform: translateY(38px); }
  .eb-reveal-actif .eb-situation [data-reveal].eb-vu:nth-child(3) { transform: translateY(76px); }
}

/* Deux colonnes asymétriques : texte à gauche, encadré à droite.
   Cette mise en page visait UNE section de la page d'accueil. Écrite sur
   « .eb-presentation .eb-narrow », elle s'appliquait en fait à toutes les
   sections claires de toutes les pages : un encadré seul se retrouvait en
   deuxième colonne avec la première vide, d'où de larges bandes blanches, et
   un en-tête non prévu par la règle partait se placer n'importe où.
   Elle demande désormais la classe eb-duo, posée là où elle a du sens. */
@media (min-width: 901px) {
  .eb-duo {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1.25fr .95fr;
    gap: 56px;
    align-items: start;
  }
  .eb-duo .eb-entete { grid-column: 1; text-align: left; margin: 0 0 18px; }
  .eb-duo .eb-entete .section-title,
  .eb-duo .eb-entete .section-subtitle { text-align: left; margin-left: 0; }
  .eb-duo .section-title { grid-column: 1; text-align: left; margin: 0 0 20px; }
  .eb-duo .eb-lead { grid-column: 1; }
  .eb-duo .eb-limites { grid-column: 2; grid-row: 1 / span 4; margin-top: 6px; }
}

/* Fonctionnalités : grille bento, la première carte occupe deux colonnes. */
@media (min-width: 901px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .features-grid .feature-card:first-child {
    grid-column: span 2;
    display: flex; align-items: flex-start; gap: 26px;
  }
  .features-grid .feature-card:first-child .feature-icon { flex: 0 0 auto; margin-bottom: 0; }
  .features-grid .feature-card:first-child h3 { font-size: 1.45em; }
}

/* Repères chiffrés : traitement éditorial, chiffres surdimensionnés. */
.eb-reperes .section-title { text-align: left; }
.eb-reperes .eb-grid-4 { border-top: 1px solid var(--eb-border); padding-top: 42px; gap: 0; }
.eb-repere {
  text-align: left;
  padding: 0 32px;
  border-left: 1px solid var(--eb-border);
}
.eb-repere:first-child { border-left: 0; padding-left: 0; }
.eb-repere-n { font-size: 4.4em; letter-spacing: -.04em; }
.eb-reperes .eb-mention { text-align: left; margin-left: 0; max-width: 68ch; }

@media (max-width: 900px) {
  .eb-repere { border-left: 0; padding: 0; }
  .eb-reperes .eb-grid-4 { gap: 32px; }
  .eb-repere-n { font-size: 3.2em; }
}

/* Profondeur au survol, avec intention plutôt qu'en décoration. */
.eb-card, .feature-card, .eb-offre {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.eb-card:hover, .eb-offre:hover {
  transform: translateY(-4px);
  border-color: var(--eb-teal-lt);
  box-shadow: 0 22px 48px rgba(4, 55, 64, .09);
}
@media (min-width: 901px) {
  .eb-situation .eb-card:nth-child(2):hover { transform: translateY(34px); }
  .eb-situation .eb-card:nth-child(3):hover { transform: translateY(72px); }
}

/* Ouverture : halo secondaire, pour donner de la profondeur au dégradé. */
.hero::after {
  content: '';
  position: absolute;
  right: -180px; bottom: -260px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(0,158,160,.30) 0%, transparent 65%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .eb-card, .feature-card, .eb-offre { transition: none; }
  .eb-card:hover, .eb-offre:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   CORRECTIONS APRÈS REVUE
   Densité, proportions des captures, bandeau de titre.
   ══════════════════════════════════════════════════════════ */

/* Le bandeau de titre de Lumi fait doublon sur nos gabarits. */
.eb-sans-bandeau-titre .ui-page-title,
.eb-sans-bandeau-titre .uicore-page-title,
.eb-sans-bandeau-titre .uicore-title-wrapper { display: none !important; }

/* ── Proportions des captures ──
   Les cadres étaient dimensionnés indépendamment de leur colonne : le
   téléphone flottait dans une carte trop large, et la capture du tableau de
   bord écrasait tout le reste de la section. On les cale sur leur contenant. */

.tour-card { padding: 22px 20px 20px; }
.tour-card figcaption { margin-top: 16px; text-align: left; }
.tour-card h4 { font-size: 1.05em; margin-bottom: 6px; }
.tour-card p { font-size: .9em; line-height: 1.5; }

.phone-frame { width: 100%; max-width: 218px; border-radius: 26px; padding: 6px; }

.laptop-frame-sm { max-width: 100%; }

/* La capture large ne doit plus dominer la page. */
.tour-card-wide { flex-direction: row; gap: 34px; align-items: center; }
.tour-card-wide .laptop-frame { flex: 0 1 620px; margin: 0; }
.tour-card-wide figcaption { margin-top: 0; flex: 1 1 260px; }
.tour-card-wide h4 { font-size: 1.3em; }
.tour-card-wide p { font-size: .96em; }

@media (max-width: 900px) {
  .tour-card-wide { flex-direction: column; gap: 18px; }
  .tour-card-wide .laptop-frame { flex: none; width: 100%; }
  .phone-frame { max-width: 240px; }
}

/* Les grilles se resserrent : moins de vide entre les cartes. */
.tour-grid { gap: 22px; }
.eb-grid-3, .eb-grid-2 { gap: 22px; }
.steps-container { gap: 22px; }
.features-grid { gap: 22px; }

/* Mouvement : le skill impose 150 à 300 ms, la révélation était à 450.
   Le décalage par rang rend l'entrée perceptible sans la rendre lente. */
.eb-reveal-actif .eb-home [data-reveal].eb-vu {
  transition: opacity .3s cubic-bezier(.22, .61, .36, 1) calc(var(--r, 0) * 70ms),
              transform .3s cubic-bezier(.22, .61, .36, 1) calc(var(--r, 0) * 70ms);
}

/* ════════════════════════════════════════════════════════════
   SCHÉMAS
   Rendus par template-parts/schemas.php. Aucun ne présente de
   mesure d'usage : ils expliquent une mécanique ou un cadre.
   ════════════════════════════════════════════════════════════ */
.eb-schema { margin: 44px auto 0; max-width: 1080px; }
.eb-schema .eb-mention { margin-top: 22px; }
.eb-ico { width: 24px; height: 24px; display: block; }

/* ── Le trajet d'une réponse ───────────────────────────────── */
.eb-flux {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 20px;
}
.eb-flux-etape {
  position: relative; background: var(--eb-white);
  border: 1px solid var(--eb-border); border-radius: 20px; padding: 28px 24px 24px;
}
.eb-flux-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 15px;
  background: var(--eb-teal-pale); color: var(--eb-teal-deep); margin-bottom: 16px;
}
.eb-flux-rang {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--eb-font-title); font-size: 1.5em; font-weight: 900;
  color: var(--eb-teal-lt); line-height: 1;
}
.eb-flux-etape h3 {
  font-family: var(--eb-font-title); font-size: 1.08em; font-weight: 800;
  color: var(--eb-navy); margin: 0 0 8px;
}
.eb-flux-etape p { color: var(--eb-gray); line-height: 1.6; margin: 0; font-size: .95em; }

/* Le fil qui relie les étapes. Décoratif, donc absent en une colonne. */
@media (min-width: 940px) {
  .eb-flux-etape + .eb-flux-etape::before {
    content: ''; position: absolute; top: 45px; left: -20px; width: 20px;
    border-top: 2px dotted var(--eb-teal-lt);
  }
}

.eb-schema-cle {
  margin: 24px 0 0; padding: 22px 26px;
  background: var(--eb-teal-pale); border-radius: 18px;
  color: var(--eb-teal-deep); line-height: 1.65; font-weight: 600;
}

/* ── Le seuil de répondants ────────────────────────────────── */
.eb-seuil-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.eb-seuil-cas {
  background: var(--eb-white); border: 1px solid var(--eb-border);
  border-radius: 20px; padding: 28px 26px;
}
.eb-seuil-points { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; min-height: 22px; }
.eb-seuil-point { width: 22px; height: 22px; border-radius: 50%; background: var(--eb-teal-lt); }
.eb-seuil-masque .eb-seuil-point { background: var(--eb-border); }
.eb-seuil-cas h3 {
  font-family: var(--eb-font-title); font-size: 1.15em; font-weight: 800;
  color: var(--eb-navy); margin: 0 0 10px;
}
.eb-seuil-etat {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 6px 14px 6px 11px; border-radius: 999px;
  font-size: .9em; font-weight: 700;
  background: var(--eb-bg); color: var(--eb-gray);
}
.eb-seuil-visible .eb-seuil-etat { background: var(--eb-teal-pale); color: var(--eb-teal-deep); }
.eb-seuil-cas p { color: var(--eb-gray); line-height: 1.6; margin: 0; font-size: .95em; }
.eb-seuil-visible { border-color: var(--eb-teal-lt); }

/* ── La hiérarchie des mesures ─────────────────────────────── */
.eb-hierarchie { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.eb-hierarchie-niveau { display: flex; align-items: stretch; gap: 18px; }
.eb-hierarchie-barre {
  flex: 0 0 auto;
  /* La largeur décroît avec le rang : le dernier recours est le plus étroit. */
  width: calc(150px - var(--eb-rang) * 26px);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--eb-teal-deep), var(--eb-teal));
  opacity: calc(1 - var(--eb-rang) * .13);
}
.eb-hierarchie-texte {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  padding: 14px 0;
}
.eb-hierarchie-texte strong {
  font-family: var(--eb-font-title); font-size: 1.05em; font-weight: 800; color: var(--eb-navy);
}
.eb-hierarchie-texte span { color: var(--eb-gray); line-height: 1.55; font-size: .95em; }

@media (max-width: 620px) {
  .eb-hierarchie-niveau { flex-direction: column; gap: 8px; }
  .eb-hierarchie-barre { width: calc(100% - var(--eb-rang) * 12%); height: 8px; }
  .eb-hierarchie-texte { padding: 0 0 6px; }
}

/* ── Les familles de risques ───────────────────────────────── */
.eb-familles {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px;
}
.eb-famille {
  display: flex; align-items: center; gap: 12px;
  background: var(--eb-white); border: 1px solid var(--eb-border);
  border-radius: 14px; padding: 13px 18px;
  color: var(--eb-navy); font-size: .95em; line-height: 1.4;
}
.eb-famille-puce {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--eb-teal-lt);
}
.eb-famille-phare { border-color: var(--eb-teal); font-weight: 700; }
.eb-famille-phare .eb-famille-puce { background: var(--eb-teal); }

/* ── Le principe de facturation ────────────────────────────── */
.eb-schema-forfait figure { margin: 0; }
.eb-courbe-cadre {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  align-items: center; gap: 6px 10px; max-width: 640px; margin: 0 auto;
}
.eb-courbe { width: 100%; height: auto; display: block; }
.eb-axe-y {
  grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg);
  color: var(--eb-gray); font-size: .86em; font-weight: 600; justify-self: center;
}
.eb-axe-x {
  grid-column: 2; grid-row: 2; text-align: center;
  color: var(--eb-gray); font-size: .86em; font-weight: 600;
}
.eb-courbe .eb-axe { stroke: var(--eb-border); stroke-width: 1.5; }
.eb-courbe .eb-trace { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.eb-courbe .eb-trace-siege { stroke: var(--eb-gray); stroke-dasharray: 8 7; opacity: .55; }
.eb-courbe .eb-trace-forfait { stroke: var(--eb-teal); }
.eb-courbe .eb-point-siege { fill: var(--eb-gray); opacity: .55; }
.eb-courbe .eb-point-forfait { fill: var(--eb-teal-deep); }

.eb-courbe-legende {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center;
}
.eb-courbe-legende li {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--eb-navy); font-size: .94em; font-weight: 600;
}
.eb-cle { width: 26px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.eb-cle-siege {
  height: 0; border-top: 3px dashed var(--eb-gray); opacity: .55; border-radius: 0;
}
.eb-cle-forfait { background: var(--eb-teal); }

.eb-schema-forfait figcaption {
  color: var(--eb-gray); font-size: .92em; line-height: 1.6;
  text-align: center; margin-top: 16px; max-width: 62ch; margin-left: auto; margin-right: auto;
}

/* ── Sur fond sombre, les schémas s'inversent ──────────────── */
.eb-cta .eb-flux-etape, .eb-cta .eb-seuil-cas, .eb-cta .eb-famille {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--eb-white);
}

/* La frise de la page Méthode utilise des h2, que le style visait en h3. */
.eb-frise-item h2 {
  font-family: var(--eb-font-title); font-size: 1.2em; font-weight: 800;
  color: var(--eb-navy); margin: 0 0 10px;
}

/* Titre intermédiaire posé au-dessus d'un schéma. */
.eb-schema-titre {
  font-family: var(--eb-font-title); font-size: 1.35em; font-weight: 800;
  color: var(--eb-navy); text-align: center; margin: 56px 0 0;
}

/* Sections dédiées aux schémas : titre centré, comme les sections claires.
   Elles n'empruntent pas eb-situation, dont l'alignement à gauche et les
   cartes en escalier ne s'appliquent pas ici. */
.eb-section-schema { background: var(--eb-white); }
.eb-section-schema.eb-schema-pale { background: var(--eb-bg); }
.eb-section-schema .section-title,
.eb-section-schema .section-subtitle { text-align: center; margin-left: auto; margin-right: auto; }
.eb-section-schema .section-subtitle { max-width: 62ch; }

/* ════════════════════════════════════════════════════════════
   RESPIRATION
   Deux sections consécutives empilaient leurs 88 px de marge
   intérieure, ce qui creusait des vides de plus de cent pixels
   sous chaque titre de page. Et les grilles en auto-fit
   laissaient une quatrième carte seule sur sa ligne, avec un
   grand trou à sa droite.
   ════════════════════════════════════════════════════════════ */
.eb-section { padding: 72px 24px; }

/* En-tête de page : il ouvre la section suivante, il ne se referme pas. */
.eb-tarifs-head { padding-bottom: 16px; }
.eb-tarifs-head .section-subtitle { margin-bottom: 0; }

/* Deux colonnes, réellement. En auto-fit, quatre cartes se posaient en
   trois plus une, l'orpheline laissant les deux tiers de sa ligne vides. */
@media (min-width: 900px) {
  .eb-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* L'alignement à gauche visait la mise en page à deux colonnes de la section
   « ce qu'est EchoBridge ». Appliqué à toutes les sections claires, il
   désalignait le titre de son propre sous-titre, resté centré. */
@media (min-width: 901px) {
  .eb-presentation .section-title { text-align: center; margin: 0 0 12px; }
  .eb-presentation .eb-narrow .section-title { grid-column: 1; text-align: left; margin: 0 0 20px; }
}

.eb-schema { margin-top: 36px; }
.eb-schema-titre { margin-top: 44px; }

/* ════════════════════════════════════════════════════════════
   CAPTURES PRODUIT
   Écrans réels de la plateforme, déposés dans uploads/screenshots/.
   Aucune maquette, aucune vue inventée.
   ════════════════════════════════════════════════════════════ */
.eb-capture { margin: 36px auto 0; max-width: 1000px; }
.eb-capture img {
  display: block; width: 100%; height: auto;
  border-radius: 18px; border: 1px solid var(--eb-border);
  box-shadow: 0 24px 60px rgba(4, 55, 64, .12);
  background: var(--eb-white);
}
.eb-capture figcaption {
  color: var(--eb-gray); font-size: .92em; line-height: 1.55;
  text-align: center; margin-top: 14px;
}

/* Les écrans de téléphone restent étroits : agrandis, ils perdent leur sens.
   Hauteur imposée et cadrage par le haut : les captures n'ont pas toutes le
   même format, app-signaler fait plus de trois mille pixels de haut. Sans
   cela, une seule d'entre elles fait dérailler toute la rangée. */
.eb-capture-app { max-width: 262px; }
.eb-capture-app img {
  border-radius: 24px;
  aspect-ratio: 860 / 1800;
  object-fit: cover;
  object-position: top center;
}

.eb-captures {
  display: grid; gap: 26px; margin: 36px auto 0;
  justify-items: center; align-items: start;
}
.eb-captures-app { grid-template-columns: repeat(auto-fit, minmax(200px, 262px)); justify-content: center; }
.eb-captures-admin { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 1100px; }
.eb-captures .eb-capture { margin-top: 0; max-width: 100%; }
.eb-captures-app .eb-capture { max-width: 262px; }

@media (max-width: 620px) {
  .eb-captures-app { grid-template-columns: minmax(0, 262px); }
}

/* Sections de fonctionnalités : quatre familles de même rang. Elles
   n'empruntent plus eb-situation, dont les cartes en escalier étaient
   dessinées pour une grille de trois et laissaient, en deux colonnes, de
   larges trous entre les cartes décalées. */
.eb-section-famille { background: var(--eb-white); }
.eb-section-famille.eb-schema-pale { background: var(--eb-bg); }
.eb-section-famille .section-title,
.eb-section-famille .section-subtitle { text-align: center; margin-left: auto; margin-right: auto; }
.eb-section-famille .section-subtitle { max-width: 68ch; }

/* ════════════════════════════════════════════════════════════
   HABILLAGE DES TITRES ET DES CARTES
   Un repère visuel avant le texte : sur une page longue, un
   titre nu ne se distingue plus du paragraphe qui le suit.
   ════════════════════════════════════════════════════════════ */
.eb-entete { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.eb-entete .section-title { margin-bottom: 10px; }
.eb-entete .section-subtitle { margin-bottom: 0; }

.eb-entete-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 17px;
  background: var(--eb-teal-pale); color: var(--eb-teal-deep);
  margin: 0 auto 18px;
}
.eb-entete-pastille .eb-ico { width: 27px; height: 27px; }

/* Surtitre : étiquette courte, en capitales espacées. */
.eb-surtitre {
  display: inline-block; margin: 0 0 12px;
  font-family: var(--eb-font-title); font-size: .74em; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--eb-teal-deep); background: var(--eb-teal-pale);
  padding: 7px 16px; border-radius: 999px;
}

/* Sur fond sombre, l'habillage s'inverse. */
.eb-cta .eb-entete-pastille { background: rgba(255,255,255,.12); color: var(--eb-teal-lt); }
.eb-cta .eb-surtitre { background: rgba(255,255,255,.12); color: var(--eb-teal-lt); }

/* Cartes à icône. */
.eb-card-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--eb-teal-pale); color: var(--eb-teal-deep);
  margin-bottom: 16px;
}
.eb-card-ico h3 { margin-top: 0; }

/* Le premier paragraphe d'un bloc de texte porte le propos : on le distingue. */
.eb-lead:first-of-type { font-size: 1.22em; color: var(--eb-navy); font-weight: 500; }

/* Lettrine discrète des blocs éditoriaux longs, sans fioriture. */
.eb-texte-riche p { color: var(--eb-gray); line-height: 1.75; margin: 0 0 18px; }
.eb-texte-riche p:last-child { margin-bottom: 0; }

/* Coordonnées de contact : chaque entrée porte son icône. */
.eb-coord { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.eb-coord li { display: flex; align-items: flex-start; gap: 16px; }
.eb-coord-pastille {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--eb-teal-pale); color: var(--eb-teal-deep);
}
.eb-coord-corps { min-width: 0; }
.eb-coord-corps h3 {
  font-family: var(--eb-font-title); font-size: 1.02em; font-weight: 800;
  color: var(--eb-navy); margin: 0 0 4px;
}
.eb-coord-corps p { margin: 0; color: var(--eb-gray); line-height: 1.6; }
.eb-coord-corps a { color: var(--eb-teal-deep); font-weight: 700; text-decoration: none; }
.eb-coord-corps a:hover { text-decoration: underline; }

/* Frise : l'icône remplace le chiffre nu quand elle apporte du sens. */
.eb-frise-item .eb-frise-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--eb-white); color: var(--eb-teal-deep);
  border: 1px solid var(--eb-border);
  margin-left: 10px; vertical-align: middle;
}
.eb-frise-tete { display: flex; align-items: center; gap: 0; margin-bottom: 14px; }

/* ════════════════════════════════════════════════════════════
   BANDEAU DE PHRASE CLÉ
   Remplace l'encadré perdu dans une colonne vide.
   ════════════════════════════════════════════════════════════ */
.eb-bandeau-cle {
  background: linear-gradient(135deg, var(--eb-navy) 0%, var(--eb-teal-deep) 100%);
  color: var(--eb-white);
}
.eb-cle-bloc { max-width: 780px; margin: 0 auto; text-align: center; }
.eb-cle-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 18px;
  background: rgba(255,255,255,.12); color: var(--eb-teal-lt); margin-bottom: 22px;
}
.eb-cle-pastille .eb-ico { width: 29px; height: 29px; }
.eb-cle-phrase {
  font-family: var(--eb-font-title); font-size: 2.1em; font-weight: 900;
  letter-spacing: -.8px; line-height: 1.15; margin: 0 0 18px; color: var(--eb-white);
}
.eb-cle-texte { font-size: 1.05em; line-height: 1.7; margin: 0; color: rgba(255,255,255,.86); }

@media (max-width: 640px) { .eb-cle-phrase { font-size: 1.6em; } }

/* ════════════════════════════════════════════════════════════
   MISE EN REGARD
   Deux situations opposées, avec la flèche entre les deux.
   ════════════════════════════════════════════════════════════ */
.eb-oppose {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px;
  align-items: center; max-width: 1000px; margin: 0 auto;
}
.eb-oppose-cas {
  background: var(--eb-white); border: 1px solid var(--eb-border);
  border-radius: 20px; padding: 30px 28px;
}
.eb-oppose-cas p { margin: 0; color: var(--eb-gray); line-height: 1.65; }
.eb-oppose-etiquette {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--eb-font-title); font-size: .78em; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  background: var(--eb-bg); color: var(--eb-gray);
}
.eb-oppose-apres { border-color: var(--eb-teal-lt); }
.eb-oppose-apres .eb-oppose-etiquette { background: var(--eb-teal-pale); color: var(--eb-teal-deep); }
.eb-oppose-fleche { color: var(--eb-teal-lt); display: block; }
.eb-oppose-fleche svg { width: 44px; height: 26px; display: block; }

@media (max-width: 860px) {
  .eb-oppose { grid-template-columns: 1fr; gap: 16px; }
  .eb-oppose-fleche { justify-self: center; transform: rotate(90deg); }
}

/* ════════════════════════════════════════════════════════════
   RÉCIT
   Bloc éditorial long : colonne étroite, texte plus généreux.
   ════════════════════════════════════════════════════════════ */
.eb-recit { max-width: 720px; }
.eb-recit .eb-lead { font-size: 1.1em; line-height: 1.75; color: var(--eb-gray); margin: 0 0 20px; }
.eb-recit .eb-lead:first-of-type {
  font-size: 1.26em; color: var(--eb-navy); font-weight: 500; line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   CONFORT DE LECTURE
   Trois aides discrètes, sans dépendance : une barre de
   progression, un sommaire ancré sur les pages longues, un
   retour en haut. Toutes posées par eb-lecture.js, donc
   absentes si le script ne s'exécute pas.
   ════════════════════════════════════════════════════════════ */
.eb-progres {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--eb-teal-deep), var(--eb-teal-lt));
  z-index: 9999; transition: width .1s linear; pointer-events: none;
}

.eb-sommaire {
  position: sticky; top: 84px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 12px 16px; margin: 0 auto;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border: 1px solid var(--eb-border); border-radius: 999px;
  max-width: max-content;
}
.eb-sommaire a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px; min-height: 40px;
  font-family: var(--eb-font-title); font-size: .88em; font-weight: 700;
  color: var(--eb-navy); text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.eb-sommaire a:hover { background: var(--eb-teal-pale); color: var(--eb-teal-deep); }
.eb-sommaire a[aria-current="true"] { background: var(--eb-teal); color: var(--eb-white); }
.eb-sommaire a .eb-ico { width: 17px; height: 17px; }

@media (max-width: 760px) {
  .eb-sommaire {
    max-width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    border-radius: 20px; scrollbar-width: none;
  }
  .eb-sommaire::-webkit-scrollbar { display: none; }
}

.eb-haut {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--eb-navy); color: var(--eb-white);
  border: 0; cursor: pointer;
  box-shadow: 0 12px 30px rgba(4, 55, 64, .28);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.eb-haut.eb-visible { opacity: 1; transform: none; pointer-events: auto; }
.eb-haut:hover { background: var(--eb-teal-deep); }
.eb-haut svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .eb-progres, .eb-haut { transition: none; }
}

/* Une ancre visée par le sommaire ne doit pas se cacher sous l'en-tête. */
.eb-home [id] { scroll-margin-top: 140px; }

/* ════════════════════════════════════════════════════════════
   OUVERTURE DE PAGE
   Le bandeau de titre d'UiCore est masqué sur nos gabarits, et
   c'est lui qui donnait l'air entre le menu et le titre. Sans
   lui, le titre venait se coller sous la navigation.
   ════════════════════════════════════════════════════════════ */
.eb-tarifs-head,
.eb-demo-head { padding-top: 120px; }

@media (max-width: 900px) {
  .eb-tarifs-head,
  .eb-demo-head { padding-top: 84px; }
}

/* Le sommaire ancré descend d'autant, sinon il passe sous le menu. */
.eb-sommaire { top: 100px; margin-top: 8px; }

/* ════════════════════════════════════════════════════════════
   ÉPURE, VERSION 4.1
   Moins de centrage : au delà de deux lignes, un texte centré
   se lit mal, chaque ligne redémarrant à un endroit différent.
   Les sections passent à gauche, seules les ouvertures de page
   restent centrées.
   ════════════════════════════════════════════════════════════ */
.eb-entete { text-align: left; max-width: 720px; margin: 0 0 40px; }
.eb-entete .section-title,
.eb-entete .section-subtitle { text-align: left; margin-left: 0; margin-right: 0; }

/* Pastille et surtitre sur une ligne propre, alignés au pixel. */
.eb-entete-rang { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.eb-entete-pastille { margin: 0; width: 46px; height: 46px; border-radius: 14px; }
.eb-entete-pastille .eb-ico { width: 23px; height: 23px; }
.eb-surtitre { margin: 0; }

/* Le tiret d'accent sous les titres de bloc. */
.eb-entete .section-title { position: relative; padding-bottom: 18px; }
.eb-entete .section-title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--eb-teal), var(--eb-teal-lt));
}

/* Ouverture de page : centrée, elle seule. */
.eb-tarifs-head .eb-entete,
.eb-demo-head .eb-entete { text-align: center; margin-left: auto; margin-right: auto; max-width: 760px; }
.eb-tarifs-head .eb-entete .section-title,
.eb-tarifs-head .eb-entete .section-subtitle,
.eb-demo-head .eb-entete .section-title,
.eb-demo-head .eb-entete .section-subtitle { text-align: center; margin-left: auto; margin-right: auto; }
.eb-tarifs-head .eb-entete-rang,
.eb-demo-head .eb-entete-rang { justify-content: center; }
.eb-tarifs-head .eb-entete .section-title::after,
.eb-demo-head .eb-entete .section-title::after { left: 50%; transform: translateX(-50%); }

/* Les sections de schéma et de famille suivent, plus de centrage forcé. */
.eb-section-schema .section-title,
.eb-section-schema .section-subtitle,
.eb-section-famille .section-title,
.eb-section-famille .section-subtitle { text-align: left; margin-left: 0; margin-right: 0; }
.eb-section-famille .section-subtitle { max-width: 68ch; }

/* Sur fond sombre, le filet et le surtitre s'éclaircissent. */
.eb-bandeau-cle .section-title::after { background: var(--eb-teal-lt); }

/* ── Appel à la démonstration, lisible ──────────────────────
   Le titre et le texte étaient posés sur navy plein avec de
   l'opacité : contraste insuffisant. Fond retravaillé, texte
   à pleine opacité, bouton en teal clair sur navy. */
.eb-cta {
  background:
    radial-gradient(900px 380px at 15% 0%, rgba(0,158,160,.30), transparent 62%),
    radial-gradient(700px 340px at 88% 100%, rgba(84,202,195,.22), transparent 60%),
    var(--eb-navy);
  text-align: center; color: var(--eb-white);
}
.eb-cta h2 { color: var(--eb-white); letter-spacing: -1px; }
.eb-cta > p { opacity: 1; color: rgba(255,255,255,.92); }

/* ── Le constat de départ ───────────────────────────────── */
.eb-schema-constat { max-width: 1000px; }
.eb-constat-loi {
  background: var(--eb-navy); color: var(--eb-white);
  border-radius: 22px; padding: 28px 30px; margin-bottom: 22px;
}
.eb-constat-etiquette {
  display: inline-block; margin-bottom: 16px;
  font-family: var(--eb-font-title); font-size: .78em; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--eb-teal-lt);
}
.eb-constat-obligations {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 26px;
}
.eb-constat-obligations li {
  display: flex; align-items: center; gap: 10px;
  color: var(--eb-white); font-weight: 600; line-height: 1.4;
}
.eb-constat-obligations .eb-ico { width: 19px; height: 19px; color: var(--eb-teal-lt); flex: 0 0 auto; }

.eb-constat-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.eb-constat-cas {
  background: var(--eb-white); border: 1px solid var(--eb-border);
  border-radius: 22px; padding: 28px 30px;
}
.eb-constat-taille {
  font-family: var(--eb-font-title); font-size: 1.12em; font-weight: 800;
  color: var(--eb-navy); margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--eb-border);
}
.eb-constat-moyens { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.eb-constat-moyens li {
  display: flex; align-items: center; gap: 11px; line-height: 1.45; font-size: .97em;
}
.eb-constat-moyens .eb-ico { width: 19px; height: 19px; flex: 0 0 auto; }
.eb-constat-moyens .eb-a { color: var(--eb-navy); }
.eb-constat-moyens .eb-a .eb-ico { color: var(--eb-teal); }
.eb-constat-moyens .eb-sans { color: var(--eb-gray); }
.eb-constat-moyens .eb-sans .eb-ico { color: var(--eb-amber); }
.eb-constat-pme { border-color: var(--eb-amber); }
.eb-constat-pme .eb-constat-taille { color: var(--eb-navy); }

@media (max-width: 700px) {
  .eb-entete { max-width: 100%; }
  .eb-cta h2 { font-size: 1.9em; }
}