/* Calculateurs de kilowattquebec.ca. S'appuie sur les jetons de site.css (couleurs, polices), chargé avant. */

.calc-page { padding-block: clamp(28px, 5vw, 64px) 0; }
.calc-entete { display: grid; gap: 14px; max-width: 860px; margin-bottom: clamp(24px, 4vw, 44px); }
.calc-entete h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); text-transform: uppercase; color: var(--marine); }
.calc-entete .chapeau { max-width: 64ch; }
.calc-apercu { background: var(--or-clair); color: var(--marine); font-family: var(--f-ui); font-weight: 600; text-align: center; padding: 10px 16px; }

.calc-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.calc-grille > * { min-width: 0; }
@media (max-width: 960px) { .calc-grille { grid-template-columns: 1fr; } }

/* Le formulaire */
.calc-form { background: var(--blanc); border-radius: var(--rayon); padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; box-shadow: 0 20px 50px rgba(12,34,64,.08); position: sticky; top: calc(88px + env(safe-area-inset-top, 0px)); }
@media (max-width: 960px) { .calc-form { position: static; } }
.calc-form h2 { font-size: 1.5rem; color: var(--marine); }
.calc-champ { display: grid; gap: 6px; }
.calc-champ label, .calc-champ .etiq { font-family: var(--f-ui); font-weight: 600; font-size: 0.98rem; color: var(--marine); }
.calc-champ .aide { font-family: var(--f-ui); font-size: 0.9rem; color: var(--texte-doux); line-height: 1.4; }
.calc-champ input[type="text"], .calc-champ input[type="number"], .calc-champ select {
  width: 100%; font: inherit; font-family: var(--f-ui); font-size: 1.08rem; font-weight: 500; color: var(--marine);
  background: var(--neige); border: 1.5px solid var(--givre); border-radius: 12px; padding: 11px 13px; font-variant-numeric: tabular-nums;
}
.calc-champ input:focus, .calc-champ select:focus { outline: none; border-color: var(--acier); background: var(--blanc); box-shadow: 0 0 0 3px rgba(58,104,158,.18); }
.calc-champ input[aria-invalid="true"] { border-color: #b3412e; }
.calc-unite { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.calc-unite span { font-family: var(--f-ui); font-size: 0.95rem; color: var(--texte-doux); white-space: nowrap; }
.calc-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-deux > * { min-width: 0; }
@media (max-width: 420px) { .calc-deux { grid-template-columns: 1fr; } }
.calc-choix { display: grid; gap: 8px; }
.calc-choix label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-family: var(--f-ui); font-size: 0.98rem; color: var(--texte); font-weight: 500; }
.calc-choix input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--marine); }
.calc-erreur { font-family: var(--f-ui); font-size: 0.92rem; color: #8a2a1c; }
.calc-form > .aide { font-family: var(--f-ui); font-size: 0.9rem; color: var(--texte-doux); line-height: 1.4; margin-top: -8px; }

/* Les résultats */
.calc-resultats { display: grid; gap: 20px; }
.calc-verdict { background: var(--nuit); color: var(--blanc); border-radius: var(--rayon); padding: clamp(22px, 3vw, 34px); display: grid; gap: 10px; }
.calc-verdict .surtitre { color: var(--or-clair); }
.calc-verdict .grand { font-family: var(--f-titre); font-weight: 800; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; text-transform: uppercase; }
.calc-verdict .grand b { color: var(--or-clair); font-weight: 800; }
.calc-verdict p { color: var(--texte-nuit); max-width: 60ch; }
.calc-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .calc-tuiles { grid-template-columns: 1fr; } }
.calc-tuile { background: var(--blanc); border-radius: var(--rayon-petit); padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.calc-tuile .valeur { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1; color: var(--marine); font-variant-numeric: tabular-nums; }
.calc-tuile .libelle { font-family: var(--f-ui); font-size: 0.92rem; color: var(--texte-doux); line-height: 1.35; }

.calc-bloc { background: var(--blanc); border-radius: var(--rayon); padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; }
.calc-bloc h2 { font-size: 1.45rem; color: var(--marine); }
.calc-bloc .note { font-family: var(--f-ui); font-size: 0.92rem; color: var(--texte-doux); }
.calc-defile { overflow-x: auto; }
.calc-table { width: 100%; border-collapse: collapse; font-family: var(--f-ui); font-size: 1rem; font-variant-numeric: tabular-nums; min-width: 440px; }
.calc-table th, .calc-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--givre); }
.calc-table th { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.calc-table td:first-child { font-weight: 600; color: var(--marine); }
.calc-table tr.calc-rang-vedette td { background: rgba(255,186,66,.18); }
.calc-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }

/* Graphique */
.calc-graphique { position: relative; }
.calc-graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.calc-graphique .axe text, .calc-graphique .etiquette { font-family: var(--f-ui); font-size: 12px; fill: var(--texte-doux); }
.calc-graphique .etiquette-fin { font-family: var(--f-ui); font-size: 12.5px; font-weight: 600; fill: var(--texte); }
.calc-graphique .grille line { stroke: var(--givre); stroke-width: 1; }
.calc-graphique .zero { stroke: var(--texte-doux); stroke-width: 1.2; }
.calc-graphique .serie { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.calc-graphique .curseur { stroke: var(--texte-doux); stroke-width: 1; stroke-dasharray: 3 3; }
.calc-bulle { position: absolute; pointer-events: none; background: var(--nuit); color: var(--blanc); font-family: var(--f-ui); font-size: 0.88rem; line-height: 1.45; padding: 8px 12px; border-radius: 10px; box-shadow: 0 10px 24px rgba(6,18,36,.25); white-space: nowrap; font-variant-numeric: tabular-nums; z-index: 2; }
.calc-bulle b { color: var(--or-clair); font-weight: 600; }

.calc-livre { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; background: var(--marine); color: var(--blanc); border-radius: var(--rayon); padding: 18px 22px; }
.calc-livre img { width: 96px; border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.calc-livre p { color: var(--texte-nuit); }
.calc-livre .bouton { margin-top: 10px; }
@media (max-width: 480px) { .calc-livre { grid-template-columns: 1fr; } .calc-livre img { width: 110px; } }
.calc-hypotheses { display: grid; gap: 8px; }
.calc-hypotheses ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 0.98rem; color: var(--texte); }
.calc-avertissement { font-family: var(--f-ui); font-size: 0.92rem; color: var(--texte-doux); border-left: 3px solid var(--or); padding-left: 12px; }

/* Page « Tous les calculateurs » */
.calc-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.calc-liste a { display: grid; gap: 10px; height: 100%; background: var(--blanc); border-radius: var(--rayon); padding: 24px; text-decoration: none; color: var(--texte); box-shadow: 0 16px 40px rgba(12,34,64,.07); transition: transform .2s ease; }
.calc-liste a:hover { transform: translateY(-3px); }
.calc-liste .tome { font-family: var(--f-ui); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acier); }
.calc-liste strong { font-family: var(--f-titre); font-size: 1.6rem; font-weight: 800; text-transform: uppercase; line-height: 1.05; color: var(--marine); }
.calc-liste .apercu { justify-self: start; font-family: var(--f-ui); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--or-clair); color: var(--marine); padding: 4px 10px; border-radius: 999px; }

/* Pied de page des calculateurs : sans la partie haute de l'accueil */
.calc-page ~ .pied { padding-top: 28px; }
.calc-page ~ .pied .bas { margin-top: 0; padding-top: 0; border-top: 0; }

/* Téléphone : bouton de l'en-tête sur une ligne, tableau sans défilement, résumé fixé au bas de l'écran */
@media (max-width: 560px) {
  .entete .nav-action { white-space: nowrap; }
  .entete .logo span { font-size: 1.3rem; }
  .calc-table { min-width: 0; font-size: 0.94rem; }
  .calc-table th, .calc-table td { padding: 9px 6px; }
  .calc-table th { font-size: 0.74rem; letter-spacing: 0.03em; }
}
.calc-resume { display: none; }
@media (max-width: 960px) {
  .calc-resume { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--nuit); color: var(--blanc); font-family: var(--f-ui); font-size: 0.98rem; box-shadow: 0 -8px 24px rgba(6,18,36,.25);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .calc-resume b { color: var(--or-clair); font-weight: 600; }
  .calc-resume a { flex: none; color: var(--marine); background: var(--or-clair); text-decoration: none; font-weight: 600; border-radius: 999px; padding: 6px 14px; }
  .calc-resume[data-cache="oui"] { display: none; }
  body:has(.calc-resume) .pied { padding-bottom: 84px; }
}

/* Le chemin vers le livre (consigne du client : le calculateur est gratuit, la stratégie est d'amener au livre) */
.calc-vers-livre { font-family: var(--f-ui); font-size: 1rem; margin-top: 4px; }
.calc-vers-livre a { color: var(--or-clair); text-underline-offset: 3px; }
.calc-vers-livre a:hover { color: #ffc85f; }
.calc-livre { scroll-margin-top: 96px; }
.calc-livre-prix { font-family: var(--f-ui); font-weight: 600; color: var(--blanc); margin-top: 8px; }
.calc-livre-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.calc-livre-actions .bouton { margin-top: 0; }
.calc-livre-aide { font-family: var(--f-ui); font-size: 0.92rem; margin-top: 10px; }
.calc-livre-aide a { color: var(--texte-nuit); text-underline-offset: 3px; }
.calc-livre-aide a:hover { color: var(--blanc); }
@media (max-width: 480px) { .calc-livre-actions .bouton { width: 100%; justify-content: space-between; } }

/* Groupes de choix (boutons radio, cases) : sans le cadre gris que le navigateur dessine par défaut */
.calc-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-form fieldset > legend { padding: 0; margin-bottom: 6px; font-family: var(--f-ui); font-weight: 600; font-size: 0.98rem; color: var(--marine); }

/* L'attribut hidden doit toujours cacher, même sur un élément dont la classe fixe un display (groupes de champs, etc.) */
.calc-page [hidden], .calc-resume[hidden] { display: none !important; }

/* Lecture du fichier de consommation d'Hydro-Québec */
.calc-import-zone { position: relative; display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--acier); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-family: var(--f-ui); font-weight: 600; color: var(--marine); background: var(--neige); }
.calc-import-zone:hover { background: var(--blanc); }
.calc-import-zone:focus-within { outline: 3px solid var(--or-clair); outline-offset: 2px; }
.calc-import-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.calc-import-etat { font-family: var(--f-ui); font-size: 0.95rem; border-radius: 10px; padding: 10px 12px; }
.calc-import-etat[data-type="ok"] { background: #e3f1e6; color: #1d5130; }
.calc-import-etat[data-type="erreur"] { background: #fbe7e4; color: #8a2a1c; }

/* Garder un calcul : sauvegarde, lien, PDF, courriel (commun/partage.js) */
.calc-partage-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.calc-partage-bouton { display: inline-flex; align-items: center; font-family: var(--f-ui); font-weight: 600; font-size: 0.98rem; text-decoration: none; cursor: pointer;
  color: var(--marine); background: transparent; border: 0; box-shadow: inset 0 0 0 1.5px var(--marine); border-radius: 999px; padding: 10px 18px; }
.calc-partage-bouton:hover { background: rgba(12,34,64,.06); }
.calc-partage-bouton:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 2px; }
@media (max-width: 480px) { .calc-partage-bouton { flex: 1 1 100%; justify-content: center; } }
.calc-partage-lien input { width: 100%; font-family: var(--f-ui); font-size: 0.92rem; color: var(--marine); background: var(--neige); border: 1.5px solid var(--givre); border-radius: 12px; padding: 10px 12px; }
.calc-partage-note { font-family: var(--f-ui); font-size: 0.95rem; border-radius: 10px; padding: 10px 12px; background: #fff4dc; color: #5c4210; }
.calc-partage-etat { font-family: var(--f-ui); font-size: 0.95rem; color: var(--marine); }
.calc-partage-etat:empty { display: none; }
.calc-partage-sauve, .calc-partage .aide { font-family: var(--f-ui); font-size: 0.9rem; color: var(--texte-doux); line-height: 1.4; }
.calc-rouvert { font-family: var(--f-ui); font-size: 0.95rem; border-radius: 10px; padding: 10px 12px; background: #e3f1e6; color: #1d5130; }
.calc-rouvert .copier, .calc-partage-sauve .copier { margin-left: 4px; }

/* Sur papier (bouton « Enregistrer en PDF », ou impression) : le résultat, vos valeurs, le livre, les hypothèses */
.calc-imprime-seul { display: none; }
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; }
  .entete { position: static; background: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .evitement, .entete .nav, .calc-apercu, .calc-entete .chapeau, .calc-form, .calc-resume, .calc-partage, .calc-rouvert,
  .calc-livre-prix, .calc-livre .argument-prix, .calc-vers-quiz, .calc-livre-actions, .calc-livre-aide, .calc-vers-livre, .calc-bulle,
  .pied { display: none !important; }
  .calc-page { padding: 0; }
  .calc-entete { margin-bottom: 8pt; gap: 4pt; }
  .calc-entete h1 { font-size: 22pt; }
  .calc-grille { display: block; }
  .calc-resultats { display: block; }
  .calc-resultats > * + * { margin-top: 9pt; }
  .calc-imprime-seul { display: block !important; }
  .calc-imprime-date { font-family: var(--f-ui); font-weight: 600; color: var(--acier); }
  .calc-imprime-tete h2 { font-size: 13pt; color: var(--marine); margin: 6pt 0 4pt; }
  .calc-imprime-tete dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1pt 12pt; margin: 0; font-family: var(--f-ui); font-size: 9.5pt; }
  .calc-imprime-tete dt { color: var(--texte-doux); }
  .calc-imprime-tete dd { margin: 0; color: var(--marine); font-weight: 600; }
  .calc-verdict { background: #fff !important; color: var(--marine); border: 1.5pt solid var(--marine); padding: 12pt 14pt; }
  .calc-verdict .surtitre { color: var(--acier); }
  .calc-verdict .grand { font-size: 26pt; }
  .calc-verdict .grand b { color: var(--marine); }
  .calc-verdict p { color: var(--texte); max-width: none; }
  .calc-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc-tuile { border: 1pt solid var(--givre); padding: 8pt 10pt; }
  .calc-tuile .valeur { font-size: 16pt; }
  .calc-livre { background: #fff !important; color: var(--texte); border: 1.5pt solid var(--or); grid-template-columns: 60px 1fr; padding: 10pt 12pt; }
  .calc-livre img { width: 60px; box-shadow: none; }
  .calc-livre p, .calc-livre-prix { color: var(--texte) !important; }
  .calc-bloc { padding: 8pt 0; gap: 6pt; }
  .calc-bloc h2 { font-size: 13pt; }
  .calc-defile { overflow: visible; }
  .calc-table { min-width: 0; font-size: 9.5pt; }
  .calc-table th, .calc-table td { padding: 4pt 6pt; }
  .calc-verdict, .calc-tuiles, .calc-livre, .calc-bloc, .calc-imprime-tete, .calc-imprime-pied, .calc-table tr { break-inside: avoid; }
  .calc-bloc.calc-hypotheses { break-inside: auto; }   /* longue liste : elle coule d'une page à l'autre, un point entier à la fois */
  .calc-hypotheses li, .calc-avertissement { break-inside: avoid; }
  .calc-graphique svg, .calc-pastille, .calc-table tr.calc-rang-vedette td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .calc-imprime-pied { border-top: 1pt solid var(--givre); padding-top: 6pt; font-family: var(--f-ui); font-size: 9pt; color: var(--texte-doux); }
  .calc-imprime-pied p + p { margin-top: 3pt; }
  .calc-imprime-lien { word-break: break-all; color: var(--marine); }
  a { color: inherit; text-decoration: none; }
}

/* Envoi du calcul par le site (formulaire du bloc « Garder ce calcul », visible seulement quand la case anti-robots est réglée) */
.calc-envoi { display: grid; gap: 8px; border-top: 1px solid var(--givre); padding-top: 14px; }
.calc-envoi label { font-family: var(--f-ui); font-weight: 600; font-size: 0.98rem; color: var(--marine); }
.calc-envoi input[type="email"] { width: 100%; font: inherit; font-family: var(--f-ui); font-size: 1.02rem; color: var(--marine); background: var(--neige); border: 1.5px solid var(--givre); border-radius: 12px; padding: 10px 12px; }
.calc-envoi input[type="email"]:focus { outline: none; border-color: var(--acier); background: var(--blanc); box-shadow: 0 0 0 3px rgba(58,104,158,.18); }
.calc-envoi-envoyer { justify-self: start; background: var(--marine); color: var(--blanc); box-shadow: none; }
.calc-envoi-envoyer:hover { background: #12305a; }
.calc-envoi-envoyer:disabled { opacity: .6; cursor: wait; }
.calc-envoi-verif { min-height: 65px; }
.calc-envoi .aide a { color: var(--marine); text-underline-offset: 3px; }
.calc-envoi-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .calc-envoi-envoyer { justify-self: stretch; } }
.calc-envoi-choix { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.calc-envoi-choix legend { padding: 0; margin-bottom: 4px; font-family: var(--f-ui); font-weight: 600; font-size: 0.98rem; color: var(--marine); }
.calc-envoi-choix label { font-family: var(--f-ui); font-weight: 500; color: var(--texte); display: inline-flex; align-items: center; gap: 6px; }
.calc-envoi-choix input { accent-color: var(--marine); }
.calc-envoi-nom { display: grid; gap: 6px; }
.calc-envoi input[type="text"]:not(.calc-envoi-piege) { width: 100%; font: inherit; font-family: var(--f-ui); font-size: 1.02rem; color: var(--marine); background: var(--neige); border: 1.5px solid var(--givre); border-radius: 12px; padding: 10px 12px; }

/* Bloc du livre : la ligne « le prix de deux cafés » (classe .argument-prix de site.css), lisible sur le fond foncé du
   bloc (sans ceci, .calc-livre p lui donnerait le texte pâle du fond nuit), et le lien vers le quiz du même tome. */
.calc-livre .argument-prix { color: var(--texte); margin-top: 12px; }
.calc-vers-quiz { padding: 0 4px; }