/* css/etablir.css
   Styles propres à etablir.html (S'établir en Abitibi-Témiscamingue).
   Chargée APRÈS styles.css. Réutiliser d'abord les composants partagés de styles.css
   (section « Composants partagés ») et les tokens de :root. Aucune nouvelle couleur.
*/

/* Services listés dans les cartes de territoire */
.card .card-services { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.card .card-services li + li { margin-top: 6px; }

/* Note sous les pastilles d'une fiche */
.fiche .fiche-note { margin: 10px 0 0; }

/* Appel à l'action sur bande épinette */
.contact-list { list-style: none; margin: 40px 0 32px; padding: 0; border-top: 2px solid var(--birch); }
.contact-list li {
  display: grid; grid-template-columns: 12em minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid #4F7A63;
}
.contact-territory { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.contact-territory::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--c); box-shadow: 0 0 0 2px var(--birch);
}
.band-dark .contact-list a { color: var(--birch); font-weight: 600; }
.band-dark .contact-list a[href^="tel:"] { white-space: nowrap; }
.band-dark .button { background: var(--birch); color: var(--ink); }
.band-dark .button:hover { background: var(--lichen); }
.band-dark :focus-visible { outline-color: var(--lichen); }

@media (max-width: 640px) {
  .contact-list li { grid-template-columns: 1fr; }
}

/* La vie ici, en vrai : calculateur de loyer + aurores boréales */
.vie-ici { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.loyer, .aurores { margin: 0; padding: 28px; border-radius: 3px; }
.loyer { background: var(--birch); }
.loyer h3, .aurores h3 { font-weight: 800; font-size: 1.6rem; font-variation-settings: "wdth" 72; margin-bottom: 16px; }
.loyer-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.loyer label { display: block; font-weight: 700; margin-bottom: 6px; }
.loyer select, .loyer input {
  width: 100%; font: inherit; padding: 10px 12px; border: 2px solid var(--ink-soft); border-radius: 3px; background: #fff; color: var(--ink);
}
.loyer-resume { margin: 20px 0 12px; font-size: 1.15rem; font-weight: 700; }
.loyer-resultat { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.loyer-resultat li {
  display: grid; grid-template-columns: 9em minmax(0, 1fr) auto; gap: 2px 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.loyer-ville { font-weight: 800; }
.loyer-barre { height: 12px; background: var(--birch-2); border-radius: 2px; overflow: hidden; }
.loyer-barre i { display: block; height: 100%; background: var(--c, var(--ink-soft)); transition: width .3s; }
.loyer-montant { font-weight: 700; white-space: nowrap; }
.loyer-detail { grid-column: 2 / -1; font-size: .92rem; color: var(--ink-soft); }
.loyer-detail:empty { display: none; }
.loyer-origine .loyer-ville { color: var(--ink-soft); }

.aurores { --lueur: var(--ink-soft); background: var(--ink); color: var(--birch); position: relative; overflow: hidden; }
.aurores::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 80%;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--lueur) 55%, transparent), transparent 70%);
  pointer-events: none;
}
.aurores > * { position: relative; }
.aurores[data-niveau="excellent"], .aurores[data-niveau="tres-bon"] { --lueur: var(--t-rn); }
.aurores[data-niveau="bon"] { --lueur: #3FA672; }
.aurores[data-niveau="possible"] { --lueur: var(--spruce); }
.aurores p { margin: 0; }
.aurores-quand { font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #BFC9CD; }
.aurores-niveau { font-size: 3rem; font-weight: 850; line-height: 1; font-variation-settings: "wdth" 70; color: var(--lichen); margin: 4px 0 8px !important; }
.aurores-texte { color: #D6E2DA; }
.aurores-nuits { list-style: none; margin: 20px 0 16px; padding: 0; border-top: 1px solid #33444D; }
.aurores-nuits:empty { display: none; }
.aurores-nuits li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid #33444D; font-size: .95rem; }
.aurores-pastille { color: #BFC9CD; }
.aurores-source { font-size: .82rem; color: #8F9DA3; margin-top: 16px !important; }
.aurores a { color: var(--birch); }
.aurores :focus-visible { outline-color: var(--lichen); }

@media (max-width: 960px) { .vie-ici { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .loyer, .aurores { padding: 20px 16px; }
  .loyer-champs { grid-template-columns: 1fr; }
  .loyer-resultat li { grid-template-columns: 1fr auto; }
  .loyer-barre { grid-column: 1 / -1; grid-row: 2; }
  .loyer-detail { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .loyer-barre i { transition: none; } }