/* ʿOmra en direct v2 — écran du pèlerin (partagé par l'appli et le simulateur) */
:root{--bg:#05070d;--card:#0e1220;--card2:#131a2c;--line:#222a40;--gold:#e2b84a;--gold2:#f5d27a;--ink:#f3eedf;--mut:#8e93a6;--ok:#3ccf7a;--warn:#ff8a5c;--bleu:#58a6ff}
.oe{height:100%;width:100%;max-width:100vw;display:flex;flex-direction:column;gap:7px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;position:relative;overflow:hidden}
.oe *{box-sizing:border-box}
.oe>*{flex-shrink:0}                                    /* rien ne s'écrase : seules la carte et l'invocation cèdent de la place */
.oe .cache{display:none!important}
.oe button{font:700 1rem system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;border:0;border-radius:14px;cursor:pointer;color:#0a0a0a;background:var(--gold);padding:12px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.oe button:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}
.oe button:disabled{opacity:.45;cursor:default}
.oe button.alt{background:#182035;color:var(--ink);border:1px solid var(--line)}

/* en-tête */
.oe-haut{display:flex;flex-direction:column;gap:4px}
.oe-chips{display:flex;gap:6px;flex-wrap:wrap}
.oe-chip{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:#232a3f;color:var(--mut)}
.oe-chip.on{background:var(--ok);color:#06210f}.oe-chip.mid{background:var(--gold);color:#1a1300}.oe-chip.off{background:#3a2228;color:#ff9b9b}
.oe-titre{font-size:1.3rem;font-weight:800;color:var(--gold2);line-height:1.2}
.oe-aide{font-size:.86rem;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* frise des grandes étapes */
.oe-frise{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.oe-frise span{font-size:.62rem;font-weight:700;text-align:center;padding:4px 2px;border-radius:8px;background:#121829;color:#5d6380;border:1px solid #1b2235;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oe-frise span.fait{background:#14301f;color:#7fe0a6;border-color:#1f4a30}
.oe-frise span.ici{background:var(--gold);color:#1a1300;border-color:var(--gold)}

/* compteur */
.oe-compteur{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.oe-n{font-size:2.3rem;font-weight:900;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.oe-n small{font-size:1.05rem;font-weight:800;color:var(--gold2);letter-spacing:0}
.oe-sous{font-size:.9rem;font-weight:600;color:var(--ink)}
.oe-points{display:flex;gap:7px}
.oe-points i{flex:1;max-width:30px;height:10px;border-radius:6px;background:#232a3f;border:1px solid #39425e}
.oe-points i.on{background:var(--gold);border-color:var(--gold)}
.oe-points i.cours{background:transparent;border:2px solid var(--gold)}
.oe-barre{height:6px;background:#1a2033;border-radius:9px;overflow:hidden}
.oe-barre div{height:100%;width:0;background:var(--gold);transition:width .4s}
.oe-compteur.vert{border-color:#2f8f57;box-shadow:0 0 0 2px #2f8f5744 inset}
.oe-compteur.vert .oe-barre div{background:var(--ok)}

/* emplacement de la carte (appli seulement) */
.oe-carte{position:relative;flex:1 1 0;min-height:100px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0a0d18}

/* message en cours */
.oe-message{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:.95rem;min-height:2.8em;max-height:24%;overflow:auto;flex:0 1 auto!important;display:flex;gap:10px;align-items:flex-start}   /* le bouton principal reste toujours visible */
.oe-message .ic{flex:0 0 auto;font-size:1.1rem;line-height:1.3}
.oe-message .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.oe-message.sans-voix{border-color:var(--gold);background:#2a210b;font-size:1.12rem;font-weight:700;color:#fff3cf}
.oe-message.vide{color:var(--mut)}
.oe-ondes{display:inline-flex;gap:2px;align-items:flex-end;height:14px;margin-left:6px;vertical-align:middle}
.oe-ondes b{width:3px;background:var(--gold2);border-radius:2px;animation:oe-onde 1s ease-in-out infinite}
.oe-ondes b:nth-child(2){animation-delay:.2s}.oe-ondes b:nth-child(3){animation-delay:.4s}
@keyframes oe-onde{0%,100%{height:4px}50%{height:14px}}

/* bandeau (refus, informations, mode manuel) */
.oe-bandeau{border-radius:12px;padding:9px 12px;font-weight:700;font-size:.95rem;background:#3a2a10;color:#ffdf9a;border:1px solid #6b4f16}
.oe-bandeau.refus{background:#3a1f1a;color:#ffc2ad;border-color:#7a3626}
.oe-bandeau.ok{background:#11301f;color:#9ff0c0;border-color:#2b6b45}
.oe-mode{border-radius:12px;padding:7px 12px;font-size:.85rem;font-weight:700;background:#1d2440;color:#c9d4ff;border:1px solid #34407a}

/* bouton principal */
.oe-ok{position:relative;overflow:hidden;font-size:1.4rem!important;padding:22px 14px!important;border-radius:18px!important;min-height:76px}
.oe-ok .rempli{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:rgba(255,255,255,.28);pointer-events:none}
.oe-ok .lib{position:relative}
.oe-ok.pulse{background:var(--ok)!important;animation:oe-pulse 1.2s ease-in-out infinite}
@keyframes oe-pulse{50%{box-shadow:0 0 0 10px rgba(60,207,122,.25)}}
@media (prefers-reduced-motion:reduce){.oe-ok.pulse{animation:none}.oe-ondes b{animation:none;height:10px}}
.oe-indice{text-align:center;font-size:.8rem;color:var(--gold2);min-height:1.1em}
.oe-outils{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.oe-outils button{font-size:.86rem;padding:10px 6px;min-height:54px;line-height:1.2;white-space:normal}
.oe-pause[aria-pressed="true"]{background:var(--gold)!important;color:#1a1300!important}

/* pause pour la prière */
.oe.en-pause .oe-compteur,.oe.en-pause .oe-carte{opacity:.45}
.oe-voile{position:absolute;inset:0;z-index:50;background:#05070dee;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;text-align:center}
.oe-voile h3{color:var(--gold2);font-size:1.4rem}
.oe-voile p{color:var(--ink);max-width:30em}

/* invocation arabe en cours (invocations.js) : arabe en grand à droite, phonétique, traduction */
.oe-invoc{background:linear-gradient(180deg,#1c1709,#141109);border:1px solid #6b5418;border-radius:14px;padding:10px 14px 9px;max-height:32%;overflow:auto;display:flex;flex-direction:column;gap:5px;flex:0 1 auto!important;min-height:64px}
.oe-invoc .li{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.oe-invoc .ar{font-family:"Noto Naskh Arabic","Geeza Pro","Traditional Arabic","Arabic Typesetting",serif;font-size:1.6rem;line-height:1.85;text-align:right;direction:rtl;color:#fff6dc}
.oe-invoc .ar span{border-radius:6px;padding:0 2px;transition:background .15s,color .15s}
.oe-invoc .ar span.dit{background:var(--gold);color:#1a1300}
.oe-invoc .ph{font-size:.92rem;font-style:italic;color:var(--gold2)}
.oe-invoc .fr{font-size:.9rem;color:var(--ink)}
.oe-invoc .src{font-size:.72rem;color:var(--mut)}

/* vue du ciel (vueciel.js) : canvas plein cadre + boutons à droite */
.vc{position:absolute;inset:0;background:#07090f;overflow:hidden}
.vc-c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.vc-btns{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px;z-index:5}
.vc-b{width:42px;height:42px;padding:0!important;border-radius:12px!important;background:rgba(14,18,32,.88)!important;color:var(--gold2)!important;border:1px solid var(--line)!important;font:800 .95rem system-ui,sans-serif!important}
.vc-b.cache{display:none}
.vc-attr{position:absolute;left:8px;bottom:4px;font:600 .62rem system-ui,sans-serif;color:rgba(243,238,223,.55);pointer-events:none;z-index:5}