/* ===== BASE ===== */
:root{--noir:#000;--blanc:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--noir);color:var(--blanc);font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:.04em;line-height:1.4}
a{color:inherit}

/* ===== BANDEAU ===== */
header{background:var(--blanc);color:var(--noir);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 5vw;position:sticky;top:0;z-index:10}
header .logo{font-size:2rem;text-decoration:none;display:flex;align-items:center;gap:12px}
header .logo img{height:35px;width:auto}
nav{display:flex;gap:28px;flex-wrap:wrap}
nav a{text-decoration:none;font-size:1.4rem;border-bottom:3px solid transparent}
nav a:hover,nav a.actif{border-bottom-color:var(--noir)}
footer{background:var(--blanc);color:var(--noir);text-align:center;padding:20px}

/* ===== ACCUEIL ===== */
.hero{text-align:center;padding:12vh 5vw;border-bottom:2px solid var(--blanc)}
.hero h1{font-size:clamp(4rem,16vw,12rem);line-height:.9;font-weight:400}
.hero p{font-size:clamp(1.4rem,3vw,2.2rem);margin-top:16px}
.hero .sous-titre{font-size:clamp(1rem,1.8vw,1.4rem);font-style:italic;margin:14px auto 0;max-width:60ch;opacity:.85}
.btn-hero{display:inline-block;margin-top:32px;padding:14px 40px;font-size:1.6rem}
.photo-large{border-bottom:2px solid var(--blanc);height:70vh;background:#222}
.photo-large img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.bloc{display:grid;grid-template-columns:1fr 1fr;border-bottom:2px solid var(--blanc)}
.bloc:nth-of-type(even) .photo{order:2}
.photo{background:#222;min-height:360px;border-right:2px solid var(--blanc)}
.bloc:nth-of-type(even) .photo{border-right:0;border-left:2px solid var(--blanc)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.texte{padding:6vw;display:flex;flex-direction:column;justify-content:center;gap:14px}
.texte h2{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:400;line-height:1}
.texte p{max-width:34ch;font-size:1.4rem}

/* ===== TITRES DE PAGES ET DE SECTIONS ===== */
.titre-page{padding:8vh 5vw;border-bottom:2px solid var(--blanc);font-size:clamp(3rem,9vw,7rem);line-height:1;font-weight:400}
.titre-section{padding:5vh 5vw;border-bottom:2px solid var(--blanc);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:400;line-height:1}

/* ===== BOUTONS ===== */
.btn{margin-top:auto;display:block;text-align:center;background:var(--blanc);color:var(--noir);padding:10px;text-decoration:none;font-size:1.4rem;border:2px solid var(--blanc)}
.btn:hover{background:var(--noir);color:var(--blanc)}
.btn.epuise{opacity:.4;cursor:not-allowed}
.filtres{display:flex;gap:16px;flex-wrap:wrap;padding:24px 5vw;border-bottom:2px solid var(--blanc)}
.filtres .btn{margin-top:0;display:inline-block;padding:10px 40px}

/* ===== SHOP ===== */
.barre-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;padding:20px 5vw;border-bottom:2px solid var(--blanc)}
.groupe{display:flex;flex-wrap:wrap;gap:8px}
.filtre{background:var(--noir);color:var(--blanc);border:2px solid var(--blanc);font-family:inherit;font-size:1.3rem;letter-spacing:inherit;padding:6px 22px;cursor:pointer}
.filtre:hover,.filtre.actif{background:var(--blanc);color:var(--noir)}
#compteur{margin-left:auto;opacity:.7}
.vide{grid-column:1/-1;padding:8vh 5vw;font-size:1.6rem}
.grille{display:grid;grid-template-columns:repeat(3,1fr);border-left:2px solid var(--blanc)}
.produit{border-right:2px solid var(--blanc);border-bottom:2px solid var(--blanc);display:flex;flex-direction:column}
.produit .photo{min-height:0;aspect-ratio:4/5;border:0;border-bottom:2px solid var(--blanc)}
.produit .infos{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.produit h3{font-size:1.8rem;font-weight:400}
.produit p{font-size:1.1rem;opacity:.85}
.prix{font-size:1.6rem}

/* ===== COLLAB ===== */
.collab-intro{padding:6vh 5vw;border-bottom:2px solid var(--blanc);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.collab-question{font-size:clamp(1rem,1.8vw,1.5rem);line-height:1.2;max-width:50ch}
.collab-slogan{font-size:clamp(1.2rem,2.5vw,2.2rem);line-height:1.1}
.collab-ligne{display:grid;grid-template-columns:1fr 2fr;border-bottom:2px solid var(--blanc)}
.collab-ligne .photo{min-height:0;aspect-ratio:4/5;border-right:2px solid var(--blanc)}
.collab-ligne .texte{padding:4vw;justify-content:center}
.collab-ligne h3{font-size:clamp(2rem,4vw,3.2rem);font-weight:400;line-height:1}
.collab-ligne .texte p{max-width:50ch;font-size:clamp(1.3rem,2vw,1.7rem)}

/* ===== GALERIE ===== */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);border-left:2px solid var(--blanc)}
.galerie figure{border-right:2px solid var(--blanc);border-bottom:2px solid var(--blanc);background:#222;aspect-ratio:4/5}
.galerie img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== TABLETTE ===== */
@media(max-width:900px){
  .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== TÉLÉPHONE ===== */
@media(max-width:700px){
  /* Bandeau : logo, puis menu sur une seule ligne */
  header{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 5vw}
  header .logo{font-size:1.5rem}
  header .logo img{height:26px}
  nav{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:0}
  nav a{font-size:1.15rem}

  /* Titres */
  .titre-page{padding:5vh 5vw}
  .titre-section{padding:4vh 5vw;font-size:2rem}

  /* Accueil */
  .hero{padding:7vh 6vw}
  .hero p{font-size:1.3rem}
  .hero .sous-titre{font-size:.95rem}
  .btn-hero{margin-top:22px;padding:12px;font-size:1.3rem}
  .photo-large{height:40vh}
  .bloc{grid-template-columns:minmax(0,1fr)}
  .bloc .texte{order:0;padding:7vw 6vw;gap:10px;border-bottom:2px solid var(--blanc)}
  .bloc .photo,.bloc:nth-of-type(even) .photo{order:1;min-height:0;aspect-ratio:1/1;border:0}
  .texte h2{font-size:2.2rem}
  .texte p{max-width:none;font-size:1.05rem;line-height:1.35}

  /* Shop */
  .barre-filtres{padding:14px 5vw;gap:10px 16px}
  .filtre{font-size:1.05rem;padding:5px 14px}
  .produit .infos{padding:12px;gap:6px}
  .produit h3{font-size:1.25rem;line-height:1.1}
  .produit p{font-size:.95rem;line-height:1.25}
  .prix{font-size:1.2rem}
  .produit .btn{font-size:1.1rem;padding:8px}

    /* Collab : photo et texte alignés sur chaque ligne */
  .collab-intro{padding:5vh 6vw}
  .collab-ligne{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .collab-ligne .photo{position:relative;aspect-ratio:auto;min-height:220px;border-right:2px solid var(--blanc)}
  .collab-ligne .photo img{position:absolute;inset:0}
  .collab-ligne .texte{padding:4vw;gap:6px}
  .collab-ligne h3{font-size:1.15rem;line-height:1.05}
  .collab-ligne .texte p{font-size:.8rem;line-height:1.25}