/*
 * Nos marques — section de l’accueil
 * La grille et les couleurs restent éditables. brand-backgrounds.js anime les fonds indépendamment des photos.
 * Chargement : functions.php ; règles conservées dans leur ordre de cascade.
 */
/* 01. Conteneur et cartes : partager les rangées avec subgrid pour aligner les visuels par le bas. */
.lgr-brands-content {
  box-sizing: border-box;
  max-width: 1920px;
  margin-inline: auto;
}
.lgr-brands-grid {
  --lgr-brands-column-min: 100%;
  align-items: end;
}
/* La grille automatique native reste réglable dans Gutenberg. */
@media (min-width: 600px) {
  .lgr-brands-grid {
    --lgr-brands-column-min: calc((100% - 32px) / 2);
  }
}
@media (min-width: 1025px) {
  .lgr-brands-grid {
    --lgr-brands-column-min: calc((100% - 64px) / 3);
  }
}
.lgr-brand-card {
  min-width: 0;
  display: grid;
  grid-template-rows: subgrid;
}
.lgr-brand-card > .block-editor-inner-blocks,
.lgr-brand-card
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  display: contents;
}
.lgr-brand-card .wp-block-image {
  align-self: end;
}
.lgr-brand-card > .wp-block-group {
  align-self: start;
}
.lgr-brands-grid .lgr-brand-card > .wp-block-image {
  margin: 0;
}
.lgr-brands-grid .lgr-brand-card > .wp-block-group {
  margin-top: 0;
}
/* 02. Identité des marques : dimensions des pastilles. */
.lgr-brand-mark {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: 0 0 16px;
}
/* 03. Visuels : proportions propres à chaque pot et contexte de superposition. */
.lgr-brand-artwork {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* Les marges transparentes des photos agrandies ne doivent pas déborder de la carte. */
  overflow: clip;
  align-self: end;
}
.lgr-brand-card > .lgr-brand-artwork {
  align-self: end;
}
.lgr-brand-artwork--lgr {
  aspect-ratio: 339 / 451;
}
.lgr-brand-artwork--saveurs {
  aspect-ratio: 339 / 408;
}
.lgr-brand-artwork--celinette {
  aspect-ratio: 338 / 350;
}
/* 04. Fond natif : calque coloré ancré sur une ligne basse commune. */
.lgr-brand-artwork .lgr-brand-backdrop {
  position: absolute;
  inset: 0 0 40px;
  margin: 0;
  z-index: -1;
  transform-origin: center bottom;
}
/* 05. Photos détourées : compenser les marges transparentes des fichiers source. */
.lgr-brand-artwork .wp-block-image {
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 140%;
  height: 71%;
  margin: 0;
}
.lgr-brand-artwork--saveurs .wp-block-image {
  height: 82%;
}
.lgr-brand-artwork--celinette .wp-block-image {
  height: 90%;
}
.lgr-brand-artwork .wp-block-image img {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
}
/* 06. Apparition du fond : croissance depuis le bas, décalée par --brand-bg-delay. */
@media (prefers-reduced-motion: no-preference) {
  .lgr-brand-artwork.lgr-brand-bg-pending .lgr-brand-backdrop {
    transform: scaleY(0);
  }
  .lgr-brand-artwork.lgr-brand-bg-visible .lgr-brand-backdrop {
    animation: lgr-brand-background-grow 1000ms cubic-bezier(0.19, 1, 0.22, 1)
      var(--brand-bg-delay, 0ms) both;
  }
}
/* 07. Trajectoire du fond coloré. */
@keyframes lgr-brand-background-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
/* 08. Gutenberg : afficher immédiatement les fonds pour les sélectionner. */
.editor-styles-wrapper .lgr-brand-backdrop {
  animation: none !important;
  transform: none !important;
}

/* 09. Liens natifs : toute la carte pointe vers son unique lien éditable. */
.lgr-brand-card {
  position: relative;
  --brand-card-tilt: 0deg;
}
.lgr-brand-card:has(.lgr-brand-artwork--lgr) {
  --brand-card-tilt: 3deg;
}
.lgr-brand-card:has(.lgr-brand-artwork--saveurs) {
  --brand-card-tilt: -3deg;
}
.lgr-brand-cta {
  position: static;
}
.lgr-brand-cta a {
  text-decoration: none;
}
.lgr-brand-cta a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}
.lgr-brand-link-icon {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
}
.lgr-brand-link-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: inherit;
  transform: scale(0);
}
.lgr-brand-link-icon .wp-block-image {
  position: relative;
  z-index: 1;
  margin: 0;
  flex: 0 0 24px;
  align-self: center;
}
.lgr-brand-link-icon .wp-block-image img {
  display: block;
}
.lgr-brand-link-icon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  inset: calc(50% - 12px) auto auto calc(50% - 12px);
  background: var(--wp--preset--color--charcoal, #1e1e1e);
  mask: url('../../icons/fleche-droite.svg') center / contain no-repeat;
  transform: translateX(-52px);
}
.lgr-brand-link-label a {
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px
    no-repeat;
  padding-block: 4px;
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
.lgr-brand-card:focus-within .lgr-brand-link-icon::before {
  transform: scale(1);
}
/* La couleur native reste celle du repos ; seule l'interaction prend la couleur de marque. */
.lgr-brand-card:focus-within .lgr-brand-link-icon:not(.editor-styles-wrapper *) {
  border-color: currentColor !important;
}
.lgr-brand-card:focus-within .lgr-brand-link-icon .wp-block-image {
  transform: translateX(52px);
}
.lgr-brand-card:focus-within .lgr-brand-link-icon::after {
  transform: translateX(0);
}
.lgr-brand-card:focus-within .lgr-brand-link-label a {
  background-size: 100% 1px;
}
}
.lgr-brand-card:has(a:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .lgr-brand-card:hover .lgr-brand-link-icon:not(.editor-styles-wrapper *) {
    border-color: currentColor !important;
  }
  .lgr-brand-card:hover .lgr-brand-link-icon::before {
    transform: scale(1);
  }
  .lgr-brand-card:hover .lgr-brand-link-icon .wp-block-image {
    transform: translateX(52px);
  }
  .lgr-brand-card:hover .lgr-brand-link-icon::after {
    transform: translateX(0);
  }
  .lgr-brand-card:hover .lgr-brand-link-label a {
    background-size: 100% 1px;
  }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lgr-brand-artwork > .wp-block-image {
    transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
    transform-origin: center 65%;
  }
  .lgr-brand-link-icon::before {
    transition: transform 700ms cubic-bezier(.19, 1, .22, 1);
  }
  .lgr-brand-link-icon {
    transition: border-color 400ms ease;
  }
  .lgr-brand-link-icon .wp-block-image,
  .lgr-brand-link-icon::after {
    transition: transform 650ms cubic-bezier(.77, 0, .18, 1);
  }
  .lgr-brand-link-label a {
    transition: background-size 650ms cubic-bezier(.77, 0, .18, 1);
  }
  .lgr-brand-card:focus-within .lgr-brand-artwork > .wp-block-image {
    transform: translateY(-32px) rotate(var(--brand-card-tilt));
  }
  @media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
    .lgr-brand-card:hover .lgr-brand-artwork > .wp-block-image {
      transform: translateY(-32px) rotate(var(--brand-card-tilt));
    }
  }
}
/* Les liens restent sélectionnables dans le véritable canevas Gutenberg. */
.editor-styles-wrapper .lgr-brand-card {
  transform: none !important;
  transition: none;
}
.editor-styles-wrapper .lgr-brand-artwork > .wp-block-image {
  transform: none !important;
  transition: none;
}
.editor-styles-wrapper .lgr-brand-cta a::after {
  content: none;
}
.editor-styles-wrapper .lgr-brand-link-icon::before {
  transform: scale(0) !important;
}
.editor-styles-wrapper .lgr-brand-link-icon .wp-block-image {
  transform: none !important;
}
.editor-styles-wrapper .lgr-brand-link-icon::after {
  transform: translateX(-52px) !important;
}