/*
 * Plugin Accessibilité GLPI — Feuille de style principale
 * RGAA 10.7 : Focus visible sur tous les éléments interactifs
 * RGAA 12.11 : Lien d'évitement
 *
 * Thème widget : Encre & Craie
 * Panneau clair haute lisibilité — craie (#FAFAF7), encre (#14161A),
 * accent outremer (#1A3FB8). Variante sombre via override de tokens
 * dans a11y-dark.css (html[data-a11y-dark="1"]).
 * Cibles tactiles ≥ 44 × 44 px (WCAG 2.5.5)
 */

/* ─────────────────────────────────────────────────────────────────────────
   Variables globales
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* Échelle typographique — modifiée par JS */
    --a11y-font-scale:   1;

    /* Focus visible (RGAA 10.7 / WCAG 1.4.11 — ratio #005FCC sur blanc = 4.6:1 ✓) */
    --a11y-focus-color:  #005FCC;
    --a11y-focus-width:  3px;
    --a11y-focus-offset: 3px;

    /* Surlignage des titres — signal distinct du focus, doit pouvoir diverger */
    --a11y-highlight-color: #005FCC;

    /* Palette widget — clair, accent bleu (inspiration Sienna) */
    --aw-bg:           #F9F9F9;
    --aw-bg-surface:   #FFFFFF;
    --aw-bg-hover:     rgba(0 0 0 / .06);
    --aw-tile-bg:      #FFFFFF;
    --aw-border:       #DEDEDE;
    --aw-border-hover: #8A8F98;
    --aw-text:         #1A1A1A;  /* ≈ 17:1 sur #F9F9F9 (AAA) */
    --aw-text-muted:   #4D4D4D;  /* ≈ 8:1 sur #F9F9F9 (AAA) */
    --aw-accent:       #0048FF;  /* blanc sur accent ≈ 6.9:1 (AA) */
    --aw-accent-strong: #0036C2;
    --aw-accent-dim:   rgba(0 72 255 / .09);
    --aw-on-accent:    #FFFFFF;
    --aw-trigger-bg:   #00008F;  /* bouton rond, blanc ≈ 15:1 */
    --aw-knob-on:      #FFFFFF;
    --aw-track-off:    #E4E4E4;
    --aw-radius-panel: 8px;
    --aw-radius-ctrl:  6px;

    /* Ancrage du widget (trigger + panneau restent alignés).
       Le bottom élevé évite les éléments flottants GLPI du coin bas-droit
       (bouton d'aide helpdesk, actions de formulaire). safe-area pour iOS. */
    --aw-offset-right:  20px;
    --aw-offset-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    --aw-shadow-panel: 0 0 20px rgba(0 0 0 / .35);
}

/* ─────────────────────────────────────────────────────────────────────────
   Échelle typographique globale (RGAA 10.4)
   ───────────────────────────────────────────────────────────────────────── */
html {
    font-size: calc(1rem * var(--a11y-font-scale, 1));
}

/* ─────────────────────────────────────────────────────────────────────────
   Focus visible universel (RGAA 10.7)
   Bootstrap 5 efface outline via :focus { outline: 0 } — on surcharge.
   :focus-visible cible uniquement la navigation clavier, pas le clic souris.
   ───────────────────────────────────────────────────────────────────────── */
html[data-a11y-baseline="1"] :focus-visible {
    outline:        var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
    outline-offset: var(--a11y-focus-offset) !important;
    border-radius:  2px;
}

html[data-a11y-baseline="1"].js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

/* Le focus visible du widget lui-même reste toujours actif (RGAA 10.7),
   indépendamment de l'interrupteur maître — le widget est notre propre UI. */
#a11y-widget-root :focus-visible {
    outline:        var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
    outline-offset: var(--a11y-focus-offset) !important;
    border-radius:  2px;
}

/* Focus sur Select2 (géré par JS a11y-focus.js) */
.select2-container.a11y-focus-within .select2-selection {
    outline:        var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
    outline-offset: var(--a11y-focus-offset) !important;
}

/* ── Surlignage des titres ─────────────────────────────────────────────────
   Contour sur la hiérarchie de titres, pour repérer la structure d'une page
   d'un coup d'œil. Un outline ne modifie pas le flux : aucun décalage de mise
   en page, contrairement à une bordure. Pas de background-color, qui casserait
   le contraste des titres déjà colorés par GLPI.
   Scopé sous l'interrupteur maître. */
html[data-a11y-baseline="1"][data-a11y-highlight-titles="1"] h1,
html[data-a11y-baseline="1"][data-a11y-highlight-titles="1"] h2,
html[data-a11y-baseline="1"][data-a11y-highlight-titles="1"] h3,
html[data-a11y-baseline="1"][data-a11y-highlight-titles="1"] h4,
html[data-a11y-baseline="1"][data-a11y-highlight-titles="1"] h5,
html[data-a11y-baseline="1"][data-a11y-highlight-titles="1"] h6 {
    outline:        2px solid var(--a11y-highlight-color);
    outline-offset: 2px;
}

/* Le panneau du widget garde ses propres titres non surlignés */
html[data-a11y-baseline="1"][data-a11y-highlight-titles="1"] #a11y-panel h2,
html[data-a11y-baseline="1"][data-a11y-highlight-titles="1"] #a11y-panel h3 {
    outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Lien d'évitement (RGAA 12.11)
   Injecté par a11y-skip-link.js comme premier enfant de <body>.
   Invisible par défaut, visible au focus clavier.
   Ratio #fff / #1A3FB8 = 8.5:1 — WCAG AAA ✓
   ───────────────────────────────────────────────────────────────────────── */
.a11y-skip-link {
    position:        absolute;
    top:             -200%;
    left:            0;
    z-index:         99999;
    padding:         .625rem 1.5rem;
    background:      var(--aw-accent);
    color:           #ffffff;
    font-size:       .9375rem;
    font-weight:     700;
    text-decoration: none;
    border-radius:   0 0 8px 0;
    white-space:     nowrap;
    transition:      top .15s ease;
}

.a11y-skip-link:focus {
    top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Zone ARIA live — invisible visuellement, accessible aux AT (RGAA 7.1)
   ───────────────────────────────────────────────────────────────────────── */
.a11y-announcer {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0 0 0 0);
    white-space: nowrap;
    border:     0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Utilitaire : visuellement caché mais accessible aux AT
   ───────────────────────────────────────────────────────────────────────── */
.a11y-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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET — Bouton déclencheur flottant (rond, double liseré — style Sienna)
   Position fixe, coin inférieur droit. 54px ≥ cible tactile 44px (WCAG 2.5.5).
   ═══════════════════════════════════════════════════════════════════════════ */
#a11y-trigger {
    position:        fixed;
    bottom:          var(--aw-offset-bottom);
    right:           var(--aw-offset-right);
    z-index:         9990;

    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           54px;
    height:          54px;
    padding:         0;

    background:      var(--aw-trigger-bg);
    color:           #ffffff;
    border:          4px solid #ffffff;
    outline:         4px solid var(--aw-trigger-bg);
    border-radius:   50%;
    cursor:          pointer;

    box-shadow:      0 5px 15px rgba(37 44 97 / .15),
                     0 2px 4px rgba(93 100 148 / .2);

    transition:      transform .2s ease, box-shadow .2s ease;
}

/* Animation d'entrée légère — seulement si l'OS n'exige pas motion réduit */
@media (prefers-reduced-motion: no-preference) {
    #a11y-trigger {
        animation: a11y-trigger-in .4s cubic-bezier(.22, 1, .36, 1) .6s both;
    }
}

html[data-a11y-motion="reduce"] #a11y-trigger,
html[data-a11y-motion="reduce"] #a11y-panel {
    animation: none !important;
    transition: none !important;
}

@keyframes a11y-trigger-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

#a11y-trigger .a11y-trigger-icon {
    display: flex;
    color:   #ffffff;
}

#a11y-trigger:hover,
#a11y-trigger[aria-expanded="true"] {
    transform: scale(1.06);
}

/* Le liseré extérieur est déjà un outline : le focus clavier doit s'en distinguer */
#a11y-trigger:focus-visible {
    outline:        var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
    outline-offset: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET — Panneau de préférences
   En-tête et pied fixes, corps défilant (flex colonne).
   ═══════════════════════════════════════════════════════════════════════════ */
#a11y-panel {
    position:      fixed;
    bottom:        calc(var(--aw-offset-bottom) + 72px);
    right:         var(--aw-offset-right);
    z-index:       9991;
    width:         min(500px, calc(100vw - 40px));
    max-height:    calc(100vh - var(--aw-offset-bottom) - 92px);

    display:       flex;
    flex-direction: column;
    overflow:      hidden;

    background:    var(--aw-bg);
    border:        1px solid var(--aw-border);
    border-radius: var(--aw-radius-panel);
    box-shadow:    var(--aw-shadow-panel);
    color:         var(--aw-text);
    line-height:   1.3;

    transform-origin: bottom right;
}

@media (prefers-reduced-motion: no-preference) {
    #a11y-panel {
        animation: a11y-panel-in .24s cubic-bezier(.22, 1, .36, 1) both;
    }
}

#a11y-panel[hidden] {
    display: none;
}

#a11y-pref-form {
    display:        flex;
    flex-direction: column;
    flex:           1 1 auto;
    min-height:     0;
    margin:         0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Variante « bas-gauche » — posée par a11y-widget.js quand le coin bas-droit
   est déjà occupé par un autre élément flottant (autre plugin / GLPI).
   ───────────────────────────────────────────────────────────────────────── */
html[data-a11y-widget-pos="left"] #a11y-trigger,
html[data-a11y-widget-pos="left"] #a11y-panel {
    right: auto;
    left:  var(--aw-offset-right);
}

html[data-a11y-widget-pos="left"] #a11y-panel {
    transform-origin: bottom left;
}

@keyframes a11y-panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── En-tête ──────────────────────────────────────────────────────────── */
.a11y-panel-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
    min-height:      60px;
    padding:         0 8px 0 18px;
    background:      var(--aw-bg-surface);
    border-bottom:   1px solid var(--aw-border);
}

.a11y-panel-title {
    margin:      0;
    font-size:   1.125rem;
    font-weight: 700;
    color:       var(--aw-text);
    line-height: 1.2;
}

.a11y-panel-actions {
    display: flex;
    gap:     2px;
}

.a11y-icon-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    padding:         0;
    background:      transparent;
    border:          none;
    border-radius:   8px;
    color:           var(--aw-text);
    cursor:          pointer;
    transition:      background .15s;
}

.a11y-icon-btn svg {
    width:  24px;
    height: 24px;
}

.a11y-icon-btn:hover {
    background: var(--aw-bg-hover);
}

/* ── Corps ────────────────────────────────────────────────────────────── */
.a11y-panel-body {
    flex:       1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding:    15px 15px 5px;
}

/* ── Interrupteur maître (ligne pleine largeur) ──────────────────────── */
.a11y-master-row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       14px 16px;
    background:    var(--aw-bg-surface);
    border:        1px solid var(--aw-border);
    border-radius: var(--aw-radius-ctrl);
}

.a11y-ctrl-label {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex:        1;
    min-width:   0;
    font-size:   1rem;
    font-weight: 600;
    /* !important : neutralise la règle GLPI/Tabler « .page label { color } » */
    color:       var(--aw-text) !important;
    cursor:      pointer;
    line-height: 1.3;
    margin:      0;
    padding:     0;
    border:      none;
    background:  none;
}

.a11y-ctrl-icon {
    flex-shrink: 0;
    display:     flex;
    color:       var(--aw-accent);
}

.a11y-ctrl-icon svg {
    width:  24px;
    height: 24px;
}

/* ── Cartes ───────────────────────────────────────────────────────────── */
.a11y-card {
    margin: 0 0 22px;
}

.a11y-card-title {
    margin:      0;
    padding:     15px 0 12px;
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--aw-text-muted);
    line-height: 1.2;
}

/* Groupe de tuiles exclusives (radios) — RGAA 11.7 */
.a11y-tile-group {
    margin:    16px 0 0;
    padding:   0;
    border:    none;
    min-width: 0;
}

.a11y-tile-group-title {
    float:       none;
    width:       100%;
    margin:      0 0 8px;
    padding:     0;
    font-size:   .9375rem;
    font-weight: 600;
    color:       var(--aw-text);
}

/* ── Grille de tuiles : 3 colonnes (2 sous 420px) ───────────────────────
   minmax(0, 1fr) : colonnes réellement égales, même avec un long libellé. */
.a11y-tiles {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   12px;
}

.a11y-tiles + .a11y-tiles,
.a11y-font-stepper + .a11y-tiles,
.a11y-tiles + .a11y-tile-group {
    margin-top: 12px;
}

.a11y-tile {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    /* Pas de min-height ici : une valeur explicite annulerait le minimum
       automatique d'aspect-ratio, qui laisse la tuile grandir avec un long
       libellé au lieu de le faire déborder. */
    aspect-ratio:    6 / 5;
    margin:          0;
    padding:         8px 10px;

    background:      var(--aw-tile-bg);
    border:          1px solid var(--aw-border);
    border-radius:   var(--aw-radius-ctrl);
    color:           var(--aw-text) !important;
    cursor:          pointer;
    text-align:      center;
    line-height:     1.3;
    transition:      border-color .2s ease, background .2s ease;
}

/* Tuiles texte seul (niveaux) : pas besoin du format carré */
.a11y-tile--compact {
    aspect-ratio: auto;
    min-height:   52px;   /* cible tactile ≥ 44px (WCAG 2.5.5) */
    gap:          6px;
    padding:      12px 8px;
}

.a11y-tile:hover {
    border-color: var(--aw-accent);
}

.a11y-tile-icon {
    display: flex;
    color:   var(--aw-text);
}

.a11y-tile-icon svg {
    width:  24px;
    height: 24px;
}

.a11y-tile-label {
    font-size:     .9375rem;
    font-weight:   500;
    overflow-wrap: anywhere;
}

/* État sélectionné — :has() natif + classe .is-selected posée par le JS */
.a11y-tile.is-selected,
.a11y-tile:has(input:checked) {
    background:   var(--aw-accent);
    border-color: var(--aw-accent);
    color:        var(--aw-on-accent) !important;
}

.a11y-tile.is-selected .a11y-tile-icon,
.a11y-tile:has(input:checked) .a11y-tile-icon {
    color: var(--aw-on-accent);
}

/* Coche dans l'angle — l'état ne repose pas sur la couleur seule
   (RGAA 3.1 / WCAG 1.4.1). Texte alternatif vide : l'état est déjà restitué
   par l'input. Première ligne = repli sans syntaxe alt. */
.a11y-tile.is-selected::before,
.a11y-tile:has(input:checked)::before {
    content:     '✓';
    content:     '✓' / '';
    position:    absolute;
    top:         5px;
    right:       8px;
    font-size:   .8125rem;
    font-weight: 800;
    line-height: 1;
}

/* Focus clavier reporté de l'input masqué vers la tuile */
.a11y-tile:has(input:focus-visible) {
    outline:        var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
    outline-offset: 2px;
}

/* ── Taille du texte : stepper −/+ ───────────────────────────────────── */
.a11y-font-stepper {
    margin:        0;
    padding:       18px 20px;
    min-width:     0;
    background:    var(--aw-tile-bg);
    border:        1px solid var(--aw-border);
    border-radius: var(--aw-radius-ctrl);
}

.a11y-font-stepper legend {
    float:  left;   /* garde la légende dans la boîte du fieldset */
    width:  100%;
    cursor: default;
}

.a11y-stepper-row {
    clear:           both;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     16px;
}

.a11y-step-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    padding:         0;
    background:      var(--aw-accent);
    border:          none;
    border-radius:   50%;
    color:           var(--aw-on-accent);
    cursor:          pointer;
    transition:      background .15s, opacity .15s;
}

.a11y-step-btn svg {
    width:  22px;
    height: 22px;
}

.a11y-step-btn:hover:not(:disabled) {
    background: var(--aw-accent-strong);
}

.a11y-step-btn:disabled {
    opacity: .35;
    cursor:  not-allowed;
}

.a11y-step-value {
    font-size:   1.125rem;
    font-weight: 600;
    color:       var(--aw-text);
    font-variant-numeric: tabular-nums;
}

/* ── Démos « les réglages se montrent » ──────────────────────────────────
   - interligne : 3 barres dont l'écart réel suit la valeur (--demo-gap)
   - guide de lecture : mini-pictogramme ligne / masque
   ─────────────────────────────────────────────────────────────────────── */
.a11y-lh-demo,
.a11y-guide-demo {
    display:        flex;
    flex-direction: column;
    gap:            var(--demo-gap, 3px);
    width:          24px;
}

.a11y-lh-demo span,
.a11y-guide-demo span {
    display:       block;
    height:        2px;
    border-radius: 1px;
    background:    currentColor;
    opacity:       .6;
}

.a11y-lh-demo[data-lh="1.00"] { --demo-gap: 3px; }
.a11y-lh-demo[data-lh="1.50"] { --demo-gap: 5px; }
.a11y-lh-demo[data-lh="2.00"] { --demo-gap: 7px; }

.a11y-guide-demo[data-guide="1"] span:nth-child(2) {
    height:  3px;
    opacity: 1;
}

.a11y-guide-demo[data-guide="2"] span:nth-child(1),
.a11y-guide-demo[data-guide="2"] span:nth-child(3) {
    height:  4px;
    opacity: .3;
}

/* ── Interrupteur toggle (role="switch") — interrupteur maître ───────────
   Rendu CSS pur via appearance:none. Cible 44px couverte par la rangée.
   ─────────────────────────────────────────────────────────────────────── */
.a11y-toggle {
    appearance:    none;
    -webkit-appearance: none;
    position:      relative;
    width:         46px;
    height:        26px;
    flex-shrink:   0;
    margin:        0;

    background:    var(--aw-track-off);
    border:        1.5px solid var(--aw-border-hover);
    border-radius: 100px;
    cursor:        pointer;

    transition:    background .2s ease, border-color .2s ease;
}

.a11y-toggle::after {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          3px;
    transform:     translateY(-50%);
    width:         18px;
    height:        18px;
    border-radius: 50%;
    background:    var(--aw-text-muted);
    transition:    transform .22s cubic-bezier(.34, 1.3, .64, 1), background .2s ease;
}

.a11y-toggle:checked {
    background:   var(--aw-accent);
    border-color: transparent;
}

.a11y-toggle:checked::after {
    transform:  translateY(-50%) translateX(20px);
    background: var(--aw-knob-on);
}

/* ── Pied de panneau (messages de statut) ─────────────────────────────── */
.a11y-panel-footer {
    flex-shrink: 0;
    padding:     10px 16px;
    background:  var(--aw-bg-surface);
    border-top:  1px solid var(--aw-border);
    text-align:  center;
}

.a11y-panel-hint {
    margin:      0;
    min-height:  1.5em;
    font-size:   .8125rem;
    color:       var(--aw-text-muted);
    line-height: 1.5;
}

#a11y-panel .a11y-anon-note {
    margin:      6px 0 0;
    font-size:   .8125rem;
    line-height: 1.4;
    color:       var(--aw-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile (≤ 560px) — panneau pleine largeur, 10px de marge.
   Couvre aussi le reflow WCAG 1.4.10 (320px / zoom 400%).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    #a11y-panel,
    html[data-a11y-widget-pos="left"] #a11y-panel {
        left:  10px;
        right: 10px;
        width: auto;
    }

    #a11y-trigger {
        right:  max(14px, env(safe-area-inset-right, 0px));
        bottom: max(14px, env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 420px) {
    .a11y-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:                   8px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   RGAA 3.1 / WCAG 1.4.1 — Information non portée par la couleur seule
   Les liens dans les zones de contenu doivent être distinguables autrement
   que par la couleur (soulignement ou autre indicateur non-chromatique).
   On cible les zones de contenu GLPI, pas la navigation ni les boutons.
   ───────────────────────────────────────────────────────────────────────── */
html[data-a11y-links="1"] .page-body :not(td):not(th) > a:not([class]):not([role]),
html[data-a11y-links="1"] .page-body :not(td):not(th) > a[class=""]:not([role]),
html[data-a11y-links="1"] .ticket-description a,
html[data-a11y-links="1"] .rich-text-content a,
html[data-a11y-links="1"] .card-body p a,
html[data-a11y-links="1"] .form-field a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Soulignement du texte — préférence utilisateur */
html[data-a11y-underline="1"] p,
html[data-a11y-underline="1"] li,
html[data-a11y-underline="1"] td,
html[data-a11y-underline="1"] th,
html[data-a11y-underline="1"] label,
html[data-a11y-underline="1"] h1,
html[data-a11y-underline="1"] h2,
html[data-a11y-underline="1"] h3,
html[data-a11y-underline="1"] h4,
html[data-a11y-underline="1"] h5,
html[data-a11y-underline="1"] h6,
html[data-a11y-underline="1"] dt,
html[data-a11y-underline="1"] dd,
html[data-a11y-underline="1"] figcaption,
html[data-a11y-underline="1"] blockquote,
html[data-a11y-underline="1"] span:not(.badge):not(.visually-hidden):not([aria-hidden]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Impression du rapport RGAA ─────────────────────────────────────────── */
@media print {
    /* Masquer la navbar, sidebar et éléments de navigation GLPI */
    #navbar-menu,
    .sidebar,
    nav[aria-label],
    .a11y-report-actions,
    .alert,
    footer {
        display: none !important;
    }

    /* Tableau pleine largeur */
    .container-fluid {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    /* Forcer les couleurs pour l'impression */
    .badge {
        border: 1px solid currentColor !important;
    }

    a[href]::after {
        content: none !important;
    }
}