/* =========================================================================
   NOVRA — Responsive (mobile-first sur les points de rupture descendants)
   Points testés : 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================= */

/* ------------------------------ ≥ 1600 px -------------------------------- */
@media (min-width: 1600px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------ ≤ 1280 px -------------------------------- */
@media (max-width: 1280px) {
  :root { --gutter: 32px; }
  .main-nav { gap: 22px; }
  .main-nav a { font-size: .7rem; letter-spacing: .12em; }
  .shop-layout { grid-template-columns: 220px 1fr; gap: 36px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-page { gap: 44px; }
  .footer-top { grid-template-columns: 1fr repeat(4, 1fr); gap: 28px; }
}

/* ------------------------------ ≤ 1024 px -------------------------------- */
@media (max-width: 1024px) {
  :root { --gutter: 26px; --header-h: 66px; }

  .section { padding: 84px 0; }
  .section-sm { padding: 60px 0; }

  .main-nav { display: none; }
  .burger { display: block; }

  .hero-inner { padding-bottom: 80px; }

  /* Héros internes — tablette */
  .page-hero { min-height: 520px; }
  .page-hero__slide:nth-child(1) { object-position: 50% 20%; }
  .page-hero__slide:nth-child(2) { object-position: 50% 32%; }
  .page-hero__slide:nth-child(3) { object-position: 50% 34%; }

  .page-hero--mission .page-hero__image { object-position: 58% 28%; }

  .split { grid-template-columns: 1fr; }
  .split.is-reverse .split-media { order: -1; }
  .split-media { min-height: 52vh; }

  .collections { grid-template-columns: 1fr; }
  .collection-card { min-height: 52vh; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .grid-3 { grid-template-columns: 1fr; gap: 30px; }

  .dna-item { grid-template-columns: 180px 60px 1fr; gap: 24px; }
  .dna-item img { height: 130px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }

  .shop-layout { grid-template-columns: 1fr; gap: 0; }
  .filters {
    position: fixed; inset: 0; z-index: 230;
    background: var(--white);
    padding: 26px var(--gutter) 100px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .45s var(--ease-out);
  }
  .filters.is-open { transform: translateX(0); }
  .filters-head { display: flex !important; }

  .product-page { grid-template-columns: 1fr; gap: 34px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-thumbs { flex-direction: row; overflow-x: auto; max-height: none; order: 2; }
  .gallery-thumbs img { width: 72px; }

  .cart-page, .checkout-layout, .contact-layout { grid-template-columns: 1fr; gap: 36px; }
  .cart-summary, .summary-box { position: static; }

  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ------------------------------- ≤ 768 px -------------------------------- */
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  body { font-size: 15px; }

  .section { padding: 64px 0; }
  .section-sm { padding: 48px 0; }

  /* --- Hero mobile ---------------------------------------------------
     Un hero plein écran (100dvh) avec une vidéo horizontale (1280x732)
     posée en `contain` dans un cadre vertical laisse mécaniquement une
     bande noire au-dessus ET en dessous de la vidéo — agrandir la vidéo
     pour combler l'un des deux vides fait grandir l'autre d'autant ; les
     deux ne peuvent pas être petits ensemble sans zoomer la vidéo au
     point de ne plus rien reconnaître à l'écran (testé).

     Le hero ne fait donc plus une hauteur forcée : il s'arrête à la
     hauteur de son propre contenu (la vidéo), comme n'importe quelle
     section. `.hero-media` prend exactement le ratio de la vidéo
     (1280/732) — aucune bande noire, aucun rognage. Le header, fixe
     et transparent, se pose directement sur son bord supérieur.

     C'était `min-height:100dvh` qui évitait qu'un bout de la section
     suivante n'apparaisse sous un header fixe : cette hauteur dynamique
     (contrairement à `vh`) suit déjà le viewport réel, mais un hero à
     hauteur de contenu n'a de toute façon plus ce problème — il n'y a
     simplement plus de zone vide à combler avant la section suivante. */
  .hero {
    display: block;
    min-height: 0;
    background: var(--black);
    overflow: visible;
  }
  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1280 / 732;
    background: var(--black);
    overflow: hidden;
  }
  .hero-media video, .hero-media img {
    object-fit: cover;
    object-position: center center;
    transform: none;
  }
  /* Le dégradé ne couvre plus que la vidéo (même ratio qu'elle, ancré en
     haut du hero) : au-delà, les boutons ne sont plus sur la vidéo, un
     assombrissement n'y a plus de raison d'être. */
  .hero-overlay {
    position: absolute;
    inset: 0 0 auto 0;
    aspect-ratio: 1280 / 732;
    background: linear-gradient(to bottom, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 78%, rgba(10,10,10,.55) 100%);
  }

  /* Logo superposé masqué sur mobile : la vidéo affiche déjà le logo animé
     et le header le reprend. On masque le conteneur ET l'image pour ne pas
     laisser la marge basse du titre derrière un élément invisible.        */
  .hero-logo-title,
  .hero-main-logo { display: none; }

  /* .hero-inner ne contient plus que le <h1> invisible (boutons Shop /
     Notre mission retirés) : plus aucun padding ici, sinon il reste un
     bandeau noir vide entre la vidéo et la section suivante. */
  .hero-inner { padding: 0; }

  .brand { padding: 7px 11px; }
  .brand img { height: 11px; }

  /* Héros internes — mobile : cadrage propre au sujet, pas de reprise du desktop */
  .page-hero { min-height: clamp(420px, 118vw, 560px); }
  .page-hero .container { padding-top: 70px; padding-bottom: 40px; }
  .page-hero__overlay {
    background: linear-gradient(to top, rgba(10,10,10,.9) 0%, rgba(10,10,10,.5) 38%, rgba(10,10,10,.1) 72%, rgba(10,10,10,0) 100%);
  }
  /* Diaporama boutique — mobile : le format vertical des photos est exploité
     à fond, on peut donc descendre le point focal et montrer plus de produits */
  .page-hero__slide:nth-child(1) { object-position: 50% 30%; }
  .page-hero__slide:nth-child(2) { object-position: 50% 35%; }
  .page-hero__slide:nth-child(3) { object-position: 50% 40%; }

  .page-hero--mission .page-hero__image { object-position: 55% 30%; }

  .feature-list { grid-template-columns: 1fr; gap: 26px; }

  .dna-item { grid-template-columns: 1fr; gap: 14px; padding: 30px 0; }
  .dna-item img { height: 200px; }
  .dna-num { font-size: 2rem; }

  .product-grid, .product-grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 30px 14px; }
  .product-name { font-size: 1rem; }
  /* Sur mobile, l'ajout rapide reste visible en permanence (pas de survol) :
     petite pastille discrète en bas à droite plutôt qu'un bandeau pleine
     largeur, pour laisser voir le produit — demande du chef de projet. */
  .product-quick { opacity: 1; transform: none; right: 8px; bottom: 8px; left: auto; }
  .product-quick .btn { padding: 7px 13px; font-size: .56rem; letter-spacing: .08em; }
  /* Cartes plus étroites (grille à 2 colonnes) : l'étiquette "Nouveauté"
     se resserre encore un peu pour rester discrète et ne jamais empiéter
     sur le sujet de la photo (visage, torse…). */
  .product-badge { top: 8px; left: 8px; padding: 3px 7px; font-size: .52rem; letter-spacing: .05em; }

  .shop-toolbar { position: static; padding: 16px 0; }
  .sort-wrap span { display: none; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }

  .pdp-actions { flex-direction: column; }
  .field-row { grid-template-columns: 1fr; gap: 0; }

  .cart-drawer { width: 100%; }
  .cart-drawer-head, .cart-drawer-body, .cart-drawer-foot { padding-left: 20px; padding-right: 20px; }

  .toast-stack { left: 16px; right: 16px; bottom: 16px; }
  .toast { min-width: 0; max-width: none; }

  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

  .mobile-menu nav a { font-size: 1.6rem; }
  .modal-box { padding: 24px; }
  .size-table { font-size: .78rem; }
  .size-table th, .size-table td { padding: 8px; }
}

/* ------------------------------- ≤ 430 px -------------------------------- */
@media (max-width: 430px) {
  .display-1 { font-size: clamp(2.6rem, 14vw, 3.6rem); }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .carousel figure { flex-basis: 74vw; }
  .cart-line { grid-template-columns: 68px 1fr; gap: 12px; }
  .cart-line img { width: 68px; }
}

/* ------------------------------- ≤ 360 px -------------------------------- */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .product-grid, .product-grid.cols-4 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .btn { padding: 14px 22px; font-size: .72rem; letter-spacing: .14em; }
}

/* --------------------- Barre d'action filtres mobile --------------------- */
.filters-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.filters-head h2 { font-size: 1.1rem; letter-spacing: .12em; }

/* =========================================================================
   HOME MOBILE — composition éditoriale dédiée
   N'affecte que la page d'accueil (body[data-page="home"]) sous 768 px.
   Le desktop et les autres pages ne sont pas concernés.
   ========================================================================= */
@media (max-width: 768px) {

  /* --- Rythme de lecture : hero, marque, campagnes, shop, storytelling --- */
  body[data-page="home"] main { display: flex; flex-direction: column; }
  body[data-page="home"] [data-home="hero"]        { order: 1; }
  body[data-page="home"] [data-home="marque"]      { order: 2; }
  body[data-page="home"] [data-home="collections"] { order: 3; }
  body[data-page="home"] [data-home="categories"]  { order: 4; }
  body[data-page="home"] [data-home="techno"]      { order: 5; }
  body[data-page="home"] [data-home="mission"]     { order: 6; }
  body[data-page="home"] [data-home="communaute"]  { order: 7; }

  .home-mobile { display: block; }

  /* --- Blocs campagne pleine largeur ---------------------------------- */
  .campaign {
    position: relative;
    min-height: 82svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--black);
    color: var(--white);
  }
  .campaign-media { position: absolute; inset: 0; }
  .campaign-media img { width: 100%; height: 100%; object-fit: cover; }
  .campaign-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 130px var(--gutter) 46px;
    background: linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.6) 42%, rgba(10,10,10,0) 100%);
  }
  .campaign-body .eyebrow { color: var(--white-45); margin-bottom: 10px; }
  .campaign-body h2 { font-size: clamp(2rem, 9vw, 3.2rem); margin-bottom: 14px; }
  .campaign-body p { color: var(--white-70); font-size: .95rem; margin: 0 0 24px; max-width: 26ch; }

  /* --- Collections Homme / Femme / Accessoires en campagnes ------------ */
  /* Le bloc titre (eyebrow + h2) a été retiré du HTML pour tous les
     formats : plus besoin de le masquer spécifiquement ici. */
  body[data-page="home"] [data-home="collections"] { padding: 0; }
  body[data-page="home"] .collections { gap: 0; }
  body[data-page="home"] .collection-card { min-height: 82svh; }
  body[data-page="home"] .collection-card img { opacity: .92; }
  body[data-page="home"] .collection-body {
    padding: 130px var(--gutter) 46px;
    background: linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.6) 42%, rgba(10,10,10,0) 100%);
  }
  body[data-page="home"] .collection-body h3 { font-size: clamp(2rem, 9vw, 3.2rem); margin-bottom: 18px; }
  body[data-page="home"] .collection-body .link-underline {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 34px;
    border: 0;
    background: var(--white); color: var(--black);
    font-size: .72rem; letter-spacing: .18em;
  }
  /* Points focaux : visage et silhouette conservés sur chaque campagne */
  body[data-page="home"] .collection-card:nth-child(1) img { object-position: 50% 26%; }
  body[data-page="home"] .collection-card:nth-child(2) img { object-position: 50% 22%; }
  body[data-page="home"] .collection-card:nth-child(3) img { object-position: 50% 24%; }

  /* --- Sections éditoriales image + texte ------------------------------ */
  body[data-page="home"] .split-media { min-height: 64svh; }
  body[data-page="home"] .split-text { padding: 40px var(--gutter) 48px; }

  /* --- Grille de catégories -------------------------------------------- */
  .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-card {
    position: relative; display: block;
    aspect-ratio: 3 / 4; overflow: hidden;
    background: var(--grey-50);
  }
  .cat-card img { width: 100%; height: 100%; object-fit: cover; }
  .cat-card span {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 34px 14px 14px;
    font-family: var(--font-display);
    font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--white);
    background: linear-gradient(to top, rgba(10,10,10,.88), rgba(10,10,10,0));
  }

  /* --- Respiration resserrée entre les blocs ---------------------------- */
  body[data-page="home"] .section { padding: 56px 0; }
  body[data-page="home"] .section-sm { padding: 44px 0; }

  /* --- Carrousel communauté : lecture tactile pleine largeur ------------ */
  body[data-page="home"] [data-home="communaute"] .carousel {
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 8px;
    scroll-padding-left: var(--gutter);
  }
  body[data-page="home"] [data-home="communaute"] .carousel figure { flex-basis: 72vw; }
  body[data-page="home"] .carousel-nav { display: none; }
}

/* --------------------------- Footer mobile ------------------------------- */
@media (max-width: 768px) {
  .footer-col h3 {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-dark);
    cursor: pointer;
    text-align: left;
  }
  .footer-col h3::after {
    content: '';
    width: 9px; height: 9px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .35s var(--ease);
    flex: none;
  }
  .footer-col[data-open="true"] h3::after { transform: rotate(-135deg) translate(-3px, -3px); }

  .footer-col .footer-col-links { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
  .footer-col a { padding: 9px 0; }
  .footer-top { display: block; padding-bottom: 34px; }
  .footer-brand { margin-bottom: 28px; }
  .site-footer { padding: 56px 0 34px; }
}

/* ------------- Tablette en portrait : même contrainte de ratio ------------ */
/* 768x1024 et équivalents : la vidéo horizontale serait tout autant rognée.  */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-media video, .hero-media img {
    object-fit: contain;
    object-position: center 55%;
  }
  .hero-overlay {
    background: linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 20%, rgba(10,10,10,0) 60%, rgba(10,10,10,.62) 100%);
  }
}

/* --------------------------- Écrans très larges -------------------------- */
@media (min-width: 1921px) {
  :root { --maxw: 1760px; }
}