/* Jour Tempo — direction « Ciel » : une appli de l'électricité, pas un blog.
   Feuille AUTONOME : le site ne charge pas /assets/style.css (feuille commune des sites d'affiliation de l'usine 1).
   Bande d'état « Aujourd'hui · Demain » en haut de chaque page, onglets (barre du bas sur mobile), mise en page par type
   de page (tableau de bord, outil, lecture). Grands mots en Instrument Serif, interface en Schibsted Grotesk.
   Le mot BLEU / BLANC / ROUGE est toujours écrit : la couleur n'est jamais la seule information.
   Mode sombre : préférence du système, ou bouton en tête de page (data-theme sur <html>, gardé en stockage local). */
:root {
  --carte: #ffffff; --pale: #4d5b6a; --trait: #d3dbe3; --lien: #1b4fd6;
  --bleu: #1b4fd6; --rouge: #c3261c; --blanc: #ffffff; --blanc-bord: #7d8b99; --encre: #0e1a26;
  --avenir: #dfe5eb; --ciel-a: #cfe0f5; --ciel-b: #f4f7fa; --bande: #0e1a26; --scene: #dde6f1;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  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; --blanc-bord: #8795a3; --avenir: #1f2a36;
    --ciel-a: #13233a; --ciel-b: #0e1622; --bande: #04070b; --scene: #111a26; color-scheme: dark;
  }
}
: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; --blanc-bord: #8795a3; --avenir: #1f2a36;
  --ciel-a: #13233a; --ciel-b: #0e1622; --bande: #04070b; --scene: #111a26; color-scheme: dark;
}

/* ---------- Socle (ce qui servait dans la feuille commune, réduit à l'indispensable) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--sans); background: var(--fond); color: var(--texte); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
a { color: var(--lien); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--lien); outline-offset: 3px; border-radius: 4px; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
h2 em, h1 em { font-style: italic; color: var(--pale); }
h3 { font: 700 19px/1.3 var(--sans); }
.env { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.env-lecture { max-width: 760px; }
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: -9999px; }
.saut:focus { left: .5rem; top: .5rem; z-index: 99; padding: .5rem 1rem; background: var(--carte); color: var(--texte); outline: 2px solid var(--lien); }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau { position: relative; overflow-x: auto; margin: 24px 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; }
.tableau tr:last-child > * { border-bottom: 0; }
.tableau thead th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--pale); padding-top: 14px; }
.tableau tbody tr:nth-child(even) { background: color-mix(in srgb, var(--fond) 55%, var(--carte)); }
@media (max-width: 599px) {
  .tableau table, .tableau tbody, .tableau tbody tr { background-color: inherit; }
  .tableau tbody th { position: sticky; left: 0; z-index: 1; background-color: inherit; min-width: 130px; max-width: 46vw; box-shadow: 1px 0 0 var(--trait); }
  .tableau thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--carte); }
}
.bouton { display: inline-block; background: var(--bleu); color: #fff; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  font-weight: 700; min-height: 44px; text-align: center; border: 0; font-family: inherit; font-size: 16px; cursor: pointer; }
.bouton:hover { filter: brightness(1.08); }
.bouton.petit { padding: 12px 16px; font-size: 15px; line-height: 1.2; }

/* ---------- Bande d'état : la couleur du jour et du lendemain sur toutes les pages (rafraîchie par direct.js) ---------- */
.statut { display: block; background: var(--bande); color: #fff; text-decoration: none; font-size: 14px; }
.statut-in { display: flex; align-items: center; gap: 4px 18px; min-height: 40px; white-space: nowrap; overflow: hidden; }
.st-jour { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.st-etiq { color: #c9d2db; }
.st-mot { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.st-pastille { width: 12px; height: 12px; border-radius: 50%; flex: none; background: transparent; box-shadow: inset 0 0 0 1.5px #c9d2db; }
.st-jour[data-code="bleu"] .st-pastille { background: #4f7dff; box-shadow: none; }
.st-jour[data-code="rouge"] .st-pastille { background: #ff5a4e; box-shadow: none; }
.st-jour[data-code="blanc"] .st-pastille { background: #fff; box-shadow: none; }
.st-vers { margin-left: auto; color: #c9d2db; }
.statut:hover .st-demain .st-mot { text-decoration: underline; }
.statut:focus-visible { outline-offset: -3px; outline-color: #fff; }
@media (max-width: 400px) { .statut { font-size: 13px; } .statut-in { gap: 4px 12px; } .st-vers { display: none; } }

/* ---------- Ciel et barre d'appli ---------- */
.ciel-accueil { overflow: hidden; }
.ciel { position: relative; background: linear-gradient(180deg, var(--ciel-a), var(--ciel-b) 80%, var(--fond)); }
.appbar-in { display: flex; align-items: center; gap: 12px 20px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 18px var(--sans); letter-spacing: -.01em; color: var(--texte); text-decoration: none; margin-right: auto; }
.logo-pastille { width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--bleu) 0 82%, #fff 0 94%, var(--rouge) 0); box-shadow: inset 0 0 0 1px rgba(14, 26, 38, .25); }
.onglets ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--carte) 55%, transparent); border: 1px solid color-mix(in srgb, var(--trait) 70%, transparent); }
.onglets a { display: block; padding: 7px 14px; border-radius: 999px; color: var(--pale); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.onglets a:hover { color: var(--texte); }
.onglets a[aria-current] { background: var(--carte); color: var(--texte); box-shadow: 0 1px 3px rgba(14, 26, 38, .14); }
@media (max-width: 899px) { .onglets { display: none; } }
.bascule { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--trait);
  background: var(--carte); color: var(--texte); cursor: pointer; }
.bascule[hidden] { display: none; }
.bascule svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.bascule .b-soleil { display: none; }
:root[data-theme="dark"] .bascule .b-lune { display: none; }
:root[data-theme="dark"] .bascule .b-soleil { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bascule .b-lune { display: none; }
  :root:not([data-theme="light"]) .bascule .b-soleil { display: inline; }
}

/* Onglets du bas (mobile) : comme une appli, le pouce atteint toutes les rubriques */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: color-mix(in srgb, var(--carte) 96%, transparent);
  border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(10px); }
.dock ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); list-style: none; margin: 0 auto; padding: 0 4px; max-width: 560px; }
.dock a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 58px; padding: 7px 2px 6px;
  color: var(--pale); font-size: 11.5px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; }
.dock svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  padding: 0; border-radius: 999px; box-sizing: content-box; }
.dock span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock a[aria-current] { color: var(--texte); }
.dock a[aria-current] svg { color: var(--lien); background: color-mix(in srgb, var(--bleu) 14%, transparent); padding: 0 14px; }
@media (min-width: 900px) { .dock { display: none; } }
@media (max-width: 899px) { body:has(.dock) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } }

/* ---------- En-tête des pages ---------- */
.tete-page { padding: 6px 0 30px; }
.retour { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--carte) 72%, transparent); color: var(--texte); font-size: 14px; font-weight: 600; text-decoration: none; }
.retour:hover { background: var(--carte); }
.type { display: flex; align-items: center; gap: 7px; margin: 22px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pale); }
.ico-type { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.type-donnees { color: var(--texte); }
.type-donnees .ico-type { color: var(--rouge); animation: emission 2.4s ease-in-out infinite; }
@keyframes emission { 50% { opacity: .35; } }
.tete-page h1 { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.02; margin: 10px 0 14px; max-width: 21ch; }
.env-lecture h1 { font-size: clamp(34px, 5vw, 50px); }
.verif { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; color: var(--pale); }
.verif img { border-radius: 50%; flex: none; }
@media (max-width: 599px) { .verif > span[aria-hidden] { display: none; } .verif > span:last-child { flex-basis: 100%; } }
.verif a { color: var(--texte); font-weight: 600; }
.tete-intro p { color: var(--pale); max-width: 62ch; margin: 0; font-size: 18px; }
.avertissement { font-size: 13px; color: var(--pale); }

/* ---------- Texte de lecture ---------- */
.texte { font-size: 18px; line-height: 1.68; }
.texte h2 { font-size: clamp(30px, 3.8vw, 40px); line-height: 1.06; margin: 52px 0 12px; scroll-margin-top: 16px; }
.texte h3 { margin: 30px 0 8px; }
.texte p, .texte li { max-width: 68ch; }
.texte ul { padding-left: 1.1em; }
.texte ul li::marker { color: var(--bleu); }
.texte li + li { margin-top: 6px; }
.texte table { font-size: 16px; }
.texte img { border-radius: 18px; }
blockquote { margin: 24px 0; border: 1px solid var(--trait); background: var(--carte); border-radius: 18px; padding: 16px 20px; }
blockquote p { margin: 0; }
blockquote p + p { margin-top: 8px; }

/* « L'essentiel » : la réponse en tête des guides et des outils */
.essentiel { position: relative; margin: 0 0 8px; padding: 22px 22px 6px; background: var(--carte); border: 1px solid var(--trait); border-radius: 24px; overflow: hidden; }
.essentiel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--bleu) 0 62%, var(--blanc-bord) 62% 80%, var(--rouge) 80%); }
.essentiel-etiq { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pale); }
.essentiel > p:not(.essentiel-etiq) { margin: 0 0 16px; }
.essentiel strong:first-child { display: block; margin-bottom: 10px; font: 400 clamp(25px, 3vw, 31px)/1.15 var(--serif); letter-spacing: -.005em; }

/* Chapitres d'un guide : une rangée de pastilles qui défile, pas un sommaire d'article */
.chapitres { margin: 22px 0 0; }
.chapitres summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pale); }
.chapitres summary::-webkit-details-marker { display: none; }
.chapitres summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.chapitres[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.chapitres nav { margin-top: 6px; }
.chapitres ol { display: flex; gap: 8px; list-style: none; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scrollbar-width: thin; }
.texte .chapitres li { flex: none; margin: 0; max-width: none; }
.chapitres a { display: flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait);
  color: var(--texte); font-size: 14px; font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; }
.chapitres a:hover { border-color: var(--lien); }
@media (min-width: 760px) { .chapitres ol { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }

/* ---------- Page « donnees » : tableau de bord ---------- */
.tb { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .tb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tb > * { grid-column: 1 / -1; margin: 0; }
.tb > .donnee-valeur { grid-column: auto; margin: 0; }
.tb > .donnee-compteur, .tb > .donnee-calendrier { margin: 0; }
.tb > p:not(.donnee) { font-size: 17px; max-width: 72ch; }
.tb > p:first-child { font-size: 18px; max-width: 64ch; }
.tb > p:first-child strong:first-child { display: block; margin-bottom: 12px; font: 400 clamp(28px, 3.8vw, 42px)/1.1 var(--serif); letter-spacing: -.01em; }
.tb > .donnee-maj { margin-top: -4px; }
[data-code="hors-saison"] > .donnee-chiffre, [data-code="non-verifie"] > .donnee-chiffre { font-size: clamp(36px, 6vw, 56px); line-height: 1; }
.explications { margin-top: 12px; }
.explications .donnee-calendrier { display: inline-block; vertical-align: top; width: min(100%, 536px); margin: 12px 16px 12px 0; }
.explications .faq { max-width: 860px; }
@media (max-width: 599px) { .explications .donnee-calendrier { margin-right: 0; } }

/* ---------- Page « outil » : l'outil d'abord, sur une scène pleine largeur ---------- */
.scene { margin-top: 0; }
.scene > h2 { margin: 0 0 12px; font: 700 13px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--pale); }
.scene > p { font-size: 15px; color: var(--pale); max-width: 70ch; margin: 12px 0 0; }
@media (min-width: 760px) {
  .scene { padding-top: 22px; padding-bottom: 22px; background: var(--scene); border-radius: 32px; max-width: 1088px; padding-left: 24px; padding-right: 24px; }
  .scene .outil-simu, .scene .outil-chances, .scene .outil-cheque, .scene .ag-cartes, .scene .wt-apercus, .scene .wt-code { margin-top: 0; }
}
.page-outil .env-lecture { margin-top: 44px; }
.ciel-outil .tete-page h1 { font-size: clamp(32px, 4.2vw, 46px); max-width: 26ch; }
.ciel-outil .type { margin-top: 16px; }
/* Grand écran : réglages à gauche, verdict à droite, visibles ensemble */
@media (min-width: 1100px) {
  .scene .outil-simu:has(> .os-resultat) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; padding: 24px; }
  .scene .outil-simu > * { grid-column: 1 / -1; }
  .scene .outil-simu > .os-form { grid-column: 1; }
  .scene .outil-simu > .os-resultat { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--trait); }
}

/* ---------- FAQ en accordéon ---------- */
.faq { margin-top: 56px; }
.faq h2 { margin-bottom: 16px; }
.faq-liste { background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; 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;
  font-weight: 700; font-size: 17px; line-height: 1.35; cursor: pointer; list-style: none; }
.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: 400 24px/1 var(--sans); color: var(--texte); transition: transform .2s ease; }
.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: 16.5px; line-height: 1.6; color: var(--texte); max-width: none; }

/* ---------- « Et maintenant ? » : trois actions au lieu des liens « à lire aussi » ---------- */
.suite { margin-top: 64px; }
.suite h2 { font-size: clamp(30px, 3.6vw, 38px); margin: 0 0 14px; }
.suite ol { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .suite ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.suite a { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 76px; padding: 16px 18px; border-radius: 20px;
  background: var(--carte); border: 1px solid var(--trait); color: var(--texte); text-decoration: none; }
.suite li:first-child a { background: var(--encre); border-color: var(--encre); color: #fff; }
:root[data-theme="dark"] .suite li:first-child a { background: var(--bleu); border-color: var(--bleu); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .suite li:first-child a { background: var(--bleu); border-color: var(--bleu); } }
.suite-txt { display: grid; gap: 2px; margin-right: auto; }
.suite strong { font-size: 17px; line-height: 1.3; }
.suite small { font-size: 14px; color: var(--pale); }
.suite li:first-child small { color: #d5dde6; }
.suite-vers { font-size: 20px; }
.suite a:hover strong { text-decoration: underline; }

/* ---------- Listes de pages (rubriques, accueil, 404) : rangées d'appli ---------- */
.liste-groupe h2 { font-size: clamp(28px, 3.4vw, 34px); margin: 36px 0 12px; }
.liste-groupe:first-child h2 { margin-top: 4px; }
.liste-groupe h2 a { color: inherit; text-decoration: none; }
.liste-groupe h2 a:hover { text-decoration: underline; }
.rangees { list-style: none; margin: 0; padding: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; overflow: hidden; }
.rangees li + li { border-top: 1px solid var(--trait); }
.rangees a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; min-height: 68px;
  padding: 12px 18px; color: var(--texte); text-decoration: none; }
.rg-ico { grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--fond); color: var(--texte); }
[data-type="donnees"] .rg-ico { background: color-mix(in srgb, var(--rouge) 12%, var(--carte)); color: var(--rouge); }
[data-type="outil"] .rg-ico { background: color-mix(in srgb, var(--bleu) 13%, var(--carte)); color: var(--lien); }
.rg-ico .ico-type { width: 20px; height: 20px; }
.rg-titre { font-weight: 700; line-height: 1.3; }
.rg-sous { grid-column: 2; font-size: 13.5px; color: var(--pale); }
.rg-vers { grid-column: 3; grid-row: 1 / span 2; font-size: 26px; line-height: 1; color: var(--pale); }
.rangees a:hover .rg-titre { text-decoration: underline; }
.code-404 { margin: 18px 0 0; font: 400 clamp(96px, 18vw, 180px)/.85 var(--serif); color: var(--pale); }
.tete-actions { margin: 20px 0 0; }
.btn-plein { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 999px;
  background: var(--encre); color: #fff; font-weight: 700; text-decoration: none; }
:root[data-theme="dark"] .btn-plein { background: var(--bleu); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-plein { background: var(--bleu); } }

/* Bloc « Intégrer cet outil » (ajouté par l'usine en bas des pages à outil) */
.integrer { max-width: 760px; margin: 32px auto 0; padding: 14px 18px; background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; font-size: 15px; }
main > .integrer { width: calc(100% - 32px); }
.integrer summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.integrer > div { margin: 8px 0; color: var(--pale); }
.integrer textarea { border: 1px solid var(--blanc-bord); border-radius: 10px; padding: 8px; background: var(--fond); color: var(--texte); margin-bottom: 8px; }

/* ---------- Pied minimal ---------- */
.pied { margin-top: 80px; padding: 26px 0 30px; border-top: 1px solid var(--trait); color: var(--pale); font-size: 14px; }
.pied-in { display: grid; gap: 8px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pied-in { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .pied-in > :nth-child(n+2) { grid-column: 2; } .pied-marque { grid-row: span 3; } }
.pied p { margin: 0; }
.pied-marque { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--texte); font-size: 16px; }
.pied .mention { color: var(--texte); font-weight: 500; }
.pied ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.pied ul a { color: inherit; display: inline-block; padding: 6px 0; }
.pied-bas { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Blocs de données (socle usine 2 : composants donnee-*, surchargés dans theme/gabarits/composants) ---------- */
.donnee-valeur { background: var(--carte); border: 1px solid var(--trait); border-radius: 28px; padding: 22px 24px; margin: 24px 0; }
.donnee-titre { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }
.donnee-date { font-weight: 500; }
.donnee-date::before { content: "· "; }
.donnee-chiffre { display: flex; align-items: center; gap: .3em; margin: 8px 0 6px; font: 400 clamp(64px, 12vw, 96px)/.9 var(--serif); letter-spacing: -.02em; }
.donnee-disque { width: .55em; height: .55em; border-radius: 50%; flex: none; background: var(--avenir); box-shadow: inset 0 0 0 2px var(--blanc-bord); }
[data-code="bleu"] > .donnee-chiffre .donnee-disque { background: var(--bleu); box-shadow: none; }
[data-code="rouge"] > .donnee-chiffre .donnee-disque { background: var(--rouge); box-shadow: none; }
[data-code="blanc"] > .donnee-chiffre .donnee-disque { background: #fff; box-shadow: inset 0 0 0 2px var(--encre); }
[data-code="inconnu"] > .donnee-chiffre, [data-code=""] > .donnee-chiffre { font-size: clamp(40px, 7vw, 60px); }
.donnee-conseil { margin: 8px 0 0; font-size: 18px; line-height: 1.4; font-weight: 500; max-width: 34ch; }
.donnee-conseil span { display: none; }
[data-code="bleu"] .c-bleu, [data-code="blanc"] .c-blanc, [data-code="rouge"] .c-rouge,
[data-code="inconnu"] .c-inconnu, [data-code=""] .c-inconnu { display: inline; }
.donnee-maj { font-size: 13px; color: var(--pale); margin: 12px 0 0; }
.donnee-maj a { color: inherit; }
[data-direct-etat="perime"].donnee-maj::after { content: " · relevé ancien, nouvelle vérification en cours"; }

/* Compteur de la saison : une carte par couleur, jauge à points */
.donnee-compteur { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 20px 0; }
@media (min-width: 820px) { .donnee-compteur { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.donnee-compteur-ligne { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 12px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: 18px 20px; }
.donnee-compteur-libelle { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.donnee-compteur-ligne dd { margin: 0; }
.donnee-compteur-valeur { text-align: right; color: var(--pale); font-size: 14px; }
.donnee-compteur-restants { font: 400 60px/1 var(--serif); color: var(--texte); }
.donnee-compteur-quota { display: block; }
.donnee-compteur-barre, .donnee-compteur-detail { grid-column: 1 / -1; }
.donnee-compteur-barre { margin-top: 12px !important; }
.donnee-compteur-barre meter { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.points { display: flex; flex-wrap: wrap; gap: 4px; }
.points i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--bleu); }
[data-code="rouge"] .points i { background: var(--rouge); }
[data-code="blanc"] .points i { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blanc-bord); }
.points i.passe { background: var(--avenir); box-shadow: none; }
.jauge-pleine { display: flex; justify-content: flex-end; height: 10px; border-radius: 5px; background: var(--avenir); overflow: hidden; }
.jauge-pleine b { display: block; height: 100%; border-radius: 5px; background: var(--bleu); }
[data-code="rouge"] .jauge-pleine b { background: var(--rouge); }
[data-code="blanc"] .jauge-pleine b { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blanc-bord); }
.donnee-compteur-detail { margin-top: 12px !important; font-size: 14px; color: var(--pale); }

/* Calendrier en pastilles (le nom de la couleur est écrit dans chaque case) */
.donnee-calendrier { background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: 18px 16px 16px; margin: 20px 0; }
.donnee-calendrier-titre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; margin: 0 4px 10px; }
.cal-mois { font-weight: 700; font-size: 16px; }
.cal-resume { font-size: 14px; color: var(--pale); }
.donnee-calendrier table { table-layout: fixed; border-collapse: separate; border-spacing: 6px; max-width: 520px; margin: 0 auto; font-size: 15px; }
.donnee-calendrier th { padding: 0 0 2px; border: 0; text-align: center; font-size: 12px; font-weight: 500; color: var(--pale);
  text-transform: none; letter-spacing: 0; }
.donnee-calendrier abbr { text-decoration: none; }
.donnee-calendrier td { position: relative; padding: 0; border: 0; border-radius: 50%; text-align: center; vertical-align: middle;
  background: var(--avenir); color: var(--pale); }
.donnee-calendrier td::before { content: ""; display: block; padding-top: 100%; }
.donnee-calendrier td.donnee-jour-vide { background: transparent; }
.donnee-calendrier td > span { position: absolute; left: 0; right: 0; }
.donnee-jour-num { top: 50%; transform: translateY(-62%); font-weight: 700; font-size: 15px; line-height: 1; }
.donnee-jour-libelle { top: 50%; transform: translateY(55%); font-size: 9px; line-height: 1.3; font-weight: 500; letter-spacing: .02em; }
.donnee-calendrier td[data-code=""] .donnee-jour-num { transform: translateY(-50%); }
.donnee-calendrier td[data-code=""] .donnee-jour-libelle { width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.donnee-calendrier td[data-code="bleu"] { background: var(--bleu); color: #fff; }
.donnee-calendrier td[data-code="rouge"] { background: var(--rouge); color: #fff; }
.donnee-calendrier td[data-code="blanc"] { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--blanc-bord); }
.donnee-calendrier td[aria-current="date"] { box-shadow: 0 0 0 2px var(--carte), 0 0 0 4px var(--texte); }
.donnee-calendrier td[data-code="blanc"][aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--blanc-bord), 0 0 0 2px var(--carte), 0 0 0 4px var(--texte); }
.donnee-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--pale); }
.donnee-legende li::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--avenir); }
.donnee-legende [data-code="bleu"]::before { background: var(--bleu); }
.donnee-legende [data-code="rouge"]::before { background: var(--rouge); }
.donnee-legende [data-code="blanc"]::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blanc-bord); }
@media (max-width: 420px) {
  .donnee-calendrier { padding: 14px 8px 12px; }
  .donnee-calendrier table { border-spacing: 4px; }
  .donnee-jour-num { font-size: 13px; }
  .donnee-jour-libelle { font-size: 8px; }
}

/* ---------- Outils : simulateur Tempo (outil-simulateur.html) et chances de rouge (outil-chances.html) ---------- */
.outil-simu [hidden], .outil-chances [hidden] { display: none !important; }
.outil-simu, .outil-chances { background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: 18px 16px; margin: 24px 0; font-size: 16px; line-height: 1.45; }
.os-form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .os-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .os-large { grid-column: 1 / -1; } }
.os-champ { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.os-champ input:not([type="range"]), .os-champ select, .oc-recherche input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--blanc-bord);
  border-radius: 12px; background: var(--fond); color: var(--texte); font: 500 16px var(--sans); box-sizing: border-box; }
.os-champ input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--rouge); margin: 0; }
.os-champ output { font-weight: 800; }
.os-champ :focus-visible, .oc-recherche input:focus-visible, .outil-simu summary:focus-visible, .outil-chances summary:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; }
.os-aide { grid-column: 1 / -1; margin-top: -6px; font-size: 13px; color: var(--pale); }
.os-resultat { margin-top: 20px; border-top: 1px solid var(--trait); padding-top: 16px; }
.os-verdict { margin: 0; display: grid; gap: 2px; }
.os-verdict-titre { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }
.os-ecart { font: 400 clamp(34px, 8vw, 52px)/1.05 var(--serif); }
.os-verdict[data-signe="gain"] .os-ecart { color: #1d6b3a; }
.os-verdict[data-signe="perte"] .os-ecart { color: var(--rouge); }
.os-phrase { margin: 8px 0 14px; font-size: 17px; font-weight: 500; }
.os-barres { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.os-barres li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 15px; }
.os-nom { font-weight: 700; }
.os-montant { font-variant-numeric: tabular-nums; }
.os-barre { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--avenir); overflow: hidden; }
.os-barre b { display: block; height: 100%; background: var(--pale); border-radius: 5px; }
.os-barres [data-option="tempo"] .os-barre b { background: var(--bleu); }
.os-note { font-size: 14px; color: var(--pale); margin: 10px 0 0; }
.os-saisons { margin-top: 16px; }
.outil-simu summary, .outil-chances summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.os-saisons summary { display: list-item; padding: 10px 0; }
.os-tab, .os-exemples, .oc-moyennes { font-size: 15px; }
.os-tab tr[data-signe="gain"] td:last-child { color: #1d6b3a; font-weight: 700; }
.os-tab tr[data-signe="perte"] td:last-child { color: var(--rouge); font-weight: 700; }
.os-ex-detail { display: block; font-weight: 400; font-size: 13px; color: var(--pale); }
.os-sources, .oc-source { margin-top: 14px; font-size: 13px; color: var(--pale); }
.oc-recherche { display: grid; gap: 6px; font-size: 14px; font-weight: 500; max-width: 320px; }
.oc-fiche { margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: var(--fond); border-left: 6px solid var(--bleu); font-size: 17px; font-weight: 500; }
.oc-fiche:not([data-r="0"]) { border-left-color: var(--rouge); }
.oc-legende { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--pale); }
.oc-mois { width: 100%; max-width: 520px; margin: 16px auto 0; table-layout: fixed; border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.oc-mois caption { text-align: left; font-weight: 700; font-size: 16px; padding: 0 2px 4px; }
.oc-mois th { padding: 0; border: 0; font-size: 12px; font-weight: 500; color: var(--pale); text-align: center; text-transform: none; letter-spacing: 0; }
.oc-mois abbr { text-decoration: none; }
.oc-mois td { height: 52px; padding: 3px 1px; border: 0; border-radius: 10px; vertical-align: top; text-align: center; cursor: pointer;
  background: var(--fond); background: color-mix(in srgb, var(--rouge) var(--oc-r, 0%), var(--fond)); color: var(--texte); }
.oc-mois td.oc-vide { background: transparent; cursor: default; }
.oc-mois td > span { display: block; line-height: 1.25; white-space: nowrap; }
.oc-num { font-weight: 800; font-size: 13px; }
.oc-r, .oc-b, .oc-bleu { font-size: 11px; font-variant-numeric: tabular-nums; }
.oc-r::before, .oc-b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 2px; vertical-align: 1px; }
.oc-r::before { background: var(--rouge); box-shadow: 0 0 0 1.5px currentColor; }
.oc-b::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--encre); }
.oc-bleu { color: var(--pale); }
.oc-legende .oc-r, .oc-legende .oc-b { font-weight: 700; color: var(--texte); }
.oc-mois td.oc-choisi { outline: 3px solid var(--texte); outline-offset: 1px; }
.oc-autres { margin-top: 14px; }
.oc-autres summary { padding: 6px 0; display: list-item; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .os-verdict[data-signe="gain"] .os-ecart, :root:not([data-theme="light"]) .os-tab tr[data-signe="gain"] td:last-child { color: #6fd28f; }
  :root:not([data-theme="light"]) .os-verdict[data-signe="perte"] .os-ecart, :root:not([data-theme="light"]) .os-tab tr[data-signe="perte"] td:last-child { color: #ff8a80; }
}
:root[data-theme="dark"] .os-verdict[data-signe="gain"] .os-ecart, :root[data-theme="dark"] .os-tab tr[data-signe="gain"] td:last-child { color: #6fd28f; }
:root[data-theme="dark"] .os-verdict[data-signe="perte"] .os-ecart, :root[data-theme="dark"] .os-tab tr[data-signe="perte"] td:last-child { color: #ff8a80; }
@media (max-width: 400px) { .outil-simu, .outil-chances { padding: 16px 10px; } .oc-mois { border-spacing: 2px; } .oc-r, .oc-b, .oc-bleu { font-size: 10.5px; } }

/* ---------- Outils E : widget Tempo, agenda ICS, chèque énergie (composants/outil-widget|agenda|cheque.html) ---------- */
.outil-widget .bouton, .outil-agenda .bouton, .outil-cheque .bouton { background: var(--bleu); color: #fff; border-radius: 999px; }
.outil-widget input[type="text"], .outil-widget textarea, .outil-agenda input[type="text"], .outil-cheque input {
  width: 100%; box-sizing: border-box; font: 14px/1.4 ui-monospace, Consolas, monospace; color: var(--texte); background: var(--carte);
  border: 1px solid var(--blanc-bord); border-radius: 12px; padding: 10px 12px; }
.outil-cheque input { font: 600 18px/1.3 var(--sans); }
.outil-widget fieldset, .outil-cheque fieldset { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.outil-widget legend, .outil-cheque legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.outil-widget fieldset label, .outil-cheque fieldset label { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.outil-widget input[type="radio"], .outil-cheque input[type="radio"] { width: 20px; height: 20px; accent-color: var(--bleu); flex: none; }

/* La carte du widget : couleurs propres (le thème du site hôte ne la touche pas), mot de la couleur toujours écrit */
.wt { --wt-fond: #fff; --wt-texte: #0e1a26; --wt-pale: #4d5b6a; --wt-trait: #d3dbe3; --wt-bleu: #1b4fd6; --wt-lien: #1b4fd6; --wt-avenir: #dfe5eb;
  container-type: inline-size; box-sizing: border-box; max-width: 480px; background: var(--wt-fond); color: var(--wt-texte);
  border: 1px solid var(--wt-trait); border-radius: 18px; padding: 12px 14px 10px; font-family: var(--sans); }
.wt-sombre { --wt-fond: #141c26; --wt-texte: #eef2f6; --wt-pale: #a3b0bd; --wt-trait: #2a3644; --wt-bleu: #2f63e6; --wt-lien: #9db8ff; --wt-avenir: #1f2a36; }
@media (prefers-color-scheme: dark) {
  .wt-auto { --wt-fond: #141c26; --wt-texte: #eef2f6; --wt-pale: #a3b0bd; --wt-trait: #2a3644; --wt-bleu: #2f63e6; --wt-lien: #9db8ff; --wt-avenir: #1f2a36; }
}
.wt p { margin: 0; }
.wt-jours { display: grid; grid-template-columns: 1fr 1fr; }
.wt-jour { padding: 0 8px; min-width: 0; }
.wt-jour + .wt-jour { border-left: 1px solid var(--wt-trait); padding-left: 12px; }
.wt-jour:first-child { padding-left: 0; }
.wt-quand { font-size: 12px; line-height: 1.3; color: var(--wt-pale); }
.wt-titre { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wt-couleur { display: flex; align-items: center; gap: 8px; margin: 4px 0 0 !important; font: 400 clamp(26px, 11cqi, 42px)/1.05 var(--serif); }
.wt-disque { width: .55em; height: .55em; border-radius: 50%; flex: none; background: var(--wt-avenir); box-shadow: inset 0 0 0 2px var(--wt-pale); }
.wt [data-code="bleu"] .wt-disque { background: var(--wt-bleu); box-shadow: none; }
.wt [data-code="rouge"] .wt-disque { background: #c3261c; box-shadow: none; }
.wt [data-code="blanc"] .wt-disque { background: #fff; box-shadow: inset 0 0 0 2px #0e1a26, 0 0 0 1px var(--wt-pale); }
.wt [data-code="inconnu"] .wt-couleur { font-size: clamp(22px, 8cqi, 30px); }
.wt-note { font-size: 12px; color: var(--wt-pale); }
.wt-restants { margin-top: 8px !important; padding-top: 6px; border-top: 1px solid var(--wt-trait); font-size: 13px; color: var(--wt-pale); }
.wt-restants b { color: var(--wt-texte); }
.wt-pied { margin-top: 2px !important; font-size: 12px; color: var(--wt-pale); text-align: right; }
.wt-credit { color: var(--wt-lien); font-weight: 700; }
/* Page /integrer/widget-tempo/ : la carte seule, fond transparent, crédit dans la carte (pas de second lien) */
html:has(.wt-integre), html:has(.wt-integre) body { background: transparent; }
main:has(.wt-integre) { padding: 0 !important; }
main:has(.wt-integre) .widget-source { display: none; }
.wt-integre .wt { max-width: none; }
/* Page du widget : aperçus et générateur de code */
.wt-apercus { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 8px 0 20px; }
@media (min-width: 760px) { .wt-apercus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wt-apercus figure { margin: 0; }
.wt-apercus figcaption { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pale); margin-bottom: 6px; }
.wt-code { background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: 18px; display: grid; gap: 8px; }
.wt-champ { font-weight: 700; margin-top: 10px; }
.wt-code textarea { resize: vertical; }
.wt-code .bouton { justify-self: start; }
.wt-etat, .ag-etat { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--pale); }

/* Agenda ICS */
.ag-cartes { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ag-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ag-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ag-carte h3 { margin: 0; }
.ag-texte { font-size: 16px; line-height: 1.5; color: var(--pale); }
.ag-boutons { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ag-boutons .bouton { display: block; text-align: center; min-height: 24px; text-decoration: none; }
.ag-champ { font-size: 14px; font-weight: 700; margin-top: auto; }
.ag-ligne { display: flex; gap: 8px; }
.ag-ligne input { min-width: 0; flex: 1; }
.ag-ligne .bouton { flex: none; }
.ag-apercu { margin: 18px 0 6px; background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: 16px 18px; }
.ag-apercu figcaption { font-size: 14px; color: var(--pale); margin-bottom: 8px; }
.ag-apercu ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ag-apercu li { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: 16px; }
.ag-date { color: var(--pale); min-width: 9.5em; font-size: 14px; }
.ag-evt { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.ag-pastille { width: 12px; height: 12px; border-radius: 50%; background: var(--avenir); flex: none; }
.ag-apercu [data-code="bleu"] .ag-pastille { background: var(--bleu); }
.ag-apercu [data-code="rouge"] .ag-pastille { background: var(--rouge); }
.ag-apercu [data-code="blanc"] .ag-pastille { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blanc-bord); }

/* Chèque énergie */
.outil-cheque { background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: 18px; margin: 16px 0; }
.ch-form { display: grid; gap: 10px; }
.ch-champ { display: grid; gap: 6px; font-weight: 700; }
.ch-champ span { font-size: 15px; }
.ch-aide { font-size: 14px; color: var(--pale); margin-top: -4px; }
.ch-duo { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .ch-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ch-resultat { margin: 16px 0 12px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--bleu) 9%, var(--carte)); }
.ch-resultat p { margin: 0; }
.ch-etiquette { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pale); }
.ch-somme { display: block; font: 400 clamp(48px, 10vw, 72px)/1 var(--serif); margin: 4px 0 6px; }
.ch-detail, .ch-plafond { font-size: 15px; line-height: 1.45; }
.ch-plafond { color: var(--pale); margin-top: 4px !important; }
.ch-bareme-cadre { overflow-x: auto; }
.ch-bareme { font-size: 14px; min-width: 520px; }
.ch-bareme caption { text-align: left; font-size: 14px; color: var(--pale); padding: 10px 12px 4px; }
.ch-bareme td { text-align: center; font-variant-numeric: tabular-nums; }
.ch-bareme td.ch-ici { background: var(--bleu); color: #fff; font-weight: 700; border-radius: 8px; }
/* EJP (scripts/donnees/ejp.py) : jour EJP = rouge, normal = bleu, non vérifié / hors saison = neutre */
[data-code="ejp"] > .donnee-chiffre .donnee-disque, [data-code="ejp"] .mini-pastille { background: var(--rouge); box-shadow: none; }
[data-code="non-verifie"] > .donnee-chiffre .donnee-disque, [data-code="hors-saison"] > .donnee-chiffre .donnee-disque { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
/* Blocs de code (exemple Home Assistant de la page widget-tempo) : défilement horizontal au lieu de déborder sur mobile */
.texte pre { overflow-x: auto; max-width: 100%; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.texte :not(pre) > code { font-size: .88em; background: var(--doux); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }