/* =========================================================
   LES RECETTES D'OLIVIER
   Feuille de style unique — vanilla CSS, aucune dépendance.

   SOMMAIRE
   1.  Variables (couleurs, typo, rythme)
   2.  Base & utilitaires
   3.  Boutons
   4.  En-tête + navigation
   5.  Hero
   6.  Titres de section
   7.  Notre histoire
   8.  Les premières recettes
   9.  Philosophie
   10. Coulisses (étapes)
   11. Newsletter / contact
   12. Pied de page
   13. Pages légales
   14. Animations & responsive
   ========================================================= */

/* ============ 1. VARIABLES ============ */
:root {
  /* Couleurs */
  --citron:        #F5C518;
  --citron-fonce:  #E3A50B;
  --citron-pale:   #FDF1C7;
  --pulpe:         #FBE08C;
  --pulpe-claire:  #FDEFBB;
  --zeste:         #E2622A;
  --feuille:       #2F6B3C;
  --feuille-clair: #7CB069;
  --encre:         #16210E;
  --blanc:         #FFFDF7;
  --craie:         #F6F2E4;
  --gris:          #666B5D;

  /* Typographies */
  --display:   'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --expressif: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --texte:     ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Rythme */
  --largeur:  1180px;
  --marge:    clamp(1.25rem, 5vw, 3.5rem);
  --air:      clamp(4.5rem, 11vw, 9rem);
  --rayon:    18px;
  --entete-h: 76px;

  --transition: 280ms cubic-bezier(.4, 0, .2, 1);
}

/* ============ 2. BASE & UTILITAIRES ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.125rem;      /* 18px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 { margin: 0; line-height: 1; }

ul, ol { margin: 0; padding: 0; list-style: none; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section { padding-block: var(--air); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: 50%; top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--encre); color: var(--blanc);
  padding: .75rem 1.25rem; border-radius: 0 0 10px 10px;
  text-decoration: none;
}
.lien-evitement:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--zeste);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============ 3. BOUTONS ============ */
.bouton {
  display: inline-block;
  font-family: var(--expressif);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 2px solid var(--encre);
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition), color var(--transition);
}

.bouton--plein {
  background: var(--encre);
  color: var(--blanc);
}
.bouton--plein:hover { background: var(--zeste); border-color: var(--zeste); transform: translateY(-2px); }

.bouton--fin {
  background: transparent;
  color: var(--encre);
  padding: .6rem 1.2rem;
  font-size: .95rem;
}
.bouton--fin:hover { background: var(--encre); color: var(--blanc); }

/* ============ 4. EN-TÊTE ============ */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background-color var(--transition), box-shadow var(--transition);
}

.entete--fixe {
  background: rgba(255, 253, 247, .94);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(22, 33, 14, .1);
}

.entete__inner {
  max-width: var(--largeur);
  margin-inline: auto;
  padding: 0 var(--marge);
  height: var(--entete-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-right: auto;
}

.marque__visuel { width: 44px; flex: 0 0 44px; }
.marque__visuel img { width: 100%; }
.marque__visuel.visuel--charge .marque__fallback { display: none; }

.marque__mot {
  font-family: var(--expressif);
  font-weight: 700;
  line-height: .98;
  font-size: 1.15rem;
  display: grid;
}
.marque__ligne2 { color: var(--feuille); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}

.nav__liste a {
  text-decoration: none;
  font-size: 1rem;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
}
.nav__liste a:hover { border-bottom-color: var(--encre); }

.burger {
  display: none;
  background: transparent;
  border: 2px solid var(--encre);
  border-radius: 999px;
  width: 46px; height: 46px;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger__barres { display: grid; gap: 5px; }
.burger__barres i {
  display: block;
  width: 20px; height: 2px;
  background: var(--encre);
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ 5. HERO ============ */
.hero {
  position: relative;
  background: var(--citron);
  padding-top: calc(var(--entete-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}

.hero::after {
  /* liseré organique en bas de section */
  content: '';
  position: absolute;
  left: -5%; right: -5%; bottom: -60px;
  height: 120px;
  background: var(--blanc);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.hero__titre {
  font-family: var(--display);
  font-size: clamp(3.6rem, 11.5vw, 8.5rem);
  line-height: .84;
  letter-spacing: .005em;
  display: grid;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.hero__l2 { padding-left: .06em; }

.hero__accroche {
  font-family: var(--expressif);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero__intro {
  max-width: 46ch;
  font-size: 1.15rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.hero__actions { margin-bottom: 1.25rem; }

.hero__mention {
  font-family: var(--expressif);
  font-weight: 500;
  font-size: .95rem;
  color: var(--feuille);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.hero__mention::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--feuille);
}

.hero__visuel {
  position: relative;
  align-self: center;
  justify-self: end;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}
.hero__visuel.visuel--charge .citron-svg { opacity: 0; visibility: hidden; }

.citron-svg { width: 100%; height: 100%; }
.citron-svg__fruit { transform-origin: 46% 55%; }

/* ============ 6. TITRES DE SECTION ============ */
.titre-affiche {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: .88;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.texte-fort {
  font-family: var(--expressif);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.4;
}

/* ============ 7. NOTRE HISTOIRE ============ */
.histoire__grille {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.cadre-organique {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 58% 42% 46% 54% / 44% 50% 50% 56%;
  overflow: hidden;
  background: var(--citron-pale);
  background-size: cover;
  background-position: center;
}
.cadre-organique__fallback { width: 100%; height: 100%; object-fit: cover; }
.cadre-organique.visuel--charge .cadre-organique__fallback { display: none; }

.histoire__texte p { color: var(--gris); }
.histoire__texte .texte-fort { color: var(--encre); }

.histoire__chute {
  font-family: var(--expressif);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--zeste) !important;
}

/* ============ 8. LES PREMIÈRES RECETTES ============ */
.recettes { background: var(--craie); }

.recettes__titre { max-width: 14ch; }

.cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition);
}
.carte:hover { transform: translateY(-6px); }

.carte__visuel {
  aspect-ratio: 16 / 11;
  background: var(--citron-pale);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}
.carte__illu { width: 78%; height: auto; }
.carte__visuel.visuel--charge .carte__illu { display: none; }

.carte__corps { padding: clamp(1.5rem, 3vw, 2.25rem); }

.carte__rang {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--citron-fonce);
  margin-bottom: .35rem;
}

.carte__titre {
  font-family: var(--display);
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: .9;
  margin-bottom: .85rem;
}

.carte__texte { color: var(--gris); margin-bottom: 1.35rem; }

.badge {
  display: inline-block;
  font-family: var(--expressif);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--zeste);
  border: 2px solid var(--zeste);
  border-radius: 999px;
  padding: .3rem 1rem;
}

.recettes__suite {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 62ch;
  font-family: var(--expressif);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.45;
}

/* ============ 9. PHILOSOPHIE ============ */
.philosophie {
  background: var(--encre);
  color: var(--blanc);
}

.philosophie__manifeste {
  font-family: var(--display);
  font-size: clamp(2.8rem, 8.5vw, 6.5rem);
  line-height: .9;
  text-align: center;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.engagements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.engagement {
  padding-top: 1.5rem;
  border-top: 2px solid rgba(255, 253, 247, .25);
}
.engagement__titre {
  font-family: var(--expressif);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--citron);
  margin-bottom: .7rem;
}
.engagement p {
  color: rgba(255, 253, 247, .82);
  font-size: 1.02rem;
}

/* ============ 10. COULISSES ============ */
.coulisses__intro {
  max-width: 58ch;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.coulisses__intro p { color: var(--gris); }

.etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
.etapes::before {
  content: '';
  position: absolute;
  left: 10%; right: 10%; top: 11px;
  height: 2px;
  background: var(--citron-pale);
}

.etape {
  position: relative;
  text-align: center;
  color: var(--gris);
}

.etape__point {
  display: block;
  width: 24px; height: 24px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: var(--blanc);
  border: 3px solid var(--citron-pale);
  position: relative;
  z-index: 1;
}

.etape__nom {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: .02em;
}

.etape--faite { color: var(--feuille); }
.etape--faite .etape__point { background: var(--feuille); border-color: var(--feuille); }

.etape--encours { color: var(--zeste); }
.etape--encours .etape__point {
  background: var(--zeste);
  border-color: var(--zeste);
  box-shadow: 0 0 0 6px rgba(226, 98, 42, .16);
}

/* ============ 11. NEWSLETTER / CONTACT ============ */
.contact {
  background: var(--citron-pale);
  text-align: center;
}
.contact__inner { max-width: 760px; }
.contact__titre { margin-inline: auto; }
.contact__texte {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  color: var(--gris);
}

.formulaire__ligne {
  display: flex;
  gap: .75rem;
  max-width: 560px;
  margin-inline: auto;
}

.formulaire__champ {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--texte);
  font-size: 1.05rem;
  padding: .85rem 1.25rem;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
}
.formulaire__champ::placeholder { color: var(--gris); }
.formulaire__champ[aria-invalid="true"] { border-color: var(--zeste); }

.formulaire__consentement {
  margin: 1.35rem auto 0;
  max-width: 54ch;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--gris);
}
.formulaire__consentement a { color: var(--feuille); }

.formulaire__message {
  margin: 1rem auto 0;
  max-width: 54ch;
  font-family: var(--expressif);
  font-weight: 500;
  min-height: 1.5em;
}
.formulaire__message[data-ton="ok"]     { color: var(--feuille); }
.formulaire__message[data-ton="erreur"] { color: var(--zeste); }

.contact__question {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-family: var(--expressif);
  font-weight: 500;
}
.contact__question a { color: var(--feuille); }

/* ============ 12. PIED DE PAGE ============ */
.pied {
  background: var(--encre);
  color: var(--blanc);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: 2rem;
}

.pied__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 253, 247, .18);
}

.marque__visuel--pied { width: 52px; flex-basis: 52px; margin-bottom: .9rem; }

.pied__nom {
  font-family: var(--expressif);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: .15rem;
}
.pied__lieu { color: rgba(255, 253, 247, .7); margin: 0; }

.pied__liens { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.pied__liens ul { display: grid; gap: .6rem; }
.pied__liens a {
  color: rgba(255, 253, 247, .82);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pied__liens a:hover { color: var(--citron); border-bottom-color: var(--citron); }

.pied__alcool {
  max-width: var(--largeur);
  margin: 1.75rem auto 0;
  padding-inline: var(--marge);
  font-size: .82rem;
  color: rgba(255, 253, 247, .6);
}

.pied__copyright {
  max-width: var(--largeur);
  margin: 1.75rem auto 0;
  padding-inline: var(--marge);
  font-size: .88rem;
  color: rgba(255, 253, 247, .6);
}

/* ============ 13. PAGES LÉGALES ============ */
.entete--statique {
  position: static;
  background: var(--blanc);
  box-shadow: 0 1px 0 rgba(22, 33, 14, .1);
}
.entete--statique + .page-legale { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

.page-legale {
  padding-top: calc(var(--entete-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: var(--air);
}
.page-legale .conteneur { max-width: 760px; }
.page-legale h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: .9;
  margin-bottom: 2rem;
}
.page-legale h2 {
  font-family: var(--expressif);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 2.5rem 0 .75rem;
}
.page-legale p, .page-legale li { color: var(--gris); }
.page-legale ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.15em; }
.page-legale li { margin-bottom: .4rem; }
.page-legale a { color: var(--feuille); }
.page-legale .aremplir {
  background: var(--citron-pale);
  color: var(--encre);
  padding: .1em .45em;
  border-radius: 5px;
  font-weight: 700;
}
.retour {
  display: inline-block;
  margin-bottom: 2rem;
  font-family: var(--expressif);
  font-weight: 700;
  color: var(--feuille);
  text-decoration: none;
}
.retour:hover { text-decoration: underline; }

/* ============ 14. ANIMATIONS ============ */
[data-anim] {
  opacity: 0;
  transform: translateY(18px);
}
.anim-visible[data-anim] {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}

/* Entrée orchestrée du hero — masquée uniquement si JS est actif,
   pour que la page reste lisible sans JavaScript. */
.js .hero__texte > * { opacity: 0; transform: translateY(14px); }
.js-pret .hero__texte > * {
  animation: entree .8s cubic-bezier(.2, .7, .3, 1) forwards;
}
.js-pret .hero__texte > *:nth-child(1) { animation-delay: .05s; }
.js-pret .hero__texte > *:nth-child(2) { animation-delay: .16s; }
.js-pret .hero__texte > *:nth-child(3) { animation-delay: .25s; }
.js-pret .hero__texte > *:nth-child(4) { animation-delay: .34s; }
.js-pret .hero__texte > *:nth-child(5) { animation-delay: .42s; }

.js .hero__visuel { opacity: 0; transform: scale(.94) rotate(-6deg); }
.js-pret .hero__visuel { animation: entreeFruit 1s cubic-bezier(.2, .7, .3, 1) .1s forwards; }

@keyframes entree {
  to { opacity: 1; transform: none; }
}
@keyframes entreeFruit {
  to { opacity: 1; transform: none; }
}

/* léger balancement du citron, uniquement une fois l'entrée terminée */
.js-pret .citron-svg__fruit { animation: flotte 9s ease-in-out 1.2s infinite; }
@keyframes flotte {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(2.5deg); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visuel {
    order: -1;
    justify-self: center;
    width: min(72%, 340px);
    margin-bottom: 1rem;
  }
  .histoire__grille { grid-template-columns: 1fr; }
  .cadre-organique { max-width: 420px; margin-inline: auto; }
  .engagements { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 780px) {
  :root { --entete-h: 68px; }

  body { font-size: 1.0625rem; }

  .burger { display: grid; }

  .nav {
    position: fixed;
    inset: var(--entete-h) 0 auto 0;
    background: var(--blanc);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem var(--marge) 2rem;
    box-shadow: 0 18px 30px rgba(22, 33, 14, .12);
    transform: translateY(-130%);
    transition: transform var(--transition);
    max-height: calc(100dvh - var(--entete-h));
    overflow-y: auto;
  }
  .nav--ouvert { transform: none; }

  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste a {
    display: block;
    padding: .95rem 0;
    font-family: var(--expressif);
    font-weight: 500;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(22, 33, 14, .1);
  }
  .nav__liste a:hover { border-bottom-color: rgba(22, 33, 14, .1); }

  .bouton--fin {
    margin-top: 1.25rem;
    text-align: center;
    background: var(--encre);
    color: var(--blanc);
    padding: .85rem 1.5rem;
    font-size: 1rem;
  }

  .entete { background: rgba(255, 253, 247, 0); }
  .entete--menu-ouvert { background: var(--blanc); }

  .cartes { grid-template-columns: 1fr; }

  .etapes { grid-template-columns: 1fr; gap: 1.5rem; justify-items: start; }
  .etapes::before {
    left: 11px; right: auto; top: 12px; bottom: 12px;
    width: 2px; height: auto;
  }
  .etape {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
  .etape__point { margin: 0; flex: 0 0 24px; }

  .formulaire__ligne { flex-direction: column; }
  .formulaire__champ { text-align: center; }

  .pied__inner { flex-direction: column; gap: 2rem; }
  .pied__liens { gap: 2rem; }
}

@media (max-width: 380px) {
  .marque__mot { font-size: 1.02rem; }
  .marque__visuel { width: 38px; flex-basis: 38px; }
}

/* ============ PRÉFÉRENCES UTILISATEUR ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-anim], .hero__texte > *, .hero__visuel { opacity: 1 !important; transform: none !important; }
}

@media print {
  .entete, .hero__visuel, .formulaire { display: none; }
  body { color: #000; background: #fff; }
}