:root{
  --bg: #fbf7f1;
  --ink: #141311;
  --accent: #b08d57;

  --paper: rgba(255,255,255,.70);
  --line: rgba(20,19,17,.12);
  --shadow: 0 28px 80px rgba(0,0,0,.10);

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Dior background tuning */
  --cat-bg-opacity: .055;    /* intensité de l’image fantôme */
  --cat-bg-blur: 3px;
  --cat-bg-scale: 1.06;

}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  transition: background 700ms ease, color 700ms ease;
}

/* Subtle film grain / texture */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(0,0,0,.06), transparent 55%),
    radial-gradient(1000px 700px at 80% 20%, rgba(0,0,0,.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .25;
}

/* HERO */
.hero{
  min-height: 80vh;
  display: grid;
  align-items: center;
  padding: clamp(60px, 7vw, 110px) 0 40px;
  background: var(--bg);
}

.hero-inner{ max-width: 980px; }

.kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  opacity: .75;
}

.hero-title{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 4.2vw, 4.2rem);
  margin: 14px 0 10px;
}

.hero-sub{
  max-width: 680px;
  font-size: 1.06rem;
  line-height: 1.65;
  opacity: .85;
  margin: 0 0 18px;
}

/* HERO with portrait image */
.hero--image{
  position: relative;
  min-height: 100vh;
  padding: 0;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}
@supports (min-height: 100dvh){
  .hero--image{ min-height: 100dvh; }
}

/* Image layer */
.hero-media{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Optional atmosphere near bottom (sans backdrop-filter pour éviter les hairlines) */
.hero-media::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:140px;
  pointer-events:none;

  background: linear-gradient(
    to bottom,
    rgba(251,247,241,0) 0%,
    rgba(251,247,241,.35) 55%,
    rgba(251,247,241,.70) 85%,
    rgba(251,247,241,1) 100%
  );
}

.hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;

  /* Fondu progressif vers transparence */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,0.8) 70%,
    rgba(0,0,0,0.4) 85%,
    rgba(0,0,0,0.15) 93%,
    rgba(0,0,0,0) 101%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,0.8) 70%,
    rgba(0,0,0,0.4) 85%,
    rgba(0,0,0,0.15) 93%,
    rgba(0,0,0,0) 101%
  );
}

/* Voile uniquement pour la lisibilité du texte */
.hero--image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(251,247,241,.88) 0%,
    rgba(251,247,241,.62) 40%,
    rgba(251,247,241,.20) 72%,
    rgba(251,247,241,0) 100%
  );
}

/* Text layer on top */
.hero-inner--overlay{
  position: relative;
  z-index: 2;
  max-width: 980px;
  padding: clamp(60px, 7vw, 110px) 0 46px;
}

/* Optional: make buttons always visible on photo */
.hero--image .meta-pill{
  background: rgba(255,255,255,.38);
  border-color: rgba(20,19,17,.22);
}

/* Mobile: center text + overlay more uniform */
@media (max-width: 768px){
  .hero--image::after{
    background: linear-gradient(
      180deg,
      rgba(251,247,241,.92) 0%,
      rgba(251,247,241,.70) 40%,
      rgba(251,247,241,.18) 100%
    );
  }
  .hero-inner--overlay{
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero-meta{ justify-content: center; }
}

/* NAV PREMIUM BUTTONS */
.hero-meta{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.meta-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 18px;
  border-radius: 999px;

  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;

  text-decoration: none;
  color: var(--ink);

  border: 1px solid rgba(20,19,17,.18);
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(8px);

  transition:
    background 280ms ease,
    border-color 280ms ease,
    transform 200ms ease,
    box-shadow 280ms ease,
    color 280ms ease;

  cursor: pointer;
}

.meta-pill:hover{
  background: rgba(255,255,255,.55);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

.meta-pill.is-active{
  border-color: var(--accent);
  background: rgba(255,255,255,.75);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.meta-pill::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: 6px;
  width: 0%;
  height: 1px;
  background: var(--accent);
  transition: width 300ms ease, left 300ms ease;
}

.meta-pill:hover::after,
.meta-pill.is-active::after{
  width: 60%;
  left: 20%;
}

.meta-dot{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .9;
}

/* Scroll indicator */
.scroll-indicator{
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: .8;
}
.scroll-indicator .line{
  width: 56px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 65%, transparent);
  position: relative;
  overflow: hidden;
}
.scroll-indicator .line::after{
  content:"";
  position:absolute;
  left:-20%;
  top:0;
  width:40%;
  height:100%;
  background: var(--accent);
  animation: sweep 1.8s infinite;
  opacity:.8;
}
@keyframes sweep{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(220%); }
}
.scroll-indicator .label{
  font-size: .92rem;
  letter-spacing: .04em;
}

/* =========================
   CATEGORY TITLES + DIOR BG
   ========================= */

/* Maison parisienne — Intertitres éditoriaux */
.category{
  padding: clamp(56px, 5vw, 90px) 0 28px;
  border-top: 1px solid rgba(20,19,17,.06);

  position: relative;
  overflow: hidden;
  isolation: isolate; /* garantit un empilement propre */
}

/* Supprime la bordure en tout début si besoin */
main > .category:first-child{ border-top: 0; }

/* Image fantôme (Dior): très subtile derrière le texte */
.category::before{
  content:"";
  position:absolute;
  inset: -10% -5% -10% -5%;
  z-index: 0;
  pointer-events:none;

  background-image: var(--category-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: var(--cat-bg-opacity);
  transform: scale(var(--cat-bg-scale));

  /* effet Dior : doux, “papier + photo fantôme” */
  filter:
    blur(var(--cat-bg-blur))
    contrast(.92)
    brightness(.98)
    saturate(.85)
    grayscale(.12);
}

/* Voile papier pour lisibilité parfaite (et homogénéité) */
.category::after{
  content:"";
  position:absolute;
  inset: 0;
  z-index: 1;
  pointer-events:none;

  background: linear-gradient(
    to bottom,
    rgba(251,247,241,.92) 0%,
    rgba(251,247,241,.88) 40%,
    rgba(251,247,241,.86) 100%
  );
}

/* Le contenu au-dessus */
.category-inner{
  max-width: 1100px;
  position: relative;
  z-index: 2;
}

.category-rule{
  height: 1px;
  background: linear-gradient(90deg, rgba(20,19,17,.22), transparent);
  margin-bottom: 22px;
  position: relative;
}

.category-rule::after{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width: 84px;
  height: 2px;
  background: var(--accent);
  opacity: .85;
}

.category-top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.category-kicker{
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .76rem;
  opacity: .78;
}

.category-number{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  opacity: .45;
}

.category-title{
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .01em;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  margin: 0 0 10px;
}

.category-sub{
  max-width: 760px;
  margin: 0;
  line-height: 1.75;
  font-size: 1.05rem;
  opacity: .82;
}

.category-sub em{
  font-family: var(--serif);
  font-style: italic;
  opacity: .92;
}

/* Animation douce des catégories */
.category{
  opacity: .98;
  transform: translateY(8px);
  transition: transform 900ms ease, opacity 900ms ease;
}
.category.active{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   PIECES
   ========================= */

.piece{
  min-height: auto;
  display: block;
  padding: clamp(18px, 3vw, 42px) 0;
  border-top: none;

  opacity: .98;
  transform: translateY(10px);
  transition: transform 900ms ease, opacity 900ms ease;
}

@media (min-width: 1400px){
  .piece{ padding-top: 40px; }
}

/* Chevauchement discret */
.category + .piece{
  margin-top: 24px; /* espace propre après intertitre */
}

.piece.active{
  opacity: 1;
  transform: translateY(0);
}

.piece-inner{ max-width: 1200px; }

.piece-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(18px, 4vw, 48px);
  align-items: center;
}

@media (max-width: 992px){
  .piece-grid{ grid-template-columns: 1fr; }
}

/* MEDIA */
.media{
  border-radius: 22px;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(20,19,17,.10);
  box-shadow: 0 28px 85px rgba(0,0,0,.09);
  padding: 14px;

  /* important pour éviter les captions coupées */
  height: auto;
  overflow: visible;
}

.media-img{
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 16px;
  filter: saturate(1.02) contrast(1.02);
  transform: scale(.985);
  transition: transform 900ms cubic-bezier(.2,.9,.2,1), filter 900ms ease;
  display: block;
}

.piece.active .media-img{
  transform: scale(1.01);
  filter: saturate(1.06) contrast(1.05);
}

/* Caption sous l'image (évite tout découpage) */
.caption{
  position: static;
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: center;

  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(20,19,17,.10);
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(10px);
}

.cap-title{
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .02em;
}
.cap-sep{
  height: 1px;
  flex: 1;
  background: rgba(20,19,17,.14);
}
.cap-note{
  font-size: .92rem;
  opacity: .82;
}

/* CONTENT */
.content{ position: relative; }

/* SIGNATURE (simple, sans “tâche”) */
.signature{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: .8;
  margin-bottom: 12px;
}

.sig-line{
  width: 42px;
  height: 1px;
  background: var(--accent);
  opacity: .85;
}

.sig-text{
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .75rem;
  opacity: .70;
}

.title{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  margin: 0 0 10px;
}

.desc{
  line-height: 1.7;
  font-size: 1.03rem;
  opacity: .88;
  margin: 0 0 18px;
}

/* Ingredient card */
.card{
  border-radius: 18px;
  border: 1px solid rgba(20,19,17,.12);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 55px rgba(0,0,0,.08);
  padding: 16px 18px;
}

.card-head{
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 10px;
  position: relative;
}
.card-head::after{
  content:"";
  display:block;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .9;
}

.card-list{
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}
.card-list li{ opacity: .9; }

.footnote{
  margin-top: 12px;
  font-size: .92rem;
  opacity: .75;
}

/* Footer */
.footer{
  padding: 28px 0;
  border-top: 1px solid rgba(20,19,17,.08);
  background: rgba(255,255,255,.25);
}
.footer-inner{
  display:flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  opacity: .75;
}

@media (max-width: 992px){
  /* Moins d’air vertical */
  .piece{
    padding: 22px 0;
  }

  /* L’image ne doit pas monopoliser l’écran */
  .media{
    height: auto;
  }

  .media-img{
    max-height: 48vh;     /* clé: limite la hauteur visible */
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Remonter le contenu (ingrédients) */
  .content{
    margin-top: 10px;
  }

  .card{
    margin-top: 12px;
  }
}
@media (max-width: 992px){
  .piece-grid{
    display: flex;
    flex-direction: column;
  }
  .piece-grid .content{ order: 1; }
  .piece-grid .media{ order: 2; }
}
/* État initial discret */
.fade-in{
  opacity: 0;
  transform: translateY(30px);
  transition: 
    opacity 900ms cubic-bezier(.2,.8,.2,1),
    transform 900ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* Quand visible */
.fade-in.is-visible{
  opacity: 1;
  transform: translateY(0);
}


/* =============================================================================
   Formulaire de contact
   Reprend la palette et les proportions du reste de la page : creme, filet
   dore, Playfair pour le titre. Le champ leurre de l'antispam est sorti de
   l'ecran, pas masque par display:none — certains robots reconnaissent le
   second et l'evitent.
   ============================================================================= */
.contact { background: #fbf7f1; color: #141311; padding: 96px 0; }
.contact-inner { max-width: 640px; }
.contact-titre {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 4vw, 42px); font-weight: 500;
  margin: 22px 0 12px; letter-spacing: .2px;
}
.contact-intro { color: #5b544a; margin: 0 0 28px; line-height: 1.7; }

.contact-champ { margin: 0 0 18px; }
.contact-champ label {
  display: block; font-family: var(--sans);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #8a7f70; margin-bottom: 6px;
}
/* Les champs reprennent l'arrondi des blocs du site (16px sur .card et les
   images) plutot qu'un angle vif, et la police sans-serif du corps de texte.
   font: inherit suffisait tant que le formulaire heritait du body ; on le
   pose explicitement pour ne pas dependre de l'ascendance. */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: #141311;
  background: #fff; border: 1px solid #e3dbcd; border-radius: 14px;
  padding: 13px 16px; transition: border-color .2s;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: #b08d57;
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form ul.errorlist {
  list-style: none; padding: 0; margin: 6px 0 0;
  color: #a2432f; font-size: 13px;
}

/* Le bouton reprend la forme des pastilles du bandeau : meme arrondi complet,
   memes majuscules espacees, meme police. */
.contact-envoi {
  font-family: var(--sans); font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase;
  background: #141311; color: #fbf7f1; border: 1px solid #141311;
  padding: 13px 30px; border-radius: 999px; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.contact-envoi:hover { background: #b08d57; border-color: #b08d57; color: #fff; }
.contact-envoi:focus-visible { outline: 2px solid #b08d57; outline-offset: 3px; }

.contact-retour {
  padding: 14px 18px; border-left: 3px solid #b08d57;
  background: #fff; margin: 0 0 24px; border-radius: 0 14px 14px 0;
}
.contact-retour--success { border-left-color: #4a7c59; }
.contact-retour--error { border-left-color: #a2432f; }

/* Champ leurre de l'antispam : hors de l'ecran, jamais display:none. */
.antispam-leurre {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
}
p:has(> .antispam-leurre) { position: absolute; left: -9999px; height: 0; margin: 0; }
label[for="id_site_web"] { position: absolute; left: -9999px; }

/* L'attribut hidden doit toujours l'emporter sur une regle d'auteur. */
[hidden] { display: none !important; }


/* =============================================================================
   Carrousel d'une piece

   Les vues sont superposees : celle qui est active a une opacite de 1, les
   autres de 0. Consequence de cette superposition : le conteneur prend la
   hauteur de la PLUS GRANDE photo, et une photo plus courte laissait un grand
   blanc sous elle.

   Trois facons d'y remedier, et la troisieme l'emporte.

   Recadrer toutes les photos au meme format serait simple, mais couperait le
   haut d'un entremets — sur un book de patisserie, on ne rogne pas le travail.

   Faire suivre la hauteur du cadre a la photo affichee supprime le blanc,
   mais decale la page a chaque changement : tout ce qui suit glisse sous les
   yeux du lecteur.

   Le cadre garde donc la hauteur de la PLUS HAUTE photo, une fois pour
   toutes, et les plus courtes se centrent dedans. Un peu de vide subsiste
   au-dessus et en dessous de celles-la, mais la mise en page ne bouge plus
   jamais. C'est le script qui mesure et pose cette hauteur (app.js).
   ============================================================================= */
.carrousel {
  position: relative; display: grid;
  /* place-items: center — une photo plus courte que le cadre se centre,
     autant d'espace au-dessus qu'en dessous. */
  place-items: center;
}
.carrousel-vue {
  grid-area: 1 / 1;
  max-height: 100%; width: 100%; height: auto; object-fit: contain;
  opacity: 0; transition: opacity .9s ease;
  pointer-events: none;
}
.carrousel-vue.est-active { opacity: 1; pointer-events: auto; }

.carrousel-puces {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.carrousel-puce {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .28);
  transition: background .25s, transform .25s;
}
.carrousel-puce.est-active { background: #fff; transform: scale(1.25); }
.carrousel-puce:focus-visible { outline: 2px solid #b08d57; outline-offset: 2px; }

/* Qui a demandé moins d'animations n'en reçoit pas : la première photo reste. */
@media (prefers-reduced-motion: reduce) {
  .carrousel-vue { transition: none; }
}