/*
Theme Name: SEOmag Child
Template: seomag
Text Domain: seomag-child
*/

/* ===============================
   HERO catégorie (fond FIXE)
   =============================== */

/* hauteur de la vague (modifiable) */
.cat-hero{ --shape-h: 140px; }

/* bandeau */
.cat-hero{
  position: relative;
  z-index: 1;

  /* flex colonne pour pousser l’image tout en bas */
  display: flex;
  flex-direction: column;

  /* FOND : gradient + image */
  /* IMPORTANT: les 2 calques sont FIXES pour ne plus bouger */
  background-image:
    linear-gradient(to bottom, rgba(48,48,48,.78) 0%, rgba(48,48,48,.78) 45%, rgba(48,48,48,.78) 100%),
    var(--cat-hero-bg, none);
  background-position: top;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, 120%;     /* zoomé pour éviter tout bord */
  background-attachment: fixed, fixed;

  /* respiration + place pour la vague */
  padding: 120px 20px 56px;
  color:#fff;

  /* NE PAS animer le background si on le veut fixe */
  animation: none !important;

  /* on laisse déborder l'image si elle "pose" sur la vague */
  overflow: visible;
}

/* contenu */
.cat-hero__inner{
  order: 1;
  position: relative; z-index: 3;
  max-width: 980px; margin: 0 auto; text-align: center;
}
.cat-hero__kicker{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .9; margin: 0 0 12px;
}
.cat-hero__title{
  margin: 0 0 16px;
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.15;
}
.cat-hero__desc{
  max-width: 820px; margin: 0 auto;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.65;
}

/* neutralise un éventuel fond/badge du H1 du thème */
.loop .loop-header .header h1,
.cat-hero .header h1{ background:none!important; box-shadow:none!important; }

/* pas de "lire plus" dans le hero */
.cat-hero .description_more{ display:none; }

/* vague */
.cat-hero__shape{
  order: 3;
  position: absolute; left:0; right:0; bottom:-1px;
  height: var(--shape-h); line-height:0; overflow:hidden;
  z-index: 1;                 /* derrière l’image */
  color: #FFFFFF;             /* couleur de fond de page */
}
.cat-hero__shape svg{ width:100%; height:100%; display:block; }
.cat-hero__shape path{ fill: currentColor; }

/* ===============================
   Image (en bas du hero, sur la vague)
   =============================== */
.cat-hero .cat-figure{
  order: 2;                     /* entre texte et vague */
  margin-top: auto;             /* pousse l'image tout en bas */
  align-self: center;
  max-width: 1200px; width: 100%;
  padding: 0 20px;
  position: relative;
  z-index: 3;                   /* AU-DESSUS de la vague */
  /* chevauchement sur la vague : ajuste le facteur si besoin */
  transform: translateY(calc(var(--shape-h) * 0.45));
}
.cat-hero .cat-figure img{
  display:block; width:100%; height:auto;
  border-radius:16px;
  box-shadow:0 18px 36px rgba(0,0,0,.22);
}

/* petit air avant le breadcrumb */
.loop-breadcrumb{ margin-top: 8px; }

/* ===============================
   Responsive
   =============================== */
@media (max-width: 992px){
  .cat-hero{ --shape-h: 110px; padding: 96px 16px 44px; }
  .cat-hero .cat-figure{ padding: 0 16px; transform: translateY(calc(var(--shape-h) * 0.35)); }
}
@media (max-width: 768px){
  .cat-hero{ --shape-h: 90px; padding: 80px 16px 36px; }
  .cat-hero .cat-figure{ transform: translateY(calc(var(--shape-h) * 0.28)); }
}

/* ===============================
   Garde-fous (thème parent)
   =============================== */
.loop .loop-header.cat-hero{ padding-top: inherit; padding-bottom: inherit; z-index: 1; }




/* =========================
   Zone texte du bas (loop-description)
   ========================= */
.loop-description {
    background-color: #f7f7f9 !important;
}
   
/* 1) on libère la largeur (le thème limite à 9 colonnes) */
.loop-description .gcol-9_sm-12{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* 2) conteneur de lecture large et centré */
.loop-description .description{
  max-width: 1120px;       /* largeur visuelle souhaitée */
  margin: 0 auto 64px;     /* centre + espace bas */
  font-size: 18px;
  line-height: 1.85;
  color: #1d1d1f;
}

/* 3) titres typographiques façon screen 2 */
.loop-description .description h2{
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}
.loop-description .description h3{
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  font-weight: 700;
  margin: 36px 0 12px;
}

/* 4) paragraphes et emphases */
.loop-description .description p{ margin: 0 0 18px; }
.loop-description .description strong{ font-weight: 700; }

/* 5) listes confortables */
.loop-description .description ul{
  list-style: disc;
  padding-left: 1.4em;
  margin: 0 0 18px;
}
.loop-description .description li + li{ margin-top: 10px; }

/* 6) liens (contraste + hover propre) */
.loop-description .description a{
  color: #c0392b;
  text-decoration: none;
  border-bottom: 1px solid rgba(192,57,43,.35);
}
.loop-description .description a:hover{
  border-bottom-color: currentColor;
}

/* 7) bouton "Nous contacter" centré SANS changer le HTML
      (ciblage par URL pour éviter d'impacter d'autres liens) */
.loop-description .description a[href*="/nous-contacter"]{
  display: inline-block;
  margin-top: 20px;
  padding: 12px 22px;
  background: #c0392b;
  color: #fff !important;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  font-weight: 600;
}
.loop-description .description a[href*="/nous-contacter"]:hover{
  filter: brightness(.95);
}

/* 8) respiration au-dessus de la section (si besoin) */
.loop-description{ padding-top: 8px; }

/* Responsive petits écrans */
@media (max-width: 768px){
  .loop-description .description{
    max-width: 92%;
    font-size: 16px;
    line-height: 1.75;
  }
}





/* ========= STRUCTURE / ESPACES ========= */
.product .container { max-width: 1200px; }
.product .gridlex-center-noBottom { gap: 28px; }

/* ========= TITRE / PRIX ========= */
.product .product-header h1,
.single-product .entry-title {
  font-size: clamp(28px, 3.1vw, 40px);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 6px;
  color: #b74758; /* couleur titre souhaitée (ajuste si besoin) */
}

.single-product .price {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: #7a6d52; /* doré/terre */
  margin: 8px 0 14px;
}

/* ========= COURT DESCRIPTIF (liste) ========= */
.single-product .woocommerce-product-details__short-description ul {
  margin: 8px 0 18px 20px;
}
.single-product .woocommerce-product-details__short-description li { margin: 6px 0; }

/* ========= LABELS VARIATIONS + LIEN AIDE ========= */
.single-product .variations { margin: 14px 0 18px; border: 0; width: 100%; }
.single-product .variations th,
.single-product .variations td { border: 0; padding: 0 0 12px 0; }

.single-product .variations label {
  display: inline-block;
  font-weight: 700;
  color: #333;
}

.variation-help {
  float: right;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  color: #b74758;
}

/* ========= SELECTS (fonds blancs, bord doux) ========= */
.single-product .variations select {
  width: 100%;
  border: 1px solid #dddfe4;
  background: #fff;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 15px;
}

/* ========= QTE + BOUTON PANIER ========= */
.single-product .quantity input.qty {
  height: 46px;
  border-radius: 6px;
  border: 1px solid #dddfe4;
  background: #fff;
}

.single-product .single_add_to_cart_button {
  height: 46px;
  border-radius: 6px;
  padding: 0 20px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* état désactivé (avant choix variation) */
.single-product .single_add_to_cart_button:disabled,
.single-product .single_add_to_cart_button.disabled {
  opacity: 1;
  color: #fff;
  background: #e6e1d4;   /* gris/beige */
  border-color: #e6e1d4;
}

/* ========= BOUTON "DEMANDER UN ÉCHANTILLON" ========= */
.sample-request {
  display: block;
  text-align: center;
  padding: 18px 16px;
  margin-top: 10px;
  border-radius: 4px;
  background: #3a6f80;  /* bleu canard */
  color: #fff !important;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  box-shadow: 0 1px 0 rgba(0,0,0,.07) inset;
}
.sample-request:hover { filter: brightness(1.05); }

/* ========= GALERIE ========= */
.single-product .woocommerce-product-gallery__wrapper img {
  border-radius: 4px;
  box-shadow: 0 8px 26px rgba(0,0,0,.06);
}

/* ========= DESCRIPTION & DESCRIPTION AVANCÉE ========= */
.product .description h2,
.product-advanced-description h2 { 
  font-size: 22px; font-weight: 700; margin: 0 0 10px;
}
.product-advanced-description { margin-top: 24px; }

/* ========= BREADCRUMB ========= */
.product-breadcrumb { font-size: 13px; color: #6b7280; }

/* ========= RWD ========= */
@media (max-width: 1024px) { .product .gridlex-center-noBottom { gap: 20px; } }

/* --- Force les sélecteurs de variations à occuper toute la largeur --- */
.single-product .variations tr {
  display: block;
  width: 100%;
  margin-bottom: 12px;
}

.single-product .variations th,
.single-product .variations td {
  display: block;
  width: 100%;
}

.single-product .variations label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.single-product .variations select {
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

/* --- Sépare bien le bloc panier du bouton échantillon --- */
.woocommerce-variation-add-to-cart {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px; /* espace entre les boutons */
}

.single-product .single_add_to_cart_button {
  width: 100%;
  margin-bottom: 0;
}

/* --- Bouton "Demander un échantillon" en pleine largeur et sous le panier --- */
button#request-echantillon,
.request-echantillon {
  width: 100%;
  display: block;
  margin-top: 10px;
}


a.comment-mesurer {
  display: inline-block;
  bottom: 450px;
}

/* --- Pour corriger d’éventuels flottants WooCommerce --- */
.single-product form.cart:after {
  content: "";
  display: block;
  clear: both;
}

/* 1) Libellés à gauche */
.single-product table.variations th {
  text-align: left;
  padding-bottom: 6px;
}
.single-product table.variations label {
  display: inline-block;
  font-weight: 700;
  margin: 0;
}

/* 2) "Comment mesurer ?" en rouge (et lisible) */
a.comment-mesurer {
  float: right;
  font-size: 13px;
  font-weight: 600;
  color: #b74758 !important;     /* rouge/rose souhaité */
  text-decoration: none !important;
}
a.comment-mesurer:hover { text-decoration: underline !important; }

#comment-mesurer {
    position: relative !important;
}

/* 3) Selects plus hauts (native) */
.single-product .variations select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 48px;                  /* ↑ hauteur */
  padding: 12px 14px;            /* ↑ espace intérieur */
  font-size: 16px;               /* ↑ taille du texte */
  border: 1px solid #dddfe4;
  border-radius: 6px;
  background: #fff;
}

/* 3bis) Si Select2 est actif sur les attributs, on augmente aussi sa hauteur */
.single-product .select2-container .select2-selection--single { height: 48px; }
.single-product .select2-container .select2-selection__rendered { line-height: 48px; font-size: 16px; }
.single-product .select2-container .select2-selection__arrow { height: 48px; }

/* (optionnel) petit espace sous chaque ligne d'attribut */
.single-product .variations tr { display: block; margin-bottom: 14px; }
.single-product .variations td { display: block; }

/* --- flèche stylisée sur les sélecteurs "Choisir une option" --- */
.single-product .variations select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23999' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>") no-repeat right 14px center;
  background-size: 12px 8px;
  padding-right: 36px; /* laisse de la place pour la flèche */
  cursor: pointer;
}
.single-product .variations select:hover {
  border-color: #b74758;
}





/* === Bouton "Demander un échantillon" plus grand & cohérent === */
button.request-echantillon,
.request-echantillon {
  display: block !important;
  width: 100% !important;
  height: 64px; /* plus haut */
  line-height: 1.2;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 4px;
  background-color: #3a6f80 !important; /* bleu canard */
  color: #fff !important;
  transition: all 0.2s ease-in-out;
}

.request-echantillon:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}




/* ===== Bloc footer ===== */
.footer-new { /* chaque colonne a sa propre .footer-new */
  text-align: center;
}

/* Titres des colonnes (la 1ère ligne du <p>) */
.footer-new .wp-block-column > p.has-text-align-center {
  margin: 0 0 18px;
  line-height: 1.3;
  color: #eaeaea;
}
.footer-new .wp-block-column > p.has-text-align-center::first-line {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  font-size: 12px;
  color: #b8b8b8;
}

.footer-new .wp-block-column {
  font-size: 12px !important;
}

/* Liens : plus de soulignement, hover #b74758 */
.footer-new a {
  display: block;
  margin: 8px 0;
  text-decoration: none;        /* enlève la ligne */
  color: #e9e9e9;               /* couleur au repos */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.footer-new a:hover,
.footer-new a:focus {
  color: #b74758 !important;               /* couleur au survol */
  text-decoration: none;        /* pas de soulignement au hover */
}

/* Empêche les coupures de mots moches */
.footer-new * {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
}

/* Newsletter : centrée et propre */
.footer-new .sib-email-area label {
  display: block;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: #8f8f8f;
}
.footer-new .sib-email-area input[type="email"] {
  display: block;
  width: 320px;
  max-width: 100%;
  margin: 0 auto 14px;
  border-radius: 6px;
  border: 1px solid #313131;
  background: #f0f0f3;
  color: #111;
  padding: 10px 14px;
  box-sizing: border-box;
}
.footer-new .sib-default-btn {
  display: block;
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  background: #b74758;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
}
.footer-new .sib-default-btn:hover { filter: brightness(1.05); }



/* ===== Barre haute (couleur + typo) ===== */
.woo-navigation { 
  background-color:#b74758 !important;     /* couleur voulue */
  color:#fff;
  font-size:14px;
}
.woo-navigation .inner nav{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:44px;
}

/* Zones gauche / centre / droite */
.woo-navigation .inner nav .tel{ 
  flex:1;                 /* prend la zone gauche */
  font-weight:400;
}
.woo-navigation .inner nav .fdp{
  flex:1;                 /* occupe la zone centrale */
  text-align:center;
  font-weight:400;
}

/* Le 1er lien après .fdp sert d'ancre à droite */
.woo-navigation .inner nav > a:first-of-type{
  margin-left:auto;       /* pousse le bloc de liens à droite */
}

/* Liens à droite */
.woo-navigation .inner nav a{
  margin-left:18px;
  color:#fff;
  text-transform:uppercase;
  font-weight:400;
  text-decoration:none;
}
.woo-navigation .inner nav a:hover{ color:#ffe3e8; }

/* Icônes en blanc */
.woo-navigation .inner nav a svg path{ fill:#fff; }

/* Badge du panier */
.woo-navigation .inner nav a[href*="panier"] span{
  display:inline-block;
  min-width:18px; height:18px; line-height:18px;
  text-align:center; font-size:11px; font-weight:700;
  color:#b74758; background:#fff; border-radius:10px;
  margin-left:6px;
}

/* Petit pictogramme avant le numéro (optionnel) */
.woo-navigation .inner nav .tel::before{
  content:"";
  width:14px;height:14px;display:inline-block;margin-right:8px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.09 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.89.3 1.76.54 2.6a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.48-1.12a2 2 0 0 1 2.11-.45c.84.24 1.71.42 2.6.54A2 2 0 0 1 22 16.92z'/></svg>") no-repeat center/contain;
}

/* ===== Responsive ===== */
@media (max-width:768px){
  .woo-navigation .inner nav{ flex-wrap:wrap; gap:8px 16px; }
  .woo-navigation .inner nav .fdp{ order:2; flex:1 0 100%; text-align:center; }
  .woo-navigation .inner nav .tel{ order:1; flex:1; }
  .woo-navigation .inner nav > a:first-of-type{ order:3; margin-left:auto; } /* bloc liens à droite */
}

@media (max-width:900px){
  .woo-navigation .inner nav{
      padding-top: 50px;
      height: 160px;
  }
}

body.woocommerce-js #header .woo-navigation .inner nav>a>span {
    color: #795548;
}


@media (min-width: 1025px) {
    nav a[title="Panier"] {
        display: none !important;
    }
}


@media (max-width: 1024px) {
  #header .site-navigation .inner .menu nav {
      background-color: white;
  }
}

/* Badge compteur panier WooCommerce */
.icons a[title="Panier"] {
    position: relative;
}

.icons a[title="Panier"] span {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    background-color: #b74758;
    color: #ffffff;

    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;

    border-radius: 50%;
    box-sizing: border-box;
}

/* Espace à gauche de l’icône panier */
.icons a[title="Panier"] {
    padding-left: 15px;
}


@media (max-width: 1025px) {
    .menu .icons {
        display: none !important;
    }
}




/* Parent top-level : permet au panneau de s'étendre en full width */
#header-menu > ul > li.menu-item-has-children {
  position: static !important;
}

/* Panneau du sous-menu en pleine largeur */
#header-menu > ul > li.menu-item-has-children > .sub-menu{
  position: absolute !important;
  left: 0; right: 0; top: 100%;
  width: auto !important;
  background: #f5f5f6;
  box-shadow: 0 20px 40px rgba(0,0,0,.06);
  padding: 18px 0 24px !important;
  margin: 0 !important;
  list-style: none !important;

  /* effets d'apparition */
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .18s ease;
  z-index: 50;

  /* grille de tuiles */
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;

  /* centré */
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (min-width: 1025px) {

  /* On fait du LI parent le point d’ancrage */
  #header-menu > ul > li.menu-item-has-children {
    position: relative;
  }

  /* Sous-menu positionné sous l’onglet */
  #header-menu > ul > li.menu-item-has-children > .sub-menu {
    left: 0 !important;
    right: auto !important;
    top: 100% !important;   /* juste sous l’onglet */
    transform: translateY(8px) !important;

    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;

    display: inline-grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 150px !important; /* ajuste si besoin */
    grid-template-columns: none !important;
    gap: 20px !important;
  }
}

@media (min-width: 1025px) {

  /* Le LI devient le repère */
  #header-menu > ul > li.menu-item-has-children{
    position: relative !important;
  }

  /* Sous-menu centré sous l’onglet */
  #header-menu > ul > li.menu-item-has-children > ul.sub-menu{
    left: 50% !important;
    right: auto !important;                 /* on enlève l’étirement */
    top: 100% !important;

    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;

    display: inline-grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 150px !important;
    grid-template-columns: none !important;
    gap: 20px !important;

    transform: translateX(-25%) translateY(8px) !important;  /* état “repos” */
  }

  /* IMPORTANT : on garde le centrage AU HOVER (sinon ça redevient à gauche) */
  #header-menu > ul > li.menu-item-has-children:hover > ul.sub-menu,
  #header-menu > ul > li.menu-item-has-children:focus-within > ul.sub-menu{
    transform: translateX(-25%) translateY(0) !important;
  }
}


/* Affichage au survol / focus */
#header-menu > ul > li.menu-item-has-children:hover > .sub-menu,
#header-menu > ul > li.menu-item-has-children:focus-within > .sub-menu{
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Reset des éléments internes */
#header-menu > ul > li.menu-item-has-children > .sub-menu > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Tuile (le <a> du sous-menu) – image via --img */
#header-menu > ul > li.menu-item-has-children > .sub-menu > li > a{
  display: block !important;
  position: relative !important;
  aspect-ratio: 1 / 1;                  /* carré */
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(12px, 1.4vw, 18px);

  background-image: var(--img);
  background-size: cover;
  background-position: center;

  /* fallback visuel si pas d'image */
  background-color: #ececec;

}

/* voile + lignes horizontales */
#header-menu > ul > li.menu-item-has-children > .sub-menu > li > a::before{
  content:""; position:absolute; inset:0;
  mix-blend-mode: multiply;
}
#header-menu > ul > li.menu-item-has-children > .sub-menu > li > a::after{
  content:""; position:absolute; inset:0;
  background-size: 100% 33.33%;
  pointer-events:none;
}

/* Centrage du label (le texte du <a>) */
#header-menu > ul > li.menu-item-has-children > .sub-menu > li > a{
  display:grid; place-items:center; text-align:center;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* Hover tuile */
#header-menu > ul > li.menu-item-has-children > .sub-menu > li > a:hover{
  transform: translateY(-1px);
  filter: saturate(110%);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Trait actif sous l’onglet parent (optionnel) */
#header-menu > ul > li.menu-item-has-children > a{ position:relative; }
#header-menu > ul > li.menu-item-has-children:hover > a::after,
#header-menu > ul > li.menu-item-has-children:focus-within > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-14px;
  height:3px; background:#b74758; border-radius:2px;
}

/* Responsive */
@media (max-width:1024px){
  #header-menu > ul > li.menu-item-has-children > .sub-menu{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media (max-width:640px){
  /* en mobile : redevient liste simple */
  #header-menu > ul > li.menu-item-has-children > .sub-menu{
    position: static !important;
    display: block !important;
    opacity: 1; visibility: visible; transform: none;
    background: transparent; box-shadow: none; padding: 8px 0 0 !important;
    max-width: none; margin: 0 !important;
  }
  #header-menu > ul > li.menu-item-has-children > .sub-menu > li > a{
    aspect-ratio: auto; border-radius: 0; background: none; color: inherit;
    padding: 10px 0; text-transform: none; font-weight: 600; color: #333;
  }
  #header-menu > ul > li.menu-item-has-children > .sub-menu > li > a::before,
  #header-menu > ul > li.menu-item-has-children > .sub-menu > li > a::after{ display:none; }
}

/* Cache le texte des sous-menus si une image d’arrière-plan est définie */
#header-menu > ul > li.menu-item-has-children > .sub-menu > li > a[style*="--img"] {
  color: transparent !important;
  text-shadow: none !important;
}




/* Supprime le losange rouge uniquement au survol du menu */
#header-menu > ul > li:hover > a::after,
#header-menu > ul > li:focus-within > a::after {
  content: none !important;
  background: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  display: none !important;
}







/* ===== MOBILE TOP BAR (ajustée) ===== */
@media (max-width: 768px){

  /* fond rouge + texte centré */
  .woo-navigation { 
    background:#b74758; 
    color:#fff; 
    padding:10px 0 14px 0;
  }

  /* container du contenu */
  .woo-navigation .inner nav{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:4px;
    min-height:70px; /* augmente la hauteur globale */
  }

  /* lignes de texte (téléphone + frais de port) */
  .woo-navigation .inner nav .tel,
  .woo-navigation .inner nav .fdp{
    font-size:13px;
    line-height:1.3;
    font-weight:600;
  }

  /* masque "Mon compte" et "Nous contacter" */
  .woo-navigation .inner nav a[href*="mon-compte"],
  .woo-navigation .inner nav a[href*="nous-contacter"]{
    display:none !important;
  }

  /* icônes panier et compte visibles */
  .woo-navigation .inner nav a[title*="Panier"],
  .woo-navigation .inner nav a[title*="Compte"]{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    margin-top:6px;
  }

  /* icônes blanches */
  .woo-navigation .inner nav a svg path{ fill:#fff; }

  /* badge du panier repositionné */
  .woo-navigation .inner nav a[title*="Panier"]{
    position:relative;
  }
  .woo-navigation .inner nav a[title*="Panier"] span{
    position:absolute;
    top:-6px; right:-8px;
    min-width:16px; height:16px;
    font-size:11px; font-weight:700;
    color:#b74758; background:#fff;
    border-radius:10px; text-align:center;
  }
}

@media (max-width: 768px){

  /* barre rouge */
  .woo-navigation {
    background:#b74758;
    color:#fff;
    padding:10px 0;
  }

  /* bloc texte à droite */
  .woo-navigation .inner nav .tel,
  .woo-navigation .inner nav .fdp {
    display:block;
    text-align:right;
    font-size:13px;
    line-height:1.3;
    font-weight:600;
  }

  /* petit espacement entre les deux lignes */
  .woo-navigation .inner nav .tel {
    margin-bottom:3px;
  }
}


























@media (max-width: 768px){

  /* Parent line */
  #header-menu > ul > li > a{
    position: relative;
    display: block;
    padding: 16px 16px;
    padding-right: 56px;                 /* room for the arrow */
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  /* The label (only this navigates) */
  #header-menu > ul > li > a .mm-label{
    position: relative;
    z-index: 2;                           /* above overlay -> receives clicks */
    pointer-events: auto;
    display: inline-block;
  }

  /* Full-row toggle overlay (invisible), sits under label */
  #header-menu > ul > li > a .mm-overlay{
    position: absolute;
    inset: 0;                             /* top:0 right:0 bottom:0 left:0 */
    background: transparent;
    border: 0;
    z-index: 1;                           /* under label, so label clicks still navigate */
    cursor: pointer;
  }

  /* Native arrow: keep visible + rotate on open */
  #header-menu > ul > li.menu-item-has-children > a::after{
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform .18s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #header-menu > ul > li.menu-item-has-children.mm-open > a::after{
    transform: translateY(-50%) rotate(-180deg) !important;
  }

  /* Submenus */
  #header-menu > ul > li.menu-item-has-children > .sub-menu{
    position: static !important;
    display: none !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  #header-menu > ul > li.menu-item-has-children.mm-open > .sub-menu{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }

  /* Thumbnail tiles */
  #header-menu > ul > li.menu-item-has-children > .sub-menu > li > a{
    display:block !important;
    position:relative !important;
    aspect-ratio: 4/3;
    border-radius: 6px;
    overflow:hidden;
    background-image: var(--img);
    background-size: cover;
    background-position: center;
    color: transparent !important;
    text-indent: -9999px;
  }

  /* ► Ouvre la grille en clair, sans animation ni masquage hérités du thème */
  #header-menu > ul > li.menu-item-has-children.mm-open > .sub-menu,
  #header-menu > ul > li.menu-item-has-children.mm-open > .sub-menu > li,
  #header-menu > ul > li.menu-item-has-children.mm-open > .sub-menu > li > a{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  /* ► Force l’image de fond et coupe tout calque décoratif qui recouvre la tuile */
  #header-menu > ul > li.menu-item-has-children > .sub-menu > li > a.has-mega-img{
    background-image: var(--img) !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
    display: block !important;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    position: relative !important;
  }
  #header-menu > ul > li.menu-item-has-children > .sub-menu > li > a.has-mega-img::before,
  #header-menu > ul > li.menu-item-has-children > .sub-menu > li > a.has-mega-img::after{
    content: none !important;
    display: none !important;
  }

  /* ▼ (sécurité) supprime tout masquage générique sur les sous-menus en mobile */
  #header-menu .sub-menu,
  #header-menu .sub-menu *{
    animation: none !important;
  }

  #header-menu > ul > li:first-child {
    padding-top: 25px !important;
  }
}
















/* --- Layout global --- */

.wishzone {
  padding: 60px 0 40px;
  position: relative;
  z-index: 99;
}

.wishzone-inner {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.wishzone-left {
  flex: 1;
  text-align: center;
}

.wishzone-right {
  flex: 1.3;
  padding-left: 0px;  /* un peu d'espace entre le titre et les blocs */
  padding-right: 40px; /* petit espace à droite comme demandé */
}

.wishzone-heading {
  font-size: 56px;
  line-height: 1.1;
  margin: 0;
  color: #305564;
}

/* Grille des blocs */

.wishgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* --- Carte / bloc --- */

.wishcard {
  position: relative;
}

.wishcard-box {
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  padding: 22px 22px 24px;
  min-height: 155px;             /* même hauteur pour tous au repos */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;       /* titre centré quand fermé */
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease,
              transform 0.2s ease, margin-top 0.2s ease;
}

.wishcard-toggle {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: pointer;
}

.wishcard-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #305564;
}

/* Liens (cachés par défaut) */

.wishcard-links {
  display: none;
  width: 100%;
  margin-top: 14px;
  text-align: left;
}

.wishcard-links a {
  display: block;
  font-size: 15px;
  text-decoration: none;
  color: #305564;
  padding: 4px 0 4px 10px;
  border-left: 2px solid rgba(48, 85, 100, 0.35);
}

/* --- État actif / ouvert --- */

.wishcard--active .wishcard-box {
  background: #305564;
  color: #ffffff;
  align-items: flex-start;
  justify-content: flex-start; /* titre en haut */
}

/* Les 3 blocs du haut montent vers le haut quand ouverts */
.wishcard--active.wishcard-top .wishcard-box {
  margin-top: -90px;            /* monte le bloc sans toucher aux autres */
}

.wishcard--active .wishcard-title {
  color: #ffffff;
}

.wishcard--active .wishcard-links {
  display: block;
}

html body .wishcard--active .wishcard-links a {
  color: #ffffff !important;
  border-left-color: rgba(255,255,255,0.5);
}

/* Hover léger */
.wishcard-box:hover {
  transform: translateY(-2px);
}

/* --- Responsive --- */

@media (max-width: 1024px) {
  .wishzone-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .wishzone-right {
    padding-left: 0;
    padding-right: 0;
    margin-top: 30px;
  }

  .wishgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wishcard--active.wishcard-top .wishcard-box {
    margin-top: -60px;
  }
}

@media (max-width: 640px) {
  .wishzone-heading {
    font-size: 40px;
    padding-left: 20px;
  }

  .wishgrid {
    grid-template-columns: 1fr;
  }

  .wishcard--active.wishcard-top .wishcard-box {
    margin-top: 0; /* sur mobile, on évite les gros décalages */
  }
}


/* ======= MOBILE 1 COLONNE ======= */
@media (max-width: 767px) {
    .wc-block-product-template__responsive {
        grid-template-columns: 1fr !important;
    }
}





/* Forcer le contenu de la cover en bas */
.wp-block-cover {
    align-items: end;
    padding: 0;
}
.wp-block-cover__inner-container {
  height: 100%;
  display: flex;
  align-items: flex-end;      /* contenu en bas */
  justify-content: center;    /* centré horizontalement */
}

/* Bande sombre + padding comme sur le mockup */
.wp-block-cover .inspi-cover {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);  /* petite occultation */
  padding: 2.5rem 2rem 3rem;
  text-align: center;
}

/* Titre principal plus gros */
.wp-block-cover .inspi-cover h3 {
  font-size: 2.1rem;
  font-weight: 600;
}


.bloc-rose {
    position: relative;
    z-index: 0;
    background-color: transparent !important; /* on laisse le pseudo-élément gérer le fond */
    padding-top: 30px;
    padding-bottom: 70px;
}

/* Bande de couleur qui s’étend bord à bord */
.bloc-rose::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #b74758;
    z-index: -1; /* derrière le contenu */
}

.bloc-rose .wp-block-column {
  border-radius: 10px;
  padding:20px;
}



.colonne-avis{
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.groupe-pictos{
	
}

/* TITRE H2 */
.groupe-pictos > h2 {
    font-size: 32px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 10px;
}

/* TITRES H3 */
.groupe-pictos h3 {
    font-size: 20px;
    margin: 0 0 18px;
    font-weight: 700;
	color : #b74758;
}

/* BOUTONS */
.groupe-pictos .btn-picto {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 999px;
    border: 1px solid #b74758;  /* ta couleur bordeaux */
	color: #fff !important;
    background-color: #b74758 !important;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .08em;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.groupe-pictos .btn-picto a .stk-button__inner-text{
	color : white !important;
}

.groupe-pictos .btn-picto:hover {
    background-color: #fff;
    color: #b74758 !important;
    transform: translateY(-1px);
}

.sous-titre-bloc {
    font-size: 12px;
    letter-spacing: 0.25em;        /* espace entre les lettres */
    text-transform: uppercase;     /* texte en majuscules */
    font-weight: 400;              /* finesse du texte */
    color: #8a9aa3;                /* gris bleuté */
    margin: 20px 0 5px;
}






.bloc-bas-contactez-nous {
    position: relative;
    /* plein écran même dans un conteneur centré */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;

    padding: 120px 0;
    background-image: url("https://www.chrysalab.com/wp-content/uploads/2025/10/film-depoli-a-motifs-cloison-vitree.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;         /* évite les débordements visuels */
}

/* si tu as un scroll horizontal, ajoute ça : */
html, body {
    overflow-x: hidden;
}
/* overlay foncé par-dessus l'image */
.bloc-bas-contactez-nous::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* bloc interne (la “cartouche” grise) */
.bloc-bas-contactez-nous-interne {
    position: relative;
    z-index: 2;
}

.bloc-bas-contactez-nous-interne > .wp-block-group__inner-container {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.55);
    padding: 40px 50px;
    border-radius: 6px;
    color: #fff;
}
.bloc-bas-contactez-nous h2 {
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 20px;
}

.bloc-bas-contactez-nous p {
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* bouton */
.bloc-bas-contactez-nous .wp-block-button__link {
    background-color: #b74758 !important;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 4px;
    transition: 0.2s ease-out;
}

.bloc-bas-contactez-nous .wp-block-button__link:hover {
    background-color: #a03747 !important;
}




img:not(.zoomImg), 
video {
  max-width: 100% !important;
}




body.light.woocommerce-js .products .products-list a .details {
    margin-top: -50px;
}



/* Reset du layout WooCommerce Mon Compte */
.woocommerce-account .woocommerce {
    display: block;
}

/* Navigation full width */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
}

/* UL en ligne */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* LI */
.woocommerce-account .woocommerce-MyAccount-navigation li {
    list-style: none;
    margin: 0;
}

/* Style onglets */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 18px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-bottom: none;
    font-weight: 600;
}

/* Onglet actif */
.woocommerce-account 
.woocommerce-MyAccount-navigation li.is-active a {
    background: #fff;
    border-bottom: 1px solid #fff;
}

/* Contenu sous les onglets */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    padding-top: 20px;
}

/* Sur écrans larges : tout sur une seule ligne */
@media (min-width: 1024px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    flex-wrap: nowrap !important;   /* empêche le retour à la ligne */
    gap: 8px;                       /* réduit un peu l’espace */
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li a{
    padding: 10px 14px;             /* réduit un peu l’onglet */
    font-size: 14px;                /* optionnel */
    white-space: nowrap;            /* empêche "Moyens de paiement" de casser */
  }
}


/* Cacher l'onglet Téléchargements */
.woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}

.woocommerce-breadcrumb {
  margin: 0 0 15px;
  font-size: 14px;
}
.woocommerce-breadcrumb a {
  text-decoration: none;
}

body {
    background: #FFFFFF !important;
}


/* CTA produit en full width */
.products .product .product-cta a.button,
.products .product .product-cta a.add_to_cart_button {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 12px;
}

/* Optionnel : éviter que le titre soit souligné */
.products .product .title a {
  text-decoration: none;
}
/* Titres produits – taille maîtrisée */
.products .product .title h2,
.products .product .title h3 {
  font-size: 16px !important;      /* ajuste si besoin : 15–17px */
  line-height: 1.35;
  margin: 8px 0 6px;
  font-weight: 600 !important; 
}

/* Liens titres */
.products .product .title a {
  text-decoration: none;
}


/* Desktop: transforme l'overlay WC Filters en bloc normal (sidebar) */
@media (min-width: 1024px) {

  /* Cache le bouton "Filtrer les produits" */
  .wc-block-product-filters__open-overlay {
    display: none !important;
  }

  /* Force l'overlay à être visible et statique */
  .wc-block-product-filters__overlay {
    display: block !important;
    position: static !important;
    inset: auto !important;
    background: transparent !important;
  }

  .wc-block-product-filters__overlay-wrapper,
  .wc-block-product-filters__overlay-dialog {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* On enlève header/footer de la popup */
  .wc-block-product-filters__overlay-header,
  .wc-block-product-filters__overlay-footer {
    display: none !important;
  }

  /* Le contenu redevient "normal" */
  .wc-block-product-filters__overlay-content {
    padding: 0 !important;
    overflow: visible !important;
  }
}

.container {
    max-width: 1400px !important;
}

/* Masquer la sidebar sous 785px */
@media (max-width: 784px) {
  .sidebar {
    display: none !important;
  }
}

/* Sidebar : supprimer les paddings horizontaux */
.sidebar .widget,
.sidebar .widget_block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Placeholder recherche – plus petit */
.sidebar .wp-block-search__input::placeholder {
  font-size: 13px;
  opacity: 0.7;
}

/* Champ de recherche lui-même */
.sidebar .wp-block-search__input {
  font-size: 14px;
  padding: 10px 12px;
}

/* Annuler le style global des inputs LIGHT pour le filtre de prix Woo */
body.light 
.wc-block-product-filter-price-slider input[type="text"],
body.light 
.wc-block-product-filter-price-slider input[type="range"] {
  background-color: transparent !important;
  color: inherit !important;
}

/* Remonter les poignées du slider prix */
body.light 
.wc-block-product-filter-price-slider__range 
input[type="range"]::-webkit-slider-thumb {
  margin-top: -26px; /* augmente si besoin (-6 / -8) */
}

body.light 
.wc-block-product-filter-price-slider__range 
input[type="range"]::-moz-range-thumb {
  margin-top: -26px;
}

.wc-block-product-filter-price-slider__right input, .wc-block-product-filter-price-slider__left input{
  padding : 0 !important;
}

form#sib_signup_form_2 p.sib-alert-message-success {
    color: #3c763d !important;
}

.product .details {
  background-color:white;
}


/* Social links : cercles parfaits (SEO Mag + Gutenberg) */
.wp-block-social-links .wp-social-link {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  border-radius: 50% !important;

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

.wp-block-social-links .wp-social-link a {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;

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

/* =================================================
   FOOTER – resserrer les listes (catégories / pages)
   ================================================= */

/* Paragraphe principal du footer */
.footer-new p {
  line-height: 1.3;      /* au lieu de ~1.6/1.8 */
  margin-bottom: 0;
}

/* Liens dans les listes */
.footer-new p a {
  display: inline-block;
  margin-bottom: 6px;    /* espace entre lignes */
  line-height: 1.3;
}

/* Réduit l’espace créé par les <br> */
.footer-new p br {
  display: block;
  content: "";
  margin-bottom: 4px;
}


/* =================================================
   FOOTER – Réseaux sociaux : espacement + alignement
   (cible uniquement la colonne newsletter)
   ================================================= */

/* Espace entre bouton "Je m'abonne" et les icônes */
#block-11 .wp-block-social-links {
  margin-top: 18px !important;
  justify-content: center;
  gap: 12px; /* espace entre icônes */
}

/* Cercles parfaits + centrage */
#block-11 .wp-block-social-links .wp-social-link,
#block-11 .wp-block-social-links .wp-social-link a {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG bien centré, taille cohérente */
#block-11 .wp-block-social-links svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Empêche des effets de ligne/hauteur hérités du footer */
#block-11 .wp-block-social-links,
#block-11 .wp-block-social-links li {
  line-height: 0 !important;
}







/* Alignement header top */
.header-top-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-socials {
    display: flex;
    align-items: center;
    gap: 6px; /* ← ajuste ici (4px / 6px / 8px) */
}

.header-socials .social {
    margin: 0; /* sécurité */
}


/* lien */
.header-socials .social{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  color: #fff; /* hérite bien sur bandeau sombre */
}

.header-socials a {
margin-left: 0px !important;
}




















/* =========================
   CHECKOUT – LAYOUT OPTIMISÉ
   Page ID: 9
   ========================= */

.page-id-9{

  /* largeur colonne droite (à ajuster ici) */
  --checkout-right-width: 520px;
}

/* Container plus large */
.page-id-9 .entry-layout .container{
  max-width: 1400px;
}

.page-id-9 .entry-layout .gcol-9_sm-12{
  flex-basis: 100%;
  max-width: 100%;
}

/* =========================
   GRILLE PRINCIPALE
   ========================= */

.page-id-9 .woocommerce form.checkout{
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--checkout-right-width);
  column-gap: 60px;
  row-gap: 32px;
  align-items: start;
}

/* =========================
   CHECKOUT – ORDER GRID (DESKTOP)
   Objectif : Express -> "OU" -> Détails facturation
========================= */

@media (min-width: 1025px){

  /* Ligne 1 : coupon / infos */
  .page-id-9 .woocommerce-form-coupon-toggle{
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Ligne 2 : express checkout (GPay / Apple Pay / etc.) */
  .page-id-9 .wcpay-express-checkout-wrapper,
  .page-id-9 #wcpay-express-checkout-element,
  .page-id-9 #wc-stripe-express-checkout-element{
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Ligne 3 : séparateur — OU — */
  .page-id-9 #wc-stripe-express-checkout-button-separator,
  .page-id-9 #wcpay-express-checkout-button-separator{
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin: 18px 0 28px !important;
    text-align: center;
  }

  /* Ligne 4 : contenu principal */
  .page-id-9 #customer_details{
    grid-column: 1;
    grid-row: 4;
  }

  .page-id-9 #order_review_heading{
    grid-column: 2;
    grid-row: 4;
    margin: 0 0 16px 0;
  }

  .page-id-9 #order_review{
    grid-column: 2;
    grid-row: 4;
    align-self: start;
    margin: 0; /* on évite les hacks margin-top */
  }

  .page-id-9 .woocommerce-additional-fields{
    grid-column: 1;
    grid-row: 5;
  }
}

/* =========================
   BLOCS FULL WIDTH
   ========================= */

.page-id-9 .woocommerce-form-coupon-toggle,
.page-id-9 .wcpay-express-checkout-wrapper,
.page-id-9 #wcpay-express-checkout-element,
.page-id-9 #wc-stripe-express-checkout-element,
.page-id-9 #wc-stripe-express-checkout-button-separator,
.page-id-9 #wcpay-express-checkout-button-separator{
  grid-column: 1 / -1;
}

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

.page-id-9 #customer_details{
  grid-column: 1;
}

/* Annule les floats Woo */
.page-id-9 #customer_details .col-1,
.page-id-9 #customer_details .col-2{
  float: none;
  width: 100%;
}

/* Prénom / Nom sur 2 colonnes */
.page-id-9 .woocommerce-billing-fields__field-wrapper .form-row-first,
.page-id-9 .woocommerce-billing-fields__field-wrapper .form-row-last{
  width: calc(50% - 10px);
}

.page-id-9 .woocommerce-billing-fields__field-wrapper .form-row-first{
  float: left;
}
.page-id-9 .woocommerce-billing-fields__field-wrapper .form-row-last{
  float: right;
}

/* Notes de commande */
.page-id-9 .woocommerce-additional-fields{
  grid-column: 1;
}

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

.page-id-9 #order_review_heading{
  grid-column: 2;
  margin: 0 0 16px 0;
}

.page-id-9 #order_review{
  grid-column: 2;
  align-self: start;
  margin: 0;
  padding: 0;
}

/* Table commande */
.page-id-9 #order_review .shop_table{
  width: 100%;
}

/* Bloc paiement */
.page-id-9 #payment{
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
}

/* Bouton commander */
.page-id-9 #place_order{
  float: right;
}

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

@media (max-width: 980px){

  .page-id-9 .woocommerce form.checkout{
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .page-id-9 #customer_details,
  .page-id-9 #order_review_heading,
  .page-id-9 #order_review,
  .page-id-9 .woocommerce-additional-fields{
    grid-column: 1 / -1;
  }

  .page-id-9 .woocommerce-billing-fields__field-wrapper .form-row-first,
  .page-id-9 .woocommerce-billing-fields__field-wrapper .form-row-last{
    width: 100%;
    float: none;
  }

  .page-id-9 #place_order{
    float: none;
    width: 100%;
  }
}

/* FIX: remonter la colonne droite (titre + bloc commande sur la même ligne grid) */
.page-id-9 .woocommerce form.checkout{
  align-items: start;
}

.page-id-9 #customer_details{
  grid-column: 1;
  grid-row: 3;
}

.page-id-9 #order_review_heading{
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  margin: 0 0 16px 0;
}

/* clé : même row que le titre */
.page-id-9 #order_review{
  grid-column: 2;
  grid-row: 3;          /* <<< IMPORTANT */
  align-self: start;
  margin-top: 85px;     /* ajuste 48 / 56 / 64 selon ton rendu */
}

.page-id-9{
  --checkout-right-width: 560px; /* 520 -> 560 / 600 */
}


/* =========================
   CHECKOUT - Responsive (1 colonne tablette + mobile)
   ========================= */
@media (max-width: 1024px){
  .page-id-9 .woocommerce form.checkout,
  body.woocommerce-checkout form.checkout.woocommerce-checkout{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .page-id-9 .wcpay-express-checkout-wrapper,
  .page-id-9 #wcpay-express-checkout-element,
  .page-id-9 #wc-stripe-express-checkout-element,
  .page-id-9 #wc-stripe-express-checkout-button-separator,
  .page-id-9 #wcpay-express-checkout-button-separator,
  .page-id-9 #customer_details,
  .page-id-9 #order_review_heading,
  .page-id-9 #order_review,
  .page-id-9 .woocommerce-additional-fields{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;     /* <-- important */
    margin-top: 0 !important;      /* <-- enlève le décalage desktop */
  }

  /* Optionnel: bouton plein largeur */
  .page-id-9 #place_order{
    float: none !important;
    width: 100% !important;
  }

  /* Optionnel: Prénom/Nom repassent en 1 colonne */
  .page-id-9 .woocommerce-billing-fields__field-wrapper .form-row-first,
  .page-id-9 .woocommerce-billing-fields__field-wrapper .form-row-last{
    width: 100% !important;
    float: none !important;
  }
}

/* =========================
   FIX POSITION "— OU —"
   ========================= */

/* Le séparateur OU */
.page-id-9 .woocommerce-checkout .checkout-separator,
.page-id-9 .woocommerce-checkout .or-separator,
.page-id-9 .woocommerce-checkout .wc-stripe-express-checkout-button-separator{
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;   /* <-- juste après Google Pay */
  margin: 24px 0 32px !important;
  text-align: center;
}

/* On décale les blocs suivants */
.page-id-9 #customer_details{
  grid-row: 4 !important;
}

.page-id-9 #order_review_heading{
  grid-row: 4 !important;
}

.page-id-9 #order_review{
  grid-row: 4 !important;
}


body.light #header .site-navigation .inner .menu nav ul:not(.sub-menu)>li.menu-item-has-children>ul.sub-menu {
    background-color: #FFFFFF;
}



/* =========================
   Add to cart : responsive
   ========================= */


/* DESKTOP : quantité (25%) + bouton panier (75%) sur la même ligne */
@media (min-width: 1350px) {
  .woocommerce-variation-add-to-cart.variations_button {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 12px !important;
    flex-wrap: wrap; /* important: permet aux éléments suivants (ex: échantillon) de passer à la ligne */
  }

  /* Quantité = 25% */
  .woocommerce-variation-add-to-cart.variations_button > .quantity {
    flex: 0 0 25%;
    max-width: 25%;
    margin: 0 !important;
  }

  .woocommerce-variation-add-to-cart.variations_button > .quantity input.qty {
    width: 100%;
  }

  /* Ajouter au panier = 75% */
  .woocommerce-variation-add-to-cart.variations_button > .single_add_to_cart_button {
    flex: 1 1 70%;
    width: auto !important;
    margin: 0 !important;
  }
}


/* =========================
   MOBILE : 3 éléments empilés
   ========================= */
@media (max-width: 1349px) {

  /* Conteneur en colonne */
  .woocommerce-variation-add-to-cart.variations_button {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Quantité pleine largeur */
  .woocommerce-variation-add-to-cart.variations_button > .quantity {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .woocommerce-variation-add-to-cart.variations_button > .quantity input.qty {
    width: 100% !important;
  }

  /* Ajouter au panier pleine largeur */
  .woocommerce-variation-add-to-cart.variations_button > .single_add_to_cart_button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Demander un échantillon pleine largeur */
  .woocommerce-variation-add-to-cart.variations_button > #request-echantillon {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}



/* =========================================
Sidebar filtres à gauche + 2 colonnes en desktop
========================================= */
@media (min-width: 1024px) {


/* Le container des colonnes */
.loop-layout .gridlex-noBottom {
display: flex !important;
flex-wrap: nowrap !important; /* empêche la sidebar de passer au-dessus */
gap: 30px;
align-items: flex-start;
}


/* Sidebar (filtres) à gauche */
.loop-layout .gridlex-noBottom > .gcol-3_sm-12 {
order: 1;
flex: 0 0 280px !important; /* largeur fixe propre */
max-width: 280px !important;
}


/* Contenu (catégories + produits) à droite */
.loop-layout .gridlex-noBottom > .gcol-9_sm-12 {
order: 2;
flex: 1 1 auto !important; /* prend le reste */
min-width: 0; /* évite les débordements */
}
}

/* =========================================
Forcer 3 produits par ligne (avec sidebar)
========================================= */
@media (min-width: 1024px) {


.products-list.by-three .gridlex-noBottom {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 30px !important;
}


/* Désactive les anciennes colonnes flex */
.products-list.by-three .gridlex-noBottom > div[class*="gcol-"] {
width: auto !important;
max-width: 100% !important;
}
}

/* =========================================================
   CHECKOUT – FIX TABLETTE / MOBILE (anti-superposition)
   + "— OU —" au bon endroit
   À COLLER TOUT EN BAS
========================================================= */

@media (max-width: 1024px){

  /* 1) On coupe complètement le GRID en mobile => plus de collisions */
  .page-id-9 .woocommerce form.checkout{
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }

  /* 2) On remet tous les blocs en flux normal */
  .page-id-9 .woocommerce form.checkout > *{
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: 0 !important;
  }

  /* 3) On force l’ordre des sections (express -> OU -> facturation -> commande -> paiement) */
  .page-id-9 .woocommerce form.checkout .wcpay-express-checkout-wrapper{ order: 1 !important; }
  .page-id-9 .woocommerce form.checkout #wc-stripe-express-checkout-element{ order: 2 !important; }

  /* On n’affiche qu’un seul séparateur (Stripe), et on le place juste après */
  .page-id-9 .woocommerce form.checkout #wcpay-express-checkout-button-separator{ display: none !important; }

  .page-id-9 .woocommerce form.checkout #wc-stripe-express-checkout-button-separator{
    order: 3 !important;
    display: block !important;
    margin: 14px 0 6px !important;
    text-align: center !important;
  }

  .page-id-9 .woocommerce form.checkout #customer_details{ order: 4 !important; }
  .page-id-9 .woocommerce form.checkout #order_review_heading{ order: 5 !important; }
  .page-id-9 .woocommerce form.checkout #order_review{ order: 6 !important; }
  .page-id-9 .woocommerce form.checkout .woocommerce-additional-fields{ order: 7 !important; }

  /* 4) Anti "superposition" Stripe / Select2 : on donne des z-index propres */
  .page-id-9 .woocommerce form.checkout #payment{
    position: relative !important;
    z-index: 0 !important;
  }

  .page-id-9 .select2-container,
  .page-id-9 .select2-dropdown{
    z-index: 9999 !important;
  }
}
















































/* =========================================================
   WooCommerce Cart (Panier) – Clean "slide 2" + responsive
   Scope: page panier uniquement
========================================================= */

body.woocommerce-cart{
  --b:#e9e9e9;
  --t:#1a1a1a;
  --m:#7d7d7d;
  --blk:#0f0f0f;
  --r:2px;
}

/* -------------------------
   TABLE (desktop)
-------------------------- */
body.woocommerce-cart table.shop_table{
  width:100%;
  border:0 !important;
  border-collapse:collapse !important;
  background:transparent;
}

body.woocommerce-cart table.shop_table thead th{
  padding:18px 14px !important;
  border:0 !important;
  border-bottom:1px solid var(--b) !important;
  font-size:11px;
  font-weight:600 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--m);
}

body.woocommerce-cart table.shop_table td{
  padding:22px 14px !important;
  border:0 !important;
  border-bottom:1px solid var(--b) !important;
  vertical-align:middle;
  color:var(--t);
}

/* Colonnes stables (évite la "colonne produit" trop fine) */
body.woocommerce-cart table.cart{ table-layout:fixed !important; }

body.woocommerce-cart th.product-remove,
body.woocommerce-cart td.product-remove{ width:54px !important; }

body.woocommerce-cart th.product-thumbnail,
body.woocommerce-cart td.product-thumbnail{ width:96px !important; }

body.woocommerce-cart th.product-quantity,
body.woocommerce-cart td.product-quantity{ width:140px !important; }

body.woocommerce-cart th.product-price,
body.woocommerce-cart td.product-price,
body.woocommerce-cart th.product-subtotal,
body.woocommerce-cart td.product-subtotal{ width:130px !important; white-space:nowrap !important; }

body.woocommerce-cart th.product-name,
body.woocommerce-cart td.product-name{
  width:55% !important;
  min-width:360px !important;
}

/* Remove */
body.woocommerce-cart .product-remove a.remove{
  width:24px; height:24px; line-height:22px;
  border-radius:50%;
  border:1px solid var(--b) !important;
  background:#fff !important;
  color:#9a9a9a !important;
  font-size:18px;
  opacity:.9;
}
body.woocommerce-cart .product-remove a.remove:hover{
  opacity:1;
  border-color:#d9d9d9 !important;
  color:#666 !important;
}

/* Thumbnail */
body.woocommerce-cart td.product-thumbnail img{
  width:62px !important;
  height:62px !important;
  object-fit:cover;
  border-radius:var(--r);
}

/* Product title (anti césure) */
body.woocommerce-cart .product-name,
body.woocommerce-cart .product-name a{
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:auto !important;
  line-height:1.35 !important;
  color:var(--t);
  text-decoration:none;
}
body.woocommerce-cart .product-name a:hover{ text-decoration:underline; }

/* Align price/subtotal right on desktop */
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal{ text-align:right; }

/* Quantity input */
body.woocommerce-cart .quantity .qty{
  width:96px !important;
  height:44px !important;
  padding:0 12px !important;
  border:1px solid var(--b) !important;
  border-radius:var(--r);
  background:#fff !important;
}

/* -------------------------
   ACTIONS (coupon + update)
-------------------------- */
body.woocommerce-cart td.actions{
  border-bottom:0 !important;
  padding-top:26px !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:18px !important;
  align-items:center !important;
}

/* Coupon row */
body.woocommerce-cart td.actions .coupon{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
}

body.woocommerce-cart td.actions .coupon label{
  position:absolute !important;
  left:-9999px !important;
}

body.woocommerce-cart #coupon_code{
  flex:1 1 auto !important;
  min-width:260px !important;
  height:44px !important;
  padding:0 14px !important;
  border:1px solid var(--b) !important;
  border-radius:var(--r) !important;
  background:#fff !important;
  box-shadow:none !important;
}

/* Buttons */
body.woocommerce-cart td.actions .coupon .button,
body.woocommerce-cart td.actions button[name="update_cart"]{
  height:44px !important;
  padding:0 22px !important;
  min-width:210px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  border-radius:var(--r) !important;
  border:1px solid #cfcfcf !important;
  background:transparent !important;
  color:var(--t) !important;
  text-transform:uppercase !important;
  letter-spacing:.10em !important;
  font-size:11px !important;
  box-shadow:none !important;
}
body.woocommerce-cart td.actions .coupon .button:hover,
body.woocommerce-cart td.actions button[name="update_cart"]:hover{
  border-color:#a9a9a9 !important;
}
body.woocommerce-cart td.actions button[name="update_cart"][disabled]{
  opacity:.35 !important;
  cursor:not-allowed !important;
  filter:grayscale(1);
}

/* -------------------------
   TOTALS + CTA
-------------------------- */
body.woocommerce-cart .cart-collaterals{ margin-top:28px; }

/* align right on desktop */
@media (min-width: 992px){
  body.woocommerce-cart .cart-collaterals{
    display:flex !important;
    justify-content:flex-end !important;
  }
}

body.woocommerce-cart .cart_totals{
  float:none !important;
  width:100% !important;
  max-width:560px !important;
  margin:10px 0 0 auto !important;
}

/* remove theme pseudo square */
body.woocommerce-cart .cart_totals h2::before,
body.woocommerce-cart .cart_totals h2::after{
  content:none !important;
  display:none !important;
}

body.woocommerce-cart .cart_totals h2{
  margin:0 0 16px !important;
  padding:0 !important;
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td{
  padding:16px 0 !important;
  border:0 !important;
  border-bottom:1px solid var(--b) !important;
}
body.woocommerce-cart .cart_totals table.shop_table th{
  font-weight:600 !important;
  color:var(--t) !important;
}
body.woocommerce-cart .cart_totals .order-total strong{
  font-size:20px !important;
}

body.woocommerce-cart .wc-proceed-to-checkout{ padding:22px 0 0; }

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  width:100% !important;
  background:var(--blk) !important;
  border:1px solid var(--blk) !important;
  color:#fff !important;
  border-radius:var(--r) !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
  font-size:12px !important;
  padding:18px !important;
}

body.woocommerce-cart #wc-stripe-express-checkout-element{
  max-width:560px;
  margin:14px 0 0 auto;
}

/* -------------------------
   RESPONSIVE (<= 1024px)
-------------------------- */
@media (max-width: 1024px){

  /* cart becomes readable blocks */
  body.woocommerce-cart table.cart{ table-layout:auto !important; }
  body.woocommerce-cart table.cart thead{ display:none !important; }

  body.woocommerce-cart table.cart tr.cart_item{
    display:block !important;
    border-bottom:1px solid var(--b) !important;
    padding:14px 0 !important;
  }

  body.woocommerce-cart table.cart tr.cart_item td{
    display:block !important;
    width:100% !important;
    border:0 !important;
    padding:8px 0 !important;
    text-align:left !important;
  }

  body.woocommerce-cart td.product-remove,
  body.woocommerce-cart td.product-thumbnail{
    display:inline-block !important;
    width:auto !important;
    vertical-align:middle !important;
  }
  body.woocommerce-cart td.product-thumbnail{ padding-right:10px !important; }

  body.woocommerce-cart td.product-name{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    padding-top:6px !important;
  }
  body.woocommerce-cart td.product-name,
  body.woocommerce-cart td.product-name a{ hyphens:none !important; }

  body.woocommerce-cart td.product-price,
  body.woocommerce-cart td.product-subtotal{ text-align:left !important; }

  body.woocommerce-cart td.product-price::before,
  body.woocommerce-cart td.product-quantity::before,
  body.woocommerce-cart td.product-subtotal::before{
    content: attr(data-title) " : ";
    display:inline-block;
    color:var(--m);
    font-size:12px;
    margin-right:6px;
  }

  body.woocommerce-cart td.product-quantity .quantity .qty{
    width:120px !important;
    height:46px !important;
  }

  /* actions stack */
  body.woocommerce-cart td.actions{
    display:block !important;
    padding-top:18px !important;
  }
  body.woocommerce-cart td.actions .coupon{
    flex-wrap:wrap !important;
  }
  body.woocommerce-cart #coupon_code,
  body.woocommerce-cart td.actions .coupon .button,
  body.woocommerce-cart td.actions button[name="update_cart"]{
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
  }
  body.woocommerce-cart td.actions button[name="update_cart"]{
    margin-top:12px !important;
  }

  /* totals full width */
  body.woocommerce-cart .cart-collaterals{
    display:block !important;
  }
  body.woocommerce-cart .cart_totals{
    max-width:100% !important;
    margin:24px auto 0 !important;
  }
  body.woocommerce-cart #wc-stripe-express-checkout-element{
    max-width:100% !important;
    margin:14px 0 0 !important;
  }
}

/* petit ajustement écran moyen */
@media (max-width: 1100px){
  body.woocommerce-cart th.product-name,
  body.woocommerce-cart td.product-name{
    min-width:280px !important;
    width:52% !important;
  }
}

@media (min-width: 801px) {
    body.woocommerce-cart main.entry.page .woocommerce-cart-form table.shop_table .coupon button {
        margin-top: 0px;
    }
}