/* ===========================================================================
   TRIMBOUR ENERGIES — les pièces propres à cette marque
   ---------------------------------------------------------------------------
   `trimbour.css` est le kit commun aux deux activités, destiné à rester
   identique dans `trimbour-renov` et `trimbour-energies`. Rien ne doit y être
   ajouté pour un seul des deux sites, sinon les copies divergent et la
   prochaine reprise du kit efface le travail. (Au 15 août 2026, le dépôt
   Rénov porte encore son ancienne feuille « chaux, anthracite et taupe » :
   la bascule vers le kit n'y a pas été faite.)

   Ce fichier contient donc ce que Rénov n'a pas : le logo déposé (Energies a
   son fichier de marque, Rénov garde le talon de mètre du kit), les réglages
   chiffrés du simulateur (curseurs, répartition), le tableau de comparaison
   et les horaires de charge — et depuis les retours de Tristan et Paul des
   16-17 août 2026 (« moins sobre, plus d'animations », logos fabricants) :
   le bandeau Na défilant, la nuit sodium, le héros panoramique, les cartes
   fabricants et les pictos (sections 7 à 10).

   Trois règles héritées de DESIGN.md, valables ici aussi :
   — aucun jeton n'est redéfini, tout vient de `trimbour.css` ;
   — aucun chiffre d'ordre : les seuls chiffres affichés sont des mesures ;
   — l'accent vif ne porte du texte que dans le couple sanctionné pour
     Energies, --accent-btn / --accent-on (encre sur orange, 7,71).
=========================================================================== */


/* ---------------------------------------------------------------------------
   0. LE LOGO
   Le fichier de marque, détouré depuis l'original (soleil orange #F8931F,
   panneaux et lettres à l'encre du kit). Deux tirages : `logo-energies.png`
   sur papier, `logo-energies-nuit.png` où l'encre passe en papier pour le
   pied de page. L'orange est le même que --accent : le logo a donné le jeton.
------------------------------------------------------------------------------ */

.tb-logo-lien { display: inline-flex; align-items: center; }
.tb-logo { display: block; width: auto; height: clamp(31px, 3.2vw, 38px); }
.tb-pied .tb-logo { height: 44px; }

@media (max-width: 780px) {
  .tb-pied .tb-logo { height: 38px; }
}
@media (pointer: coarse) {
  .tb-logo-lien { min-height: 44px; }
}


/* ---------------------------------------------------------------------------
   1. LA CASE D'ÉLÉMENT — retirée
   La grande case « Na » du héros a été retirée le 17 août 2026 à la demande
   de Paul (« le gros Na+ là sur le côté c'est pas possible »). Le motif Na
   vit en petit : le bandeau défilant, la puce de fiche (.tb-puce-na) et la
   marque du tableau de comparaison (.tb-comp__m i).
------------------------------------------------------------------------------ */


/* ---------------------------------------------------------------------------
   2. LE CURSEUR DE SAISIE
   Une piste fine, la part parcourue en accent, et un disque solaire pour
   curseur : le point qu'on touche porte le soleil du logo. La largeur de la
   part remplie est écrite en ligne par le runtime : aucune propriété de mise
   en page n'est animée.
------------------------------------------------------------------------------ */

.tb-regle { display: grid; gap: 11px; }
.tb-regle__h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.tb-regle__v {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tb-regle__v i { font-family: var(--f-texte); font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--ink-3); margin-left: 6px; }
/* La traduction de la réglette dans l'unité du client : des m² de toiture,
   des euros par mois. Elle se lit sous la piste, plus bas que la note. */
.tb-regle__n { font-size: 12.5px; line-height: 1.5; }
.tb-regle--accent .tb-regle__v { color: var(--accent-deep); }

/* La bande d'accueil porte cinq cotes. L'`auto-fit` du kit en placerait
   quatre dès qu'elles ne tiennent plus toutes, laissant la cinquième seule
   sur sa ligne : on impose donc 5, puis 3, puis 2 — jamais 4. */
.tb-cotes--cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1210px) { .tb-cotes--cinq { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .tb-cotes--cinq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px)  { .tb-cotes--cinq { grid-template-columns: minmax(0, 1fr); } }

.tb-regle__p { position: relative; }
/* La part parcourue, posée sur la ligne de piste. Sa largeur est écrite en
   ligne par le runtime : une propriété standard, pas un jeton personnalisé —
   le compilateur x-dc ne garantit que les premières. */
.tb-regle__f {
  position: absolute;
  left: 0;
  top: 10px;              /* le milieu des 22 px du curseur */
  height: 2px;
  background: var(--accent);
  pointer-events: none;
}

.tb-regle__i {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}
.tb-regle__i::-webkit-slider-runnable-track { height: 2px; background: var(--rule-2); }
.tb-regle__i::-moz-range-track { height: 2px; background: var(--rule-2); }
/* Le disque solaire. */
.tb-regle__i::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -9px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
}
.tb-regle__i::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
}
.tb-regle__i:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }


/* ---------------------------------------------------------------------------
   3. LE SIMULATEUR
   Deux volets : ce qu'on règle, ce qu'on lit. Les résultats sont les chiffres
   clés du kit ; les hypothèses restent affichées sous les réglages, parce
   qu'un chiffre sans son hypothèse est une promesse.
------------------------------------------------------------------------------ */

.tb-sim { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tb-sim__p { display: flex; flex-direction: column; gap: clamp(24px, 2.8vw, 34px); padding: clamp(22px, 2.6vw, 34px); background: var(--paper); }
.tb-sim__reg { display: grid; gap: clamp(22px, 2.6vw, 30px); }
.tb-sim__hyp { margin-top: auto; }

/* Les cotes du résultat vivent hors de .tb-cotes : le déroulé des valeurs à
   l'apparition ne doit pas venir réécrire un chiffre qui change au doigt. */
.tb-sim__res { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.tb-sim__res .tb-cote__v { font-size: clamp(26px, 3vw, 40px); font-variant-numeric: tabular-nums; }
.tb-sim__res .tb-cote { gap: 7px; }
.tb-sim__res .tb-note { font-size: 13px; }
.tb-sim__res .tb-cote--accent .tb-cote__v { color: var(--accent-deep); }

/* La répartition de la production : trois parts d'une même barre. */
.tb-part { display: grid; gap: 14px; }
.tb-part__h { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tb-part__v { font-family: var(--f-display); font-weight: 600; font-size: 20px; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
/* Une classe, jamais `span` : le runtime enveloppe chaque valeur interpolée
   dans un span, qu'un sélecteur de descendance viendrait rhabiller. */
.tb-part__q { font-family: var(--f-texte); font-weight: 400; font-size: 13px; color: var(--ink-3); margin-left: 10px; }
.tb-part__b { display: flex; height: 10px; background: var(--paper-3); overflow: hidden; }
.tb-part__b i { display: block; height: 100%; transition: width .28s var(--ease); }
.tb-part__b i:first-child { background: var(--ink); }
.tb-part__b i:last-child  { background: var(--accent); }
.tb-part__l { display: flex; gap: 22px; flex-wrap: wrap; }
.tb-part__l span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.tb-part__l i { width: 9px; height: 9px; flex-shrink: 0; }

.tb-sim__pied { margin-top: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }


/* ---------------------------------------------------------------------------
   4. LE TABLEAU DE COMPARAISON
   Un relevé à quatre colonnes. Sur petit écran il défile horizontalement dans
   son propre cadre — jamais la page — et la colonne des critères reste collée
   à gauche pour qu'on sache toujours ce qu'on lit.
------------------------------------------------------------------------------ */

.tb-defile { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.tb-defile__n { display: none; margin-top: 10px; }

.tb-comp { display: grid; grid-template-columns: .9fr 1fr 1fr 1.15fr; align-items: stretch; min-width: 720px; border-top: 1px solid var(--ink); }
.tb-comp > * { padding: 17px 20px 19px; border-top: 1px solid var(--rule); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.tb-comp > *:nth-child(4n+1) { padding-left: 0; border-top-color: var(--rule); font-size: 14px; color: var(--ink-3); }
.tb-comp > *:not(:nth-child(4n+1)) { border-left: 1px solid var(--rule); }
/* La première rangée est l'en-tête : pas de filet, ce sont des libellés. */
.tb-comp > *:nth-child(-n+4) { border-top: 0; padding-top: 15px; padding-bottom: 13px; }
.tb-comp > *:nth-last-child(-n+4) { border-bottom: 1px solid var(--rule); }

/* Notre colonne : la seule sur fond d'accent voilé. */
.tb-comp__n { background: var(--accent-wash); color: var(--ink); }
.tb-comp__n .tb-comp__m { display: flex; align-items: center; gap: 10px; }
.tb-comp__m i {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}
.tb-comp__m b { font-family: var(--f-display); font-weight: 600; font-size: 14.5px; }


/* ---------------------------------------------------------------------------
   5. LES HEURES
   La journée d'une batterie. Même famille que .tb-etapes du kit, avec une
   grandeur en tête de ligne : ici l'heure EST la mesure.
------------------------------------------------------------------------------ */

.tb-heures { display: grid; border-top: 1px solid var(--rule); }
.tb-heures__r { display: grid; grid-template-columns: 96px 24px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tb-heures__h { font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: -.015em; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.tb-heures__i { width: 22px; height: 22px; color: var(--accent); }
.tb-heures__t { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
/* Le temps où l'installation ne fait plus rien : l'accent se retire. */
.tb-heures__r--nuit .tb-heures__h { color: var(--ink-3); }
.tb-heures__r--nuit .tb-heures__i { color: var(--ink-3); }


/* ---------------------------------------------------------------------------
   6. LA CARTE EN SOURDINE
   La contrepartie assumée : même fiche, voix baissée. Elle ne se déguise pas
   en avantage, et elle ne disparaît pas non plus.
------------------------------------------------------------------------------ */

.tb-carte--sourdine { background: var(--paper-2); }
.tb-carte--sourdine .tb-carte__i { color: var(--ink-3); }
.tb-carte--sourdine .tb-carte__t { color: var(--ink-2); }


/* ---------------------------------------------------------------------------
   7. LE BANDEAU Na
   Le soleil au-dessus de la nuit : une bande d'accent vif où défilent les
   grandeurs du sodium, chacune précédée d'un panneau du logo. L'encre sur
   l'orange est le couple sanctionné d'Energies (--accent-btn / --accent-on,
   7,71). Le contenu est doublé dans le HTML : la piste glisse d'une moitié
   exacte puis reboucle, sans couture. Décoratif, masqué aux lecteurs d'écran.
------------------------------------------------------------------------------ */

.tb-ticker {
  overflow: hidden;
  background: var(--accent);
  color: var(--ink);
  padding: 12px 0;
}
.tb-ticker__t {
  display: flex;
  width: max-content;
  animation: tb-defile-na 32s linear infinite;
}
.tb-ticker:hover .tb-ticker__t { animation-play-state: paused; }
.tb-ticker span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-right: 30px;
  font-family: var(--f-display);
  font-stretch: 78%;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.tb-ticker span::before {
  content: '';
  width: 12px;
  height: 7px;
  margin-right: 30px;
  background: var(--ink);
  transform: skewX(-18deg);
}
@keyframes tb-defile-na { to { transform: translateX(-50%); } }


/* ---------------------------------------------------------------------------
   8. LA NUIT SODIUM
   La section « Pourquoi le sodium » passe sur fond nuit : l'ambre est la
   couleur du lampadaire au sodium, c'est la nuit qu'elle rayonne. Les
   chiffres clés prennent l'accent vif — 7,84 sur le fond nuit, calculé sur
   les valeurs des jetons — et les cartes papier s'allument dessus. Les
   compléments que le kit ne couvre pas :
------------------------------------------------------------------------------ */

.tb-nuit .tb-txt { color: var(--on-night-2); }        /* 6,71 sur nuit */
.tb-nuit .tb-repere__t { color: var(--on-night-2); }
#sodium .tb-cotes .tb-cote__v { color: var(--accent); }
/* Le sceau reste une fiche papier : sans ce rappel, il hériterait de
   l'encre papier de la nuit et son texte disparaîtrait, papier sur papier. */
.tb-nuit .tb-sceau { color: var(--ink); }


/* ---------------------------------------------------------------------------
   9. LE HÉROS
   Le mot solaire du titre prend l'orange profond : le vif du logo ne donne
   que 2,1 sur papier et le mot s'y éteignait — le profond tient 5,52. Le
   panoramique porte le hangar fondateur sur toute la largeur de la trame
   (21:9 ; 3:2 au doigt, où l'écran est étroit) : le plein écran essayé le
   16 août trahissait la qualité du fichier (retour de Paul). Les légendes
   posées sur les cadres laissent passer le pointeur, pour que les
   commandes du composant d'image restent accessibles.
------------------------------------------------------------------------------ */

.tb-h1 em { font-style: normal; color: var(--accent-deep); }

.tb-pano { aspect-ratio: 21 / 9; }

.tb-cadre__ref, .tb-cadre__leg { pointer-events: none; }


/* ---------------------------------------------------------------------------
   10. LE FABRICANT ET LES PICTOS
   Retour de Tristan (16 août) : la fiche matériel doit taper à l'œil — le
   logo Voltec, des drapeaux français, des pictos. Le drapeau est dessiné
   (trois bandes, jamais un émoji de fonte : il se rend pareil partout), le
   « sans » devient des chips barrées, le sodium une puce Na, et chaque
   étape de la méthode porte un picto et le badge de qui s'en charge.
------------------------------------------------------------------------------ */

/* Les cartes fabricants : logo, drapeau, origine. Un lien vers leur site.
   Les deux logos sont rendus à plat sur le papier du kit (fichiers non
   transparents) : ces cartes restent sur fond --paper. */
.tb-fabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.tb-fab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: transform .42s var(--ease), box-shadow .42s var(--ease), border-color var(--vite) ease;
}
.tb-fab:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(31, 21, 13, .10); border-color: var(--rule-2); }
.tb-fab__logo { display: block; width: auto; height: 32px; }
.tb-fab__t { display: flex; flex-direction: column; gap: 4px; }
.tb-fab__k { display: flex; align-items: center; gap: 8px; }
.tb-fab__d { font-size: 14px; color: var(--ink-2); }

/* Le drapeau dessiné : trois bandes et un filet. Le blanc est le papier du
   kit — aucun #fff n'entre dans la page. */
.tb-drapeau {
  display: inline-block;
  width: 19px;
  height: 13px;
  flex-shrink: 0;
  vertical-align: -1px;
  margin-right: 8px;
  border: 1px solid var(--rule-2);
  background: linear-gradient(to right,
    #0050A4 0 33.3%,
    var(--paper) 33.3% 66.6%,
    #D8232A 66.6% 100%);
}
.tb-fab__k .tb-drapeau { margin-right: 0; }

/* La puce Na : la case d'élément en miniature, dans la fiche. */
.tb-puce-na {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent-deep);
}
.tb-puce-na i {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
}

/* Les chips d'exclusion : ce que la batterie ne contient pas. */
.tb-sans { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.tb-sans__c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--rule-2);
  font-size: 13.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.tb-sans__c::before {
  content: '✕';
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
}

/* Les étapes à pictos : le cran cède la place au picto, et le badge dit
   qui s'en charge — six fois « Moi », c'est le message. */
.tb-etapes--picto .tb-etapes__r {
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 14px;
}
.tb-etapes--picto .tb-etapes__r::before { display: none; }
.tb-et__i { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.tb-etapes--picto .tb-etapes__t b { color: var(--ink); font-family: var(--f-display); font-weight: 600; }
.tb-moi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-family: var(--f-display);
  font-stretch: 78%;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tb-moi svg { width: 13px; height: 13px; }


/* ---------------------------------------------------------------------------
   11. ADAPTATION
------------------------------------------------------------------------------ */

@media (max-width: 1000px) {
  .tb-sim { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .tb-ticker { padding: 10px 0; }
  .tb-ticker span { font-size: 13px; padding-right: 22px; }
  .tb-ticker span::before { margin-right: 22px; }
  .tb-pano { aspect-ratio: 3 / 2; }

  /* Le tableau défile dans son cadre ; la page, elle, ne bouge pas. */
  .tb-comp { min-width: 640px; }
  .tb-comp > *:nth-child(4n+1) {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-left: 0;
    padding-right: 14px;
    background: var(--paper-2);
    box-shadow: 1px 0 0 var(--rule);
  }
  .tb-defile__n { display: block; }

  .tb-heures__r { grid-template-columns: 84px 22px 1fr; gap: 12px; }
  .tb-sim__res { gap: 20px; }
}

/* Une clé et une valeur longue ne tiennent pas sur la même ligne à cette
   largeur : la fiche technique se lit alors en deux temps. */
@media (max-width: 480px) {
  .tb-fiche__r { flex-direction: column; align-items: flex-start; gap: 5px; }
  .tb-fiche__v { text-align: left; }
  .tb-sans { justify-content: flex-start; }
}

/* Au doigt et à l'étroit, le badge « Moi » passe sous le texte de l'étape
   plutôt que de comprimer la colonne de lecture. */
@media (max-width: 560px) {
  .tb-etapes--picto .tb-etapes__r { grid-template-columns: 24px 1fr; row-gap: 8px; }
  .tb-etapes--picto .tb-moi { grid-column: 2; justify-self: start; }
}

/* Au doigt, l'index du curseur doit être saisissable sans viser. */
@media (pointer: coarse) {
  /* Mesuré en dégrafant cette requête : l'adresse électronique de la section
     noyée tombait à 27 px de haut. */
  .tb-drench a[href^="mailto"] { display: inline-flex; align-items: center; min-height: 44px; }

  .tb-regle__i { height: 44px; }
  .tb-regle__i::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -12px; }
  .tb-regle__i::-moz-range-thumb { width: 26px; height: 26px; }
  .tb-regle__f { top: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-part__b i { transition: none; }
  /* Le bandeau s'immobilise : les premières grandeurs restent lisibles. */
  .tb-ticker__t { animation: none; }
}

@media print {
  .tb-defile { overflow: visible; }
  .tb-comp { min-width: 0; }
}