/* =========================================================
   Melorio — couche « site »
   Composants de page construits SUR melorio-design-system.css.
   Le design system n'est jamais modifié : il est la source de
   vérité de la charte (index des visuels, consigne §3.1).
   Ce fichier ne redéfinit que ce qui relève de la mise en page.
   ========================================================= */

/* ---------------------------------------------------------
   1. Échelle typographique fluide
   La charte fixe des tailles en pixels, calibrées pour le
   grand écran. On les rend fluides sans toucher au fichier
   de charte : mêmes valeurs hautes, repli mobile maîtrisé.
   --------------------------------------------------------- */
:root {
  --fs-lg:  clamp(19px, 1.1rem + 0.4vw, 22px);
  --fs-xl:  clamp(22px, 1.2rem + 0.9vw, 28px);
  --fs-2xl: clamp(27px, 1.4rem + 1.5vw, 36px);
  --fs-3xl: clamp(33px, 1.6rem + 2.6vw, 48px);
  --fs-4xl: clamp(38px, 1.7rem + 4.2vw, 64px);
  --fs-5xl: clamp(44px, 1.8rem + 6.0vw, 88px);

  --wrap:        1180px;   /* grille générale                    */
  --wrap-text:   68ch;     /* colonne de lecture longue          */
  --wrap-tight:  920px;    /* blocs éditoriaux resserrés         */
  --gutter:      clamp(20px, 5vw, 48px);
  --rhythm:      clamp(56px, 8vw, 104px);   /* entre sections    */

  --header-h:    72px;
}

/* ---------------------------------------------------------
   2. Réglages de base
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* Les titres de marque sont en bas de casse (charte).
   Les noms propres et les sigles conservent leur casse :
   « sage 100 ne devrait pas travailler seul » est une faute
   de marque vis-à-vis de l'éditeur. */
.nocase { text-transform: none; }

/* Césure propre sur les titres longs en petit écran */
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }

/* Compensation de chasse.
   La charte calibre son approche de titrage sur Programme Bold, plus étroit.
   Montserrat le remplaçant (cf. note de licence en tête du design system),
   les grands titres sont resserrés d'un cran pour retrouver la même densité
   optique. À retirer si Programme revient. */
.display-hero, h1, .h1 { letter-spacing: -0.035em; }
h2, .h2 { letter-spacing: -0.028em; }
h3, .h3, h4, .h4 { letter-spacing: -0.022em; }

hr.rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-12) 0;
}

/* ---------------------------------------------------------
   3. Accessibilité — lien d'évitement
   --------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--melorio-coral);
  color: var(--melorio-paper);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 700;
  font-size: var(--fs-sm);
  border-bottom: 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------
   4. Grille et sections
   --------------------------------------------------------- */
.wrap        { width: 100%; max-width: var(--wrap);       margin-inline: auto; padding-inline: var(--gutter); }
.wrap-tight  { width: 100%; max-width: var(--wrap-tight); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--rhythm); }
.section--tight { padding-block: calc(var(--rhythm) * .62); }
.section--sunk  { background: var(--melorio-n-050); }
.section--paper { background: var(--melorio-paper-warm); }

/* Filet de séparation discret entre deux sections de même fond.
   Deux corrections du 19/09 : le sélecteur ne qualifiait que la
   seconde section, et dessinait donc aussi un filet là où le
   changement de fond sépare déjà — les deux sections doivent être
   nues. Et le ::before n'avait ni `content` ni `display` : il ne
   produisait aucune boîte, donc aucun filet, depuis l'origine. */
.section:not(.section--sunk):not(.section--paper)
  + .section:not(.section--sunk):not(.section--paper) > .wrap > .section-head::before {
  content: "";
  display: block;
  margin-bottom: var(--space-12);
  border-top: 1px solid var(--color-border);
}
.section-rule { border-top: 1px solid var(--color-border); }

.section-head { max-width: var(--wrap-tight); margin-bottom: var(--space-12); }
.section-head > * + * { margin-top: var(--space-4); }
.section-head .eyebrow { display: block; }
.section-head p { max-width: var(--wrap-text); color: var(--color-fg-2); font-size: var(--fs-md); }

/* Colonne de lecture longue */
.prose { max-width: var(--wrap-text); }
.prose > * + *      { margin-top: var(--space-5); }
.prose > * + h2     { margin-top: var(--space-16); }
.prose > * + h3     { margin-top: var(--space-10); }
.prose h2 + *,
.prose h3 + *       { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li      { margin-top: var(--space-2); }
.prose strong       { color: var(--color-fg-1); }

/* ---------------------------------------------------------
   5. En-tête
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--melorio-paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background   var(--dur-base) var(--ease-out);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--color-border);
  background: color-mix(in srgb, var(--melorio-paper) 97%, transparent);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--header-h);
}

/* Le bloc de marque : signature sous le logo, comme le lockup officiel.
   L'en-tête utilise le logo officiel (PNG de marque) ; le pied de page,
   sur aplat vert, utilise le wordmark composé en Programme Bold — qui est
   la police du logo, la cohérence est donc exacte. */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  border-bottom: 0;
  color: var(--melorio-green);
  flex: 0 0 auto;
}
.brand:hover { color: var(--melorio-green); }
.brand-logo { width: auto; height: 28px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: lowercase;
}
/* Signature de marque : composée en Programme, lettrage ouvert, comme le
   lockup officiel (Logo Melorio-07_default). Elle n'est jamais seule :
   la ligne descriptive de référencement vit ailleurs sur la page. */
.brand-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.175em;
  line-height: 1;
  color: var(--melorio-green);
  opacity: .78;
}
@media (max-width: 359px) { .brand-tag { display: none; } }

/* ---- Navigation principale ---- */
.nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; }

.nav-link,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--color-fg-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out);
}
.nav-link:hover, .nav-toggle:hover,
.nav-item:focus-within > .nav-link,
.nav-item:focus-within > .nav-toggle { background: var(--melorio-n-100); color: var(--melorio-green); }

.nav-link[aria-current="page"],
.nav-item--active > .nav-toggle { color: var(--melorio-coral); }

.nav-toggle .chev {
  width: 9px; height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .chev { transform: translateY(1px) rotate(-135deg); }

/* ---- Sous-menu ---- */
.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  /* Le panneau est décollé du titre de 8 px. Sans passerelle, la souris qui
     descend traverse une zone morte et le menu se referme. Ce pont invisible
     rend la zone de survol continue. */
  /* Assez large pour que « Comptabilité et facturation électronique »
     tienne sur une ligne malgré le retrait des pages filles. */
  min-width: 380px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  /* Repli sans JavaScript : le panneau s'ouvre au survol et au focus. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
.nav-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav-item:hover > .nav-panel,
.nav-item:focus-within > .nav-panel,
.nav-toggle[aria-expanded="true"] + .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border-bottom: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-fg-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-panel a:hover { background: var(--melorio-n-050); color: var(--melorio-green); }
.nav-panel a span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--color-fg-3);
}
.nav-panel li + li { margin-top: 1px; }
.nav-panel .nav-panel-lead a { background: var(--melorio-n-050); }
.nav-panel .nav-panel-lead a:hover { background: var(--melorio-n-100); }
.nav-panel hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-2) var(--space-3); }

/* Page fille : décalée et rattachée par un filet vertical. Le panneau
   restitue ainsi l'arborescence au lieu d'aplatir huit liens sur un rang.
   Le filet déborde d'un pixel en haut et en bas pour enjamber la gouttière
   de `li + li` : sur une suite de filles, il se lit d'un seul trait. */
.nav-panel .sous { position: relative; }
.nav-panel .sous::before {
  content: "";
  position: absolute;
  left: 15px;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--color-border);
}
.nav-panel .sous a { padding-left: 28px; }

/* Les panneaux des dernières entrées s'ancrent à droite. Sans cela, un
   panneau de 380 px ouvert sous une entrée proche du bord dépasse la
   fenêtre et provoque une barre de défilement horizontale — ce qui est
   arrivé le 20/09, quand le retrait de l'entrée Références a décalé les
   suivantes vers la droite. La règle vaut pour les trois dernières :
   seule celle d'IA porte un panneau aujourd'hui, les deux autres sont
   couvertes d'avance. */
.nav-list > .nav-item:nth-last-child(-n+3) > .nav-panel { left: auto; right: -8px; }

/* ---- Bouton hamburger ---- */
.nav-burger {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--melorio-green);
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  display: block;
  width: 18px; height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity   var(--dur-fast) var(--ease-out);
}
.nav-burger span::before,
.nav-burger span::after { content: ""; position: absolute; }
.nav-burger span::before { transform: translateY(-6px); }
.nav-burger span::after  { transform: translateY(6px); }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

/* ---------------------------------------------------------
   6. Boutons et liens d'action
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--melorio-coral);
  border-color: var(--melorio-coral);
  color: var(--melorio-paper);
}
.btn--primary:hover {
  background: var(--melorio-coral-ink);
  border-color: var(--melorio-coral-ink);
  color: var(--melorio-paper);
}

.btn--ghost {
  background: transparent;
  border-color: var(--melorio-n-300);
  color: var(--melorio-green);
}
.btn--ghost:hover {
  background: var(--melorio-green);
  border-color: var(--melorio-green);
  color: var(--melorio-paper);
}

/* Sur fond vert */
.on-dark .btn--ghost { border-color: rgba(247, 246, 255, .38); color: var(--melorio-paper); }
.on-dark .btn--ghost:hover { background: var(--melorio-paper); border-color: var(--melorio-paper); color: var(--melorio-green); }

.btn--sm { padding: 10px 18px; font-size: var(--fs-xs); }

/* Lien fléché — l'appel secondaire du site, jamais un second bouton */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--melorio-coral);
}
.arrow-link::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}
.arrow-link:hover::after { transform: translateX(4px); }
.on-dark .arrow-link { color: var(--melorio-pink); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

/* ---------------------------------------------------------
   7. Hero
   --------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(44px, 6vw, 84px); }

.hero-grid {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
}

.hero h1 { font-size: var(--fs-4xl); max-width: 19ch; }

/* Titre ouvert par un sigle isolé sur sa propre ligne : le sigle porte le
   sujet de la page, la phrase porte la promesse. */
.h1--sigle { max-width: 21ch; }
.h1--sigle .sigle {
  display: block;
  letter-spacing: -0.02em;   /* un sigle capitales n'a pas besoin du resserrement du bas de casse */
}
/* Dans un hero à deux colonnes, le titre se resserre pour laisser sa place
   au visuel ; seul le hero pleine largeur profite des 19 signes. */
.hero-grid h1 { max-width: 14ch; }
.hero .lede {
  margin-top: var(--space-6);
  max-width: 54ch;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-fg-2);
}
.hero .actions { margin-top: var(--space-10); }

/* Ligne descriptive de référencement, sous les actions.
   La signature porte l'émotion, cette ligne porte la compréhension.
   Les deux ne se confondent jamais (socle de marque §6). */
.hero-descriptor {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-fg-3);
}

/* ---------------------------------------------------------
   8. Chiffres de preuve
   --------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.figure {
  background: var(--color-surface);
  padding: var(--space-8) var(--space-6);
}
.figure dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--melorio-green);
}
.figure dd {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-fg-2);
}
/* Le chiffre qui porte l'argument : une seule mise en avant rose par bloc */
.figure--lead { background: var(--melorio-pink); }
.figure--lead dt, .figure--lead dd { color: var(--melorio-green); }

/* Variante compacte, en ligne dans un texte */
.figure-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-block: 1px solid var(--color-border);
  list-style: none;
  margin: var(--space-10) 0;
}
.figure-inline b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.figure-inline span { font-size: var(--fs-xs); color: var(--color-fg-3); }

/* ---------------------------------------------------------
   9. Cartes
   --------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
/* Le plancher de 320 px déborde sur un téléphone de 320 px de large,
   où la colonne de texte n'en fait que 280 :  le laisse céder. */
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Quatre cartes doivent tenir sur une ligne : auto-fit retombe à 3 et laisse
   une carte orpheline. On fixe donc les paliers. */
.card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px)  { .card-grid--4 { grid-template-columns: 1fr; } }
@media (min-width: 1040px) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow   var(--dur-base) var(--ease-out);
}
.card h3 { font-size: var(--fs-lg); }
.card p  { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--color-fg-2); }
.card .arrow-link { margin-top: auto; padding-top: var(--space-4); }

/* Carte cliquable en entier : le lien couvre la carte, sans perdre
   la sémantique ni la navigation au clavier. */
.card--link { position: relative; }
.card--link:hover { border-color: var(--melorio-n-300); box-shadow: var(--shadow-sm); }
.card--link:focus-within { border-color: var(--melorio-coral); }
.card--link .stretched::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* Carte mise en avant : un sujet domine la rubrique, il occupe toute la
   largeur et porte un filet corail. Une seule par page. */
.card--feature {
  padding: clamp(28px, 4vw, 48px);
  border-top: 3px solid var(--melorio-coral);
  gap: clamp(24px, 3vw, 48px);
}
@media (min-width: 820px) {
  .card--feature { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; }
}
.card--feature h3 { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.card--feature .lede { font-size: var(--fs-md); color: var(--color-fg-1); }
.card--feature .arrow-link { margin-top: var(--space-6); padding-top: 0; }
.card--feature p + p { margin-top: var(--space-4); }
.card--feature .figure-inline { border-bottom: 0; padding-bottom: 0; }

/* Sélecteur descendant obligatoire : `.card p` ci-dessus vaut (0,1,1) et
   l'emporterait sur une classe seule (0,1,0). Le surtitre s'affichait donc
   en gris de second plan, à 14 px au lieu de 12. */
.card .card__kicker {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--melorio-coral);
}

/* ---------------------------------------------------------
   10. Bloc de reconnaissance (« vous reconnaissez-vous ? »)
   --------------------------------------------------------- */
.recognition {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
}
@media (min-width: 900px) {
  .recognition { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
}
.symptoms { list-style: none; margin: 0; padding: 0; }
.symptoms li {
  position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-10);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}
.symptoms li:first-child { border-top: 1px solid var(--color-border); }
.symptoms li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(var(--space-5) + .55em);
  width: 16px;
  height: 2px;
  background: var(--melorio-coral);
}

/* ---------------------------------------------------------
   11. Panneaux d'emphase
   --------------------------------------------------------- */
.panel {
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius-xl);
}
.panel--emphasis { background: var(--melorio-pink); color: var(--melorio-green); }
.panel--emphasis .eyebrow { color: var(--melorio-green); opacity: .72; }
/* Sur le rose, le corail manque de contraste (interdit noté dans la charte) :
   l'appel secondaire passe donc en vert. */
.panel--emphasis .btn--ghost { border-color: var(--melorio-green); color: var(--melorio-green); }
.panel--emphasis .btn--ghost:hover { background: var(--melorio-green); color: var(--melorio-pink); }
.panel--emphasis .arrow-link { color: var(--melorio-green); }
.panel--outline { background: var(--color-surface); border: 1px solid var(--color-border); }

/* Aplat vert : UNE seule zone par page (charte 1a). Réservé au
   pied de page ou au bandeau de contact, jamais aux deux. */
.surface-footer, .on-dark {
  background: var(--melorio-green);
  color: var(--melorio-paper);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark p { color: var(--melorio-paper); }
.on-dark .eyebrow { color: var(--melorio-pink); }
.on-dark .muted   { color: rgba(247, 246, 255, .66); }

/* Citation / phrase-clé */
.pull {
  margin: var(--space-12) 0;
  padding-left: var(--space-8);
  border-left: 3px solid var(--melorio-coral);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--melorio-green);
}

/* ---------------------------------------------------------
   12. Figures, schémas et visuels
   --------------------------------------------------------- */
.media {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.media img { width: 100%; }
.media figcaption,
.figcaption {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--color-fg-3);
  background: var(--melorio-n-050);
}

/* Bandeau de logos partenaires — sobre, la preuve chiffrée fait le travail */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
  padding-block: var(--space-8);
  list-style: none;
  margin: 0;
}
.logos li {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-3);
}
.logos img { max-height: 30px; width: auto; opacity: .78; }

/* ---------------------------------------------------------
   13. Tableaux
   --------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: var(--space-8) 0; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
table.data th,
table.data td {
  padding: var(--space-4) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
table.data thead th {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-3);
  font-weight: 700;
  border-bottom-color: var(--color-border-strong);
}
/* `th` compris : un tableau dont la première colonne porte des en-têtes de
   ligne gardait sinon un filet sous sa seule première cellule, et le trait
   court sous la dernière ligne se voyait beaucoup. */
table.data tbody tr:last-child td,
table.data tbody tr:last-child th { border-bottom: 0; }
/* Tableau à deux colonnes : un libellé court à gauche, l'explication à droite. */
table.data--libelle th:first-child,
table.data--libelle td:first-child { width: 26%; min-width: 180px; }

/* ---------------------------------------------------------
   14. Fil d'Ariane
   --------------------------------------------------------- */
.breadcrumb {
  padding-block: var(--space-5);
  font-size: var(--fs-2xs);
  color: var(--color-fg-3);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--melorio-n-300); }
.breadcrumb a { color: var(--color-fg-3); border-bottom: 0; }
.breadcrumb a:hover { color: var(--melorio-coral); }

/* ---------------------------------------------------------
   15. Bandeau d'appel à l'action de fin de page
   --------------------------------------------------------- */
.cta-band { padding-block: var(--rhythm); }
.cta-band .inner {
  display: grid;
  gap: var(--space-8);
  align-items: end;
}
@media (min-width: 860px) {
  .cta-band .inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band h2 { font-size: var(--fs-2xl); max-width: 18ch; }
.cta-band p  { margin-top: var(--space-4); max-width: 52ch; }

/* ---------------------------------------------------------
   16. Pied de page
   --------------------------------------------------------- */
.site-footer { background: var(--melorio-green); color: var(--melorio-paper); }
/* Le design system donne aux titres et paragraphes la couleur d'encre verte :
   sur l'aplat vert du pied de page, il faut la reprendre explicitement. */
.site-footer p, .site-footer h2, .site-footer h3, .site-footer li { color: inherit; }
.site-footer a { color: var(--melorio-paper); border-bottom: 0; opacity: .8; }
.site-footer a:hover { color: var(--melorio-pink); opacity: 1; }

.footer-top {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  padding-block: var(--rhythm) var(--space-12);
}
@media (min-width: 620px)  { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 1 colonne de marque + 5 colonnes de liens */
@media (min-width: 1140px) { .footer-top { grid-template-columns: minmax(0, 1.25fr) repeat(5, minmax(0, 1fr)); } }

.footer-brand .brand-logo { height: 34px; }
.footer-brand .brand-tag  { color: var(--melorio-pink); opacity: 1; display: block; margin-top: var(--space-2); }
.footer-brand p { margin-top: var(--space-5); max-width: 34ch; font-size: var(--fs-sm); color: rgba(247,246,255,.7); }

.footer-col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--melorio-pink);
  margin-bottom: var(--space-5);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: var(--space-3); }
.footer-col a { font-size: var(--fs-sm); }

.footer-contact { font-size: var(--fs-sm); line-height: 1.9; color: rgba(247,246,255,.82); font-style: normal; }
.footer-contact a { font-weight: 500; opacity: 1; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid rgba(247,246,255,.16);
  font-size: var(--fs-2xs);
  color: rgba(247,246,255,.6);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------
   17. Formulaire
   --------------------------------------------------------- */
.field { display: block; margin-bottom: var(--space-6); }
.field > span {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-fg-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--melorio-coral);
  box-shadow: var(--shadow-ring);
}
.field .hint { display: block; margin-top: var(--space-2); font-size: var(--fs-2xs); color: var(--color-fg-3); }

/* ---------------------------------------------------------
   18. Utilitaires
   --------------------------------------------------------- */
.lede      { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--color-fg-2); }
.muted     { color: var(--color-fg-3); }
.mt-0      { margin-top: 0; }
.stack > * + * { margin-top: var(--space-5); }
.stack-lg > * + * { margin-top: var(--space-8); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Signale les blocs en attente d'arbitrage : visibles en recette,
   masqués dès que l'attribut data-env du <html> vaut "prod". */
.todo {
  display: block;
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-warning);
  background: #FFF8EE;
  font-size: var(--fs-sm);
  color: #7A5220;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
html[data-env="prod"] .todo { display: none; }

/* ---------------------------------------------------------
   19. Bascule mobile
   --------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav-burger { display: inline-flex; position: relative; }

  /* `backdrop-filter` crée un bloc conteneur pour les descendants en
     position fixed : le menu plein écran se retrouvait borné à la hauteur
     de l'en-tête, et son contenu, tronqué, laissait voir la page dessous.
     En petit écran l'en-tête devient donc opaque et sans flou. */
  .site-header { backdrop-filter: none; background: var(--melorio-paper); }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    margin: 0;
    padding: var(--space-6) var(--gutter) var(--space-16);
    background: var(--melorio-paper);
    border-top: 1px solid var(--color-border);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--color-border); }

  .nav-link, .nav-toggle {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-5) 0;
    font-size: var(--fs-md);
    font-weight: 700;
    border-radius: 0;
  }
  .nav-link:hover, .nav-toggle:hover { background: none; color: var(--melorio-coral); }

  .nav-panel {
    position: static;
    min-width: 0;
    padding: 0 0 var(--space-5);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    transform: none;
    /* Sur mobile le panneau est piloté au clic uniquement */
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-item:hover > .nav-panel,
  .nav-item:focus-within > .nav-panel { display: none; }
  .nav-toggle[aria-expanded="true"] + .nav-panel { display: block; }
  .nav-panel a { padding: 11px 0 11px var(--space-4); border-left: 1px solid var(--color-border); border-radius: 0; }
  /* Le filet gauche des liens tient déjà lieu de rattachement : le rail
     vertical du grand écran ferait doublon. Seul le retrait subsiste. */
  .nav-panel .sous::before { content: none; }
  .nav-panel .sous a { padding-left: var(--space-8); }

  .nav-item--cta { border-bottom: 0; padding-top: var(--space-8); }
  .nav-item--cta .btn { width: 100%; }

  body[data-nav-open="true"] { overflow: hidden; }
}

@media (min-width: 1024px) {
  .nav-item--cta { margin-left: var(--space-4); }
}

/* Petits écrans : rythme resserré */
@media (max-width: 599px) {
  .panel { border-radius: var(--radius-lg); }
  .pull  { padding-left: var(--space-5); font-size: var(--fs-lg); }
  .figure { padding: var(--space-6) var(--space-5); }
}

/* ---------------------------------------------------------
   20. Impression
   --------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .skip, .nav-burger { display: none !important; }
  .section { padding-block: var(--space-8); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

/* Légende de tableau visible : précise l'origine et le statut des données. */
table.data caption.matrice__legende,
table.data caption.legende {
  caption-side: bottom;
  padding-top: var(--space-4);
  text-align: left;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--color-fg-3);
}

/* =========================================================
   21. Composants éditoriaux partagés
   Ces composants ont d'abord été écrits dans le bloc <style>
   de la page EDI, ce qui les rendait invisibles aux autres
   pages employant les mêmes classes. Ils vivent ici.
   ========================================================= */

/* ---- Chaîne d'acteurs / de phases, avec liaisons ---- */
.chaine__liste {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  /* Le nombre de colonnes suit le nombre de maillons : une chaîne
     à trois acteurs ne laisse pas de colonne vide. */
  .chaine__liste { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-8); }
}
.chaine__item {
  position: relative;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
/* Liaisons décoratives, retirées en petit écran */
@media (min-width: 900px) {
  .chaine__item + .chaine__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--space-8) * -1);
    width: var(--space-8);
    height: 1.5px;
    background: var(--melorio-coral);
  }
  .chaine__item + .chaine__item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -9px;
    width: 7px; height: 7px;
    border-top: 1.5px solid var(--melorio-coral);
    border-right: 1.5px solid var(--melorio-coral);
    transform: translateY(-50%) rotate(45deg);
  }
}
.chaine__item--nous { background: var(--melorio-green); border-color: var(--melorio-green); }
.chaine__item--nous .chaine__role { color: var(--melorio-paper); }
.chaine__item--nous .chaine__desc { color: rgba(247, 246, 255, .74); }
/* Un maillon cité mais hors du circuit : on le fait figurer parce qu'il est
   couramment confondu avec les autres, et on supprime la liaison qui
   laisserait croire que quelque chose le traverse. */
.chaine__item--hors { background: transparent; border-style: dashed; }
.chaine__item--hors .chaine__role { color: var(--color-fg-2); }
@media (min-width: 900px) {
  /* Spécificité alignée sur celle de la règle de liaison ci-dessus,
     sans quoi la flèche entrante resterait dessinée. */
  .chaine__item + .chaine__item--hors::before,
  .chaine__item + .chaine__item--hors::after { content: none; }
}
.chaine__role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--melorio-green);
}
.chaine__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-fg-2);
}

/* ---- Variante « cheminement » : numéros, bifurcation, bandeau ---- */
.flux__liste { align-items: stretch; }
.flux__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--melorio-coral);
  margin-bottom: var(--space-3);
}
.chaine__item--nous .flux__num { color: var(--melorio-pink); }
.flux__options { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.flux__options li {
  position: relative;
  padding: 7px var(--space-3) 7px var(--space-5);
  background: var(--melorio-n-050);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--melorio-green);
}
.flux__options li::before {
  content: "";
  position: absolute;
  left: var(--space-3); top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--melorio-coral);
}
.flux__tma {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-fg-2);
}
.flux__num--band { margin: 0; flex: 0 0 auto; }

/* ---- Étapes numérotées ---- */
.etapes { counter-reset: etape; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.etapes li {
  counter-increment: etape;
  position: relative;
  padding: var(--space-8) 0 var(--space-8) clamp(60px, 8vw, 88px);
  border-top: 1px solid var(--color-border);
}
.etapes li:last-child { border-bottom: 1px solid var(--color-border); }
/* Le numéro pèse autant que le titre qu'il annonce. */
.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: calc(var(--space-8) - 4px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--melorio-coral);
}
.etapes h3 { font-size: var(--fs-lg); }
.etapes p  { margin-top: var(--space-3); max-width: 72ch; font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--color-fg-2); }

/* ---- Deux colonnes éditoriales ---- */
.deux-colonnes { display: grid; gap: clamp(40px, 5vw, 72px); }
/* Un élément de grille vaut `min-width: auto` par défaut : sa colonne ne
   peut pas devenir plus étroite que son contenu le plus large. Un tableau
   à défilement latéral posé dans une de ces colonnes imposait donc sa
   largeur naturelle à la page entière. Invisible jusqu'à 360 px, où la
   colonne unique n'a plus de marge : deux pages débordaient à 320 px.
   En grand écran le problème ne se pose pas, `minmax(0, 1fr)` bornant
   déjà les deux colonnes. */
.deux-colonnes > * { min-width: 0; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.liste-filets { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.liste-filets li {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--color-fg-2);
}
.liste-filets li:last-child { border-bottom: 1px solid var(--color-border); }
.liste-filets strong { color: var(--melorio-green); }

/* =========================================================
   22. Le pictogramme de marque
   La flèche à deux facettes du pack graphique (« Asset 3 »).
   Signe d'accent, employé avec parcimonie et à une taille où
   ses deux facettes se lisent — jamais en dessous de 16 px.
   Le fichier est livré déjà pivoté : aucune rotation CSS,
   donc aucun décalage de mise en page.
   ========================================================= */
.fleche-marque {
  display: inline-block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  background: url("../img/marque/fleche.svg") no-repeat center / contain;
}
.on-dark .fleche-marque,
.site-footer .fleche-marque { background-image: url("../img/marque/fleche-claire.svg"); }

/* Elle ouvre chaque bandeau d'appel à l'action : une occurrence par page,
   au moment où le lecteur est invité à agir. */
.cta-band .eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cta-band .eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: url("../img/marque/fleche.svg") no-repeat center / contain;
}

/* ---- Cycle en N temps ---- */
/* Cartes numérotées, écrites d'abord pour la page ACS. Employées dès qu'un
   processus se raconte en quatre ou cinq temps de poids égal — là où
   `.etapes` conviendrait mieux à une méthode qui se lit du haut vers le bas. */
.cycle { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 640px)  { .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .cycle { grid-template-columns: repeat(var(--cycle-cols, 5), minmax(0, 1fr)); } }
.cycle--4 { --cycle-cols: 4; }
.cycle--3 { --cycle-cols: 3; }

.cycle__temps {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
/* Sélecteur descendant obligatoire : la règle `.cycle__temps p` ci-dessous
   l'emporterait sinon sur la taille du numéro. */
.cycle__temps .cycle__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--melorio-coral);
}
.cycle__temps h3 { margin-top: var(--space-4); font-size: var(--fs-lg); }
.cycle__temps p {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  color: var(--color-fg-2);
}

/* ---- Questions fréquentes ---- */
/* <details> natif : le contenu reste lisible sans JavaScript, et le
   navigateur gère seul le clavier et l'état ARIA. */
.questions { border-top: 1px solid var(--color-border); }
.questions details { border-bottom: 1px solid var(--color-border); }
.questions summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-6) var(--space-10) var(--space-6) 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -0.022em;
  color: var(--melorio-green);
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--melorio-coral);
  border-bottom: 2px solid var(--melorio-coral);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.questions details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.questions summary:hover { color: var(--melorio-coral); }
.questions details > p {
  margin: 0;
  padding: 0 var(--space-10) var(--space-6) 0;
  max-width: 72ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--color-fg-2);
}

/* ---- Bandeau des moteurs d'IA ---- */
/* Écrit d'abord pour le bloc serveur MCP de l'accueil, repris sur la page
   Sage Operations. Fond blanc et non rose : les règles de marque de Mistral
   interdisent l'usage de leur icône sur un fond coloré. */
.moteurs {
  margin-top: clamp(28px, 4vw, 44px);
  padding: var(--space-6) clamp(20px, 3vw, 32px);
  background: var(--melorio-white);
  border-radius: var(--radius-lg);
}
.moteurs__lbl {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-3);
}
.moteurs ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) clamp(28px, 5vw, 56px);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.moteurs li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--melorio-green);
}
/* Icône de moteur, à la taille définitive (30 px : au-dessus du minimum de
   20 px imposé par la charte Mistral pour le symbole isolé). */
.moteurs__mark { width: 30px; height: 30px; flex: 0 0 auto; }
.moteurs__mark img { width: 100%; height: 100%; object-fit: contain; }
/* Calage optique : le spark Claude remplit presque tout son cadre là où
   le symbole Mistral porte sa propre zone de protection. On égalise le
   poids visuel sans jamais déformer ni recadrer les marques. */
.moteurs__mark .m--claude { transform: scale(.86); }

/* ---- Bloc serveur MCP ---- */
/* Deux colonnes : le propos à gauche, les questions posées à droite.
   Employé sur l'accueil (notre serveur pour Sage 100) et sur la page
   Sage Operations (le serveur natif du produit). */
.mcp-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .mcp-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.mcp-q {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--melorio-green);
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(14, 57, 52, .18);
}
.mcp-q:last-child { border-bottom: 1px solid rgba(14, 57, 52, .18); }

/* ---- Pile technique ---- */
/* Une brique, son rôle. Registre volontairement neutre : c'est une
   information, pas un argument de vente. */
.pile {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 620px)  { .pile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pile { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pile li {
  padding: var(--space-5) var(--space-6);
  border-top: 2px solid var(--melorio-coral);
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.pile__nom {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -0.02em;
  color: var(--melorio-green);
}
.pile__role {
  margin-top: var(--space-2);
  font-size: var(--fs-3xs);
  line-height: var(--lh-loose);
  color: var(--color-fg-2);
}

/* ---- Valeur littérale citée dans le texte ---- */
/* Écrit d'abord dans le bloc <style> de la page Format d'import, donc
   invisible à toute autre page employant la même classe. Il vit ici.

   La classe est doublée à dessein. `.card p` vaut (0,1,1), `table.data td`
   (0,1,2) : l'une comme l'autre l'emporteraient sur une classe seule, et le
   jeton s'afficherait dans le gris du paragraphe qui l'entoure. La règle
   habituelle — écrire le modificateur en descendant de son conteneur — ne
   s'applique pas ici : un jeton en ligne peut apparaître dans n'importe
   lequel d'entre eux. Doubler la classe lui donne (0,2,0) sans rien changer
   à ce qu'elle désigne. */
.code-inline.code-inline {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--melorio-coral);
  white-space: nowrap;
}

/* =========================================================
   Les confettis de la charte
   Le motif figure dans la charte depuis l'origine et n'avait
   jamais servi. Il est employé en bande fine, jamais en aplat
   de fond : posé derrière du texte, il le rendrait illisible et
   ruinerait l'exercice. La tuile est déterministe et se raccorde
   sans couture — les centres sont espacés du même pas de part et
   d'autre du bord.
   ========================================================= */
.bande-confettis {
  height: 86px;
  background: url("../img/marque/confettis-bande.svg") repeat-x left top / auto 86px;
}
.bande-confettis--fonce {
  background-color: var(--melorio-green);
  background-image: url("../img/marque/confettis-bande-clair.svg");
}

/* Le pictogramme ouvre aussi chaque titre de section. Il ne s'agit
   plus de l'occurrence unique réservée à l'appel à l'action : la
   marque a un signe, et un signe qui ne se montre qu'une fois par
   page ne devient jamais familier. Celui du bandeau d'appel reste
   le plus grand des deux. */
.hero > .wrap > .eyebrow::before,
.section-head > .eyebrow::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: var(--space-3);
  vertical-align: -3px;
  background: url("../img/marque/fleche.svg") no-repeat center / contain;
}
.on-dark .section-head > .eyebrow::before,
.on-dark .hero > .wrap > .eyebrow::before {
  background-image: url("../img/marque/fleche-claire.svg");
}

/* ---------------------------------------------------------
   Confettis à l'unité, autour d'une figure
   La bande dense convient à un bord de page ; autour d'une
   capture, c'est le motif de la charte en grand et clairsemé
   qui fonctionne — trois ou quatre formes posées dans la marge,
   jamais sur le contenu.

   Chaque forme est un masque : un seul fichier par forme, la
   couleur, la taille, la position et la rotation venant de
   variables posées sur l'élément. Le masque évite d'avoir un
   fichier par combinaison de teinte et d'angle.

   La section qui les accueille rogne ce qui dépasse : les
   formes vivent dans la marge de page, qui se réduit avec la
   fenêtre. Une forme à demi coupée par le bord se lit comme
   une intention ; une barre de défilement horizontale, non.
   --------------------------------------------------------- */
.section--confettis { overflow: hidden; }

/* Le conteneur crée son contexte d'empilement : sans lui, une forme
   en z-index négatif passerait derrière le fond de la section et
   disparaîtrait. */
.parseme { position: relative; z-index: 0; }

.parseme .confetti {
  position: absolute;
  z-index: -1;
  display: block;
  width: var(--taille, 72px);
  height: var(--taille, 72px);
  top: var(--haut, auto);
  left: var(--gauche, auto);
  right: var(--droite, auto);
  background-color: var(--teinte, var(--melorio-pink));
  transform: rotate(var(--tour, 0deg));
  pointer-events: none;
  -webkit-mask: var(--forme) no-repeat center / contain;
          mask: var(--forme) no-repeat center / contain;
}
.parseme .confetti--lune { --forme: url("../img/marque/confetti-lune.svg"); }
.parseme .confetti--arc  { --forme: url("../img/marque/confetti-arc.svg"); }

/* Rien à faire pour protéger le contenu : le z-index négatif suffit.
   Une forme passe derrière une capture, derrière une carte, derrière
   un paragraphe — jamais devant. */

/* Sous 900 px la marge de page n'existe plus : les formes
   seraient toutes coupées, autant ne pas les poser. */
@media (max-width: 899px) { .parseme .confetti { display: none; } }

/* La frise occupe déjà le haut du pied de page : sans cela, son
   rythme s'ajouterait au rythme vertical de la section et laisserait
   près de deux cents pixels d'aplat vert avant le premier mot. */
.site-footer .bande-confettis + .footer-top { padding-top: var(--space-12); }


/* ---------------------------------------------------------
   Bandeau de partenaires
   Sobre par construction : le statut de partenaire Sage ne
   comporte plus de hiérarchie, et c'est la preuve chiffrée qui
   fait le travail. Les styles ont d'abord vécu dans le bloc
   <style> de l'accueil ; la page Qui sommes-nous emploie le même
   composant et affichait donc ses badges à leur taille naturelle,
   près de neuf cents pixels de large. Ils vivent ici.
   --------------------------------------------------------- */
.partenaires { padding-block: var(--space-10) var(--space-12); }
.partenaires__lbl {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-3);
}
.partenaires__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) clamp(32px, 5vw, 64px);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
/* Les badges sont repris tels quels : ni recolorisation, ni recadrage.
   Seule la hauteur est calée, pour un alignement optique commun. */
.partenaires__liste img { height: 46px; width: auto; }
.partenaires__ms img { height: 20px; }