/*
Theme Name: L'heure de la sieste
Theme URI: https://lheure-de-la-sieste.ch
Author: Valentine
Description: Thème sur-mesure pour le blog outdoor, famille et art de vivre en Suisse.
Version: 1.0.0
*/

/* ================= POLICES LOCALES (BALOO 2 / URBANIST) ================= */
@font-face {
  font-family: 'Baloo 2';
  src: url('assets/fonts/baloo/Baloo2-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Urbanist';
  src: url('assets/fonts/urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Urbanist';
  src: url('assets/fonts/urbanist/Urbanist-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

body {
  background-color: #FAF2EA;
  color: #393939;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
}

.font-serif {
  font-family: 'Urbanist', sans-serif;
}

/* Interligne des titres (2026-09-24) : les classes Tailwind de taille responsive
   (sm:text-5xl, lg:text-6xl...) imposent line-height: 1 et, étant déclarées après
   leading-tight/leading-relaxed dans tailwind.min.css, les écrasent sur grand écran —
   les lettres descendantes d'une ligne (g, p) touchaient les montantes de la suivante (f, l)
   sur les titres qui passent à la ligne. !important nécessaire pour passer devant Tailwind. */
h1.font-serif,
h2.font-serif,
h3.font-serif {
  line-height: 1.15 !important; /* 1.3 testé : trop aéré sur le grand titre de l'accueil */
}

/* ================= BARRE DE DÉFILEMENT ================= */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #FAF2EA;
}

::-webkit-scrollbar-thumb {
  background: #393939;
  border-radius: 4px;
}

/* ================= BOUTONS D'ACTION DES SPOTS ================= */
.btn-gps {
  background-color: #393939 !important;
  color: #FFFFFF !important;
}
.btn-gps:hover {
  background-color: #36964B !important;
}

.btn-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #FFFFFF !important;
}
.btn-instagram:hover {
  opacity: 0.9;
}

.btn-article {
  background-color: #E7412A !important;
  color: #FFFFFF !important;
}
.btn-article:hover {
  background-color: #C23A22 !important;
}

.btn-pine {
  background-color: #36964B !important;
  color: #FFFFFF !important;
}
.btn-pine:hover {
  background-color: #2C7B3E !important;
}

/* Pastille « Tous » active + filtres type de recette (2026-09-29, remplace le vert) : gris foncé plein */
.btn-charcoal {
  background-color: #393939 !important;
  color: #FFFFFF !important;
}
.btn-charcoal:hover {
  background-color: #2A2A2A !important;
}

/* Liste de liens pratiques de single-spot.php (GPS, Instagram, liens utiles, carte) : alignée
   à gauche, sans bouton ni contour, trait fin entre les liens, texte gris foncé, picto bleu,
   chevron gris à droite ; tout passe en rouge-orange au survol (2026-09-25) */
.spot-links a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.25rem;
  color: #393939;
  font-size: 0.875rem;
  font-weight: 700;
  transition: color 0.2s;
}
.spot-links a + a {
  border-top: 1px solid rgba(57, 57, 57, 0.12);
}
.spot-links a > span {
  flex: 1;
}
.spot-links a > svg {
  flex: none;
  color: #3389CA;
  transition: color 0.2s;
}
.spot-links a > svg.spot-links-chevron {
  color: rgba(57, 57, 57, 0.35);
}
.spot-links a:hover,
.spot-links a:hover > svg {
  color: #E7412A;
}

.btn-balade {
  background-color: #3389CA !important;
  color: #FFFFFF !important;
}
.btn-balade:hover {
  background-color: #2B74AC !important;
}

.btn-hebergement {
  background-color: #EAC950 !important;
  color: #FFFFFF !important;
}
.btn-hebergement:hover {
  background-color: #C7AB44 !important;
}

.btn-close-dark {
  background-color: rgba(57, 57, 57, 0.7) !important;
  color: #FFFFFF !important;
}
.btn-close-dark:hover {
  background-color: #393939 !important;
}

/* Remplissages statiques (sans hover) pour badges, rubans et bandeaux */
.fill-pine {
  background-color: #36964B !important;
  color: #FFFFFF !important;
}
.fill-terracotta {
  background-color: #E7412A !important;
  color: #FFFFFF !important;
}
.fill-charcoal {
  background-color: #393939 !important;
  color: #FFFFFF !important;
}
.overlay-dark {
  background-color: rgba(57, 57, 57, 0.7) !important;
}
.badge-terracotta-soft {
  background-color: #FBEAE6 !important;
  color: #C23A22 !important;
}

/* Pastilles de filtre catégorie actives : l'icône passe en blanc (sinon icône colorée
   sur fond de la même couleur = invisible), le picto garde sa couleur propre au repos */
.cat-pill.btn-balade svg,
.cat-pill.btn-article svg,
.cat-pill.btn-pine svg,
.cat-pill.btn-hebergement svg,
.cat-pill.btn-charcoal svg {
  color: #FFFFFF !important;
}

/* ================= COULEURS DE BADGES CATÉGORIES ================= */
.bg-instaBalade { background-color: #3389CA !important; color: #FFFFFF !important; }
.bg-instaTerroir { background-color: #E7412A !important; color: #FFFFFF !important; }
.bg-instaMusee { background-color: #36964B !important; color: #FFFFFF !important; }
.bg-instaSortie { background-color: #EABAD7 !important; color: #FFFFFF !important; }
.bg-instaHotel { background-color: #EAC950 !important; color: #FFFFFF !important; }
.bg-jeux { background-color: #EABAD7 !important; color: #FFFFFF !important; }

/* ================= PAGE PARTENAIRES : HERO (2026-09-28) ================= */
/* Bandeau défilant sous le hero : le contenu est répété, la piste glisse de -50% en boucle */
.partner-marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 0.9rem 0;
}
.partner-marquee-track {
  display: inline-flex;
  animation: partner-marquee 40s linear infinite;
}
.partner-marquee-track span {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #E7412A;
  margin-right: 1.75rem;
}
.partner-marquee-track span::after {
  content: '•';
  color: #393939;
  margin-left: 1.75rem;
}
@keyframes partner-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partner-marquee-track { animation: none; }
}

/* ================= CORPS DE L'ARTICLE ================= */
.article-content,
.article-body {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.5;
  color: #393939;
}

.article-content h2,
.article-body h2 {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #393939; /* 2026-09-25 : gris foncé (était vert #36964B) */
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.article-content h3,
.article-body h3 {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #393939; /* 2026-09-25 : gris foncé (était vert foncé #2C7B3E, bleu testé le 24.09) */
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* Petits intertitres (« Infos pratiques », « A savoir pour ta visite »...) très utilisés juste
   avant une liste à puces dans les anciens articles : sans style, le reset Tailwind les
   rendait identiques au texte courant, collés à la liste (2026-10-01) */
.article-content h4,
.article-body h4 {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #393939;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.article-content p,
.article-body p {
  margin-bottom: 1.5rem;
}

/* Liens de pagination (Précédent / numéros / Suivant) de home.php et category.php :
   bleu de la palette comme les liens "Lire l'article" (2026-09-25) */
.sieste-pagination a.page-numbers {
  color: #3389CA;
  padding: 0 0.4rem;
  transition: color 0.2s;
}
.sieste-pagination a.page-numbers:hover {
  color: #E7412A;
}
.sieste-pagination .page-numbers.current {
  color: #393939;
  padding: 0 0.4rem;
}

.article-content ul,
.article-content ol,
.article-body ul,
.article-body ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

/* Puces / numéros des listes saisies dans l'éditeur (2026-10-01) : le reset de Tailwind
   (preflight) met list-style: none sur tous les ul/ol. :where() garde une spécificité faible
   pour que les listes maison plus bas (.avis-checklist, .recette-ingredients, .recette-steps,
   .recette-steps-list...) gardent leur propre style sans puce. */
.article-content :where(ul),
.article-body :where(ul) {
  list-style: disc;
}
.article-content :where(ol),
.article-body :where(ol) {
  list-style: decimal;
}
/* Puce / numéro en rouge-orange */
.article-content :where(ul, ol) > li::marker,
.article-body :where(ul, ol) > li::marker {
  color: #E7412A;
}
/* Puce contenant un paragraphe (copier-coller depuis Google Docs / ChatGPT) : sans ça, chaque
   puce prenait la marge d'un paragraphe entier (1.5rem) et la liste paraissait « trouée » */
.article-content li > p,
.article-body li > p {
  margin-bottom: 0.35rem;
}
.article-content li > p:last-child,
.article-body li > p:last-child {
  margin-bottom: 0;
}
/* Phrase d'introduction juste avant une liste (« Petites infos », « Pour les billets : »...) :
   rapprochée de sa liste plutôt que séparée par une marge de paragraphe complète */
.article-content p:has(+ ul, + ol),
.article-body p:has(+ ul, + ol) {
  margin-bottom: 0.6rem;
}
/* Liste imbriquée */
.article-content li > :where(ul, ol),
.article-body li > :where(ul, ol) {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

.article-content li,
.article-body li {
  margin-bottom: 0.5rem;
}

.article-content img,
.article-body img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  display: block;
}

/* Liens dans le texte courant (paragraphes, listes, tableaux) — pas les boutons/cartes
   custom (.recette-video, .recette-insta-secondary...) qui gardent leur propre style */
.article-content p a,
.article-content li a,
.article-content td a,
.article-content :where(h2, h3, h4) a,
.article-body p a,
.article-body li a,
.article-body td a,
.article-body :where(h2, h3, h4) a {
  color: #E7412A;
  text-decoration: underline;
}

.article-content p a:hover,
.article-content li a:hover,
.article-content td a:hover,
.article-content :where(h2, h3, h4) a:hover,
.article-body p a:hover,
.article-body li a:hover,
.article-body td a:hover,
.article-body :where(h2, h3, h4) a:hover {
  color: #C23A22;
}

/* Légende d'image (bloc image Gutenberg + ancien shortcode [caption]) — le shortcode
   [caption] pose un style="width:...px" en dur sur ce conteneur (souvent bien plus large
   que les 760px de .article-body, ex: 1450px sur l'article Dublin) pour caler la légende
   sur la largeur de l'image ; on force la largeur réelle en !important pour ne pas déborder. */
.article-content figure,
.article-content .wp-caption,
.article-body figure,
.article-body .wp-caption {
  max-width: 100% !important;
  width: auto !important;
  margin: 2rem 0;
}

.article-content figure img,
.article-content .wp-caption img,
.article-body figure img,
.article-body .wp-caption img {
  margin: 0;
}

.article-content figcaption,
.article-content .wp-caption-text,
.article-body figcaption,
.article-body .wp-caption-text {
  font-style: italic;
  font-size: 0.85rem;
  color: #6B6B6B;
  text-align: center;
  margin-top: 0.5rem;
}

/* Galerie [gallery] (ex: Sentier des abeilles, Colore ta vie, Galeries Défago, Séjour à
   Dublin) — depuis add_theme_support('html5', array('gallery','caption')) dans functions.php,
   gallery_shortcode() n'imprime plus son <style>#gallery-X{...}</style> propre à chaque
   galerie ; on reprend ce style une fois pour toutes ici, pour toutes les galeries du site. */
.article-content .gallery,
.article-body .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
}

.article-content .gallery-item,
.article-body .gallery-item {
  margin: 0;
  flex: 1 1 260px;
}

.article-content .gallery-icon img,
.article-body .gallery-icon img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.75rem;
  margin: 0;
  display: block;
}

.article-content .gallery-caption,
.article-body .gallery-caption {
  font-style: italic;
  font-size: 0.8rem;
  color: #6B6B6B;
  text-align: center;
  margin-top: 0.4rem;
}

/* Galerie photo en slider (fiche jeu) — le script en fin de single.php enveloppe la
   galerie [gallery]/bloc Galerie insérée dans le contenu d'un article "jeux" dans ce
   .photo-slider, transformant la grille ci-dessus en un slider une-photo-à-la-fois avec
   flèches. N'affecte pas les galeries des autres catégories (recettes, blog...), qui
   gardent la grille normale. */
.photo-slider {
  position: relative;
  margin: 2rem 0;
}
.photo-slider .gallery {
  margin: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.photo-slider .gallery::-webkit-scrollbar {
  display: none;
}
.photo-slider .gallery-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.photo-slider .gallery-icon img {
  aspect-ratio: 4 / 3;
}
.photo-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #393939;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 2px 8px rgba(57, 57, 57, 0.25);
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
}
.photo-slider-arrow:hover {
  background: #FFFFFF;
}
.photo-slider-prev {
  left: 0.75rem;
}
.photo-slider-next {
  right: 0.75rem;
}

/* Encart Fiche Express / Infos pratiques */
.fiche-express {
  background: transparent;
  border-left: 4px solid #E7412A;
  padding: 1.25rem 1.5rem;
  border-radius: 0 1rem 1rem 0;
  margin-top: 40px;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

/* Avis de Valentine en liste à puces (fiche jeu, single.php) */
.avis-checklist ul {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.avis-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.avis-checklist-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #36964B;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

/* Bouton Proposer une pépite du header */
.btn-proposer {
  background-color: #E7412A !important;
  color: #FFFFFF !important;
}
.btn-proposer:hover {
  background-color: #C23A22 !important;
}

/* Variante contour du bouton "Proposer une pépite" (déclencheur, pas le bouton d'envoi du formulaire) */
.btn-proposer-outline {
  background-color: transparent !important;
  color: #E7412A !important;
  border: 2px solid #E7412A !important;
}
.btn-proposer-outline:hover {
  background-color: #E7412A !important;
  color: #FFFFFF !important;
}

/* Bouton secondaire neutre (2026-09-28, fin de la page À propos) : blanc à contour gris,
   rouge-orange plein au survol — à côté d'un bouton principal .btn-article */
.btn-outline {
  background-color: #FFFFFF !important;
  color: #393939 !important;
  border: 1px solid rgba(57, 57, 57, 0.15) !important;
}
.btn-outline:hover {
  background-color: #E7412A !important;
  color: #FFFFFF !important;
  border-color: #E7412A !important;
}

/* Boutons d'action des fiches de la carte interactive (2026-09-29 : GPS / Instagram / Article,
   grille + popup) : fond beige clair (même teinte que l'encadré durée/niveau/saison, bg-sand-muted/60),
   contour bleu, picto bleu, texte gris foncé — bleu plein au survol */
.btn-outline-blue {
  background-color: rgba(240, 232, 224, 0.6) !important;
  color: #393939 !important;
  border: 1px solid #3389CA !important;
}
.btn-outline-blue svg {
  color: #3389CA !important;
}
.btn-outline-blue:hover {
  background-color: #3389CA !important;
  color: #FFFFFF !important;
}
.btn-outline-blue:hover svg {
  color: #FFFFFF !important;
}

/* Infos d'un spot (2026-10-03) : rangée de chiffres distance / durée / dénivelé / âge + étiquettes
   saisons / poussette. Remplacent la description dans la vignette et la popup de la carte
   (spotInfosHtml() dans template-carte.php) et l'ancien encadré de single-spot.php
   (sieste_render_spot_infos() dans functions.php). Le nombre de colonnes est posé en style inline. */
.spot-stats {
  display: grid;
  border: 1px solid rgba(57, 57, 57, 0.10);
  border-radius: 0.75rem;
  background-color: rgba(240, 232, 224, 0.35);
}
.spot-stat {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 0.5rem 0.25rem;
  text-align: center;
  min-width: 0;
}
.spot-stat + .spot-stat {
  border-left: 1px solid rgba(57, 57, 57, 0.10);
}
.spot-stat svg {
  width: 16px;
  height: 16px;
  color: #3389CA;
}
.spot-stat b {
  font-size: 0.95rem;
  font-weight: 800;
  color: #393939;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.spot-stat span {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6B6B6B;
  line-height: 1.2;
}
.spot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.spot-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #393939;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  border: 1px solid rgba(57, 57, 57, 0.12);
  background-color: #FFFFFF;
}
.spot-tag svg {
  width: 14px;
  height: 14px;
  color: #3389CA;
  flex-shrink: 0;
}
.spot-tag.is-no svg {
  color: #6B6B6B;
}
/* Fiche complète : un peu plus grand */
.spot-infos-lg .spot-stat svg { width: 18px; height: 18px; }
.spot-infos-lg .spot-stat b { font-size: 1.1rem; }
.spot-infos-lg .spot-stat span { font-size: 0.8rem; }
.spot-infos-lg .spot-tag { font-size: 0.875rem; }

/* Pastilles des filtres « Plus de filtres » de la carte (2026-10-03), état actif via .btn-charcoal en JS */
.extra-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(57, 57, 57, 0.12);
  background-color: #FFFFFF;
  color: #393939;
  white-space: nowrap;
  transition: border-color .2s;
}
.extra-chip:hover {
  border-color: #393939;
}
.extra-chip svg {
  width: 14px;
  height: 14px;
  color: #3389CA;
}
.extra-chip.btn-charcoal svg {
  color: #FFFFFF !important;
}

/* Picto Lucide au trait plus épais (coche de la saison, 2026-09-29) — le CSS l'emporte sur l'attribut stroke-width du <svg> */
.icon-bold {
  stroke-width: 3.5 !important;
}

.icon-heart-header {
  color: #E7412A !important;
  fill: #E7412A !important;
}
/* Badge compteur des favoris */
.fav-badge {
  background-color: #e7412a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
/* Sans ça, le display:flex !important ci-dessus l'emporte sur .hidden : le badge restait affiché
   sans favori, avec « 0 » ou l'ancien chiffre (bug corrigé le 2026-10-03) */
.fav-badge.hidden {
  display: none !important;
}

/* ================= FICHE RECETTE (catégorie recettes, single.php) ================= */
/* Flex plutôt que grid 4 colonnes fixes (2026-09-24) : si un champ est vide (ex: pas de
   temps de cuisson), la case disparaît et les restantes se répartissent toute la largeur,
   au lieu de laisser une case vide grisée (couleur du fond/gap ci-dessous). */
.recette-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: #F0E8E0;
  border: 1px solid #F0E8E0;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 2rem;
}
.recette-meta-item {
  flex: 1 1 0;
  min-width: 0;
  background: #FFFFFF;
  padding: 0.9rem 0.5rem;
  text-align: center;
}
.recette-meta-item svg {
  color: #3389CA; /* test 2026-09-24 : bleu de la palette (était vert foncé #2C7B3E) */
  margin: 0 auto 0.4rem;
  display: block;
}
.recette-meta-item .val {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  color: #393939;
}
.recette-meta-item .lbl {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  color: #6B6B6B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 560px) {
  /* 2 cases par ligne sur mobile ; une case seule sur la dernière ligne prend toute la largeur */
  .recette-meta-item { flex: 1 1 calc(50% - 1px); }
}

/* Photo de la fiche jeu (FICHE JEU : IMAGE dans single.php) — même ratio 4:3 que le
   carrousel de galerie (.photo-slider .gallery-icon img ci-dessus) pour rester cohérent
   si Valentine ajoute ensuite une galerie de plusieurs photos ; même largeur que le
   tableau .recette-meta ci-dessus. */
.jeu-cover-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
  margin: 0 0 2rem;
}

.recette-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  .recette-split { grid-template-columns: 1fr; }
}

/* Mise en page fiche recette (2026-09-24) : photo en bandeau horizontal, puis 2 colonnes —
   à gauche caractéristiques + ingrédients, à droite les étapes (+ astuce). Remplace l'ancien
   .recette-split (ingrédients | photo 4:5), gardé ci-dessus mais plus utilisé.
   Mise à jour : les caractéristiques (.recette-meta) sont en ligne sous la photo, pleine
   largeur, hors des colonnes — la colonne de gauche ne contient plus que les ingrédients. */
.recette-hero-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
  margin: 0 0 2rem;
  box-shadow: 0 1px 2px rgba(57, 57, 57, 0.07), 0 8px 24px -12px rgba(57, 57, 57, 0.25);
}
.recette-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}
.recette-layout--single { grid-template-columns: minmax(0, 1fr); }
.recette-main > .recette-steps:first-child h3 { margin-top: 0 !important; }
/* Aligne le titre "Étapes" sur "Ingrédients", décalé par le padding-top de l'encadré gris
   .recette-ingredients (1.5rem) — pas utile quand les colonnes sont empilées (mobile) ni
   sans colonne ingrédients. */
.recette-layout:not(.recette-layout--single) .recette-main { padding-top: 1.5rem; }
@media (max-width: 720px) {
  .recette-layout { grid-template-columns: minmax(0, 1fr); }
  .recette-layout:not(.recette-layout--single) .recette-main { padding-top: 0; }
}

.recette-ingredients {
  background: #F2F2F0;
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.75rem;
}
.recette-ingredients h3,
.recette-steps h3 {
  color: #393939; /* gris foncé (2026-09-24), plutôt que la couleur des h3 d'article */
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}
.recette-ingredients ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.recette-ingredients li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.92rem;
  margin-bottom: 0;
}
.recette-ingredients li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #393939;
}
/* Sous-titre dans la liste d'ingrédients (ex: "Pour le pain") : gras, sans puce, espacé
   de la sous-liste précédente — voir FICHE RECETTE : INGRÉDIENTS dans single.php */
.recette-ingredients li.is-subtitle {
  padding-left: 0;
  font-weight: 700;
  color: #393939;
}
.recette-ingredients li.is-subtitle::before { content: none; }
.recette-ingredients li.is-subtitle:not(:first-child) { margin-top: 0.75rem; }

/*
 * Le vrai embed Instagram (blockquote + embed.js) a été essayé puis abandonné le 07.09 :
 * rendu vide/cassé en test (probablement bloqueur de pub, ou script qui ne traite pas la
 * blockquote de façon fiable). Carte cliquable auto-hébergée à la place : moins "vidéo
 * intégrée" au sens strict, mais garantie de ne jamais s'afficher vide — utilise la photo
 * à la une de l'article comme fond, ouvre Instagram au clic.
 */
.recette-video {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(160deg, #4a3b45 0%, #2c2430 55%, #1a1a1a 100%);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(57, 57, 57, 0.07), 0 8px 24px -12px rgba(57, 57, 57, 0.25);
}

/* Simple photo à côté des ingrédients (remplace l'ancien lien vidéo Instagram —
   le seul lien Instagram de la fiche recette reste le bouton .btn-instagram en bas
   de l'article, voir .recette-insta-secondary). Mêmes proportions que .recette-video
   ci-dessus pour ne pas changer la mise en page .recette-split. */
.recette-split .recette-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
  margin: 0;
  box-shadow: 0 1px 2px rgba(57, 57, 57, 0.07), 0 8px 24px -12px rgba(57, 57, 57, 0.25);
}
.recette-video .recette-video-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}
.recette-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.35) 100%);
}
.recette-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.recette-video-play svg {
  color: #1a1a1a;
  margin-left: 2px;
}
.recette-video:hover .recette-video-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.recette-video-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recette-video-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  padding: 3px 9px;
  border-radius: 999px;
}
.recette-video-tag svg {
  color: #fff;
}
.recette-video-text {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}

.recette-steps ol {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.recette-steps ol li {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.85rem;
  margin-bottom: 0;
}
.recette-steps .step-num {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #FBEAE6;
  color: #C23A22;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recette-steps .step-text {
  font-size: 0.94rem;
  padding-top: 0.3rem;
}

/* Variante "étapes non numérotées" (case décochée sur le champ ACF recette_etapes_numerotees) */
.recette-steps-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Pas d'espace entre lignes consécutives (1 retour à la ligne = interligne simple, comme
     du texte, ex: sous-titre gras + texte dessous) ; l'espace entre paragraphes vient de la
     ligne vide dans le champ ACF (li.has-gap ci-dessous). */
  gap: 0;
}
/* Depuis le 2026-09-24 : texte simple sans puce par défaut ; seules les lignes commençant
   par un tiret dans le champ ACF reçoivent .is-bullet (tiret retiré, puce verte affichée). */
.recette-steps-list li {
  position: relative;
  padding-left: 0;
  font-size: 0.94rem;
  margin-bottom: 0;
}
/* Ligne vide dans le champ ACF Étapes → espace supplémentaire au-dessus de la ligne suivante
   (mode non numéroté ; en mode numéroté la ligne vide sépare les étapes), voir 'spaced'
   dans sieste_get_recette_step_groups() */
.recette-steps-list li.has-gap {
  margin-top: 1rem;
}
/* Puce "suspendue" dans la marge (left négatif) : le texte des lignes à puce reste aligné
   sur celui des lignes sans puce, sans retrait. */
.recette-steps-list li.is-bullet {
  padding-left: 0;
}
.recette-steps-list li.is-bullet::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #393939;
}

.recette-insta-secondary {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(57, 57, 57, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.recette-insta-secondary p {
  font-size: 0.85rem;
  color: #6B6B6B;
  max-width: 38ch;
  margin: 0 !important;
}
.recette-insta-secondary a {
  text-decoration: none;
  white-space: nowrap;
}