/*
Theme Name: Marché Paysan
Description: Thème sur-mesure pour le magasin de produits fermiers Marché Paysan (Lons-le-Saunier).
Author: Marché Paysan
Version: 1.0
Text Domain: marche-paysan
*/

:root{
  --bg: #F6EEE0;
  --paper: #FFFCF5;
  --ink: #2B1913;
  --ink-soft: #6E5A4E;
  --bordeaux: #7C2734;
  --bordeaux-deep: #5B1B26;
  --corail: #E8735A;
  --corail-deep: #C6533C;
  --moutarde: #C99A3B;
  --line: #E3D5BE;
  --shadow: 0 10px 28px -18px rgba(43,25,19,.45);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%; height:auto;}
a{color:var(--bordeaux);}
h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, serif;
  color:var(--bordeaux);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
}
.wrap, .site-inner{max-width:1040px; margin-inline:auto; padding-inline:20px;}

/* header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px; gap:16px; flex-wrap:wrap;
}
.site-branding{display:flex; align-items:center; gap:10px;}
.site-branding img.custom-logo{height:34px; width:auto; display:block;}
.site-branding .site-title{font-family:"Fraunces",serif; font-weight:600; font-size:1.15rem; color:var(--bordeaux); text-decoration:none;}
.main-nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0; font-size:.92rem; flex-wrap:wrap;}
.main-nav a{text-decoration:none; color:var(--ink-soft); font-weight:500;}
.main-nav a:hover{color:var(--corail);}
.header-cta{
  background:var(--corail); color:#fff !important; text-decoration:none;
  padding:9px 16px; border-radius:5px; font-weight:600; font-size:.88rem; white-space:nowrap;
}
.header-cta:hover{background:var(--corail-deep);}

/* content wrapper */
.entry-content{padding-block:36px 60px;}
.entry-content > *{margin-inline:auto; max-width:100%;}

/* headings / eyebrow style for first heading */
.entry-content h1{font-size:clamp(2rem,4vw,2.7rem);}
.entry-content h2{font-size:1.6rem; margin-top:2.2em;}
.entry-content p{color:var(--ink-soft); max-width:60ch;}

/* buttons block */
.wp-block-buttons{margin-block:24px;}
.wp-block-button__link{
  border-radius:5px !important; font-weight:600; font-size:.94rem; padding:11px 20px !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:var(--bordeaux) !important; color:var(--paper) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  border:1.5px solid var(--line) !important; color:var(--ink) !important;
}

/* image block (hero) */
.entry-content > .wp-block-image{
  margin-block:20px 10px;
}
.entry-content .wp-block-image img{
  border-radius:10px; box-shadow:var(--shadow); display:block;
}

/* gallery block */
.wp-block-gallery{margin-block:20px 10px;}
.wp-block-gallery .wp-block-image{margin:0;}
.wp-block-gallery img{border-radius:8px; box-shadow:var(--shadow); transition:transform .3s ease;}
.wp-block-gallery img:hover{transform:scale(1.03);}
figcaption{font-size:.78rem; color:var(--ink-soft); text-align:center; margin-top:6px;}

/* table block (horaires) */
.wp-block-table table{width:100%; border-collapse:collapse; font-size:.95rem; max-width:520px;}
.wp-block-table td, .wp-block-table th{padding:9px 6px; border-bottom:1px solid var(--line); text-align:left;}
.wp-block-table td:last-child, .wp-block-table th:last-child{text-align:right; font-weight:600; color:var(--bordeaux); font-variant-numeric:tabular-nums;}

/* carrousel : ajoutez la classe CSS additionnelle "carrousel"
   sur n'importe quel bloc Galerie (panneau Avancé de l'éditeur) pour
   le transformer automatiquement en diaporama défilant. Reste dans la
   largeur normale du contenu (pas de "plein écran" en 100vw : cette
   technique casse le défilement sur Safari/Chrome mobile à cause de
   la barre d'adresse dynamique). */
.wp-block-gallery.carrousel{
  display:block; position:relative;
  padding:0; margin-block:20px 10px;
  border-radius:10px; overflow:hidden; box-shadow:var(--shadow);
  max-width:100%;
}
.carrousel .mp-carrousel-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; gap:0;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scrollbar-width:none;
  max-width:100%;
}
.carrousel .mp-carrousel-track::-webkit-scrollbar{display:none;}
.carrousel .mp-carrousel-track > *{
  flex:0 0 100%; min-width:0; scroll-snap-align:center; margin:0 !important;
  position:relative; overflow:hidden;
  height:clamp(220px,48vw,520px) !important;
}
.carrousel .mp-carrousel-track img{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover; display:block; border-radius:0; box-shadow:none;
}
.carrousel figcaption{
  position:absolute; left:16px; bottom:12px; margin:0; text-align:left;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6); font-size:.85rem; font-weight:600;
}
.mp-carrousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(43,25,19,.55); color:#fff; font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center; z-index:2;
  touch-action:manipulation;
}
.mp-carrousel-arrow:hover{background:rgba(43,25,19,.8);}
.mp-carrousel-arrow.prev{left:12px;}
.mp-carrousel-arrow.next{right:12px;}
.mp-carrousel-dots{
  position:absolute; bottom:12px; right:16px; display:flex; gap:6px; z-index:2;
}
.mp-carrousel-dots button{
  width:9px; height:9px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,.5); cursor:pointer; touch-action:manipulation;
}
.mp-carrousel-dots button.is-active{background:#fff;}

/* social / tag style links */
.social-links{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px;}
.social-links a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border:1.5px solid var(--line); padding:8px 15px; border-radius:99px; font-size:.88rem; font-weight:600; color:var(--ink);
}
.social-links a:hover{border-color:var(--corail); color:var(--corail);}

/* latest posts / actus */
.wp-block-latest-posts{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.wp-block-latest-posts li{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:16px;}
.wp-block-latest-posts a{color:var(--bordeaux); font-weight:600; text-decoration:none;}
.wp-block-latest-posts time{display:block; font-size:.78rem; color:var(--ink-soft); margin-top:6px;}

/* archive / single posts */
.site-inner article.post{padding-block:24px; border-bottom:1px solid var(--line);}
.entry-title a{text-decoration:none; color:var(--bordeaux);}
.entry-meta{font-size:.82rem; color:var(--ink-soft);}

/* footer */
.site-footer{border-top:1px solid var(--line); padding-block:26px; margin-top:20px;}
.site-footer .inner{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-soft);
}

@media (max-width:760px){
  .main-nav{display:none;}
  .wp-block-latest-posts{grid-template-columns:1fr;}
}