/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* =========================
   STYLES PAR DÉFAUT (IMPORTANT)
========================= */


html, body {
  font-family: var(--font-primary);
}

a {
  font-family: inherit;
}

p {
    line-height: initial!important;
}

h1 {
  font-family: var(--font-primary);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--line-tight);
  margin-bottom: 16px;
}

h2 {
  font-family: var(--font-primary);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--line-tight);
  margin-bottom: 14px;
}

h3 {
  font-family: var(--font-primary);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--line-medium);
}

p {
  font-family: var(--font-primary);
  margin-bottom: 16px;
}

p:last-child {
  margin-bottom: 0;
}

/* =========================
   1. VARIABLES TYPO
========================= */

:root {
  --font-primary: 'Quicksand', sans-serif;
  --font-accent: 'Prata', serif;

  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 28px;
  --text-h4: 22px;
  --text-body: 16px;
  --text-small: 14px;

  --line-tight: 1.2;
  --line-medium: 1.4;
  --line-relaxed: 1.6;
}


/* =========================
   2. TITRES
========================= */

.h1 {
  font-family: var(--font-primary);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--line-tight);
  margin-bottom: 16px;
}

.h2 {
  font-family: var(--font-primary);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--line-tight);
  margin-bottom: 14px;
}

.h3 {
  font-family: var(--font-primary);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--line-medium);
  margin-bottom: 12px;
}

.h4 {
  font-family: var(--font-primary);
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: var(--line-medium);
  margin-bottom: 10px;
}


/* =========================
   3. TEXTE
========================= */

.text-body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--line-relaxed);
  margin-bottom: 16px;
}

.text-small {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  line-height: var(--line-medium);
}


/* =========================
   4. TEXTE ACCENT (PRATA)
========================= */

.text-accent {
  font-family: var(--font-accent);
  font-size: 20px;
  line-height: var(--line-relaxed);
}


/* =========================
   5. UTILITAIRES TEXTE
========================= */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: 700;
}

.text-regular {
  font-weight: 400;
}


/* =========================
   6. LARGEUR DE LECTURE
========================= */

.text-container {
  max-width: 65ch;
}


/* =========================
   7. RESPONSIVE
========================= */

@media (max-width: 768px) {
  :root {
    --text-h1: 32px;
    --text-h2: 26px;
    --text-h3: 22px;
    --text-h4: 20px;
  }
}



/* =========================
   OVERRIDE BRICKS CONTAINER
========================= */




.brxe-container {
  width: 1430px;
  margin-left: auto;
  margin-right: auto;
}

.brxe-container.full-width{
  width: 100%;
}

@media (max-width: 768px) {
  .brxe-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.full{
        max-width: 100%;
}

.marquee {
   overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
}


.marquee.marquee2{
    margin-top: 25px;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll 30s linear infinite;
}

.marquee.marquee2 .marquee-track {
  animation: scroll 60s linear infinite;
}

.marquee-track > div {
    white-space: nowrap;  
  display: inline-block;
 
}

.marquee-track .separator{
    padding: 0px 40px;
}

.msg::before {
       content: "♡";
    color: #fed760;
    font-size: 19px;
    margin-right: 8px;
	    display: inline-block;
    transform: translateY(2px);
}

.msg-after::before {
       content: "♡";
    color: #ff8cab;
    font-size: 19px;
    margin-left: 8px;
	    display: inline-block;
    transform: translateY(2px);
}

/*.brxe-logo:after{
content:url(https://woofyou.fr/wp-content/themes/bricks-child/elements/coeur-transparent.png);
    position: absolute;
    display: block;
        top: -20px;
    right: -42px;
}*/




.brxe-logo.brxw-footer-03__logo:after{
content:url(https://woofyou.fr/wp-content/themes/bricks-child/elements/coeur-transparent-footer.png);
    position: absolute;
    display: block;
     top: -9px;
    right: -45px;
}




#brxe-flmkkr h2:after,
#brxe-ldkmfr h1:after
{
content:url(https://woofyou.fr/wp-content/themes/bricks-child/elements/coeur-transparent.png);
    position: absolute;
    display: block;
    bottom: -18px;
    right: 24px;
}

@media (max-width: 991px) {
#brxe-ldkmfr h1:after{
    bottom: -27px;
    right: 5px;
}
#brxe-flmkkr h2:after{
            bottom: 0px;
        left: 267px;
}
}

@media (max-width: 767px) {

#brxe-flmkkr h2:after{
               bottom: -6px;
        left: 269px;
    }
	}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee {
  display: flex;
  align-items: center;
  height: 50px;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}


.product-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-thumb .img-main,
.product-thumb .img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-thumb .img-main img,
.product-thumb .img-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-thumb .img-main {
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.product-thumb .img-hover {
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.product-thumb:hover .img-main {
  opacity: 0;
}

.product-thumb:hover .img-hover {
  opacity: 1;
}

.product-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumb .img-hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-thumb:hover .img-hover {
  opacity: 1;
}
/*

.brxe-slider-nested .splide__arrows {
    position: absolute;
        top: 0px;
    right: -37px;
    width: auto;
    display: flex;
    gap: 10px;
}

.brxe-slider-nested .splide__arrow {
    position: static; 
    transform: none;
}
*/

/* =========================================================
   SECTION 3 COLONNES - ALIGNEMENT SUR LA HAUTEUR DE LA COLONNE DROITE
   ========================================================= */

/* Conteneur global */
#brxe-ohsowi {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 50px !important;
}

/* Ligne interne qui contient réellement les 3 colonnes */
#brxe-pxxdlh {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  gap: 30px !important;
  min-width: 0;
}

/* Les 3 colonnes */
#brxe-izjzqa,
#brxe-pccerz,
#brxe-xyewat {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0;
}

/* Largeurs des colonnes */
#brxe-izjzqa {
  width: 32% !important;
}

#brxe-pccerz {
  width: 40% !important;
}

#brxe-xyewat {
  width: 28% !important;
}

/* =========================
   COLONNE GAUCHE
   ========================= */

/* Bloc texte du haut */
#brxe-wfzmta {
  flex: 0 0 auto !important;
}

/* Image du bas : elle prend tout l'espace restant */
#brxe-cpdmua {
  display: block !important;
  width: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  align-self: stretch !important;
}

/* =========================
   COLONNE CENTRE
   ========================= */

#brxe-pccerz {
  gap: 20px !important;
}

/* Grande image du haut */
#brxe-ekyukc {
  display: block !important;
  width: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  align-self: stretch !important;
}

/* Bloc des 2 images du bas */
#brxe-oyafey {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 20px !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* Les 2 images du bas */
#brxe-fzlono,
#brxe-kpcpuj {
  display: block !important;
  width: calc(50% - 10px) !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  align-self: stretch !important;
}

/* =========================
   COLONNE DROITE
   ========================= */

#brxe-xyewat {
  gap: 20px !important;
  justify-content: flex-start !important;
}

/* Les icon boxes gardent leur hauteur naturelle */
#brxe-dmrezr,
#brxe-cghmku,
#brxe-pchuoz {
  flex: 0 0 auto !important;
  width: 100% !important;
}

/* =========================
   CORRECTION IMPORTANTE IMAGES BRICKS
   ========================= */

/* On neutralise le height:auto générique de Bricks sur cette section */
#brxe-ohsowi img {
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
}


.brxw-article-card-02__media.brxe-image::before{
display:none;
}

.brxw-article-card-02:hover .brxw-article-card-02__media {
    transform: none!important;
}

.brxw-article-card-02:hover .brxw-article-card-02__media img {
     transform: scale(1.1); 
}


/* CONTENEUR */
.bloc-categorie .brxe-block {
  display: block;
  overflow: hidden;
  position: relative;
  text-align:center;
}

/* IMAGE */
.bloc-categorie .brxe-block img {
  transition: transform 0.4s ease, opacity 0.4s ease;
  display: block;
  width: 100%;
}

/* TITRE */
.bloc-categorie .brxe-block h3 {
  position: relative;
  display: inline-block;
}

/* FLECHE (after) */
.bloc-categorie .brxe-block h3::after {
  content: "➞";
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* 🔥 HOVER GLOBAL */
.bloc-categorie .brxe-block:hover img {
  transform: scale(1.05);
  opacity: 0.8;
}

.bloc-categorie .brxe-block:hover h3::after {
  transform: translateX(5px);
}

.bloc-categorie .brxe-image{
  overflow:hidden;
}

.bloc-categorie .brxe-block h3 {
  position: relative;
  display: inline-block;
   z-index: 2; /* important */
}

/* TRAIT */
.bloc-categorie .brxe-block h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
      width: calc(100% - 22px);
  height: 2px;
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;

  z-index: 1;
}

/* HOVER */
.brxe-block:hover h3::before {
  transform: scaleX(1);
}




.badges {
    position: absolute;
    top: 12px;
    left: -6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
    align-items: flex-start;

}

.badge {
 
	
	 position: relative !important;

    display: inline-block;

    font-size: 13px;
    font-weight: 600;

    padding: 6px 12px;

    border-radius: 999px;
    line-height: 1.2;

    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
	   border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* couleurs proches de ton inspiration */



.badge-new {
    background: #fb6462;
    color: #fff;
}

.badge-promo {
    background: #1746D0;
    color: white;
}







.badge {

    border-bottom: var(--f) solid #0005;
    border-right: var(--r) solid #0000;
    clip-path: polygon(calc(100% - var(--r)) 0, 0 0, 0 calc(100% - var(--f)), var(--f) 100%, var(--f) calc(100% - var(--f)), calc(100% - var(--r)) calc(100% - var(--f)), 100% calc(50% - var(--f) / 2));
}
.badge {
    --s: 1.8em;
    --d: .8em;
    --c: .8em;
    --f: .5em;
    --r: .8em;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.splide__track {
    padding-left: 10px!important;
    padding-right: 10px!important;
}

.btn-lien:hover,
.bricks-button:hover{
    background-color: #ffffff00!important;
	    transition: all 0.3s ease;
		transform: translateX(2px);
		color:#053185!important;
		cursor:pointer;
}

.bricks-button-2:hover{
    background-color: #053185!important;
	    transition: all 0.3s ease;
		transform: translateX(2px);
		color:white!important;
		cursor:pointer;
}



.btn-lien,
.bricks-button{
    background: #ffffff00;
	    transition: all 0.3s ease;
		transform: translateX(0px);
}


.bricks-button.btn-white:hover {
    background-color: #053185 !important;
    color: white !important;
}


.cart-toast {
	
	background: #ffffff;
    color: #173C9C;

    border: 2px solid #173C9C;
    box-shadow: 0 12px 35px rgba(0,0,0,.22);
	
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 18px;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 600;


    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;

    transition: opacity .25s ease, transform .25s ease;
}

.cart-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cart-toast a {
    color: #ff5f7a;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 767px) {
    .cart-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        justify-content: space-between;
    }
}


body:not(.woocommerce) .product_type_simple, body:not(.woocommerce) .product_type_variable {
    min-height: 20px!important;
}

.button.product_type_variable .ti-shopping-cart.icon{
    display:none;
}

#brxe-aqckzh-track{
       padding-bottom: 20px!important;
}


.brxe-zndmsb .brxe-esetnh:hover {
    color: white!important;
	transition: all 0.3s ease;
}

.brxe-esetnh:hover a.button[data-product_id] {
    background-color: #fe9593!important;
	    transition: all 0.3s ease;
    transform: translateX(2px);
}

@media (max-width: 478px) {
.badges {
    left: 10px;
}
}

@media (min-width: 1700px) and (max-width: 1945px) {
#brxe-glmelb {
    height: 100vh!important;
	    background-size: 100% auto!important;
	
}
}


@media (min-width: 1945px) {
#brxe-glmelb {
	    background-size: contain!important;
		height: 100!%important;
	
}
}





@media (min-width: 1221px) and (max-width: 1600px) {
#brxe-izgmki {
    padding-right: 2%!important;
    padding-left: 2%!important;
}
}

@media (max-width: 1600px) {
.brxe-zndmsb .brxe-nidbrv.brxe-container {
    flex-direction: column!important;
}
.brxe-zndmsb .brxe-hakcli.brxe-button{
    width: auto!important;
    padding-right: 16px!important;
    padding-left: 16px!important;
	}
	
.brxe-zndmsb .brxe-esetnh.brxe-product-add-to-cart {
    width: auto!important;
	margin-top:10px;
}
}


@media (min-width: 1221px) and (max-width: 1500px) {
#brxe-rffdve .brxe-text-basic {
    font-size: 14px!important;
    line-height: 20px!importantimportant;
}
#brxe-rffdve img{
width:40px!important;
}

#brxe-rffdve {
    padding-right: 6%!important;
    padding-left: 6%!important;
}
}


@media (min-width: 1221px) and (max-width: 1430px) {
#brxe-ekehie {
    font-size: 16px!important;
    column-gap: 7px!important;
}
#brxe-12b1ed {
    padding-right: 3%;
    padding-left: 3%;
}
}

@media (min-width: 992px) and (max-width: 1220px) {
#brxe-qkxncz::before,
#brxe-ffsekj .cart-icon {
    width: 35px!important;
    height: 35px!important;
}

}

@media (max-width: 991px) {
#brxe-qkxncz::before,
#brxe-ffsekj .cart-icon {
    width: 25px!important;
    height: 25px!important;
}

}



/* =========================================================
   OPTIONS DU PRODUIT — WOOCOMMERCE / BRICKS
   Classe à placer sur l’élément Bricks « Ajouter au panier » :
   options-produit
   ========================================================= */

.options-produit {
  --option-blue: #0b3d87;
  --option-blue-light: #cbd8e9;
  --option-blue-hover: #9eb4d1;

  --option-red: #ff5e62;
  --option-red-hover: #ee5055;

  --option-grey-disabled: #91908d;
  --option-green: #3ec76b;

  --option-radius: 14px;
}


/* =========================================================
   TABLEAU DES VARIATIONS
   Couleur et Taille sont placées l’une sous l’autre
   ========================================================= */

.options-produit table.variations {
  display: block;
  width: 100%;
  margin: 0 0 32px !important;
  padding: 0;
  border: 0;
  border-collapse: collapse;
}

.options-produit table.variations tbody {
  display: block;
  width: 100%;
}

.options-produit table.variations tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;

  width: 100%;
  margin: 0 0 30px !important;
  padding: 0 !important;
}

.options-produit table.variations tr:last-child {
  margin-bottom: 0 !important;
}

.options-produit table.variations th.label,
.options-produit table.variations td.value {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  border: 0;
  text-align: left;
}


/* =========================================================
   TITRES : COULEUR ET TAILLE
   ========================================================= */

.options-produit table.variations th.label label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  margin: 0;
  padding: 0;

  color: var(--option-blue);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}


/* Nom ajouté dynamiquement après Couleur */

.options-produit .selected-color-name {
  color: var(--option-blue);
  font-weight: 500;
}


/* =========================================================
   CONTENEUR COMMUN AUX PASTILLES
   ========================================================= */

.options-produit .bricks-variation-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  list-style: none;
}

.options-produit .bricks-variation-swatches li {
  box-sizing: border-box;
  margin: 0 !important;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.options-produit .bricks-variation-swatches li:hover {
  transform: translateY(-1px);
}


/* =========================================================
   PASTILLES DE COULEUR OU D’IMAGE
   ========================================================= */

.options-produit
.bricks-variation-swatches.bricks-swatch-image
li {
  display: block;

  width: 60px;
  height: 60px;
  padding: 3px;

  overflow: hidden;

  border: 2px solid transparent;
  border-radius: 50%;

  background: transparent;
}

.options-produit
.bricks-variation-swatches.bricks-swatch-image
li img {
  display: block;

  width: 100%;
  height: 100%;
  margin: 0;

  border: 1px solid var(--option-blue-light);
  border-radius: 50%;

  object-fit: cover;
}


/* Survol d’une couleur */

.options-produit
.bricks-variation-swatches.bricks-swatch-image
li:hover {
  border-color: var(--option-blue-hover);
}


/* Couleur sélectionnée */

.options-produit
.bricks-variation-swatches.bricks-swatch-image
li.bricks-swatch-selected,
.options-produit
.bricks-variation-swatches.bricks-swatch-image
li.selected {
  border-color: var(--option-blue);

  box-shadow:
    0 0 0 2px rgba(11, 61, 135, 0.13);
}


/* =========================================================
   BOUTONS DE TAILLE
   Structure détectée :
   .bricks-variation-swatches.bricks-swatch-label
   ========================================================= */

.options-produit
.bricks-variation-swatches.bricks-swatch-label {
  align-items: stretch;
  gap: 14px;
}

.options-produit
.bricks-variation-swatches.bricks-swatch-label
li {
  display: inline-flex;
  flex: 0 1 190px;
  align-items: center;
  justify-content: center;

  min-width: 150px;
  min-height: 58px;

  padding: 12px 22px;

  border: 2px solid var(--option-blue-light);
  border-radius: var(--option-radius);

  background: transparent;
  color: var(--option-blue);

  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}


/* Survol d’une taille */

.options-produit
.bricks-variation-swatches.bricks-swatch-label
li:hover {
  border-color: var(--option-blue-hover);
  background-color: rgba(11, 61, 135, 0.025);
}


/* Taille sélectionnée */

.options-produit
.bricks-variation-swatches.bricks-swatch-label
li.bricks-swatch-selected,
.options-produit
.bricks-variation-swatches.bricks-swatch-label
li.selected {
  border-color: var(--option-blue);

  background-color: transparent;
  color: var(--option-blue);

  box-shadow:
    0 0 0 1px rgba(11, 61, 135, 0.12);
}


/* =========================================================
   VARIATIONS INDISPONIBLES
   ========================================================= */

.options-produit
.bricks-variation-swatches
li.disabled,
.options-produit
.bricks-variation-swatches
li.bricks-swatch-disabled,
.options-produit
.bricks-variation-swatches
li[aria-disabled="true"] {
  position: relative;

  cursor: not-allowed;
  opacity: 0.4;
  transform: none;
}

.options-produit
.bricks-variation-swatches
li.disabled::after,
.options-produit
.bricks-variation-swatches
li.bricks-swatch-disabled::after,
.options-produit
.bricks-variation-swatches
li[aria-disabled="true"]::after {
  position: absolute;
  top: 50%;
  left: 8%;

  width: 84%;
  height: 1px;

  background: currentColor;

  content: "";
  transform: rotate(-30deg);
}


/* =========================================================
   MENU DÉROULANT DE SECOURS
   Utile si un autre attribut reste sous forme de select
   ========================================================= */

.options-produit table.variations select {
  display: block;

  width: 100%;
  height: 60px;

  margin: 0;
  padding: 0 52px 0 20px;

  border: 2px solid var(--option-blue-light);
  border-radius: var(--option-radius);
  outline: none;

  background-color: transparent;
  color: var(--option-blue);

  font-family: inherit;
  font-size: 16px;
  font-weight: 500;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--option-blue) 50%
    ),
    linear-gradient(
      135deg,
      var(--option-blue) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 25px) 50%,
    calc(100% - 18px) 50%;

  background-size: 7px 7px;
  background-repeat: no-repeat;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.options-produit table.variations select:hover {
  border-color: var(--option-blue-hover);
}

.options-produit table.variations select:focus {
  border-color: var(--option-blue);

  box-shadow:
    0 0 0 3px rgba(11, 61, 135, 0.1);
}


/* =========================================================
   LIEN « EFFACER »
   ========================================================= */

.options-produit .reset_variations {
  display: inline-block;

  margin-top: 10px;

  color: var(--option-blue);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;

  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =========================================================
   DISPONIBILITÉ DU PRODUIT
   ========================================================= */

.options-produit .woocommerce-variation-availability {
  width: 100%;
  margin: 20px 0;
}

.options-produit
.woocommerce-variation-availability
.stock {
  display: flex;
  align-items: center;
  gap: 9px;

  margin: 0;

  color: var(--option-blue);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
}

.options-produit
.woocommerce-variation-availability
.stock::before {
  flex: 0 0 auto;

  width: 13px;
  height: 13px;

  border-radius: 50%;

  background: var(--option-green);

  box-shadow:
    0 0 0 2px rgba(62, 199, 107, 0.12);

  content: "";
}

.options-produit
.woocommerce-variation-availability
.stock.out-of-stock::before {
  background: #d94848;

  box-shadow:
    0 0 0 2px rgba(217, 72, 72, 0.12);
}


/* =========================================================
   QUANTITÉ + BOUTON AJOUTER AU PANIER
   ========================================================= */

.options-produit
.woocommerce-variation-add-to-cart,
.options-produit
.variations_button {
  display: grid !important;
  grid-template-columns: 195px minmax(0, 1fr);
  align-items: stretch;
  gap: 26px;

  width: 100%;
}


/* =========================================================
   SÉLECTEUR DE QUANTITÉ
   ========================================================= */

.options-produit form.cart .quantity {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;

  width: 195px !important;
  height: 66px;

  margin: 0 !important;

  overflow: hidden;

  border: 2px solid var(--option-blue-light);
  border-radius: var(--option-radius);

  background: transparent;
}

.options-produit form.cart .quantity .minus,
.options-produit form.cart .quantity .plus,
.options-produit form.cart .quantity .qty {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100% !important;
  min-width: 0 !important;

  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0;
  border-radius: 0;
  outline: none;

  background: transparent;
  color: var(--option-blue);

  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-align: center;

  box-shadow: none;
}

.options-produit form.cart .quantity .minus {
  border-right: 1px solid #b9c4d0;
}

.options-produit form.cart .quantity .plus {
  border-left: 1px solid #b9c4d0;
}

.options-produit form.cart .quantity .minus,
.options-produit form.cart .quantity .plus {
  cursor: pointer;
}

.options-produit form.cart .quantity .minus:hover,
.options-produit form.cart .quantity .plus:hover {
  background-color: rgba(11, 61, 135, 0.05);
}

.options-produit form.cart .quantity .qty {
  appearance: textfield;
  -moz-appearance: textfield;
}

.options-produit
form.cart
.quantity
.qty::-webkit-inner-spin-button,
.options-produit
form.cart
.quantity
.qty::-webkit-outer-spin-button {
  margin: 0;

  appearance: none;
  -webkit-appearance: none;
}


/* =========================================================
   BOUTON AJOUTER AU PANIER
   ========================================================= */


.bt-single-product-woof__product-add-to-cart.brxe-product-add-to-cart.options-produit .cart .single_add_to_cart_button {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 66px;

  margin: 0 !important;
  padding: 15px 30px;

  border: 0;
  border-radius: var(--option-radius);

  background-color: var(--option-red)!important;
  color: #ffffff;

  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;

  cursor: pointer;
  box-shadow: none;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.options-produit
form.cart
.single_add_to_cart_button:hover {
  background: var(--option-red-hover);
  transform: translateY(-1px);
}


/* Bouton désactivé tant que toutes les options ne sont pas choisies */

.options-produit
form.cart
.single_add_to_cart_button.disabled,
.options-produit
form.cart
.single_add_to_cart_button:disabled {
  background: var(--option-grey-disabled) !important;

  cursor: not-allowed;
  opacity: 1;
  transform: none;
}


/* =========================================================
   RESPONSIVE TABLETTE
   ========================================================= */

@media (max-width: 991px) {

  .options-produit
  .bricks-variation-swatches.bricks-swatch-label
  li {
    flex-basis: 175px;
    min-width: 140px;
  }

  .options-produit
  .woocommerce-variation-add-to-cart,
  .options-produit
  .variations_button {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
  }

  .options-produit form.cart .quantity {
    width: 180px !important;
  }
}


/* =========================================================
   RESPONSIVE SMARTPHONE
   ========================================================= */

@media (max-width: 767px) {

  .options-produit table.variations {
    margin-bottom: 26px !important;
  }

  .options-produit table.variations tr {
    gap: 12px;
    margin-bottom: 25px !important;
  }

  .options-produit table.variations th.label label {
    font-size: 17px;
  }


  /* Couleurs */

  .options-produit
  .bricks-variation-swatches.bricks-swatch-image
  li {
    width: 54px;
    height: 54px;
  }


  /* Tailles : deux boutons par ligne */

  .options-produit
  .bricks-variation-swatches.bricks-swatch-label {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .options-produit
  .bricks-variation-swatches.bricks-swatch-label
  li {
    width: 100%;
    min-width: 0;
    min-height: 54px;

    padding: 10px 12px;

    font-size: 15px;
  }


  /* Quantité et bouton l’un sous l’autre */

  .options-produit
  .woocommerce-variation-add-to-cart,
  .options-produit
  .variations_button {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .options-produit form.cart .quantity {
    width: 195px !important;
    max-width: 100%;
    height: 60px;
  }

  .options-produit
  form.cart
  .single_add_to_cart_button {
    width: 100%;
    min-height: 60px;
  }
}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 380px) {

  .options-produit
  .bricks-variation-swatches.bricks-swatch-label {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Le prix exact est désormais affiché dans le prix principal. */
.options-produit .woocommerce-variation-price {
  display: none !important;
}


/* =========================================================
   GUIDE DES TAILLES
   ========================================================= */

.guide-tailles-produit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;

  width: max-content;
  max-width: 100%;

  margin-top: 14px;
  padding: 0;

  border: 0;
  background: transparent;

  color: #0b3d87;

  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;

  cursor: pointer;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.guide-tailles-produit:hover {
  color: #062a61;
  opacity: 0.8;
}


/* Le lien Effacer reste sous le guide */

.options-produit .reset_variations {
  display: block;
  width: max-content;
  margin-top: 10px;
}


/* Smartphone */

@media (max-width: 767px) {

  .guide-tailles-produit {
    margin-top: 12px;
    font-size: 14px;
  }
}

.reset_variations {
 display:none!important;
  }
  
  .brxe-div.guide-tailles-produit{
      text-decoration: none; 
       }
	   
/* =========================================================
   BOUTON LISTE D’ENVIES — YITH
   Classe Bricks sur l’élément Shortcode :
   bouton-liste-envies
   ========================================================= */


/* Élément Bricks contenant le shortcode */

.bouton-liste-envies {
  display: block;
  width: 100%;
  margin-top: 16px;
  background-color:white;
}


/* Conteneur généré par YITH */

.bouton-liste-envies
.yith-add-to-wishlist-button-block {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Bouton principal */

.bouton-liste-envies
button.yith-wcwl-add-to-wishlist-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 10px 18px !important;

  border: 2px solid #cbd8e9 !important;
  border-radius: 14px !important;

  background: transparent !important;
  background-color: transparent !important;

  color: #0b3d87 !important;

  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;

  box-shadow: none !important;
  cursor: pointer !important;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease !important;
}


/* Survol */

.bouton-liste-envies
button.yith-wcwl-add-to-wishlist-button:hover {
  border-color: #0b3d87 !important;
  background-color: rgba(11, 61, 135, 0.04) !important;
  color: #0b3d87 !important;
  transform: translateY(-1px);
}


/* Clic */

.bouton-liste-envies
button.yith-wcwl-add-to-wishlist-button:active {
  transform: translateY(0);
}


/* Navigation au clavier */

.bouton-liste-envies
button.yith-wcwl-add-to-wishlist-button:focus-visible {
  outline: none !important;

  border-color: #0b3d87 !important;

  box-shadow:
    0 0 0 3px rgba(11, 61, 135, 0.12) !important;
}


/* Conteneur de l’icône cœur */

.bouton-liste-envies
.yith-wcwl-icon-svg__wrapper {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center !important;
  justify-content: center !important;

  width: 20px !important;
  height: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
}


/* Icône cœur */

.bouton-liste-envies
svg.yith-wcwl-icon {
  display: block !important;

  width: 20px !important;
  height: 20px !important;

  margin: 0 !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;

  color: inherit !important;
}


/* Texte du bouton */

.bouton-liste-envies
.yith-wcwl-add-to-wishlist-button__label {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}


/* =========================================================
   PRODUIT DÉJÀ AJOUTÉ À LA LISTE D’ENVIES
   Les classes peuvent varier selon la version de YITH
   ========================================================= */

.bouton-liste-envies
button.yith-wcwl-add-to-wishlist-button.added,
.bouton-liste-envies
button.yith-wcwl-add-to-wishlist-button--added {
  border-color: #0b3d87 !important;
  background-color: rgba(11, 61, 135, 0.06) !important;
  color: #0b3d87 !important;
}


/* Si YITH génère ensuite un lien "Voir la liste d’envies" */

.bouton-liste-envies
a {
  color: #0b3d87;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

  .bouton-liste-envies {
    margin-top: 14px;
  }

  .bouton-liste-envies
  button.yith-wcwl-add-to-wishlist-button {
    min-height: 46px !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
  }

  .bouton-liste-envies
  .yith-wcwl-icon-svg__wrapper,
  .bouton-liste-envies
  svg.yith-wcwl-icon {
    width: 19px !important;
    height: 19px !important;
  }
}


/* =========================================================
   GALERIE PRODUIT BRICKS / WOOCOMMERCE

   Configuration :
   - miniatures à gauche ;
   - curseur natif Bricks activé ;
   - grande image carrée ;
   - object-fit: cover.
   ========================================================= */

.galerie-produit.thumbnail-slider {
  --gallery-blue: #0b3d87;
  --gallery-border: #cbd8e9;
  --gallery-background: #ffffff;

  --gallery-radius: 14px;

  --gallery-column-gap: 20px;
  --gallery-thumb-gap: 14px;
  --gallery-thumb-size: 110px;

  --gallery-ratio: 1 / 1;

  display: grid !important;

  grid-template-columns:
    var(--gallery-thumb-size)
    minmax(0, 1fr);

  grid-template-rows: minmax(0, auto);

  align-items: stretch;
  gap: var(--gallery-column-gap);

  width: 100%;
  min-width: 0;
}


/* =========================================================
   1. GRANDE GALERIE À DROITE
   ========================================================= */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery {
  position: relative;

  grid-column: 2;
  grid-row: 1;

  width: 100% !important;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   2. MASQUER LES MINIATURES NATIVES WOOCOMMERCE

   Bricks crée son propre curseur de miniatures.
   Les miniatures WooCommerce natives ne doivent donc pas
   constituer une seconde colonne.
   ========================================================= */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ol.flex-control-thumbs {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/* =========================================================
   3. GRANDE IMAGE CARRÉE
   ========================================================= */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> .flex-viewport {
  position: relative;

  width: 100% !important;
  height: auto !important;

  aspect-ratio: var(--gallery-ratio);

  margin: 0 !important;

  overflow: hidden !important;

  border-radius: var(--gallery-radius);
  background: var(--gallery-background);
}


/* Wrapper du slider principal */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> .flex-viewport
> .woocommerce-product-gallery__wrapper {
  height: 100% !important;
}


/* Chaque diapositive */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> .flex-viewport
.woocommerce-product-gallery__image {
  height: 100% !important;

  overflow: hidden;

  border-radius: var(--gallery-radius);
}


/* Lien entourant chaque image */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> .flex-viewport
.woocommerce-product-gallery__image
> a {
  display: block;

  width: 100%;
  height: 100%;
}


/* Grande image */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> .flex-viewport
.woocommerce-product-gallery__image
> a
> img:not(.zoomImg) {
  display: block;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0;

  border-radius: var(--gallery-radius);

  object-fit: cover;
  object-position: center;
}


/* Image technique utilisée par le zoom WooCommerce */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
.zoomImg {
  pointer-events: none;
}


/* =========================================================
   4. CURSEUR NATIF DE MINIATURES BRICKS À GAUCHE
   ========================================================= */

.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider {
  position: relative;

  grid-column: 1;
  grid-row: 1;

  align-self: stretch;

  width: var(--gallery-thumb-size) !important;
  min-width: var(--gallery-thumb-size) !important;

  height: 100%;
  min-height: 0;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/*
 * Fenêtre du curseur.
 *
 * Elle ne doit pas être transformée en zone de scroll natif :
 * FlexSlider gère le défilement en appliquant un transform
 * directement sur .brx-thumbnail-slider-wrapper.
 */

.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> .flex-viewport {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;

  overflow: hidden !important;
}


/*
 * Wrapper déplacé par FlexSlider.
 *
 * Ne jamais ajouter ici :
 * transform: none !important;
 *
 * Bricks doit pouvoir modifier librement la propriété
 * transform inscrite directement dans l’attribut style.
 */

.galerie-produit.thumbnail-slider
.brx-thumbnail-slider-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;

  width: 100% !important;
  height: auto !important;

  gap: 12px;

  margin: 0 !important;
  padding: 0 !important;

  will-change: transform;
}


/* Une miniature */

.galerie-produit.thumbnail-slider
.brx-thumbnail-slider-wrapper
> .woocommerce-product-gallery__image {
  display: block !important;

  flex: 0 0 var(--gallery-thumb-size) !important;

  float: none !important;

  width: var(--gallery-thumb-size) !important;
  min-width: var(--gallery-thumb-size) !important;

  height: var(--gallery-thumb-size) !important;
  min-height: var(--gallery-thumb-size) !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  border-radius: var(--gallery-radius);
  background: var(--gallery-background);

  cursor: pointer;
}


/* Lien de la miniature */

.galerie-produit.thumbnail-slider
.brx-thumbnail-slider-wrapper
> .woocommerce-product-gallery__image
> a {
  display: block;

  width: 100%;
  height: 100%;
}


/* Image de la miniature */

.galerie-produit.thumbnail-slider
.brx-thumbnail-slider-wrapper
> .woocommerce-product-gallery__image
img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 2px solid var(--gallery-border) !important;
  border-radius: var(--gallery-radius) !important;

  object-fit: cover;
  object-position: center;

  opacity: 1 !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}


/* Survol */

.galerie-produit.thumbnail-slider
.brx-thumbnail-slider-wrapper
> .woocommerce-product-gallery__image:hover
img {
  border-color: #9eb4d1 !important;
  transform: translateY(-1px);
}


/* Miniature active */

.galerie-produit.thumbnail-slider
.brx-thumbnail-slider-wrapper
> .woocommerce-product-gallery__image.flex-active-slide
img {
  border-color: var(--gallery-blue) !important;

  box-shadow:
    0 0 0 2px rgba(11, 61, 135, 0.12);

  opacity: 1 !important;
}


/* =========================================================
   5. FLÈCHES NATIVES DU CURSEUR DE MINIATURES

   Bricks / FlexSlider conserve la gestion des clics.
   ========================================================= */

.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> ul.flex-direction-nav {
  position: absolute;

  inset: 0;
  z-index: 30;

  width: 100%;
  height: 100%;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none;

  list-style: none !important;
}


.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> ul.flex-direction-nav
> li {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


/* Boutons haut et bas */

.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> ul.flex-direction-nav
a {
  position: absolute !important;

  left: 50% !important;
  z-index: 31;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 38px !important;
  height: 38px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--gallery-blue) !important;

  font-size: 0 !important;
  line-height: 1;

  opacity: 1 !important;
  visibility: visible !important;

  box-shadow:
    0 3px 12px rgba(11, 61, 135, 0.18) !important;

  transform: translateX(-50%) !important;

  pointer-events: auto;
  cursor: pointer;
}


/* Masquer les icônes Bricks d’origine */

.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> ul.flex-direction-nav
a
i {
  display: none !important;
}


/* Flèche du haut */

.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> ul.flex-direction-nav
.flex-prev {
  top: 8px !important;
  right: auto !important;
  bottom: auto !important;
}


.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> ul.flex-direction-nav
.flex-prev::before {
    display: block;
    content: "⌃";
    color: var(--gallery-blue);
    font-size: 25px;
    line-height: 1;
    font-weight: 600;
    transform: translateY(5px);
    font-family: Quicksand, sans-serif;
}


/* Flèche du bas */

.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> ul.flex-direction-nav
.flex-next {
  top: auto !important;
  right: auto !important;
  bottom: 8px !important;
}


.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> ul.flex-direction-nav
.flex-next::before {
  display: block;

  content: "⌄";
font-weight: 600;
  color: var(--gallery-blue);

  font-size: 25px;
  line-height: 1;

  transform: translateY(-10px);
  
  
}


/*
 * État inactif réellement utilisé par FlexSlider.
 *
 * L’ancienne classe thumb-scroll-disabled dépendait de notre
 * ancien JavaScript et ne doit plus être utilisée.
 */

.galerie-produit.thumbnail-slider
> .brx-product-gallery-thumbnail-slider
> ul.flex-direction-nav
a.flex-disabled {
  cursor: default;

  opacity: 0.3 !important;

  pointer-events: none;
}


/* =========================================================
   6. FLÈCHES DE LA GRANDE IMAGE
   ========================================================= */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav {
  position: absolute;

  top: 0;
  right: 0;
  left: 0;
  z-index: 20;

  width: 100%;
  aspect-ratio: var(--gallery-ratio);

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none;

  list-style: none !important;
}


.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
> li {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
a {
  position: absolute !important;

  top: 50% !important;
  z-index: 21;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 42px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: #ffffff !important;
  color: var(--gallery-blue) !important;

  font-size: 0 !important;
  line-height: 1;

  opacity: 1 !important;
  visibility: visible !important;

  box-shadow:
    0 0 10px 1px rgb(84 84 84 / 64%) !important;

  transform: translateY(-50%) !important;

  pointer-events: auto;
}


/* Chevrons */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
a::before {
  display: block;

  color: var(--gallery-blue);

  font-size: 42px !important;
  font-weight: 600;
  line-height: 1;

  margin-top: -8px;

  opacity: 1 !important;
}


.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
.flex-nav-prev
a::before {
  margin-right: 3px;
}


.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
.flex-nav-next
a::before {
  margin-left: 3px;
}


/* Précédent */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
.flex-prev {
  right: auto !important;
  left: 16px !important;
}


.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
.flex-prev::before {
  content: "‹";
}


/* Suivant */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
.flex-next {
  right: 16px !important;
  left: auto !important;
}


.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
.flex-next::before {
  content: "›";
}


/* Flèche principale inactive */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> ul.flex-direction-nav
a.flex-disabled {
  cursor: default;

  opacity: 0.4 !important;

  pointer-events: none;
}


/* =========================================================
   7. BOUTON DE ZOOM
   ========================================================= */

.galerie-produit.thumbnail-slider
> .woocommerce-product-gallery
> .woocommerce-product-gallery__trigger {
  top: 16px !important;
  right: 16px !important;
  z-index: 40;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #ffffff;
  color: var(--gallery-blue);

  box-shadow:
    0 3px 14px rgba(11, 61, 135, 0.13);
}


.woocommerce-product-gallery
.woocommerce-product-gallery__trigger::before {
  display: none !important;
}


/* =========================================================
   8. SMARTPHONE

   Grande image carrée en haut.
   Miniatures WooCommerce horizontales dessous.
   ========================================================= */

@media (max-width: 767px) {

  .galerie-produit.thumbnail-slider {
    display: block !important;
  }


  /* Masquer le curseur vertical Bricks */

  .galerie-produit.thumbnail-slider
  > .brx-product-gallery-thumbnail-slider {
    display: none !important;
  }


  /* Grande galerie sur toute la largeur */

  .galerie-produit.thumbnail-slider
  > .woocommerce-product-gallery {
    width: 100% !important;
  }


  /* Réafficher les miniatures natives sous l’image */

  .galerie-produit.thumbnail-slider
  > .woocommerce-product-gallery
  > ol.flex-control-thumbs {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 10px !important;

    width: 100% !important;
    height: auto !important;

    margin: 12px 0 0 !important;
    padding: 0 0 4px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    list-style: none !important;

    scrollbar-width: thin;
  }


  .galerie-produit.thumbnail-slider
  > .woocommerce-product-gallery
  > ol.flex-control-thumbs
  > li {
    display: block !important;

    flex: 0 0 76px !important;

    float: none !important;

    width: 76px !important;
    height: 76px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border-radius: 11px;
  }


  .galerie-produit.thumbnail-slider
  > .woocommerce-product-gallery
  > ol.flex-control-thumbs
  > li
  > img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    border: 2px solid var(--gallery-border) !important;
    border-radius: 11px !important;

    object-fit: cover;

    opacity: 1 !important;
  }


  .galerie-produit.thumbnail-slider
  > .woocommerce-product-gallery
  > ol.flex-control-thumbs
  > li
  > img.flex-active {
    border-color: var(--gallery-blue) !important;
  }


  /* Flèches principales */

  .galerie-produit.thumbnail-slider
  > .woocommerce-product-gallery
  > ul.flex-direction-nav
  a {
    width: 38px !important;
    height: 38px !important;
  }


  .galerie-produit.thumbnail-slider
  > .woocommerce-product-gallery
  > ul.flex-direction-nav
  .flex-prev {
    left: 12px !important;
  }


  .galerie-produit.thumbnail-slider
  > .woocommerce-product-gallery
  > ul.flex-direction-nav
  .flex-next {
    right: 12px !important;
  }
}



/* =========================================================
   BLOC DE RÉASSURANCE — FICHES PRODUIT
   ========================================================= */

.bloc-reassurance-produit {
    --reassurance-blue: #0b3d87;
    --reassurance-coral: #ff6265;
    --reassurance-border: #eadfd3;
    --reassurance-background: #fcf3eb;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    column-gap: clamp(20px, 3vw, 21px);
    row-gap: 20px;
    width: 100%;
    margin: 25px 0 0;
       padding: 18px 19px 18px 0px;
    border: 1px solid var(--reassurance-border);
    border-radius: 16px;
    background: var(--reassurance-background);
    box-shadow: 0 2px 10px rgba(31, 48, 72, 0.04);
}


/* =========================================================
   ÉLÉMENT INDIVIDUEL
   ========================================================= */

.bloc-reassurance-produit
.reassurance-produit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 0;

  margin: 0;
  padding: 0;
}


/* =========================================================
   ICÔNES
   ========================================================= */

.bloc-reassurance-produit
.reassurance-produit__icone {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

    width: auto;
    height: 28px;

  margin: 0;
  padding: 0;

  color: var(--reassurance-blue);
}






/* =========================================================
   TEXTE
   ========================================================= */

.bloc-reassurance-produit
.reassurance-produit__texte {
  margin: 0;
  padding: 0;

  color: var(--reassurance-blue);

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;

  text-align: left;
}


/* Supprime les marges que Bricks pourrait mettre
   sur le paragraphe interne */

.bloc-reassurance-produit
.reassurance-produit__texte
p {
  margin: 0;
}


/* =========================================================
   COULEURS OPTIONNELLES DES ICÔNES
   ========================================================= */

/*
 * Pour mettre certaines icônes en corail,
 * ajoute aussi cette classe sur l’élément Icône :
 *
 * reassurance-produit__icone--corail
 */

.bloc-reassurance-produit
.reassurance-produit__icone--corail {
  color: var(--reassurance-coral);
}


/* =========================================================
   TABLETTE
   Deux éléments par ligne
   ========================================================= */

@media (max-width: 991px) {

  .bloc-reassurance-produit {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 28px;
    row-gap: 22px;

    padding: 22px 28px;
  }

  .bloc-reassurance-produit
  .reassurance-produit {
    justify-content: flex-start;
  }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 600px) {

  .bloc-reassurance-produit {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 14px;
    row-gap: 22px;

    margin-top: 24px;
    padding: 20px 16px;

    border-radius: 14px;
  }

  .bloc-reassurance-produit
  .reassurance-produit {
    align-items: flex-start;
    gap: 9px;
  }

  .bloc-reassurance-produit
  .reassurance-produit__icone {
    width: 30px;
    height: 30px;
  }

  .bloc-reassurance-produit
  .reassurance-produit__icone
  svg {
    width: 27px;
    height: 27px;
  }

  .bloc-reassurance-produit
  .reassurance-produit__icone
  i {
    font-size: 26px;
  }

  .bloc-reassurance-produit
  .reassurance-produit__texte {
    font-size: 12.5px;
  }
}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 390px) {

  .bloc-reassurance-produit {
    grid-template-columns: minmax(0, 1fr);
  }

  .bloc-reassurance-produit
  .reassurance-produit {
    align-items: center;
  }
}



/* =========================================================
   BLOC « SÉLECTIONNÉ AVEC SOIN »
   ========================================================= */

.selection-soin {
  --selection-blue: #0b3d87;
  --selection-coral: #ff6265;
  --selection-pink: #fff0ed;
  --selection-border: #f0ddd6;

  width: 100%;

  padding:
    clamp(26px, 4vw, 50px)
    clamp(22px, 5vw, 58px);

  overflow: hidden;

  border: 1px solid var(--selection-border);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #fff6f2 0%,
      var(--selection-pink) 100%
    );
}


/* =========================================================
   TITRE DU BLOC
   ========================================================= */

.selection-soin__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;

  width: 100%;

  margin-bottom: 32px;
}


.selection-soin__titre {
  margin: 0;

  color: var(--selection-blue);

  font-family: inherit;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.15;
}


/* =========================================================
   IMAGE CŒUR À CÔTÉ DU TITRE
   Classe placée sur l’élément Image Bricks
   ========================================================= */

.selection-soin__coeur-titre {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: clamp(34px, 3.5vw, 48px);
  height: clamp(34px, 3.5vw, 48px);

  margin: 0;
  padding: 0;

  transform: rotate(-10deg);
}


.selection-soin__coeur-titre img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  margin: 0;

  object-fit: contain;
}


/* Si Bricks génère un élément figure autour de l’image */

.selection-soin__coeur-titre figure {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
}


/* =========================================================
   GRILLE IMAGE PRODUIT + CONTENU
   ========================================================= */

.selection-soin__grille {
  display: grid;

  grid-template-columns:
    minmax(230px, 0.8fr)
    minmax(0, 1.4fr);

  align-items: center;

  gap: clamp(30px, 5vw, 58px);

  width: 100%;
}


/* =========================================================
   IMAGE PRODUIT
   ========================================================= */

.selection-soin__media {
  width: 100%;
  aspect-ratio: 3 / 4;

  overflow: hidden;

  border-radius: 20px;

  background: #ffffff;
}

#brxe-idmqhi p{
    color: #053185;
    font-size: 24px;
    font-family: "Cookie";
}


.selection-soin__media img,
.selection-soin__media .selection-soin__photo {
  display: block;

  width: 100% !important;
  height: 100% !important;

  margin: 0;

  object-fit: cover;
  object-position: center;
}


/* =========================================================
   COLONNE DE CONTENU
   ========================================================= */

.selection-soin__contenu {
  display: flex;
  flex-direction: column;

  gap: 24px;

  min-width: 0;
}


/* Phrase d’introduction fixe */

.selection-soin__intro {
  margin: 0;

  color: #244a80;

  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 600;
  line-height: 1.55;
}


.selection-soin__intro p {
  margin: 0;
}


/* =========================================================
   LISTE DES QUATRE ARGUMENTS
   ========================================================= */

.selection-soin__arguments {
  width: 100%;
}


.selection-soin__liste {
  display: flex;
  flex-direction: column;

  gap: 13px;

  width: 100%;

  margin: 0;
  padding: 0;

  list-style: none;
}


.selection-soin__liste li {
  display: grid;

  grid-template-columns: 25px minmax(0, 1fr);

  align-items: center;

  gap: 11px;

  margin: 0;
  padding: 0;

  color: #244a80;
}


/* Petite coche circulaire générée par le shortcode */

.selection-soin__coche {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: #ffd9d5;
  color: var(--selection-coral);

  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}


#brxe-aawccq {
color: #053185;
    font-family: "Quicksand";
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
}


/* =========================================================
   MOT PERSONNALISÉ DE L’ÉQUIPE
   ========================================================= */

.selection-soin__mot {
  display: grid;

  grid-template-columns: 58px minmax(0, 1fr);

  align-items: center;

  gap: 18px;

  width: 100%;

  margin-top: 8px;
}


/* =========================================================
   GRANDE IMAGE CŒUR DU MOT DE L’ÉQUIPE
   Classe placée sur l’élément Image Bricks
   ========================================================= */

.selection-soin__mot-coeur {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  margin: 0;
  padding: 0;

  transform: rotate(-10deg);
      margin-top: 11px;
}


.selection-soin__mot-coeur img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  margin: 0;

  object-fit: contain;
}


.selection-soin__mot-coeur figure {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
}


/* Texte ACF du mot de l’équipe */

.selection-soin__mot-texte {
  margin: 0;

  color: var(--selection-blue);

  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
}


.selection-soin__mot-texte p {
  margin: 0;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 991px) {

  .selection-soin__grille {
    grid-template-columns:
      minmax(200px, 0.8fr)
      minmax(0, 1.2fr);

    gap: 30px;
  }


  .selection-soin__mot {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
  }


  .selection-soin__mot-coeur {
    width: 46px;
    height: 46px;
  }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767px) {

  .selection-soin {
    padding: 24px 18px;

    border-radius: 17px;
  }


  .selection-soin__entete {
    gap: 9px;

    margin-bottom: 22px;
  }


  .selection-soin__titre {
    font-size: 27px;
  }


  .selection-soin__coeur-titre {
    width: 34px;
    height: 34px;
  }


  .selection-soin__grille {
    grid-template-columns: minmax(0, 1fr);

    gap: 24px;
  }


  .selection-soin__media {
    max-width: 420px;

    margin-inline: auto;
  }


  .selection-soin__contenu {
    gap: 20px;
  }


  .selection-soin__mot {
    grid-template-columns: 40px minmax(0, 1fr);

    align-items: start;

    gap: 12px;
  }


  .selection-soin__mot-coeur {
    width: 38px;
    height: 38px;
  }


  .selection-soin__mot-texte {
    font-size: 17px;
  }
}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 390px) {

  .selection-soin__entete {
    align-items: flex-start;
  }


  .selection-soin__titre {
    flex: 1 1 220px;
  }


  .selection-soin__mot {
    grid-template-columns: 34px minmax(0, 1fr);
  }


  .selection-soin__mot-coeur {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   BLOC DES AVIS PRODUIT
   ========================================================= */

.bloc-avis-produit {
  --avis-blue: #0b3d87;
  --avis-text: #244a80;
  --avis-coral: #ff7b7f;
  --avis-pink: #fff0ed;
  --avis-border: #eadfd3;
  --avis-dashed: #ffd3ce;

  width: 100%;

  padding:
    clamp(24px, 3vw, 38px)
    clamp(20px, 4vw, 44px);

  border: 1px solid var(--avis-border);
  border-radius: 20px;

  background: #fffaf4;
}


/* =========================================================
   TITRE
   ========================================================= */

.avis-produit__titre {
  display: flex;
  align-items: center;
  gap: 14px;

  margin: 0 0 24px;

  color: var(--avis-blue);

  font-size: clamp(23px, 2.5vw, 34px);
  font-weight: 700;
  line-height: 1.2;
}





/* =========================================================
   ÉTAT SANS AVIS
   ========================================================= */

.avis-produit__vide {
  display: grid;

  grid-template-columns: 76px minmax(0, 1fr);

  align-items: center;

  gap: 22px;

  width: 100%;

  padding: 24px clamp(20px, 4vw, 36px);

  border: 2px dashed var(--avis-dashed);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.25);
}

.woocommerce-Reviews-title{
  display: none;
}


/* Cercle avec patte */

.avis-produit__patte {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 68px;
  height: 68px;

  border-radius: 50%;

  background: #ffe6e1;
  color: var(--avis-coral);
}


.avis-produit__patte svg {
  display: block;

  width: 42px;
  height: 42px;

  fill: currentColor;
}


/* Contenu de l’état vide */

.avis-produit__vide-contenu {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 7px;

  min-width: 0;
}


.avis-produit__vide-titre {
  margin: 0;

  color: var(--avis-blue);

  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}


.avis-produit__vide-description {
  margin: 0 0 8px;

  color: var(--avis-text);

  font-size: 14px;
  line-height: 1.45;
}


/* =========================================================
   BOUTON DONNER MON AVIS
   ========================================================= */

.avis-produit__ouvrir-formulaire {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 190px;
  min-height: 46px;

  margin: 0;
  padding: 10px 24px;

  border: 2px solid #b8c9df;
  border-radius: 14px;

  background: transparent;
  color: var(--avis-blue);

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}


.avis-produit__ouvrir-formulaire:hover {
  border-color: var(--avis-blue);

  background: rgba(11, 61, 135, 0.04);

  transform: translateY(-1px);
}


.avis-produit__ouvrir-formulaire:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px rgba(11, 61, 135, 0.12);
}


/* =========================================================
   ÉLÉMENT NATIF PRODUCT REVIEWS
   ========================================================= */

.avis-produit__natif {
  width: 100%;
}


/*
 * Le message natif « Aucun avis pour le moment »
 * est remplacé par notre état personnalisé.
 */

.avis-produit__natif .woocommerce-noreviews {
  display: none !important;
}


.avis-produit__natif #reviews {
  margin: 0;
}


/* Formulaire fermé par le JavaScript */

.avis-produit__natif
#review_form_wrapper[hidden] {
  display: none !important;
}


/* Formulaire ouvert */

.avis-produit__natif
#review_form_wrapper {
  margin-top: 22px;
  padding: 24px;

  border: 1px solid var(--avis-border);
  border-radius: 15px;

  background: #ffffff;
}


.avis-produit__natif
.comment-reply-title {
  display: block;

  margin-bottom: 18px;

  color: var(--avis-blue);

  font-size: 20px;
  font-weight: 700;
}


/* Champs du formulaire */

.avis-produit__natif
form
input[type="text"],

.avis-produit__natif
form
input[type="email"],

.avis-produit__natif
form
textarea {
  width: 100%;

  border: 1px solid #cbd8e9;
  border-radius: 12px;

  background: #fffaf4;
  color: var(--avis-text);

  font-family: inherit;
}


.avis-produit__natif
form
textarea {
  min-height: 140px;

  resize: vertical;
}


/* Bouton d’envoi WooCommerce */

.avis-produit__natif
form
input[type="submit"] {
  min-height: 48px;

  padding: 11px 26px;

  border: 0;
  border-radius: 14px;

  background: var(--avis-coral);
  color: #ffffff;

  font-family: inherit;
  font-weight: 700;

  cursor: pointer;
}


/* =========================================================
   MESSAGE INFÉRIEUR
   ========================================================= */

.avis-produit__message {
  display: flex;

  align-items: center;

  gap: 16px;

  width: 100%;

  margin-top: 22px;
  padding-inline: clamp(4px, 2vw, 20px);
}


/* Élément Image Bricks */

.avis-produit__message-icone {
  display: flex;
  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  margin: 0;
}


.avis-produit__message-icone img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain;
}


.avis-produit__message-texte {
  margin: 0;

  color: var(--avis-text);

  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}


.avis-produit__message-texte p {
  margin: 0;
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 600px) {

  .bloc-avis-produit {
    padding: 22px 16px;

    border-radius: 16px;
  }


  .avis-produit__titre {
    align-items: flex-start;

    font-size: 24px;
  }


  .avis-produit__vide {
    grid-template-columns: minmax(0, 1fr);

    justify-items: center;

    gap: 14px;

    padding: 22px 16px;

    text-align: center;
  }


  .avis-produit__vide-contenu {
    align-items: center;
  }


  .avis-produit__ouvrir-formulaire {
    width: 100%;
    max-width: 260px;
  }


  .avis-produit__message {
    align-items: flex-start;

    gap: 12px;
  }


  .avis-produit__message-icone {
    width: 44px;
    height: 44px;
  }


  .avis-produit__message-texte {
    font-size: 13px;
  }
}



/* =========================================================
   BOUTON D’AVIS LORSQUE DES AVIS EXISTENT DÉJÀ
   ========================================================= */

.avis-produit__action {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin-top: 28px;
  margin-bottom: 0;
}


/*
 * Le bouton conserve le style déjà utilisé
 * dans l’encadré « Aucun avis ».
 */

.avis-produit__action
.avis-produit__ouvrir-formulaire {
  min-width: 210px;
}


/* Formulaire fermé */

.avis-produit__natif
#review_form_wrapper[hidden] {
  display: none !important;
}


/* Formulaire ouvert */

.avis-produit__natif
#review_form_wrapper:not([hidden]) {
  display: block;
}


/* Smartphone */

@media (max-width: 600px) {

  .avis-produit__action {
    margin-top: 22px;
  }

  .avis-produit__action
  .avis-produit__ouvrir-formulaire {
    width: 100%;
    max-width: 280px;
  }
}