/* =====================================================================
   sections-services.css
   Snippets gabarit pour les 9 pages services (sous-pages des 3 piliers).
   Introduit 6 nouveaux snippets, à charger APRÈS theme.css ET
   sections-pillar.css (cette feuille étend ou complète, ne réécrit pas) :
     .s_hero_service        → hero navy-ink avec key facts en bandeau
     .s_eligibility         → 2 colonnes "Pour vous si / Pas pour vous si"
     .s_forms_compare       → tableau de comparaison des formes juridiques
     .s_deliverables        → grille de livrables (puces check)
     .s_pricing_detail      → tableau prix détaillé + bandeau "à prévoir"
     .s_partners_detail     → 3-4 partenaires en bandeau horizontal
   Réutilise sans modification : .s_pillar_journey, .s_pillar_faq,
   .s_pillar_form, .c-lead-form (depuis sections-pillar.css).
   ===================================================================== */


/* =====================================================================
   S_HERO_SERVICE — hero navy-ink des sous-pages services
   Différent du hero pilier (canvas) : fond sombre pour marquer la profondeur
   d'engagement. Layout 12 cols : H1 large + lead + CTA + key facts.
   ===================================================================== */

.s_hero_service {
  background: var(--navy-ink);
  color: var(--canvas);
  padding-top: var(--s-9);
  padding-bottom: var(--s-8);
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .s_hero_service {
    padding-top: var(--s-7);
    padding-bottom: var(--s-7);
  }
}

/* Grille filigrane verticale 12 cols — signature visuelle sur tous les heros
   service (fond sombre). Variante on-dark du pattern .s-section--gridlines de
   theme.css (qui utilise --line-soft pour les heros clairs). Désactivée sur
   mobile : 4 cols étroites + bruit visuel = pas pertinent. Mask top/bottom
   pour atténuer les bords (pas de coupe nette à hauteur du hero). */
.s_hero_service::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to right,
    rgba(250, 247, 241, 0.08) 1px,
    transparent 1px
  );
  background-size: calc(100% / 12) 100%;
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
@media (max-width: 1023px) {
  .s_hero_service::before {
    background-size: calc(100% / 6) 100%;
  }
}
@media (max-width: 767px) {
  .s_hero_service::before { display: none; }
}

/* Garantit que le contenu passe AU-DESSUS du filigrane */
.s_hero_service__inner { z-index: 2; }

.s_hero_service__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter-desktop);
}
@media (max-width: 1023px) {
  .s_hero_service__inner {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gutter-tablet);
  }
}
@media (max-width: 767px) {
  .s_hero_service__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter-mobile);
  }
}

/* Breadcrumb sur fond sombre — passage au texte clair semi-opaque */
.s_hero_service__breadcrumb {
  grid-column: 1 / -1;
  margin-bottom: var(--s-4);
}
.s_hero_service__breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.45);
}
.s_hero_service__breadcrumb a {
  color: rgba(250, 247, 241, 0.45);
  transition: color var(--duration-fast) ease-out;
}
.s_hero_service__breadcrumb a:hover { color: var(--canvas); }
.s_hero_service__breadcrumb [aria-current="page"] {
  color: rgba(250, 247, 241, 0.85);
}
.s_hero_service__breadcrumb .breadcrumb-sep { opacity: 0.4; }

.s_hero_service__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: var(--s-5);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.5);
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.s_hero_service__eyebrow .mono { color: var(--orange); }
.s_hero_service__eyebrow .sep {
  opacity: 0.35;
  color: var(--line);
}

.s_hero_service__title {
  grid-column: 1 / span 10;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 84px);
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--canvas);
  margin: 0 0 var(--s-6);
  position: relative;
  z-index: 2;
}
.s_hero_service__title .serif-em {
  color: var(--orange);
  padding: 0 0.04em;
  font-size: 1.05em;
  letter-spacing: -0.02em;
}
@media (max-width: 1023px) {
  .s_hero_service__title { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  /* Resserre la typo mobile pour garantir le H1 sur 2 lignes même
     avec le logo Odoo inline qui a une largeur non-typographique. */
  .s_hero_service__title { font-size: clamp(40px, 11vw, 56px); }
}

.s_hero_service__lead {
  grid-column: 1 / span 8;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  color: rgba(250, 247, 241, 0.78);
  margin: 0 0 var(--s-7);
  max-width: 64ch;
}
.s_hero_service__lead .mono { color: var(--canvas); }
@media (max-width: 1023px) {
  .s_hero_service__lead { grid-column: 1 / -1; }
}

.s_hero_service__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}
@media (max-width: 767px) {
  .s_hero_service__actions { gap: var(--s-3); }
  .s_hero_service__actions .c-button { width: 100%; }
  .s_hero_service__actions .c-button--ghost { width: auto; }
}

/* CTA fantôme adapté au fond sombre — couleur claire, hover orange */
.s_hero_service .c-button--ghost-on-dark {
  color: var(--canvas);
  border: none;
  padding-inline: 0;
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.s_hero_service .c-button--ghost-on-dark:hover { color: var(--orange); }

/* Bandeau key facts en bas du hero — 4 chiffres clés en mono.
   Aligné sur le même pattern que .l-pillar-hero__counters mais sur navy. */
.s_hero_service__facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(250, 247, 241, 0.12);
}
@media (max-width: 767px) {
  .s_hero_service__facts {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }
}

.s_hero_service__fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.s_hero_service__fact-num {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--canvas);
}
.s_hero_service__fact-num .unit {
  color: inherit;
  font-weight: 300;
}
.s_hero_service__fact-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.5);
  line-height: 1.4;
  margin: 0;
}


/* =====================================================================
   S_ELIGIBILITY — "Pour vous si / Pas pour vous si"
   Deux colonnes côte à côte. Card claire à gauche (vert success ténu),
   card sombre à droite (gris/canvas-warm) — pas de rouge agressif.
   ===================================================================== */

.s_eligibility {
  background: var(--canvas);
  border-top: 1px solid var(--line);
}

.s_eligibility__head {
  grid-column: 1 / span 8;
  margin-bottom: var(--s-7);
}
.s_eligibility__head h2 { margin-top: var(--s-4); }
@media (max-width: 1023px) {
  .s_eligibility__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_eligibility__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
@media (max-width: 1023px) {
  .s_eligibility__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

.c-eligibility-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.c-eligibility-card--match {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.04);
}
.c-eligibility-card--nomatch {
  background: var(--canvas-warm);
  border-style: dashed;
}

.c-eligibility-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.c-eligibility-card--match .c-eligibility-card__label { color: var(--success); }
.c-eligibility-card--nomatch .c-eligibility-card__label { color: var(--text-mid); }

.c-eligibility-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0;
}

.c-eligibility-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-eligibility-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mid);
}
.c-eligibility-card__list .icon {
  flex-shrink: 0;
  margin-top: 3px;
}
.c-eligibility-card--match .c-eligibility-card__list .icon { color: var(--success); }
.c-eligibility-card--nomatch .c-eligibility-card__list .icon { color: var(--text-soft); }


/* =====================================================================
   S_FORMS_COMPARE — tableau de comparaison des formes juridiques
   4 colonnes desktop, scroll horizontal tablet, cards empilées mobile.
   Première colonne = labels (capital, associés…), 4 suivantes = formes.
   ===================================================================== */

.s_forms_compare {
  background: var(--canvas-warm);
  border-top: 1px solid var(--line);
}

.s_forms_compare__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_forms_compare__head h2 { margin-top: var(--s-4); }
.s_forms_compare__head h2 .serif-em { color: var(--orange); padding: 0 0.04em; }
.s_forms_compare__head p {
  margin-top: var(--s-5);
  color: var(--text-mid);
  max-width: 56ch;
}
@media (max-width: 1023px) {
  .s_forms_compare__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

/* Table desktop — overflow auto sur le wrapper pour scroll horizontal en
   tablet sans casser le layout de la grille parent. */
.s_forms_compare__wrap {
  grid-column: 1 / -1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.s_forms_compare__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.s_forms_compare__table thead th {
  background: var(--canvas);
  text-align: left;
  padding: var(--s-5);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.s_forms_compare__table thead th:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  width: 22%;
}
.s_forms_compare__table thead .form-name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--navy);
  margin-bottom: var(--s-2);
}
.s_forms_compare__table thead .form-tagline {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--text-soft);
  line-height: 1.4;
}

/* Colonne mise en avant (recommandée) */
.s_forms_compare__table thead th.is-featured {
  background: var(--peach);
  position: relative;
}
.s_forms_compare__table thead th.is-featured::before {
  content: "RECOMMANDÉ";
  position: absolute;
  top: var(--s-3);
  right: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--orange);
}
.s_forms_compare__table tbody td.is-featured {
  background: rgba(253, 238, 228, 0.4);
}

.s_forms_compare__table tbody tr {
  border-bottom: 1px solid var(--line);
}
.s_forms_compare__table tbody tr:last-child { border-bottom: none; }
.s_forms_compare__table tbody th {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  vertical-align: top;
  background: var(--canvas);
}
.s_forms_compare__table tbody td {
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mid);
  vertical-align: top;
}
.s_forms_compare__table tbody td .mono {
  color: var(--navy);
  font-weight: 500;
}
.s_forms_compare__table tbody td.cell-strong {
  color: var(--text-strong);
  font-weight: 500;
}

@media (max-width: 1023px) {
  .s_forms_compare__table { min-width: 680px; }
}

/* Desktop : tableau visible, cards cachées. Mobile : inverse.
   Le scroll horizontal d'un tableau 4 colonnes cache la moitié de l'info
   (le visiteur ne pense pas à scroller latéralement) — on bascule en cards
   empilées verticalement, ordre stratégique : SARL d'abord (recommandé),
   puis SARL-S, EI, SA. */
.s_forms_compare__cards { display: none; }
@media (max-width: 767px) {
  .s_forms_compare__wrap { display: none; }
  .s_forms_compare__cards {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    grid-column: 1 / -1;
  }
}

.c-form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.c-form-card--featured {
  border-color: var(--orange);
  background: rgba(253, 238, 228, 0.4);
}
.c-form-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-form-card__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.c-form-card__tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}
.c-form-card__flag {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.c-form-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
}
.c-form-card__body > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-form-card__body > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.c-form-card__body dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.c-form-card__body dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-strong);
}


/* =====================================================================
   S_DELIVERABLES — ce que nous livrons
   Grille 2x3 ou 3x2 de puces "check" avec titre court + détail.
   ===================================================================== */

.s_deliverables {
  background: var(--canvas);
  border-top: 1px solid var(--line);
}

.s_deliverables__head {
  grid-column: 1 / span 8;
  margin-bottom: var(--s-7);
}
.s_deliverables__head h2 { margin-top: var(--s-4); }
@media (max-width: 1023px) {
  .s_deliverables__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_deliverables__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6) var(--s-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1023px) {
  .s_deliverables__list { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}
@media (max-width: 640px) {
  .s_deliverables__list { grid-template-columns: 1fr; gap: var(--s-4); }
}

.c-deliverable {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.c-deliverable__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--peach);
  color: var(--orange);
  border-radius: var(--radius-sm);
}
.c-deliverable__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-strong);
  margin: 0;
}
.c-deliverable__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0;
  max-width: 36ch;
}


/* =====================================================================
   S_PRICING_DETAIL — tableau prix Advena + bandeau frais à prévoir
   Deux blocs verticaux : prix Advena (forfait fixe) puis "À prévoir en plus"
   (frais notaires, RCS, capital social, dépendant de la forme juridique).
   ===================================================================== */

.s_pricing_detail {
  background: var(--peach);
  border-top: 1px solid var(--line);
}

.s_pricing_detail__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_pricing_detail__head h2 { margin-top: var(--s-4); }
.s_pricing_detail__head p {
  margin-top: var(--s-5);
  max-width: 60ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_pricing_detail__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_pricing_detail__body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
@media (max-width: 1023px) {
  .s_pricing_detail__body { grid-template-columns: 1fr; gap: var(--s-5); }
}

.c-pricing-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.c-pricing-block--advena { background: var(--surface); }
.c-pricing-block--extras {
  background: var(--canvas-warm);
  border-style: dashed;
}

.c-pricing-block__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.c-pricing-block--advena .c-pricing-block__label { color: var(--orange); }

.c-pricing-block__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0;
}

.c-pricing-block__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0;
  max-width: 38ch;
}

.c-pricing-block__list {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.c-pricing-block__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
}
.c-pricing-block__list li:last-child { border-bottom: none; }
.c-pricing-block__list .row-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.c-pricing-block__list .row-value {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-align: right;
}
.c-pricing-block--extras .c-pricing-block__list .row-value {
  color: var(--text-mid);
  font-weight: 400;
}

.c-pricing-block__note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: var(--s-2) 0 0;
}


/* =====================================================================
   S_PARTNERS_DETAIL — bandeau partenaires anonymisés
   3-4 cards horizontales : type de partenaire (banque, notaire, comptable…)
   + description du rôle. Pas de logo, pas de nom : on protège la relation
   commerciale et on évite l'illusion de neutralité.
   ===================================================================== */

.s_partners_detail {
  background: var(--canvas-warm);
  border-top: 1px solid var(--line);
}

.s_partners_detail__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_partners_detail__head h2 { margin-top: var(--s-4); }
.s_partners_detail__head p {
  margin-top: var(--s-5);
  max-width: 60ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_partners_detail__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_partners_detail__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1023px) {
  .s_partners_detail__list { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}
@media (max-width: 640px) {
  .s_partners_detail__list { grid-template-columns: 1fr; }
}

.c-partner-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.c-partner-card__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--peach);
  color: var(--orange);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-2);
}
.c-partner-card__role {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.c-partner-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-strong);
  margin: 0;
}
.c-partner-card__desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0;
}


/* =====================================================================
   EXTENSIONS — journey "détaillé" pour les sous-pages services
   La timeline parente du pilier reste utilisable telle quelle, mais ici
   on ajoute un sous-titre/description par étape (ex. "Livrable :",
   "Action attendue :"). On ne crée pas de nouvelle classe — on étend
   .s_pillar_journey via un modificateur.
   ===================================================================== */

.s_pillar_journey--detailed .s_pillar_journey__step {
  padding-right: var(--s-6);
}

.s_pillar_journey__livrable {
  display: block;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  line-height: 1.55;
}
.s_pillar_journey__livrable strong {
  color: var(--orange);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: block;
  font-size: 10px;
  margin-bottom: var(--s-1);
}


/* =====================================================================
   FORM — extension : select + champs spécifiques services
   Sur les sous-pages services, le formulaire CTA peut intégrer un select
   (ex. "délai souhaité"). On reprend le style des inputs existants.
   ===================================================================== */

.c-lead-form select {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231D1C5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  transition: border-color var(--duration-fast) ease-out,
              box-shadow var(--duration-fast) ease-out;
}
.c-lead-form select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(234, 109, 63, 0.2);
  outline: none;
}

/* Sous-libellé d'option radio (ex. "(en nom propre)", "(12 000 € de capital)").
   Reste sur la même ligne que le libellé principal jusqu'à manquer de place,
   puis passe à la ligne en dessous, en couleur secondaire. */
.c-lead-form__radio-sub {
  display: inline;
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 400;
  margin-left: 4px;
}
@media (max-width: 540px) {
  .c-lead-form__radio-sub {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
}

/* Variante 2 colonnes pour radio-group (5 items : EI, SARL-S, SARL, SA, unsure).
   En 2 cols, les 4 vrais services tiennent sur 2 lignes, "unsure" passe en
   pleine largeur en 5e via .c-lead-form__radio--unsure (déjà géré). */
.c-lead-form__radio-group--grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
@media (max-width: 540px) {
  .c-lead-form__radio-group--grid-2 { grid-template-columns: 1fr; }
}


/* =====================================================================
   JOURNEY "CARDS" — variante des sous-pages services
   Layout 1 colonne pleine largeur. Chaque étape devient une card autonome
   avec bandeau supérieur (numéro géant + acteur·durée), titre, description,
   et encart livrable. Plus lisible que la variante "vertical" (qui utilise
   un grid 12 cols et laisse beaucoup d'espace gaspillé sur desktop).
   ===================================================================== */

/* Override du head : pleine largeur dès qu'on est en variante --detailed */
.s_pillar_journey--detailed .s_pillar_journey__head {
  grid-column: 1 / -1;
}

.s_pillar_journey__track--cards {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-4);
  list-style: none;
  padding: 0;
}

/* Grid 2 cols (auto + 1fr) avec areas explicites :
   - Bandeau supérieur : num à gauche, meta à droite (justifiés espace-between)
   - Title, desc, livrable : pleine largeur en dessous
   Le même layout fonctionne sur desktop ET mobile — seule la taille du num
   et le padding sont réduits sur mobile. Le meta wrap dans son cell si
   nécessaire (flex-wrap actif). */
.s_pillar_journey__step--card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num   meta"
    "title title"
    "desc  desc"
    "liv   liv";
  column-gap: var(--s-4);
  row-gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.s_pillar_journey__step--card:hover {
  border-color: rgba(29, 28, 90, 0.2);
  transform: translateY(-2px);
}

.s_pillar_journey__step--card .s_pillar_journey__num {
  grid-area: num;
  font-size: clamp(48px, 4.5vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--navy);
  border-bottom: none;
  padding-bottom: 0;
  min-height: 0;
  margin: 0;
  align-self: center;
}

.s_pillar_journey__step--card .s_pillar_journey__meta {
  grid-area: meta;
  justify-self: end;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: center;
}
.s_pillar_journey__step--card .s_pillar_journey__meta .sep {
  color: var(--line);
}
.s_pillar_journey__step--card .s_pillar_journey__meta .actor {
  color: var(--orange);
  font-weight: 500;
}
.s_pillar_journey__step--card .s_pillar_journey__meta .actor--with-you {
  color: var(--navy);
  font-weight: 500;
}

.s_pillar_journey__step--card .s_pillar_journey__title {
  grid-area: title;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-strong);
  margin: var(--s-3) 0 0;
}
.s_pillar_journey__step--card .s_pillar_journey__desc {
  grid-area: desc;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
  max-width: 70ch;
}
.s_pillar_journey__step--card .s_pillar_journey__livrable {
  grid-area: liv;
  margin-top: var(--s-2);
  padding: var(--s-4);
  background: var(--canvas-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  border-top-style: solid;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.55;
}

/* Variante --list : items à puces verticaux (au lieu d'une concaténation
   par ·). Plus lisible mobile, plus aéré desktop. Le label en mono uppercase
   garde la signature, les items repassent en Geist Sans pour la lecture. */
.s_pillar_journey__livrable--list ul {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.s_pillar_journey__livrable--list ul li {
  position: relative;
  padding-left: var(--s-4);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.55;
}
.s_pillar_journey__livrable--list ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 500;
}

/* Mobile : la grille passe en colonne unique. Le num reste en haut,
   le meta vient se ranger juste dessous, aligné à gauche (au lieu de
   se coller à droite du num qui débordait du viewport sur les petits
   écrans). Le titre, la desc et le livrable suivent ensuite. */
@media (max-width: 767px) {
  .s_pillar_journey__step--card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "meta"
      "title"
      "desc"
      "liv";
    padding: var(--s-5);
    row-gap: var(--s-2);
  }
  .s_pillar_journey__step--card .s_pillar_journey__num {
    font-size: 40px;
    align-self: start;
  }
  .s_pillar_journey__step--card .s_pillar_journey__meta {
    justify-self: start;
    font-size: 11px;
    letter-spacing: 0.14em;
    gap: 4px var(--s-2);
    text-align: left;
  }
  /* Sur très petit écran, masquer les séparateurs · pour réduire
     l'encombrement visuel quand le meta wrap sur 2 lignes. */
  .s_pillar_journey__step--card .s_pillar_journey__meta .sep {
    display: none;
  }
  .s_pillar_journey__step--card .s_pillar_journey__title {
    margin-top: var(--s-2);
  }
}


/* =====================================================================
   PRICING — extensions : liste détaillée + encart capital pédagogique
   ===================================================================== */

/* Liste détaillée : chaque ligne a un label + sous-label explicatif + valeur.
   Le sous-label permet d'expliquer chaque ligne (ex. "Sommes avancées par
   le notaire aux administrations") sans alourdir le texte principal. */
.c-pricing-block__list--detailed li {
  align-items: flex-start;
  gap: var(--s-5);
}
.c-pricing-block__list--detailed .row-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text-strong);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.c-pricing-block__list--detailed .row-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  line-height: 1.45;
}
.c-pricing-block__list--detailed .row-value {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Mobile : chaque ligne devient une "card" autonome empilée pour éviter
   le wrapping sale des montants. Label + description en haut, montant en bas. */
@media (max-width: 640px) {
  .c-pricing-block__list--detailed li {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-4) 0;
  }
  .c-pricing-block__list--detailed .row-value {
    align-self: flex-end;
    font-size: 17px;
  }
}

/* Encart pédagogique sur le capital social — placé à la suite des deux cards
   prix, sur fond peach plein avec bordure orange ténue. Lecture en 2 cols
   (icône + texte) qui passe en 1 col sur mobile. */
.c-capital-callout {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5) var(--s-6);
  background: var(--peach);
  border: 1px solid rgba(234, 109, 63, 0.3);
  border-radius: var(--radius-sm);
}
@media (max-width: 540px) {
  .c-capital-callout {
    grid-template-columns: 1fr;
    padding: var(--s-5);
  }
}
.c-capital-callout__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--orange-dark);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.c-capital-callout__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 var(--s-2);
}
.c-capital-callout__body p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0;
  max-width: 70ch;
}

/* Variante inline — encart intégré dans une card pricing pour équilibrer
   la hauteur des deux cards et garder la pédagogie à côté du tableau.
   Fond peach 0.4 (signature visuelle des notes pédagogiques en pied de
   card), padding 16px, radius 2px. */
.c-capital-callout--inline {
  grid-column: auto;
  margin-top: auto;
  padding: 16px;
  background: rgba(253, 238, 228, 0.4);
  border: none;
  border-radius: var(--radius-sm);
  align-items: flex-start;
  gap: var(--s-3);
}
.c-capital-callout--inline .c-capital-callout__icon {
  width: 32px;
  height: 32px;
  background: var(--surface);
  color: var(--orange);
}
.c-capital-callout--inline .c-capital-callout__title {
  font-size: 15px;
  margin: 0 0 4px;
}
.c-capital-callout--inline .c-capital-callout__body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
}
@media (max-width: 540px) {
  .c-capital-callout--inline {
    grid-template-columns: 1fr;
  }
}

/* Sous-variante --no-decoration : encart purement textuel (pas d'icône,
   pas de titre). Utilisée dans la card droite "Frais à part" pour rétablir
   l'équilibre vertical des 2 cards desktop après suppression de la ligne
   traductions. Mirror visuel de l'encart de la card gauche. */
.c-capital-callout--no-decoration {
  grid-template-columns: 1fr;
}
.c-capital-callout--no-decoration .c-capital-callout__body p {
  margin: 0;
}


/* =====================================================================
   HERO SERVICE — variante avec pastilles prix (pour /site-web et autres
   sous-pages services à prix affichés). Bandeau de 3 pastilles entre le
   lead et les CTA principaux. La pastille du milieu peut être mise en
   avant via .c-price-pill--featured (badge "Format polyvalent").
   ===================================================================== */

.s_hero_service__pricing {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-7);
  margin-bottom: var(--s-7);
  position: relative;
  z-index: 2;
}
@media (max-width: 1023px) {
  .s_hero_service__pricing {
    grid-template-columns: 1fr;
    margin-top: var(--s-6);
    margin-bottom: var(--s-6);
  }
}

.c-price-pill {
  position: relative;
  background: var(--navy);
  border: 1px solid rgba(250, 247, 241, 0.15);
  border-radius: var(--radius-sm);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: border-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.c-price-pill:hover {
  border-color: rgba(234, 109, 63, 0.4);
  transform: translateY(-2px);
}

/* Variante mise en avant : bordure orange ténue + badge "Format polyvalent"
   en haut à droite. Pas de fond différent — la signature reste discrète. */
.c-price-pill--featured {
  border-color: rgba(234, 109, 63, 0.5);
}
/* Badge "accroché" au-dessus de la card : sort à mi-hauteur au-dessus
   de la bordure top, centré horizontalement. Pattern uniforme pour
   tous les flags de pastilles featured (site-web "Format polyvalent",
   assistance-financiere "Le plus choisi", finance-academy "Le plus
   demandé"). z-index pour rester au-dessus de la bordure. */
.c-price-pill__flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--canvas);
  background: var(--orange);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.c-price-pill__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.55);
  margin: 0;
}
.c-price-pill__label .mono { color: var(--orange); }

.c-price-pill__amount {
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--canvas);
  margin: var(--s-1) 0 0;
  white-space: nowrap;
}
.c-price-pill__amount .unit {
  font-size: 0.6em;
  color: rgba(250, 247, 241, 0.55);
  font-weight: 400;
  margin-left: 2px;
}

.c-price-pill__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(250, 247, 241, 0.55);
  line-height: 1.5;
  margin: 0;
}


/* =====================================================================
   S_WHY_US — 4 arguments en grille 2x2 (variante service-page de
   s_pillar_why qui est en 3 cols). Réutilisable sur les 8 sous-pages
   services restantes. La même classe sert pour s_expertise_detail
   (S07) avec un background différent — voir plus bas.
   ===================================================================== */

.s_why_us {
  background: var(--canvas);
  border-top: 1px solid var(--line);
}

.s_why_us__head {
  grid-column: 1 / span 8;
  margin-bottom: var(--s-7);
}
.s_why_us__head h2 { margin-top: var(--s-4); }
.s_why_us__head p {
  margin-top: var(--s-5);
  max-width: 60ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_why_us__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_why_us__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
  .s_why_us__list { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Card commune why_us / expertise_detail — icône en haut, titre puis desc.
   Hover : lift + bordure orange ténue (cohérent avec les autres cards). */
.c-why-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.c-why-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.c-why-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--peach);
  color: var(--orange);
  border-radius: var(--radius-sm);
}
.c-why-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0;
}
.c-why-card__desc {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
  max-width: 50ch;
}


/* =====================================================================
   S_EXPERTISE_DETAIL — même structure que s_why_us, fond canvas-warm.
   Réutilise .c-why-card pour les 4 blocs d'expertise.
   ===================================================================== */

.s_expertise_detail {
  background: var(--canvas-warm);
  border-top: 1px solid var(--line);
}

.s_expertise_detail__head {
  grid-column: 1 / span 8;
  margin-bottom: var(--s-7);
}
.s_expertise_detail__head h2 { margin-top: var(--s-4); }
.s_expertise_detail__head p {
  margin-top: var(--s-5);
  max-width: 60ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_expertise_detail__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_expertise_detail__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
  .s_expertise_detail__list { grid-template-columns: 1fr; gap: var(--s-4); }
}


/* =====================================================================
   FORMS COMPARE — variante 3 colonnes (pour /site-web : Vitrine,
   Réservation, E-commerce). Reprend la base mais redistribue les
   largeurs en 4-cols (label + 3 valeurs).
   ===================================================================== */

.s_forms_compare__table--3cols thead th:first-child {
  width: 18%;
}

/* Override du badge "RECOMMANDÉ" hérité — sur les pages services à 3 cols
   (site-web), on affiche "FORMAT POLYVALENT" pour rester cohérent avec
   la pastille du hero et éviter une recommandation commerciale non
   justifiée éditorialement. */
.s_forms_compare__table--3cols thead th.is-featured::before {
  content: "FORMAT POLYVALENT";
}

/* Ligne prix mise en avant en pied de tableau */
.s_forms_compare__table--3cols .row-price {
  border-top: 1px solid var(--line);
}
.s_forms_compare__table--3cols .row-price td,
.s_forms_compare__table--3cols .row-price th {
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
  background: var(--canvas);
}
.s_forms_compare__table--3cols .row-price th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.s_forms_compare__table--3cols .row-price td {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--orange);
}
.s_forms_compare__table--3cols .row-price td.is-featured {
  background: var(--peach);
  font-weight: 500;
}

/* Note en pied de section + CTA centré */
.s_forms_compare__note {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
  font-style: italic;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.s_forms_compare__cta {
  grid-column: 1 / -1;
  margin-top: var(--s-5);
  text-align: center;
}


/* =====================================================================
   DELIVERABLES — variante "quad" : 4 catégories en grille 2x2 avec
   listes à puces complètes. Différent du s_deliverables de base
   (3 cols simple, 1 ligne par item).
   ===================================================================== */

.s_deliverables--quad .s_deliverables__categories {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
  .s_deliverables--quad .s_deliverables__categories {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
}

.c-deliverable-cat {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.c-deliverable-cat:hover {
  border-color: rgba(234, 109, 63, 0.5);
  transform: translateY(-3px);
}

.c-deliverable-cat__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.c-deliverable-cat__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--peach);
  color: var(--orange);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.c-deliverable-cat__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0;
}

.c-deliverable-cat__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-deliverable-cat__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
}
.c-deliverable-cat__list .icon {
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 3px;
}


/* =====================================================================
   EXCLUSIONS CALLOUT — encart pleine largeur "Ce qui n'est PAS inclus"
   après les livrables. Transparence volontaire.
   ===================================================================== */

.c-exclusions-callout {
  grid-column: 1 / -1;
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  background: var(--canvas-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.c-exclusions-callout__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.c-exclusions-callout__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--orange-dark);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.c-exclusions-callout__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0;
}
.c-exclusions-callout__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-5);
}
@media (max-width: 767px) {
  .c-exclusions-callout__list { grid-template-columns: 1fr; }
}
.c-exclusions-callout__list li {
  position: relative;
  padding-left: var(--s-4);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
}
.c-exclusions-callout__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 500;
}


/* =====================================================================
   JOURNEY — footnote italique sous le recap (utilisé sur /site-web pour
   préciser que les projets complexes prennent plus de temps).
   ===================================================================== */

.s_pillar_journey__footnote {
  grid-column: 1 / -1;
  margin-top: var(--s-5);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
  font-style: italic;
  max-width: 70ch;
}


/* =====================================================================
   PRICING EXAMPLE — bloc projection budgétaire à l'intérieur de la card
   "Frais à part" (S06). Affiche un total Année 1 concret.
   ===================================================================== */

.c-pricing-example {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--canvas-warm);
  border-radius: var(--radius-sm);
}
.c-pricing-example__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--s-3);
}
.c-pricing-example__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.c-pricing-example__list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px dashed var(--line);
}
.c-pricing-example__list > div:last-child { border-bottom: none; }
.c-pricing-example__list dt {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-mid);
  margin: 0;
}
.c-pricing-example__list dd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  color: var(--navy);
  margin: 0;
  text-align: right;
}
.c-pricing-example__total {
  margin-top: var(--s-2);
  padding-top: var(--s-3) !important;
  border-top: 1px solid var(--line);
  border-bottom: none !important;
}
.c-pricing-example__total dt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-strong);
}
.c-pricing-example__total dd {
  font-size: 17px;
  color: var(--orange);
}
.c-pricing-example__note {
  margin: var(--s-3) 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: italic;
  color: var(--text-soft);
}


/* =====================================================================
   HERO PRICING LINK — lien sous les pastilles formules
   ===================================================================== */

.s_hero_service__pricing-link {
  grid-column: 1 / -1;
  margin: calc(-1 * var(--s-5)) 0 var(--s-7);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--orange);
  position: relative;
  z-index: 2;
}
.s_hero_service__pricing-link a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) ease-out;
}
.s_hero_service__pricing-link a:hover { border-bottom-color: var(--orange); }


/* =====================================================================
   S_USE_CASES — grille de situations-déclencheurs (NEW snippet)
   Configurable de 3 à 9 blocs · grid auto-fit minmax(280px, 1fr).
   Réutilisé sur Finance Academy et Expertise comptable.
   ===================================================================== */

.s_use_cases {
  background: var(--canvas);
  border-top: 1px solid var(--line);
}
.s_use_cases__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_use_cases__head h2 { margin-top: var(--s-4); }
.s_use_cases__head p {
  margin-top: var(--s-5);
  max-width: 64ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_use_cases__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_use_cases__list {
  grid-column: 1 / -1;
  display: grid;
  /* Grille 3 cols desktop fixe (vs auto-fit qui produisait 4 cols sur
     écrans larges). Cohérence avec s_topics_grid juste en dessous sur
     les pages Academy et alignement avec le brief 3×2. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1023px) {
  .s_use_cases__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .s_use_cases__list { grid-template-columns: 1fr; }
}

.c-use-case {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  position: relative;
  transition: border-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.c-use-case:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
}
.c-use-case__num {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
  opacity: 0.3;
  align-self: flex-start;
}
.c-use-case__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}
.c-use-case__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}


/* =====================================================================
   S_DELIVERABLES_RICH — catégories de livrables (NEW snippet)
   4 catégories en grille 2x2 + 1 catégorie en bloc pleine largeur.
   Encart de précaution éditoriale en bas (verrou OEC).
   ===================================================================== */

.s_deliverables_rich {
  background: var(--canvas-warm);
  border-top: 1px solid var(--line);
}
.s_deliverables_rich__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_deliverables_rich__head h2 { margin-top: var(--s-4); }
.s_deliverables_rich__head h2 em { font-style: italic; }
.s_deliverables_rich__head p {
  margin-top: var(--s-5);
  max-width: 64ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_deliverables_rich__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_deliverables_rich__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
  .s_deliverables_rich__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

.c-deliverable-rich {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.c-deliverable-rich:hover {
  border-color: rgba(234, 109, 63, 0.5);
  transform: translateY(-3px);
}

.c-deliverable-rich--featured {
  grid-column: 1 / -1;
  margin-top: var(--s-5);
  padding: var(--s-7);
  border-top: 4px solid var(--orange);
}
@media (max-width: 767px) {
  .c-deliverable-rich--featured { padding: var(--s-5); margin-top: var(--s-4); }
}

.c-deliverable-rich__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.c-deliverable-rich--featured .c-deliverable-rich__head {
  border-bottom: none;
  padding-bottom: 0;
}
.c-deliverable-rich__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--peach);
  color: var(--navy);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-2);
}
.c-deliverable-rich__icon--orange { color: var(--orange); }
.c-deliverable-rich__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
}
.c-deliverable-rich__label .mono { color: var(--orange); }
.c-deliverable-rich__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
}
.c-deliverable-rich__desc {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: var(--s-3) 0 0;
  max-width: 64ch;
}

.c-deliverable-rich__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-deliverable-rich__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
}
.c-deliverable-rich__list .icon {
  color: var(--orange-dark);
  flex-shrink: 0;
  margin-top: 4px;
}
.c-deliverable-rich__list--2cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-5);
}
@media (max-width: 767px) {
  .c-deliverable-rich__list--2cols { grid-template-columns: 1fr; }
}

.s_deliverables_rich__footnote {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 64ch;
}


/* =====================================================================
   C_OEC_CALLOUT — encart de précaution éditoriale (verrou OEC)
   Frontière critique avec le métier comptable réglementé.
   ===================================================================== */

.c-oec-callout {
  grid-column: 1 / -1;
  margin-top: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: flex-start;
}
@media (max-width: 540px) {
  .c-oec-callout { grid-template-columns: 1fr; padding: var(--s-5); }
}
.c-oec-callout__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding-top: 4px;
}
.c-oec-callout__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--orange-dark);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.c-oec-callout__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin: 0;
}
.c-oec-callout__body p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}
.c-oec-callout__body p + p { margin-top: var(--s-3); }
.c-oec-callout__future {
  font-size: 13px !important;
  color: var(--text-soft) !important;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
}


/* =====================================================================
   S_LEVELS_COMPARE — table 3 formules (NEW snippet)
   ===================================================================== */

.s_levels_compare {
  background: var(--canvas);
  border-top: 1px solid var(--line);
}
.s_levels_compare__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_levels_compare__head h2 { margin-top: var(--s-4); }
.s_levels_compare__head h2 .serif-em { color: var(--orange); padding: 0 0.04em; }
.s_levels_compare__head p {
  margin-top: var(--s-5);
  max-width: 64ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_levels_compare__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_levels_compare__wrap {
  grid-column: 1 / -1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.s_levels_compare__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}
.s_levels_compare__table thead th {
  background: var(--canvas);
  text-align: left;
  /* Padding-top renforcé (s-7 = 48px) pour réserver l'espace du badge
     "Le plus choisi" qui sera positionné en absolute au-dessus de
     .level-name sur la colonne Pilotage. Les 3 colonnes data partagent
     ce padding pour garantir l'alignement de la baseline des titres. */
  padding: var(--s-7) var(--s-5) var(--s-5);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  border-bottom: 3px solid var(--text-soft);
  vertical-align: bottom;
  position: relative;
}
.s_levels_compare__table thead th:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  width: 18%;
  border-bottom-color: transparent;
  padding: var(--s-5);
}
.s_levels_compare__table thead .level-name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  color: var(--navy);
  margin-bottom: var(--s-2);
}
.s_levels_compare__table thead .level-tagline {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}
/* Mention paramétrage : sous-attribut visible dans le header de colonne,
   séparé du tagline par une fine bordure top + padding. Geist Mono
   uppercase, signature data du site. */
.s_levels_compare__table thead .level-param {
  display: block;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.4;
}
.s_levels_compare__table thead th.is-featured {
  background: var(--peach);
  border-bottom: 3px solid var(--orange);
}
/* Badge "Le plus choisi" : positionné absolute dans la zone de padding-top
   (48px) de la cellule featured, au-dessus de .level-name. Le flux normal
   du titre n'est pas affecté → les 3 titres (Essentiel, Pilotage, Projet)
   restent alignés sur la même ligne de base. */
.s_levels_compare__table thead .level-flag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-5);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canvas);
  background: var(--orange);
  border-radius: var(--radius-pill);
}
/* Renforcement de l'opacité du fond peach sur les cellules de données
   de la colonne Pilotage — meilleure lisibilité de la mise en avant. */
.s_levels_compare__table tbody td.is-featured {
  background: rgba(253, 238, 228, 0.7);
}
.s_levels_compare__table tbody tr {
  border-bottom: 1px solid var(--line);
}
.s_levels_compare__table tbody tr:last-child { border-bottom: none; }
.s_levels_compare__table tbody th {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  vertical-align: top;
  background: var(--canvas);
}
.s_levels_compare__table tbody td {
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
  vertical-align: top;
}
.s_levels_compare__table tbody td.is-featured {
  background: rgba(253, 238, 228, 0.4);
}
.s_levels_compare__table tbody tr.row-pricing {
  border-top: 1px solid var(--line);
}
.s_levels_compare__table tbody tr.row-pricing th,
.s_levels_compare__table tbody tr.row-pricing td {
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
.s_levels_compare__table tbody tr.row-pricing td {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--orange);
}

@media (max-width: 1023px) {
  .s_levels_compare__table { min-width: 680px; }
}

.s_levels_compare__cards { display: none; }
@media (max-width: 767px) {
  .s_levels_compare__wrap { display: none; }
  .s_levels_compare__cards {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    grid-column: 1 / -1;
  }
}

.c-level-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.c-level-card--featured {
  border-color: var(--orange);
  background: rgba(253, 238, 228, 0.4);
}
.c-level-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-level-card__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.c-level-card__tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}
.c-level-card__param {
  display: block;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.4;
}
.c-level-card__flag {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canvas);
  background: var(--orange);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.c-level-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
}
.c-level-card__body > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-level-card__body > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.c-level-card__body dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.c-level-card__body dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-strong);
}

.s_levels_compare__note {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.s_levels_compare__cta {
  grid-column: 1 / -1;
  margin-top: var(--s-5);
  text-align: center;
}


/* =====================================================================
   S_PRICING_COMMITMENT — engagement tarifaire (NEW snippet)
   3 blocs : promesse · comparatif · exemple type.
   Pas de montant Advena chiffré (règle forfaitaire).
   ===================================================================== */

.s_pricing_commitment {
  background: var(--canvas-warm);
  border-top: 1px solid var(--line);
}
.s_pricing_commitment__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_pricing_commitment__head h2 { margin-top: var(--s-4); }
.s_pricing_commitment__head p {
  margin-top: var(--s-5);
  max-width: 64ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_pricing_commitment__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_pricing_commitment__promise {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding: var(--s-7);
  background: var(--navy);
  color: var(--canvas);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-7);
}
@media (max-width: 1023px) {
  .s_pricing_commitment__promise {
    grid-template-columns: 1fr;
    padding: var(--s-6);
    gap: var(--s-5);
  }
}
.c-commitment-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-commitment-pillar__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: rgba(234, 109, 63, 0.12);
  color: var(--orange);
  border-radius: var(--radius-sm);
}
.c-commitment-pillar__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--canvas);
  margin: 0;
}
.c-commitment-pillar__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(250, 247, 241, 0.78);
  margin: 0;
}

.s_pricing_commitment__compare {
  grid-column: 1 / -1;
  margin-bottom: var(--s-7);
}
.s_pricing_commitment__compare-head h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 var(--s-5);
}
.s_pricing_commitment__compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 767px) {
  .s_pricing_commitment__compare-grid { grid-template-columns: 1fr; }
}

.c-commitment-col {
  padding: var(--s-6);
  border-radius: var(--radius-sm);
}
.c-commitment-col--classic {
  background: var(--canvas-warm);
  border: 1px solid var(--line);
}
.c-commitment-col--advena {
  background: var(--peach);
  border: 1px solid rgba(234, 109, 63, 0.3);
}
.c-commitment-col__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-commitment-col--advena .c-commitment-col__label {
  color: var(--orange-dark);
  border-bottom-color: rgba(234, 109, 63, 0.3);
}
.c-commitment-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-commitment-col li {
  position: relative;
  padding-left: var(--s-4);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
}
.c-commitment-col--advena li {
  color: var(--text-strong);
  font-weight: 500;
}
.c-commitment-col li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-soft);
}
.c-commitment-col--advena li::before { color: var(--orange); }

.s_pricing_commitment__example {
  grid-column: 1 / -1;
  padding: var(--s-7);
  background: var(--navy);
  color: var(--canvas);
  border-radius: var(--radius-sm);
}
@media (max-width: 767px) {
  .s_pricing_commitment__example { padding: var(--s-6); }
}
.s_pricing_commitment__example-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--s-5);
}
.s_pricing_commitment__example-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
}
@media (max-width: 767px) {
  .s_pricing_commitment__example-body { grid-template-columns: 1fr; gap: var(--s-5); }
}
.s_pricing_commitment__example-body h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--canvas);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
}
.s_pricing_commitment__example-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.s_pricing_commitment__example-body ul li {
  position: relative;
  padding-left: var(--s-4);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(250, 247, 241, 0.78);
}
.s_pricing_commitment__example-body ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--orange);
}

.c-commitment-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
}
.c-commitment-metrics > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(250, 247, 241, 0.12);
}
.c-commitment-metrics > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.c-commitment-metrics dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.c-commitment-metrics dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--canvas);
}
.c-commitment-metrics__sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(250, 247, 241, 0.55);
  line-height: 1.5;
}

.s_pricing_commitment__note {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 64ch;
}
.s_pricing_commitment__cta {
  grid-column: 1 / -1;
  margin-top: var(--s-5);
}


/* =====================================================================
   HERO SERVICE — variante 4 pastilles (Academies)
   ===================================================================== */

.s_hero_service__pricing--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1023px) {
  .s_hero_service__pricing--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .s_hero_service__pricing--4 { grid-template-columns: 1fr; }
}


/* =====================================================================
   S_TOPICS_GRID — catalogue de thématiques de formation (NEW)
   6 cards 3x2 desktop, 2x3 tablet, 1 col mobile.
   Réutilisé sur Digital Academy.
   ===================================================================== */

.s_topics_grid {
  background: var(--canvas-warm);
  border-top: 1px solid var(--line);
}
.s_topics_grid__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_topics_grid__head h2 { margin-top: var(--s-4); }
.s_topics_grid__head h2 .serif-em { color: var(--orange); padding: 0 0.04em; }
.s_topics_grid__head p {
  margin-top: var(--s-5);
  max-width: 64ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_topics_grid__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_topics_grid__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1023px) {
  .s_topics_grid__list { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}
@media (max-width: 640px) {
  .s_topics_grid__list { grid-template-columns: 1fr; gap: var(--s-4); }
}

.c-topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.c-topic-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
}

.c-topic-card__num {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--orange);
  opacity: 0.4;
  align-self: flex-start;
}

.c-topic-card__duration {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  padding: 4px 10px;
  background: var(--peach);
  color: var(--orange-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

.c-topic-card__public {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}

.c-topic-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
}

.c-topic-card__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
  max-width: 50ch;
}

.c-topic-card__points {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.c-topic-card__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid);
}
.c-topic-card__points .icon {
  color: var(--orange-dark);
  flex-shrink: 0;
  margin-top: 3px;
}

.s_topics_grid__footnote {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 64ch;
}


/* =====================================================================
   S_FORMATS_COMPARE — table comparative 4 formats (NEW)
   Variante 4 colonnes du levels_compare. Badge "Le plus demandé"
   au-dessus du nom (leçon Revue 1 Assistance financière).
   Réutilisé sur Digital Academy.
   ===================================================================== */

.s_formats_compare {
  background: var(--canvas);
  border-top: 1px solid var(--line);
}
.s_formats_compare__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_formats_compare__head h2 { margin-top: var(--s-4); }
.s_formats_compare__head p {
  margin-top: var(--s-5);
  max-width: 64ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_formats_compare__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_formats_compare__wrap {
  grid-column: 1 / -1;
  /* overflow-y: visible permet au badge "Le plus demandé" (positionné
     en absolute avec top: -12px) de sortir au-dessus de la cellule
     header sans être coupé. overflow-x: auto reste pour le scroll
     horizontal sur tablet entre 768-800px. Limite connue : Firefox
     ancien peut clipper le badge dans cette plage de viewport étroite. */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Marge top pour laisser respirer le badge qui sort à -12px */
  margin-top: var(--s-3);
}
.s_formats_compare__table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  table-layout: fixed;
}
.s_formats_compare__table thead th {
  background: var(--canvas);
  text-align: left;
  /* Padding-top standard s-5 : le badge "Le plus demandé" ne réside
     plus dans la cellule (il est positionné absolute au-dessus via
     top: -12px). */
  padding: var(--s-5);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  border-bottom: 3px solid var(--text-soft);
  vertical-align: bottom;
  position: relative;
}
.s_formats_compare__table thead th:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  width: 16%;
  border-bottom-color: transparent;
  padding: var(--s-5);
}
.s_formats_compare__table thead .format-name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: var(--s-2);
}
.s_formats_compare__table thead .format-tagline {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}
/* Badge "Le plus demandé" : pattern accroché au-dessus de la cellule
   header. Sort à mi-hauteur au-dessus de la bordure top de la cellule
   featured, centré horizontalement sur la colonne Chez Advena.
   Identique au pattern de .c-price-pill__flag (hero) pour cohérence. */
.s_formats_compare__table thead .format-flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--canvas);
  background: var(--orange);
  border-radius: var(--radius-pill);
}
.s_formats_compare__table thead th.is-featured {
  background: var(--peach);
  border-bottom: 3px solid var(--orange);
}

.s_formats_compare__table tbody tr {
  border-bottom: 1px solid var(--line);
}
.s_formats_compare__table tbody tr:last-child { border-bottom: none; }
.s_formats_compare__table tbody th {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  vertical-align: top;
  background: var(--canvas);
}
.s_formats_compare__table tbody td {
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
  vertical-align: top;
}
.s_formats_compare__table tbody td.is-featured {
  background: rgba(253, 238, 228, 0.7);
}

.s_formats_compare__table tbody tr.row-pricing {
  border-top: 1px solid var(--line);
}
.s_formats_compare__table tbody tr.row-pricing th,
.s_formats_compare__table tbody tr.row-pricing td {
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
.s_formats_compare__table tbody tr.row-pricing td {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--orange);
}

@media (max-width: 1023px) {
  .s_formats_compare__table { min-width: 800px; }
}

.s_formats_compare__cards { display: none; }
@media (max-width: 767px) {
  .s_formats_compare__wrap { display: none; }
  .s_formats_compare__cards {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    grid-column: 1 / -1;
  }
}

.c-format-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.c-format-card--featured {
  border-color: var(--orange);
  background: rgba(253, 238, 228, 0.4);
}
.c-format-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-format-card__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.c-format-card__tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}
.c-format-card__flag {
  align-self: flex-start;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canvas);
  background: var(--orange);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.c-format-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
}
.c-format-card__body > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-format-card__body > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.c-format-card__body dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.c-format-card__body dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-strong);
}

.s_formats_compare__note {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 70ch;
}
.s_formats_compare__cta {
  grid-column: 1 / -1;
  margin-top: var(--s-5);
  text-align: center;
}


/* =====================================================================
   PRICING COMMITMENT — variante 3 exemples chiffrés (Academies)
   Remplace l'exemple type unique par 3 colonnes (visio / chez Advena /
   sur site) pour illustrer le calcul forfait + coût par participant.
   ===================================================================== */

.s_pricing_commitment__examples {
  grid-column: 1 / -1;
  padding: var(--s-7);
  background: var(--navy);
  color: var(--canvas);
  border-radius: var(--radius-sm);
}
@media (max-width: 767px) {
  .s_pricing_commitment__examples { padding: var(--s-6); }
}
.s_pricing_commitment__examples-sub {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(250, 247, 241, 0.75);
  margin: 0 0 var(--s-5);
}
.s_pricing_commitment__examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1023px) {
  .s_pricing_commitment__examples-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

.c-pricing-example-block {
  padding: var(--s-5);
  background: rgba(250, 247, 241, 0.05);
  border: 1px solid rgba(250, 247, 241, 0.1);
  border-radius: var(--radius-sm);
}
.c-pricing-example-block--featured {
  border-color: var(--orange);
  background: rgba(234, 109, 63, 0.1);
}
.c-pricing-example-block__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--canvas);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(250, 247, 241, 0.12);
}
.c-pricing-example-block dl {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.c-pricing-example-block dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(250, 247, 241, 0.78);
}
.c-pricing-example-block dl > div dt {
  font-family: var(--font-mono);
  font-size: 12px;
}
.c-pricing-example-block dl > div dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--canvas);
  text-align: right;
}
.c-pricing-example-block__total {
  margin-top: var(--s-2);
  padding-top: var(--s-3) !important;
  border-top: 1px solid rgba(250, 247, 241, 0.2);
}
.c-pricing-example-block__total dt {
  font-family: var(--font-sans) !important;
  font-weight: 500;
  font-size: 13px !important;
  color: var(--canvas) !important;
}
.c-pricing-example-block__total dd {
  font-size: 16px !important;
  color: var(--orange) !important;
}


/* =====================================================================
   TOPIC CARD — variante --fullwidth (Digital Academy : Odoo "par module")
   Bloc pleine largeur sous la grille 3x2 du s_topics_grid, avec liste
   de modules en grille 3 cols.
   ===================================================================== */

.c-topic-card--fullwidth {
  grid-column: 1 / -1;
  display: block;
  margin-top: var(--s-5);
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius-sm);
}
@media (max-width: 767px) {
  .c-topic-card--fullwidth { padding: var(--s-5); margin-top: var(--s-4); }
}

.c-topic-card__fullwidth-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.c-topic-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--peach);
  color: var(--orange);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.c-topic-card__num--inline {
  position: static;
  align-self: auto;
  font-size: 28px;
  opacity: 0.4;
}
.c-topic-card__fullwidth-head .c-topic-card__duration {
  position: static;
}
.c-topic-card__fullwidth-head .c-topic-card__public {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}
.c-topic-card__title--lg {
  font-size: 24px;
  line-height: 1.2;
  flex-basis: 100%;
  margin: var(--s-2) 0 0;
}
.c-topic-card__desc--lg {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: var(--s-4) 0 var(--s-5);
  max-width: 70ch;
}

.c-topic-card__modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1023px) {
  .c-topic-card__modules { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .c-topic-card__modules { grid-template-columns: 1fr; }
}
.c-topic-card__modules li {
  padding: var(--s-4);
  background: var(--canvas-warm);
  border-radius: var(--radius-sm);
}
.c-topic-card__modules h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 var(--s-2);
}
.c-topic-card__modules p {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0;
}


/* =====================================================================
   FORMATS TABLE — variante row-pricing--dual (Digital Academy)
   Affiche 2 lignes de tarif par cellule (demi-journée + journée Odoo).
   ===================================================================== */

.s_formats_compare__table tbody tr.row-pricing--dual th,
.s_formats_compare__table tbody tr.row-pricing--dual td {
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  vertical-align: top;
}
.s_formats_compare__table tbody tr.row-pricing--dual td {
  font-family: var(--font-sans);
  color: var(--text-mid);
  font-weight: 400;
}

.pricing-line {
  display: block;
  padding: var(--s-2) 0;
}
.pricing-line + .pricing-line {
  border-top: 1px dashed var(--line);
}
.pricing-line__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.pricing-line__value {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--orange);
}
.pricing-line__note {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: italic;
  color: var(--text-soft);
}


/* =====================================================================
   PRICING COMMITMENT — variante --cols-2 pour grille 2x2 (4 exemples)
   Digital Academy a 4 exemples dont 1 Odoo globale ; grille 2x2 plus
   lisible que 3 cols pour 4 items.
   ===================================================================== */

.s_pricing_commitment__examples-grid--cols-2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1023px) {
  .s_pricing_commitment__examples-grid--cols-2 {
    grid-template-columns: 1fr;
  }
}


/* =====================================================================
   FORMATS COMPARE — accordéon mobile (Digital Academy)
   Sur mobile, les cards affichent uniquement head + tarifs par défaut.
   Les 6 critères restants (Pour qui, Lieu, Participants, Inclus, Idéal
   pour, Délai) sont dans un <details>/<summary> collapsible.
   ===================================================================== */

.c-format-card__tarifs {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-format-card__tarifs > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-format-card__tarifs dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.c-format-card__tarifs dd {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--orange);
}

.c-format-card__details {
  border-top: none;
}
.c-format-card__details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  transition: color var(--duration-fast) ease-out;
}
.c-format-card__details summary::-webkit-details-marker { display: none; }
.c-format-card__details summary:hover { color: var(--orange-dark); }
.c-format-card__details summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.c-format-card__details summary svg {
  transition: transform var(--duration-base) var(--ease);
}
.c-format-card__details[open] summary svg {
  transform: rotate(180deg);
}

.c-format-card__criteria {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-format-card__criteria > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-format-card__criteria > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.c-format-card__criteria dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.c-format-card__criteria dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-strong);
}

@media (prefers-reduced-motion: reduce) {
  .c-format-card__details summary svg { transition: none; }
}


/* =====================================================================
   FORMATS COMPARE — clearance badge "Le plus demandé" (Digital Academy)
   Augmenter l'espace au-dessus du titre featured pour que le badge
   (top: -12px) ne touche pas le titre Chez Advena en dessous.
   ===================================================================== */

.s_formats_compare__table thead th.is-featured {
  padding-top: var(--s-6);
}


/* =====================================================================
   PRICE PILL SUB — séparation 2 lignes sur mobile (Digital Academy)
   Quand le sous-libellé contient 2 segments séparés par un séparateur,
   on les empile sur petits écrans pour améliorer la lisibilité.
   ===================================================================== */

.c-price-pill__sub-line {
  display: inline;
}
.c-price-pill__sub-sep {
  display: inline;
  margin: 0 4px;
  color: rgba(250, 247, 241, 0.3);
}
@media (max-width: 540px) {
  .c-price-pill__sub-line {
    display: block;
  }
  .c-price-pill__sub-sep {
    display: none;
  }
}


/* =====================================================================
   SERIF EM — assurer le poids 400 explicite dans tous les contextes
   (correction "aujourd'hui" qui paraissait étiré par héritage de poids
   du H2 parent dans certains rendus).
   ===================================================================== */

.s_pillar_form__head h2 .serif-em,
.s_pillar_form__head h2 em.serif-em {
  font-weight: 400;
}


/* =====================================================================
   FORMATS COMPARE — fix badge tronqué desktop
   Sur desktop (≥1024px), le tableau tient sans scroll horizontal,
   donc on bascule .s_formats_compare__wrap en overflow: visible pour
   que le badge "Le plus demandé" (top: -12px sur la cellule featured)
   puisse déborder vers le haut sans être clippé par le wrapper.
   Sur tablet (768-1023px), on garde overflow-x: auto pour le scroll
   horizontal du tableau (overflow-y reste visible — le badge peut
   être légèrement clippé sur cette plage étroite, trade-off accepté).
   Mobile (<768px) : cards utilisées, wrapper masqué.

   Compléments : overflow visible explicite sur table/thead/th pour
   neutraliser les contextes de clipping implicites des éléments table
   (certains navigateurs forcent un context d'overflow sur thead/tbody). */

@media (min-width: 1024px) {
  .s_formats_compare__wrap {
    overflow: visible;
  }
  .s_formats_compare__table,
  .s_formats_compare__table thead,
  .s_formats_compare__table thead tr,
  .s_formats_compare__table thead th {
    overflow: visible;
  }
}


/* =====================================================================
   HERO SERVICE — encart "Présentation gratuite" (NEW pour ia-automatisation)
   Encart distinctif placé entre les pastilles formules et les CTAs.
   Fond peach très dilué (cohérent avec navy-ink), bordure orange ténue.
   ===================================================================== */

.s_hero_service__demo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-7);
  background: rgba(253, 238, 228, 0.12);
  border: 1px solid rgba(234, 109, 63, 0.6);
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .s_hero_service__demo {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-5);
    text-align: left;
  }
}

.s_hero_service__demo-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(234, 109, 63, 0.15);
  color: var(--orange);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.s_hero_service__demo-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--canvas);
  margin: 0;
}
.s_hero_service__demo-meta {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 13px;
  color: rgba(250, 247, 241, 0.7);
}

.s_hero_service__demo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) ease-out, transform var(--duration-fast) ease-out;
  white-space: nowrap;
}
.s_hero_service__demo-link:hover {
  color: var(--canvas);
}
.s_hero_service__demo-link:hover svg {
  transform: translateX(2px);
}
.s_hero_service__demo-link svg {
  transition: transform var(--duration-fast) ease-out;
}


/* =====================================================================
   S_IA_CATALOG — catalogue de cas d'usage IA (NEW snippet)
   Grille 2x4 desktop, 1 col mobile. Chaque card : numéro top-left,
   icône top-right, titre, description, badge catégorie en pied.
   Réutilisable potentiellement sur ERP Odoo (catalogue de modules).
   ===================================================================== */

.s_ia_catalog {
  background: var(--canvas-warm);
  border-top: 1px solid var(--line);
}
.s_ia_catalog__head {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-7);
}
.s_ia_catalog__head h2 { margin-top: var(--s-4); }
.s_ia_catalog__head h2 .serif-em { color: var(--orange); padding: 0 0.04em; }
.s_ia_catalog__head p {
  margin-top: var(--s-5);
  max-width: 64ch;
  color: var(--text-mid);
}
@media (max-width: 1023px) {
  .s_ia_catalog__head { grid-column: 1 / -1; margin-bottom: var(--s-6); }
}

.s_ia_catalog__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
  .s_ia_catalog__list { grid-template-columns: 1fr; gap: var(--s-4); }
}

.c-ia-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.c-ia-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
}

.c-ia-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.c-ia-card__num {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
  opacity: 0.3;
}
.c-ia-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--peach);
  color: var(--navy);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.c-ia-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}
.c-ia-card__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}
.c-ia-card__badge {
  margin-top: auto;
  padding: 4px 10px;
  background: var(--peach);
  color: var(--orange-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  align-self: flex-start;
}


/* =====================================================================
   S_IA_CATALOG — encart "Présentation gratuite" en pied de section
   Layout horizontal desktop (icône + texte + bouton), vertical mobile.
   ===================================================================== */

.s_ia_catalog__demo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  margin-top: var(--s-7);
  padding: var(--s-6);
  background: linear-gradient(rgba(253, 238, 228, 0.4), rgba(253, 238, 228, 0.4)),
              var(--canvas-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
@media (max-width: 1023px) {
  .s_ia_catalog__demo {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding: var(--s-5);
  }
}

.s_ia_catalog__demo-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--orange-dark);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.s_ia_catalog__demo-body { display: flex; flex-direction: column; gap: var(--s-2); }
.s_ia_catalog__demo-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin: 0;
}
.s_ia_catalog__demo-text {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
  max-width: 70ch;
}

.s_ia_catalog__demo-cta {
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .s_ia_catalog__demo-cta { align-self: flex-start; }
}


/* =====================================================================
   S_HERO_SERVICE — variante fact-num compact
   Pour les chiffres-clés multi-éléments type "v17 · v18 · v19" qui ne
   tiennent pas à la taille standard du fact-num. Geist Mono compacté.
   ===================================================================== */

.s_hero_service__fact-num--compact {
  font-size: clamp(20px, 2.2vw, 30px) !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
}


/* =====================================================================
   S_MODULES_CATALOG — Catalogue des apps Odoo (ERP page)
   24 apps officielles · grille 6x4 desktop / 4x6 tablet / 3x8 mobile
   Logos officiels Odoo (kit partenaire) à déposer dans assets/odoo-apps/
   Chaque cellule = lien externe vers odoo.com/app/[slug]
   ===================================================================== */

.s_modules_catalog {
  background: var(--canvas-warm);
  position: relative;
}

/* Head — eyebrow, titre, sous-titre */
.s_modules_catalog__head {
  max-width: 720px;
  margin-bottom: var(--s-7);
}
.s_modules_catalog__head .eyebrow { margin-bottom: var(--s-3); }
.s_modules_catalog__head h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--s-4) 0;
}
.s_modules_catalog__head > p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
  max-width: 60ch;
}

/* Grille uniforme : 6 cols desktop, 4 cols tablet, 3 cols mobile */
.s_modules_catalog__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1023px) {
  .s_modules_catalog__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
  }
}
@media (max-width: 767px) {
  .s_modules_catalog__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
  }
}

/* Cellule app : <a> carré, fond surface, hover lift + bordure orange.
   min-height + min-height 2.6em sur le name garantissent que toutes les
   cellules ont la même hauteur, même quand certains labels wrap sur 2
   lignes (Services sur Site, E-mail Marketing, Tableau de bord). */
.c-app-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4);
  min-height: 140px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-strong);
  transition:
    border-color var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease),
    box-shadow var(--duration-base) var(--ease);
}
.c-app-cell:hover,
.c-app-cell:focus-visible {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  outline: none;
}
.c-app-cell:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Bloc logo — accueille l'<img> du logo officiel Odoo (64x64 desktop,
   48x48 mobile). Le fallback monogramme se positionne au même endroit
   et n'est révélé qu'en cas d'échec de chargement (onerror). */
.c-app-cell__logo {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-app-cell__logo { width: 48px; height: 48px; }
}
.c-app-cell__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Fallback monogramme — caché par défaut, révélé par onerror si l'<img>
   ne charge pas. Style figé en navy sur canvas-warm. */
.c-app-cell__fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--canvas-warm);
  color: var(--navy);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
  border-radius: var(--radius-sm);
}
@media (max-width: 767px) {
  .c-app-cell__fallback { font-size: 14px; }
}

/* Nom de l'app sous le logo. min-height 2.6em réserve l'espace de 2
   lignes (line-height 1.3 × 2 = 2.6) pour que les labels courts et
   longs occupent la même hauteur visuelle dans la grille. */
.c-app-cell__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-strong);
  text-align: center;
  padding-inline: 2px;
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media (max-width: 767px) {
  .c-app-cell__name { font-size: 12px; }
  .c-app-cell { padding: var(--s-3); gap: var(--s-2); min-height: 120px; }
}

/* Flèche externe en haut à droite — visible uniquement au hover */
.c-app-cell__arrow {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--orange);
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease);
}
.c-app-cell:hover .c-app-cell__arrow,
.c-app-cell:focus-visible .c-app-cell__arrow {
  opacity: 1;
  transform: translateY(0);
}

/* Note de bas de section */
.s_modules_catalog__note {
  margin-top: var(--s-7);
  margin-inline: auto;
  max-width: 70ch;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  text-align: center;
  font-style: italic;
}

/* CTA optionnel */
.s_modules_catalog__cta {
  margin-top: var(--s-5);
  text-align: center;
}
/* Mobile : autoriser le wrap du label long du bouton ghost et caler
   le padding latéral pour éviter la coupure à droite du viewport. */
@media (max-width: 767px) {
  .s_modules_catalog__cta { padding-inline: var(--s-5); }
  .s_modules_catalog__cta .c-button {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
  }
}

/* Attribution mention de marque Odoo */
.s_modules_catalog__attribution {
  margin-top: var(--s-7);
  margin-inline: auto;
  max-width: 70ch;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-soft);
  text-align: center;
}
.s_modules_catalog__attribution sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}

/* Animation cascade — effet de vague 20ms entre cellules.
   La grille porte data-reveal. Quand elle reçoit .is-visible
   (intersection observer), les 24 cellules s'animent en cascade
   (~480ms total). Pattern aligné sur le snippet ascend du site. */
.s_modules_catalog__grid[data-reveal] .c-app-cell {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
}
.s_modules_catalog__grid[data-reveal].is-visible .c-app-cell {
  animation: ascend 800ms var(--ease) forwards;
}
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(2)  .c-app-cell { animation-delay: 20ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(3)  .c-app-cell { animation-delay: 40ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(4)  .c-app-cell { animation-delay: 60ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(5)  .c-app-cell { animation-delay: 80ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(6)  .c-app-cell { animation-delay: 100ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(7)  .c-app-cell { animation-delay: 120ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(8)  .c-app-cell { animation-delay: 140ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(9)  .c-app-cell { animation-delay: 160ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(10) .c-app-cell { animation-delay: 180ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(11) .c-app-cell { animation-delay: 200ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(12) .c-app-cell { animation-delay: 220ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(13) .c-app-cell { animation-delay: 240ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(14) .c-app-cell { animation-delay: 260ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(15) .c-app-cell { animation-delay: 280ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(16) .c-app-cell { animation-delay: 300ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(17) .c-app-cell { animation-delay: 320ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(18) .c-app-cell { animation-delay: 340ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(19) .c-app-cell { animation-delay: 360ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(20) .c-app-cell { animation-delay: 380ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(21) .c-app-cell { animation-delay: 400ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(22) .c-app-cell { animation-delay: 420ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(23) .c-app-cell { animation-delay: 440ms; }
.s_modules_catalog__grid[data-reveal].is-visible li:nth-child(24) .c-app-cell { animation-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  .s_modules_catalog__grid[data-reveal] .c-app-cell {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}


/* =====================================================================
   S_VIDEO_AND_WHY — Fusion vidéo de démo + arguments Pourquoi Odoo
   Partie haute : vidéo (gauche) + 5 messages-clés (droite) en 2 cols.
   Partie basse : 4 cards compactes en rangée 1x4.
   Premier usage : S02 de /je-digitalise/erp-odoo.
   ===================================================================== */

.s_video_and_why {
  background: var(--canvas);
  padding: var(--s-9) 0;
}
@media (max-width: 767px) {
  .s_video_and_why { padding: var(--s-8) 0; }
}

/* Head centré : eyebrow + titre + lead */
.s_video_and_why__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-8);
}
.s_video_and_why__head .eyebrow {
  justify-content: center;
}
.s_video_and_why__head h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--navy);
  margin: var(--s-4) 0 var(--s-4);
}
.s_video_and_why__head > p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 auto;
  max-width: 60ch;
}

/* Partie haute : vidéo gauche + messages droite (50/50) */
.s_video_and_why__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
  margin-bottom: var(--s-9);
}
@media (max-width: 1023px) {
  .s_video_and_why__split {
    grid-template-columns: 1fr;
    gap: var(--s-7);
    margin-bottom: var(--s-8);
  }
}

/* Colonne vidéo : player ratio 16:9 + caption italique en dessous */
.s_video_and_why__media { min-width: 0; }
.s_video_and_why__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: var(--navy-ink);
}
.s_video_and_why__player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.s_video_and_why__caption {
  margin-top: var(--s-4);
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-soft);
}

/* Liste des 5 messages-clés argumentaires */
.c-key-messages {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-key-message {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-mid);
}
.c-key-message:first-child { padding-top: 0; }
.c-key-message:last-child  { border-bottom: none; padding-bottom: 0; }
.c-key-message strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--navy);
}

/* Partie basse : eyebrow centré + 4 cards compactes en rangée */
.s_video_and_why__cards-section {
  text-align: center;
}
.s_video_and_why__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  text-align: left;
  margin-top: var(--s-6);
}
@media (max-width: 1023px) {
  .s_video_and_why__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .s_video_and_why__cards { grid-template-columns: 1fr; }
}

/* Card compacte : padding resserré vs c-why-card original */
.c-card-compact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-5);
  transition:
    transform var(--duration-base) var(--ease),
    border-color var(--duration-base) var(--ease);
}
.c-card-compact:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
}
.c-card-compact__icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--orange);
  margin-bottom: var(--s-4);
}
.c-card-compact__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 var(--s-3);
}
.c-card-compact__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mid);
  margin: 0;
}


/* =====================================================================
   C_INLINE_LOGO — Logo intégré inline dans un H1 (utilisé hero ERP Odoo)
   Calibré sur la x-height de Geist 300 pour s'aligner sur la baseline du
   texte environnant. Ajustement fin via top négatif. Tester visuellement
   sur les 3 viewports — le ratio 0.6em peut être resserré à 0.55em ou
   0.65em selon le rendu réel du logo.
   ===================================================================== */

.c-inline-logo {
  display: inline-block;
  height: 0.85em;
  width: auto;
  vertical-align: baseline;
  margin-left: 0.05em;
  position: relative;
  top: 0.08em;
}


/* =====================================================================
   S_MAINTENANCE_SCOPE — Périmètre couvert (page Maintenance & support)
   3 cards de technologies couvertes (Odoo, Sites web, IA) + encart
   support utilisateur transversal en bas. Snippet spécifique à cette
   page, peu réutilisable ailleurs.
   ===================================================================== */

.s_maintenance_scope {
  background: var(--canvas-warm);
  padding: var(--s-11) 0;
}
@media (max-width: 1023px) { .s_maintenance_scope { padding: var(--s-10) 0; } }
@media (max-width: 767px)  { .s_maintenance_scope { padding: var(--s-9) 0; } }

/* Head centré : eyebrow + titre + lead */
.s_maintenance_scope__head {
  max-width: 720px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.s_maintenance_scope__head .eyebrow { justify-content: center; }
.s_maintenance_scope__head h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--s-4);
}
.s_maintenance_scope__head h2 .serif-em { color: var(--orange); padding: 0 0.04em; }
.s_maintenance_scope__head > p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 auto;
  max-width: 60ch;
}

/* Grille 3 colonnes des cards (Odoo / Sites web / Solutions IA) */
.s_maintenance_scope__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1023px) { .s_maintenance_scope__cards { gap: var(--s-4); } }
@media (max-width: 767px)  { .s_maintenance_scope__cards { grid-template-columns: 1fr; gap: var(--s-4); } }

/* Card de technologie : icône grand format + titre + liste avec checks */
.c-scope-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-6);
  transition:
    border-color var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease),
    box-shadow var(--duration-base) var(--ease);
}
.c-scope-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.c-scope-card__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--navy);
  margin-bottom: var(--s-4);
}

.c-scope-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 var(--s-5);
}

.c-scope-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-scope-card__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--s-3);
  align-items: flex-start;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mid);
}
.c-scope-card__check {
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Encart support utilisateur transversal — bandeau sous les 3 cards.
   Layout horizontal desktop (icône + texte), empilé mobile. */
.s_maintenance_scope__support {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: linear-gradient(rgba(253, 238, 228, 0.4), rgba(253, 238, 228, 0.4)),
              var(--canvas-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: flex-start;
}
@media (max-width: 767px) {
  .s_maintenance_scope__support {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-4);
  }
}

.s_maintenance_scope__support-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--orange-dark);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.s_maintenance_scope__support-body { display: flex; flex-direction: column; gap: var(--s-2); }
.s_maintenance_scope__support-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  margin: 0;
}
.s_maintenance_scope__support-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
  max-width: 80ch;
}


/* =====================================================================
   PATTERN « BIENTÔT DISPONIBLE » (page Expertise comptable v1.14)
   5 snippets nouveaux + 1 badge :
   - .c-coming-soon-badge
   - .s_hero_soon
   - .s_soon_why
   - .s_soon_scope
   - .s_soon_alternatives
   - .s_waitlist
   Réutilisables pour tout futur service Advena en attente d'agrément.
   ===================================================================== */

/* ---------- Badge BIENTÔT DISPONIBLE ---------- */
.c-coming-soon-badge {
  display: inline-block;
  padding: 8px 16px;
  background: var(--peach);
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: var(--s-5);
}


/* =====================================================================
   S_HERO_SOON — Hero d'une page de service en attente d'agrément
   Plus court que s_hero_service (70vh vs 80vh), pas de pastilles, pas
   de chiffres-clés, badge BIENTÔT en évidence + bandeau transparence.
   ===================================================================== */

.s_hero_soon {
  position: relative;
  background: var(--navy-ink);
  color: var(--canvas);
  padding: var(--s-9) 0 var(--s-8);
  min-height: 70vh;
  overflow: hidden;
}
.s_hero_soon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 79px,
    rgba(250, 247, 241, 0.04) 79px,
    rgba(250, 247, 241, 0.04) 80px
  );
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) { .s_hero_soon::before { display: none; } }
.s_hero_soon::after {
  content: '';
  position: absolute;
  top: var(--s-9);
  left: var(--container-margin-desktop);
  width: 1px;
  height: 24px;
  background: var(--orange);
  z-index: 0;
}
@media (max-width: 1023px) { .s_hero_soon::after { left: var(--container-margin-tablet); } }
@media (max-width: 767px)  { .s_hero_soon::after { left: var(--container-margin-mobile); } }

.s_hero_soon__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Breadcrumb sur fond sombre — passage au texte clair */
.s_hero_soon__breadcrumb {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(250, 247, 241, 0.55);
}
.s_hero_soon__breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.s_hero_soon__breadcrumb a {
  color: rgba(250, 247, 241, 0.55);
  text-decoration: none;
  transition: color var(--duration-fast) ease-out;
}
.s_hero_soon__breadcrumb a:hover { color: var(--canvas); }
.s_hero_soon__breadcrumb [aria-current="page"] { color: var(--canvas); }
.s_hero_soon__breadcrumb .breadcrumb-sep { color: rgba(250, 247, 241, 0.3); }

/* Eyebrow métadonnées */
.s_hero_soon__eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.6);
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.s_hero_soon__eyebrow .mono { color: var(--orange); }
.s_hero_soon__eyebrow .sep { color: rgba(250, 247, 241, 0.3); }

/* Le badge dans le hero a une couleur orange-dark sur peach — bon
   contraste sur le navy-ink et signale clairement le statut. */
.s_hero_soon .c-coming-soon-badge {
  align-self: flex-start;
  margin-bottom: 0;
}

/* H1 principal */
.s_hero_soon__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 84px);
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--canvas);
  margin: 0;
  max-width: 18ch;
}

/* Sous-titre lead — max 55% width */
.s_hero_soon__lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(250, 247, 241, 0.85);
  margin: 0;
  max-width: 55%;
}
@media (max-width: 1023px) { .s_hero_soon__lead { max-width: 100%; } }

/* CTAs — accent + ghost-on-dark */
.s_hero_soon__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

/* Bandeau de transparence — séparé par border-top, max 720px centré */
.s_hero_soon__transparency {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(250, 247, 241, 0.1);
  max-width: 720px;
  font-family: var(--font-sans);
  color: rgba(250, 247, 241, 0.85);
}
.s_hero_soon__transparency-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 var(--s-2);
  color: var(--canvas);
}
.s_hero_soon__transparency-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}


/* =====================================================================
   S_SOON_WHY — 3 arguments expliquant la logique du service futur
   Grille 3x1 desktop, 1 col mobile.
   ===================================================================== */

.s_soon_why { background: var(--canvas); }

.s_soon_why__head {
  max-width: 720px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.s_soon_why__head .eyebrow { justify-content: center; }
.s_soon_why__head h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--s-4);
}
.s_soon_why__head > p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 auto;
  max-width: 60ch;
}

.s_soon_why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1023px) { .s_soon_why__list { gap: var(--s-4); } }
@media (max-width: 767px)  { .s_soon_why__list { grid-template-columns: 1fr; gap: var(--s-4); } }

.c-soon-arg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-6);
  transition:
    border-color var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease),
    box-shadow var(--duration-base) var(--ease);
}
.c-soon-arg:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.c-soon-arg__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 48px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--navy);
  opacity: 0.3;
  margin-bottom: var(--s-4);
}
.c-soon-arg__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 var(--s-3);
}
.c-soon-arg__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}


/* =====================================================================
   S_SOON_SCOPE — 3 catégories de prestations prévues + note réglementaire
   ===================================================================== */

.s_soon_scope { background: var(--canvas-warm); }

.s_soon_scope__head {
  max-width: 720px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.s_soon_scope__head .eyebrow { justify-content: center; }
.s_soon_scope__head h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--s-4);
}
.s_soon_scope__head h2 .serif-em { color: var(--orange); padding: 0 0.04em; }
.s_soon_scope__head > p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 auto;
  max-width: 60ch;
}

.s_soon_scope__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1023px) { .s_soon_scope__cards { gap: var(--s-4); } }
@media (max-width: 767px)  { .s_soon_scope__cards { grid-template-columns: 1fr; gap: var(--s-4); } }

.c-soon-scope-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-6);
}
.c-soon-scope-card__icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--navy);
  margin-bottom: var(--s-4);
}
.c-soon-scope-card__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0 0 var(--s-3);
}
.c-soon-scope-card__label .mono { color: var(--text-soft); margin-right: 6px; }
.c-soon-scope-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 22px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 var(--s-5);
}
.c-soon-scope-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-soon-scope-card__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--s-3);
  align-items: flex-start;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mid);
}
.c-soon-scope-card__check {
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Note réglementaire — encart canvas-warm marqué, centré, italique */
.s_soon_scope__note {
  margin: var(--s-7) auto 0;
  max-width: 800px;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  text-align: center;
  font-style: italic;
}


/* =====================================================================
   S_SOON_ALTERNATIVES — 2 solutions disponibles aujourd'hui
   ===================================================================== */

.s_soon_alternatives { background: var(--canvas); }

.s_soon_alternatives__head {
  max-width: 720px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.s_soon_alternatives__head .eyebrow { justify-content: center; }
.s_soon_alternatives__head h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--s-4);
}
.s_soon_alternatives__head > p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 auto;
  max-width: 60ch;
}

.s_soon_alternatives__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 1023px) { .s_soon_alternatives__grid { gap: var(--s-4); } }
@media (max-width: 767px)  { .s_soon_alternatives__grid { grid-template-columns: 1fr; gap: var(--s-4); } }

/* Card alternative : padding 32, hover lift, version --featured plus
   proéminente avec bordure orange tintée */
.c-alt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
}
.c-alt-card--featured {
  border-color: rgba(234, 109, 63, 0.4);
  box-shadow: var(--shadow-sm);
}
.c-alt-card__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0 0 var(--s-3);
}
.c-alt-card__label .mono { color: var(--text-soft); margin-right: 6px; }
.c-alt-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 var(--s-4);
}
.c-alt-card__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 0 var(--s-5);
}
.c-alt-card__list {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-alt-card__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--s-3);
  align-items: flex-start;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mid);
}
.c-alt-card__check {
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}
.c-alt-card__cta {
  align-self: flex-start;
  margin-top: auto;
}


/* =====================================================================
   S_WAITLIST — Formulaire de capture d'intention (fond navy)
   Layout 7+4 desktop : formulaire à gauche + 3 blocs info à droite.
   ===================================================================== */

.s_waitlist {
  background: var(--navy);
  color: var(--canvas);
}

.s_waitlist .l-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter-desktop);
}
@media (max-width: 1023px) {
  .s_waitlist .l-grid { grid-template-columns: repeat(6, 1fr); gap: var(--gutter-tablet); }
}
@media (max-width: 767px) {
  .s_waitlist .l-grid { grid-template-columns: repeat(4, 1fr); gap: var(--gutter-mobile); }
}

.s_waitlist__head {
  grid-column: 1 / -1;
  max-width: 720px;
  margin-bottom: var(--s-7);
}
.s_waitlist__head h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--canvas);
  margin: var(--s-4) 0 var(--s-4);
}
.s_waitlist__head h2 .serif-em { color: var(--orange); padding: 0 0.04em; }
.s_waitlist__head > p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(250, 247, 241, 0.85);
  margin: 0;
  max-width: 60ch;
}

.s_waitlist__body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 1023px) {
  .s_waitlist__body { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
@media (max-width: 767px) {
  .s_waitlist__body { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Le form hérite des styles c-lead-form du pilier — surchargé pour fond navy */
.s_waitlist .c-lead-form {
  background: var(--canvas);
  padding: var(--s-6);
  border-radius: var(--radius-sm);
}
@media (max-width: 767px) {
  .s_waitlist .c-lead-form { padding: var(--s-5); }
}

/* Aside info — 3 blocs empilés */
.s_waitlist__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.c-waitlist-info {
  padding: var(--s-5);
  background: rgba(250, 247, 241, 0.05);
  border: 1px solid rgba(250, 247, 241, 0.12);
  border-radius: var(--radius-sm);
}
.c-waitlist-info__icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--orange);
  margin-bottom: var(--s-3);
}
.c-waitlist-info__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--canvas);
  margin: 0 0 var(--s-2);
}
.c-waitlist-info__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(250, 247, 241, 0.75);
  margin: 0;
}