/*********** RESET & BASE ***********/
*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  /* Palette A — Boulangerie premium */
  --color-bg:#ffffff;
  --color-text:#222222;
  --color-primary:#d2ae6d;
  --color-secondary:#804e56;
  --color-accent:#c0838c;
  --color-muted:#f4f5f6;
  --brand:var(--color-primary);
  --accent:var(--color-accent);
  --ink:var(--color-text);
  --bg:var(--color-bg);
  --card:#ffffff;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
body{
  margin:0;
  font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:#333333;
  background:var(--color-muted);
  line-height:1.6;
}
img{max-width:100%; display:block}
a{color:var(--color-secondary); text-decoration:none}
a:hover{opacity:.95}

/*********** TYPO GLOBALE (hors hero principal) ***********/
.section h2,
.page.history .story h2,
.products-wrap h2,
.features h2,
.page.contact h2,
.page.legal h1,
.page.legal h2{
  font-weight:500;
  color:#222;
}
.section h2,
.page.history .story h2,
.products-wrap h2,
.features h2,
.page.contact h2{
  font-size:clamp(20px,2.1vw,26px);
}
.section h3,
.page.history .story h3,
.products-wrap h3,
.features h3{
  font-size:clamp(18px,1.9vw,22px);
  font-weight:500;
  color:#222;
}
.section p,
.page.history .story p,
.products-wrap p,
.features p,
.page.contact p,
.page.legal p{
  color:#444;
  font-size:15px;
  line-height:1.75;
}

/*********** TOP LOGO ***********/
.brand-top{
  display:grid;
  place-items:center;
  padding:0 6vw 4px;
  background:#fff;
}
.brand-top img{
  height:324px;
  max-height:56vw;
}

/*********** HEADER ***********/
.header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 6vw;
  gap:14px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.04);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{
  display:flex;
  gap:26px;
  align-items:center;
  flex-wrap:wrap;
}
.nav a{
  position:relative;
  padding:8px 14px;
  border-radius:999px;
  font-weight:600;
  color:var(--ink);
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.nav a.active{background:#f7f7f7}
.nav a::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:6px;
  height:2px;
  background:var(--color-primary);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .22s ease;
}
.nav a:hover,
.nav a:focus-visible{background:rgba(210,174,109,.12)}
.nav a:hover::after,
.nav a:focus-visible::after{transform:scaleX(1)}
.nav a.cta{
  background:#0d1c8c;
  color:#fff;
  transition:background-color .25s, transform .2s ease;
}
.nav a.cta:hover{transform:translateY(-1px)}
.logo{display:none}

/*********** BURGER & DRAWER ***********/
.burger{
  display:none;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  position:absolute;
  right:10px;
}
.burger span{
  position:absolute;
  left:10px;
  right:10px;
  height:2px;
  background:#d1b06d;
  transform-origin:center;
  transition:.3s;
}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{
  position:fixed;
  inset:50px 0 0 auto; /* Ajusté pour remonter le menu mobile */
  width:min(320px,90vw);
  background:#fff;
  box-shadow:var(--shadow);
  padding:24px;
  transform:translateX(110%);
  transition:.35s;
  display:flex;
  z-index:60;
}
.drawer nav{display:flex; flex-direction:column; gap:10px}
.drawer a{padding:10px 12px; border-radius:10px}
.drawer[aria-hidden="false"]{transform:translateX(0)}

/*********** HERO ***********/
.hero{
  position:relative;
  min-height:72vh;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  background-color:#000;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75)),
    url('../img/hero-bread.jpg');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:auto 100%;
  background-attachment:scroll;
}
.hero .hero-inner{
  padding:12vh 6vw;
  animation:fadeUp .8s ease both .1s;
}
.hero h1{
  font-size:clamp(34px,6vw,68px);
  line-height:1.05;
  margin:0 0 10px;
}
.hero h1 .thin{font-weight:300; opacity:.9}
.hero p{
  font-size:clamp(16px,2.2vw,20px);
  opacity:.95;
  max-width:920px;
  margin:0 auto 16px;
}
.hero .sub{opacity:.92; margin-top:4px}
.cta-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  font-weight:600;
  transition:.25s;
}
.btn.primary{background:var(--color-primary); border-color:var(--color-primary); color:#111}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn:hover{transform:translateY(-1px)}

/*********** PAGE HERO (secondaires) ***********/
.page-hero{
  position:relative;
  min-height:36vh;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  background-color:#000;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.60)),
    url('../img/hero-bread.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-attachment:scroll;
}
.page-hero.small{min-height:28vh}
.page-hero h1{margin:0 0 6px}
.page-hero p{margin:0}

/*********** SECTIONS ***********/
.section{padding:64px 6vw}
.section.alt{background:#fff}
.section .section-head{margin-bottom:22px}
.grid-2{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:28px;
  align-items:center;
}
.media{overflow:hidden; border-radius:var(--radius)}
.card{background:var(--card); border-radius:var(--radius); overflow:hidden}
.shadow{box-shadow:var(--shadow)}
.bullets{padding-left:0; list-style:none}
.bullets li{margin:6px 0}

/*********** ACCUEIL ***********/
.presentation{text-align:center}
.grid-2.presentation{justify-items:center}
.grid-2.presentation .media{max-width:720px}
/* Section expertise : carte texte + image alignées */
#expertise{
  background:var(--color-muted);
}
#expertise.grid-2{
  max-width:1200px;
  margin:0 auto;
  padding:72px 6vw 72px;
  align-items:stretch;
}
#expertise > div:first-child{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:32px 32px 36px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#expertise h2,
#expertise p{
  text-align:left;
}
#expertise .media{
  align-self:stretch;
}
#expertise .media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Nos atouts */
.features{
  background:#fff;
  text-align:center;
}
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(280px,360px));
  gap:24px;
  justify-content:center;
  justify-items:stretch;
}
.feature{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:22px 20px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  width:100%;
  max-width:none;
  height:260px;
}
.f-ico{
  width:56px;
  height:56px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(210,174,109,.18);
  color:#8a6b2f;
  margin-bottom:8px;
}

/*********** HISTOIRE (layout + galerie) ***********/
.history .timeline{
  margin-top:14px;
  border-left:2px solid rgba(0,0,0,.08);
  padding-left:28px;
}
.t-item{
  position:relative;
  margin:14px 0;
}
.t-item .dot{
  position:absolute;
  left:-16px;
  top:8px;
  width:12px;
  height:12px;
  background:var(--color-primary);
  border-radius:50%;
}
.t-item h4{margin:0 0 4px}
.picto-row{
  display:flex;
  gap:16px;
  font-size:28px;
}
/* Layout 2 colonnes : photos à gauche, texte à droite */
.page.history .history-layout{
  display:grid;
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:40px;
  align-items:flex-start;
  max-width:1100px;
  margin:0 auto;
  padding:64px 6vw 72px;
}
/* Colonne photos (desktop) */
.page.history .story-media{
  position:sticky;
  top:110px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.page.history .story-main{
  margin:0;
  padding:0;
}
.page.history .story-media > *{
  flex:0 0 auto;
}
.page.history .story-media img{
  width:100%;
  aspect-ratio:3 / 4;
  display:block;
  object-fit:cover;
  border-radius:16px;
  box-shadow:var(--shadow);
}
.page.history .story-gallery img{
  display:block;
  margin-bottom:18px;
}
.page.history .story-gallery img:last-child{
  margin-bottom:0;
}
/* Bloc photos mobile (intercalées) */
.story-photo-mobile{
  display:none;
}
.story-photo-mobile img{
  width:100%;
  display:block;
  border-radius:16px;
  box-shadow:var(--shadow);
  margin:18px 0 10px;
}
/* Colonne texte */
.page.history .story{
  text-align:left;
}
.page.history .story p{
  margin:0 0 24px;
}
.page.history .story h3{
  margin-top:40px;
  margin-bottom:14px;
}
.page.history .story .lead{
  font-size:18px;
  max-width:720px;
}

/*********** PRODUITS ***********/
.products-wrap{padding:64px 6vw}
.products-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px,1fr));
  gap:24px;
  justify-content:center;
}
.p-card{
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  text-align:center;
  padding:10px;
  cursor:pointer;
  user-select:none;
  transition:transform .15s ease;
}
.p-card:active{transform:scale(.99)}
.p-card .p-img{
  width:100%;
  height:200px;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:10px;
}
.p-card .p-img img{width:100%; height:100%; object-fit:cover}
.p-card h3{
  margin:6px 0 4px;
  font-weight:220 !important;
}
.p-card p{margin:0; font-size:14px; color:#444}
/* Zone ingrédients */
.p-ingred{
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
  height:200px;
  border-radius:10px;
  background:#fff;
  border:1px dashed rgba(0,0,0,.1);
  padding:12px;
}
.p-ingred .ttl{font-weight:600; margin-bottom:6px}
.p-ingred ul{list-style:none; padding:0; margin:0; font-size:14px; line-height:1.5}
.p-card[aria-expanded="true"] .p-img{display:none}
.p-card[aria-expanded="true"] .p-ingred{display:flex}

/*********** CONTACT ***********/
.section-contact{
  padding:64px 6vw 72px;
}
.contact-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(260px,1.2fr);
  gap:32px;
  align-items:flex-start;
}
.contact-form{
  text-align:left;
  padding:28px 24px 30px;
  border-radius:24px;
}
.contact-form h2{
  margin:0 0 6px;
}
.contact-lead{
  margin:0 0 20px;
  font-size:15px;
  color:#222;
}
.contact-form .form{
  padding:0;
}
.form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}
.form label{
  font-size:14px;
  font-weight:500;
}
.form input,
.form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  font:inherit;
  background:#fff;
}
.form textarea{
  resize:vertical;
  min-height:140px;
}
.form input:focus,
.form textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 1px rgba(210,174,109,.35);
}
.contact-form .btn.primary{
  padding:10px 24px;
  margin-top:10px;
  width:auto;
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.form-message{
  margin-top:10px;
  font-size:14px;
  font-weight:500;
}
.contact-side{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.contact-box{
  padding:22px 20px;
  border-radius:18px;
  align-items:flex-start;
  text-align:left;
  min-height:140px; /* Uniformise la hauteur des boîtes */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  width:100%; /* Force la largeur pleine en mobile */
  box-sizing:border-box;
}
.contact-box h2{
  margin:0 0 6px;
  font-size:18px;
}
.contact-box p{
  margin:4px 0;
  font-size:14px;
}
.contact-phone a,
.contact-mail a{
  font-weight:600;
  font-size:16px;
}

/*********** PAGES LÉGALES ***********/
.page.legal .section{
  max-width:900px;
  margin:0 auto;
  padding:64px 6vw;
  text-align:center;
  line-height:1.8;
}
.page.legal h1{
  margin-bottom:28px;
  font-size:clamp(24px,2.6vw,30px);
  font-weight:500;
}
.page.legal h2{
  margin-top:36px;
  margin-bottom:14px;
  font-size:clamp(18px,2vw,22px);
  font-weight:500;
}
.page.legal ul{
  display:inline-block;
  text-align:left;
  margin:0 auto 24px;
  padding-left:22px;
  line-height:1.7;
}
.page.legal a{
  color:var(--color-secondary);
  text-decoration:none;
  font-weight:500;
}
.page.legal a:hover{text-decoration:underline}

/*********** FOOTER ***********/
.footer{
  margin-top:36px;
  background:#fff;
  color:var(--ink);
  border-top:1px solid rgba(0,0,0,.06);
  font-size:13px;
}
.footer .footer-grid{
  display:grid;
  grid-template-columns:1.2fr .9fr .8fr .8fr;
  gap:28px;
  padding:32px 6vw;
  text-align:center;
}
.footer a{color:var(--color-secondary)}
.logo-foot{height:44px; margin:0 auto}
.foot-bar{
  border-top:1px solid rgba(0,0,0,.08);
  padding:12px 6vw;
  font-size:12px;
  text-align:center;
}
.f-block h4{margin:0 0 8px}
.f-block p,.f-block li{margin:6px 0}
.f-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  justify-content:center;
}
.badge{
  background:#d8b9c0;
  color:#fff;
  padding:6px 10px;
  font-size:12px;
  border-radius:8px;
  letter-spacing:.03em;
}
.f-list{list-style:none; padding-left:0}
.ico{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  vertical-align:-2px;
  margin-right:8px;
  flex:0 0 auto;
}
.footer-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:12px 6vw;
  text-align:center;
  font-size:12px;
  flex-wrap:wrap;
}
.footer-inner a{
  color:var(--color-secondary);
  text-decoration:none;
}
.footer-inner a:hover{text-decoration:underline}
.footer-sep{margin:0 4px}

/*********** REVEAL ***********/
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].in{opacity:1; transform:none}

/*********** MEDIA QUERIES ***********/
@media (max-width:1300px){
  .features-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .grid-2.presentation .media{max-width:640px}
  .footer .footer-grid{grid-template-columns:1fr 1fr}
  #expertise.grid-2{
    grid-template-columns:1fr;
    text-align:center;
  }
  #expertise > div:first-child{
    text-align:center;
  }
  #expertise h2,
  #expertise p{
    text-align:center;
  }
  .page.history .history-layout{
    display:block;
    padding:48px 6vw 56px;
  }
  .page.history .story-media{
    display:none; /* on cache la colonne d’images desktop */
  }
  .story-photo-mobile{
    display:block; /* on affiche les photos intercalées */
  }
  .page.history .story{
    text-align:center;
  }
  .page.history .story p{
    text-align:center;
  }
  .contact-grid{
    grid-template-columns:1fr;
  }
  .contact-form{
    padding:24px 20px 26px;
  }
  .form .row{
    grid-template-columns:1fr;
  }
  .contact-side,
  .contact-box{
    align-items:center;
    text-align:center;
  }
  .contact-box{
    padding:20px 18px;
  }
}
@media (max-width:600px){
  .nav{display:none}
  .burger{display:block}
  .footer .footer-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(2, minmax(150px,1fr))}
  .features-grid{grid-template-columns:1fr}
  .feature{
    height:auto;
  }
}

/*********** ACCESSIBILITÉ ***********/
:focus-visible{outline:2px solid var(--color-primary); outline-offset:2px}

/*********** KEYFRAMES ***********/
@keyframes fadeUp{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}

/*********** OVERLAY NAV ***********/
[data-overlay="nav"]{
  background:rgba(0,0,0,.15) !important;
  backdrop-filter:none !important;
  z-index:40 !important;
}
/* Texte des bannières secondaires (contact, produits, etc.) en blanc */
.page-hero p{
  color:#fff !important;
  opacity:.95;
}