/*
Theme Name: Lumïe by Sév
Theme URI: https://lumiebysev.com
Author: Lumïe by Sév
Description: Thème bloc sur mesure de Lumïe by Sév — bougies et fondants coulés à la main. Issu de la maquette validée (méthode Claude to WordPress).
Version: 1.1.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lumie
Tags: block-theme, full-site-editing, e-commerce
*/

/* Palette imposée par la cliente : rose #F3C7E4, or #A09005, rose foncé #E20B7E.
   Ivoire relevé sur la référence (bande FAQ) : #FEFEF1. */

:root {
  --rose: #F3C7E4;
  --or: #A09005;
  --or-clair: #F2DC8A;
  --framboise: #E20B7E;
  --ivoire: #FEFEF1;
  --creme: #FFF8F3;

  --sans: 'Jost', 'Futura', system-ui, sans-serif;
  --script: 'Pinyon Script', cursive;
  --serif: 'Marcellus', Georgia, serif;

  --rayon: 14px;
  --colonne: 720px;
  --souple: cubic-bezier(.2, .8, .2, 1);

  --annonce-h: 36px;
  --barre-h: 92px;
  --logo-l: 180px;

  /* icônes : masques SVG (substitution n° 1 de la méthode) */
  --i-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-compte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
  --i-sac: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");
  /* logos officiels des réseaux (glyphes pleins, demandés par la cliente) */
  --i-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.4' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='12' cy='12' r='4.4' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='17.45' cy='6.55' r='1.3'/%3E%3C/svg%3E");
  --i-tiktok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 27 27'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
  --i-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M13.5 21.5v-7.6h2.55l.4-3h-2.95V9c0-.87.25-1.46 1.5-1.46h1.6V4.86c-.28-.04-1.22-.12-2.32-.12-2.3 0-3.88 1.4-3.88 3.98v2.18H7.8v3h2.6v7.6z'/%3E%3C/svg%3E");
  --i-main: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c2.5 3 4 5.2 4 7.5a4 4 0 0 1-8 0C8 8.2 9.5 6 12 3z'/%3E%3Cpath d='M8 21h8M10 17.5h4M12 14.5v3'/%3E%3C/svg%3E");
  --i-feuille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13 14-14-1 9-6 14-14 14z'/%3E%3Cpath d='M5 19l7-7'/%3E%3C/svg%3E");
  --i-camion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.6'/%3E%3Ccircle cx='17' cy='17.5' r='1.6'/%3E%3C/svg%3E");
  --i-cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E");
}

/* ---------- Bases ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rose);
  color: var(--or);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; } /* height:auto obligatoire : sinon l'attribut height des blocs image l'emporte sur aspect-ratio */
video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; hyphens: none; text-wrap: balance; }
p { margin: 0; }

/* Gutenberg ajoute des marges entre blocs frères. La neutralisation est faite dans
   theme.json (blockGap 0px) ; ici seulement un filet À SPÉCIFICITÉ NULLE, pour ne
   jamais écraser les marges des composants (méthode, blocs-gutenberg.md). */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image, figure.wp-block-video, figure.wp-block-gallery { margin: 0; }

@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cadre { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.titre-script {
  font-family: var(--script);
  font-size: clamp(54px, 6.4vw, 92px);
  line-height: 1.15;
  color: var(--framboise);
  text-align: center;
}
.titre-clair { color: var(--creme); }

/* =====================================================================
   En-tête
   ===================================================================== */

.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: calc(var(--annonce-h) * -1);   /* le bandeau défile avec la page, la barre reste */
  z-index: 50;
}
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(32px - var(--annonce-h)); }

/* Bandeau défilant : app.js double le paragraphe dans une piste animée */
.entete .annonce {
  height: var(--annonce-h);
  overflow: hidden;
  background: var(--framboise);
  color: var(--creme);
}
.annonce-piste { display: flex; width: max-content; animation: defile 46s linear infinite; }
.annonce:hover .annonce-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
.entete .annonce-texte {
  flex-shrink: 0;
  padding-left: 22px;
  white-space: nowrap;
  line-height: var(--annonce-h);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--creme);
}
.entete .annonce-texte strong { margin: 0 20px; font-weight: 400; letter-spacing: 0; color: var(--or-clair); }

/* Barre — symétrique autour du médaillon :
   Connexion · Accueil · Photo / Vidéo — médaillon — Boutique · Nous contacter · Panier */
.entete .entete-barre {
  --onglet-l: 132px;
  --colonnes-onglets: var(--onglet-l) var(--onglet-l) calc(var(--logo-l) + 28px) var(--onglet-l) var(--onglet-l);
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--colonnes-onglets) 1fr;
  column-gap: 14px;
  align-items: center;
  height: var(--barre-h);
  padding: 0 40px;
  background:
    radial-gradient(ellipse 300px 110px at 50% 100%, rgba(255, 255, 255, .6), transparent 70%),
    var(--rose);
  transition: height .5s var(--souple), background-color .4s, box-shadow .4s;
}
/* fil d'or sous la barre, parcouru par un reflet */
.entete .entete-barre::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1.5px;
  height: 1.5px;
  background:
    linear-gradient(90deg, transparent, #FFF6C8, transparent) no-repeat,
    linear-gradient(90deg, transparent, var(--or) 12%, var(--or) 88%, transparent);
  background-size: 30% 100%, 100% 100%;
  background-position: -40% 0, 0 0;
  animation: reflet 6s ease-in-out infinite;
}
@keyframes reflet { 0% { background-position: -40% 0, 0 0; } 55%, 100% { background-position: 140% 0, 0 0; } }

/* Connexion */
.entete-barre > .connexion { grid-row: 1; grid-column: 1; justify-self: start; animation: monte .8s var(--souple) both .2s; }
.entete .action a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--framboise);
  font-size: 14px;
  letter-spacing: .08em;
  text-decoration: none;
}
.entete .connexion a::before {
  content: '';
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: var(--i-compte) center / contain no-repeat;
  mask: var(--i-compte) center / contain no-repeat;
  transition: transform .3s var(--souple);
}

/* Navigation (bloc natif) : les onglets se rangent dans les colonnes de la barre */
.entete-barre > .wp-block-navigation.onglets { grid-row: 1; grid-column: 2 / 7; }
.entete .onglets .wp-block-navigation-item__content {
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  color: var(--framboise);
  font-size: 14px;
  letter-spacing: .08em;
  text-decoration: none;
}
.entete .onglets .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--framboise);
  transform: scaleX(0);
  transition: transform .4s var(--souple);
}
.entete .onglets .est-actif > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.entete .onglets .wp-block-navigation-item { animation: monte .8s var(--souple) both; }
.entete .onglets .wp-block-navigation-item:nth-child(2) { animation-delay: .06s; }
.entete .onglets .wp-block-navigation-item:nth-child(3) { animation-delay: .12s; }
.entete .onglets .wp-block-navigation-item:nth-child(4) { animation-delay: .18s; }

@media (min-width: 861px) {
  .entete-barre .onglets .wp-block-navigation__responsive-container:not(.is-menu-open),
  .entete-barre .onglets .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
  .entete-barre .onglets .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
  .entete-barre .onglets .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
    display: block;
    width: 100%;
    position: static;
    padding: 0;
    background: none;
  }
  .entete-barre .onglets .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    display: grid;
    grid-template-columns: var(--colonnes-onglets);
    column-gap: 14px;
    align-items: center;
    width: 100%;
  }
  .entete-barre .onglets .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { grid-column: 1; justify-self: center; }
  .entete-barre .onglets .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { grid-column: 2; justify-self: end; }   /* au plus près du médaillon, */
  .entete-barre .onglets .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { grid-column: 4; justify-self: start; } /* à égale distance des deux côtés */
  .entete-barre .onglets .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { grid-column: 5; justify-self: center; }
  .entete .onglets .wp-block-navigation__responsive-container-open { display: none !important; }
}

/* Le médaillon (logo du site) : il déborde de la barre et se pose sur la bannière */
/* le bloc « Compte client » que WooCommerce ajoute d'office ferait doublon avec Connexion */
.entete-barre > .wp-block-woocommerce-customer-account { display: none; }

.entete-barre > .wp-block-site-logo.logo {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 3;
  width: var(--logo-l);
  margin: 0;
  transform: translateX(-50%);
  transition: width .5s var(--souple), top .5s var(--souple);
  animation: apparition-logo 1.3s var(--souple) both .1s;
}
.entete .wp-block-site-logo.logo a { display: block; }
.entete .wp-block-site-logo.logo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* disque ivoire sous l'anneau : le logo est transparent à l'intérieur */
  background: radial-gradient(circle closest-side, var(--ivoire) 78.5%, transparent 79%);
  filter: drop-shadow(0 10px 18px rgba(150, 20, 70, .18));
  transition: transform .6s var(--souple);
}
/* halo de bougie qui respire derrière le médaillon */
.entete .wp-block-site-logo.logo::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 190, .95) 0 38%, rgba(242, 220, 138, .45) 56%, transparent 71%);
  animation: souffle 3.8s ease-in-out infinite alternate;
}
@keyframes souffle { from { transform: scale(.94); opacity: .55; } to { transform: scale(1.1); opacity: 1; } }
@keyframes apparition-logo {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.72); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Mini-panier WooCommerce */
.entete-barre > .panier { grid-row: 1; grid-column: 7; justify-self: end; animation: monte .8s var(--souple) both .26s; }
.entete .panier .wc-block-mini-cart__button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--framboise);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .08em;
  cursor: pointer;
}
.entete .panier .wc-block-mini-cart__button::after { content: 'Panier'; order: -1; }
.entete .panier .wc-block-mini-cart__quantity-badge { display: flex; align-items: center; gap: 8px; }
.entete .panier .wc-block-mini-cart__icon { width: 22px; height: 22px; color: var(--framboise); }
.entete .panier .wc-block-mini-cart__badge {
  position: static;
  min-width: 20px; height: 20px;
  margin: 0;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--framboise) !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  transform: none;
}

/* État condensé, au défilement */
.entete.compacte .entete-barre {
  height: 70px;
  background-color: rgba(243, 199, 228, .86);
  background-image: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 14px 30px -18px rgba(150, 20, 80, .35);
}
.entete.compacte .entete-barre > .wp-block-site-logo.logo { width: 88px; top: 4px; }

/* =====================================================================
   Boutons : remplissage qui glisse + reflet de lumière au survol
   ===================================================================== */

.wp-block-button.bouton-verre .wp-block-button__link,
.wp-block-button.filtre .wp-block-button__link,
.woocommerce ul.products li.product .button,
.wp-block-button.lien-reseau {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wp-block-button.bouton-verre .wp-block-button__link::before,
.woocommerce ul.products li.product .button::before,
.wp-block-button.lien-reseau::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform .6s var(--souple);
}
.wp-block-button.bouton-verre .wp-block-button__link::after,
.woocommerce ul.products li.product .button::after,
.wp-block-button.lien-reseau::after {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%;
  left: -80%;
  width: 45%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-22deg);
}
@media (hover: hover) {
  .wp-block-button.bouton-verre .wp-block-button__link:hover::after,
  .woocommerce ul.products li.product .button:hover::after,
  .wp-block-button.lien-reseau:hover::after { left: 140%; transition: left 1s var(--souple); }
}

/* Bouton principal en verre */
.wp-block-buttons.hero-boutons { display: flex; justify-content: center; animation: monte 1.1s var(--souple) both .65s; }
.wp-block-button.bouton-verre { position: relative; display: inline-block; }
.wp-block-button.bouton-verre .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  padding: 15px 40px;
  border: 1.5px solid rgba(255, 248, 243, .9);
  border-radius: var(--rayon);
  background: rgba(226, 11, 126, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 17px;
  letter-spacing: .05em;
  text-decoration: none;
  box-shadow: 0 12px 30px -14px rgba(60, 10, 35, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .45s var(--souple), box-shadow .45s, border-color .45s;
}
.wp-block-button.bouton-verre .wp-block-button__link::before {
  background: linear-gradient(110deg, var(--framboise), #F25AA8);
  transform: scaleX(0);
  transform-origin: left center;
}
/* la flèche apparaît au survol */
.wp-block-button.bouton-verre::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  z-index: 2;
  width: 20px; height: 20px;
  background: var(--creme);
  -webkit-mask: var(--i-fleche) center / contain no-repeat;
  mask: var(--i-fleche) center / contain no-repeat;
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: opacity .3s, transform .45s var(--souple);
  pointer-events: none;
}
@media (hover: hover) {
  .wp-block-button.bouton-verre:hover .wp-block-button__link {
    transform: translateY(-3px);
    border-color: var(--or-clair);
    box-shadow: 0 20px 40px -16px rgba(226, 11, 126, .75), 0 0 0 6px rgba(255, 248, 243, .12);
  }
  .wp-block-button.bouton-verre:hover .wp-block-button__link::before { transform: scaleX(1); }
  .wp-block-button.bouton-verre:hover::after { opacity: 1; transform: translate(0, calc(-50% - 3px)); }
}

/* =====================================================================
   Hero vidéo
   ===================================================================== */

.wp-block-group.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #6b5550;
  padding: calc(var(--logo-l) - var(--barre-h) + 34px) 40px 84px;
}
/* ambiance floue : l'image fixe, puis la vidéo clonée par app.js par-dessus */
.wp-block-group.hero::before, .hero-ambiance {
  content: '';
  position: absolute;
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  max-width: none;
  object-fit: cover;
  filter: blur(46px) saturate(1.35) brightness(.8);
  z-index: -2;
}
.wp-block-group.hero::before { background: url(assets/img/lumie-poster.jpg) center / cover; z-index: -3; }
.wp-block-group.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 70% at 25% 50%, rgba(90, 20, 55, .28), transparent 70%),
    linear-gradient(120deg, rgba(226, 11, 126, .16), rgba(243, 199, 228, .10) 55%, rgba(90, 20, 55, .22));
}
.hero-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
}
.hero-texte { text-align: center; }

/* « LUMÏE » en capitales fines, « by Sév » signé à l'or par-dessus */
.wp-block-heading.hero-titre {
  display: inline-flex;   /* ajusté à « LUMÏE » : la signature s'aligne sur la fin du mot */
  flex-direction: column;
  align-items: center;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(84px, 10.5vw, 156px);
  line-height: .9;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 248, 243, .96);
  text-shadow: 0 6px 40px rgba(60, 15, 35, .25);
  animation: monte 1.1s var(--souple) both .35s;
}
.wp-block-heading.hero-titre em {
  align-self: flex-end;
  margin: -.36em -.2em 0 0;
  padding: .05em .15em .12em .12em;   /* laisse respirer les boucles de la calligraphie */
  font-family: var(--script);
  font-size: clamp(52px, 5.8vw, 88px);
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  background: linear-gradient(100deg, var(--or-clair) 0%, #FFF6D2 15%, #E2C25A 32%, var(--or) 45%, #F7E7A1 60%, #FFF6D2 75%, #D9B84A 90%, var(--or-clair) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 222, 140, .35)) drop-shadow(0 3px 10px rgba(50, 10, 30, .5));
  animation: signature 2s var(--souple) both 1s, chatoiement 8s linear infinite 3s;
}
/* « Lumïe » est en <strong> (format natif) pour porter la compensation de l'espacement de la dernière lettre */
.wp-block-heading.hero-titre strong { font-weight: inherit; margin-right: -.06em; }

@keyframes signature { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-20% -10% -20% 0); } }
@keyframes chatoiement { to { background-position: -220% 0; } }

.hero-devise {
  margin: 22px 0 44px;
  font-family: var(--script);
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.2;
  color: var(--creme);
  text-wrap: balance;
  animation: monte 1.1s var(--souple) both .5s;
}

/* La vidéo nette, encadrée comme un tableau */
.wp-block-video.hero-cadre {
  position: relative;
  justify-self: center;
  width: min(520px, 100%);
  aspect-ratio: 1;
  margin: 0;
  animation: cadre 1.4s var(--souple) both .3s;
}
.wp-block-video.hero-cadre video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 50px 90px -40px rgba(40, 8, 24, .75), 0 0 0 1px rgba(255, 248, 243, .25);
}

/* bouton pause / lecture ajouté par app.js sur les vidéos en boucle */
.video-controle {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1.5px solid rgba(255, 248, 243, .75);
  border-radius: 50%;
  background: rgba(60, 15, 35, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--creme);
  cursor: pointer;
  opacity: .8;
  transition: opacity .3s, background .3s;
}
.video-controle::before {
  content: '';
  width: 14px; height: 16px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.video-controle.en-pause::before {
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent currentColor;
}
.video-controle:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; opacity: 1; }
@media (hover: hover) { .video-controle:hover { opacity: 1; background: rgba(226, 11, 126, .55); } }

/* =====================================================================
   Histoire
   ===================================================================== */

.wp-block-group.histoire { background: var(--rose); padding: 120px 24px 0; text-align: center; }
.histoire-accroche {
  max-width: 640px;
  margin: 34px auto 44px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
}
.histoire-texte { max-width: 660px; margin: 0 auto; }
.histoire-texte p { margin: 0 0 1.3em; font-family: var(--serif); font-size: 20px; line-height: 1.85; }
.histoire-texte p:last-child { margin-bottom: 0; }
/* filet doré avec étoile, entre l'histoire et les best-sellers (couche décorative) */
.wp-block-group.histoire::after {
  content: '✦';
  display: block;
  max-width: 460px;
  margin: 90px auto 0;
  color: var(--or);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  background:
    linear-gradient(90deg, transparent, var(--or)) left center / calc(50% - 22px) 1px no-repeat,
    linear-gradient(90deg, var(--or), transparent) right center / calc(50% - 22px) 1px no-repeat;
}

/* =====================================================================
   Cartes produits (boucle WooCommerce : best-sellers, boutique, suggestions)
   ===================================================================== */

.wp-block-group.best-sellers { background: var(--rose); padding: 90px 40px 120px; }

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1280px;
  margin: 64px auto 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  text-align: left;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  color: var(--or);
  text-decoration: none;
}
.wp-site-blocks ul.products li.product .cadre-photo {
  grid-column: 1 / -1;
  display: block;
  margin: 0 0 16px;
  aspect-ratio: 1;
  border: 1.5px solid var(--framboise);
}
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 !important;
  border: 0;
  box-shadow: none;
  transition: transform .8s var(--souple), filter .6s;
}
.wp-site-blocks ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 14px;
  padding: 4px 0;   /* hauteur de ligne de la maquette (nom de produit cliquable) */
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--or);
}
.wp-site-blocks ul.products li.product .price {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 400;
  color: var(--or);
  white-space: nowrap;
}
.woocommerce ul.products li.product .onsale, .woocommerce span.onsale {
  top: 12px; left: 12px; right: auto;
  min-width: 0; min-height: 0;
  margin: 0;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--framboise);
  color: #fff;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* bouton « Ajouter au panier » : contour, le rose foncé monte depuis le bas */
.wp-site-blocks ul.products li.product .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 10px 16px;
  border: 1.5px solid var(--framboise);
  border-radius: 8px;
  background: transparent;
  color: var(--framboise);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;   /* comme le bouton de la maquette */
  letter-spacing: .05em;
  text-align: center;
  transition: color .45s, transform .45s var(--souple), box-shadow .45s;
}
.woocommerce ul.products li.product .button::before {
  background: linear-gradient(110deg, var(--framboise), #F04B9E);
  transform: scaleY(0);
  transform-origin: bottom center;
}
.wp-site-blocks ul.products li.product .button.loading { opacity: .7; }
.wp-site-blocks ul.products li.product .button.added::after { content: none; }
.woocommerce ul.products li.product .added_to_cart {
  display: block;
  margin-top: 8px;
  padding: 6px 0;
  color: var(--framboise);
  font-size: 13px;
  text-align: center;
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .wp-site-blocks ul.products li.product .button:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(226, 11, 126, .75);
  }
  .woocommerce ul.products li.product .button:hover::before { transform: scaleY(1); }
  .woocommerce ul.products li.product a:hover img { filter: brightness(1.05); transform: scale(1.06); }
}

/* =====================================================================
   FAQ — blocs « Détails » natifs, deux colonnes indépendantes
   ===================================================================== */

.wp-block-group.faq { background: var(--ivoire); padding: 110px 24px 130px; }
.faq-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 22px 32px;
  max-width: 1180px;
  margin: 56px auto 0;
}
.faq-colonne { display: flex; flex-direction: column; gap: 22px; }
/* Chaque question : un éclat doré parcourt la bordure au survol et tant qu'elle est ouverte,
   la pastille du « + » se remplit et tourne, la réponse se déplie en douceur.
   Les couleurs sont des propriétés enregistrées : elles passent de l'une à l'autre en fondu. */
@property --fond-faq { syntax: '<color>'; inherits: true; initial-value: #FEFEF1; }
@property --eclat { syntax: '<color>'; inherits: true; initial-value: #E20B7E; }
@property --eclat-tete { syntax: '<color>'; inherits: true; initial-value: #E20B7E; }
@property --rond-faq { syntax: '<length>'; inherits: true; initial-value: 0px; }

details.faq-item {
  --fond-faq: var(--ivoire);
  --eclat: var(--framboise);
  --eclat-tete: var(--framboise);
  --rond-faq: 0px;
  --barre: var(--framboise);
  --pivot: 0deg;
  --centre-x: 34px;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  background:
    linear-gradient(var(--fond-faq), var(--fond-faq)) padding-box,
    conic-gradient(from var(--tour), var(--framboise) 0 58%, var(--eclat) 78%, var(--eclat-tete) 87%, var(--framboise) 94%) border-box;
  interpolate-size: allow-keywords;
  animation: tour-cadre 4.5s linear infinite paused;
  transition: box-shadow .45s, translate .45s var(--souple), --fond-faq .4s, --eclat .5s, --eclat-tete .5s, --rond-faq .5s var(--souple);
}
details.faq-item[open] {
  --fond-faq: #FFFDF6;
  --eclat: var(--or-clair);
  --eclat-tete: #FFF3C4;
  --rond-faq: 15px;
  --barre: #FFF;
  animation-play-state: running;
  box-shadow: 0 16px 30px -20px rgba(226, 11, 126, .65);
}
@media (hover: hover) {
  details.faq-item:hover {
    --fond-faq: #FFFDF6;
    --eclat: var(--or-clair);
    --eclat-tete: #FFF3C4;
    --rond-faq: 15px;
    --barre: #FFF;
    --pivot: 90deg;
    animation-play-state: running;
    translate: 0 -2px;
    box-shadow: 0 16px 30px -20px rgba(226, 11, 126, .65);
  }
}
details.faq-item:has(summary:focus-visible) { --eclat: var(--or-clair); --eclat-tete: #FFF3C4; animation-play-state: running; }

details.faq-item summary {
  position: relative;
  display: flex;          /* centre verticalement le texte quand app.js égalise les hauteurs */
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 12px 60px 12px 24px;
  color: var(--framboise);
  font-size: 16px;
  line-height: 1.5;
  /* la pastille du « + » : un anneau fin, et un disque framboise qui grandit depuis le centre */
  background:
    radial-gradient(circle at calc(100% - var(--centre-x)) 50%, var(--framboise) var(--rond-faq), transparent calc(var(--rond-faq) + .5px)) no-repeat,
    radial-gradient(circle at calc(100% - var(--centre-x)) 50%, transparent 14.5px, rgba(226, 11, 126, .35) 15px 16px, transparent 16.5px) no-repeat;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary:focus-visible { outline: 2px solid var(--framboise); outline-offset: 4px; border-radius: 10px; }
/* le « + » de la référence, en deux traits : un quart de tour au survol, il devient « − » une fois ouvert */
details.faq-item summary::before, details.faq-item summary::after {
  content: '';
  position: absolute;
  right: calc(var(--centre-x) - 8px); top: calc(50% - .75px);
  width: 16px; height: 1.5px;
  background: var(--barre);
  rotate: var(--pivot);
  transition: background-color .3s, rotate .6s var(--souple);
}
details.faq-item summary::after { rotate: calc(var(--pivot) + 90deg); }
details.faq-item[open] summary::before,
details.faq-item[open] summary::after { rotate: 180deg; }
details.faq-item p { margin: 0; padding: 0 60px 18px 24px; font-size: 15.5px; line-height: 1.7; color: var(--or); }
/* la réponse se déplie (navigateurs récents), puis son texte apparaît en fondu */
@supports (interpolate-size: allow-keywords) {
  details.faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .55s var(--souple), content-visibility .55s allow-discrete;
  }
  details.faq-item[open]::details-content { block-size: auto; }
}
details.faq-item[open] > :not(summary) { animation: faq-reponse .6s var(--souple) both .08s; }
@keyframes faq-reponse { from { opacity: 0; translate: 0 -8px; filter: blur(3px); } }
details.faq-item p a { color: var(--framboise); }

/* =====================================================================
   Réseaux
   ===================================================================== */

.wp-block-group.reseaux { position: relative; padding: 130px 24px 150px; overflow: hidden; isolation: isolate; }
.wp-block-group.reseaux > .wp-block-image.reseaux-photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.wp-block-image.reseaux-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.wp-block-group.reseaux::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(90, 55, 65, .3); }
.reseaux-contenu { display: flex; flex-direction: column; gap: 22px; max-width: var(--colonne); margin: 0 auto; }
.reseaux-contenu .titre-script { margin-bottom: 28px; }
.wp-block-buttons.liens-reseaux { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
.wp-block-buttons.liens-reseaux > .wp-block-button.lien-reseau {
  width: 100%;
  margin: 0;
  border: 2px solid var(--creme);
  border-radius: var(--rayon);
  background: rgba(255, 248, 243, .06);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: box-shadow .45s, border-color .45s;
}
.wp-block-button.lien-reseau::before {
  background: linear-gradient(90deg, rgba(226, 11, 126, .55), rgba(226, 11, 126, .25));
  transform: scaleX(0);
  transform-origin: left center;
}
.wp-block-button.lien-reseau .wp-block-button__link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 22px 11px 24px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--creme);
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: .03em;
  text-align: left;
  text-decoration: none;
  transition: padding .5s var(--souple);
}
.wp-block-button.lien-reseau .wp-block-button__link::before,
.wp-block-button.lien-reseau .wp-block-button__link::after {
  content: '';
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.wp-block-button.lien-reseau .wp-block-button__link::before {
  width: 22px; height: 22px;
  -webkit-mask-image: var(--logo);
  mask-image: var(--logo);
  transition: transform .5s var(--souple);
}
.wp-block-button.lien-reseau .wp-block-button__link::after {
  width: 26px; height: 26px;
  margin-left: auto;
  -webkit-mask-image: var(--i-fleche);
  mask-image: var(--i-fleche);
  transition: transform .45s var(--souple);
}
/* Chaque réseau porte son logo et ses couleurs de marque ; les boutons les lisent. */
.wp-block-button.reseau-instagram {
  --logo: var(--i-instagram);
  --marque: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  --halo-marque: rgba(214, 36, 159, .5);
}
.wp-block-button.reseau-tiktok {
  --logo: var(--i-tiktok);
  --marque: #000;
  --halo-marque: rgba(254, 44, 85, .45);
}
.wp-block-button.reseau-facebook {
  --logo: var(--i-facebook);
  --marque: #0866FF;
  --halo-marque: rgba(8, 102, 255, .45);
}
@media (hover: hover) {
  .wp-block-buttons.liens-reseaux > .wp-block-button.lien-reseau:hover { border-color: var(--or-clair); box-shadow: 0 16px 34px -18px rgba(40, 8, 24, .8); }
  .wp-block-button.lien-reseau:hover::before { transform: scaleX(1); }
  .wp-block-button.lien-reseau:hover .wp-block-button__link { padding-left: 34px; }
  .wp-block-button.lien-reseau:hover .wp-block-button__link::before { transform: scale(1.15) rotate(-8deg); }
  .wp-block-button.lien-reseau:hover .wp-block-button__link::after { transform: translateX(6px); }
}

/* =====================================================================
   La lettre de Lumïe — bandeau d'inscription au-dessus du pied de page
   ===================================================================== */

.wp-block-group.lettre {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 90px 24px 84px;
  background:
    radial-gradient(ellipse 60% 80% at 12% 0%, rgba(226, 11, 126, .38), transparent 70%),
    radial-gradient(ellipse 50% 70% at 92% 100%, rgba(242, 220, 138, .16), transparent 70%),
    #4A1D33;
  color: var(--creme);
  text-align: center;
}
/* poussière d'or qui scintille doucement dans le fond */
.wp-block-group.lettre::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 30%, rgba(242, 220, 138, .9), transparent),
    radial-gradient(1px 1px at 26% 74%, rgba(255, 248, 243, .8), transparent),
    radial-gradient(1.6px 1.6px at 38% 16%, rgba(242, 220, 138, .7), transparent),
    radial-gradient(1.6px 1.6px at 68% 24%, rgba(242, 220, 138, .85), transparent),
    radial-gradient(1px 1px at 82% 66%, rgba(255, 248, 243, .7), transparent),
    radial-gradient(1.6px 1.6px at 56% 88%, rgba(242, 220, 138, .7), transparent),
    radial-gradient(1px 1px at 92% 20%, rgba(255, 248, 243, .6), transparent),
    radial-gradient(1px 1px at 6% 82%, rgba(242, 220, 138, .7), transparent);
  animation: scintille 4.5s ease-in-out infinite alternate;
}
@keyframes scintille { from { opacity: .3; } to { opacity: 1; } }

.lettre .lettre-surtitre { margin: 0 0 4px; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--or-clair); }
.wp-block-group.lettre .titre-script { margin: 0; font-size: clamp(46px, 5.4vw, 74px); color: var(--or-clair); text-shadow: 0 6px 30px rgba(20, 0, 10, .35); }
.lettre .lettre-intro { max-width: 520px; margin: 14px auto 34px; font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--creme); }

/* le champ et le bouton forment une seule pilule */
.lettre-formulaire { max-width: 560px; margin: 0 auto; }
.lettre-champ {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1.5px solid rgba(255, 248, 243, .55);
  border-radius: 999px;
  background: rgba(255, 248, 243, .08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color .35s, box-shadow .35s;
}
.lettre-champ:focus-within { border-color: var(--or-clair); box-shadow: 0 0 0 5px rgba(242, 220, 138, .15); }
.lettre-champ input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  border: 0;
  background: transparent;
  color: var(--creme);
  font: inherit;
  font-size: 16px;
}
.lettre-champ input[type="email"]:focus { outline: none; }
.lettre-champ input::placeholder { color: rgba(255, 248, 243, .62); }
.lettre-bouton {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex-shrink: 0;
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(110deg, var(--framboise), #F25AA8);
  color: #fff;
  font: inherit;
  font-size: 15px;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(226, 11, 126, .9);
  transition: transform .4s var(--souple), box-shadow .4s, opacity .3s;
}
.lettre-bouton::after {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%;
  left: -80%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-22deg);
}
@media (hover: hover) {
  .lettre-bouton:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(226, 11, 126, .95); }
  .lettre-bouton:hover::after { left: 140%; transition: left 1s var(--souple); }
}
.lettre-bouton:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.lettre-bouton:disabled { opacity: .7; cursor: wait; }
.lettre-message { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--or-clair); }
.lettre-message:empty { display: none; }
.lettre-message.est-reussi { color: var(--creme); }
.lettre-message.est-reussi::before { content: '✦ '; color: var(--or-clair); }
.lettre .lettre-mention { max-width: 520px; margin: 18px auto 0; font-size: 12.5px; line-height: 1.7; color: rgba(255, 248, 243, .72); }
.lettre .lettre-mention a { color: var(--or-clair); text-underline-offset: 3px; }
/* champ piège pour les robots, hors de l'écran */
.lettre-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tableau des cookies (WPConsent) sur la page Confidentialité : tient dans l'écran,
   les noms de cookies se coupent au besoin. */
.legal .wpconsent-cookie-policy-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 10px 0 28px;
  font-size: 14px;
  line-height: 1.55;
}
.legal .wpconsent-cookie-policy-table th,
.legal .wpconsent-cookie-policy-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(226, 11, 126, .2);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.legal .wpconsent-cookie-policy-table th { color: var(--framboise); font-weight: 500; letter-spacing: .04em; }
.legal .wpconsent-cookie-policy-table th:first-child { width: 32%; }
.legal .wpconsent-cookie-policy-table th:last-child { width: 24%; }

/* =====================================================================
   Pied de page
   ===================================================================== */

.wp-block-group.pied { background: var(--rose); padding: 80px 24px 50px; text-align: center; }
/* comme la maquette : logo en ligne, avec l'espace de ligne sous l'image */
.pied .wp-block-site-logo.logo-pied { display: block; margin: 0 auto; line-height: 1.6; text-align: center; }
.pied .wp-block-site-logo.logo-pied a { display: inline-block; line-height: 1.6; }
.pied .wp-block-site-logo.logo-pied img { display: block; }
.pied .wp-block-site-logo.logo-pied img {
  width: 150px;
  height: auto;
  background: radial-gradient(circle closest-side, var(--ivoire) 78.5%, transparent 79%);
}
.pied .pied-contact { margin: 22px 0 30px; font-size: 15px; line-height: 1.9; }
.pied .pied-contact a, .pied .pied-legal a { color: var(--or); text-decoration: none; }
.pied .wp-block-navigation.pied-liens .wp-block-navigation__container { justify-content: center; flex-wrap: wrap; gap: 10px 34px; }
.pied .pied-liens .wp-block-navigation-item__content { color: var(--framboise); font-size: 14px; letter-spacing: .06em; text-decoration: none; }
.pied .pied-legal {
  margin: 36px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(226, 11, 126, .25);
  font-size: 13px;
  line-height: 2;
}
@media (hover: hover) {
  .pied .pied-contact a:hover, .pied .pied-legal a:hover, .pied .pied-liens .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* =====================================================================
   Bandeau des pages internes
   ===================================================================== */

.wp-block-group.bandeau-page {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--logo-l) - var(--barre-h) + 56px) 24px 84px;
  background: #6b5550;
  text-align: center;
}
.wp-block-group.bandeau-page::before {
  content: '';
  position: absolute;
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  z-index: -2;
  background: url(assets/img/lumie-poster.jpg) center / cover;
  filter: blur(34px) saturate(1.3) brightness(.78);
}
.wp-block-group.bandeau-boutique::before { background-image: url(assets/img/bougie-petales-rose.jpg); }
.wp-block-group.bandeau-galerie::before { background-image: url(assets/img/dragonne-atelier.jpg); }
.wp-block-group.bandeau-contact::before { background-image: url(assets/img/dragonne-lecture.jpg); }
.wp-block-group.bandeau-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(226, 11, 126, .18), rgba(243, 199, 228, .08) 55%, rgba(90, 20, 55, .3));
}
.wp-block-group.bandeau-court { padding-bottom: 64px; }
.bandeau-contenu { max-width: 760px; margin: 0 auto; animation: monte 1s var(--souple) both .2s; }
.bandeau-page .titre-script { text-shadow: 0 6px 30px rgba(50, 10, 30, .3); }
.bandeau-page .bandeau-intro {
  max-width: 620px;
  margin: 14px auto 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--creme);
}
.bandeau-page .fil-ariane,
.bandeau-page .fil-ariane .woocommerce-breadcrumb {
  margin: 0 0 6px;
  padding: 0;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 248, 243, .85);
}
.bandeau-page .fil-ariane a { color: inherit; text-decoration: none; }
.bandeau-page .fil-ariane strong, .fil-etoile { margin: 0 8px; font-weight: 400; color: var(--or-clair); }
@media (hover: hover) { .bandeau-page .fil-ariane a:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* =====================================================================
   Filtres (boutique, galerie)
   ===================================================================== */

.wp-block-buttons.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wp-block-buttons.filtres > .wp-block-button.filtre { margin: 0; }
.wp-block-button.filtre .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1.5px solid var(--framboise);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--framboise);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s, color .3s, box-shadow .3s;
}
.wp-block-button.filtre.actif .wp-block-button__link {
  background: var(--framboise);
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(226, 11, 126, .8);
}
@media (hover: hover) { .wp-block-button.filtre:not(.actif) .wp-block-button__link:hover { background: rgba(226, 11, 126, .08); } }
.masque { display: none !important; }
.apparait { animation: monte .55s var(--souple) both; }

/* =====================================================================
   Boutique (modèle archive-product)
   ===================================================================== */

.wp-block-group.boutique { background: var(--rose); padding: 80px 40px 120px; }
.boutique .woocommerce-products-header,
.boutique .woocommerce-breadcrumb { display: none; }  /* le titre et le fil d'Ariane sont dans le bandeau */
.boutique .woocommerce-notices-wrapper:empty { display: none; }
.boutique .woocommerce-result-count, .boutique .woocommerce-ordering { margin: 0; }
.boutique .lumie-outils {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  margin: 34px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(160, 144, 5, .35);
}
.wp-site-blocks .boutique .woocommerce-result-count { float: none; margin: 0; font-size: 14px; letter-spacing: .06em; color: var(--or); }
.wp-site-blocks .boutique .woocommerce-ordering { float: none; margin: 0; }
.wp-site-blocks .boutique .woocommerce-ordering select {
  min-height: 44px;
  padding: 8px 40px 8px 16px;
  border: 1.5px solid var(--framboise);
  border-radius: var(--rayon);
  background: var(--ivoire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E20B7E' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
  color: var(--or);
  font: 15px var(--sans);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.boutique .woocommerce-info, .boutique .woocommerce-no-products-found {
  max-width: 720px;
  margin: 48px auto 0;
  text-align: center;
}
.wp-site-blocks nav.woocommerce-pagination { margin-top: 56px; }
.wp-site-blocks nav.woocommerce-pagination ul { border: 0; display: flex; justify-content: center; gap: 10px; }
.wp-site-blocks nav.woocommerce-pagination ul li { border: 0; }
.wp-site-blocks nav.woocommerce-pagination ul li a,
.wp-site-blocks nav.woocommerce-pagination ul li span {
  min-width: 44px; padding: 11px 14px;
  border: 1.5px solid var(--framboise); border-radius: var(--rayon);
  color: var(--framboise); background: transparent;
}
.wp-site-blocks nav.woocommerce-pagination ul li span.current { background: var(--framboise); color: #fff; }

.wp-block-group.reassurance { background: var(--ivoire); padding: 90px 40px; }
.reassurance-liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.reassurance-item::before {
  content: '';
  display: block;
  width: 36px; height: 36px;
  margin: 0 auto 16px;
  background: var(--framboise);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.reassurance-item.icone-main::before { -webkit-mask-image: var(--i-main); mask-image: var(--i-main); }
.reassurance-item.icone-feuille::before { -webkit-mask-image: var(--i-feuille); mask-image: var(--i-feuille); }
.reassurance-item.icone-camion::before { -webkit-mask-image: var(--i-camion); mask-image: var(--i-camion); }
.reassurance-item.icone-cadenas::before { -webkit-mask-image: var(--i-cadenas); mask-image: var(--i-cadenas); }
.reassurance-item .reassurance-titre {
  margin-bottom: 8px;
  color: var(--framboise);
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.reassurance-item p:not(.reassurance-titre) { font-size: 15px; line-height: 1.6; }

/* =====================================================================
   Fiche produit (modèle single-product, gabarit classique WooCommerce)
   ===================================================================== */

.wp-block-group.fiche {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--ivoire);
  padding: calc(var(--logo-l) - var(--barre-h) + 60px) 40px 0;
}
.fiche .woocommerce-breadcrumb {
  max-width: 1180px;
  margin: 0 auto 28px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or);
}
.fiche .woocommerce-breadcrumb a { color: var(--framboise); text-decoration: none; }
.fiche .fil-etoile { color: var(--framboise); }
.wp-site-blocks .fiche div.product {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: start;
  column-gap: 72px;
  max-width: 1180px;
  margin: 0 auto;
}
.wp-site-blocks .fiche div.product div.images.woocommerce-product-gallery {
  position: relative;
  grid-column: 1;
  float: none;
  width: auto;
  margin: 16px;
  opacity: 1 !important;
}
.wp-site-blocks .fiche div.product div.images img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1.5px solid var(--framboise);
}
.wp-site-blocks .fiche div.product div.images .woocommerce-product-gallery__trigger {
  top: 12px; right: 12px; z-index: 2;
  background: rgba(255, 254, 248, .9);
  border: 1px solid var(--framboise);
}
.wp-site-blocks .fiche div.product div.summary {
  grid-column: 2;
  float: none;
  width: auto;
  margin: 0;
  animation: monte 1s var(--souple) both .15s;
}
.wp-site-blocks .fiche div.product .product_title {
  margin: 0 0 4px;
  font-family: var(--script);
  font-size: clamp(48px, 5vw, 70px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--framboise);
}
.wp-site-blocks .fiche div.product p.price {
  margin: 0 0 22px;
  font-size: 26px;
  letter-spacing: .02em;
  color: var(--or);
}
.fiche .fiche-description { margin: 0 0 30px; }
.fiche .fiche-description p { margin: 0 0 1em; font-family: var(--serif); font-size: 18px; line-height: 1.8; }
.wp-site-blocks .fiche div.product form.cart { display: flex; gap: 14px; margin: 0 0 22px; }
.wp-site-blocks .fiche div.product form.cart::before, .wp-site-blocks .fiche div.product form.cart::after { content: none; }
.wp-site-blocks .fiche .quantity {
  display: inline-flex;
  align-items: center;
  float: none;
  margin: 0;
  border: 1.5px solid var(--framboise);
  border-radius: var(--rayon);
  background: #fff;
}
.wp-site-blocks .fiche .quantity .qty {
  width: 56px;
  height: 52px;
  border: 0;
  background: none;
  color: var(--or);
  font: 17px var(--sans);
  text-align: center;
}
.wp-site-blocks .fiche .quantity .qty:focus { outline: none; }
.wp-site-blocks .fiche .quantity:focus-within { box-shadow: 0 0 0 4px rgba(226, 11, 126, .12); }
.quantite-pas { width: 44px; height: 52px; border: 0; background: none; color: var(--framboise); font-size: 20px; cursor: pointer; }
.wp-site-blocks .fiche div.product form.cart .button.single_add_to_cart_button {
  flex: 1;
  float: none;
  min-height: 54px;
  border-radius: 8px;
  background: var(--framboise);
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .05em;
  box-shadow: 0 12px 24px -14px rgba(226, 11, 126, .7);
  transition: transform .45s var(--souple), box-shadow .45s, filter .3s;
}
@media (hover: hover) {
  .wp-site-blocks .fiche div.product form.cart .button.single_add_to_cart_button:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -14px rgba(226, 11, 126, .8);
  }
}
.fiche-garanties { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 30px; padding: 0; list-style: none; font-size: 14px; }
.fiche-garanties li::before { content: '✦'; margin-right: 8px; color: var(--framboise); font-size: 11px; }
.fiche-accordeons { display: flex; flex-direction: column; gap: 14px; }
.wp-site-blocks .fiche div.product .woocommerce-tabs { grid-column: 1 / -1; margin: 72px 0 0; }
.wp-site-blocks .fiche div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 24px; text-align: center; }
.wp-site-blocks .fiche div.product .woocommerce-tabs ul.tabs::before { border-color: rgba(226, 11, 126, .25); }
.wp-site-blocks .fiche div.product .woocommerce-tabs ul.tabs li { border-color: rgba(226, 11, 126, .3); background: var(--ivoire); border-radius: var(--rayon) var(--rayon) 0 0; }
.wp-site-blocks .fiche div.product .woocommerce-tabs ul.tabs li::before, .wp-site-blocks .fiche div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.wp-site-blocks .fiche div.product .woocommerce-tabs ul.tabs li a { color: var(--framboise); font-weight: 400; letter-spacing: .05em; }
.wp-site-blocks .fiche div.product .woocommerce-tabs .panel { max-width: 760px; margin: 0 auto; }
.wp-site-blocks .fiche div.product .woocommerce-tabs .panel h2 { font-family: var(--script); font-size: 40px; color: var(--framboise); text-align: center; margin-bottom: 16px; }
/* suggestions : bande rose pleine largeur */
.wp-site-blocks .fiche div.product section.related.products {
  position: relative;
  grid-column: 1 / -1;
  margin-top: 110px;
  padding: 100px 0 120px;
}
.wp-site-blocks .fiche div.product section.related.products::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--rose);
  z-index: -1;
}
.wp-site-blocks .fiche section.related.products > h2 {
  font-family: var(--script);
  font-size: clamp(54px, 6.4vw, 92px);
  line-height: 1.15;
  color: var(--framboise);
  text-align: center;
}

/* =====================================================================
   Photo & vidéo
   ===================================================================== */

.wp-block-group.video-page { background: var(--ivoire); padding: 100px 24px 110px; text-align: center; }
.wp-block-video.video-cadre { position: relative; width: min(560px, 100%); margin: 56px auto 0; }
.wp-block-video.video-cadre video { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 40px 70px -40px rgba(120, 20, 60, .6); }
.wp-block-video.video-cadre figcaption {
  max-width: 480px;
  margin: 40px auto 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--or);
}
.wp-block-video.video-cadre .video-controle { bottom: auto; top: calc(min(560px, 100%) - 58px); }

.wp-block-group.galerie { background: var(--rose); padding: 100px 40px 120px; }
.galerie .wp-block-buttons.filtres { margin-top: 40px; }
.wp-block-gallery.galerie-grille {
  display: grid !important;   /* la galerie native est en flex, avec des largeurs posées en :not(#id) */
  grid-template-columns: repeat(4, 1fr);
  gap: 28px !important;
  max-width: 1280px;
  margin: 48px auto 0 !important;
}
.wp-block-gallery.galerie-grille > figure.wp-block-image.tuile {
  position: relative;
  width: auto !important;
  margin: 0 !important;
  aspect-ratio: 1;
  border: 1.5px solid var(--framboise);
  overflow: hidden;
}
.wp-block-gallery.galerie-grille figure.wp-block-image.tuile img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform .8s var(--souple);
}
.wp-block-gallery.galerie-grille figure.wp-block-image.tuile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: none;
  margin: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(60, 15, 35, .7));
  color: var(--creme);
  font-family: var(--script);
  font-size: 26px;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s, transform .45s var(--souple);
  pointer-events: none;
}
@media (hover: hover) {
  .wp-block-gallery.galerie-grille figure.wp-block-image.tuile:hover img { transform: scale(1.06); }
  .wp-block-gallery.galerie-grille figure.wp-block-image.tuile:hover figcaption { opacity: 1; transform: none; }
}
@media (hover: none) {
  .wp-block-gallery.galerie-grille figure.wp-block-image.tuile figcaption { opacity: 1; transform: none; font-size: 21px; padding-top: 28px; }
}
/* visionneuse native (« Agrandir au clic ») aux couleurs du site */
.wp-lightbox-overlay .scrim { background-color: rgba(40, 10, 25, .92) !important; }
.wp-lightbox-overlay .close-button { color: var(--creme); }
.wp-lightbox-overlay img { border: 1.5px solid rgba(255, 248, 243, .5); }

/* =====================================================================
   Cartes et formulaires (contact, compte)
   ===================================================================== */

.carte-douce,
.wp-site-blocks #customer_login .u-column1,
.wp-site-blocks #customer_login .u-column2 {
  padding: 44px 44px 40px;
  border: 1.5px solid var(--framboise);
  border-radius: var(--rayon);
  background: #FFFEF8;
  box-shadow: 0 30px 60px -44px rgba(150, 20, 80, .5);
}
.titre-carte,
.wp-site-blocks #customer_login h2 {
  margin-bottom: 26px;
  font-family: var(--script);
  font-size: 52px;
  line-height: 1.15;
  color: var(--framboise);
  text-align: center;
}

/* champs : Contact Form 7 et formulaires WooCommerce */
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wpcf7-form { display: flex; flex-direction: column; gap: 20px; }
.champ, .wp-site-blocks .woocommerce form .form-row { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding: 0; }
.wpcf7-form .champ { margin: 0; }
.champ label, .wp-site-blocks .woocommerce form .form-row label {
  color: var(--framboise);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wpcf7-form-control-wrap { display: block; }
.champ input, .champ select, .champ textarea,
.wp-site-blocks .woocommerce form .form-row .input-text,
.wp-site-blocks .woocommerce form .form-row select {
  width: 100%;
  min-height: 50px;
  padding: 13px 18px;
  border: 1.5px solid rgba(226, 11, 126, .5);
  border-radius: var(--rayon);
  background: #fff;
  color: var(--or);
  font: 16px/1.5 var(--sans);   /* 16 px : pas de zoom automatique sur iPhone */
  transition: border-color .25s, box-shadow .25s;
}
.champ textarea { resize: vertical; min-height: 150px; }
.champ select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E20B7E' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  cursor: pointer;
}
.champ input:focus, .champ select:focus, .champ textarea:focus,
.wp-site-blocks .woocommerce form .form-row .input-text:focus {
  outline: none;
  border-color: var(--framboise);
  box-shadow: 0 0 0 4px rgba(226, 11, 126, .12);
}
.wpcf7-not-valid-tip { margin-top: 6px; color: var(--framboise); font-size: 13px; }
.case, .wpcf7-acceptance .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; cursor: pointer; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.case input, .wpcf7-acceptance input,
.wp-site-blocks .woocommerce form input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--framboise); cursor: pointer; }
.case a, .carte-douce a, .wp-site-blocks #customer_login a { color: var(--framboise); text-underline-offset: 3px; }

/* bouton plein : formulaires, compte, fiche */
.bouton-plein, .wpcf7-submit,
.wp-site-blocks #customer_login .woocommerce-button,
.wp-site-blocks .woocommerce-MyAccount-content .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  padding: 14px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--framboise);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 24px -14px rgba(226, 11, 126, .7);
  cursor: pointer;
  transition: transform .45s var(--souple), box-shadow .45s, filter .3s;
}
@media (hover: hover) {
  .wpcf7-submit:hover, .wp-site-blocks #customer_login .woocommerce-button:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -14px rgba(226, 11, 126, .8);
  }
}
.wpcf7-spinner { display: none; }
.wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 14px 18px;
  border: 0;
  border-left: 3px solid var(--framboise);
  background: rgba(226, 11, 126, .06);
  color: var(--or);
  font-size: 15px;
}

.wp-block-group.contact { background: var(--ivoire); padding: 100px 40px 120px; }
.contact-grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: start;
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
}
.contact-infos { display: flex; flex-direction: column; gap: 34px; padding-top: 12px; }
.info-bloc .info-titre {
  margin-bottom: 10px;
  color: var(--framboise);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.info-bloc .info-lien a { display: inline-block; padding: 8px 0; color: var(--framboise); font-family: var(--serif); font-size: 20px; text-underline-offset: 5px; }
.info-bloc p { font-size: 15.5px; line-height: 1.7; }
.info-bloc p a { color: var(--framboise); text-underline-offset: 3px; }
/* Pastilles des réseaux : logo officiel en framboise au repos. Au survol, au clavier ou sous
   le doigt, la pastille se soulève, la couleur de la marque éclot depuis le centre et une
   comète dorée tourne autour. --on vaut 1 quand la pastille est « allumée ». */
.wp-block-buttons.pastilles-reseaux { display: flex; flex-wrap: wrap; gap: 18px; }
.wp-block-buttons.pastilles-reseaux > .wp-block-button.pastille-reseau { --on: 0; position: relative; margin: 0; }
@media (hover: hover) {
  .wp-block-buttons.pastilles-reseaux > .wp-block-button.pastille-reseau:hover { --on: 1; }
}
.wp-block-buttons.pastilles-reseaux > .wp-block-button.pastille-reseau:active { --on: 1; }
.wp-block-buttons.pastilles-reseaux > .wp-block-button.pastille-reseau:has(.wp-block-button__link:focus-visible) { --on: 1; }

/* la comète dorée */
.wp-block-button.pastille-reseau::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(transparent 0 30%, rgba(160, 144, 5, .12) 45%, var(--or-clair) 75%, var(--or) 93%, transparent 93.5%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: var(--on);
  scale: calc(.86 + .14 * var(--on));
  translate: 0 calc(var(--on) * -3px);
  pointer-events: none;
  animation: comete 2.8s linear infinite;
  transition: opacity .4s, scale .55s var(--souple), translate .45s var(--souple);
}
@keyframes comete { to { rotate: 360deg; } }

.wp-block-button.pastille-reseau .wp-block-button__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  width: 52px; height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  /* l'anneau framboise s'efface pendant que la couleur de la marque le recouvre */
  box-shadow:
    inset 0 0 0 1.5px rgb(226 11 126 / calc(1 - var(--on))),
    0 calc(var(--on) * 14px) calc(var(--on) * 26px) calc(var(--on) * -8px) var(--halo-marque);
  font-size: 0;   /* le nom du réseau reste lu par les lecteurs d'écran */
  translate: 0 calc(var(--on) * -3px);
  transition: background-color .35s, box-shadow .45s, translate .45s var(--souple);
}
/* le logo : framboise au repos, blanc une fois allumé */
.wp-block-button.pastille-reseau .wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: 13px;
  background: rgb(calc(226 + 29 * var(--on)) calc(11 + 244 * var(--on)) calc(126 + 129 * var(--on)));
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  scale: calc(1 + .12 * var(--on));
  rotate: calc(var(--on) * -8deg);
  transition: background-color .35s, scale .55s var(--souple), rotate .55s var(--souple);
}
/* la couleur de la marque */
.wp-block-button.pastille-reseau .wp-block-button__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--marque);
  opacity: var(--on);
  scale: calc(.3 + .7 * var(--on));
  transition: opacity .35s, scale .5s var(--souple);
}
/* TikTok : fond noir, et le logo se dédouble en cyan et rouge comme l'original
   (les deux copies se superposent en blanc grâce au mode « screen »). */
.wp-block-button.pastille-reseau.reseau-tiktok .wp-block-button__link { background: rgb(0 0 0 / var(--on)); }
.wp-block-button.pastille-reseau.reseau-tiktok .wp-block-button__link::before,
.wp-block-button.pastille-reseau.reseau-tiktok .wp-block-button__link::after {
  inset: 13px;
  z-index: 0;
  border-radius: 0;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  mix-blend-mode: screen;
  scale: calc(1 + .12 * var(--on));
  rotate: calc(var(--on) * -8deg);
  transition: background-color .35s, opacity .35s, scale .55s var(--souple), rotate .55s var(--souple), translate .55s var(--souple);
}
.wp-block-button.pastille-reseau.reseau-tiktok .wp-block-button__link::before {
  background: rgb(calc(226 - 189 * var(--on)) calc(11 + 233 * var(--on)) calc(126 + 112 * var(--on)));
  translate: calc(var(--on) * -1.2px) calc(var(--on) * -1.2px);
}
.wp-block-button.pastille-reseau.reseau-tiktok .wp-block-button__link::after {
  background: #FE2C55;
  translate: calc(var(--on) * 1.2px) calc(var(--on) * 1.2px);
}
.wp-block-image.info-visuel { position: relative; margin: 10px 16px 0; }
.wp-block-image.info-visuel img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Mon compte (gabarit WooCommerce) */
.wp-block-group.compte { background: var(--ivoire); padding: 90px 40px 120px; }
.compte > .woocommerce { max-width: 1080px; margin: 0 auto; }
.wp-site-blocks #customer_login { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 40px; }
.wp-site-blocks #customer_login::before, .wp-site-blocks #customer_login::after { content: none; }
.wp-site-blocks #customer_login .u-column1, .wp-site-blocks #customer_login .u-column2 { float: none; width: auto; }
.wp-site-blocks #customer_login .u-column2 { background: var(--rose); }
.wp-site-blocks .woocommerce form.login, .wp-site-blocks .woocommerce form.register { margin: 0; padding: 0; border: 0; border-radius: 0; }
.avantages { margin: -6px 0 22px; padding: 0; list-style: none; text-align: center; }
.avantages li { padding: 3px 0; font-family: var(--serif); font-size: 16px; }
.avantages li::before { content: '✦'; margin-right: 10px; color: var(--framboise); font-size: 12px; }
.wp-site-blocks #customer_login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--or); }
.wp-site-blocks #customer_login .lost_password { margin: 14px 0 0; text-align: center; font-size: 14px; }
.wp-site-blocks .woocommerce-privacy-policy-text p { font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.wp-site-blocks .woocommerce form .show-password-input { top: 50%; transform: translateY(-50%); right: 14px; }
.wp-site-blocks .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.wp-site-blocks .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(226, 11, 126, .2); color: var(--framboise); text-decoration: none; letter-spacing: .05em; }
.wp-site-blocks .woocommerce-MyAccount-navigation li.is-active a { font-weight: 500; }
.wp-site-blocks .woocommerce-MyAccount-content { color: var(--or); }

/* =====================================================================
   Panier et commande (blocs WooCommerce)
   ===================================================================== */

.wp-block-group.panier-page, .wp-block-group.paiement-page { background: var(--ivoire); padding: 70px 40px 110px; }
.panier-page .wp-block-woocommerce-cart, .paiement-page .wp-block-woocommerce-checkout { max-width: 1180px; margin: 0 auto; color: var(--or); }
.panier-page .wc-block-components-product-name,
.panier-page .wc-block-cart-item__product .wc-block-components-product-name { color: var(--framboise); font-family: var(--serif); font-size: 18px; text-decoration: none; }
.panier-page .wc-block-cart-items, .panier-page .wc-block-cart-items td, .panier-page .wc-block-cart-items th { border-color: rgba(226, 11, 126, .25) !important; }
.panier-page .wc-block-cart-item__image img { border: 1.5px solid var(--framboise); }
.panier-page .wc-block-components-sidebar,
.paiement-page .wc-block-components-sidebar {
  padding: 30px 28px;
  border: 1.5px solid var(--framboise);
  border-radius: var(--rayon);
  background: #FFFEF8;
}
.panier-page .wc-block-components-totals-wrapper, .paiement-page .wc-block-components-totals-wrapper { border-color: rgba(226, 11, 126, .2) !important; }
.panier-page .wc-block-cart__submit-button, .paiement-page .wc-block-components-checkout-place-order-button { min-height: 54px; border-radius: 8px; }
.paiement-page .wc-block-components-text-input input,
.paiement-page .wc-block-components-combobox .components-combobox-control__input,
.paiement-page .wc-blocks-components-select .wc-blocks-components-select__select {
  border: 1.5px solid rgba(226, 11, 126, .5) !important;
  border-radius: var(--rayon) !important;
  background: #fff !important;
}
.paiement-page .wc-block-components-checkout-step__title, .panier-page .wc-block-cart__totals-title {
  font-family: var(--script) !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  color: var(--framboise);
}
.panier-page .wc-block-cart__empty-cart__title { font-family: var(--script); font-size: 46px; color: var(--framboise); }
.panier-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none; }
.panier-page .wp-block-separator.is-style-dots::before { color: var(--framboise); }

/* Messages WooCommerce */
.wp-site-blocks .woocommerce-message, .wp-site-blocks .woocommerce-info, .wp-site-blocks .woocommerce-error {
  border-top-color: var(--framboise);
  background: #FFFEF8;
  color: var(--or);
}
.wp-site-blocks .woocommerce-message::before, .wp-site-blocks .woocommerce-info::before { color: var(--framboise); }
.wp-site-blocks .woocommerce-message .button, .wp-site-blocks .woocommerce-info .button { background: var(--framboise); color: #fff; border-radius: 8px; }

/* Tiroir du mini-panier */
.wc-block-components-drawer__screen-overlay { background-color: rgba(70, 20, 45, .35); }
.wc-block-mini-cart__drawer .wc-block-components-drawer,
.wc-block-mini-cart__drawer .components-modal__frame { background: var(--ivoire); color: var(--or); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  font-family: var(--script);
  font-size: 40px;
  font-weight: 400;
  color: var(--framboise);
}
.wc-block-mini-cart__drawer .wc-block-components-product-name { color: var(--framboise); font-family: var(--serif); text-decoration: none; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image img { border: 1px solid var(--framboise); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer { border-top: 1px solid rgba(226, 11, 126, .2); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart.wc-block-components-button {
  border: 1.5px solid var(--framboise) !important;
  background: transparent !important;
  color: var(--framboise) !important;
  border-radius: 8px;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout { border-radius: 8px; }

/* =====================================================================
   Pages légales
   ===================================================================== */

.wp-block-group.legal { background: var(--ivoire); padding: 90px 24px 110px; }
.legal-texte { max-width: 760px; margin: 0 auto; }
.legal-texte h2 {
  margin: 44px 0 12px;
  color: var(--framboise);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.legal-texte p, .legal-texte li { font-size: 16px; line-height: 1.85; }
.legal-texte p { margin: 0 0 14px; }
.legal-texte ul { margin: 0 0 14px; padding-left: 20px; }
.legal-texte a { color: var(--framboise); text-underline-offset: 3px; }
.legal-texte strong { font-weight: 500; }
.legal-texte .avis-modele {
  padding: 16px 20px;
  border: 1.5px dashed var(--framboise);
  border-radius: var(--rayon);
  background: rgba(243, 199, 228, .45);
  color: var(--framboise);
  font-size: 15px;
}

/* =====================================================================
   Cadres des photos et vidéos
   ===================================================================== */

/* angle de la lueur qui fait le tour des cadres (animable grâce à @property) */
@property --tour { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tour-cadre { to { --tour: 360deg; } }

/* Filet et coins dorés : huit traits en dégradé, posés aux quatre angles de la couche. */
.wp-block-video.hero-cadre::before,
.wp-block-video.video-cadre::before,
.wp-block-image.info-visuel::before,
.fiche .woocommerce-product-gallery::before,
.wp-block-gallery.galerie-grille > figure.wp-block-image.tuile::before,
.wp-site-blocks ul.products li.product .cadre-photo::before {
  content: '';
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--cadre-trait);
  background:
    linear-gradient(var(--cadre-coin) 0 0) left top / var(--coin) 2px,
    linear-gradient(var(--cadre-coin) 0 0) left top / 2px var(--coin),
    linear-gradient(var(--cadre-coin) 0 0) right top / var(--coin) 2px,
    linear-gradient(var(--cadre-coin) 0 0) right top / 2px var(--coin),
    linear-gradient(var(--cadre-coin) 0 0) left bottom / var(--coin) 2px,
    linear-gradient(var(--cadre-coin) 0 0) left bottom / 2px var(--coin),
    linear-gradient(var(--cadre-coin) 0 0) right bottom / var(--coin) 2px,
    linear-gradient(var(--cadre-coin) 0 0) right bottom / 2px var(--coin);
  background-repeat: no-repeat;
  background-origin: border-box;
}

/* 1 · Le « tableau » : vidéos, visuel du contact, photo de la fiche produit.
   Un filet décalé aux coins dorés et une lueur qui en fait le tour. Au survol,
   le cadre prend de l'air et ses coins s'allongent. */
.wp-block-video.hero-cadre,
.wp-block-video.video-cadre,
.wp-block-image.info-visuel,
.fiche .woocommerce-product-gallery {
  --ecart: 16px;
  --plus: 0px;
  --coin: 24px;
  --cadre-trait: rgba(226, 11, 126, .4);
  --cadre-coin: var(--or);
  --lueur-queue: rgba(160, 144, 5, .35);
  --lueur-tete: var(--or);
}
.wp-block-video.hero-cadre {
  --cadre-trait: rgba(255, 248, 243, .55);
  --cadre-coin: var(--or-clair);
  --lueur-queue: rgba(242, 220, 138, .45);
  --lueur-tete: #FFF6D2;
}
.wp-block-image.info-visuel { --ecart: 12px; }

.wp-block-video.hero-cadre::before, .wp-block-video.hero-cadre::after,
.wp-block-video.video-cadre::before, .wp-block-video.video-cadre::after,
.wp-block-image.info-visuel::before, .wp-block-image.info-visuel::after,
.fiche .woocommerce-product-gallery::before, .fiche .woocommerce-product-gallery::after {
  inset: calc((var(--ecart) + var(--plus)) * -1);
  transition: inset .7s var(--souple), top .7s var(--souple), left .7s var(--souple), width .7s var(--souple),
    background-size .7s var(--souple), opacity .9s, scale 1s var(--souple);
}
/* la lueur : un trait de lumière qui parcourt le filet */
.wp-block-video.hero-cadre::after,
.wp-block-video.video-cadre::after,
.wp-block-image.info-visuel::after,
.fiche .woocommerce-product-gallery::after {
  content: '';
  position: absolute;
  pointer-events: none;
  padding: 2px;
  background: conic-gradient(from var(--tour), transparent 0 60%, var(--lueur-queue) 78%, var(--lueur-tete) 88%, transparent 88.6%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: tour-cadre 9s linear infinite;
}
/* la vidéo de la page Photo & vidéo a sa légende dessous : le cadre n'entoure que l'image carrée */
.wp-block-video.video-cadre::before,
.wp-block-video.video-cadre::after {
  inset: auto;
  top: calc((var(--ecart) + var(--plus)) * -1);
  left: calc((var(--ecart) + var(--plus)) * -1);
  width: calc(100% + (var(--ecart) + var(--plus)) * 2);
  aspect-ratio: 1;
}
/* hors de l'écran au chargement, le cadre attend et se dessine quand on l'atteint (app.js) */
.cadre-attente::before, .cadre-attente::after { opacity: 0; scale: 1.08; }
@media (hover: hover) {
  .wp-block-video.hero-cadre:hover,
  .wp-block-video.video-cadre:hover,
  .wp-block-image.info-visuel:hover,
  .fiche .woocommerce-product-gallery:hover { --plus: 6px; --coin: 46px; }
}

/* 2 · Le passe-partout : photos de la galerie et des créations. Coins dorés au repos ;
   au survol, un filet crème vient se poser dans la photo et un reflet la traverse. */
.wp-block-gallery.galerie-grille > figure.wp-block-image.tuile,
.wp-site-blocks ul.products li.product .cadre-photo {
  --retrait: 14px;
  --coin: 16px;
  --cadre-trait: transparent;
  --cadre-coin: var(--or-clair);
  position: relative;
  overflow: hidden;
}
.wp-block-gallery.galerie-grille > figure.wp-block-image.tuile::before,
.wp-site-blocks ul.products li.product .cadre-photo::before {
  inset: var(--retrait);
  /* la galerie native pose sur ce même ::before un voile flouté (derrière les légendes) :
     sans cette remise à zéro, il apparaît comme un cadre transparent sur chaque photo */
  height: auto;
  max-height: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  z-index: 1;
  filter: drop-shadow(0 0 3px rgba(60, 15, 35, .45));
  transition: inset .6s var(--souple), border-color .5s, background-size .6s var(--souple);
}
.wp-block-gallery.galerie-grille figure.wp-block-image.tuile figcaption { z-index: 2; }
.wp-block-gallery.galerie-grille > figure.wp-block-image.tuile::after,
.wp-site-blocks ul.products li.product .cadre-photo::after {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%;
  left: -80%;
  width: 45%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-22deg);
}
@media (hover: hover) {
  .wp-block-gallery.galerie-grille > figure.wp-block-image.tuile:hover,
  .wp-site-blocks ul.products li.product a:hover .cadre-photo { --retrait: 10px; --coin: 30px; --cadre-trait: rgba(255, 248, 243, .85); }
  .wp-block-gallery.galerie-grille > figure.wp-block-image.tuile:hover::after,
  .wp-site-blocks ul.products li.product a:hover .cadre-photo::after { left: 140%; transition: left 1.1s var(--souple); }
}

@media (max-width: 860px) {
  .wp-block-video.hero-cadre,
  .wp-block-video.video-cadre,
  .fiche .woocommerce-product-gallery { --ecart: 12px; --coin: 18px; }
  .wp-block-image.info-visuel { --ecart: 10px; --coin: 18px; }
  .wp-block-gallery.galerie-grille > figure.wp-block-image.tuile,
  .wp-site-blocks ul.products li.product .cadre-photo { --retrait: 9px; --coin: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-video.hero-cadre::after,
  .wp-block-video.video-cadre::after,
  .wp-block-image.info-visuel::after,
  .fiche .woocommerce-product-gallery::after { display: none; }
}

/* =====================================================================
   Écrans tactiles : pas de survol, retour à l'appui
   ===================================================================== */

@media (hover: none) {
  .wp-block-button.bouton-verre::after { opacity: 1; transform: translate(0, -50%); }
  .wp-block-button.bouton-verre .wp-block-button__link:active::before,
  .woocommerce ul.products li.product .button:active::before,
  .wp-block-button.lien-reseau:active::before { transform: none; transition-duration: .15s; }
  .wp-site-blocks ul.products li.product .button:active { color: #fff; }
  .wp-block-button.bouton-verre .wp-block-button__link:active,
  .wp-site-blocks ul.products li.product .button:active,
  .wp-block-button.lien-reseau:active,
  .wpcf7-submit:active { transform: scale(.97); }
}
a, button, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--framboise); outline-offset: 3px; }

/* =====================================================================
   Tablette
   ===================================================================== */

@media (max-width: 1100px) {
  :root { --logo-l: 150px; }
  .entete .entete-barre { --onglet-l: 112px; column-gap: 8px; padding: 0 24px; }
  .entete-barre .onglets .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { column-gap: 8px; }
  .entete .onglets .wp-block-navigation-item__content { font-size: 13px; letter-spacing: .06em; }
  .entete .connexion a { gap: 0; font-size: 0; }
  .entete .panier .wc-block-mini-cart__button::after { content: none; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  .hero-grille { gap: 36px; }
  .wp-block-gallery.galerie-grille { grid-template-columns: repeat(3, 1fr); gap: 22px !important; }
  .reassurance-liste { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .contact-grille { gap: 36px; }
  .wp-site-blocks .fiche div.product { column-gap: 44px; }
}

/* =====================================================================
   Mobile
   ===================================================================== */

@media (max-width: 860px) {
  :root { --annonce-h: 32px; --barre-h: 70px; --logo-l: 100px; }
  .entete .annonce-texte { font-size: 10.5px; padding-left: 16px; }
  .entete .annonce-texte strong { margin: 0 14px; }

  /* menu replié : burger à gauche, médaillon au centre, connexion et panier à droite */
  .entete .entete-barre { grid-template-columns: 1fr 120px 1fr; padding: 0 12px; }
  .entete-barre > .wp-block-navigation.onglets { grid-column: 1; justify-self: start; }
  .entete-barre > .connexion { grid-column: 3; justify-self: end; margin-right: 48px; }
  .entete-barre > .panier { grid-column: 3; justify-self: end; }
  .entete .action a { justify-content: center; min-width: 44px; }
  .entete .onglets .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    color: var(--framboise);
  }
  .entete .onglets .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .entete .onglets .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--rose) !important;
    color: var(--framboise) !important;
    padding: 90px 24px 40px;
  }
  .entete .onglets .is-menu-open .wp-block-navigation__container { gap: 6px; align-items: center !important; }
  .entete .onglets .is-menu-open .wp-block-navigation-item__content { padding: 12px 0; font-size: 18px; letter-spacing: .08em; }
  .entete .onglets .is-menu-open .wp-block-navigation__responsive-container-close { color: var(--framboise); }
  .entete.compacte .entete-barre { height: 58px; }
  .entete.compacte .entete-barre > .wp-block-site-logo.logo { width: 64px; top: 3px; }

  .wp-block-group.hero { padding: calc(var(--logo-l) - var(--barre-h) + 40px) 16px 64px; }
  .hero-ambiance { display: none; }   /* sur téléphone : l'image fixe suffit, une seule vidéo à décoder */
  .hero-grille { grid-template-columns: 1fr; gap: 44px; }
  .wp-block-video.hero-cadre { width: min(520px, calc(100% - 32px)); }
  .wp-block-button.bouton-verre .wp-block-button__link { min-width: 0; width: 100%; max-width: 320px; }
  .wp-block-buttons.hero-boutons > .wp-block-button.bouton-verre { width: 100%; max-width: 320px; }

  .wp-block-group.histoire { padding: 84px 20px 0; }
  .histoire-texte p { font-size: 18px; }
  .wp-block-group.histoire::after { margin-top: 64px; max-width: 280px; }

  .wp-block-group.best-sellers { padding: 64px 16px 90px; }
  .woocommerce ul.products { gap: 28px 14px; margin-top: 44px; }
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { grid-template-columns: 1fr; }
  .wp-site-blocks ul.products li.product .woocommerce-loop-product__title { margin-bottom: 2px; font-size: 14px; }
  .wp-site-blocks ul.products li.product .price { margin-bottom: 10px; font-size: 14px; }
  .wp-site-blocks ul.products li.product .button { min-height: 44px; padding: 8px; font-size: 13px; }

  .wp-block-group.faq { padding: 80px 16px 90px; }
  .faq-liste { grid-template-columns: 1fr; margin-top: 40px; gap: 16px; }
  .faq-colonne { gap: 16px; }
  details.faq-item summary { padding: 12px 52px 12px 18px; font-size: 15px; }
  details.faq-item { --centre-x: 28px; }
  details.faq-item p { padding: 0 20px 16px 18px; font-size: 15px; }

  .wp-block-group.reseaux { padding: 90px 16px 100px; }
  .reseaux-contenu { gap: 16px; }
  .reseaux-contenu .titre-script { margin-bottom: 16px; }
  .wp-block-buttons.liens-reseaux { gap: 16px; }
  .wp-block-button.lien-reseau .wp-block-button__link { padding: 12px 18px 12px 20px; }

  .pied .wp-block-site-logo.logo-pied img { width: 124px; }
  .pied .pied-contact a { display: inline-block; padding: 11px 4px; }
  .pied .wp-block-navigation.pied-liens .wp-block-navigation__container { gap: 0 22px; }
  .pied .pied-liens .wp-block-navigation-item__content { padding: 11px 0; }
  .pied .pied-legal { line-height: 1.4; }
  .pied .pied-legal a { display: inline-block; padding: 13px 4px; }

  .wp-block-group.bandeau-page { padding: calc(var(--logo-l) - var(--barre-h) + 44px) 18px 60px; }
  .wp-block-group.bandeau-court { padding-bottom: 48px; }
  .bandeau-page .bandeau-intro { font-size: 16.5px; }
  .bandeau-page .fil-ariane, .bandeau-page .fil-ariane .woocommerce-breadcrumb { font-size: 11px; letter-spacing: .16em; }

  .wp-block-group.boutique { padding: 56px 16px 90px; }
  .wp-block-buttons.filtres { gap: 8px; }
  .wp-block-button.filtre .wp-block-button__link { padding: 9px 16px; font-size: 13.5px; }
  .boutique .lumie-outils { flex-direction: column; gap: 14px; margin-top: 24px; }
  .wp-block-group.reassurance { padding: 70px 20px; }

  .wp-block-group.video-page { padding: 80px 32px 90px; }
  .wp-block-group.galerie { padding: 80px 16px 90px; }
  .wp-block-gallery.galerie-grille { grid-template-columns: repeat(2, 1fr); gap: 14px !important; margin-top: 32px !important; }

  .carte-douce, .wp-site-blocks #customer_login .u-column1, .wp-site-blocks #customer_login .u-column2 { padding: 32px 22px 28px; }
  .titre-carte, .wp-site-blocks #customer_login h2 { font-size: 44px; margin-bottom: 18px; }
  .wp-block-group.contact, .wp-block-group.compte { padding: 64px 16px 90px; }
  .contact-grille, .wp-site-blocks #customer_login { grid-template-columns: 1fr; }
  .contact-infos { padding: 0 8px; text-align: center; align-items: center; }
  .wp-block-buttons.pastilles-reseaux { justify-content: center; }
  .wp-block-image.info-visuel { width: min(320px, 100%); }
  .wp-site-blocks #customer_login .lost_password a { display: inline-block; padding: 10px 0; }

  .wp-block-group.panier-page, .wp-block-group.paiement-page { padding: 48px 16px 80px; }

  .wp-block-group.fiche { padding: calc(var(--logo-l) - var(--barre-h) + 40px) 16px 0; }
  .wp-site-blocks .fiche div.product { grid-template-columns: 1fr; }
  .wp-site-blocks .fiche div.product div.images.woocommerce-product-gallery { margin: 12px 12px 40px; }
  .wp-site-blocks .fiche div.product div.summary { grid-column: 1; text-align: center; }
  .fiche-garanties { justify-content: center; }
  .fiche-accordeons { text-align: left; }
  .wp-site-blocks .fiche div.product section.related.products { margin-top: 72px; padding: 72px 0 90px; }

  .wp-block-group.legal { padding: 64px 20px 90px; }
}

@media (max-width: 782px) {
  body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(46px - var(--annonce-h)); }
}
@media (max-width: 600px) {
  body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(var(--annonce-h) * -1); }
  .champs-duo { grid-template-columns: 1fr; }
  .wp-site-blocks .fiche div.product form.cart { flex-direction: column; align-items: center; }
  .wp-site-blocks .fiche div.product form.cart .button.single_add_to_cart_button { width: 100%; }
  .wp-block-group.lettre { padding: 64px 16px 60px; }
  .lettre .lettre-intro { font-size: 16px; margin-bottom: 26px; }
  .lettre-champ { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: 22px; }
  .lettre-champ input[type="email"] { text-align: center; }
  .lettre-bouton { width: 100%; }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}