/* ════════════════════════════════════════════════════════════
   EchoBridge — pages intérieures éditoriales
   Chargé uniquement sur fonctionnalites / methode / tarifs / a-propos.
   Dépend des variables et du socle déclarés dans base.css.
   ════════════════════════════════════════════════════════════ */

.page-hero {
  padding: clamp(56px, 6vw, 88px) 24px clamp(40px, 5vw, 64px);
  text-align: center;
  background: var(--eb-bg);
  border-bottom: 1px solid var(--eb-border);
}
.page-hero .entry-title {
  max-width: 20ch;
  margin: 0 auto 16px;
}
.page-hero-lead {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 1.1rem;
  color: var(--eb-ink-soft);
  line-height: 1.55;
}

main > .page-section {
  padding: clamp(44px, 4.5vw, 68px) 24px;
  position: relative;
}
.page-section {
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Panneaux de section (teinte claire alternée + sections sombres) ──
   Ancienne approche : bandes plein-largeur bord à bord, coins carrés — un
   bloc de couleur qui rompt la grille de contenu sur toute la largeur de
   l'écran, sans rapport avec le reste de la page qui reste, lui, contenu à
   1120px. Sur un écran large, ça donnait des bandes qui ne s'alignaient
   avec rien d'autre à l'écran : lu comme négligé plutôt que composé.
   Nouvelle approche : un panneau posé sur la page, contenu à la même
   largeur maximale que le hero et les sections claires (--eb-shell,
   1200px), coins arrondis, ombre douce, marge visible tout autour (y
   compris en haut et en bas) — jamais plein-largeur, jamais bord à bord,
   même sur mobile (juste une marge plus courte). */
main > section.page-section:not(.page-section-dark):nth-of-type(even) {
  max-width: var(--eb-shell);
  margin: clamp(20px, 2.5vw, 32px) auto;
  padding: clamp(48px, 5vw, 76px) clamp(28px, 4vw, 56px);
  background: var(--eb-bg);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-sm);
}
.page-section-dark {
  position: relative;
  overflow: hidden;
  max-width: var(--eb-shell);
  margin: clamp(20px, 2.5vw, 32px) auto;
  padding: clamp(48px, 5vw, 76px) clamp(28px, 4vw, 56px);
  background: var(--eb-navy);
  color: var(--eb-white);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-lg);
}
/* Halo de couleur, coin haut-droit : une touche de la charte (teal clair)
   dans le panneau sombre plutôt qu'un aplat uniforme. Même famille que le
   halo du hero (homepage.css `.hero::before`), en plus discret. */
.page-section-dark::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(84, 202, 195, .22) 0%, rgba(84, 202, 195, .06) 45%, transparent 70%);
  pointer-events: none;
}
.page-section-dark > * { position: relative; }
@media (max-width: 640px) {
  main > section.page-section:not(.page-section-dark):nth-of-type(even),
  .page-section-dark {
    margin-inline: 12px;
    padding: 36px 22px;
    border-radius: var(--eb-radius);
  }
}
.page-section-dark .page-section-inner { max-width: 1120px; margin: 0 auto; }
.page-section-dark h2 {
  color: var(--eb-white);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.page-section-dark p { color: rgba(255, 255, 255, .88); }

.page-section h2 {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
/* ── Titre de section + pictogramme ── */
.section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}
.section-heading h2 { margin: 0; }
.section-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--eb-teal-pale);
  color: var(--eb-teal-deep);
}
.section-heading-icon svg { width: 24px; height: 24px; }
.page-section-dark .section-heading-icon {
  background: rgba(84, 202, 195, .14);
  color: var(--eb-teal-lt);
}
.page-section-kicker {
  font-size: .95rem;
  color: var(--eb-ink-soft);
  max-width: 68ch;
  margin: 0 0 32px;
  line-height: 1.55;
}
.page-section-dark .page-section-kicker { color: rgba(255, 255, 255, .82); }

/* ── Grille de cartes (fonctionnalités, valeurs) ── */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
/* Variante bento : la fonctionnalité la plus dense (DUERP) prend deux
   colonnes plutôt que de rejoindre une grille strictement égale. */
/* 4 colonnes, pas 3 : avec 4 cartes simples (1 unité) et 2 larges (2 unités),
   3 colonnes laissait une cellule vide en bas à droite (8 unités ne se
   divisent pas par 3). 4 colonnes tombe juste (8 / 4 = 2 lignes pleines) —
   mais seulement avec un flux dense : en flux normal, l'algorithme ne revient
   jamais remplir une colonne sautée pour une carte large, ce qui rouvrait
   plusieurs cellules vides (vérifié : dernière carte simple envoyée sur une
   troisième ligne, deux colonnes entières perdues en bas). `dense` comble
   chaque creux avec la carte suivante qui y tient, sans réordonner le sens
   de lecture du contenu (les 4 cartes simples restent avant les 2 larges). */
.item-grid-bento { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
.item-grid-bento .item-card-wide { grid-column: span 2; }
@media (max-width: 780px) {
  .item-grid-bento { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .item-grid-bento .item-card-wide { grid-column: span 1; }
}
.item-card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-sm);
  transition: transform .25s var(--eb-ease), box-shadow .25s var(--eb-ease), border-color .25s var(--eb-ease);
}
.item-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--eb-shadow-md);
  border-color: var(--eb-border-sq);
}
/* Halo au curseur : décoratif, activé par pages.js sur pointeur fin
   seulement (même geste que .feature-card sur la home, homepage.css). */
.item-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(300px circle at var(--halo-x, 50%) var(--halo-y, 50%),
              rgba(0, 158, 160, .13), transparent 68%);
  transition: opacity .3s var(--eb-ease);
  pointer-events: none;
}
.page-section-dark .item-card::before {
  background: radial-gradient(300px circle at var(--halo-x, 50%) var(--halo-y, 50%),
              rgba(84, 202, 195, .18), transparent 68%);
}
.item-grid.has-halo .item-card:hover::before { opacity: 1; }
.item-card > * { position: relative; }
.page-section-dark .item-card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .1);
}
.page-section-dark .item-card:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .18);
}
.item-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  color: var(--eb-white);
  background: linear-gradient(135deg, var(--eb-teal-lt) 0%, var(--eb-teal) 100%);
  border-radius: 13px;
  box-shadow: 0 6px 16px rgba(0, 158, 160, .28);
  transition: transform .3s var(--eb-ease), box-shadow .3s var(--eb-ease);
}
.item-card:hover .item-card-icon {
  transform: translateY(-2px) rotate(-4deg) scale(1.05);
  box-shadow: 0 10px 22px rgba(0, 158, 160, .36);
}
.item-card-icon svg { width: 23px; height: 23px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .item-card:hover .item-card-icon { transform: none; }
}
.item-card h3 {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--eb-navy);
  margin: 0 0 8px;
}
/* h1-h6 sont navy par défaut (base.css) : sans cette redéfinition, un titre
   de carte en section sombre devient illisible (navy sur navy, ~1:1). */
.page-section-dark .item-card h3 { color: var(--eb-white); }
.item-card p {
  font-size: .95rem;
  color: var(--eb-ink-soft);
  line-height: 1.55;
  margin: 0;
}
.page-section-dark .item-card p { color: rgba(255, 255, 255, .85); }

/* ── Étapes numérotées (méthode) ── */
.step-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 760px;
  margin-inline: auto;
}
.step-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--eb-border);
}
.step-row:first-child { border-top: 0; padding-top: 0; }
.step-row-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--eb-font-title);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--eb-white);
  background: var(--eb-teal-deep);
  border-radius: 50%;
}
.step-row h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 6px 0 8px;
}
.step-row p {
  font-size: .96rem;
  color: var(--eb-ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ── Liste d'accès par rôle (charte de confiance) ──
   Remplace un tableau « qui voit quoi » par des rangées, la teinte va du
   plus proche du collaborateur (claire) au plus institutionnel (sombre) —
   jamais de hex hors charte. Portée par une pastille devant le titre, pas
   par une bordure d'accent latérale (anti-pattern banni : la couleur ne
   doit jamais être la seule porteuse d'une distinction sur le bord d'une
   rangée/carte). Distincte des cartes bordées (.item-card) et du tableau
   (.compare-table) déjà utilisés ailleurs sur le site. */
.access-list {
  display: flex;
  flex-direction: column;
  max-width: 820px;
  margin-inline: auto;
}
.access-row {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 8px 28px;
  padding: 22px 0;
  border-top: 1px solid var(--eb-border);
}
.access-row:first-child { border-top: 0; padding-top: 0; }
.access-row h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.04rem;
  font-weight: 800;
  margin: 0;
  color: var(--eb-navy);
}
.access-row-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--eb-access-accent, var(--eb-teal));
}
.access-row p {
  font-size: .94rem;
  color: var(--eb-ink-soft);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 640px) {
  .access-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Pipeline de l'anonymisation (charte de confiance) ──
   Motif propre à la page la plus sensible du site : un flux relié par un
   trait plutôt qu'une liste numérotée (déjà le langage de la page Méthode),
   pour que le mécanisme technique se lise comme un parcours de la donnée. */
.flow-pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 4px;
  max-width: 1120px;
}
.flow-pipeline-step {
  position: relative;
  padding: 0 12px;
  text-align: center;
}
.flow-pipeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 27px;
  left: calc(50% + 27px);
  width: calc(100% - 54px);
  height: 2px;
  background: linear-gradient(90deg, var(--eb-teal-lt), var(--eb-border-sq));
}
.flow-pipeline-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  font-family: var(--eb-font-title);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--eb-white);
  background: linear-gradient(135deg, var(--eb-teal-lt) 0%, var(--eb-teal-deep) 100%);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 158, 160, .28);
}
.flow-pipeline-step h3 {
  font-size: .98rem;
  font-weight: 800;
  margin: 0 0 6px;
}
.flow-pipeline-step p {
  font-size: .86rem;
  color: var(--eb-ink-soft);
  line-height: 1.5;
  margin: 0;
}
/* h1-h6 sont navy par défaut (base.css) et --eb-ink-soft est calibré pour un
   fond clair : sans cette redéfinition, le pipeline devient illisible sur
   fond sombre (titre navy sur navy, texte gris à contraste quasi nul) —
   même piège déjà corrigé pour .item-card (plus haut dans ce fichier). */
.page-section-dark .flow-pipeline-step h3 { color: var(--eb-white); }
.page-section-dark .flow-pipeline-step p { color: rgba(255, 255, 255, .82); }
@media (max-width: 900px) {
  .flow-pipeline {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 420px;
  }
  .flow-pipeline-step { text-align: left; padding: 0 0 0 70px; min-height: 54px; }
  .flow-pipeline-num { position: absolute; left: 0; top: 0; margin: 0; }
  .flow-pipeline-step:not(:last-child)::after {
    top: 54px;
    left: 26px;
    width: 2px;
    height: calc(100% + 30px - 54px);
    background: linear-gradient(180deg, var(--eb-teal-lt), var(--eb-border-sq));
  }
}

/* ── Bloc "principe" (jamais / toujours) ── */
.principle-box {
  padding: 24px 26px;
  background: var(--eb-teal-pale);
  border-radius: var(--eb-radius);
  max-width: 760px;
  margin-inline: auto;
}
.principle-box-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--eb-white);
  color: var(--eb-teal-deep);
  margin-bottom: 14px;
}
.principle-box-icon svg { width: 19px; height: 19px; }
.principle-box p { margin: 0 0 10px; color: var(--eb-ink); font-size: .98rem; line-height: 1.6; }
.principle-box p:last-child { margin-bottom: 0; }
.principle-box strong { color: var(--eb-teal-deep); }

/* ── Liste de pastilles (types de prescripteurs, etc.) ── */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 16px 0 0;
}
.tag-pill {
  display: inline-block;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--eb-teal-deep);
  background: var(--eb-white);
  border: 1px solid var(--eb-border-sq);
  border-radius: 100px;
}

/* ── Tarifs : cartes de plans ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-sm);
  transition: transform .25s var(--eb-ease), box-shadow .25s var(--eb-ease);
}
.pricing-card:hover { transform: translateY(-5px); box-shadow: var(--eb-shadow-md); }
.pricing-card-featured {
  border-color: var(--eb-teal);
  box-shadow: var(--eb-shadow-md);
}
.pricing-card-featured:hover { box-shadow: var(--eb-shadow-lg); }
.pricing-card-badge {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 14px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--eb-teal-deep);
  background: var(--eb-teal-pale);
  border-radius: 100px;
}
.pricing-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 4px;
}
.pricing-card-scope {
  font-size: .9rem;
  color: var(--eb-ink-soft);
  margin: 0 0 20px;
}
.pricing-card-price {
  font-family: var(--eb-font-title);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--eb-navy);
  margin: 0 0 4px;
}
.pricing-card-price span {
  font-family: var(--eb-font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--eb-ink-soft);
}
.pricing-card-users {
  font-size: .88rem;
  color: var(--eb-ink-soft);
  margin: 0 0 22px;
}
.pricing-card ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex: 1;
}
.pricing-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: .93rem;
  color: var(--eb-ink);
}
.pricing-card li svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--eb-teal);
}
.pricing-card .cta-button,
.pricing-card .cta-button-ghost {
  width: 100%;
  box-shadow: none;
}
.pricing-card .cta-button {
  background: var(--eb-teal-deep);
  color: var(--eb-white);
}
.pricing-card .cta-button:hover { background: var(--eb-navy); }

/* Variante claire du bouton fantôme (.cta-button-ghost de base.css est calibrée
   pour le hero sombre : son survol, blanc à 12% et bordure blanche à 80%,
   devient quasi invisible sur un fond clair). Utilisée partout où ce bouton
   apparaît hors hero : cartes tarifs, bas de page fonctionnalités/méthode/
   à propos. */
.cta-button-ghost-light {
  background: transparent;
  color: var(--eb-teal-deep);
  border-color: var(--eb-border-sq);
}
.cta-button-ghost-light:hover { background: var(--eb-teal-pale); border-color: var(--eb-teal); }

.pricing-note {
  margin: 28px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: .92rem;
  color: var(--eb-ink-soft);
}

/* ── Tableau comparatif ── */
/* tabindex="0" posé côté gabarit rend la zone atteignable au clavier : sans
   lui, personne au clavier seul ne peut faire défiler un tableau plus large
   que l'écran (le seul geste possible ailleurs est la souris ou le tactile). */
.compare-table-wrap { position: relative; overflow-x: auto; }
.compare-table-wrap:focus-visible {
  outline: 3px solid var(--eb-teal);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Indice de défilement : un dégradé signale qu'il reste des colonnes hors
   champ, posé par pages.js une fois le débordement mesuré, et retiré au bout
   du défilement plutôt que laissé en place en continu. */
.compare-table-wrap.has-overflow:not(.at-scroll-end)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(to right, transparent, rgba(4, 55, 64, .14));
  pointer-events: none;
}
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .92rem;
}
.compare-table th,
.compare-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--eb-border);
}
.compare-table thead th {
  font-family: var(--eb-font-title);
  font-weight: 800;
  color: var(--eb-navy);
}
.compare-table tbody th {
  font-weight: 600;
  color: var(--eb-ink);
  white-space: nowrap;
}
.compare-table td { text-align: center; }
.compare-table td svg { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.compare-table .yes { color: var(--eb-teal-deep); }
/* Pas d'opacité réduite : à .5 sur --eb-ink-soft, le tiret « non inclus »
   tombait à 2.33:1 sur blanc, sous le minimum WCAG 1.4.11 (3:1) pour un
   graphique porteur de sens — ce n'est pas un décor, c'est le pendant du
   check. --eb-ink-soft seul (7.46:1) le distingue déjà du teal du check
   sans sacrifier la lisibilité. */
.compare-table .no { color: var(--eb-ink-soft); }

/* ── FAQ ── */
.faq-list { max-width: 780px; margin-inline: auto; }
.faq-item {
  padding: 20px 0;
  border-top: 1px solid var(--eb-border);
}
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  transition: opacity .15s var(--eb-ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover h3 { color: var(--eb-teal-deep); }
.faq-item summary:active { opacity: .7; }
.faq-item summary h3 {
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0;
  transition: color .15s var(--eb-ease);
}
.faq-item summary svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--eb-teal-deep);
  transition: transform .2s var(--eb-ease);
}
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item p {
  margin: 14px 0 0;
  font-size: .95rem;
  color: var(--eb-ink-soft);
  line-height: 1.6;
}

/* ── À propos : identité ── */
.identity-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 760px;
  margin-inline: auto;
  padding: 26px 28px;
  background: var(--eb-bg);
  border-radius: var(--eb-radius-lg);
}
.identity-block dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--eb-teal-deep);
  margin-bottom: 4px;
}
.identity-block dd {
  margin: 0;
  font-size: .95rem;
  color: var(--eb-ink);
  line-height: 1.5;
}

/* ── À propos : équipe fondatrice ── */
.founders {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 36px;
  align-items: start;
  max-width: 980px;
  margin-inline: auto;
}
.founders-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--eb-radius-lg);
  overflow: hidden;
  box-shadow: var(--eb-shadow-lg);
  background: var(--eb-teal-pale);
}
.founders-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founders-photo.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eb-teal);
}
.founders-photo.is-empty svg { width: 30%; height: 30%; opacity: .6; }
.founders-caption {
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--eb-ink-soft);
  text-align: center;
}
.founders-bios {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.founder-card h3 { margin: 0 0 3px; color: var(--eb-ink); font-size: 1.05rem; }
.founder-card .founder-role {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--eb-teal-deep);
  margin-bottom: 10px;
}
.founder-card p {
  margin: 0 0 10px;
  color: var(--eb-ink-soft);
  line-height: 1.6;
  font-size: .93rem;
}
.founder-card p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .founders { grid-template-columns: 1fr; }
  .founders-photo { max-width: 320px; margin-inline: auto; }
}

/* ── Split "jamais / toujours" (remplace les grilles de 3 cartes identiques) ── */
.split-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 880px;
  margin-inline: auto;
}
.split-panel > div {
  padding: 24px 26px;
  border-radius: var(--eb-radius-lg);
}
.split-panel-never {
  background: rgba(239, 68, 68, .07);
  border: 1px solid rgba(239, 68, 68, .18);
}
.page-section-dark .split-panel-never {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .28);
}
.split-panel-always {
  background: var(--eb-teal-pale);
  border: 1px solid var(--eb-border-sq);
}
.page-section-dark .split-panel-always {
  background: rgba(84, 202, 195, .12);
  border-color: rgba(84, 202, 195, .28);
}
.split-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.split-panel h3 svg { flex: 0 0 auto; width: 18px; height: 18px; }
.split-panel-never h3 { color: var(--eb-red); }
.split-panel-always h3 { color: var(--eb-teal-deep); }
.page-section-dark .split-panel-always h3 { color: var(--eb-teal-lt); }
.split-panel ul { margin: 0; padding: 0; list-style: none; }
.split-panel li {
  padding: 8px 0;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--eb-ink);
  border-top: 1px solid rgba(4, 55, 64, .06);
}
.page-section-dark .split-panel li {
  color: rgba(255, 255, 255, .88);
  border-top-color: rgba(255, 255, 255, .1);
}
.split-panel li:first-child { border-top: 0; padding-top: 0; }

/* ── Comparaison de rôles (remplace la 3e grille de cartes) ──
   Liseré de couleur en tête de colonne : lecture immédiate de qui est qui
   avant même le texte, et différencie la silhouette du bloc de celle du
   split-panel (jamais/toujours) qui précède plus haut sur la même page. */
.role-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 780px;
  margin-inline: auto;
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-lg);
  overflow: hidden;
}
.role-compare > div { position: relative; padding: 27px 26px 24px; }
.role-compare > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.role-compare > div:first-child::before { background: var(--eb-teal); }
.role-compare > div:last-child::before { background: var(--eb-navy); }
.role-compare > div:first-child {
  background: var(--eb-bg);
  border-right: 1px solid var(--eb-border);
}
.role-compare h3 {
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0 0 12px;
}
.role-compare ul { margin: 0; padding: 0; list-style: none; }
.role-compare li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 6px 0;
  font-size: .92rem;
  color: var(--eb-ink-soft);
  line-height: 1.5;
}
.role-compare li svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--eb-teal); }

/* ── Révélation au défilement (pages.js) ──
   État initial appliqué seulement une fois le script confirmé actif
   (.has-reveal sur <body>), pour ne jamais masquer le contenu sans JS. */
body.has-reveal .item-card,
body.has-reveal .step-row,
body.has-reveal .pricing-card,
body.has-reveal .faq-item,
body.has-reveal .identity-block,
body.has-reveal .principle-box,
body.has-reveal .blog-card,
body.has-reveal .resource-card,
body.has-reveal .section-shot,
body.has-reveal .contact-form-card,
body.has-reveal .contact-info-card,
body.has-reveal .split-panel > div,
body.has-reveal .role-compare > div,
body.has-reveal .access-row,
body.has-reveal .flow-pipeline-step,
body.has-reveal .founders-photo,
body.has-reveal .founder-card {
  opacity: 0;
  transform: translateY(26px) scale(.97);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
              transform .7s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
}
body.has-reveal .item-card.is-in-view,
body.has-reveal .step-row.is-in-view,
body.has-reveal .pricing-card.is-in-view,
body.has-reveal .faq-item.is-in-view,
body.has-reveal .identity-block.is-in-view,
body.has-reveal .principle-box.is-in-view,
body.has-reveal .blog-card.is-in-view,
body.has-reveal .resource-card.is-in-view,
body.has-reveal .section-shot.is-in-view,
body.has-reveal .contact-form-card.is-in-view,
body.has-reveal .contact-info-card.is-in-view,
body.has-reveal .split-panel > div.is-in-view,
body.has-reveal .role-compare > div.is-in-view,
body.has-reveal .access-row.is-in-view,
body.has-reveal .flow-pipeline-step.is-in-view,
body.has-reveal .founders-photo.is-in-view,
body.has-reveal .founder-card.is-in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Titres de section : entrée plus sobre (pas de scale, léger décalage
   vertical) — ils mènent la révélation, les cartes suivent. */
body.has-reveal .page-section > h2,
body.has-reveal .page-section-inner > h2,
body.has-reveal .page-section > .section-heading,
body.has-reveal .page-section-inner > .section-heading,
body.has-reveal .page-section-kicker {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
body.has-reveal .page-section-kicker { transition-delay: .08s; }
body.has-reveal .page-section > h2.is-in-view,
body.has-reveal .page-section-inner > h2.is-in-view,
body.has-reveal .page-section > .section-heading.is-in-view,
body.has-reveal .page-section-inner > .section-heading.is-in-view,
body.has-reveal .page-section-kicker.is-in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Le pictogramme suit la même entrée que le titre, avec un léger effet
   d'échelle et de rotation qui lui est propre — la même courbe d'easing que
   le reste du site (pas de rebond, cohérent avec .item-card, .section-shot…),
   juste une trajectoire différente pour distinguer l'icône du texte. */
body.has-reveal .section-heading-icon {
  transform: scale(.55) rotate(-10deg);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1) .06s;
}
body.has-reveal .section-heading.is-in-view .section-heading-icon {
  transform: scale(1) rotate(0deg);
}

/* Entrée douce du hero au chargement : le h1 (LCP) n'est jamais concerné,
   seuls le sous-titre et les actions arrivent avec un léger retard en cascade. */
@media (prefers-reduced-motion: no-preference) {
  .page-hero .entry-title, .page-hero-lead, .page-hero .hero-cta-group {
    animation: eb-hero-in .7s cubic-bezier(.16, 1, .3, 1) both;
  }
  /* Le titre part quasi immédiatement (pas de délai perceptible) : c'est le
     plus souvent l'élément de LCP de la page, il ne doit jamais donner
     l'impression d'attendre son tour derrière le reste du hero. */
  .page-hero .entry-title { animation-duration: .5s; }
  .page-hero-lead { animation-delay: .1s; }
  .page-hero .hero-cta-group { animation-delay: .2s; }
}
/* ── Formulaire de contact ── */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  /* stretch, pas start : le formulaire (nom/email/entreprise/message) est
     structurellement plus long que la colonne « nous joindre ». En haut de
     colonne fixe, l'écart laissait un vide blanc net en bas à droite, sans
     rien pour l'occuper — voir .contact-info-col ci-dessous, qui distribue
     sa propre hauteur plutôt que de rester collée en haut. */
  align-items: stretch;
}

.contact-info-col {
  display: flex;
  flex-direction: column;
  /* centré, pas space-between : la carte et la note de confidentialité
     forment un seul bloc de lecture, pas deux extrémités indépendantes. Les
     séparer aux deux bords de la colonne étirée créait deux vides au lieu
     d'un — les regrouper au centre lit comme une composition volontaire. */
  justify-content: center;
  gap: 28px;
}

.form-notice {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: var(--eb-radius);
  font-size: .93rem;
  line-height: 1.5;
}
.form-notice-ok {
  background: var(--eb-teal-pale);
  color: var(--eb-teal-deep);
}
.form-notice-error {
  background: rgba(239, 68, 68, .08);
  color: var(--eb-navy);
  border: 1px solid rgba(239, 68, 68, .25);
}
.form-notice-error a { color: var(--eb-teal-deep); }

.contact-form-card {
  max-width: 560px;
  padding: 36px 40px;
  background: var(--eb-white);
  border: 1px solid var(--eb-border-sq);
  border-radius: var(--eb-radius-lg);
  box-shadow: 0 2px 6px rgba(4, 55, 64, .04), 0 20px 48px rgba(4, 55, 64, .07);
}
.contact-form { max-width: 100%; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--eb-navy);
}
.form-optional { font-weight: 400; color: var(--eb-ink-soft); }

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--eb-font-body);
  font-size: .96rem;
  color: var(--eb-ink);
  background: var(--eb-bg);
  border: 1px solid var(--eb-border-sq);
  border-radius: 10px;
  transition: border-color .18s var(--eb-ease), box-shadow .18s var(--eb-ease), background-color .18s var(--eb-ease);
}
.form-row textarea { resize: vertical; min-height: 140px; }
.form-row select {
  appearance: none;
  min-height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E5A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  background-color: var(--eb-white);
  border-color: var(--eb-teal);
  box-shadow: 0 0 0 3px rgba(0, 158, 160, .18);
}

/* Piège à robots : masqué visuellement, jamais atteignable au clavier ou au
   lecteur d'écran — donc jamais rempli par une personne réelle. */
.contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-form .cta-button { margin-top: 8px; width: 100%; }

/* ── Colonne « nous joindre » ── */
.contact-info-card {
  max-width: 340px;
  padding: 28px 26px;
  background: var(--eb-navy);
  border-radius: var(--eb-radius-lg);
}
.contact-info-title {
  margin: 0 0 18px;
  font-family: var(--eb-font-title);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--eb-white);
}
.contact-info-block { margin: 0; }
.contact-info-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-info-row + .contact-info-row { margin-top: 20px; }
.contact-info-row svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--eb-teal-lt);
}
.contact-info-row dt {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 3px;
}
.contact-info-row dd {
  margin: 0;
  font-size: .96rem;
  font-weight: 600;
  color: var(--eb-white);
  line-height: 1.4;
}
.contact-info-row a {
  color: var(--eb-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .32);
}
.contact-info-row a:hover { border-color: rgba(255, 255, 255, .8); }

.form-privacy-note {
  max-width: 320px;
  /* L'écart avec la carte au-dessus vient désormais du `gap` de
     .contact-info-col (flex), pas d'une marge propre : les deux cumulaient
     sinon un espace démesuré une fois la colonne étirée sur toute la hauteur. */
  font-size: .85rem;
  color: var(--eb-ink-soft);
  line-height: 1.55;
}

@media (max-width: 560px) {
  .contact-form-card { padding: 26px 22px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* .section-shot / .section-shot-frame : déplacés dans base.css (partagés
   avec la visite produit de l'accueil, homepage.css, qui utilisait jusque-là
   un cadre différent). */

/* ── Blog ── */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px;
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-sm);
  text-decoration: none;
  transition: transform .25s var(--eb-ease), box-shadow .25s var(--eb-ease), border-color .25s var(--eb-ease);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--eb-shadow-md);
  border-color: var(--eb-border-sq);
}
.blog-card:active { transform: translateY(-1px) scale(.99); }
.blog-card-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--eb-teal-deep);
  background: var(--eb-teal-pale);
  border-radius: 100px;
}
.blog-card h2 {
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--eb-navy);
  margin: 0 0 10px;
}
.blog-card p {
  font-size: .93rem;
  color: var(--eb-ink-soft);
  line-height: 1.55;
  margin: 0 0 18px;
}
.blog-card-date {
  margin-top: auto;
  font-size: .82rem;
  font-weight: 600;
  color: var(--eb-ink-soft);
}

/* ── Ressources (bibliothèque de guides) ──
   Même composant que .blog-card (carte-lien, survol identique) : réutilise
   la classe plutôt que de la dupliquer, seuls le badge et le pied diffèrent. */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.resource-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px;
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-sm);
  text-decoration: none;
  transition: transform .25s var(--eb-ease), box-shadow .25s var(--eb-ease), border-color .25s var(--eb-ease);
}
.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--eb-shadow-md);
  border-color: var(--eb-border-sq);
}
.resource-card:active { transform: translateY(-1px) scale(.99); }
.resource-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 5px 13px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--eb-teal-deep);
  background: var(--eb-teal-pale);
  border-radius: 100px;
}
.resource-card-tag svg { width: 13px; height: 13px; }
.resource-card h2 {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--eb-navy);
  margin: 0 0 10px;
}
.resource-card p {
  font-size: .93rem;
  color: var(--eb-ink-soft);
  line-height: 1.55;
  margin: 0 0 18px;
}
.resource-card-meta {
  margin-top: auto;
  font-size: .82rem;
  font-weight: 600;
  color: var(--eb-ink-soft);
}

.site-main--article { max-width: 780px; margin: 0 auto; padding: 56px 24px 88px; }
.blog-article-header { margin-bottom: 8px; }
.blog-article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: .88rem;
  color: var(--eb-ink-soft);
}
.blog-article-back { margin-top: 3em; }
.blog-article-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--eb-teal-deep);
  text-decoration: none;
  transition: color .18s var(--eb-ease);
}
.blog-article-back a:hover { color: var(--eb-navy); }
.blog-article-back svg { width: 18px; height: 18px; transition: transform .2s var(--eb-ease); }
/* Symétrique du survol des .cta-button (flèche qui avance vers la droite,
   ici vers l'arrière) : même langage d'interaction, jamais utilisé côté
   retour jusqu'ici. */
.blog-article-back a:hover svg { transform: translateX(-2px); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card-featured { order: -1; }
  .split-panel { grid-template-columns: 1fr; }
  .role-compare { grid-template-columns: 1fr; }
  .role-compare > div:first-child { border-right: 0; border-bottom: 1px solid var(--eb-border); }
}
@media (max-width: 640px) {
  .step-row { grid-template-columns: 36px 1fr; gap: 14px; }
  .step-row-num { width: 34px; height: 34px; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.has-reveal .item-card,
  body.has-reveal .step-row,
  body.has-reveal .pricing-card,
  body.has-reveal .faq-item,
  body.has-reveal .identity-block,
  body.has-reveal .principle-box,
  body.has-reveal .blog-card,
  body.has-reveal .resource-card,
  body.has-reveal .section-shot,
  body.has-reveal .contact-form-card,
  body.has-reveal .contact-info-card,
  body.has-reveal .split-panel > div,
  body.has-reveal .role-compare > div,
  body.has-reveal .access-row,
  body.has-reveal .flow-pipeline-step,
  body.has-reveal .founders-photo,
  body.has-reveal .founder-card,
  body.has-reveal .page-section > h2,
  body.has-reveal .page-section-inner > h2,
  body.has-reveal .page-section > .section-heading,
  body.has-reveal .page-section-inner > .section-heading,
  body.has-reveal .section-heading-icon,
  body.has-reveal .page-section-kicker {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .item-card:hover .item-card-icon { transform: none; }
}