/* =========================================================
   Mon Poulet Adoré — couche de finition « éditoriale »
   Chargée en dernier. Objectif : passer d'un rendu « gabarit »
   (tout en cartes, titres timides) à un rendu de maison de
   qualité : typographie affirmée, filets plutôt que boîtes,
   respiration, variation de rythme.
   ========================================================= */

/* ---------------------------------------------------------
   1. TYPOGRAPHIE — Fraunces est une police variable : on
   exploite son axe optique (opsz) pour que les grands titres
   aient des empattements plus fins et un dessin plus élégant.
   --------------------------------------------------------- */
h1, h2 {
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  letter-spacing: -0.032em;
  line-height: 1.02;
}
h3, h4 { font-variation-settings: "opsz" 60; letter-spacing: -0.018em; }

.section-head h2,
.story__body h2,
.quality__body h2,
.provenance-section .provenance__body h2,
.interview__tete h2 {
  font-size: clamp(2.3rem, 5.4vw, 3.7rem);
}
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 5.1rem); }

/* Chapô : plus grand, plus aéré, largeur de lecture maîtrisée */
.section-head p,
.story__body > p,
.quality__body > p {
  font-size: clamp(1.05rem, 1.9vw, 1.18rem);
  line-height: 1.68;
  max-width: 58ch;
}
.section-head--center p { margin-inline: auto; }

/* Sur-titres : plus discrets, plus espacés — un détail de finition */
.eyebrow {
  font-size: .74rem;
  letter-spacing: .24em;
  margin-bottom: var(--space-5);
}

/* ---------------------------------------------------------
   2. DÉ-BOÎTER — remplacer les cartes par des filets et de
   l'espace. C'est le changement qui « déscolarise » le plus
   une mise en page.
   --------------------------------------------------------- */

/* Les 3 étapes : plus de cartes, un chiffre de grande taille
   et un filet supérieur, comme dans un magazine. */
.steps { gap: clamp(var(--space-5), 4vw, var(--space-7)); }
.step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-5) 0 0;
}
.step__num {
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
  color: var(--red);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-variation-settings: "opsz" 144;
  line-height: 1;
  margin-bottom: var(--space-4);
  display: block;
}
.step h3 { font-size: 1.45rem; }

/* La carte : plus de boîte englobante, juste le contenu */
.menu {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  padding-top: clamp(var(--space-6), 5vw, var(--space-8));
}
.menu__list li { border-bottom-color: var(--line); }
.menu__item--star { background: transparent; position: relative; }
.menu__item--star::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-4)); top: 0; bottom: 0;
  width: 3px; background: var(--red); border-radius: 2px;
}

/* Recettes et marchés : filets fins, pas d'ombre lourde */
.recipe { box-shadow: none; border-color: var(--line); }
.recipe[open] { box-shadow: none; border-color: var(--line-strong); }
.market-card {
  box-shadow: none;
  border-color: var(--line);
}
.market-card:hover { box-shadow: var(--shadow-md); }

/* Pied de « Réserver » : filet, pas carte */
.reserve__foot {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-6) 0 0;
}

/* ---------------------------------------------------------
   3. VARIER LE RYTHME — tout n'est plus centré. Certaines
   sections passent en alignement à gauche avec un filet,
   ce qui crée une alternance éditoriale.
   --------------------------------------------------------- */
.recipes .section-head--center,
.videos .section-head--center {
  text-align: left;
  margin-inline: 0;
  max-width: 40rem;
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-5);
}
.recipes .section-head--center p,
.videos .section-head--center p { margin-inline: 0; }
.recipes .section-head--center .eyebrow::before,
.videos .section-head--center .eyebrow::before { display: inline-block; }

/* ---------------------------------------------------------
   4. HERO — on retire la photo pivotée (effet un peu daté) et
   on laisse l'image filer vers le bord droit : cadrage
   asymétrique, beaucoup plus affirmé.
   --------------------------------------------------------- */
.hero__photo { rotate: 0deg; }

@media (min-width: 1100px) {
  /* L'image file jusqu'au bord droit de la fenêtre.
     On ne peut pas utiliser de pourcentage ici : il se rapporterait à
     la cellule de grille, pas au conteneur. On calcule donc la marge
     restante entre le conteneur et le bord de la fenêtre. */
  .hero__art {
    /* +18px : 100vw inclut la barre de défilement, pas la zone visible.
       Ce léger débordement garantit que l'image touche vraiment le bord
       (il est rogné sans dommage par overflow-x: hidden). */
    margin-right: calc(-1 * (max(0px, (100vw - var(--container)) / 2) + var(--space-5) + 18px));
  }
  .hero__photo {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}

/* Chiffres du hero : alignés sur un filet, plus sobres */
.hero__meta dt {
  font-variation-settings: "opsz" 144;
  font-size: 1.9rem;
}
.hero__meta dd { font-size: .78rem; letter-spacing: .14em; }

/* ---------------------------------------------------------
   5. DÉTAILS DE FINITION
   --------------------------------------------------------- */

/* Liens de texte : soulignement fin qui s'anime */
.story__body a, .provenance__body a, .qa__a a, .step a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--ease);
}
.story__body a:hover, .provenance__body a:hover, .qa__a a:hover, .step a:hover {
  background-size: 100% 1px;
}

/* Boutons : moins « pilule », un rayon plus retenu = plus sérieux */
.btn { border-radius: var(--radius-md); letter-spacing: .01em; }
.nav__phone { border-radius: var(--radius-md); }

/* Citation d'ouverture : marque typographique plus fine */
.story__quote {
  border-left-width: 2px;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.38;
}

/* Étiquette sur la photo du savoir-faire : plus discrète */
.story__tag {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  font-size: .78rem; letter-spacing: .06em;
}

/* Pied de page : un filet haut pour asseoir la fin de page */
.site-footer { border-top: 3px solid var(--red); }

/* ---------------------------------------------------------
   6. RESPIRATION — les sections gagnent en amplitude sur
   grand écran ; l'espace est le premier signe de qualité.
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .section { padding-block: clamp(var(--space-9), 10vw, 150px); }
}

/* =========================================================
   7. BANDEAU « OÙ SOMMES-NOUS AUJOURD'HUI »
   Information vivante : le site répond à la première question
   que se pose un client — « où sont-ils, là, maintenant ? »
   ========================================================= */
.aujourdhui {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.aujourdhui[hidden] { display: none; }
.aujourdhui__inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
}
.aujourdhui__pastille {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-mute); flex: none;
}
.aujourdhui--ouvert .aujourdhui__pastille {
  background: #1F8055;
  box-shadow: 0 0 0 0 rgba(31,128,85,.55);
  animation: pulseOuvert 2.4s ease-out infinite;
}
@keyframes pulseOuvert {
  70%  { box-shadow: 0 0 0 10px rgba(31,128,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,128,85,0); }
}
@media (prefers-reduced-motion: reduce) {
  .aujourdhui--ouvert .aujourdhui__pastille { animation: none; }
}
.aujourdhui__texte {
  margin: 0; font-weight: 600; color: var(--ink);
  font-size: clamp(.94rem, 1.7vw, 1.05rem);
}
.aujourdhui__lien {
  margin-left: auto; color: var(--red-deep); font-weight: 600;
  font-size: .92rem; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.aujourdhui__lien:hover { border-bottom-color: currentColor; }
@media (max-width: 560px) {
  .aujourdhui__lien { margin-left: 0; }
}

/* =========================================================
   8. BARRE D'APPEL FIXE (mobile)
   Sur téléphone, le pouce est en bas : l'action principale
   doit y être en permanence.
   ========================================================= */
.barre-appel { display: none; }

@media (max-width: 880px) {
  .barre-appel {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .barre-appel__tel {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3);
    min-height: 52px; border-radius: var(--radius-md);
    background: var(--red); color: #fff; text-decoration: none;
    font-weight: 600; font-size: 1.02rem;
    box-shadow: var(--shadow-md);
  }
  .barre-appel__tel svg { width: 19px; height: 19px; }
  .barre-appel__tel:active { background: var(--red-deep); }
  /* le pied de page ne doit pas passer sous la barre */
  .site-footer { padding-bottom: 84px; }
}

/* =========================================================
   9. NUMÉROTATION ÉDITORIALE DES SECTIONS
   Le numéro remplace le filet du sur-titre : repère de lecture
   discret qui structure la page comme un sommaire de magazine.
   ========================================================= */
.eyebrow[data-num] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}
.eyebrow[data-num]::before {
  content: attr(data-num);
  width: auto; height: auto; background: none;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--red);
  /* petit filet sous le numéro, aligné optiquement */
  border-bottom: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  padding-bottom: 2px;
}
/* les en-têtes centrés gardent le numéro centré avec le texte */
.section-head--center .eyebrow[data-num] { justify-content: center; }

/* =========================================================
   10. IMAGES WebP
   Chaque image est servie en WebP (~45 % plus léger) avec le
   JPEG en secours pour les navigateurs anciens. `display:
   contents` fait disparaître la balise <picture> du calcul de
   mise en page : la structure reste identique à avant.
   ========================================================= */
picture { display: contents; }