/* ──────────────────────────────────────────────────────────────────────────
   Responsive — mobile-first, breakpoints en min-width
   ────────────────────────────────────────────────────────────────────────── */


/* ════ < 768 px — corrections mobile (hero plein viewport, scroll visible) ═ */
@media (max-width: 767px) {
  .hero {
    /* svh = small viewport height : exclut les barres URL mobiles, */
    /* garantit que tout le hero (incluant le bouton scroll) tient dans la zone visible. */
    min-height: 88vh;
    min-height: 100svh;
    padding-block:
      var(--space-xl)
      calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
  }

  .hero__scroll {
    bottom: max(var(--space-md), calc(env(safe-area-inset-bottom, 0px) + 0.6rem));
  }
}


/* ════ ≥ 640 px — petits ajustements ══════════════════════════════════ */
@media (min-width: 640px) {
  .recu__grid {
    gap: var(--space-xl);
  }
}


/* ════ ≥ 768 px — tablette portrait ═══════════════════════════════════ */
@media (min-width: 768px) {

  /* — Navigation — toggle masqué, menu desktop visible */
  .site-nav__toggle {
    display: none;
  }

  .site-nav__menu,
  .site-nav__menu[data-open="true"] {
    display: flex;
    position: static;
    inset: auto;
    background: transparent;
    padding: 0;
    z-index: auto;
    animation: none;
    overflow: visible;
    align-items: center;
  }

  .site-nav__menu[data-open="true"]::before {
    content: none;
    display: none;
  }

  .site-nav__menu .site-nav__list,
  .site-nav__menu[data-open="true"] .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    margin-top: 0;
  }

  .site-nav__menu .site-nav__list li,
  .site-nav__menu[data-open="true"] .site-nav__list li {
    border: 0;
    width: auto;
    margin: 0;
  }

  .site-nav__menu .site-nav__list a,
  .site-nav__menu[data-open="true"] .site-nav__list a {
    display: inline;
    padding: 0;
    font-family: var(--font-body);
    font-weight: var(--fw-body-md);
    font-size: 0.92rem;
    color: var(--color-ink-soft);
    letter-spacing: normal;
  }

  .site-nav__menu .site-nav__list .site-nav__cta,
  .site-nav__menu[data-open="true"] .site-nav__list .site-nav__cta {
    padding: 0.55em 1.2em;
    background: var(--color-aubergine);
    color: var(--color-paper);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--radius-pill);
    margin-top: 0;
  }

  .site-nav__brand-line { font-size: 1.05rem; }

  /* — Hero — typo plus assurée */
  .hero__title {
    max-width: 18ch;
  }

  /* — Chapter grid : asymétrie 5/7 ou 7/5 */
  .chapter-grid {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-xl);
    row-gap: var(--space-lg);
  }

  .chapter-grid__roman {
    grid-row: 1;
    grid-column: 1;
  }

  .chapter-grid__head {
    grid-row: 2;
    grid-column: 1;
  }

  .chapter-grid__body {
    grid-row: 3;
    grid-column: 1;
  }

  .chapter-grid__media {
    grid-row: 1 / span 3;
    grid-column: 2;
    align-self: center;
  }

  /* Inversion média à gauche */
  .chapter-grid--reverse .chapter-grid__roman { grid-column: 2; }
  .chapter-grid--reverse .chapter-grid__head { grid-column: 2; }
  .chapter-grid--reverse .chapter-grid__body { grid-column: 2; }
  .chapter-grid--reverse .chapter-grid__media { grid-column: 1; }

  /* — Maison : photos côte à côte */
  .maison__photos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  /* — Chemin : mosaïque 2×2 */
  .chemin__mosaic {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  /* — Recu : on garde 1 col en tablette pour préserver la lisibilité des bulles */
  .recu__grid {
    grid-template-columns: 1fr;
    max-width: 36rem;
    margin-inline: auto var(--space-2xl);
    margin-inline: auto;
    gap: var(--space-md);
  }

  /* — Soin : 2 colonnes */
  .soin__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* — Bienvenue : numéros côte à côte */
  .bienvenue__numbers {
    flex-direction: row;
    justify-content: center;
  }

  /* — Footer : 4 colonnes */
  .site-footer__inner {
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: var(--space-xl);
    align-items: start;
  }

  /* — Table jardin : 2 colonnes */
  .table-jardin__grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: var(--space-2xl);
  }
}


/* ════ ≥ 1024 px — desktop ════════════════════════════════════════════ */
@media (min-width: 1024px) {

  .site-nav__list {
    gap: var(--space-lg);
  }

  /* — Hero desktop : aligné à gauche, plus généreux */
  .hero {
    min-height: 92vh;
    padding-bottom: var(--space-2xl);
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }

  .hero__content {
    align-items: flex-start;
    text-align: left;
    max-width: 60rem;
    margin-inline: 0;
  }

  .hero-eyebrow {
    justify-content: flex-start;
  }

  .hero__title {
    max-width: 14ch;
    margin-inline: 0;
    text-align: left;
  }

  .hero-title-line-2 {
    padding-left: 1.5ch;
    margin-inline: 0;
  }

  .hero__tagline {
    font-size: 1.45rem;
    margin-inline: 0;
    text-align: left;
  }

  .hero__meta {
    justify-content: flex-start;
    margin-inline: 0;
  }

  .hero__signature {
    align-items: flex-start;
  }

  /* — Chapter grid plus contrastée */
  .chapter-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-2xl);
  }

  .chapter-grid__roman .roman {
    font-size: clamp(3rem, 6vw, 5.5rem);
  }

  /* — Soin : 4 colonnes (desktop full) */
  .soin__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* — Chemin : grille 4 colonnes propre */
  .chemin__mosaic {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }

  .chemin__photo img {
    aspect-ratio: 4 / 5;
  }

  /* — Recu : 2×2 (4 témoignages) — cards larges et aérées, hauteurs égales par ligne. */
  .recu__grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    max-width: 60rem;
    margin-inline: auto;
    gap: var(--space-lg);
  }

  /* — Maison: 3 colonnes + photos plus grandes */
  .maison__photos {
    margin-top: var(--space-2xl);
  }
}


/* ════ ≥ 1280 px — large desktop ══════════════════════════════════════ */
@media (min-width: 1280px) {

  /* — Espacement plus généreux */
  .section {
    padding-block: var(--section-y);
  }

  /* — Hero typo plus expressive */
  .hero-title-line-2 {
    padding-left: 2.5ch;
  }

  /* — Chapter grid : 5/7 asymétrie */
  .chapter-grid {
    grid-template-columns: 5fr 7fr;
  }

  .chapter-grid--reverse {
    grid-template-columns: 7fr 5fr;
  }

  /* — Numéro romain en marge à gauche, gros */
  .chapter-grid__roman {
    position: relative;
  }

  .chapter-grid__roman .roman {
    font-size: clamp(4rem, 6vw, 6.5rem);
    border-bottom-width: 2px;
  }
}


/* ════ ≥ 1536 px — XL ════════════════════════════════════════════════ */
@media (min-width: 1536px) {
  .container {
    max-width: var(--container-full);
  }

  .hero__content {
    padding-bottom: var(--space-xl);
  }
}


/* ════ CARD‑RAIL Desktop : on bascule en vraie grille ═════════════════ */
@media (min-width: 768px) {
  .card-rail {
    margin-inline: 0;
  }
  .card-rail__track {
    display: grid;
    overflow: visible;
    scroll-snap-type: none;
    scroll-padding-inline: 0;
    padding: 0;
    gap: var(--space-md);
    align-items: stretch;
  }
  .card-rail__item {
    flex: initial;
    width: auto;
    max-width: none;
    min-width: 0;
    scroll-snap-align: none;
  }
  .card-rail__track.maison__grid    { grid-template-columns: repeat(3, 1fr); }
  .card-rail__track.maison__photos  { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .card-rail__track.soin__grid      { grid-template-columns: repeat(2, 1fr); }
  .card-rail__track.recu__grid      { grid-template-columns: repeat(2, 1fr); }

  /* Chemin : 6 sous-colonnes pour permettre 3+2 centré sur la 2e ligne (5 photos) */
  .card-rail__track.chemin__mosaic {
    grid-template-columns: repeat(6, 1fr);
  }
  .chemin__mosaic > .chemin__photo {
    grid-column: span 2;
  }
  .chemin__mosaic > .chemin__photo:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .chemin__mosaic > .chemin__photo:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

@media (min-width: 1024px) {
  .card-rail__track.soin__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ════ Recu carousel marquee — desktop seulement, no-preference ══════ */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .recu .card-rail {
    overflow: hidden;
<<<<<<< HEAD
    /* Full-bleed : colle le carousel au bord gauche du viewport
       quel que soit le max-width du container parent. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
=======
    margin-inline: calc(var(--gutter) * -1);
>>>>>>> refs/heads/synced/main
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
  }

  .recu .card-rail__track.recu__grid {
    display: flex;
    width: max-content;
    grid-template-columns: none;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-lg);
    overflow: visible;
    padding: 0.5rem 0 1.5rem;
    scroll-snap-type: none;
    animation: marqueeRecu 25s linear infinite;
  }

  .recu .card-rail__track.recu__grid:hover,
  .recu .card-rail__track.recu__grid:focus-within {
    animation-play-state: paused;
  }

  .recu .card-rail__item {
    width: 380px;
    flex: 0 0 380px;
    max-width: none;
    height: auto;
    scroll-snap-align: none;
  }
}


/* ════ Print ══════════════════════════════════════════════════════════ */
@media print {
  body::before { display: none; }
  .site-nav, .site-footer, .hero__scroll { display: none; }
  .hero { min-height: auto; color: var(--color-ink); }
  .hero__media { display: none; }
  .hero__title, .hero__tagline { color: var(--color-ink); }
  .section--inverse { background: var(--bg-section); color: var(--text-primary); }
  .section--inverse h2, .section--inverse .lead { color: var(--text-display); }
  a { color: var(--color-aubergine); background: none; }
}