/* Simulateur : mise en page. Couleurs, polices, aplat et mouvement viennent de mh-tokens.css (charte Morad Houmir).
   Règles : orange jamais en texte, angles droits, aucun dégradé ni ombre, focus encre 3 px. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--mh-fond); color: var(--mh-encre); font-family: var(--mh-texte); font-size: var(--mh-taille-courant); line-height: var(--mh-interligne-courant); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
p, li, label, .aide, dt { text-wrap: pretty; }
/* contenu centré sur 1180 px au plus, gouttière de la charte au minimum */
.large { padding-left: max(var(--mh-gouttiere), calc((100% - 1180px) / 2)); padding-right: max(var(--mh-gouttiere), calc((100% - 1180px) / 2)); }
:focus-visible { outline: 3px solid var(--mh-encre); outline-offset: 3px; }

.evitement { position: absolute; left: -9999px; top: 0; background: var(--mh-encre); color: var(--mh-fond); padding: 10px 14px; font-weight: 600; z-index: 10; }
.evitement:focus { left: 8px; top: 8px; }

/* Aplat du simulateur : plus haut que l'essai R de la charte (0,92), pour couvrir capitales et ascendantes.
   Demande de Morad (09/11) : le haut des lettres qui dépassait donnait l'impression d'une erreur.
   Une seule valeur : tout le reste (fond, couleur du mot, recul) se recalcule à partir d'elle. */
:root { --mh-aplat-hauteur: 1.08; }

/* ---------- tête */
.tete { display: flex; align-items: center; justify-content: space-between; gap: var(--mh-espace-4); padding-top: var(--mh-espace-4); padding-bottom: var(--mh-espace-4); }
.tete .logo { display: block; }
.tete svg { height: 28px; width: auto; display: block; }
.tete .m { fill: var(--mh-encre); }
.tete .o { fill: var(--mh-orange); }
.mode { font: 600 13px/1 var(--mh-texte); background: transparent; color: var(--mh-encre); border: var(--mh-filet) solid var(--mh-encre); border-radius: 0; padding: 8px 12px; min-height: 36px; cursor: pointer; }

/* ---------- ouverture */
.ouverture { padding-top: var(--mh-espace-4); padding-bottom: var(--mh-espace-6); }
.chapo { margin-top: var(--mh-espace-4); }
.chapo, .prive, .pied .rappel { max-width: 640px; }
.prive { margin-top: var(--mh-espace-3); }

/* ---------- grille deux colonnes */
.grille { display: grid; gap: var(--mh-espace-6); padding-bottom: var(--mh-espace-7); }
@media (min-width: 900px) {
  .grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--mh-espace-7); }
  .resultat { position: sticky; top: var(--mh-espace-3); }
}

/* ---------- saisie */
.saisie { border-top: var(--mh-filet) solid var(--mh-encre); padding-top: var(--mh-espace-4); }
.exemples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--mh-espace-4); }
.choix { font: 600 15px/1.2 var(--mh-texte); background: transparent; color: var(--mh-encre); border: var(--mh-filet) solid var(--mh-encre); border-radius: 0; padding: 10px 14px; min-height: 44px; cursor: pointer; text-align: left; }
.choix[aria-pressed="true"] { background: var(--mh-encre); color: var(--mh-fond); }
#badge-fictif { margin-top: var(--mh-espace-2); }
#badge-fictif[hidden] { display: none; }

.champ { margin: var(--mh-espace-4) 0 0; border: 0; padding: 0; min-width: 0; }
.champ label, .libelle { display: block; font: 600 16px/1.3 var(--mh-texte); margin-bottom: 6px; padding: 0; }
.facultatif { font-weight: 400; font-size: 14px; color: var(--mh-graphite); margin-left: 4px; }
.aide { font-size: var(--mh-taille-note); line-height: var(--mh-interligne-note); color: var(--mh-graphite); margin-top: 6px; }
.ligne { display: flex; gap: 8px; align-items: stretch; }
.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
input[type=text], input[type=number], select {
  font: 400 17px/1.2 var(--mh-texte); color: var(--mh-encre); background: var(--mh-fond);
  border: var(--mh-filet) solid var(--mh-encre); border-radius: 0; padding: 10px 12px; min-height: 48px; width: 100%; min-width: 0;
}
input[type=number] { font-variant-numeric: tabular-nums; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mh-encre) 50%), linear-gradient(135deg, var(--mh-encre) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.ligne select { width: auto; flex: none; }
input[aria-invalid="true"] { border-style: dashed; }
input::placeholder { color: var(--mh-graphite); opacity: 1; }
.unite { flex: none; display: flex; align-items: center; padding: 0 2px; color: var(--mh-graphite); font-size: 15px; white-space: nowrap; }
.alerte { margin-top: 8px; font-size: var(--mh-taille-note); line-height: var(--mh-interligne-note); border-left: 4px solid var(--mh-orange); padding: 4px 10px; }
.alerte[hidden] { display: none; }

.bascule { display: inline-flex; border: var(--mh-filet) solid var(--mh-encre); margin-bottom: 8px; }
.bascule label { margin: 0; padding: 0; font: 600 14px/1 var(--mh-texte); cursor: pointer; }
.bascule span { display: flex; align-items: center; min-height: 38px; padding: 0 14px; }
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule input:checked + span { background: var(--mh-encre); color: var(--mh-fond); }
.bascule input:focus-visible + span { outline: 3px solid var(--mh-encre); outline-offset: 2px; }

.estimer { margin-top: var(--mh-espace-4); background: var(--mh-surface); padding: 14px 16px; }
.estimer summary, .calcul summary { cursor: pointer; font-weight: 600; min-height: 32px; display: list-item; }
.estimer ol { margin: 10px 0 0; padding-left: 20px; }
.estimer li { margin-top: 6px; }
.estimer p { margin-top: 10px; }

.sous-titre { font-family: var(--mh-titrage); font-style: italic; font-weight: 800; font-stretch: 108%; font-variation-settings: var(--mh-reglage-titre); font-size: 24px; line-height: 1.1; margin-top: var(--mh-espace-6); padding-top: var(--mh-espace-4); border-top: var(--mh-filet) solid var(--mh-encre); }

/* ---------- résultat */
.resultat { border-top: var(--mh-filet) solid var(--mh-encre); padding-top: var(--mh-espace-4); }
.verdict { margin-top: var(--mh-espace-3); padding: var(--mh-espace-4) 20px; border: var(--mh-filet) solid var(--mh-encre); }
.verdict .mh-titre { font-size: clamp(28px, 24px + 1vw, 36px); }
.verdict .mh-courant { margin-top: 10px; }
.verdict.v-oui { background: var(--mh-surface); border-color: var(--mh-surface); }
.verdict.v-etude { background: var(--mh-bloc); color: var(--mh-sur-bloc); border-color: var(--mh-bloc); }
.verdict.v-non { background: transparent; }

.chiffres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; margin-top: var(--mh-espace-3); background: var(--mh-encre); border: var(--mh-filet) solid var(--mh-encre); }
.chiffres > div { background: var(--mh-fond); padding: 12px 14px; }
.chiffres .large-cellule { grid-column: 1 / -1; }
.chiffres dt { font-size: 14px; line-height: 1.3; color: var(--mh-graphite); }
.chiffres dd { margin-top: 4px; font-family: var(--mh-titrage); font-style: italic; font-weight: 800; font-stretch: 108%; font-variation-settings: "wdth" 108, "wght" 800; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chiffres .large-cellule dd { font-size: 30px; }

.calcul { margin-top: var(--mh-espace-3); font-size: var(--mh-taille-note); line-height: var(--mh-interligne-note); }
.calcul ol { margin-top: 8px; padding-left: 20px; }
.calcul li { margin-top: 4px; font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mh-espace-4); margin-top: var(--mh-espace-4); }
.mh-bouton { border: 0; cursor: pointer; }
.bouton-lien { background: none; border: 0; padding: 0 4px; min-height: 44px; cursor: pointer; }
#copie-etat { margin-top: 10px; min-height: 1.4em; }
#copie-repli { display: block; width: 100%; min-height: 160px; margin-top: 10px; font: 400 14px/1.4 var(--mh-texte); color: var(--mh-encre); background: var(--mh-fond); border: var(--mh-filet) solid var(--mh-encre); border-radius: 0; padding: 10px; }
#copie-repli[hidden] { display: none; }

/* ---------- courbe du seuil de rentabilité (SVG fait main, couleurs de la charte) */
.courbe { margin: var(--mh-espace-4) 0 0; }
.courbe svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.courbe .axe { stroke: var(--mh-encre); stroke-width: 2; fill: none; }
.courbe .repere { stroke: var(--mh-surface); stroke-width: 1; }
.courbe .gain { stroke: var(--mh-encre); stroke-width: 3; fill: none; }
.courbe .effort { stroke: var(--mh-graphite); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.courbe .zone { fill: var(--mh-surface); stroke: none; }
.courbe .point { fill: var(--mh-orange); stroke: var(--mh-fond); stroke-width: 3; }
.courbe text { font-family: var(--mh-texte); fill: var(--mh-graphite); font-size: 12px; }
.courbe .lib-effort { fill: var(--mh-graphite); font-weight: 600; }
.courbe .lib-seuil { fill: var(--mh-encre); font-weight: 600; font-size: 12px; letter-spacing: .04em; }
.courbe .val-seuil { fill: var(--mh-encre); font-family: var(--mh-titrage); font-style: italic; font-weight: 800; font-stretch: 108%; font-variation-settings: "wdth" 108, "wght" 800; font-size: 26px; }
#courbe-texte { margin-top: 8px; }

/* ---------- téléphone : barre du verdict, en bas de l'écran, tant que le résultat n'est pas visible */
.barre-verdict { display: none; }
@media (max-width: 899px) {
  .barre-verdict { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--mh-encre); color: var(--mh-fond); text-decoration: none; padding: 12px var(--mh-gouttiere); padding-bottom: max(12px, env(safe-area-inset-bottom)); min-height: 52px;
    font: 600 15px/1.25 var(--mh-texte); }
  .barre-verdict .bv-voir { flex: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: var(--mh-filet); }
  .barre-verdict.cachee { display: none; }
  .pied { padding-bottom: calc(var(--mh-espace-7) + 52px); }
}

/* ---------- pied (bloc plein) */
.pied { padding-top: var(--mh-espace-8); padding-bottom: var(--mh-espace-7); }
.pied .rappel { margin-top: var(--mh-espace-5); }
.pied .limites { margin-top: var(--mh-espace-4); }
.pied .signature { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mh-espace-4); margin-top: var(--mh-espace-6); padding-top: var(--mh-espace-4); border-top: var(--mh-filet) solid var(--mh-sur-bloc); }
.pied .mh-lien { color: var(--mh-sur-bloc); }
.pied .mh-lien:focus-visible { outline-color: var(--mh-sur-bloc); }
.pied .signature + .mh-note { margin-top: var(--mh-espace-3); }

/* ---------- téléphone */
@media (max-width: 600px) {
  .tete svg { height: 24px; }
  .chiffres dd { font-size: 22px; }
  .chiffres .large-cellule dd { font-size: 26px; }
  .verdict { padding: 18px 16px; }
}
@media (max-width: 360px) {
  .chiffres { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- impression : le résultat et le calcul, sans boutons */
@media print {
  .barre-verdict, .tete .mode, .exemples, #badge-fictif, .actions, #copie-etat, #copie-repli, .evitement, .estimer { display: none !important; }
  .resultat { position: static; }
  .grille { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pied { padding-top: 24px; padding-bottom: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}