@charset "UTF-8";
/* ==========================================================================
   refonte-projects.css — myOptions Refonte 2026
   Page liste projets /projets/ et page détail (à venir).

   Stratégie : classes BEM préfixées `mo-projects-*` et `mo-project-card-*`
   pour ne jamais entrer en conflit avec les classes legacy `.p__sumup`,
   `.p--card`, etc. Les anciennes classes restent en place côté CSS legacy
   ; les nouveaux templates n'utilisent que les classes mo-*.

   Pas de !important. Tokens partagés depuis tokens.css.
   Couleurs famille injectées via [data-fam="..."] sur la card et la pill.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Couleurs contextuelles — variable --fam-color injectée par data-fam
   -------------------------------------------------------------------------- */

/* Spécificité (0,2,0) > (0,1,0) du fallback .mo-project-card.
   Couleurs alignées sur le mockup v5 (.po5.fam-* lignes 254-259) :
     serenite (Sérénité)         → --bleuet           #6A9EFF
     croissance                  → --celadon-dark     #5C8A75
     convertibles                → --lilas-dark       #7E5BC4
     equity                      → --terracotta-dark  #D86A6A
     pret                        → --bronze-600       #9A835C
     minibons                    → --bronze-200       #D9C8A6
*/
.mo-project-card[data-fam="serenite"]     { --fam-color: var(--bleuet); }
.mo-project-card[data-fam="croissance"]   { --fam-color: var(--celadon-dark); }
.mo-project-card[data-fam="convertibles"] { --fam-color: var(--lilas-dark); }
.mo-project-card[data-fam="equity"]       { --fam-color: var(--terracotta-dark); }
.mo-project-card[data-fam="pret"]         { --fam-color: var(--bronze-600); }
.mo-project-card[data-fam="minibons"]     { --fam-color: var(--bronze-200); }
/* Texte de la couleur famille sur fond ink-900 (statut) : variante claire, AA. */
.mo-project-card[data-fam="croissance"]   { --fam-text: var(--celadon-light); }
.mo-project-card[data-fam="convertibles"] { --fam-text: var(--lilas-light); }
.mo-project-card[data-fam="equity"]       { --fam-text: var(--terracotta-light); }
.mo-project-card[data-fam="pret"]         { --fam-text: var(--bronze-200); }
/* Idem pour les pills famille dans la barre de filtres */
.mo-projects__pill[data-fam="serenite"]     { --fam-color: var(--bleuet); }
.mo-projects__pill[data-fam="croissance"]   { --fam-color: var(--celadon-dark); }
.mo-projects__pill[data-fam="convertibles"] { --fam-color: var(--lilas-dark); }
.mo-projects__pill[data-fam="equity"]       { --fam-color: var(--terracotta-dark); }
.mo-projects__pill[data-fam="pret"]         { --fam-color: var(--bronze-600); }
.mo-projects__pill[data-fam="minibons"]     { --fam-color: var(--bronze-200); }


/* --------------------------------------------------------------------------
   Wrapper page projets
   -------------------------------------------------------------------------- */

.mo-projects {
  max-width: var(--container-max);          /* 1280px charte v4 */
  margin: 0 auto;
  padding: 48px var(--page-gutter) 120px;  /* gouttière de page commune */
  font-family: var(--font-primary);
  color: var(--ink-body);
  overflow-x: hidden;  /* garde-fou : aucun enfant ne peut pousser à droite */
}

@media (max-width: 1024px) {
  .mo-projects { padding: 40px var(--page-gutter) 96px; }
}
@media (max-width: 640px) {
  .mo-projects { padding: 32px var(--page-gutter) 80px; }
}


/* --------------------------------------------------------------------------
   Breadcrumb — le tag Django {% breadcrumb_url_i18n %} rend des <li> avec
   itemscope Schema.org. On les liste en flex, séparateur via ::before
   sur les <li> sauf le premier.
   -------------------------------------------------------------------------- */

.mo-projects__crumbs {
  margin: 0 0 32px;
}
.mo-projects__crumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}
.mo-projects__crumbs-list li {
  display: inline-flex;
  align-items: center;
  color: var(--ink-700);
}
.mo-projects__crumbs-list li + li::before {
  content: "\203A"; /* › U+203A — escape Unicode pour éviter tout souci charset */
  margin: 0 12px;
  color: var(--ink-300);
  font-size: 14px;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}
.mo-projects__crumbs-list a {
  color: var(--ink-500);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}
.mo-projects__crumbs-list a:hover {
  color: var(--ink-900);
}
.mo-projects__crumbs-list li:last-child {
  color: var(--ink-900);
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.mo-projects__hero { margin: 0 0 48px; }
.mo-projects__hero-eyebrow {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze-600);
  font-weight: var(--weight-semibold);
  margin: 0 0 14px;
}
.mo-projects__hero-title {
  font-family: var(--font-secondary);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--ink-900);
  line-height: 1.1;
}
.mo-projects__hero-title em {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: var(--weight-medium);
}
.mo-projects__hero-lead {
  margin: 0;
  color: var(--ink-body);
  max-width: 680px;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}


/* --------------------------------------------------------------------------
   Filtres — barre famille (pills)
   -------------------------------------------------------------------------- */

.mo-projects__filters { margin: 0 0 24px; }

.mo-projects__filters-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--cream-200);
  margin-bottom: 20px;
}

.mo-projects__families {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.mo-projects__pill {
  --fam-color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  padding: 9px 16px;
  margin: 0;
  margin-block-end: 0;  /* annule label { margin-block-end } de base.css (décalage avec « Toutes ») */
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-700);
  border: 1px solid var(--cream-300);
  cursor: pointer;
  line-height: 1;
  transition: all var(--duration-base) var(--ease);
}
.mo-projects__pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fam-color);
}
.mo-projects__pill[data-fam="all"]::before { display: none; }
.mo-projects__pill:hover {
  border-color: var(--ink-700);
  color: var(--ink-900);
}
.mo-projects__pill[aria-pressed="true"] {
  background: var(--ink-900);
  color: var(--cream-50);
  border-color: var(--ink-900);
}
.mo-projects__pill[aria-pressed="true"]::before {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}


/* --------------------------------------------------------------------------
   Bouton "Filtres avancés" (ouvre le drawer)
   -------------------------------------------------------------------------- */

.mo-projects__filters-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mo-projects__drawer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  padding: 9px 14px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-700);
  border: 1px solid var(--cream-300);
  cursor: pointer;
  line-height: 1;
  transition: all var(--duration-base) var(--ease);
}
.mo-projects__drawer-btn:hover {
  border-color: var(--ink-700);
  color: var(--ink-900);
}
.mo-projects__drawer-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mo-projects__drawer-btn[aria-expanded="true"] {
  background: var(--ink-900);
  color: var(--cream-50);
  border-color: var(--ink-900);
}
.mo-projects__drawer-btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--bronze-600);
  color: var(--cream-50);
  border-radius: var(--radius-full);
  margin-left: 2px;
}


/* --------------------------------------------------------------------------
   Drawer filtres avancés
   -------------------------------------------------------------------------- */

.mo-projects__drawer {
  display: none;
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-md);
  padding: 28px 32px 24px;
  margin: 0 0 24px;
}
.mo-projects__drawer[data-open="true"] { display: block; }

.mo-projects__drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 40px;
}
@media (max-width: 780px) {
  .mo-projects__drawer-grid { grid-template-columns: 1fr; gap: 24px; }
}

.mo-projects__fgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mo-projects__fgroup-title {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--ink-500);
  margin: 0;
}
.mo-projects__fgroup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mo-projects__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-700);
  border: 1px solid var(--cream-300);
  cursor: pointer;
  line-height: 1.2;
  transition: all var(--duration-base) var(--ease);
}
.mo-projects__chip:hover { border-color: var(--ink-700); }
.mo-projects__chip[aria-pressed="true"] {
  background: var(--ink-900);
  color: var(--cream-50);
  border-color: var(--ink-900);
}

.mo-projects__search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  transition: border-color var(--duration-base) var(--ease);
}
.mo-projects__search:focus-within { border-color: var(--ink-700); }
.mo-projects__search svg {
  width: 15px;
  height: 15px;
  color: var(--ink-500);
  flex-shrink: 0;
}
.mo-projects__search input {
  border: 0;
  background: transparent;
  outline: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-900);
  width: 100%;
}
.mo-projects__search input::placeholder { color: var(--ink-300); }

.mo-projects__drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--cream-200);
}
.mo-projects__drawer-count {
  font-size: 13px;
  color: var(--ink-500);
  margin: 0;
}
.mo-projects__drawer-count strong {
  color: var(--ink-900);
  font-weight: var(--weight-semibold);
}
.mo-projects__drawer-btns { display: flex; gap: 10px; }


/* --------------------------------------------------------------------------
   Chips actifs (résumé filtres en cours)
   -------------------------------------------------------------------------- */

.mo-projects__active {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 20px;
  font-size: 13px;
  color: var(--ink-500);
}
.mo-projects__active[hidden] { display: none; }
.mo-projects__active-label {
  color: var(--ink-500);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.mo-projects__active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  padding: 5px 6px 5px 12px;
  border-radius: var(--radius-full);
  background: var(--ink-900);
  color: var(--cream-50);
}
.mo-projects__active-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  font-family: inherit;
  border: 0;
  color: inherit;
  transition: background var(--duration-fast) var(--ease);
}
.mo-projects__active-x:hover { background: rgba(255,255,255,0.3); }
.mo-projects__active-clear {
  font-size: 12px;
  color: var(--ink-500);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mo-projects__active-clear:hover { color: var(--ink-900); }


/* --------------------------------------------------------------------------
   Boutons drawer (Réinitialiser / Appliquer)
   -------------------------------------------------------------------------- */

.mo-projects__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  border: 0;
  transition: all var(--duration-base) var(--ease);
}
.mo-projects__btn--primary {
  background: var(--ink-900);
  color: var(--cream-50);
}
.mo-projects__btn--primary:hover { background: var(--ink-700); }
.mo-projects__btn--ghost {
  background: transparent;
  color: var(--ink-700);
  border: 1px solid var(--cream-300);
}
.mo-projects__btn--ghost:hover { border-color: var(--ink-700); }


/* --------------------------------------------------------------------------
   Compteur + tri
   -------------------------------------------------------------------------- */

.mo-projects__results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 28px;
}
.mo-projects__results-count {
  font-size: 14px;
  color: var(--ink-body);
  margin: 0;
}
.mo-projects__results-count strong {
  color: var(--ink-900);
  font-weight: var(--weight-semibold);
}

.mo-projects__sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.mo-projects__sort label {
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.mo-projects__sort select {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-900);
  font-weight: var(--weight-medium);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-full);
  padding: 9px 36px 9px 16px;
  background: var(--cream-50);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  line-height: 1.2;
  height: auto;
  margin: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231C1F24' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.mo-projects__sort select:hover { border-color: var(--ink-700); }
.mo-projects__sort select:focus { outline: 0; border-color: var(--ink-900); }


/* --------------------------------------------------------------------------
   Bouton "Voir les campagnes terminées" — hors grid, centré sous les cards
   -------------------------------------------------------------------------- */

.mo-projects__more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.mo-projects__more form {
  margin: 0;
}
.mo-projects__more-btn {
  padding: 14px 28px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Grid bento
   -------------------------------------------------------------------------- */

/* minmax(0, 1fr) au lieu de 1fr pur pour empêcher les cards à contenu
   nowrap (foot, KPI) de pousser le grid au-delà de la largeur du conteneur.
   Sans ça, le grid grandit jusqu'à contenir le contenu min-content de chaque
   card, ce qui fait déborder à droite. */
.mo-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  min-width: 0;
}
@media (max-width: 1180px) {
  .mo-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .mo-projects__grid { grid-template-columns: minmax(0, 1fr); }
}
.mo-projects__grid > * {
  min-width: 0; /* enfants peuvent rétrécir sous leur contenu min-content */
}

/* --------------------------------------------------------------------------
   Section opportunités sur la home / dashboard
   Refonte 09/05 v2 — section autonome charte v4, plus de classes legacy
   (lg--bg--01, o-large-container, h1 h--h, _2-col-grid). Background
   cream-50 doux pour rythmer la home, container 1280px max charte v4,
   eyebrow + h2 Stack Sans Headline + lead Stack Sans Text.
   -------------------------------------------------------------------------- */

.mo-home-projects {
  background: var(--cream-50);
  padding: 96px 0 112px;
  font-family: var(--font-primary);
  color: var(--ink-body);
}
@media (max-width: 1180px) {
  .mo-home-projects { padding: 80px 0 96px; }
}
@media (max-width: 640px) {
  .mo-home-projects { padding: 64px 0 80px; }
}

/* Container charte v4 : --container-max 1280px STRICT, paddings latéraux
   à l'intérieur. Section full-width pour préserver le background cream-50
   sur toute la largeur du viewport, mais chaque bloc de contenu est
   contraint au container 1280 + gutters charte. Identique au pattern de
   .mo-projects (page /projets/) pour cohérence stricte. */
.mo-home-projects > * {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  box-sizing: border-box;
}

.mo-home-projects__head {
  margin-bottom: 56px;
  /* Hérite de la règle générique .mo-home-projects > * (max-width 1280
     charte v4 + padding-inline + margin auto). Pas de max-width local
     pour ne pas créer de conflit ; c'est le lead qui porte sa propre
     contrainte de readability (max 60ch). */
}
@media (max-width: 640px) {
  .mo-home-projects__head { margin-bottom: 40px; }
}

.mo-home-projects__eyebrow {
  /* Eyebrow charte v4 (Reco-UX-charte-v2 §3.3) : couleur --bronze-600,
     uppercase, letter-spacing 0.18em, family text, weight 500, taille
     --font-eyebrow (10→11px responsive). Bronze-600 est explicitement
     attribué à "titre eyebrow" dans le tableau de la charte. */
  display: block;
  font-family: var(--font-primary);
  font-size: var(--font-eyebrow);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin-bottom: 16px;
}

.mo-home-projects__title {
  font-family: var(--font-secondary);  /* Stack Sans Headline */
  font-size: 40px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 18px;
}
@media (max-width: 1180px) {
  .mo-home-projects__title { font-size: 34px; }
}
@media (max-width: 640px) {
  .mo-home-projects__title { font-size: 28px; line-height: 1.2; }
}

.mo-home-projects__lead {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0;
  max-width: 60ch;
}

.mo-home-projects__cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
@media (max-width: 640px) {
  .mo-home-projects__cta { margin-top: 40px; }
}


/* --------------------------------------------------------------------------
   État vide / aucun résultat
   -------------------------------------------------------------------------- */

.mo-projects__empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--ink-500);
  background: var(--cream-50);
  border: 1px dashed var(--cream-300);
  border-radius: var(--radius-md);
  grid-column: 1 / -1;
}
.mo-projects__empty p { margin: 0 0 16px; font-size: 16px; }

/* Refonte 09/05 — Pills et chips deviennent des <label> englobant un input
   checkbox hidden, pour que le form GET capture la sélection nativement.
   On masque l'input visuellement tout en gardant le comportement clic natif
   du label. L'état visuel passe par aria-pressed sur le wrapper (synchro
   server-side au render + JS au change). */
.mo-projects__pill-input,
.mo-projects__chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Le <label.mo-projects__pill> doit garder le curseur main (le CSS pill
   cible déjà le block en pointer via cursor: pointer mais on s'assure). */
label.mo-projects__pill,
label.mo-projects__chip { cursor: pointer; }

/* Lien « Toutes » et lien « Tout réinitialiser » : pas de soulignement et
   transitions cohérentes avec les boutons (déjà couvert par les règles
   .mo-projects__pill et .mo-projects__btn--ghost, on désactive juste la
   décoration de lien par défaut). */
a.mo-projects__pill,
a.mo-projects__btn { text-decoration: none; }


/* ==========================================================================
   Card projet — pattern v5 ink monochromatique + Fraunces italic KPI
   Refonte 07/05 v2 : pas d'image hero, uniquement aplat ink-900,
   couleur famille en touches (KPI sup, progress bar, hover CTA).
   Hauteur égale via grid stretch + flex 1 sur le body.
   ========================================================================== */

.mo-project-card {
  --fam-color: var(--bronze-600);
  background: var(--ink-900);
  color: var(--cream-50);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  text-decoration: none;
  height: 100%; /* prend toute la hauteur du grid item → cards égales */
  min-height: 460px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mo-project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.35);
}
.mo-project-card:focus-visible {
  outline: 3px solid var(--bleuet);
  outline-offset: 2px;
}


/* Hero — espace réservé image, APLAT PLEIN de la couleur famille.
   Reprend exactement le pattern .token__swatch du mockup v5 :
   hauteur fixe (pas aspect-ratio qui dérive en flex), background plein
   + noise overlay subtle pour donner de la matière.
   flex-shrink: 0 pour garantir une hauteur strictement identique sur
   toutes les cards quel que soit le contenu du body. */
.mo-project-card__hero {
  position: relative;
  height: 160px;
  flex-shrink: 0;
  background: var(--fam-color);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 18px;
}
.mo-project-card__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.3;
  pointer-events: none;
}

/* Pill famille — dans le hero sur fond plein coloré.
   Pastille blanche pour rester lisible sur tous les aplats famille
   (du bleuet clair au terracotta sombre). */
.mo-project-card__pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  background: rgba(255,255,255,0.92);
  color: var(--ink-900);
  border-radius: var(--radius-full);
}
.mo-project-card__pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fam-color);
}


/* Body — flex 1 pour pousser le foot en bas et égaliser les hauteurs */
.mo-project-card__body {
  padding: 24px 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.mo-project-card__title {
  font-family: var(--font-secondary);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--cream-50);
  margin: 0;
}
.mo-project-card__title em {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: var(--weight-medium);
}
.mo-project-card__lead {
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--cream-300);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Hauteur fixe sur 3 lignes pour aligner les KPI sur toutes les cards
     même quand le lead est court (ex : "bla bla"). Sans ça, margin-top:auto
     sur __kpi pousse le bloc en bas mais l'espace entre lead court et KPI
     varie d'une card à l'autre, ce qui donne un effet "n'importe quoi". */
  min-height: calc(13.5px * 1.5 * 3);
}
/* Sécurité contre un legacy CSS qui forcerait du bold ou une autre taille */
.mo-project-card__lead * {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}


/* KPI signature — Fraunces italic réservée aux cards projet.
   margin-top: auto pousse le KPI + meta + progress en bas du body,
   garantissant un alignement bottom strict sur toutes les cards
   quel que soit la longueur du lead. */
.mo-project-card__kpi {
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ink-700);
}
.mo-project-card__kpi-num {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--cream-50);
  display: block;
}
.mo-project-card__kpi-num sup {
  font-size: 0.4em;
  font-style: normal;
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  margin-left: 4px;
  vertical-align: 0.85em;
  color: var(--fam-color);
}
.mo-project-card__kpi-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--cream-300);
  display: block;
  margin-top: 8px;
}


/* Meta (grille 2 cols : Durée, Avantage, Min, Instrument...) */
.mo-project-card__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin-top: 12px;
}
.mo-project-card__meta-item .lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
  font-weight: var(--weight-semibold);
  margin: 0 0 2px;
  display: block;
}
.mo-project-card__meta-item .val {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--cream-50);
  margin: 0;
}
.mo-project-card__meta-item .val em {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--cream-300);
  font-size: 12.5px;
}


/* Valeur réservée (visiteur anonyme, 13/10/2026) : la valeur n'est pas
   envoyée, la mention la remplace (même texte que le tableau CGP). */
.mo-project-card__reserved {
  display: inline-block;
  font-size: var(--font-caption);
  font-weight: var(--weight-regular);
  line-height: 1.35;
  color: var(--cream-300);
}


/* Progress bar de collecte */
.mo-project-card__progress {
  margin: 18px 0 0;
  height: 2px;
  background: var(--ink-700);
  position: relative;
  border-radius: 2px;
}
.mo-project-card__progress > i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--fam-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--fam-color) 50%, transparent);
  border-radius: 2px;
}


/* Footer — meta gauche (statut + collecté + clôture) + CTA droite */
.mo-project-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 28px 22px;
  margin-top: auto;
  border-top: 1px solid var(--ink-700);
}
.mo-project-card__foot-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
  font-size: 11.5px;
  color: var(--cream-300);
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.mo-project-card__deadline {
  white-space: nowrap;
}
.mo-project-card__status {
  font-family: var(--font-primary);
  font-size: 11.5px;
  font-weight: var(--weight-regular);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fam-text, var(--fam-color));
  white-space: nowrap;
}
.mo-project-card__sep {
  color: var(--ink-500);
}
.mo-project-card__deadline em {
  font-family: var(--font-exception);
  font-style: italic;
  color: var(--fam-color);
  font-weight: var(--weight-regular);
}
.mo-project-card__cta {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  background: var(--cream-50);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.mo-project-card__cta:hover {
  background: var(--fam-color);
  color: var(--ink-900);
}
.mo-project-card__cta::after { content: "\2192"; } /* → U+2192 escape Unicode */


/* État "campagne fermée" — désaturé léger, mais reste cliquable
   (CTA "Découvrir" au lieu de "Souscrire" pour aller voir le détail). */
.mo-project-card--closed {
  filter: saturate(0.7);
}
.mo-project-card--closed .mo-project-card__hero {
  filter: grayscale(0.3);
}
.mo-project-card--closed .mo-project-card__cta {
  background: transparent;
  color: var(--cream-50);
  border: 1px solid var(--ink-700);
}
.mo-project-card--closed .mo-project-card__cta:hover {
  background: var(--cream-50);
  color: var(--ink-900);
  border-color: var(--cream-50);
}


/* Card "Voir les campagnes terminées" — variante CTA-only */
.mo-project-card--more {
  background: transparent;
  border: 1px dashed var(--cream-400);
  color: var(--ink-700);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  text-align: center;
  padding: 24px;
}
.mo-project-card--more form { width: 100%; }
.mo-project-card--more .mo-projects__btn {
  background: var(--ink-900);
  color: var(--cream-50);
  width: 100%;
  justify-content: center;
}


/* ==========================================================================
   Variante rail (carrousel scroll-snap) — home uniquement
   Refonte 10/05 v2 — la home affiche les opérations en rail horizontal pour
   raccourcir la deuxième section et signaler une sélection resserrée.
   Pattern desktop ≥ 1180px : layout 2 colonnes (intro à gauche / rail à
   droite). Sous 1180px : stack — intro empilé au-dessus, rail en dessous,
   pleine largeur. Cards en scroll-snap mandatory. Pas de !important,
   charte v4 stricte (tokens ink, bronze, cream).
   ========================================================================== */

/* Layout 2 colonnes desktop. La colonne texte est cappée à 360px pour
   garder une lecture confortable (≈ 50ch sur le lead) et laisser un
   maximum de place au rail. Gap 56px = rythme charte v4. align-items:
   start pour que le rail démarre haut et que l'intro ne s'étire pas. */
.mo-home-projects--rail .mo-home-projects__layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 1179px) {
  .mo-home-projects--rail .mo-home-projects__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* Alignement strict avec le hero ≥ 1180px : le layout reproduit la même
   contrainte que `.mo-hero-home__inner` (width: 100% - 30px ; max-width:
   1280px ; margin: 0 auto). L'intro et le bord droit du rail s'alignent
   verticalement sur le hero — section uniforme. La règle générique
   .mo-home-projects > * (paddings gutter-lg + max-width container) est
   surchargée sans !important grâce à la spécificité de .mo-home-projects--rail. */
@media (min-width: 1180px) {
  .mo-home-projects--rail > .mo-home-projects__layout {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);  /* même axe que le hero et l'en-tête */
  }
}

.mo-home-projects__intro {
  min-width: 0;
}
.mo-home-projects__intro .mo-home-projects__title {
  margin-top: 0;
}
/* Lead resserré sur la colonne (pas besoin du 60ch hérité, la colonne
   le contraint déjà). On garde la règle générique pour les autres usages. */
.mo-home-projects--rail .mo-home-projects__intro .mo-home-projects__lead {
  max-width: none;
}

.mo-home-projects__nav {
  display: flex;
  gap: 8px;
  margin-top: 32px;
}
@media (max-width: 1179px) {
  .mo-home-projects__nav {
    margin-top: 24px;
  }
}

.mo-home-projects__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ink-900);
  background: transparent;
  color: var(--ink-900);
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.mo-home-projects__nav-btn:hover:not(:disabled) {
  background: var(--ink-900);
  color: var(--cream-50);
}
.mo-home-projects__nav-btn:focus-visible {
  outline: 3px solid var(--bleuet);
  outline-offset: 2px;
}
.mo-home-projects__nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Viewport rail : grid une seule ligne + scroll-snap.
   `grid-auto-flow: column` pose les items sur une rangée.
   `grid-auto-columns` fixe la largeur de chaque carte. Calibrage :
   - ≥1180px (desktop, rail full-bleed à droite — voir bloc layout) :
     2.5 cards visibles. Formule = (rail - 2*gap) / 2.5 → 2 cards pleines
     + 2 gaps + une demi-carte qui peeke à droite.
   - 768-1179px (rail plein largeur stack) : 2.4 cards visibles.
   - ≤767px : 1 carte + peek 16% de la suivante.
   Scroll-snap mandatory aligne les snaps sur le début de chaque carte. */
.mo-home-projects--rail .mo-home-projects__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 64px) / 2.5);
  gap: 32px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;  /* room pour ombres hover sans clip */
  outline: none;
  min-width: 0; /* enfant grid : autorise le rétrécissement sous min-content */
}
.mo-home-projects--rail .mo-home-projects__rail::-webkit-scrollbar {
  display: none;
}
.mo-home-projects--rail .mo-home-projects__rail:focus-visible {
  outline: 2px solid var(--bleuet);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.mo-home-projects__rail-item {
  scroll-snap-align: start;
  min-width: 0;
}

/* Tablette / desktop étroit (rail désormais full-width sous le stack) :
   2 cards + ~0.4 carte de peek pour signaler le scroll. gap 24px. */
@media (max-width: 1179px) {
  .mo-home-projects--rail .mo-home-projects__rail {
    grid-auto-columns: calc((100% - 48px) / 2.4);
    gap: 24px;
  }
}

@media (max-width: 767px) {
  /* Mobile : nav arrows alignés au bord droit (cohérent avec le scroll). */
  .mo-home-projects__nav {
    margin-top: 20px;
    justify-content: flex-end;
  }
  /* Mobile : 1 card + peek de la 2ᵉ. */
  .mo-home-projects--rail .mo-home-projects__rail {
    grid-auto-columns: 84%;
    gap: 16px;
  }
}

/* Respect des préférences réduit-motion : pas de scroll-behavior smooth. */
@media (prefers-reduced-motion: reduce) {
  .mo-home-projects--rail .mo-home-projects__rail {
    scroll-behavior: auto;
  }
}


/* ==========================================================================
   PAGE PROJET DÉTAIL — refonte v2 (URL /projets/<slug>/v2/)
   Préfixe BEM : mo-pp-* (Project Page)
   Couleur famille injectée via data-fam sur les sections.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Couleurs famille — variable --pp-fam injectée par data-fam
   -------------------------------------------------------------------------- */

.mo-pp-hero[data-fam="serenite"],
.mo-pp-gauge[data-fam="serenite"]     { --pp-fam: var(--bleuet); }
.mo-pp-hero[data-fam="croissance"],
.mo-pp-gauge[data-fam="croissance"]   { --pp-fam: var(--celadon-dark); }
.mo-pp-hero[data-fam="convertibles"],
.mo-pp-gauge[data-fam="convertibles"] { --pp-fam: var(--lilas-dark); }
.mo-pp-hero[data-fam="equity"],
.mo-pp-gauge[data-fam="equity"]       { --pp-fam: var(--terracotta-dark); }
.mo-pp-hero[data-fam="pret"],
.mo-pp-gauge[data-fam="pret"]         { --pp-fam: var(--bronze-600); }
.mo-pp-hero[data-fam="minibons"],
.mo-pp-gauge[data-fam="minibons"]     { --pp-fam: var(--bronze-200); }
/* Fallback (data-fam absent ou vide) */
.mo-pp-hero:not([data-fam]),
.mo-pp-hero[data-fam=""],
.mo-pp-gauge:not([data-fam]),
.mo-pp-gauge[data-fam=""]             { --pp-fam: var(--bronze-200); }


/* --------------------------------------------------------------------------
   Hero ink-900 plein écran
   -------------------------------------------------------------------------- */

.mo-pp-hero {
  background: var(--ink-900);
  color: var(--cream-50);
  padding: 56px var(--page-gutter) 40px;
  position: relative;
  overflow: hidden;
}
.mo-pp-hero__inner {
  /* 1280 - gouttières : le contenu tombe sur l'axe de l'en-tête. */
  max-width: calc(var(--container-max) - 2 * var(--page-gutter));
  margin: 0 auto;
}

.mo-pp-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cream-50);
  color: var(--ink-900);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 22px;
}
.mo-pp-hero__pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pp-fam);
}

/* Pas de césure automatique sur les pages projet (règle legacy hyphens: auto
   de base.css) : « ÉcoInnova-tion » coupé dans le titre, retour de Lucile
   29/10/2026. Même règle que .mo-front. */
.mo-pp-page, .mo-pp-page *, .mo-projects, .mo-projects * { hyphens: manual; }
.mo-pp-hero__title { text-wrap: balance; }

.mo-pp-hero__title {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--cream-50);
  margin: 0 0 16px;
  max-width: 880px;
}
.mo-pp-hero__title em {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: 500;
}
.mo-pp-hero__title-sep {
  color: var(--pp-fam);
  font-style: normal;
  margin: 0 0.3em;
}

.mo-pp-hero__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-300);
  margin: 0 0 32px;
  max-width: 680px;
}

.mo-pp-hero__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-700);
  margin-top: 32px;
}
.mo-pp-hero__kpi {
  padding: 24px 24px 0;
  border-right: 1px solid var(--ink-700);
}
.mo-pp-hero__kpi:first-child { padding-left: 0; }
.mo-pp-hero__kpi:last-child  { border-right: 0; padding-right: 0; }

.mo-pp-hero__kpi-num {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream-50);
  display: block;
}
.mo-pp-hero__kpi-num sup {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 0.4em;
  font-weight: 600;
  vertical-align: 0.85em;
  letter-spacing: 0;
  margin-left: 3px;
  color: var(--pp-fam);
}
.mo-pp-hero__kpi-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
  font-weight: 600;
  display: block;
  margin-top: 8px;
}

@media (max-width: 780px) {
  .mo-pp-hero { padding: 40px var(--page-gutter) 28px; }
  .mo-pp-hero__title { font-size: 42px; }
  .mo-pp-hero__lead { font-size: 16px; }
  .mo-pp-hero__kpis { grid-template-columns: repeat(2, 1fr); }
  .mo-pp-hero__kpi { border-right: 0; padding: 20px 0 0; }
  .mo-pp-hero__kpi-num { font-size: 36px; }
}


/* --------------------------------------------------------------------------
   Gauge band — barre de collecte + chips droite
   -------------------------------------------------------------------------- */

.mo-pp-gauge {
  background: var(--cream-50);
  border-bottom: 1px solid var(--cream-200);
  padding: 0 var(--page-gutter) 28px;
}
.mo-pp-gauge__inner {
  max-width: calc(var(--container-max) - 2 * var(--page-gutter));
  margin: 20px auto 0;
  display: flex;
  align-items: flex-end;
  gap: 36px;
  flex-wrap: wrap;
}
.mo-pp-gauge__main {
  flex: 1;
  min-width: 300px;
}
.mo-pp-gauge__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.mo-pp-gauge__num {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1;
}
.mo-pp-gauge__num em {
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-500);
  font-size: 15px;
  margin-left: 6px;
}

/* % cible aligné à droite du montant collecté */
.mo-pp-gauge__pct-inline {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.mo-pp-gauge__pct-num {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.2;
}
.mo-pp-gauge__pct-label {
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

.mo-pp-gauge__bar {
  height: 6px;
  background: var(--cream-200);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.mo-pp-gauge__bar > i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--pp-fam);
  box-shadow: 0 0 12px color-mix(in srgb, var(--pp-fam) 60%, transparent);
  border-radius: 4px;
}

/* Barre empilée : segment déjà sécurisé (ink) + en cours de collecte (famille).
   Règle système : sécurisé = ink (couleur de référence plateforme, « acquis »),
   en cours = --pp-fam (couleur famille, « live »). */
/* Spécificité .mo-pp-gauge__bar > .mo-pp-…  (0,2,0) pour battre la règle
   `.mo-pp-gauge__bar > i` (0,1,1) qui imposait --pp-fam aux deux segments. */
.mo-pp-gauge__bar > .mo-pp-gauge__bar-secured,
.mo-pp-gauge__bar > .mo-pp-gauge__bar-current {
  position: absolute;
  top: 0;
  height: 100%;
}
.mo-pp-gauge__bar > .mo-pp-gauge__bar-secured {
  left: 0;
  background: var(--ink-900, #1C1F24);
  box-shadow: none;
}
.mo-pp-gauge__bar > .mo-pp-gauge__bar-current {
  background: var(--pp-fam);
  box-shadow: 0 0 12px color-mix(in srgb, var(--pp-fam) 60%, transparent);
}

/* Légende de la jauge (sécurisé / en cours de collecte) */
.mo-pp-gauge__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 10px;
  font-family: var(--font-primary, sans-serif);
  font-size: 13px;
  color: var(--ink-body, #424A55);
}
.mo-pp-gauge__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mo-pp-gauge__legend-item strong { color: var(--ink-900, #1C1F24); font-weight: 500; }
.mo-pp-gauge__legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mo-pp-gauge__legend-dot--secured { background: var(--ink-900, #1C1F24); }
.mo-pp-gauge__legend-dot--current { background: var(--pp-fam); }

.mo-pp-gauge__chips {
  display: flex;
  gap: 28px;
  align-self: center;
}
.mo-pp-gauge__chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mo-pp-gauge__chip-num {
  font-family: var(--font-exception);
  font-style: italic;
  font-size: 24px;
  color: var(--ink-900);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.mo-pp-gauge__chip-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 780px) {
  .mo-pp-gauge { padding: 18px var(--page-gutter); }
  .mo-pp-gauge__inner { gap: 20px; }
  .mo-pp-gauge__chips { gap: 18px; }
  .mo-pp-gauge__num { font-size: 22px; }
  .mo-pp-gauge__chip-num { font-size: 18px; }
}


/* --------------------------------------------------------------------------
   Main : 2 colonnes (TOC sticky 240px + Content 1fr)
   -------------------------------------------------------------------------- */

.mo-pp-main {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  padding: 64px var(--page-gutter) 96px;
  box-sizing: border-box;
}
/* Cascade --pp-fam sur tout le main et ses descendants (sections,
   pull quotes, sub-heads, etc.). Idem schema que Hero/Gauge/TOC. */
.mo-pp-main[data-fam="serenite"]     { --pp-fam: var(--bleuet); }
.mo-pp-main[data-fam="croissance"]   { --pp-fam: var(--celadon-dark); }
.mo-pp-main[data-fam="convertibles"] { --pp-fam: var(--lilas-dark); }
.mo-pp-main[data-fam="equity"]       { --pp-fam: var(--terracotta-dark); }
.mo-pp-main[data-fam="pret"]         { --pp-fam: var(--bronze-600); }
.mo-pp-main[data-fam="minibons"]     { --pp-fam: var(--bronze-200); }
.mo-pp-main:not([data-fam]),
.mo-pp-main[data-fam=""]             { --pp-fam: var(--bronze-600); }

.mo-pp-toc {
  position: sticky;
  top: 80px;
  align-self: start;
  height: fit-content;
}
.mo-pp-toc[data-fam="serenite"]     { --pp-fam: var(--bleuet); }
.mo-pp-toc[data-fam="croissance"]   { --pp-fam: var(--celadon-dark); }
.mo-pp-toc[data-fam="convertibles"] { --pp-fam: var(--lilas-dark); }
.mo-pp-toc[data-fam="equity"]       { --pp-fam: var(--terracotta-dark); }
.mo-pp-toc[data-fam="pret"]         { --pp-fam: var(--bronze-600); }
.mo-pp-toc[data-fam="minibons"]     { --pp-fam: var(--bronze-200); }
.mo-pp-toc:not([data-fam]),
.mo-pp-toc[data-fam=""]             { --pp-fam: var(--bronze-600); }

.mo-pp-toc__title {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-600);
  font-weight: 600;
  margin: 0 0 14px;
}

.mo-pp-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--cream-200);
}
.mo-pp-toc__list li { padding: 0; position: relative; }
.mo-pp-toc__list a {
  display: block;
  padding: 8px 16px;
  color: var(--ink-body);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .2s, border-color .2s;
}
.mo-pp-toc__list a:hover,
.mo-pp-toc__list a.is-active {
  color: var(--ink-900);
  border-left-color: var(--pp-fam);
}

.mo-pp-content {
  min-width: 0; /* evite que le contenu force la colonne a deborder */
}

@media (max-width: 980px) {
  .mo-pp-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px var(--page-gutter) 60px;
  }
  .mo-pp-toc { display: none; }
}


/* --------------------------------------------------------------------------
   Sections de contenu (1-8) — pattern commun reutilise
   -------------------------------------------------------------------------- */

.mo-pp-section {
  margin: 0 0 80px;
  scroll-margin-top: 80px; /* offset pour l'ancrage TOC */
}
.mo-pp-section:last-child { margin-bottom: 0; }

.mo-pp-section__eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-600);
  font-weight: 600;
  margin: 0 0 16px;
}

.mo-pp-section__title {
  font-family: var(--font-secondary);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 28px;
}
.mo-pp-section__title em {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: 500;
}

/* === Carte de visite émetteur — logo + site internet + réseaux sociaux. === */
/* Posée au-dessus du h3 « Carte d'identité » dans la S2.                     */
/* Respiration verticale uniquement, aucune barre.                            */
.mo-pp-issuer-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 36px 0 36px;
}
.mo-pp-issuer-card__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  transition: opacity .15s ease;
}
.mo-pp-issuer-card__logo:hover { opacity: .75; }
.mo-pp-issuer-card__logo img {
  display: block;
  max-height: 56px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.mo-pp-issuer-card__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.mo-pp-issuer-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-body);
  text-decoration: underline;
  text-decoration-color: var(--bronze-600);
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.mo-pp-issuer-card__link:hover {
  color: var(--ink-900);
}
.mo-pp-issuer-card__icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.mo-pp-issuer-card__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.mo-pp-issuer-card__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--pp-fam, var(--ink-500));
  transition: opacity .15s ease;
}
.mo-pp-issuer-card__social a:hover { opacity: .7; }
.mo-pp-issuer-card__social svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 640px) {
  .mo-pp-issuer-card { gap: 16px; margin: 28px 0; }
  .mo-pp-issuer-card__links { margin-left: 0; }
  .mo-pp-issuer-card__logo img { max-height: 44px; }
}


.mo-pp-section__body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-body);
}
/* Respiration sur tous les blocs WYSIWYG (p, div, ul, ol, blockquote, h*) — */
/* pas que <p>, car TinyMCE/Word/CKEditor produisent souvent du <div> ou des */
/* listes sans encadrer en <p>.                                              */
.mo-pp-section__body > * { margin: 0 0 16px; }
.mo-pp-section__body > *:last-child { margin-bottom: 0; }
/* Override base.css:120 -> p { max-width: 68ch } qui restreint la largeur  */
/* de tous les paragraphes globalement. Sur la page projet v2, les blocs   */
/* WYSIWYG/narratifs doivent occuper toute la colonne de contenu.          */
.mo-pp-section__body p { margin: 0 0 16px; max-width: none; }
.mo-pp-section__body p:last-child { margin-bottom: 0; }
.mo-pp-section__body > p,
.mo-pp-section__body > div,
.mo-pp-section__body > ul,
.mo-pp-section__body > ol,
.mo-pp-section__body > blockquote { max-width: none; }
.mo-pp-section__body ul,
.mo-pp-section__body ol { padding-left: 22px; margin: 0 0 16px; }
/* Restaure les marqueurs de liste dans le corps WYSIWYG : le reset legacy   */
/* global (archCSS3 `ul { list-style:none }` + `ul li { list-style:none }`)  */
/* masquait puces et numeros du contenu porteur. Scope limite au body prose, */
/* le reset global reste en place pour les menus/nav. Specificite suffisante */
/* (pas de !important). li en `inherit` car `ul li{list-style:none}` pose la  */
/* valeur directement sur le li et casse l'heritage depuis ul/ol.            */
.mo-pp-section__body ul { list-style: disc outside; }
.mo-pp-section__body ol { list-style: decimal outside; }
.mo-pp-section__body ul li,
.mo-pp-section__body ol li { list-style: inherit; }
.mo-pp-section__body li { margin: 0 0 6px; }
.mo-pp-section__body li:last-child { margin-bottom: 0; }
.mo-pp-section__body strong { color: var(--ink-900); }
.mo-pp-section__body em {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: 500;
  color: var(--ink-800);
}
.mo-pp-section__body a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--pp-fam, var(--bronze-600));
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   Section 1 — Pull quote (chapeau citation) + Vidéo
   -------------------------------------------------------------------------- */

/* Pull quote — iso mockup. Filet vertical couleur famille, fond cream-50,
   italique Fraunces 18px weight 500, guillemets « » uniques en debut/fin.
   On cible TOUS les enfants directs (p, div, ...) car le wysiwyg admin
   (CKEditor) peut produire des <div> au lieu de <p> selon la config. */
.mo-pp-pull {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--cream-50);
  border-left: 3px solid var(--pp-fam, var(--bronze-600));
  border-radius: 0 8px 8px 0;
}
.mo-pp-pull > * {
  font-family: var(--font-exception);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-900);
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
  display: block;
}
.mo-pp-pull > *:empty { display: none; }
.mo-pp-pull > *:first-child::before { content: "« "; color: var(--pp-fam, var(--bronze-600)); }
.mo-pp-pull > *:last-child::after  { content: " »"; color: var(--pp-fam, var(--bronze-600)); }
.mo-pp-pull cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.mo-pp-video {
  margin: 32px 0;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* ratio 16/9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ink-900);
}
.mo-pp-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 780px) {
  .mo-pp-section { margin-bottom: 60px; }
  .mo-pp-section__title { font-size: 28px; }
  .mo-pp-section__body { font-size: 15px; }
  .mo-pp-pull { padding: 20px 22px; }
  .mo-pp-pull p { font-size: 18px; }
}


/* --------------------------------------------------------------------------
   Sub-head des sous-blocs (Carte d'identite, Modele economique, EBITDA, etc.)
   Iso mockup : Stack Sans Headline 18px 600, ink-900, NO italique Fraunces
   (correctif 2026-05-30 — Lucile a remonte que Fraunces sur subhead = trop
   editorial, doit etre sobre Stack Sans). Brief de cadrage §4.
   -------------------------------------------------------------------------- */

.mo-pp-subhead {
  font-family: var(--font-secondary);
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 40px 0 18px;
}


/* --------------------------------------------------------------------------
   Section 2 — Carte dirigeant (issuer card)
   Iso mockup : carte fond #fff, border cream-200, avatar rond ink-900 avec
   initiales en Fraunces italique 36px, infos a droite (eyebrow + nom + role
   + bio). Stack vertical en mobile.
   -------------------------------------------------------------------------- */

.mo-pp-issuer {
  background: #fff;
  border: 1px solid var(--cream-200);
  border-radius: 8px;
  padding: 32px;
  margin: 32px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}
.mo-pp-issuer__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-exception);
  font-style: italic;
  font-size: 36px;
  font-weight: 500;
  color: var(--cream-50);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.mo-pp-issuer__main { min-width: 0; }
.mo-pp-issuer__head {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 6px;
}
.mo-pp-issuer__name {
  font-family: var(--font-secondary);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 4px;
  line-height: 1.2;
}
.mo-pp-issuer__role {
  font-family: var(--font-primary);
  font-size: 13.5px;
  color: var(--ink-500);
  margin: 0 0 12px;
}
.mo-pp-issuer__bio {
  font-family: var(--font-primary);
  font-size: 14.5px;
  color: var(--ink-body);
  line-height: 1.6;
  margin: 0;
}
.mo-pp-issuer__bio em {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: 500;
  color: var(--ink-800);
}

@media (max-width: 680px) {
  .mo-pp-issuer {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px;
    text-align: left;
  }
  .mo-pp-issuer__avatar {
    width: 72px;
    height: 72px;
    font-size: 28px;
  }
}


/* --------------------------------------------------------------------------
   Datasheet — label/valeur sur 2 colonnes (conditions, identité, fiscalité…)
   Iso mockup : label flex-basis 200px ink-500 régulier, valeur flex:1 ink-900
   medium, séparées par un filet cream-200 entre lignes.
   -------------------------------------------------------------------------- */

/* Pattern HORIZONTAL SOBRE COMPACT iso capture de reference Lucile finale
   (2026-05-30 nuit). Toutes les rows identiques — aucune valeur en couleur
   famille en surface, toute la base couleur famille passe par les filets
   entre rows (color-mix avec cream-200) et par les tooltip (i) reserves
   au prochain sprint Phase 2. Tailles compactes : label 13px regular,
   valeur 14px semibold. Padding 14px vertical. Grid 2 cols stricte, pas
   de full-width. */
.mo-pp-datasheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
  row-gap: 0;
  margin: 24px 0 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.mo-pp-datasheet__row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  background: transparent;
  /* Filet famille SUBTIL : 22% de la couleur famille sur cream-200.
     Visible mais discret. Repare la critique « bleu tout seul » : la
     famille passe ici, pas sur une valeur isolee. */
  border-bottom: 1px solid color-mix(in srgb, var(--pp-fam, var(--bronze-600)) 22%, var(--cream-200));
}
/* Pas de filet sous la derniere row, ni sous l'avant-derniere si seule
   en col 1 (nb impair). */
.mo-pp-datasheet__row:last-child,
.mo-pp-datasheet__row:nth-last-child(2):not(:nth-child(2n)) {
  border-bottom: 0;
}
.mo-pp-datasheet__label {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-500);
  margin: 0;
  flex-shrink: 0;
}
.mo-pp-datasheet__value {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
  text-align: right;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Convention « toute la valeur dans la meme typo » : la forme juridique,
   le pays, etc. heritent tout. */
.mo-pp-datasheet__value em {
  font: inherit;
  font-style: normal;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
/* Tooltip (i) — pattern prepare pour Phase 2 (Stade financement, Stade
   developpement, Type d'entreprise, Notation). Icone info ronde en couleur
   famille, taille 13px, alignee a droite de la valeur. */
/* Tooltip (i) — pastille ronde discrete declenchant une bulle ink-900       */
/* au hover/focus. Refonte 2026-05-31 — remplacement du title="" natif (qui  */
/* affichait un tooltip systeme blanchatre hors charte) par un composant CSS */
/* maitrise : fond ink-900, texte cream-50, fleche pointante, animation     */
/* fade-in. Tokens uniquement (var(--font-primary), var(--ink-*), etc.).    */
/* Tooltip générique — utilisable n'importe où (datasheet S2, S6, autres).  */
/* Couleur famille --pp-fam par défaut (signature myOptions visible        */
/* immédiatement, pas seulement au hover). Hover = intensification.        */
.mo-pp-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  color: var(--pp-fam, var(--ink-500));
  font-family: var(--font-primary);
  font-size: 10.5px;
  font-weight: 600;
  font-style: normal;
  border: 1px solid currentColor;
  cursor: help;
  line-height: 1;
  vertical-align: middle;
  transition: color .15s ease;
}
.mo-pp-tooltip:hover,
.mo-pp-tooltip:focus {
  color: var(--ink-900);
  outline: none;
}

/* La bulle ink-900 — positionnee absolu sous le (i), fade-in au hover/focus */
.mo-pp-tooltip__bubble {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900);
  color: var(--cream-50);
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  width: max-content;
  max-width: 280px;
  min-width: 180px;
  box-shadow: 0 8px 24px -8px rgba(28, 31, 36, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
  z-index: 30;
  white-space: normal;
}
/* Fleche en triangle pointant vers le (i) — coloree ink-900 pour suivre la bulle */
.mo-pp-tooltip__bubble::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--ink-900);
}
.mo-pp-tooltip:hover .mo-pp-tooltip__bubble,
.mo-pp-tooltip:focus .mo-pp-tooltip__bubble {
  opacity: 1;
  visibility: visible;
}

/* Variante « riche » : contenu rédigé en plusieurs paragraphes (contexte
   d'une nature de créance). Bulle plus large, paragraphes resserrés. */
/* La bulle s'ancre sur la ligne de référence (et non sur le (i)) pour ne
   jamais sortir de la colonne, y compris en mobile. */
.mo-pp-section--projet__ref:has(.mo-pp-tooltip__bubble--rich) {
  position: relative;
}
.mo-pp-tooltip:has(> .mo-pp-tooltip__bubble--rich) {
  position: static;
}
.mo-pp-tooltip__bubble.mo-pp-tooltip__bubble--rich {
  top: calc(100% + 10px);
  bottom: auto;
  left: 0;
  transform: none;
  width: min(420px, 100%);
  max-width: none;
  min-width: 0;
}
.mo-pp-tooltip__bubble.mo-pp-tooltip__bubble--rich::before {
  display: none;
}
.mo-pp-tooltip__bubble--rich p,
.mo-pp-tooltip__bubble--rich div {
  margin: 0 0 8px;
}
.mo-pp-tooltip__bubble--rich > :last-child {
  margin-bottom: 0;
}
.mo-pp-tooltip__bubble--rich strong {
  color: var(--cream-50);
  font-weight: 600;
}

/* En tres petite viewport ou pres du bord bas : bascule la bulle au-dessus */
@media (max-width: 480px) {
  .mo-pp-tooltip__bubble {
    top: auto;
    bottom: calc(100% + 10px);
    max-width: 240px;
  }
  .mo-pp-tooltip__bubble::before {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: var(--ink-900);
  }
}


/* --------------------------------------------------------------------------
   Section 2 « L'emetteur » — Equipe dirigeante (board_members)
   Cards membres, grille responsive 1-3 cols selon largeur. Avatar rond
   (photo ou initiales Fraunces italique sur ink-900), infos a droite :
   nom (Stack Sans 16/600), role (ink-500), bio courte (ink-body).
   Refonte 2026-05-31.
   -------------------------------------------------------------------------- */

/* Equipe dirigeante — cards uniformes avec photo plus grande (96px),
   layout horizontal photo gauche / texte droite, card sobre cream-50 +
   border cream-200. Refonte 2026-05-31 itération finale.
   Filtre photo : voir variable --mo-team-photo-filter ci-dessous (option
   neutre par defaut, override pour grayscale ou autre selon decision). */
.mo-pp-team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0 32px;
}
@media (max-width: 780px) {
  .mo-pp-team {
    grid-template-columns: 1fr;
  }
}

.mo-pp-team__card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 24px;
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: 8px;
}

.mo-pp-team__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mo-pp-team__avatar--initials {
  background: var(--ink-900);
  color: var(--cream-50);
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Wrapper sur les photos uniquement — applique le filtre grayscale + voile
   teinté famille (mix-blend-mode multiply). Pattern duotone "institutionnel
   moderne" Memo Bank / Hedg : photos converties en noir et blanc puis
   subtilement colorées dans la couleur famille du projet. Refonte 2026-05-31
   itération filtre photo — option C. */
.mo-pp-team__avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.mo-pp-team__avatar-wrap .mo-pp-team__avatar--photo {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(100%) contrast(1.05);
  transition: filter .25s ease;
}
.mo-pp-team__avatar-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Voile duotone figé sur le bleuet (Sérénité) pour TOUTES les familles —
     le filtre photo ne suit plus la couleur famille (decision 2026-06-12). */
  background: var(--bleuet);
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
  transition: opacity .25s ease;
}

.mo-pp-team__main {
  flex: 1;
  min-width: 0;
}

.mo-pp-team__name {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 3px;
  line-height: 1.3;
}

.mo-pp-team__role {
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-500);
  margin: 0 0 10px;
  line-height: 1.35;
}

.mo-pp-team__bio {
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-body);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 480px) {
  .mo-pp-team__card {
    gap: 16px;
    padding: 18px 20px;
  }
  .mo-pp-team__avatar,
  .mo-pp-team__avatar-wrap {
    width: 80px;
    height: 80px;
  }
  .mo-pp-team__avatar--initials {
    font-size: 26px;
  }
}

/* Lien LinkedIn — icone seule inline a cote du nom. Pattern Memo Bank /
   Linear : icone compacte cliquable, pas de libelle. Taille proportionnee
   au nom (16px ≈ 90% du font-size 16px du nom). */
.mo-pp-team__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: -3px;
  color: var(--ink-300);
  text-decoration: none;
  transition: color .15s ease;
}
.mo-pp-team__linkedin svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.mo-pp-team__linkedin:hover,
.mo-pp-team__linkedin:focus-visible {
  color: var(--pp-fam, var(--ink-900));
  outline: none;
}

@media (max-width: 480px) {
  .mo-pp-team__avatar {
    width: 48px;
    height: 48px;
  }
  .mo-pp-team__avatar--initials {
    font-size: 18px;
  }
}


/* --------------------------------------------------------------------------
   Section 2 « L'emetteur » — Equipe manageriale (company.management)
   Liste compacte 2 cols, items « Prenom Nom » + « Fonction » sur 2 lignes,
   filets cream-200 horizontaux discrets. Plus simple que les cards
   dirigeantes : ces personnes n'ont pas de photo ni de bio cote saisie
   admin, juste un nom et une fonction. Effet « organigramme leger ».
   Refonte 2026-05-31.
   -------------------------------------------------------------------------- */

/* Equipe manageriale : 3 colonnes obligatoires en desktop. Filets cream
   entre items uniquement, pas de border top/bottom externe (eviter l'effet
   « soulignement du subhead »). */
.mo-pp-management {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 0;
  margin: 16px 0 32px;
}

.mo-pp-management__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--cream-200);
}
/* Suppression du filet sous les items de la DERNIERE ligne (en grid 3 cols).
   :nth-last-child(-n+3) cible les 3 derniers ; on ne retire le border-bottom
   que s'ils sont effectivement sur la derniere ligne (pas mid-grid). */
.mo-pp-management__item:last-child,
.mo-pp-management__item:nth-last-child(2):nth-child(3n+1),
.mo-pp-management__item:nth-last-child(2):nth-child(3n+2),
.mo-pp-management__item:nth-last-child(3):nth-child(3n+1) {
  border-bottom: 0;
}

.mo-pp-management__name {
  font-family: var(--font-primary);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 2px;
  line-height: 1.3;
}

.mo-pp-management__function {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.35;
}

/* Tablette : 2 cols intermediaires, tous les items recuperent le border
   sauf le dernier. */
@media (max-width: 980px) {
  .mo-pp-management {
    grid-template-columns: repeat(2, 1fr);
  }
  .mo-pp-management__item {
    border-bottom: 1px solid var(--cream-200);
  }
  .mo-pp-management__item:last-child,
  .mo-pp-management__item:nth-last-child(2):nth-child(2n+1) {
    border-bottom: 0;
  }
}
@media (max-width: 600px) {
  .mo-pp-management {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .mo-pp-management__item {
    border-bottom: 1px solid var(--cream-200);
  }
  .mo-pp-management__item:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 780px) {
  .mo-pp-datasheet {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .mo-pp-datasheet__row:nth-last-child(2):not(:nth-child(2n)) {
    border-bottom: 1px solid color-mix(in srgb, var(--pp-fam, var(--bronze-600)) 22%, var(--cream-200));
  }
  .mo-pp-datasheet__row:last-child {
    border-bottom: 0;
  }
}


/* ============================================================================
   UX sprint 2026-05-31 — 4 piliers user-centric
   1. Sidebar CTA + Bottom bar mobile (« souscription panel » mockup)
   2. Gating engine via .mo-pp-page--anonymous (CSS-only, zero JS, SEO-safe)
   3. Overlay « Créer votre compte » sur sections 3/4
   4. Accents couleur famille strategiques (CTA, TOC active, tooltip hover)
   ============================================================================ */

/* --------------------------------------------------------------------------
   Sidebar CTA — pattern .toc__cta du mockup
   Encart ink-900 en bas de la TOC, sticky avec la TOC. Eyebrow + chiffre
   signature Fraunces italique + meta court + bouton --pp-fam.
   -------------------------------------------------------------------------- */

.mo-pp-toc__cta {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--ink-900);
  color: var(--cream-50);
  border-radius: 8px;
}
.mo-pp-toc__cta-eyebrow {
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-300);
  margin: 0 0 8px;
}
.mo-pp-toc__cta-num {
  font-family: var(--font-exception);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream-50);
  margin: 0 0 6px;
}
.mo-pp-toc__cta-num sup {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 0.4em;
  font-weight: 600;
  color: var(--pp-fam, var(--bronze-200));
  vertical-align: 0.85em;
  margin-left: 2px;
  letter-spacing: 0;
}
.mo-pp-toc__cta-meta {
  font-family: var(--font-primary);
  font-size: 11.5px;
  color: var(--cream-300);
  margin: 0 0 16px;
}
.mo-pp-toc__cta-meta em {
  font-family: var(--font-exception);
  font-style: italic;
  color: var(--pp-fam, var(--bronze-200));
  font-weight: 500;
}
/* Bouton sidebar : forme/taille primary DS (padding 13×24, font-size 14,
   weight medium, border-radius pill 999px, letter-spacing -0.005em, sentence
   case). Couleur famille (pas ink-900 du primary). Texte aligne gauche.
   Fleche -> automatique en ::after. */
.mo-pp-toc__cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--pp-fam, var(--bronze-600));
  color: var(--ink-900);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  transition: filter .15s ease;
}
.mo-pp-toc__cta-btn::after {
  content: "\2192";
  font-weight: 500;
  margin-left: 12px;
}
.mo-pp-toc__cta-btn:hover {
  filter: brightness(0.92);
  text-decoration: none;
  color: var(--ink-900);
}



/* --------------------------------------------------------------------------
   Bottom bar sticky — pendant mobile de la sidebar CTA
   Visible UNIQUEMENT en mobile (<980px). Bandeau ink-900 collé en bas de
   l'écran avec chips résumé + bouton --pp-fam.
   -------------------------------------------------------------------------- */

.mo-pp-bottombar {
  display: none;
}
@media (max-width: 980px) {
  .mo-pp-bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: var(--ink-900);
    color: var(--cream-50);
    box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, 0.35);
  }
  /* Reserve l'espace en bas du body pour que le contenu ne soit pas masque */
  .mo-pp-page {
    padding-bottom: 76px;
  }
}
.mo-pp-bottombar__chips {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--cream-300);
  flex-wrap: wrap;
}
.mo-pp-bottombar__chip {
  white-space: nowrap;
}
/* Bouton bottom bar : meme pattern que sidebar (format primary DS, couleur
   famille, sentence case, fleche). Padding legerement plus compact pour
   la bande mobile. */
.mo-pp-bottombar__btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--pp-fam, var(--bronze-600));
  color: var(--ink-900);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  transition: filter .15s ease;
}
.mo-pp-bottombar__btn::after {
  content: "\2192";
  font-weight: 500;
  margin-left: 10px;
}
.mo-pp-bottombar__btn:hover {
  filter: brightness(0.92);
  text-decoration: none;
  color: var(--ink-900);
}


/* --------------------------------------------------------------------------
   Wording dynamique des CTA — pilote par .mo-pp-page--anonymous
   Le span .mo-pp-cta-label vide est rempli en CSS via ::before. Permet de
   centraliser le wording (« Créer un compte » vs « Souscrire ») dans le CSS
   plutot que duplique a chaque CTA dans le template.
   -------------------------------------------------------------------------- */

.mo-pp-page--anonymous .mo-pp-cta-label::before {
  content: "Créer un compte";
}
.mo-pp-page:not(.mo-pp-page--anonymous) .mo-pp-cta-label::before {
  content: "Souscrire";
}


/* --------------------------------------------------------------------------
   Etat gated (anonyme) — pattern moderne BLUR + TOOLTIP
   Refonte 2026-05-31 (decision Lucile post UX-2) : on ne cache PAS la valeur
   par un cadenas (sensation d'interdiction). On la rend juste FLOUTEE +
   tooltip au hover/focus qui suggere de creer un compte pour deverrouiller.
   Pattern Notion / Linear / Stripe Dashboard : on suggere qu'il y a une
   vraie valeur derriere, ce qui rend desirable plutot que dissuasif.
   -------------------------------------------------------------------------- */

/* KPI Hero gated — relative pour ancrer la bulle absolute */
.mo-pp-hero__kpi--gated {
  position: relative;
}
.mo-pp-page--anonymous .mo-pp-hero__kpi--gated {
  cursor: help;
}
.mo-pp-page--anonymous .mo-pp-hero__kpi--gated .mo-pp-hero__kpi-num {
  filter: blur(7px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  transition: filter .2s ease;
}

/* Bulle gated — REUTILISE le pattern .mo-pp-tooltip__bubble existant
   (datasheet). Meme styling ink-900 + cream-50, on inverse juste la
   position (au-dessus au lieu d'en dessous) pour rester dans la bande
   Hero ink-900 et eviter le chevauchement Gauge. Refonte 2026-05-31
   itération 3 — Lucile : pas de nouveau composant. */
.mo-pp-gated-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900);
  color: var(--cream-50);
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  width: max-content;
  max-width: 280px;
  min-width: 180px;
  box-shadow: 0 8px 24px -8px rgba(28, 31, 36, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
  z-index: 60;
  white-space: normal;
}
/* Fleche en bas pointant vers le KPI ancre */
.mo-pp-gated-bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink-900);
}

/* Reveler la bulle au hover/focus, uniquement en mode anonyme */
.mo-pp-page--anonymous .mo-pp-hero__kpi--gated:hover .mo-pp-gated-bubble,
.mo-pp-page--anonymous .mo-pp-hero__kpi--gated:focus .mo-pp-gated-bubble,
.mo-pp-page--anonymous .mo-pp-hero__kpi--gated:focus-within .mo-pp-gated-bubble {
  opacity: 1;
  visibility: visible;
}
/* En mode connecte la bulle est neutralisee — par securite si jamais elle
   reste dans le DOM. */
.mo-pp-page:not(.mo-pp-page--anonymous) .mo-pp-gated-bubble {
  display: none;
}


/* --------------------------------------------------------------------------
   TOC — items gated (anonyme) en libellé légèrement opacisé, pas de cadenas
   -------------------------------------------------------------------------- */

.mo-pp-toc a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mo-pp-page--anonymous .mo-pp-toc a[data-locked="1"] {
  color: var(--ink-300);
  cursor: help;
}
.mo-pp-page--anonymous .mo-pp-toc a[data-locked="1"]:hover {
  color: var(--ink-500);
}


/* --------------------------------------------------------------------------
   TOC active item — accent couleur famille (border-left + bold)
   -------------------------------------------------------------------------- */

.mo-pp-toc a {
  position: relative;
  border-left: 2px solid transparent;
  margin-left: -1px;
  padding-left: 16px;
  transition: color .2s ease, border-color .2s ease;
}
.mo-pp-toc a:hover {
  color: var(--ink-900);
}
.mo-pp-toc a.is-active {
  color: var(--ink-900);
  border-left-color: var(--pp-fam, var(--bronze-600));
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   Overlay « Créer votre compte » — composant reutilisable
   A poser sur les sections Section 3 / Section 4 (et leurs equivalents) avec
   data-locked="1". En mode anonyme : le contenu interieur est progressive-
   ment flouté, et un encart .mo-pp-section__lock est rendu visible.
   -------------------------------------------------------------------------- */

.mo-pp-section[data-locked="1"] {
  position: relative;
}
.mo-pp-section__locked-content {
  display: block;
}
.mo-pp-section__lock {
  display: none;
}
.mo-pp-page--anonymous .mo-pp-section[data-locked="1"] .mo-pp-section__locked-content {
  position: relative;
  max-height: 280px;
  overflow: hidden;
}
.mo-pp-page--anonymous .mo-pp-section[data-locked="1"] .mo-pp-section__locked-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  background: linear-gradient(180deg, rgba(246, 244, 239, 0) 0%, rgba(246, 244, 239, 0.92) 50%, rgba(246, 244, 239, 1) 100%);
  pointer-events: none;
}
.mo-pp-page--anonymous .mo-pp-section[data-locked="1"] .mo-pp-section__lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: -40px auto 0;
  position: relative;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--cream-200);
  border-left: 3px solid var(--pp-fam, var(--bronze-600));
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 480px;
  box-shadow: 0 12px 32px -8px rgba(28, 31, 36, 0.12);
}
.mo-pp-section__lock-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pp-fam, var(--bronze-600)) 18%, var(--cream-50));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.mo-pp-section__lock-icon svg {
  width: 22px;
  height: 22px;
  color: var(--pp-fam, var(--bronze-600));
}
.mo-pp-section__lock-title {
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.mo-pp-section__lock-title em {
  font-family: var(--font-exception);
  font-style: italic;
}
.mo-pp-section__lock-desc {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--ink-body);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 360px;
}
.mo-pp-section__lock-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--pp-fam, var(--bronze-600));
  color: var(--ink-900);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: filter .15s ease;
}
.mo-pp-section__lock-cta:hover {
  filter: brightness(0.92);
  text-decoration: none;
  color: var(--ink-900);
}
.mo-pp-section__lock-cta::after {
  content: "→";
}
.mo-pp-section__lock-secondary {
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 14px;
}
.mo-pp-section__lock-secondary a {
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--pp-fam, var(--bronze-600));
  text-underline-offset: 3px;
}

/* Bloc unique « Réservé aux financeurs inscrits » (_project_reserved.html) :
   remplace les sections 3 à 6 pour un visiteur non connecté. Carte sans filet. */
.mo-pp-reserved {
  padding: var(--space-10);
  background: var(--ink-900);  /* même encre que l'encart du sommaire (.mo-pp-toc__cta) */
  border-radius: var(--radius-lg);
  color: var(--cream-50);
}
.mo-pp-reserved .mo-pp-section__eyebrow { color: var(--bronze-200); }
.mo-pp-reserved .mo-pp-section__title { color: var(--cream-50); }
.mo-pp-reserved__lead {
  margin: 0;
  font-size: var(--font-body);
  color: var(--ink-200);
}
.mo-pp-reserved__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  margin: var(--space-8) 0;
}
.mo-pp-reserved__item dt {
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--cream-50);
  margin: 0 0 4px;
}
.mo-pp-reserved__item dd {
  margin: 0;
  font-size: var(--font-body);
  line-height: 1.55;
  color: var(--ink-200);
}
.mo-pp-reserved__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}
/* Bouton couleur produit, comme l'encart « Créer un compte » du sommaire */
.mo-pp-reserved .mo-btn--primary,
.mo-pp-reserved .mo-btn--primary:hover {
  background: var(--pp-fam, var(--bleuet));
  border-color: var(--pp-fam, var(--bleuet));
  color: var(--ink-900);
}
.mo-pp-reserved .mo-btn--primary:hover { filter: brightness(0.92); }
.mo-pp-reserved__login {
  font-size: var(--font-body);
  color: var(--ink-200);
}
.mo-pp-reserved__login a {
  color: var(--cream-50);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .mo-pp-reserved { padding: var(--space-6) var(--space-5); }
  .mo-pp-reserved__list { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   Tooltip (i) — accent couleur famille au hover (UX-4)
   Au repos discret ink-300, au survol passe en couleur famille pour signaler
   l'interaction.
   -------------------------------------------------------------------------- */

.mo-pp-datasheet__value .mo-pp-tooltip:hover,
.mo-pp-datasheet__value .mo-pp-tooltip:focus {
  color: var(--pp-fam, var(--ink-700));
}

/* ==========================================================================
   Section 3 — « Le projet financé » — composants spécifiques 01/06/2026
   Variante Sérénité Aide publique (1/4 datasheet financeur)
   ========================================================================== */

.mo-pp-section--projet .mo-pp-section__lead {
  max-width: 62ch;
  margin: 0 0 32px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-body);
}
.mo-pp-section--projet em {
  font-family: var(--font-stat, "Fraunces", Georgia, serif);
  font-style: italic;
  font-weight: 400;
}

/* Sous-titres internes (Échéancier, Sécurisations) */
.mo-pp-section__subtitle {
  margin: 40px 0 18px;
}
.mo-pp-section__subtitle-eyebrow {
  font-family: var(--font-eyebrow, var(--font-primary));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin: 0 0 4px;
}
.mo-pp-section__subtitle-text {
  font-family: var(--font-secondary);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.005em;
}

/* ==========================================================================
   Section 3 — Refonte personas 01/06 (DAF + Mme Michou)
   Double registre : récit grand public (zones 2-3-4) + datasheet expert (zone 5)
   ========================================================================== */

/* Référence dossier — label discret en family color (saillance Sérénité = bleuet)
   Pas d'eyebrow uppercase letterspaced (confusion avec les sous-titres de section). */
.mo-pp-section--projet__ref {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--font-primary, sans-serif);
  flex-wrap: wrap;
}
.mo-pp-section--projet__ref-eyebrow {
  font-family: var(--font-primary, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-fam, var(--bleuet, #6A9EFF));
}
.mo-pp-section--projet__ref-eyebrow::after {
  content: "·";
  margin-left: 12px;
  color: var(--ink-300, #9AA0AA);
  font-weight: 400;
}
.mo-pp-section--projet__ref-value {
  font-family: var(--font-primary, sans-serif);
  font-size: 14px;
  color: var(--ink-900, #1C1F24);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Chapô éditorial — Stack Sans regular, full width, lisible */
.mo-pp-section--projet__chapo {
  font-family: var(--font-primary, sans-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body, #424A55);
  margin: 0 0 40px;
  max-width: none;
  letter-spacing: 0;
}

/* Empêche la coupure inélégante des noms propres dans le H2 */
.mo-pp-section--projet .mo-pp-section__title {
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* Force Stack Sans sur tous les sous-blocs de la section pour éviter les
   fallbacks Georgia/Times sur certains user-agents. Le H2 garde sa règle
   héritée (Fraunces via .mo-pp-section__title défini ailleurs). */
.mo-pp-section--projet p:not(.mo-pp-section__title),
.mo-pp-section--projet span,
.mo-pp-section--projet li,
.mo-pp-section--projet dt,
.mo-pp-section--projet dd,
.mo-pp-section--projet h3,
.mo-pp-section--projet h4,
.mo-pp-section--projet ol,
.mo-pp-section--projet ul,
.mo-pp-section--projet div {
  font-family: var(--font-primary, sans-serif);
}

/* ==========================================================================
   Sous-jacent crédit d'impôt — créance (registre La Place, styles natifs)
   Montant · frise datée « Où en est le crédit d'impôt » · vérification en
   lignes (pas de table) · note rôle myOptions. Tokens de la page.
   ========================================================================== */
.mo-pp-creance__amount { margin: 4px 0 10px; }
/* span. pour gagner sur .mo-pp-section--projet span (Fraunces sur le montant) */
span.mo-pp-creance__value {
  display: block;
  font-family: var(--font-secondary, "Inter", sans-serif);
  font-style: normal;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-900, #1C1F24);
  font-variant-numeric: tabular-nums lining-nums;
}
.mo-pp-creance__amount-note {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-body, #424A55);
  max-width: none;
}

.mo-pp-creance__frise {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.mo-pp-creance__step {
  position: relative;
  text-align: center;
  padding: 24px 6px 0;
}
.mo-pp-creance__step::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--cream-300, #E5DECF);
  z-index: 0;
}
.mo-pp-creance__step:first-child::before { display: none; }
.mo-pp-creance__step.is-done::before,
.mo-pp-creance__step.is-now::before { background: var(--bronze-300, #B7A98C); }
.mo-pp-creance__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream-300, #E5DECF);
  z-index: 1;
}
.mo-pp-creance__step.is-done .mo-pp-creance__dot { background: var(--bronze-300, #B7A98C); }
.mo-pp-creance__step.is-now .mo-pp-creance__dot {
  background: var(--pp-fam, var(--bleuet, #4C6FB3));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pp-fam, var(--bleuet, #4C6FB3)) 18%, transparent);
}
.mo-pp-creance__step.is-next .mo-pp-creance__dot {
  background: var(--cream-50, #FAF7F2);
  border: 2px solid var(--ink-300, #C9CCD1);
}
.mo-pp-creance__step-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-700, #424A55);
}
.mo-pp-creance__step.is-now .mo-pp-creance__step-label { color: var(--ink-900, #1C1F24); }
.mo-pp-creance__step.is-next .mo-pp-creance__step-label { color: var(--ink-500, #6B727C); }
.mo-pp-creance__step-date {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-500, #6B727C);
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}
.mo-pp-creance__info {
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-500, #6B727C);
  margin: 0 0 8px;
}

.mo-pp-creance__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 6px 0 24px;
}
.mo-pp-creance__fact {
  background: var(--cream-100, #F4F0E8);
  border-radius: 14px;
  padding: 20px 22px;
}
.mo-pp-creance__fact dt {
  margin: 0 0 5px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-500, #6B727C);
}
.mo-pp-creance__fact dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-900, #1C1F24);
}
@media (max-width: 620px) {
  .mo-pp-creance__facts { grid-template-columns: 1fr; gap: 16px; }
}

.mo-pp-creance__role {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body, #424A55);
  margin: 0;
  max-width: none;
}
.mo-pp-creance__info { max-width: none; }

@media (max-width: 620px) {
  span.mo-pp-creance__value { font-size: 28px; }
  .mo-pp-creance__step { padding-top: 22px; }
  .mo-pp-creance__step-label { font-size: 11px; }
  .mo-pp-creance__step-date { font-size: 10.5px; }
}

/* === ZONE 2 — Récit « Comment ça marche » 3 cartes === */
.mo-pp-howto {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 880px) {
  .mo-pp-howto { grid-template-columns: 1fr; }
}
.mo-pp-howto__step {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--pp-fam, var(--bleuet, #6A9EFF));
  border-radius: 0;
  padding: 16px 0 0;
  position: relative;
  transition: none;
}
.mo-pp-howto__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pp-fam, var(--bleuet, #6A9EFF));
  color: #FFFFFF;
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 12px;
}
.mo-pp-howto__title {
  font-family: var(--font-primary, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900, #1C1F24);
  margin: 0 0 6px;
  line-height: 1.4;
  letter-spacing: 0;
}
.mo-pp-howto__desc {
  font-family: var(--font-primary, sans-serif);
  font-size: 13.5px;
  color: var(--ink-body, #424A55);
  margin: 0;
  line-height: 1.55;
  background: transparent;
}

/* === ZONE 3 — Jauge stack aide / autofinancement === */
.mo-pp-aide-gauge {
  margin: 0 0 40px;
  padding: 0;
}
.mo-pp-aide-gauge__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 14px;
  gap: 16px;
  font-family: var(--font-primary, sans-serif);
}
.mo-pp-aide-gauge__label {
  font-family: var(--font-primary, sans-serif);
  font-size: 14px;
  color: var(--ink-700, #424A55);
  font-weight: 500;
}
.mo-pp-aide-gauge__total {
  font-family: var(--font-primary, sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900, #1C1F24);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.mo-pp-aide-gauge__bar {
  position: relative;
  height: 14px;
  background: var(--ink-100, #D4D7DC);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 16px;
}
.mo-pp-aide-gauge__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--pp-fam, var(--bleuet, #6A9EFF));
  transition: width .4s ease;
  min-width: 2px;
}
.mo-pp-aide-gauge__legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .mo-pp-aide-gauge__legend { grid-template-columns: 1fr; }
}
.mo-pp-aide-gauge__legend-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mo-pp-aide-gauge__dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
}
.mo-pp-aide-gauge__dot--aide { background: var(--pp-fam, var(--bleuet, #6A9EFF)); }
.mo-pp-aide-gauge__dot--auto { background: var(--ink-100, #D4D7DC); }
.mo-pp-aide-gauge__legend-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-primary, sans-serif);
}
.mo-pp-aide-gauge__legend-text strong {
  font-family: var(--font-primary, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900, #1C1F24);
}
.mo-pp-aide-gauge__legend-meta {
  font-family: var(--font-primary, sans-serif);
  font-size: 13px;
  color: var(--ink-500, #6E7682);
  font-variant-numeric: tabular-nums;
}

/* === S4 — Bento 2 colonnes (Équipe managériale + Graph effectifs) ===== */
/* Ratio 50/50, chaque colonne a son propre encart cream-100 (pas de fond  */
/* commun). :has(.col + .col) garantit le ratio uniquement si les 2       */
/* colonnes sont présentes ; sinon la colonne unique prend toute la         */
/* largeur (mais garde son encart).                                        */
.mo-pp-twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 16px 0 32px;
}
.mo-pp-twocol:has(.mo-pp-twocol__col + .mo-pp-twocol__col) {
  grid-template-columns: 1fr 1fr;
}
/* Chaque colonne porte son propre encart cream-100. */
.mo-pp-twocol__col {
  min-width: 0;
  background: var(--cream-100, #F6F4EF);
  border-radius: 12px;
  padding: 28px;
}
.mo-pp-twocol__col .mo-pp-subhead { margin-top: 0; }
.mo-pp-twocol__col .mo-pp-fdata-chart { margin-top: 0; padding: 0; background: transparent; }
/* Variante --rh : Équipe managériale en 1 colonne (1 nom par ligne) avec  */
/* puce ronde colorée famille --pp-fam à gauche de chaque nom.             */
.mo-pp-twocol--rh .mo-pp-management {
  grid-template-columns: 1fr;
  margin: 0;
}
.mo-pp-twocol--rh .mo-pp-management__item {
  position: relative;
  padding-left: 18px;
}
.mo-pp-twocol--rh .mo-pp-management__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pp-fam, var(--bronze-600));
}
@media (max-width: 980px) {
  .mo-pp-twocol,
  .mo-pp-twocol:has(.mo-pp-twocol__col + .mo-pp-twocol__col) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mo-pp-twocol__col { padding: 24px 20px; }
}

/* === S6 « Conditions et fiscalité » — un seul encart sobre ============ */
/* Cream-100, datasheet 2 cols label/valeur, font-primary partout.       */
/* Inspiration directe : legacy myOptions (datasheet « Informations      */
/* spécifiques à l'opération »). Pas de Fraunces, pas de fond couleur    */
/* famille, pas de hiérarchie en sous-sections — sobriété banque privée. */
.mo-pp-s6 {
  background: var(--cream-100, #F6F4EF);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 24px 0 0;
  font-family: var(--font-primary);
  color: var(--ink-body);
}
.mo-pp-s6__list {
  margin: 0;
  padding: 0;
}
/* Sous-titre de groupe dans la datasheet (eyebrow bronze, norme charte v4). */
.mo-pp-s6__group {
  font-family: var(--font-eyebrow, var(--font-primary));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin: 22px 0 4px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--cream-200);
}
.mo-pp-s6__group:first-child {
  margin-top: 0;
}
.mo-pp-s6__row {
  display: flex;
  /* center plutot que baseline : la baseline du tooltip inline-flex ne   */
  /* s'aligne pas proprement avec le texte du dt -> on cale tout sur le   */
  /* milieu de la ligne, axe horizontal inchange (space-between).         */
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cream-200);
}
.mo-pp-s6__row:last-child {
  border-bottom: 0;
}
.mo-pp-s6__row dt {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.4;
}
.mo-pp-s6__row dd {
  /* inline-flex aligne le tooltip (i) et le texte de la valeur sur la    */
  /* meme mediane horizontale, sans toucher a l'alignement droit global  */
  /* (space-between sur le row pousse toujours le dd au bord droit).     */
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.4;
  text-align: right;
}
.mo-pp-s6__detail {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--cream-200);
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-body);
}
.mo-pp-s6__detail > * { margin: 0 0 10px; }
.mo-pp-s6__detail > *:last-child { margin-bottom: 0; }

/* === Bloc « Sur autorisation » — documents restreints (2026-06-12) ======== */
.mo-pp-restricted {
  margin: 16px 0 0;
}
/* Documents sur autorisation (14/10/2026) : mêmes cartes que les autres pièces ;
   l'action (bouton, pastille ou lien) suit l'état de la demande. */
.mo-pp-restricted__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mo-pp-restricted__card .mo-pp-doc-card { margin: 0; }
.mo-pp-restricted__form { margin: 0; }
.mo-pp-restricted__link {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-100);
  white-space: nowrap;
}
.mo-pp-restricted__link:hover { text-decoration-color: var(--ink-900); }
.mo-pp-restricted__kyc {
  font-family: var(--font-primary);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 8px 0 0 4px;
}
.mo-pp-restricted__kyc a {
  color: var(--ink-900);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mo-pp-restricted__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.mo-pp-restricted__badge--ok   { background: var(--celadon-50); color: var(--celadon-700); }
.mo-pp-restricted__badge--wait { background: var(--bronze-100); color: var(--bronze-700); }
.mo-pp-restricted__badge--no   { background: var(--terracotta-50); color: var(--terracotta-600); }
@media (max-width: 540px) {
  .mo-pp-s6 { padding: 22px 22px; }
  .mo-pp-s6__row { padding: 9px 0; }
}

/* === Modèle économique : pills cochées (axe 1 + axe 2) =============== */
/* Chaque pill a son propre fond cream-100. Pas d'encart global derrière.  */
/* Distinction axe 1 / axe 2 par couleur des dots (--pp-fam pour          */
/* économique, bronze-600 pour revenus). Margin-left pivot avant axe 2.   */
.mo-pp-bizmodel {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mo-pp-bizmodel__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  background: var(--cream-100, #F6F4EF);
  border-radius: 999px;
  white-space: nowrap;
}
.mo-pp-bizmodel__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pp-fam, var(--bronze-600));
  flex: 0 0 7px;
}
/* Axe 2 (revenus) : dot bronze-600 au lieu de --pp-fam — signature        */
/* éditoriale myOptions, distincte de l'axe 1.                            */
.mo-pp-bizmodel__pill--rev .mo-pp-bizmodel__dot {
  background: var(--bronze-600, #B08F4C);
}
/* Premier pill de l'axe 2 : margin-left supplémentaire pour signaler le  */
/* pivot axe 1 → axe 2 sans avoir besoin d'un séparateur explicite.       */
.mo-pp-bizmodel__pill--rev-first {
  margin-left: 18px;
}
@media (max-width: 540px) {
  .mo-pp-bizmodel__pill--rev-first { margin-left: 0; }
}

/* === Analyse financière intégrée dans l'encart graph financier ======== */
/* Le commentaire éditorial vit DANS le même bloc cream-100 que le chart, */
/* séparé par un filet fin pour signaler la lecture distincte du graph.   */
.mo-pp-fdata-chart__analysis {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--cream-200);
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-body);
}
.mo-pp-fdata-chart__analysis-eyebrow {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin: 0 0 14px;
}
/* Respiration sur tous les enfants directs du WYSIWYG (p, div, ul, etc.). */
/* Pareil que .mo-pp-section__body — Trix/CKEditor peuvent produire autre  */
/* chose que des <p>.                                                       */
.mo-pp-fdata-chart__analysis > * { margin: 0 0 14px; }
.mo-pp-fdata-chart__analysis > *:last-child { margin-bottom: 0; }
.mo-pp-fdata-chart__analysis p { margin: 0 0 14px; }
.mo-pp-fdata-chart__analysis p:last-child { margin-bottom: 0; }
.mo-pp-fdata-chart__analysis strong { color: var(--ink-900); }
/* L'eyebrow reste à 14px margin-bottom — override du > * = 14px qui le      */
/* couvre déjà, mais on garde explicite pour lisibilité.                    */
.mo-pp-fdata-chart__analysis-eyebrow { margin-bottom: 14px; }

/* === S4 — Line chart ApexCharts (encart cream-100, radius 12px) ====== */
.mo-pp-fdata-chart {
  background: var(--cream-100, #F6F4EF);
  border-radius: 12px;
  padding: 24px 20px 16px;
  margin: 40px 0 0;
}
/* Override styles ApexCharts. La lib rend tout en SVG <text> ou HTML     */
/* avec styles inline → catch-all !important sur TOUT élément texte du   */
/* wrapper pour forcer Stack Sans.                                        */
.mo-pp-fdata-chart text,
.mo-pp-fdata-chart .apexcharts-text,
.mo-pp-fdata-chart .apexcharts-title-text,
.mo-pp-fdata-chart .apexcharts-legend-text,
.mo-pp-fdata-chart .apexcharts-xaxis-label,
.mo-pp-fdata-chart .apexcharts-yaxis-label,
.mo-pp-fdata-chart .apexcharts-tooltip,
.mo-pp-fdata-chart .apexcharts-tooltip-title,
.mo-pp-fdata-chart .apexcharts-tooltip-text-y-label,
.mo-pp-fdata-chart .apexcharts-tooltip-text-y-value {
  font-family: var(--font-primary) !important;
}
/* Labels axes : 12px / graisse 400 / fill ink-500 (SVG = fill, pas color) */
.mo-pp-fdata-chart .apexcharts-xaxis-texts-g text,
.mo-pp-fdata-chart .apexcharts-yaxis-texts-g text,
.mo-pp-fdata-chart .apexcharts-xaxis-label,
.mo-pp-fdata-chart .apexcharts-yaxis-label {
  font-size: 12px !important;
  font-weight: 400 !important;
  fill: var(--ink-500, #6E7682) !important;
}
/* Légende : 12px / 400 / ink-500 (HTML, donc color) */
.mo-pp-fdata-chart .apexcharts-legend-text {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ink-500, #6E7682) !important;
}
/* Titre du graph aligné sur .mo-pp-subhead (h3 « Actionnariat / Équipe   */
/* managériale ») : font-secondary 18px / 600 / ink-900 pour homogénéité. */
.mo-pp-fdata-chart .apexcharts-title-text {
  font-family: var(--font-secondary) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  fill: var(--ink-900, #1C1F24) !important;
  letter-spacing: -0.01em;
}
/* Tooltip custom ink-900 fond foncé + cream-50 texte */
.mo-pp-fdata-chart .apexcharts-tooltip {
  background: var(--ink-900, #1C1F24) !important;
  color: var(--cream-50, #FAF8F1) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px -8px rgba(28, 31, 36, 0.3) !important;
}
.mo-pp-fdata-chart .apexcharts-tooltip-title {
  background: var(--ink-900, #1C1F24) !important;
  border-bottom: 1px solid rgba(250, 248, 241, 0.15) !important;
  font-weight: 600 !important;
}

/* Overrides identiques pour les donuts ApexCharts (actionnariat S4 +     */
/* projet global S3). On duplique la cascade hors .mo-pp-fdata-chart.     */
.mo-pp-actionnariat text,
.mo-pp-actionnariat .apexcharts-text,
.mo-pp-actionnariat .apexcharts-tooltip,
.mo-pp-donut--projet text,
.mo-pp-donut--projet .apexcharts-text,
.mo-pp-donut--projet .apexcharts-tooltip {
  font-family: var(--font-primary) !important;
}
.mo-pp-actionnariat .apexcharts-tooltip,
.mo-pp-donut--projet .apexcharts-tooltip {
  background: var(--ink-900, #1C1F24) !important;
  color: var(--cream-50, #FAF8F1) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px -8px rgba(28, 31, 36, 0.3) !important;
}
.mo-pp-actionnariat .apexcharts-tooltip-title,
.mo-pp-donut--projet .apexcharts-tooltip-title {
  background: var(--ink-900, #1C1F24) !important;
  border-bottom: 1px solid rgba(250, 248, 241, 0.15) !important;
  font-weight: 600 !important;
}

/* === Encart Dates clés — fond cream-100, padding vertical only ======= */
/* Titre h3 reste hors de l'encart, dans le flux S2.                    */
.mo-pp-keydates-card {
  background: var(--cream-100, #F6F4EF);
  border-radius: 12px;
  padding: 20px 0;
  margin: 16px 0 32px;
}
.mo-pp-keydates-card .mo-pp-timeline.mo-pp-timeline--keydates {
  margin: 0;
}

/* === Variante Dates clés (S2) — frise horizontale équirépartie ======= */
/* Hérite la grid auto-fit du parent .mo-pp-timeline. Différences :       */
/*  - ligne ::before au CENTRE vertical (top: 50%) au lieu du haut        */
/*  - alternance odd/even : content au-dessus pour odd, en dessous pour    */
/*    even (grid 3-rows à l'intérieur de chaque item)                     */
/*  - marker rond PLEIN couleur famille (pas outline comme la S3)         */
/*  - date GRAS au-dessus, event clair en dessous                         */
.mo-pp-timeline.mo-pp-timeline--keydates {
  padding: 0;
  margin: 24px 0 32px;
  height: 200px;
}
.mo-pp-timeline.mo-pp-timeline--keydates::before {
  top: 50%;
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--cream-200);
  z-index: 0;
}
.mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__item {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  text-align: center;
  padding: 0 8px;
  z-index: 1;
}
/* Marker — rond PLEIN couleur famille, centré sur la ligne, halo cream-50 */
/* pour découper la ligne dessous.                                        */
.mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__marker {
  grid-row: 2;
  margin: 0;
  width: 14px;
  height: 14px;
  background: var(--pp-fam, var(--bleuet, #6A9EFF));
  border: 3px solid var(--cream-50, #FAF7F2);
  box-sizing: content-box;
  z-index: 2;
  position: relative;
}
.mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 160px;
}
/* Alternance : odd au-dessus, even en dessous de la ligne. */
.mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__item:nth-child(odd) .mo-pp-timeline__content {
  grid-row: 1;
  align-self: end;
  padding-bottom: 16px;
}
.mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__item:nth-child(even) .mo-pp-timeline__content {
  grid-row: 3;
  align-self: start;
  padding-top: 16px;
}
/* Override styles parents __date / __label : date GRAS au-dessus, event  */
/* plus clair / fin en dessous.                                           */
.mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__date {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__label {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.35;
}
/* Repli vertical sur petits écrans : alternance impossible, on retombe   */
/* sur frise verticale gauche cream-200.                                  */
@media (max-width: 760px) {
  .mo-pp-timeline.mo-pp-timeline--keydates {
    display: block;
    height: auto;
    grid-template-columns: 1fr;
    padding: 0 0 0 22px;
    border-left: 1px solid var(--cream-200);
  }
  .mo-pp-timeline.mo-pp-timeline--keydates::before { display: none; }
  .mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__item {
    display: block;
    text-align: left;
    padding: 10px 0;
    position: relative;
  }
  .mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__marker {
    position: absolute;
    left: -28px;
    top: 14px;
    width: 8px;
    height: 8px;
    border: 0;
  }
  .mo-pp-timeline.mo-pp-timeline--keydates .mo-pp-timeline__content {
    align-items: flex-start;
    padding: 0 !important;
    max-width: none;
  }
}

/* === Éléments d'analyse — Marché / Concurrence / Réglementation ====== */
/* Bloc avec head (titre + stepper 3 segments) + body WYSIWYG narratif.   */
.mo-pp-analysis {
  margin: 24px 0 0;
}
.mo-pp-analysis + .mo-pp-analysis {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cream-200);
}
.mo-pp-analysis__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0 0 14px;
}
.mo-pp-analysis__title {
  font-family: var(--font-primary);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
}

/* Stepper 3 segments — niveau actif et tous les précédents en --pp-fam, */
/* les suivants en cream-200. data-level="1|2|3" pilote le remplissage.   */
.mo-pp-stepper3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mo-pp-stepper3__seg {
  display: inline-block;
  width: 28px;
  height: 6px;
  border-radius: 3px;
  background: var(--cream-200);
  transition: background 0.18s ease;
}
.mo-pp-stepper3[data-level="1"] .mo-pp-stepper3__seg[data-i="1"],
.mo-pp-stepper3[data-level="2"] .mo-pp-stepper3__seg[data-i="1"],
.mo-pp-stepper3[data-level="2"] .mo-pp-stepper3__seg[data-i="2"],
.mo-pp-stepper3[data-level="3"] .mo-pp-stepper3__seg[data-i="1"],
.mo-pp-stepper3[data-level="3"] .mo-pp-stepper3__seg[data-i="2"],
.mo-pp-stepper3[data-level="3"] .mo-pp-stepper3__seg[data-i="3"] {
  background: var(--pp-fam, var(--bronze-600));
}
.mo-pp-stepper3__label {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: 0.01em;
  margin-left: 4px;
}
@media (max-width: 640px) {
  .mo-pp-analysis__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mo-pp-stepper3__seg { width: 24px; }
}

/* === ZONE 4 — Donut Chart.js + légende === */
/* === Encart Actionnariat — fond contrasté pour casser la linéarité S2 === */
.mo-pp-actionnariat {
  background: var(--cream-100, #F6F4EF);
  border-radius: 12px;
  padding: 32px 32px 28px;
  margin: 32px 0 0;
}
.mo-pp-actionnariat .mo-pp-subhead { margin-top: 0; }
.mo-pp-actionnariat .mo-pp-donut { margin: 16px 0 0; }
@media (max-width: 760px) {
  .mo-pp-actionnariat { padding: 24px 20px 22px; }
}

.mo-pp-donut {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 40px;
  align-items: center;
  margin: 0 0 40px;
}
@media (max-width: 760px) {
  .mo-pp-donut { grid-template-columns: 1fr; gap: 24px; }
}
.mo-pp-donut__canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.mo-pp-donut__canvas-wrap canvas {
  width: 100% !important;
  height: auto !important;
}
.mo-pp-donut__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mo-pp-donut__legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--cream-200, #E7E8EA);
}
.mo-pp-donut__legend-item:last-child {
  border-bottom: 0;
}
.mo-pp-donut__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  align-self: center;
}
.mo-pp-donut__legend-label {
  font-family: var(--font-primary, sans-serif);
  font-size: 13.5px;
  color: var(--ink-700, #424A55);
}
.mo-pp-donut__legend-value {
  font-family: var(--font-primary, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900, #1C1F24);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* === ZONE 5 — Datasheet expert (en details/summary) === */
.mo-pp-stats-details {
  margin: 0 0 40px;
  padding-top: 0;
  border-top: 0;
}
.mo-pp-stats-details__summary {
  font-family: var(--font-primary, sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-900, #1C1F24);
  cursor: pointer;
  padding: 10px 18px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  border: 1px solid var(--ink-300, #9AA0AA);
  border-radius: 22px;
  background: #FFFFFF;
  transition: border-color .15s ease, color .15s ease;
}
.mo-pp-stats-details__summary::-webkit-details-marker { display: none; }
.mo-pp-stats-details__summary::before {
  content: "▸";
  display: inline-block;
  color: var(--pp-fam, var(--bleuet, #6A9EFF));
  transition: transform .15s ease;
  font-size: 11px;
}
.mo-pp-stats-details[open] .mo-pp-stats-details__summary::before {
  transform: rotate(90deg);
}
.mo-pp-stats-details__summary:hover {
  border-color: var(--ink-900, #1C1F24);
  color: var(--ink-900, #1C1F24);
}
.mo-pp-stats-details .mo-pp-stats-table { margin-top: 16px; }
.mo-pp-stats-table {
  margin: 0;
}
.mo-pp-stats-table__title {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin: 24px 0 12px;
}
.mo-pp-stats-table__title:first-child { margin-top: 0; }
.mo-pp-stats-table__dl {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mo-pp-stats-table__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 32px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pp-fam, var(--bronze-600)) 12%, var(--cream-200));
}
.mo-pp-stats-table__row:last-child { border-bottom: 0; }
.mo-pp-stats-table__row dt {
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-500);
  margin: 0;
}
.mo-pp-stats-table__row dd {
  font-family: var(--font-primary);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}
.mo-pp-stats-table__hint {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-500);
  white-space: nowrap;
}
.mo-pp-stats-table__row--signature dd {
  font-family: var(--font-stat, "Fraunces", Georgia, serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* === Composants legacy conservés (key-figure, ancienne datasheet projet) === */
/* Chiffre central — KPI volume financé (refonte 01/06 : layout sobre,
   eyebrow + value + caption alignés à gauche, pas de barre verticale) */
.mo-pp-key-figure {
  margin: 0 0 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cream-200, #E7E8EA);
  border-bottom: 1px solid var(--cream-200, #E7E8EA);
  padding: 28px 0;
}
.mo-pp-key-figure__eyebrow {
  font-family: var(--font-primary);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin: 0 0 10px;
}
.mo-pp-key-figure__value {
  font-family: var(--font-stat, "Fraunces", Georgia, serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-900);
  letter-spacing: -0.018em;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.mo-pp-key-figure__caption {
  font-family: var(--font-primary);
  font-size: 13.5px;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.5;
}

/* Datasheet variante PROJET — label fixe gauche, value gauche fluide
   (override du pattern legacy space-between qui crée des gros gaps). */
.mo-pp-datasheet--projet .mo-pp-datasheet__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  justify-content: flex-start;
  padding: 14px 0;
  align-items: baseline;
}
.mo-pp-datasheet--projet .mo-pp-datasheet__label {
  font-size: 13px;
  color: var(--ink-500);
  text-align: left;
  font-weight: 400;
}
.mo-pp-datasheet--projet .mo-pp-datasheet__value {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-900);
  text-align: left;
  display: block;
  line-height: 1.5;
}
.mo-pp-datasheet--projet .mo-pp-datasheet__value strong {
  font-weight: 600;
}
.mo-pp-datasheet--projet .mo-pp-datasheet__sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-500);
  margin-left: 6px;
}
/* Row highlight tranche financée — fond cream subtil, pas de border-left
   (cohérent avec le retrait de la barre du key-figure). */
.mo-pp-datasheet--projet .mo-pp-datasheet__row--highlight {
  background: var(--cream-50, #FAF7F2);
  padding: 14px 16px;
  margin: 0 -16px;
  border-radius: 3px;
  border-bottom: 0;
}
.mo-pp-datasheet--projet .mo-pp-datasheet__row--highlight + .mo-pp-datasheet__row {
  border-top: 1px solid color-mix(in srgb, var(--pp-fam, var(--bronze-600)) 22%, var(--cream-200));
}
@media (max-width: 720px) {
  .mo-pp-datasheet--projet .mo-pp-datasheet__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Timeline — frise horizontale des tranches */
.mo-pp-timeline {
  list-style: none;
  margin: 0 0 32px;
  padding: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  position: relative;
  font-family: var(--font-primary, sans-serif);
}
.mo-pp-timeline::before {
  content: "";
  position: absolute;
  top: 26px; /* 18px padding top + 8px (centre du marker 16px) */
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--ink-100, #D4D7DC);
  z-index: 0;
}
.mo-pp-timeline__item {
  position: relative;
  padding: 0 8px;
  text-align: center;
  z-index: 1;
}
.mo-pp-timeline__marker {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FAF7F2;
  border: 2px solid var(--ink-100, #D4D7DC);
  margin: 0 auto 14px;
  transition: all .15s ease;
  box-sizing: border-box;
}
.mo-pp-timeline__item.is-done .mo-pp-timeline__marker {
  background: var(--pp-fam, var(--bleuet, #6A9EFF));
  border-color: var(--pp-fam, var(--bleuet, #6A9EFF));
}
.mo-pp-timeline__item.is-current .mo-pp-timeline__marker {
  background: var(--ink-900);
  border-color: var(--ink-900);
  box-shadow: 0 0 0 4px rgba(28, 31, 36, 0.10);
  width: 18px;
  height: 18px;
  margin-top: -1px;
}
.mo-pp-timeline__label {
  font-family: var(--font-primary, sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 2px;
  line-height: 1.3;
}
.mo-pp-timeline__tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  background: var(--ink-900);
  color: var(--cream-50);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  vertical-align: 2px;
}
.mo-pp-timeline__date {
  font-family: var(--font-primary, sans-serif);
  font-size: 11.5px;
  color: var(--ink-500);
  margin: 0 0 2px;
  line-height: 1.4;
}
.mo-pp-timeline__amount {
  font-family: var(--font-primary, sans-serif);
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-body);
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Callout — encadré "Conditions suspensives" */
.mo-pp-callout {
  margin: 24px 0 32px;
  padding: 18px 22px;
  background: var(--cream-50, #FAF7F2);
  border-left: 3px solid var(--bronze-600);
  border-radius: 2px;
}
.mo-pp-callout__eyebrow {
  font-family: var(--font-primary);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin: 0 0 8px;
}
.mo-pp-callout__body {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--ink-body);
  margin: 0;
  line-height: 1.6;
}

/* Sécurisations — grid 2 cols de cards ✓/⨯ */
.mo-pp-guard {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .mo-pp-guard { grid-template-columns: 1fr; }
}
.mo-pp-guard__item {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: #FFFFFF;
  border: 1px solid var(--cream-200, #E7E8EA);
  border-radius: 4px;
  align-items: flex-start;
}
.mo-pp-guard__item.is-on {
  border-color: var(--celadon-600, #5C8A75);
  background: var(--cream-50, #FAF7F2);
}
.mo-pp-guard__mark {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  background: var(--cream-200, #E7E8EA);
  color: var(--ink-500);
}
.mo-pp-guard__item.is-on .mo-pp-guard__mark {
  background: var(--celadon-600, #5C8A75);
  color: #FFFFFF;
}
.mo-pp-guard__title {
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 4px;
  line-height: 1.4;
}
.mo-pp-guard__desc {
  font-family: var(--font-primary);
  font-size: 12.5px;
  color: var(--ink-body);
  margin: 0;
  line-height: 1.5;
}

/* Fiche projet (13/10/2026) : police de la charte sur toute la page. Le body
   hérite sinon de Bootstrap (police système, chargé après base.css) : les
   éléments sans police propre (sur-titres, libellés KPI, liens) en pâtissaient. */
.mo-pp-page {
  font-family: var(--font-primary);
}

/* ========================================================================
   SECTION DOCUMENTS — Pattern unifie .mo-pp-doc-card
   Structure unique pour tous les documents (FICI, liasse, pieces libres).
   Differenciation par modifier :
     - .mo-pp-doc-card--regulatory : fond cream-100, pleine largeur, signal
       reglementaire fort (FICI).
     - .mo-pp-doc-card (defaut) : bordure cream-200, mi-largeur via grid.
   Grid 2 colonnes .mo-pp-docs-grid pour les cartes standards.
   ========================================================================*/

/* Grid 2 colonnes pour les documents standards (pas la FICI). Repli       */
/* vertical sous 760px.                                                    */
.mo-pp-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.mo-pp-docs-grid .mo-pp-doc-card { margin: 0; }
@media (max-width: 760px) {
  .mo-pp-docs-grid { grid-template-columns: 1fr; }
}

.mo-pp-doc-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: transparent;
  border: 1px solid var(--cream-200, #E7E8EA);
  border-radius: 8px;
  margin: 0 0 12px;
  transition: border-color .15s ease, background .15s ease;
}
.mo-pp-doc-card:hover {
  border-color: var(--ink-300, #9CA3AF);
  background: var(--cream-50, #FAF7F2);
}
.mo-pp-doc-card__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icône encadrée à la couleur famille sur fond clair, uniforme sur toutes
     les cartes documents (publiques, financières, restreintes). 2026-06-12. */
  background: var(--cream-50, #FAF7F2);
  border-radius: 6px;
  color: var(--pp-fam, var(--ink-700));
}
.mo-pp-doc-card__icon svg { width: 18px; height: 18px; }

.mo-pp-doc-card__main { min-width: 0; }
/* Aligne sur .mo-pp-section__eyebrow (charte v4 — reference) :              */
/*   font-size 11px / letter-spacing 0.16em / color bronze-600 / weight 600  */
/* Pas de font-family : hérite du parent (Stack Sans Text), evite le fallback*/
/* sur --font-eyebrow non chargee partout.                                   */
.mo-pp-doc-card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin: 0 0 4px;
}
.mo-pp-doc-card__title {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
  margin: 0 0 2px;
}
.mo-pp-doc-card__meta {
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--ink-500, #6E7682);
  margin: 0;
}
.mo-pp-doc-card__meta em { font-style: normal; color: var(--ink-300); margin: 0 4px; }

.mo-pp-doc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  color: var(--ink-900);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--ink-900);
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.mo-pp-doc-card__cta:hover,
.mo-pp-doc-card__cta:focus {
  background: var(--ink-900);
  color: var(--cream-50, #FAF7F2);
  outline: none;
}
.mo-pp-doc-card__cta svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .mo-pp-doc-card {
    grid-template-columns: 36px 1fr;
    padding: 14px 16px;
    gap: 12px;
  }
  .mo-pp-doc-card__cta { grid-column: 1 / -1; justify-content: center; }
}

/* === Modifier : FICI (reglementaire AMF/PSFP, pleine largeur) =========== */
/* Structure identique a .mo-pp-doc-card, seules differences :              */
/*  - background cream-100 (signal reglementaire fort)                      */
/*  - bordure transparente (le fond porte deja la distinction)              */
/*  - icone sur cream-50 (sort visuellement sur le cream-100)               */
/*  - hover : fond inchange (ce n'est pas une carte de liste cliquable)     */
.mo-pp-doc-card--regulatory {
  background: var(--cream-100, #F6F4EF);
  border-color: transparent;
  margin: 0 0 24px;
}
.mo-pp-doc-card--regulatory:hover {
  background: var(--cream-100, #F6F4EF);
  border-color: transparent;
}

/* Sous-titre long FICI : « FICI · Fiche d'Information Cle d'Investissement » */
/* Le « . » sep + label long sont integres dans le titre via span helpers.   */
.mo-pp-doc-card__title-sep {
  color: var(--ink-300, #9CA3AF);
  font-weight: 400;
  margin: 0 4px;
}
.mo-pp-doc-card__title-long {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-body, #424A55);
}

/* Fiche opération — S3 « Autres créances » : schéma du mécanisme (07/10/2026). */
.mo-pp-other__schema {
  margin: var(--space-6) 0;
}
.mo-pp-other__schema img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.mo-pp-other__schema figcaption {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Opération close (lot 3.4 de l'audit SEO, 23/10/2026) : pastille de statut à
   côté de la famille (point neutre), et appels à l'action vers les opérations
   en cours au lieu de « Souscrire ».
   -------------------------------------------------------------------------- */
.mo-pp-hero__pill--status { margin-left: 8px; }
.mo-pp-hero__pill--status::before { background: var(--ink-500); }
.mo-pp-page.mo-pp-page--closed .mo-pp-cta-label::before { content: "Voir les opérations en cours"; }