/* ============================================
   BASE.CSS — Reset + typography + utilitaires (Chantier 1 — Passe 2)
   Charge sur : toutes les pages, après tokens.css + fonts.
   Cascade : @layer reset, tokens, base, layout, components, utilities, overrides.
   Cf. docs/chantiers/01-audit.md findings #4-12 + décisions arrêtées.
   ============================================ */

@layer reset, tokens, base, layout, components, utilities, overrides;

/* ╔══════════════════════════════════════════════
   ║ LAYER reset — modern minimal reset
   ╚══════════════════════════════════════════════ */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  h1, h2, h3, h4, h5, h6,
  p, ul, ol, blockquote, figure {
    margin: 0;
    padding: 0;
  }

  img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  img {
    border-radius: var(--radius-none);
  }
}

/* ╔══════════════════════════════════════════════
   ║ LAYER base — body, typography baseline, links
   ╚══════════════════════════════════════════════ */
@layer base {
  /* Inter retiré du thème (Chantier 1 Passe 3) — remplacé par Hanken Grotesk
     Variable (cf. assets/css/hanken-grotesk.css). Banni par brief. */

  body {
    background: var(--surface-default);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    font-optical-sizing: auto;
    font-feature-settings: var(--font-features-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Signature éditoriale : guillemets et ponctuation en marge. */
    hanging-punctuation: first allow-end last;
  }

  /* ── Headings (Cormorant Garamond — display) ── */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-feature-settings: var(--font-features-serif);
    color: var(--text-primary);
    text-wrap: balance; /* H1-H6 équilibrés (Aman/Calder Clark signature) */
  }

  h1 {
    font-size: var(--text-3xl);
    font-weight: var(--weight-light);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    max-width: var(--container-text-narrow);
  }

  h2 {
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-brand);
  }

  h4 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
  }

  /* ── Paragraphes & listes ── */
  p,
  li {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    max-width: var(--container-text);
    text-wrap: pretty; /* Pas d'orphelins (Aman signature long-form) */
  }

  small,
  .text-small {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
  }

  /* ── Liens ── */
  a {
    color: var(--text-brand);
    text-decoration: none;
    transition: var(--transition-color);
  }

  a:not(.btn):hover {
    color: var(--text-brand-strong);
  }

  /* ── Selection ── */
  ::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
  }

  /* ── Focus visible global (WCAG 2.4.7) ── */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role='button']:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--focus-ring-offset);
  }

  /* ── Skip link (WCAG 2.4.1 Bypass Blocks) ──
     Premier élément focusable du body. Caché hors écran par défaut,
     se révèle au focus clavier en haut à gauche, par-dessus la nav.
     Permet au clavier/SR utilisateur de sauter directement au contenu. */
  .skip-link {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: var(--z-splash);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-default);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    border: var(--border-base) solid var(--text-primary);
    transform: translateY(-200%);
    transition: transform var(--duration-swift) var(--ease-editorial);
  }

  .skip-link:focus-visible,
  .skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }
}

/* ╔══════════════════════════════════════════════
   ║ LAYER layout — containers & section paddings
   ╚══════════════════════════════════════════════ */
@layer layout {
  .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--container-padding);
  }

  .text-container {
    max-width: var(--container-text);
  }

  .text-container--narrow {
    max-width: var(--container-text-narrow);
    font-family: var(--font-serif);
  }

  .text-container--center {
    max-width: var(--container-text);
    margin-inline: auto;
    text-align: center;
  }

  .site-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
    box-sizing: border-box;
  }

  /* Rhythm vertical : densité section par couche (vitrine vs SEO) */
  .page-vitrine .section--contenu,
  .page-vitrine .section--respiration {
    padding-block: var(--space-3xl);
  }

  .page-vitrine .section--contenu.bg-sable {
    padding-block: var(--space-2xl);
  }

  .page-seo .section--contenu,
  .page-seo .section--respiration {
    padding-block: var(--space-2xl);
  }

  /* Bascule de fond (mécanisme inversion — read-first/eclat_m_dark_inversion.html) */
  .section--contenu.bg-sable {
    background: var(--surface-alt);
  }

  .section--contenu.bg-creme {
    background: var(--surface-default);
  }
}

/* ╔══════════════════════════════════════════════
   ║ LAYER components — primitives partagées
   ║ (composants riches : voir components.css en Passe 3)
   ╚══════════════════════════════════════════════ */
@layer components {
  /* ── Overline (eyebrow, suréchelle) ── */
  .overline {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: 1;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-brand);
    margin-bottom: var(--space-xs);
  }

  /* ── Accent line (séparateur signature) ── */
  .accent-line {
    width: 40px;
    height: 2px;
    background: var(--rose-200);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  /* ── Lead (paragraphe introductif) ── */
  .lead,
  .section-header .lead {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-secondary);
    max-width: var(--container-text);
    text-wrap: pretty;
  }

  /* ── Prose long-form ── */
  .prose-content {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
  }

  .prose-content p {
    margin: 0 0 var(--space-sm);
    max-width: var(--container-text);
    text-wrap: pretty;
  }

  .prose-content p:last-child {
    margin-bottom: 0;
  }

  /* ── Boutons (variantes — refonte composant complète en Passe 3) ── */
  .btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    padding: 14px 32px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-none);
    transition: var(--transition-feedback);
  }

  .btn--primary {
    background: var(--action-primary);
    color: var(--action-primary-text);
  }

  .btn--primary:hover {
    background: var(--action-primary-hover);
  }

  .btn--secondary {
    background: var(--action-secondary);
    color: var(--action-secondary-text);
    border: var(--border-base) solid var(--action-secondary-border);
    font-weight: var(--weight-regular);
    padding: 13px 31px;
  }

  .btn--secondary:hover {
    background: var(--action-secondary-border);
    color: var(--action-primary-text);
  }

  .btn--accent {
    background: var(--action-accent);
    color: var(--action-primary-text);
  }

  .btn--accent:hover {
    background: var(--action-accent-hover);
  }

  .btn--clair {
    background: var(--surface-default);
    color: var(--text-brand-strong);
  }

  .btn--clair:hover {
    background: var(--ivoire-200);
  }

  .btn--inverted,
  .section--signature .btn-signature {
    background: var(--surface-default);
    color: var(--text-brand-strong);
  }

  .btn--inverted:hover {
    background: var(--surface-alt);
  }

  .section--signature .btn-signature {
    margin-top: var(--space-md);
    border: var(--border-base) solid transparent;
    transition: background-color var(--duration-smooth) var(--ease-editorial),
                color var(--duration-smooth) var(--ease-editorial),
                border-color var(--duration-smooth) var(--ease-editorial);
  }

  .section--signature .btn-signature:hover {
    background: transparent;
    color: var(--surface-default);
    border-color: var(--surface-default);
  }

  .section--signature .btn-signature:active {
    opacity: 0.92;
  }

  /* ── Reveal / Stagger (sera migré en animation-timeline en Passe 8) ── */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-grand) var(--ease-entrance),
                transform var(--duration-grand) var(--ease-entrance);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-smooth) var(--ease-entrance),
                transform var(--duration-smooth) var(--ease-entrance);
  }

  .stagger > *:nth-child(1) { transition-delay: 0ms; }
  .stagger > *:nth-child(2) { transition-delay: 120ms; }
  .stagger > *:nth-child(3) { transition-delay: 240ms; }
  .stagger > *:nth-child(4) { transition-delay: 360ms; }
  .stagger > *:nth-child(5) { transition-delay: 480ms; }

  .stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Filet de sécurité no-JS ──
   Tant que scripts.js n'a pas remplacé .no-js par .js sur <html>, aucun
   contenu ne doit rester à opacity:0 : sans IntersectionObserver (JS bloqué,
   crawler, lecteur d'écran avec JS off), les .reveal/.stagger ne recevraient
   jamais .is-visible. Hors media query : s'applique dans tous les contextes. */
.no-js .reveal,
.no-js .stagger > * {
  opacity: 1;
  transform: none;
}

/* ╔══════════════════════════════════════════════
   ║ LAYER utilities — invisible, sr-only, helpers
   ╚══════════════════════════════════════════════ */
@layer utilities {
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
  }
}

/* ╔══════════════════════════════════════════════
   ║ LAYER overrides — responsive + a11y
   ║ (les composants spécifiques (components.css, hub/*, etc.)
   ║ sont en cascade unlayered et restent prioritaires).
   ╚══════════════════════════════════════════════ */
@layer overrides {
  /* Cibles tactiles mobile min 44x44 (WCAG 2.5.5) */
  @media (max-width: 767px) {
    .btn,
    .site-nav__toggle,
    .site-nav__mobile-link,
    .faq-item__question,
    .testimonial-carousel__btn,
    .testimonial-dot,
    .footer-google,
    .footer-social a,
    .footer-hubs__toggle,
    .testimonial__google-link,
    #back-to-top {
      min-width: 44px;
      min-height: 44px;
    }

    .site-nav__mobile-link,
    .testimonial__google-link {
      display: inline-flex;
      align-items: center;
    }
  }

  /* prefers-reduced-motion : graceful (pas brutal — on garde le micro-feedback hover) */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .stagger > * {
      opacity: 1;
      transform: none;
      transition: none;
    }

    /* Les transitions de feedback (hover/focus ≤ 200ms) restent — leur retrait nuit à l'UX. */
  }

  /* Typo responsive overrides — léger pour H1 mobile */
  @media (max-width: 767px) {
    h1 {
      line-height: 1.15;
      letter-spacing: var(--tracking-normal);
    }

    h2 {
      line-height: 1.25;
    }

    h3 {
      line-height: var(--leading-normal);
    }

    .lead,
    .section-header .lead {
      line-height: var(--leading-relaxed);
    }
  }
}