/* ============================================================================================================
   IDENTITÉ AGREEN — « Bande de tonte »
   Feuille commune ajoutée à chaque page interne par build-dist.js (pas aux pages publiques des clients).

   Le motif : les rayures en diagonale qu'une tondeuse robot laisse sur une pelouse. C'est le seul élément fort de
   l'identité : une fine bande en haut de chaque app et le grand en-tête du Hub. Tout le reste reste calme.

   Couleurs : Sapin (texte, surfaces sombres), Gazon (actions), Tonte (fonds doux), Pré (fond de page, vert-gris frais)
   et Balise — le jaune des piquets de balisage —, réservé au focus clavier et aux repères « vous êtes ici ».
   Polices : Bricolage Grotesque (titres, grands chiffres) et Atkinson Hyperlegible Next (texte, lisible en plein soleil).

   Chaque app garde sa mise en page et ses propres noms de variables : ce fichier redonne à ces variables les valeurs
   de l'identité. « :root:root » est plus précis que le « :root » des apps : il l'emporte quel que soit l'ordre de
   chargement.
   ============================================================================================================ */
:root:root {
  /* ----- Identité ----- */
  --ag-sapin: #12382b;
  --ag-gazon: #1e6e45;
  --ag-gazon-fonce: #155535;
  --ag-gazon-clair: #2f8a58;
  --ag-tonte: #d7e4cf;
  --ag-tonte-pale: #e7eee2;
  --ag-pre: #eef2ea;
  --ag-pre-clair: #f6f8f3;
  --ag-papier: #ffffff;
  --ag-balise: #f2c230;
  --ag-texte: #12382b;
  --ag-texte-doux: #566a5f;
  --ag-texte-second: #3e5348;
  --ag-ligne: #d4ddd1;
  --ag-ligne-forte: #b8c7b5;
  --ag-ambre: #a6620b;
  --ag-ambre-fond: #fbefd4;
  --ag-rouge: #b23a2f;
  --ag-rouge-fonce: #8a2a22;
  --ag-rouge-fond: #f8e4e0;
  --ag-bleu: #2f6a9c;
  --ag-bleu-fond: #e3edf6;
  --ag-display: 'Bricolage Grotesque', 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --ag-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ag-ombre: 0 1px 2px rgba(18, 56, 43, .07);
  --ag-ombre-moyenne: 0 2px 4px rgba(18, 56, 43, .06), 0 10px 24px -14px rgba(18, 56, 43, .22);
  --ag-ombre-haute: 0 24px 48px -18px rgba(18, 56, 43, .35);
  /* Pelouse fraîchement tondue : bandes claires et foncées en diagonale. */
  --ag-bandes: repeating-linear-gradient(118deg, #1e6e45 0 22px, #2a7d50 22px 44px);
  --ag-bandes-sombres: repeating-linear-gradient(118deg, rgba(255, 255, 255, .045) 0 46px, rgba(255, 255, 255, 0) 46px 92px);

  /* ----- Familles de variables des apps → identité ----- */
  /* Vert principal */
  --green: var(--ag-gazon); --green-700: var(--ag-gazon); --forest-700: var(--ag-gazon); --violet-700: var(--ag-gazon);
  --sav-green: var(--ag-gazon); --plan-green: var(--ag-gazon); --primary: var(--ag-gazon); --border-active: var(--ag-gazon); --viz-1: var(--ag-gazon);
  --green-dark: var(--ag-gazon-fonce); --green-800: var(--ag-gazon-fonce); --forest-800: var(--ag-gazon-fonce); --violet-800: var(--ag-gazon-fonce);
  --sav-green-dark: var(--ag-gazon-fonce); --plan-green-strong: var(--ag-gazon-fonce); --primary-dark: var(--ag-gazon-fonce); --primary-hover: var(--ag-gazon-fonce);
  --green-900: var(--ag-sapin); --forest-900: var(--ag-sapin); --forest-950: var(--ag-sapin); --violet-900: var(--ag-sapin);
  --green2: var(--ag-gazon-clair); --green-600: var(--ag-gazon-clair); --forest-600: var(--ag-gazon-clair); --violet-600: var(--ag-gazon-clair); --primary-light: var(--ag-gazon-clair);
  --primary-glow: rgba(30, 110, 69, .2); --primary-border: rgba(30, 110, 69, .3);
  /* Fonds doux */
  --mint: var(--ag-tonte-pale); --soft: var(--ag-tonte-pale); --green-soft: var(--ag-tonte-pale); --green-100: var(--ag-tonte-pale); --mint-100: var(--ag-tonte-pale);
  --violet-100: var(--ag-tonte-pale); --sav-mint: var(--ag-tonte-pale); --plan-mint: var(--ag-tonte-pale); --primary-soft: var(--ag-tonte-pale); --surface-green: var(--ag-tonte-pale);
  --green-050: var(--ag-pre-clair); --mint-050: var(--ag-pre-clair); --violet-050: var(--ag-pre-clair); --plan-mint-soft: var(--ag-pre-clair);
  /* Fond de page et surfaces */
  --bg: var(--ag-pre); --page: var(--ag-pre); --bg-color: var(--ag-pre); --bg-dark: var(--ag-pre); --bg-page: var(--ag-pre); --bg-soft: var(--ag-pre); --canvas: var(--ag-pre);
  --paper: var(--ag-papier); --card: var(--ag-papier); --surface: var(--ag-papier); --bg-light: var(--ag-papier); --plan-white: var(--ag-papier);
  --bg-card: var(--ag-papier); --bg-card-hover: var(--ag-papier); --card-bg: var(--ag-papier);
  --bg-input: var(--ag-pre-clair); --bg-surface: var(--ag-pre-clair); --surface-soft: var(--ag-pre-clair); --surface-secondary: var(--ag-pre-clair);
  --surface-muted: var(--ag-pre-clair); --bg-elevated: var(--ag-pre-clair);
  /* Texte */
  --ink: var(--ag-texte); --text-main: var(--ag-texte); --text-dark: var(--ag-texte); --text-primary: var(--ag-texte); --text: var(--ag-texte);
  --plan-ink: var(--ag-texte); --sav-ink: var(--ag-texte);
  --muted: var(--ag-texte-doux); --text-muted: var(--ag-texte-doux); --text-light: var(--ag-texte-doux); --plan-muted: var(--ag-texte-doux); --sav-muted: var(--ag-texte-doux);
  --text-secondary: var(--ag-texte-second);
  /* Traits */
  --line: var(--ag-ligne); --border: var(--ag-ligne); --border-color: var(--ag-ligne); --glass-border: var(--ag-ligne);
  --plan-line: var(--ag-ligne); --sav-line: var(--ag-ligne); --viz-grid: var(--ag-ligne);
  --border-strong: var(--ag-ligne-forte); --border-accent: var(--ag-ligne-forte);
  /* Ombres : presque à plat ; seules les fenêtres flottent. */
  --shadow: var(--ag-ombre); --shadow-sm: var(--ag-ombre); --shadow-xs: var(--ag-ombre); --shadow-soft: var(--ag-ombre);
  --plan-shadow: var(--ag-ombre); --sav-shadow: var(--ag-ombre);
  --shadow-md: var(--ag-ombre-moyenne); --shadow-hover: var(--ag-ombre-moyenne); --shadow-lg: var(--ag-ombre-haute);
  /* Polices */
  --font-family: var(--ag-body); --font-body: var(--ag-body); --font: var(--ag-body); --font-display: var(--ag-display);
  /* Couleurs d'état, accordées à la palette */
  --amber: var(--ag-ambre); --gold: var(--ag-ambre); --plan-amber: var(--ag-ambre); --sav-amber: var(--ag-ambre); --warning: var(--ag-ambre); --accent: var(--ag-ambre);
  --amber-bg: var(--ag-ambre-fond); --amber-soft: var(--ag-ambre-fond); --gold-soft: var(--ag-ambre-fond);
  --red: var(--ag-rouge); --danger: var(--ag-rouge); --error: var(--ag-rouge); --plan-red: var(--ag-rouge); --sav-red: var(--ag-rouge);
  --red-bg: var(--ag-rouge-fond); --red-soft: var(--ag-rouge-fond); --red-dark: var(--ag-rouge-fonce);
  --blue: var(--ag-bleu); --info: var(--ag-bleu); --plan-blue: var(--ag-bleu); --sav-blue: var(--ag-bleu); --viz-2: var(--ag-bleu);
  /* Étiquettes de statut communes (agreen-status.css) */
  --st-done: var(--ag-gazon); --st-done-bg: var(--ag-tonte-pale);
  --st-wait: var(--ag-ambre); --st-wait-bg: var(--ag-ambre-fond);
  --st-late: var(--ag-rouge); --st-late-bg: var(--ag-rouge-fond);
  --st-progress: var(--ag-bleu); --st-progress-bg: var(--ag-bleu-fond);

  scrollbar-color: var(--ag-ligne-forte) transparent;
  accent-color: var(--ag-gazon);
}

/* ----- Base ----- */
html body {
  font-family: var(--ag-body);
  color: var(--ag-texte);
  /* Fond uni : les halos et dégradés décoratifs des apps disparaissent. */
  background: var(--ag-pre);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html body :is(h1, h2, h3, .outfit) {
  font-family: var(--ag-display);
  font-optical-sizing: auto;
  letter-spacing: -.012em;
}
html body :is(input, select, textarea, button) { font-family: inherit; }

/* Signature : la bande de tonte, en haut de chaque écran. */
html body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 2147483000;
  pointer-events: none;
  background: var(--ag-bandes);
}

/* Petites étiquettes au-dessus des titres : en phrase normale plutôt qu'en capitales espacées
   (leur texte est écrit en phrase normale dans les apps, noms propres compris : « Catalogue Odoo »). */
html body :is(.eyebrow, .section-kicker, .hub-eyebrow, .th-kicker) {
  text-transform: none;
  letter-spacing: .005em;
  font-weight: 700;
}

/* Focus clavier : jaune balise, bien visible sur toutes les surfaces. */
html body :focus-visible {
  outline: 3px solid var(--ag-balise);
  outline-offset: 2px;
}
::selection { background: rgba(242, 194, 48, .55); color: var(--ag-sapin); }

/* Chiffres alignés dans les tableaux et compteurs. */
html body :is(table, .stat-value, .kpi strong, .count, .badge-count, .cart-count) { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { scroll-behavior: auto !important; }
}

/* Impression (relevés, rapports) : pas de bande. */
@media print {
  html body::before { display: none; }
  html body { background: #fff; }
}

/* ----- Écrans de connexion : la pelouse tondue en grand, la carte de connexion posée dessus. ----- */
html body :is(.auth-screen, #auth-screen.screen) {
  background: repeating-linear-gradient(118deg, #12382b 0 64px, #17402f 64px 128px) !important;
}
html body #auth-screen.screen::before,
html body #auth-screen.screen::after,
html body .auth-screen::before,
html body .auth-screen::after { display: none !important; }
html body .auth-screen .auth-card {
  border: 0;
  border-radius: 22px;
  box-shadow: var(--ag-ombre-haute);
}
html body .auth-screen :is(.subtle-link, a.subtle-link) { color: var(--ag-texte-doux); }

/* Autres étiquettes en capitales espacées des apps : leur texte est déjà écrit en phrase normale. */
html body :is(.topbar-eyebrow, .shop-primary-kicker, .app-title, .invoice-label, .stat-label, .stat-info span, .metric span,
  .kpi-label, .filter-group label, .form-group label, .summary-data label, .info-section h3, .task-calendar-side h3, .journal-day, .brand-sub) {
  text-transform: none;
  letter-spacing: .005em;
}
html body .modal-eyebrow { text-transform: none; letter-spacing: .005em; }

/* Écrans de connexion construits autrement (Planning, Analyses, Garanties, Activation, Appels, Mails, Clients 360) :
   même pelouse en fond pendant que la connexion est affichée. */
html body.login-bg,
html body:has(#authGate:not([hidden])),
html body:has(#login.login-card:not(.hidden)) {
  background: repeating-linear-gradient(118deg, #12382b 0 64px, #17402f 64px 128px);
}
html body .auth-gate { background: transparent; }

/* Liseré du haut des cartes de connexion : une bande de tonte au lieu du dégradé vert-orange. */
html body :is(.auth-gate .auth-card, #auth-screen.screen .auth-card)::before,
html body #auth-container::after { background: var(--ag-bandes); height: 5px; }
html body #auth-container::before { background: var(--ag-gazon); box-shadow: none; }
html body :is(.auth-gate .auth-card, #auth-screen .auth-card, #auth-container, .login-card) {
  border: 0;
  border-radius: 22px;
  box-shadow: var(--ag-ombre-haute);
}

/* ============================================================================================================
   COMPOSANTS COMMUNS — les mêmes repères dans toutes les apps
   ============================================================================================================ */

/* Marque : le carré « A » en vert sapin, sans dégradé ni halo. */
html body :is(.brand-mark, .auth-mark) {
  background: var(--ag-sapin);
  background-image: none;
  color: #fff;
  font-family: var(--ag-display);
  font-weight: 800;
  box-shadow: none;
}
html body :is(.brand strong, .app-title) { font-family: var(--ag-display); font-weight: 700; letter-spacing: -.01em; }

/* Barres du haut : un simple trait, pas d'ombre. */
html body :is(.topbar, .app-header) { box-shadow: none; border-bottom-color: var(--ag-ligne); }

/* « Vous êtes ici » : l'onglet ou l'entrée de menu actif est en vert sapin, avec le liseré jaune des piquets de
   balisage. Même repère dans toutes les apps, qu'il s'agisse d'un menu latéral ou d'onglets. */
html body :is(.nav-links li.active, .nav-item.active, .module-link.active, .view-tab.active, .tabs button.active, .sm-tabs button.active, .task-calendar-views button.is-active) {
  background: var(--ag-sapin);
  background-image: none;
  border-color: var(--ag-sapin);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--ag-balise);
}
html body :is(.nav-links li.active, .nav-item.active, .module-link.active, .view-tab.active, .tabs button.active, .task-calendar-views button.is-active) :is(a, i, svg, span:not([class*="count"]), strong, small) { color: inherit; }
html body .module-link.active .module-icon { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }

/* Boutons : à plat, sans dégradé, sans halo ni saut au survol. */
html body :is(.btn-primary, .btn.btn-primary, .primary-btn) {
  background: var(--ag-gazon);
  background-image: none;
  border-color: var(--ag-gazon);
  color: #fff;
  box-shadow: none;
}
html body :is(.btn-primary, .btn.btn-primary, .primary-btn):hover:not(:disabled) { background: var(--ag-gazon-fonce); border-color: var(--ag-gazon-fonce); }
html body :is(.btn-secondary, .icon-btn, .btn-hub) { box-shadow: none; }
html body :is(.btn, .btn-primary, .btn-secondary, .icon-btn, .btn-hub, .primary-btn, .action-btn):hover { transform: none; }

/* Panneaux et cartes : un trait, une ombre à peine visible ; pas de saut au survol. */
html body :is(.panel, .glass-card, .kpi-card, .summary-card, .robot-card, .product-card, .feature-card, .stat-card) { box-shadow: var(--ag-ombre); }
html body :is(.panel, .glass-card, .kpi-card, .summary-card, .robot-card, .product-card, .stat-card):hover { transform: none; }

/* Chiffres clés : police d'identité, chiffres alignés. */
html body :is(.kpi-value, .stat-value, .kpi strong, .metric strong, .summary-value, .hero-stats strong, .hero-kpis strong, .total strong) {
  font-family: var(--ag-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* Tableaux : en-têtes en écriture normale, gris doux. */
html body th { text-transform: none; letter-spacing: .005em; }

/* Champs : même focus partout (trait vert, halo jaune balise). */
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus {
  border-color: var(--ag-gazon);
  box-shadow: 0 0 0 3px rgba(242, 194, 48, .38);
  outline: none;
}

/* Fenêtres : fond assombri en vert sapin, fenêtre nette. */
html body .modal-backdrop { background: rgba(18, 56, 43, .45); backdrop-filter: blur(2px); }
html body .modal-overlay { background-color: rgba(18, 56, 43, .45); }
html body :is(.modal-card, .modal-content, .modal-overlay > .modal) { border: 0; box-shadow: var(--ag-ombre-haute); }

/* Messages en bas d'écran : bandeau sapin par défaut (les variantes succès / erreur des apps gardent leur couleur). */
html body .toast { background-color: var(--ag-sapin); color: #fff; border-radius: 12px; box-shadow: var(--ag-ombre-haute); }

/* Grands bandeaux sombres des apps (Appels, Mails, Garanties, Activation) : vert sapin uni, comme le Catalogue. */
html body :is(.operations-board, .page-hero, .warranty-hero) {
  background: var(--ag-sapin);
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}

/* Barres de progression et jauges : la bande de tonte, en petit. */
html body :is(.bar-fill, .progress i, .company-bar b, .inventory-bar span) {
  background: repeating-linear-gradient(118deg, #1e6e45 0 8px, #2a7d50 8px 16px);
}

/* Pas de cercles décoratifs dans les bandeaux sombres : le vert sapin uni suffit. */
html body :is(.page-hero, .warranty-hero, .operations-board)::before,
html body :is(.page-hero, .warranty-hero, .operations-board)::after { display: none; }

/* ============================================================================================================
   PROFIL DU COMPTE, RECONNAISSABLE D'UN COUP D'ŒIL (posé par /agreen-profile.js sur <html data-ag-profil>)
     admin → vert sapin · shop (magasin) → bleu ardoise · tech (technicien) → orange brique
   La couleur du profil prend la bande du haut, le carré « A » de la marque, l'onglet actif et l'en-tête du Hub.
   Les boutons d'action restent verts partout : seule l'identité change de couleur, pas le sens des boutons.
   ============================================================================================================ */
:root:root[data-ag-profil="admin"] {
  --ag-profil: #12382b; --ag-profil-vif: #1e6e45; --ag-profil-clair: #2a7d50; --ag-profil-fond: #e7eee2;
}
:root:root[data-ag-profil="shop"] {
  --ag-profil: #1d4566; --ag-profil-vif: #2f6a9c; --ag-profil-clair: #3f7db2; --ag-profil-fond: #e3edf6;
}
:root:root[data-ag-profil="tech"] {
  --ag-profil: #7a360d; --ag-profil-vif: #c25a14; --ag-profil-clair: #d6732c; --ag-profil-fond: #fbe9dc;
}
html[data-ag-profil] body::before {
  height: 6px;
  background: repeating-linear-gradient(118deg, var(--ag-profil-vif) 0 22px, var(--ag-profil-clair) 22px 44px);
}
html[data-ag-profil] body .brand-mark { background: var(--ag-profil); }
html[data-ag-profil] body :is(.nav-links li.active, .nav-item.active, .module-link.active, .view-tab.active, .tabs button.active, .sm-tabs button.active, .task-calendar-views button.is-active) {
  background: var(--ag-profil);
  border-color: var(--ag-profil);
}

/* Étiquette accrochée à la bande, au centre : le profil en toutes lettres. Ne capte aucun clic. */
#ag-profil-tag {
  position: fixed;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483000;
  pointer-events: none;
  padding: 3px 12px 4px;
  border-radius: 0 0 9px 9px;
  background: var(--ag-profil, #12382b);
  color: #fff;
  font: 700 12px/1.25 var(--ag-body, system-ui, sans-serif);
  letter-spacing: .01em;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* « Voir comme » : un admin regarde l'app comme un autre compte — étiquette en jaune balise pour ne pas l'oublier. */
html[data-ag-apercu] #ag-profil-tag { background: var(--ag-balise); color: var(--ag-sapin); }
@media print { #ag-profil-tag { display: none; } }
/* Téléphone : l'étiquette ne descend plus sur les titres, elle se loge dans la bande, un peu plus épaisse. */
@media (max-width: 760px) {
  html[data-ag-profil] body::before { height: 14px; }
  #ag-profil-tag { top: 0; height: 14px; padding: 0 10px; border-radius: 0; font-size: 10px; line-height: 14px; }
}

/* ============================================================================================================
   DERNIERS DÉGRADÉS DES APPS : à plat, aux couleurs de l'identité.
   Les bandeaux sombres (rendez-vous magasin, en-tête des Pièces) et les carrés de marque propres à certaines apps prennent la couleur du profil,
   comme l'en-tête du Hub : on sait sur quel compte on est, même au fond du Planning ou des Pièces.
   ============================================================================================================ */
html body :is(.view-brand-mark, .logo i, .parts-brand-mark, #admin-view .admin-wordmark-mark) {
  background: var(--ag-profil, var(--ag-sapin));
  background-image: none;
  box-shadow: none;
  color: #fff;
}
html body :is(.magasin-rdv-bar, #magasin-view .magasin-rdv-bar, body:has(.parts-brand-mark) .topbar) {
  background: var(--ag-bandes-sombres), var(--ag-profil, var(--ag-sapin));
  border-color: transparent;
  box-shadow: none;
  color: #fff;
}

html body :is(.magasin-rdv-bar, body:has(.parts-brand-mark) .topbar) :is(.topbar-eyebrow, .topbar-subtitle, .eyebrow) { color: rgba(255, 255, 255, .78); }

/* Titre d'app écrit en dégradé (Atelier, Réparations, Dépannages) : texte sapin plein. */
html body .app-title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ag-sapin);
}

/* Encadrés clairs « mis en avant » : un fond tonte uni au lieu des dégradés vert-crème. */
html body :is(.shop-primary-action, .hero-panel, .details-hero, .shop-dashboard-header, .activation-step.done, .savings-estimate, #expert-login-section) {
  background: var(--ag-tonte-pale);
  background-image: none;
  border-color: var(--ag-tonte);
  box-shadow: none;
}
html body :is(.task-modal-heading, #magasin-view .tech-column) { background: var(--ag-pre-clair); background-image: none; }
html body :is(.form-header, .admin-summary, .trend-chart) { background: var(--ag-papier); background-image: none; }

/* Boutons d'action restants : à plat. Vert pour avancer, bleu pour démarrer, rouge pour supprimer. */
html body :is(.btn-success, .action-btn.finish, .btn-submit, .btn-nav-expert, .open-wizard-main-btn, #tech-task-list .manage-task-btn, #tech-task-list .complete-manual-task-btn) {
  background: var(--ag-gazon);
  background-image: none;
  border-color: var(--ag-gazon);
  box-shadow: none;
  color: #fff;
}
html body :is(.btn-success, .action-btn.finish, .btn-submit, .btn-nav-expert, .open-wizard-main-btn):hover:not(:disabled) { background: var(--ag-gazon-fonce); }
html body .action-btn.start { background: var(--ag-bleu); background-image: none; box-shadow: none; }
html body .btn-danger { background: var(--ag-rouge); background-image: none; box-shadow: none; }
html body .btn-waze { background: #0b9b92; background-image: none; box-shadow: none; }
html body .btn-waze:hover { background: #077f78; }
html body .btn-maps { background: #2563eb; background-image: none; box-shadow: none; }
html body .btn-maps:hover { background: #1d4ed8; }

/* Liserés et jauges restants : la bande de tonte. */
html body :is(.auth-card, .wizard-content)::after { background: var(--ag-bandes); }
html body .wizard-content::before { display: none; }
html body :is(.progress-bar, .delivery-progress-track span, .shop-bar-track span, .is-complete .mini-progress i) {
  background: repeating-linear-gradient(118deg, #1e6e45 0 8px, #2a7d50 8px 16px);
}
html body .objectives-container::before { background: var(--ag-gazon); }
html body .mini-progress i { background: var(--ag-ambre); }
html body .distribution-heading > span { background: var(--ag-sapin); background-image: none; box-shadow: none; }
html body .brand-main { font-family: var(--ag-display); letter-spacing: -.01em; }