/* ==========================================================================
   layout.css — bandeau d'annonce, en-tête, pied de page, structure de page
   ========================================================================== */

/* --- Bandeau d'annonce ---------------------------------------------------- */

.announcement {
  position: relative;
  z-index: var(--layer-raised);
  padding: 15px var(--page-padding);
  background: var(--color-inverse-background);
  color: var(--color-inverse-foreground);
  text-align: center;
}

.announcement__text {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1;
  text-wrap: pretty;
}

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

.announcement a:hover {
  text-decoration: underline;
}

/* --- En-tête -------------------------------------------------------------- */

.header {
  position: absolute;
  top: var(--announcement-height);
  left: 0;
  right: 0;
  z-index: var(--layer-sticky);
  height: var(--header-height);
  color: var(--color-foreground);
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-xs);
}

/* Ordre desktop : logo, navigation, (espace), recherche, compte, panier */
.header__brand {
  order: 1;
  display: inline-flex;
  align-items: center;
  flex: none;
}

.header__nav {
  order: 2;
  margin-right: auto;
}

.header__search {
  order: 3;
}

.header__inner > a[href$="compte.html"] {
  order: 4;
}

.header__inner > button[data-open="cart"] {
  order: 5;
}

.header__logo {
  width: auto;
  height: 36px;
}

.header__logo--light {
  display: none;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-left: var(--space-2xl);
}

.header__nav a {
  display: inline-flex;
  align-items: center;
  height: var(--touch-target);
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  text-decoration: none;
}

.header__nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 0;
  background: none;
  color: inherit;
  text-decoration: none;
}

.header__burger {
  display: none;
}

/* En-tête transparent au-dessus d'un visuel plein cadre (accueil) */
body[data-header="transparent"] .header {
  color: var(--color-inverse-foreground);
}

/* Voile dégradé sous l'en-tête transparent : sans lui, le blanc tombe à
   1,5:1 sur les zones claires de la photo (mesuré). Il porte la lisibilité
   au-dessus du seuil AA sans modifier la composition. */
body[data-header="transparent"] .header::before {
  content: "";
  position: absolute;
  inset: calc(var(--announcement-height) * -1) 0 auto 0;
  height: calc(var(--announcement-height) + var(--header-height) * 2.6);
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.55) 0%,
    rgb(0 0 0 / 0.5) 45%,
    rgb(0 0 0 / 0) 100%
  );
  pointer-events: none;
}

body[data-header="transparent"] .header__inner {
  position: relative;
  z-index: var(--layer-flat);
}

body[data-header="transparent"] .header__logo--dark {
  display: none;
}

body[data-header="transparent"] .header__logo--light {
  display: block;
}

/* En-tête transparent au-dessus d'un visuel clair (fiche produit) : texte noir */
body[data-header="overlay-dark"] .header {
  background: transparent;
}

/* En-tête plein : bandeau gris clair sous l'annonce */
body[data-header="solid"] .header {
  background: var(--color-surface);
}

body[data-header="solid"] .page-body {
  padding-top: var(--header-height);
}

/* Mobile : menu + recherche à gauche, logo centré, compte + panier à droite */
@media (max-width: 989px) {
  .header__nav {
    display: none;
  }
  .header__burger {
    display: inline-flex;
    order: 0;
  }
  .header__search {
    order: 1;
    margin-right: auto;
  }
  .header__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .header {
    height: var(--header-height-mobile);
  }
  .header__logo {
    height: 28px;
  }
  body[data-header="solid"] .page-body {
    padding-top: var(--header-height-mobile);
  }
}

/* --- Menu mobile ---------------------------------------------------------- */

.menu-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.menu-drawer__nav a {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  text-decoration: none;
}

.menu-drawer__secondary {
  margin-top: var(--space-5xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: var(--font-size-2xs);
}

.menu-drawer__secondary a {
  text-decoration: underline;
}

/* --- Corps de page -------------------------------------------------------- */

.page-body {
  min-height: 40svh;
}

.section {
  padding-block: var(--space-6xl);
}

.section--tight {
  padding-block: var(--space-5xl);
}

.section--surface {
  background: var(--color-surface);
}

.section__head {
  text-align: center;
  margin-bottom: var(--space-5xl);
}

.section__title {
  margin: 0 0 var(--space-lg);
  font-size: var(--font-size-3xl);
}

.section__note {
  max-width: 32.5em;
  margin-inline: auto;
  font-size: var(--font-size-sm);
  text-align: center;
}

/* --- Page éditoriale ------------------------------------------------------ */

.page-header {
  padding-block: var(--space-6xl) var(--space-4xl);
}

.page-header__title {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  text-transform: none;
  line-height: var(--line-height-heading-normal);
}

.rte {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body-loose);
}

.rte h2,
.rte h3 {
  margin-top: var(--space-5xl);
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 700;
  text-transform: none;
  line-height: var(--line-height-heading-normal);
}

.rte h3 {
  font-size: 1.25rem;
}

.rte h2:first-child,
.rte h3:first-child {
  margin-top: 0;
}

.rte p {
  margin-bottom: var(--space-lg);
}

.rte ul,
.rte ol {
  margin-bottom: var(--space-lg);
  padding-left: 1.5em;
}

.rte li {
  margin-bottom: var(--space-xs);
}

.rte a {
  text-decoration: underline;
}

.rte table {
  margin-bottom: var(--space-lg);
}

.rte th,
.rte td {
  padding: 11.2px 12.8px;
  border: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.rte th {
  background: var(--color-surface);
  font-weight: 700;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Pied de page --------------------------------------------------------- */

.footer {
  padding-block: var(--space-5xl) var(--space-4xl);
  background: var(--color-surface);
  text-align: center;
}

.footer__brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: var(--space-4xl);
}

.footer__brands img {
  height: 32px;
  width: auto;
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--space-4xl);
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
}

.footer__social .icon {
  width: 24px;
  height: 24px;
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl) var(--space-lg);
  margin-bottom: var(--space-4xl);
  list-style: none;
  padding: 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.footer__links a {
  font-size: var(--font-size-3xs);
  text-decoration: underline;
}

.footer__copyright {
  margin: 0;
  font-size: var(--font-size-2xs);
  color: var(--color-foreground);
}

@media (max-width: 749px) {
  .footer__links {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .footer__col {
    gap: var(--space-lg);
  }
  .footer__links a {
    font-size: var(--font-size-2xs);
  }
}