/* ==========================================================================
   Page « Marché artisanal de Noël » — styles propres à cette page
   (le socle commun est dans styles.css, chargé avant)
   ========================================================================== */

/* ════════════ HAUT DE PAGE = L'AFFICHE ════════════ */
.hero{
  position:relative;display:grid;gap:1.1rem 1rem;
  grid-template-columns:1fr auto;
  grid-template-areas:"titre titre" "etiquette pastille" "actions actions" "sapin sapin";
  padding-top:.4rem;padding-bottom:clamp(1.5rem,3vw,2.5rem);
}
.hero__titre{grid-area:titre;position:relative;z-index:3}
.kicker{
  display:block;margin:0;color:var(--brique);
  font:900 clamp(1.1rem,4.6vw,2.5rem)/.9 var(--ff-sans);font-stretch:125%;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;margin-bottom:.12em;
}
.titre{margin:0;font-weight:400}
.titre .t1,.titre .t2{
  display:block;font:450 clamp(1.7rem,8.6vw,5rem)/.86 var(--ff-sans);font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.025em;
}
.titre .t1{margin-top:-.02em}
.titre .t2{padding-left:.05em}
.titre .t3{display:flex;align-items:baseline;gap:.18em;margin-top:.12em;padding-left:clamp(0rem,5.5vw,5.5rem)}
.titre .t3 em{font-size:clamp(1.5rem,6vw,3.5rem);line-height:1;color:var(--brun-soft);font-weight:350}
.titre .noel{
  font:900 clamp(2.3rem,12vw,5.8rem)/.82 var(--ff-sans);font-stretch:125%;text-transform:uppercase;
  color:var(--terra-ink);letter-spacing:-.03em;position:relative;
}
.titre .noel .etoile{position:absolute;width:.34em;height:.34em;right:-.2em;top:-.22em;transform:rotate(14deg)}
.hero__intro{max-width:42ch;margin:1rem 0 0;font:italic 400 clamp(1rem,1.5vw,1.15rem)/1.45 var(--ff-serif);color:var(--brun-soft)}

/* Mode « après » */
.merci{margin:.4rem 0 0}
.merci .m1{display:block;font:450 clamp(2.4rem,10vw,6.4rem)/.92 var(--ff-sans);font-stretch:118%;text-transform:uppercase;letter-spacing:-.02em}
.merci .m2{display:block;margin-top:.3em;font:italic 400 clamp(1.6rem,6vw,3.6rem)/1 var(--ff-serif);color:var(--terra-ink)}
.titre--petit .t1,.titre--petit .t2{font-size:clamp(1.3rem,4vw,2.2rem);font-weight:600}
.titre--petit .t3{padding-left:0}
.titre--petit .t3 em{font-size:clamp(1.1rem,3vw,1.7rem)}
.titre--petit .noel{font-size:clamp(1.6rem,5vw,2.8rem)}

/* L'étiquette cadeau (infos essentielles) */
.etiquette{grid-area:etiquette;align-self:start;position:relative;z-index:3;max-width:22rem;margin-top:.8rem;transform:rotate(-2.2deg);transform-origin:12% 0}
.etiquette__ficelle{position:absolute;left:1.55rem;top:-2.4rem;width:5rem;height:3.2rem;overflow:visible}
.etiquette__corps{
  position:relative;background:var(--kraft);padding:1rem 1.2rem 1.05rem 3.2rem;
  clip-path:polygon(1.7rem 0,100% 0,100% 100%,1.7rem 100%,0 calc(100% - 1.4rem),0 1.4rem);
  box-shadow:inset 0 0 0 1px rgba(74,52,43,.08);
}
.etiquette__corps::before{content:"";position:absolute;left:1.05rem;top:50%;width:.8rem;height:.8rem;margin-top:-.4rem;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 2px rgba(74,52,43,.35)}
.etiquette p{margin:0}
.e-jour{font:700 .8rem/1 var(--ff-sans);font-stretch:118%;letter-spacing:.12em;text-transform:uppercase}
.e-date{font:800 clamp(1.45rem,5.6vw,2rem)/1.02 var(--ff-sans);font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em;margin-top:.25rem!important}
.e-heures{font:italic 500 clamp(1.25rem,4.6vw,1.6rem)/1.1 var(--ff-serif);margin-top:.2rem!important}
.e-lieu{
  display:flex;align-items:flex-start;gap:.35em;margin-top:.5rem!important;
  font:700 .82rem/1.25 var(--ff-sans);font-stretch:112%;letter-spacing:.005em;color:var(--brun-soft);
}
.e-lieu .ico{width:1em;height:1em;flex:none;margin-top:.15em;fill:none;stroke:var(--brun-soft);stroke-width:1.8}
.e-libre{
  display:inline-block;margin-top:.6rem!important;padding:.38em .7em .32em;border:2px solid var(--brique);color:var(--brique);
  font:800 .78rem/1 var(--ff-sans);font-stretch:120%;letter-spacing:.1em;text-transform:uppercase;border-radius:3px;transform:rotate(-3deg);
}

/* La pastille ronde */
.pastille{
  grid-area:pastille;align-self:center;z-index:4;
  width:clamp(6.4rem,18vw,8.5rem);aspect-ratio:1;border-radius:50%;background:var(--gold-soft);
  display:grid;place-content:center;text-align:center;transform:rotate(12deg);
  box-shadow:0 1px 0 rgba(74,52,43,.1),0 10px 24px -14px rgba(74,52,43,.5);
}
.pastille b{display:block;font:900 clamp(2.1rem,9vw,3.9rem)/.85 var(--ff-sans);font-stretch:125%;color:var(--terra-ink)}
.pastille span{display:block;font:800 clamp(.62rem,2.5vw,1rem)/1.1 var(--ff-sans);font-stretch:125%;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-ink);margin-top:.2em}

.hero__actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:.7rem;z-index:3}

/* Le sapin-inventaire */
.hero__sapin{grid-area:sapin;position:relative;justify-self:center;width:min(100%,30rem);aspect-ratio:1/1.05}
.forme{position:absolute;inset:-4% -12% -2% -8%;width:120%;height:106%;z-index:0}
.forme path{fill:var(--terra)}
.sapin{position:absolute;inset:4% 6% 2% 6%;z-index:1;--ia:#B35A40;--is:#6A7D66}
.sapin .o{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--s)*1%);aspect-ratio:1;
  transform:translate(-50%,0) rotate(calc(var(--r)*1deg));
  animation:pose .7s var(--ease) both;animation-delay:calc(var(--d,0)*55ms + 150ms)}
@keyframes pose{from{opacity:0;transform:translate(-50%,-18px) rotate(calc(var(--r)*1deg - 12deg))}}
.sapin .o use{filter:url(#tremble)}

@media (min-width:900px){
  .hero{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    grid-template-rows:auto auto 1fr;
    grid-template-areas:"titre sapin" "etiquette sapin" "actions sapin";
    column-gap:0;padding-top:1.2rem;
  }
  .hero__titre{margin-right:-10%}
  .etiquette{margin-top:1.6rem}
  .hero__actions{align-self:start;margin-top:.4rem}
  .hero__sapin{align-self:center;width:100%;max-width:26rem;justify-self:end}
  .pastille{grid-area:sapin;align-self:start;justify-self:end;margin:-.5rem -1rem 0 0;width:clamp(7rem,10vw,9rem)}
}
@media (max-width:899px){
  .hero__sapin{margin-top:.4rem;width:min(78%,15rem)}
  .etiquette{margin-top:1.8rem}
  .pastille{margin-left:.6rem}
  html{scroll-padding-bottom:5.5rem}
  body{padding-bottom:4.5rem}
}
/* Très petits écrans : la pastille passe sur le sapin pour ne rien serrer */
@media (max-width:399px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"titre" "etiquette" "actions" "sapin"}
  .pastille{grid-area:sapin;justify-self:end;align-self:start;margin:0;width:5.6rem;z-index:4}
  .hero__sapin{width:min(84%,15rem)}
}
.carte .wrap{grid-template-columns:minmax(0,1fr)}
.menu li>*{min-width:0}


/* ════════════ LES ÉTALS (artisans) ════════════ */
.etals__tete{display:grid;gap:1rem;align-items:end}
@media (min-width:900px){.etals__tete{grid-template-columns:1.1fr 1fr}.etals__tete .chapo{margin:0 0 .4rem}}
.compteur{margin:1.6rem 0 0;font:600 .9rem/1.4 var(--ff-sans);color:var(--brun-soft)}
.artisans{list-style:none;margin:1.2rem 0 0;padding:0;columns:1;column-gap:2.5rem}
@media (min-width:640px){.artisans{columns:2}}
@media (min-width:1000px){.artisans{columns:3}}
.artisans li{break-inside:avoid;padding:.7rem 0 .75rem;border-bottom:1.5px dashed rgba(74,52,43,.22)}
.artisans b{display:block;font:500 1.15rem/1.2 var(--ff-serif);letter-spacing:-.005em}
.artisans span{display:block;margin-top:.15rem;font:700 .7rem/1.3 var(--ff-sans);font-stretch:112%;letter-spacing:.09em;text-transform:uppercase;color:var(--sage-ink)}
.etals__fb{max-width:52ch;margin:1.8rem 0 0;color:var(--brun-soft)}
.etals__fb a{color:var(--terra-ink);font-weight:600}
.etals__suite{margin:2rem 0 0}
.etals__suite .ico{width:1.1rem;height:1.1rem;stroke-width:2}

/* ════════════ LA CARTE (gourmand) ════════════ */
.carte{position:relative;background:var(--sage-ink);color:var(--cream);margin-block:clamp(2rem,6vw,4rem)}
.carte::before,.carte::after{
  content:"";position:absolute;left:0;right:0;height:16px;background-size:240px 16px;background-repeat:repeat-x;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V8l12-4 10 5 13-7 13 5 12-4 14 7 14-5 13 3 14-7 13 6 14-3 13 6 15-7 14 5 14-6 14 7 14-4 14 3v7z' fill='%2352634C'/%3E%3C/svg%3E");
}
.carte::before{top:-15px}
.carte::after{bottom:-15px;transform:scaleY(-1)}
.carte .wrap{position:relative;display:grid;gap:2.5rem;padding-block:clamp(3.5rem,8vw,6rem)}
@media (min-width:900px){.carte .wrap{grid-template-columns:.9fr 1.1fr!important;gap:4rem;align-items:start}}
.carte .surtitre{color:var(--gold-soft)}
.carte .surtitre .ico{stroke:var(--gold-soft)}
.carte h2{margin:0;font:italic 400 clamp(2rem,5.6vw,3.6rem)/1.05 var(--ff-serif);letter-spacing:-.01em}
.carte h2 strong{font:800 1em/1 var(--ff-sans);font-style:normal;font-stretch:118%;text-transform:uppercase;color:var(--gold-soft);letter-spacing:-.01em}
.carte__tasse{position:absolute;right:var(--gutter);top:-4.2rem;width:clamp(6rem,14vw,9.5rem);transform:rotate(8deg);z-index:2}
.carte__tasse .ico{stroke:var(--brun)}
.carte__tasse use{filter:url(#tremble)}
.carte__note{margin:1.6rem 0 0;max-width:34ch;font-size:1.02rem;color:#EFE8DA}
.menu{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem}
.menu li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1rem;align-items:center}
.menu .ico{stroke:var(--brun);width:3.4rem;height:3.4rem;grid-row:span 2;background:var(--cream);border-radius:50%;padding:.45rem;--ia:var(--terra)}
.menu .plat{display:flex;align-items:baseline;gap:.6rem;margin:0;font:800 clamp(1.15rem,5vw,2.2rem)/1 var(--ff-sans);font-stretch:115%;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.menu .plat::after{content:"";flex:1;border-bottom:3px dotted rgba(248,242,232,.45);transform:translateY(-.2em)}
.menu li:first-child .plat{font-size:clamp(2.2rem,7vw,3.8rem);color:var(--gold-soft)}
.menu li:nth-child(2){margin-left:clamp(0rem,4vw,3rem)}
.menu li:nth-child(3){margin-left:clamp(0rem,2vw,1.5rem)}
.menu li:nth-child(4){margin-left:clamp(0rem,6vw,5rem)}
.menu li:nth-child(6){margin-left:clamp(0rem,5vw,4rem)}
.menu .desc{margin:0;font:italic 400 1.08rem/1.35 var(--ff-serif);color:#EFE8DA}

/* ════════════ LE CARNET (photos) ════════════ */
.carnet .h2{max-width:14ch}

/* ════════════ LE BILLET (infos pratiques) ════════════ */
.billet{
  position:relative;display:grid;margin-top:2.2rem;background:var(--paper);
  box-shadow:0 1px 1px rgba(74,52,43,.08),0 22px 40px -28px rgba(74,52,43,.6);
  -webkit-mask:radial-gradient(circle at 0 50%,transparent .9rem,#000 .95rem) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent .9rem,#000 .95rem) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,transparent .9rem,#000 .95rem) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent .9rem,#000 .95rem) right/51% 100% no-repeat;
}
@media (min-width:760px){.billet{grid-template-columns:1fr 12rem}}
.billet__corps{padding:clamp(1.6rem,4vw,2.8rem) clamp(1.6rem,5vw,3.2rem)}
.billet dl{margin:0;display:grid;gap:1.4rem}
@media (min-width:760px){.billet dl{grid-template-columns:repeat(3,auto);gap:2.4rem;justify-content:start}}
.billet dt{font:700 .72rem/1 var(--ff-sans);font-stretch:118%;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-ink);margin-bottom:.5rem}
.billet dd{margin:0;font:800 clamp(1.3rem,3.4vw,1.75rem)/1.1 var(--ff-sans);font-stretch:108%}
.billet dl > .large{grid-column:1/-1}
.billet dd small{display:block;margin-top:.35rem;font:400 1rem/1.4 var(--ff-sans);font-stretch:100%;color:var(--brun-soft)}
.billet__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.billet__souche{
  position:relative;display:grid;place-items:center;padding:1.4rem;background:var(--gold-soft);
  border-top:2px dashed rgba(74,52,43,.3);
}
@media (min-width:760px){.billet__souche{border-top:0;border-left:2px dashed rgba(74,52,43,.3)}}
.billet__souche p{margin:0;text-align:center;font:900 1.5rem/1 var(--ff-sans);font-stretch:125%;text-transform:uppercase;color:var(--terra-ink);transform:rotate(-4deg)}
.billet__souche p small{display:block;margin-top:.5rem;font:italic 400 1rem/1 var(--ff-serif);text-transform:none;color:var(--brun-soft)}
@media (min-width:760px){.billet__souche p{writing-mode:vertical-rl;transform:rotate(180deg);font-size:1.9rem}.billet__souche p small{margin:0 .6rem 0 0}}
.billet__contact{margin:1.4rem 0 0;color:var(--brun-soft)}
.billet__contact a{color:var(--terra-ink);font-weight:600}
.billet__apres + .billet__apres{margin-top:1rem}
.billet__apres{margin:0;font:italic 400 clamp(1.2rem,3vw,1.6rem)/1.35 var(--ff-serif)}

/* ════════════ COIN ARTISANS + CULTUR'ELLES ════════════ */
.bas{padding-bottom:clamp(3rem,7vw,5rem)}
.asso h2{margin:0;font:800 1.15rem/1.2 var(--ff-sans);font-stretch:112%;text-transform:uppercase;letter-spacing:.01em}
.asso{padding:1.6rem 0}
.asso p{max-width:52ch;margin:.6rem 0 0;font:italic 400 1.2rem/1.45 var(--ff-serif)}
.liens{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;list-style:none;margin:1.1rem 0 0;padding:0}
.liens a{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:600;border-bottom:1.5px solid var(--terra);padding-bottom:2px}
.liens svg{width:1.15rem;height:1.15rem}
.liens .ico{stroke-width:2}

/* ── Barre collante mobile ── */
.collant{
  position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.55rem .55rem .55rem 1.1rem;border-radius:999px;background:var(--brun);color:var(--cream);
  box-shadow:0 12px 30px -10px rgba(74,52,43,.6);transform:translateY(160%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s;
}
.collant.visible{transform:none;visibility:visible;transition:transform .35s var(--ease)}
.collant p{margin:0;font:700 .86rem/1.15 var(--ff-sans);font-stretch:110%}
.collant p span{display:block;font:italic 400 .84rem/1.2 var(--ff-serif);opacity:.85}
.collant .btn{background:var(--gold);border-color:var(--gold);color:var(--brun);padding:.8em 1.1em;font-size:.74rem}
@media (min-width:900px){.collant{display:none}}

/* Place pour la barre collante sous le pied de page (mobile) */
@media (max-width:899px){.pied{padding-bottom:6rem}}
.menu li:nth-child(5){margin-left:clamp(0rem,3vw,2.2rem)}
@media print{.collant,.entete nav,.hero__actions,.billet__actions{display:none}}

/* Très petits écrans : la carte « Sur place » reste dans la largeur (placé en fin de fichier pour primer) */
@media (max-width:399px){
  .menu .plat{white-space:normal;font-size:1.1rem}
  .menu li:first-child .plat{font-size:1.7rem}
}