/* =============================================================================
   THEME EN-TÊTE (WordPress)
   -----------------------------------------------------------------------------
   Conserve les métadonnées du thème enfant Hello Elementor.
   ============================================================================= */
/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* =============================================================================
   1) SÉLECTEUR DE LANGUE — WEGLOT
   -----------------------------------------------------------------------------
   - Nettoyage visuel du dropdown
   - Typo/poids des libellés
   - Ajout d’un pictogramme (SVG inline) sur l’élément courant
   ============================================================================= */

/* Conteneur du sélecteur */
.country-selector.weglot-dropdown {
  background: transparent;
}

/* Bouton courant (pas de bordure/fond) */
.country-selector.weglot-dropdown .wgcurrent {
  border: none;
  background: transparent;
  padding: 0;
  position: relative; /* Nécessaire pour le pseudo-élément :after */
}

/* Police/typo du libellé courant (si Weglot rend un span avec cette classe) */
.wglanguage-name {
  color: #FFF;
  font-family: "American Grotesk Bold", Sans-serif;
}
.weglotmobiletoggle .wglanguage-name, .otherpageweglot .wglanguage-name {color:black;}
/* Padding côté droit pour laisser la place à l’icône */
.country-selector.weglot-dropdown .wgcurrent a,
.country-selector.weglot-dropdown .wgcurrent span {
  padding-right: 20px;
}

/* Icône "croix" (ou signe) à droite du courant (SVG inline en data URL) */
.country-selector.weglot-dropdown .wgcurrent:after {
  content: "";
  position: absolute;
  top: 14px;
  right: -15px;
  width: 100%;
  height: 10px;
  background: url(https://chezalainmiammiam.com/wp-content/uploads/2025/04/icone-plus.svg) no-repeat center center;
  background-size: contain;
}
.weglotmobiletoggle .country-selector.weglot-dropdown .wgcurrent:after, .otherpageweglot .country-selector.weglot-dropdown .wgcurrent:after {
		background: url(https://chezalainmiammiam.com/wp-content/uploads/2025/04/icone-plus-css.svg) no-repeat center center;
}

/* Taille/poids/espacement des options */
.country-selector.weglot-dropdown a,
.country-selector.weglot-dropdown span {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1.6px;
  padding: 0; /* annule tout padding résiduel */
}
.weglotmobiletoggle .country-selector.weglot-dropdown a, .weglotmobiletoggle
.country-selector.weglot-dropdown span {
	  font-size: 14px;
	  letter-spacing: 1.4px;
}
/* Liste déroulante */
.country-selector.weglot-dropdown ul {
  border: none;
  background: transparent;
}

/* Couleur des liens du sélecteur (état normal + hover) */
.country-selector a,
.country-selector a:hover {
  color: white;
  line-height: 36px;
}
.otherpageweglot .country-selector a,
.otherpageweglot .country-selector a:hover {
  color: black;
}
.otherpageweglot .country-selector.weglot-dropdown ul {
	background: white;
}
/* =============================================================================
   2) RÈGLES GÉNÉRALES / UTILITAIRES
   -----------------------------------------------------------------------------
   - Petites classes utilitaires
   - Normalisation des liens Elementor
   ============================================================================= */

/* Marge basse nulle (utilitaire) */
.margbottoff {
  margin-bottom: 0 !important;
}

/* Soulignement plus épais (utilitaire) */
.bigunderline {
  text-decoration-thickness: 2px;
}

/* Par défaut, SOULIGNER les liens dans le périmètre Elementor */
.elementor a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Exceptions : menu nav & boutons Elementor -> PAS de soulignement */
.elementor .e-n-menu a,
.elementor a.elementor-button {
  text-decoration: none;
}

/* Lien blanc (utilitaire) */
.whitelink a {
  color: white;
}

/* Bouton "toggle" : souligner le texte du bouton (cohérence UI) */
.btntoggle a .elementor-button-text {
  text-decoration: underline;
  text-decoration-thickness: 2px;
	text-align:left;
}

.nomarg p {margin:0px;}

/* =============================================================================
   3) ANIMATIONS / ÉTATS D’OPACITÉ
   -----------------------------------------------------------------------------
   - Titre qui disparaît après délai via animation CSS
   - Contenus masqués/affichés avec transitions
   ============================================================================= */

/* Titre qui s’estompe */
.vanishtitle {
  opacity: 1;
  animation: fadeOut 1.7s ease-out 2.5s forwards; 
}

@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}


/* Blocs “post/pre” avec transitions de hauteur/opacité pour effets reveal */
.textposthidden,
.textprehidden {
  overflow: hidden;
  transition: height 0.4s ease, opacity 0.4s ease;
}

/* Visible par défaut */
.textposthidden {
  height: auto;
  opacity: 1;
}

/* Caché par défaut */
.textprehidden {
  height: 0;
  opacity: 0;
}


/* =============================================================================
   4) SCROLL HORIZONTAL / ACCORDÉON (BLOCS COMMENTÉS)
   -----------------------------------------------------------------------------
   - Conserver pour activation ultérieure sans re-taper
   ============================================================================= */

/* == Horizontal scroll container ==
.horizontalscrollcontainer {
  transition: 0s !important;
  overscroll-behavior: none !important;
}
*/

/* ===== Scroll accordion ====
.accordiopanel {
  overflow: hidden;
}

.accordionscrollpanel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
*/


/* =============================================================================
   5) SLIDER / PANNEAU VERTICAL (EFFETS D’APPARITION)
   -----------------------------------------------------------------------------
   - Conteneur vertical + panneaux avec fondu/filtre au passage en "visible"
   - Voile (dim) activable via classe .veil-enabled + .dimmed
   ============================================================================= */

/* Contexte pour éléments positionnés */
.verticalscrollcontainer {
  position: relative;
}

/* Panneaux : état par défaut terni + transitions fluides */
.panelvert {
  filter: brightness(0.5);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease,
    filter 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc; /* À remplacer si besoin par un fond propre */
}

/* Quand visible : retire le ternissement */
.panelvert.visible {
  filter: brightness(1);
}

/* Voile (dim) optionnel sur un conteneur */
.veil-enabled {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.veil-enabled::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: black;
  opacity: 0;                 /* neutre par défaut */
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

/* État voilé */
.veil-enabled.dimmed::after {
  opacity: 0.4;
}

/* Cas des “stacking containers” : texte à masquer via fondu progressif */
.texte-a-cacher {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}


/* =============================================================================
   6) REVUE DE PRESSE (MISE EN PAGE)
   -----------------------------------------------------------------------------
   - Wrapper multi-colonnes flexibles
   - Lignes en grid 1/3 — 2/3
   - Titre & extrait typographiés via variables Elementor
   - Extrait limité sur 2 lignes (line-clamp)
   ============================================================================= */

/* Conteneur principal (colonnes) */
.revue-de-presse-wrapper {
  display: flex;
  gap: 40px;
  flex-wrap: wrap; /* passe en ligne suivante si manque de place */
}

/* Colonne (largeur min 300px) avec espacement vertical constant */
.revue-colonne {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-left: 2px; /* léger décalage si souhaité */
}

/* Ligne : 2 colonnes — visuel (1fr) / contenu (2fr) */
.revue-ligne {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px 10px;
  align-items: start;
}

/* Titre de l’article : reprend la typo globale Elementor (texte) */
.revue-titre h3 {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  text-transform: var(--e-global-typography-text-text-transform);
  line-height: var(--e-global-typography-text-line-height);
  letter-spacing: var(--e-global-typography-text-letter-spacing);
  margin: 0;
}

/* Colonne de droite (extrait + CTA) — 2 lignes max avec ellipsis */
.revue-contenu p {
  margin: 0;
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  text-transform: var(--e-global-typography-text-text-transform);
  line-height: var(--e-global-typography-text-line-height);
  letter-spacing: var(--e-global-typography-text-letter-spacing);
  color: var(--e-global-color-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* limite à 2 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =============================================================================
   GALERIE HORIZONTALE — FEUILLE DE STYLES (RESTRUCTURÉE)
   -----------------------------------------------------------------------------
   Objectif :
   - Organiser clairement la structure (wrapper / entêtes / conteneur scrollable)
   - Définir une grille horizontale responsive (2 à 4 lignes selon viewport)
   - Gérer un pictogramme "play" pour les vignettes vidéo
   - Nettoyer les doublons / harmoniser les espacements
   - Conserver la compatibilité avec GLightbox & widgets Elementor existants
   ============================================================================= */

/* ============================================================================
   0) VARIABLES GLOBALES (faciles à ajuster)
   ----------------------------------------------------------------------------
   Astuce : change ici les tailles/gaps pour tout mettre à jour d’un coup.
   ============================================================================ */
:root {
  /* Hauteurs structurelles (ancienne version, conservées si tu les réutilises) */
  --gall-header-footer-h: 10vh;     /* hauteur du bandeau haut & bas */
  --gall-container-h: 80vh;         /* hauteur de la zone scrollable centrale */

  /* Layout interne (ancienne version, conservée) */
  --gall-side-padding: 75px;        /* marge interne horizontale du wrapper */

  /* Grille & items (peuvent encore servir pour d’autres galeries) */
  --gall-item-size: 120px;          /* taille carrée des vignettes */
  --gall-gap-x: 150px;              /* espacement horizontal entre items */
  --gall-gap-y: 150px;              /* espacement vertical entre lignes */

  /* Lightbox (desktop) */
  --lightbox-img-max: 240px;        /* contrainte visuelle de l’image */
}

/* ============================================================================
   1) STRUCTURE PRINCIPALE (WRAPPER & ZONES)
   ----------------------------------------------------------------------------
   .allgallwrapper      : conteneur global (legacy, conservé)
   .topgall / .allgallbottom : bandeaux fixes haut/bas (legacy, conservés)
   .allgallcontainer    : zone centrale (legacy, conservée)
   .middle-gallery-container : container Elementor "middle"
   ============================================================================ */

/* Conteneur global de la galerie (ancienne structure, conservée) */
.allgallwrapper {
  max-height: 100vh;               /* Sécurité : jamais > hauteur viewport */
  display: flex;                   /* Colonne : header / contenu / footer */
  flex-direction: column;
  overflow: hidden;                /* Évite tout débordement vertical */
}

/* Bandeaux haut & bas (hauteur fixe, non compressibles) */
.topgall,
.allgallbottom {
  height: var(--gall-header-footer-h);
  flex-shrink: 0;
}

/* Zone centrale — accueillera le wrapper de galerie horizontale */
.allgallcontainer {
  height: var(--gall-container-h);
  flex-shrink: 0;                  /* Ne pas se compresser */
  overflow: hidden;                /* On masque le débordement (géré en interne) */
  position: relative;              /* Référence pour éléments en position absolue (ex: icônes) */
}

/* Container Elementor "middle" qui héberge la galerie */
.middle-gallery-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   2) GALERIE HORIZONTALE (WRAPPER + GRILLE)
   ----------------------------------------------------------------------------
   .mm-gallery-wrapper   : wrapper scrollable horizontal
   .mm-horizontal-gallery: grille horizontale (2 à 4 lignes selon viewport)
   ============================================================================ */

.mm-gallery-wrapper {
  width: 100%;
  /* pas besoin d'occuper 100% en hauteur pour scroller horizontalement */
  /* height: 100%; peut rester ou être retiré selon ton besoin */
  display: block;                 /* important : plus de flex ici */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

/* Masquage visuel de la scrollbar (optionnel) */
.mm-gallery-wrapper::-webkit-scrollbar {
  height: 0;
  background: transparent;
}
.mm-gallery-wrapper {
  scrollbar-width: none;
}

/* ============================================================================
   2.b) BREAKPOINTS / LAYOUT RESPONSIVE
   ----------------------------------------------------------------------------
   Mobile (base)      : 4 lignes, 3 items par rangée
   Tablette (≥768px)  : 3 lignes, 4 items par rangée (115px / 57.5px)
   Desktop <1200 (≥992px) : 2 lignes, 6 items par rangée (10vh / 10vh)
   Desktop ≥1200      : 2 lignes, 8 items par rangée (10vh / 10vh)
   ============================================================================ */

/* BASE = MOBILE
   4 rangées
   2 vignettes visibles par rangée
----------------------------------*/
.mm-horizontal-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 1fr);
  row-gap: 75px;
  column-gap: 75px;
  grid-auto-columns: calc((100vw - 75px) / 2);
}

@media (max-width:767px) {
  /* Conteneur de la galerie (entre BACK et PLUS D'INFORMATIONS) */
  /*.mm-gallery-wrapper {
	  max-height:calc(100dvh - 20dvh)!important;
  }*/
  .mm-horizontal-gallery {
    /* on NE définit PAS grid-template-rows ici */
        gap: 20px;
        width: max-content;
        grid-auto-columns: calc((100dvw - 55px) / 2);
        grid-auto-rows: auto;
  }
  /* Chaque item fait ~ la moitié de la largeur dispo */
  .mm-horizontal-gallery .mm-gallery-item {
	max-width: calc(100% - 35px) !important;
  }
}

/* TABLETTE (≥ 768px)
   3 rangées
   9 vignettes visibles par rangée
----------------------------------*/
@media (min-width: 768px) {
  .mm-horizontal-gallery {
	width: max-content;
    grid-template-rows: repeat(3, 1fr);
    row-gap: 24px;
    column-gap: 24px;
    /* 9 colonnes :
       9 * colWidth + 8 * gap = 100vw
       → colWidth = (100vw - 8 * 24px) / 9
    */
    grid-auto-columns: calc((100vw - 8 * 24px) / 9);
  }
}

/* DESKTOP small (≥ 992px)
   2 rangées
   6 vignettes visibles par rangée (12 au total)
----------------------------------------*/
@media (min-width: 992px) {
  .mm-horizontal-gallery {
    grid-template-rows: repeat(2, 1fr);
    row-gap: 50px;
    column-gap: 50px;

    /* 6 colonnes :
       6 * colWidth + 5 * gap = 100vw
       → colWidth = (100vw - 5 * 50px) / 6
    */
    grid-auto-columns: calc((100vw - 5 * 50px) / 6);
    align-content: center;
  }
}

/* DESKTOP large (≥ 1200px)
   2 rangées
   8 vignettes visibles par rangée (16 au total)
----------------------------------------*/
@media (min-width: 1200px) {
  .mm-horizontal-gallery {
    grid-template-rows: repeat(2, 1fr);
    row-gap: 75px;
    column-gap: 75px;

    /* 8 colonnes :
       8 * colWidth + 7 * gap = 100vw
       → colWidth = (100vw - 7 * 75px) / 8
    */
    grid-auto-columns: calc((100vw - 7 * 75px) / 8);
  }
}

/* ============================================================================
   3) ITEMS (vignettes images / liens)
   ----------------------------------------------------------------------------
   - Les liens sont des blocs occupent toute leur cellule de grille
   - Les images remplissent l’espace (cover)
   ============================================================================ */

.mm-horizontal-gallery .mm-gallery-item {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
  text-decoration: none;
  scroll-snap-align: start;

  /* carré, peu importe la taille de la cellule de grille */
  aspect-ratio: 1 / 1;
}

.mm-horizontal-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================================
   4) ICÔNE "PLAY" POUR VIGNETTES VIDÉO
   ----------------------------------------------------------------------------
   - Positionnée au centre de la vignette
   - pointer-events:none => ne bloque pas le clic sur le lien parent
   ============================================================================ */

.mm-play-icon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}

.mm-play-icon svg {
  width: 18px;
  height: 20px;
  display: block;
}

/* ============================================================================
   5) LIGHTBOX — RÈGLES SPÉCIFIQUES À GLIGHTBOX
   ----------------------------------------------------------------------------
   - On neutralise l’overlay si souhaité (transparent)
   - On masque certaines commandes/éléments pour un rendu épuré
   - On plafonne la taille de l’image en desktop pour garder l’échelle "vignette"
   ============================================================================ */

/* Overlay transparent (optionnel) */
.glightbox-container .goverlay {
  background: transparent !important;
}

/* Masque divers éléments d’UI GLightbox pour un rendu minimaliste */
.glightbox-container .gslide-description,
.glightbox-container .glightbox-prev,
.glightbox-container .glightbox-next,
.glightbox-open .dialog-type-lightbox,
.glightbox-clean .gclose,
.glightbox-clean .gprev,
.glightbox-clean .gnext {
  display: none !important;
}
/* Mettre la croix à côté de l'image */
/* On utilise le conteneur du média comme référence */
.glightbox-container .gslide-media {
  position: relative;
}

/* Petite croix accrochée au coin haut-droit du média (non cliquable) */
/* Petite croix accrochée au coin haut-droit du média (non cliquable) */
@media (max-width:1200px) {
	.glightbox-container .gslide-media::after {
	  content: "";
		  position: absolute;
	  top: 
		  0px;
	  right: -16px;
	  width: 12px;
	  height: 12px;
	  z-index: 999999999999999999999999999999999999999;
	  pointer-events: none; */
	  background-repeat: no-repeat;
	  background-position: center;
	  background-size: contain;

	  /* SVG "X" inline en data URI */
	  background-image: url("data:image/svg+xml;utf8,\
	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'>\
	<path d='M1 1L11 11M11 1L1 11' stroke='black' stroke-width='1.5' stroke-linecap='round'/>\
	</svg>");
	  cursor: pointer;
	  display: block;
	}
}
@media (min-width:1200px) {
	.glightbox-container .gslide-media::after {
	  content: "";
	  position: absolute;
	  top: 0px;
	  right: -20px;
	  width: 12px;
	  height: 12px;
	  z-index: 5;
	  pointer-events: none;

	  background-repeat: no-repeat;
	  background-position: center;
	  background-size: contain;

	  /* SVG "X" inline en data URI */
	  background-image: url("data:image/svg+xml;utf8,\
	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'>\
	<path d='M1 1L11 11M11 1L1 11' stroke='black' stroke-width='1.5' stroke-linecap='round'/>\
	</svg>");
  	cursor: pointer;
	}
}

/* Desktop : limite la taille des images dans la lightbox
   (évite un rendu trop “géant” comparé aux vignettes) */
/* =========================
   GLIGHTBOX : IMAGES & VIDÉOS À 50vh
   ========================== */
/* Images (si tu ne l'as pas déjà) */
@media (min-width: 769px) {
  .glightbox-container .gslide-image img {
    max-height: 65vh !important;
    width: auto !important;
    max-width: 75vw !important;
    margin: 0 auto;
    object-fit: contain;
  }
}
/* Vidéos (YouTube, Vimeo, etc. via Plyr) */
@media (max-width: 767px) {
	.glightbox-container .gslide-image img, .glightbox-container .gslide-image {
		max-height: 50vh !important;
    	min-height: 50vh !important;
    	width: auto !important;
	    max-width: calc(100dvw - 70px);
		margin: 0 auto;
    	object-fit: cover;
	}
	/* Vidéos (YouTube, Vimeo, etc. via Plyr)*/
    .glightbox-container .gslide-media.gslide-video {
        height: 65vh !important;
        max-height: 50vh !important;
        min-height: 50vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        max-width: calc(100dvw - 70px);
    }
}
@media (min-width:768px) and (max-width: 1099px) {
	/* Images (si tu ne l'as pas déjà) */
	  .glightbox-container .gslide-image img, .glightbox-container .gslide-image {
    max-height: 50vh !important;
    min-height: 50vh !important;
    width: auto !important;
    max-width: 75vw !important;
    margin: 0 auto;
    object-fit: cover;
  }
	/* Vidéos (YouTube, Vimeo, etc. via Plyr)*/
    .glightbox-container .gslide-media.gslide-video {
        height: 65vh !important;
        max-height: 50vh !important;
        min-height: 50vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        max-width: 75vw !important;
    }
}
@media (min-width: 1100px) {
	/* Images (si tu ne l'as pas déjà) */
  .glightbox-container .gslide-image img {
    height: 65vh !important;
    max-height: 65vh !important;
    min-height: 65vh !important;
    width: auto !important;
    max-width: 75vw !important;
    margin: 0 auto;
    object-fit: contain;
  }
  /* Container vidéo GLightbox */
  .glightbox-container .gslide-media.gslide-video {
    height: 65vh !important;
    max-height: 65vh !important;
    min-height: 65vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  /* Bloc Plyr */
  .glightbox-container .gslide-media.gslide-video .plyr {
    width: auto !important;
    height: 100% !important;
    max-height: 65vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Wrapper vidéo (celui qui porte aspect-ratio) 
  .glightbox-container .gslide-media.gslide-video .plyr__video-wrapper {
    width: auto !important;
    height: 100% !important;
    /*max-height: 50vh !important;
  }*/

  /* Iframe YouTube/Vimeo */
  .glightbox-container .gslide-media.gslide-video iframe {
    height: 100% !important;
    max-height: 65vh !important;
  }
}

/* Met GLightbox au-dessus de l'offcanvas Elementor */
.glightbox-container, .glightbox-container .goverlay {
  z-index: 9999999999 !important;
}

/* On laisse tes réglages existants,
   mais on réactive la croix sur mobile */
@media (max-width: 767px) {
  .glightbox-clean .gclose {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .glightbox-clean .gclose {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 99999999999;
    cursor: pointer;
    background: transparent;
    border: 0;
  }
}


/* ============================================================================
   6) INTÉGRATIONS / COMPATIBILITÉ (Elementor, classes existantes)
   ----------------------------------------------------------------------------
   - Conserve le comportement des classes déjà présentes (.customgal, etc.)
   - Harmonise les tailles avec les variables quand c’est logique
   ============================================================================ */

/* Variante "horizontal gallery VD" (compat héritée) */
.customgal img {
  width: 150px;            /* Valeurs legacy conservées intentionnellement */
  max-width: 150px;
  height: 150px;
  object-fit: cover;
}

/* Chaque item en inline-flex + espacements (héritage) */
.customgal .gallery-item {
  width: 150px !important;
  height: 150px !important;
  min-width: 150px !important;
  min-height: 150px !important;
  display: inline-flex;
  max-width: 150px !important;
  margin: 0 50px 50px 0 !important;  /* espacement droite & bas */
  padding: 0 !important;
}

/* Ajuste l’icône des galeries Elementor quand l’option “gallery-spacing-custom” est active */
.gallery-spacing-custom .elementor-image-gallery .gallery-icon {
  width: 150px !important;
  height: 150px !important;
  min-width: 150px !important;
  min-height: 150px !important;
}

/* Aligne le dernier wrapper (si utilisé comme conteneur flex) */
.horizontalgallastchildwrapper {
  align-items: center !important;
}

/* ============================================================================
   BOUTIQUE
   ============================================================================ */
/* -----------------------
   1. ÉTATS DE LA CARTE
------------------------*/

/* Carte produit en 2 états */
.mm-product-card {
  position: relative;
}

/* État compact visible par défaut */
.mm-card-toggle {
  display: flex;
  flex-direction: column;
}

/* État étendu caché par défaut */
.mm-product-expanded {
  display: none;
}

/* Quand la carte est ouverte : on cache le compact, on montre l'étendu */
.mm-product-card.is-open .mm-card-toggle {
  display: none !important;
}
.mm-product-card.is-open .mm-product-expanded {
  display: flex !important;
  flex-direction: column;
}

/* Les deux états remplissent la hauteur disponible */
.mm-card-toggle,
.mm-product-expanded {
  height: 100%;
}

/* Contrainte max de largeur pour la colonne "fiche simple" */
.maxwidthcart .e-con-inner {
  max-width: 475px;
}
/* On affiche une image ou l'autre en hover avec effet */
.mm-product-card .mm-product-image-wrap {
  display: grid;
  overflow: hidden;
}

.mm-product-card .mm-product-image-wrap > .img1,
.mm-product-card .mm-product-image-wrap > .img2 {
  grid-area: 1 / 1;
}

.mm-product-card .mm-product-image-wrap .img2 {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s ease;
}

.mm-product-card:hover .mm-product-image-wrap .img2 {
  clip-path: inset(0 0 0 0);
}

.mm-product-card .mm-product-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
/* -----------------------
   2. BOUTON "AJOUTER AU PANIER"
------------------------*/

.mm-product-card .elementor-shortcode form.variations_form.cart .single_variation_wrap .woocommerce-variation-add-to-cart.variations_button button.single_add_to_cart_button.button.alt, .mm-product-card .elementor-shortcode form.cart
button.single_add_to_cart_button.button.alt {
  padding: 15px 15px 15px 10px;
  width: 100%;
  text-align: left;
  font-family: "American Grotesk Bold", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 1.6px;
  background: #fff;
  border: 2px solid #000;
  cursor: pointer;
	border-radius:0px;
	color:black;
}
@media (max-width:767px) {
	.mm-product-card .elementor-shortcode form.variations_form.cart .single_variation_wrap .woocommerce-variation-add-to-cart.variations_button button.single_add_to_cart_button.button.alt, .mm-product-card .elementor-shortcode form.cart
button.single_add_to_cart_button.button.alt {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}
/* -----------------------
   3. OPTIONS DE TAILLE
   - on masque le <select> Woo
   - on affiche nos cases .mm-swatch
------------------------*/

/* Masquer le select natif + lien "Effacer" dans l'état étendu uniquement */
.mm-product-expanded .variations select,
.mm-product-expanded .reset_variations {
  display: none !important;
}

/* On enlève les marges / bordures inutiles du tableau Woo */
.mm-product-expanded .variations {
  margin: 0;
  border-collapse: collapse;
  width:100%;
}

/* Grille de 4 cases S M L XL */
.mm-attr-swatches {
  display: grid;
  /*grid-template-columns: repeat(4, 1fr);*/
	grid-template-columns: repeat(auto-fit, minmax(10%, 1fr));
  border: 2px solid #000;
  border-collapse: collapse;
  margin-bottom: 50px;
}
@media (max-width:767px) {
	.mm-attr-swatches {
		margin-bottom: 50px;
	}
}

/* Case de taille */
.mm-swatch {
    background: #fff;
    border: 0;
    border-right: 2px solid #000;
    height: 50px;
    cursor: pointer;
    text-align: left;
    font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
}
@media (max-width:767px) {
	.mm-swatch {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}

/* Pas de bordure droite sur la dernière case */
.mm-swatch:last-child {
  border-right: 0;
}

/* État actif (case noire, texte blanc) */
.mm-swatch.is-active {
  color: grey;
}

/* -----------------------
   4. QUANTITÉ : "QUANTITÉ   -  1  +"
------------------------*/

/* Ligne complète : label à gauche, contrôles à droite */
.mm-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 25px;
  padding-bottom: 15px;
  border-top: solid black 2px;
}

/* Label "Quantité" */
.mm-qty-label {
  font-family: "American Grotesk Bold", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 1.6px;
}
@media (max-width:767px) {
	.mm-qty-label {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}
/* Wrapper des contrôles - 1 +, collé à droite */
.mm-qty-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40px;
  column-gap: 0px;
  align-items: center;
}

/* Boutons + / - */
.mm-qty-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
      font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
}
@media (max-width:767px) {
	.mm-qty-btn {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}
/* Champ quantité centré, sans flèches natives */
.mm-qty-wrapper input.qty {
  width: 40px;
  text-align: center;
  border: 0;
  -moz-appearance: textfield;
      font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
}
@media (max-width:767px) {
	.mm-qty-wrapper input.qty {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}
.mm-qty-wrapper input.qty::-webkit-outer-spin-button,
.mm-qty-wrapper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* SINGLE SIMPLE PRODUCT */
/* Simple product: structurer le form comme le bloc variation-add-to-cart */
.mm-singleproduct form.cart{
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* On masque la quantité Woo d'origine (car on injecte mm-qty-row en JS) */
.mm-singleproduct form.cart > .quantity{
  display:none;
}

/* Bouton ajouter au panier (simple product) */
.mm-singleproduct-card .mm-singleproduct form.cart
.single_add_to_cart_button.button.alt{
  padding: 15px 15px 15px 10px;
  width: 100%;
  text-align: left;
  font-family: "American Grotesk Bold", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 1.6px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 0;
  color: #000!important;
  cursor: pointer;
  margin-inline-start: 0px;
}
@media (max-width:767px){
  .mm-singleproduct-card .mm-singleproduct form.cart
  .single_add_to_cart_button.button.alt{
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 1.4px;
  }
}


/* -----------------------
   5. PETIT CLEAN Woo
------------------------*/

/* On masque le label "Taille" en colonne gauche du tableau */
.mm-product-expanded th.label {
  display: none;
}

/* MISE EN FORME DU PANIER */
.shopoffcanva  .elementor-menu-cart__close-button:after, .maxwidthcart  .elementor-menu-cart__close-button:before {
    background: black;
}
.shopoffcanva .woocommerce-mini-cart .elementor-menu-cart__product-name a {
    font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
	text-decoration:none;
}
.shopoffcanva .elementor-menu-cart__product-price .product-quantity {
    font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
}
.shopoffcanva .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price {
    font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
    color:black;
}
.shopoffcanva .elementor-menu-cart__subtotal {
    font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
    color: black;
     text-align: left;
}
.shopoffcanva .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout {
    font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
    color: black;
        border: solid 2px black;
    background: white;
    text-align: left;
}
.shopoffcanva .elementor-menu-cart__main .widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
    font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
}
@media (max-width:767px) {
	.shopoffcanva .woocommerce-mini-cart .elementor-menu-cart__product-name a, .shopoffcanva .elementor-menu-cart__product-price .product-quantity, .shopoffcanva .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price, .shopoffcanva .elementor-menu-cart__subtotal, .shopoffcanva .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout, .shopoffcanva .elementor-menu-cart__main .widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}

/* Carte : look plus premium / 2025 */
.mm-product-card {
  transition:
    box-shadow 0.32s ease,
    transform 0.32s ease,
    border-color 0.32s ease,
    background-color 0.32s ease;
  overflow: hidden; /* pour que le contenu suive le border-radius */
}

/* Légère élévation au hover */
.mm-product-card:hover {
  transform: translateY(-4px);
}

/* État ouvert : un peu plus affirmé */
.mm-product-card.is-open {
  transform: translateY(-6px);
}
/* Bloc étendu : on prépare une anim d’entrée */
.mm-product-expanded {
  opacity: 0;
  transform: translateY(10px);
}

/* Quand la carte est ouverte, le bloc étendu est affiché (ton CSS existant)
   + on lance une petite anim d’apparition */
.mm-product-card.is-open .mm-product-expanded {
  opacity: 1;
  transform: translateY(0);
  animation: mmFadeSlideIn 0.28s ease-out;
}

/* Petite animation moderne : fade + slide */
@keyframes mmFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mm-card-toggle,
.mm-product-expanded {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.woocommerce .product .mm-product-card form.cart {margin-bottom:0px}

/*///////////////////// POSITIONNEMENT SIDEBAR //////////////////////////////////*/
/* 1. On met tout le container "Mon Panier" au-dessus de la grille */
.maxwidthcart {
    position: relative;
    z-index: 999999 !important;
}

/* 2. On force le panneau du mini-panier à être au-dessus de tout le contenu de la grille */
.maxwidthcart .elementor-menu-cart__container {
    position: fixed !important;   /* détaché du flux de la grille */
    top: 0;
    left: 0;
    z-index: 1000000 !important;
}

/* 3. Par sécurité : on remet un z-index normal sur les gros visuels produits
   -> remplace .CLASS-GRILLE par la classe principale de ta grille si besoin */
.e-loop-item,
.e-loop-item * {
    z-index: auto !important;
}

/*/////////////////////////////////////////
   Rendre cliquable tout le panier
/////////////////////////////////////////*/

/* Container du header panier */
.maxwidthcart .e-con-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    cursor: pointer;
}

/* On s'assure que le toggle est bien centré verticalement */
.maxwidthcart .elementor-menu-cart__toggle_button {
    align-items: center;
}

/* On "dé-boutonise" le toggle du mini-panier */
.maxwidthcart .elementor-menu-cart__toggle_button {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
    min-width: 0;
}

.maxwidthcart .elementor-menu-cart__toggle_button:hover,
.maxwidthcart .elementor-menu-cart__toggle_button:focus {
    background: none;
    box-shadow: none;
}

/* On masque le prix, on garde juste le nombre d’items */
.maxwidthcart .elementor-menu-cart__toggle_button .elementor-button-text {
    display: none; /* cache 0,00 € */
}

/* Icône du panier visible */
.maxwidthcart .elementor-menu-cart__toggle_button .elementor-button-icon {
    display: inline-flex;
    align-items: center;
}

/* Le "0" à droite + style */
.maxwidthcart .elementor-menu-cart__toggle_button .elementor-button-icon-qty {
    font-size: 16px;        /* même taille que le h1 si souhaité */
    font-weight: 700;
    color: #000;
    min-width: 1ch;
    text-align: right;
}

/* Ajout des parenthèses autour de la quantité */
.maxwidthcart .elementor-button-icon-qty::before {
    content: "(";
    margin-right: 1px;
}
.maxwidthcart .elementor-button-icon-qty::after {
    content: ")";
    margin-left: 1px;
}

/* Petit décalage vers le bas du ( 1 ) */
.maxwidthcart .elementor-button-icon-qty {
    position: relative;
    top: 2px; /* ajuste à l'œil : 1px / 2px / 3px */
}

/* Zone panier : le toggle prend toute la largeur dispo */
.maxwidthcart .customcartbb .elementor-menu-cart__toggle_wrapper,
.maxwidthcart .customcartbb .elementor-menu-cart__toggle,
.maxwidthcart .customcartbb .elementor-menu-cart__toggle_button {
    width: 100%;
}

/* Bouton du mini-panier : mise en page en flex, une seule ligne */
.maxwidthcart .customcartbb .elementor-menu-cart__toggle_button {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* on commence à gauche */
    text-align: left;
    background: transparent;
    border: none;
    padding: 0; /* ajuste selon ton design */
    cursor: pointer;
}

/* Titre "Mon panier" au début de la ligne, à gauche */
.maxwidthcart .customcartbb .elementor-menu-cart__toggle_button::before {
    content: "Mon panier";
    font-family: "American Grotesk Bold", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1.6px;
    color: black;
}

/* Icône + quantité poussées à droite sur la même ligne */
.maxwidthcart .customcartbb .elementor-menu-cart__toggle_button .elementor-button-icon {
    margin-left: auto; /* pousse l’icône à droite */
}

/* Responsive mobile */
@media (max-width: 767px) {
    .maxwidthcart .elementor-menu-cart__toggle_button .elementor-button-icon-qty,
    .maxwidthcart .customcartbb .elementor-menu-cart__toggle_button::before {
        font-size: 14px;
        text-transform: uppercase;
        line-height: 22px;
        letter-spacing: 1.4px;
    }
	.maxwidthcart .customcartbb .elementor-menu-cart__toggle_button {padding-bottom:5px;}
}

/*/////////////////////////////// FICHE PRODUIT au cas où //////////////////////////////////////////*/
/* === FICHE PRODUIT : VARIATIONS (TAILLE) === */
.mm-singleproduct .variations {
  margin: 0 0 24px;
  border-collapse: collapse;
  width: 100%;
}

/* On masque le label "Taille" à gauche */
.mm-singleproduct .variations th.label {
  display: none;
}

/* La cellule de droite prend toute la largeur */
.mm-singleproduct .variations td.value {
  width: 100%;
}

/* Le select : look cohérent avec ton design */
.mm-singleproduct .variations select {
  width: 100%;
  padding: 15px 15px 15px 10px;
  border: 2px solid #000;
  background: #fff;
  font-family: "American Grotesk Bold", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 1.6px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
@media (max-width:767px) {
	.mm-singleproduct .variations select {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}
/* On masque le lien "Effacer" */
.mm-singleproduct .variations .reset_variations {
  display: none !important;
}
/* === FICHE PRODUIT : BLOC QUANTITÉ + BOUTON === */

/* Le wrapper de Woo pour quantité + bouton */
.mm-singleproduct .woocommerce-variation-add-to-cart {
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Ligne quantité : label (pseudo) à gauche, input à droite */
.mm-singleproduct .woocommerce-variation-add-to-cart .quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Label "Quantité" ajouté en pseudo-élément */
.mm-singleproduct .woocommerce-variation-add-to-cart .quantity::before {
  content: "Quantité";
  font-family: "American Grotesk Bold", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 1.6px;
}
@media (max-width:767px) {
	.mm-singleproduct .woocommerce-variation-add-to-cart .quantity::before {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}

/* On nettoie l'input de base */
.mm-singleproduct .woocommerce-variation-add-to-cart .quantity .qty {
  width: 40px;
  text-align: center;
  border: 0;
  -moz-appearance: textfield;
  font-family: "American Grotesk Bold", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 1.6px;
}
@media (max-width:767px) {
	.mm-singleproduct .woocommerce-variation-add-to-cart .quantity .qty {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}
/* On enlève les flèches des champs number */
.mm-singleproduct .woocommerce-variation-add-to-cart .quantity .qty::-webkit-outer-spin-button,
.mm-singleproduct .woocommerce-variation-add-to-cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* === FICHE PRODUIT : BOUTON AJOUTER AU PANIER === */
.mm-singleproduct-card .mm-singleproduct .woocommerce-variation-add-to-cart .single_add_to_cart_button.button.alt {
  padding: 15px 15px 15px 10px;
  width: 100%;
  text-align: left;
  font-family: "American Grotesk Bold", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 1.6px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 0;
  color: #000!important;
  cursor: pointer;
  margin-inline-start: 0px;
}
@media (max-width:767px) {
	.mm-singleproduct-card .mm-singleproduct .woocommerce-variation-add-to-cart .single_add_to_cart_button.button.alt {
	font-size: 14px;
	line-height: 22px;
  letter-spacing: 1.4px;
	}
}
/* Optionnel : supprimer l’ombre ou style Woo au survol */
.mm-singleproduct .single_add_to_cart_button.button.alt:hover,
.mm-singleproduct .single_add_to_cart_button.button.alt:focus {
  background: #000;
  color: #fff;
}
/* ====== FICHE PRODUIT : cacher le select + label "Taille" ====== */
.mm-singleproduct .variations select,
.mm-singleproduct .reset_variations {
  display: none !important;
}

.mm-singleproduct .variations th.label {
  display: none;
}

/* Optionnel : un peu de marge au-dessus du bloc variations si besoin */
.mm-singleproduct .variations {
  margin-bottom: 0;
}
.mm-singleproduct form.variations_form.cart .single_variation_wrap .woocommerce-variation-add-to-cart .quantity {display:none}

/*//////////////////// SIDEBAR PANIER MOBILE ///////////////////////////*/
    /* Container général du contenu panier */
    .shopoffcanva .widget_shopping_cart_content {
        display: flex;
        flex-direction: column;
        /* plus de justify-content: space-between ici */
    }

    /* Le sous-total se colle au bas, et “embarque” le bloc boutons */
    .shopoffcanva .elementor-menu-cart__subtotal {
        margin-top: auto;            /* pousse tout l’espace au-dessus */
        border-top: 1px solid #000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: none;
    }

    .shopoffcanva .elementor-menu-cart__footer-buttons {
        padding-top: 0;
    }

    .shopoffcanva .elementor-menu-cart__footer-buttons::after {
        content: "CLOSE";
        display: block;
        margin-top: 24px;
        text-align: center;
        font-family: "American Grotesk Bold", Sans-serif;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1.4px;
    }
/* 1. Forcer la sidebar à prendre toute la hauteur disponible */
.shopoffcanva .elementor-menu-cart__main:has(.woocommerce-mini-cart__empty-message) {
    height: 100vh; /* ou 100% si le parent a une hauteur définie */
    display: flex;
    flex-direction: column;
}

/* 2. Le widget prend toute la place disponible */
.shopoffcanva .widget_shopping_cart_content:has(.woocommerce-mini-cart__empty-message) {
    flex: 1; /* Prend tout l'espace disponible */
    display: flex;
    flex-direction: column;
}

/* 3. Le message vide prend toute la place et pousse le bouton en bas */
.shopoffcanva .woocommerce-mini-cart__empty-message {
    flex: 1; /* Prend tout l'espace disponible */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pousse le contenu en haut et en bas */
}

/* 4. Le bouton "CLOSE" (via ::after) */
.shopoffcanva .woocommerce-mini-cart__empty-message::after {
	content: "CLOSE";
	text-align: center;
	font-family: "American Grotesk Bold", Sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
}

@media (min-width:767px) {
	.shopoffcanva .elementor-menu-cart__footer-buttons::after, .shopoffcanva .woocommerce-mini-cart__empty-message::after {
        font-size: 16px;
        letter-spacing: 1.6px;
    }
}

    /* Tes ajustements de layout produits que tu avais déjà */
    .shopoffcanva .elementor-menu-cart__product-name {
        grid-column-start: 1;
        grid-column-end: 3;
        padding-inline-start: 0;
        padding-bottom: 15px;
    }

    .shopoffcanva .elementor-menu-cart__product-image {
        grid-row-start: 2;
        grid-row-end: 3;
    }


/* Sur mobile : empiler le bouton + les containers les uns sous les autres */
@media (max-width: 767px) {
  .stackingcontainer {
    display: flex;              /* s'assure que c'est bien flex */
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Chaque bloc prend bien toute la largeur */
  .stackingcontainer > .e-con,
  .stackingcontainer > .containertodispapear {
    width: 100% !important;
  }
}
@media (max-width: 767px) {
  .containertodispapear {
    flex-direction: column !important;
  }
}

/* PAGE ACCUEIL ACCORDEON SIMPLE SUR MOBILE */
@media (max-width: 767px) {
	.accordeonbbsimple .e-n-accordion-item-title[aria-expanded="true"], .accordeonbbsimple2 .e-n-accordion-item-title[aria-expanded="true"] {padding-bottom:0px}
	.revuepressmobile {margin-top: 1em;}
	.e-n-accordion-item-title[aria-controls="blackaccordeon"] {background:black; color:white!important}
	.accordeonbbsimple .e-n-accordion-item-title[aria-expanded="false"], .accordeonbbsimple2 .e-n-accordion-item-title[aria-expanded="false"] {text-decoration:underline; text-decoration-thickness: 2px;   /* épaisseur du soulignement */
	  text-underline-offset: 3px;       /* distance entre le texte et le soulignement */}
	 .accordeonbbsimple .e-n-accordion-item:has(.e-n-accordion-item-title[aria-expanded="false"]) {position: sticky;}
	  .bcgkbbmobile {
    min-height: 0;
    transition: min-height 0.35s ease-in-out; /* <– lissage */
  }

  .bcgkbbmobile:not(.elementor-sticky--active) {
    min-height: 0 !important;
  }

  .bcgkbbmobile.elementor-sticky.elementor-sticky--active {
    min-height: 10vh;
  }
	/* rectification menu mobile pour ouverture des popup */
	.e-off-canvas[aria-label="ToggleMenuMobile"] {z-index:999}
}

/* PAGES WOOCOMMERCE SPECIFIQUES */
.elementor-widget-woocommerce-checkout-page {
color: black;
font-family: "American Grotesk Bold", Sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
line-height: 24px;
}

/* COMPLIANZ */
.cmplz-document {
	font-family: "American Grotesk Bold", Sans-serif;
    font-weight: 400;
    letter-spacing: 1.6px;
}
.cmplz-document p{
	font-family: "American Grotesk", Sans-serif;
}