/* Apprendre à lire l'heure */
.lc { width: 100%; display: flex; justify-content: center; }
.lc-stage { --lcs: calc(clamp(260px, min(36vw, 60vh), 470px) * var(--cs, 1)); display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 72px); }
.lc-clock { flex: none; width: var(--lcs); height: var(--lcs); }
/* Le cadran : traits blancs sur la couleur, comme l'horloge du site */
.lc-face, .lc-mini { display: block; width: 100%; height: 100%; overflow: visible; color: var(--white); fill: none; stroke: currentColor; stroke-linecap: round; }
.lc-face { touch-action: none; cursor: grab; outline: none; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.lc-face:focus-visible .lc-ring { stroke-dasharray: 6 9; }
.lc-face.is-drag { cursor: grabbing; }
.lc-face text, .lc-mini text { fill: currentColor; stroke: none; text-anchor: middle; dominant-baseline: central; }
.lc-nums text { font-family: var(--f-display); font-size: 34px; }
.lc-ml text { font-family: var(--f-body); font-weight: 700; font-size: 14px; opacity: .72; }
.lc-face.no-mins .lc-ml { display: none; }
.lc-hand { stroke: currentColor; }
.lc-hit { stroke: transparent; pointer-events: stroke; }
.lc-cap { fill: currentColor; stroke: none; }
.lc-h, .lc-m { transform-box: view-box; transform-origin: 150px 150px; }
.lc-face.is-anim .lc-h, .lc-face.is-anim .lc-m { transition: transform .6s var(--ease); }
.lc-face.is-ok .lc-ring { animation: lc-ok .9s var(--ease); }
@keyframes lc-ok { 0% { stroke-width: 7; } 30% { stroke-width: 16; } 100% { stroke-width: 7; } }
/* À droite : l'heure en chiffres et en lettres, ou la question du jeu */
.lc-panel { flex: none; width: min(460px, 38vw); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.6vh, 16px); text-align: left; }
.lc-ask { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 500; }
.lc-read { display: flex; flex-direction: column; gap: .2em; }
.lc-digital { font-family: var(--f-display); font-size: calc(clamp(64px, min(8vw, 13vh), 128px) * var(--cs, 1)); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-words { font-size: calc(clamp(22px, 2.4vw, 32px) * var(--cs, 1)); font-weight: 500; line-height: 1.2; text-wrap: balance; min-height: 2.4em; }
.lc-feedback { margin: 0; min-height: 1.4em; font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; line-height: 1.35; }
.lc-feedback:empty { visibility: hidden; }
.lc-level { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.6; text-align: left; }
.lc-score { white-space: nowrap; font-weight: 700; }
.lc-actions { justify-content: flex-start; }
.lc-act { min-height: 54px; padding: 0 26px; font-size: 17px; }
.lc-act[hidden] { display: none; }
/* Réponses (Quelle heure est-il ?) */
.lc-answers { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.lc-answers[hidden] { display: none; }
.lc-ans { display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 64px; padding: 8px 18px; border: 0; border-radius: 16px; background: var(--frame); color: var(--white); text-align: left; transition: background-color .15s, color .15s, transform .12s; }
.lc-ans:hover:not(:disabled) { background: var(--frame-hi); }
.lc-ans:active:not(:disabled) { transform: scale(.98); }
.lc-ans b { flex: none; font-family: var(--f-display); font-weight: 400; font-size: 38px; line-height: 1.1; min-width: 2.6em; }
.lc-ans span { font-size: 17px; font-weight: 500; line-height: 1.25; }
.lc-ans.is-right { background: var(--white); color: var(--bg); }
.lc-ans.is-wrong { box-shadow: inset 0 0 0 2.5px var(--white); opacity: .75; animation: lc-no .4s var(--ease); }
.lc-ans:disabled { cursor: default; opacity: .6; }
.lc-ans.is-right:disabled { opacity: 1; }
.lc-bar .lc-modes { display: inline-flex; align-items: center; gap: 4px; }
@keyframes lc-no { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@media (max-width: 860px) {
  .lc-stage { flex-direction: column; gap: 14px; --lcs: calc(clamp(220px, min(80vw, 40vh), 380px) * var(--cs, 1)); }
  .lc[data-mode="read"] .lc-stage { --lcs: calc(clamp(200px, min(66vw, 33vh), 340px) * var(--cs, 1)); }
  .lc-panel { width: 100%; max-width: 520px; align-items: center; text-align: center; gap: 10px; }
  .lc-read { align-items: center; }
  .lc-digital { font-size: calc(clamp(48px, 13vw, 72px) * var(--cs, 1)); }
  .lc-words { font-size: calc(clamp(19px, 5vw, 24px) * var(--cs, 1)); min-height: 0; }
  .lc-level { text-align: center; }
  .lc-actions { justify-content: center; width: 100%; flex-wrap: nowrap; }
  .lc-act { flex: 1 1 0; padding: 0 12px; }
  .lc-answers { flex-direction: row; gap: 8px; }
  .lc-ans { flex: 1 1 0; flex-direction: column; align-items: center; gap: 2px; min-height: 0; padding: 8px 6px; text-align: center; }
  .lc-ans b { font-size: 28px; min-width: 0; }
  .lc-ans span { font-size: 13px; }
}
@media (max-width: 520px) { .lc-bar .lc-xtra { display: none; } .lc-bar .chip-btn { padding: 0 13px; } }

/* ---------- Fiche à imprimer (dans le texte de la page) ---------- */
.lc-sheet-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.lc-sheet-btn { min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--bg); color: #FFFFFF; font-weight: 700; font-size: 16px; cursor: pointer; }
.lc-sheet-btn--ghost { background: var(--tint, rgba(0, 0, 0, .06)); color: var(--bg); }
.lc-sheet { margin: 10px 0 24px; padding: 22px; border-radius: 20px; border: 2px solid var(--line, rgba(0, 0, 0, .12)); color: var(--bg); }
.lc-sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 18px; }
.lc-sheet-head span { opacity: .8; }
.lc-sheet-h { margin: 18px 0 8px !important; font-weight: 700; }
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px 18px; }
.lc-cell { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lc-mini { width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; color: inherit; }
.lc-mini .lc-ml text { font-size: 15px; }
.lc-cell figcaption { min-height: 28px; font-family: var(--f-display); font-size: 24px; line-height: 1.1; }
.lc-line { display: inline-block; width: 92px; border-bottom: 2px solid currentColor; height: 24px; }
.lc-sheet-foot { margin: 18px 0 0 !important; font-size: 13px !important; opacity: .7; }
.lc-print-root { display: none; }
@media print {
  html.lc-printing body > *:not(.lc-print-root) { display: none !important; }
  html.lc-printing .lc-print-root { display: block; color: #000; font-family: 'DM Sans', Arial, sans-serif; }
  .lc-print-root .lc-grid { grid-template-columns: repeat(3, 1fr); gap: 10mm 8mm; }
  .lc-print-root .lc-mini { max-width: 52mm; color: #000; }
  .lc-print-root .lc-sheet-head { font-size: 14pt; border-bottom: 1px solid #000; padding-bottom: 4mm; }
  .lc-print-root .lc-sheet-h { font-size: 13pt; margin: 6mm 0 3mm; }
  .lc-print-root .lc-cell figcaption { font-size: 16pt; }
  .lc-print-root .lc-sheet-foot { font-size: 8pt; margin-top: 8mm; }
  @page { margin: 12mm; }
}
@media (max-width: 380px) { .lc-bar .chip-btn { padding: 0 9px; font-size: 14px; } .lc-bar { gap: 2px; } }