/* Universal shell: header, overlay menu and footer look the same on every
   page whatever else that page loads (Lioré, Dossier or nothing). Loaded on
   every page from partials/head-core.html; selectors are doubled where a
   template stylesheet loaded later would otherwise win. */

/* ---------------------------------------------------- neutral typography */
.navigation-wrapper, .navigation-wrapper *,
.footer-main, .footer-main * {
  font-family: "Poppins", sans-serif;
  text-transform: none;
  letter-spacing: normal;
}

.navigation-wrapper h2, .navigation-wrapper h3,
.footer-main h2, .footer-main p { margin: 0; }

/* -------------------------------------------------------- overlay menu */
/* Links in sentence case with no fixed rule; on hover an orange rule draws
   from left to right under the word. */
.menu .navigation-main .line-below { display: none; }

.menu .navigation-text {
  position: relative;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.menu .navigation-text::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: 0.02em;
  height: 0.06em;
  background: #ff6a00;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.menu .navigation-main:hover .navigation-text::after,
.menu .navigation-main:focus-visible .navigation-text::after { transform: scaleX(1); }

/* --------------------------------------------------------------- footer */
/* Smiley and the two lines on the left; the columns beside them start at
   the smiley's top. The smiley turns once every 10 seconds (the home page's
   original interaction), as a CSS animation on every page. */
.footer-main.footer-main {
  min-height: 0;
  justify-content: flex-start;
  padding: clamp(64px, 8vw, 110px) 2% 40px;
}

.footer-main .grid-2-columns.for-footer { align-items: start; }
/* Smiley sized so that smiley plus lines match the height of the columns. */
.footer-main .footer-identity { row-gap: 24px; }
.footer-main .footer-smiley-wrap { line-height: 0; }
.footer-main .footer-smiley {
  width: 150px;
  animation: footer-smiley-spin 10s linear infinite;
}
@keyframes footer-smiley-spin { to { transform: rotate(360deg); } }

.footer-main .footer-lines { row-gap: 6px; }
.footer-main .footer-lines p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Column titles in capitals at full ink; the items below them muted. */
.footer-main .page-title.flex.third {
  opacity: 1;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.footer-main .home-flex { row-gap: 10px; margin-top: 12px; }

.footer-main .footer-link {
  position: relative;
  display: inline-block;
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-main .footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: #ff6a00;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.footer-main .footer-link:hover,
.footer-main .footer-link:focus-visible { color: var(--text-primary); }
.footer-main .footer-link:hover::after,
.footer-main .footer-link:focus-visible::after { transform: scaleX(1); }

@media screen and (max-width: 991px) {
  .footer-main .grid-2-columns.for-footer { flex-flow: column; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-main .footer-smiley { animation: none; }
  .menu .navigation-text::after,
  .footer-main .footer-link::after,
  .footer-main .footer-link { transition: none; }
}