/*
Theme Name: Yanick & Co
Description: Site temporaire Yanick & Co
Version: 1.0
*/


/* FONTS
   ----------------------------- */

@font-face {
   font-family: 'Anton';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('fonts/anton-400.woff2') format('woff2');
}

@font-face {
   font-family: 'Anton Fallback';
   src: local('Impact');
   size-adjust: 95.89%;
   ascent-override: 122.66%;
   descent-override: 34.32%;
   line-gap-override: 0%;
}

@font-face {
   font-family: 'Instrument Serif';
   font-style: italic;
   font-weight: 400;
   font-display: swap;
   src: url('fonts/instrument-serif-400-italic.woff2') format('woff2');
}

@font-face {
   font-family: 'Instrument Serif Fallback';
   font-style: italic;
   src: local('Times New Roman');
   size-adjust: 79.48%;
   ascent-override: 124.56%;
   descent-override: 39%;
   line-gap-override: 0%;
}

@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('fonts/inter-400.woff2') format('woff2');
}

@font-face {
   font-family: 'Inter Fallback';
   src: local('Arial');
   size-adjust: 104.33%;
   ascent-override: 92.85%;
   descent-override: 23.12%;
   line-gap-override: 0%;
}

@font-face {
   font-family: 'Space Mono';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('fonts/space-mono-400.woff2') format('woff2');
}

@font-face {
   font-family: 'Space Mono Fallback';
   src: local('Courier New');
   size-adjust: 101.98%;
   ascent-override: 109.82%;
   descent-override: 35.4%;
   line-gap-override: 0%;
}


/* VARIABLES
   ----------------------------- */

:root {

   /* Colors */
   --dark: #242424;
   --cream: #EBE2DA;
   --cream-60: rgba(235, 226, 218, 0.6);
   --cream-15: rgba(235, 226, 218, 0.15);
   --gold: #F1D096;
   --darker: #141414;
   --loader-bg: #1C1C1C;
   --dark-border: rgba(36, 36, 36, 0.2);

   /* Type scale */
   --impact-size: clamp(2.9375rem, min(calc(0.043rem + 11.064vw), calc(4.519rem + 4.207vw)), 11.25rem);
   --h1-size: clamp(3rem, calc(1.138rem + 5.957vw), 7.375rem);
   --h2-size: clamp(2.5rem, calc(1.436rem + 3.404vw), 4.5rem);
   --h3-size: clamp(2rem, calc(1.468rem + 1.702vw), 3rem);
   --h4-size: clamp(1.5rem, calc(1.234rem + 0.851vw), 2rem);
   --h5-size: clamp(1.25rem, calc(1.117rem + 0.426vw), 1.5rem);
   --h6-size: clamp(1rem, calc(0.934rem + 0.213vw), 1.125rem);
   --paragraph-size: clamp(0.875rem, calc(0.809rem + 0.213vw), 1rem);
   --label-size: clamp(0.75rem, calc(0.684rem + 0.213vw), 0.875rem);
   --menu-size: clamp(0.75rem, calc(0.674rem + 0.244vw), 1rem);

   /* Spacing */
   --container-padding: clamp(1.25rem, calc(0.718rem + 1.702vw), 2.25rem);
   --row-padding-s: clamp(2.5rem, calc(2.054rem + 2.232vw), 4.0625rem);
   --row-padding-l: clamp(3.75rem, calc(2.857rem + 4.464vw), 6.875rem);
   --size-wrap: 100rem;
   --radius: 0.375rem;

   /* Header and footer */
   --logo-h: clamp(1.5625rem, min(calc(1.229rem + 1.667vw), calc(1.484rem + 0.851vw)), 2.25rem);
   --header-h: calc(var(--logo-h) + var(--container-padding) * 2);
   --footer-h: calc(var(--menu-size) * 1.5 + var(--container-padding) * 2);

   /* Fonts */
   --font-display: "Anton", "Anton Fallback", Impact, sans-serif;
   --font-body: "Inter", "Inter Fallback", Arial, sans-serif;
   --font-serif: "Instrument Serif", "Instrument Serif Fallback", "Times New Roman", serif;
   --font-mono: "Space Mono", "Space Mono Fallback", "Courier New", monospace;

   /* Easing */
   --ease-link: cubic-bezier(0.625, 0.05, 0, 1);
   --ease-toggle: cubic-bezier(0.35, 1, 0.6, 1);
   --ease-toggle-dot: cubic-bezier(0.35, 1.5, 0.6, 1);
}


/* BASE
   ----------------------------- */

html {
   background-color: var(--dark);
   scrollbar-gutter: stable;
   scroll-padding-top: var(--header-h);
}

html:has(section.hero) {
   scrollbar-gutter: auto;
   overscroll-behavior: none;
}

body {
   font-family: var(--font-body);
   font-size: var(--paragraph-size);
   line-height: 1.5;
   font-weight: 400;
   color: var(--cream);
   background-color: var(--dark);
}

sup {
   font-size: 0.7em;
   font-style: normal;
   vertical-align: super;
   color: inherit;
}


/* TYPOGRAPHY
   ----------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p {
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
}

.impact {
   font-family: var(--font-display);
   font-size: var(--impact-size);
   line-height: 1;
   font-weight: 400;
   text-transform: uppercase;
   color: var(--cream);
}

h1, .h1 {
   font-family: var(--font-display);
   font-size: var(--h1-size);
   line-height: 1.05;
   font-weight: 400;
   text-transform: uppercase;
   color: var(--cream);
}

h2, .h2 {
   font-family: var(--font-display);
   font-size: var(--h2-size);
   line-height: 1;
   font-weight: 400;
   text-transform: uppercase;
   color: var(--cream);
}

h3, .h3 {
   font-family: var(--font-display);
   font-size: var(--h3-size);
   line-height: 1.04;
   font-weight: 400;
   text-transform: uppercase;
   color: var(--cream);
}

h4, .h4 {
   font-family: var(--font-display);
   font-size: var(--h4-size);
   line-height: 1.1;
   font-weight: 400;
   text-transform: uppercase;
   color: var(--cream);
}

h5, .h5 {
   font-family: var(--font-display);
   font-size: var(--h5-size);
   line-height: 1.16;
   font-weight: 400;
   text-transform: uppercase;
   color: var(--cream);
}

h6, .h6 {
   font-family: var(--font-mono);
   font-size: var(--h6-size);
   line-height: 1.4;
   font-weight: 400;
   text-transform: uppercase;
   color: var(--cream);
}

.impact em,
h1 em, .h1 em,
h2 em, .h2 em,
h3 em, .h3 em,
h4 em, .h4 em,
h5 em, .h5 em {
   font-family: var(--font-serif);
   font-style: italic;
   font-weight: 400;
   text-transform: none;
}

p {
   font-family: var(--font-body);
   font-size: var(--paragraph-size);
   line-height: 1.5;
   font-weight: 400;
}

strong, b {
   font-weight: 400;
   color: var(--cream);
}


/* ACCESSIBILITY
   ----------------------------- */

.skip-link {
   position: absolute;
   left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
   z-index: 9999;
   padding: 0.75rem 1.25rem;
   background: var(--gold);
   color: var(--dark);
   font-family: var(--font-mono);
   font-size: 0.75rem;
   line-height: 1;
   text-transform: uppercase;
   text-decoration: none;
   border-radius: 6.25rem;
}

.skip-link:focus {
   position: fixed;
   top: 0.5rem;
   left: 0.5rem;
   width: auto;
   height: auto;
   overflow: visible;
}

:focus-visible {
   outline: 2px solid var(--cream);
   outline-offset: 2px;
   box-shadow: 0 0 0 2px var(--dark);
}

#main-content:focus {
   outline: none;
}


/* GENERAL
   ----------------------------- */

a {
   color: inherit;
   transition: color 0.2s ease;
}

.paragraph {
   font-size: var(--paragraph-size);
   line-height: 1.5;
}

.paragraph p {
   padding-bottom: 1rem;
}

.paragraph p:last-child {
   padding-bottom: 0;
}

.paragraph a {
   text-decoration: underline;
   text-underline-offset: 0.15em;
}

.c-wrap {
   max-width: var(--size-wrap);
   padding: 0 var(--container-padding);
   margin: 0 auto;
   width: 100%;
}

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


/* UNDERLINE LINKS
   ----------------------------- */

[data-underline-link] {
   text-decoration: none;
   position: relative;
}

[data-underline-link]::before {
   content: "";
   position: absolute;
   bottom: -0.125em;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: currentColor;
   transition: transform 0.735s var(--ease-link);
   transform-origin: right;
   transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
   [data-underline-link]:hover::before {
      transform-origin: left;
      transform: scaleX(1) rotate(0.001deg);
   }
}

@media (prefers-reduced-motion: reduce) {
   [data-underline-link]::before {
      transition: none;
   }
}


/* PAGE CONTENT
   ----------------------------- */

section.page-content {
   padding: calc(var(--header-h) + var(--row-padding-s)) 0 calc(var(--footer-h) + var(--row-padding-l));
}

section.page-content .c-wrap {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

section.page-content h1 {
   max-width: 12em;
}

section.page-content .paragraph {
   max-width: 40rem;
}


/* 404
   ----------------------------- */

body.error404 {
   display: flex;
   flex-direction: column;
   min-height: 100svh;
}

body.error404 #main-content {
   flex: 1 0 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: var(--header-h) 0 var(--footer-h);
}

section.error-404 {
   padding: var(--row-padding-l) 0;
}

section.error-404 .info {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: clamp(1.5rem, calc(0.968rem + 1.702vw), 2.5rem);
}

section.error-404 h1 {
   max-width: 9em;
}

section.error-404 .link {
   font-family: var(--font-mono);
   font-size: var(--label-size);
   line-height: 1.5;
   text-transform: uppercase;
   color: var(--cream);
}


/* COOKIEYES
   ----------------------------- */

body .cky-overlay,
body .cky-btn-revisit-wrapper,
body .cky-consent-container,
body .cky-modal {
   z-index: 120 !important;
}

body [data-cky-tag="powered-by"],
body [data-cky-tag="detail-powered-by"] {
   display: none !important;
}

body .cky-consent-bar > div:has(> [data-cky-tag="powered-by"]),
body .cky-footer-wrapper > div:has(> [data-cky-tag="detail-powered-by"]) {
   padding: 0 !important;
}

/* Revisit badge */

body .cky-btn-revisit-wrapper {
   background-color: var(--gold) !important;
   border: 1px solid var(--gold);
}

body .cky-btn-revisit-wrapper .cky-btn-revisit img {
   filter: brightness(0) opacity(0.86);
}

.cky-revisit-bottom-left:hover::before,
.cky-revisit-bottom-left:hover::after,
.cky-revisit-bottom-right:hover::before,
.cky-revisit-bottom-right:hover::after {
   display: none !important;
}

/* Buttons */

body .cky-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-mono);
   font-size: var(--label-size);
   font-weight: 400;
   text-transform: uppercase;
   line-height: 1;
   height: 2.5rem;
   padding: 0 0.875rem;
   border-radius: var(--radius);
   border: 1px solid var(--dark) !important;
   background: var(--dark) !important;
   color: var(--cream) !important;
   cursor: pointer;
   transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

@media (hover: hover) and (pointer: fine) {
   body .cky-btn:hover {
      background: var(--darker) !important;
      border-color: var(--darker) !important;
      color: var(--cream) !important;
      opacity: 1;
   }
}

@media (prefers-reduced-motion: reduce) {
   body .cky-btn {
      transition: none !important;
   }
}

/* Banner */

body .cky-consent-container {
   width: 26.25rem;
}

body .cky-box-bottom-left,
body .cky-box-bottom-right {
   bottom: 1.25rem;
}

body .cky-box-bottom-left {
   left: 1.25rem;
}

body .cky-box-bottom-right {
   right: 1.25rem;
}

body .cky-consent-container .cky-consent-bar {
   background-color: var(--cream) !important;
   border: 1px solid var(--cream) !important;
   border-radius: var(--radius);
   box-shadow: none;
}

body .cky-consent-bar .cky-notice-content-wrapper {
   padding: 1.5rem;
}

body .cky-notice .cky-title {
   margin: 0 0 0.5rem 0;
   font-family: var(--font-body);
   font-size: var(--h6-size);
   line-height: 1.4;
   font-weight: 400;
   text-transform: none;
   color: var(--dark) !important;
}

body .cky-notice-des *,
body .cky-preference-content-wrapper,
body .cky-preference-content-wrapper *,
body .cky-accordion-header-des,
body .cky-accordion-header-des *,
body .cky-audit-table,
body .cky-audit-table * {
   font-family: var(--font-body);
   font-size: var(--paragraph-size);
   line-height: 1.5;
   color: var(--dark) !important;
}

body button.cky-show-desc-btn {
   font-family: var(--font-body);
   font-size: var(--paragraph-size);
   color: var(--dark) !important;
}

body .cky-notice-btn-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 1.125rem;
}

body .cky-notice-btn-wrapper .cky-btn {
   flex: 1 1 calc(50% - 0.25rem);
   width: auto !important;
   margin: 0 !important;
}

body .cky-prefrence-btn-wrapper .cky-btn {
   flex: 1 1 auto;
   height: 2.5rem !important;
   margin: 0 !important;
}

/* Preference center */

body .cky-modal .cky-preference-center {
   background-color: var(--cream) !important;
   color: var(--dark) !important;
   border-radius: var(--radius);
}

body .cky-preference-header {
   border-bottom: 1px solid var(--dark-border) !important;
}

body .cky-preference-title {
   font-family: var(--font-body);
   font-size: var(--h6-size);
   line-height: 1.4;
   font-weight: 400;
   text-transform: none;
   color: var(--dark) !important;
}

body .cky-preference-header,
body .cky-preference-body-wrapper,
body .cky-preference-content-wrapper,
body .cky-accordion-wrapper,
body .cky-accordion,
body .cky-accordion-item,
body .cky-footer-wrapper,
body .cky-prefrence-btn-wrapper {
   border-color: var(--dark-border) !important;
}

body .cky-btn-close,
body .cky-btn-close img,
body .cky-btn-close svg {
   color: var(--dark) !important;
}

body .cky-btn-close img {
   filter: brightness(0) opacity(0.86);
}

body .cky-accordion {
   border-bottom: 1px solid var(--dark-border) !important;
}

body .cky-accordion-btn {
   font-family: var(--font-mono);
   font-size: var(--label-size);
   line-height: 1.5;
   font-weight: 400;
   text-transform: uppercase;
   color: var(--dark) !important;
}

body .cky-accordion-header .cky-always-active {
   font-family: var(--font-mono);
   font-size: var(--label-size);
   text-transform: uppercase;
   color: var(--dark) !important;
}

body .cky-accordion-chevron i.cky-chevron-right,
body .cky-accordion-chevron i.cky-chevron-right::before,
body .cky-accordion-chevron i.cky-chevron-right::after {
   border-color: var(--dark) !important;
   color: var(--dark) !important;
}

body .cky-switch input[type="checkbox"] {
   background-color: var(--dark-border) !important;
}

body .cky-switch input[type="checkbox"]:checked {
   background-color: var(--dark) !important;
}

body .cky-switch input[type="checkbox"]::before {
   background-color: var(--cream) !important;
}

body .cky-audit-table {
   background-color: rgba(36, 36, 36, 0.06) !important;
   border-radius: var(--radius);
}

body .cky-footer-wrapper {
   background-color: var(--cream) !important;
}

body .cky-footer-shadow {
   background: linear-gradient(to bottom, rgba(235, 226, 218, 0), var(--cream)) !important;
}

body .cky-prefrence-btn-wrapper {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
   gap: 0.5rem;
   border-top: 1px solid var(--dark-border) !important;
}

@media (max-width: 767px) {
   body .cky-consent-container {
      width: calc(100% - 2.5rem);
   }

   body .cky-box-bottom-left,
   body .cky-box-bottom-right {
      right: 1.25rem;
      left: 1.25rem;
   }

   body .cky-consent-bar .cky-notice-content-wrapper {
      padding: 1.25rem;
   }
}

@media (max-width: 479px) {
   body .cky-consent-container {
      width: 100%;
   }

   body .cky-consent-container .cky-consent-bar {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
   }

   body .cky-box-bottom-left,
   body .cky-box-bottom-right {
      left: 0;
      right: 0;
      bottom: 0;
   }

   body .cky-notice-des {
      max-height: none;
      overflow-y: auto;
   }
}

@media (max-width: 440px) {
   body .cky-notice-btn-wrapper {
      align-items: stretch;
   }

   body .cky-notice-btn-wrapper .cky-btn {
      flex: 0 0 auto;
      width: 100% !important;
   }
}


/* LOADER
   ----------------------------- */

.loader {
   position: fixed;
   inset: 0;
   z-index: 200;
   display: none;
   pointer-events: none;
}

html[data-loader-pending] .loader {
   display: block;
}

.loader .screen {
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   color: var(--cream);
   overflow: clip;
   pointer-events: auto;
}

.loader .bg {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: var(--loader-bg);
}

.loader .title {
   position: absolute;
   bottom: var(--container-padding);
   left: var(--container-padding);
   right: var(--container-padding);
   font-family: var(--font-mono);
   font-size: var(--menu-size);
   line-height: 1.5;
   text-transform: uppercase;
   text-align: center;
   color: var(--cream-60);
}

.loader .cards {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5em;
   opacity: 0;
}

.loader .card {
   position: absolute;
   width: min(10em, 70vw);
   aspect-ratio: 3 / 4;
   border-radius: 0.5em;
   font-size: max(1.5vw, 2em);
}

.loader .card img {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
}

main:has(section.hero) {
   overflow: clip;
}


/* HEADER
   ----------------------------- */

header.header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 10;
   padding: var(--container-padding) 0;
   pointer-events: none;
}

header.header .c-wrap {
   max-width: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
}

figure.logo {
   display: flex;
   align-items: center;
   color: var(--cream);
}

figure.logo a {
   color: inherit;
   display: block;
   pointer-events: auto;
   transition: none;
}

figure.logo svg {
   width: auto;
   height: var(--logo-h);
   display: block;
}

header.header .services {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 0.25rem 1.5rem;
   list-style: none;
   margin: 0;
   padding: 0;
   font-family: var(--font-mono);
   font-size: var(--menu-size);
   line-height: 1.5;
   text-transform: uppercase;
   color: var(--cream-60);
   text-align: right;
}

header.header .toggle {
   position: absolute;
   top: calc(var(--container-padding) + var(--logo-h) / 2);
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   gap: 0.625em;
   min-height: 1.5rem;
   font-family: var(--font-mono);
   font-size: var(--menu-size);
   line-height: 1.5;
   text-transform: uppercase;
   cursor: pointer;
   pointer-events: auto;
}

header.header .toggle .option {
   color: var(--cream-60);
   transition: color 0.4s var(--ease-toggle);
}

header.header .toggle .option:first-child {
   color: var(--cream);
}

header.header .toggle .switch {
   display: flex;
   flex-shrink: 0;
   width: 2em;
   height: 1.25em;
   border-radius: 2em;
   background-color: var(--cream-15);
   transition: background-color 0.4s var(--ease-toggle);
}

header.header .toggle .dot {
   width: 1em;
   height: 1em;
   margin-top: 0.125em;
   margin-left: 0.125em;
   border-radius: 50%;
   background-color: var(--cream);
   transform: translateX(0em) rotate(0.001deg);
   transition: transform 0.4s var(--ease-toggle-dot), background-color 0.4s var(--ease-toggle);
}

header.header .toggle input {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   opacity: 0;
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
}

header.header .toggle:has(input:checked) .switch {
   background-color: var(--cream);
}

header.header .toggle:has(input:checked) .dot {
   background-color: var(--dark);
   transform: translateX(0.75em) rotate(0.001deg);
}

header.header .toggle:has(input:checked) .option {
   color: var(--cream);
}

header.header .toggle:has(input:checked) .option:first-child {
   color: var(--cream-60);
}

header.header .toggle:has(input:focus-visible) {
   outline: 2px solid var(--cream);
   outline-offset: 6px;
   border-radius: var(--radius);
}

header.header .lang {
   position: absolute;
   top: calc(var(--container-padding) + var(--logo-h) + 0.625rem);
   left: var(--container-padding);
   display: none;
   font-family: var(--font-mono);
   font-size: var(--menu-size);
   line-height: 1.5;
   text-transform: uppercase;
   color: var(--cream);
   pointer-events: auto;
}

@media (max-width: 1024px) {
   header.header .toggle {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      margin: 0 auto 0 0.5rem;
   }
}

@media (max-width: 767px) {
   header.header .c-wrap {
      align-items: flex-start;
   }

   header.header .services {
      flex-direction: column;
      align-items: flex-end;
      gap: 0.125rem;
   }
}

@media (max-width: 479px) {
   header.header .lang {
      display: block;
   }
}

@media (hover: none), (pointer: coarse), (max-width: 767px), (prefers-reduced-motion: reduce) {
   header.header .toggle {
      display: none;
   }
}


/* FOOTER
   ----------------------------- */

footer.footer {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 10;
   padding: var(--container-padding) 0;
   pointer-events: none;
}

footer.footer .c-wrap {
   max-width: none;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 1.5rem;
}

footer.footer .status {
   display: flex;
   align-items: flex-start;
   gap: 0.5em;
   font-family: var(--font-mono);
   font-size: var(--menu-size);
   line-height: 1.5;
   text-transform: uppercase;
   color: var(--cream-60);
}

footer.footer .status .icon {
   flex-shrink: 0;
   width: 1.125em;
   height: 1.125em;
   margin-top: 0.1875em;
}

footer.footer .status .icon svg {
   display: block;
   width: 100%;
   height: 100%;
   overflow: visible;
}

footer.footer .status .icon svg * {
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;
}

footer.footer .status .info {
   display: flex;
   flex-direction: column;
}

footer.footer .status .time {
   color: var(--cream);
}

footer.footer .lang {
   position: absolute;
   bottom: var(--container-padding);
   left: 50%;
   transform: translateX(-50%);
   font-family: var(--font-mono);
   font-size: var(--menu-size);
   line-height: 1.5;
   text-transform: uppercase;
   color: var(--cream);
   pointer-events: auto;
}

footer.footer .contact {
   font-family: var(--font-mono);
   font-size: var(--menu-size);
   line-height: 1.5;
   text-transform: uppercase;
   color: var(--cream);
   pointer-events: auto;
   white-space: nowrap;
}

@media (max-width: 479px) {
   footer.footer .lang {
      display: none;
   }
}