/* Défis énergie — surcouche de la seule page /prix.
 *
 * Chargée uniquement par cette page, en plus de style.css. Ce n'est pas un
 * framework de plus : ce sont les règles que Pico (classless) ne peut pas
 * déduire du balisage, parce qu'elles portent une signification propre au
 * contenu — la couleur d'une bordure dit *lequel* des deux extrêmes on regarde.
 *
 * Un bloc <style> inline aurait été plus court, mais la CSP du site
 * (`default-src 'self'`, sans `style-src`) le bloque — comme les attributs
 * `style=`. D'où une feuille séparée, servie depuis la même origine. Le SVG,
 * lui, n'utilise que des attributs de présentation (`fill`, `stroke`), qui ne
 * sont pas concernés.
 *
 * Aucune couleur nouvelle : tout vient des jetons déjà définis dans style.css,
 * pour que le vert et le rouge gardent partout le sens qu'ils ont dans le
 * glossaire.
 */

/* ------------------------------------------------- Cadre de la courbe */
.courbe {
  padding: 1rem .5rem .25rem;
  margin-block: .5rem 1.4rem;
  border: 1px solid var(--defi-trait);
  border-radius: var(--pico-border-radius);
  /* Le même dégradé pâle que le hero : la courbe est la pièce maîtresse de la
     page, elle a droit à son propre fond plutôt qu'à celui de la carte. */
  background-image: var(--defi-degrade-doux);
  /* La courbe est déjà bornée par son viewBox ; ceci évite qu'un futur
     changement de proportions ne la fasse déborder de la carte. */
  overflow-x: auto;
}

.courbe svg {
  display: block;
  height: auto;
  /* Les deux marqueurs d'extrême prennent un léger relief : sur un aplat
     dégradé, un cercle plat se confond avec la bande de tiers derrière lui. */
  filter: drop-shadow(0 1px 2px rgb(15 23 42 / .18));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .courbe svg {
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / .6));
  }
}

/* ------------------------------------------- Cartes des deux extrêmes */
/* Bordure épaisse à gauche, en écho au marqueur correspondant sur la courbe :
   on relie la carte au point sans répéter la couleur dans le texte. Le fond
   teinté est très pâle — il situe la carte, il ne crie pas. */
.carte-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  border: 1px solid var(--defi-trait);
  border-inline-start: 4px solid var(--pico-muted-border-color);
  border-radius: var(--defi-radius-sm);
  padding: .7rem 1rem;
  margin-block: .6rem;
}

.carte-prix strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.carte-prix.bas {
  border-inline-start-color: var(--defi-success-text);
  background: color-mix(in srgb, var(--defi-success-bg) 55%, transparent);
}
.carte-prix.eleve {
  border-inline-start-color: var(--defi-danger-text);
  background: color-mix(in srgb, var(--defi-danger-bg) 55%, transparent);
}

/* --------------------------------------------------- Écart de la journée */
/* L'information actionnable — « ça vaut le coup de décaler ou pas » — mérite
   son propre bandeau plutôt qu'une ligne de bas de carte. */
.bandeau-ecart {
  background: var(--defi-warn-bg);
  color: var(--defi-warn-text);
  border: 1px solid var(--defi-warn-line);
  border-radius: var(--pico-border-radius);
  padding: .8rem 1.1rem;
  margin-block: 1rem 0;
  font-weight: 500;
}

.bandeau-ecart strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- Plages du jour */
/* La journée découpée en tranches contiguës de même tiers. Couvre les 24 h,
   ce qu'un palmarès des « n meilleurs créneaux » ne fait pas — et évite la
   question « pourquoi ce créneau n'apparaît pas alors qu'il n'en était pas
   loin ». La bordure gauche reprend la teinte du tiers, comme la bande de
   fond de la courbe juste au-dessus. */
.segments {
  list-style: none;
  padding-left: 0;
  margin-block: .4rem 0;
}

.segment {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  border-inline-start: 4px solid var(--pico-muted-border-color);
  border-radius: 0 var(--defi-radius-sm) var(--defi-radius-sm) 0;
  padding: .45rem .8rem .45rem .9rem;
  margin-block: .25rem;
  transition: background-color 180ms cubic-bezier(.4, 0, .2, 1);
}

.segment:hover { background: color-mix(in srgb, var(--pico-muted-color) 8%, transparent); }

.segment.bas    { border-inline-start-color: var(--defi-success-text); }
.segment.normal { border-inline-start-color: var(--pico-muted-border-color); }
.segment.eleve  { border-inline-start-color: var(--defi-danger-text); }

/* Une plage remarquable se lit avant les autres : fond teinté du tiers, en
   plus de la graisse — la couleur seule ne suffirait pas en noir et blanc. */
.segment.bas.remarquable   { background: color-mix(in srgb, var(--defi-success-bg) 60%, transparent); }
.segment.eleve.remarquable { background: color-mix(in srgb, var(--defi-danger-bg) 60%, transparent); }

/* La plage occupe une largeur fixe pour que les prix s'alignent d'une ligne
   à l'autre — une colonne en dents de scie se lit mal. Les chiffres passent en
   chasse fixe pour que les décimales tombent les unes sous les autres. */
.segment .plage { min-width: 9.5rem; font-variant-numeric: tabular-nums; }
.segment .prix  { min-width: 7.5rem; font-variant-numeric: tabular-nums; }
.segment .duree { color: var(--pico-muted-color); font-size: .88rem; }

.segment.remarquable { font-weight: 600; }

.segment .mention {
  font-size: .76rem;
  font-weight: 650;
  padding: .12rem .6rem;
  border: 1px solid var(--defi-trait-fort);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pico-muted-color) 10%, transparent);
  color: var(--pico-muted-color);
}
.segment.bas.remarquable .mention {
  background: var(--defi-success-bg);
  color: var(--defi-success-text);
  border-color: var(--defi-success-line);
}
.segment.eleve.remarquable .mention {
  background: var(--defi-danger-bg);
  color: var(--defi-danger-text);
  border-color: var(--defi-danger-line);
}

/* Sous 480px, la durée passe à la ligne plutôt que d'écraser le prix. */
@media (max-width: 480px) {
  .segment .plage,
  .segment .prix { min-width: 0; }
}

/* --------------------------------------------------- En-tête des plages */
.entete-plages {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-block: 1.6rem .4rem;
}
.entete-plages h3 { margin: 0; }

.tri {
  margin: 0;
  display: flex;
  gap: .4rem;
  font-size: .85rem;
}

/* Deux onglets côte à côte : le lien actif se distingue par un fond plein et
   une bordure, pas par une couleur — un changement de teinte casserait le
   contraste en thème sombre, où le fond n'est plus clair. `aria-current` porte
   déjà l'information pour les lecteurs d'écran. */
.tri a {
  color: var(--pico-muted-color);
  padding: .3rem .8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 180ms cubic-bezier(.4, 0, .2, 1),
              border-color 180ms cubic-bezier(.4, 0, .2, 1);
}

.tri a:hover { background: color-mix(in srgb, var(--pico-muted-color) 10%, transparent); }

.tri a[aria-current="page"] {
  background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--pico-primary) 40%, transparent);
  color: var(--pico-primary);
}

/* ------------------------------------------------------- Repère médian */
/* Ni optimum ni pire cas : gris franc, sans fond teinté, pour ne pas se lire
   comme une consigne à côté des cartes verte et rouge. */
.carte-prix.median {
  border-inline-start-color: var(--pico-muted-border-color);
  background: transparent;
}

/* ------------------------------------- Extremum ponctuel dans une plage */
/* Sur sa propre ligne (flex-basis: 100%), en gris et en petit : le rapport
   entre le badge du haut de page et la moyenne de la plage doit se lire sans
   alourdir une liste déjà chargée en couleurs de tiers. N'apparaît que sur les
   deux plages concernées — aucune ligne vide ailleurs. */
.segment .detail {
  flex-basis: 100%;
  font-size: .8rem;
  color: var(--pico-muted-color);
  font-weight: 400;
}

.segment .prix small {
  font-size: .78rem;
  color: var(--pico-muted-color);
  font-weight: 400;
}

/* ------------------------------------------- Lecture au survol de la courbe */
/* Une zone de capture par quart d'heure, et sa bulle — le tout construit dans
 * le SVG par `SvgPriceCurve::sondes()`. La révélation se fait ici, en CSS : la
 * CSP du site interdit tout script (`script-src 'none'`), et il n'y a pas lieu
 * de l'assouplir pour une infobulle.
 *
 * `:active` accompagne `:hover` pour le tactile, où le survol n'existe pas :
 * un appui maintenu affiche la valeur.
 */
.sonde .bulle {
  opacity: 0;
  /* La bulle ne doit jamais intercepter le pointeur : elle déborde sur les
     quarts d'heure voisins, et le survol sauterait d'une zone à l'autre. */
  pointer-events: none;
  transition: opacity 120ms ease;
}

.sonde:hover .bulle,
.sonde:active .bulle { opacity: 1; }

/* Le curseur dit que la courbe se lit, sans promettre un clic. */
.sonde { cursor: crosshair; }

@media (prefers-reduced-motion: reduce) {
  .sonde .bulle { transition: none; }
}

/* ------------------------------------------ Note du tarif réglementé */
/* Le chiffre ne se comprend pas seul : sans cette note, la ligne pointillée
 * se lirait comme « voilà ce que vous payez », alors qu'elle ne montre qu'une
 * fraction du tarif. La note est donc collée à la courbe, pas reléguée en pied
 * de page. */
.note-tarif {
  border-inline-start: 3px solid var(--defi-eclair);
  padding: .6rem 0 .6rem .9rem;
  margin-block: .2rem 1rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--pico-muted-color);
  max-width: 70ch;
}

.note-tarif strong { color: var(--pico-color); }
.note-tarif small { font-size: .82rem; }

/* --------------------------------------------- Navigation entre journées */
/* Deux flèches encadrant le nom de la journée. Sans JavaScript : ce sont des
 * liens, chaque date a donc son adresse — partageable, ouvrable dans un nouvel
 * onglet, et retrouvable par le bouton « précédent » du navigateur.
 *
 * Aux bords du jeu de données, la flèche reste dessinée mais éteinte plutôt
 * que retirée : sa disparition ferait sauter le titre d'un côté à l'autre. */
/* Grille à trois colonnes plutôt qu'une rangée souple : les flèches occupent
   des colonnes de largeur fixe, aux deux bords, et **ne bougent donc jamais**.
   Tout ce qui varie — le nom de la journée, court aujourd'hui et long le
   12 août, et le lien de retour au présent — tient dans la colonne centrale
   élastique. En rangée flex, la flèche droite suivait la longueur du titre et
   sautait d'une date à l'autre. */
.jours {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) 2.1rem;
  align-items: center;
  gap: .5rem;
  width: 100%;
}

.jours h2 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .5rem .6rem;
  text-align: center;
}

.jours h2 small {
  font-size: .82rem;
  font-weight: 500;
  color: var(--pico-muted-color);
  text-transform: none;
  letter-spacing: 0;
}

.jours > a,
.jours > .bout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--defi-trait-fort);
  border-radius: 50%;
  color: var(--pico-color);
  text-decoration: none;
  transition: border-color 180ms cubic-bezier(.4, 0, .2, 1),
              background-color 180ms cubic-bezier(.4, 0, .2, 1),
              transform 180ms cubic-bezier(.34, 1.36, .64, 1);
}

.jours > a:hover {
  border-color: var(--defi-eclair);
  background: var(--defi-eclair-doux);
  transform: scale(1.06);
}

/* Le bout de la série : dessiné, mais visiblement inactif. */
.jours > .bout {
  opacity: .3;
  border-style: dashed;
  cursor: default;
}

/* Retour au présent : n'apparaît que lorsqu'on l'a quitté, et se distingue des
   flèches par sa forme — un mot, pas un pas de plus dans la même direction.
   Logé dans la colonne centrale, avec le titre : le sortir dans une quatrième
   colonne décalerait la flèche droite selon sa présence, ce qu'on cherche
   précisément à éviter. */
.retour-aujourdhui {
  padding: .3rem .8rem;
  border: 1px solid var(--defi-trait-fort);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--pico-muted-color);
}

.retour-aujourdhui:hover {
  border-color: var(--defi-eclair);
  color: var(--defi-eclair);
}

@media (prefers-reduced-motion: reduce) {
  .jours > a:hover { transform: none; }
}

/* ------------------------------------------------ Les flux, en pied de page */
/* Les mêmes données que la page, lisibles par une machine. Présentées en liste
 * décrite plutôt qu'en chapelet de liens séparés par des points médians : le
 * nom du fichier ne dit pas ce qu'il contient, et l'alias daté encore moins
 * sans sa correspondance. */
.flux > h2 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin-block: 0 .7rem;
}

.flux ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}

.flux li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .7rem;
}

.flux .quoi {
  font-size: .85rem;
  color: var(--pico-muted-color);
}

/* L'alias porte la même ressource : dit en retrait, pour qu'on ne le prenne
   pas pour un second document. */
.flux .alias {
  font-size: .82rem;
  color: var(--pico-muted-color);
}

/* Un flux annoncé mais pas encore disponible : montré, pour qu'on sache qu'il
   existera, et visiblement inactif, pour qu'on ne clique pas dessus. */
.flux .eteint {
  opacity: .55;
  text-decoration: line-through;
}

/* ------------------------------ Le tarif réglementé, au milieu des plages */
/* Une ligne de partage dans la liste triée par prix : au-dessus, les créneaux
 * où l'électricité de gros coûte moins que la part fourniture de la facture ;
 * en dessous, ceux où elle coûte plus. Le trait traverse toute la largeur pour
 * qu'on voie la coupure sans lire — c'est un seuil, pas une plage de plus.
 *
 * Même jaune que sur la courbe, où la même valeur est déjà tracée : les deux
 * repères disent la même chose, à deux endroits. */
.repere-tarif {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .75rem;
  margin-block: .7rem;
  padding-block: .35rem;
  border-block: 1px dashed var(--defi-eclair);
  color: var(--defi-eclair);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Décalé de la largeur du liseré des plages, pour que le trait s'aligne sur
   leur texte et non sur leur bordure de couleur. */
.repere-tarif .quoi { padding-inline-start: .9rem; }

.repere-tarif .combien {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

/* Journée entièrement sous le tarif : le repère ferme la liste au lieu de la
   couper. Le ton reste le même, l'information est ailleurs — dans le libellé. */
.repere-tarif.dessous { border-block-end: 0; }

@media (max-width: 480px) {
  .repere-tarif .combien { margin-inline-start: 0; }
}

/* ---------------------------------------- Le choix d'abonnement du visiteur */
/* Deux listes et un bouton, sans JavaScript : le formulaire est envoyé, le
 * serveur pose un cookie et redirige. La valeur retenue est littéralement
 * « BASE:6 » — aucun identifiant, rien qui décrive la personne.
 *
 * Placé juste au-dessus de la note du tarif, parce que c'est ce qu'il modifie :
 * un réglage loin de son effet ne se relie pas. */
.abonnement {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .6rem .9rem;
  margin-block: 1.2rem .4rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--defi-trait);
  border-radius: var(--defi-radius-sm);
  background: color-mix(in srgb, var(--pico-muted-color) 4%, transparent);
}

.abonnement .intro {
  font-size: .88rem;
  font-weight: 600;
  align-self: center;
}

.abonnement label {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: 0;
  font-size: .78rem;
  color: var(--pico-muted-color);
}

.abonnement select {
  margin: 0;
  padding: .35rem 2rem .35rem .6rem;
  font-size: .9rem;
  height: auto;
  width: auto;
}

.abonnement button {
  margin: 0;
  padding: .45rem 1.1rem;
  font-size: .88rem;
  font-weight: 650;
  width: auto;
}

/* Oublier la préférence est une action secondaire : proposée, jamais mise en
   avant à côté de celle qui applique le choix. */
.abonnement .oublier {
  background: transparent;
  border-color: var(--defi-trait-fort);
  color: var(--pico-muted-color);
}

.abonnement .oublier:hover {
  border-color: var(--defi-danger-text);
  color: var(--defi-danger-text);
  background: transparent;
}

/* Combinaison option × puissance qui n'existe pas dans la grille : dit
   franchement, plutôt que de laisser croire au visiteur que le tarif affiché
   est le sien. Ton d'information, pas d'erreur — il n'a rien fait de mal. */
.abonnement-absent {
  margin-block: 1rem .2rem;
  padding: .7rem 1rem;
  border: 1px solid var(--defi-warn-line);
  border-radius: var(--defi-radius-sm);
  background: var(--defi-warn-bg);
  color: var(--defi-warn-text);
  font-size: .9rem;
  font-weight: 500;
}