/* =============================================================================
   beeMob TAD — Système de mouvement                        assets/css/motion.css
   -----------------------------------------------------------------------------
   Ce fichier est à la fois le code ET la documentation technique du motion
   design (voir aussi docs/GUIDE-MOTION-DESIGN.md et guide/index.html).
   Tokens : assets/css/tokens.css §5 (--dur-*, --ease-*, --move-*,
   --stagger-step, --scale-press, --scale-pop).

   ─── A. PRINCIPES ────────────────────────────────────────────────────────────
   Une animation n'existe que si elle sert l'un de ces trois buts :
     ORIENTER      d'où vient l'élément, où il va (tiroir qui glisse depuis le
                   bord, menu qui descend de son bouton, tracé d'itinéraire) ;
     CONFIRMER     l'action a été prise en compte (pression, coche de succès,
                   pastille qui « pop », secousse d'erreur) ;
     HIÉRARCHISER  ce qui compte apparaît d'abord (révélation des sections,
                   cascade des listes, croissance des graphiques).
   Rapide : tout élément d'interface reste ≤ --dur-slower (480ms). Seules
   exceptions : compteurs et succès (--dur-epic), tracé de carte (--dur-draw).
   Fluide : on n'anime que des propriétés composées par le GPU — opacity,
   translate, scale, rotate (+ stroke-dashoffset pour le SVG). Jamais width,
   height, top, left, margin.
   Accessible : prefers-reduced-motion ET le choix explicite data-motion sont
   respectés partout (section 10) ; aucun contenu ne reste caché si le JS échoue.

   ─── B. COURBES ET DURÉES ────────────────────────────────────────────────────
   Entrée          --ease-out     (décélère : l'élément « se pose »)
   Sortie          --ease-in      (accélère : l'élément « s'en va »), durée
                                  ≈ 2/3 de l'entrée (ex. --dur-slow → --dur-base)
   Déplacement     --ease-in-out  (d'un point A à un point B : tracé, indicateur)
   Micro-état      --ease-standard (couleur, ombre, bordure)
   Ludique         --ease-spring  (petits éléments : pastille, coche, marqueur)
   Taille ↔ durée : plus l'élément est grand ou loin, plus c'est long.
     90ms  --dur-instant  pression, bascule d'interrupteur
     150ms --dur-fast     survol, focus, changement de couleur
     220ms --dur-base     menu, info-bulle, onglets, toast
     320ms --dur-slow     modale, tiroir, révélation de section
     480ms --dur-slower   entrée de page, croissance de graphique
     900ms --dur-epic     compteur animé, coche de succès
     1400ms --dur-draw    tracé d'itinéraire
   Boucles infinies (chargement, direct) : durées littérales ≥ 1s, jamais un
   token --dur-* (qui vaut 1ms en mouvement réduit).

   ─── C. RECETTES (motif → animation) ─────────────────────────────────────────
   Bouton pressé        .press  ou  scale: var(--scale-press) en --dur-instant
   Carte survolée       .lift   (translate -2px + --shadow-lg, --dur-fast)
   Menu / info-bulle    tad-fade-down ou tad-scale-in · --dur-base · --ease-out
   Modale               voile tad-fade-in + boîte tad-scale-in · --dur-slow
                        sortie : tad-fade-out · --dur-base · --ease-in
   Tiroir               tad-slide-in-right · --dur-slow · --ease-out
                        sortie : tad-slide-out-right · --dur-base · --ease-in
   Toast                tad-fade-up (mobile) / tad-slide-in-right (bureau)
                        · --dur-base · --ease-out ; barre de temps : tad-grow-x
   Section              [data-reveal]               · --dur-slow
   Liste, grille        [data-reveal-stagger]       · pas --stagger-step (45ms)
   Page                 .motion-page + View Transitions
   Graphiques           tad-grow-y / tad-grow-x · --dur-slower · --ease-out
                        + délai calc(var(--i) * var(--stagger-step))
   Succès               tad-pop (cercle) + tad-draw (coche) · --dur-epic · spring
   Erreur de saisie     tad-shake · --dur-slow · --ease-standard
   Itinéraire           [data-draw] tad-draw · --dur-draw · --ease-in-out,
                        marqueurs tad-pop · --ease-spring
   Squelette            tad-shimmer 1.4s linear infinite
                        (fond : linear-gradient(90deg, A 25%, B 37%, A 63%)
                        avec background-size: 400% 100%)
   Pastille « en direct » tad-pulse-ring 2s var(--ease-out) infinite
                        (réglages : --pulse-color, défaut currentColor ;
                        --pulse-size, défaut var(--move-2))
   Indicateur de charge tad-spin .8s linear infinite
   Décor du héros       tad-float 6s var(--ease-in-out) infinite

   ─── D. COMPOSITION (important pour les autres feuilles) ─────────────────────
   - Les keyframes animent les propriétés INDIVIDUELLES translate / scale /
     rotate, jamais `transform` : elles se composent avec le transform d'un
     composant au lieu de l'écraser. Pour centrer un élément qui tourne
     (tad-spin), préférer inset + margin:auto ou la propriété `translate`.
   - Les entrées ne définissent que l'état de DÉPART (`from`) : l'arrivée est
     l'état normal de l'élément. `backwards` (ou `both`) suffit et ne fige rien
     après la fin (survols, états actifs restent libres).
   - Les sorties définissent l'état d'ARRIVÉE (`to`) : tad-fade-out,
     tad-slide-out-right, à jouer avec `forwards` jusqu'au retrait du DOM.
     Avec animation-direction: reverse, la courbe est inversée aussi :
     utiliser --ease-out pour obtenir l'effet d'une sortie en --ease-in.
   - Délais : --delay (ms) décale .anim-*, [data-reveal], [data-draw] ;
     --i (posé par core.js sur les enfants de [data-reveal-stagger]) donne
     le rang dans une cascade.

   ─── E. CONTRAT JS (assets/js/core.js) ───────────────────────────────────────
   - <html> reçoit la classe .js dans le <head> : les éléments à révéler ne
     sont cachés QUE sous html.js.
   - core.js ajoute .is-visible (IntersectionObserver) sur [data-reveal],
     [data-reveal-stagger], [data-draw] et sur l'ancêtre .osm-map / .gtfs-map /
     .route-map du tracé ; il pose --i sur les enfants des cascades.
   - Filet de sécurité : si core.js ne tourne pas, tad-reveal-fallback rend
     tout visible après 2,5 s. core.js ne doit donc pas poser de style
     `animation` en ligne sur ces éléments.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Réglages globaux
   -------------------------------------------------------------------------- */

/* Permet d'animer vers/depuis height:auto (accordéons, ::details-content).
   Amélioration progressive : ignoré sans effet de bord ailleurs. */
:root {
  interpolate-size: allow-keywords;
}

/* Défilement doux des ancres (lien d'évitement, sommaires) — seulement si le
   mouvement n'est pas réduit, ou si l'utilisateur a choisi « complet ». */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) {
    scroll-behavior: smooth;
  }
}

:root[data-motion="full"] {
  scroll-behavior: smooth;
}


/* -----------------------------------------------------------------------------
   2. Keyframes du contrat (préfixe tad-)
   -------------------------------------------------------------------------- */

/* Apparition simple (voiles, contenus sans direction). */
@keyframes tad-fade-in {
  from { opacity: 0; }
}

/* Apparition par le bas : contenu qui « monte » à sa place (16px). */
@keyframes tad-fade-up {
  from {
    opacity: 0;
    translate: 0 var(--move-3);
  }
}

/* Apparition par le haut : menus, bandeaux, toasts du haut (8px). */
@keyframes tad-fade-down {
  from {
    opacity: 0;
    translate: 0 calc(var(--move-2) * -1);
  }
}

/* Apparition par zoom léger : modales, popovers (régler transform-origin). */
@keyframes tad-scale-in {
  from {
    opacity: 0;
    scale: .96;
  }
}

/* Tiroir / toast qui entre depuis le bord droit. */
@keyframes tad-slide-in-right {
  from { translate: 100% 0; }
}

/* Tiroir / toast qui sort par le bord droit (jouer avec forwards). */
@keyframes tad-slide-out-right {
  to { translate: 100% 0; }
}

/* « Pop » : pastilles, marqueurs, coche. Avec --ease-spring, la courbe
   dépasse légèrement l'échelle 1 avant de s'y poser (≈ --scale-pop). */
@keyframes tad-pop {
  from {
    opacity: 0;
    scale: .5;
  }
}

/* Reflet des squelettes de chargement (cf. recette C : background-size 400%). */
@keyframes tad-shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}

/* Onde autour d'une pastille « en direct ». Anime box-shadow (léger, petit
   élément) pour ne jamais masquer la pastille elle-même. */
@keyframes tad-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-color, currentColor) 45%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 var(--pulse-size, var(--move-2)) transparent;
  }
}

/* Rotation continue des indicateurs de chargement. */
@keyframes tad-spin {
  to { rotate: 1turn; }
}

/* Tracé d'une ligne SVG (nécessite pathLength="1", cf. section 6). */
@keyframes tad-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* Croissance des barres de graphique (régler transform-origin: bottom / left). */
@keyframes tad-grow-y {
  from { scale: 1 0; }
}

@keyframes tad-grow-x {
  from { scale: 0 1; }
}

/* Secousse d'erreur (champ refusé, code invalide). Amplitude en tokens :
   nulle en mouvement réduit. */
@keyframes tad-shake {
  0%,
  100% { translate: 0 0; }
  15% { translate: calc(var(--move-2) * -1) 0; }
  30% { translate: var(--move-2) 0; }
  45% { translate: calc(var(--move-1) * -1) 0; }
  60% { translate: var(--move-1) 0; }
  75% { translate: calc(var(--move-1) * -.5) 0; }
}

/* Flottement lent d'un décor (héros). Boucle : stoppée en mouvement réduit. */
@keyframes tad-float {
  0%,
  100% { translate: 0 0; }
  50% { translate: 0 calc(var(--move-2) * -1); }
}

/* Filet de sécurité des éléments cachés en attendant le JS (cf. sections 4 à 6). */
@keyframes tad-reveal-fallback {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}


/* -----------------------------------------------------------------------------
   2 bis. Keyframes internes (complément documenté, mêmes règles)
   -------------------------------------------------------------------------- */

/* Disparition (modales, voiles, ancienne page des View Transitions). */
@keyframes tad-fade-out {
  to { opacity: 0; }
}

/* Entrée de page des View Transitions : fondu + légère montée (8px). */
@keyframes tad-page-enter {
  from {
    opacity: 0;
    translate: 0 var(--move-2);
  }
}

/* Variantes latérales de [data-reveal] : l'élément arrive DEPUIS ce côté. */
@keyframes tad-fade-from-left {
  from {
    opacity: 0;
    translate: calc(var(--move-3) * -1.5) 0;
  }
}

@keyframes tad-fade-from-right {
  from {
    opacity: 0;
    translate: calc(var(--move-3) * 1.5) 0;
  }
}


/* -----------------------------------------------------------------------------
   3. Classes d'animation ponctuelles (jouées au chargement, sans JS)
   Délai : style="--delay: 120ms". Rien n'est figé après la fin (backwards).
   -------------------------------------------------------------------------- */
.anim-fade-up {
  animation: tad-fade-up var(--dur-slow) var(--ease-out) var(--delay, 0ms) backwards;
}

.anim-fade-in {
  animation: tad-fade-in var(--dur-base) var(--ease-out) var(--delay, 0ms) backwards;
}

.anim-scale-in {
  animation: tad-scale-in var(--dur-base) var(--ease-out) var(--delay, 0ms) backwards;
}

.anim-pop {
  animation: tad-pop var(--dur-slow) var(--ease-spring) var(--delay, 0ms) backwards;
}

/* État posé brièvement par core.js sur un [data-filter-item] qui réapparaît
   après un filtrage (retiré à animationend). Le 2e sélecteur l'emporte sur
   l'entrée en cascade d'un parent [data-reveal-stagger] (spécificité 0,4,1). */
.is-filter-in,
html.js [data-reveal-stagger].is-visible > .is-filter-in {
  animation: tad-scale-in var(--dur-base) var(--ease-out) backwards;
  animation-delay: 0ms;
}


/* -----------------------------------------------------------------------------
   4. Révélations au défilement
   [data-reveal]          up (défaut) | fade | scale | left | right
   [data-reveal-stagger]  mêmes valeurs ; s'applique aux ENFANTS directs.
   Sans JS (pas de html.js) : tout est visible, rien n'est animé.
   Avec html.js : caché jusqu'à .is-visible, puis animation d'entrée.
   Si core.js échoue : tad-reveal-fallback (0s, délai 2,5 s) rend visible.
   Si .is-visible arrive après le filet (contenu sous la ligne de flottaison),
   l'entrée est quand même jouée quand l'élément arrive à l'écran.
   -------------------------------------------------------------------------- */
html.js [data-reveal]:not(.is-visible) {
  opacity: 0;
  animation: tad-reveal-fallback 0s 2.5s forwards;
}

html.js [data-reveal].is-visible {
  animation: tad-fade-up var(--dur-slow) var(--ease-out) var(--delay, 0ms) backwards;
}

html.js [data-reveal="fade"].is-visible {
  animation-name: tad-fade-in;
}

html.js [data-reveal="scale"].is-visible {
  animation-name: tad-scale-in;
}

html.js [data-reveal="left"].is-visible {
  animation-name: tad-fade-from-left;
}

html.js [data-reveal="right"].is-visible {
  animation-name: tad-fade-from-right;
}

/* Cascade : les enfants restent cachés tant que le PARENT n'a pas .is-visible,
   puis entrent l'un après l'autre (rang --i × --stagger-step, plafonné à
   12 pas ≈ 540ms pour que les longues listes ne traînent pas). */
html.js [data-reveal-stagger]:not(.is-visible) > * {
  opacity: 0;
  animation: tad-reveal-fallback 0s 2.5s forwards;
}

html.js [data-reveal-stagger].is-visible > * {
  animation: tad-fade-up var(--dur-slow) var(--ease-out) backwards;
  animation-delay: calc(var(--delay, 0ms) + min(var(--i, 0) * var(--stagger-step), var(--stagger-step) * 12));
}

html.js [data-reveal-stagger="fade"].is-visible > * {
  animation-name: tad-fade-in;
}

html.js [data-reveal-stagger="scale"].is-visible > * {
  animation-name: tad-scale-in;
}

html.js [data-reveal-stagger="left"].is-visible > * {
  animation-name: tad-fade-from-left;
}

html.js [data-reveal-stagger="right"].is-visible > * {
  animation-name: tad-fade-from-right;
}


/* -----------------------------------------------------------------------------
   5. Entrée de page — <main class="… motion-page">
   Fondu seul, volontairement : un translate sur <main> créerait un bloc
   conteneur pour d'éventuels descendants position:fixed (barres d'action
   mobiles) pendant l'animation. La montée est assurée par les révélations
   internes et, entre deux pages, par les View Transitions (section 8).
   -------------------------------------------------------------------------- */
.motion-page {
  animation: tad-fade-in var(--dur-slower) var(--ease-out) backwards;
}


/* -----------------------------------------------------------------------------
   6. Tracé d'itinéraire et marqueurs de carte
   Polyligne : <polyline class="route-line" pathLength="1" data-draw …>
   pathLength="1" est OBLIGATOIRE (sinon le tiret mesure 1px → pointillés).
   Chorégraphie (raconter le trajet) :
     1. le marqueur de départ « pop » dès que la carte entre dans la vue ;
     2. la ligne se dessine du départ vers l'arrivée (--dur-draw, --ease-in-out) ;
     3. le marqueur d'arrivée « pop » quand la ligne l'atteint (fin du tracé).
   Les autres .map-marker éventuels apparaissent avec l'arrivée.
   -------------------------------------------------------------------------- */
html.js [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

html.js [data-draw]:not(.is-visible) {
  animation: tad-reveal-fallback 0s 2.5s forwards;
}

html.js [data-draw].is-visible {
  animation: tad-draw var(--dur-draw) var(--ease-in-out) var(--delay, 0ms) forwards;
}

/* Les cercles SVG grossissent depuis leur propre centre. */
.map-marker {
  transform-box: fill-box;
  transform-origin: center;
}

html.js :is(.osm-map, .gtfs-map, .route-map):not(.is-visible) .map-marker {
  opacity: 0;
  animation: tad-reveal-fallback 0s 2.5s forwards;
}

html.js :is(.osm-map, .gtfs-map, .route-map).is-visible .map-marker {
  animation: tad-pop var(--dur-slow) var(--ease-spring) backwards;
  animation-delay: calc(var(--delay, 0ms) + var(--dur-draw) * .9);
}

html.js :is(.osm-map, .gtfs-map, .route-map).is-visible .map-marker-start {
  animation-delay: var(--delay, 0ms);
}


/* -----------------------------------------------------------------------------
   7. Interactions : .lift (élévation au survol) et .press (pression)
   Préfixées par `html` pour l'emporter sur la transition d'un composant
   (spécificité 0,1,1) : la liste couvre donc aussi ses propriétés usuelles.
   .lift ne réagit au survol que sur les appareils à pointeur précis
   (pas d'état « collé » au toucher) ; le focus clavier produit le même effet.
   -------------------------------------------------------------------------- */
html .lift,
html .press {
  transition-property: translate, scale, transform, box-shadow, background-color, border-color, color, opacity;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  html .lift:hover:not(:disabled, [aria-disabled="true"]) {
    translate: 0 calc(var(--move-1) / -2);
    box-shadow: var(--shadow-lg);
  }
}

html .lift:focus-visible {
  translate: 0 calc(var(--move-1) / -2);
}

/* Pression : enfoncement immédiat (--dur-instant), relâchement plus doux. */
html .press:active:not(:disabled, [aria-disabled="true"]) {
  scale: var(--scale-press);
  transition-duration: var(--dur-instant);
}


/* -----------------------------------------------------------------------------
   8. View Transitions entre pages (amélioration progressive)
   Navigateurs compatibles : fondu court de l'ancienne page, fondu + légère
   montée de la nouvelle. L'en-tête client et la sidebar d'exploitation ont
   leur propre nom : ils restent immobiles et se fondent sur place.
   Console d'exploitation (html[data-shell="manager"]) : fondu seul, sans
   montée — un outil dense ne doit pas « sauter » à chaque navigation.
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

/* Spécificité nulle : layout-client.css / layout-manager.css peuvent
   désactiver le nom (ex. sidebar repliée hors écran sur mobile). */
:where(.site-header) {
  view-transition-name: site-header;
}

:where(.sidebar) {
  view-transition-name: app-sidebar;
}

::view-transition-group(site-header),
::view-transition-group(app-sidebar) {
  animation-duration: var(--dur-base);
  animation-timing-function: var(--ease-standard);
}

/* Fondu « normal » (et non plus-lighter) : les deux courbes ne se somment pas
   à 1 à chaque instant, ce qui éclaircirait l'image en milieu de transition. */
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: tad-fade-out var(--dur-fast) var(--ease-in) both;
}

::view-transition-new(root) {
  animation: tad-page-enter var(--dur-base) var(--ease-out) both;
}

html[data-shell="manager"]::view-transition-new(root) {
  animation-name: tad-fade-in;
}

/* Bascule clair / sombre (transition de même document lancée par core.js,
   classe interne html.tad-theme-switch) : l'ancien rendu reste immobile et le
   nouveau thème se fond par-dessus, sans montée ni « double fondu ». */
html.tad-theme-switch::view-transition-old(root) {
  animation: none;
}

html.tad-theme-switch::view-transition-new(root) {
  animation: tad-fade-in var(--dur-slow) var(--ease-standard) both;
}


/* -----------------------------------------------------------------------------
   9. Impression : état final, aucune animation
   -------------------------------------------------------------------------- */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html.js [data-reveal]:not(.is-visible),
  html.js [data-reveal-stagger]:not(.is-visible) > *,
  html.js :is(.osm-map, .gtfs-map, .route-map):not(.is-visible) .map-marker {
    opacity: 1 !important;
  }

  html.js [data-draw] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}


/* -----------------------------------------------------------------------------
   10. Mouvement réduit — bloc de sécurité final
   Déclenché par prefers-reduced-motion (sauf data-motion="full") ou par
   data-motion="reduced". Les tokens valent déjà 1ms / 0px / 0ms / échelle 1 ;
   ce bloc couvre en plus les durées littérales des autres feuilles :
   - toute animation est jouée instantanément, sans délai, une seule fois
     (boucles infinies stoppées : pulsation, reflet, flottement…) ;
   - les contenus en attente de révélation s'affichent immédiatement
     (le filet tad-reveal-fallback passe à 0s) et ne sont plus rejoués à
     l'arrivée de .is-visible (pas de clignotement d'une image) ; les tracés
     sont affichés complets d'emblée ;
   - les View Transitions sont coupées (navigation instantanée) ;
   - exception : les indicateurs de chargement (.spinner, .is-loading) gardent
     une rotation lente, information essentielle « en cours ».
   Les deux blocs ci-dessous sont identiques : les garder synchronisés.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *,
  :root:not([data-motion="full"]) *::before,
  :root:not([data-motion="full"]) *::after {
    animation-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 1ms !important;
  }

  :root:not([data-motion="full"]) .spinner,
  :root:not([data-motion="full"]) .spinner::before,
  :root:not([data-motion="full"]) .spinner::after,
  :root:not([data-motion="full"]) .is-loading::before,
  :root:not([data-motion="full"]) .is-loading::after {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }

  :root:not([data-motion="full"]) [data-reveal].is-visible,
  :root:not([data-motion="full"]) [data-reveal-stagger].is-visible > *,
  :root:not([data-motion="full"]) .is-visible .map-marker {
    animation-name: none !important;
  }

  :root:not([data-motion="full"]) [data-draw] {
    stroke-dashoffset: 0 !important;
  }

  /* Règle séparée : un navigateur sans View Transitions ignorerait toute la
     liste de sélecteurs ci-dessus si ces pseudo-éléments y figuraient. */
  :root:not([data-motion="full"])::view-transition-group(*),
  :root:not([data-motion="full"])::view-transition-old(*),
  :root:not([data-motion="full"])::view-transition-new(*) {
    animation: none !important;
  }
}

:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-delay: 0s !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-delay: 0s !important;
  transition-duration: 1ms !important;
}

:root[data-motion="reduced"] .spinner,
:root[data-motion="reduced"] .spinner::before,
:root[data-motion="reduced"] .spinner::after,
:root[data-motion="reduced"] .is-loading::before,
:root[data-motion="reduced"] .is-loading::after {
  animation-duration: 1.6s !important;
  animation-iteration-count: infinite !important;
}

:root[data-motion="reduced"] [data-reveal].is-visible,
:root[data-motion="reduced"] [data-reveal-stagger].is-visible > *,
:root[data-motion="reduced"] .is-visible .map-marker {
  animation-name: none !important;
}

:root[data-motion="reduced"] [data-draw] {
  stroke-dashoffset: 0 !important;
}

:root[data-motion="reduced"]::view-transition-group(*),
:root[data-motion="reduced"]::view-transition-old(*),
:root[data-motion="reduced"]::view-transition-new(*) {
  animation: none !important;
}