/* ==========================================================================
   LAYOUT — conteneur, en-tête, sections, grilles, pied de page
   ========================================================================== */

/* --- Conteneur ------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

@media (min-width: 60rem) {
  .container { padding-inline: var(--s-6); }
}

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

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--c-line);
}

/* Liseré tissé : signature de marque, présente en haut de chaque page */
.site-header::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background-image: repeating-linear-gradient(
    135deg,
    var(--c-brand-700) 0 8px,
    var(--c-accent-500) 8px 16px
  );
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--r-sm);
  background-color: var(--c-brand-700);
  color: var(--c-ink-inverse);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  transition: background-color var(--dur-base) var(--ease);
}

.brand__name {
  font-family: var(--f-display);
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
}

.brand__module {
  color: var(--c-ink-muted);
  font-weight: var(--w-regular);
}

.site-header__aside {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* --- Navigation principale (site vitrine) ----------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}

.site-nav a {
  color: var(--c-ink-muted);
  text-decoration: none;
}

.site-nav a:hover { color: var(--c-ink); }

/* --- Bouton menu mobile ------------------------------------------------------ */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex-shrink: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background-color: var(--c-surface);
}

.nav-toggle[aria-expanded="true"] { border-color: var(--c-brand-600); }

.nav-toggle__icon {
  position: relative;
  display: block;
  inline-size: 1.125rem;
  block-size: 2px;
  background-color: var(--c-ink);
  border-radius: 1px;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background-color: var(--c-ink);
  border-radius: 1px;
}

.nav-toggle__icon::before { inset-block-start: -0.375rem; }
.nav-toggle__icon::after { inset-block-start: 0.375rem; }

@media (max-width: 48rem) {
  .nav-toggle { display: inline-flex; }

  .site-header__aside {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    padding: var(--s-5);
    background-color: var(--c-surface);
    border-block-end: 1px solid var(--c-line);
    box-shadow: var(--shadow-md);
  }

  .site-header__aside[data-open="true"] { display: flex; }

  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }
}

/* --- Sections -------------------------------------------------------------- */

.section {
  padding-block: var(--s-8);
  border-block-start: 1px solid var(--c-line);
}

.section--first {
  padding-block-start: var(--s-7);
  border-block-start: 0;
}

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

@media (min-width: 60rem) {
  .section { padding-block: var(--s-9); }
}

.section__head {
  max-width: var(--container-text);
  margin-block-end: var(--s-6);
}

.section__title { margin-block: var(--s-3) 0; }

.section__lede {
  margin-block-start: var(--s-4);
  color: var(--c-ink-muted);
  font-size: var(--t-lg);
}

/* --- Étiquette de section (référence documentaire) ------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-brand-600);
  transition: color var(--dur-base) var(--ease);
}

.eyebrow::after {
  content: "";
  flex: 1;
  max-inline-size: 4rem;
  block-size: 1px;
  background-color: var(--c-line-strong);
}

/* --- Grilles --------------------------------------------------------------- */

.grid { display: grid; gap: var(--s-5); }

.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: minmax(0, 1fr); }
.grid--4 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stack { display: grid; gap: var(--s-4); }
.stack--tight { gap: var(--s-2); }
.stack--loose { gap: var(--s-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.hero-cta { margin-block-start: var(--s-6); }

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

.site-footer {
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--c-line);
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.site-footer__ref {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* --- Pied de page étendu (site vitrine) ------------------------------------- */

.site-footer__grid {
  display: grid;
  gap: var(--s-6);
  margin-block-end: var(--s-6);
}

@media (min-width: 40rem) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr; }
}

.site-footer__tagline {
  margin-block-start: var(--s-3);
  max-inline-size: 32ch;
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
}

.site-footer__nav {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.site-footer__nav-title {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-block-end: var(--s-1);
}

.site-footer__nav a {
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  text-decoration: none;
}

.site-footer__nav a:hover { color: var(--c-ink); }

.site-footer__inner.site-footer__inner--split {
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line);
}