/* ===========================================================================
   POWERS — Accueil « FROST »

   Transposition de la page d'accueil du site Khalil Service Climatisation
   (kit FROST UI, C:\Users\mabro\OneDrive\Bureau\khalil-clim). Mêmes sections,
   même ordre, même vocabulaire d'effets — contenu POWERS.

   DIFFÉRENCE ASSUMÉE AVEC LA SOURCE
   Le kit est bâti sur des fonds presque noirs. Le client a demandé « plus
   clair » : l'axe est retourné, les valeurs claires deviennent les fonds.
   Retourner un effet de verre n'est pas en baisser l'opacité — sur fond clair
   la même recette donne une carte invisible. C'est l'ombre qui détache, et
   l'arête lumineuse devient colorée.

   UNE SECTION A ÉTÉ REMPLACÉE
   La source a une section « Testimonials » (avis clients). POWERS n'a aucun
   avis réel, et en inventer serait fabriquer des témoignages — la règle du
   projet l'interdit. Le créneau est occupé par « Le groupe », qui montre les
   quatre filiales avec leurs vrais logos.
   =========================================================================== */

body.theme-frost {
  --papier: var(--n-50);
  --filet:  var(--n-150);
  --acier:  var(--n-400);
  --shell:  1240px;
  background: var(--papier);
}

/* ── Ossature ──────────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
/* `overflow-x: clip` et NON `hidden` : les aurores débordent volontairement
   de leur section — c'est ce débord qui fait la nappe — mais elles ne doivent
   pas provoquer de défilement horizontal. `hidden` créerait un conteneur de
   défilement, ce qui casserait les colonnes `position: sticky` des sections
   « Pourquoi POWERS » et « Questions fréquentes ». `clip` coupe sans créer ce
   conteneur.

   Sans cette ligne, l'aurore de la section « Le calcul » débordait de 180 px
   à 390 px de large. */
.fr-section {
  position: relative;
  overflow-x: clip;
  padding-block: clamp(64px, 8vw, 128px);
}

/* ── Eyebrow : le libellé de section du kit, avec son tiret ─────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ice-600);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--ice-400), transparent);
}

/* ── Dégradé de texte « glace » ────────────────────────────────────────── */
.grad-ice {
  background: linear-gradient(100deg, var(--ice-600), var(--aqua-400) 62%, var(--ice-500));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── Aurores : les nappes lumineuses du kit ────────────────────────────── */
.aurora {
  position: absolute; border-radius: 50%;
  max-width: 100vw;
  filter: blur(84px); pointer-events: none; z-index: 0;
  animation: fr-derive 22s ease-in-out infinite alternate;
}
@keyframes fr-derive {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, 6%, 0) scale(1.12); }
}

/* ── Grille technique locale (le fond global en a déjà une) ─────────────── */
.grid-tech {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .07) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 40%, #000 12%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 12%, transparent 74%);
}

/* ── Titre à lignes masquées ───────────────────────────────────────────── */
.clip-line { display: block; overflow: hidden; }
.clip-line > span {
  display: block;
  transform: translateY(104%);
  animation: fr-monter 900ms var(--e-expo) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes fr-monter { to { transform: none; } }

/* ── Révélation au défilement ──────────────────────────────────────────── */
.fr-rev {
  opacity: 0; transform: translateY(22px);
  transition: opacity 760ms var(--e-expo), transform 760ms var(--e-expo);
  transition-delay: var(--d, 0ms);
}
.fr-rev.is-in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════ 1. LE HÉROS */
.fr-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(48px, 6vw, 92px) clamp(64px, 8vw, 120px);
}
.fr-hero-grille {
  display: grid; gap: clamp(36px, 5vw, 64px);
  align-items: center;
  position: relative; z-index: 1;
}
@media (min-width: 1000px) {
  .fr-hero-grille { grid-template-columns: 1.06fr .94fr; }
}

/* La pastille d'accroche : étoiles + phrase courte. */
.fr-pastille {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ice-400) 30%, transparent);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .78rem; font-weight: 500; color: var(--ink-2);
}
.fr-etoiles { display: inline-flex; gap: 2px; color: var(--ice-500); }
.fr-etoiles svg { width: 14px; height: 14px; }

.fr-titre {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.1rem + 4.4vw, 4.05rem);
  font-weight: 700; line-height: 1.03; letter-spacing: -.035em;
  color: var(--ink);
}
.fr-sous {
  max-width: 54ch; margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: 1.06rem; line-height: 1.62; color: var(--ink-2);
}
.fr-sous b { font-weight: 600; color: var(--ice-600); }

.fr-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: clamp(26px, 3vw, 36px);
}

/* Les garanties courtes sous les boutons. */
.fr-preuves {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; list-style: none;
}
.fr-preuves li {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; color: var(--ink-2);
}
.fr-preuves i {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--ice-400) 18%, transparent);
  color: var(--ice-600);
}
.fr-preuves svg { width: 12px; height: 12px; }

/* La colonne visuelle : l'appareil vedette sur une carte de verre. */
.fr-visuel {
  position: relative;
  border-radius: 24px;
  padding: clamp(20px, 2.6vw, 34px);
  background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(240,249,255,.72));
  border: 1px solid color-mix(in srgb, var(--ice-400) 22%, transparent);
  box-shadow: var(--ombre-levee);
}
/* Les deux images sont empilées : on croise leur opacité, on ne remplace pas
   la source affichée. Hauteur fixe, sinon le cadre saute d'un appareil à
   l'autre — un mural est large et plat, une pompe à chaleur presque carrée. */
.fr-vitrine-scene {
  position: relative;
  height: clamp(190px, 22vw, 280px);
  display: grid; place-items: center;
}
.fr-vitrine-img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 620ms var(--e-expo), transform 420ms var(--e-expo);
  filter: drop-shadow(0 18px 34px rgba(11, 22, 34, .18));
}
.fr-vitrine-img.est-on { opacity: 1; }

/* Le lien couvre toute la scène, par-dessus les deux images empilées. Il est
   vide : ce qu'il annonce est porté par son aria-label, mis à jour à chaque
   tour. Le focus doit rester visible — un lien invisible qu'on ne voit pas
   non plus au clavier serait un piège pour qui navigue sans souris. */
.fr-vitrine-lien {
  position: absolute; inset: 0; z-index: 2;
  border-radius: 12px;
  cursor: pointer;
}
.fr-vitrine-lien:focus-visible {
  outline: 2px solid var(--ice-500, #38bdf8);
  outline-offset: 6px;
}
/* Un léger grossissement de l'appareil au survol : le seul indice qui dise
   « ceci se clique » sur une image sans cadre ni bouton. La transition du
   `transform` est déclarée avec celle de l'opacité, plus haut. */
.fr-vitrine-scene:hover .fr-vitrine-img.est-on { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .fr-vitrine-scene:hover .fr-vitrine-img.est-on { transform: none; }
}

/* Les pastilles de comptage ont été retirées : elles annonçaient combien
   d'appareils défilent, ce que le visiteur n'a aucune raison de savoir. */
/* La légende est EMPILÉE et de hauteur fixe : sur une seule ligne, un nom
   long passait à la ligne et le cadre gagnait 36 px — il changeait donc de
   format d'un appareil à l'autre, ce qui est exactement ce qu'une vitrine
   tournante ne doit pas faire. Deux lignes réservées, quelle que soit la
   longueur du nom. */
/* Le nom de l'appareil, centré et seul. La famille a été retirée : elle se
   lit déjà dans le reste de la page, et sur une vignette qui tourne elle
   n'ajoutait qu'une seconde ligne à lire en 3,75 s.

   Hauteur fixe : un nom long passait à la ligne et le cadre gagnait 36 px —
   il changeait donc de format d'un appareil à l'autre, ce qu'une vitrine
   tournante ne doit jamais faire. */
.fr-visuel figcaption {
  display: grid; place-content: center;
  height: 2.6em;
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--filet);
  text-align: center;
}
.fr-visuel figcaption b {
  font-family: var(--font-display); font-size: .98rem; font-weight: 600;
  color: var(--ink); line-height: 1.3;
  /* Coupé plutôt que replié : la coupure est visible et honnête, le repli
     déformerait le cadre. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ═════════════════════════════════════════════════════════ 2. LES MARQUES */
.fr-bande {
  position: relative; z-index: 1;
  border-block: 1px solid var(--filet);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding-block: 34px;
}
.fr-bande-lab {
  text-align: center; margin: 0 0 22px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--acier);
}
.fr-marquise { overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fr-marquise-piste {
  display: flex; align-items: center; gap: 56px;
  width: max-content; padding-right: 56px;
  animation: fr-defiler 38s linear infinite;
}
.fr-marquise:hover .fr-marquise-piste { animation-play-state: paused; }
@keyframes fr-defiler { to { transform: translateX(-50%); } }
.fr-marquise-piste span {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem);
  font-weight: 600; letter-spacing: .12em;
  color: var(--n-300);
  transition: color 300ms var(--e-expo);
  white-space: nowrap;
}
.fr-marquise-piste span:hover { color: var(--ice-500); }

/* ═════════════════════════════════════════════════════════ 3. LES CHIFFRES */
.fr-chiffres {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: 26px; overflow: hidden;
  box-shadow: var(--ombre);
}
@media (min-width: 900px) { .fr-chiffres { grid-template-columns: repeat(4, 1fr); } }
.fr-chiffre {
  position: relative;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: clamp(28px, 3.4vw, 44px) clamp(18px, 2vw, 28px);
  text-align: center;
}
.fr-chiffre b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
  font-weight: 700; line-height: 1; letter-spacing: -.03em;
  font-feature-settings: "tnum" 1;
}
.fr-chiffre span {
  display: block; max-width: 16ch; margin: 12px auto 0;
  font-size: .84rem; line-height: 1.35; color: var(--ink-2);
}

/* ══════════════════════════════════════════════════════════ 4. LES GAMMES */
.fr-tete { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 72px); }
.fr-tete h2, .fr-colonne h2 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.032em;
  color: var(--ink);
}
.fr-tete p, .fr-colonne > p {
  margin: 18px 0 0; font-size: 1.03rem; line-height: 1.62; color: var(--ink-2);
}

.fr-gammes { display: grid; gap: var(--s-5); }
@media (min-width: 720px)  { .fr-gammes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .fr-gammes { grid-template-columns: repeat(3, 1fr); } }

.fr-gamme {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: 22px;
  border: 1px solid var(--filet);
  background: linear-gradient(155deg, rgba(255,255,255,.92), rgba(242,247,251,.8));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ombre);
  color: inherit;
  transition: box-shadow 480ms var(--e-expo), transform 480ms var(--e-expo),
              border-color 480ms var(--e-expo);
}
.fr-gamme:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-levee);
  border-color: color-mix(in srgb, var(--ice-400) 34%, transparent);
}
.fr-gamme-ic {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ice-400) 24%, transparent);
  background: color-mix(in srgb, var(--ice-400) 12%, transparent);
  color: var(--ice-600);
  transition: transform 500ms var(--e-ressort);
}
.fr-gamme:hover .fr-gamme-ic { transform: scale(1.1); }
.fr-gamme h3 {
  margin: 20px 0 0;
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
}
.fr-gamme p { margin: 10px 0 0; font-size: .92rem; line-height: 1.58; color: var(--ink-2); }
.fr-gamme-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: auto; padding-top: var(--s-5);
  font-family: var(--font-mono); font-size: .76rem; color: var(--ice-600);
}
.fr-gamme-pied svg { transition: transform 300ms var(--e-expo); }
.fr-gamme:hover .fr-gamme-pied svg { transform: translateX(4px); }

/* ══════════════════════════════════════════════════ 5. POURQUOI / RAISONS */
.fr-duo { display: grid; gap: clamp(40px, 5vw, 80px); }
@media (min-width: 1000px) { .fr-duo { grid-template-columns: .85fr 1.15fr; } }
@media (min-width: 1000px) {
  .fr-colonne--collante { position: sticky; top: 120px; align-self: start; }
}

/* Le filet était bleu comme tout le reste de la page : noyée dans l'ambiance
   glace, la citation ne se détachait plus et prenait l'air d'un encadré
   décoratif générique. Elle passe au rouge POWERS Heat, relevé sur le logo de
   la filiale chauffage — une couleur de la maison, et la seule chaude du
   site. C'est aussi ce qui lui redonne un statut : une parole, pas un bloc
   d'ambiance. */
.fr-citation {
  position: relative;
  margin-top: clamp(28px, 3.4vw, 40px);
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 28px);
  border-radius: 4px 18px 18px 4px;
  border: 1px solid var(--filet);
  border-left: 3px solid var(--f-heat);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--f-heat) 5%, #fff), rgba(255, 255, 255, .86));
}
/* Le guillemet ouvrant, en filigrane. */
.fr-citation::before {
  content: "C";
  position: absolute; top: -14px; right: 18px;
  font-family: var(--font-display);
  font-size: 5rem; line-height: 1; font-weight: 700;
  color: color-mix(in srgb, var(--f-heat) 14%, transparent);
  pointer-events: none;
}
.fr-citation p {
  margin: 0; font-family: var(--font-display);
  font-size: 1.05rem; line-height: 1.6; color: var(--ink);
}
.fr-citation cite {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; font-style: normal;
  font-family: var(--font-mono); font-size: .76rem; color: var(--acier);
}
.fr-citation cite::before {
  content: ""; width: 16px; height: 1px; background: var(--f-heat); flex-shrink: 0;
}

.fr-raisons { display: grid; gap: var(--s-5); }
@media (min-width: 620px) { .fr-raisons { grid-template-columns: repeat(2, 1fr); } }
.fr-raison {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 20px;
  border: 1px solid var(--filet);
  background: linear-gradient(155deg, rgba(255,255,255,.92), rgba(242,247,251,.8));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ombre);
  transition: border-color 500ms var(--e-expo), box-shadow 500ms var(--e-expo);
}
.fr-raison:hover {
  border-color: color-mix(in srgb, var(--ice-400) 32%, transparent);
  box-shadow: var(--ombre-levee);
}
.fr-raison h3 {
  margin: 18px 0 0;
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.3; color: var(--ink);
}
.fr-raison p { margin: 10px 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════ 6. LE PARCOURS */
.fr-parcours { position: relative; display: grid; gap: clamp(28px, 3.4vw, 44px); }
.fr-parcours::before {
  content: ""; position: absolute; left: 19px; top: 12px; bottom: 12px;
  width: 2px; background: var(--filet); border-radius: 2px;
}
/* La ligne se remplit au rythme du défilement — hauteur pilotée en JS. */
.fr-parcours::after {
  content: ""; position: absolute; left: 19px; top: 12px;
  width: 2px; border-radius: 2px;
  height: var(--fr-avance, 0%);
  background: linear-gradient(180deg, var(--ice-400), var(--aqua-400));
  transition: height 220ms linear;
}
.fr-etape { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-5); }
.fr-etape-num {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--filet);
  background: var(--n-0);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  color: var(--acier);
  position: relative; z-index: 1;
  transition: border-color 400ms var(--e-expo), color 400ms var(--e-expo),
              background-color 400ms var(--e-expo);
}
.fr-etape.est-atteinte .fr-etape-num {
  border-color: var(--ice-400); color: var(--ice-600);
  background: color-mix(in srgb, var(--ice-400) 12%, var(--n-0));
}
.fr-etape h3 {
  margin: 8px 0 0;
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
}
.fr-etape p { margin: 8px 0 0; font-size: .93rem; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }

/* ══════════════════════════════════════════════════ 7. LE GROUPE (filiales) */
.fr-marques {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--filet);
  border: 1px solid var(--filet); border-radius: 22px; overflow: hidden;
  box-shadow: var(--ombre);
}
.fr-marque {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-5);
  padding: clamp(28px, 3vw, 42px) var(--s-5);
  background: rgba(255, 255, 255, .86);
  position: relative;
  transition: background-color 300ms var(--e-expo);
}
.fr-marque::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--teinte, var(--ice-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform 460ms var(--e-expo);
}
.fr-marque:hover::after { transform: scaleX(1); }
.fr-marque:hover { background: rgba(255, 255, 255, .96); }
.fr-marque-logo { height: 44px; width: 100%; display: grid; place-items: center; }
.fr-marque-logo img {
  max-height: 100%; max-width: 84%; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) opacity(.5);
  transition: filter 340ms var(--e-expo), transform 460ms var(--e-ressort);
}
.fr-marque:hover .fr-marque-logo img { filter: none; transform: translateY(-3px); }
.fr-marque h3 {
  margin: 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acier);
  transition: color 300ms var(--e-expo);
}
.fr-marque:hover h3 { color: var(--teinte, var(--ice-600)); }

/* ══════════════════════════════════════════════════════════ 8. LES ZONES */
.fr-villes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px;
  background: var(--filet); border: 1px solid var(--filet);
  border-radius: 18px; overflow: hidden; }
.fr-ville {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; min-height: 54px;
  background: rgba(255, 255, 255, .84);
  font-family: var(--font-mono); font-size: .82rem; font-weight: 500; color: var(--ink);
  transition: background-color 240ms var(--e-expo), color 240ms var(--e-expo);
}
.fr-ville::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ice-500); flex-shrink: 0;
}
.fr-ville:hover { background: var(--ice-600); color: #fff; }
.fr-ville:hover::before { background: #fff; }

/* ══════════════════════════════════════════════════════ 9. LA BANDE D'APPEL */
.fr-appel {
  position: relative; overflow: hidden;
  padding-block: clamp(64px, 8vw, 128px);
  text-align: center;
}
.fr-appel::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ice-400) 22%, transparent),
    var(--papier) 46%,
    color-mix(in srgb, var(--aqua-400) 16%, transparent));
}
.fr-appel .shell { position: relative; z-index: 1; }
.fr-appel h2 {
  margin: 22px auto 0; max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.034em; color: var(--ink);
}
.fr-appel p { margin: 20px auto 0; max-width: 56ch; font-size: 1.04rem; line-height: 1.62; color: var(--ink-2); }
.fr-appel .fr-actions { justify-content: center; }

/* ══════════════════════════════════════════════════════════ 10. RESPONSIF */
@media (max-width: 620px) {
  .fr-hero { padding-block: 32px 56px; }
  .fr-preuves { gap: 8px 16px; }
  .fr-etape { grid-template-columns: 32px 1fr; gap: var(--s-4); }
  .fr-etape-num { width: 32px; height: 32px; font-size: .7rem; }
  .fr-parcours::before, .fr-parcours::after { left: 15px; }
}

/* ══════════════════════════════════════════════════════ MOUVEMENT RÉDUIT
   Les lignes du titre doivent atteindre leur position finale sans passer par
   l'animation : sans cette règle elles resteraient hors de leur cache, donc
   invisibles. */
@media (prefers-reduced-motion: reduce) {
  html:not(.mouvement-force) .clip-line > span { animation: none; transform: none; }
  html:not(.mouvement-force) .fr-rev { opacity: 1; transform: none; transition: none; }
  html:not(.mouvement-force) .aurora,
  html:not(.mouvement-force) .fr-marquise-piste { animation: none; }
  html:not(.mouvement-force) .fr-parcours::after { transition: none; }
  /* Le fondu sur les bords n'a de sens que pendant le défilement : figé, il
     coupe le premier mot de la piste (« Climatisation » perdait son C). */
  html:not(.mouvement-force) .fr-marquise { mask-image: none; -webkit-mask-image: none; }
}

/* ── Compléments ────────────────────────────────────────────────────────── */

/* En-tête de section avec une action à droite (rail de produits, vus
   récemment). */
.fr-bandeau-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.fr-lien {
  color: var(--ice-600); text-decoration: underline; text-underline-offset: 3px;
}

/* Les familles reçoivent leur numéro dans la pastille d'icône : ce sont des
   chiffres, pas des pictogrammes, donc la chasse fixe. */
.fr-gamme-ic {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
}
.fr-gamme-ic svg { width: 22px; height: 22px; }

/* Le rail de produits garde son défilement horizontal, sans barre visible. */
.fr-section .rail { scrollbar-width: none; }
.fr-section .rail::-webkit-scrollbar { display: none; }

/* ── L'accordéon de la FAQ ──────────────────────────────────────────────────
   Le cadre était mal fait : le conteneur portait une bordure, et chaque `.acc`
   portait en plus un `border-top`, ce qui doublait le trait sous le bord
   supérieur. Le texte touchait les bords faute de rembourrage, et les
   questions n'avaient aucune zone de respiration.

   Ici : rembourrage à l'intérieur du cadre, filet SUPPRIMÉ sur le premier
   élément, et chaque question devient une vraie ligne cliquable, avec un
   fond au survol et un repère rouge sur la question ouverte. */
.fr-section .faq {
  border: 1px solid var(--filet);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ombre);
  padding-inline: clamp(18px, 2.2vw, 28px);
}

.fr-section .faq .acc {
  border-top: 1px solid var(--filet);
  position: relative;
}
/* Le premier n'a pas de filet : celui du conteneur est juste au-dessus, et
   les deux ensemble dessinaient un double trait. */
.fr-section .faq .acc:first-child { border-top: 0; }

.fr-section .faq .acc > button {
  padding-block: clamp(18px, 2vw, 24px);
  font-size: .96rem; font-weight: 600; line-height: 1.4;
  color: var(--ink);
  gap: var(--s-5);
  transition: color 240ms var(--e-expo);
}
.fr-section .faq .acc > button:hover { color: var(--ice-600); }
.fr-section .faq .acc[data-open="true"] > button { color: var(--ink); }

/* Le repère de la question ouverte : un filet rouge sur le bord gauche, qui
   sort du rembourrage pour toucher le cadre. */
.fr-section .faq .acc::before {
  content: ""; position: absolute;
  left: calc(clamp(18px, 2.2vw, 28px) * -1); top: 0; bottom: 0;
  width: 3px; background: var(--f-heat);
  transform: scaleY(0); transform-origin: top;
  transition: transform 380ms var(--e-expo);
}
.fr-section .faq .acc[data-open="true"]::before { transform: scaleY(1); }

/* Le chevron prend l'accent quand la question est ouverte. */
.fr-section .faq .acc[data-open="true"] .acc-icon::before { background: var(--f-heat); }

.fr-section .faq .acc-body p {
  padding-bottom: clamp(18px, 2vw, 24px);
  padding-right: clamp(20px, 3vw, 48px);
  font-size: .92rem; line-height: 1.66; color: var(--ink-2);
}

/* L'aperçu qui suit le curseur sur les familles. */
.fam-vue {
  position: fixed; top: 0; left: 0; z-index: 40;
  width: 190px; height: 190px;
  border: 1px solid var(--filet); border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ombre-levee);
  padding: 12px; pointer-events: none; opacity: 0;
  transition: opacity 220ms var(--e-expo);
}
.fam-vue.est-on, .fam-vue.is-on { opacity: 1; }
.fam-vue img { width: 100%; height: 100%; object-fit: contain; }
@media (hover: none), (max-width: 900px) { .fam-vue { display: none; } }

/* ===========================================================================
   LE ROUGE

   Le site était entièrement bleu : glace, aqua, indigo — trois nuances du
   même axe, et donc aucune tension. Le rouge de POWERS Heat, relevé sur le
   logo de la filiale chauffage, est la seule couleur chaude de la maison.

   Il est employé avec parcimonie et TOUJOURS pour marquer un point précis :
   ce qui est ouvert, ce qui est actif, ce qui est chaud. Jamais comme aplat
   ni comme couleur de fond — répandu, il transformerait un site technique en
   promotion de soldes.
   =========================================================================== */

/* 1 — La troisième aurore du héros passe au rouge : c'est elle qui met un
       point chaud dans une composition sinon uniformément froide. */
.fr-hero .aurora:nth-of-type(3) { background: rgba(248, 16, 32, .1) !important; }

/* 2 — L'étape du parcours qu'on vient d'atteindre. La ligne reste bleue —
       c'est un flux — mais le point courant est chaud. */
.fr-parcours .fr-etape.est-atteinte:not(:has(~ .fr-etape.est-atteinte)) .fr-etape-num {
  border-color: var(--f-heat);
  color: var(--f-heat);
  background: color-mix(in srgb, var(--f-heat) 8%, var(--n-0));
}

/* 3 — Le chiffre du chauffage, dans la bande de statistiques : une seule
       valeur en rouge suffit à réveiller la ligne. */
.fr-chiffre:last-child b {
  background: linear-gradient(100deg, var(--f-heat), #ff6b4a 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 4 — La famille « Chauffage » porte sa couleur au survol : le code couleur
       du site dit déjà que le rouge est le chaud, autant s'en servir. */
.fr-gamme[data-fam="74"]:hover {
  border-color: color-mix(in srgb, var(--f-heat) 34%, transparent);
}
.fr-gamme[data-fam="74"]:hover .fr-gamme-ic {
  border-color: color-mix(in srgb, var(--f-heat) 30%, transparent);
  background: color-mix(in srgb, var(--f-heat) 10%, transparent);
  color: var(--f-heat);
}
.fr-gamme[data-fam="74"]:hover .fr-gamme-pied { color: var(--f-heat); }

/* 5 — La bande d'appel : un liseré chaud en haut, qui la détache des
       sections froides qui l'encadrent. */
.fr-appel { border-top: 2px solid var(--f-heat); }

/* 6 — Le soulignement du lien de la FAQ. */
.fr-lien { text-decoration-color: var(--f-heat); text-decoration-thickness: 2px; }