/* Page « stockage-electricite-direct » (design 1 retenu + podium 3D du design 2). Complète ../ciel.css.
   Partie 1 : mise en page reprise du design 1. Partie 2 : podium. Partie 3 : CSS de tous les contrôles (thème Ciel). */

/* ---------- 1. Mise en page ---------- */
.heros { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .heros { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.maintenant { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.maintenant h2 { margin: 0; font: 400 26px/1.1 var(--serif); }
.balance { position: relative; height: 56px; margin: 18px 4px 4px; }
.balance .rail { position: absolute; left: 0; right: 0; top: 24px; height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--charge) 75%, var(--carte)), var(--fond) 47%, var(--fond) 53%, color-mix(in srgb, var(--decharge) 75%, var(--carte))); }
.balance .zero { position: absolute; left: 50%; top: 16px; width: 2px; height: 26px; background: var(--texte); opacity: .45; }
.balance .curs { position: absolute; top: 12px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: var(--carte); border: 3px solid currentColor; box-shadow: var(--ombre-haute); display: grid; place-items: center; font-weight: 800; }
.balance .curs.de { color: var(--decharge); } .balance .curs.ch { color: var(--charge); } .balance .curs.nul { color: var(--pale); }
.balance .bornes { position: absolute; left: 0; right: 0; top: 46px; display: flex; justify-content: space-between; font-size: 12px; color: var(--pale); font-weight: 600; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }

.journee { padding: 22px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 980px) { .journee { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.cadran-boite { position: relative; width: min(100%, 580px); margin: 0 auto; aspect-ratio: 1; touch-action: none; outline: none; cursor: crosshair; }
.cadran-boite svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cadran-boite canvas { position: absolute; left: 30%; top: 28%; width: 40%; height: 40%; display: none; pointer-events: none; }
.j3d .cadran-boite canvas { display: block; }
.j3d .cadran-boite .bat-plate { display: none; }
.cad-h { fill: var(--pale); font: 700 15px var(--sans); }
.cad-h.fort { fill: var(--texte); font-size: 17px; }
.lecture { position: absolute; left: 50%; bottom: 33%; transform: translate(-50%, 50%); text-align: center; pointer-events: none; background: color-mix(in srgb, var(--carte) 90%, transparent); border-radius: 14px; padding: 4px 10px; box-shadow: var(--ombre); }
.lecture b { display: block; font: 400 24px/1 var(--serif); }
.lecture span { font-size: 13px; font-weight: 700; }
@media (max-width: 480px) { .lecture b { font-size: 18px; } .lecture span { font-size: 11.5px; } .cad-h { font-size: 19px; } }
.j-droite h3 { margin: 16px 0 6px; font-size: 15px; }
.leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; }
.leg li { display: inline-flex; align-items: center; gap: 7px; }
.leg i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: none; }
.leg i.rond { border-radius: 50%; }
.leg i.tirets { background: none; border-top: 3px dotted var(--decharge); border-radius: 0; height: 0; width: 18px; }
.moments { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.moments li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; background: var(--fond); border-radius: 16px; padding: 10px 12px; font-size: 15px; }
.moments li b:first-child { font: 400 22px/1 var(--serif); }
.j-texte { margin: 14px 0 0; font-size: 15.5px; }
.tempo-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--fond); font-size: 14.5px; }
.tempo-note b { font-weight: 800; }

/* ---------- 2. Podium 3D + cartes ---------- */
.podium-boite { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
@media (min-width: 900px) { .podium-boite { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }
.pod-carte { position: relative; padding: 0; overflow: hidden; min-height: 260px; display: none; }
.j3d .pod-carte { display: block; }
.pod-scene { position: relative; width: 100%; height: 100%; min-height: 260px; aspect-ratio: 16 / 10; touch-action: manipulation; }
.pod-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pod-aide { position: absolute; left: 14px; bottom: 12px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--pale); background: color-mix(in srgb, var(--carte) 85%, transparent); padding: 3px 10px; border-radius: 999px; pointer-events: none; }
.pod-bulle { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; display: grid; gap: 1px; padding: 8px 12px; border-radius: 14px; background: var(--carte); color: var(--texte); border: 1px solid var(--trait); box-shadow: var(--ombre-haute); font-size: 13.5px; white-space: nowrap; }
.pod-bulle[hidden], .pod-info[hidden] { display: none; }
.pod-bulle b { font-weight: 800; }
.pod-info { position: absolute; right: 12px; top: 12px; z-index: 4; width: min(300px, calc(100% - 24px)); padding: 14px 16px 12px; border-radius: 20px; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre-haute); font-size: 14px; }
.pod-info h3 { margin: 2px 0 0; font: 700 18px var(--sans); padding-right: 36px; } .pod-info h3 small { font-weight: 500; color: var(--pale); font-size: 13px; }
.pod-info .gros { margin: 4px 0; font: 400 40px/1 var(--serif); } .pod-info .gros small { font: 700 14px var(--sans); color: var(--pale); }
.pod-info p { margin: 6px 0 0; }
.pod-info .fermer-mini { position: absolute; right: 10px; top: 10px; }
@media (max-width: 560px) { .pod-info { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; padding: 10px 12px 8px; font-size: 13px; } .pod-info .gros { font-size: 30px; } .pod-info h3 { font-size: 16px; } .pod-scene { aspect-ratio: 1; } .pod-aide { font-size: 11.5px; left: 8px; bottom: 8px; } }

.podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.podium li { position: relative; padding: 14px 18px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.podium li.actif { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sto) 55%, transparent), var(--ombre); }
.podium .rangp { font: 400 52px/1 var(--serif); color: var(--sto); opacity: .35; position: absolute; right: 14px; top: 6px; }
.podium h3 { margin: 0; font: 700 17px var(--sans); }
.podium .gros { margin: 4px 0 2px; font: 400 40px/1 var(--serif); }
.podium .gros small { font: 700 14px var(--sans); color: var(--pale); }
.podium p { margin: 3px 0 0; font-size: 14px; color: var(--pale); }
.podium p.etat { color: var(--texte); }
.podium .premier { background: linear-gradient(160deg, color-mix(in srgb, var(--sto) 16%, var(--carte)), var(--carte) 70%); }
.podium .premier .gros { font-size: 52px; }
@media (min-width: 640px) and (max-width: 899px) { .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.classement tr.vise td { animation: vise 2.4s ease-out; }
@keyframes vise { 0%, 40% { background: color-mix(in srgb, var(--sto) 18%, var(--carte)); } 100% { background: transparent; } }
.classement tr { scroll-margin-top: 90px; }
.date-multi small { display: block; color: var(--pale); font-size: 12px; line-height: 1.35; }
.badge-verif { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--solaire) 22%, var(--carte)); color: var(--texte); white-space: nowrap; }

/* ---------- 3. Contrôles (thème Ciel) : sélecteur de journée, boutons, détails, focus clavier, sombre, mobile ---------- */
.modes { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--fond); gap: 2px; flex-wrap: wrap; border: 1px solid var(--trait); }
.modes button { font: 600 14px var(--sans); color: var(--pale); background: none; border: 0; border-radius: 999px; padding: 8px 15px; min-height: 40px; cursor: pointer; transition: background .2s, color .2s; }
.modes button:hover { color: var(--texte); background: color-mix(in srgb, var(--texte) 7%, transparent); }
.modes button[aria-pressed="true"] { background: var(--texte); color: var(--fond); box-shadow: 0 2px 6px -2px rgba(14, 26, 38, .4); }
.modes button[aria-pressed="true"]::before { content: "✓ "; font-weight: 800; }
@media (max-width: 480px) { .modes { display: flex; } .modes button { flex: 1 1 0; padding: 8px 8px; font-size: 13px; } }
.fermer-mini { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--trait); background: var(--fond); color: var(--texte); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fermer-mini:hover { background: var(--trait); }
details.tableau { margin-top: 14px; }
details.tableau > summary, .faq-liste summary { cursor: pointer; border-radius: 12px; }
details.tableau > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; background: var(--fond); border: 1px solid var(--trait); border-radius: 999px; font-weight: 700; font-size: 14px; list-style: none; }
details.tableau > summary::-webkit-details-marker { display: none; }
details.tableau > summary::before { content: "▸"; transition: transform .2s; }
details.tableau[open] > summary::before { transform: rotate(90deg); }
details.tableau > summary:hover { background: var(--trait); }
.tab-defile { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.tab-defile table { border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; min-width: 560px; width: 100%; }
.tab-defile th, .tab-defile td { padding: 6px 8px; border-bottom: 1px solid var(--trait); text-align: right; }
.tab-defile th:first-child, .tab-defile td:first-child { text-align: left; }
.tab-defile thead th { position: sticky; top: 0; background: var(--carte); font-size: 12px; color: var(--pale); }
.lien-fleche:hover { text-decoration-thickness: 2px; }
/* focus clavier visible partout (anneau doux du thème), jamais sur un simple clic */
.modes button:focus-visible, .fermer-mini:focus-visible, details > summary:focus-visible, .podium li:focus-visible, .pod-info a:focus-visible,
.classement a:focus-visible, .lien-fleche:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; }
.cadran-boite:focus-visible { outline: 3px solid var(--lien); outline-offset: 4px; border-radius: 50%; }
.podium li[tabindex] { cursor: default; }
.podium li:focus-visible { outline-offset: 3px; }
/* mode sombre : contrastes des contrôles */
:root[data-theme="dark"] .modes button[aria-pressed="true"] { box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modes button[aria-pressed="true"] { box-shadow: none; } }
@media (hover: none) { .cadran-boite { cursor: default; } }
@media (prefers-reduced-motion: reduce) { .classement tr.vise td { animation: none; background: color-mix(in srgb, var(--sto) 14%, var(--carte)); } }

/* Audit 16/10 : cibles tactiles */
@media (pointer: coarse), (max-width: 760px) { details.tableau > summary, .modes button { min-height: 44px; } }