/*
 * Page « Publications & ressources » (liste) — styles.
 *
 * PARTAGÉS AVEC LA PAGE « PROJETS DE RECHERCHE » (template-projets-recherche.php), qui doit être
 * cette page à l'identique et reprend donc ses classes « .pub-* » : toute retouche ici vaut pour
 * les deux pages, et c'est voulu (voir l'en-tête de template-projets-recherche.php). La seule
 * différence est le sens de la carte — un fichier à télécharger ici, une page à lire là-bas.
 *
 * Chargés UNIQUEMENT sur ces deux gabarits (voir inc/enqueue.php). Tout est
 * scopé sous « .pub-page » : plusieurs classes (.wrap, .hl, .section-tag, .kick, .sec-title,
 * .reveal, .sfield, .f-select-wrap) sont partagées avec d'autres pages du site et ne doivent
 * fuir ni vers elles, ni vers l'en-tête, ni vers le pied de page. Les polices « Anton » et
 * « Open Sans » sont fournies globalement par style.css (@font-face + enqueue) → non
 * redéclarées ici.
 *
 * JUMELLE DE LA PAGE PHARMACIEN·NES (assets/css/pharmaciens.css), dont cette feuille reprend la
 * bannière, la barre de filtres collante et les cartes de téléchargement : les deux pages
 * listent des documents à télécharger, et le client y retrouve les mêmes gestes. Les valeurs
 * (couleurs, retraits, paliers responsive) sont donc volontairement identiques. Les deux
 * feuilles restent séparées plutôt que partagées : elles sont chargées sur deux gabarits
 * distincts, et une page doit pouvoir évoluer sans repeindre l'autre — c'est le parti pris du
 * thème, une feuille par gabarit.
 *
 * Écarts assumés par rapport à la page Pharmacien·nes :
 *   • ne sont PAS reprises les deux sections qui lui sont propres (cartes de clinique, carte de
 *     contact) : la page Publications n'a que sa bannière, sa barre de filtres et sa liste ;
 *   • la pastille de la carte porte le TYPE de la publication (Mémoire, Rapport d'activité,
 *     Étude, Guide) au lieu de la thématique d'une ordonnance. Sa couleur vient du terme lui-même
 *     (champ ACF « couleur », comme partout sur le site) et arrive en style en ligne dans la
 *     variable « --pub-color » : la feuille ne connaît donc pas la liste des types, et un type
 *     ajouté au back-office arrive avec sa couleur sans toucher au CSS ;
 *   • la mention sous le titre est « année » puis « format · pages · langues » (au lieu de
 *     « cliniques » puis « en vigueur depuis ») : le point médian est porté par la MENTION et ne
 *     s'affiche que si l'année la précède, pour ne jamais laisser de séparateur orphelin ;
 *   • la barre de filtres ne porte pas de COMPTEUR : la page Pharmacien·nes n'en rend pas non
 *     plus, et un nombre en doublon du menu n'apporterait rien.
 *
 * Communs à la page Pharmacien·nes, et pour les mêmes raisons :
 *   • la PREMIÈRE section en flux reçoit le retrait qui dégage l'en-tête fixe et opaque du site,
 *     et la barre de filtres collante se cale SOUS lui (voir « Dégagement de l'en-tête ») ;
 *   • la carte est réellement CLIQUABLE quand un fichier est joint (classe « .pub-card--link »,
 *     posée par le gabarit) : la main n'annonce jamais une action inexistante ;
 *   • la classe de masquage du filtrage est « .is-hidden » et non « .hidden » : la page emploie
 *     par ailleurs l'ATTRIBUT « hidden » (message « aucun résultat »), et deux mécanismes
 *     homonymes finiraient par se confondre ;
 *   • LIENS : style.css pose « a { display: block } » pour tout le site, et le scope de la page
 *     remet « text-decoration: none » et « color: inherit ». Le bouton reçoit donc ici un
 *     « display » explicite, et son libellé garde sa couleur au survol ;
 *   • sans JavaScript, les blocs « .reveal » sont visibles d'office (@media scripting: none) ;
 *     l'apparition est aussi neutralisée en « mouvement réduit ». Aucun contenu ne peut rester
 *     invisible faute de script.
 */

/* ============================================================================
 * Cadre de la page
 * ========================================================================= */

.pub-page,
.pub-page *,
.pub-page *::before,
.pub-page *::after {
  box-sizing: border-box;
}
.pub-page {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: #1d1a55;
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.pub-page p {
  margin: 0;
}
.pub-page a {
  text-decoration: none;
  color: inherit;
}
.pub-page input,
.pub-page select {
  font-family: inherit;
}
.pub-page .wrap {
  max-width: none;
  margin: 0;
  padding: 0 var(--pub-gutter);
}

/* ============================================================================
 * Dégagement de l'en-tête
 *
 * L'en-tête du thème est en position:fixed et opaque : sans retrait, il recouvrirait le haut de
 * la première section. Le retrait est porté par la première section EN FLUX, quelle qu'elle
 * soit : la bannière d'ordinaire, la barre de filtres si la bannière est entièrement vidée au
 * back-office.
 *
 * L'en-tête n'a pas une hauteur unique : la bande d'alerte qui le surmonte s'affiche ou non
 * selon un interrupteur du back-office (« alert_show »). Les deux états sont traités, au lieu
 * de réserver toujours la hauteur maximale : sinon un ruban blanc s'intercalerait entre la
 * barre de navigation et la bannière dès que la bande d'alerte est masquée.
 *
 * Hauteurs mesurées, en pixels :
 *
 *                    sans la bande   avec la bande
 *   ≥ 1280 px             104             146
 *   ≤ 1279 px              59             101
 *
 * La bannière a son propre retrait haut (76 px) : les deux s'ajoutent, la
 * variable « --pub-head » portant la seule part de l'en-tête. C'est aussi elle qui donne son
 * « top » à la barre de filtres collante — les deux valeurs ne peuvent donc pas se désaccorder.
 * ========================================================================= */

.pub-page {
  --pub-head: 104px;
  --pub-gutter: 26px;
}
body:has(.alert-section) .pub-page {
  --pub-head: 146px;
}
.pub-page > :first-child {
  padding-top: var(--pub-head);
}
/* Si la bannière est entièrement vidée au back-office, la première section en flux devient la
   barre de filtres — qui est COLLANTE. Un retrait interne la ferait mesurer 104 px de plus et
   s'additionnerait à son « top ». Elle reçoit donc une marge EXTERNE, qui dégage l'en-tête sans
   la gonfler. */
.pub-page > .filter-zone:first-child {
  padding-top: 0;
  margin-top: var(--pub-head);
}

/* ============================================================================
 * Éléments communs : pastille, sur-titre, grands titres, apparitions
 * ========================================================================= */

.pub-page .pub-hero .title .section-tag {
  z-index: 2;
  left: 0;
  top: -53px;
}
.pub-page .sec-title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #1d1a55;
}
.pub-page .sec-title .hl {
  background: linear-gradient(#bddfec, #bddfec) no-repeat;
  background-size: 100% 1.19em;
  background-position: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pub-page .kick {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #e9511c;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pub-page .kick::before {
  content: '';
  width: 22px;
  height: 2px;
  background: #e9511c;
  border-radius: 2px;
}

@keyframes pub-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pub-page .hr {
  animation: pub-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.pub-page .hr2 {
  animation-delay: 0.12s;
}
.pub-page .hr3 {
  animation-delay: 0.22s;
}
.pub-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pub-page .reveal.in {
  opacity: 1;
  transform: none;
}

/* ============================================================================
 * Bannière — pastille, grand titre, chapeau
 * ========================================================================= */

.pub-page .pub-hero {
  position: relative;
  overflow: hidden;
  background: #055da8;
  color: #fff;
}
.pub-page .pub-hero .wrap {
  position: relative;
  z-index: 1;
  padding-top: 76px;
  padding-bottom: 70px;
}
/* La bannière porte le dégagement de l'en-tête : il s'ajoute à son retrait propre, sur le
   conteneur qui porte celui-ci (la section, elle, n'a pas de retrait). */
.pub-page > .pub-hero:first-child {
  padding-top: 0;
}
.pub-page > .pub-hero:first-child .wrap {
  padding-top: calc(var(--pub-head) + 96px);
}
.pub-page .pub-hero h1 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(42px, 5.4vw, 84px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.pub-page .pub-hero h1 .hl {
  color: #bddfec;
}
.pub-page .pub-lead {
  font-size: 17px;
  line-height: 1.75;
  color: #dbe8f5;
  max-width: 600px;
}

/* ============================================================================
 * Barre de filtres — menu « type de publication », recherche
 * ========================================================================= */

.pub-page .filter-zone {
  position: sticky;
  top: var(--pub-head);
  z-index: 40;
  background: #fff;
  border-top: 1px solid #e1e8f3;
  border-bottom: 1px solid #e1e8f3;
}
.pub-page .filter-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  padding: 14px var(--pub-gutter);
  flex-wrap: wrap;
}
.pub-page .filter-left,
.pub-page .filter-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.pub-page .f-label {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #8a90ad;
  white-space: nowrap;
}
.pub-page .f-select-wrap {
  position: relative;
}
.pub-page .f-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 40px 10px 18px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  font-weight: 400;
  color: #055da8;
  border: 1px solid #055da8;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  outline: none;
  height: 40px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.pub-page .f-select-wrap select:hover {
  border-color: #055da8;
  background: #eef6fb;
}
.pub-page .f-select-wrap select:focus {
  border-color: #055da8;
  box-shadow: 0 0 0 3px rgba(5, 93, 168, 0.15);
}
.pub-page .f-select-wrap .f-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #055da8;
  pointer-events: none;
}
.pub-page .sfield {
  position: relative;
}
.pub-page .sfield input {
  border: 1px solid #cfd9e8;
  border-radius: 50px;
  padding: 9px 16px 9px 38px;
  font-size: 14px;
  background: #fff;
  outline: none;
  width: 220px;
  max-width: 100%;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.pub-page .sfield input:focus {
  border-color: #055da8;
  box-shadow: 0 0 0 3px rgba(5, 93, 168, 0.15);
}
.pub-page .sfield::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url('../svgs/header/magnifying-glass.svg') center/contain no-repeat;
  opacity: 0.55;
}

/* ============================================================================
 * Les publications — cartes, pastille de type, bouton de téléchargement
 * ========================================================================= */

.pub-page .pub-list {
  padding: 64px 0 80px;
}
.pub-page .pub-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.pub-page .pub-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 6px;
}
.pub-page .pub-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border: 1px solid #c9d3e0;
  border-left-width: 4px;
  /* Couleur du TYPE de publication, servie en style en ligne par le gabarit ; le bleu du site
     sert de repli. */
  border-left-color: var(--pub-color, #055da8);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
/* La main n'apparaît que sur une carte réellement cliquable — celle qui porte un fichier. */
.pub-page .pub-card--link {
  cursor: pointer;
}
.pub-page .pub-card:hover,
.pub-page .pub-card:focus-within {
  transform: rotate(-0.8deg);
  box-shadow: 0 16px 36px rgba(13, 16, 50, 0.1);
}
.pub-page .pub-card.is-hidden {
  display: none;
}
/* Le titre et les mentions restent l'un SOUS l'autre, dans la première colonne, que la carte
   porte un bouton ou non. Sans cette contrainte, une carte sans bouton (aucun fichier joint)
   laisse la deuxième colonne libre : la grille y place alors la mention « 2024 · PDF », qui
   remonte en haut à droite au lieu de suivre le titre. */
.pub-page .pc-head,
.pub-page .pc-body {
  grid-column: 1;
}
.pub-page .pc-head {
  padding: 24px 30px 0;
}
.pub-page .pc-type {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--pub-color, #055da8);
  border-radius: 4px;
  padding: 5px 11px;
  margin-bottom: 12px;
}
.pub-page .pc-head h3 {
  font-family: 'Open Sans', sans-serif;
  text-transform: none;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #1d1a55;
  text-wrap: pretty;
}
.pub-page .pc-body {
  padding: 11px 30px 24px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}
.pub-page .pc-meta,
.pub-page .pc-year {
  font-size: 14px;
  font-weight: 500;
  color: #5b6078;
}
/* Séparateur porté par la MENTION (« PDF · 24 p. · FR/EN »), donc seulement quand l'année la
   précède réellement : une publication sans année n'affiche pas de « · » orphelin. */
.pub-page .pc-year + .pc-meta::before {
  content: '· ';
}
.pub-page .pc-foot {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  align-items: center;
  padding: 0 24px 0 0;
}
.pub-page .pc-dl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #e9511c;
  color: #fff;
  border: 1px solid #e9511c;
  border-radius: 5px;
  padding: 12px 22px;
  font-family: 'Open Sans', sans-serif;
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.pub-page .pub-card:hover .pc-dl,
.pub-page .pub-card:focus-within .pc-dl {
  background: #fff;
  color: #e9511c;
}
.pub-page .pub-empty {
  padding: 60px 0;
  text-align: center;
  font-size: 16px;
  color: #8a90ad;
}

/* ============================================================================
 * Responsive (mêmes paliers que la page Pharmacien·nes)
 * ========================================================================= */

@media (max-width: 1279px) {
  .pub-page {
    --pub-head: 59px;
    --pub-gutter: 10px;
  }
  body:has(.alert-section) .pub-page {
    --pub-head: 101px;
  }
}

@media (max-width: 640px) {
  .pub-page .filter-bar {
    padding: 12px var(--pub-gutter);
  }
  .pub-page .filter-right {
    margin-left: 0;
    width: 100%;
  }
  .pub-page .sfield {
    flex: 1;
  }
  .pub-page .sfield input {
    width: 100%;
  }
  .pub-page .pub-hero .wrap {
    padding-top: 56px;
    padding-bottom: 52px;
  }
  .pub-page > .pub-hero:first-child .wrap {
    padding-top: calc(var(--pub-head) + 56px);
  }
  .pub-page .pub-card {
    grid-template-columns: 1fr;
  }
  .pub-page .pc-foot {
    grid-row: auto;
    grid-column: 1;
    padding: 0 30px 24px;
  }
}

/* ============================================================================
 * Focus clavier
 *
 * Le menu et la recherche neutralisent leur liseré (« outline: none ») pour porter leur propre
 * halo au focus : sans le liseré reposé ICI, la page deviendrait inutilisable au clavier. Il
 * doit rester APRÈS ces déclarations — à spécificité égale, c'est la dernière règle du fichier
 * qui gagne. Même correctif que sur les pages Pharmacien·nes et Espace média.
 * ========================================================================= */

.pub-page .f-select-wrap select:focus-visible,
.pub-page .sfield input:focus-visible,
.pub-page .pc-dl:focus-visible {
  outline: 3px solid #e9511c;
  outline-offset: 3px;
}
.pub-page .pub-card--link:focus-visible {
  outline: 3px solid #e9511c;
  outline-offset: 3px;
}

/* ============================================================================
 * Mouvement réduit et absence de script
 *
 * ⚠ Ces deux blocs neutralisent des déclarations posées plus haut avec la MÊME spécificité : ils
 * doivent rester EN FIN DE FEUILLE, sinon ils perdent (à spécificité égale, c'est l'ordre du
 * fichier qui tranche) et les contenus animés resteraient invisibles sans script.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .pub-page .hr,
  .pub-page .reveal,
  .pub-page .reveal.in {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pub-page .pub-card {
    transition: none;
  }
  .pub-page .pub-card:hover,
  .pub-page .pub-card:focus-within {
    transform: none;
  }
}

@media (scripting: none) {
  .pub-page .reveal,
  .pub-page .reveal.in {
    opacity: 1;
    transform: none;
  }
  /* Sans script, le filtrage n'existe pas : toutes les cartes s'affichent, et la barre de
     filtres n'a plus rien à piloter. */
  .pub-page .pub-card.is-hidden {
    display: grid;
  }
  .pub-page .filter-zone {
    display: none;
  }
}

@media (max-width: 1279px) {
  .pub-page .pub-hero .title .section-tag {
    top: -39px;
  }
}

@media (max-width: 767px) {
  .pub-page .pub-hero .title .section-tag {
    top: -34px;
  }
}

@media (min-width: 1700px) {
  .pub-page {
    --pub-head: 7.2227vw;
    --pub-gutter: 1.8057vw;
  }
  body:has(.alert-section) .pub-page {
    --pub-head: 10.1395vw;
  }
  .pub-page .pub-hero .title .section-tag {
    top: -3.6808vw;
  }
  .pub-page .sec-title {
    font-size: clamp(1.9446vw, 3.6vw, 3.1946vw);
  }
  .pub-page .kick {
    font-size: 0.9723vw;
    margin-bottom: 0.9723vw;
    gap: 0.6945vw;
  }
  .pub-page .kick::before {
    width: 1.5279vw;
    height: 0.1389vw;
    border-radius: 0.1389vw;
  }
  .pub-page .reveal {
    transform: translateY(1.5279vw);
  }
  .pub-page .pub-hero .wrap {
    padding-top: 5.2781vw;
    padding-bottom: 4.8614vw;
  }
  .pub-page > .pub-hero:first-child .wrap {
    padding-top: calc(var(--pub-head) + 6.6671vw);
  }
  .pub-page .pub-hero h1 {
    font-size: clamp(2.9168vw, 5.4vw, 5.8337vw);
    margin-bottom: 1.5279vw;
  }
  .pub-page .pub-lead {
    font-size: 1.1806vw;
    max-width: 41.6692vw;
  }
  .pub-page .filter-zone {
    border-top: 0.0694vw solid #e1e8f3;
    border-bottom: 0.0694vw solid #e1e8f3;
  }
  .pub-page .filter-bar {
    gap: 1.2501vw;
    padding: 0.9723vw var(--pub-gutter);
  }
  .pub-page .filter-left,
  .pub-page .filter-right {
    gap: 0.6945vw;
  }
  .pub-page .f-label {
    font-size: 0.9723vw;
  }
  .pub-page .f-select-wrap select {
    padding: 0.6945vw 2.7779vw 0.6945vw 1.2501vw;
    font-size: 0.9028vw;
    border: 0.0694vw solid #055da8;
    border-radius: 3.4724vw;
    height: 2.7779vw;
  }
  .pub-page .f-select-wrap select:focus {
    box-shadow: 0 0 0 0.2083vw rgba(5, 93, 168, 0.15);
  }
  .pub-page .f-select-wrap .f-arrow {
    right: 0.9723vw;
    font-size: 0.7639vw;
  }
  .pub-page .sfield input {
    border: 0.0694vw solid #cfd9e8;
    border-radius: 3.4724vw;
    padding: 0.625vw 1.1112vw 0.625vw 2.639vw;
    font-size: 0.9723vw;
    width: 15.2787vw;
  }
  .pub-page .sfield input:focus {
    box-shadow: 0 0 0 0.2083vw rgba(5, 93, 168, 0.15);
  }
  .pub-page .sfield::before {
    left: 0.9723vw;
    width: 0.9723vw;
    height: 0.9723vw;
  }
  .pub-page .pub-list {
    padding: 4.4447vw 0 5.5559vw;
  }
  .pub-page .pub-head {
    gap: 2.2224vw;
    margin-bottom: 2.5002vw;
  }
  .pub-page .pub-grid {
    gap: 1.1112vw;
    padding-top: 0.4167vw;
  }
  .pub-page .pub-card {
    border: 0.0694vw solid #c9d3e0;
    border-left-width: 0.2778vw;
    border-radius: 0.2778vw;
  }
  .pub-page .pub-card:hover,
  .pub-page .pub-card:focus-within {
    box-shadow: 0 1.1112vw 2.5002vw rgba(13, 16, 50, 0.1);
  }
  .pub-page .pc-head {
    padding: 1.6668vw 2.0835vw 0;
  }
  .pub-page .pc-type {
    font-size: 0.9723vw;
    border-radius: 0.2778vw;
    padding: 0.3472vw 0.7639vw;
    margin-bottom: 0.8334vw;
  }
  .pub-page .pc-head h3 {
    font-size: clamp(1.2501vw, 1.7vw, 1.5973vw);
  }
  .pub-page .pc-body {
    padding: 0.7639vw 2.0835vw 1.6668vw;
    gap: 0.6945vw;
  }
  .pub-page .pc-meta,
  .pub-page .pc-year {
    font-size: 0.9723vw;
  }
  .pub-page .pc-foot {
    padding: 0 1.6668vw 0 0;
  }
  .pub-page .pc-dl {
    gap: 0.8334vw;
    border: 0.0694vw solid #e9511c;
    border-radius: 0.3472vw;
    padding: 0.8334vw 1.5279vw;
    font-size: 0.9723vw;
  }
  .pub-page .pub-empty {
    padding: 4.1669vw 0;
    font-size: 1.1112vw;
  }
      .pub-page .f-select-wrap select:focus-visible,
  .pub-page .sfield input:focus-visible,
  .pub-page .pc-dl:focus-visible {
    outline: 0.2083vw solid #e9511c;
    outline-offset: 0.2083vw;
  }
  .pub-page .pub-card--link:focus-visible {
    outline: 0.2083vw solid #e9511c;
    outline-offset: 0.2083vw;
  }
}