/* ============================================================
   MH Quiz HACCP : carte de quiz et liste des quiz
   Couleurs du site : bleu #1e5fa6, crème #f7f4e9, filet #e7e3d6
   ============================================================ */

.mhq { --bleu:#1e5fa6; --bleu-f:#164a82; --creme-f:#f7f4e9; --filet:#e7e3d6; --gris:#8a8571; --noir:#141414; --bleu-c:#e9f0f8; --vert:#1f7a3f; --vert-c:#e6f4ea; --rouge:#b3261e; --rouge-c:#fdf0ee; font-size:17px; line-height:1.6; }
.mhq *, .mhq *::before { box-sizing:border-box; }
.mhq-sans { font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

.mhq-carte { background:#fff; border:1px solid var(--filet); border-radius:14px; padding:26px 28px; }
.mhq-progression { display:flex; align-items:center; gap:14px; font-size:13px; color:var(--gris); margin-bottom:18px; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.mhq-barre { flex:1; height:6px; background:var(--creme-f); border-radius:999px; overflow:hidden; }
.mhq-barre i { display:block; height:100%; width:0; background:var(--bleu); border-radius:999px; transition:width .3s; }
.mhq-theme { color:var(--bleu); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 6px; }
.mhq h2.mhq-q { font-size:22px; line-height:1.3; margin:0 0 20px; color:var(--noir); }

.mhq-options { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.mhq-options li { margin:0; }
.mhq-options button { width:100%; text-align:left; background:#fff; border:1px solid var(--filet); border-radius:12px; padding:14px 16px 14px 50px; font:inherit; font-size:16px; line-height:1.45; cursor:pointer; position:relative; color:inherit; transition:border-color .15s, background .15s; }
.mhq-options button::before { content:attr(data-lettre); position:absolute; left:14px; top:12px; width:26px; height:26px; border-radius:999px; background:var(--creme-f); color:var(--bleu); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.mhq-options button:hover:not(:disabled), .mhq-options button:focus-visible { border-color:var(--bleu); background:var(--bleu-c); outline:none; }
.mhq-options button:disabled { cursor:default; }
.mhq-options button.mhq-juste { border-color:var(--vert); background:var(--vert-c); }
.mhq-options button.mhq-juste::before { background:var(--vert); color:#fff; content:"✓"; }
.mhq-options button.mhq-faux { border-color:var(--rouge); background:var(--rouge-c); }
.mhq-options button.mhq-choisi { border-color:var(--bleu); background:var(--bleu-c); }
.mhq-options button.mhq-choisi::before { background:var(--bleu); color:#fff; }
.mhq-recap-expl { flex-basis:100%; margin:6px 0 0 32px; font-size:13.5px; line-height:1.5; color:#5b5749; }
.mhq-recap li:has(.mhq-recap-expl) { flex-wrap:wrap; }
.mhq-options button.mhq-faux::before { background:var(--rouge); color:#fff; content:"✕"; }

.mhq-explication { margin-top:18px; padding:16px 18px; border-radius:12px; background:var(--bleu-c); border-left:4px solid var(--bleu); font-size:15.5px; }
.mhq-explication.mhq-ok { background:var(--vert-c); border-left-color:var(--vert); }
.mhq-explication.mhq-ko { background:var(--rouge-c); border-left-color:var(--rouge); }
.mhq-explication strong.mhq-verdict { display:block; margin-bottom:4px; }
.mhq-explication .mhq-source { display:block; margin-top:8px; font-size:13px; color:var(--gris); }

.mhq-actions { margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.mhq-btn { display:inline-block; border:0; border-radius:999px; padding:11px 22px; font-size:14px; font-weight:600; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor:pointer; text-decoration:none; line-height:1.3; }
.mhq-btn-bleu { background:var(--bleu); color:#fff; } .mhq-btn-bleu:hover { background:var(--bleu-f); color:#fff; }
.mhq-btn-noir { background:var(--noir); color:#fff; } .mhq-btn-noir:hover { color:#fff; }
.mhq-btn-clair { background:#fff; color:var(--noir); border:1px solid var(--filet); }

.mhq-score { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; background:var(--bleu-c); border-radius:14px; padding:22px 24px; margin:0 0 20px; }
.mhq-score b { display:block; font-size:34px; line-height:1.1; color:var(--bleu); }
.mhq-score span { font-size:14px; color:#33301f; }
.mhq-palier { font-size:20px; font-weight:700; margin:0 0 6px; color:var(--noir); }
.mhq-mieux { font-size:13px; color:var(--gris); margin:0; }

.mhq-recap { margin:22px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.mhq-recap li { display:flex; gap:10px; align-items:flex-start; font-size:15px; padding:10px 12px; border-radius:10px; background:var(--creme-f); margin:0; }
.mhq-recap li i { flex:0 0 22px; height:22px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; font-weight:700; color:#fff; margin-top:2px; }
.mhq-recap li.mhq-ok i { background:var(--vert); } .mhq-recap li.mhq-ko i { background:var(--rouge); }
.mhq-recap li a { font-size:13px; color:var(--gris); white-space:nowrap; margin-left:auto; }

.mhq-ressource { background:var(--creme-f); border:1px solid var(--filet); border-radius:14px; padding:20px 24px; margin-top:24px; }
.mhq-ressource p { margin:0 0 8px; }
.mhq-ressource .mhq-actions { margin-top:10px; }
.mhq-nom { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:22px; font-size:14px; color:var(--gris); }
.mhq-nom input { padding:9px 14px; border:1px solid #d9d4c3; border-radius:999px; font:inherit; font-size:15px; min-width:220px; }
.mhq-avert { font-size:13px; color:var(--gris); margin:28px 0 0; }
.mhq-copie { font-size:13px; color:var(--gris); }

/* Mode audit (inspection blanche) */
.mhq-zone-intro { margin:0 0 16px; font-size:15px; color:#5b5749; }
.mhq-points { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mhq-point { margin:0; border:1px solid var(--filet); border-radius:12px; padding:14px 16px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.mhq-point-texte { flex:1 1 320px; font-size:16px; line-height:1.4; }
.mhq-point-aide { display:block; margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--gris); }
.mhq-point-choix { display:flex; gap:6px; flex:0 0 auto; }
.mhq-choix { border:1px solid var(--filet); background:#fff; border-radius:999px; padding:7px 12px; font-size:13px; font-weight:600; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor:pointer; color:var(--noir); }
.mhq-choix:hover { border-color:var(--bleu); }
.mhq-choix-0.mhq-actif { background:var(--vert); border-color:var(--vert); color:#fff; }
.mhq-choix-1.mhq-actif { background:var(--rouge); border-color:var(--rouge); color:#fff; }
.mhq-choix-2.mhq-actif { background:var(--gris); border-color:var(--gris); color:#fff; }
.mhq-btn:disabled { opacity:.45; cursor:not-allowed; }
.mhq-zones { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:8px; }
.mhq-zones li { margin:0; display:grid; grid-template-columns:1fr 2fr auto; gap:12px; align-items:center; font-size:14px; }
.mhq-zones b { color:var(--bleu); }
.mhq-niveau-tres-satisfaisant { color:var(--vert); } .mhq-niveau-satisfaisant { color:#2e7d32; } .mhq-niveau-a-ameliorer { color:#b26a00; } .mhq-niveau-urgent { color:var(--rouge); }
.mhq-plan { margin:0; padding-left:0; list-style:none; counter-reset:plan; display:grid; gap:10px; }
.mhq-plan li { margin:0; padding:12px 14px 12px 44px; border-radius:10px; background:var(--creme-f); position:relative; font-size:15px; }
.mhq-plan li::before { counter-increment:plan; content:counter(plan); position:absolute; left:12px; top:12px; width:22px; height:22px; border-radius:999px; background:var(--gris); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mhq-plan li.mhq-majeur::before { background:var(--rouge); }
.mhq-plan-zone { display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bleu); margin-bottom:2px; }
.mhq-plan li.mhq-majeur .mhq-plan-zone { color:var(--rouge); }
.mhq-plan-aide { display:block; font-size:13.5px; color:#5b5749; margin-top:2px; }
.mhq-plan li a { display:inline-block; margin-top:4px; font-size:13px; }
.mhq-plan-ligne { display:none; margin-top:6px; font-size:12px; color:var(--gris); }
@media print { .mhq-plan-ligne { display:block; } .mhq-plan li { break-inside:avoid; } }
@media (max-width:600px) { .mhq-point { padding:12px; } .mhq-point-choix { width:100%; display:grid; grid-template-columns:1fr 1fr 1.3fr; } .mhq-choix { text-align:center; padding:9px 2px; white-space:nowrap; } .mhq-zones li { grid-template-columns:1fr auto; } .mhq-zones li { gap:4px 12px; } .mhq-zones li .mhq-barre { grid-column:1 / -1; order:3; } }

/* Liste des quiz (page hub) */
.mhq-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.mhq-tuile { background:#fff; border:1px solid #e7e3d6; border-radius:14px; padding:18px 20px; text-decoration:none; color:inherit; display:block; transition:border-color .15s; }
.mhq-tuile:hover { border-color:#1e5fa6; color:inherit; }
.mhq-tuile b { display:block; font-size:17px; margin-bottom:4px; color:#141414; }
.mhq-tuile span { font-size:13.5px; color:#8a8571; display:block; }
.mhq-tuile em { display:inline-block; margin-top:8px; font-style:normal; font-size:12px; color:#1e5fa6; font-weight:700; }

/* Impression : seule la feuille de résultat */
.mhq-impression { display:none; }
@media print {
  body * { visibility:hidden; }
  .mhq, .mhq * { visibility:visible; }
  .mhq { position:absolute; left:0; top:0; width:100%; }
  .mhq-actions, .mhq-nom input { display:none !important; }
  .mhq-impression { display:block; font-size:14px; margin:0 0 16px; }
  .mhq-carte { border:0; padding:0; }
}
@media (max-width:600px) {
  .mhq-carte { padding:20px 18px; }
  .mhq h2.mhq-q { font-size:20px; }
  .mhq-recap li { flex-wrap:wrap; }
  .mhq-recap li span { flex:1 1 calc(100% - 32px); }
  .mhq-recap li a { margin-left:32px; }
  .mhq-score { grid-template-columns:repeat(3,1fr); gap:10px; padding:16px; }
  .mhq-score b { font-size:24px; }
}