/* expertise.css — la page d'une expertise, /fr/expertises/<slug>.
   La chrome (en-tête, plan du site, pied de page) est dans catalogue.css,
   chargée avant celle-ci.

   Les classes numérotées viennent des styles inline de la version 2,
   converties par outils/v2/convertis.mjs : le suffixe -hv porte le survol.
   Celles qui sont nommées (`exp-code`, `exp-chip`, `exp-faq-*`) remplacent
   des styles que la v2 recalculait en JavaScript à chaque rendu ; elles sont
   écrites à la main, en fin de fichier, avec leurs états.

   `--ag-accent` est la couleur de l'expertise, posée sur .ag-page par le
   gabarit. C'est la seule donnée qui descend par une variable CSS. */

.exp-2 {
   position: relative;
   background: #000A1C;
   color: #fff;
   overflow: hidden
}

.exp-3 {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .07;
   background-image: repeating-linear-gradient(135deg, var(--ag-accent) 0 1px, transparent 1px 14px);
   animation: agDrift 20s linear infinite
}

.exp-4 {
   position: relative;
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 64px
}

.exp-5 {
   padding: 34px 0 0;
   display: flex;
   align-items: baseline;
   gap: 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   animation: agFade .7s both
}

.exp-6 {
   color: #FFBA13
}

.exp-7 {
   color: #8DA9C4
}

.exp-8 {
   color: #fff
}

.exp-9 {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
   gap: 64px;
   padding: 44px 0 56px;
   align-items: center
}

.exp-10 {
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both
}

.exp-11 {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 28px
}

.exp-12 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .18em;
   color: var(--ag-accent)
}

.exp-13 {
   margin: 0 0 22px;
   font-size: 58px;
   line-height: 1;
   font-weight: 600;
   letter-spacing: -.045em;
   text-wrap: balance
}

.exp-14 {
   color: var(--ag-accent)
}

.exp-15 {
   margin: 0 0 16px;
   font-size: 23px;
   line-height: 1.3;
   font-weight: 500;
   letter-spacing: -.015em;
   color: #fff;
   max-width: 36ch;
   text-wrap: balance
}

.exp-16 {
   margin: 0;
   font-size: 16.5px;
   line-height: 1.6;
   color: #B9CCDD;
   max-width: 56ch;
   text-wrap: pretty
}

.exp-17 {
   display: flex;
   gap: 12px;
   margin-top: 36px
}

.exp-18 {
   background: #FFBA13;
   color: #000A1C;
   padding: 16px 24px;
   font-size: 15px;
   font-weight: 600;
   transition: background .25s, transform .25s
}

.exp-19-hv:hover {
   background: #fff !important;
   color: #000A1C !important;
   transform: translateY(-2px) !important
}

.exp-20 {
   border: 1px solid rgba(141, 169, 196, .45);
   color: #fff;
   padding: 15px 24px;
   font-size: 15px;
   font-weight: 600;
   transition: background .25s
}

.exp-21-hv:hover {
   background: rgba(255, 255, 255, .08) !important;
   color: #fff !important
}

.exp-22 {
   position: relative;
   height: 500px;
   min-width: 0;
   animation: agRise .9s .15s cubic-bezier(.2, .7, .2, 1) both
}

.exp-23 {
   position: absolute;
   inset: 0
}

.exp-24 {
   position: absolute;
   left: 48px;
   right: 0;
   top: 48px;
   bottom: 40px;
   background: #050E1F;
   border: 1px solid rgba(141, 169, 196, .25);
   display: flex;
   flex-direction: column;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7)
}

.exp-25 {
   height: 42px;
   display: flex;
   align-items: stretch;
   border-bottom: 1px solid rgba(141, 169, 196, .2);
   padding-left: 84px
}

.exp-26 {
   display: flex;
   align-items: center;
   padding: 0 16px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   color: #fff;
   background: #0A1730;
   border-bottom: 2px solid var(--ag-accent)
}

.exp-27 {
   padding: 84px 18px 18px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12.5px;
   line-height: 1.85;
   flex: 1;
   overflow: hidden
}

.exp-28 {
   display: flex;
   white-space: pre-wrap;
   word-break: break-word
}

.exp-29 {
   width: 44px;
   flex: none;
   text-align: right;
   padding-right: 16px;
   color: #33435F
}

.exp-30 {
   padding: 14px 18px;
   border-top: 1px solid rgba(141, 169, 196, .2);
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #8DA9C4
}

.exp-31 {
   width: 7px;
   height: 7px;
   background: var(--ag-accent);
   animation: agPulse 2s ease-in-out infinite
}

.exp-32 {
   position: absolute;
   left: 0;
   top: 0;
   width: 116px;
   height: 116px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
   border-bottom: 4px solid var(--ag-accent)
}

.exp-33 {
   width: 62px;
   height: 62px;
   display: block;
   object-fit: contain
}

.exp-34 {
   font-size: 36px;
   font-weight: 700;
   letter-spacing: -.04em;
   color: #000A1C
}

.exp-35 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   border-top: 1px solid rgba(141, 169, 196, .3)
}

.exp-36 {
   display: flex;
   align-items: baseline;
   gap: 16px;
   padding: 22px 24px 24px 0
}

.exp-37 {
   font-size: 40px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1;
   color: var(--ag-accent);
   white-space: nowrap
}

.exp-38 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #8DA9C4;
   line-height: 1.5
}

.exp-39 {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 18px 0 22px;
   border-top: 1px solid rgba(141, 169, 196, .3);
   overflow-x: auto;
   scrollbar-width: none
}

.exp-40 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #8DA9C4;
   margin-right: 10px;
   flex: none
}

.exp-41 {
   border-bottom: 1px solid #D3E2ED
}

.exp-42 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 92px
}

.exp-43 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #946200;
   margin-bottom: 16px
}

.exp-44 {
   margin: 0 0 44px;
   font-size: 44px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   text-wrap: balance;
   max-width: 22ch
}

.exp-45 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 40px
}

.exp-46 {
   border-top: 2px solid #000A1C;
   padding-top: 26px;
   display: flex;
   flex-direction: column;
   gap: 14px
}

.exp-47 {
   font-size: 56px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: .9;
   color: #FFBA13
}

.exp-48 {
   margin: 0;
   font-size: 24px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.2
}

.exp-49 {
   margin: 0;
   font-size: 16px;
   line-height: 1.6;
   color: #001751;
   text-wrap: pretty
}

.exp-50 {
   background: #F1F6FA;
   border-bottom: 1px solid #D3E2ED
}

.exp-51 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 96px
}

.exp-52 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
   gap: 56px;
   align-items: start
}

.exp-53 {
   position: sticky;
   top: 120px
}

.exp-54 {
   margin: 0 0 28px;
   font-size: 40px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em
}

.exp-55 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #5C7897;
   margin-bottom: 10px
}

.exp-56 {
   display: flex;
   flex-direction: column;
   border-top: 1px solid #D3E2ED
}

.exp-57 {
   display: flex;
   align-items: baseline;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid #D3E2ED;
   font-size: 15.5px;
   font-weight: 500
}

.exp-58 {
   width: 6px;
   height: 6px;
   background: #FFBA13;
   flex: none;
   transform: translateY(-2px)
}

.exp-59 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px
}

.exp-60 {
   background: #fff;
   border: 1px solid #D3E2ED;
   display: flex;
   flex-direction: column;
   color: #000A1C;
   transition: box-shadow .4s, transform .4s cubic-bezier(.2, .7, .2, 1)
}

.exp-61-hv:hover {
   box-shadow: 0 40px 70px -40px rgba(0, 10, 28, .45) !important;
   transform: translateY(-4px) !important;
   color: #000A1C !important
}

.exp-62 {
   position: relative;
   aspect-ratio: 16/10;
   background: #0A1730;
   overflow: hidden
}

.exp-63 {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block
}

.exp-64 {
   padding: 24px 26px 26px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   flex: 1
}

.exp-65 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   color: #5C7897
}

.exp-66 {
   margin: 0;
   font-size: 28px;
   line-height: 1;
   font-weight: 600;
   letter-spacing: -.03em
}

.exp-67 {
   margin: 0;
   font-size: 15px;
   line-height: 1.55;
   color: #001751;
   text-wrap: pretty
}

.exp-68 {
   margin-top: auto;
   padding-top: 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #946200;
   font-weight: 600
}

.exp-69 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 92px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 64px
}

.exp-70 {
   margin: 0 0 30px;
   font-size: 36px;
   line-height: 1.05;
   font-weight: 600;
   letter-spacing: -.03em
}

.exp-71 {
   display: flex;
   flex-direction: column;
   border-top: 1px solid #000A1C
}

.exp-72 {
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) auto;
   gap: 14px;
   align-items: baseline;
   padding: 20px 4px;
   border-bottom: 1px solid #D3E2ED;
   transition: padding .25s
}

.exp-73-hv:hover {
   padding-left: 12px !important
}

.exp-74 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #946200
}

.exp-75 {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.exp-76 {
   font-size: 19px;
   font-weight: 600;
   letter-spacing: -.01em
}

.exp-77 {
   font-size: 14px;
   color: #5C7897;
   line-height: 1.45
}

.exp-78 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #5C7897
}

.exp-79 {
   display: flex;
   align-items: baseline;
   gap: 14px;
   padding: 20px 4px;
   border-bottom: 1px solid #D3E2ED;
   transition: padding .25s
}

.exp-80 {
   font-size: 19px;
   font-weight: 600;
   letter-spacing: -.01em;
   flex: 1
}

.exp-81 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 92px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
   gap: 88px;
   align-items: start
}

.exp-82 {
   margin: 0;
   font-size: 44px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   text-wrap: balance
}

.exp-83 {
   border-top: 1px solid #000A1C
}

.exp-84 {
   all: unset;
   box-sizing: border-box;
   width: 100%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 26px 0;
   font-family: Archivo, system-ui, sans-serif
}

.exp-85 {
   margin: 0;
   font-size: 21px;
   font-weight: 600;
   letter-spacing: -.015em;
   line-height: 1.3;
   color: #000A1C
}

.exp-86 {
   min-height: 0;
   overflow: hidden
}

.exp-87 {
   margin: 0;
   padding: 0 0 26px;
   font-size: 16px;
   line-height: 1.65;
   color: #001751;
   max-width: 64ch;
   text-wrap: pretty
}

.exp-88 {
   background: #000A1C;
   color: #fff
}

.exp-89 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 78px 64px;
   display: grid;
   grid-template-columns: 1.15fr auto;
   gap: 64px;
   align-items: center
}

.exp-90 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #FFBA13;
   margin-bottom: 20px
}

.exp-91 {
   margin: 0 0 16px;
   font-size: 44px;
   line-height: 1.04;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 24ch;
   text-wrap: balance
}

.exp-92 {
   margin: 0;
   font-size: 16px;
   line-height: 1.6;
   color: #8DA9C4;
   max-width: 56ch;
   text-wrap: pretty
}

.exp-93 {
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 280px
}

.exp-94 {
   background: #FFBA13;
   color: #000A1C;
   padding: 16px 26px;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   transition: background .25s, transform .25s
}

.exp-95 {
   border: 1px solid rgba(141, 169, 196, .45);
   color: #fff;
   padding: 15px 26px;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   transition: background .25s
}

/* ===========================================================================
   Écrit à la main : ce que la version 2 calculait en JavaScript.
   =========================================================================== */

/* -- 1. La signature de code ---------------------------------------------
   La v2 posait une couleur sur chaque jeton. On pose une classe par NATURE
   de jeton : la couleur est décidée ici, une fois, et les mots-clés suivent
   l'accent de l'expertise.
   ------------------------------------------------------------------------- */

/* Une ligne de code plus large que la fenêtre se replie au lieu d'en sortir.
   Le conteneur est une grille en ligne — sans `min-width:0`, la colonne du
   code refuse de rétrécir sous sa largeur intrinsèque et déborde. */
.exp-28>span:last-child {
   min-width: 0;
   overflow-wrap: anywhere
}

.exp-code.is-txt {
   color: #D3E2ED
}

.exp-code.is-kw {
   color: var(--ag-accent)
}

.exp-code.is-str {
   color: #F2C48D
}

.exp-code.is-com {
   color: #5C7897
}

.exp-code.is-add {
   color: #3DDC97
}

.exp-code.is-del {
   color: #FF8A8A
}

/* -- 2. Le sélecteur d'expertises voisines -------------------------------
   De vrais liens vers les quinze autres pages. L'expertise courante n'est
   pas un lien : elle porte `aria-current` et cette classe.
   ------------------------------------------------------------------------- */

.exp-chip {
   flex: none;
   white-space: nowrap;
   font-size: 13.5px;
   font-weight: 500;
   padding: 8px 13px;
   border: 1px solid rgba(141, 169, 196, .4);
   background: transparent;
   color: #D3E2ED;
   transition: background .2s, border-color .2s, color .2s
}

.exp-chip:hover {
   border-color: var(--ag-accent);
   color: #fff
}

.exp-chip.is-actif {
   font-weight: 600;
   border-color: var(--ag-accent);
   background: var(--ag-accent);
   color: #000A1C
}

/* -- 3. Les questions fréquentes -----------------------------------------
   Les réponses sont dépliées dans le HTML. Le JavaScript replie les
   suivantes au chargement, en posant `is-off` : sans lui, tout se lit.
   `grid-template-rows` de 1fr à 0fr est ce qui permet d'animer une hauteur
   inconnue à l'avance.
   ------------------------------------------------------------------------- */

.exp-100 {
   border-bottom: 1px solid #D3E2ED
}

/* Le titre ne porte que la sémantique ; c'est le bouton qui est dessiné. */
.exp-101 {
   margin: 0;
   font: inherit
}

.exp-faq-ico {
   flex: none;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   border: 1px solid #FFBA13;
   background: #FFBA13;
   color: #000A1C;
   transform: rotate(45deg);
   transition: transform .3s, background .3s, border-color .3s
}

.ag-faq.is-off .exp-faq-ico {
   border-color: #D3E2ED;
   background: transparent;
   transform: none
}

.exp-faq-corps {
   display: grid;
   grid-template-rows: 1fr;
   overflow: hidden;
   transition: grid-template-rows .35s cubic-bezier(.2, .7, .2, 1)
}

.ag-faq.is-off .exp-faq-corps {
   grid-template-rows: 0fr
}


/* ===========================================================================
   Petits écrans. La version 2 ne descendait pas sous 1280 px : tous les
   paliers ci-dessous sont écrits pour la 4.0. Rien n'est masqué — seules la
   grille, les gouttières et la typographie changent.
   =========================================================================== */

/* -- jusqu'à 1180 px : gouttières 64 → 40 px ----------------------------- */
@media (max-width:1180px) {

   .exp-4,
   .exp-42,
   .exp-51,
   .exp-69,
   .exp-81,
   .exp-89 {
      padding-left: 40px;
      padding-right: 40px
   }

   .exp-9 {
      gap: 40px
   }

   .exp-13 {
      font-size: 48px
   }

   .exp-81 {
      gap: 48px
   }

   .exp-52 {
      gap: 36px
   }
}


/* -- jusqu'à 1100 px : le héros passe sur une colonne --------------------
   À deux colonnes, le titre descendait à six lignes et la signature de code
   n'avait plus la place d'afficher ses cinq lignes.
   ------------------------------------------------------------------------- */
@media (max-width:1100px) {

   .exp-9 {
      grid-template-columns: minmax(0, 1fr);
      gap: 48px;
      padding: 36px 0 48px
   }

   /* La maquette de l'éditeur est décorative : à cette largeur elle prend
     toute la place sans rien apporter. Elle rétrécit au lieu de disparaître
     — rien n'est masqué. */
   .exp-22 {
      height: 380px
   }

   .exp-24 {
      left: 32px;
      top: 32px
   }

   .exp-32 {
      width: 88px;
      height: 88px
   }

   .exp-33 {
      width: 48px;
      height: 48px
   }

   .exp-27 {
      padding-top: 64px;
      font-size: 11.5px
   }

   .exp-45,
   .exp-59 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .exp-52,
   .exp-69,
   .exp-81 {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px
   }

   /* Les deux colonnes collantes ne le sont plus : elles sont devenues des
     lignes, et un bloc collant qui n'a plus rien à surplomber flotte. */
   .exp-53 {
      position: static
   }

   .exp-89 {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px
   }

   .exp-93 {
      min-width: 0
   }
}


/* -- jusqu'à 900 px : colonne unique, gouttières 20 px ------------------- */
@media (max-width:900px) {

   .exp-4,
   .exp-42,
   .exp-51,
   .exp-69,
   .exp-81,
   .exp-89 {
      padding-left: 20px;
      padding-right: 20px
   }

   .exp-42,
   .exp-51,
   .exp-69,
   .exp-81 {
      padding-top: 56px;
      padding-bottom: 60px
   }

   .exp-13 {
      font-size: 38px
   }

   .exp-15 {
      font-size: 20px
   }

   .exp-44,
   .exp-82 {
      font-size: 32px
   }

   .exp-54,
   .exp-70 {
      font-size: 28px
   }

   .exp-91 {
      font-size: 32px
   }

   /* Les trois chiffres passent en colonne : côte à côte, « SOUVENT ASSOCIÉ
     À » tenait sur quatre lignes. */
   .exp-35 {
      grid-template-columns: minmax(0, 1fr)
   }

   .exp-36 {
      padding: 16px 0;
      border-bottom: 1px solid rgba(141, 169, 196, .18)
   }

   .exp-45,
   .exp-59 {
      grid-template-columns: minmax(0, 1fr);
      gap: 28px
   }

   /* La fenêtre d'éditeur garde assez de hauteur pour ses six lignes : à
     300 px, l'encart du logo mangeait la moitié du code et `overflow:hidden`
     coupait le reste sans prévenir. */
   .exp-22 {
      height: 330px
   }

   .exp-27 {
      padding-top: 56px;
      padding-right: 14px;
      font-size: 11px;
      line-height: 1.7
   }

   .exp-29 {
      width: 30px;
      padding-right: 10px
   }

   .exp-17 {
      flex-wrap: wrap
   }

   .exp-72 {
      grid-template-columns: 28px minmax(0, 1fr) auto;
      gap: 10px
   }

   .exp-84 {
      padding: 20px 0;
      gap: 14px
   }

   .exp-85 {
      font-size: 18px
   }
}


/* -- jusqu'à 560 px : typographie du téléphone -------------------------- */
@media (max-width:560px) {

   .exp-13 {
      font-size: 31px
   }

   .exp-15 {
      font-size: 18px
   }

   .exp-44,
   .exp-82,
   .exp-91 {
      font-size: 26px
   }

   .exp-47 {
      font-size: 42px
   }

   .exp-37 {
      font-size: 32px
   }

   .exp-66 {
      font-size: 24px
   }

   .exp-22 {
      height: 310px
   }

   .exp-faq-ico {
      width: 30px;
      height: 30px;
      font-size: 19px
   }
}

.exp-alt {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
   gap: 88px;
   align-items: start;
   margin-top: 88px
}

.exp-alt-intro h2 {
   margin: 0 0 18px;
   font-size: 36px;
   line-height: 1.05;
   font-weight: 600;
   letter-spacing: -.03em;
   text-wrap: balance
}

.exp-alt-intro p {
   margin: 0;
   color: #001751;
   font-size: 16px;
   line-height: 1.6;
   max-width: 44ch;
   text-wrap: pretty
}

.exp-alt-list {
   border-top: 1px solid #000A1C
}

.exp-alt-item {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 32px;
   align-items: center;
   padding: 26px 0;
   border-bottom: 1px solid #D3E2ED
}

.exp-alt-item h3 {
   margin: 0 0 8px;
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -.015em;
   line-height: 1.3
}

.exp-alt-item p {
   margin: 0;
   color: #001751;
   font-size: 15.5px;
   line-height: 1.6;
   max-width: 60ch;
   text-wrap: pretty
}

.exp-alt-link {
   display: flex;
   flex: none;
   flex-direction: column;
   gap: 4px;
   min-width: 150px;
   padding: 12px 16px;
   border: 1px solid #D3E2ED;
   transition: border-color .2s, background .2s
}

.exp-alt-link > span {
   color: #5C7897;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .14em
}

.exp-alt-link strong {
   display: flex;
   justify-content: space-between;
   gap: 8px;
   font-size: 16px;
   font-weight: 600
}

.exp-alt-link strong span {
   color: #946200
}

.exp-alt-link:hover {
   border-color: #000A1C;
   background: #F1F6FA;
   color: #000A1C
}

@media (max-width: 1100px) {
   .exp-alt {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px
   }
}

@media (max-width: 560px) {
   .exp-alt {
      margin-top: 56px
   }

   .exp-alt-item {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px
   }

   .exp-alt-link {
      justify-self: start;
      min-width: 0
   }
}