/* La Fabrique à Confitures — Le Cahier des Chaudrons */
:root{
  --fx-color-fond:#f6efe2;
  --fx-color-surface:#ece0c8;
  --fx-color-texte:#3b2418;
  --fx-color-texte-secondaire:#6b4f3f;
  --fx-color-accent:#9e1b32;
  --fx-color-accent-2:#4a6b3a;
  --fx-color-contraste:#3b2418;
  --fx-color-bordure:#c9b28f;
  --fx-font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --fx-font-body:'Literata',Georgia,'Times New Roman',serif;
  --fx-font-hand:'Caveat','Segoe Script',cursive;
  --gut:clamp(.75rem,2vw,1.75rem);
  --pad:clamp(1.1rem,4vw,3rem);
  --max:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--fx-color-fond);color:var(--fx-color-texte);
  font-family:var(--fx-font-body);font-size:1.125rem;line-height:1.65;
  font-variant-numeric:oldstyle-nums;overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--fx-font-display);font-variation-settings:"SOFT" 100,"WONK" 1;margin:0;line-height:1.05;font-weight:700;text-wrap:balance}
h2{font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.01em}
h2 em,h1 em{font-style:italic;font-weight:300}
h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12}
p{margin:0 0 1em;max-width:66ch}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--fx-color-contraste);color:var(--fx-color-fond);padding:.7rem 1rem;text-decoration:none}
.skip:focus{top:1rem}
:focus-visible{outline:3px solid var(--fx-color-accent);outline-offset:3px;border-radius:2px}
.sombre :focus-visible,.pied :focus-visible{outline-color:var(--fx-color-bordure)}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.g>*{min-width:0}

/* liens soulignés qui se dessinent */
.lien,.prose a,.pied a:not(.btn){
  text-decoration:none;
  background:linear-gradient(var(--fx-color-accent),var(--fx-color-accent)) 0 100%/0 2px no-repeat;
  border-bottom:1px solid var(--fx-color-bordure);
  transition:background-size .3s ease;
}
.lien:hover,.prose a:hover,.pied a:not(.btn):hover{background-size:100% 2px}
.sombre .lien,.pied a:not(.btn){background-image:linear-gradient(var(--fx-color-fond),var(--fx-color-fond))}

/* petites capitales */
.rubrique,.nav a,.btn,label,.mois button,.kicker{
  font-variant-caps:all-small-caps;letter-spacing:.07em;font-weight:600
}
.rubrique{font-size:1.2rem;margin:0 0 1.2rem;color:var(--fx-color-accent);display:flex;gap:.8rem;align-items:baseline;max-width:none}
.rubrique b{font-family:var(--fx-font-display);font-weight:400;font-style:italic;font-variant-caps:normal;letter-spacing:0;color:var(--fx-color-texte-secondaire);font-size:1.1rem}
.sombre .rubrique{color:var(--fx-color-bordure)}

/* annotations manuscrites */
.note{
  font-family:var(--fx-font-hand);font-weight:500;font-size:1.5rem;line-height:1.1;
  color:var(--fx-color-accent-2);display:block;max-width:none;margin:0;
  transform:rotate(-2deg);transform-origin:left center
}
.note.rouge{color:var(--fx-color-accent)}
.js .note{opacity:0}
.js .note.vu{opacity:1;transition:opacity .2s ease}

/* boutons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.55rem 1.4rem;
  background:var(--fx-color-accent);color:var(--fx-color-fond);text-decoration:none;
  font-size:1.2rem;border:2px solid var(--fx-color-accent);border-radius:2px;cursor:pointer;
  font-family:var(--fx-font-body);transition:background .2s,color .2s
}
.btn:hover{background:var(--fx-color-contraste);border-color:var(--fx-color-contraste)}
.btn.vide{background:transparent;color:var(--fx-color-texte);border-color:var(--fx-color-texte)}
.btn.vide:hover{background:var(--fx-color-texte);color:var(--fx-color-fond)}
.btn .fl{transition:transform .2s}
.btn:hover .fl{transform:translateX(4px)}
.sombre .btn{background:var(--fx-color-fond);color:var(--fx-color-texte);border-color:var(--fx-color-fond)}
.sombre .btn:hover{background:transparent;color:var(--fx-color-fond)}

/* icônes de fruits au trait */
symbol *{vector-effect:non-scaling-stroke}
.ico{width:1.9rem;height:1.9rem;flex:none;color:var(--fx-color-texte)}

/* ───────── En-tête ───────── */
.tete{border-bottom:1px solid var(--fx-color-bordure)}
.tete .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 2rem;padding-block:1rem}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--fx-font-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-size:1.55rem;line-height:1;color:var(--fx-color-texte)}
.logo .ico{width:2.5rem;height:2.5rem;color:var(--fx-color-accent)}
.logo b{font-weight:800}
.logo i{font-weight:300;display:block;font-size:1.2rem;color:var(--fx-color-texte-secondaire)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.6rem}
.nav a{display:inline-block;padding:.65rem 0;font-size:1.15rem;text-decoration:none;
  background:linear-gradient(var(--fx-color-accent),var(--fx-color-accent)) 0 calc(100% - .5rem)/0 2px no-repeat;transition:background-size .3s}
.nav a:hover,.nav a[aria-current]{background-size:100% 2px}

/* ───────── Frise ───────── */
.frise{padding-block:1.6rem 0}
.frise-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem 2rem}
.frise-tete .rubrique{margin-bottom:.5rem}
.frise-tete p{font-size:.95rem;color:var(--fx-color-texte-secondaire);margin:0 0 .5rem;font-style:italic}
.frise-scroll{overflow-x:auto;padding-bottom:.6rem;scrollbar-width:thin;scrollbar-color:var(--fx-color-bordure) transparent}
.frise-grid{position:relative;min-width:780px}
.band{position:absolute;top:0;bottom:0;left:0;width:calc(100%/12);background:rgba(158,27,50,.08);
  border-inline:1px dashed var(--fx-color-accent);pointer-events:none;transition:transform .6s cubic-bezier(.3,.7,.2,1);z-index:2}
.mois,.fruits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.mois{border-bottom:1.5px solid var(--fx-color-texte)}
.mois li{text-align:center}
.mois button,.mois span{
  display:block;width:100%;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
  font-family:var(--fx-font-body);font-size:1.1rem;color:var(--fx-color-texte);padding:.5rem 0 .4rem;cursor:pointer;min-height:2.75rem
}
.mois span{cursor:default}
.mois button:hover{color:var(--fx-color-accent)}
.mois [aria-pressed="true"]{border-bottom-color:var(--fx-color-accent);color:var(--fx-color-accent)}
.fruits{grid-template-rows:repeat(3,2.7rem);row-gap:.35rem;padding-top:.5rem}
.fruits li{display:flex;align-items:center;gap:.45rem;padding:0 .6rem;background:var(--fx-color-surface);border-left:3px solid var(--fx-color-accent);margin-inline:2px;font-size:.98rem;line-height:1;min-width:0;overflow:hidden}
.fruits li>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1320px){.fruits .d{display:none}}
.fruits li.vert{border-left-color:var(--fx-color-accent-2)}
.fruits .ico{width:1.75rem;height:1.75rem}

/* ───────── Héros ───────── */
.heros{padding-block:clamp(1.8rem,4vw,3.5rem) clamp(3rem,6vw,5.5rem)}
.heros .g{align-items:start}
.kicker{grid-column:1/9;grid-row:1;font-size:1.2rem;color:var(--fx-color-texte-secondaire);margin:0 0 .4rem}
.heros h1{grid-column:1/10;grid-row:2;font-size:clamp(3.1rem,9.4vw,9rem);line-height:.95;letter-spacing:-.025em;padding-bottom:.08em}
.heros h1 em{display:block;color:var(--fx-color-accent);letter-spacing:-.03em}
.h1-roman{display:block}
.ligne{grid-column:1/8;grid-row:3;margin-top:clamp(1.5rem,3vw,2.5rem);font-size:1rem;font-style:italic;color:var(--fx-color-texte-secondaire);max-width:60ch}
.lede{grid-column:1/8;grid-row:4;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.55;margin-top:.5rem}
.actions{grid-column:1/8;grid-row:5;display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;margin-top:.6rem}
.actions .lien{font-size:1.2rem;padding-bottom:.1rem}
.marge-hero{grid-column:9/13;grid-row:1/6;position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:center;padding-top:3.2rem}
.pot{margin:0;width:min(100%,19rem);position:relative}
.pot svg{display:block;width:100%;height:auto;color:var(--fx-color-texte)}
.pot .etiquette{margin:-1.2rem -.6rem 0 1.2rem;position:relative}
.tampon{position:absolute;width:7.8rem;height:7.8rem;color:var(--fx-color-accent);left:-6.4rem;top:7rem;transform:rotate(-12deg);z-index:2}
.etiquette{background:var(--fx-color-surface);border:1.5px solid var(--fx-color-bordure);padding:.7rem 1.1rem .8rem;transform:rotate(-1.5deg);box-shadow:0 0 0 4px var(--fx-color-fond) inset}
.etiquette strong{display:block;font-family:var(--fx-font-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-size:1.25rem;line-height:1.15;font-weight:700}
.etiquette .note{margin-top:.25rem}
.note-hero{position:absolute;right:0;top:0;max-width:11rem;text-align:right;transform:rotate(3deg)}

/* ───────── Présentation ───────── */
.pres{padding-block:clamp(3rem,6vw,6rem);border-top:1px solid var(--fx-color-bordure)}
.pres .rubrique,.pres h2{grid-column:1/9}
.pres h2{margin-bottom:2rem}
.prose{grid-column:1/8}
.prose p:first-of-type::first-letter{font-family:var(--fx-font-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:800;color:var(--fx-color-accent);float:left;font-size:4.6rem;line-height:.78;padding:.3rem .55rem 0 0}
.marge{grid-column:9/13;grid-row:2/4;align-self:start;padding-top:.6rem}
.marge .etiquette{max-width:17rem;margin-top:1.5rem;transform:rotate(1.8deg)}
.marge .grand-fruit{width:100%;max-width:14rem;aspect-ratio:1;display:block;color:var(--fx-color-texte)}
.marge .tampon{position:static;display:block;margin:1.8rem 0 0 auto;transform:rotate(9deg)}

.recettes{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;grid-column:1/-1;counter-reset:rec;border-top:1.5px solid var(--fx-color-texte)}
.recettes li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.2rem var(--gut);align-items:center;padding:1.3rem 0;border-bottom:1px dashed var(--fx-color-bordure)}
.recettes li::before{counter-increment:rec;content:counter(rec,decimal-leading-zero);font-family:var(--fx-font-display);font-style:italic;font-weight:300;font-size:1.6rem;color:var(--fx-color-texte-secondaire);grid-row:1/3}
.recettes h3{grid-column:2}
.recettes p{grid-column:2;margin:0;color:var(--fx-color-texte-secondaire)}
.recettes .ico{display:none}
.rec-plus{grid-column:1/-1;margin-top:1.6rem;font-size:1.2rem}

/* ───────── Chiffres ───────── */
.chiffres{background:var(--fx-color-surface);padding-block:clamp(2.5rem,5vw,4.5rem);border-block:1px solid var(--fx-color-bordure)}
.chiffres h2{grid-column:1/9;margin-bottom:clamp(1.5rem,3vw,2.5rem);font-size:clamp(1.8rem,3.4vw,2.7rem)}
.chiffres dl{grid-column:1/-1;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.chiffres dl>div{border-top:1.5px solid var(--fx-color-texte);padding-top:.6rem}
.chiffres dt{order:2;font-size:1rem;color:var(--fx-color-texte-secondaire);line-height:1.4}
.chiffres dd{margin:0;font-family:var(--fx-font-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-size:clamp(3rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.03em;color:var(--fx-color-accent)}
.chiffres dl>div{display:flex;flex-direction:column}
.chiffres dd small{font-size:.4em;font-weight:300;font-style:italic;letter-spacing:0}

/* ───────── Semaine ───────── */
.semaine-s{padding-block:clamp(3rem,6vw,6rem)}
.semaine-s .rubrique{grid-column:1/-1}
.semaine-s h2{grid-column:1/9;margin-bottom:2rem}
.semaine{list-style:none;margin:0;padding:0;grid-column:1/-1;border-top:1.5px solid var(--fx-color-texte)}
.semaine li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);column-gap:var(--gut);padding:1.4rem 0;border-bottom:1px dashed var(--fx-color-bordure);align-items:baseline}
.jour{font-family:var(--fx-font-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-style:italic;font-weight:300;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1}
.semaine h3{font-size:clamp(1.3rem,2vw,1.6rem);margin-bottom:.2rem}
.semaine p{margin:0;color:var(--fx-color-texte-secondaire);font-size:1rem}
.semaine .note{text-align:right;transform:rotate(-2deg);transform-origin:right center}
.semaine li.fort{background:linear-gradient(90deg,rgba(158,27,50,.06),transparent)}
.s-plus{grid-column:1/-1;margin-top:1.6rem;font-size:1.2rem}

/* ───────── Invitations ───────── */
.invit{padding-block:clamp(3rem,6vw,5rem)}
.invit .g{row-gap:clamp(2rem,4vw,3rem);align-items:stretch}
.carte{padding:clamp(1.6rem,3.5vw,3rem);position:relative}
.carte h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:1rem}
.carte p{font-size:1.05rem}
.carte .btn{margin-top:.6rem}
.carte .ico{position:absolute;right:1.2rem;top:1.2rem;width:4.2rem;height:4.2rem}
.invit .g{align-items:start}
.coffret{grid-column:1/7;background:var(--fx-color-contraste);color:var(--fx-color-fond)}
.coffret .ico{color:var(--fx-color-bordure)}
.coffret .note{color:var(--fx-color-bordure)}
.atelier{grid-column:7/13;margin-top:clamp(2rem,7vw,6rem);background:var(--fx-color-surface);border:1.5px solid var(--fx-color-bordure)}
a[href^="tel"]{white-space:nowrap}
.atelier .ico{color:var(--fx-color-accent)}
.prix{display:inline-block;margin-top:.4rem}

/* ───────── Contact ───────── */
.contact{padding-block:clamp(3rem,6vw,6rem);border-top:1px solid var(--fx-color-bordure)}
.contact .rubrique,.contact h2{grid-column:1/-1}
.contact h2{margin-bottom:2rem}
.coord{grid-column:1/6;font-style:normal;font-size:1.05rem}
.coord p{margin:0 0 1.3rem}
.coord b{display:block;font-variant-caps:all-small-caps;letter-spacing:.07em;font-weight:600;color:var(--fx-color-texte-secondaire);font-size:1.1rem}
.coord .note{margin-top:.2rem}
form.cahier{grid-column:7/13;display:grid;gap:1.1rem}
form.cahier div{display:flex;flex-direction:column;gap:.3rem}
label{font-size:1.15rem;color:var(--fx-color-texte-secondaire)}
input,select,textarea{
  font:inherit;font-size:1.05rem;color:var(--fx-color-texte);background:var(--fx-color-surface);
  border:0;border-bottom:2px solid var(--fx-color-texte);border-radius:0;padding:.7rem .8rem;min-height:3rem;width:100%
}
textarea{min-height:8rem;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--fx-color-accent);outline-offset:2px;background:#fbf6ec}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
form.cahier .btn{justify-self:start}
.merci{border:2px solid var(--fx-color-accent-2);background:var(--fx-color-surface);padding:1rem 1.2rem;margin:0 0 1rem}
.merci[hidden]{display:none}
.merci strong{font-family:var(--fx-font-display);font-size:1.3rem;display:block}
.merci:focus{outline:3px solid var(--fx-color-accent);outline-offset:3px}

/* ───────── Pied ───────── */
.pied{background:var(--fx-color-contraste);color:var(--fx-color-fond);padding-block:clamp(2.5rem,5vw,4.5rem) 1.5rem;margin-top:clamp(3rem,6vw,5rem)}
.pied .rubrique{color:var(--fx-color-bordure)}
.pied .g{row-gap:2.4rem}
.somm{grid-column:1/7}
.somm ol{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--gut)}
.somm li{break-inside:avoid;padding:.35rem 0;border-bottom:1px dashed rgba(201,178,143,.5)}
.somm a{font-family:var(--fx-font-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-size:1.35rem;display:inline-flex;gap:.7rem;align-items:baseline;border-bottom:0!important}
.somm a span{font-style:italic;font-weight:300;color:var(--fx-color-bordure);font-size:1.05rem;font-variant-numeric:lining-nums}
.pied-coord{grid-column:8/13;font-style:normal;font-size:1.02rem}
.pied-coord p{margin:0 0 .8rem}
.pied-marque{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;border-top:1px solid rgba(201,178,143,.5);padding-top:1.4rem}
.pied-marque p{margin:0;font-size:.95rem;color:var(--fx-color-bordure);max-width:60ch}
.pied .tampon{position:static;width:5.5rem;height:5.5rem;color:var(--fx-color-bordure);transform:rotate(-8deg)}
.pied .logo{color:var(--fx-color-fond)}
.pied .logo i,.pied .logo .ico{color:var(--fx-color-bordure)}

/* ───────── 404 ───────── */
.perdu{padding-block:clamp(3rem,10vw,8rem)}
.perdu h1{font-size:clamp(3rem,10vw,8rem);line-height:.95;margin-bottom:1.5rem}

/* ───────── Responsive ───────── */
@media (max-width:1000px){
  .nav{width:100%}
  .nav ul{gap:0 1.3rem}
  .kicker,.heros h1,.ligne,.lede,.actions{grid-column:1/-1}
  .heros h1{grid-column:1/-1}
  .marge-hero{grid-column:1/-1;grid-row:6;flex-direction:row;justify-content:center;margin-top:2.5rem;padding-bottom:1rem}
  .note-hero{display:none}
  .tampon{left:-3.6rem;top:5rem}
  .prose,.pres .rubrique,.pres h2{grid-column:1/-1}
  .marge{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:1.5rem;align-items:center;margin-top:2rem}
  .marge .etiquette{margin-top:0}
  .marge .tampon{display:none}
  .chiffres dl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
  .coffret,.atelier{grid-column:1/-1}
  .atelier{margin-top:0}
  .coord,form.cahier,.merci{grid-column:1/-1}
  .coord{margin-bottom:2rem}
  .somm,.pied-coord{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:1.06rem}
  .tete .wrap{flex-direction:column;align-items:flex-start}
  .nav ul{gap:0 1.2rem}
  .semaine li{grid-template-columns:minmax(0,1fr);row-gap:.3rem}
  .semaine .note{text-align:left;transform-origin:left center}
  .recettes li{grid-template-columns:2.4rem minmax(0,1fr)}
  .marge{grid-template-columns:minmax(0,1fr)}
  .marge .grand-fruit{max-width:9rem}
  .somm ol{columns:1}
  .pot{width:min(100%,16rem)}
  .tampon{width:6rem;height:6rem;top:3.2rem;left:-2.6rem}
  .heros h1{font-size:clamp(3.5rem,15vw,5rem)}
  .prose p:first-of-type::first-letter{font-size:3.8rem}
}
@media (max-width:420px){
  .chiffres dl{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .note{opacity:1}
}