/* ============================================================
   PULSAR VOLT — feuille de style
   ------------------------------------------------------------
   Principe : un site CLAIR. Le blanc et les gris portent tout.
   Le doré et le bleu ne servent que d'accents ponctuels
   (un liseré, un chiffre clé, un bouton).
   Tout se règle dans le bloc « :root » ci-dessous.
   ============================================================ */

:root {
  /* ---------- COULEURS ----------
     Les contrastes indiqués sont mesurés (norme : 4,5:1 minimum). */
  --blanc:        #ffffff;
  --gris-05:      #f6f7f8;   /* fond des sections claires alternées */
  --gris-10:      #eceef1;   /* petits aplats (étiquettes, pastilles) */
  --trait:        #e2e5ea;   /* TOUTES les bordures claires */
  --encre:        #101114;   /* texte principal — 18,9:1 sur blanc */
  --encre-2:      #5f6672;   /* texte secondaire — 5,8:1 sur blanc */

  --noir:         #0e0f12;   /* fond des sections sombres */
  --noir-2:       #181a1f;   /* cartes posées sur fond sombre */
  --trait-sombre: #282b32;
  --blanc-2:      #a9b0bc;   /* texte secondaire sur fond sombre — 7,9:1 */

  /* Accents. Le doré pur n'est JAMAIS du texte sur fond clair (1,8:1) :
     il sert de décor. Pour écrire, on utilise --or-texte. */
  --or:           #f5b81d;
  --or-texte:     #8a6200;   /* 5,5:1 sur blanc */
  --bleu:         #1fa8ff;
  --bleu-texte:   #0f6fb4;   /* 5,3:1 sur blanc */

  /* Bouton plein. Pour des boutons noirs plutôt que dorés,
     remplacer par : --btn-fond: var(--encre); --btn-texte: #ffffff; */
  --btn-fond:     var(--or);
  --btn-texte:    #17130a;   /* 10,6:1 sur le doré */

  /* ---------- ESPACEMENTS ----------
     Une seule échelle. On n'utilise RIEN en dehors de ces 7 valeurs. */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 40px;
  --e5: 64px;
  --e6: 96px;
  --e7: 160px;              /* respiration entre deux sections */

  /* ---------- TEXTE ----------
     6 niveaux, pas un de plus. Une seule famille de police,
     celle du système (aucun téléchargement, aucun service externe). */
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --t-affiche: clamp(2.25rem, 5.2vw, 3.5rem);   /* titre de l'accueil */
  --t-titre:   clamp(1.7rem, 3.4vw, 2.4rem);    /* h2 */
  --t-sous:    1.25rem;                          /* h3 */
  --t-lead:    1.125rem;                         /* chapeau */
  --t-base:    1rem;                             /* texte courant */
  --t-petit:   0.875rem;                         /* légendes, labels */

  /* ---------- FORMES ---------- */
  --r-carte:  16px;
  --r-petit:  10px;
  --r-pilule: 999px;
  --ombre: 0 12px 32px -18px rgba(16, 17, 20, 0.35);   /* la seule ombre */
}

/* ============================================================
   BASES
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--blanc); }

body {
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: var(--t-affiche); line-height: 1.07; letter-spacing: -0.03em; }
h2 { font-size: var(--t-titre);   line-height: 1.14; }
h3 { font-size: var(--t-sous);    line-height: 1.3; }

/* Le mot mis en avant dans un titre : sur fond clair, un liseré doré
   sous le texte (le texte, lui, reste noir donc parfaitement lisible). */
.accent {
  background: linear-gradient(var(--or), var(--or)) left bottom / 100% 0.09em no-repeat;
  padding-bottom: 0.05em;
}
.sombre .accent, .cta-bandeau .accent, .scene-phrases .accent {
  background: none; padding-bottom: 0; color: var(--or);
}
.sombre .accent.bleu, .scene-phrases .accent.bleu { color: var(--bleu); }

/* Repère clavier visible partout (accessibilité) */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--or-texte);
  outline-offset: 3px;
}

/* Le logo blanc n'est pas visible sur fond clair : on affiche la version
   sombre. Écrit en CSS pour couvrir aussi les pages EN / KM. */
.nav-marque img, .footer-logo, .hero-logo { content: url("../img/logo-sombre.png"); }
.gamme.diesel  img { content: url("../img/logo-diesel-couleur.png"); }
.gamme.solaire img { content: url("../img/logo-solar-couleur.png"); }

/* ============================================================
   BARRE DE NAVIGATION — capsule claire
   ============================================================ */
.nav {
  position: fixed; top: var(--e2); left: 50%; transform: translateX(-50%);
  z-index: 100;
  width: min(1180px, calc(100% - var(--e3)));
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e1) var(--e1) var(--e1) var(--e3);
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border: 1px solid var(--trait);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav.reduit { background: rgba(255, 255, 255, 0.92); box-shadow: var(--ombre); }

.nav-marque { display: flex; align-items: center; }
.nav-marque img { height: 26px; width: auto; }

.nav-liens { display: flex; align-items: center; gap: 2px; }
.nav-liens > a {
  font-size: var(--t-petit); color: var(--encre-2);
  padding: var(--e1) var(--e2); border-radius: var(--r-pilule);
  transition: color 0.2s, background 0.2s;
}
.nav-liens > a:hover { color: var(--encre); background: var(--gris-10); }
.nav-liens > a.actif { color: var(--encre); font-weight: 600; background: var(--gris-10); }

.langues {
  display: flex; gap: 2px; margin-left: var(--e1);
  padding-left: var(--e1); border-left: 1px solid var(--trait);
}
/* Chaque langue : son code, et son petit drapeau juste en dessous.
   Les drapeaux sont dessinés en SVG dans la page — aucun fichier à
   charger, et surtout pas d'emoji. */
.langues a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 9px 4px; border-radius: var(--r-pilule);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--encre-2);
  transition: color 0.2s, background 0.2s;
}
.langues .drapeau-langue {
  display: block; width: 16px; height: 11px;
  border-radius: 1.5px; overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(16, 17, 20, 0.22);
  opacity: 0.55;
  transition: opacity 0.2s;
}
.langues .drapeau-langue svg { display: block; width: 100%; height: 100%; }
.langues a:hover .drapeau-langue,
.langues a.actif .drapeau-langue { opacity: 1; }
.langues a:hover { color: var(--encre); background: var(--gris-10); }
.langues a.actif { color: var(--encre); background: var(--gris-10); }

.burger {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px;
}
.burger span {
  width: 20px; height: 2px; border-radius: 2px; background: var(--encre);
  transition: transform 0.25s, opacity 0.25s;
}
.burger.ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { padding: var(--e1) var(--e1) var(--e1) var(--e2); }
  .burger { display: flex; }
  .nav-liens {
    position: absolute; top: calc(100% + var(--e1)); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: var(--e1);
    background: var(--blanc);
    border: 1px solid var(--trait); border-radius: 20px;
    box-shadow: var(--ombre);
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav-liens.ouvert { opacity: 1; pointer-events: all; transform: none; }
  .nav-liens > a { padding: var(--e2); width: 100%; font-size: var(--t-base); }
  .langues {
    margin: var(--e1) 0 0; padding: var(--e1) 0 0;
    border-left: none; border-top: 1px solid var(--trait);
    justify-content: center;
  }
  .langues a { padding: var(--e1) var(--e2); }
}

/* ============================================================
   SECTIONS — une seule façon de faire
   ============================================================ */
section {
  position: relative;
  padding: var(--e7) var(--e4);
  background: var(--blanc); color: var(--encre);
}
section.gris   { background: var(--gris-05); }
section.sombre { background: var(--noir); color: var(--blanc); }

.conteneur { max-width: 1140px; margin: 0 auto; }
.conteneur.etroit { max-width: 720px; }
.centre { text-align: center; }
.centre .intro-section { margin-left: auto; margin-right: auto; }

.sur-titre {
  display: block; margin-bottom: var(--e2);
  font-size: var(--t-petit); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--encre-2);
}
.sombre .sur-titre { color: var(--blanc-2); }

.intro-section {
  margin-top: var(--e3); max-width: 38em;
  color: var(--encre-2); font-size: var(--t-lead); line-height: 1.6;
}
.sombre .intro-section { color: var(--blanc-2); }

/* ---------- Apparition au défilement : une seule animation ---------- */
.reveal {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   BOUTONS — un plein, un contour. C'est tout.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px var(--e3); border-radius: var(--r-pilule);
  font: inherit; font-size: var(--t-base); font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s, background 0.2s, color 0.2s;
}
.btn-or { background: var(--btn-fond); color: var(--btn-texte); }
.btn-or:hover { opacity: 0.85; }
.btn-contour { border-color: var(--trait); color: var(--encre); background: transparent; }
.btn-contour:hover { border-color: var(--encre); }
.sombre .btn-contour, .cta-bandeau .btn-contour {
  border-color: var(--trait-sombre); color: var(--blanc);
}
.sombre .btn-contour:hover, .cta-bandeau .btn-contour:hover { border-color: var(--blanc); }

/* ============================================================
   GRAND ÉCRAN D'ACCUEIL (clair)
   ============================================================ */
.hero {
  position: relative;
  min-height: min(86svh, 780px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: var(--e7) var(--e4) var(--e6);
  background: var(--blanc); color: var(--encre);
}
.hero.court {
  min-height: 0;
  padding: calc(var(--e6) + var(--e4)) var(--e4) var(--e6);
}
.hero-logo { width: min(420px, 74vw); margin-bottom: var(--e4); }
.hero h1 { max-width: 17em; }
.hero.court h1 { font-size: var(--t-titre); }
.hero p.sous-titre {
  margin-top: var(--e3); max-width: 34em;
  font-size: var(--t-lead); line-height: 1.6; color: var(--encre-2);
}
.hero .boutons {
  margin-top: var(--e4);
  display: flex; gap: var(--e2); flex-wrap: wrap; justify-content: center;
}
.hero .indice-defilement {
  position: absolute; bottom: var(--e4); left: 50%; transform: translateX(-50%);
  color: var(--encre-2); font-size: var(--t-lead); opacity: 0.6;
}

/* ============================================================
   CHIFFRES CLÉS
   ============================================================ */
.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e2); margin-top: var(--e5);
}
.chiffre {
  padding: var(--e4) var(--e3); text-align: center;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r-carte);
}
.sombre .chiffre { background: var(--noir-2); border-color: var(--trait-sombre); }
/* le seul décor doré : un petit trait au-dessus du chiffre */
.chiffre::before {
  content: ""; display: block; width: 24px; height: 2px;
  background: var(--or); margin: 0 auto var(--e2);
}
.chiffre .valeur {
  font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--encre);
}
.sombre .chiffre .valeur { color: var(--blanc); }
.chiffre .legende { margin-top: var(--e1); font-size: var(--t-petit); color: var(--encre-2); }
.sombre .chiffre .legende { color: var(--blanc-2); }

/* ============================================================
   CARTES — une seule façon de faire une carte
   (.gamme, .produit, .valeur-carte, .contact-carte, .catalogue-bloc)
   ============================================================ */
.gamme, .produit, .valeur-carte, .contact-carte, .catalogue-bloc, .solaire-feature, .fiche {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.gamme:hover, .produit:hover, .valeur-carte:hover,
.contact-carte:hover, .catalogue-bloc:hover, .solaire-feature:hover {
  border-color: #cfd4db; box-shadow: var(--ombre);
}
.sombre .produit, .sombre .valeur-carte, .sombre .chiffre {
  background: var(--noir-2); border-color: var(--trait-sombre); color: var(--blanc);
}
.sombre .produit:hover, .sombre .valeur-carte:hover { border-color: #3a3e47; box-shadow: none; }

/* ---------- Cartes de gamme (accueil) ----------
   La grille s'adapte au nombre de gammes : 2 aujourd'hui, 3 demain
   (les cartes passent d'elles-mêmes sur une ou deux lignes).
   Une carte reste correcte SANS logo : le titre prend alors la place. */
.gammes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e3); margin-top: var(--e5); align-items: stretch;
}
.gamme {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--e5) var(--e4); text-align: center;
}
.gamme > *:first-child { margin-top: 0; }
.gamme h3 { margin-bottom: var(--e1); }
.gamme p { color: var(--encre-2); }
.gamme .lien {
  display: block; margin-top: auto; padding-top: var(--e3);
  font-weight: 600; font-size: var(--t-petit); color: var(--or-texte);
}
.gamme.solaire .lien { color: var(--bleu-texte); }

/* ---------- Image + texte côte à côte ---------- */
.vitrine {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--e5); align-items: center;
}
.vitrine .visuel { border-radius: var(--r-carte); overflow: hidden; background: var(--gris-05); }
.vitrine h2 { margin-bottom: var(--e2); }
.vitrine p { color: var(--encre-2); margin-bottom: var(--e2); }
.sombre .vitrine p { color: var(--blanc-2); }
.vitrine ul { list-style: none; margin: var(--e3) 0 var(--e4); }
.vitrine li { position: relative; padding: 6px 0 6px var(--e3); }
.vitrine li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--or);
}

/* ---------- Vidéo ---------- */
.cadre-video { border-radius: var(--r-carte); overflow: hidden; border: 1px solid var(--trait); }
.sombre .cadre-video { border-color: var(--trait-sombre); }
.cadre-video video { width: 100%; display: block; }
.media-solaire { display: flex; flex-direction: column; gap: var(--e3); }
.media-logo { width: min(260px, 64%); margin: 0 auto; }

/* ---------- Cartes produits ---------- */
.produits-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--e3); margin-top: var(--e5);
}
.produit { overflow: hidden; display: flex; flex-direction: column; }
.produit .photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gris-05); }
.produit .photo img { width: 100%; height: 100%; object-fit: cover; }
.produit .corps { padding: var(--e3); display: flex; flex-direction: column; flex: 1; }
.produit h3 { font-size: var(--t-sous); }

.etiquette {
  align-self: flex-start; margin-bottom: var(--e2);
  padding: 4px 10px; border-radius: var(--r-pilule);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(245, 184, 29, 0.16); color: var(--or-texte);
}
.etiquette.bleue { background: rgba(31, 168, 255, 0.12); color: var(--bleu-texte); }
.sombre .etiquette { background: rgba(245, 184, 29, 0.16); color: var(--or); }
.sombre .etiquette.bleue { background: rgba(31, 168, 255, 0.14); color: var(--bleu); }

.produit .puissance {
  margin-top: 2px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--or-texte);
}
.produit .puissance.bleue { color: var(--bleu-texte); }
.sombre .produit .puissance { color: var(--or); }
.sombre .produit .puissance.bleue { color: var(--bleu); }

.produit table { width: 100%; margin: var(--e2) 0 var(--e3); border-collapse: collapse; font-size: var(--t-petit); }
.produit td { padding: 7px 0; border-bottom: 1px solid var(--trait); line-height: 1.45; }
.sombre .produit td { border-color: var(--trait-sombre); }
.produit td:first-child { color: var(--encre-2); padding-right: var(--e2); }
.sombre .produit td:first-child { color: var(--blanc-2); }
.produit td:last-child { text-align: right; }
.produit .btn { margin-top: auto; }
.lien-fiche {
  display: block; margin-top: var(--e2); text-align: center;
  font-size: var(--t-petit); font-weight: 600; color: var(--bleu-texte);
}
.lien-fiche:hover { text-decoration: underline; }
.sombre .lien-fiche { color: var(--bleu); }

/* exemple concret de consommation */
.exemple-conso {
  margin: 0 0 var(--e2); padding: var(--e2);
  background: var(--gris-05); border: 1px solid var(--trait); border-radius: var(--r-petit);
  font-size: var(--t-petit); line-height: 1.5; color: var(--encre-2);
}
.exemple-conso b { color: var(--encre); font-weight: 600; }
.sombre .exemple-conso { background: rgba(255, 255, 255, 0.04); border-color: var(--trait-sombre); color: var(--blanc-2); }
.sombre .exemple-conso b { color: var(--blanc); }

/* ============================================================
   LOGOS DE MARQUE « by diesel » / « by solar energy » / « by led »
   Les trois gammes ont maintenant leur logo : plus aucun nom écrit
   en toutes lettres à la place d'un logo.
   DEUX tailles, pas une de plus, et toujours le même alignement :
   - .logo-gamme : 64 px de haut, en tête d'une famille de produits
   - .logo-carte : 20 px de haut, sur une carte ou une fiche produit
   Hauteur fixée, largeur automatique : le logo n'est jamais déformé.
   Fond transparent : on ne pose JAMAIS de pavé sombre derrière.
   ============================================================ */
.logo-gamme, .gamme-logo, .gamme img {
  height: 64px; width: auto; margin: 0 auto var(--e3);
}
.logo-carte { height: 20px; width: auto; flex: none; }

.carte-marque {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); margin-bottom: var(--e2);
}
.carte-marque .etiquette { margin-bottom: 0; }
@media (max-width: 700px) {
  .logo-gamme, .gamme-logo, .gamme img { height: 52px; }
}

/* ---------- En-tête de gamme (page Produits) ---------- */
.gamme-entete { max-width: 46em; margin: 0 auto; }
.gamme-trait { display: block; width: 40px; height: 2px; background: var(--or); margin: var(--e4) auto 0; }
.gamme-entete.solaire .gamme-trait { background: var(--bleu); }
.gamme-badge {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 4px 12px; border-radius: var(--r-pilule); margin-bottom: var(--e2);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--gris-10); color: var(--encre-2);
}
.gamme-badge .pt { width: 6px; height: 6px; border-radius: 50%; background: var(--or); flex: none; }
.gamme-entete.solaire .gamme-badge .pt { background: var(--bleu); }

.chips-puissance {
  display: flex; flex-wrap: wrap; gap: var(--e1);
  justify-content: center; margin: var(--e3) auto 0; max-width: 44em;
}
.chips-puissance span {
  border: 1px solid var(--trait); border-radius: var(--r-pilule);
  padding: 6px 14px; font-size: var(--t-petit); font-weight: 600;
  color: var(--encre); background: var(--blanc);
}
.chips-puissance .sur-commande { border-style: dashed; color: var(--encre-2); font-weight: 400; }

/* ---------- Bannière produit large (station solaire) ---------- */
.solaire-feature {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: var(--e5) 0 var(--e3); overflow: hidden; color: var(--encre);
}
.solaire-feature .feature-media { position: relative; overflow: hidden; min-height: 320px; background: var(--gris-05); }
.solaire-feature .feature-media img { width: 100%; height: 100%; object-fit: cover; }
.solaire-feature .feature-corps {
  padding: var(--e5) var(--e4);
  display: flex; flex-direction: column; justify-content: center;
}
.solaire-feature h3 { font-size: 1.5rem; margin: var(--e1) 0 var(--e2); }
.solaire-feature > .feature-corps > p { color: var(--encre-2); margin-bottom: var(--e3); max-width: 30em; }
.feature-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--e3); margin-bottom: var(--e3);
}
.feature-stats b {
  display: block; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--bleu-texte);
}
.feature-stats span { font-size: var(--t-petit); color: var(--encre-2); }
.feature-actions { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.feature-actions .lien-fiche { margin-top: 0; }
.sous-grille {
  text-align: center; margin-top: var(--e5);
  font-size: var(--t-petit); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--encre-2);
}
@media (max-width: 760px) {
  .solaire-feature { grid-template-columns: 1fr; }
  .solaire-feature .feature-media { min-height: 220px; }
  .solaire-feature .feature-corps { padding: var(--e4) var(--e3); }
  .feature-stats { gap: var(--e2); }
}

/* ---------- Catalogue ---------- */
.catalogue {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e3); margin-top: var(--e5); text-align: left;
}
.catalogue-bloc { padding: var(--e4) var(--e3); }
.catalogue-bloc h3 { font-size: var(--t-sous); margin-bottom: var(--e2); }
.catalogue-bloc ul { list-style: none; }
.catalogue-bloc li {
  position: relative; padding-left: var(--e3); margin: var(--e2) 0;
  color: var(--encre-2); font-size: var(--t-petit); line-height: 1.55;
}
.catalogue-bloc li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--or);
}
.catalogue-bloc.solaire li::before { background: var(--bleu); }
.catalogue-bloc b { color: var(--encre); font-weight: 600; }

/* ---------- Bandeau photo pleine largeur ---------- */
.bande-gamme {
  width: 100%; margin: var(--e5) auto 0;
  border: 1px solid var(--trait); border-radius: var(--r-carte);
  background: var(--blanc);
}

/* ---------- Repères chiffrés (durées, temps de recharge…) ----------
   Une seule façon de faire : une icône au trait, un chiffre, un libellé. */
.usages {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e2); margin-top: var(--e5); text-align: center;
}
.usages.deux { grid-template-columns: repeat(2, 1fr); margin-top: var(--e3); }
.usage {
  padding: var(--e3) var(--e2);
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-carte);
}
.usage svg {
  width: 26px; height: 26px; display: block; margin: 0 auto var(--e2);
  color: var(--or-texte); stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.usage.bleu svg { color: var(--bleu-texte); }
.usage b {
  display: block; font-size: 1.375rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--encre); line-height: 1.2;
}
.usage span { display: block; margin-top: 4px; font-size: var(--t-petit); color: var(--encre-2); line-height: 1.4; }

/* ---------- Valeurs (à propos) ---------- */
.valeurs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--e3); margin-top: var(--e5); text-align: left;
}
.valeur-carte { padding: var(--e4) var(--e3); }
.valeur-carte::before {
  content: ""; display: block; width: 24px; height: 2px;
  background: var(--or); margin-bottom: var(--e3);
}
.valeur-carte h3 { font-size: var(--t-sous); margin-bottom: var(--e1); }
.valeur-carte p { color: var(--encre-2); font-size: var(--t-petit); }
.sombre .valeur-carte p { color: var(--blanc-2); }
.valeur-carte .icone { font-size: 1.5rem; margin-bottom: var(--e1); }

/* ---------- Cartes contact ---------- */
.contact-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--e3);
}
.contact-carte { display: block; padding: var(--e4) var(--e3); text-align: center; }
.contact-carte .icone { color: var(--encre-2); font-size: 1.5rem; }
.contact-carte .icone svg { width: 22px; height: 22px; margin: 0 auto; display: block; }
.contact-carte h3 { margin: var(--e2) 0 4px; font-size: var(--t-base); }
.contact-carte p { color: var(--encre-2); font-size: var(--t-petit); }
.contact-carte .valeur {
  display: block; margin-top: var(--e1); font-weight: 600; color: var(--encre);
}

/* ============================================================
   SCÈNE À PHRASES (accueil) — sombre, texte qui change au défilement
   ============================================================ */
.scene-phrases { background: var(--noir); color: var(--blanc); padding: 0; }
.scene-phrases .piste { height: 400svh; }
.phrases-sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--e5) var(--e5); overflow: hidden;
}
.phrase {
  position: absolute; max-width: 14em; margin: 0;
  font-size: clamp(1.6rem, 4.4vw, 2.9rem); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.18;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.phrase.actif { opacity: 1; transform: none; }
.phrases-indic {
  position: absolute; right: var(--e4); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: var(--e2);
}
.phrases-indic i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); transition: background 0.3s;
}
.phrases-indic i.on { background: var(--or); }
@media (max-width: 640px) { .phrases-indic { right: var(--e3); } }

/* ============================================================
   PARCOURS « de la commande à la livraison » (à propos)
   ============================================================ */
.parcours .timeline { position: relative; max-width: 700px; margin: var(--e5) auto 0; padding-left: var(--e5); }
.parcours .timeline-ligne {
  position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px;
  background: var(--trait); overflow: hidden;
}
.parcours .timeline-remplissage {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: var(--or);
}
.parcours .etape { position: relative; padding-bottom: var(--e4); }
.parcours .etape:last-child { padding-bottom: 0; }
.parcours .etape-point {
  position: absolute; left: calc(var(--e5) * -1); top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--t-petit);
  background: var(--blanc); color: var(--encre-2);
  border: 1px solid var(--trait);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.parcours .etape.atteint .etape-point {
  background: var(--or); border-color: var(--or); color: var(--btn-texte);
}
.parcours .etape-corps { padding-top: 6px; }
/* Note : le texte des étapes n'est PAS estompé — un texte à moitié
   transparent ne respecterait plus le contraste minimum. Ce sont la
   ligne dorée et les pastilles qui montrent la progression. */
.parcours .etape-corps h3 { font-size: var(--t-sous); margin-bottom: 4px; }
.parcours .etape-corps p { color: var(--encre-2); font-size: var(--t-petit); max-width: 34em; }
@media (max-width: 560px) {
  .parcours .timeline { padding-left: var(--e4); }
  .parcours .etape-point { left: calc(var(--e4) * -1); width: 32px; height: 32px; }
  .parcours .timeline-ligne { left: 15px; }
}

/* ============================================================
   PAGE FICHES TECHNIQUES  (refonte du 29/08/2026)
   ------------------------------------------------------------
   Disposition en deux colonnes : à gauche un sommaire qui reste
   à l'écran pendant qu'on descend (une rubrique par gamme, qui
   s'ouvre et se referme), à droite la fiche elle-même.
   Sur téléphone, le sommaire passe au-dessus de la fiche.
   ============================================================ */
.fiches-page {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
}
/* Cette page est un outil de consultation : on resserre la
   respiration d'entrée, qui est calibrée pour les pages de vente. */
.page-fiches .hero.court { padding-bottom: var(--e4); }
.page-fiches section.gris { padding-top: var(--e5); }

/* ---------- Colonne de gauche : le sommaire ---------- */
.fiches-nav {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-height: calc(100vh - 116px);
}

/* Champ de recherche */
.fiches-chercher { position: relative; flex-shrink: 0; }
.fiches-chercher svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--encre-2); pointer-events: none;
}
.fiches-chercher input {
  width: 100%; padding: 10px 34px 10px 36px;
  font: inherit; font-size: var(--t-petit); color: var(--encre);
  background: var(--gris-10); border: 1px solid transparent;
  border-radius: var(--r-pilule);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none; appearance: none;
}
.fiches-chercher input::placeholder { color: var(--encre-2); }
.fiches-chercher input:focus {
  outline: none; background: var(--blanc);
  border-color: var(--trait); box-shadow: 0 0 0 4px rgba(15, 111, 180, 0.12);
}
.fiches-chercher .effacer {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; display: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--encre-2); color: var(--blanc);
  font: inherit; font-size: 12px; line-height: 1;
}
.fiches-chercher.rempli .effacer { display: flex; }

/* La liste des gammes, qui défile si elle est trop longue */
.fiches-sommaire {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  margin-right: -4px;
}

/* Une rubrique = une gamme */
.gamme-bloc + .gamme-bloc { margin-top: var(--e1); }
.gamme-titre {
  width: 100%; display: flex; align-items: center; gap: var(--e1);
  padding: 8px 10px; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-petit);
  font: inherit; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-2);
  text-align: left;
  transition: color 0.2s ease, background 0.2s ease;
}
.gamme-titre:hover { color: var(--encre); background: var(--gris-05); }
.gamme-titre .chevron {
  width: 12px; height: 12px; flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.gamme-bloc.ferme .chevron { transform: rotate(-90deg); }
.gamme-titre .compte {
  margin-left: auto; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0; color: var(--encre-2);
  background: var(--gris-10); border-radius: var(--r-pilule); padding: 1px 8px;
}

/* Le repli/dépli : une hauteur qui s'anime, sans à-coup */
.gamme-liste {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.22s ease;
}
.gamme-bloc.ferme .gamme-liste { grid-template-rows: 0fr; opacity: 0; }
.gamme-liste > div { overflow: hidden; min-height: 0; }

/* Un produit dans le sommaire */
.puce-produit {
  width: 100%; display: flex; align-items: baseline; gap: var(--e1);
  padding: 9px 10px; margin-top: 2px; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-petit);
  font: inherit; font-size: var(--t-petit); font-weight: 500; color: var(--encre);
  text-align: left; line-height: 1.35;
  transition: background 0.18s ease, color 0.18s ease;
}
.puce-produit:hover { background: var(--gris-05); }
.puce-produit .valeur-puce {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.75rem; font-weight: 600; color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.puce-produit.actif { background: var(--gris-10); font-weight: 600; }
.puce-produit.actif .valeur-puce { color: var(--encre); }
.puce-produit:focus-visible,
.gamme-titre:focus-visible { outline: 2px solid var(--bleu-texte); outline-offset: 1px; }

.fiches-sommaire .rien {
  padding: var(--e2) 10px; font-size: var(--t-petit); color: var(--encre-2);
}

/* ---------- Barre au-dessus de la fiche ---------- */
.fiche-barre {
  display: flex; align-items: center; gap: var(--e2);
  flex-wrap: wrap; margin-bottom: var(--e3);
}
.fiche-fil {
  font-size: var(--t-petit); color: var(--encre-2);
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.fiche-fil strong { color: var(--encre); font-weight: 600; }

/* Le choix de la langue : un bouton qui ouvre un petit menu */
.langue-menu { position: relative; margin-left: auto; }
.langue-bouton {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  font: inherit; font-size: var(--t-petit); font-weight: 600; color: var(--encre);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.langue-bouton:hover { border-color: #cfd4db; box-shadow: var(--ombre); }
.langue-bouton .globe { width: 15px; height: 15px; color: var(--encre-2); }
.langue-bouton .chevron { width: 11px; height: 11px; color: var(--encre-2); transition: transform 0.24s ease; }
.langue-menu.ouvert .langue-bouton .chevron { transform: rotate(180deg); }

.langue-panneau {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 210px; padding: 6px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--trait); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(16, 17, 20, 0.14);
  opacity: 0; transform: translateY(-6px) scale(0.98);
  transform-origin: top right; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
.langue-menu.ouvert .langue-panneau { opacity: 1; transform: none; pointer-events: auto; }
.puce-langue {
  width: 100%; display: flex; align-items: center; gap: var(--e1);
  padding: 8px 10px; cursor: pointer;
  background: none; border: 0; border-radius: 9px;
  font: inherit; font-size: var(--t-petit); color: var(--encre); text-align: left;
  transition: background 0.15s ease;
}
.puce-langue:hover { background: var(--gris-10); }
.puce-langue .code {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--encre-2); width: 22px; flex-shrink: 0;
}
.puce-langue .coche { margin-left: auto; width: 14px; height: 14px; color: var(--bleu-texte); opacity: 0; }
.puce-langue.actif { font-weight: 600; }
.puce-langue.actif .coche { opacity: 1; }
.puce-langue.actif .code { color: var(--bleu-texte); }

/* ---------- La fiche ---------- */
.fiche { overflow: hidden; }
.fiche-entete {
  display: flex; flex-wrap: wrap; gap: var(--e5); align-items: center;
  padding: var(--e5);
  background: linear-gradient(180deg, var(--gris-05) 0%, var(--blanc) 100%);
  border-bottom: 1px solid var(--trait);
}
.fiche-entete .fiche-photo {
  width: min(300px, 100%); border-radius: var(--r-carte); background: var(--blanc);
}
.fiche-entete .infos { flex: 1; min-width: 240px; }
.fiche-entete .logo-carte { margin-bottom: var(--e2); }
.fiche-entete .sur-gamme {
  display: block; margin-bottom: 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-2);
}
.fiche-entete h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.02em; }
.fiche-entete .sous { margin-top: var(--e2); color: var(--encre-2); font-size: var(--t-lead); max-width: 42em; }
.fiche-entete .badge {
  display: inline-block; margin-top: var(--e3); padding: 5px 14px; border-radius: var(--r-pilule);
  background: var(--or); color: var(--btn-texte);
  font-size: var(--t-petit); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Le corps : les sections se répartissent en deux colonnes
   sur grand écran, au lieu de s'empiler sur toute la hauteur. */
.fiche-corps { padding: var(--e5); }
.fiche-grille { columns: 1; column-gap: var(--e5); }
@media (min-width: 1180px) {
  .fiche-grille { columns: 2; }
}
/* Une section ne doit jamais être coupée en deux par le saut de colonne. */
.fiche-bloc { break-inside: avoid; page-break-inside: avoid; display: block; }
.fiche-bloc + .fiche-bloc { margin-top: var(--e4); }
.fiche-corps h4 {
  margin: var(--e4) 0 var(--e1); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-2);
}
.fiche-corps h4 { margin-top: 0; }
.fiche-corps table { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.fiche-corps td {
  padding: 11px 0; border-bottom: 1px solid var(--trait);
  vertical-align: top; line-height: 1.55;
}
.fiche-corps tr:last-child td { border-bottom: 0; }
.fiche-corps td:first-child { color: var(--encre-2); width: 44%; padding-right: var(--e2); }
.fiche-corps td:last-child { font-variant-numeric: tabular-nums; }
.fiche-corps .note {
  margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--trait);
  font-size: var(--t-petit); color: var(--encre-2); max-width: 60em;
}
.fiche-actions {
  display: flex; gap: var(--e2); flex-wrap: wrap;
  padding: 0 var(--e5) var(--e5);
}

/* L'apparition de la fiche quand on change de produit */
@keyframes fiche-entre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.fiche.anime { animation: fiche-entre 0.4s cubic-bezier(0.32, 0.72, 0, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .fiche.anime { animation: none; }
  .gamme-liste, .langue-panneau, .gamme-titre .chevron { transition: none; }
}

/* ---------- Téléphones et petites tablettes ---------- */
@media (max-width: 960px) {
  .fiches-page { grid-template-columns: 1fr; gap: var(--e4); }
  .fiches-nav {
    position: static; max-height: none;
    background: var(--blanc); border: 1px solid var(--trait);
    border-radius: var(--r-carte); padding: var(--e2);
  }
  .fiches-sommaire { max-height: 340px; }
  .fiche-entete, .fiche-corps { padding: var(--e3); }
  .fiche-entete { gap: var(--e3); }
  .fiche-actions { padding: 0 var(--e3) var(--e3); }
  .langue-menu { margin-left: 0; }
  .fiche-barre { gap: var(--e1); }
}
@media (max-width: 460px) {
  .fiche-actions .btn { width: 100%; text-align: center; }
}

/* ---------- Page mentions légales ---------- */
.texte-legal { color: var(--encre-2); margin-bottom: var(--e4); }
.texte-legal + h3, h2 + h3 { margin-top: var(--e5); }
.texte-legal a { text-decoration: underline; }

/* ============================================================
   BANDEAU D'APPEL À L'ACTION (section sombre)
   ============================================================ */
.cta-bandeau {
  text-align: center; padding: var(--e7) var(--e4);
  background: var(--noir); color: var(--blanc);
}
.cta-bandeau h2 { max-width: 20em; margin: 0 auto; }
.cta-bandeau p {
  margin: var(--e3) auto var(--e4); max-width: 34em;
  color: var(--blanc-2); font-size: var(--t-lead); line-height: 1.6;
}
.cta-bandeau .sur-titre { color: var(--blanc-2); }
.cta-bandeau strong { color: var(--blanc); font-weight: 600; }

/* ============================================================
   FORMULAIRE
   ============================================================ */
.formulaire { margin-top: var(--e5); text-align: left; display: grid; gap: var(--e3); }
.champ { display: flex; flex-direction: column; gap: var(--e1); }
.champ-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.formulaire label { font-size: var(--t-petit); font-weight: 600; color: var(--encre); }
.formulaire input, .formulaire select, .formulaire textarea {
  font: inherit; font-size: var(--t-base); width: 100%;
  color: var(--encre); background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  padding: 12px var(--e2);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
  outline: none; border-color: var(--or-texte);
  box-shadow: 0 0 0 3px rgba(245, 184, 29, 0.22);
}
.formulaire textarea { resize: vertical; min-height: 130px; }
.consentement {
  display: flex; gap: var(--e2); align-items: flex-start;
  font-size: var(--t-petit); font-weight: 400; color: var(--encre-2); line-height: 1.5;
}
.consentement input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--or-texte); }
.consentement a { color: var(--encre); text-decoration: underline; }
.formulaire button { justify-self: start; }
.form-note {
  margin: 0; font-size: var(--t-petit); padding: var(--e2);
  border-radius: var(--r-petit); line-height: 1.5;
  border: 1px solid var(--trait); background: var(--gris-05); color: var(--encre);
}
.form-note.erreur { border-color: #d8b4b4; background: #fdf3f3; color: #8f1f1e; }
@media (max-width: 560px) { .champ-2 { grid-template-columns: 1fr; } }

/* ============================================================
   PIED DE PAGE (clair)
   ============================================================ */
footer {
  padding: var(--e5) var(--e4);
  background: var(--gris-05); color: var(--encre-2);
  border-top: 1px solid var(--trait);
}
.footer-grille {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e4);
}
.footer-grille h4 {
  font-size: var(--t-petit); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre); margin-bottom: var(--e2);
}
.footer-grille a, .footer-grille p {
  display: block; color: var(--encre-2); font-size: var(--t-petit); padding: 3px 0;
}
.footer-grille a:hover { color: var(--encre); }
.footer-logo { height: 26px; width: auto; margin-bottom: var(--e2); }
.footer-bas {
  max-width: 1140px; margin: var(--e5) auto 0; padding-top: var(--e3);
  border-top: 1px solid var(--trait);
  font-size: var(--t-petit); color: var(--encre-2);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e1);
}

/* ============================================================
   ÉCRANS ÉTROITS (téléphone)
   ============================================================ */
@media (max-width: 700px) {
  section, .cta-bandeau { padding: var(--e6) var(--e3); }
  .hero { padding: var(--e6) var(--e3) var(--e5); min-height: min(84svh, 640px); }
  .hero.court { padding: calc(var(--e5) + var(--e4)) var(--e3) var(--e5); }
  footer { padding: var(--e5) var(--e3); }
  .phrases-sticky { padding: var(--e5) var(--e4); }
  .hero .boutons { width: 100%; flex-direction: column; align-items: stretch; }
  .hero .boutons .btn { width: 100%; }
  /* sur téléphone, la flèche viendrait toucher les boutons : on la retire */
  .hero .indice-defilement { display: none; }
  .produit .corps, .catalogue-bloc, .valeur-carte, .contact-carte { padding: var(--e3); }
  .gamme { padding: var(--e4) var(--e3); }
}

/* ============================================================
   INTRO D'OUVERTURE (page d'accueil) — courte et discrète
   ============================================================ */
html.intro-active { overflow: hidden; }
html.intro-off #intro { display: none; }

#intro {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.intro-fond { position: absolute; inset: 0; background: var(--blanc); }
#intro .intro-logo {
  position: relative; width: min(360px, 68vw); opacity: 0;
  will-change: transform, opacity;
}

/* ============================================================
   CURSEUR PERSONNALISÉ (ordinateur uniquement)
   Deux pièces, rien de plus :
   - un POINT plein, collé à la souris (aucun retard : on vise juste) ;
   - un ANNEAU fin qui suit avec un léger retard (c'est lui qui donne
     la sensation de fluidité).
   Aucune déformation, aucun flou, aucune transparence de verre.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  html.curseur-perso, html.curseur-perso * { cursor: none !important; }
  /* dans un champ de saisie, on rend le vrai curseur texte */
  html.curseur-perso input, html.curseur-perso textarea,
  html.curseur-perso select, html.curseur-perso [contenteditable] { cursor: auto !important; }
}
/* ---- LA GOUTTE ----------------------------------------------------------
   Une seule goutte de verre, petite, COLLÉE au pointeur : sa position est
   écrite directement au mouvement de la souris, sans aucun rattrapage, donc
   sans décalage. L'enveloppe (#curseur) ne fait que se déplacer ; c'est la
   goutte intérieure (#curseur > i) qui change de taille et de couleur, en
   douceur. Séparer les deux évite que le grossissement vienne parasiter le
   déplacement.                                                             */
#curseur {
  position: fixed; top: 0; left: 0; pointer-events: none;
  z-index: 9998; opacity: 0; will-change: transform;
  transition: opacity 0.2s ease;
}
#curseur > i {
  display: block;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid var(--encre);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(1.5px) saturate(1.2);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.2);
  transition: transform 0.18s ease, border-color 0.2s ease, background 0.2s ease;
}
/* sur un élément cliquable : la goutte grossit à peine, et passe au doré */
#curseur.actif > i {
  transform: scale(1.35);
  border-color: var(--or-texte);
  background: rgba(245, 184, 29, 0.16);
}
/* sur une section sombre : contour clair pour rester visible */
#curseur.sur-sombre > i {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.16);
}
#curseur.sur-sombre.actif > i { border-color: var(--or); }
/* au-dessus de VOLTA : la goutte prend sa couleur (point d'accroche .sur-volta) */
#curseur.sur-volta > i {
  border-color: #35e0ff;
  background: rgba(53, 224, 255, 0.16);
  transform: scale(1.35);
}

/* ============================================================
   MOUVEMENT RÉDUIT — on coupe tout
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .phrase { transition: none; }
  #intro { display: none; }
  html.intro-active { overflow: auto; }
  #curseur { display: none; }
  * { animation: none !important; }
}

/* ============================================================
   IMPRESSION D'UNE FICHE TECHNIQUE
   ============================================================ */
@media print {
  /* À l'impression, il ne reste QUE la fiche : ni menu, ni sommaire,
     ni sélecteur de langue, ni assistant. */
  .nav, footer, .fiches-nav, .fiche-barre, .fiche-actions, .cta-bandeau, .hero,
  #curseur, #volta-bulle, #volta-panneau { display: none !important; }
  section { padding: 0; }
  .fiches-page { display: block; }
  .fiche { border: none; }
  .fiche.anime { animation: none; }
  .fiche-entete { background: #fff !important; border-bottom: 1px solid #ccc; padding: 0 0 16px; }
  .fiche-corps { padding: 16px 0 0; }
  /* deux colonnes de caractéristiques sur la feuille A4 */
  .fiche-grille { columns: 2; column-gap: 28px; }
  .fiche-corps td { padding: 6px 0; }
}

/* ════════════════════════════════════════════════════════════
   VOLTA — assistante énergie · style HUD « JARVIS » (cyan)
   ── Bloc conservé EXACTEMENT tel quel, à la demande du client :
      VOLTA garde son apparence actuelle. Ne rien changer ici.
   ════════════════════════════════════════════════════════════ */
/* Bulle « vivante » : goutte de verre turquoise translucide qui se déforme
   sur place (aucun déplacement). Elle grossit quand on la survole. */
#volta-bulle {
  position: fixed; right: 24px; bottom: 24px; z-index: 9000;
  width: 58px; height: 58px; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 36% 30%, rgba(150,236,255,0.30), rgba(53,224,255,0.14) 48%, rgba(20,60,80,0.10) 100%);
  border: 1.5px solid rgba(53,224,255,0.55);
  border-radius: 47% 53% 58% 42% / 53% 47% 53% 47%;
  box-shadow: 0 8px 26px -8px rgba(0,0,0,0.5), 0 0 26px -6px rgba(53,224,255,0.55),
              inset 0 1px 6px rgba(255,255,255,0.35), inset 0 -5px 14px rgba(53,224,255,0.25);
  -webkit-backdrop-filter: blur(3px) saturate(1.4); backdrop-filter: blur(3px) saturate(1.4);
  animation: volta-vie 6s ease-in-out infinite;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
/* reflet interne qui ondule + halo qui respire = « plus vivant » */
#volta-bulle::before {
  content: ""; position: absolute; inset: 15%; pointer-events: none;
  border-radius: 55% 45% 48% 52% / 50% 55% 45% 50%;
  background: radial-gradient(circle at 40% 34%, rgba(190,246,255,0.55), rgba(53,224,255,0) 72%);
  animation: volta-reflet 4.5s ease-in-out infinite;
}
#volta-bulle::after {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  border-radius: inherit; box-shadow: 0 0 24px 1px rgba(53,224,255,0.45);
  animation: volta-halo 3.4s ease-in-out infinite;
}
@keyframes volta-reflet {
  0%,100% { border-radius: 55% 45% 48% 52% / 50% 55% 45% 50%; transform: translate(0,0) scale(1); opacity: 0.85; }
  50%     { border-radius: 45% 55% 52% 48% / 55% 45% 55% 45%; transform: translate(1.5px,-1.5px) scale(1.12); opacity: 1; }
}
@keyframes volta-halo { 0%,100% { opacity: 0.4; } 50% { opacity: 0.95; } }
#volta-bulle:hover {
  transform: scale(1.28);
  border-color: rgba(120,240,255,0.85);
  box-shadow: 0 12px 34px -8px rgba(0,0,0,0.55), 0 0 44px -4px rgba(53,224,255,0.8),
              inset 0 1px 8px rgba(255,255,255,0.45), inset 0 -6px 16px rgba(53,224,255,0.35);
}
/* déformation « vivante » : seule la forme change, la position ne bouge pas */
@keyframes volta-vie {
  0%,100% { border-radius: 47% 53% 58% 42% / 53% 47% 53% 47%; }
  20%     { border-radius: 58% 42% 45% 55% / 46% 57% 43% 54%; }
  40%     { border-radius: 42% 58% 53% 47% / 58% 43% 57% 42%; }
  60%     { border-radius: 53% 47% 47% 53% / 47% 54% 44% 56%; }
  80%     { border-radius: 50% 50% 55% 45% / 52% 47% 51% 49%; }
}
/* petite orbe dans l'en-tête du panneau (même esprit) */
.volta-orbe {
  width: 20px; height: 20px; display: block;
  background: radial-gradient(circle at 36% 30%, rgba(180,244,255,0.5), rgba(53,224,255,0.2) 55%, transparent 78%);
  border: 1px solid rgba(53,224,255,0.6);
  border-radius: 47% 53% 58% 42% / 53% 47% 53% 47%;
  box-shadow: 0 0 10px rgba(53,224,255,0.55);
  animation: volta-vie 7s ease-in-out infinite;
}

/* Panneau de chat — minimaliste & futuriste */
#volta-panneau[hidden] { display: none !important; }
#volta-panneau {
  position: fixed; right: 22px; bottom: 100px; z-index: 9000;
  width: min(372px, calc(100vw - 28px));
  height: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; color: #d7ecf6;
  background: linear-gradient(180deg, rgba(8,16,24,0.93), rgba(5,10,16,0.96));
  border: 1px solid rgba(53,224,255,0.22);
  box-shadow: 0 28px 64px -18px rgba(0,0,0,0.75), 0 0 42px -14px rgba(53,224,255,0.28);
  -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
  animation: volta-apparait 0.3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes volta-apparait { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

.volta-tete { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid rgba(53,224,255,0.16); }
.volta-avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.volta-ident { display: flex; flex-direction: column; line-height: 1.35; }
.volta-ident strong { font-size: 0.86rem; letter-spacing: 0.12em; color: #eaf7ff; }
.volta-ident span { font-size: 0.66rem; letter-spacing: 0.05em; color: #4fc3e8; }
.volta-fermer { margin-left: auto; background: none; border: none; color: #5f8090; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: color 0.2s; }
.volta-fermer:hover { color: #a6efff; }

.volta-messages { flex: 1; overflow-y: auto; padding: 1rem 0.95rem; display: flex; flex-direction: column; gap: 0.75rem; }
.volta-messages::-webkit-scrollbar { width: 6px; }
.volta-messages::-webkit-scrollbar-thumb { background: rgba(53,224,255,0.25); border-radius: 6px; }
.volta-msg { max-width: 88%; font-size: 0.9rem; line-height: 1.55; }
.volta-lui { align-self: flex-start; color: #cfe6f2; padding-left: 0.75rem; border-left: 2px solid rgba(53,224,255,0.5); }
.volta-lui strong { color: #eaf7ff; }
.volta-lui a { color: #5fe0ff; text-decoration: underline; }
.volta-moi { align-self: flex-end; text-align: right; color: #a9e9ff; padding: 0.4rem 0.7rem; border: 1px solid rgba(53,224,255,0.28); background: rgba(53,224,255,0.06); border-radius: 12px 12px 3px 12px; }
.volta-ecrit { display: flex; gap: 5px; align-items: center; padding-left: 0.75rem; }
.volta-ecrit span { width: 5px; height: 5px; border-radius: 50%; background: #35e0ff; animation: volta-point 1.2s infinite ease-in-out; }
.volta-ecrit span:nth-child(2) { animation-delay: 0.15s; }
.volta-ecrit span:nth-child(3) { animation-delay: 0.3s; }
@keyframes volta-point { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.volta-saisie { display: flex; gap: 0.5rem; padding: 0.7rem 0.8rem; border-top: 1px solid rgba(53,224,255,0.16); }
.volta-saisie input {
  flex: 1; font: inherit; font-size: 0.9rem; color: #eaf7ff;
  background: rgba(53,224,255,0.05); border: 1px solid rgba(53,224,255,0.2);
  border-radius: 10px; padding: 0.6rem 0.85rem; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.volta-saisie input::placeholder { color: #5f8090; }
.volta-saisie input:focus { border-color: #35e0ff; box-shadow: 0 0 0 3px rgba(53,224,255,0.15); }
.volta-saisie button {
  flex: none; width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(53,224,255,0.3); background: rgba(53,224,255,0.1); color: #a6efff;
  display: grid; place-items: center; transition: background 0.2s, box-shadow 0.2s;
}
.volta-saisie button:hover { background: rgba(53,224,255,0.2); box-shadow: 0 0 14px -2px rgba(53,224,255,0.5); }
.volta-pied { font-size: 0.64rem; letter-spacing: 0.05em; color: #4a6470; text-align: center; padding: 0 1rem 0.65rem; }

@media (max-width: 480px) {
  #volta-bulle { right: 16px; bottom: 16px; }
  #volta-panneau { right: 14px; left: 14px; width: auto; bottom: 90px; height: min(66vh, 520px); }
}
@media (prefers-reduced-motion: reduce) {
  #volta-bulle, #volta-bulle::before, #volta-bulle::after, .volta-orbe { animation: none !important; }
  #volta-panneau { animation: none; }
  .volta-ecrit span { animation: none; }
}

/* ============================================================
   LE PASSAGE D'UNE PAGE À L'AUTRE
   ------------------------------------------------------------
   Un fondu très court : on ne le remarque pas, mais la
   navigation cesse de « claquer ». C'est tout ce qu'on veut.

   🔴 RÈGLE DE SÛRETÉ : la page est VISIBLE par défaut. Le fondu
   n'existe que si JavaScript a posé la classe « transitions ».
   Sans JavaScript, ou s'il plante, rien n'est masqué — ce site
   a déjà eu une page d'accueil entièrement blanche à cause
   d'une animation d'apparition mal écrite.
   ============================================================ */
html.transitions body {
  opacity: 0;
}
html.transitions.pret body {
  opacity: 1;
  transition: opacity 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}
/* au départ vers une autre page */
html.transitions.part body {
  opacity: 0;
  transition: opacity 0.20s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  html.transitions body,
  html.transitions.pret body,
  html.transitions.part body { opacity: 1; transition: none; }
}

/* ============================================================
   LES FICHES, RANGÉES PAR GAMME  (2026-09-08)
   ------------------------------------------------------------
   Les 21 fiches ne tenaient plus dans une seule page : chaque
   gamme a désormais la sienne, et fiches-techniques.html est
   devenu le sommaire qui y mène.
   Aucune valeur inventée ici : uniquement les 7 espacements,
   les 6 tailles de texte et l'ombre unique de la charte.
   ============================================================ */

/* ---------- LE SOMMAIRE : TROIS CARTES ---------- */
.fiches-gammes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3);
  padding: var(--e4) 0 var(--e3);
}

.fiche-gamme-carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: var(--e4) var(--e3) var(--e3);
  text-decoration: none;
  color: inherit;
  /* On n'anime que la transformation et l'ombre : jamais une
     hauteur ni une marge, qui feraient recalculer la page. */
  transition: transform .34s cubic-bezier(.22,1,.36,1),
              box-shadow .34s cubic-bezier(.22,1,.36,1),
              border-color .34s ease;
}
.fiche-gamme-carte:hover,
.fiche-gamme-carte:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ombre);
  border-color: #d3d8e0;
}

.fiche-gamme-logo { height: 30px; width: auto; align-self: flex-start; }

.fiche-gamme-compte {
  margin-top: var(--e3);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fiche-gamme-carte h2 {
  font-size: var(--t-sous);
  line-height: 1.25;
  margin-top: var(--e1);
}
.fiche-gamme-carte p {
  color: var(--encre-2);
  font-size: var(--t-petit);
  margin-top: var(--e2);
}

.fiche-gamme-points {
  list-style: none;
  margin-top: var(--e3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}
.fiche-gamme-points li {
  font-size: var(--t-petit);
  color: var(--encre-2);
  background: var(--gris-10);
  border-radius: var(--r-pilule);
  padding: 2px 12px;
}

.fiche-gamme-lien {
  margin-top: auto;
  padding-top: var(--e3);
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--bleu-texte);
}
.fiche-gamme-lien svg { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.fiche-gamme-carte:hover .fiche-gamme-lien svg { transform: translateX(3px); }

.fiches-note-langues {
  text-align: center;
  color: var(--encre-2);
  font-size: var(--t-petit);
  max-width: 44em;
  margin: 0 auto var(--e5);
}

/* ---------- L'EN-TÊTE D'UNE PAGE DE GAMME ---------- */
.hero.hero-gamme { padding-bottom: var(--e3); }
.hero-logo-gamme {
  height: 46px;
  width: auto;
  margin-bottom: var(--e3);
}

.fiche-chiffres {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: var(--e4);
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--trait);
}
.fiche-chiffre b {
  display: block;
  font-size: var(--t-sous);
  font-weight: 600;
  letter-spacing: -.02em;
}
.fiche-chiffre span {
  display: block;
  font-size: var(--t-petit);
  color: var(--encre-2);
  margin-top: 2px;
}

/* ---------- LES ONGLETS DE GAMME ---------- */
.fiches-onglets {
  display: flex;
  justify-content: center;
  gap: var(--e1);
  flex-wrap: wrap;
  padding-bottom: var(--e3);
}
.fiches-onglet {
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--encre-2);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: var(--r-pilule);
  border: 1px solid transparent;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.fiches-onglet:hover { background: var(--gris-05); color: var(--encre); }
.fiches-onglet.actif {
  background: var(--encre);
  color: var(--blanc);
  font-weight: 600;
}

/* ---------- LE BOUTON DE TÉLÉCHARGEMENT ---------- */
#fiche-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
}
#fiche-pdf .ic-pdf { width: 16px; height: 16px; flex: none; }
/* Pendant la fabrication, la flèche descend et remonte : c'est le
   seul retour visible sur une fiche en russe ou en hindi, dont la
   page se dessine avant d'entrer dans le fichier. */
#fiche-pdf.occupe { opacity: .72; cursor: progress; }
#fiche-pdf.occupe .ic-pdf { animation: pdf-descend 1s ease-in-out infinite; }
@keyframes pdf-descend {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

/* ---------- TÉLÉPHONE ET TABLETTE ---------- */
@media (max-width: 900px) {
  .fiches-gammes  { grid-template-columns: 1fr; gap: var(--e2); padding-top: var(--e4); }
  .fiche-chiffres { grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
  .hero-logo-gamme { height: 38px; }
}
@media (max-width: 560px) {
  .fiche-gamme-carte { padding: var(--e3) var(--e2) var(--e2); }
  .fiches-onglets { gap: 6px; }
  .fiches-onglet  { padding: 6px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .fiche-gamme-carte, .fiche-gamme-lien svg, #fiche-pdf.occupe .ic-pdf { transition: none; animation: none; }
}

/* Sur une page de gamme, le sommaire n'a plus qu'un seul groupe :
   son titre répéterait mot pour mot le titre de la page. On le
   retire, et la liste occupe toute la colonne. */
body[data-gamme-fiche] .fiches-sommaire .gamme-titre { display: none; }
body[data-gamme-fiche] .fiches-sommaire .gamme-bloc  { border: 0; padding-top: 0; }

/* ============================================================
   LE MENU DÉROULANT DE « PRODUITS »  (2026-09-10)
   ------------------------------------------------------------
   Les trois gammes ont chacune leur page. On les choisit ici,
   au survol — et au toucher sur téléphone, où le survol n'existe
   pas : là, le volet se déplie dans le menu burger.
   🔴 Le volet ne se referme PAS entre le lien et lui : il est
   collé sous le lien, sans espace, et la zone sensible englobe
   les deux (.nav-groupe). Sans cela le menu se ferme dès qu'on
   descend la souris — le défaut classique de ce composant.
   ============================================================ */
.nav-groupe { position: relative; display: flex; align-items: center; }

.nav-groupe > a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-petit); color: var(--encre-2);
  padding: var(--e1) var(--e2); border-radius: var(--r-pilule);
  transition: color .2s, background .2s;
}
.nav-groupe > a:hover,
.nav-groupe:hover > a { color: var(--encre); background: var(--gris-10); }
.nav-groupe > a.actif { color: var(--encre); font-weight: 600; background: var(--gris-10); }

.nav-chevron {
  width: 11px; height: 11px; opacity: .5;
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.nav-groupe:hover .nav-chevron { transform: rotate(180deg); opacity: .8; }

.nav-volet {
  position: absolute; top: 100%; left: 0;
  /* le petit pont invisible : le volet commence juste sous le lien */
  margin-top: 8px; padding: 6px;
  min-width: 400px;
  background: var(--blanc);
  border: 1px solid var(--trait); border-radius: 18px;
  box-shadow: var(--ombre);
  opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  transition: opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
/* la zone sensible couvre le pont de 8 px */
.nav-groupe::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}
.nav-groupe:hover .nav-volet,
.nav-groupe:focus-within .nav-volet {
  opacity: 1; pointer-events: all; transform: none;
}

.nav-volet a {
  display: flex; align-items: center; gap: var(--e2);
  padding: 11px 13px; border-radius: 12px;
  transition: background .2s ease;
}
.nav-volet a:hover { background: var(--gris-05); }
/* 🔴 Les trois logos n'ont PAS la même largeur naturelle : « by solar
   energy » est plus long que « by led ». Sans colonne de largeur fixe,
   les trois textes commençaient à des endroits différents. */
.nav-volet img {
  height: 27px; width: 112px; flex: none;
  object-fit: contain; object-position: left center;
}
.nav-volet span {
  display: flex; flex-direction: column;
  font-size: 12.5px; line-height: 1.4; color: var(--encre-2);
  /* la description tient sur une ligne : sans cela « 9 à 3000 kVA »
     se coupait en deux et la rangée montait à trois lignes */
  white-space: nowrap;
}
.nav-volet b { font-size: var(--t-petit); color: var(--encre); font-weight: 600; }

@media (max-width: 900px) {
  /* Sur téléphone il n'y a pas de survol : le volet est toujours
     déplié dans le menu burger, en retrait sous « Produits ». */
  .nav-groupe { display: block; }
  .nav-groupe > a { width: 100%; padding: var(--e2); font-size: var(--t-base); }
  .nav-chevron { display: none; }
  .nav-volet {
    position: static; min-width: 0; margin: 2px 0 var(--e1);
    padding: 4px; border-radius: 14px;
    background: var(--gris-05); border-color: transparent; box-shadow: none;
    opacity: 1; pointer-events: all; transform: none;
  }
  .nav-volet a { padding: 10px 12px; gap: var(--e1); }
  /* 🔴 Le « nowrap » qui garde la description sur une ligne au
     survol ferait DÉBORDER le texte sur un écran de 390 px : on le
     lève ici, et la colonne du logo rétrécit pour laisser la place. */
  .nav-volet span { white-space: normal; }
  .nav-volet img { width: 84px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-volet, .nav-chevron { transition: none; }
}

/* Le piège à robots du formulaire : invisible, hors du parcours au
   clavier, et surtout IMPOSSIBLE à cocher — même par un remplissage
   automatique du navigateur. Un humain qui la cocherait verrait sa
   demande rejetée sans jamais comprendre pourquoi. */
/* 🔴 « !important » est ICI justifié, et vérifié à l'écran : la règle
   « .formulaire input { width: 100% } » est plus forte que « .ct-piege »
   et étalait le piège sur 780 px de large. Un humain pouvait donc le
   cocher — et sa demande aurait été rejetée sans explication. */
.ct-piege {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0 !important;
  pointer-events: none !important;
}