/*
 * DA « noth.in » de lburdier.fr, chargée après mobbin.css :
 * fond noir, texte blanc, quelques îlots blancs (hero à grand logotype, menus, index des projets),
 * titres en grotesque sans capitales forcées, petits libellés en chasse fixe, coins presque droits,
 * images plein cadre. Sombre par défaut ; le bouton du header passe en clair (fond blanc, texte noir), mêmes formes.
 */

/* ---------- Couleurs : noir pur, aplats à peine plus clairs ---------- */
html:not([data-theme="light"]) {
  --bg: #000000;
  --surface: #0c0c0c;
  --surface-deep: #080808;
  --surface-2: #161616;
  --surface-3: #1f1f1f;
  --hover: #262626;
  --accent: #ffffff;
  --on-accent: #000000;
  --header-bg: rgba(0,0,0,0.78);
  --header-bg-loose: rgba(0,0,0,0.7);
  --header-bg-tight: rgba(0,0,0,0.86);
  --scroll-track: #000000;
  --scroll-thumb: #2a2a2a;
  --lb-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --lb-grot: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
}
html:not([data-theme="light"]) ::selection { background: #ffffff; color: #000000; }
/* Clair : blanc pur, aplats gris très légers, même typo et mêmes formes */
html[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f3f3f3;
  --surface-deep: #ececec;
  --surface-2: #e9e9e9;
  --surface-3: #e0e0e0;
  --hover: #d9d9d9;
  --accent: #000000;
  --on-accent: #ffffff;
  --header-bg: rgba(255,255,255,0.84);
  --header-bg-loose: rgba(255,255,255,0.78);
  --header-bg-tight: rgba(255,255,255,0.9);
  --scroll-track: #ffffff;
  --scroll-thumb: #cfcfcf;
}
html { --lb-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --lb-grot: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif; }
html[data-theme="light"] ::selection { background: #000000; color: #ffffff; }

/* Îlots blancs : mêmes variables que l'ancien thème clair */
[data-wordmark-hero], [data-nav-panel], [data-glass="menu"], [data-search-panel] {
  --bg: #ffffff;
  --surface: #f2f2f2;
  --surface-deep: #ebebeb;
  --surface-2: #e9e9e9;
  --surface-3: #e0e0e0;
  --hover: #d9d9d9;
  --accent: #000000;
  --on-accent: #ffffff;
  --danger: #b3261e;
  --oa: #ffffff;
  --oa-65: rgba(255,255,255,0.7);
  --oa-77: rgba(255,255,255,0.82);
  --oa-14: rgba(255,255,255,0.18);
  --ink: #0c0c0e;
  --ink-62: rgba(12,12,14,0.62);
  --ink-10: rgba(12,12,14,0.1);
  --ink-6: rgba(12,12,14,0.6);
  --ink-18: rgba(12,12,14,0.18);
  --ink-12: rgba(12,12,14,0.12);
  --ink-8: rgba(12,12,14,0.8);
  --ink-45: rgba(12,12,14,0.45);
  --ink-78: rgba(12,12,14,0.78);
  --ink-9: rgba(12,12,14,0.9);
  --ink-7: rgba(12,12,14,0.7);
  --ink-5: rgba(12,12,14,0.62);
  --ink-28: rgba(12,12,14,0.28);
  --ink-82: rgba(12,12,14,0.82);
  --ink-16: rgba(12,12,14,0.16);
  --ink-55: rgba(12,12,14,0.55);
  --ink-92: rgba(12,12,14,0.92);
  --ink-08: rgba(12,12,14,0.08);
  --ink-88: rgba(12,12,14,0.88);
  --ink-74: rgba(12,12,14,0.74);
  --ink-72: rgba(12,12,14,0.72);
  --ink-86: rgba(12,12,14,0.86);
  color: var(--ink);
}
html body [data-glass="menu"] { background: #ffffff !important; box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important; }
html body [data-nav-panel] { background: #ffffff !important; }


/* ---------- Typographie ---------- */
/* Titres : grotesque, casse normale, approche serrée (au lieu de l'Archivo large en capitales) */
h1:not(#lb-intro *), h2, h3 {
  font-family: var(--lb-grot) !important;
  font-variation-settings: normal !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.045em !important;
}
h1:not(#lb-intro *) { line-height: 0.9 !important; }
h2 { line-height: 0.98 !important; }
h3 { letter-spacing: -0.025em !important; line-height: 1.05 !important; }
/* Petits libellés en capitales espacées : chasse fixe, comme les repères de noth.in */
[style*="letter-spacing:0.14em"][style*="text-transform:uppercase"],
[style*="letter-spacing: 0.14em"][style*="text-transform: uppercase"],
[style*="letter-spacing:0.16em"][style*="text-transform:uppercase"],
[style*="letter-spacing: 0.16em"][style*="text-transform: uppercase"],
[style*="letter-spacing:0.18em"],
[style*="letter-spacing: 0.18em"],
[style*="letter-spacing:0.2em"],
[style*="letter-spacing: 0.2em"],
[style*="letter-spacing:0.22em"],
[style*="letter-spacing: 0.22em"],
[style*="letter-spacing:0.24em"],
[style*="letter-spacing: 0.24em"] {
  font-family: var(--lb-mono) !important;
  font-variation-settings: normal !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
}
/* Libellé de section seul sur sa ligne : entre parenthèses, « ( Méthode ) » */
section > div > span[style*="letter-spacing:0.18em"]:only-child::before,
section > div > span[style*="letter-spacing: 0.18em"]:only-child::before,
section > span[style*="letter-spacing:0.18em"]:first-child::before,
section > span[style*="letter-spacing: 0.18em"]:first-child::before { content: "( "; }
section > div > span[style*="letter-spacing:0.18em"]:only-child::after,
section > div > span[style*="letter-spacing: 0.18em"]:only-child::after,
section > span[style*="letter-spacing:0.18em"]:first-child::after,
section > span[style*="letter-spacing: 0.18em"]:first-child::after { content: " )"; }

/* Logo de l'en-tête : Archivo large conservé, c'est la signature */
[data-header] > a:first-child { font-family: Archivo, sans-serif !important; font-variation-settings: 'wdth' 125, 'wght' 800 !important; letter-spacing: 0.02em !important; }
/* Liens de navigation : petites capitales en chasse fixe */
[data-nav-links] > a { font-family: var(--lb-mono) !important; font-size: 11.5px !important; letter-spacing: 0.02em !important; }

/* ---------- Formes : coins arrondis (14 px les blocs, 10 px les petits éléments), pastilles pour les boutons ---------- */
[style*="border-radius:2"]:not([style*="border-radius:2px"]),
[style*="border-radius: 2"]:not([style*="border-radius: 2px"]),
[style*="border-radius:3"]:not([style*="border-radius:3px"]),
[style*="border-radius: 3"]:not([style*="border-radius: 3px"]) { border-radius: 14px !important; }
[style*="border-radius:1"]:not([style*="border-radius:1px"]):not([style*="border-radius:100"]),
[style*="border-radius: 1"]:not([style*="border-radius: 1px"]):not([style*="border-radius: 100"]) { border-radius: 10px !important; }
[style*="clip-path:inset(0 round"],
[style*="clip-path: inset(0px round"] { clip-path: inset(0 round 14px) !important; }
html body [data-glass] { border-radius: 14px; }
/* Vignettes façon noth.in : l'image seule, la légende dessous en chasse fixe, sans fond de carte */
figure[style*="background:var(--surface)"],
figure[style*="background: var(--surface)"] { background: transparent !important; }
figure[style*="background:var(--surface)"] > figcaption,
figure[style*="background: var(--surface)"] > figcaption { padding-left: 0 !important; padding-right: 0 !important; }
figure[style*="background:var(--surface)"] > figcaption > span:first-child,
figure[style*="background: var(--surface)"] > figcaption > span:first-child { font-family: var(--lb-mono) !important; font-variation-settings: normal !important;
  font-weight: 400 !important; font-size: 12px !important; letter-spacing: 0.02em !important; }
figure[style*="background:var(--surface)"] > video,
figure[style*="background: var(--surface)"] > video,
figure[style*="background:var(--surface)"] > img,
figure[style*="background: var(--surface)"] > img { border-radius: 14px !important; }
/* Blocs qui étaient incrustés avec de grands arrondis : bord à bord ou coins discrets */
section[aria-labelledby="vortex-cta"] { margin: 96px 0 0 !important; border-radius: 0 !important; clip-path: none !important; }
[data-index-block] { margin: 0 !important; border-radius: 0 !important; clip-path: none !important; }
[data-hero-sticky] { border-radius: 0 !important; clip-path: none !important; }

/* ---------- Hero à grand logotype (blanc, sous l'en-tête) ---------- */
[data-hero-pin] { margin-top: calc(-1 * var(--hdr-h, 74px)) !important; }
[data-wordmark-hero] {
  position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 24px;
  min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * var(--hdr-h, 74px));
  padding: calc(var(--hdr-h, 74px) + 22px) 26px 22px; background: #ffffff; color: #000000; overflow: hidden;
}
[data-wordmark-hero] .wm-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
[data-wordmark-hero] .wm-tag { margin: 0; max-width: 30ch; font-family: var(--lb-grot); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; }
[data-wordmark-hero] .wm-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 22px; border-radius: 999px;
  background: #000000; color: #ffffff; font-family: var(--lb-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1), background 0.25s; }
[data-wordmark-hero] .wm-cta:hover { color: #ffffff; background: #222222; }
[data-wordmark-hero] .wm-cta:active { transform: scale(0.96); }
[data-wordmark-hero] .wm-side { font-family: var(--lb-mono); font-size: 12px; line-height: 1.5; text-align: right; color: rgba(255,255,255,0.62); text-transform: uppercase; }
[data-wordmark-hero] .wm-word { align-self: end; display: flex; align-items: flex-end; margin: 0 -0.02em; }
[data-wordmark-hero] .wm-word span {
  display: block; font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 125, 'wght' 800; font-weight: 800;
  font-size: 16.9vw; line-height: 0.74; letter-spacing: -0.045em; white-space: nowrap; color: #000000;
}
[data-wordmark-hero] .wm-word i { font-style: normal; display: inline-block; }
[data-wordmark-hero] .wm-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--lb-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
[data-wordmark-hero] .wm-bottom a { color: #000000; }
[data-wordmark-hero] .wm-bottom a:hover { color: rgba(0,0,0,0.55); }
[data-wordmark-hero] .wm-links { display: flex; gap: 10px; align-items: center; }
[data-wordmark-hero] .wm-links span { color: rgba(0,0,0,0.35); }
@media (max-width: 760px) {
  [data-wordmark-hero] { padding: calc(var(--hdr-h, 64px) + 18px) 16px 18px; min-height: 88svh; }
  [data-wordmark-hero] .wm-side { display: none; }
}
/* Entrée des lettres du logotype, une à une depuis un masque (après l'animation d'arrivée s'il y en a une) */
@media (prefers-reduced-motion: no-preference) {
  [data-wordmark-hero] .wm-word span { overflow: hidden; padding-top: 0.02em; }
  [data-wordmark-hero] .wm-word i { transform: translate3d(0, 105%, 0); animation: wmRise 1s cubic-bezier(0.2,0.8,0.2,1) forwards; animation-delay: calc(var(--d, 0) * 55ms + 150ms); }
  html.lbi-on [data-wordmark-hero] .wm-word i { animation-play-state: paused; }
  @keyframes wmRise { to { transform: none; } }
}

/* ---------- En-tête : noir sur les sections, transparent et noir sur blanc au-dessus du hero blanc ----------
   Au-dessus de l'écran clair, l'en-tête se fond en « difference » comme les textes du mot évidé : tout y est
   écrit à l'inverse (blanc au lieu de noir), donc il ressort exactement noir sur l'écran clair et s'éclaircit
   là où une bulle a percé l'écran sous lui. Le fondu se pose sur <header> et pas sur ses enfants : il est en
   position sticky avec un z-index, donc il forme déjà un groupe isolé et ses enfants n'y verraient que lui.
   Les seules parties en couleur (drapeaux, panneau de langues) sont pré-inversées pour revenir à leurs vraies
   teintes une fois le fondu appliqué. */
html.lb-on-light [data-header] { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
  mix-blend-mode: difference; --hdr-ink: #ffffff; --hdr-on-ink: #000000; --hdr-tint: rgba(255,255,255,0.06); --hdr-tint-hi: rgba(255,255,255,0.12); }
/* Panneau de langues ouvert : le fondu est coupé tant qu'il est là, et les couleurs reprennent leur sens normal.
   Un enfant ne peut pas sortir du groupe fondu de son parent : laissé dedans, le panneau se différencie avec le
   hero qui passe dessous (les textes se mélangent au travers) — aucun z-index n'y change rien, il est déjà
   au-dessus. Sur l'écran clair le résultat est le même des deux côtés, la bascule ne se voit donc pas. */
html.lb-on-light [data-header]:has([role="listbox"]) { mix-blend-mode: normal;
  --hdr-ink: #000000; --hdr-on-ink: #ffffff; --hdr-tint: rgba(0,0,0,0.06); --hdr-tint-hi: rgba(0,0,0,0.12); }
html.lb-on-light [data-header] > a, html.lb-on-light [data-header] [data-nav-links] > a { color: var(--hdr-ink) !important; }
html.lb-on-light [data-header] [data-nav-links] > a:hover { color: var(--hdr-on-ink) !important; background-image: linear-gradient(var(--hdr-ink), var(--hdr-ink)) !important; }
html.lb-on-light [data-header] button:not([role="listbox"] *) { background: var(--hdr-tint) !important; color: var(--hdr-ink) !important; }
html.lb-on-light [data-header] button:not([role="listbox"] *):hover { background: var(--hdr-tint-hi) !important; }
html.lb-on-light [data-header] a[aria-label="Rechercher"] { background: var(--hdr-tint) !important; color: var(--hdr-ink) !important; }
/* Drapeaux : seules taches de couleur du groupe fondu. On les cible par aria-hidden (les barres du burger et les
   libellés n'en ont pas) et non par leur style en ligne, qui est réécrit avec une espace au rendu. Pré-inversés,
   ils ressortent dans leurs vraies teintes une fois différenciés ; fondu coupé, on les laisse tels quels. */
html.lb-on-light [data-header] span[aria-hidden="true"] { filter: invert(1); }
html.lb-on-light [data-header]:has([role="listbox"]) span[aria-hidden="true"] { filter: none; }

/* ---------- Mise en avant dans les textes (emphasis.js : **gras** et __surligné__ dans la copie) ----------
   Pas de couleur imposée : la phrase du hero est fondue en « difference » et tient sa teinte de --hm-screen,
   une couleur en dur y inverserait de travers. Le surlignage se déduit donc de currentColor : il reste juste
   dans les deux thèmes (encre blanche ou noire) comme sous le fondu du hero. Bande basse, qui laisse les
   hampes libres, et box-decoration-break pour qu'elle suive le texte quand il passe à la ligne. */
main strong, [data-hero-mask] strong { font-weight: 650; color: inherit; }
.lb-hl {
  --hl: rgba(127,127,127,0.2);                            /* repli si color-mix n'est pas compris */
  --hl: color-mix(in srgb, currentColor 16%, transparent);
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 0.68em;
  padding: 0 0.1em; margin: 0 -0.1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Pied de page : grand logotype bord à bord ---------- */
[data-foot-word] { display: block; margin: 64px -0.02em 0; font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 125, 'wght' 800; font-weight: 800;
  font-size: 16.9vw; line-height: 0.74; letter-spacing: -0.045em; white-space: nowrap; color: var(--ink); user-select: none; }
footer { padding-left: 26px !important; padding-right: 26px !important; overflow: hidden; }
@media (max-width: 760px) { footer { padding-left: 16px !important; padding-right: 16px !important; } }

/* ---------- Divers ---------- */
#lb-promo-bar { background: #ffffff !important; color: #000000 !important; }
#lb-promo-bar * { color: inherit !important; }
html[data-theme="light"] #lb-promo-bar { background: #000000 !important; color: #ffffff !important; }
/* Clair : le hero à grand logotype se détache par un fond gris très léger */
html[data-theme="light"] [data-wordmark-hero] { background: #f3f3f3; }
html body .lbnl { background: var(--surface) !important; }
html body [data-case-stage] { background: var(--surface) !important; }

/* Projets 2026 (bandeau) : toutes les cartes à la même hauteur, l'image remplit son côté sans cadre gris */
[data-recent-track] { align-items: stretch; }
[data-recent-card] > [role="img"] { height: 100%; }
html body [data-recent-card] { padding: 0 !important; overflow: hidden; align-items: stretch !important; }
[data-recent-card] > [role="img"] { border-radius: 0 !important; aspect-ratio: auto !important; min-height: clamp(220px, 24vw, 380px); }
[data-recent-card] > div:last-child { padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) 0 !important; }
@media (max-width: 860px) {
  [data-recent-card] > [role="img"] { min-height: 0; aspect-ratio: 16 / 10 !important; }
  [data-recent-card] > div:last-child { padding: 18px !important; }
}

/* Bandeau des outils : noir uni, logos et noms en blanc */
html body [data-tools-band] { background: #000000 !important; }
[data-tools-band] > div:last-child span { color: #ffffff !important; }
/* En mode sombre, le bandeau s'inverse : fond blanc, noms et logos en noir */
html:not([data-theme="light"]) body [data-tools-band] { background: #ffffff !important; }
html:not([data-theme="light"]) [data-tools-band] > div:last-child span { color: #000000 !important; }
html:not([data-theme="light"]) [data-tools-band] > div:last-child img { filter: invert(1) !important; }
html:not([data-theme="light"]) [data-tools-band] > div:last-child span[style*="box-shadow"] { box-shadow: inset 0 0 0 2px #000000 !important; }
html body [data-tools-band] [data-gradient] { display: none !important; }
[data-tools-band] > div:last-child { mix-blend-mode: normal !important; }

/* ---------- Hero : écran clair où « BURDIER » est découpé (hero-mask.js) au-dessus du diaporama ---------- */
/* --hm-screen = la teinte que hero-mask.js peint sur l'écran clair : en « difference », un texte de cette
   teinte ressort exactement noir dessus, et garde cette teinte (donc presque blanc) dans les trous du liquide. */
[data-hero-mask] { position: absolute; inset: 0; z-index: 5; color: #000000; --hm-screen: #ffffff; }
html[data-theme="light"] [data-hero-mask] { --hm-screen: #f3f3f3; }
[data-hero-mask] .hm-canvas { position: absolute; inset: 0; display: block; pointer-events: none; }
[data-hero-mask] .hm-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--hdr-h, 74px) + 22px) 26px 22px; pointer-events: none; }
[data-hero-mask] .hm-ui a { pointer-events: auto; }
/* Les textes plats sont écrits en blanc et fondus en « difference » sur le calque [data-hero-mask] : sur l'écran
   clair ils ressortent noirs, et partout où le liquide a percé l'écran (fond transparent) ils redeviennent blancs
   au-dessus du rendu. Le bouton garde sa pastille pleine, lisible dans les deux cas, donc pas de fondu.
   L'effacement au défilement passe par --ui-op posé sur chaque texte et non sur .hm-ui : une opacité < 1 sur un
   parent créerait un groupe isolé et couperait le fondu avec le canvas. */
[data-hero-mask] .hm-tag, [data-hero-mask] .hm-side, [data-hero-mask] .hm-bottom { mix-blend-mode: difference; }
[data-hero-mask] .hm-tag, [data-hero-mask] .hm-cta,
[data-hero-mask] .hm-side, [data-hero-mask] .hm-bottom { opacity: var(--ui-op, 1); }
[data-hero-mask] .hm-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
[data-hero-mask] .hm-tag { margin: 0; max-width: 30ch; font-family: var(--lb-grot); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; color: var(--hm-screen); }
[data-hero-mask] .hm-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 22px; border-radius: 999px;
  background: #000000; color: #ffffff; font-family: var(--lb-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1), background 0.25s; }
[data-hero-mask] .hm-cta:hover { color: #ffffff; background: #222222; }
[data-hero-mask] .hm-side { margin: 0; font-family: var(--lb-mono); font-size: 12px; line-height: 1.5; text-align: right; color: rgba(255,255,255,0.62); text-transform: uppercase; }
[data-hero-mask] .hm-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--lb-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--hm-screen); }
[data-hero-mask] .hm-bottom a { color: var(--hm-screen); }
[data-hero-mask] .hm-bottom a:hover { color: rgba(255,255,255,0.55); }
[data-hero-mask] .hm-links { display: flex; gap: 10px; align-items: center; }
[data-hero-mask] .hm-links > span { color: rgba(255,255,255,0.35); }
@media (max-width: 760px) {
  [data-hero-mask] .hm-ui { padding: calc(var(--hdr-h, 64px) + 18px) 16px 18px; }
  [data-hero-mask] .hm-side { display: none; }
}

/* Repères du bas du hero (compteur 01/05, titre du projet diffusé, puces et « défiler ») : invisibles tant que
   l'écran clair couvre le hero — sinon on les aperçoit par les lettres évidées et les bulles. Ils apparaissent
   quand la plongée est terminée, c'est-à-dire quand « BURDIER » et son écran ont disparu (classe lb-hero-veil
   retirée par hero-mask.js). Cachés par défaut : le script est en defer, pas de clignotement au chargement. */
[data-hero-foot] { opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.2,0.8,0.2,1); }
html:not(.lb-hero-veil) [data-hero-foot] { opacity: 1; pointer-events: auto; }

/* Hero « Artiste 3D & Dev » épuré : le titre, un seul bouton et la ligne du projet affiché */
[data-hero-sticky] p[data-hero-reveal], [data-hero-sticky] div[data-hero-reveal]:not(:has(a)) { display: none !important; }
[data-hero-sticky] div[data-hero-reveal]:has(a) > a:first-child { display: none !important; }
[data-hero-sticky] div[data-hero-reveal]:has(a) > a:last-child { background: #ffffff !important; color: #000000 !important; }