/* Jour Tempo, page « stockage d'électricité en direct » (+ panneau Bioénergies) : reprise de
   docs/projets-tempo/maquettes-sources/stockage-bioenergies/ (ciel.css sans le socle du site, + page-stockage/page.css), validée le 16/10/2026. */
/* ---------- Jetons du thème Ciel (recopiés du site) ---------- */
:root {
  --accent: #1b4fd6; --accent-texte: #fff; --fond: #e9eef3; --texte: #0e1a26; --doux: #d3dbe3;
  --carte: #ffffff; --pale: #4d5b6a; --trait: #d3dbe3; --lien: #1b4fd6;
  --bleu: #1b4fd6; --rouge: #c3261c; --encre: #0e1a26;
  --ciel-a: #cfe0f5; --ciel-b: #f4f7fa; --bande: #0e1a26;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ombre: 0 1px 2px rgba(14, 26, 38, .05), 0 8px 24px -12px rgba(14, 26, 38, .18);
  --ombre-haute: 0 2px 4px rgba(14, 26, 38, .06), 0 22px 44px -18px rgba(14, 26, 38, .28);
  /* Une couleur par source (toujours doublée d'un nom, d'une icône et d'un chiffre) */
  --nuc: #1b4fd6; --sol: #e3a400; --eol: #23a596; --hyd: #1688c4; --gaz: #df6328; --bio: #4c9637; --fos: #6b7480; --pomp: #7aa7c9;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0b1118; --carte: #141c26; --texte: #eef2f6; --pale: #a3b0bd; --trait: #2a3644; --doux: #222d39;
    --lien: #9db8ff; --accent: #9db8ff; --accent-texte: #0b1118; --bleu: #2f63e6;
    --ciel-a: #13233a; --ciel-b: #0e1622; --bande: #04070b; color-scheme: dark;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
    --ombre-haute: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -18px rgba(0, 0, 0, .75);
    --nuc: #5b86ff; --sol: #f2c13b; --eol: #3cc6b5; --hyd: #44b2ea; --gaz: #f2884f; --bio: #6fbe57; --fos: #8f99a6; --pomp: #5d87a8;
  }
}
:root[data-theme="dark"] {
  --fond: #0b1118; --carte: #141c26; --texte: #eef2f6; --pale: #a3b0bd; --trait: #2a3644; --doux: #222d39;
  --lien: #9db8ff; --accent: #9db8ff; --accent-texte: #0b1118; --bleu: #2f63e6;
  --ciel-a: #13233a; --ciel-b: #0e1622; --bande: #04070b; color-scheme: dark;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
  --ombre-haute: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -18px rgba(0, 0, 0, .75);
  --nuc: #5b86ff; --sol: #f2c13b; --eol: #3cc6b5; --hyd: #44b2ea; --gaz: #f2884f; --bio: #6fbe57; --fos: #8f99a6; --pomp: #5d87a8;
}

.tete-page h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.02; margin: 10px 0 14px; max-width: 18ch; }
.verif { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; color: var(--pale); }
.verif strong { color: var(--texte); font-weight: 600; }

.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 28px; box-shadow: var(--ombre); }
.etiq { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pale); }
.section { margin-top: 56px; }
.section-tete { display: flex; align-items: end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.section-tete h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.04; margin: 0; }
.section-tete p { margin: 6px 0 0; color: var(--pale); font-size: 15px; max-width: 52ch; }

.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: auto 0 0; padding: 0; }
.chiffres > div { background: var(--fond); border-radius: 18px; padding: 12px 14px 10px; min-width: 0; }
.chiffres dt { font-size: 13px; color: var(--pale); font-weight: 600; }
.chiffres dd { margin: 2px 0 0; font: 400 30px/1.05 var(--serif); white-space: nowrap; }
.chiffres dd small { font: 600 13px var(--sans); color: var(--pale); margin-left: 3px; }
@media (max-width: 520px) { .chiffres { grid-template-columns: 1fr 1fr; } .chiffres > div:last-child { grid-column: 1 / -1; } }
/* Mini-jeton plat (légendes, repli) */
.mini { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--c); color: var(--ci, #fff); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35); }
.mini svg { width: 17px; height: 17px; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tableau { margin-top: 12px; }
.tableau summary { cursor: pointer; font-weight: 700; font-size: 14.5px; min-height: 44px; display: flex; align-items: center; color: var(--lien); }
.tab-defile { overflow-x: auto; }
.tableau table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 640px; width: 100%; }
.tableau th, .tableau td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau th:first-child, .tableau td:first-child { text-align: left; }
/* FAQ, sources */
.faq-liste { overflow: hidden; }
.faq details + details { border-top: 1px solid var(--trait); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; cursor: pointer; list-style: none; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--fond); font-size: 20px; font-weight: 400; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--lien); }
.faq details p { margin: 0; padding: 0 20px 18px; font-size: 16px; line-height: 1.6; }
.sources-txt { padding: 18px 22px; font-size: 15px; }
.sources-txt p { margin: 0 0 8px; } .sources-txt p:last-child { margin: 0; }

/* Apparition douce */
.js .monte { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js .monte.vu { opacity: 1; transform: none; }
.js .src.monte.vu { transition: opacity .8s ease, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.js .src.monte.vu:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .monte { opacity: 1; transform: none; }
  .js .part-barre span { transform: none; }
}

/* ====================================================================================================
   Composants communs aux maquettes « stockage » (ajoutés pour ce dossier)
   ==================================================================================================== */
:root { --sto: #6a4fd6; --charge: #1f6fe0; --decharge: #d9620f; --solaire: #e3a400; --step: #1688c4; }
:root[data-theme="dark"] { --sto: #a38cff; --charge: #6aa8ff; --decharge: #ff9a4d; --solaire: #f2c13b; --step: #44b2ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sto: #a38cff; --charge: #6aa8ff; --decharge: #ff9a4d; --solaire: #f2c13b; --step: #44b2ea; } }

/* Jeton de tête (même jeton que la carte de la page Production) */
.tete-jeton { display: flex; align-items: center; gap: 14px; }
.jeton-tete { --t: 112px; position: relative; width: var(--t); height: var(--t); flex: none; margin: -8px -6px -8px -10px; }
.jeton-tete canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.jeton-tete .plat { position: absolute; inset: 16px; border-radius: 18px; display: grid; place-items: center; background: var(--c); color: #fff;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .16), inset 0 3px 0 rgba(255, 255, 255, .35), 0 8px 16px -10px rgba(14, 26, 38, .55); }
.jeton-tete .plat svg { width: 30px; height: 30px; }
.j3d .jeton-tete canvas { display: block; }
.j3d .jeton-tete .plat { display: none; }
.fil { margin: 0; font-size: 14px; color: var(--pale); }
.fil a { color: var(--pale); }

/* Sens charge / décharge : toujours flèche + mot + chiffre, jamais la couleur seule */
.sens { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.sens::before { font-weight: 800; }
.sens.ch { color: var(--charge); } .sens.ch::before { content: "↓"; }
.sens.de { color: var(--decharge); } .sens.de::before { content: "↑"; }
.sens.nul { color: var(--pale); } .sens.nul::before { content: "·"; }
.puce { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--fond); font-size: 13px; font-weight: 700; white-space: nowrap; }
.puce .pt { width: 8px; height: 8px; border-radius: 50%; background: #e0352b; animation: emission 2s ease-in-out infinite; }
.pastille-tempo { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #4f7dff; vertical-align: -1px; box-shadow: 0 0 0 2px var(--carte); }

/* Phrase-réponse */
.reponse { position: relative; padding: 26px 26px 22px; overflow: hidden; display: flex; flex-direction: column; }
.reponse::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--charge), var(--sto), var(--decharge)); }
.phrase { margin: 10px 0 16px; font: 400 clamp(27px, 3.2vw, 37px)/1.15 var(--serif); letter-spacing: -.01em; }
.phrase b { font-weight: 400; white-space: nowrap; }
.phrase b.de { color: var(--decharge); } .phrase b.ch { color: var(--charge); }

/* Classement */
.classement { padding: 6px 18px 12px; }
.classement table { width: 100%; border-collapse: collapse; font-size: 15px; }
.classement th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--pale); padding: 12px 6px 8px; border-bottom: 1px solid var(--trait); }
.classement td { padding: 11px 6px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.classement tr:last-child td { border-bottom: 0; }
.classement .rg { width: 38px; font: 400 26px/1 var(--serif); color: var(--pale); }
.classement tr:nth-child(-n+3) .rg { color: var(--texte); }
.classement .lieu b { display: block; font-weight: 700; }
.classement .lieu small { color: var(--pale); font-size: 13px; }
.classement .mw { width: 34%; }
.barre-mw { display: flex; align-items: center; gap: 8px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barre-mw i { display: block; height: 10px; border-radius: 99px; background: var(--sto); min-width: 3px; }
.classement .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.classement .direct { margin-top: 3px; }
@media (max-width: 640px) { .classement .col-date, .classement .col-duree { display: none; } .classement .mw { width: auto; } .classement { padding: 4px 12px 8px; } }

/* Régions */
.regions { list-style: none; margin: 0; padding: 14px 18px; display: grid; gap: 4px; }
.regions li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(7.5rem, auto); gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--trait); font-size: 14.5px; }
.regions li:last-child { border-bottom: 0; }
.regions .r-nom { font-weight: 700; min-width: 0; }
.regions .r-nom small { display: block; color: var(--pale); font-weight: 500; font-size: 12.5px; }
.regions .r-etat { text-align: right; font-size: 13.5px; }
@media (max-width: 560px) { .regions li { grid-template-columns: minmax(0, 1fr) auto; } .regions .barre-mw { grid-column: 1 / -1; order: 3; } }

/* Mises en service */
.mes { padding: 20px 20px 14px; }
.mes-barres { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 220px; margin: 0; padding: 0; list-style: none; }
.mes-barres li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; font-variant-numeric: tabular-nums; }
.mes-barres b { font-size: 14px; }
.mes-barres i { display: block; width: 100%; max-width: 64px; border-radius: 12px 12px 4px 4px; background: color-mix(in srgb, var(--sto) 70%, var(--carte)); }
.mes-barres li.en-cours i { background: repeating-linear-gradient(135deg, var(--sto) 0 6px, color-mix(in srgb, var(--sto) 60%, var(--carte)) 6px 12px); }
.mes-barres span { font-size: 13px; color: var(--pale); font-weight: 600; }

/* Duel batteries / STEP */
.duel { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .duel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duel .carte { padding: 20px 22px; }
.duel h3 { margin: 0 0 4px; font: 400 28px/1.1 var(--serif); }
.duel .gros { margin: 8px 0; font: 400 46px/1 var(--serif); }
.duel .gros small { font: 700 15px var(--sans); color: var(--pale); }
.duel ul { margin: 8px 0 0; padding-left: 18px; font-size: 15px; } .duel li { margin: 4px 0; }
.texte { padding: 20px 22px; font-size: 16.5px; max-width: 70ch; }
.texte p { margin: 0 0 10px; } .texte p:last-child { margin: 0; }
.note { font-size: 13.5px; color: var(--pale); margin: 10px 0 0; }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

.m-spark svg { display: block; width: 100%; height: 70px; }
.spark-axe { display: flex; justify-content: space-between; font-size: 12px; color: var(--pale); margin-top: 3px; }
.duo > div { background: var(--fond); border-radius: 18px; padding: 12px 14px; }
.duo dt { font-size: 13px; color: var(--pale); font-weight: 600; }
.duo dd { margin: 2px 0 0; font: 400 32px/1.05 var(--serif); }
.duo dd small { font: 600 13px var(--sans); color: var(--pale); margin-left: 3px; }

/* Audit 16/10 : cibles tactiles >= 44 px sur mobile / tactile */
@media (pointer: coarse), (max-width: 760px) {
  .statut-in { min-height: 44px; }
  .logo { min-height: 44px; }
  details.tableau > summary, .modes button { min-height: 44px; }
  .lien-fleche { display: inline-flex; align-items: center; min-height: 44px; }
}