/*
 * Système de design — verre liquide, version claire.
 *
 * Trois couches : un fond très clair, des halos pastel qui dérivent dessous,
 * puis des panneaux de verre dépoli. Sur fond clair le verre se teinte en
 * BLANC et la profondeur vient des ombres portées — à l'inverse du sombre, où
 * elle venait des reflets d'arête.
 */

@import url('tokens.css?v=5a57c7dc910af91d');

:root {
  /* `light dark` annonce que la page sait faire les deux : le navigateur peint
     alors correctement les zones hors contenu (rebond de defilement, barres,
     controles de formulaire). Chaque theme fixe ensuite la sienne. */
  color-scheme: light;

  /* ---- Base ----
     Le papier est descendu de 97,5 % a 93,8 % de clarte, et il est legerement
     chromatique. Ce n'est pas un caprice : tant que le fond etait a 97,5, une
     carte de verre composait a 99,1 — elle etait donc PLUS CLAIRE que la page.
     Toutes les surfaces tenaient dans deux points de clarte, l'oeil ne trouvait
     aucun ton moyen ou se poser, et une page sans valeur intermediaire se lit
     comme surexposee quelle que soit la clarte du papier. */
  --bg: oklch(93.8% 0.012 84);
  --bg-deep: oklch(90.2% 0.016 80);

  --fg: oklch(23% 0.024 262);
  --fg-soft: oklch(41% 0.02 262);
  --fg-faint: oklch(50% 0.018 262);

  --amber: oklch(50% 0.155 48);
  --amber-deep: oklch(43% 0.15 42);
  --up: oklch(46% 0.15 155);
  --down: oklch(50% 0.2 25);
  --warn: oklch(56% 0.15 70);

  /* ---- Verre ----
     Quasi neutre (C=0.005) sur un fond chromatique (C=0.012) : la lame se
     detache par la chroma autant que par la clarte. Separation carte/fond
     portee a 3,7 points, amplitude totale des surfaces a 7,5 points. */
  --glass-1: oklch(98.2% 0.004 84 / 0.62);
  --glass-2: oklch(98.8% 0.003 84 / 0.74);
  --glass-3: oklch(99.4% 0.002 84 / 0.86);
  --glass-sunk: oklch(88.5% 0.012 84 / 0.5);

  /* Sur fond clair, une lame se dessine par un CONTOUR SOMBRE plus un lisere
     clair en haut. Un contour blanc sur une carte blanche posee sur un fond
     presque blanc ne se detachait que de 0,8 point : autant dire rien. */
  --glass-hairline: oklch(32% 0.02 262 / 0.16);
  --glass-edge: oklch(100% 0 0 / 0.92);
  --glass-edge-soft: oklch(32% 0.02 262 / 0.12);

  --blur-1: 16px;
  --blur-2: 28px;
  --blur-3: 44px;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --section-gap: clamp(5rem, 3rem + 8vw, 11rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-1: 240ms;
  --dur-2: 480ms;
  --dur-3: 900ms;

  /* Derives de l'ambre, pour ne plus repeter la meme couleur en dur. */
  --amber-bord: oklch(52% 0.16 50 / 0.32);
  --amber-voile: oklch(52% 0.16 50 / 0.1);
  --topbar-bg: oklch(93.8% 0.012 84 / 0.88);

  /* Halos : trois teintes ANALOGUES serrees autour de l'ambre, plus une
     vignette neutre. Les quatre teintes precedentes (62 / 285 / 190 / 24)
     etaient reparties presque regulierement sur la roue : la ou trois taches
     se recouvraient la chroma s'annulait — un gris-cyan mort — et la ou elles
     ne se recouvraient pas on lisait quatre pastels distincts. La page
     produisait donc l'arc-en-ciel ET la boue grise. Avec trois analogues, la
     chroma se RENFORCE au recouvrement au lieu de s'annuler. */
  --halo-1: oklch(97.5% 0.115 46 / 0.8);
  --halo-2: oklch(96% 0.095 76 / 0.72);
  --halo-3: oklch(94.5% 0.1 30 / 0.6);
  /* Le froid n'est plus une couleur mais une ombre : une tache violette
     annulait la chroma des autres, une vignette neutre creuse le coin. */
  --halo-vignette: oklch(62% 0.03 262 / 0.16);
  --halo-opacite: 0.9;
  --grain-mode: overlay;
  --grain-opacite: 0.29;

  /* Ombres portees : c'est la profondeur du theme clair. */
  --ombre-1:
    0 1px 2px oklch(30% 0.03 265 / 0.08),
    0 8px 24px -8px oklch(30% 0.03 265 / 0.14),
    0 24px 56px -24px oklch(30% 0.04 265 / 0.18),
    inset 0 1px 0 oklch(100% 0 0 / 0.75);
  --ombre-2:
    0 1px 2px oklch(30% 0.03 265 / 0.09),
    0 12px 32px -8px oklch(30% 0.03 265 / 0.16),
    0 36px 76px -28px oklch(30% 0.04 265 / 0.22),
    inset 0 1px 0 oklch(100% 0 0 / 0.9);
  --ombre-creux:
    inset 0 1px 3px oklch(30% 0.03 265 / 0.16),
    inset 0 -1px 0 oklch(100% 0 0 / 0.55);
  --ombre-flottante:
    0 2px 4px oklch(30% 0.03 265 / 0.09),
    0 18px 44px -10px oklch(30% 0.03 265 / 0.2),
    0 48px 96px -30px oklch(30% 0.04 265 / 0.26),
    inset 0 1px 0 oklch(100% 0 0 / 0.9);

  --trame: oklch(32% 0.02 262 / 0.05);
  --selection: oklch(84% 0.13 62 / 0.45);
  /* Encre posee SUR de l'ambre : elle doit rester claire dans les deux themes,
     puisque le bouton, lui, reste ambre. */
  --sur-amber: oklch(99% 0.01 80);
  --champ-fond: oklch(100% 0 0 / 0.7);
  --champ-bord: oklch(32% 0.02 262 / 0.18);
  /* Replis quand le flou d'arriere-plan n'est pas disponible : la surface
     devient opaque, et elle doit alors suivre le theme. */
  --opaque-1: oklch(97.5% 0.006 84);
  --opaque-2: oklch(99.5% 0.003 84);
  --opaque-3: oklch(89% 0.012 84);
  /* Voile sombre : l'arriere-plan des surfaces posees SUR une image (legendes
     de galerie, fond de la visionneuse). Il reste sombre dans les deux themes,
     la photo dessous ne changeant pas. */
  --voile-sombre: oklch(20% 0.02 265 / 0.62);

  /* Jetons des schemas dessines en JavaScript. Ils ne peuvent pas se contenter
     de --fg et --glass-* : un trait de schema doit rester lisible sur une
     surface de verre, ou le contraste disponible est plus faible que sur le
     fond nu. */
  --schema-trait: oklch(72% 0.014 262);
  --schema-surface: oklch(100% 0 0 / 0.78);
  --schema-creux: oklch(100% 0 0 / 0.55);
  --schema-inactif: oklch(76% 0.012 262);
  --schema-en-cours: oklch(62% 0.16 72);
}

/*
 * Thème sombre — pensé pour lui-même, pas obtenu en inversant le clair.
 *
 * Parti pris : encre bleue nocturne, et l'ambre comme unique source de lumiere.
 * Les deux mecanismes du clair sont conserves mais leurs ROLES PERMUTENT :
 * ici le lisere clair passe en haut et l'ombre en bas, alors qu'en clair c'est
 * un contour sombre qui porte la separation. C'est cette permutation qui rend
 * le sombre intentionnel.
 *
 * Le verre est TEINTE SOMBRE, jamais du blanc a faible alpha : du blanc a 0.10
 * sur ce fond ne conserve que C=0.018 de chroma — le fameux lait gris — la ou
 * un verre teinte a luminance egale en garde 0.034, soit pres du double.
 *
 * L'attribut est pose par /assets/js/theme.js avant le premier rendu.
 */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: oklch(19.5% 0.022 264);
  --bg-deep: oklch(15.5% 0.02 266);

  --fg: oklch(93% 0.01 250);
  --fg-soft: oklch(76% 0.014 252);
  /* 67 % et non 63 % : en dessous, le texte discret tombe a 4,19:1 sur le verre. */
  --fg-faint: oklch(67% 0.016 254);

  --amber: oklch(76% 0.145 62);
  --amber-deep: oklch(70% 0.15 52);
  --up: oklch(76% 0.16 155);
  --down: oklch(70% 0.19 25);
  --warn: oklch(80% 0.14 78);

  --amber-bord: oklch(76% 0.145 62 / 0.34);
  --amber-voile: oklch(76% 0.145 62 / 0.12);
  --topbar-bg: oklch(19.5% 0.022 264 / 0.88);

  --glass-1: oklch(28% 0.026 264 / 0.55);
  --glass-2: oklch(32% 0.04 262 / 0.66);
  --glass-3: oklch(37% 0.03 260 / 0.78);
  --glass-sunk: oklch(13% 0.018 266 / 0.55);

  /* Roles permutes : la lumiere passe sur l'arete haute, l'ombre en bas. */
  --glass-hairline: oklch(6% 0.01 266 / 0.55);
  --glass-edge: oklch(88% 0.02 250 / 0.22);
  --glass-edge-soft: oklch(88% 0.02 250 / 0.12);

  /* Halos sombres : ils doivent eclairer le fond, pas le tacher. */
  --halo-1: oklch(52% 0.135 52 / 0.55);
  --halo-2: oklch(44% 0.11 42 / 0.5);
  --halo-3: oklch(38% 0.09 20 / 0.4);
  --halo-vignette: oklch(8% 0.012 266 / 0.5);
  --halo-opacite: 0.55;
  /* Seul `screen` produit de la matiere sur un fond sombre : `multiply` n'y
     donne que 0,21 point d'amplitude, autant dire rien. Et de la lumiere qui
     accroche la surface, c'est la bonne lecture pour ce theme. */
  --grain-mode: screen;
  --grain-opacite: 0.055;

  /* En sombre l'ombre portee ne se voit plus : la profondeur vient du lisere
     haut et d'un creux tres marque dessous. Les ombres restent, plus denses,
     uniquement pour asseoir la lame. */
  --ombre-1:
    0 2px 6px oklch(0% 0 0 / 0.3),
    0 14px 34px -10px oklch(0% 0 0 / 0.4),
    inset 0 1px 0 oklch(88% 0.02 250 / 0.14);
  --ombre-2:
    0 3px 10px oklch(0% 0 0 / 0.34),
    0 22px 54px -14px oklch(0% 0 0 / 0.48),
    inset 0 1px 0 oklch(88% 0.02 250 / 0.2);
  --ombre-creux:
    inset 0 2px 6px oklch(0% 0 0 / 0.42),
    inset 0 -1px 0 oklch(88% 0.02 250 / 0.08);
  --ombre-flottante:
    0 4px 12px oklch(0% 0 0 / 0.4),
    0 28px 70px -18px oklch(0% 0 0 / 0.55),
    inset 0 1px 0 oklch(88% 0.02 250 / 0.24);

  --trame: oklch(88% 0.02 250 / 0.045);
  --selection: oklch(76% 0.145 62 / 0.32);
  --sur-amber: oklch(16% 0.02 60);
  --champ-fond: oklch(28% 0.026 264 / 0.6);
  --champ-bord: oklch(88% 0.02 250 / 0.18);
  --opaque-1: oklch(24% 0.024 264);
  --opaque-2: oklch(27% 0.03 262);
  --opaque-3: oklch(16% 0.02 266);
  --voile-sombre: oklch(10% 0.016 266 / 0.72);

  /* En sombre le trait s'eclaircit et la surface se teinte, comme le verre :
     un rectangle blanc a faible alpha redonnerait le lait gris. */
  --schema-trait: oklch(48% 0.02 262);
  --schema-surface: oklch(30% 0.03 262 / 0.7);
  --schema-creux: oklch(24% 0.026 264 / 0.6);
  --schema-inactif: oklch(38% 0.018 264);
  --schema-en-cours: oklch(76% 0.15 78);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(0.96rem, 0.92rem + 0.2vw, 1.08rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- Couche 1 : les halos ----------
   Plus saturés qu'en sombre : sur un fond clair, une couleur pâle disparaît.
   Animés uniquement en transform, donc entièrement sur le compositeur. */

.aurora {
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  /* Plus de `saturate` : saturer un pastel sur fond clair pousse droit vers
     le bonbon. */
  filter: blur(80px);
  opacity: var(--halo-opacite);
}

@media (max-width: 40rem) {
  .aurora { filter: blur(58px); }
  .aurora span:nth-child(1) { width: 92vw; height: 92vw; top: -4%; left: -18%; }
  .aurora span:nth-child(2) { width: 80vw; height: 80vw; top: 22%; right: -24%; }
  .aurora span:nth-child(3) { width: 76vw; height: 76vw; bottom: 8%; left: -14%; }
  .aurora span:nth-child(4) { width: 64vw; height: 64vw; top: 62%; right: -10%; }
}

.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.aurora span:nth-child(1) {
  width: 48vw; height: 48vw; top: 0%; left: 2%;
  background: radial-gradient(circle, var(--halo-1), transparent 68%);
  animation: derive-a 34s var(--ease-soft) infinite alternate;
}
.aurora span:nth-child(2) {
  width: 42vw; height: 42vw; top: 26%; right: 0%;
  background: radial-gradient(circle, var(--halo-2), transparent 68%);
  animation: derive-b 42s var(--ease-soft) infinite alternate;
}
.aurora span:nth-child(3) {
  width: 36vw; height: 36vw; bottom: 10%; left: 22%;
  background: radial-gradient(circle, var(--halo-3), transparent 68%);
  animation: derive-c 50s var(--ease-soft) infinite alternate;
}
.aurora span:nth-child(4) {
  width: 32vw; height: 32vw; top: 56%; right: 24%;
  background: radial-gradient(circle, var(--halo-vignette), transparent 70%);
  animation: derive-d 38s var(--ease-soft) infinite alternate;
}

@keyframes derive-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.22); } }
@keyframes derive-b { to { transform: translate3d(-12vw, 14vh, 0) scale(0.86); } }
@keyframes derive-c { to { transform: translate3d(16vw, -12vh, 0) scale(1.16); } }
@keyframes derive-d { to { transform: translate3d(-10vw, -14vh, 0) scale(1.1); } }

/* ---------- Couche 2 : grain et trame ----------
   L'ancien grain était invisible tout en ternissant la page : à 0,85 de
   fréquence les grains faisaient 1,2 px, sous le seuil de l'oeil sur un écran
   à forte densité, pour une amplitude de 1,4 point de clarté — et il
   assombrissait le fond de 1,85 point, soit plus que la séparation carte/fond
   elle-même. Trois corrections tiennent ensemble : des grains plus gros, un
   alpha aplati (`feFuncA discrete`, sans quoi le bruit module la transparence
   et éclaircit le fond — c'est ce qui faisait rejeter `overlay` à tort), et un
   mode de fusion propre à chaque thème. */

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacite);
  mix-blend-mode: var(--grain-mode);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--trame) 1px, transparent 1px),
    linear-gradient(90deg, var(--trame) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 10%, transparent 72%);
}

/* ---------- Couche 3 : le contenu ---------- */

body > header, body > main, body > footer { position: relative; z-index: 2; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--selection); }

/* ---------- Primitives de verre ----------
   Sur fond clair la profondeur ne vient plus du reflet d'arête mais des ombres
   portées : longues, très diffuses et légèrement teintées de bleu. Une ombre
   grise neutre sur un fond coloré rend sale. */

.glass,
.glass-raised,
.glass-inset {
  position: relative;
  border-radius: var(--radius);
  isolation: isolate;
  contain: paint;
}

.glass::before,
.glass-raised::before,
.glass-inset::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 1;
  /* Deux mecanismes, dont les roles permutent d'un theme a l'autre : un
     lisere clair sur l'arete eclairee, un contour marque sur l'arete opposee.
     En clair c'est le contour sombre qui porte la separation ; en sombre c'est
     le lisere. Les jetons changent, la regle ne bouge pas. */
  background: linear-gradient(160deg,
    var(--glass-edge) 0%,
    var(--glass-edge-soft) 38%,
    var(--glass-hairline) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.glass {
  background: var(--glass-1);
  box-shadow: var(--ombre-1);
}

.glass-raised {
  background: var(--glass-2);
  box-shadow: var(--ombre-2);
}

.glass-inset {
  background: var(--glass-sunk);
  box-shadow: var(--ombre-creux);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass { backdrop-filter: blur(var(--blur-1)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur-1)) saturate(160%); }
  .glass-raised { backdrop-filter: blur(var(--blur-2)) saturate(170%); -webkit-backdrop-filter: blur(var(--blur-2)) saturate(170%); }
  .glass-inset { backdrop-filter: blur(var(--blur-1)); -webkit-backdrop-filter: blur(var(--blur-1)); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--opaque-1); }
  .glass-raised { background: var(--opaque-2); }
  .glass-inset { background: var(--opaque-3); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--opaque-1); }
  .glass-raised { background: var(--opaque-2); }
  .glass-inset { background: var(--opaque-3); }
  .glass, .glass-raised, .glass-inset { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.glass-hover {
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease);
}
.glass-hover:hover {
  transform: translateY(-3px);
  background: var(--glass-3);
  box-shadow:
    var(--ombre-flottante);
}

/* ---------- Blocs de texte ---------- */

.shell {
  width: min(100% - 2 * var(--gutter), 1200px);
  margin-inline: auto;
}

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--amber);
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.05em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--fg); font-weight: 600; }

.muted { color: var(--fg-soft); }
.faint { color: var(--fg-faint); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Témoin d'état ---------- */

.dot {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--fg-faint);
  flex: none;
}
.dot[data-state='up'] { background: var(--up); box-shadow: 0 0 0 3px color-mix(in oklab, var(--up) 16%, transparent); }
.dot[data-state='down'] { background: var(--down); box-shadow: 0 0 0 3px color-mix(in oklab, var(--down) 16%, transparent); }
.dot[data-state='stale'] { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 16%, transparent); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--up) 18%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in oklab, var(--up) 3%, transparent); }
}

/* ---------- Formulaire ---------- */

.field {
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--champ-fond);
  border: 1px solid var(--champ-bord);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field::placeholder { color: var(--fg-faint); letter-spacing: 0.16em; }
.field:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-voile);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--amber), var(--amber-deep));
  color: var(--sur-amber);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 6px color-mix(in oklab, var(--amber-deep) 26%, transparent), 0 10px 24px -8px color-mix(in oklab, var(--amber-deep) 32%, transparent);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              filter var(--dur-1) var(--ease);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: var(--glass-2);
  border-color: var(--champ-bord);
  color: var(--fg-soft);
  box-shadow: 0 1px 2px oklch(30% 0.03 265 / 0.08);
}
.btn-ghost:hover { background: var(--glass-3); color: var(--fg); filter: none; }

/* ---------- Réduction du mouvement ---------- */

@media (prefers-reduced-motion: no-preference) {
  .dot[data-state='up'] { animation: pulse 3.6s var(--ease) infinite; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora span { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}