/* ==========================================================================
   POWERS — Design System v1
   Direction artistique : épuré lumineux, beaucoup d'air, typo large,
   micro-animations douces. Tout en transform/opacity (GPU), zéro librairie.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* Neutres — glace.

     FROST UI (le kit du site Khalil Service Climatisation) est bâti sur des
     fonds `ink` presque noirs : #04090f à #1a3348. Le client veut le même
     esprit « plus clair ». On garde donc l'AXE de la palette — un bleu-gris
     froid, jamais un gris neutre ni un beige — et on l'inverse : les valeurs
     claires deviennent les fonds, les sombres restent l'encre.

     C'est ce qui donne l'air froid : un site de climatisation ne doit pas
     avoir la chaleur d'un restaurant. */
  --n-0:   #ffffff;
  --n-25:  #fafcfe;
  /* Le fond de page. Il etait glace (#f2f7fb) : bleu comme tout le reste,
     donc sans tension. Il tire maintenant vers le rouge de POWERS Heat,
     tres legerement — assez pour rechauffer la page, pas assez pour virer
     au rose. Les cartes restent en blanc pur (--surface) : c'est ce
     contraste qui fait lire la teinte du fond. */
  --n-50:  #faf3f2;   /* le fond de page — blanc chaud, teinte Heat */
  --n-100: #e8f0f7;
  --n-150: #d8e5f0;   /* filets */
  --n-200: #c2d5e5;
  --n-300: #9db5cb;
  --n-400: #7590ab;   /* texte tertiaire */
  --n-500: #556e88;
  --n-600: #3d5268;
  --n-700: #2a3a4c;
  --n-800: #1a2635;
  --n-900: #0b1622;   /* encre — l'`ink` du kit, gardé pour le texte */

  /* ── Accent : le bleu glace du kit FROST ─────────────────────────────
     C'est la couleur principale du site Khalil Service Climatisation, reprise
     telle quelle : boutons, liens, dégradés, halos, arêtes de verre.

     Elle remplace l'indigo `#282651` relevé sur les logos Power Air et
     AF Green. C'est un choix du client, assumé : il veut le thème du kit, pas
     une adaptation. L'indigo reste disponible en `--marque-*` pour les
     endroits où l'identité doit primer — le logo est de toute façon un
     fichier, il ne dépend d'aucune de ces variables. */
  --a-50:  #f0f9ff;
  --a-100: #e0f2fe;
  --a-300: #7dd3fc;
  --a-500: #38bdf8;
  --a-600: #0ea5e9;   /* ice-500 du kit : la couleur principale */
  --a-700: #0284c7;

  /* Secondaire du kit : fin des dégradés, halos. */
  --aqua-300:#67e8f9;
  --aqua-400:#22d3ee;

  /* Glace, nommée aussi sous son nom d'origine pour que les règles reprises
     du kit restent lisibles quand on les compare au fichier source. */
  --ice-50:  #f0f9ff;
  --ice-200: #bae6fd;
  --ice-300: #7dd3fc;
  --ice-400: #38bdf8;
  --ice-500: #0ea5e9;
  --ice-600: #0284c7;

  /* Chaude, avec parcimonie — `ember` du kit. */
  --ember-400: #fb923c;

  /* Couleurs de la maison, conservées pour les marques du groupe. */
  --marque-indigo: #282651;   /* Power Air, AF Green */
  --f-heat:   #f81020;        /* POWERS Heat */
  --f-pipe:   #60b130;        /* Green Pipe */
  --f-afgrn:  #1b4c23;        /* AF Green */
  --f-encre:  #0d0e13;        /* mot-symbole POWERS */

  /* Teal de mesure — réservé aux données : courbes, unités, relevés.
     Jamais un bouton, jamais un titre. */
  --cy-400:#2bc4bd;
  --cy-500:#009b94;

  /* Sémantique */
  /* `--warm` etait un orange (#ff6b35) qui n'appartenait a aucun logo du
     groupe. Il pointe desormais sur le rouge de POWERS Heat, releve sur
     l'enseigne de la filiale chauffage : la seule couleur chaude reellement
     de la maison. Le nom du jeton est conserve — une douzaine de regles et
     quatre pages l'utilisent, et il dit bien ce qu'il designe : le chaud. */
  --warm:  #f81020;   /* = --f-heat, POWERS Heat : chauffage, promo, actif */
  --ok:    #12b76a;
  --warn:  #f79009;

  --bg:        var(--n-0);
  --bg-sunk:   var(--n-50);
  --surface:   var(--n-0);
  --line:      var(--n-150);
  --line-soft: var(--n-100);
  --ink:       var(--n-900);
  --ink-2:     var(--n-500);
  --ink-3:     var(--n-400);

  /* Typo */
  /* Sora pour le titrage, Inter pour la lecture — le couple de FROST UI.

     Sora est une grotesque géométrique aux terminaisons franches : elle donne
     le ton « technique et net » du kit, là où un serif donnerait un ton
     éditorial. Inter porte le texte courant sans rien revendiquer.

     IBM Plex Mono reste pour tout ce qui se mesure : références, prix, unités.
     Le kit n'en a pas, mais POWERS vend du matériel chiffré — c'est la
     convention des fiches constructeur, et on ne l'abandonne pas. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --font-display: "Sora", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono",
               Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.2rem + 5.6vw, 5.75rem);
  --fs-h1:      clamp(2.1rem, 1.2rem + 3.4vw, 3.75rem);
  --fs-h2:      clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  --fs-h3:      clamp(1.15rem, 0.95rem + 0.75vw, 1.5rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.78125rem;

  /* Espace — échelle 4pt */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Ombres — très douces, jamais de gris sale */
  --sh-1: 0 1px 2px rgba(16,20,26,.05), 0 1px 3px rgba(16,20,26,.04);
  --sh-2: 0 4px 12px rgba(16,20,26,.06), 0 1px 3px rgba(16,20,26,.04);
  --sh-3: 0 12px 32px rgba(16,20,26,.09), 0 2px 8px rgba(16,20,26,.05);
  --sh-4: 0 28px 64px rgba(16,20,26,.13), 0 6px 16px rgba(16,20,26,.06);
  --sh-a: 0 8px 24px rgba(10,108,255,.22);

  /* Mouvement — une seule grammaire pour tout le site */
  --e-out:    cubic-bezier(.22, 1, .36, 1);      /* sortie douce, "Apple" */
  --e-inout:  cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);   /* léger rebond */
  --t-fast: 140ms; --t: 260ms; --t-slow: 480ms; --t-xslow: 900ms;

  --wrap: 1280px;
  --wrap-tight: 1080px;
  --header-h: 68px;
}

/* Transitions de page natives (Chrome/Edge/Safari 18+) */
@view-transition { navigation: auto; }

/* ------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","ss01";
  /* `clip` plutôt que `hidden` : les animations d'entrée décalent brièvement
     les blocs hors cadre, et `hidden` créerait un conteneur de défilement qui
     casserait les en-têtes et colonnes en `position: sticky`. */
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--a-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--a-100); color: var(--a-700); }

/* Scrollbar discrète */
* { scrollbar-width: thin; scrollbar-color: var(--n-200) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 99px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--n-300); }

/* Ces conteneurs ne servent qu'à recevoir le balisage injecté. Sans
   `display: contents`, ils formeraient une boîte de ~105 px et l'en-tête
   `position: sticky` cesserait d'adhérer dès qu'on la dépasse. */
#site-header, #site-footer { display: contents; }

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 999;
  padding: 12px 20px; background: var(--ink); color: #fff;
  border-radius: var(--r-sm); font-weight: 600;
  transition: top var(--t) var(--e-out);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------- 3. PRIMITIVES */
.wrap { --wrap-pad: var(--s-6); width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--wrap-pad); }
.wrap--tight { max-width: var(--wrap-tight); }
@media (max-width: 640px) { .wrap { --wrap-pad: var(--s-5); } }

.section { padding-block: clamp(56px, 8vw, 112px); }
.section--sunk { background: var(--bg-sunk); }

/* Une piste `1fr` a pour plancher le min-content de son contenu : sans ce
   min-width, un mot long ou une barre de quantité élargit toute la page. */
.hero-inner > *, .pdp > *, .shop > *, .cart-layout > *, .split > *,
.gallery > *, .prod-grid > *, .cat-grid > * { min-width: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--a-600);
}
.eyebrow::before {
  content: ""; width: 20px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--a-500), var(--cy-400));
}

h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.025em; font-weight: 640; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
p  { text-wrap: pretty; }

.lead { font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); color: var(--ink-2); line-height: 1.6; max-width: 62ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); margin-bottom: var(--s-12); flex-wrap: wrap; }
.section-head > div { max-width: 60ch; }
.section-head h2 { margin-top: var(--s-3); }
.section-head p { margin-top: var(--s-4); }

/* ---- Boutons -------------------------------------------------------------
   Un seul jeu de variables pilote fond, texte, bord et ombre. Tous les
   boutons portent un bord — y compris les pleins, où il tient lieu de
   liseré : sans lui, un aplat de couleur bave sur les fonds clairs.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: color-mix(in srgb, var(--ink) 100%, #fff 14%);
  --btn-sh: 0 1px 2px rgba(16,20,26,.16);
  --btn-h: 46px;

  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h); padding: 0 22px;
  border-radius: var(--r-full);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  box-shadow: var(--btn-sh);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.005em; line-height: 1;
  white-space: nowrap; isolation: isolate;
  transition: transform 200ms var(--e-out), box-shadow 240ms var(--e-out),
              background-color 200ms var(--e-out), color 200ms var(--e-out),
              border-color 200ms var(--e-out);
}
.btn[hidden] { display: none; }
.btn svg { flex-shrink: 0; }
.btn:hover  { transform: translateY(-1.5px); box-shadow: var(--btn-sh), var(--sh-3); }
.btn:active { transform: translateY(0); box-shadow: var(--btn-sh); transition-duration: 80ms; }
.btn:focus-visible { outline: 2px solid var(--a-500); outline-offset: 3px; }

/* Plein sombre — le défaut */
.btn:hover { --btn-bg: #1c222c; }

/* Plein accent */
.btn--accent {
  --btn-bg: var(--a-500);
  --btn-bd: var(--a-600);
  --btn-sh: 0 1px 2px rgba(10,108,255,.3);
}
.btn--accent:hover { --btn-bg: var(--a-600); --btn-bd: var(--a-700); }

/* Contour — bord franc, fond qui se pose au survol */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--n-200);
  --btn-sh: none;
}
.btn--ghost:hover { --btn-bg: var(--n-50); --btn-bd: var(--n-300); --btn-fg: var(--ink); }

/* Teinté */
.btn--soft {
  --btn-bg: var(--a-50);
  --btn-fg: var(--a-700);
  --btn-bd: var(--a-100);
  --btn-sh: none;
}
.btn--soft:hover { --btn-bg: var(--a-100); --btn-bd: var(--a-300); }

.btn--lg { --btn-h: 54px; padding-inline: 30px; font-size: var(--fs-body); }
.btn--sm { --btn-h: 36px; padding-inline: 15px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .42; pointer-events: none; box-shadow: none; transform: none;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--fs-sm); color: var(--a-600);
}
.link-arrow svg { transition: transform var(--t) var(--e-spring); }
.link-arrow:hover svg { transform: translateX(5px); }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.005em;
  background: var(--n-100); color: var(--n-700);
}
.badge--accent { background: var(--a-50); color: var(--a-700); }
.badge--sale   { background: var(--warm); color: #fff; }
.badge--ok     { background: #e7f7ef; color: #0a7a48; }
.badge--dot::before { content:""; width:6px; height:6px; border-radius:99px; background: currentColor; }

/* --------------------------------------------- 4. ANIMATIONS UTILITAIRES */
@keyframes fade-up   { from { opacity:0; transform: translate3d(0,22px,0); } to { opacity:1; transform:none; } }
@keyframes fade-in   { from { opacity:0; } to { opacity:1; } }
@keyframes scale-in  { from { opacity:0; transform: scale(.94); } to { opacity:1; transform:none; } }
@keyframes slide-left{ from { opacity:0; transform: translate3d(28px,0,0); } to { opacity:1; transform:none; } }
@keyframes shimmer   { to { background-position: 200% 0; } }
@keyframes float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes drift     { to { stroke-dashoffset: -400; } }
@keyframes pop       { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes marquee   { to { transform: translateX(-50%); } }

/* Révélation au scroll — piloté par IntersectionObserver (.is-in) */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translate3d(-30px, 0, 0); }
[data-reveal="right"] { transform: translate3d(30px, 0, 0); }
[data-reveal="scale"] { transform: scale(.95); }
[data-reveal="blur"]  { filter: blur(8px); transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out), filter var(--t-slow) var(--e-out); }
[data-reveal].is-in   { opacity: 1; transform: none; filter: none; will-change: auto; }

.skeleton {
  background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 37%, var(--n-100) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------- 5. EN-TÊTE */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--e-out), background-color var(--t) var(--e-out),
              box-shadow var(--t) var(--e-out);
  view-transition-name: header;
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 20px rgba(16,20,26,.05); }
.header.is-hidden { transform: translateY(-100%); }
/* Le méga-menu vit à l'intérieur de l'en-tête : sans ce passage au-dessus du
   voile (110), il s'ouvrait derrière lui — visible à peine, et non cliquable. */
.header.is-mega { z-index: 115; }
.header { transition: transform var(--t-slow) var(--e-out), border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out); }

/* La barre noire qui coiffait l'en-tete a ete retiree : 36 px de haut sur
   toutes les pages pour trois informations que le pied de page et la page
   Contact portent deja. Le telephone, lui, est remonte dans l'en-tete
   ci-dessous : c'est la seule des trois qu'on cherche dans l'urgence. */

.nav-tel {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out);
}
.nav-tel:hover { background: var(--a-50); color: var(--a-700); }
.nav-tel svg { flex: none; opacity: .7; }
/* Sous 1100 px la barre est deja serree : on garde l'icone, qui reste
   cliquable et appelle, et l'on retire le numero ecrit. */
@media (max-width: 1100px) { .nav-tel span { display: none; } }
@media (max-width: 560px) { .nav-tel { display: none; } }

.nav { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }

.logo {
  display: inline-flex; align-items: center;
}
.logo:hover { opacity: .65; }
/* Le mot-symbole est désormais le fichier vectoriel fourni par le client, et
   non un mot composé en CSS : la lettre « s » minuscule, l'inclinaison et le
   trait qui déborde à droite ne se reproduisent pas avec une police du web.

   Hauteur fixée, largeur libre : le rapport du fichier fait le reste, et rien
   ne se déforme si le libellé change un jour. */
.logo img {
  height: 25px; width: auto; display: block;
  transition: opacity var(--t) var(--e-out);
}
.logo:hover img { opacity: .68; }

.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 5px;
  padding: 9px 14px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 500; color: var(--n-700);
  transition: color var(--t) var(--e-out), background-color var(--t) var(--e-out);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--ink); background: var(--n-50); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--a-500), var(--cy-400));
  animation: fade-in var(--t) var(--e-out);
}
.nav-link .chev { transition: transform var(--t) var(--e-out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ── Menu « À propos » ─────────────────────────────────────────
   Trois destinations éditoriales regroupées : l'histoire, le blog, le réseau.
   Un menu déroulant simple, sans voile ni pleine largeur — le méga-menu des
   catégories, lui, doit déployer cinq familles et leurs sous-familles.
   Chaque ligne porte une précision : « Conseils techniques » seul ne dit pas
   qu'on y trouve le blog. */
.nav-groupe { position: relative; }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 290px; padding: 6px;
  display: grid; gap: 2px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 8px -4px rgba(16, 20, 26, .08), 0 18px 40px -16px rgba(16, 20, 26, .22);
}
.nav-menu[hidden] { display: none; }
.nav-menu a {
  display: grid; gap: 1px;
  padding: 10px 12px; border-radius: var(--r);
  color: var(--n-700);
  transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out);
}
.nav-menu a b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.nav-menu a small { font-size: 12px; line-height: 1.4; color: var(--n-500); }
.nav-menu a:hover { background: var(--n-50); }
.nav-menu a:hover b { color: var(--a-700); }
.nav-menu a:focus-visible { outline: 2px solid var(--a-500); outline-offset: -2px; }
/* La page courante se signale par une barre à gauche : le soulignement du
   lien de barre principale ne se transpose pas dans une liste verticale. */
.nav-menu a[aria-current="page"] {
  background: var(--a-50);
  box-shadow: inset 2px 0 0 var(--a-500);
}
.nav-menu a[aria-current="page"] b { color: var(--a-700); }

@media (prefers-reduced-motion: no-preference) {
  .nav-menu { animation: fade-in 160ms var(--e-out); }
}

.nav-actions { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }

.icon-btn {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-full);
  color: var(--n-700);
  transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.icon-btn:hover { background: var(--n-100); color: var(--ink); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.9); }
.icon-btn .count {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 99px;
  background: var(--a-500); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border: 2px solid var(--bg);
  transition: transform var(--t) var(--e-spring), opacity var(--t) var(--e-out);
}
.icon-btn .count[data-empty="true"] { opacity: 0; transform: scale(.4); }
.icon-btn .count.is-pop { animation: pop 420ms var(--e-spring); }

.nav-burger { display: none; }
@media (max-width: 980px) {
  .nav-list { display: none; }
  .nav-burger { display: grid; }
}
/* Accès au compte, en toutes lettres plutôt qu'en pictogramme.

   La silhouette est une convention que tout le monde ne lit pas de la même
   façon, et elle ne dit pas si l'on est connecté ou non. Le libellé, lui,
   annonce l'action — « Connexion » — puis devient « Mon compte » une fois la
   session ouverte. Il porte une bordure, comme tous les boutons du site. */
.nav-compte {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 14px; margin-left: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 550; white-space: nowrap;
  color: var(--ink); background: var(--n-0);
  transition: background-color var(--t) var(--e-out), border-color var(--t) var(--e-out),
              transform var(--t) var(--e-spring);
}
.nav-compte:hover {
  background: var(--n-50); border-color: var(--ink-3); transform: translateY(-1px);
}
.nav-compte:focus-visible { outline: 2px solid var(--a-500); outline-offset: 2px; }

/* Le libellé texte occupe une centaine de pixels, contre 40 pour l'icône qu'il
   remplace : il doit donc quitter la barre bien plus tôt que l'ancienne
   silhouette. Mesuré à 430 px, le garder faisait déborder la page de 97 px.
   Il sort à 560 px, où « Mon compte » reste accessible depuis le menu. */
@media (max-width: 560px) {
  .nav-actions > .js-compte { display: none; }
}

/* Sous 400 px, les favoris passent à leur tour dans le menu — ils y figurent
   déjà — et l'on garde recherche, devis, comparateur, panier et burger. */
@media (max-width: 400px) {
  .nav-actions > .js-wish-btn { display: none; }
  .nav-actions { gap: 0; }
  .icon-btn { width: 38px; }
}

/* À 320 px — les petits Android et l'iPhone SE de première génération — même
   cinq boutons de 38 px ne tiennent plus à côté du logo : la barre débordait
   de 23 px. Le devis et le comparateur rejoignent le menu, où ils figurent
   déjà ; restent la recherche, le panier et le burger, c'est-à-dire les deux
   actions les plus fréquentes plus l'accès à tout le reste. */
@media (max-width: 360px) {
  .nav-actions > .js-devis-btn,
  .nav-actions > .js-compare-btn { display: none; }
}

/* Méga-menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-3);
  overflow: hidden;
  display: grid; grid-template-rows: 0fr;
  opacity: 0; pointer-events: none;
  transition: grid-template-rows var(--t-slow) var(--e-out), opacity var(--t) var(--e-out);
}
.mega.is-open { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
.mega-inner { min-height: 0; overflow: hidden; }
/* Deux niveaux : les familles à gauche, le détail de la famille survolée à
   droite. Évite d'empiler les 21 catégories dans un même bloc illisible. */
.mega-grid {
  display: grid; grid-template-columns: 264px 1fr;
  gap: var(--s-10); padding-block: var(--s-8) var(--s-10);
}
.mega h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: var(--s-4); font-weight: 600; }

.mega-fams { display: grid; gap: 2px; }
.mega-fam {
  display: flex; align-items: center; gap: var(--s-4); width: 100%;
  padding: 12px 14px; border-radius: var(--r); text-align: left;
  transition: background-color var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.mega-fam img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; transition: transform var(--t) var(--e-spring); }
.mega-fam b { display: block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.012em; }
.mega-fam span { font-size: var(--fs-xs); color: var(--ink-3); }
.mega-fam .go { margin-left: auto; color: var(--a-500); opacity: 0; transform: translateX(-6px); transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out); }
.mega-fam:hover { background: var(--n-50); }
.mega-fam[aria-selected="true"] { background: var(--a-50); }
.mega-fam[aria-selected="true"] b { color: var(--a-700); }
.mega-fam[aria-selected="true"] img { transform: scale(1.1) rotate(-5deg); }
.mega-fam[aria-selected="true"] .go { opacity: 1; transform: none; }

.mega-panel { display: none; grid-template-columns: 1fr 268px; gap: var(--s-10); }
.mega-panel.is-on { display: grid; animation: fade-up 340ms var(--e-out) both; }
.mega-subs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px var(--s-6); align-content: start; }
.mega-subs a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 9px 12px; margin-inline: -12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--n-700);
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.mega-subs a:hover { background: var(--a-50); color: var(--a-700); transform: translateX(3px); }
.mega-subs a i { font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); }
.mega-subs a strong { font-weight: 600; }

/* Aperçu produit : le menu montre de la marchandise, pas juste des liens. */
.mega-peek {
  border-radius: var(--r-lg); border: 1px solid var(--line-soft);
  background: var(--n-25); padding: var(--s-5); display: flex; flex-direction: column;
  transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.mega-peek:hover { border-color: var(--line); box-shadow: var(--sh-2); transform: translateY(-3px); }
.mega-peek img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8%; }
.mega-peek b { font-size: var(--fs-sm); font-weight: 550; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1180px) { .mega-panel { grid-template-columns: 1fr; } .mega-peek { display: none; } }
@media (max-width: 1000px) { .mega-grid { grid-template-columns: 1fr; } .mega-subs { grid-template-columns: repeat(3, 1fr); } }
/* Bandeau d'annonce en pied de méga-menu */
.mega-foot {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5); border-radius: var(--r);
  background: linear-gradient(120deg, var(--n-900), #1b2432 60%, #16304f);
  color: #fff; margin-bottom: var(--s-6); position: relative; overflow: hidden;
}
.mega-foot::before {
  content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px;
  border-radius: 99px; background: radial-gradient(circle, rgba(34,211,238,.34), transparent 68%);
  animation: float 7s var(--e-inout) infinite;
}
.mega-foot p { color: rgba(255,255,255,.66); font-size: var(--fs-sm); margin: 0; }
.mega-foot .btn { margin-left: auto; position: relative; z-index: 1; }

/* Recherche plein écran */
/* ── Palette de recherche ────────────────────────────────────────────────
   Elle s'ouvre au CENTRE plutot qu'en bandeau sous l'en-tete. Deux raisons :
   le regard y est deja, et la liste de resultats s'etend sans pousser la
   page. Ctrl+K l'ouvre depuis n'importe ou.

   Placee au premier tiers de la hauteur, pas au milieu exact : le regard se
   pose naturellement un peu au-dessus du centre, et la liste a la place de
   descendre sans sortir de l'ecran. */
.palette {
  position: fixed; inset: 0; z-index: 140;
  display: grid; place-items: start center;
  padding: clamp(56px, 12vh, 132px) var(--s-4) var(--s-4);
  background: rgba(12, 16, 22, .38);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.palette[hidden] { display: none; }

.palette-boite {
  width: min(640px, 100%);
  display: flex; flex-direction: column;
  max-height: min(560px, 78vh);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 16px -8px rgba(12, 16, 22, .18),
              0 32px 64px -24px rgba(12, 16, 22, .42);
  overflow: hidden;
}

.palette-tete {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.palette-tete > svg { flex: none; opacity: .45; }
.palette-tete input {
  flex: 1; border: 0; background: none; outline: none;
  padding: 20px 0;
  font: inherit; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink);
}
.palette-tete input::placeholder { color: var(--n-400); font-weight: 400; }
.palette-tete input::-webkit-search-cancel-button { display: none; }

.palette-echap {
  flex: none; cursor: pointer;
  padding: 4px 9px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--n-50);
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--n-500);
}
.palette-echap:hover { border-color: var(--a-500); color: var(--a-700); }
.palette-echap:focus-visible { outline: 2px solid var(--a-500); outline-offset: 2px; }

.palette-corps { overflow-y: auto; padding: var(--s-2); flex: 1; }

.palette-groupe + .palette-groupe { margin-top: var(--s-2); }
.palette-titre {
  display: block; padding: 10px 12px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--n-400);
}

.palette-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px 12px; border-radius: var(--r);
  color: var(--ink);
}
/* Une seule regle pour le survol ET la selection au clavier : deux etats
   distincts feraient croire a deux lignes actives quand la souris passe
   ailleurs pendant qu'on navigue aux fleches. */
.palette-item:hover, .palette-item.est-choisi { background: var(--a-50); }
.palette-item.est-choisi { box-shadow: inset 2px 0 0 var(--a-500); }
.palette-item img {
  width: 40px; height: 40px; flex: none; object-fit: contain;
  background: var(--n-50); border-radius: var(--r-sm); padding: 3px;
}
.palette-puce {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--n-50); color: var(--n-400);
}
.palette-item.est-choisi .palette-puce { background: var(--a-100); color: var(--a-700); }
.palette-texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.palette-texte b {
  font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette-texte small {
  font-size: 12px; color: var(--n-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette-texte mark { background: var(--a-100); color: var(--a-700); border-radius: 3px; padding: 0 1px; }
.palette-apres { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }

.palette-vide {
  display: grid; gap: 6px;
  padding: var(--s-8) var(--s-4); text-align: center;
  font-size: var(--fs-sm); color: var(--ink-2);
}
.palette-vide span { font-size: 12.5px; color: var(--n-500); }

.palette-pied {
  display: flex; gap: var(--s-5); flex: none;
  padding: 10px var(--s-4);
  border-top: 1px solid var(--line-soft); background: var(--n-50);
  font-size: 11.5px; color: var(--n-500);
}
.palette-pied span { display: inline-flex; align-items: center; gap: 5px; }
.palette-pied kbd {
  padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--bg);
  font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--n-600);
}
/* Les rappels clavier n'ont aucun sens sur un ecran tactile. */
@media (max-width: 640px) { .palette-pied { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .palette-boite { animation: palette-entree 180ms var(--e-out) both; }
  @keyframes palette-entree {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
  }
}


/* Menu mobile */
.drawer-nav {
  position: fixed; inset: 0; z-index: 130; background: var(--bg);
  transform: translateX(100%); transition: transform var(--t-slow) var(--e-out);
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer-nav.is-open { transform: none; }
.drawer-nav .wrap { padding-block: var(--s-6); }
.drawer-acc { border-bottom: 1px solid var(--line-soft); }
.drawer-acc > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em;
}
.drawer-acc > button svg { transition: transform var(--t) var(--e-out); color: var(--ink-3); }
.drawer-acc[data-open="true"] > button svg { transform: rotate(45deg); }
.drawer-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--e-out); }
.drawer-acc[data-open="true"] .drawer-acc-body { grid-template-rows: 1fr; }
.drawer-acc-body > div { min-height: 0; overflow: hidden; }
.drawer-acc-body a { display: block; padding: 10px 0 10px var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); }
.drawer-acc-body a:hover { color: var(--a-600); }

/* La grille des familles : de vraies photos produit (celles du méga-menu
   de bureau), pas des icônes inventées — POWERS distribue du matériel réel,
   autant le montrer. */
.drawer-cats-lab {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.drawer-cats {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.drawer-cats a.drawer-cat:first-child { grid-column: 1 / -1; }
.drawer-cat {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  height: 128px; padding: var(--s-4); border-radius: var(--r-lg); overflow: hidden;
  background: var(--photo, var(--n-100)) center/cover no-repeat, var(--n-800);
  color: #fff;
  transition: transform 200ms var(--e-spring);
}
.drawer-cats a.drawer-cat:first-child { height: 108px; }
.drawer-cat::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(10,14,18,.05) 30%, rgba(10,14,18,.78));
}
.drawer-cat:active { transform: scale(.97); }
.drawer-cat-nom {
  position: relative; font-family: var(--font-display); font-size: 1.0625rem;
  font-weight: 700; letter-spacing: -.015em;
}
.drawer-cat-n {
  position: relative; margin-top: 2px; font-family: var(--font-mono);
  font-size: .72rem; color: rgba(255, 255, 255, .78);
}

/* Le bloc « qui est connecté » en tête du tiroir. Avant, se déconnecter
   demandait d'ouvrir toute la fiche compte pour y trouver le bouton — il
   n'y avait ici aucun signe qu'une session existait. */
.drawer-compte { margin-bottom: var(--s-5); }
.drawer-compte:empty { margin-bottom: 0; }

.drawer-compte-profil {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); margin: 0 calc(var(--s-4) * -1);
  border-radius: var(--r-lg); background: var(--n-50);
  transition: background-color var(--t) var(--e-out);
}
.drawer-compte-profil:hover { background: var(--n-100); }
.drawer-compte-av {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-full); background: linear-gradient(150deg, var(--a-500), var(--cy-500));
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.drawer-compte-id { min-width: 0; display: grid; }
.drawer-compte-id b { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.drawer-compte-id small { color: var(--ink-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drawer-compte-sortir {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 6px; padding: 10px var(--s-4);
  color: var(--ink-3); font-size: var(--fs-sm); font-weight: 550;
  border-radius: var(--r-sm);
  transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out);
}
.drawer-compte-sortir svg { flex: none; width: 16px; height: 16px; }
.drawer-compte-sortir:hover { background: var(--n-50); color: var(--ink); }

.drawer-compte-connexion {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4); margin: 0 calc(var(--s-4) * -1);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--a-50), color-mix(in srgb, var(--cy-500) 10%, var(--a-50)));
  transition: transform var(--t) var(--e-spring);
}
.drawer-compte-connexion:hover { transform: translateY(-1px); }
.drawer-compte-connexion b { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.drawer-compte-connexion small { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--fs-xs); }
.drawer-compte-connexion svg { flex: none; color: var(--a-600); }

/* ═══════════════════════════════════════════ 6ter. HÉRO IMMERSIF
   Composition centrée : la parole d'abord, puis le catalogue en éventail.

   Le débordement est réglé par la STRUCTURE, pas par le calcul : la piste est
   enfermée dans un masque `overflow: hidden`. La perspective est posée à
   l'intérieur du masque, si bien que le rendu 3D reste intact — un
   `overflow` sur l'élément qui porte `preserve-3d` l'aurait aplati.
   ══════════════════════════════════════════════════════════════════ */
:root { --pop: #22d3ee; --pop-ink: #052b33; --chrome-h: calc(36px + var(--header-h)); }

.ah {
  position: relative;
  padding-bottom: clamp(36px, 5vw, 64px);
  color: #fff;
  isolation: isolate;
  text-align: center;
}
.ah::before {
  content: ""; position: absolute; z-index: -2;
  left: 0; right: 0; bottom: 0; top: calc(var(--chrome-h) * -1);
  background:
    radial-gradient(1100px 640px at 82% -12%, #1e97ff 0%, transparent 58%),
    radial-gradient(820px 560px at 6% 108%, #0a4dba 0%, transparent 60%),
    linear-gradient(178deg, #0a5fd6 0%, #1182db 44%, #3f9ff4 80%, #6fb9fa 100%);
  border-radius: 0 0 clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px);
}

/* ---- En-tête en surimpression tant qu'on n'a pas défilé. Le basculement se
   fait en retirant ces règles (classe posée sur <body>) plutôt qu'en les
   contrant : une bataille de spécificité serait bien plus fragile. */
body.hero-blue:not(.hero-scrolled) .header {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; border-bottom-color: transparent;
}
body.hero-blue:not(.hero-scrolled) .header .logo,
body.hero-blue:not(.hero-scrolled) .header .nav-link,
body.hero-blue:not(.hero-scrolled) .header .icon-btn { color: #fff; }
body.hero-blue:not(.hero-scrolled) .header .nav-link:hover,
body.hero-blue:not(.hero-scrolled) .header .nav-link[aria-expanded="true"] { background: rgba(255,255,255,.16); color: #fff; }
body.hero-blue:not(.hero-scrolled) .header .icon-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
body.hero-blue:not(.hero-scrolled) .header .icon-btn .count { border-color: transparent; background: var(--pop); color: var(--pop-ink); }

.ah-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: 0 0 clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px);
  background: radial-gradient(440px circle at var(--gx,50%) var(--gy,26%), rgba(255,255,255,.15), transparent 64%);
  opacity: 0; transition: opacity 600ms var(--e-out);
}
.ah:hover .ah-glow { opacity: 1; }

/* ---- Rideau d'entrée ----------------------------------------------------
   Affiché une seule fois par session. Purement décoratif : le contenu est
   déjà dans le DOM derrière (aria-hidden + inert), rien n'est masqué aux
   robots ni aux lecteurs d'écran.                                        */
/* ── Le rideau d'entrée ────────────────────────────────────────────────────
   Fond indigo de la maison — l'ancien dégradé bleu (#0a5fd6 → #4ca7f8) ne
   figurait dans aucun des cinq logos. Le mot-symbole s'y révèle par un
   balayage de gauche à droite, qui reprend le geste du logo lui-même : ce
   trait qui file au-delà du dernier caractère.

   Le balayage passe par `clip-path`, composé par le navigateur : aucun
   recalcul de mise en page pendant l'animation, sur un écran qui doit
   justement rester fluide au moment où le reste de la page se construit. */
.intro {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--a-600);
  transition: opacity 620ms var(--e-out), transform 900ms var(--e-inout);
}
/* Une nappe très pâle qui respire : de l'air, discrètement, sur un aplat qui
   serait sinon parfaitement inerte. */
.intro::before {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(52% 42% at 30% 34%, rgba(255,255,255,.14), transparent 68%),
              radial-gradient(46% 38% at 74% 66%, rgba(43,196,189,.16), transparent 66%);
  animation: intro-souffle 7s ease-in-out infinite alternate;
}
@keyframes intro-souffle {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}

body.intro-done .intro { opacity: 0; transform: translateY(-100%); pointer-events: none; }

.intro-mark {
  position: relative;
  width: min(420px, 62vw);
}
.intro-mark img {
  display: block; width: 100%; height: auto;
  /* Le tracé est noir plein : `brightness(0) invert(1)` le rend blanc pur,
     là où un simple `invert` laisserait la nuance bleutée de l'encre. */
  filter: brightness(0) invert(1);

  /* L'état par défaut est VISIBLE, et le masquage n'existe que pendant
     l'animation, grâce à `backwards`. C'est l'inverse du réflexe habituel
     — partir masqué et révéler avec `forwards` — mais ce réflexe a un
     défaut grave ici : si l'animation ne démarre jamais (onglet en arrière-
     plan, moteur qui ne composite pas, navigateur qui refuse d'animer
     `clip-path`), le logo reste découpé et le visiteur regarde un écran
     indigo vide pendant deux secondes. Ainsi, le pire cas est un logo qui
     s'affiche d'un coup — pas un logo absent. */
  clip-path: none;
  animation: intro-balayage 900ms cubic-bezier(.22,.61,.36,1) 180ms backwards;
}
@keyframes intro-balayage {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Le trait qui accompagne le balayage : il court devant le mot, comme la
   pointe d'un traceur. */
.intro-mark::after {
  content: ""; position: absolute; top: -6%; bottom: -6%; left: 0;
  width: 2px; background: #fff;
  /* Même principe : au repos la pointe est invisible. Elle n'apparaît que
     le temps de l'animation, et ne laisse aucun trait figé si celle-ci ne
     joue pas. */
  opacity: 0;
  animation: intro-pointe 900ms cubic-bezier(.22,.61,.36,1) 180ms both;
}
@keyframes intro-pointe {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .9; }
  100% { left: 100%; opacity: 0; }
}



.intro-bar {
  position: absolute; left: 50%; bottom: clamp(64px, 12vh, 130px); translate: -50% 0;
  width: min(220px, 46vw); height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.22); overflow: hidden;
}
.intro-bar::after {
  content: ""; position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff, var(--pop), transparent);
  transform: translateX(-100%);
  animation: intro-sweep 1250ms var(--e-inout) 120ms 1 forwards;
}
@keyframes intro-sweep { to { transform: translateX(100%); } }

.intro-skip {
  position: absolute; right: clamp(16px, 4vw, 40px); bottom: clamp(16px, 4vw, 40px);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.7); padding: 8px 14px; border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.28);
  transition: color var(--t) var(--e-out), border-color var(--t) var(--e-out);
}
.intro-skip:hover { color: #fff; border-color: rgba(255,255,255,.6); }

/* Entrée échelonnée du héro, une fois le rideau levé */
body.intro-on .ah-copy > *,
body.intro-on .deck-mask,
body.intro-on .deck-bar,
body.intro-on .ah-trust { opacity: 0; }
body.intro-done .ah-copy > *,
body.intro-done .deck-mask,
body.intro-done .deck-bar,
body.intro-done .ah-trust { animation: fade-up 700ms var(--e-out) both; }
body.intro-done .ah-copy > *:nth-child(1) { animation-delay: 110ms; }
body.intro-done .ah-copy > *:nth-child(2) { animation-delay: 190ms; }
body.intro-done .ah-copy > *:nth-child(3) { animation-delay: 270ms; }
body.intro-done .ah-copy > *:nth-child(4) { animation-delay: 340ms; }
body.intro-done .deck-mask { animation-delay: 400ms; }
body.intro-done .deck-bar  { animation-delay: 500ms; }
body.intro-done .ah-trust  { animation-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  /* portée limitée : voir .mouvement-force en fin de feuille */
  html:not(.mouvement-force) .intro,
  html:not(.mouvement-force) .intro-mark,
  html:not(.mouvement-force) .intro-mark::after,
  html:not(.mouvement-force) .intro::before,
  html:not(.mouvement-force) .intro-mark img,
  html:not(.mouvement-force) .intro-bar::after { animation: none !important; transition: none !important; }
  /* Sans cette ligne le mot-symbole resterait masqué par son propre
     balayage : `clip-path` garde sa valeur de départ quand l'animation ne
     joue pas, et le logo n'apparaîtrait jamais. */
  html:not(.mouvement-force) .intro-mark img { clip-path: none !important; }
  html:not(.mouvement-force) .intro-mark::after { opacity: 0 !important; }
  html:not(.mouvement-force) body.intro-on .ah-copy > *,
  html:not(.mouvement-force) body.intro-on .deck-mask,
  html:not(.mouvement-force) body.intro-on .deck-bar,
  html:not(.mouvement-force) body.intro-on .ah-trust { opacity: 1; }
}

/* ---- Parole */
.ah-copy { max-width: 780px; margin-inline: auto; padding-top: clamp(28px, 5vw, 66px); }
.ah-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.74);
}
.ah-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--pop);
  animation: pulse-dot 2.6s var(--e-inout) infinite;
}
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 3px rgba(34,211,238,.26); } 50% { box-shadow: 0 0 0 9px rgba(34,211,238,0); } }

.ah h1 {
  margin-top: var(--s-5);
  font-size: clamp(2.125rem, 1rem + 3.5vw, 3.75rem);
  font-weight: 500; line-height: 1.06; letter-spacing: -.034em; color: #fff;
  text-wrap: balance;
}
.ah h1 em {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  color: var(--pop); letter-spacing: -.01em;
}
.ah-sub {
  margin: var(--s-5) auto 0; max-width: 52ch;
  font-size: clamp(.9375rem, .9rem + .22vw, 1.0625rem); line-height: 1.55;
  color: rgba(255,255,255,.82);
}
.ah-btns { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; }
.ah-btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: transform var(--t) var(--e-spring), background-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.ah-btn:hover { transform: translateY(-2px); }
.ah-btn:active { transform: translateY(0) scale(.97); }
.ah-btn--ghost {
  padding: 13px 24px; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ah-btn--ghost:hover { background: rgba(255,255,255,.25); }
.ah-btn--pop {
  padding: 6px 8px 6px 22px; background: var(--pop); color: var(--pop-ink);
  box-shadow: 0 10px 26px rgba(34,211,238,.32);
}
.ah-btn--pop:hover { box-shadow: 0 14px 34px rgba(34,211,238,.46); }
.ah-btn--pop .icon {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 99px; background: var(--pop-ink); color: var(--pop);
  transition: transform var(--t) var(--e-spring);
}
.ah-btn--pop:hover .icon { transform: rotate(45deg); }

/* ---- L'éventail. Le masque garantit l'absence de débordement. */
.deck-mask {
  position: relative; margin-top: clamp(30px, 4.5vw, 56px);
  overflow: hidden;                       /* la seule chose qui borne la piste */
  padding-block: 10px;
}
.deck {
  position: relative; height: clamp(210px, 25vw, 292px);
  perspective: 1250px; perspective-origin: 50% 42%;
  touch-action: pan-y; cursor: grab;
}
.deck:active { cursor: grabbing; }
.deck-track {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));
  transition: transform 700ms var(--e-out);
}

.dc {
  position: absolute; left: 50%; top: 0;
  width: clamp(126px, 13vw, 178px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none;
  transform-style: preserve-3d;
  will-change: transform, opacity;        /* la boucle n'écrit que ces deux-là */
}
.dc[hidden] { display: none; }
.dc figure { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.dc img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(3,26,60,.44));
  transition: filter 360ms var(--e-out);
}
.dc.is-focus img { filter: drop-shadow(0 24px 38px rgba(3,26,60,.58)); }
.dc::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 122%; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.26), transparent 62%);
  opacity: 0; transition: opacity 460ms var(--e-out);
}
.dc.is-focus::before { opacity: 1; }
.dc b {
  font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #fff;
  text-shadow: 0 1px 10px rgba(3,26,60,.55); text-align: center;
  opacity: 0; transform: translateY(-5px);
  transition: opacity 320ms var(--e-out), transform 320ms var(--e-out);
}
.dc.is-focus b { opacity: 1; transform: none; }

/* ---- Commandes sous l'éventail */
.deck-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--s-5);
  margin-top: var(--s-6); flex-wrap: wrap;
}
.deck-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.3); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out),
              border-color var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.deck-btn:hover { background: var(--pop); border-color: var(--pop); color: var(--pop-ink); transform: scale(1.08); }
.deck-btn:active { transform: scale(.94); }
.deck-meta { min-width: 210px; }
.deck-cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pop); }
.deck-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 3px;
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
  transition: gap var(--t) var(--e-out);
}
.deck-link:hover { gap: 13px; }
.deck-swap { animation: fade-up 400ms var(--e-out); }

/* Puces de famille */
.ah-fams { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: var(--s-7, 28px); }
.ah-fam {
  padding: 8px 15px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out),
              border-color var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.ah-fam:hover { background: rgba(255,255,255,.2); color: #fff; transform: translateY(-2px); }
.ah-fam[aria-pressed="true"] { background: #fff; color: var(--a-700); border-color: #fff; }

.ah-trust {
  display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px);
  flex-wrap: wrap; margin-top: var(--s-8);
  font-size: var(--fs-xs); color: rgba(255,255,255,.72);
}
.ah-trust span { display: inline-flex; align-items: center; gap: 7px; }
.ah-trust b { color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  /* portée limitée : voir .mouvement-force en fin de feuille */
  html:not(.mouvement-force) .ah-eyebrow::before { animation: none; }
  html:not(.mouvement-force) .deck-track { transition: none; }
}

/* ═══════════════════════════════════════════ 6quater. GRILLE BENTO
   Les chiffres de la maison, en tuiles de tailles inégales.
   ══════════════════════════════════════════════════════════════════ */
.bento {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-auto-rows: minmax(0, auto);
}
@media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } }

.bt {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: var(--s-6);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 250px;
  transition: transform var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out);
}
.bt:hover { transform: translateY(-4px); box-shadow: var(--sh-4); }
.bt-tag { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .62; }
.bt-num { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); font-weight: 680; letter-spacing: -.045em; line-height: 1; }
.bt-txt { font-size: var(--fs-sm); line-height: 1.45; opacity: .74; margin-top: var(--s-3); max-width: 30ch; }

/* Tuile vitrine : un visuel détouré sur fond bleu profond */
.bt--shot {
  grid-row: span 2;
  background: linear-gradient(168deg, #1182db, #0a4fbd 62%, #073a8f);
  color: #fff; min-height: 380px;
}
.bt--shot img {
  position: absolute; right: -6%; top: 46%; translate: 0 -50%;
  width: 72%; max-height: 74%; object-fit: contain;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.4));
  transition: transform var(--t-xslow) var(--e-out);
}
.bt--shot:hover img { transform: scale(1.06) rotate(-2deg); }
.bt--shot .bt-inner {
  position: relative; z-index: 1; margin-top: auto;
  background: rgba(255,255,255,.95); color: var(--ink);
  border-radius: var(--r-lg); padding: var(--s-5);
  backdrop-filter: blur(10px); max-width: 78%;
}
.bt--shot .bt-inner .bt-num { color: var(--ink); }
.bt--shot .bt-inner .bt-txt { color: var(--ink-2); opacity: 1; }
@media (max-width: 980px) { .bt--shot { grid-row: span 1; grid-column: span 2; } }
@media (max-width: 620px) { .bt--shot { grid-column: span 1; } .bt--shot .bt-inner { max-width: 100%; } }

.bt--light { background: var(--n-50); color: var(--ink); border: 1px solid var(--line-soft); }
.bt--pop   { background: var(--pop); color: var(--pop-ink); }
.bt--dark  { background: var(--n-900); color: #fff; }
.bt--accent{ background: linear-gradient(150deg, var(--a-500), var(--a-700)); color: #fff; }

/* Avis logé dans la tuile claire */
.bt-quote { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-5); }
.bt-quote p { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); }
.bt-avatars { display: flex; margin-bottom: var(--s-3); }
.bt-av {
  width: 30px; height: 30px; border-radius: 99px; margin-right: -9px;
  border: 2px solid var(--n-50); display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff;
}

/* Décor discret sur les tuiles pleines */
.bt--pop::after, .bt--dark::after, .bt--accent::after {
  content: ""; position: absolute; width: 220px; height: 220px; right: -70px; bottom: -90px;
  border-radius: 99px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 66%);
}



/* ------------------------------------------------------------- 6. HÉRO */
.hero { position: relative; overflow: hidden; background: var(--bg); }
/* Les halos et les filets d'air dépassent volontairement du cadre : on les
   rogne ici, sinon ils élargissent la page sur mobile. */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  will-change: transform;
}
.hero-blob--1 { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: radial-gradient(circle, var(--a-100), transparent 65%); }
.hero-blob--2 { width: 40vw; height: 40vw; right: -10vw; top: 12vw; background: radial-gradient(circle, #d9f6fb, transparent 65%); animation: float 11s var(--e-inout) infinite; }

/* Filets d'air animés — signature visuelle de la marque */
.airflow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.airflow path {
  fill: none; stroke: url(#airGrad); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 8 22; animation: drift 5.5s linear infinite;
}
.airflow path:nth-child(2) { animation-duration: 7s;   animation-delay: -1.2s; opacity: .75; }
.airflow path:nth-child(3) { animation-duration: 9s;   animation-delay: -2.6s; opacity: .5; }
.airflow path:nth-child(4) { animation-duration: 6.4s; animation-delay: -3.4s; opacity: .62; }

/* Héro centré : à l'arrivée sur le site, tout converge vers l'axe — accroche,
   promesse, actions, puis le produit. */
.hero-inner {
  position: relative; z-index: 1;
  display: grid; justify-items: center; text-align: center;
  gap: var(--s-12);
  padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 120px);
}
.hero-copy { max-width: 780px; display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 16ch; }
.hero .lead { max-width: 58ch; margin-inline: auto; }
.hero-cta { justify-content: center; }
.hero-stats { justify-content: center; }

.hero h1 { font-size: var(--fs-display); font-weight: 660; letter-spacing: -.045em; margin-top: var(--s-5); }
.hero h1 em {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--a-500), var(--cy-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { margin-top: var(--s-6); font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem); }
.hero-cta { display: flex; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; }

/* Mots qui défilent dans le titre */
.rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; }
.rotator > span {
  grid-area: 1/1; opacity: 0; transform: translateY(85%);
  transition: opacity 460ms var(--e-out), transform 560ms var(--e-out);
}
.rotator > span.is-on { opacity: 1; transform: none; }
.rotator > span.is-out { opacity: 0; transform: translateY(-85%); }

.hero-stats { display: flex; gap: var(--s-10); margin-top: var(--s-12); flex-wrap: wrap; }
.hero-stat b { display: block; font-size: 1.875rem; font-weight: 660; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hero-stat span { font-size: var(--fs-xs); color: var(--ink-2); }

.hero-visual { position: relative; width: min(540px, 100%); }
.hero-card {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(165deg, var(--n-50), var(--n-0) 55%);
  border: 1px solid var(--line-soft); box-shadow: var(--sh-4);
  aspect-ratio: 4/3.4; display: grid; place-items: center; padding: var(--s-10);
  will-change: transform;
}
.hero-card img { max-height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(16,20,26,.14)); }
.hero-chip {
  position: absolute; display: flex; align-items: center; gap: var(--s-3);
  padding: 11px 16px; border-radius: var(--r-full);
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: var(--sh-3);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  animation: float 6s var(--e-inout) infinite;
  will-change: transform;
}
.hero-chip i { font-style: normal; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--a-50); color: var(--a-600); }
.hero-chip--a { left: -22px;  top: 16%;  animation-delay: -.6s; }
.hero-chip--b { right: -14px; top: 46%;  animation-delay: -2.4s; }
.hero-chip--c { left: 8%;     bottom: -18px; animation-delay: -4s; }
@media (max-width: 560px) { .hero-chip--a, .hero-chip--b { display: none; } }

/* Bandeau réassurance */
.trust { border-block: 1px solid var(--line-soft); background: var(--n-25); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-6) var(--s-5);
  transition: background-color var(--t) var(--e-out);
}
.trust-item + .trust-item { border-left: 1px solid var(--line-soft); }
.trust-item:hover { background: var(--n-0); }
.trust-item i {
  font-style: normal; flex-shrink: 0; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--a-50); color: var(--a-600);
  transition: transform var(--t) var(--e-spring), background-color var(--t) var(--e-out);
}
.trust-item:hover i { transform: scale(1.09) rotate(-6deg); background: var(--a-100); }
.trust-item b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.trust-item span { font-size: var(--fs-xs); color: var(--ink-2); }
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(odd) { border-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 480px) { .trust-grid { grid-template-columns: 1fr; } .trust-item + .trust-item { border-left: 0; border-top: 1px solid var(--line-soft); } }

/* ------------------------------------------------------ 7. CARTES CATÉGORIE */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.cat-grid .cat-card:nth-child(1) { grid-column: span 2; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } .cat-grid .cat-card:nth-child(1) { grid-column: span 2; } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } .cat-grid .cat-card:nth-child(1) { grid-column: auto; } }

.cat-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 268px; padding: var(--s-8); border-radius: var(--r-lg);
  background: var(--n-50); border: 1px solid var(--line-soft);
  overflow: hidden; isolation: isolate;
  transition: transform var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out), border-color var(--t) var(--e-out);
  will-change: transform;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--sh-4); border-color: transparent; }
.cat-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, var(--a-500), var(--cy-500));
  opacity: 0; transition: opacity var(--t-slow) var(--e-out);
}
.cat-card:hover::before { opacity: 1; }
.cat-card img {
  position: absolute; right: -6%; top: 50%; translate: 0 -50%;
  width: 52%; max-height: 82%; object-fit: contain; z-index: -1;
  transition: transform var(--t-xslow) var(--e-out), filter var(--t-slow) var(--e-out);
  filter: drop-shadow(0 12px 24px rgba(16,20,26,.1));
}
.cat-card:hover img { transform: scale(1.07) rotate(-2deg); filter: drop-shadow(0 18px 34px rgba(0,0,0,.24)) brightness(1.04); }
.cat-card h3, .cat-card p, .cat-card .cat-count { transition: color var(--t-slow) var(--e-out); }
.cat-card p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-2); max-width: 34ch; }
.cat-count { font-size: var(--fs-xs); font-weight: 600; color: var(--a-600); margin-bottom: var(--s-3); display: block; }
.cat-card:hover h3, .cat-card:hover p, .cat-card:hover .cat-count { color: #fff; }
.cat-card:hover p { color: rgba(255,255,255,.8); }
.cat-card .go {
  position: absolute; right: var(--s-6); top: var(--s-6);
  width: 38px; height: 38px; border-radius: 99px; display: grid; place-items: center;
  background: var(--n-0); color: var(--ink); box-shadow: var(--sh-2);
  opacity: 0; transform: scale(.7) rotate(-30deg);
  transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.cat-card:hover .go { opacity: 1; transform: none; }

/* --------------------------------------------------- 8. CARTE PRODUIT */
.prod-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.prod-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .prod-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .prod-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .prod-grid, .prod-grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out), border-color var(--t) var(--e-out);
  will-change: transform;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--line); }

.card-media {
  position: relative; aspect-ratio: 1; background: var(--n-25);
  display: grid; place-items: center; overflow: hidden;
}
.card-media img {
  grid-area: 1/1; width: 100%; height: 100%; object-fit: contain; padding: 13%;
  transition: transform var(--t-xslow) var(--e-out), opacity var(--t-slow) var(--e-out);
}
.card-media img.alt { opacity: 0; }
.card:hover .card-media img.main { opacity: 0; transform: scale(1.06); }
.card:hover .card-media img.alt  { opacity: 1; transform: scale(1.06); }
.card:hover .card-media img:only-child { opacity: 1; transform: scale(1.07); }

.card-flags { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; flex-direction: column; gap: 5px; z-index: 2; }

.card-quick {
  position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 2;
  display: flex; gap: 6px;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.card:hover .card-quick, .card:focus-within .card-quick { opacity: 1; transform: none; }
@media (hover: none) { .card-quick { opacity: 1; transform: none; } }
/* Sur petit écran, trois boutons ne tiennent pas : l'aperçu rapide disparaît.
   C'est une commodité de survol, et au doigt on ouvre directement la fiche. */
@media (max-width: 640px) { .card-quick .js-qv { display: none; } }
.card-quick .btn { flex: 1; padding: 10px 12px; font-size: var(--fs-xs); box-shadow: var(--sh-2); }
.card-quick .icon-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--n-0); box-shadow: var(--sh-2); border: 1px solid var(--line-soft);
}
.card-quick .icon-btn:hover { background: var(--n-0); color: var(--warm); }
.card-quick .icon-btn.is-on { color: var(--warm); }
.card-quick .icon-btn.is-on svg { fill: currentColor; }

.card-body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; flex: 1; gap: var(--s-1); }
.card-cat { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.card-title {
  font-size: var(--fs-sm); font-weight: 550; line-height: 1.35; letter-spacing: -.012em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-fast) var(--e-out);
}
.card:hover .card-title { color: var(--a-600); }
.card-foot { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.price { font-size: 1.0625rem; font-weight: 660; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price small { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.price-old { font-size: var(--fs-xs); color: var(--ink-3); text-decoration: line-through; }
.price--quote { font-size: var(--fs-sm); font-weight: 600; color: var(--a-600); }

.card-stretch { position: absolute; inset: 0; z-index: 1; }

/* Rail horizontal (produits phares) */
/* Le rail déborde volontairement du .wrap pour que les cartes filent jusqu'au
   bord — la marge négative doit donc suivre exactement le padding du .wrap. */
.rail { display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-4); margin-inline: calc(var(--wrap-pad, var(--s-6)) * -1); padding-inline: var(--wrap-pad, var(--s-6)); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 clamp(220px, 24vw, 288px); scroll-snap-align: start; }
.rail-nav { display: flex; gap: var(--s-2); }
.rail-nav .icon-btn { border: 1px solid var(--line); }
.rail-nav .icon-btn[disabled] { opacity: .3; pointer-events: none; }

/* ------------------------------------------------- 9. PAGE CATÉGORIE */
.crumbs { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--ink-2); padding-block: var(--s-5); flex-wrap: wrap; }
.crumbs a:hover { color: var(--a-600); }
.crumbs svg { color: var(--n-300); }

.cat-hero { padding-block: var(--s-4) var(--s-10); }
.cat-hero h1 { margin-bottom: var(--s-4); }

.shop { display: grid; grid-template-columns: 268px 1fr; gap: var(--s-10); align-items: start; padding-bottom: var(--s-24); }
@media (max-width: 980px) { .shop { grid-template-columns: 1fr; gap: var(--s-6); } }

.filters { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 980px) {
  .filters {
    position: fixed; inset: 0; z-index: 140; background: var(--bg);
    padding: var(--s-6); overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--t-slow) var(--e-out);
  }
  .filters.is-open { transform: none; }
}
.filter-group { border-bottom: 1px solid var(--line-soft); padding-block: var(--s-5); }
.filter-group:first-child { padding-top: 0; }
.filter-group > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.01em;
}
.filter-group > button svg { color: var(--ink-3); transition: transform var(--t) var(--e-out); }
.filter-group[data-open="false"] > button svg { transform: rotate(-90deg); }
.filter-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-slow) var(--e-out), opacity var(--t) var(--e-out); }
.filter-group[data-open="false"] .filter-body { grid-template-rows: 0fr; opacity: 0; }
.filter-body > div { min-height: 0; overflow: hidden; padding-top: var(--s-4); }

.check {
  display: flex; align-items: center; gap: var(--s-3); padding: 7px 0;
  font-size: var(--fs-sm); color: var(--n-700); cursor: pointer;
  transition: color var(--t-fast) var(--e-out);
}
.check:hover { color: var(--ink); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 6px;
  border: 1.5px solid var(--n-300); background: var(--n-0);
  display: grid; place-items: center; color: #fff;
  transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-spring);
}
.check .box svg { opacity: 0; transform: scale(.4); transition: opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-spring); }
.check input:checked + .box { background: var(--a-500); border-color: var(--a-500); }
.check input:checked + .box svg { opacity: 1; transform: none; }
.check input:focus-visible + .box { outline: 2px solid var(--a-500); outline-offset: 2px; }
.check:active .box { transform: scale(.88); }
.check em { font-style: normal; margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); }

/* Slider de prix à deux poignées */
.range { padding-top: var(--s-2); }
.range-track { position: relative; height: 3px; background: var(--n-150); border-radius: 99px; margin: var(--s-5) 8px; }
.range-fill { position: absolute; height: 100%; background: var(--a-500); border-radius: 99px; transition: left var(--t-fast) linear, right var(--t-fast) linear; }
.range input[type="range"] {
  position: absolute; left: -8px; right: -8px; top: 50%; translate: 0 -50%;
  width: calc(100% + 16px); height: 26px;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none; margin: 0;
}
.range input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 99px;
  background: var(--n-0); border: 1.5px solid var(--a-500);
  box-shadow: var(--sh-2); cursor: grab;
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast) var(--e-out);
}
.range input::-webkit-slider-thumb:hover { transform: scale(1.18); box-shadow: var(--sh-3); }
.range input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.28); }
.range input::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 99px;
  background: var(--n-0); border: 1.5px solid var(--a-500); box-shadow: var(--sh-2); cursor: grab;
}
.range-vals { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }

.toolbar {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-5); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line-soft);
}
.toolbar .count-live { font-size: var(--fs-sm); color: var(--ink-2); }
.toolbar .count-live b { color: var(--ink); font-variant-numeric: tabular-nums; }
.select-wrap { position: relative; margin-left: auto; }
.select-wrap svg { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--ink-3); }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  padding: 9px 36px 9px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--n-0);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  transition: border-color var(--t) var(--e-out), background-color var(--t) var(--e-out);
}
.select-wrap select:hover { border-color: var(--n-300); background: var(--n-25); }
.view-toggle { display: flex; gap: 2px; padding: 3px; background: var(--n-100); border-radius: var(--r-full); }
.view-toggle button { width: 34px; height: 30px; border-radius: 99px; display: grid; place-items: center; color: var(--ink-2); transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out); }
.view-toggle button[aria-pressed="true"] { background: var(--n-0); color: var(--ink); box-shadow: var(--sh-1); }

.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 8px 6px 13px; border-radius: var(--r-full);
  background: var(--a-50); color: var(--a-700);
  font-size: var(--fs-xs); font-weight: 600;
  animation: scale-in var(--t) var(--e-spring);
}
.chip button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; color: var(--a-600); transition: background-color var(--t-fast) var(--e-out); }
.chip button:hover { background: var(--a-100); }

/* Grille : entrée décalée + FLIP au filtrage */
.prod-grid .card { animation: fade-up 460ms var(--e-out) both; animation-delay: var(--i-delay, 0ms); }
.prod-grid.is-flipping .card { animation: none; }

/* Mode liste */
.prod-grid.is-list { grid-template-columns: 1fr; gap: var(--s-3); }
.prod-grid.is-list .card { flex-direction: row; align-items: center; }
.prod-grid.is-list .card-media { width: 148px; flex-shrink: 0; aspect-ratio: 1; }
.prod-grid.is-list .card-quick { position: static; opacity: 1; transform: none; margin-top: var(--s-3); max-width: 320px; }
.prod-grid.is-list .card-body { padding: var(--s-5) var(--s-6); }
.prod-grid.is-list .card-title { -webkit-line-clamp: 1; font-size: var(--fs-body); }
@media (max-width: 560px) { .prod-grid.is-list .card-media { width: 100px; } }

.empty { text-align: center; padding: var(--s-24) var(--s-6); animation: fade-up var(--t-slow) var(--e-out); }
.empty i { font-style: normal; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--s-5); border-radius: 20px; background: var(--n-100); color: var(--ink-3); }

.loadmore { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding-top: var(--s-12); }
.progress-bar { width: 200px; height: 3px; background: var(--n-150); border-radius: 99px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--a-500), var(--cy-400)); border-radius: 99px; transition: width var(--t-slow) var(--e-out); }

.filters-fab {
  display: none; position: fixed; left: 50%; translate: -50% 0; bottom: 20px; z-index: 90;
  box-shadow: var(--sh-4);
}
@media (max-width: 980px) { .filters-fab { display: inline-flex; } }

/* -------------------------------------------------- 10. FICHE PRODUIT */
.pdp { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-16); align-items: start; padding-bottom: var(--s-20); }
@media (max-width: 940px) { .pdp { grid-template-columns: 1fr; gap: var(--s-10); } }

.gallery { position: sticky; top: calc(var(--header-h) + 24px); display: grid; grid-template-columns: 76px 1fr; gap: var(--s-4); }
@media (max-width: 940px) { .gallery { position: static; } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } .thumbs { order: 2; display: flex !important; overflow-x: auto; } }

.thumbs { display: flex; flex-direction: column; gap: var(--s-3); }
.thumb {
  aspect-ratio: 1; width: 76px; flex-shrink: 0; border-radius: var(--r);
  background: var(--n-25); border: 1.5px solid var(--line-soft); overflow: hidden; padding: 8px;
  transition: border-color var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb:hover { transform: translateY(-2px); border-color: var(--n-300); }
.thumb[aria-current="true"] { border-color: var(--a-500); }

.stage {
  position: relative; aspect-ratio: 1; border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--n-50), var(--n-0) 60%);
  border: 1px solid var(--line-soft); overflow: hidden;
  display: grid; place-items: center; cursor: zoom-in;
}
.stage img { grid-area: 1/1; width: 100%; height: 100%; object-fit: contain; padding: 9%; transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out); }
.stage img:not(.is-on) { opacity: 0; transform: scale(1.03); pointer-events: none; }
.stage.is-zoom img.is-on { transform: scale(1.9); transition: transform 120ms linear; }
.stage-hint { position: absolute; right: var(--s-4); bottom: var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.8); padding: 6px 12px; border-radius: 99px; backdrop-filter: blur(8px); transition: opacity var(--t) var(--e-out); }
.stage.is-zoom .stage-hint { opacity: 0; }

.buybox > * + * { margin-top: var(--s-5); }
.pdp-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.375rem); }
.pdp-meta { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); }
.stars { display: inline-flex; gap: 2px; color: #f5a524; }

.pdp-price { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-2); }
.pdp-price .price { font-size: 2.25rem; letter-spacing: -.04em; }
.pdp-price .vat { font-size: var(--fs-xs); color: var(--ink-3); }

.opt-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: var(--s-3); display: block; }
.opts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.opt {
  padding: 10px 18px; border-radius: var(--r-full);
  border: 1.5px solid var(--line); background: var(--n-0);
  font-size: var(--fs-sm); font-weight: 550;
  transition: border-color var(--t) var(--e-out), background-color var(--t) var(--e-out), transform var(--t) var(--e-spring), color var(--t) var(--e-out);
}
.opt:hover { border-color: var(--n-300); transform: translateY(-2px); }
.opt[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-full); overflow: hidden; }
.qty button { width: 44px; height: 48px; display: grid; place-items: center; color: var(--ink-2); transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out); }
.qty button:hover { background: var(--n-50); color: var(--ink); }
.qty input { width: 44px; height: 48px; text-align: center; border: 0; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row { display: flex; gap: var(--s-3); align-items: stretch; }
.buy-row .btn { flex: 1; padding-block: 15px; }

.assur { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r); background: var(--n-25); border: 1px solid var(--line-soft); }
.assur div { display: flex; gap: var(--s-3); font-size: var(--fs-sm); align-items: flex-start; }
.assur svg { flex-shrink: 0; color: var(--a-500); margin-top: 2px; }
.assur b { font-weight: 600; }

/* Accordéon specs */
/* Fiche technique jointe au produit : elle suit la description, dans le même
   volet, plutôt que de prendre un bloc à elle — c'est un complément de
   lecture, pas une action d'achat. Le document s'affiche sur place ; le
   bouton « Plein écran » reste visible au cas où le navigateur refuserait
   de rendre le PDF dans un cadre, ce qui arrive sur mobile. */
.pr-fiche { margin: 18px 0 0; }
.pr-fiche-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.pr-fiche-titre {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--fs-sm);
}
.pr-fiche-titre svg { flex: none; opacity: .7; }
.pr-fiche-cadre {
  display: block; width: 100%; height: 520px; border: 1px solid var(--line-soft);
  border-radius: var(--r); background: var(--n-25);
}
/* Sur un écran de téléphone, un cadre de 520 px mange toute la page pour un
   document qu'on lira de toute façon en plein écran. */
@media (max-width: 700px) { .pr-fiche-cadre { height: 320px; } }

.acc { border-top: 1px solid var(--line-soft); }
.acc > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; font-size: var(--fs-sm); font-weight: 600; text-align: left;
  transition: color var(--t-fast) var(--e-out);
}
.acc > button:hover { color: var(--a-600); }
.acc-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--t) var(--e-out), opacity var(--t) var(--e-out);
}
.acc-icon::after { transform: rotate(90deg); }
.acc[data-open="true"] .acc-icon::after { transform: rotate(0); opacity: 0; }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--e-out); }
.acc[data-open="true"] .acc-body { grid-template-rows: 1fr; }
.acc-body > div { min-height: 0; overflow: hidden; }
.acc-body p, .acc-body table { padding-bottom: var(--s-5); font-size: var(--fs-sm); color: var(--ink-2); }

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table tr { border-bottom: 1px solid var(--line-soft); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 11px 0; width: 45%; }
.spec-table td { padding: 11px 0; font-weight: 550; }

/* Barre d'achat collante mobile */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform var(--t-slow) var(--e-out);
}
.sticky-buy.is-on { transform: none; }
.sticky-buy .btn { margin-left: auto; }
@media (max-width: 940px) { .sticky-buy { display: flex; } }

/* --------------------------------------------------- 11. PANIER / CHECKOUT */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-10); align-items: start; padding-bottom: var(--s-24); }
@media (max-width: 940px) { .cart-layout { grid-template-columns: 1fr; } }

.steps { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-10); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); }
.step i {
  font-style: normal; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 99px; border: 1.5px solid var(--line); font-size: var(--fs-xs); font-weight: 700;
  transition: background-color var(--t) var(--e-out), border-color var(--t) var(--e-out), color var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.step[data-state="current"] { color: var(--ink); font-weight: 600; }
.step[data-state="current"] i { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.08); }
.step[data-state="done"] { color: var(--a-600); }
.step[data-state="done"] i { background: var(--a-50); border-color: var(--a-100); color: var(--a-600); }
.step-sep { flex: 1; min-width: 20px; height: 1.5px; background: var(--line); border-radius: 2px; position: relative; overflow: hidden; }
.step-sep::after { content: ""; position: absolute; inset: 0; background: var(--a-500); transform-origin: left; transform: scaleX(0); transition: transform var(--t-slow) var(--e-out); }
.step-sep[data-done="true"]::after { transform: none; }

.panel { animation: fade-up 420ms var(--e-out) both; }
.panel[hidden] { display: none; }

.line {
  display: grid; grid-template-columns: 92px 1fr auto; gap: var(--s-5);
  align-items: center; padding: var(--s-5) 0; border-bottom: 1px solid var(--line-soft);
  transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.line.is-out { opacity: 0; transform: translateX(-24px); }
.line-img { width: 92px; aspect-ratio: 1; border-radius: var(--r); background: var(--n-25); border: 1px solid var(--line-soft); padding: 8px; }
.line-img img { width: 100%; height: 100%; object-fit: contain; }
.line-name { font-weight: 550; font-size: var(--fs-sm); letter-spacing: -.01em; }
.line-sub { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
.line-tools { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.line-tools .qty { transform: scale(.82); transform-origin: left; }
.line-remove { font-size: var(--fs-xs); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast) var(--e-out); }
.line-remove:hover { color: var(--warm); }
.line-price { text-align: right; font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .line { grid-template-columns: 72px 1fr; }
  .line-img { width: 72px; }
  .line-price { grid-column: 2; text-align: left; margin-top: var(--s-2); }
}

.summary {
  position: sticky; top: calc(var(--header-h) + 24px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--n-25); padding: var(--s-6);
}
.summary h3 { margin-bottom: var(--s-5); }
.sum-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 9px 0; font-size: var(--fs-sm); color: var(--ink-2); }
.sum-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-total { border-top: 1px solid var(--line); margin-top: var(--s-3); padding-top: var(--s-4); display: flex; justify-content: space-between; align-items: baseline; }
.sum-total span { font-weight: 600; }
.sum-total b { font-size: 1.5rem; font-weight: 680; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.sum-total b.is-bump { animation: pop 380ms var(--e-spring); }

.promo-row { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.promo-row input { flex: 1; }

.free-ship { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r); background: var(--a-50); font-size: var(--fs-xs); color: var(--a-700); }
.free-ship .progress-bar { width: 100%; margin-top: var(--s-3); background: var(--a-100); }

/* Formulaires */
.field { position: relative; }
.field + .field, .form-grid + .field, .field + .form-grid { margin-top: var(--s-4); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.input {
  width: 100%; padding: 15px 16px 15px; border-radius: var(--r);
  border: 1.5px solid var(--line); background: var(--n-0);
  font-size: var(--fs-sm); transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out), background-color var(--t) var(--e-out);
}
.input::placeholder { color: transparent; }
.input:hover { border-color: var(--n-300); }
.input:focus { outline: none; border-color: var(--a-500); box-shadow: 0 0 0 4px var(--a-50); }
.field label {
  position: absolute; left: 16px; top: 15px; font-size: var(--fs-sm); color: var(--ink-3);
  pointer-events: none; transform-origin: left top;
  transition: transform var(--t) var(--e-out), color var(--t) var(--e-out);
  background: var(--n-0); padding-inline: 4px; margin-left: -4px;
}
.input:focus + label, .input:not(:placeholder-shown) + label { transform: translateY(-24px) scale(.8); color: var(--a-600); }
.input:not(:placeholder-shown):not(:focus) + label { color: var(--ink-3); }
textarea.input { min-height: 96px; resize: vertical; }

.radio-card {
  display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-5);
  border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: border-color var(--t) var(--e-out), background-color var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.radio-card + .radio-card { margin-top: var(--s-3); }
.radio-card:hover { border-color: var(--n-300); transform: translateY(-1px); }
.radio-card:has(input:checked) { border-color: var(--a-500); background: var(--a-50); }
.radio-card input { position: absolute; opacity: 0; }
.radio-card .dot {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 99px; margin-top: 2px;
  border: 1.5px solid var(--n-300); background: var(--n-0);
  display: grid; place-items: center;
  transition: border-color var(--t) var(--e-out);
}
.radio-card .dot::after { content: ""; width: 9px; height: 9px; border-radius: 99px; background: var(--a-500); transform: scale(0); transition: transform var(--t) var(--e-spring); }
.radio-card:has(input:checked) .dot { border-color: var(--a-500); }
.radio-card:has(input:checked) .dot::after { transform: scale(1); }
.radio-card b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.radio-card span { font-size: var(--fs-xs); color: var(--ink-2); }
.radio-card .rc-price { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

/* Confirmation */
.done { text-align: center; padding-block: var(--s-16); animation: fade-up var(--t-slow) var(--e-out); }
.done-check { width: 84px; height: 84px; margin: 0 auto var(--s-6); }
.done-check circle, .done-check path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.done-check circle { stroke: var(--a-500); stroke-width: 3; stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 700ms var(--e-out) forwards; }
.done-check path { stroke: var(--a-500); stroke-width: 5; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 420ms var(--e-out) 520ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Tiroir panier */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: min(420px, 100vw); background: var(--bg);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(16,20,26,.16);
  transform: translateX(100%); transition: transform var(--t-slow) var(--e-out);
}
.drawer.is-open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line-soft); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 var(--s-6); }
.drawer-foot { padding: var(--s-5) var(--s-6) calc(var(--s-6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--n-25); }
.drawer .line { grid-template-columns: 68px 1fr auto; gap: var(--s-4); }
.drawer .line-img { width: 68px; }

.scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(16,20,26,.32); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--e-out);
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

/* Toast */
.toasts { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 200; display: flex; flex-direction: column; gap: var(--s-3); pointer-events: none; }
@media (max-width: 560px) { .toasts { left: var(--s-4); right: var(--s-4); } }
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-radius: var(--r);
  background: var(--n-900); color: #fff; box-shadow: var(--sh-4);
  font-size: var(--fs-sm); font-weight: 500;
  animation: slide-left 380ms var(--e-spring) both;
  pointer-events: auto;
}
.toast.is-out { animation: fade-in 240ms var(--e-out) reverse both; }
.toast i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.13); color: var(--cy-400); flex-shrink: 0; }
.toast a { color: var(--cy-400); font-weight: 600; margin-left: var(--s-2); white-space: nowrap; }

/* Image qui « vole » vers le panier */
.fly {
  position: fixed; z-index: 190; pointer-events: none;
  border-radius: var(--r-sm); object-fit: contain; background: #fff;
  box-shadow: var(--sh-3);
  transition: transform 720ms var(--e-inout), opacity 720ms var(--e-out), width 720ms var(--e-inout), height 720ms var(--e-inout);
}

/* ---------------------------------------------------- 12. BLOCS ÉDITO */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s-10); } }

.marquee { 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); }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > div { display: flex; gap: var(--s-16); padding-right: var(--s-16); align-items: center; }
.marquee-track span { font-size: 1.25rem; font-weight: 640; letter-spacing: -.03em; color: var(--n-300); white-space: nowrap; transition: color var(--t) var(--e-out); }
.marquee-track span:hover { color: var(--ink); }

.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }
.quote {
  padding: var(--s-8); border-radius: var(--r-lg);
  background: var(--n-0); border: 1px solid var(--line-soft);
  transition: transform var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.quote p { font-size: var(--fs-sm); line-height: 1.65; color: var(--n-700); margin-block: var(--s-4); }
.quote footer { display: flex; align-items: center; gap: var(--s-3); }
.quote-av { width: 38px; height: 38px; border-radius: 99px; display: grid; place-items: center; background: var(--a-50); color: var(--a-600); font-weight: 700; font-size: var(--fs-xs); }
.quote b { display: block; font-size: var(--fs-sm); }
.quote small { color: var(--ink-3); font-size: var(--fs-xs); }

/* --------------------------------------------------------- 13. FOOTER */
.footer { background: var(--n-900); color: var(--n-300); padding-block: var(--s-20) var(--s-8); margin-top: var(--s-16); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.4fr; gap: var(--s-10); padding-bottom: var(--s-12); border-bottom: 1px solid rgba(255,255,255,.09); }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
/* Le mot-symbole est en noir plein : sur le pied de page sombre il
   disparaîtrait. `invert` le rend blanc sans dupliquer le fichier — le
   tracé n'ayant qu'une seule couleur, l'inversion est exacte et non une
   approximation. */
.footer .logo img { filter: invert(1); }
.footer h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--n-500); margin-bottom: var(--s-4); font-weight: 600; }
.footer li + li { margin-top: 9px; }
.footer li a { font-size: var(--fs-sm); transition: color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out); display: inline-block; }
.footer li a:hover { color: #fff; transform: translateX(3px); }
.footer p { font-size: var(--fs-sm); color: var(--n-500); margin-top: var(--s-4); max-width: 34ch; }
.news-form { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.news-form input {
  flex: 1; padding: 12px 16px; border-radius: var(--r-full);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff;
  font-size: var(--fs-sm); transition: border-color var(--t) var(--e-out), background-color var(--t) var(--e-out);
}
.news-form input::placeholder { color: var(--n-500); }
.news-form input:focus { outline: none; border-color: var(--cy-500); background: rgba(255,255,255,.1); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding-top: var(--s-8); font-size: var(--fs-xs); color: var(--n-500); flex-wrap: wrap; }
.socials { display: flex; gap: var(--s-2); }
.socials a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; background: rgba(255,255,255,.07); transition: background-color var(--t) var(--e-out), transform var(--t) var(--e-spring), color var(--t) var(--e-out); }
.socials a:hover { background: var(--a-500); color: #fff; transform: translateY(-3px); }


/* ------------------------------------------- 14. COMPOSANTS INTERACTIFS */

/* Jauge de lecture, collée sous l'en-tête */
.readbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 160;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--a-500), var(--cy-400));
  pointer-events: none;
}

/* ---- Aperçu rapide (modale) */
.qv-wrap {
  position: fixed; inset: 0; z-index: 170; display: grid; place-items: center;
  padding: var(--s-6); opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--e-out);
}
.qv-wrap.is-on { opacity: 1; pointer-events: auto; }
.qv {
  position: relative; width: min(900px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-radius: var(--r-xl); box-shadow: var(--sh-4);
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(24px) scale(.97);
  transition: transform var(--t-slow) var(--e-spring);
}
.qv-wrap.is-on .qv { transform: none; }
@media (max-width: 720px) { .qv { grid-template-columns: 1fr; } }
.qv-media { background: linear-gradient(165deg, var(--n-50), var(--n-0) 60%); display: grid; place-items: center; padding: var(--s-8); }
.qv-media img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.qv-body { padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); }
.qv-close { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); box-shadow: var(--sh-1); }

/* ---- Calculateur de puissance */
.calc {
  border-radius: var(--r-xl); border: 1px solid var(--line);
  background: var(--n-0); box-shadow: var(--sh-2); overflow: hidden;
}
.calc-head { padding: var(--s-6) var(--s-6) 0; }
.calc-body { padding: var(--s-6); display: grid; gap: var(--s-6); }
.calc-field label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s-3); }
.calc-field label b { font-variant-numeric: tabular-nums; color: var(--a-600); font-size: var(--fs-body); }
.calc-slider {
  width: 100%; height: 3px; border-radius: 99px; -webkit-appearance: none; appearance: none;
  background: var(--n-150); cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 99px;
  background: var(--n-0); border: 1.5px solid var(--a-500); box-shadow: var(--sh-2); cursor: grab;
  transition: transform var(--t-fast) var(--e-spring);
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 99px; background: var(--n-0); border: 1.5px solid var(--a-500); box-shadow: var(--sh-2); cursor: grab; }
.calc-segs { display: flex; gap: 2px; padding: 3px; background: var(--n-100); border-radius: var(--r-full); }
.calc-segs button {
  flex: 1; padding: 9px 8px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out);
}
.calc-segs button[aria-pressed="true"] { background: var(--n-0); color: var(--ink); box-shadow: var(--sh-1); }
.calc-out {
  background: linear-gradient(150deg, var(--n-900), #1a2230 60%, #123252); color: #fff;
  padding: var(--s-6); display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.calc-out::before {
  content: ""; position: absolute; width: 280px; height: 280px; right: -100px; bottom: -150px;
  border-radius: 99px; background: radial-gradient(circle, rgba(34,211,238,.3), transparent 66%);
}
.calc-out .big { font-size: 2.25rem; font-weight: 680; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.calc-out .big small { font-size: var(--fs-sm); font-weight: 500; opacity: .6; margin-left: 6px; letter-spacing: 0; }
.calc-out span { font-size: var(--fs-xs); color: rgba(255,255,255,.6); }
.calc-out .btn { margin-left: auto; position: relative; z-index: 1; }
.calc-segs--wrap { flex-wrap: wrap; }
.calc-segs--wrap button { flex: 1 1 30%; }

/* Variante sombre — le Fan Selector répond au calculateur clair. */
.calc--dark {
  background: linear-gradient(158deg, var(--n-900), #1a2230 55%, #123252);
  border-color: transparent; color: #fff;
}
.calc--dark h3 { color: #fff; }
.calc--dark .eyebrow { color: var(--cy-400); }
.calc--dark .eyebrow::before { background: linear-gradient(90deg, var(--cy-400), transparent); }
.calc--dark .calc-field label { color: rgba(255,255,255,.86); }
.calc--dark .calc-field label b { color: var(--cy-400); }
.calc--dark .calc-slider { background: rgba(255,255,255,.16); }
.calc--dark .calc-slider::-webkit-slider-thumb { background: var(--n-900); border-color: var(--cy-400); }
.calc--dark .calc-slider::-moz-range-thumb { background: var(--n-900); border-color: var(--cy-400); }
.calc--dark .calc-segs { background: rgba(255,255,255,.08); }
.calc--dark .calc-segs button { color: rgba(255,255,255,.62); }
.calc--dark .calc-segs button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.calc--dark .calc-out { background: rgba(0,0,0,.24); }
.calc--dark .calc-out::before { display: none; }
.calc--dark .calc-match { color: #fff; }
.calc--dark .calc-match:hover { background: rgba(255,255,255,.07); }
.calc--dark .calc-match img { background: rgba(255,255,255,.9); }
.calc--dark .calc-match .muted { color: rgba(255,255,255,.5) !important; }

/* Carte de renvoi : même habillage que l'outil, mais cliquable en entier. */
.calc--teaser { display: flex; flex-direction: column; text-decoration: none; }
.calc--teaser:hover { transform: translateY(-4px); box-shadow: var(--sh-4); }
.calc--teaser .calc-out { margin-top: auto; }
.calc-teaser-list { padding: var(--s-2) var(--s-6) var(--s-6); display: grid; gap: var(--s-2); }
.calc-teaser-list li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--fs-sm); color: rgba(255,255,255,.78);
}
.calc-teaser-list li::before {
  content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px;
  border-radius: 99px; background: var(--cy-400);
}

.calc-matches { display: grid; gap: 2px; padding: 0 var(--s-6) var(--s-6); }
.calc-match {
  display: flex; align-items: center; gap: var(--s-4); padding: 11px 12px; margin-inline: -12px;
  border-radius: var(--r-sm); font-size: var(--fs-sm);
  transition: background-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
  animation: fade-up 340ms var(--e-out) both;
}
.calc-match:hover { background: var(--n-50); transform: translateX(3px); }
.calc-match img { width: 40px; height: 40px; object-fit: contain; background: var(--n-25); border-radius: 9px; padding: 3px; flex-shrink: 0; }
.calc-match b { font-weight: 550; }
.calc-match .price { margin-left: auto; font-size: var(--fs-sm); white-space: nowrap; }

/* ---- FAQ */
.faq { display: grid; gap: 0; max-width: 780px; margin-inline: auto; }
.faq .acc:last-child { border-bottom: 1px solid var(--line-soft); }
.faq .acc > button { font-size: var(--fs-body); padding-block: var(--s-6); }

/* ------------------------------------------------ 15. AGENCES / CONTACT */

.net { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-12); align-items: start; }
@media (max-width: 1080px) { .net { grid-template-columns: 1fr; } }

/* Carte réseau — positions réelles projetées, pas une carte géographique */
.netmap {
  position: sticky; top: calc(var(--header-h) + 24px);
  border-radius: var(--r-xl); border: 1px solid var(--line-soft);
  background: linear-gradient(165deg, var(--n-50), var(--n-0) 62%);
  padding: var(--s-5); overflow: hidden;
}
@media (max-width: 1080px) { .netmap { position: static; } }
.netmap svg { width: 100%; height: auto; overflow: visible; }
.netmap .grid-line { stroke: var(--n-150); stroke-width: 1; stroke-dasharray: 3 7; }
.netmap .link {
  stroke: var(--a-300); stroke-width: 1.4; fill: none; opacity: .5;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: draw 1.5s var(--e-out) forwards;
}
.netmap .halo { fill: var(--a-500); opacity: .16; transform-origin: center; }
.netmap .pin-hit { fill: transparent; cursor: pointer; }
.netmap .pin { fill: var(--a-500); stroke: #fff; stroke-width: 2.5; transition: r var(--t) var(--e-spring), fill var(--t) var(--e-out); }
.netmap .pin--hub { fill: var(--n-900); }
.netmap .label {
  font-size: 15px; font-weight: 600; fill: var(--ink); letter-spacing: -.3px;
  transition: fill var(--t) var(--e-out);
}
.netmap .sub { font-size: 12.5px; fill: var(--ink-3); }
.netmap g.node { cursor: pointer; }
.netmap g.node:hover .pin, .netmap g.node.is-on .pin { r: 11; fill: var(--warm); }
.netmap g.node:hover .label, .netmap g.node.is-on .label { fill: var(--warm); }
.netmap g.node.is-on .halo { animation: ping 1.6s var(--e-out) infinite; }
@keyframes ping { 0% { transform: scale(.7); opacity: .4; } 70%,100% { transform: scale(2.2); opacity: 0; } }

.ag-list { display: grid; gap: var(--s-3); max-height: none; }
.ag-card {
  border: 1.5px solid var(--line-soft); border-radius: var(--r-lg);
  padding: var(--s-5); background: var(--surface); scroll-margin-top: 120px;
  transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.ag-card:hover { border-color: var(--line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.ag-card.is-on { border-color: var(--a-500); box-shadow: var(--sh-3); }
.ag-card header { display: flex; align-items: flex-start; gap: var(--s-3); }
.ag-card h3 { font-size: var(--fs-body); }
.ag-card .ville {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--a-600);
}
.ag-card .role { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
.ag-rows { display: grid; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.ag-row { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.ag-row svg { flex-shrink: 0; color: var(--ink-3); margin-top: 3px; }
.ag-row a { color: var(--n-700); transition: color var(--t-fast) var(--e-out); }
.ag-row a:hover { color: var(--a-600); }
.ag-row .tels { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ag-row .tels a { font-variant-numeric: tabular-nums; white-space: nowrap; }

.ag-filter { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); }
.ag-filter button {
  padding: 8px 15px; border-radius: var(--r-full); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 600; color: var(--n-700); background: var(--n-0);
  transition: background-color var(--t) var(--e-out), color var(--t) var(--e-out), border-color var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.ag-filter button:hover { border-color: var(--n-300); transform: translateY(-2px); }
.ag-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 400px; gap: var(--s-16); align-items: start; }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-10); } }

/* Cartes de type de demande (contact.html) */
.ct-sujet-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
  border-radius: var(--r-lg); padding: 2px;
  transition: box-shadow 200ms var(--e-out);
}
@media (max-width: 560px) { .ct-sujet-grid { grid-template-columns: 1fr; } }
.ct-sujet-carte {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: var(--s-4); border-radius: var(--r-lg); border: 1.5px solid var(--n-200);
  background: var(--n-0); cursor: pointer;
  transition: border-color 180ms var(--e-out), background-color 180ms var(--e-out),
              transform 200ms var(--e-out), box-shadow 220ms var(--e-out);
}
.ct-sujet-carte:hover { border-color: var(--n-300); transform: translateY(-2px); box-shadow: var(--sh-2); }
.ct-sujet-carte:focus-visible { outline: 2px solid var(--a-500); outline-offset: 2px; }
.ct-sujet-carte[aria-checked="true"] {
  border-color: var(--a-500); background: var(--a-50);
  box-shadow: 0 0 0 1px var(--a-500);
}
.ct-sujet-ic {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--n-50); color: var(--a-600); flex-shrink: 0;
}
.ct-sujet-carte[aria-checked="true"] .ct-sujet-ic { background: var(--a-100); }
.ct-sujet-carte b { font-size: var(--fs-sm); font-weight: 650; letter-spacing: -.01em; }
.ct-sujet-carte small { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.ct-sujet-hint {
  margin-top: var(--s-3); min-height: 1.4em; font-size: var(--fs-xs); color: var(--a-700);
}

.ct-card {
  display: flex; gap: var(--s-4); padding: var(--s-5);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.ct-card + .ct-card { margin-top: var(--s-3); }
.ct-card:hover { border-color: transparent; box-shadow: var(--sh-3); transform: translateY(-3px); }
.ct-card i {
  font-style: normal; flex-shrink: 0; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px; background: var(--a-50); color: var(--a-600);
  transition: transform var(--t) var(--e-spring), background-color var(--t) var(--e-out);
}
.ct-card:hover i { transform: scale(1.08) rotate(-6deg); background: var(--a-100); }
.ct-card b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.ct-card span { font-size: var(--fs-xs); color: var(--ink-2); }
.ct-card a { font-size: var(--fs-sm); color: var(--a-600); font-weight: 550; }

.ct-hours { display: grid; gap: var(--s-2); }
.ct-hours div { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.ct-hours div:last-child { border-bottom: 0; }
.ct-hours b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ct-hours .closed { color: var(--ink-3); font-weight: 500; }

/* ------------------------------------------ 16. FAN SELECTOR (page) */

.fs-layout { display: grid; grid-template-columns: 1fr 400px; gap: var(--s-10); align-items: start; padding-bottom: var(--s-24); }
@media (max-width: 1080px) { .fs-layout { grid-template-columns: 1fr; } }

.fs-block { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.fs-block + .fs-block { margin-top: var(--s-5); }
.fs-block > header {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line-soft); background: var(--n-25);
}
.fs-block > header i {
  font-style: normal; display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 99px;
  background: var(--ink); color: #fff; font-size: var(--fs-xs); font-weight: 700;
}
.fs-block > header h2 { font-size: var(--fs-body); letter-spacing: -.015em; }
.fs-block > header p { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1px; }
.fs-body { padding: var(--s-6); display: grid; gap: var(--s-6); }

.fs-row { display: grid; grid-template-columns: 1fr 148px; gap: var(--s-4); align-items: end; }
@media (max-width: 560px) { .fs-row { grid-template-columns: 1fr; } }
.fs-lab { font-size: var(--fs-sm); font-weight: 600; display: block; margin-bottom: var(--s-2); }
.fs-lab small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }

.fs-num {
  width: 100%; padding: 12px 14px; border-radius: var(--r);
  border: 1.5px solid var(--line); background: var(--n-0);
  font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
  -moz-appearance: textfield;
}
.fs-num::-webkit-outer-spin-button, .fs-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fs-num:hover { border-color: var(--n-300); }
.fs-num:focus { outline: none; border-color: var(--a-500); box-shadow: 0 0 0 4px var(--a-50); }
.fs-unit { position: relative; }
.fs-unit span {
  position: absolute; right: 14px; top: 50%; translate: 0 -50%;
  font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; pointer-events: none;
}
.fs-unit .fs-num { padding-right: 52px; }

.fs-tol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* Bande de tolérance : donne à voir la fenêtre de sélection */
.fs-band { margin-top: var(--s-3); }
.fs-band-track { position: relative; height: 34px; border-radius: var(--r-sm); background: var(--n-100); overflow: hidden; }
.fs-band-fill {
  position: absolute; top: 0; bottom: 0; border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(10,108,255,.18), rgba(34,211,238,.28));
  border-left: 2px solid var(--a-500); border-right: 2px solid var(--cy-500);
  transition: left var(--t) var(--e-out), right var(--t) var(--e-out);
}
.fs-band-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); transition: left var(--t) var(--e-out); }
.fs-band-lab { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* Panneau de résultat */
.fs-out { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 1080px) { .fs-out { position: static; } }
.fs-out-card {
  border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(158deg, var(--n-900), #1a2230 55%, #123252); color: #fff;
}
.fs-out-head { padding: var(--s-6) var(--s-6) var(--s-5); }
.fs-out-head .eyebrow { color: var(--cy-400); }
.fs-big { font-size: 2.5rem; font-weight: 680; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: var(--s-4); }
.fs-big small { font-size: var(--fs-sm); font-weight: 500; opacity: .55; margin-left: 6px; letter-spacing: 0; }
.fs-out-sub { font-size: var(--fs-xs); color: rgba(255,255,255,.6); margin-top: var(--s-2); }

.fs-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.1); }
.fs-kpi { background: #131a24; padding: var(--s-4) var(--s-5); }
.fs-kpi b { display: block; font-size: 1.125rem; font-weight: 660; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.fs-kpi span { font-size: var(--fs-xs); color: rgba(255,255,255,.55); }

.fs-steps-detail { padding: var(--s-5) var(--s-6); background: rgba(0,0,0,.22); }
.fs-steps-detail h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); margin-bottom: var(--s-3); font-weight: 600; }
.fs-calcline { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-xs); padding: 5px 0; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.fs-calcline b { color: #fff; font-weight: 600; }

.fs-hits { margin-top: var(--s-5); }
.fs-hit {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4);
  border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface);
  transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out), transform var(--t) var(--e-out);
  animation: fade-up 380ms var(--e-out) both;
}
.fs-hit + .fs-hit { margin-top: var(--s-2); }
.fs-hit:hover { border-color: transparent; box-shadow: var(--sh-3); transform: translateY(-2px); }
.fs-hit img { width: 52px; height: 52px; object-fit: contain; background: var(--n-25); border-radius: 10px; padding: 4px; flex-shrink: 0; }
.fs-hit b { font-size: var(--fs-sm); font-weight: 550; line-height: 1.3; }
.fs-hit .price { margin-left: auto; white-space: nowrap; font-size: var(--fs-sm); }

.fs-note {
  display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); margin-top: var(--s-5);
  border-radius: var(--r); background: var(--n-25); border: 1px solid var(--line-soft);
}
.fs-note svg { flex-shrink: 0; color: var(--a-500); margin-top: 2px; }
.fs-note p { font-size: var(--fs-xs); color: var(--ink-2); margin: 0; }

/* ------------------------------------------------ 17. FRISE (histoire) */
.tl { position: relative; padding-left: var(--s-10); }
.tl::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--a-500), var(--cy-400) 40%, var(--line));
  border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: var(--s-10); }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: calc(var(--s-10) * -1); top: 6px;
  width: 16px; height: 16px; border-radius: 99px;
  background: var(--n-0); border: 3px solid var(--a-500);
  box-shadow: 0 0 0 5px var(--bg);
  transition: transform var(--t) var(--e-spring), border-color var(--t) var(--e-out);
}
.tl-item:hover .tl-dot { transform: scale(1.25); border-color: var(--cy-500); }
.tl-year {
  display: inline-block; margin-bottom: var(--s-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  color: var(--a-600); font-variant-numeric: tabular-nums;
}
.tl-body h3 { font-size: var(--fs-h3); }
.tl-body p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-3); max-width: 62ch; }
@media (max-width: 560px) { .tl { padding-left: var(--s-8); } .tl-dot { left: calc(var(--s-8) * -1); } }

/* ══════════════════════════════════ 18. COMPARATEUR & WHATSAPP ══════════ */

/* Barre de comparaison : n'apparaît qu'à partir de deux produits. */
.cmp-bar {
  position: fixed; left: 50%; bottom: var(--cmp-bas, var(--s-5)); translate: -50% 0; z-index: 96;
  display: flex; align-items: center; gap: var(--s-5);
  width: min(940px, calc(100vw - 32px));
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: var(--sh-4);
  animation: fade-up 380ms var(--e-spring);
}
@media (max-width: 720px) { .cmp-bar { flex-direction: column; align-items: stretch; gap: var(--s-3); } }

.cmp-bar-list { display: flex; gap: var(--s-2); flex: 1; overflow-x: auto; scrollbar-width: none; }
.cmp-bar-list::-webkit-scrollbar { display: none; }
.cmp-chip {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  padding: 6px 8px 6px 6px; border-radius: var(--r-full);
  background: var(--n-50); border: 1px solid var(--line-soft);
  max-width: 200px;
}
.cmp-chip img { width: 30px; height: 30px; object-fit: contain; background: var(--n-0); border-radius: 99px; padding: 3px; flex-shrink: 0; }
.cmp-chip b {
  font-size: var(--fs-xs); font-weight: 550; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cmp-chip button {
  display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 99px; color: var(--ink-3);
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.cmp-chip button:hover { background: var(--n-150); color: var(--warm); }
.cmp-chip button svg { width: 12px; height: 12px; }
.cmp-bar-go { display: flex; gap: var(--s-2); flex-shrink: 0; }
@media (max-width: 720px) { .cmp-bar-go .btn { flex: 1; } }

/* Le bouton comparateur actif reprend le bleu de la marque. */
.card-quick .js-compare.is-on { color: var(--a-600); background: var(--a-50); }

/* ---------------------------------------------------------------------------
   Cohabitation des éléments ancrés en bas d'écran.

   Trois barres peuvent occuper le bas du viewport — la barre de comparaison,
   la barre d'achat collante (mobile, fiche produit) — face à deux boutons
   flottants, WhatsApp à gauche et le chatbot à droite. Le chatbot est en
   z-index 900 : sans décalage il recouvre le bouton « Ajouter au panier »
   de la barre d'achat, qui est aligné à droite. On remonte donc les deux
   boutons ensemble, jamais l'un sans l'autre.

   --bas-libre est la hauteur réservée par la barre active. Les règles la
   redéfinissent au lieu de recalculer chaque `bottom`, ce qui garde une
   seule source de vérité si les hauteurs changent.
   --------------------------------------------------------------------------- */
:root { --bas-libre: 0px; }

/* Le décalage suit la barre réellement affichée, pas sa simple présence dans
   le DOM : .sticky-buy existe sur toutes les largeurs mais n'est visible
   qu'en dessous de 940px, et seulement une fois la classe .is-on posée. */
body:has(.cmp-bar) { --bas-libre: 84px; }

@media (max-width: 940px) {
  body:has(.sticky-buy.is-on) { --bas-libre: 80px; --cmp-bas: calc(var(--s-5) + 76px); }
  /* Les deux barres en même temps : elles s'empilent. */
  body:has(.cmp-bar):has(.sticky-buy.is-on) { --bas-libre: 156px; }
}

@media (prefers-reduced-motion: reduce) {
  /* portée limitée : voir .mouvement-force en fin de feuille */
  html:not(.mouvement-force) .cmp-bar { animation: none; }
}

/* ------------------------------------------ 19. IMPRESSION / A11Y / MOTION */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* portée limitée : voir .mouvement-force en fin de feuille */
  html:not(.mouvement-force) *,
  html:not(.mouvement-force) *::before,
  html:not(.mouvement-force) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;

    /* Les délais doivent tomber en même temps que les durées.
       Les écraser seules ne suffit pas : une carte animée en `fade-up …
       both` avec un décalage d'escalier garde l'état de départ — donc une
       opacité nulle — pendant toute la durée du délai. L'utilisateur qui
       demande moins d'animation voyait ainsi ses cartes clignoter, et le
       contenu restait invisible pour de bon si l'animation ne démarrait
       jamais (onglet en arrière-plan). */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  html:not(.mouvement-force) [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }

  /* Ceinture et bretelles : ces éléments dépendent de `animation-fill-mode:
     both` pour leur visibilité. Si la timeline n'avance pas, aucune règle
     de durée ne les sauve — seule une opacité forcée le fait. */
  html:not(.mouvement-force) .prod-grid .card,
  html:not(.mouvement-force) .panel,
  html:not(.mouvement-force) .mega-panel.is-on,
  html:not(.mouvement-force) body.intro-done .ah-copy > *,
  html:not(.mouvement-force) body.intro-done .ah-trust {
    opacity: 1 !important;
  }
  @view-transition { navigation: none; }
}

/* ------------------------------------------------------- 20. ASSISTANT (chatbot) */
.cb-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--a-500), var(--cy-500));
  box-shadow: var(--sh-3); border: none; cursor: pointer;
  transition: transform 220ms var(--e-spring), box-shadow 220ms var(--e-out);
}
.cb-fab:hover { transform: scale(1.06); }
.cb-fab:focus-visible { outline: 2px solid var(--a-500); outline-offset: 3px; }
.cb-fab::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--cy-400); opacity: .5;
  animation: cb-pulse 2.6s ease-out infinite;
}
@keyframes cb-pulse { 0% { transform: scale(.85); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }

.cb-panel {
  position: fixed; right: var(--s-5); z-index: 901;
  width: min(384px, calc(100vw - 32px)); height: min(600px, calc(100vh - 120px));
  background: var(--n-0); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  border: 1px solid var(--line-soft); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity 220ms var(--e-out), transform 220ms var(--e-out);
}
.cb-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.cb-panel[hidden] { display: none; }
@media (max-width: 560px) {
  .cb-panel { right: 0; bottom: 0; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; }
  /* Plein écran sous 560 px : le décalage au-dessus du quai n'a plus lieu d'être. */
}

.cb-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); background: var(--n-900); color: #fff;
}
.cb-head b { font-size: .9375rem; font-weight: 650; }
.cb-head small { display: block; font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; line-height: 1.4; }
.cb-head-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cb-icon-btn {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: rgba(255,255,255,.8); transition: background-color 160ms var(--e-out);
}
.cb-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.cb-icon-btn:focus-visible { outline: 2px solid var(--cy-400); outline-offset: 1px; }

.cb-body { flex: 1; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: 12px; }
.cb-msg { max-width: 88%; }
.cb-msg--user { align-self: flex-end; }
.cb-msg--assistant { align-self: flex-start; }
.cb-msg-corps {
  padding: 10px 13px; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.55;
}
.cb-msg--user .cb-msg-corps { background: var(--a-500); color: #fff; border-bottom-right-radius: 4px; }
.cb-msg--assistant .cb-msg-corps { background: var(--n-50); color: var(--ink); border-bottom-left-radius: 4px; }
.cb-msg-corps p { margin: 0 0 6px; }
.cb-msg-corps p:last-child { margin-bottom: 0; }
.cb-msg-corps ul.cb-list { margin: 4px 0 0; padding-left: 18px; }
.cb-msg-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 0 3px; }
.cb-sources { font-size: 10.5px; color: var(--ink-3); }
.cb-feedback { display: inline-flex; gap: 4px; }
.cb-feedback button { font-size: 13px; opacity: .55; transition: opacity 160ms var(--e-out), transform 160ms var(--e-out); }
.cb-feedback button:hover { opacity: 1; transform: scale(1.15); }
.cb-feedback button[aria-pressed="true"] { opacity: 1; }
.cb-feedback button:focus-visible { outline: 2px solid var(--a-500); outline-offset: 2px; }

.cb-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.cb-table th, .cb-table td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.cb-table th { color: var(--ink-3); font-weight: 600; }

.cb-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.cb-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: cb-bounce 1.2s ease-in-out infinite; }
.cb-typing i:nth-child(2) { animation-delay: .15s; }
.cb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cb-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.cb-quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 var(--s-4) var(--s-3); flex-shrink: 0; }
/* La puce existe en lien (aller à une page) et en bouton (relancer
   l'assistant). Le bouton hérite de sa fonte et perd son fond gris natif,
   sinon les deux formes n'ont pas la même allure dans la même rangée. */
.cb-chip {
  padding: 7px 12px; border-radius: var(--r-full); border: 1px solid var(--n-200);
  font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  font-family: inherit; background: transparent; cursor: pointer; line-height: 1.4;
  transition: border-color 160ms var(--e-out), background-color 160ms var(--e-out);
}
.cb-chip:hover { border-color: var(--a-500); background: var(--a-50); color: var(--a-700); }
.cb-chip:focus-visible { outline: 2px solid var(--a-500); outline-offset: 2px; }

.cb-form { display: flex; gap: 8px; padding: var(--s-3) var(--s-4) var(--s-4); flex-shrink: 0; border-top: 1px solid var(--line-soft); }
.cb-form input {
  flex: 1; padding: 11px 14px; border-radius: var(--r-full); border: 1.5px solid var(--n-200);
  font-size: var(--fs-sm); background: var(--n-0); color: var(--ink);
}
.cb-form input:focus-visible { outline: 2px solid var(--a-500); outline-offset: 1px; }
.cb-send {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--a-500); color: #fff;
  transition: background-color 160ms var(--e-out);
}
.cb-send:hover { background: var(--a-600); }
.cb-send:focus-visible { outline: 2px solid var(--a-700); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  /* portée limitée : voir .mouvement-force en fin de feuille */
  html:not(.mouvement-force) .cb-fab::before { animation: none; display: none; }
  html:not(.mouvement-force) .cb-panel { transition: none; }
  html:not(.mouvement-force) .cb-typing i { animation: none; opacity: 1; }
}

/* ===========================================================================
   14. CONFORT TACTILE

   Ciblé sur `pointer: coarse` plutôt que sur une largeur : c'est le doigt qui
   impose la taille minimale, pas la taille de l'écran. Une petite fenêtre de
   navigateur sur un ordinateur garde donc ses contrôles compacts, tandis
   qu'une tablette large reçoit bien les cibles élargies.

   44px est le minimum recommandé par les guides d'accessibilité Apple et
   WCAG 2.2 (critère 2.5.8, qui pose 24px comme plancher absolu et 44px comme
   confort). Les liens en ligne dans un paragraphe sont volontairement exclus :
   les agrandir casserait l'interlignage du texte courant.
   =========================================================================== */
@media (pointer: coarse) {

  /* Contrôles à icône : le carré visible reste identique, seule la zone
     cliquable s'étend, via un pseudo-élément qui ne déplace rien. */
  .icon-btn, .socials a, .card-quick .icon-btn {
    position: relative;
  }
  .icon-btn::after, .socials a::after, .card-quick .icon-btn::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
    border-radius: inherit;
  }

  /* Le bouton de fermeture de la recherche était le plus étroit (29px). */
  .js-search-close { width: 44px; }

  /* Liens de colonnes du pied de page : 22px de haut sans marge de manœuvre.
     On écarte les lignes plutôt que d'agrandir la police, pour ne pas
     déséquilibrer la hiérarchie typographique du footer. */
  .footer-grid ul li + li { margin-top: 2px; }
  .footer-grid ul a {
    display: block; padding-block: 9px;
  }

  /* Mentions légales et liens de bas de page. */
  .footer-bottom a, .foot-legal a { display: inline-block; padding-block: 10px; }

  /* Villes du réseau sur l'accueil. */
  .villes .ville, a.ville { min-height: 44px; display: inline-flex; align-items: center; }

  /* Les états de survol n'existent pas au doigt : ils restent bloqués après
     le tap. On neutralise les translations de survol, en gardant les états
     actifs qui, eux, donnent un vrai retour tactile. */
  .icon-btn:hover, .socials a:hover, .card:hover, .cat-card:hover {
    transform: none;
  }
  .btn:active, .icon-btn:active { transform: scale(.97); }
}

/* Position basse des boutons flottants.

   Volontairement en fin de feuille : à spécificité égale c'est l'ordre qui
   tranche, et les blocs .cb-fab / .cb-panel plus haut fixent un `bottom`
   littéral qui écraserait ces règles si elles étaient déclarées avant eux. */
.quai        { bottom: calc(var(--s-5) + var(--bas-libre)); }
/* Le panneau se pose au-dessus du quai. 106 px est la hauteur du quai à deux
   segments — assistant et WhatsApp ; le retour-haut se replie pendant la
   discussion (règle ci-dessous), de sorte que cette hauteur ne varie pas et
   que le panneau ne saute pas au défilement. */
.cb-panel    { bottom: calc(var(--s-5) + 116px + var(--bas-libre)); }

/* Pendant qu'on discute, remonter la page n'est pas l'action attendue : le
   segment se replie et laisse le panneau tranquille.

   Le test porte sur l'attribut `hidden`, posé et retiré de façon synchrone à
   l'ouverture, et non sur la classe `is-open` qui n'arrive qu'à l'image
   suivante : sinon le panneau chevauche le quai pendant cette image, et
   indéfiniment si les animations ne tournent pas. */
body:has(.cb-panel:not([hidden])) .quai-btn--haut {
  height: 0; opacity: 0; pointer-events: none; margin-bottom: -1px;
}

/* Le panneau de discussion occupe tout l'écran sous 560px : il doit alors
   ignorer le décalage, sinon il se retrouve poussé hors du viewport. */
@media (max-width: 560px) {
  .cb-panel { bottom: 0; }
}

/* ===========================================================================
   15. VOIX TYPOGRAPHIQUES

   Trois registres :

   — Le titrage prend Sora, grotesque géométrique aux terminaisons franches.
     C'est elle qui donne le ton technique et net du kit FROST.
   — Le texte courant prend Inter, qui ne revendique rien.
   — Tout ce qui se mesure passe en IBM Plex Mono : références, prix, unités,
     compteurs. Dans ce métier les chiffres s'alignent en colonnes sur les
     fiches constructeur ; la chasse fixe est la convention du domaine, et
     c'est aussi ce qui distingue POWERS d'un site de restaurant.
   =========================================================================== */
h1, h2, h3, .titre-large {
  font-family: var(--font-display);
  /* Sora n'a pas d'axe variable exploitable : son caractère tient au dessin
     des terminaisons, pas à un réglage. On se contente donc de la graisse et
     d'un interlettrage serré. */
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-weight: 700; letter-spacing: -0.028em; }
h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }

/* Chiffres et unités en chasse fixe. `tabular-nums` évite que les colonnes de
   prix dansent quand une valeur change — un défaut visible sur le panier. */
.price, .cpt-chiffre b, .adm-table td, .spec-table td,
[data-count], .count, .fs2-motif, .badge {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}

/* Libellés de structure : la chasse fixe les rend lisibles à petite taille. */
.eyebrow, .kicker, .sf-kicker, .cpt-sous-titre, .badge, .adm-table th,
.spec-table th, .cpt-item small {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.btn { font-family: var(--font); font-weight: 600; letter-spacing: -0.005em; }

/* ===========================================================================
   MATIÈRE — transposition claire de FROST UI

   Le kit du site Khalil Service Climatisation tient sur quatre effets :
   le verre dépoli à arête lumineuse, le halo qui suit le curseur, la grille
   technique, et les dégradés glace. Ils sont repris ici, mais retournés :
   le kit les pose sur un fond presque noir, POWERS les pose sur de la glace
   claire.

   RETOURNER UN EFFET DE VERRE N'EST PAS EN CHANGER L'OPACITÉ.
   Sur fond sombre, une carte de verre s'ÉCLAIRCIT (blanc translucide) et son
   arête brille en clair. Sur fond clair, la même recette donne une carte
   invisible. Il faut inverser le rapport : la carte reste blanche mais
   c'est l'OMBRE qui la détache, et l'arête lumineuse devient une arête
   COLORÉE — la glace — sans quoi il ne reste qu'un rectangle blanc sur blanc.
   =========================================================================== */

:root {
  --e-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --e-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Deux couches : une ombre de contact serrée, une ombre portée large.
     Une seule ombre floue donne l'objet qui flotte ; deux le posent. */
  --ombre: 0 1px 2px rgba(11, 22, 34, .05),
           0 12px 28px -12px rgba(11, 22, 34, .14);
  --ombre-levee: 0 2px 4px rgba(11, 22, 34, .06),
                 0 34px 62px -26px rgba(11, 22, 34, .26),
                 0 0 46px -18px rgba(56, 189, 248, .3);
}

/* Grille technique : la trame du kit, en glace très pâle, masquée en cercle
   pour qu'elle s'éteigne sur les bords au lieu de s'arrêter net. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(56, 189, 248, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .085) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 22%, #000 8%, transparent 66%);
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 8%, transparent 66%);
}

/* Aurore : la nappe de lumière du kit. En clair elle ne peut pas éclaircir —
   le fond est déjà clair — donc elle TEINTE vers la glace. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    /* Deux nappes froides en haut, une chaude en bas : la page part de la
       glace et se rechauffe vers le pied, au lieu d'etre bleue de bout en
       bout. La rouge est la plus discrete des trois — posee a plein, elle
       donnerait une page d'alerte. */
    radial-gradient(60% 44% at 18% -8%, rgba(56, 189, 248, .16), transparent 64%),
    radial-gradient(52% 40% at 88% 4%, rgba(34, 211, 238, .12), transparent 62%),
    radial-gradient(70% 46% at 82% 104%, rgba(248, 16, 32, .07), transparent 66%);
}

/* ── Le verre ───────────────────────────────────────────────────────────────
   Les surfaces du site reprennent la recette du kit, adaptée au fond clair. */
.card, .cat-card, .porte-carte, .cpt-bloc, .adm-bloc, .cp-scene, .marques {
  position: relative;
  /* La seconde teinte du dégradé reprenait l'ancien fond glacé (#f2f7fb),
     écrit en dur. Le fond de page ayant viré au chaud, elle jurait avec lui :
     une carte bleutée posée sur un papier rose. Elle suit maintenant. */
  background: linear-gradient(155deg,
    rgba(255, 255, 255, .94), rgba(250, 243, 242, .84));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--ombre);
  transition: box-shadow 480ms var(--e-expo), transform 480ms var(--e-expo);
}

/* L'arête lumineuse : un filet dégradé posé sur le bord, découpé au masque.
   C'est ce détail qui fait « carte premium » dans le kit ; sans lui il ne
   reste qu'une boîte blanche. */
.card::before, .cat-card::before, .porte-carte::before, .cp-scene::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(56, 189, 248, .55), transparent 36%,
    transparent 64%, rgba(34, 211, 238, .34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.card:hover, .cat-card:hover, .marques:hover {
  box-shadow: var(--ombre-levee);
  transform: translateY(-4px);
}

/* Halo au curseur. Les variables `--mv-x` / `--mv-y` sont écrites par
   assets/js/powers-mv.js, qui vise la classe `.mv-halo`. On reprend SES noms
   plutôt que d'en inventer : ce fichier vient d'une autre session et le
   modifier ferait diverger deux copies de la même idée.

   Sans le script — page qui ne le charge pas, pointeur tactile, mouvement
   réduit — le halo reste centré. C'est un repli acceptable : la carte garde
   son ombre et son arête. */
.card, .cat-card, .cp-scene { isolation: isolate; overflow: hidden; }
.card::after, .cat-card::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  z-index: 0; opacity: 0;
  transition: opacity 450ms ease;
  background: radial-gradient(320px circle at var(--mv-x, 50%) var(--mv-y, 50%),
    rgba(56, 189, 248, .16), transparent 68%);
  pointer-events: none;
}
.card:hover::after, .cat-card:hover::after { opacity: 1; }

/* Le bouton principal reprend le dégradé du kit — mais dans l'indigo de la
   maison, pas dans la glace : c'est une action POWERS, pas de l'ambiance. */
.btn--accent {
  background: linear-gradient(135deg, var(--ice-400), var(--ice-600));
  border-color: var(--ice-600);
  color: #04121c;
  position: relative; overflow: hidden;
}
/* Le reflet qui balaie au survol, signature des boutons du kit. */
.btn--accent::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -55%;
  width: 45%;
  background: linear-gradient(105deg, transparent,
    rgba(255, 255, 255, .32), transparent);
  transform: skewX(-18deg);
  transition: left 720ms var(--e-expo);
  pointer-events: none;
}
.btn--accent:hover::after { left: 145%; }

@media (prefers-reduced-motion: reduce) {
  html:not(.mouvement-force) .card,
  html:not(.mouvement-force) .cat-card,
  html:not(.mouvement-force) .marques,
  html:not(.mouvement-force) .btn--accent::after { transition: none; }
  html:not(.mouvement-force) .card:hover,
  html:not(.mouvement-force) .cat-card:hover,
  html:not(.mouvement-force) .marques:hover { transform: none; }
}

/* ===========================================================================
   16. L'AMBIANCE SUR TOUTES LES PAGES

   L'accueil portait seul les signatures du kit : aurores, dégradé de titre,
   libellés de section. Les seize autres pages avaient bien la palette, les
   polices et le verre — mais aucune atmosphère, et le passage de l'accueil au
   catalogue faisait chuter la page dans un registre plus plat.

   Ces règles rendent le vocabulaire disponible PARTOUT. Elles ne s'appliquent
   d'elles-mêmes qu'à deux choses : le fil d'Ariane, présent sur toutes les
   pages internes, et le premier titre. Le reste attend qu'on pose la classe.
   =========================================================================== */

/* Le dégradé de titre, disponible sur toutes les pages. */
.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;
}

/* Les aurores, disponibles partout. Sur les pages internes elles sont plus
   discrètes que sur l'accueil : ce sont des pages de travail — catalogue,
   panier, compte — où l'ambiance ne doit pas disputer la lisibilité. */
.aurora {
  position: absolute; border-radius: 50%; max-width: 100vw;
  filter: blur(84px); pointer-events: none; z-index: 0;
}

/* Nappe d'ambiance posée en haut des pages internes, sous le contenu.
   `body::after` porte déjà le halo global ; celle-ci ajoute la teinte du
   kit derrière le fil d'Ariane, là où commence la lecture. */
/* La nappe d'ambiance des pages internes. Le selecteur visait
   `:not(.theme-frost)` du temps ou seul l'accueil portait ce theme ; il
   est desormais sur toutes les pages, et c'est donc la PAGE qu'il faut
   distinguer — l'accueil a sa propre composition, elle n'a pas besoin de
   cette nappe par-dessus. */
body:not([data-nav="home"]) main::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 420px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 100% at 14% 0%, rgba(56, 189, 248, .13), transparent 66%),
    radial-gradient(44% 96% at 86% 6%, rgba(34, 211, 238, .1), transparent 64%);
}
body:not([data-nav="home"]) main { position: relative; }

/* Le fil d'Ariane prend le vocabulaire du kit : chasse fixe, lettres
   espacées, la page courante en glace. */
.crumbs {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em;
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--ice-600); }

/* Le premier titre de chaque page interne reçoit la même respiration que
   ceux de l'accueil. */
main > .wrap > h1, .pdp h1, .porte-carte h1 {
  letter-spacing: -.028em;
}

/* Un liseré chaud ferme le pied de page, comme la bande d'appel de
   l'accueil : c'est le même geste, il tient le site ensemble. */
.footer { border-top: 2px solid var(--f-heat); }

/* ===========================================================================
   16. LE QUAI — les actions flottantes, réunies

   AVANT : WhatsApp en pastille verte en bas à gauche, le chatbot en pastille
   dégradée en bas à droite, le retour-haut en cercle blanc par-dessus le
   chatbot. Trois tailles (54, 56, 44 px), trois langages graphiques, deux
   qui se recouvraient, et le regard partagé entre deux coins de l'écran.

   APRÈS : un seul quai à droite. Même largeur pour tous les segments, une
   bordure commune, un fond commun. Les couleurs de marque ne servent qu'à
   identifier — le vert de WhatsApp, l'indigo de la maison pour l'assistant —
   et n'habillent que l'icône, pas tout le bouton.

   L'ordre suit l'intention : l'assistant répond tout de suite, WhatsApp
   engage une conversation humaine, le retour-haut n'apparaît qu'une fois la
   page défilée.
   =========================================================================== */
.quai {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 95;
  display: flex; flex-direction: column-reverse; align-items: stretch;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(12, 17, 22, .12);
}

.quai-btn {
  position: relative;
  width: 52px; height: 50px;
  display: grid; place-items: center;
  background: var(--n-0); color: var(--ink-2);
  border: 0; cursor: pointer;
  transition: background-color 200ms var(--e-out), color 200ms var(--e-out);
}
.quai-btn:hover { background: var(--n-50); color: var(--ink); }
.quai-btn:focus-visible {
  outline: 2px solid var(--a-500); outline-offset: -2px; z-index: 1;
}

/* Le libellé n'apparaît qu'au survol, en infobulle posée à gauche : élargir
   le quai lui-même déplacerait les autres segments. */
.quai-lib {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 6px 11px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--n-0);
  font-family: var(--font-mono); font-size: .72rem; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--e-out), transform 260ms var(--e-out);
}
.quai-btn:hover .quai-lib,
.quai-btn:focus-visible .quai-lib { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Identification par l'icône seule. */
.quai-btn--wa:hover   { color: #25d366; }
.quai-btn--chat       { color: var(--a-600); }
.quai-btn--chat:hover { color: var(--a-700); }

/* Le retour-haut se replie tant qu'on est en haut de page : le quai ne doit
   pas proposer une action sans objet. La hauteur s'anime, donc le quai se
   raccourcit vraiment au lieu de garder un trou. */
.quai-btn--haut {
  height: 0; opacity: 0; pointer-events: none;
  /* La marge négative avale l'interstice de 1 px du `gap` : sans elle, le
     bouton replié laisse un liseré visible en haut du quai, qui ressemble à
     un défaut d'alignement plutôt qu'à une bordure. */
  margin-bottom: -1px;
  transition: height 300ms var(--e-out), opacity 200ms var(--e-out),
              margin-bottom 300ms var(--e-out);
}
.quai-btn--haut.is-on { height: 50px; opacity: 1; pointer-events: auto; margin-bottom: 0; }

/* Le chatbot est un bouton du quai comme les autres : on annule tout ce que
   sa pastille flottante posait — position, taille, dégradé, halo. */
.quai-btn--chat.cb-fab {
  position: static; width: 52px; height: 50px; border-radius: 0;
  background: var(--n-0); box-shadow: none;
}
.quai-btn--chat.cb-fab:hover { background: var(--n-50); transform: none; }
.quai-btn--chat.cb-fab::before { content: none; }
.quai-btn--chat.cb-fab svg { width: 21px; height: 21px; }


/* Sous 560px, le quai debout (retour-haut, animations, assistant, WhatsApp
   empilés) prenait jusqu'à quatre segments de haut — un quart d'écran de
   téléphone en permanence. Deux changements :

   1. Les animations rejoignent le pied de page, où le réglage existe déjà :
      il n'a pas sa place dans le geste du pouce.
   2. Le quai devient une pilule HORIZONTALE de deux icônes (assistant,
      WhatsApp) — les deux seuls canaux qui engagent une vraie conversation.
      Le retour-haut, lui, s'en détache : il flotte seul en bas à gauche et
      n'apparaît qu'après défilement, comme avant, mais sans peser sur la
      colonne de contact quand les deux sont visibles à la fois. */
@media (max-width: 560px) {
  .quai {
    right: var(--s-4); bottom: var(--s-4);
    flex-direction: row; border-radius: var(--r-full);
  }
  .quai-btn, .quai-btn--chat.cb-fab { width: 48px; height: 46px; }
  .quai-btn--mvt { display: none; }
  /* Au doigt, l'infobulle ne se déclenche jamais utilement. */
  .quai-lib { display: none; }

  .quai-btn--haut {
    position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 95;
    width: 46px; height: 46px; margin-bottom: 0;
    border-radius: var(--r-full); background: var(--n-0); color: var(--ink-2);
    box-shadow: 0 10px 30px rgba(12, 17, 22, .14);
    opacity: 0; transform: scale(.5); pointer-events: none;
    transition: opacity 220ms var(--e-out), transform 220ms var(--e-spring);
  }
  .quai-btn--haut.is-on { opacity: 1; transform: scale(1); pointer-events: auto; }

  /* Le quai se retire pendant qu'on descend.

     Mesure avant correction : 99 x 48 px fixes en bas a droite d'un ecran de
     375 x 812 — la ou tombent le prix et le bouton des cartes produit, qu'il
     recouvrait en permanence. Un bouton flottant ne peut pas ne rien cacher ;
     il peut en revanche s'effacer au moment ou l'on parcourt, et revenir
     quand on cherche a agir. C'est la regle deja appliquee a l'en-tete.

     Le repli ne vaut que sous 560 px : au-dessus, le quai est dans la marge
     et ne recouvre rien. */
  .quai {
    transition: transform 260ms var(--e-out), opacity 200ms var(--e-out);
  }
  .quai.est-replie,
  .quai.est-au-pied {
    transform: translateY(calc(100% + var(--s-4)));
    opacity: 0; pointer-events: none;
  }
  /* Et en bas de document, on lui reserve sa place : sans cela la derniere
     ligne du pied de page reste sous le quai, hors d'atteinte du doigt. */
  .footer { padding-bottom: calc(var(--s-8) + 56px); }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  /* Portee limitee, comme partout ailleurs dans cette feuille. */
  html:not(.mouvement-force) .quai { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* portée limitée : voir .mouvement-force en fin de feuille */
  html:not(.mouvement-force) .quai-btn,
  html:not(.mouvement-force) .quai-lib,
  html:not(.mouvement-force) .quai-btn--haut { transition: none; }
}

/* ===========================================================================
   17. PRÉFÉRENCE DE MOUVEMENT

   Les blocs `@media (prefers-reduced-motion: reduce)` de toutes les feuilles
   sont gardés par `html:not(.mouvement-force)`. Le système reste donc maître
   par défaut, mais le visiteur peut rouvrir le mouvement depuis le pied de
   page — sans quoi un réglage Windows posé une fois et oublié fige le site
   entier sans que rien ne l'explique à l'écran.

   Une première tentative rétablissait les durées avec `revert`, ce qui ne
   suffisait pas : les règles coupées posent `animation: none`, donc le NOM de
   l'animation était perdu et aucune durée ne pouvait le ramener. Restreindre
   la portée à la source est la seule façon correcte.
   =========================================================================== */

/* L'inverse : le visiteur a coupé le mouvement alors que le système ne le
   demandait pas. On applique le même traitement que la requête média. */
html.mouvement-coupe *,
html.mouvement-coupe *::before,
html.mouvement-coupe *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  animation-delay: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html.mouvement-coupe [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Réglage du mouvement, dans le pied de page. Discret : c'est une préférence
   d'accessibilité, pas une fonctionnalité à vendre. La pastille s'allume
   quand les animations tournent. */
.js-mouvement {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 8px;
  background: transparent; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-full);
  color: inherit; font: inherit; font-size: var(--fs-xs);
  transition: border-color 180ms var(--e-out), color 180ms var(--e-out);
}
.js-mouvement:hover { border-color: rgba(255,255,255,.34); color: #fff; }
.js-mouvement:focus-visible { outline: 2px solid var(--a-300); outline-offset: 2px; }
.js-mouvement-pastille {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--n-500);
  transition: background-color 200ms var(--e-out), box-shadow 200ms var(--e-out);
}
.js-mouvement.est-on .js-mouvement-pastille {
  background: var(--cy-400);
  box-shadow: 0 0 0 3px rgba(43,196,189,.22);
}

/* ===========================================================================
   18. LE SIGNALEMENT DE MOUVEMENT

   Quand le système demande moins d'animations, le site obéit — et paraît
   alors figé sans que rien ne l'explique. Ce bandeau le dit, une seule fois,
   et propose de rétablir le mouvement pour ce site uniquement.

   Il est posé en bas à gauche : le quai occupe la droite, et un bandeau
   pleine largeur pour une préférence secondaire serait disproportionné.
   =========================================================================== */
.mvt-avis {
  position: fixed; left: var(--s-5); bottom: var(--s-5); z-index: 96;
  display: flex; align-items: center; gap: var(--s-4);
  max-width: min(520px, calc(100vw - 40px));
  padding: var(--s-4) var(--s-5);
  background: var(--n-0);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(12,17,22,.14);
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5;
  opacity: 0; transform: translateY(10px);
  transition: opacity 300ms var(--e-out), transform 300ms var(--e-out);
}
.mvt-avis.est-on { opacity: 1; transform: none; }
.mvt-avis span { flex: 1; min-width: 0; }
.mvt-avis .btn { flex-shrink: 0; }
.mvt-avis-fermer {
  flex-shrink: 0; width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--ink-3);
  border-radius: var(--r-full);
}
.mvt-avis-fermer:hover { background: var(--n-50); color: var(--ink); }
.mvt-avis-fermer:focus-visible { outline: 2px solid var(--a-500); outline-offset: 2px; }

/* Ce bandeau doit s'afficher même quand le mouvement est coupé : c'est lui
   qui explique pourquoi. On force donc sa transition. */
@media (prefers-reduced-motion: reduce) {
  .mvt-avis { transition: opacity 300ms ease !important; transform: none; }
}

/* Le texte partageait sa ligne avec le bouton et la croix de fermeture :
   sur un téléphone, il ne restait qu'une lucarne de quelques pixels pour la
   phrase, qui se repliait un mot par ligne sur toute la hauteur de l'écran.
   Empiler — texte, puis actions — au lieu de serrer, régle ça d'un coup. */
@media (max-width: 620px) {
  .mvt-avis {
    left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
    flex-flow: column wrap; align-items: stretch; gap: var(--s-3);
    padding-right: var(--s-8);
  }
  .mvt-avis span { flex: none; }
  .mvt-avis .btn { width: 100%; }
  /* La croix reste en coin plutôt que de prendre sa propre ligne — sinon
     un bouton solitaire, sans rien à sa droite, semble flotter sans raison. */
  .mvt-avis-fermer { position: absolute; top: var(--s-3); right: var(--s-3); }
}

/* Le segment « mouvement » du quai. Il porte l'état : trait plein quand les
   animations tournent, trait barré quand elles sont coupées. */
.quai-btn--mvt[aria-pressed="true"]  { color: var(--a-600); }
.quai-btn--mvt[aria-pressed="false"] { color: var(--ink-3); }

/* Le lien du catalogue en PDF. Une bordure au lieu d'un fond : c'est une
   action secondaire dans la barre, elle ne doit pas concurrencer les
   rubriques de navigation. La flèche descendante dit qu'on télécharge. */
.nav-link--doc {
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}
.nav-link--doc:hover { border-color: var(--a-500); background: var(--a-50); color: var(--a-700); }
.nav-link--doc svg { flex: none; }


/* ===========================================================================
   LE ROUGE, HORS ACCUEIL

   L'accueil pose la regle (voir le bloc « LE ROUGE » dans accueil-frost.css) :
   le rouge de POWERS Heat marque ce qui est chaud, ce qui est actif, ce qui
   attend une action. Jamais un aplat, jamais un fond.

   Il ne vivait que sur l'accueil et sur le filet du pied de page. Les six
   regles ci-dessous l'etendent aux dix-sept autres pages, sur des elements qui
   portent deja ce sens — aucune n'est decorative.
   =========================================================================== */

/* 7 — Les pastilles de compteur : panier, favoris, devis, comparateur. Elles
       disent « quelque chose vous attend ». En bleu, posees sur des icones
       bleues, elles se fondaient dans la barre au lieu de s'en detacher. */
.icon-btn .count { background: var(--f-heat); }

/* 8 — Le coeur d'un favori actif. Convention universelle, et c'est bien un
       etat : ce produit est retenu. */
.card-quick .icon-btn.is-on { color: var(--f-heat); }

/* 9 — La barre de progression de lecture, en tete des articles. C'est le seul
       element qui bouge sur la page ; le rouge le fait exister. */
.readbar { background: linear-gradient(90deg, var(--f-heat), #ff6b4a); }

/* 10 — La famille Chauffage, partout et plus seulement sur l'accueil : dans le
        mega-menu comme sur les cartes de famille. Le code couleur du site dit
        que le rouge est le chaud — autant le tenir sur tout le site. */
.mega-fam[data-fam="74"][aria-selected="true"],
.card-cat[href*="cat=74"]:hover { color: var(--f-heat); }
.mega-fam[data-fam="74"][aria-selected="true"] { box-shadow: inset 2px 0 0 var(--f-heat); }

/* 11 — Le badge « Nouveau » du mega-menu. Une nouveaute est une actualite
        chaude ; en bleu pale elle passait inapercue au milieu du bleu. */
.badge--accent { background: color-mix(in srgb, var(--f-heat) 9%, var(--n-0));
                 color: var(--f-heat); }

/* 12 — Le prix barre d'une promotion. Le prix courant reste neutre — c'est lui
        qu'on paie — mais l'ancien montant se signale comme un ecart. */
.price-old { color: color-mix(in srgb, var(--f-heat) 62%, var(--ink-3)); }