/* Adaptations de la feuille de la maquette (site.css) au balisage des blocs WordPress.
   Règle : site.css reste la copie fidèle de la maquette validée, tout écart vit ici. */

/* ---------- Socle ---------- */
.wp-site-blocks { padding: 0; }
.wp-block-image { margin: 0; }
/* :where() pour ne pas battre les hauteurs imposées par site.css (héros, cartes, secrets) */
:where(.wp-block-image) img { height: auto; }
.wp-block-quote { margin: 0; padding: 0; border: 0; }
main { display: block; }

/* En-tête collant : c'est l'enveloppe de la partie de modèle qui colle, l'.entete est dedans */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 40; }
.entete { position: relative; }

/* Le menu mobile vit dans l'en-tête : il doit couvrir tout l'écran, barre d'admin comprise */
.menu-mobile { top: 0; }

/* ---------- Boutons : le bloc Bouton prend la forme des étiquettes ---------- */
.wp-block-buttons.boutons, .boutons.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.wp-block-button .wp-block-button__link {
  --fond: var(--kraft); --texte: var(--encre);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .65rem 1.5rem .65rem 2.6rem;
  background: var(--fond); color: var(--texte);
  font-family: var(--f-titre); font-size: 1.18rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2; text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  box-shadow: inset 0 0 0 1px rgba(29, 20, 11, .12);
  transition: transform .18s ease, background-color .18s ease;
}
.wp-block-button .wp-block-button__link::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%;
  background: radial-gradient(circle, var(--papier) 0 34%, #a07a3a 36% 62%, #6e5226 64% 100%);
}
.wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); color: var(--texte); background: var(--kraft-fonce); }
.wp-block-button.is-style-framboise .wp-block-button__link { --fond: var(--framboise); --texte: #fff; }
.wp-block-button.is-style-framboise .wp-block-button__link:hover { background: var(--framboise-fonce); }
.wp-block-button.is-style-clair .wp-block-button__link { --fond: #fbf6ec; --texte: var(--encre); }
.wp-block-button.is-style-clair .wp-block-button__link:hover { background: #fff; }

/* Héros sur ordinateur : la photo des trois vraies bouteilles (validée le 28/10) les place plus au centre
   que le visuel de la maquette. Elle commence donc là où finit le titre, qui reste sur le fond nuit. */
@media (min-width: 900px) {
  .heros__image { left: max(36%, calc((100% - var(--largeur)) / 2 + 600px)); }
  .heros__image img { object-position: 85% 50%; }
  .heros__image::after { background: linear-gradient(90deg, var(--nuit) 0%, rgba(46,18,23,.55) 12%, rgba(46,18,23,0) 34%); }
}
/* Entre 900 et 1180 px, la photo commence avant la fin d'un titre de 600 px : on le resserre */
@media (min-width: 900px) and (max-width: 1179px) {
  .heros__texte > div { max-width: 50vw; }
  .heros h1 { font-size: 3.6rem; }
}

/* Héros mobile (site.css vise .btn) */
@media (max-width: 899px) {
  .heros .boutons .wp-block-button { flex: 1 1 100%; }
  .heros .boutons .wp-block-button__link { width: 100%; }
}
@media (max-width: 899px) and (min-width: 560px) { .heros .boutons .wp-block-button { flex: 1 1 0; } }

/* Questions à Léa : une colonne de boutons alignés à gauche */
.wp-block-buttons.lea__questions { display: grid; gap: .7rem; margin-top: 1.4rem; }
.lea__questions .wp-block-button__link { justify-content: flex-start; text-align: left; width: 100%; }

/* ---------- Liens fléchés : un paragraphe .lien-fleche qui contient un lien ---------- */
p.lien-fleche { display: block; font-size: inherit; font-weight: inherit; }
.entete-section--ligne > p.lien-fleche { margin: 0; }
p.lien-fleche::after { content: none; }
p.lien-fleche a { font-weight: 700; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; font-size: 1.15rem; }
p.lien-fleche a::after { content: "→"; transition: transform .2s; }
p.lien-fleche a:hover::after { transform: translateX(3px); }

/* ---------- Remplaçants des styles en ligne de la maquette ---------- */
.titre-page { font-size: clamp(2.3rem, 6vw, 3.6rem); }
.section--haut { padding-top: 44px; }
.section--serre { padding: 56px 0; }
.entete-section--ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; max-width: none; }
.entete-section--ligne > :first-child { max-width: 640px; }
.entete-section--ligne .chapo { margin: 0; }
.entete-section--ligne > h2 { margin: 0; }

/* Histoire : le visuel est un groupe (bouteille en bloc Image + framboises posées dessus) */
.histoire__visuel { margin: 0; position: relative; }
/* Photo entière (2:3) : la nouvelle bouteille n'a pas de marge, le 4:5 de la maquette coupait le bouchon */
.histoire__visuel .wp-block-image img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; border-radius: 3px; box-shadow: var(--ombre); }
@media (min-width: 900px) { .histoire__visuel { max-width: 440px; justify-self: center; width: 100%; } }
.histoire__visuel .framboises { position: absolute; width: 38%; left: -6%; bottom: -12%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
/* La règle .histoire figure de site.css viserait aussi la figure du bloc Image : on l'annule dedans */
.histoire__visuel .wp-block-image { width: auto; max-width: none; margin: 0; }
@media (max-width: 899px) {
  .histoire__visuel { width: 78%; max-width: 340px; margin: 0 auto 1.4rem; }
  .histoire__visuel .framboises { left: -14%; bottom: -8%; }
}
.histoire > .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 3px; box-shadow: var(--ombre); }

.signature + p.lien-fleche { margin-top: 1.4rem; }
.conseils .etiquette p { margin: 0; }
.coordonnees .etiquette h2 { font-size: 2rem; }
.coordonnees p.lien-fleche { margin: 1.2rem 0 0; }
.chapo a[href*="#lea"] { font-weight: 700; text-decoration: none; white-space: nowrap; }
.chapo a[href*="#lea"]::after { content: " →"; }
.section--nuit .lea__texte-distinction { margin: 0; color: #f4ebe0; }
.section--nuit .lea__texte-distinction b { color: #fff; }

/* Les étapes de l'atelier : le texte est un groupe */
.etape .manuscrit { display: block; margin: 0; }

/* Les trois pas de la commande : des groupes au lieu d'une liste numérotée */
.pas { counter-reset: pas; }
.pas > .wp-block-group { list-style: none; position: relative; padding: 1.2rem 1.2rem 1.2rem 4.2rem; background: #fbf6ec; border-radius: 4px; box-shadow: 0 1px 0 rgba(29,20,11,.06); }
.pas > .wp-block-group::before { counter-increment: pas; content: counter(pas); position: absolute; left: 1.1rem; top: 1.05rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--framboise); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; }
.pas > .wp-block-group h3 { font-size: 1.35rem; margin-bottom: .2rem; }
.pas > .wp-block-group p { margin: 0; }
.pas + .boutons { margin-top: 1.6rem; }

/* Filtres du catalogue : .carte est en display:flex, qui l'emporte sur l'attribut hidden posé par le script */
.carte[hidden] { display: none; }

/* Fiche liqueur : les photos des bouteilles (validées le 28/10) vont presque du bord haut au bord bas.
   Tout recadrage coupe le bouchon ou le pied : la photo s'affiche donc entière, au format 2:3, et c'est le
   cadre qui se règle sur la hauteur disponible. */
.fiche__visuel:not(.fiche__visuel--etiquette) { justify-self: center; width: min(100%, calc(48vh * 2 / 3)); max-height: none; }
.fiche__visuel:not(.fiche__visuel--etiquette) img { aspect-ratio: 2 / 3; width: 100%; height: auto; max-height: none; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 900px) {
  .fiche__visuel:not(.fiche__visuel--etiquette) { width: min(100%, calc((100vh - 130px) * 2 / 3)); }
}

/* Fiche liqueur : le visuel vient d'un bloc dynamique, le corps du contenu de la fiche */
.fiche .wp-block-post-content > :first-child { margin-top: 0; }
.fiche .wp-block-post-content h2 { font-size: 1.45rem; margin-bottom: .4rem; }
/* Entre deux blocs de fiche, 1,4rem comme sur la maquette (là-bas les marges fusionnaient) */
.wp-block-post-content > .bloc-fiche > :last-child { margin-bottom: 0; }
.fiche .wp-block-list.accords { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Pages et articles de l'ancien site, affichés dans le nouveau thème ---------- */
.contenu-ancien { padding: 44px 0 72px; }
.contenu-ancien .conteneur { max-width: 820px; }
.contenu-ancien h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.contenu-ancien .date { color: var(--sepia); font-size: 1.05rem; margin-bottom: 1.4rem; }
.contenu-ancien img { border-radius: 3px; }
.contenu-ancien table { border-collapse: collapse; width: 100%; }
.contenu-ancien td, .contenu-ancien th { border-top: 1px solid rgba(139,30,47,.22); padding: .5rem .4rem; text-align: left; }
.liste-articles { display: grid; gap: 1.4rem; }
.liste-articles .wp-block-post { background: #fbf6ec; padding: 1.4rem 1.6rem; border-radius: 4px; box-shadow: 0 1px 0 rgba(29,20,11,.06); list-style: none; }
.liste-articles .wp-block-post-title { font-size: 1.7rem; margin-bottom: .3rem; }
.liste-articles .wp-block-post-title a { color: var(--encre); text-decoration: none; }
.wp-block-post-template.liste-articles { padding: 0; margin: 0; }
.wp-block-query-pagination { margin-top: 2rem; display: flex; gap: 1rem; font-weight: 700; }

/* ---------- Éditeur : rien ne reste invisible en attendant l'animation ---------- */
.block-editor-block-list__layout .apparait, .editor-styles-wrapper .apparait { opacity: 1; transform: none; }

/* ---------- Distinctions et presse : diplômes et article, cliquables (28/10/2026) ---------- */
.documents { display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .documents { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; } }
.document { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--sepia); background: #fbf6ec; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 rgba(29,20,11,.06), var(--ombre); transition: transform .25s ease; min-width: 0; padding-bottom: 1.1rem; }
.document:hover { transform: translateY(-3px); color: var(--sepia); }
.document img { width: 100%; height: 230px; object-fit: cover; object-position: 50% 0; border-bottom: 3px double var(--framboise); margin-bottom: .6rem; }
.document--presse img { object-fit: contain; background: #fff; } /* le titre de l'article entier */
.document--diplome img { object-position: 50% 74%; } /* le nom de la maison et la liqueur, pas l'en-tête */
.document > span, .document > b { padding: 0 1.1rem; }
.document b { font-size: 1.35rem; color: var(--encre); line-height: 1.15; }
.document__type { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--framboise); }
.document__type .medaille { width: 46px; height: 46px; font-size: .68rem; }
.document__lien { margin-top: auto; padding-top: .5rem; font-weight: 700; color: var(--framboise); }
.document__lien::after { content: " →"; }
.medaille--presse { background: radial-gradient(circle at 35% 30%, #f6efe3, #cdbfae 55%, #8f806f); }
.section--nuit .lea__texte-distinction a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }