/* La Fabrique à Confitures — L'Affiche du Marché */
:root{
  --fx-color-fond:#fbf6ea;
  --fx-color-surface:#f5c842;
  --fx-color-texte:#1f1a17;
  --fx-color-texte-secondaire:#5a4a3f;
  --fx-color-accent:#c8102e;
  --fx-color-accent-2:#f39a2b;
  --fx-color-contraste:#2f6b3a;
  --fx-color-bordure:#1f1a17;
  --fx-font-display:'Alfa Slab One',Georgia,serif;
  --fx-font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fx-font-accent:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --filet:3px;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --pad-v:clamp(2rem,6vw,5rem);
  --h:104px;
}
@media (min-width:1100px){:root{--h:68px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fx-color-fond);color:var(--fx-color-texte);
  font:400 1.0625rem/1.6 var(--fx-font-body);
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
section[id],footer[id]{scroll-margin-top:var(--h)}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:focus-visible{outline:3px solid var(--fx-color-texte);outline-offset:2px;box-shadow:0 0 0 2px var(--fx-color-fond)}
.sombre :focus-visible,.c--encre :focus-visible,.c--framboise :focus-visible,.c--vert :focus-visible{outline-color:var(--fx-color-fond);box-shadow:0 0 0 2px var(--fx-color-texte)}

.saut{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--fx-color-texte);color:var(--fx-color-fond);padding:.7rem 1rem;font-weight:700}
.saut:focus{top:.5rem}

/* ---------- Typographie ---------- */
h1,h2,h3{font-family:var(--fx-font-display);font-weight:400;line-height:.95;letter-spacing:-.005em}
.titre-xl{font-size:clamp(2.7rem,8.2vw,7rem)}
.titre-l{font-size:clamp(2.3rem,5.6vw,4.8rem)}
.titre-m{font-size:clamp(1.7rem,3.3vw,2.6rem)}
.ligne{display:block}
.tampon{
  display:inline-block;font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;line-height:1.1;font-size:1.05rem;white-space:nowrap;
  border:var(--filet) solid currentColor;padding:.22em .65em .18em;
}
.tampon--grand{font-size:clamp(1.6rem,3.4vw,2.6rem)}
.legende{font-stretch:90%;font-size:.9rem;line-height:1.4}
.gras{font-weight:700}
.chapeau{font-size:1.2rem;line-height:1.55;max-width:34rem}
.texte p+p{margin-top:1em}
.texte{max-width:36rem}

/* ---------- Murs de cagettes ---------- */
.mur{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--filet);
  background:var(--fx-color-bordure);
  border-bottom:var(--filet) solid var(--fx-color-bordure);
}
.c{padding:var(--pad-v) var(--pad);min-width:0}
.c--fond{background:var(--fx-color-fond);color:var(--fx-color-texte)}
.c--mirabelle{background:var(--fx-color-surface);color:var(--fx-color-texte)}
.c--abricot{background:var(--fx-color-accent-2);color:var(--fx-color-texte)}
.c--framboise{background:var(--fx-color-accent);color:var(--fx-color-fond)}
.c--vert{background:var(--fx-color-contraste);color:var(--fx-color-fond)}
.c--encre{background:var(--fx-color-texte);color:var(--fx-color-fond)}
.c--flex{display:flex;flex-direction:column;gap:1.5rem}
.c--bas{justify-content:flex-end}
.c--between{justify-content:space-between}
.secondaire{color:var(--fx-color-texte-secondaire)}
.c--framboise .secondaire,.c--vert .secondaire,.c--encre .secondaire,.c--abricot .secondaire{color:inherit}
@media (min-width:900px){
  .mur{grid-template-columns:repeat(12,minmax(0,1fr))}
  .s-3{grid-column:span 3}.s-4{grid-column:span 4}.s-5{grid-column:span 5}.s-6{grid-column:span 6}
  .s-7{grid-column:span 7}.s-8{grid-column:span 8}.s-12{grid-column:1/-1}
}

/* ---------- En-tête ---------- */
.entete{
  position:relative;z-index:50;height:var(--h);
  background:var(--fx-color-fond);color:var(--fx-color-texte);
  border-bottom:var(--filet) solid var(--fx-color-bordure);
  display:grid;grid-template-columns:1fr auto;grid-template-rows:56px 1fr;align-items:stretch;
}
.logo{
  display:flex;align-items:center;gap:.6rem;padding:0 var(--pad);text-decoration:none;
  font-family:var(--fx-font-display);font-size:1.05rem;line-height:1;white-space:nowrap;
}
.logo svg{width:28px;height:28px;flex:none}
.logo .long{display:none}
@media (min-width:420px){.logo .long{display:inline}}
.logo small{font-family:var(--fx-font-accent);font-weight:800;font-size:.85em;letter-spacing:.14em;text-transform:uppercase;display:none}
.menu{
  grid-row:2;grid-column:1/-1;display:flex;overflow-x:auto;scrollbar-width:thin;
  border-top:var(--filet) solid var(--fx-color-bordure);
}
.menu a{
  flex:none;display:flex;align-items:center;padding:0 1.1rem;min-height:44px;
  font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:1.05rem;
  text-decoration:none;border-right:1px solid color-mix(in srgb,var(--fx-color-texte) 25%,transparent);
  transition:box-shadow .15s,transform .15s;
}
.menu a:first-child{padding-left:var(--pad)}
.menu a:hover{box-shadow:inset 0 -6px 0 var(--fx-color-accent)}
.bouton-trouver{
  grid-row:1;grid-column:2;display:flex;align-items:center;padding:0 .8rem;white-space:nowrap;
  background:var(--fx-color-accent);color:var(--fx-color-fond);text-decoration:none;
  font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:1.05rem;
  border-left:var(--filet) solid var(--fx-color-bordure);transition:transform .15s,box-shadow .15s;
}
.bouton-trouver:hover{transform:translateX(4px);box-shadow:inset 0 -8px 0 var(--fx-color-texte)}
@media (min-width:1100px){
  .entete{grid-template-columns:auto 1fr auto;grid-template-rows:1fr}
  .logo{grid-column:1;border-right:var(--filet) solid var(--fx-color-bordure);padding:0 1.6rem;font-size:1.15rem}
  .logo small{display:inline}
  .menu{grid-row:1;grid-column:2;border-top:0;justify-content:flex-end;overflow:visible}
  .menu a{padding:0 1.05rem;font-size:1.05rem;border-right:0}
  .menu a:first-child{padding-left:1.05rem}
  .bouton-trouver{grid-row:1;grid-column:3;padding:0 2rem;font-size:1.2rem}
}
@media (min-width:1100px) and (max-width:1250px){.logo small{display:none}}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.7rem 1.4rem;
  background:var(--fx-color-texte);color:var(--fx-color-fond);text-decoration:none;cursor:pointer;
  font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:1.2rem;
  border:var(--filet) solid var(--fx-color-texte);transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translate(4px,-2px);box-shadow:inset 0 -8px 0 var(--fx-color-accent)}
.btn--clair{background:var(--fx-color-fond);color:var(--fx-color-texte)}
.btn--clair:hover{box-shadow:inset 0 -8px 0 var(--fx-color-accent-2)}
.btn--ligne{background:transparent;color:inherit;border-color:currentColor}
.btn--ligne:hover{box-shadow:inset 0 -8px 0 currentColor}
.btn--framboise{background:var(--fx-color-accent);border-color:var(--fx-color-texte);color:var(--fx-color-fond)}
.btn--framboise:hover{box-shadow:inset 0 -8px 0 var(--fx-color-texte)}
.rangee{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- Héros ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--filet);background:var(--fx-color-bordure);
  border-bottom:var(--filet) solid var(--fx-color-bordure);
}
.hero-panneau{
  position:relative;overflow:hidden;background:var(--fx-color-surface);
  display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;
  padding:clamp(1.5rem,4vw,3rem) var(--pad) clamp(1.5rem,4vw,3rem);
}
.hero-marques{display:flex;flex-wrap:wrap;gap:.6rem;position:relative;z-index:1}
.hero h1{
  font-size:clamp(2.6rem,14vw,4.6rem);line-height:.92;position:relative;z-index:1;margin-block:1rem;
}
.hero-bas{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.5rem}
.hero-fruits{position:absolute;right:-9%;top:10%;width:clamp(150px,42vw,420px);z-index:0}
.hero-fruits svg{width:100%;height:auto}
.hero-fig{position:absolute;right:9%;bottom:0;width:clamp(90px,22vw,200px);z-index:0}
.hero-fig svg{width:100%;height:auto}
@media (max-width:699px){.hero-fig{display:none}}

/* module « Cette semaine » */
.semaine{background:var(--fx-color-fond);display:flex;flex-direction:column}
.semaine-tete{background:var(--fx-color-texte);color:var(--fx-color-fond);padding:1.4rem var(--pad)}
.semaine-tete h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.semaine-tete .tampon{margin-top:.8rem;font-size:.95rem}
.jours{display:flex;flex-direction:column;flex:1}
.jour{
  flex:1;display:grid;grid-template-columns:minmax(6.2rem,auto) minmax(0,1fr);gap:.4rem 1.2rem;align-items:center;
  padding:1.1rem var(--pad);border-top:var(--filet) solid var(--fx-color-bordure);position:relative;
}
.jour:first-child{border-top:0}
.jour-nom{font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1}
.jour-nom--flou{font-size:1.15rem;letter-spacing:.14em;line-height:1.1;max-width:7.5rem}
.jour-lieu{font-weight:700;line-height:1.25}
.jour-lieu .legende{display:block;font-weight:400}
.jour.est-aujourdhui,.pancarte.est-aujourdhui{background:var(--fx-color-accent);color:var(--fx-color-fond)}
.jour.est-aujourdhui .secondaire,.pancarte.est-aujourdhui .secondaire{color:inherit}
.badge{
  position:absolute;right:var(--pad);top:.55rem;font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;font-size:.85rem;background:var(--fx-color-fond);color:var(--fx-color-texte);padding:.1em .5em;
}
.semaine-pied{border-top:var(--filet) solid var(--fx-color-bordure);padding:1.1rem var(--pad);background:var(--fx-color-surface)}
.semaine-pied p+p{margin-top:.4rem}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.85fr) minmax(330px,1fr);min-height:calc(100svh - var(--h))}
  .hero h1{font-size:clamp(3.4rem,8.4vw,9rem)}
  .hero-fruits{top:5%;right:-2%}
  .hero-fig{right:7%}
}

/* ---------- Confitures ---------- */
.produit{display:flex;flex-direction:column;gap:1.1rem;justify-content:space-between;min-height:21rem}
.produit .pastille{width:84px;height:84px}
.produit h3{font-size:clamp(2rem,3.6vw,3.2rem)}
.produit p{max-width:26rem}
.note-carte{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;justify-content:space-between}
.note-carte p{max-width:44rem}

.tuile{display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem;padding:clamp(1.25rem,3vw,2.5rem)}
.tuile svg{width:100%;height:auto;max-height:340px}
.tuile figcaption{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* ---------- Récit ---------- */
.etape{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1rem 2rem;align-items:start;
  padding:var(--pad-v) var(--pad);
}
.etape-num{font-family:var(--fx-font-display);font-size:clamp(4.5rem,13vw,9rem);line-height:.8}
.etape h3{font-size:clamp(2rem,4.2vw,3.6rem)}
.etape .tampon{margin-top:1rem}
@media (min-width:900px){
  .etape{grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,6fr);align-items:center}
}

/* ---------- Où nous trouver ---------- */
.pancarte{display:flex;flex-direction:column;gap:1rem;justify-content:space-between;min-height:19rem}
.pancarte h3{font-size:clamp(2rem,3.3vw,3.2rem);overflow-wrap:anywhere}
.pancarte .haut{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.picto{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:miter;stroke-linecap:butt;flex:none}
.pancarte.c--mirabelle,.pancarte.c--fond,.pancarte.c--abricot,.pancarte.c--vert{transition:background-color .15s}
.epiceries{display:grid;gap:1.5rem 3rem;align-items:center}
.epiceries .picto{width:72px;height:72px}
@media (min-width:900px){.epiceries{grid-template-columns:auto minmax(0,1fr) auto}}

/* ---------- Bandeaux coffrets / ateliers ---------- */
.bande{display:grid;gap:2rem 4rem;align-items:center;padding:calc(var(--pad-v)*1.3) var(--pad);border-bottom:var(--filet) solid var(--fx-color-bordure)}
.bande--framboise{background:var(--fx-color-accent);color:var(--fx-color-fond)}
.bande--abricot{background:var(--fx-color-accent-2);color:var(--fx-color-texte)}
.bande h2{font-size:clamp(2rem,10.4vw,3.8rem);line-height:.92}
@media (min-width:900px){.bande h2{font-size:clamp(2.4rem,5.4vw,6.2rem)}}
.bande .corps{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start;max-width:34rem}
.bande-prix{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.prix{font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;letter-spacing:.06em;line-height:.85;font-size:clamp(4.5rem,12vw,9rem);display:block}
.prix small{display:block;font-size:.26em;letter-spacing:.2em;margin-top:.3em}
.pile{width:min(100%,360px);height:auto}
@media (min-width:900px){
  .bande{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
}

/* ---------- Ardoise ---------- */
.places{display:grid;gap:var(--filet);margin-top:2rem}
.place{border:var(--filet) dashed currentColor;padding:1.4rem;min-height:9rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.place q{font-family:var(--fx-font-display);font-size:3.6rem;line-height:1;quotes:none}
@media (min-width:700px){.places{grid-template-columns:repeat(3,1fr)}}

/* ---------- FAQ ---------- */
.faq details{border-top:var(--filet) solid var(--fx-color-bordure)}
.faq details:first-child{border-top:0}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;
  font-family:var(--fx-font-display);font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.15;padding:1.2rem 0;min-height:56px;
  transition:padding .15s,box-shadow .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border:var(--filet) solid currentColor;
  font-family:var(--fx-font-accent);font-weight:800;font-size:1.7rem;line-height:1;
}
.faq details[open] summary::after{content:"−";background:var(--fx-color-accent);color:var(--fx-color-fond);border-color:var(--fx-color-accent)}
.faq summary:hover{padding-left:4px;box-shadow:inset 0 -3px 0 var(--fx-color-bordure)}
.faq .reponse{padding:0 0 1.5rem;max-width:40rem}
.faq .reponse p+p{margin-top:.8em}
.faq{padding-block:.6rem}
.ardoise-tete{display:grid;gap:1.5rem 4rem;align-items:end}
@media (min-width:900px){.ardoise-tete{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}

/* ---------- Contact ---------- */
.coordonnees{display:flex;flex-direction:column;gap:1.4rem;margin-top:1.5rem}
.coordonnees dt{font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:1rem}
.coordonnees dd{font-weight:700;font-size:1.15rem;overflow-wrap:anywhere}
.coordonnees a{text-decoration-thickness:3px;text-underline-offset:4px}
.coordonnees a:hover{background:var(--fx-color-texte);color:var(--fx-color-surface);text-decoration:none}
.form{display:grid;gap:1.2rem}
.champ{display:flex;flex-direction:column;gap:.35rem}
.champ label{font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:1.05rem}
.champ .facultatif{font-family:var(--fx-font-body);font-weight:400;letter-spacing:0;text-transform:none;font-size:.9rem;color:var(--fx-color-texte-secondaire)}
.champ input,.champ select,.champ textarea{
  font:inherit;color:var(--fx-color-texte);background:color-mix(in srgb,var(--fx-color-fond) 55%,#fff);
  border:var(--filet) solid var(--fx-color-bordure);border-radius:0;padding:.75rem .9rem;min-height:52px;width:100%;
}
.champ textarea{min-height:9rem;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:3px solid var(--fx-color-accent);outline-offset:0;box-shadow:none}
.deux{display:grid;gap:1.2rem}
@media (min-width:700px){.deux{grid-template-columns:1fr 1fr}}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.confirmation{
  border:var(--filet) solid var(--fx-color-bordure);background:var(--fx-color-contraste);color:var(--fx-color-fond);
  padding:1.2rem 1.4rem;font-weight:700;font-size:1.15rem;margin-bottom:1.5rem;
}
.confirmation:focus{outline:3px solid var(--fx-color-texte);outline-offset:3px}
.confirmation[hidden]{display:none}
.mention{font-size:.9rem;color:var(--fx-color-texte-secondaire)}

/* ---------- Pied de page ---------- */
.pied{background:var(--fx-color-texte);color:var(--fx-color-fond);padding:var(--pad-v) var(--pad) 2rem}
.pied-grille{display:grid;gap:2.5rem 3rem;grid-template-columns:minmax(0,1fr)}
.pied .logo{padding:0;font-size:1.6rem;white-space:normal}
.pied h2{font-family:var(--fx-font-accent);font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:1.1rem;line-height:1.2;margin-bottom:.8rem;color:var(--fx-color-surface)}
.pied ul{display:flex;flex-direction:column}
.pied li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.pied li a:hover{transform:translateX(4px);box-shadow:inset 0 -3px 0 var(--fx-color-surface)}
.pied address{font-style:normal}
.pied a.souligne{text-decoration-thickness:2px;text-underline-offset:3px}
.pied-bas{margin-top:2.5rem;padding-top:1.2rem;border-top:var(--filet) solid var(--fx-color-fond);display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.95rem}
@media (min-width:900px){.pied-grille{grid-template-columns:1.4fr 1fr 1fr}}

/* ---------- 404 ---------- */
.perdu{min-height:100svh;display:grid;place-items:center;background:var(--fx-color-surface);padding:var(--pad)}
.perdu div{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;max-width:40rem}
.perdu h1{font-size:clamp(3rem,12vw,8rem)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}