/* ================================================================
   MACLAPE.COM — Design System Global
   Référentiel de composants pour carnets botaniques & historiques
   Couvre : Home page + carnets (caprificus.html modèle)
   ================================================================

   TABLE DES MATIÈRES
   ─────────────────
   1.  Tokens — variables CSS (couleurs, typo, espacement, rayon)
   2.  Reset minimal & base typographique
   3.  Grilles & mise en page
   4.  Composants — Carte standard (mc-card)
   5.  Composants — Boîte de signal olfactif / information (mc-infobox)
   6.  Composants — Pilule / Badge (mc-pill)
   7.  Composants — Profil olfactif / barre de données (mc-bar)
   8.  Composants — Puce circulaire (mc-puce)
   9.  Composants — Bandeau de rappel contextuel (mc-recall)
   10. Composants — Galerie saisonnière (mc-gallery)
   11. Composants — Simulateur interactif (mc-sim)
   12. Composants — Carte historien / penseur (mc-figure)
   13. Composants — Carte définition bicolore (mc-def)
   14. Composants — Carte composé chimique (mc-compound)
   15. Composants — Bouton filtre / bascule (mc-btn)
   16. Composants — Barre de progression saisonnière (mc-season-bar)
   17. Composants — Source / Citation (mc-source)
   18. Utilitaires
   ================================================================ */


/* ================================================================
   1. TOKENS — Variables CSS
   ================================================================ */

:root {
	
	--mc-base: #4acaa8;
  /* --- Couleurs principales --- */
  --mc-green-900: #0e2b22;   /* très sombre, hover profond */
  --mc-green-800: #1d5043;   /* vert foncé — en-têtes, accents forts */
  --mc-green-700: #226050;   /* intermédiaire */
  --mc-green-600: #2c7964;   /* vert moyen — bordures, liens */
  --mc-green-500: #3a9c7e;   /* vert medium */
  --mc-green-400: #5cb89a;   /* vert clair saturé */
  --mc-green-100: #d0ede4;   /* teinté très clair */
  --mc-green-50:  #eef5f1;   /* fond de section tint1 */
		

  /* --- Couleurs sémantiques secondaires --- */
  --mc-amber-800: #92400e;
  --mc-amber-600: #b8922e;
  --mc-amber-50:  #fffbeb;

  --mc-coral-800: #991b1b;
  --mc-coral-600: #dc2626;
  --mc-coral-50:  #fef2f2;

  --mc-blue-800:  #1e40af;
  --mc-blue-50:   #eff6ff;

  --mc-purple-800: #5b21b6;
  --mc-purple-50:  #f5f3ff;

  --mc-pink-800:  #9b1258;
  --mc-pink-50:   #fce7f0;
  --mc-pink-border: #f9a8d4;

  /* --- Neutres --- */
  --mc-gray-900: #1a1a18;
  --mc-gray-700: #3d3d3a;
  --mc-gray-500: #6b6b67;
  --mc-gray-400: #888780;
  --mc-gray-200: #d4d2c9;
  --mc-gray-100: #f1efe8;
  --mc-gray-50:  #f8f6f1;

  /* --- Blanc --- */
  --mc-white: #ffffff;

  /* --- Typographie --- */
  --mc-font-body:    Georgia, 'Times New Roman', serif;
  --mc-font-ui:      system-ui, -apple-system, sans-serif;
  --mc-font-mono:    'Courier New', Courier, monospace;

  --mc-text-xs:   0.65em;
  --mc-text-sm:   0.74em;
  --mc-text-base: 1em;
  --mc-text-lg:   1.05em;

  --mc-lh-tight:  1.3;
  --mc-lh-normal: 1.6;
  --mc-lh-relaxed: 1.75;

  /* --- Rayon de bordure --- */
  --mc-radius-sm: 4px;
  --mc-radius-md: 6px;
  --mc-radius-lg: 8px;
  --mc-radius-xl: 12px;
  --mc-radius-full: 9999px;

  /* --- Espacement --- */
  --mc-gap-xs:  6px;
  --mc-gap-sm:  10px;
  --mc-gap-md:  14px;
  --mc-gap-lg:  20px;
  --mc-gap-xl:  28px;

  /* --- Bordures --- */
  --mc-border-light:  1px solid rgba(0,0,0,.08);
  --mc-border-medium: 1px solid rgba(0,0,0,.14);
  --mc-border-green:  1px solid rgba(44,121,100,.25);

  /* --- Ombres --- */
  --mc-shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --mc-shadow-md: 0 5px 18px rgba(0,0,0,.10);
  --mc-shadow-lg: 0 8px 24px rgba(0,0,0,.14);

  /* --- Transitions --- */
  --mc-transition: .18s ease;
}


/* ================================================================
   2. BASE TYPOGRAPHIQUE (complément au reset du site)
   ================================================================ */

.mc-label {
  font-size: var(--mc-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mc-gray-400);
  display: block;
  margin-bottom: 5px;
  font-family: var(--mc-font-ui);
}

.mc-overline {
  font-size: var(--mc-text-xs);
  font-style: italic;
  color: var(--mc-gray-400);
  line-height: var(--mc-lh-tight);
  margin: 0;
}

.mc-body-sm {
  font-size: var(--mc-text-sm);
  line-height: var(--mc-lh-normal);
  color: var(--mc-gray-700);
}

.mc-note {
  font-size: var(--mc-text-xs);
  font-style: italic;
  color: var(--mc-gray-500);
  line-height: var(--mc-lh-normal);
  margin: 0;
}


/* ================================================================
   3. GRILLES & MISE EN PAGE
   ================================================================ */

/* Conteneur principal (max-width aligné sur le site) */
.mc-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: .5rem 0 1rem;
}

/* Grilles réactives */
.mc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mc-gap-md);
}
.mc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mc-gap-md);
}
.mc-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--mc-gap-sm);
}
/* Élément qui s'étend sur toutes les colonnes */
.mc-col-full { grid-column: 1 / -1; }

@media (max-width: 580px) {
  .mc-grid-2,
  .mc-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .mc-grid-auto { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
   4. CARTE STANDARD (mc-card)
   Cas d'usage : gène, composé, concept, fait, personnage secondaire
   ================================================================ */

.mc-card {
  border: var(--mc-border-green);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  background: var(--mc-white);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--mc-transition), transform var(--mc-transition);
}
.mc-card:hover {
  box-shadow: var(--mc-shadow-md);
  transform: translateY(-2px);
}

/* En-tête de carte */
.mc-card__head {
  padding: 9px 12px 7px;
  border-bottom: var(--mc-border-light);
  background: var(--mc-gray-50);
  display: flex;
  align-items: center;
  gap: var(--mc-gap-xs);
}
/* Accent coloré en haut (appliqué via modificateur couleur) */
.mc-card--green  .mc-card__head { border-top: 3px solid var(--mc-green-600); }
.mc-card--amber  .mc-card__head { border-top: 3px solid var(--mc-amber-600); }
.mc-card--coral  .mc-card__head { border-top: 3px solid var(--mc-coral-600); }
.mc-card--blue   .mc-card__head { border-top: 3px solid var(--mc-blue-800); }
.mc-card--purple .mc-card__head { border-top: 3px solid var(--mc-purple-800); }
.mc-card--pink   .mc-card__head { border-top: 3px solid var(--mc-pink-800); }

.mc-card__title {
  font-size: .88em;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: var(--mc-lh-tight);
  color: var(--mc-gray-900);
  font-family: var(--mc-font-ui);
}
.mc-card__subtitle {
  font-size: .67em;
  opacity: .62;
  font-style: italic;
  margin: 0;
  line-height: var(--mc-lh-tight);
}

/* Corps de carte */
.mc-card__body {
  padding: 9px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* En-tête vert foncé (pour cartes type historien/personnage) */
.mc-card--dark-head .mc-card__head {
  background: var(--mc-green-800);
  border-bottom: none;
}
.mc-card--dark-head .mc-card__title   { color: var(--mc-white); letter-spacing: .03em; }
.mc-card--dark-head .mc-card__subtitle { color: rgba(255,255,255,.62); }


/* ================================================================
   5. BOÎTE D'INFORMATION / SIGNAL (mc-infobox)
   Cas d'usage : signal olfactif, bloc de synthèse, résultat
   ================================================================ */

.mc-infobox {
  border: var(--mc-border-medium);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}

.mc-infobox__head {
  padding: 9px 16px;
  border-bottom: var(--mc-border-light);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
/* Couleurs d'en-tête sémantiques */
.mc-infobox--green  .mc-infobox__head { background: #ecfdf5; }
.mc-infobox--amber  .mc-infobox__head { background: var(--mc-amber-50); }
.mc-infobox--coral  .mc-infobox__head { background: var(--mc-coral-50); }
.mc-infobox--blue   .mc-infobox__head { background: var(--mc-blue-50); }
.mc-infobox--neutral .mc-infobox__head { background: var(--mc-gray-50); }

.mc-infobox__title {
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}
.mc-infobox--green  .mc-infobox__title { color: var(--mc-green-800); }
.mc-infobox--amber  .mc-infobox__title { color: var(--mc-amber-800); }
.mc-infobox--coral  .mc-infobox__title { color: var(--mc-coral-800); }
.mc-infobox--blue   .mc-infobox__title { color: var(--mc-blue-800); }
.mc-infobox--neutral .mc-infobox__title { color: var(--mc-gray-700); }

.mc-infobox__subtitle {
  font-size: .7em;
  font-style: italic;
  color: var(--mc-gray-400);
  margin: 0;
}

.mc-infobox__body {
  padding: 14px 16px;
  background: var(--mc-white);
}


/* ================================================================
   6. PILULE / BADGE (mc-pill)
   Cas d'usage : allèle, saison, statut, catégorie
   ================================================================ */

.mc-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--mc-radius-sm);
  font-size: .72em;
  font-weight: 700;
  font-family: var(--mc-font-mono);
  letter-spacing: .03em;
  line-height: 1.6;
  white-space: nowrap;
}

/* Pilule dominante / allèle */
.mc-pill--dom {
  background: var(--mc-pink-50);
  color: var(--mc-pink-800);
  border: 1px solid var(--mc-pink-border);
}
/* Pilule récessive / allèle */
.mc-pill--rec {
  background: var(--mc-blue-50);
  color: var(--mc-blue-800);
  border: 1px solid #bfdbfe;
}

/* Pilules saisonnières (galerie) */
.mc-pill--spring { background: #eef5e8; color: #3e6226; border: 1px solid #b7d9a0; }
.mc-pill--summer { background: #fdf5e0; color: #6a4c12; border: 1px solid #e8c97a; }
.mc-pill--autumn { background: #fdf0e8; color: #6e2c0c; border: 1px solid #e8a87a; }
.mc-pill--winter { background: #e8f0f5; color: #1a4858; border: 1px solid #93c5d4; }

/* Pilule générique colorée */
.mc-pill--green  { background: #ecfdf5; color: var(--mc-green-800); border: 1px solid #6ee7b7; }
.mc-pill--amber  { background: var(--mc-amber-50); color: var(--mc-amber-800); border: 1px solid #fde68a; }
.mc-pill--coral  { background: var(--mc-coral-50); color: var(--mc-coral-800); border: 1px solid #fca5a5; }
.mc-pill--neutral { background: var(--mc-gray-100); color: var(--mc-gray-700); border: 1px solid var(--mc-gray-200); }

/* Badge de position absolue (sur image) */
.mc-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: var(--mc-radius-sm);
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mc-white);
  pointer-events: none;
}
.mc-badge--spring { background: rgba(106,147,86,.92); }
.mc-badge--summer { background: rgba(184,146,46,.92); }
.mc-badge--autumn { background: rgba(161,79,24,.92); }
.mc-badge--winter { background: rgba(62,110,126,.92); }


/* ================================================================
   7. PROFIL OLFACTIF / BARRE DE DONNÉES (mc-bar)
   Cas d'usage : profil olfactif, intensité, comparaison
   ================================================================ */

.mc-bars { display: flex; flex-direction: column; gap: 5px; }

.mc-bar-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mc-bar-label {
  font-size: var(--mc-text-xs);
  color: var(--mc-gray-400);
  width: 60px;
  flex-shrink: 0;
  text-align: right;
  font-style: italic;
  font-family: var(--mc-font-ui);
}
.mc-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(0,0,0,.07);
  border-radius: 3px;
  overflow: hidden;
}
.mc-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
/* Couleurs de remplissage */
.mc-bar-fill--pink   { background: #f472b6; }
.mc-bar-fill--amber  { background: #f59e0b; }
.mc-bar-fill--green  { background: #34d399; }
.mc-bar-fill--blue   { background: #60a5fa; }
.mc-bar-fill--coral  { background: #fb923c; }
.mc-bar-fill--teal   { background: #2dd4bf; }

/* Barre de signal dynamique (simulateur) */
.mc-signal-track {
  height: 8px;
  background: rgba(0,0,0,.07);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.mc-signal-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .25s ease, background-color .25s ease;
}


/* ================================================================
   8. PUCE CIRCULAIRE (mc-puce)
   Cas d'usage : numéro d'étape, initiale, symbole chimique
   ================================================================ */

.mc-puce {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62em;
  font-weight: 700;
  font-family: var(--mc-font-mono);
  letter-spacing: .01em;
  flex-shrink: 0;
  line-height: 1.2;
  text-align: center;
}
.mc-puce--sm { width: 26px; height: 26px; }
.mc-puce--lg { width: 36px; height: 36px; font-size: .76em; }

/* Couleurs de puces */
.mc-puce--dark  { background: var(--mc-green-800); color: var(--mc-white); }
.mc-puce--green { background: rgba(29,80,67,.1); color: var(--mc-green-800); border: 1px solid rgba(29,80,67,.25); }
.mc-puce--pink  { background: var(--mc-pink-50); color: var(--mc-pink-800); border: 1px solid var(--mc-pink-border); }
.mc-puce--amber { background: var(--mc-amber-50); color: var(--mc-amber-800); border: 1px solid #fde68a; }
.mc-puce--blue  { background: var(--mc-blue-50); color: var(--mc-blue-800); border: 1px solid #bfdbfe; }
.mc-puce--teal  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.mc-puce--coral { background: var(--mc-coral-50); color: var(--mc-coral-800); border: 1px solid #fca5a5; }
.mc-puce--ghost { background: rgba(255,255,255,.15); color: var(--mc-white); border: 1px solid rgba(255,255,255,.3); }


/* ================================================================
   9. BANDEAU DE RAPPEL CONTEXTUEL (mc-recall)
   Cas d'usage : note, renvoi, synthèse en bas de bloc
   ================================================================ */

.mc-recall {
  font-size: var(--mc-text-sm);
  line-height: var(--mc-lh-normal);
  color: var(--mc-gray-500);
  font-style: italic;
  border-left: 3px solid;
  padding: 7px 12px;
  margin: 10px 0 0;
  border-radius: 0;
}
.mc-recall--green  { border-color: var(--mc-green-600); background: rgba(29,80,67,.04); color: #3a5a50; }
.mc-recall--amber  { border-color: var(--mc-amber-600); background: rgba(184,146,46,.04); }
.mc-recall--coral  { border-color: var(--mc-coral-600, #dc2626); background: rgba(220,38,38,.04); }
.mc-recall--blue   { border-color: var(--mc-blue-800); background: rgba(30,64,175,.04); }
.mc-recall--neutral { border-color: var(--mc-gray-200); background: var(--mc-gray-50); }
.mc-recall strong  { font-style: normal; }


/* ================================================================
   10. GALERIE SAISONNIÈRE (mc-gallery)
   Cas d'usage : galerie photo avec filtres et badges saisonniers
   ================================================================ */

/* Barre de progression saisonnière */
.mc-season-bar {
  display: flex;
  border-radius: var(--mc-radius-md);
  overflow: hidden;
  margin-bottom: .8rem;
  border: 1px solid rgba(0,0,0,.1);
}
.mc-season-seg {
  flex: 1;
  padding: .55em .4em;
  text-align: center;
  border-right: 1px solid rgba(0,0,0,.08);
  line-height: 1.3;
  cursor: pointer;
  transition: filter var(--mc-transition);
  user-select: none;
}
.mc-season-seg:last-child { border-right: none; }
.mc-season-seg:hover { filter: brightness(.94) saturate(1.1); }
.mc-season-seg.is-inactive { opacity: .4; }
.mc-season-seg__name { display: block; font-size: .75em; font-weight: 600; letter-spacing: .03em; }
.mc-season-seg__date { display: block; font-size: .63em; opacity: .72; margin-top: 1px; }

.mc-season-seg--spring { background: #eef5e8; color: #3e6226; border-bottom: 3px solid #6a9356; }
.mc-season-seg--summer { background: #fdf5e0; color: #6a4c12; border-bottom: 3px solid #b8922e; }
.mc-season-seg--autumn { background: #fdf0e8; color: #6e2c0c; border-bottom: 3px solid #a14f18; }
.mc-season-seg--winter { background: #e8f0f5; color: #1a4858; border-bottom: 3px solid #3e6e7e; }

/* Carte d'image dans la galerie */
.mc-gallery-card {
  border-radius: var(--mc-radius-md);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.1);
  background: var(--mc-white);
  transition: transform var(--mc-transition), box-shadow var(--mc-transition);
  display: flex;
  flex-direction: column;
}
.mc-gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mc-shadow-md);
}
.mc-gallery-card a { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

/* Zone image */
.mc-gallery-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--mc-gray-100);
}
.mc-gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.mc-gallery-card:hover .mc-gallery-img img { transform: scale(1.05); }

.mc-gallery-num {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: .62em;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35);
  padding: 1px 6px;
  border-radius: 10px;
  pointer-events: none;
}

/* Panneau info de la carte galerie */
.mc-gallery-info {
  padding: 7px 9px 10px;
  border-top: 2.5px solid;
  flex: 1;
}
.mc-gallery-info--spring { border-color: #6a9356; }
.mc-gallery-info--summer { border-color: #b8922e; }
.mc-gallery-info--autumn { border-color: #a14f18; }
.mc-gallery-info--winter { border-color: #3e6e7e; }

.mc-gallery-date {
  display: block;
  font-size: .72em;
  font-weight: 600;
  margin-bottom: 2px;
}
.mc-gallery-date--spring { color: #5a8046; }
.mc-gallery-date--summer { color: #9e7a22; }
.mc-gallery-date--autumn { color: #8a3e10; }
.mc-gallery-date--winter { color: #2c5e6e; }

.mc-gallery-caption {
  font-size: .72em;
  line-height: 1.35;
  opacity: .65;
  margin: 0;
  font-style: italic;
}

/* Carte masquée par filtre */
.mc-gallery-card.is-hidden { display: none; }


/* ================================================================
   11. SIMULATEUR INTERACTIF (mc-sim)
   Cas d'usage : génotype, ratio Z/E, tout simulateur à bascule
   ================================================================ */

.mc-sim {
  border: var(--mc-border-medium);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
}
.mc-sim__head {
  background: var(--mc-gray-50);
  border-bottom: var(--mc-border-light);
  padding: 9px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.mc-sim__title {
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mc-gray-700);
  margin: 0;
}
.mc-sim__desc {
  font-size: .7em;
  font-style: italic;
  color: var(--mc-gray-400);
  margin: 0;
}
.mc-sim__body { padding: 14px 16px; background: var(--mc-white); }

/* Ligne de contrôle (gène, curseur…) */
.mc-sim-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.mc-sim-label {
  font-family: var(--mc-font-mono);
  font-size: .82em;
  font-weight: 700;
  width: 48px;
  flex-shrink: 0;
  letter-spacing: .03em;
}
.mc-sim-desc {
  font-size: .7em;
  color: var(--mc-gray-400);
  font-style: italic;
  flex: 1;
  min-width: 100px;
}

/* Groupe de boutons bascule */
.mc-toggle-group { display: flex; gap: 4px; }
.mc-toggle {
  padding: 4px 12px;
  border-radius: var(--mc-radius-sm);
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  font-size: .76em;
  font-family: var(--mc-font-mono);
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  color: var(--mc-gray-500);
  letter-spacing: .02em;
  line-height: 1.5;
}
.mc-toggle:hover { border-color: rgba(0,0,0,.35); color: var(--mc-gray-900); }
.mc-toggle.is-dom { background: var(--mc-pink-50); color: var(--mc-pink-800); border-color: var(--mc-pink-border); }
.mc-toggle.is-rec { background: var(--mc-blue-50); color: var(--mc-blue-800); border-color: #bfdbfe; }
.mc-toggle.is-on  { background: #ecfdf5; color: var(--mc-green-800); border-color: #6ee7b7; }
.mc-toggle.is-off { background: var(--mc-coral-50); color: var(--mc-coral-800); border-color: #fca5a5; }

/* Panneau de résultat du simulateur */
.mc-result {
  border-radius: var(--mc-radius-md);
  padding: 12px 14px;
  border: 1px solid;
  margin-top: 12px;
  transition: background .2s, border-color .2s;
}
.mc-result__genotype {
  font-family: var(--mc-font-mono);
  font-size: .8em;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.mc-result__type {
  font-size: .96em;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}
.mc-result__detail {
  font-size: var(--mc-text-sm);
  opacity: .82;
  margin: 0;
  line-height: 1.5;
}

/* Thèmes de résultat */
.mc-result--capri-fertile    { background: #fff7ed; border-color: #fca5a5; }
.mc-result--capri-fertile    .mc-result__type    { color: #c2410c; }
.mc-result--capri-fertile    .mc-result__genotype { color: #9a3412; }
.mc-result--capri-persistent { background: #fef3c7; border-color: #fbbf24; }
.mc-result--capri-persistent .mc-result__type    { color: var(--mc-amber-800); }
.mc-result--capri-persistent .mc-result__genotype { color: #78350f; }
.mc-result--capri-sterile    { background: var(--mc-gray-100); border-color: var(--mc-gray-200); }
.mc-result--capri-sterile    .mc-result__type    { color: #374151; }
.mc-result--fem-parth        { background: #ecfdf5; border-color: #6ee7b7; }
.mc-result--fem-parth        .mc-result__type    { color: #065f46; }
.mc-result--fem-smyrne       { background: var(--mc-blue-50); border-color: #93c5fd; }
.mc-result--fem-smyrne       .mc-result__type    { color: var(--mc-blue-800); }
.mc-result--inviable         { background: var(--mc-coral-50); border-color: #fca5a5; }
.mc-result--inviable         .mc-result__type    { color: var(--mc-coral-800); }


/* ================================================================
   12. CARTE HISTORIEN / PENSEUR (mc-figure)
   Cas d'usage : présentation de chercheur, auteur, théoricien
   ================================================================ */

.mc-figure {
  border: var(--mc-border-green);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  background: var(--mc-white);
  margin-bottom: 10px;
  transition: box-shadow var(--mc-transition);
}
.mc-figure:hover { box-shadow: var(--mc-shadow-sm); }

.mc-figure__head {
  padding: 10px 14px 8px;
  border-bottom: var(--mc-border-light);
  background: var(--mc-gray-50);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mc-figure__num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mc-green-800);
  color: var(--mc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82em;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--mc-font-mono);
}
.mc-figure__name {
  font-size: .96em;
  font-weight: 700;
  color: var(--mc-green-800);
  margin: 0 0 2px;
  line-height: var(--mc-lh-tight);
}
.mc-figure__specialty {
  font-size: .67em;
  font-style: italic;
  color: var(--mc-gray-400);
  margin: 0;
  line-height: var(--mc-lh-tight);
}
.mc-figure__body {
  padding: 11px 14px 13px;
}

/* Paragraphe de mise en regard sous la carte */
.mc-figure-nuance {
  font-size: var(--mc-text-sm);
  line-height: var(--mc-lh-normal);
  color: var(--mc-gray-500);
  font-style: italic;
  border-left: 3px solid var(--mc-green-800);
  padding: 7px 12px;
  margin: 0 0 1.6rem;
  background: rgba(29,80,67,.04);
}
.mc-figure-nuance strong { color: var(--mc-green-800); font-style: normal; }


/* ================================================================
   13. CARTE DÉFINITION BICOLORE (mc-def)
   Cas d'usage : termes scientifiques avec exemple appliqué
   ================================================================ */

.mc-def {
  border: var(--mc-border-green);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  background: var(--mc-white);
  display: flex;
  flex-direction: column;
}

.mc-def__head {
  background: var(--mc-green-800);
  padding: 9px 14px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-def__term {
  font-size: .9em;
  font-weight: 700;
  color: var(--mc-white);
  margin: 0 0 2px;
  letter-spacing: .04em;
}
.mc-def__tagline {
  font-size: .66em;
  color: rgba(255,255,255,.62);
  font-style: italic;
  margin: 0;
  line-height: var(--mc-lh-tight);
}
.mc-def__body {
  padding: 11px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.mc-def__text {
  font-size: var(--mc-text-sm);
  line-height: var(--mc-lh-normal);
  color: var(--mc-gray-700);
  margin: 0;
}
/* Encart exemple */
.mc-def__example {
  background: rgba(29,80,67,.05);
  border-left: 3px solid var(--mc-green-600);
  border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0;
  padding: 7px 10px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.mc-def__arrow {
  font-size: .8em;
  color: var(--mc-green-600);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1.5;
}
.mc-def__example-text {
  font-size: .72em;
  line-height: var(--mc-lh-normal);
  color: #3a5a50;
  margin: 0;
  font-style: italic;
}
.mc-def__example-text strong { color: var(--mc-green-800); font-style: normal; }


/* ================================================================
   14. CARTE COMPOSÉ CHIMIQUE (mc-compound)
   Cas d'usage : COV, molécules, éléments avec profil
   ================================================================ */

.mc-compound {
  border: var(--mc-border-light);
  border-radius: var(--mc-radius-md);
  padding: 9px 12px 11px;
  background: var(--mc-white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Paires allèle dans les cartes de gènes */
.mc-allele {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.mc-allele__text {
  font-size: .72em;
  line-height: 1.45;
  color: var(--mc-gray-700);
}
.mc-allele__sep {
  border: none;
  border-top: 1px solid rgba(0,0,0,.07);
  margin: 2px 0;
}

/* Grille de composés (type isomères Z/E) */
.mc-isomers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 16px;
}
.mc-isomers__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 1.3em;
  color: var(--mc-gray-200);
  font-weight: 300;
  user-select: none;
}
@media (max-width: 480px) {
  .mc-isomers { grid-template-columns: 1fr; }
  .mc-isomers__sep { display: none; }
}


/* ================================================================
   15. BOUTONS FILTRE / BASCULE (mc-btn)
   Cas d'usage : filtres galerie, catégories, sélecteur
   ================================================================ */

.mc-btn-group { display: flex; gap: 6px; flex-wrap: wrap; }

.mc-filter-btn {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.2);
  background: transparent;
  font-size: .78em;
  cursor: pointer;
  transition: all .15s;
  opacity: .6;
  font-family: inherit;
  letter-spacing: .03em;
  line-height: 1.5;
  color: inherit;
}
.mc-filter-btn:hover { opacity: .85; }
.mc-filter-btn.is-active { opacity: 1; color: var(--mc-white); border-color: transparent; }
.mc-filter-btn.is-active.all     { background: var(--mc-gray-500); }
.mc-filter-btn.is-active.spring  { background: #6a9356; }
.mc-filter-btn.is-active.summer  { background: #b8922e; }
.mc-filter-btn.is-active.autumn  { background: #a14f18; }
.mc-filter-btn.is-active.winter  { background: #3e6e7e; }
.mc-filter-btn.is-active.green   { background: var(--mc-green-800); }

/* Curseur range (simulateur) */
.mc-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mc-slider-row input[type=range] { flex: 1; cursor: pointer; }
.mc-slider-val {
  font-size: .72em;
  font-family: var(--mc-font-mono);
  font-weight: 600;
  min-width: 52px;
  text-align: center;
  flex-shrink: 0;
  color: var(--mc-gray-500);
}


/* ================================================================
   16. SOURCE / CITATION (mc-source)
   ================================================================ */

.mc-source {
  text-align: right;
  font-size: .7em;
  color: var(--mc-gray-400);
  font-style: italic;
  padding-top: 6px;
  border-top: var(--mc-border-light);
  line-height: 1.4;
  margin: 0;
}
.mc-source a {
  color: var(--mc-green-600);
  text-decoration: none;
  border-bottom: 1px solid rgba(44,121,100,.3);
  transition: border-color .15s;
}
.mc-source a:hover { border-color: var(--mc-green-600); }


/* ================================================================
   17. UTILITAIRES
   ================================================================ */

.mc-mt-sm { margin-top: var(--mc-gap-sm); }
.mc-mt-md { margin-top: var(--mc-gap-md); }
.mc-mt-lg { margin-top: var(--mc-gap-lg); }
.mc-mb-sm { margin-bottom: var(--mc-gap-sm); }
.mc-mb-md { margin-bottom: var(--mc-gap-md); }
.mc-mb-lg { margin-bottom: var(--mc-gap-lg); }

.mc-text-center { text-align: center; }
.mc-text-right  { text-align: right; }
.mc-italic      { font-style: italic; }

/* Section à fond teinté (identique à .tint1 du site) */
.mc-section-tint {
  background: var(--mc-green-50);
  border-top: 1px solid var(--mc-green-600);
  padding: 2rem 0;
}

/* Espacement standard d'une section de carnet */
.mc-section { margin: 1.6rem 0; }

/* Divider discret */
.mc-divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,.07);
  margin: 10px 0;
}


/* ================================================================
   18. FRISE CHRONOLOGIQUE (mc-timeline)
   Cas d'usage : historique daté, étapes de découverte, biographie
   ================================================================ */

.mc-timeline {
  position: relative;
  padding: 0;
  margin: 1.6rem 0;
}
/* Ligne verticale dégradée */
.mc-timeline::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--mc-green-600), var(--mc-green-100));
}
.mc-timeline__item {
  position: relative;
  padding-left: 52px;
  padding-bottom: 1.5rem;
}
.mc-timeline__item:last-child { padding-bottom: 0; }

/* Pastille de date */
.mc-timeline__dot {
  position: absolute;
  left: 0;
  top: 2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mc-green-800);
  color: var(--mc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58em;
  font-weight: 700;
  font-family: var(--mc-font-mono);
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 0 0 3px var(--mc-green-100);
  flex-shrink: 0;
}
.mc-timeline__dot--amber  { background: var(--mc-amber-800);  box-shadow: 0 0 0 3px #fde68a; }
.mc-timeline__dot--coral  { background: var(--mc-coral-800);  box-shadow: 0 0 0 3px #fca5a5; }
.mc-timeline__dot--blue   { background: var(--mc-blue-800);   box-shadow: 0 0 0 3px #bfdbfe; }
.mc-timeline__dot--ghost  { background: var(--mc-gray-400);   box-shadow: 0 0 0 3px var(--mc-gray-200); }

/* Année / surtitre */
.mc-timeline__year {
  font-size: .72em;
  font-weight: 700;
  font-family: var(--mc-font-ui);
  color: var(--mc-green-800);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 3px;
  display: block;
}
.mc-timeline__year--amber   { color: var(--mc-amber-800); }
.mc-timeline__year--coral   { color: var(--mc-coral-800); }
.mc-timeline__year--blue    { color: var(--mc-blue-800); }
.mc-timeline__year--neutral { color: var(--mc-gray-500); }

/* Titre & corps */
.mc-timeline__title {
  font-size: .9em;
  font-weight: 700;
  color: var(--mc-gray-900);
  margin: 0 0 3px;
  line-height: var(--mc-lh-tight);
}
.mc-timeline__body {
  font-size: var(--mc-text-sm);
  line-height: var(--mc-lh-normal);
  color: var(--mc-gray-700);
  margin: 4px 0 0;
}


/* ================================================================
   19. CARTE HERBIER / DOCUMENT (mc-herbier)
   Cas d'usage : planche d'herbier, manuscrit, photo archivistique
   ================================================================ */

.mc-herbier {
  border: var(--mc-border-green);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  background: var(--mc-white);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--mc-transition);
}
.mc-herbier:hover { box-shadow: var(--mc-shadow-md); }

.mc-herbier__img {
  background: var(--mc-gray-100);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--mc-border-light);
}
.mc-herbier__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.mc-herbier:hover .mc-herbier__img img { transform: scale(1.04); }

/* Pied de carte */
.mc-herbier__foot {
  padding: 8px 12px 10px;
  border-top: 2.5px solid var(--mc-green-600);
}
.mc-herbier__foot--amber { border-top-color: var(--mc-amber-600); }
.mc-herbier__foot--coral { border-top-color: var(--mc-coral-600); }
.mc-herbier__foot--blue  { border-top-color: var(--mc-blue-800);  }
.mc-herbier__foot--neutral { border-top-color: var(--mc-gray-200); }

.mc-herbier__caption {
  font-size: .72em;
  font-weight: 700;
  color: var(--mc-green-800);
  margin: 0 0 2px;
  line-height: 1.35;
}
.mc-herbier__caption--amber  { color: var(--mc-amber-800); }
.mc-herbier__caption--neutral { color: var(--mc-gray-700); }

.mc-herbier__meta {
  font-size: .65em;
  font-style: italic;
  color: var(--mc-gray-400);
  margin: 0;
  line-height: 1.3;
}


/* ================================================================
   20. CITATION LATINE / MANUSCRITE (mc-quote-latin)
   Cas d'usage : extrait d'un texte scientifique ancien, nomenclature
   ================================================================ */

.mc-quote-latin {
  background: #fafaf8;
  border: var(--mc-border-green);
  border-left: 4px solid var(--mc-green-600);
  border-radius: 0 var(--mc-radius-md) var(--mc-radius-md) 0;
  padding: 14px 18px;
  margin: 12px 0;
  font-family: var(--mc-font-mono);
  font-size: .73em;
  line-height: 1.7;
  color: var(--mc-gray-700);
  font-style: italic;
}
.mc-quote-latin strong {
  font-style: normal;
  color: var(--mc-green-800);
  font-size: 1.05em;
}
.mc-quote-latin--amber {
  border-left-color: var(--mc-amber-600);
  border-color: rgba(184,146,46,.3);
}
.mc-quote-latin--amber strong { color: var(--mc-amber-800); }

/* ── Traductions — quatre variantes (A · B · C · D) ──────────────
   Placer l'élément de traduction à l'intérieur du <blockquote>.
   Choisir UNE seule variante par citation.
   ──────────────────────────────────────────────────────────────── */

/* VARIANTE A — Sous le latin · Discrète
   Georgia italic · gris-400 · taille réduite · trait pointillé
   Usage : traduction indispensable, texte court, lecteur non latiniste */
.mc-quote-latin__trad-subtle {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(44,121,100,.2);
  font-family: var(--mc-font-body);
  font-size: .88em;
  font-style: italic;
  line-height: 1.6;
  color: var(--mc-gray-400);
}
.mc-quote-latin__trad-subtle .mc-trad-lang {
  font-size: .74em;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--mc-green-600);
  font-family: var(--mc-font-ui);
  margin-right: 5px;
  opacity: .75;
}

/* VARIANTE B — Sous le latin · Égale au latin
   Georgia romain · gris-700 · même taille · badge vert · trait plein
   Usage : les deux langues ont le même statut éditorial */
.mc-quote-latin__trad-equal {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(44,121,100,.18);
  font-family: var(--mc-font-body);
  font-size: 1em;
  font-style: normal;
  line-height: 1.7;
  color: var(--mc-gray-700);
}
.mc-quote-latin__trad-equal .mc-trad-lang {
  font-size: .68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mc-white);
  background: var(--mc-green-600);
  padding: 1px 6px;
  border-radius: var(--mc-radius-sm);
  margin-right: 7px;
  font-family: var(--mc-font-ui);
  vertical-align: .1em;
  font-style: normal;
}

/* VARIANTE C — Dépliable · Discrète
   <details> natif · lien texte chevron · traduction cachée par défaut
   Usage : le latin est l'élément principal, traduction optionnelle */
details.mc-quote-latin__trad-toggle {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(44,121,100,.2);
}
details.mc-quote-latin__trad-toggle summary {
  font-size: .7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mc-green-600);
  font-family: var(--mc-font-ui);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  opacity: .8;
  transition: opacity var(--mc-transition);
}
details.mc-quote-latin__trad-toggle summary:hover { opacity: 1; }
details.mc-quote-latin__trad-toggle summary::before {
  content: '▸';
  font-size: .85em;
  transition: transform var(--mc-transition);
  display: inline-block;
}
details.mc-quote-latin__trad-toggle[open] summary::before { transform: rotate(90deg); }
details.mc-quote-latin__trad-toggle summary::-webkit-details-marker { display: none; }
.mc-quote-latin__trad-toggle__body {
  margin-top: 7px;
  font-family: var(--mc-font-body);
  font-size: .88em;
  font-style: italic;
  line-height: 1.6;
  color: var(--mc-gray-400);
  padding-left: 2px;
}

/* VARIANTE D — Dépliable · Égale
   <details> natif · bouton vert · traduction cachée · Georgia romain
   Usage : interaction bien visible, traduction à statut équivalent */
details.mc-quote-latin__trad-toggle-equal {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(44,121,100,.18);
}
details.mc-quote-latin__trad-toggle-equal summary {
  font-size: .7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mc-white);
  background: var(--mc-green-600);
  padding: 3px 10px;
  border-radius: var(--mc-radius-sm);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mc-font-ui);
  user-select: none;
  transition: background var(--mc-transition);
}
details.mc-quote-latin__trad-toggle-equal summary:hover { background: var(--mc-green-800); }
details.mc-quote-latin__trad-toggle-equal summary::before {
  content: '▸';
  font-size: .85em;
  transition: transform var(--mc-transition);
  display: inline-block;
}
details.mc-quote-latin__trad-toggle-equal[open] summary::before { transform: rotate(90deg); }
details.mc-quote-latin__trad-toggle-equal summary::-webkit-details-marker { display: none; }
.mc-quote-latin__trad-toggle-equal__body {
  margin-top: 10px;
  font-family: var(--mc-font-body);
  font-size: 1em;
  font-style: normal;
  line-height: 1.7;
  color: var(--mc-gray-700);
}

/* ── Héritage variante --amber pour A et C ── */
.mc-quote-latin--amber .mc-quote-latin__trad-subtle,
.mc-quote-latin--amber details.mc-quote-latin__trad-toggle {
  border-top-color: rgba(184,146,46,.22);
}
.mc-quote-latin--amber .mc-quote-latin__trad-subtle .mc-trad-lang,
.mc-quote-latin--amber details.mc-quote-latin__trad-toggle summary {
  color: var(--mc-amber-600);
}
/* ── Héritage --amber pour B et D ── */
.mc-quote-latin--amber .mc-quote-latin__trad-equal,
.mc-quote-latin--amber details.mc-quote-latin__trad-toggle-equal {
  border-top-color: rgba(184,146,46,.25);
}
.mc-quote-latin--amber .mc-quote-latin__trad-equal .mc-trad-lang,
.mc-quote-latin--amber details.mc-quote-latin__trad-toggle-equal summary {
  background: var(--mc-amber-600);
}
.mc-quote-latin--amber details.mc-quote-latin__trad-toggle-equal summary:hover {
  background: var(--mc-amber-800);
}


/* ================================================================
   21. EN-TÊTE DE SECTION (mc-section-head)
   Cas d'usage : titre + sous-titre d'une sous-partie de carnet
   ================================================================ */

.mc-section-head {
  margin-bottom: 1.6rem;
}
.mc-section-head h3 {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--mc-green-800);
  margin: 0 0 .3rem;
  line-height: var(--mc-lh-tight);
}
.mc-section-head p {
  font-size: var(--mc-text-sm);
  color: var(--mc-gray-500);
  font-style: italic;
  margin: 0;
}

/* Variante avec barre accent */
.mc-section-head--ruled {
  border-left: 4px solid var(--mc-green-600);
  padding-left: 12px;
}
.mc-section-head--ruled h3 { color: var(--mc-green-800); }




/* ================================================================
   22. INTRODUCTION & CONCLUSION DE CHAPITRE
   mc-chapter-intro · mc-chapter-outro
   ================================================================

   PRINCIPE DE MIROIR
   ─────────────────
   intro  → trait accent en HAUT  · fond teinté (--mc-green-50)
   outro  → trait accent en BAS   · fond blanc
   Tous les tokens de taille, espacement et ornement sont partagés.
   ================================================================ */

/* ── Tokens communs ── */
:root {
  --mc-ch-border-accent:     2px solid var(--mc-green-600);
  --mc-ch-border-side:       1px solid rgba(44,121,100,.22);
  --mc-ch-padding:           1.5rem 2rem 1.4rem;
  --mc-ch-eyebrow-size:      .67em;
  --mc-ch-eyebrow-spacing:   .13em;
  --mc-ch-text-size:         .93em;
  --mc-ch-text-lh:           1.84;
  --mc-ch-ornament-size:     .70em;
  --mc-ch-ornament-spacing:  .24em;
  --mc-ch-ornament-opacity:  .55;
  --mc-ch-rule-width:        40px;
}

/* ── Eyebrow (identique dans les deux blocs) ── */
.mc-chapter-intro__eyebrow,
.mc-chapter-outro__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 0 0 1rem;
  font-size: var(--mc-ch-eyebrow-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--mc-ch-eyebrow-spacing);
  color: var(--mc-green-600);
  font-family: var(--mc-font-ui);
}
.mc-chapter-intro__eyebrow::before, .mc-chapter-intro__eyebrow::after,
.mc-chapter-outro__eyebrow::before, .mc-chapter-outro__eyebrow::after {
  content: '';
  flex: 1;
  max-width: var(--mc-ch-rule-width);
  height: 1px;
  background: var(--mc-green-600);
  opacity: .45;
}

/* ── Texte principal (identique) ── */
.mc-chapter-intro__text,
.mc-chapter-outro__text {
  font-size: var(--mc-ch-text-size);
  line-height: var(--mc-ch-text-lh);
  color: var(--mc-gray-700);
  font-style: italic;
  margin: 0;
  text-align: center;
}

/* ── Ornement de fin (identique) ── */
.mc-chapter-intro__ornament,
.mc-chapter-outro__ornament {
  text-align: center;
  font-size: var(--mc-ch-ornament-size);
  letter-spacing: var(--mc-ch-ornament-spacing);
  color: var(--mc-green-600);
  opacity: var(--mc-ch-ornament-opacity);
  font-family: var(--mc-font-ui);
  user-select: none;
  margin-top: .9rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(44,121,100,.14);
}

/* ════════════════════
   mc-chapter-intro
   ════════════════════ */
.mc-chapter-intro {
  background: var(--mc-green-50);
  border-top:    var(--mc-ch-border-accent);
  border-right:  var(--mc-ch-border-side);
  border-bottom: var(--mc-ch-border-side);
  border-left:   var(--mc-ch-border-side);
  padding: var(--mc-ch-padding);
  margin: 0 0 1.6rem;
}
.mc-chapter-intro::before {
  content: '';
  display: block;
  width: var(--mc-ch-rule-width);
  height: 2px;
  background: var(--mc-green-600);
  opacity: .35;
  margin: 0 auto 1.1rem;
}
/* Lettrine */
.mc-chapter-intro__dropcap {
  float: left;
  font-size: 3.4em;
  line-height: .78;
  font-weight: 700;
  font-style: normal;
  color: var(--mc-green-800);
  margin-right: .1em;
  margin-top: .04em;
  font-family: Georgia, serif;
}
/* Mots-clés étymologiques */
.mc-kw {
  font-style: italic;
  font-weight: 600;
  color: var(--mc-green-800);
  letter-spacing: .02em;
}
.mc-kw--amber { color: var(--mc-amber-800); }
.mc-kw--lang {
  font-size: .7em;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  vertical-align: .1em;
  margin-left: 2px;
  font-family: var(--mc-font-ui);
  opacity: .5;
}

/* ════════════════════
   mc-chapter-outro
   ════════════════════ */
.mc-chapter-outro {
  background: var(--mc-white);
  border-top:    var(--mc-ch-border-side);
  border-right:  var(--mc-ch-border-side);
  border-bottom: var(--mc-ch-border-accent);
  border-left:   var(--mc-ch-border-side);
  padding: var(--mc-ch-padding);
  margin: 0 0 1.6rem;
}
.mc-chapter-outro::before {
  content: '';
  display: block;
  width: var(--mc-ch-rule-width);
  height: 2px;
  background: var(--mc-green-600);
  opacity: .35;
  margin: 0 auto 1.1rem;
}
/* Liste À retenir */
.mc-chapter-outro__retenir {
  background: var(--mc-green-50);
  border-left: 3px solid var(--mc-green-600);
  border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0;
  padding: .8rem 1rem .8rem 1.1rem;
  margin: 1rem 0 0;
  list-style: none;
}
.mc-chapter-outro__retenir-label {
  font-size: var(--mc-ch-eyebrow-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--mc-green-600);
  font-family: var(--mc-font-ui);
  display: block;
  margin-bottom: .5rem;
}
.mc-chapter-outro__retenir li {
  font-size: .78em;
  line-height: 1.6;
  color: var(--mc-gray-700);
  padding: .2rem 0;
  display: flex;
  gap: .5rem;
  align-items: baseline;
  font-family: var(--mc-font-ui);
}
.mc-chapter-outro__retenir li::before {
  content: '→';
  color: var(--mc-green-600);
  font-weight: 700;
  flex-shrink: 0;
  font-size: .85em;
}
/* Signature */
.mc-chapter-outro__sig {
  text-align: right;
  font-size: .7em;
  font-style: italic;
  color: var(--mc-gray-400);
  font-family: var(--mc-font-ui);
  margin: .8rem 0 0;
  padding-top: .65rem;
  border-top: var(--mc-border-light);
}

/* ════════════════════
   Variante --amber
   ════════════════════ */
.mc-chapter-intro--amber,
.mc-chapter-outro--amber {
  background: #fefdf8;
  border-color: rgba(184,146,46,.28);
}
.mc-chapter-intro--amber { border-top-color: var(--mc-amber-600); border-top-width: 2px; }
.mc-chapter-outro--amber { border-bottom-color: var(--mc-amber-600); border-bottom-width: 2px; }

.mc-chapter-intro--amber::before,
.mc-chapter-outro--amber::before { background: var(--mc-amber-600); }

.mc-chapter-intro--amber .mc-chapter-intro__eyebrow,
.mc-chapter-outro--amber .mc-chapter-outro__eyebrow { color: var(--mc-amber-800); }

.mc-chapter-intro--amber .mc-chapter-intro__eyebrow::before,
.mc-chapter-intro--amber .mc-chapter-intro__eyebrow::after,
.mc-chapter-outro--amber .mc-chapter-outro__eyebrow::before,
.mc-chapter-outro--amber .mc-chapter-outro__eyebrow::after { background: var(--mc-amber-600); }

.mc-chapter-intro--amber .mc-chapter-intro__ornament,
.mc-chapter-outro--amber .mc-chapter-outro__ornament {
  color: var(--mc-amber-600);
  border-top-color: rgba(184,146,46,.2);
}

.mc-chapter-outro--amber .mc-chapter-outro__retenir { background: var(--mc-amber-50); border-left-color: var(--mc-amber-600); }
.mc-chapter-outro--amber .mc-chapter-outro__retenir li::before { color: var(--mc-amber-800); }
.mc-chapter-outro--amber .mc-chapter-outro__retenir-label { color: var(--mc-amber-800); }

/* ════════════════════
   Variante --compact
   ════════════════════ */
.mc-chapter-intro--compact,
.mc-chapter-outro--compact {
  padding: 1.1rem 1.5rem;
  border-left: none;
  border-right: none;
  background: transparent;
}
.mc-chapter-intro--compact .mc-chapter-intro__text,
.mc-chapter-outro--compact .mc-chapter-outro__text { font-size: .86em; }

/* steps  in introduction section
*/
.mc-flow-summary {
    max-width: 600px;
    padding: 20px;
    margin: 0 auto;
}

.mc-flow-summary-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.25rem 0;
    border-top: solid 2px #f4f4f4;
    text-decoration: none;
    -moz-transition: color .2s ease-in-out;
    -webkit-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.mc-flow-summary-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.mc-flow-summary-num {
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1;
    color: #d1f1e9;
    flex-shrink: 0;
    width: 2.2rem;
    text-align: right;
    padding-top: 2px;
    -moz-transition: color .2s ease-in-out;
    -webkit-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.mc-flow-summary-body {
    flex: 1;
}

.mc-flow-summary-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--mc-base);
    line-height: 1.3em;
    margin: 0 0 .35em 0;
				text-align:left;
    -moz-transition: color .2s ease-in-out;
    -webkit-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.mc-flow-summary-desc {
    font-size: .9em;
    color: #888;
    margin: 0;
    line-height: 1.75em;text-align:left;
}

.mc-flow-summary-arrow {
    color: var(--mc-base);
    flex-shrink: 0;
    margin-top: 4px;
    opacity: 0;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}

.mc-flow-summary-item:hover .mc-flow-summary-num  { color: var(--mc-base); }
.mc-flow-summary-item:hover .mc-flow-summary-title { color: #777; }
.mc-flow-summary-item:hover .mc-flow-summary-arrow { opacity: 1; }


/* ================================================================
   22. CITATION ENRICHIE (mc-blockquote)
   Cas d'usage : citation d'auteur, témoignage, note naturaliste
   ================================================================ */

.mc-blockquote {
  background: #ededed;
  border-left: 4px solid var(--mc-green-800);
  font-size: .9em;
  font-style: normal;
  line-height: 1.65;
  margin: 14px auto;
  padding: 1.1em 1.6em .7em 2.4em;
  position: relative;
  color: #555;
  border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0;
  width: 100%;
}
.mc-blockquote::before {
  content: '\201C';
  font-family: Arial, sans-serif;
  font-size: 4em;
  color: var(--mc-green-800);
  position: absolute;
  left: 8px;
  top: -8px;
  line-height: 1;
}
.mc-blockquote::after { content: ''; }

.mc-blockquote__attr {
  display: block;
  font-weight: 700;
  font-style: normal;
  text-align: right;
  margin-top: 10px;
  color: var(--mc-gray-700);
  font-size: .82em;
  font-family: var(--mc-font-ui);
}
.mc-blockquote__attr a { color: var(--mc-green-600); }

/* Citation latine / source primaire (monospace, parcheminé) */
.mc-quote-latin {
  background: #fafaf8;
  border: var(--mc-border-green);
  border-left: 4px solid var(--mc-green-600);
  border-radius: 0 var(--mc-radius-md) var(--mc-radius-md) 0;
  padding: 14px 18px;
  margin: 12px 0;
  font-family: var(--mc-font-mono);
  font-size: .73em;
  line-height: 1.7;
  color: var(--mc-gray-700);
  font-style: italic;
}
.mc-quote-latin strong {
  font-style: normal;
  color: var(--mc-green-800);
  font-size: 1.05em;
}