/* ==========================================================================
   Miss Patate Douce de la Drôme — base : tokens, typo, UI globale
   ========================================================================== */

:root {
  /* Couleurs du logo */
  --red: #e0251c;
  --plum: #811b48;
  --coral: #fa374a;
  /* Neutres dérivés */
  --plum-deep: #5c1033;
  --cream: #fff1e2;
  --paper: #fffaf4;

  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "cc-matinee-idol", "Brush Script MT", cursive;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --pad-x: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1440px;
  --radius: clamp(1.25rem, 2.4vw, 2.25rem);
  --header-h: clamp(4.5rem, 7vw, 6rem);

  --speckle-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%23fff4e6' stroke-opacity='.2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M22 30l12-4M96 18l10 5M148 62l11-3M54 88l9 6M120 130l12-4M18 142l10 4M76 166l11-5M166 150l7 5'/%3E%3C/g%3E%3C/svg%3E");
  --speckle-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg fill='none' stroke='%23fa374a' stroke-opacity='.28' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M40 60l22-7M250 40l20 9M300 200l22-6M110 250l18 11M200 330l22-8'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* marges latérales mobiles : 35 px sur toute la page (conteneurs, header, menu, hero, frise, footer) */
@media (max-width: 767px) { :root { --pad-x: 35px; } }

/* Thèmes de section : chaque bloc prend une couleur du logo */
.t-cream { --bg: var(--cream); --fg: var(--plum); --muted: rgba(129, 27, 72, .78); --accent: var(--red); --line: rgba(129, 27, 72, .2); --focus: var(--red); }
.t-plum  { --bg: var(--plum); --fg: var(--paper); --muted: rgba(255, 250, 244, .8); --accent: var(--coral); --line: rgba(255, 250, 244, .22); --focus: var(--coral); }
.t-red   { --bg: var(--red); --fg: #fff; --muted: rgba(255, 255, 255, .9); --accent: var(--paper); --line: rgba(255, 255, 255, .32); --focus: var(--paper); }
.t-coral { --bg: var(--coral); --fg: var(--plum); --muted: var(--plum); --accent: var(--plum); --line: rgba(129, 27, 72, .3); --focus: var(--plum); }
.t-cream, .t-plum, .t-red, .t-coral { background-color: var(--bg); color: var(--fg); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, .94rem + .26vw, 1.1875rem);
  line-height: 1.6;
  background: var(--cream);
  color: var(--plum);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, figure, address { margin: 0; }
address { font-style: normal; }
strong, b { font-weight: 700; }
sup { font-size: .55em; line-height: 0; vertical-align: .9em; }
::selection { background: var(--coral); color: #fff; }
:focus-visible { outline: 3px solid var(--focus, var(--red)); outline-offset: 4px; border-radius: .5rem; }

.skip {
  position: fixed; left: 1rem; top: -5rem; z-index: 400;
  padding: .85rem 1.25rem; border-radius: 999px;
  background: var(--plum); color: var(--paper); font-weight: 700; text-decoration: none;
  transition: top .3s var(--ease-out);
}
.skip:focus { top: 1rem; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { position: relative; padding-block: clamp(5.5rem, 11vw, 10rem); }

/* ---------- Typographie ---------- */
.display {
  font-weight: 800; font-stretch: 75%;
  font-size: clamp(3.3rem, 9.4vw, 10rem);
  line-height: .86; letter-spacing: -.01em;
  text-wrap: balance;
}
.display-m {
  font-weight: 800; font-stretch: 78%;
  font-size: clamp(2.1rem, 5vw, 4.9rem);
  line-height: .96; letter-spacing: -.008em;
  text-wrap: balance;
}
.lead-xl {
  font-weight: 500; font-stretch: 88%;
  font-size: clamp(1.5rem, 3vw, 2.9rem);
  line-height: 1.14; letter-spacing: -.005em;
}
.script {
  display: inline-block;
  font-family: var(--script); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1;
  color: var(--accent);
  transform: rotate(-3deg);
}
.prose { max-width: 38rem; }
.prose p + p { margin-top: 1.05em; }

/* Motifs : lenticelles de la peau de patate douce + grain d'illustration */
.speckles { background-image: var(--speckle-light); background-size: 180px 180px; }
.speckles--big { background-image: var(--speckle-big); background-size: 360px 360px; }

body::after {
  content: ""; position: fixed; inset: -60%; z-index: 300; pointer-events: none;
  background-image: var(--grain); background-size: 240px 240px; opacity: .07;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Boutons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .9rem;
  padding: .45rem .45rem .45rem 1.6rem; min-height: 3.5rem;
  border-radius: 999px; background: var(--fg); color: var(--bg);
  font-weight: 700; font-size: 1.02rem; line-height: 1; text-decoration: none;
  will-change: transform;
}
.btn__label { position: relative; display: block; overflow: hidden; padding-block: .15em; }
.btn__label > span { display: block; transition: transform .7s var(--ease-out); }
.btn__label > span::after { content: attr(data-text); position: absolute; left: 0; top: calc(100% + .15em); }
.btn:hover .btn__label > span, .btn:focus-visible .btn__label > span { transform: translateY(calc(-100% - .15em)); }
.btn__icon {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--bg); color: var(--fg);
  transition: transform .7s var(--ease-out);
}
.btn__icon svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn__icon { transform: rotate(-45deg) scale(1.08); }

.chip {
  display: inline-block; padding: .05em .55em .1em; border-radius: 999px;
  background: var(--paper); color: var(--red); font-weight: 700; white-space: nowrap;
}

/* ---------- Bords en buttes (transition entre sections) ---------- */
.buttes {
  position: absolute; left: 0; bottom: calc(100% - 1px);
  width: 100%; height: clamp(34px, 5.6vw, 92px);
  pointer-events: none; overflow: visible;
}
.buttes path { fill: var(--bg); }

/* ---------- Loader ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center; align-content: center; gap: 2rem;
  background: var(--cream); color: var(--plum);
  animation: loader-failsafe .01s linear 8s forwards;
}
@keyframes loader-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.loader__logo { width: min(72vw, 30rem); height: auto; filter: drop-shadow(0 18px 30px rgba(42, 7, 21, .18)); }
.loader__count { font-weight: 800; font-stretch: 75%; font-size: 1.25rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.loader__edge { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: clamp(40px, 7vw, 110px); overflow: visible; transform: scaleY(-1); }
.loader__edge path { fill: var(--coral); }

/* ---------- Curseur ---------- */
.cursor { display: none; }
.has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 280; pointer-events: none; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.cursor__dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--paper); }
.cursor__follow { position: absolute; }
.cursor__ring {
  position: absolute; left: 0; top: 0; width: 46px; height: 30px; margin: -15px 0 0 -23px;
  display: grid; place-items: center;
  border: 1.5px solid var(--plum); border-radius: 50% 55% 50% 45% / 55% 50% 50% 45%;
  background: rgba(255, 250, 244, .28);
  transition: width .5s var(--ease-out), height .5s var(--ease-out), margin .5s var(--ease-out), background-color .3s, border-color .3s, transform .5s var(--ease-out), opacity .3s;
}
.cursor__label { font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--paper); opacity: 0; white-space: nowrap; transition: opacity .25s; }
.cursor.is-link .cursor__ring { width: 74px; height: 50px; margin: -25px 0 0 -37px; background: rgba(250, 55, 74, .22); border-color: var(--coral); }
.cursor.is-label .cursor__ring { width: 104px; height: 70px; margin: -35px 0 0 -52px; background: var(--plum); border-color: var(--paper); }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-hidden .cursor__ring { transform: scale(0); opacity: 0; }
/* Les fiches recettes s'ouvrent dans la couche supérieure du navigateur, au-dessus du curseur maison :
   on masque celui-ci et on rend le curseur natif dans la fiche. */
.is-dialog-open .cursor { visibility: hidden; }
.has-cursor .dialog, .has-cursor .dialog::backdrop { cursor: pointer; }
.has-cursor .dialog__panel, .has-cursor .dialog__panel * { cursor: auto; }
.has-cursor .dialog__panel a, .has-cursor .dialog__panel button, .has-cursor .dialog__panel button * { cursor: pointer; }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(.75rem, 1.5vw, 1.25rem) var(--pad-x);
  pointer-events: none;
  transition: transform .8s var(--ease-out);
}
.header.is-hidden { transform: translateY(-130%); }
.header > * { pointer-events: auto; }
.header__logo { position: relative; display: block; width: clamp(120px, 12vw, 184px); }
.header__logo img {
  width: 100%;
  /* liseré crème : la patate du logo reste détourée sur les sections corail et rouge */
  filter: drop-shadow(1.5px 0 0 var(--paper)) drop-shadow(-1.5px 0 0 var(--paper)) drop-shadow(0 1.5px 0 var(--paper)) drop-shadow(0 -1.5px 0 var(--paper)) drop-shadow(0 10px 14px rgba(42, 7, 21, .28));
  transition: transform .8s var(--ease-out);
}
.header__logo:hover img { transform: rotate(-4deg) scale(1.05); }

.nav { display: flex; align-items: center; gap: .75rem; }
.nav__wrap {
  position: relative; display: flex; padding: .35rem;
  border-radius: 999px; background: var(--paper);
  box-shadow: 0 16px 34px -18px rgba(42, 7, 21, .5);
}
.nav__list { position: relative; display: flex; }
.nav__pill { position: absolute; top: .35rem; bottom: .35rem; left: 0; width: 0; border-radius: 999px; background: var(--plum); opacity: 0; }
.nav__link {
  position: relative; z-index: 1; display: block; padding: .8rem 1.15rem;
  border-radius: 999px; color: var(--plum); text-decoration: none;
  font-weight: 650; font-size: .96rem; line-height: 1; white-space: nowrap;
  transition: color .35s;
}
.nav__link.is-lit { color: var(--paper); }

.burger {
  position: relative; display: none; width: 3.35rem; height: 3.35rem; border-radius: 50%;
  background: var(--paper); box-shadow: 0 16px 34px -18px rgba(42, 7, 21, .5);
}
.burger__progress { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.burger__progress circle { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: 151; }
.burger__line {
  position: absolute; left: 32%; right: 32%; height: 2.5px; border-radius: 2px; background: var(--plum);
  transition: transform .6s var(--ease-out), top .6s var(--ease-out);
}
.burger__line:nth-of-type(1) { top: 42%; }
.burger__line:nth-of-type(2) { top: 56%; }
.is-menu-open .burger__line { top: calc(50% - 1px); }
.is-menu-open .burger__line:nth-of-type(1) { transform: rotate(45deg); }
.is-menu-open .burger__line:nth-of-type(2) { transform: rotate(-45deg); }

/* ---------- Menu plein écran (mobile / tablette) ---------- */
.menu {
  position: fixed; inset: 0; z-index: 190;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--pad-x) 2.5rem;
  overflow: hidden; visibility: hidden;
  clip-path: circle(0 at calc(100% - var(--pad-x) - 1.7rem) 2.6rem);
  transition: clip-path .9s var(--ease-io), visibility 0s linear .9s;
}
.menu.is-open { visibility: visible; clip-path: circle(150% at calc(100% - var(--pad-x) - 1.7rem) 2.6rem); transition: clip-path .9s var(--ease-io), visibility 0s; }
.menu__list { position: relative; z-index: 1; }
.menu__link {
  display: block; overflow: hidden; padding-block: .08em;
  font-weight: 800; font-stretch: 75%; font-size: clamp(3rem, 12.5vw, 6.5rem); line-height: .95; letter-spacing: -.008em;
  text-decoration: none;
}
.menu__txt { display: inline-block; }
.menu__foot { position: relative; z-index: 1; margin-top: 2.5rem; font-weight: 600; }
.menu__illu { position: absolute; right: -14%; bottom: -8%; width: min(78vw, 28rem); transform: rotate(-14deg); pointer-events: none; }

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (max-width: 1023px) {
  .nav__wrap { display: none; }
  .burger { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  body::after { animation: none; }
}