/* ===================================================================
   BARBARAHOMEVET — FEUILLE DE STYLE UNIQUE DU SITE
   ===================================================================
   Ce fichier est utilisé par TOUTES les pages du site (index.html,
   a-propos.html, contact.html, rendez-vous.html).

   -> Pour changer une couleur, une police ou un espacement PARTOUT
      sur le site en une seule fois, il suffit de modifier ce fichier.
   -> Le fichier est découpé en sections numérotées : utilisez Ctrl+F
      pour sauter directement à la section qui vous intéresse.
   =================================================================== */


/* -------------------------------------------------------------------
   1. JETONS DE DESIGN (couleurs, à modifier ici pour tout changer)
   ------------------------------------------------------------------- */
:root{
  --pine:        #1E2E24; /* vert foncé — couleur principale (nav, boutons) */
  --pine-soft:   #2C4433; /* vert foncé, variante plus claire (survol) */
  --ivory:       #F6F2E9; /* fond général du site */
  --card:        #FFFFFE; /* fond des cartes/blocs */
  --sage:        #7C9A82; /* vert doux — accents secondaires */
  --sage-soft:   #E4EBE3; /* vert très clair — fonds de section */
  --gold:        #C79A44; /* doré — couleur d'accent / boutons d'action */
  --clay:        #B5533C; /* terracotta — utilisé UNIQUEMENT pour les alertes/retards */
  --ink:         #26241F; /* couleur du texte principal */
  --ink-faint:   #8A8676; /* couleur du texte secondaire / discret */
  --line:        #E4DFD1; /* couleur des bordures et séparateurs */
}

/* -------------------------------------------------------------------
   2. RÉINITIALISATION & BASE
   ------------------------------------------------------------------- */
*{ box-sizing: border-box; margin: 0; padding: 0; }

body{
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Public Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

img{ max-width: 100%; display: block; }

/* Conteneur centré réutilisé sur toutes les sections du site */
.wrap{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Titres génériques (utilisés sur toutes les pages) */
.eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 14px;
  display: block;
}
h1{
  font-family: 'Fraunces', serif;
  font-weight: 550;
  line-height: 1.1;
  color: var(--pine);
}
h2{
  font-family: 'Fraunces', serif;
  font-weight: 550;
  color: var(--pine);
}


/* -------------------------------------------------------------------
   3. EN-TÊTE / NAVIGATION (identique sur toutes les pages)
   ------------------------------------------------------------------- */
header.site-header{
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(246, 242, 233, .92);
  backdrop-filter: blur(6px);
  z-index: 10;
}
nav.site-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.brand{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--pine);
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand .mark{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
/* Icône du vrai logo (patte + main), utilisée dans le header à la place
   du petit point doré ci-dessus sur les pages mises à jour. */
.brand .logo-icon{
  height: 30px; width: auto; display: block;
}
.nav-links{
  display: flex;
  gap: 28px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
.nav-links a{ color: var(--pine-soft); transition: .15s; }
.nav-links a:hover{ color: var(--gold); }
.nav-links a.active{ color: var(--gold); } /* page actuellement affichée */
.nav-right{ display: flex; align-items: center; gap: 18px; }
.lang{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  display: flex;
  gap: 6px;
}
.lang b{ color: var(--pine); }

/* Bouton "hamburger" — invisible sur ordinateur, visible seulement sur mobile */
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  padding: 6px;
}
.nav-toggle span{
  display: block; width: 100%; height: 2px;
  background: var(--pine);
  border-radius: 2px;
}

@media (max-width: 760px){
  .nav-toggle{ display: flex; } /* le hamburger apparaît sur mobile */
  .site-nav{ position: relative; flex-wrap: wrap; }

  /* Le menu est un tiroir déroulant, caché tant qu'on n'a pas cliqué le hamburger */
  .nav-links{
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 18px;
    z-index: 20;
  }
  .nav-links a{
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child{ border-bottom: none; }

  /* Le JavaScript (assets/js/nav.js) ajoute/enlève cette classe au clic */
  .site-nav.nav-open .nav-links{ display: flex; }
}

@media (max-width: 420px){
  .lang{ display: none; } /* sur très petit écran, on masque FR·EN pour laisser de la place */
}


/* -------------------------------------------------------------------
   4. BOUTONS (réutilisés partout : nav, hero, formulaires, footer)
   ------------------------------------------------------------------- */
.btn-primary, .cta-nav{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  background: var(--pine);
  color: var(--ivory);
  padding: 13px 22px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover, .cta-nav:hover{ background: var(--pine-soft); }

.btn-secondary{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  border: 1px solid var(--line);
  color: var(--pine);
  padding: 13px 22px;
  border-radius: 9px;
}
.btn-secondary:hover{ background: var(--sage-soft); }

.btn-gold{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  background: var(--gold);
  color: var(--pine);
  padding: 13px 22px;
  border-radius: 9px;
  font-weight: 600;
  display: inline-flex;
  width: fit-content;
}


/* -------------------------------------------------------------------
   5. PIED DE PAGE (identique sur toutes les pages)
   ------------------------------------------------------------------- */
footer.site-footer{ padding: 56px 24px 40px; }
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-top: 36px;
}
.footer-grid .brand{ margin-bottom: 12px; }
.footer-grid p{ color: var(--ink-faint); font-size: 13px; line-height: 1.6; max-width: 32ch; }
.footer-col h5{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sage);
  margin-bottom: 14px;
}
.footer-col a, .footer-col span{
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  margin-bottom: 8px;
}
.copyright{
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------
   6. PAGE ACCUEIL (index.html)
   ------------------------------------------------------------------- */
.hero{ padding: 60px 24px 70px; }
.hero .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.hero h1{ font-size: clamp(32px, 4.6vw, 50px); margin-bottom: 18px; }
.hero h1 em{ color: var(--gold); font-style: normal; }
.hero p.lede{
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: 30px;
}

/* Disponibilités — texte simple, à l'emplacement des anciens boutons */
.dispo{ border-top: 1px solid var(--line); padding-top: 20px; }
.dispo-rows{ display: flex; flex-direction: column; gap: 8px; }
.dispo-rows div{
  display: flex; align-items: baseline; gap: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--pine-soft);
}
.dispo-rows div b{ color: var(--gold); font-weight: 600; min-width: 120px; }

/* Photo/diaporama du hero, avec les boutons d'action superposés en bas */
.hero-photo{
  position: relative;
  aspect-ratio: 11 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--pine);
}
.hero-photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease-in-out; /* le fondu-enchaîné */
}
/* La classe "active" est ajoutée/retirée par assets/js/slideshow.js */
.hero-photo img.active{ opacity: 1; }
.hero-photo::after{
  /* dégradé sombre en bas de la photo, pour que les boutons restent lisibles
     quelle que soit la photo affichée */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(15,20,15,.72), rgba(15,20,15,0));
  z-index: 1;
  pointer-events: none;
}
.hero-photo-actions{
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  z-index: 2;
  display: flex; gap: 10px; flex-wrap: wrap;
}
/* Variante dorée du bouton principal, réservée à l'usage "sur une photo" du hero */
.btn-primary-onphoto{
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600;
  background: var(--gold); color: var(--pine);
  padding: 13px 20px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary-onphoto:hover{ background: #d9ab54; }

/* Variante du bouton secondaire, pensée pour rester lisible sur une photo */
.btn-secondary-onphoto{
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(3px);
  color: var(--ivory);
  padding: 13px 20px; border-radius: 9px;
}
/* Petits points indicateurs du diaporama, en haut à droite de la photo */
.hero-photo-dots{
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: flex; gap: 6px;
}
.hero-photo-dots span{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); }
.hero-photo-dots span.active{ background: var(--gold); }

.services{ padding: 64px 24px; border-top: 1px solid var(--line); }
.section-head{ margin-bottom: 36px; max-width: 56ch; }
.section-head h2{ font-size: clamp(24px, 3vw, 32px); }
.service-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.service-card{
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px 22px;
}
.service-card .num{ font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--sage); margin-bottom: 14px; display: block; }
.service-card h4{ font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; color: var(--pine); margin-bottom: 8px; }
.service-card p{ color: var(--ink-faint); font-size: 13.5px; line-height: 1.6; }

/* Mention "Urgences selon disponibilité" — volontairement à part de la
   grille : ce n'est pas une prestation garantie comme les 4 autres. */
.services-note{
  margin-top: 22px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-faint);
}

.strip{ background: var(--sage-soft); padding: 54px 24px; text-align: center; }
.strip p{
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: clamp(19px, 2.4vw, 25px); color: var(--pine-soft);
  max-width: 46ch; margin: 0 auto; line-height: 1.5;
}

@media (max-width: 760px){
  .hero .grid{ grid-template-columns: 1fr; }
  .hero-photo{ aspect-ratio: 4 / 3.6; }
}


/* -------------------------------------------------------------------
   7. PAGE À PROPOS (a-propos.html)
   ------------------------------------------------------------------- */
.about-hero{ padding: 80px 24px 50px; }
.about-hero .grid{ display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: center; }
.about-hero h1{ font-size: clamp(30px, 4.4vw, 46px); }
.about-hero p.lede{ color: var(--ink-faint); font-size: 16px; line-height: 1.7; max-width: 52ch; margin: 16px 0 22px; }

/* Photo de profil — voir commentaire dans le HTML pour la remplacer facilement */
.portrait{
  aspect-ratio: 4/5; border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.portrait img{ width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }

.credentials{ display: flex; gap: 24px; flex-wrap: wrap; margin-top: 10px; }
.credentials div{ font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--pine-soft); }
.credentials strong{ display: block; font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: var(--pine); }

.story{ padding: 50px 24px; border-top: 1px solid var(--line); }
.story .grid{ display: grid; grid-template-columns: .4fr 1fr; gap: 40px; }
.story .grid p{ color: var(--ink-faint); font-size: 15px; line-height: 1.75; margin-bottom: 16px; max-width: 60ch; }
.story .grid p strong{ color: var(--ink); font-weight: 600; }

.values{ padding: 60px 24px; border-top: 1px solid var(--line); }
.value-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; }
.value-card{ background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; }
.value-card .num{ font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--sage); margin-bottom: 14px; display: block; }
.value-card h4{ font-family: 'Fraunces', serif; font-weight: 500; font-size: 16.5px; color: var(--pine); margin-bottom: 8px; }
.value-card p{ color: var(--ink-faint); font-size: 13.5px; line-height: 1.6; }

.cta-band{ background: var(--pine); color: var(--ivory); padding: 60px 24px; text-align: center; margin-top: 20px; }
.cta-band h2{ color: var(--ivory); margin-bottom: 14px; font-size: clamp(22px, 2.6vw, 28px); }
.cta-band p{ color: #C9D6C7; font-size: 14.5px; max-width: 46ch; margin: 0 auto 26px; }

@media (max-width: 760px){
  .about-hero .grid, .story .grid{ grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------
   8. PAGE CONTACT (contact.html)
   ------------------------------------------------------------------- */
.contact-hero{ padding: 80px 24px 20px; }
.contact-hero h1{ font-size: clamp(30px, 4.4vw, 44px); }
.contact-hero p.lede{ color: var(--ink-faint); font-size: 15.5px; line-height: 1.7; max-width: 52ch; margin-top: 14px; }

.contact-grid{ padding: 50px 24px 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.info-card{
  background: var(--pine); color: var(--ivory);
  border-radius: 18px; padding: 34px 30px;
  display: flex; flex-direction: column; gap: 22px;
}
.info-row{ display: flex; flex-direction: column; gap: 4px; }
.info-row .label{ font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); }
.info-row a, .info-row span.value{ font-family: 'Fraunces', serif; font-size: 19px; color: var(--ivory); }
.hours-table{
  margin-top: 6px; border-top: 1px solid #3E5B47; padding-top: 18px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
}
.hours-table div{ display: flex; justify-content: space-between; padding: 5px 0; color: #D9E3D6; }
.hours-table div b{ color: var(--gold); font-weight: 500; }

.form-card{ background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 34px 30px; }
.form-card h3{ font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; color: var(--pine); margin-bottom: 6px; }
.form-card > p{ color: var(--ink-faint); font-size: 13px; margin-bottom: 22px; }
.field{ margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.field label{ font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field textarea{
  border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; font-family: 'Public Sans', sans-serif; font-size: 13.5px;
  background: var(--ivory); color: var(--ink);
}
.field textarea{ resize: vertical; min-height: 90px; }
.row2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-card .btn-primary{ margin-top: 6px; width: 100%; justify-content: center; }
.note{ font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink-faint); margin-top: 12px; text-align: center; }

/* Bloc "Zone d'intervention" — voir commentaire dans le HTML pour le modifier */
.zone{ padding: 0 24px 80px; }
.zone-card{
  background: var(--sage-soft); border-radius: 18px;
  padding: 34px 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center;
}
.zone-card h4{ font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: var(--pine); margin-bottom: 8px; }
.zone-card p{ color: var(--pine-soft); font-size: 13.5px; line-height: 1.6; }
.zone-tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.zone-tags span{
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  background: var(--card); border: 1px solid #D3E0D0; color: var(--pine-soft);
  padding: 6px 12px; border-radius: 16px;
}

@media (max-width: 760px){
  .contact-grid{ grid-template-columns: 1fr; }
  .zone-card{ grid-template-columns: 1fr; }
  .row2{ grid-template-columns: 1fr; }
  .info-row a, .info-row span.value{ font-size: 16px; overflow-wrap: anywhere; }
}


/* -------------------------------------------------------------------
   9. PAGE RENDEZ-VOUS (rendez-vous.html)
   ------------------------------------------------------------------- */
.booking-hero{ padding: 70px 24px 10px; }
.booking-hero p.lede{ color: var(--ink-faint); font-size: 15px; line-height: 1.6; max-width: 56ch; margin: 12px 0 28px; }

.rules{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.rule-chip{
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  background: var(--sage-soft); color: var(--pine-soft);
  padding: 7px 12px; border-radius: 20px; border: 1px solid #D3E0D0;
}

.week-nav{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.week-nav button{
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  background: none; border: 1px solid var(--line); color: var(--pine);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: .15s;
}
.week-nav button:hover{ background: var(--sage-soft); }
.week-label{ font-family: 'Fraunces', serif; font-size: 16px; color: var(--pine); }

.booking-board{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.day-col{ background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 14px; min-height: 60px; }
.day-col.closed{
  background: transparent; border-style: dashed;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 12px; font-family: 'IBM Plex Mono', monospace;
}
.day-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.day-name{ font-family: 'Fraunces', serif; font-size: 15px; color: var(--pine); }
.day-date{ font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); }

.slot{
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: none; text-align: left;
  padding: 8px 6px; border-radius: 8px; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink);
  transition: .12s;
}
.slot .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
.slot:hover:not(.booked):not(.past){ background: var(--sage-soft); }
.slot.selected{ background: var(--pine); color: var(--ivory); }
.slot.selected .dot{ background: var(--gold); }
.slot.booked{ color: var(--ink-faint); cursor: not-allowed; text-decoration: line-through; }
.slot.booked .dot{ background: var(--line); }
.slot.past{ color: var(--ink-faint); opacity: .4; cursor: not-allowed; }
.slot.past .dot{ background: var(--line); }
.slot.delayed{ color: var(--clay); }
.slot.delayed .dot{ background: var(--clay); animation: pulse-dot 1.6s infinite; }
@keyframes pulse-dot{
  0%  { box-shadow: 0 0 0 0 rgba(181,83,60,.4); }
  70% { box-shadow: 0 0 0 6px rgba(181,83,60,0); }
  100%{ box-shadow: 0 0 0 0 rgba(181,83,60,0); }
}
.delay-note{ font-family: 'Public Sans', sans-serif; font-size: 10.5px; color: var(--clay); margin: 2px 0 6px 21px; }

.legend{
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint);
}
.legend span{ display: flex; align-items: center; gap: 6px; }
.legend .dot{ width: 7px; height: 7px; border-radius: 50%; }

.booking-panel{
  margin: 32px 0 60px;
  background: var(--pine); color: var(--ivory);
  border-radius: 16px; padding: 24px 26px;
  display: none;
}
.booking-panel.show{ display: block; }
.booking-panel h3{ font-family: 'Fraunces', serif; font-weight: 500; margin: 0 0 4px; font-size: 19px; }
.booking-panel p{ color: #C9D6C7; font-size: 13px; margin: 0 0 18px; }
.booking-panel .fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.booking-panel input{
  grid-column: span 1;
  background: var(--pine-soft); border: 1px solid #3E5B47; border-radius: 8px;
  padding: 10px 12px; color: var(--ivory); font-family: 'Public Sans', sans-serif; font-size: 13px;
}
.booking-panel input::placeholder{ color: #9DB5A0; }
.booking-panel .confirm{
  margin-top: 14px;
  background: var(--gold); color: var(--pine); border: none;
  font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 12.5px;
  padding: 11px 20px; border-radius: 8px; cursor: pointer;
}
.proto-tag{
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint);
  border-top: 1px solid var(--line); padding: 16px 0 60px;
}