/*
  Legacy bridge — restitue les variables CSS et le comportement responsive
  qu'exposait l'ancien `root.css` SCSS-based, par-dessus le `root.css` issu
  des Design Tokens.

  Ordre d'import recommandé côté consommateur :
    1. dist/<marque>/styles/fonts.css
    2. dist/<marque>/styles/css/root.css         (design tokens)
    3. dist/<marque>/styles/css/legacy-bridge.css (ce fichier)
*/

:root {
  /* Breakpoints */
  --breakpoint-xxs: 360px;
  --breakpoint-xs: 480px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  /* Spinner */
  --spinner-animation-duration: 0.75s;
  --spinner-animation-timing: linear;
  /* Header (mobile-first ; bascule tablette/desktop plus bas) */
  --mobile-header-height: 110px;
  --header-height: var(--mobile-header-height);
  /* Container responsive (mobile-first ; bascule au breakpoint correspondant) */
  --container-horizontal-spacing: var(--spacing-3);
  --container-max-width: var(--container-max-width-xxs);
  /* Shadows — couleurs alignées sur la marque via color-mix */
  --shadow: 0.1rem 0.1rem 0.3rem -0.1rem
    color-mix(in srgb, var(--color-background-darkest) 20%, transparent);
  --shadow-dark: 0.2rem 0.4rem 0.8rem 0.4rem
    color-mix(in srgb, var(--color-background-darkest) 15%, transparent);
  --shadow-light: 0 0 3rem 0
    color-mix(in srgb, var(--color-background-darkest) 16%, transparent);
  --shadow-main: 0.1rem 0.1rem 0.3rem -0.1rem
    color-mix(in srgb, var(--color-main) 20%, transparent);
  --shadow-main-dark: 0.1rem 0.2rem 1.6rem 0.4rem
    color-mix(in srgb, var(--color-main) 30%, transparent);
  --shadow-main-light: 0 0 3rem 0
    color-mix(in srgb, var(--color-main) 16%, transparent);
  /* Alias / variables divers présents en v1 */
  --block-title-background: var(--color-block-title-background, var(--color-main));
  --border-gradient: var(--color-success-darker), var(--color-success);
  --gradient-green-start: #004d3f;
  --gradient-green-end: #00826b;
  /* IDF — famille typographique */
  --idf-font-family-primary: var(--font-family), helvetica, arial, sans-serif;
  /* IDF — typographie (mobile-first ; bascule desktop plus bas) */
  --idf-font-size-xxxl: var(--font-size-3xl-mobile);
  --idf-font-size-xxl: var(--font-size-xxl-mobile);
  --idf-font-size-xl: var(--font-size-xl);
  --idf-font-size-l: var(--font-size-l);
  --idf-font-size-m: var(--font-size-m);
  --idf-font-size-s: var(--font-size-s);
  --idf-font-size-xs: var(--font-size-xs);
  --idf-line-height-xxxl: var(--line-height-3xl-mobile);
  --idf-line-height-xxl: var(--line-height-xxl-mobile);
  --idf-line-height-xl: var(--line-height-xl);
  --idf-line-height-l: var(--line-height-l);
  --idf-line-height-m: var(--line-height-m);
  --idf-line-height-s: var(--line-height-s);
  --idf-line-height-xs: var(--line-height-xs);
  --idf-icon-size-xxxl: var(--icon-size-3xl-mobile);
  --idf-icon-size-xxl: var(--icon-size-xxl-mobile);
  --idf-icon-size-xl: var(--icon-size-xl);
  --idf-icon-size-l: var(--icon-size-l);
  --idf-icon-size-m: var(--icon-size-m);
  --idf-icon-size-s: var(--icon-size-s);
  --idf-icon-size-xs: var(--icon-size-xs);
}
/*
  v1 émettait les valeurs mobiles dans :root puis basculait sur les valeurs
  desktop à >=992px. v2 expose la valeur desktop dans le token principal et
  la valeur mobile dans `*-mobile`. On restitue la bascule mobile-first ici.
*/
@media (width <= 991.98px) {
  :root {
    --font-size-3xl: var(--font-size-3xl-mobile);
    --font-size-xxl: var(--font-size-xxl-mobile);
    --line-height-3xl: var(--line-height-3xl-mobile);
    --line-height-xxl: var(--line-height-xxl-mobile);
    --icon-size-3xl: var(--icon-size-3xl-mobile);
    --icon-size-xxl: var(--icon-size-xxl-mobile);
  }
}

@media (width >= 576px) {
  :root {
    --container-max-width: var(--container-max-width-sm);
    --header-height: 112px;
  }
}

@media (width >= 768px) {
  :root {
    --container-max-width: var(--container-max-width-md);
  }
}

@media (width >= 992px) {
  :root {
    --container-horizontal-spacing: var(--spacing-4);
    --container-max-width: var(--container-max-width-lg);
    --header-height: 122px;
    --idf-font-size-xxxl: var(--font-size-3xl);
    --idf-font-size-xxl: var(--font-size-xxl);
    --idf-icon-size-xxxl: var(--icon-size-3xl);
    --idf-icon-size-xxl: var(--icon-size-xxl);
    --idf-line-height-xxxl: var(--line-height-3xl);
    --idf-line-height-xxl: var(--line-height-xxl);
  }
}

@media (width >= 1200px) {
  :root {
    --container-max-width: var(--container-max-width-xl);
  }
}
/* stylelint-disable no-descending-specificity */
/*
  Les variables présentes dans ce fichier servent à :
    - Faire mapper les couleurs dans les composants grâce à la palette de couleur définie dans le fichier _palette.scss
    - Faire de la customisation de rendu pour la marque (spacing, font-size, border-radius, etc.)

  Toutes les variables présentes ici doit être aussi présentes dans les autres thèmes.

  S'il y a des variables communes à tous les thèmes, elles doivent être définies dans le thème par défaut "common".
*/
/*
 * Forward common variables (spacing, typography, border, ...),
 * in order for them to be available for ../../common/root.scss.
 *
 * Variables should be called in the mentionned file using the `theme-` prefix,
 * @example: `--my-var-1: {$theme-my-var-1}` // (asterisk was removed for this example).
 *
 * Common variables values can be overwritten using `with`.
 * @example:
 * `@forward '../../common/vars/default-variables' as theme-* with(
 *   $spacing-1: 100rem,
 *   $spacing-2: 666rem,
 * )`.
 */
/*
  FICHIER DEPRECATED
*/
/*
 * Container.
 */
/*
 * Radius.
 */
/*
 * Typography.
 */
/*
 * Images.
 */
/*
 * Spacing.
 */
/*
 * Spinner.
 */
/*
  La palette de couleur est le seul endroit qui doit contenir des couleurs dans toute l'application.
  Elle est construite par les UX / UI designers.

  CE FICHIER EST GENÉRÉ DE MANIÈRE AUTOMATIQUE AVEC LES DONNÉES DE FIGMA.
*/
/* stylelint-disable scss/at-mixin-pattern */
/*
 * Visually hide a content on a browser, but let it accessible for vocal synthesis.
 * The "display: none;" attribute completely hide a content.
 *
 * Other available techniques:
 * https://webaim.org/techniques/css/invisiblecontent/
 */
.b2ag-p-logo__cooperative-baseline,
.b2ag-p-logo__previous-link,
.add-to-cart .adn-button.adn-button--primary:hover,
.add-to-cart .adn-button.adn-button--primary:hover span,
.adn-button.adn-button--primary *,
.adn-button--secondary:focus span,
.adn-button--secondary:active span,
.header .adn-breadcrumbs__back-link,
.header a.navigation__btn,
.header a.navigation__btn-right,
.header a.navigation__btn-right:hover,
.header a.navigation__btn-right .adn-button__text,
.header div.navigation__btn,
.header[class~=header] .search-form-title,
.header[class~=header] .previous-button-mobile,
.header[class~=header] .previous-button-mobile:active,
.header[class~=header] .previous-button-mobile:hover {
  color: var(--color-white);
}

#header .navigation--left .adn-button.adn-button--link span {
  color: var(--color-white);
  text-decoration: none;
}
#header .navigation--left .adn-button.adn-button--link {
  padding: 0 0.5rem;
}

.idf-promotion-card__content .idf-promotion-card__cta .adn-button {
  background-color: var(--color-white);
}

.adn-animated-cart .icon-tabbar-filled {
  fill: var(--color-white) !important;
}

.header .navigation__profile-button.router-link-active {
  color: var(--color-white);
  font-weight: 400;
  border-color: var(--color-white);
}

.adn-anchor-navigation__link:hover,
.adn-anchor-navigation__link:focus,
.idf-promotion-card__cta .adn-button.adn-button--primary * {
  color: var(--idf-color-main-400);
}

footer .footer-site-map,
.p-advertorial-insert .idf-promotion-card {
  background-color: var(--idf-color-main-400) !important;
  color: var(--color-white) !important;
}

.adn-button__text,
.adn-button--secondary,
.select-wrapper select,
.select-wrapper button,
.total-price__quantity button,
.quantity-input-wrapper button {
  color: var(--idf-color-main-400);
  border-color: var(--idf-color-main-400);
}

.adn-animated-cart .icon-tabbar-notification {
  fill: var(--idf-color-main-400);
}

.product-thumbnail__supplier-highlighted-icon img {
  filter: hue-rotate(315deg);
}

@media (min-width: 768px) {
  .product-header .product-basic-info {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10rem), calc(100% - 10rem) 100%, 0 100%);
  }
}

.header,
.header-minimal,
#product-detail__offer-list .variant-block,
#product-detail__offer-list .variant-block-header,
.idf-newsletter-subscription__container {
  background: var(--idf-color-main-400) !important;
  background: linear-gradient(90deg, var(--idf-color-main-400) 0%, var(--gradient-default-lighter) 100%) !important;
}

@media screen and (max-width: 992px) {
  .navigation--center {
    background: linear-gradient(90deg, var(--idf-color-main-400) 0%, var(--gradient-default-lighter) 100%) !important;
  }
}

.b2ag-p-logo__link {
  margin-top: 0;
}

.footer-site-map .footer-site-map__social-logo .b2ag-p-logo__link,
.footer-site-map .footer-site-map__social-logo .b2ag-p-logo__image {
  height: 9rem;
  width: auto;
}
.footer-site-map .footer-site-map__social-logo .b2ag-p-logo__wrapper {
  width: auto;
}

.b2ag-p-logo--multi-line {
  height: auto;
}

.adn-select-option--selected,
.adn-select-option:hover {
  background-color: #ebf3ed;
}

#push-articles.carousel-articles {
  background-color: transparent;
}

@media (min-width: 768px) {
  #product-detail__offer-list .variant-block {
    border-radius: 0;
  }
}
@media (min-width: 1200px) {
  #product-detail__offer-list .variant-block {
    border-radius: 0;
  }
}

@media (min-width: 768px) {
  #product-detail__offer-list .variant-block > .variant-block-header {
    border-radius: 0;
  }
}

#product-detail__offer-list .offer-item:not(:first-child) {
  margin-top: var(--spacing-6);
}

.calculator-summary .see-calculator-button .adn-button__text {
  color: var(--color-white);
}

.b2ag-carousel__content header .scroll-manager.scroll-manager--top {
  gap: var(--spacing-4);
}

.idf-home-banner .idf-home-banner__background-image img {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8rem), calc(100% - 8rem) 100%, 0 100%);
  border-radius: 0;
}

.idf-home-banner .idf-home-banner__content .background--title-area {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), calc(100% - 5rem) 100%, 0 100%);
  background-image: none;
  background-color: rgba(53, 130, 120, 0.8);
}

.idf-home-banner__dynamic-content .article-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), calc(100% - 3rem) 100%, 0 100%);
}

.visited-products .b2ag-carousel {
  border-radius: 0;
  background: linear-gradient(180deg, var(--color-main-background) 70%, transparent 30%);
}
.visited-products .b2ag-carousel__content {
  padding: 0;
}
.visited-products .b2ag-carousel__content header {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8rem), calc(100% - 8rem) 100%, 0 100%);
  background-color: var(--color-main);
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-7) var(--spacing-6);
  color: var(--color-white);
}
.visited-products .b2ag-carousel__content .content {
  margin-top: calc(var(--spacing-8) * -1);
  padding: var(--spacing-3);
}

.calculator form,
.idf-home-banner .idf-home-banner__content,
.idf-category-card {
  border-radius: 0;
}

svg .aladin-logo {
  fill: transparent !important;
}

.authenticated .product-thumbnail__image {
  width: 14rem;
  height: 12rem;
}

.pHeader {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, var(--idf-color-main-400), var(--gradient-default-lighter));
  color: var(--color-text);
  min-height: 70px;
  box-shadow: 0 0 5px 5px rgba(97, 94, 98, 0.15);
  z-index: 100;
  position: sticky;
}

.pMinimalFooter {
  display: flex;
  background: linear-gradient(90deg, #358278, #23af7d);
  color: var(--color-white);
  font-size: var(--font-size-m);
  border: 1px solid var(--color-border-light);
}
.pMinimalFooter .pMinimalFooter__container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-right: 15px;
  padding-left: 15px;
  gap: 0.5rem;
}
.pMinimalFooter .footer__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 2em;
  margin-bottom: 2em;
  text-align: center;
  flex-basis: 20%;
  gap: 1.4rem;
}