/* ============================================================
   Pied de page. Composant reconstruit : toutes ses règles vivent ici,
   les couches héritées n'en portent plus aucune.

   Trois étages. La marque et la navigation, sur la nuit. La rangée
   légale, complète et lisible, jamais reléguée en petits caractères
   gris. La ligne d'identité, discrète.

   Les intitulés de colonnes sont des étiquettes de navigation : même voix
   que les titres du thème, capitales condensées en 800, sans interlettrage
   élargi ni vert. Le vert reste à l'achat et au survol.

   Mobile d'abord : une colonne, puis deux, puis quatre à 1024 px.
   ============================================================ */

.site-footer {
  background: var(--night);
  color: var(--paper);
}

.site-footer a { color: inherit; }

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Inscription aux e-mails ----------
   Une bande au-dessus de la navigation, sur la même nuit. L'accroche a la
   voix des titres, le champ et son bouton tiennent sur une ligne à la
   hauteur compacte. Le champ est cerné de --night-text (8,6:1) : un filet
   --night-line serait invisible comme limite de champ. Le focus passe au
   vert, seul anneau lisible sur la nuit. */

.site-footer__newsletter {
  display: grid;
  gap: 20px 48px;
  padding-block: 44px 40px;
  border-bottom: 1px solid var(--night-line);
}

.site-footer__newsletter :focus-visible { outline-color: var(--accent); }

.site-footer__newsletter-copy { display: grid; gap: 10px; align-content: start; }

.site-footer__newsletter-title {
  margin: 0;
  color: var(--paper);
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
  text-wrap: balance;
}

.site-footer__newsletter-text {
  max-width: 44ch;
  margin: 0;
  color: var(--night-text);
  font-size: .95rem;
  line-height: 1.5;
}

.site-footer__newsletter-form {
  display: grid;
  gap: 10px;
  max-width: 560px;
}

.site-footer__newsletter-label {
  color: var(--paper);
  font-size: .88rem;
  font-weight: 700;
}

/* Champ et bouton dans une même capsule : le champ en capsule sur l'encre
   (instrument.css). Le contour reste à 8,6 contre 1 sur la nuit. */
.site-footer__newsletter-row {
  --field-line: var(--night-text);
  min-height: 56px;
  padding: 5px 5px 5px 20px;
}

.site-footer__newsletter-row:has([aria-invalid="true"]) { border-color: var(--night-error); box-shadow: inset 0 0 0 1px var(--night-error); }

.site-footer__newsletter-input { font-size: 1rem; font-weight: 400; }

.site-footer__newsletter-submit {
  flex: 0 0 auto;
  min-height: 44px;
  border-radius: 999px;
}

.site-footer__newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 4px;
  color: var(--night-text);
  font-size: .86rem;
  line-height: 1.45;
}

/* Case arrondie à 6 px, comme les cases des formulaires du site ; cochée,
   elle prend l'accent avec une coche d'encre (11,6 contre 1). */
.site-footer__newsletter-consent input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--night-text);
  border-radius: 6px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.site-footer__newsletter-consent input:checked {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23102b3f' stroke-width='2.2'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.site-footer__newsletter-consent input[aria-invalid="true"] { border-color: var(--night-error); box-shadow: 0 0 0 1px var(--night-error); }

.site-footer__newsletter-consent label { cursor: pointer; }

.site-footer__newsletter-error {
  margin: 0;
  color: var(--night-error);
  font-size: .86rem;
  font-weight: 700;
}

.site-footer__newsletter-error[hidden] { display: none; }

.site-footer__newsletter-privacy { margin: 0; font-size: .84rem; }

.site-footer__newsletter-privacy a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--night-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--motion-state);
}

.site-footer__newsletter-privacy a:hover { color: var(--paper); }

.site-footer__newsletter-status:empty { display: none; }
.site-footer__newsletter-status p { margin: 0; padding: 10px 16px; border-radius: 12px; font-weight: 700; line-height: 1.45; }
.site-footer__newsletter-success { background: var(--accent); color: var(--ink); }
.site-footer__newsletter-failure { border: 1px solid var(--night-error); color: var(--night-error); }

/* Même grille que l'étage de navigation : l'accroche au-dessus de la
   marque, le formulaire au-dessus des trois colonnes. */
@media (min-width: 1024px) {
  .site-footer__newsletter {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    padding-block: 56px 48px;
  }

  .site-footer__newsletter-form { grid-column: 2 / -1; }
}

/* ---------- Étage 1 : marque et navigation ---------- */

.site-footer__main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 20px;
  padding-block: 56px 44px;
}

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

.brand--footer { margin-bottom: 26px; color: var(--paper); }
.brand--footer .brand__image { max-width: 135px; }

.site-footer__signature {
  max-width: 13ch;
  margin: 0;
  /* Le vert de la charte, seul accent du site, sur le fond de nuit. */
  color: var(--accent);
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.site-footer__intro {
  max-width: 34ch;
  margin: 18px 0 0;
  color: var(--night-text);
  font-size: .95rem;
  line-height: 1.5;
}

.site-footer__social { margin-top: 22px; }
.site-footer__social ul { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -10px; }

.site-footer__social-link {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--night-text);
  transition: color var(--motion-state);
}

.site-footer__social-link:hover { color: var(--accent); }

.icon-social { display: block; }

.site-footer__heading {
  margin: 0 0 12px;
  color: var(--paper);
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.site-footer__column ul { display: grid; gap: 0; }

.site-footer__column a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--night-text);
  font-size: .95rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--motion-state);
}

.site-footer__column a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

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

.site-footer__hours {
  max-width: 30ch;
  margin: 8px 0 0;
  color: var(--night-text);
  font-size: .88rem;
  line-height: 1.5;
}

/* ---------- Étage 2 : rangée légale ---------- */

.site-footer__legal[hidden] { display: none; }

.site-footer__legal {
  padding-block: 14px;
  border-top: 1px solid var(--night-line);
}

/* Une grille, pas un flux : deux colonnes alignées sur mobile, trois sur
   tablette, une ligne répartie sur toute la largeur sur ordinateur. Les
   liens restent sobres, le soulignement vert n'apparaît qu'au survol. */
.site-footer__legal ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}

@media (min-width: 600px) {
  .site-footer__legal ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .site-footer__legal ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0 24px;
  }
}

.site-footer__legal li[hidden] { display: none; }

/* Sur mobile, les deux libellés longs prennent leur forme courte pour que
   la grille reste sur une ligne par lien. La forme longue n'est masquée qu'à
   l'écran : les lecteurs d'écran lisent les deux, et une commande vocale sur
   « CGV » trouve le lien. */
.site-footer__legal .site-footer__label-short { display: none; }

@media (max-width: 599px) {
  .site-footer__legal .site-footer__label-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .site-footer__legal .site-footer__label-short { display: inline; }
}

.site-footer__legal a,
.site-footer__legal li > span,
.site-footer__cookies {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--night-text);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color var(--motion-state), text-decoration-color var(--motion-state);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible,
.site-footer__cookies:hover,
.site-footer__cookies:focus-visible {
  color: var(--paper);
  text-decoration-color: var(--accent);
}

.site-footer__cookies { cursor: pointer; }

/* ---------- Étage 3 : identité, langue, paiement ---------- */

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px 28px;
  padding-block: 18px 26px;
  border-top: 1px solid var(--night-line);
  color: var(--night-text);
  font-size: .8rem;
}

.site-footer__identity {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 0;
}

.site-footer__bottom .lang-switch__list { gap: 6px; }

.site-footer__bottom .lang-switch__item {
  min-height: 44px;
  padding: 0;
  /* Couleur pleine sur la nuit, 8,6:1, sans opacité héritée. */
  color: var(--night-text);
  font-size: .78rem;
  letter-spacing: .06em;
}

.site-footer__bottom .lang-switch__item:hover,
.site-footer__bottom .lang-switch__item[aria-current="true"] { color: var(--paper); }

.site-footer__payments ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

svg.site-footer__payment-icon { display: block; width: 38px; height: 24px; }

/* ---------- 600 px : trois colonnes sous la marque, identité en ligne ---------- */

@media (min-width: 600px) {
  .site-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__contact { grid-column: auto; }

  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer__identity { flex: 1 1 auto; }
}

/* ---------- 1024 px : marque à gauche, trois colonnes ---------- */

@media (min-width: 1024px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
    padding-block: 80px 64px;
  }

  .site-footer__brand { grid-column: auto; }
  .brand--footer .brand__image { max-width: 175px; }

  .site-footer__column a { min-height: 36px; }
}