/* ════════════════════════════════════════════════════════════════════
   Devoirati · Design-system commun des calculateurs (thème clair, RTL)
   Socle visuel unique de TOUTE la suite de calculateurs (7ᵉ/8ᵉ/9ᵉ).
   Identité de marque : dégradé indigo → violet #667eea → #764ba2
   (fiche de conventions 2026-07-15 ; cohérent avec le site Devoirati).
   Couleurs sémantiques (retour pédagogique uniquement, jamais identité) :
     vert #1cb35b = juste · rouge #e53935 = erreur · orange #f5a623 =
     avertissement · bleu #1865f2 = information / rappel de règle.
   Contrat d'affichage : « النتيجة النهائية أولاً » puis étapes dépliables.
   Chargé une seule fois par page ; aucune dépendance externe.
   (Préfixes internes .mihseb-* / --mh-* conservés : identifiants
   techniques non visibles, cf. plan §8.2 — la marque affichée est
   Devoirati.)
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* — Fonds & surfaces (clair, calé sur --dv-* du site) — */
  --mh-bg:        #f8f9fa;
  --mh-surface:   #ffffff;
  --mh-surface2:  #f4f5fb;
  --mh-panel:     #eef0f8;
  --mh-border:    #e4e7f2;
  --mh-border2:   #d3d8ec;

  /* — Marque (identité, boutons principaux) — */
  --mh-brand:      #667eea;
  --mh-brand2:     #764ba2;
  --mh-brand-dark: #4a3570;
  --mh-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* — Sémantique (retour pédagogique) — */
  --mh-green: #1cb35b;  --mh-green-bg: #e6f7ed;  --mh-green-text: #12703a;
  --mh-red:   #e53935;  --mh-red-bg:   #fdeaea;  --mh-red-text:   #a8201d;
  --mh-gold:  #f5a623;  --mh-gold-bg:  #fef4e3;  --mh-gold-text:  #935e05;
  --mh-blue:  #1865f2;  --mh-blue-bg:  #e8f0fe;  --mh-blue-text:  #114198;
  --mh-violet:#764ba2;

  /* — Texte — */
  --mh-text:        #333333;
  --mh-text-strong: #2c3e50;
  --mh-muted:       #666666;
  --mh-muted2:      #8a94ad;

  /* — Rayons / ombres / espacements — */
  --mh-r:  14px;  --mh-r2: 10px;  --mh-r3: 8px;
  --mh-shadow: 0 4px 20px rgba(102, 126, 234, .12);
  --mh-shadow-sm: 0 2px 8px rgba(102, 126, 234, .10);

  --mh-font: "Cairo", "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mh-font-math-ar: "Amiri", "Cairo", serif;
}

/* ─────────────────────────── Base / RTL ─────────────────────────── */
.mihseb {
  direction: rtl;
  text-align: right;
  font-family: var(--mh-font);
  color: var(--mh-text);
  background: radial-gradient(1200px 600px at 80% -10%, #eceffd 0%, var(--mh-bg) 55%);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.mihseb *,
.mihseb *::before,
.mihseb *::after { box-sizing: border-box; }

.mihseb-app {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 18px 60px;
}

/* ─────────────────────────── En-tête / marque ─────────────────────────── */
.mihseb-brand {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 4px 18px;
}
.mihseb-brand__logo {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--mh-grad);
  color: #ffffff; font-weight: 800; font-size: 22px;
  box-shadow: var(--mh-shadow-sm);
}
.mihseb-brand__name { font-size: 26px; font-weight: 800; letter-spacing: .5px; color: var(--mh-text-strong); }
.mihseb-brand__name b {
  background: var(--mh-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--mh-brand);
}
.mihseb-brand__tag { font-size: 13px; color: var(--mh-muted); margin-top: 2px; }

/* ─────────────────────────── Sélecteur de niveau 7/8/9 ─────────────────────────── */
.mihseb-grades {
  display: inline-flex; gap: 6px; padding: 5px;
  background: var(--mh-surface); border: 1px solid var(--mh-border);
  border-radius: 999px; margin: 4px 0 18px;
  box-shadow: var(--mh-shadow-sm);
}
.mihseb-grade {
  border: 0; cursor: pointer; font-family: inherit;
  padding: 8px 20px; border-radius: 999px;
  background: transparent; color: var(--mh-muted); font-weight: 700; font-size: 15px;
  transition: .18s;
}
.mihseb-grade:hover { color: var(--mh-brand-dark); }
.mihseb-grade.is-active {
  background: var(--mh-grad);
  color: #fff; box-shadow: var(--mh-shadow-sm);
}

/* ─────────────────────────── Cartes / panneaux ─────────────────────────── */
.mihseb-card {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  box-shadow: var(--mh-shadow);
  padding: 18px;
  margin-bottom: 16px;
}
.mihseb-card__title {
  font-size: 15px; font-weight: 700; color: var(--mh-muted);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}

/* ─────────────────────────── Zone de saisie ─────────────────────────── */
.mihseb-input {
  width: 100%;
  background: var(--mh-surface);
  border: 1.5px solid var(--mh-border2);
  border-radius: var(--mh-r2);
  color: var(--mh-text-strong);
  font-family: "Consolas", "Menlo", monospace;
  font-size: 20px; padding: 14px 16px;
  direction: ltr; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.mihseb-input:focus {
  outline: none; border-color: var(--mh-brand);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, .18);
}
.mihseb-preview {
  min-height: 40px; margin-top: 10px; padding: 8px 12px;
  background: var(--mh-surface2); border-radius: var(--mh-r3);
  color: var(--mh-brand-dark); font-size: 18px; direction: ltr; text-align: center;
}

.mihseb-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mihseb-btn {
  border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 16px;
  padding: 12px 26px; border-radius: var(--mh-r2); transition: .16s;
}
.mihseb-btn--go {
  background: var(--mh-grad);
  color: #ffffff; box-shadow: var(--mh-shadow-sm);
}
.mihseb-btn--go:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mihseb-btn--ghost {
  background: var(--mh-surface); color: var(--mh-text); border: 1px solid var(--mh-border2);
}
.mihseb-btn--ghost:hover { background: var(--mh-panel); }

/* ─────────────────────────── Contrat : RÉSULTAT D'ABORD ─────────────────────────── */
.mihseb-result {
  background: var(--mh-green-bg);
  border: 1.5px solid rgba(28, 179, 91, .45);
  border-radius: var(--mh-r);
  padding: 20px; margin-bottom: 16px;
  text-align: center;
}
.mihseb-result__label {
  font-size: 14px; font-weight: 700; color: var(--mh-green-text);
  margin-bottom: 10px; letter-spacing: .3px;
}
.mihseb-result__value { font-size: 30px; color: var(--mh-text-strong); direction: ltr; }

/* ─────────────────────────── Accordéon d'étapes ─────────────────────────── */
.mihseb-steps { margin-top: 4px; }
.mihseb-steps__toggle {
  width: 100%; text-align: right; cursor: pointer; user-select: none;
  background: var(--mh-surface); border: 1px solid var(--mh-border2);
  border-radius: var(--mh-r2); color: var(--mh-text-strong);
  font-family: inherit; font-weight: 700; font-size: 15px;
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
}
.mihseb-steps__toggle:hover { background: var(--mh-panel); }
.mihseb-steps__toggle .chev { transition: transform .2s; color: var(--mh-brand); }
.mihseb-steps[open] .mihseb-steps__toggle .chev { transform: rotate(180deg); }
.mihseb-steps__body { padding: 14px 4px 2px; }

/* Étape individuelle (compatible render-output : .calc-step / .step-*) */
.calc-step, .mihseb-step {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  border-right: 3px solid var(--mh-blue);
  border-radius: var(--mh-r3);
  padding: 12px 14px; margin-bottom: 10px;
  box-shadow: var(--mh-shadow-sm);
}
.calc-step.step-green,  .mihseb-step.is-green  { border-right-color: var(--mh-green); }
.calc-step.step-gold,   .mihseb-step.is-gold   { border-right-color: var(--mh-gold); }
.calc-step.step-red,    .mihseb-step.is-red    { border-right-color: var(--mh-red); }
.calc-step.step-violet, .mihseb-step.is-violet { border-right-color: var(--mh-violet); }

.step-header { margin-bottom: 6px; }
.step-label {
  font-size: 13px; font-weight: 700; color: var(--mh-brand-dark);
  display: inline-flex; align-items: center; gap: 6px;
}
.step-num {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mh-grad); color: #fff; font-size: 12px; font-weight: 800;
}
.step-body { font-size: 18px; color: var(--mh-text-strong); direction: ltr; text-align: center; padding: 4px 0; }
.step-comment { font-size: 13px; color: var(--mh-muted); margin-top: 6px; font-family: var(--mh-font-math-ar); }

/* Règle / info / avertissement (compatibles render-output) */
.calc-rule {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--mh-blue-bg); border: 1px solid rgba(24, 101, 242, .3);
  border-radius: var(--mh-r3); padding: 10px 14px; margin-bottom: 10px;
}
.rule-icon { font-size: 18px; }
.rule-name { font-weight: 700; color: var(--mh-blue-text); font-size: 14px; }
.rule-formula { color: var(--mh-text-strong); direction: ltr; }
.rule-comment { color: var(--mh-muted); font-size: 13px; }

.calc-info {
  background: var(--mh-gold-bg); border: 1px solid rgba(245, 166, 35, .4);
  border-radius: var(--mh-r3); padding: 12px 14px; margin-top: 6px; text-align: center;
}
.info-label { font-size: 13px; font-weight: 700; color: var(--mh-gold-text); }
.info-value { font-size: 24px; color: var(--mh-text-strong); margin-top: 6px; direction: ltr; }

.calc-warn {
  background: var(--mh-red-bg); border: 1px solid rgba(229, 57, 53, .4);
  border-radius: var(--mh-r3); padding: 12px 14px; color: var(--mh-red-text);
  font-weight: 600; margin: 8px 0;
}

/* ─────────────────────────── Responsive ─────────────────────────── */
@media (max-width: 600px) {
  .mihseb-app { padding: 14px 12px 48px; }
  .mihseb-result__value { font-size: 24px; }
  .mihseb-input { font-size: 18px; }
  .step-body { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   GRILLE D'OPÉRATIONS — icône au-dessus, libellé court dessous
   Les boutons de choix d'opération (conteneurs `xx-ops`) étaient une
   rangée d'étiquettes de largeurs inégales (123 à 194 px) empilée sur
   370 px de haut au téléphone : illisible et pénible au doigt.
   Les classes `mh-ops-grid` / `mh-op-tile` sont posées par le script
   partagé (mihseb-render.js) ; sans lui, l'affichage d'origine reste.
   ══════════════════════════════════════════════════════════════════ */
.mh-ops-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  align-items: stretch;      /* tuiles d'égale hauteur sur une rangée */
}
.mh-op-tile {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto !important;
  min-height: 62px;          /* mesuré 71 à 82 px : confortable au doigt */
  padding: 8px 4px;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
}
.mh-op-tile .mh-op-ic {
  font-size: 24px;
  line-height: 1;
  display: block;
}
.mh-op-tile .mh-op-lb {
  font-size: 9.5px;
  font-weight: 700;
  display: -webkit-box;
  /* 4 lignes : mesuré, aucun libellé n'est coupé sur les 17 calculateurs.
     Ne pas descendre à 3 « pour gagner de la place » : au doigt il n'y a pas
     de survol, donc un texte coupé est un texte définitivement perdu. */
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 700px) {
  .mh-ops-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .mh-op-tile  { min-height: 76px; }
  .mh-op-tile .mh-op-ic { font-size: 28px; }
  .mh-op-tile .mh-op-lb { font-size: 11.5px; }
}