/* ========================================================================= *
 * layout.css — Conteneur, header et footer (DESIGN §4, §5.1, §5.11).          *
 * ========================================================================= */

/* ---------- Conteneur centré, padding horizontal responsive ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x-mobile);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--pad-x-tablet); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--pad-x-desktop); }
}

/* Section générique très aérée (DESIGN §4). */
.section {
  padding-block: var(--section-gap);
}

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

/* Bloc d'intro transitoire de l'accueil (remplacé par le hero au Sprint 4). */
.home-intro {
  padding-block: var(--space-8);
}

.home-intro p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.home-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* En-tête de page (titre + chapô) pour les pages de contenu. */
.page-header {
  padding-block: var(--space-8) var(--space-6);
}

.page-header__lead {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
}

.page-header__meta {
  margin-top: var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--fs-small);
}

/* Contenu rédactionnel lisible (mentions légales, RGPD, articles…). */
.prose {
  padding-bottom: var(--section-gap);
}

.prose h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.prose h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}

.prose p,
.prose li {
  color: var(--color-text-muted);
}

.prose p + p {
  margin-top: var(--space-2);
}

.prose ul {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  list-style: disc;
}

.prose li {
  margin-top: 0.5rem;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--color-primary-600);
}

/* Pages d'erreur 404 / 500. */
.error-page {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
}

.error-page__code {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

.error-page h1 {
  margin-top: var(--space-2);
}

.error-page p {
  margin-inline: auto;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.error-page__actions {
  margin-top: var(--space-4);
}

/* Marqueur visuel des données à valider par le client (ne jamais inventer). */
.placeholder {
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: rgba(245, 166, 35, .14);
  color: #8a5a00;
  font-weight: var(--fw-semibold);
  font-size: 0.95em;
}

/* ========================================================================= *
 * Header                                                                      *
 * ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out);
}

/* État au scroll (classe ajoutée par JS ; sans JS le header reste lisible). */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 72px;
}

/* Logo / wordmark */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  white-space: nowrap;
}

.site-logo__mark {
  display: inline-flex;
}

.logo-mark {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
}

.site-logo__text {
  font-size: 1rem;
}

/* Navigation principale.
   La barre porte cinq liens + deux boutons : tout est en `nowrap` et en
   `--fs-small`, sinon les libellés se coupent en deux lignes dès que la
   fenêtre se resserre. En dessous de 1400 px, la nav passe derrière le
   burger (cf. media query plus bas) plutôt que de s'empiler. */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__link {
  position: relative;
  padding: 0.5rem 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-text);
}

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

/* Boutons de la barre : compacts et insécables. Sélecteur composé pour
   l'emporter sur `.btn` de components.css (chargé après). */
.site-header .site-header__cta {
  padding: 0.65rem 1.05rem;
  font-size: var(--fs-small);
  white-space: nowrap;
}

/* La CTA dans le menu n'apparaît qu'en mobile (cf. media query plus bas). */
.site-nav__cta-item {
  display: none;
}

/* Bouton burger : masqué par défaut (et donc en l'absence de JS, où la nav
   reste visible). Affiché uniquement en mobile quand JS a posé .js-ready. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}

.nav-toggle__icon-close { display: none; }

@media (max-width: 1399px) {
  /* Sous 1400 px, la nav et les CTA quittent la barre pour le menu replié :
     cinq liens plus deux boutons ne tiennent pas à côté du logo sans que les
     libellés se coupent.
     Sélecteur composé pour l'emporter sur `.btn { display: inline-flex }`
     de components.css (chargé après, même spécificité sinon). */
  .site-header .site-header__cta {
    display: none;
  }

  .site-nav__cta-item {
    display: block;
  }

  .site-nav__cta-item .btn {
    width: 100%;
  }

  /* Sans JS, la nav reste visible : elle passe à la ligne au lieu de déborder. */
  .site-nav__list {
    flex-wrap: wrap;
  }

  /* ---- Menu replié (JS actif) : panneau plein écran -------------------- */
  .js-ready .nav-toggle {
    display: inline-flex;
  }

  /* Le panneau occupe toute la largeur et toute la hauteur sous la barre :
     `fixed` + `inset` plutôt qu'une hauteur calculée (svh gère les barres
     d'outils mobiles qui se rétractent). */
  .js-ready .site-nav {
    position: fixed;
    inset: 72px 0 0;
    display: none;
    padding: var(--space-4) var(--pad-x-mobile) var(--space-6);
    background: var(--color-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  @media (min-width: 768px) {
    .js-ready .site-nav { padding-inline: var(--pad-x-tablet); }
  }

  .js-ready .site-header.nav-open .site-nav {
    display: flex;
  }

  /* Barre opaque tant que le menu est ouvert : le panneau passe dessous. */
  .js-ready .site-header.nav-open {
    background: var(--color-bg);
    border-bottom-color: var(--color-border);
  }

  .js-ready .site-header.nav-open .nav-toggle__icon-open { display: none; }
  .js-ready .site-header.nav-open .nav-toggle__icon-close { display: inline; }

  /* La liste remplit la hauteur : liens en haut, CTA poussées en bas. */
  .js-ready .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    min-height: 100%;
  }

  .js-ready .site-nav__list > li:not(.site-nav__cta-item) {
    border-bottom: 1px solid var(--color-border);
  }

  .js-ready .site-nav__link {
    display: block;
    padding-block: var(--space-2);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
  }

  .js-ready .site-nav__link:hover,
  .js-ready .site-nav__link[aria-current="page"] {
    color: var(--color-primary);
  }

  /* Première CTA : `auto` la colle au bas du panneau quel qu'en soit le
     contenu ; sur un écran court, elle reprend simplement sa place dans le
     flux et le panneau défile. */
  .js-ready .site-nav__cta-item:nth-last-child(2) {
    margin-top: auto;
    padding-top: var(--space-4);
  }

  .js-ready .site-nav__cta-item + .site-nav__cta-item {
    margin-top: var(--space-2);
  }

  .js-ready .site-nav__cta-item .btn {
    padding-block: 0.9rem;
  }
}

/* Page verrouillée pendant que le menu plein écran est ouvert (posé par JS). */
.nav-lock,
.nav-lock body {
  overflow: hidden;
}

/* ========================================================================= *
 * Footer                                                                      *
 * ========================================================================= */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-block: var(--space-8) var(--space-6);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); }
}

.site-footer__brand .site-logo,
.site-footer__brand .site-logo__text {
  color: #fff;
}

.site-footer__tagline {
  margin-top: var(--space-2);
  max-width: 32ch;
  color: var(--color-footer-text);
  font-size: var(--fs-small);
}

.site-footer__col-title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.site-footer__links a {
  color: var(--color-footer-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__links a:hover {
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
}