/* =========================================================
   LAUBURU — version « FICHE PRO » (alternative, sobre & lisible)
   Cible : commerçants / revendeurs sur les marchés
   Fond #f5f4f2 · accent rouge #b5363d · texte encre lisible · Outfit
   Volontairement peu animé, orienté information.
   ========================================================= */

@font-face { font-family:"Outfit"; src:url("../assets/fonts/Outfit-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../assets/fonts/Outfit-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../assets/fonts/Outfit-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../assets/fonts/Outfit-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }

:root{
  --bg:#f5f4f2;
  --surface:#ffffff;
  --ink:#262019;          /* texte courant : très lisible */
  --ink-soft:#6c645d;
  --red:#b5363d;          /* accent / titres / boutons */
  --red-dark:#8f2a30;
  --line:#e4ded7;
  --line-strong:#d4ccc3;
  --ease:cubic-bezier(.22,.68,.28,1);
  --red-tint:rgba(181,54,61,.06);
  --maxw:1140px;
  --gutter:clamp(18px,4vw,48px);
  --font:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-weight:500; line-height:1.6;
  font-size:clamp(15.5px,1.05vw,17px);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* libellé rouge (kicker) commun */
.kicker{
  display:inline-block; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; font-size:12.5px; color:var(--red);
  margin:0 0 14px;
}
h1,h2,h3{ color:var(--ink); margin:0; line-height:1.18; font-weight:700; }

/* boutons */
.btn{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:15px;
  padding:.8em 1.35em; border-radius:8px; border:1.6px solid var(--red); cursor:pointer; transition:background .18s,color .18s; }
.btn--solid{ background:var(--red); color:#fff; }
.btn--solid:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn--ghost{ background:transparent; color:var(--red); }
.btn--ghost:hover{ background:var(--red); color:#fff; }

/* ---------- BANDEAU UTILITAIRE (contact direct, trade) ---------- */
.topbar{ background:var(--red); color:#fff; font-size:13px; font-weight:600; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:8px; }
.topbar .left{ letter-spacing:.04em; text-transform:uppercase; }
.topbar .right{ display:flex; gap:18px; }
.topbar a:hover{ text-decoration:underline; }

/* ---------- EN-TÊTE ---------- */
.head{ background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; }
.head .wrap{ display:flex; align-items:center; gap:24px; padding-block:14px; }
.head .logo img{ height:52px; width:auto; display:block; }
.head nav{ display:flex; gap:clamp(16px,2.4vw,34px); margin-left:auto; }
.head nav a{ font-weight:600; font-size:15px; color:var(--ink); padding:6px 0; border-bottom:2px solid transparent; }
.head nav a:hover,.head nav a.is-active{ border-color:var(--red); color:var(--red); }
.head .head-cta{ margin-left:8px; }
.head .nav-order{ display:none; }   /* visible uniquement dans le menu mobile */
.burger{ display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); flex-direction:column; gap:4px; align-items:center; justify-content:center; cursor:pointer; }
.burger span{ width:20px; height:2px; background:var(--ink); transition:transform .25s var(--ease), opacity .2s var(--ease); }

/* ---------- HERO (fiche d'accroche, 2 colonnes) ---------- */
.hero{ background:#faf2e5; border-bottom:1px solid var(--line); }
.hero__media{ position:relative; }
.hero__illus{ display:block; width:100%; height:auto; }
.hero__media::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to right, rgba(250,242,229,.82) 0 16%, rgba(250,242,229,.32) 34%, rgba(250,242,229,0) 50%); }
.hero__text{ position:absolute; top:0; bottom:0; left:0; z-index:2; width:min(46%,520px); display:flex; flex-direction:column; justify-content:center; }
.hero .actions .btn{ box-shadow:0 8px 22px rgba(120,28,33,.18); }
.hero .actions .btn--ghost{ background:#fff; }
.hero h1{ font-size:clamp(23px,2.9vw,40px); letter-spacing:-.01em; line-height:1.12; }
.hero p.lead{ font-size:clamp(15px,1.2vw,18px); color:var(--ink-soft); margin:16px 0 24px; }
.hero .actions{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:820px){
  .hero__media::before{ display:none; }
  .hero__text{ position:static; width:100%; text-align:center; padding:clamp(18px,5vw,32px) 0 10px; }
  .hero p.lead{ margin-inline:auto; }
  .hero .actions{ justify-content:center; }
}

/* ---------- BANDE ARGUMENTS ---------- */
.args{ background:var(--surface); border-block:1px solid var(--line); }
.args .wrap{ padding-block:clamp(30px,4vw,52px); }
.args__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px); margin-top:22px; }
.arg{ }
.arg__n{ font-weight:700; color:var(--red); font-size:13px; letter-spacing:.08em; }
.arg h3{ font-size:18px; margin:8px 0 6px; }
.arg p{ margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.55; }
.arg{ padding-left:16px; border-left:2px solid var(--red); }

/* ---------- SECTION générique ---------- */
.section{ padding-block:clamp(38px,5vw,68px); }
.section__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.section__head h2{ font-size:clamp(22px,2.6vw,32px); }
.section__head a{ font-weight:600; color:var(--red); white-space:nowrap; }
.section__head a:hover{ text-decoration:underline; }

/* liste produits (catalogue lisible) */
.fam-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.fam{ background:var(--surface); padding:clamp(18px,2vw,24px); display:flex; flex-direction:column; gap:8px; }
.fam__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.fam h3{ font-size:18px; color:var(--red); }
.fam__fmt{ font-size:13px; color:var(--ink-soft); white-space:nowrap; }
.fam__items{ color:var(--ink); font-size:14.5px; line-height:1.55; }

/* comment ça marche */
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.step3{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:clamp(20px,2.2vw,28px); }
.step3 .num{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--red); color:#fff; font-weight:700; margin-bottom:12px; }
.step3 h3{ font-size:17px; margin:0 0 8px; }
.step3 p{ margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.55; }

/* bande contact */
.callout{ background:var(--red); color:#fff; border-radius:16px; padding:clamp(26px,3.4vw,44px); display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; }
.callout h2{ color:#fff; font-size:clamp(22px,2.6vw,30px); }
.callout p{ margin:10px 0 0; color:rgba(255,255,255,.85); }
.callout__contacts{ display:grid; gap:10px; }
.callout__contacts a, .callout__contacts span{ display:flex; gap:10px; align-items:center; font-size:16px; font-weight:600; }
.callout__contacts .lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.8; min-width:88px; font-weight:700; }
.callout .btn--solid{ background:#fff; color:var(--red); border-color:#fff; }
.callout .btn--solid:hover{ background:rgba(255,255,255,.88); }

/* ---------- PAGE PRODUITS (catalogue) ---------- */
.page-intro{ padding-block:clamp(28px,4vw,52px) clamp(6px,1.5vw,14px); }
.page-intro h1{ font-size:clamp(28px,3.6vw,44px); letter-spacing:-.01em; max-width:18ch; }
.page-intro p{ font-size:clamp(16px,1.25vw,18.5px); color:var(--ink-soft); margin:16px 0 0; max-width:60ch; }
.prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); padding-block:clamp(20px,3vw,40px); }
.pcard{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; }
.pcard__img{ height:188px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.pcard__img img{ max-height:188px; max-width:92%; width:auto; filter:drop-shadow(0 12px 20px rgba(120,28,33,.14)); }
.pcard__ph{ width:100%; height:100%; display:grid; place-items:center; background:var(--red-tint,rgba(181,54,61,.06)); border-radius:12px; }
.pcard__ph img{ width:64px !important; height:auto; opacity:.5; filter:none !important; }
.pcard h2{ color:var(--red); font-size:19px; margin:0 0 9px; }
.pcard__list{ list-style:none; margin:0 0 16px; padding:0; color:var(--ink); font-size:14px; line-height:1.5; }
.pcard__list li{ position:relative; padding-left:15px; margin-bottom:4px; }
.pcard__list li::before{ content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background:var(--red); }
.pcard__fmt{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); font-weight:600; letter-spacing:.01em; }
@media (max-width:900px){ .prods{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .prods{ grid-template-columns:1fr; max-width:380px; margin-inline:auto; } }

/* ---------- LA FROMAGERIE (procédé, 7 étapes) ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,24px); padding-block:clamp(20px,3vw,40px); }
.pstep__img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:12px; display:block; filter:saturate(1.03) contrast(1.02); }
.pstep__cap{ font-weight:600; color:var(--red); font-size:14.5px; margin:10px 0 0; }
@media(max-width:900px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .process{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; } }
.statement-band{ text-align:center; padding-block:clamp(30px,5vw,60px); }
.statement-band p{ font-size:clamp(18px,2vw,26px); font-weight:600; color:var(--ink); max-width:30ch; margin:0 auto; line-height:1.3; }

/* ---------- CARROUSEL (La fromagerie) ---------- */
.carousel { position: relative; padding: clamp(20px, 3vw, 40px) 0 clamp(8px, 2vw, 16px); }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 460px);
  gap: clamp(16px, 2.4vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 14px; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: center; }
.slide__frame {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: 12px; background: var(--red-tint);
}
.slide__frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
  transition: transform .6s var(--ease);
}
.slide:hover .slide__frame img { transform: scale(1.04); }
.slide__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(28px, 5vw, 44px) 16px 14px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(14px, 1.3vw, 17px); color: #fff; text-align: center;
  background: linear-gradient(to top, rgba(120, 28, 33, 0.82), rgba(120, 28, 33, 0));
}
.carousel__nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: clamp(14px, 2vw, 22px); }
.carousel__btn {
  width: 48px; height: 48px; border-radius: 999px;
  border: 1.6px solid var(--red); background: var(--bg); color: var(--red);
  cursor: pointer; display: grid; place-items: center;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.carousel__btn:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.carousel__btn svg { width: 20px; height: 20px; }
.carousel__dots { display: flex; gap: 9px; }
.carousel__dot {
  width: 9px; height: 9px; padding: 0; border-radius: 999px;
  border: 1.4px solid var(--red); background: transparent; cursor: pointer;
  transition: background .2s var(--ease);
}
.carousel__dot.is-active { background: var(--red); }

/* ---------- CONTACT (page) ---------- */
.info-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(24px,3vw,40px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,32px); max-width:760px; }
.info-item .lbl{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:700; margin-bottom:6px; }
.info-item a, .info-item p{ margin:0; font-size:clamp(16px,1.4vw,19px); font-weight:600; color:var(--ink); line-height:1.45; }
.info-item a:hover{ color:var(--red); }
@media(max-width:600px){ .info-card{ grid-template-columns:1fr; } }

/* ---------- MENTIONS LÉGALES ---------- */
.legal{ max-width:760px; padding-block:clamp(6px,1.5vw,16px) clamp(30px,5vw,60px); }
.legal h2{ font-size:clamp(15px,1.4vw,18px); text-transform:uppercase; letter-spacing:.04em; color:var(--red); margin:clamp(22px,3vw,32px) 0 8px; }
.legal p{ color:var(--ink); line-height:1.7; margin:0 0 6px; }
.legal a{ color:var(--red); }

/* ---------- PIED DE PAGE (sobre, aligné à gauche) ---------- */
.foot{ border-top:1px solid var(--line); margin-top:clamp(40px,5vw,72px); }
.foot .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; padding-block:clamp(28px,3.4vw,44px); }
.foot img{ height:50px; width:auto; margin-bottom:14px; }
.foot p{ margin:0 0 4px; font-size:14px; color:var(--ink-soft); }
.foot h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin:0 0 10px; }
.foot a:hover{ color:var(--red); }
.foot__bottom{ border-top:1px solid var(--line); }
.foot__bottom .wrap{ display:flex; justify-content:space-between; gap:16px; padding-block:16px; font-size:13px; color:var(--ink-soft); grid-template-columns:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .topbar .left{ display:none; }          /* libère la place aux coordonnées sur tablette */
  .topbar .wrap{ justify-content:center; }
  .args__grid{ grid-template-columns:repeat(2,1fr); }
  .fam-list{ grid-template-columns:1fr; }
  .steps3{ grid-template-columns:1fr; }
  .callout{ grid-template-columns:1fr; }
  .foot .wrap{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .topbar .left{ display:none; }
  .head nav, .head .head-cta{ display:none; }
  .burger{ display:flex; }
  /* menu mobile plein écran */
  .head.open nav{ display:flex; position:fixed; inset:0; z-index:45; flex-direction:column; justify-content:center; gap:4px; background:var(--bg); border:none; margin:0; padding:clamp(118px,17vh,165px) var(--gutter) 44px; overflow-y:auto; }
  .head.open nav a{ font-size:19px; padding:16px 0; border-bottom:1px solid var(--line); }
  .head.open .nav-order{ display:block; margin-top:22px; padding:16px 18px; background:var(--red); color:#fff; font-weight:700; font-size:17px; text-align:center; border:none; border-radius:10px; box-shadow:0 8px 20px rgba(120,28,33,.24); }
  .head.open .nav-order:hover{ background:var(--red-dark); }
  /* logo, croix (X) et bandeau restent cliquables au-dessus de l'overlay */
  .head.open .logo, .head.open .burger{ position:relative; z-index:46; }
  body:has(.head.open) .topbar{ position:relative; z-index:46; }
  body:has(.head.open){ overflow:hidden; }
  .head.open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .head.open .burger span:nth-child(2){ opacity:0; }
  .head.open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .args__grid{ grid-template-columns:1fr; }
  .foot .wrap{ grid-template-columns:1fr; }
  .foot__bottom .wrap{ flex-direction:column; }
}