/* Gouttiere laterale unique pour tous les blocs de contenu.
   Mobile (<640px) : 2px → quasi bord a bord (alignement avec site video).
   Tablet (640-1023) : 16px.
   Desktop (≥1024) : 0 (le main a sa propre largeur fixe). */
:root { --content-gutter: 2px; }
@media (min-width: 640px)  { :root { --content-gutter: 16px; } }
@media (min-width: 1024px) { :root { --content-gutter: 0px; } }

/* Sur mobile, on conserve un peu de padding sur les textes du header
   pour eviter que tagline et dedication ne touchent les bords. */
/* Mobile + tablette : seule la banniere est sticky, le tagline scrolle avec le contenu. */
@media (max-width: 1023px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: #fafaf7 !important;
  }

  /* Reduire l'espace entre tagline et premier titre de contenu, et remonter le tagline. */
  .site-tagline {
    margin-block: 0 2px !important;
  }
  .layout-container > main {
    padding-top: 6px !important;
  }
}

@media (max-width: 639px) {
  .site-tagline,
  .site-dedication {
    margin-inline: 12px !important;
  }

  /* Banniere bord-a-bord sans aucun espace blanc sur mobile. */
  .site-banner-link {
    padding-inline: 0 !important;
  }

  /* Tagline sur UNE seule ligne en mobile (parts inline, separateur visible, taille adaptative). */
  .site-tagline {
    font-size: clamp(0.7rem, 3.2vw, 1rem) !important;
    white-space: nowrap !important;
    margin-inline: 4px !important;
  }
  .site-tagline .tagline-part { display: inline !important; }
  .site-tagline .tagline-sep { display: inline !important; }

  /* Aligner les titres de section avec le debut de la photo dans les cards.
     Cards ont p-3 (12px). Avec gutter 4px, image-left = 16px du bord ecran.
     On applique padding-inline 12px aux lignes de titre pour les aligner. */
  main > section > h2,
  main > section > .flex.items-center.justify-between,
  .gallery-carousel-wrap > .gallery-carousel__title {
    padding-inline: 12px !important;
  }

  /* Agrandir un peu les titres de section sur mobile (text-base 16px → 18px). */
  main h2.font-extrabold,
  .gallery-carousel__title {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }
}

/* ============================================================
   VERROU LARGEURS - NE PAS MODIFIER SANS DECISION EXPLICITE
   ============================================================
   Ce fichier verrouille les largeurs critiques du site.
   Il est charge EN DERNIER dans base.html, apres bottom-nav.css
   et apres le CDN Tailwind, et utilise !important partout pour
   gagner contre toute regle concurrente (Tailwind preflight,
   modifications accidentelles dans bottom-nav.css, etc).

   Invariants verrouilles :
     - body                   max 1120px, centre
     - .layout-container      max 1120px, centre
     - .layout-container > main (desktop ≥1024)  exactement 860px
     - .bottom-nav  (desktop ≥1024)              exactement 240px
     - .site-banner           max 1120px, centre

   Total desktop : main 860 + gap 20 + sidebar 240 = 1120.

   Avant de modifier ce fichier, modifier AUSSI les memes regles
   dans bottom-nav.css pour rester coherent.
   ============================================================ */

html {
  scrollbar-gutter: stable both-edges !important;
}

body {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.site-banner {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1024px) {
  .layout-container {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .layout-container {
    gap: 20px !important;
  }

  .layout-container > main {
    flex: 0 0 860px !important;
    width: 860px !important;
    max-width: 860px !important;
    min-width: 0 !important;
  }

  .bottom-nav {
    width: 240px !important;
    flex-shrink: 0 !important;
  }
}