/* Navigation, Navigation mobile, Pied de page (desktop + mobile) et Bandeau
   consentement du Figma. Seuil mobile : 767 px (cadres 390), comme l'app. */

/* ── Navigation (72 px, filet bas, liens Body/S secondary) ──────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-default);
  padding: 0 var(--gutter);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  max-width: var(--container);
  margin-inline: auto;
  /* Figma : 72 px filet compris (60 px en mobile). */
  height: 71px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 26px;
  letter-spacing: -0.005em;
}

.brand:hover {
  color: var(--text-primary);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 15px;
  line-height: 23px;
  color: var(--text-secondary);
}

.site-nav__links a {
  white-space: nowrap;
}

.site-nav__links a[aria-current="page"] {
  color: var(--text-primary);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__menu-button {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-4) 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.site-nav__menu-button span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-primary);
}

.site-nav__drawer {
  display: none;
}

@media (max-width: 1023px) {
  .site-nav__links {
    gap: var(--space-6);
  }
}

@media (max-width: 959px) { /* navigation complète trop large en dessous */
  .site-nav__inner {
    height: 59px;
  }

  .site-nav__links,
  .site-nav__login {
    display: none;
  }

  .site-nav__actions {
    gap: var(--space-4);
  }

  .site-nav__menu-button {
    display: inline-flex;
  }

  .site-nav__drawer:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: var(--container);
    margin: 0 auto;
    padding-block: var(--space-5);
    border-top: 1px solid var(--border-default);
    font-size: 17px;
    line-height: 27px;
    color: var(--text-secondary);
  }
}

@media (max-width: 767px) {
  .brand .mascot {
    width: 30px;
    height: 30px;
  }
}

/* ── Pied de page (brand/navy) ───────────────────────────────────────────── */
.site-footer {
  background: var(--brand-navy);
  color: var(--text-on-accent);
  padding: var(--space-11) var(--gutter) var(--space-9);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  max-width: var(--container);
  margin-inline: auto;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 360px repeat(3, minmax(0, 1fr));
  gap: var(--space-11);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.site-footer .brand {
  color: var(--text-on-accent);
}

.site-footer__tagline,
.site-footer__column a {
  font-size: 15px;
  line-height: 23px;
  color: var(--text-on-accent);
}

.site-footer__tagline {
  opacity: 0.72;
}

/* « © 2026 LibWatch » et les liens du bas à 60 %, le badge à 100 %. */
.site-footer__copyright,
.site-footer__links {
  opacity: 0.6;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__column h2 {
  color: var(--brand-sky);
}

.site-footer a:hover {
  color: var(--brand-sky);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--blue-900);
  font-weight: 500;
  font-size: 13px;
  line-height: 19px;
}

.site-footer__bottom-right {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.site-footer__links {
  white-space: nowrap;
}

.site-footer__links button {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

@media (max-width: 1023px) {
  .site-footer__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* ©, choix du thème, badge et liens ne tiennent plus sur une ligne. */
  .site-footer__bottom,
  .site-footer__bottom-right {
    flex-wrap: wrap;
    row-gap: var(--space-4);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Pied de page mobile : 48/20/32, colonnes deux par deux, bas empilé. */
@media (max-width: 767px) {
  .site-footer {
    padding: var(--space-10) var(--gutter) var(--space-8);
  }

  .site-footer__inner {
    gap: var(--space-8);
  }

  .site-footer__brand {
    gap: var(--space-4);
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-7);
  }

  .site-footer__column {
    gap: 10px;
  }

  .site-footer__bottom,
  .site-footer__bottom-right {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .site-footer__bottom {
    padding-top: var(--space-6);
  }

  .site-footer__copyright--desktop {
    display: none;
  }
}

@media (min-width: 768px) {
  .site-footer__copyright--mobile {
    display: none;
  }
}

/* Sur mobile, le © passe dans la ligne des liens, qui reste à 100 % et peut
   passer à la ligne. */
@media (max-width: 767px) {
  .site-footer__links {
    opacity: 1;
    white-space: normal;
  }
}

/* ── Bandeau consentement (surface, contour 1,5 px, flottant en bas) ─────── */
.consent-banner {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: var(--space-7);
  transform: translateX(-50%);
  width: min(880px, calc(100% - 2 * var(--space-6)));
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-7);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition:
    translate var(--duration-exit) var(--ease-exit),
    opacity var(--duration-exit) var(--ease-exit),
    filter var(--duration-exit) var(--ease-exit);
}

.consent-banner[hidden] {
  display: none;
}

/* Le choix confirmé, le bandeau descend de 24 px en se floutant (Figma
   02 → 03 : 320 ms, cubic-bezier(.4, 0, 1, 1)). */
.consent-banner.is-leaving {
  translate: 0 var(--space-7);
  opacity: 0;
  filter: blur(3px);
}

.consent-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}

.consent-banner__text p {
  color: var(--text-secondary);
}

.consent-banner__choices {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}

/* Boutons du bandeau et de la modale : largeurs du Figma (124, 136 et
   196 px pour « Tout refuser », « Tout accepter », « Enregistrer mes
   choix »), un peu plus larges que le bouton du design system. */
.consent-banner .btn-confirm,
.consent-dialog .btn-confirm {
  padding-inline: 17.5px;
}

.consent-dialog .btn--primary.btn-confirm {
  padding-inline: 20.5px;
}

/* « Personnaliser » : lien bleu du Figma, 4 px de part et d'autre. */
.consent-banner__customize {
  padding-inline: var(--space-2);
}

@media (max-width: 767px) {
  .consent-banner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    bottom: var(--space-4);
  }

  /* Mobile (pas de cadre 390 dans le prototype) : refuser et accepter côte
     à côte, même largeur ; « Personnaliser » en dessous. */
  .consent-banner__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .consent-banner__customize {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

/* ── Modale « Vos choix de cookies » (Figma 188:18163) ───────────────────── */
/* <dialog> modale : `* { margin: 0 }` (02_base.css) la collerait en haut à
   gauche, d'où margin: auto. 580 px, contour border/strong, voile bg/inverse
   à 45 %. */
.consent-dialog {
  margin: auto;
  width: min(580px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--space-6));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 28px var(--space-8);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition:
    translate var(--duration-exit) var(--ease-exit),
    opacity var(--duration-exit) var(--ease-exit),
    filter var(--duration-exit) var(--ease-exit);
}

.consent-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.consent-dialog::backdrop {
  background: var(--bg-overlay, #081a5a);
  opacity: 0.45;
  transition: opacity var(--duration-exit) var(--ease-exit);
}

/* Choix enregistré : la modale descend de 12 px en se floutant, le voile
   s'efface (Figma 08 → 09 : 320 ms, cubic-bezier(.4, 0, 1, 1)). */
.consent-dialog.is-leaving {
  translate: 0 var(--space-4);
  opacity: 0;
  filter: blur(3px);
}

.consent-dialog.is-leaving::backdrop {
  opacity: 0;
}

.consent-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.consent-dialog__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}

.consent-dialog__title h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.01em; /* -1 % */
  color: var(--text-primary);
}

.consent-dialog__title p {
  font-size: 15px;
  line-height: 23px;
  color: var(--text-secondary);
}

.consent-dialog__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}

.consent-dialog__close svg {
  width: 20px;
  height: 20px;
}

.consent-dialog__categories {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.consent-category {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5) 18px;
}

.consent-category + .consent-category {
  border-top: 1px solid var(--border-default);
}

.consent-category__line {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.consent-category__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 23px;
  color: var(--text-primary);
}

.consent-category__desc {
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
  color: var(--text-secondary);
}

/* Noms et durées en Martian Mono 11/18, séparés comme les trois espaces du
   Figma. */
.consent-category__cookies {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3ch;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 18px;
  color: var(--text-muted);
}

.consent-dialog__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.consent-dialog__all {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .consent-dialog {
    padding: var(--space-7) var(--space-6);
  }

  .consent-dialog__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .consent-dialog__all > .btn {
    flex: 1 1 0;
  }
}

/* « Personnaliser » : le bandeau devient la modale (transition partagée du
   Figma, 420 ms, cubic-bezier(.32, .72, 0, 1)), par l'API View Transitions.
   Le cadre (fond, contour) se déforme ; les contenus se fondent sur place,
   sans être étirés. */
::view-transition-group(consent-panel) {
  animation-duration: var(--duration-shared);
  animation-timing-function: var(--ease-shared);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: clip;
}

::view-transition-old(consent-panel),
::view-transition-new(consent-panel) {
  height: 100%;
  object-fit: none;
  object-position: 50% 50%;
  animation-duration: var(--duration-shared);
  animation-timing-function: var(--ease-shared);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-shared);
  animation-timing-function: var(--ease-shared);
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner,
  .consent-dialog,
  .consent-dialog::backdrop {
    transition: none;
  }

  .consent-banner.is-leaving,
  .consent-dialog.is-leaving {
    translate: none;
    filter: none;
  }
}

/* ── Choix du thème (pied de page, Figma 138:36370) ─────────────────────── */
.site-footer__bottom-left {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.theme-switch {
  display: inline-flex;
  align-items: flex-start;
  padding: var(--space-1);
  border: 1px solid var(--blue-800);
  border-radius: var(--radius-sm);
}

.theme-switch__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--brand-sky);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 19px;
  white-space: nowrap;
  cursor: pointer;
}

.theme-switch__option svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.theme-switch__option[aria-checked="true"] {
  background: var(--blue-800);
  color: var(--text-on-accent);
}

.theme-switch__option:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 1px;
}

@media (max-width: 767px) {
  .site-footer__bottom-left {
    flex-direction: column;
    align-items: flex-start;
  }
}