/* ============================================================
   MIROIR V2 · « Ce que Orbe pense » : la palette commune de l'app
   (poudre, encre, prune, lilas), maquette validée par Marine 11/09.
   L'écran est autonome : poudre pleine page, header v1 masqué.
   ============================================================ */
#e-miroir { padding: 0 !important; background: #D8DADC; }
#e-miroir.actif { display: block; }
body:has(#e-miroir.actif) header { display: none !important; }
body:has(#e-miroir.actif) #bandeau-date { display: none !important; }

.mi2 {
  min-height: calc(100dvh - var(--mi2-barre, 110px));
  display: flex;
  flex-direction: column;
  background: #D8DADC;
  color: #191135;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
.mi2-corps {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* le header de l'app est masqué sur Code Source : le contenu part du tout en
     haut. On garantit un plancher (statut/notch dégagé, même si env() ne rend
     rien) ET on descend franchement le titre (Marine 14/09). */
  padding: max(58px, calc(env(safe-area-inset-top, 0px) + 32px)) 20px 40px;
  display: flex;
  flex-direction: column;
}
/* le CTA final d'une étape du wizard se cale en bas de l'écran, au-dessus de
   la barre, au lieu de flotter juste après un contenu court (Marine 14/09) */
/* le dernier BOUTON s'ancre en bas (Marine 15/09 : « c'est quoi cet
   écart ? ») : :last-child ratait quand un élément technique invisible
   suivait le CTA, qui flottait au-dessus d'un trou */
.mi2-corps:not(.mi2-hub) > .mi2-cta:last-of-type { margin-top: auto; }
/* exception : sur le rapport (page longue qui scrolle), le bouton « Importer »
   garde une vraie marge et ne colle pas la dernière carte (Marine 14/09) */
.mi2-corps:not(.mi2-hub) > .mi2-cta.mi2-cta-plat:last-of-type { margin-top: 22px; }

/* la barre de progression */
.mi2-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.mi2-re { background: none; border: 0; color: rgba(25, 17, 53, 0.55); font-size: 20px; cursor: pointer; padding: 2px 6px; }
/* cible tactile 44pt (retour Marine 15/09 : « ce bouton ne fonctionne pas
   sur mon téléphone » : au doigt, 20x16 se rate ; à la souris, non) */
.mi2-re-txt { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #052B61; padding: 2px 12px 2px 2px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; margin: -12px 0; touch-action: manipulation; }
.mi2-piste { flex: 1; height: 4px; border-radius: 99px; background: rgba(25, 17, 53, 0.10); overflow: hidden; }
.mi2-piste i { display: block; height: 100%; border-radius: 99px; background: #052B61; }
.mi2-n { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(25, 17, 53, 0.55); flex: none; }
.mi2-eb { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(25, 17, 53, 0.55); }

.mi2-rub { font-family: 'Bricolage Grotesque', system-ui; font-weight: 800; letter-spacing: -0.03em; font-size: 31px; line-height: 1.03; color: #052B61; white-space: pre-line; margin: 0; }
.mi2-invoc { font-size: 16px; line-height: 1.5; margin-top: 12px; }
.mi2-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(25, 17, 53, 0.55); margin: 24px 0 9px; }
.mi2-note { font-size: 12.5px; color: rgba(25, 17, 53, 0.55); line-height: 1.5; margin-top: 12px; }
.mi2-centre { text-align: center; }
.mi2-erreur { font-size: 13.5px; color: #9E2568; line-height: 1.5; margin-top: 14px; }

/* l'import */
.mi2-drop { border-radius: 22px; background: #C7CCD2; padding: 38px 18px; text-align: center; margin-top: 18px; cursor: pointer; }
.mi2-nb { font-family: 'Bricolage Grotesque', system-ui; font-weight: 800; font-size: 40px; letter-spacing: -0.03em; }
.mi2-sig { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #052B61; margin-top: 6px; }
.mi2-chg { font-size: 12px; color: rgba(25, 17, 53, 0.55); margin-top: 14px; }
.mi2-plus { font-size: 11.5px; color: rgba(25, 17, 53, 0.55); margin-top: 26px; }
.mi2-aide { display: flex; align-items: center; gap: 10px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px rgba(25, 17, 53, 0.16); padding: 12px 15px; margin-top: 12px; font-size: 13px; color: rgba(25, 17, 53, 0.72); }

/* les puces de choix */
.mi2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mi2-chip { font-family: inherit; font-size: 14px; box-shadow: inset 0 0 0 1.5px rgba(25, 17, 53, 0.16); border: 0; background: none; border-radius: 999px; padding: 9px 15px; color: rgba(25, 17, 53, 0.72); cursor: pointer; }
.mi2-chip.on { box-shadow: none; background: #052B61; color: #D8DADC; font-weight: 600; }

/* les stats + fusion */
.mi2-stat { margin-top: 16px; border-radius: 12px; padding: 6px 8px; cursor: pointer; }
.mi2-stat.sel { background: #C7CCD2; box-shadow: inset 0 0 0 1.5px #052B61; }
.mi2-stat-l { display: flex; justify-content: space-between; font-size: 14.5px; font-weight: 600; }
.mi2-stat-l small { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(25, 17, 53, 0.55); font-weight: 400; }
.mi2-stat-p { height: 8px; border-radius: 99px; background: rgba(25, 17, 53, 0.10); margin-top: 7px; overflow: hidden; }
.mi2-stat-p i { display: block; height: 100%; border-radius: 99px; background: #191135; }
.mi2-carte { background: #C7CCD2; border-radius: 18px; padding: 15px 16px; margin-top: 20px; }
.mi2-carte b { font-size: 14px; display: block; line-height: 1.35; }
.mi2-carte p { font-size: 12.5px; color: rgba(25, 17, 53, 0.72); line-height: 1.45; margin: 6px 0 0; }
.mi2-btn2 { font-family: inherit; display: inline-block; margin-top: 11px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(25, 17, 53, 0.16); border: 0; padding: 9px 15px; font-size: 13.5px; font-weight: 600; background: #D8DADC; color: #191135; cursor: pointer; }
.mi2-btn2:disabled { opacity: 0.45; }

/* qui est qui */
.mi2-who { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid rgba(25, 17, 53, 0.10); }
.mi2-who:last-of-type { border-bottom: none; }
.mi2-av { width: 34px; height: 34px; border-radius: 50%; background: #C7CCD2; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', system-ui; font-weight: 800; font-size: 15px; flex: none; }
.mi2-who-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi2-who-nm { font-size: 14px; font-weight: 600; }
.mi2-who-st { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: rgba(25, 17, 53, 0.55); }
.mi2-who-st.on { color: #052B61; }
.mi2-tag { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; flex: none; border: 0; cursor: pointer; }
.mi2-tag.theme { background: #191135; color: #D8DADC; }
.mi2-tag.no { background: none; box-shadow: inset 0 0 0 1px rgba(25, 17, 53, 0.16); color: rgba(25, 17, 53, 0.55); }

/* le champ libre */
.mi2-texte { margin-top: 16px; border: 0; border-radius: 18px; background: #C7CCD2; padding: 14px 16px; font-family: inherit; font-size: 15px; color: #191135; resize: vertical; outline: none; }

/* ce qui t'attend */
.mi2-att { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(25, 17, 53, 0.10); }
.mi2-att:last-of-type { border-bottom: none; }
.mi2-att-g { font-size: 16px; flex: none; line-height: 1.4; width: 22px; text-align: center; }
.mi2-att b { font-size: 14.5px; display: block; line-height: 1.35; }
.mi2-att small { display: block; font-size: 12.5px; color: rgba(25, 17, 53, 0.72); margin-top: 2px; line-height: 1.4; }

/* les CTA */
.mi2-cta { display: block; width: 100%; margin-top: 22px; background: #052B61; color: #D8DADC; border: 0; border-radius: 999px; padding: 15px; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.mi2-cta.creux { background: none; box-shadow: inset 0 0 0 1.5px rgba(25, 17, 53, 0.16); color: #191135; }
.mi2-cta:disabled { opacity: 0.4; }

/* le hub */
.mi2-rap { display: flex; align-items: center; gap: 12px; background: #C7CCD2; border-radius: 18px; padding: 15px 16px; margin-top: 10px; }
.mi2-rap .mi2-rap-n { width: 26px; height: 26px; border-radius: 50%; background: #191135; color: #D8DADC; font-family: 'Bricolage Grotesque', system-ui; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.mi2-rap b { font-size: 14.5px; display: block; line-height: 1.3; }
.mi2-rap small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: rgba(25, 17, 53, 0.55); margin-top: 2px; }
.mi2-rap-fl { margin-left: auto; color: #052B61; font-weight: 700; }
.mi2-rap-arch { margin-left: auto; flex: none; background: none; border: 0; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(25, 17, 53, 0.5); padding: 4px 6px; }
.mi2-rap-arch + .mi2-rap-fl { margin-left: 0; }
.mi2-lbl-btn { background: none; border: 0; cursor: pointer; display: block; width: 100%; text-align: left; padding: 0; }

/* le rapport */
.mi2-lecture { max-width: 560px; }
.mi2-titre { font-family: 'Bricolage Grotesque', system-ui; font-weight: 800; letter-spacing: -0.02em; font-size: 26px; line-height: 1.1; margin: 4px 0 0; }
.mi2-persona { display: flex; gap: 10px; align-items: center; background: #C7CCD2; border-radius: 14px; padding: 10px 13px; margin: 14px 0; }
.mi2-persona-o { width: 30px; height: 30px; border-radius: 50%; background: #191135; color: #D8DADC; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', system-ui; font-weight: 800; flex: none; }
.mi2-persona small { font-size: 12px; color: rgba(25, 17, 53, 0.72); line-height: 1.35; }
/* titres de chapitre : GROS et gras, avec un glyphe devant (Marine 15/09) */
.mi2-h { font-family: 'Bricolage Grotesque', system-ui; font-weight: 800; letter-spacing: -0.02em; font-size: 24px; line-height: 1.12; margin: 34px 0 8px; color: #052B61; }
.mi2-h-g { color: #052B61; margin-right: 8px; font-size: 18px; vertical-align: 2px; }
.mi2-p { font-size: 15px; line-height: 1.6; margin: 10px 0; }
.mi2-bulle { background: #E4EFD6; border: 1px solid #CFE0BC; border-radius: 14px; padding: 10px 13px; font-size: 13.5px; line-height: 1.45; margin: 12px 0; color: #1c2a14; }
.mi2-bulle-qui { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(28, 42, 20, 0.55); margin-bottom: 3px; }
.mi2-bulle-dt { text-transform: none; letter-spacing: 0; opacity: 0.7; margin-left: 8px; }
.mi2-bulle-ck { color: #5AA9E0; font-size: 11px; }

/* le paywall : les derniers blocs s'effacent */
.mi2-fondu3 { opacity: 0.55; }
.mi2-fondu2 { opacity: 0.28; }
.mi2-fondu1 { opacity: 0.10; }
.mi2-asuivre { text-align: center; font-family: 'Bricolage Grotesque', system-ui; font-weight: 800; font-size: 17px; margin-top: 26px; }
.mi2-chap { display: flex; align-items: baseline; gap: 10px; font-size: 14px; text-align: left; padding: 11px 6px; border-bottom: 1px solid rgba(25, 17, 53, 0.10); line-height: 1.4; }
.mi2-chap-g { flex: none; width: 18px; text-align: center; color: #052B61; }
.mi2-chap:last-of-type { border-bottom: none; }

/* les pourquoi */
.mi2-pq { display: flex; align-items: flex-start; gap: 12px; background: #C7CCD2; border-radius: 18px; padding: 14px 16px; margin-top: 10px; cursor: pointer; }
.mi2-pq-g { font-size: 18px; flex: none; line-height: 1.3; width: 22px; text-align: center; }
.mi2-pq b { font-size: 14.5px; font-weight: 700; display: block; line-height: 1.35; }
.mi2-pq small { display: block; font-size: 12.5px; color: rgba(25, 17, 53, 0.72); margin-top: 3px; line-height: 1.4; }
.mi2-gate { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #052B61; margin-top: 5px; }
.mi2-pq-fl { margin-left: auto; color: #052B61; font-weight: 700; flex: none; align-self: center; }

/* le partage */
.mi2-share { margin-left: auto; background: none; border: 0; color: #052B61; cursor: pointer; padding: 4px 6px; display: flex; align-items: center; }
.mi2-voile { position: fixed; inset: 0; background: rgba(25, 17, 53, 0.45); z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.mi2-modale { background: #D8DADC; border-radius: 26px 26px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 560px; }
.mi2-mod-titre { font-family: 'Bricolage Grotesque', system-ui; font-weight: 800; letter-spacing: -0.03em; font-size: 22px; color: #052B61; margin: 0; }
.mi2-mod-btn { display: flex; align-items: center; gap: 12px; width: 100%; background: #C7CCD2; border: 0; border-radius: 16px; padding: 13px 16px; margin-top: 10px; font-family: inherit; text-align: left; color: #191135; cursor: pointer; }
.mi2-mod-btn.verrou { opacity: 0.5; cursor: default; }
.mi2-mod-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mi2-mod-col b { font-size: 14.5px; }
.mi2-mod-col small { font-size: 12px; color: rgba(25, 17, 53, 0.62); overflow-wrap: anywhere; }
.mi2-mod-fl { margin-left: auto; color: #052B61; font-weight: 700; flex: none; display: flex; align-items: center; }
.mi2-mod-x { display: block; width: 100%; margin-top: 14px; background: none; border: 0; box-shadow: inset 0 0 0 1.5px rgba(25, 17, 53, 0.16); border-radius: 999px; padding: 12px; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #191135; cursor: pointer; }
.mi2-viral { margin-top: 30px; }
.mi2-slot { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; line-height: 1.4; margin-top: 8px; }
.mi2-slot-ck { flex: none; width: 17px; height: 17px; border-radius: 6px; background: #052B61; color: #D8DADC; font-size: 11px; display: flex; align-items: center; justify-content: center; align-self: center; }

/* l'export PDF : la page imprimée, c'est le rapport et rien d'autre */
@media print {
  body.mi2-print * { visibility: hidden; }
  body.mi2-print #e-miroir, body.mi2-print #e-miroir * { visibility: visible; }
  body.mi2-print #e-miroir { position: absolute; top: 0; left: 0; width: 100%; }
  body.mi2-print .mi2-share, body.mi2-print .mi2-re, body.mi2-print .mi2-viral,
  body.mi2-print .mi2-cta, body.mi2-print .mi2-pq, body.mi2-print .mi2-voile { display: none; }
}