/* Accueil Jour Tempo (theme/gabarits/accueil/accueil.html) : « demain / aujourd'hui » comme une prévision météo. */
.ciel-accueil { padding-bottom: 28px; }
/* Deux nuages flous qui dérivent lentement dans le ciel (immobiles si « réduire les animations ») */
.ciel-accueil::before, .ciel-accueil::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, #fff 55%, transparent), transparent); }
.ciel-accueil::before { width: 520px; height: 180px; top: 40px; left: -120px; animation: nuage 70s linear infinite alternate; }
.ciel-accueil::after { width: 380px; height: 140px; top: 210px; right: -80px; animation: nuage 90s linear infinite alternate-reverse; }
:root[data-theme="dark"] .ciel-accueil::before, :root[data-theme="dark"] .ciel-accueil::after { opacity: .18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ciel-accueil::before, :root:not([data-theme="light"]) .ciel-accueil::after { opacity: .18; } }
@keyframes nuage { to { transform: translateX(160px); } }

.accueil-tete { position: relative; z-index: 1; padding-top: 10px; }
.surtitre { margin: 10px 0 0; font-size: 14px; font-weight: 500; color: var(--pale); }
.ciel .accueil-h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; margin: 4px 0 18px; max-width: none; }

.hero-duo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .hero-duo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.hero-demain { background: var(--carte); border: 1px solid var(--trait); border-radius: 28px; padding: 24px 24px 20px; }
.hero-demain .donnee-valeur { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.hero-demain .donnee-chiffre { font-size: clamp(88px, 16vw, 164px); line-height: .86; margin: 10px 0 8px; }
.hero-demain [data-code="inconnu"] > .donnee-chiffre, .hero-demain [data-code=""] > .donnee-chiffre { font-size: clamp(48px, 8vw, 84px); }
.hero-demain .donnee-conseil { font-size: 20px; }

.frise { margin-top: 22px; }
.frise-barre { display: flex; height: 34px; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); }
.frise-barre span { display: grid; place-items: center; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.frise-hp { flex: 16; background: var(--fond); color: var(--texte); }
.frise-hc { flex: 8; color: var(--pale); background: repeating-linear-gradient(135deg, var(--fond) 0 6px, var(--carte) 6px 12px); }
.frise-heures { position: relative; height: 18px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--pale); }
/* chaque repère tombe sous sa vraie heure (6 h → 6 h = 24 h) */
.frise-heures span { position: absolute; top: 0; transform: translateX(-50%); }
.frise-heures span:nth-child(1) { left: 0; transform: none; }
.frise-heures span:nth-child(2) { left: 25%; }
.frise-heures span:nth-child(3) { left: 50%; }
.frise-heures span:nth-child(4) { left: 66.667%; }
.frise-heures span:nth-child(5) { right: 0; transform: none; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 16px 0 0; }
.puces li { font-size: 13px; font-weight: 500; color: var(--pale); background: var(--fond); border-radius: 999px; padding: 6px 12px; }

.hero-auj { display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; border-radius: 28px; padding: 24px;
  background: var(--carte); border: 1px solid var(--trait); color: var(--texte); }
.hero-auj .donnee-valeur { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.hero-auj .donnee-disque { display: none; }
.hero-auj .donnee-chiffre { font-size: clamp(64px, 9vw, 96px); margin: 10px 0 8px; }
.hero-auj .donnee-conseil { font-size: 16px; }
.hero-auj-pied { margin: 14px 0 0; font-size: 14px; font-weight: 500; }
.hero-auj:has([data-code="bleu"]) { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.hero-auj:has([data-code="rouge"]) { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.hero-auj:has([data-code="blanc"]) { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 2px var(--blanc-bord); }
.hero-auj:has([data-code="bleu"]) .donnee-titre, .hero-auj:has([data-code="rouge"]) .donnee-titre { color: rgba(255, 255, 255, .88); }
.hero-auj:has([data-code="blanc"]) .donnee-titre { color: #4d5b6a; }
.accueil-tete .donnee-maj { margin-top: 14px; }

/* Sections */
.bloc h2 { font-size: clamp(34px, 4vw, 42px); line-height: 1.05; margin: 52px 0 6px; }
.intro { color: var(--pale); margin: 0 0 16px; max-width: 62ch; }
.duo { display: grid; gap: 0 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.duo .donnee-calendrier { margin-top: 0; }

.simu { background: var(--texte); color: var(--fond); border-radius: 22px; padding: 22px 24px; margin-bottom: 14px; }
.simu-titre { font: 400 34px/1.05 var(--serif); margin: 0 0 8px; }
.simu p { margin: 0 0 16px; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: 999px;
  background: var(--fond); color: var(--texte); font-weight: 700; text-decoration: none; }
.btn:hover { text-decoration: underline; }
.reperes { list-style: none; counter-reset: r; padding: 0; margin: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; }
.reperes li { counter-increment: r; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--trait); }
.reperes li:last-child { border-bottom: 0; }
.reperes li::before { content: counter(r); grid-row: span 2; font: 400 40px/1 var(--serif); color: var(--pale); }
.reperes strong { font-size: 17px; }
.reperes span { color: var(--pale); font-size: 15px; }

.questions { max-width: 760px; }
.questions h2 { font-size: clamp(30px, 3.6vw, 38px); }
.hero-demain .donnee-chiffre { gap: .16em; }