/*
Theme Name: Twenty Twenty-Four Child - Kilema
Theme URI: https://www.kilema.fr
Description: Thème enfant de Twenty Twenty-Four pour Kilema Éditions
Author: Kilema
Author URI: https://www.kilema.fr
Template: twentytwentyfour
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour-child
*/


/* ===== MARGES GLOBALES - 5% ===== */
/* Écrase les padding inline Gutenberg (10% → 5%) sur le contenu principal */
.wp-block-group.has-global-padding {
  padding-left: 5% !important;
  padding-right: 5% !important;
}

/* Barre de navigation (flex nowrap avec padding 10%).
   Les groupes empilés verticalement (.is-vertical) sont exclus : ils ne
   doivent pas recevoir ces gouttières. */
.wp-block-group.is-nowrap:not(.is-vertical) {
  padding-left: 5% !important;
  padding-right: 5% !important;
}

/* ===== HEADER - LOGO DÉCALÉ ===== */
.site-logo,
.wp-block-site-logo,
.wp-block-site-logo a {
  position: relative;
  margin-top: -40px;
}

.site-header,
header {
  overflow: visible !important;
}

/* L'en-tête passe au-dessus du contenu : sans cela, le slider (z-index 2,
   placé après dans la page) recouvre le bas des sous-menus déroulants et
   le survol se perd quand la souris descend dans le sous-menu. */
header.wp-block-template-part {
  position: relative;
  z-index: 100;
}

/* ===== NAVIGATION - COULEURS ===== */
.site-header-item .kb-navigation .kb-link,
.site-header-item .navigation .menu-item a,
.wp-block-navigation .wp-block-navigation-item a {
  color: #2c2c2c !important;
  text-decoration: none;
}

.site-header-item .kb-navigation .kb-link:hover,
.site-header-item .navigation .menu-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:hover {
  color: #1f6571 !important;
}

/* ===== MENU - FILETS VERTICAUX (DESKTOP) ===== */
/* Réglages centralisés : modifier ces variables suffit pour ajuster le menu.
   --menu-spacing : espace de part et d'autre du filet (s'adapte à la largeur
   d'écran entre 12px et 40px pour éviter que le menu ne passe à la ligne). */
:root {
  --menu-spacing: clamp(12px, 2.2vw, 40px);
  --menu-divider-color: #000;
  --menu-divider-height: 25px;
}

@media (min-width: 1100px) {
  /* L'espacement (« Espacement des blocs ») du bloc Navigation est réglé à 0
     dans l'éditeur (template part Header) : il est remplacé par un padding
     symétrique sur chaque item, ce qui place le filet, posé sur le bord
     droit, pile au milieu de l'espace entre deux éléments. */
  .wp-block-navigation__container > .wp-block-navigation-item {
    position: relative;
    padding: 0 var(--menu-spacing);
  }

  .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: 1px;
    height: var(--menu-divider-height);
    background-color: var(--menu-divider-color);
    pointer-events: none;
  }
}

/* ===== MENU DEUX LIGNES (DESKTOP) ===== */
@media (min-width: 1100px) {
  .wp-block-navigation__container > .wp-block-navigation-item > a {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.3;
    padding: 8px 15px;
  }

  .menu-line-light {
    font-weight: 200;
    display: block;
    font-size: 16px;
  }

  .menu-line-bold {
    font-weight: 500;
    display: block;
    font-size: 16px;
  }
}

/* ===== SOUS-MENUS : UNE LIGNE ===== */
.wp-block-navigation__submenu-container .wp-block-navigation-item a {
  white-space: nowrap !important;
  display: block !important;
  font-weight: 400 !important;
  text-align: left !important;
}

.wp-block-navigation__submenu-container {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  padding: 10px 0;
  min-width: 220px;
}

/* ===== MENU MOBILE / TABLETTE (HAMBURGER) ===== */
/* WordPress n'affiche le hamburger que sous 600px. Or, en dessous de 1100px,
   le menu horizontal ne tient plus sur une ligne : on y force le hamburger.
   Cette limite doit rester alignée sur les @media (min-width: 1100px) du
   menu desktop ci-dessus. */
@media (min-width: 600px) and (max-width: 1099px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* Bouton hamburger : zone tactile de 44px (recommandation d'accessibilité). */
.wp-block-navigation__responsive-container-open {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.wp-block-navigation__responsive-container-open svg {
  width: 28px;
  height: 28px;
}

/* Panneau ouvert : plein écran, liens pleine largeur alignés à gauche. */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: 16px 20px 32px !important;
  background-color: #ffffff !important;
}

.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 28px;
  height: 28px;
}

/* Le thème limite le panneau à 80% de large : on utilise toute la largeur. */
.is-menu-open .wp-block-navigation__responsive-close {
  max-width: none !important;
  margin: 0 !important;
}

.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch !important;
  padding-top: 56px !important;
}

.is-menu-open .wp-block-navigation__container {
  width: 100%;
  align-items: stretch !important;
  gap: 0 !important;
}

/* Éléments de premier niveau séparés par un filet horizontal. */
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  width: 100%;
  padding: 0;
  align-items: stretch !important;
  border-bottom: 1px solid #e3e3e3;
}

.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
  border-top: 1px solid #e3e3e3;
}

.is-menu-open .wp-block-navigation-item::after {
  display: none;
}

.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: flex !important;
  align-items: center;
  min-height: 52px;
  padding: 12px 4px !important;
  font-size: 18px;
  font-weight: 500 !important;
  text-align: left !important;
}

/* Sous-menus : toujours dépliés dans le panneau, en retrait, sans l'aspect
   « liste déroulante » du desktop (boîte, ombre, largeur minimale). */
.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 0 0 8px 16px !important;
  align-items: stretch !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent !important;
}

.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: flex !important;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px !important;
  font-size: 16px;
  color: #555555 !important;
  white-space: normal !important;
}

.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
  width: 100%;
  align-items: stretch !important;
}

/* Focus : visible uniquement à la navigation clavier, aux couleurs du site. */
.is-menu-open a:focus:not(:focus-visible) {
  outline: none;
}

.is-menu-open a:focus-visible,
.is-menu-open button:focus-visible {
  outline: 2px solid #1f6571;
  outline-offset: -2px;
}

/* Page en cours. */
.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
  color: #1f6571 !important;
}

/* ===== BOUTONS D'ACCESSIBILITÉ ===== */
.accessibility-buttons {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-left: auto;
}

.font-size-btn {
  background-color: #f0f0f0;
  border: 2px solid #333;
  color: #333;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.font-size-btn:hover {
  background-color: #333;
  color: #ffffff;
  transform: scale(1.1);
}

.font-size-btn:focus {
  outline: 3px solid #1f6571;
  outline-offset: 2px;
}

.font-size-btn:active {
  transform: scale(0.95);
}

.font-size-btn.active {
  background-color: #1f6571;
  color: #ffffff;
  border-color: #1f6571;
}

@media (max-width: 768px) {
  .accessibility-buttons {
    gap: 3px;
  }

  .font-size-btn {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }
}

/* ===== TAILLES DE TEXTE ACCESSIBILITÉ ===== */
html {
  font-size: 16px;
}

html.font-small {
  font-size: 14px;
}

html.font-large {
  font-size: 18px;
}

html.font-xlarge {
  font-size: 20px;
}

body {
  font-size: 1rem;
  overflow-x: hidden;
}

h1 { font-size: 2.5rem; }

h2 { font-size: 2rem; }

h3 { font-size: 1.5rem; }

h4 { font-size: 1.25rem; }

h5 { font-size: 1.1rem; }

h6 { font-size: 1rem; }

.site-header,
.wp-block-navigation {
  font-size: 16px !important;
}

/* ===== RECHERCHE INSTANTANÉE (suggestions sous le champ de recherche) ===== */
.kilema-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 100;
}

.kilema-search-suggestions__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: #2c2c2c;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.kilema-search-suggestions__item:last-child {
  border-bottom: none;
}

.kilema-search-suggestions__item:hover,
.kilema-search-suggestions__item.is-active {
  background-color: #f5f5f5;
}

.kilema-search-suggestions__item img {
  width: 36px;
  height: 54px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.kilema-search-suggestions__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kilema-search-suggestions__title {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kilema-search-suggestions__price {
  font-size: 0.8rem;
  color: #666;
}

.kilema-search-suggestions__empty {
  padding: 14px;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

/* ===== SLIDER - PLEINE LARGEUR ===== */
.kilema-slider,
.kilema-slider-custom {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Hauteur pilotée par .slider-container (min-height) : le slider
     s'agrandit si le contenu d'une slide est plus haut, au lieu de le
     couper (le bouton disparaissait). */
  height: auto !important;
  position: relative;
  overflow: hidden;
}

/* Sur mobile, le contenu (image + texte + bouton) passe en colonne et
   devient plus haut qu'en desktop : on laisse le conteneur s'adapter
   à la hauteur réelle du contenu au lieu de la couper. */
@media (max-width: 768px) {
  .kilema-slider,
  .kilema-slider-custom {
    height: auto !important;
    min-height: 400px;
  }
}

.slider-container {
  display: flex;
  min-height: max(20vw, 400px);
  overflow-x: auto;
  /* Sans cela, overflow-x: auto rend aussi le conteneur défilable en
     vertical (trackpad) dès que le contenu dépasse. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slider-container::-webkit-scrollbar {
  display: none;
}

.slide {
  min-width: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


/* Positionnement de l'image */
.slide img.img-position-gauche {
  object-position: left center;
}

.slide img.img-position-centre {
  object-position: center center;
}

.slide img.img-position-droite {
  object-position: right center;
}

.slide-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 40px;
  max-width: 800px;
}

.slide-text-only {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.slide-content h3 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Polices personnalisées pour le slider */
.font-roboto-light h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.font-roboto-regular h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.font-roboto-bold h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

.title-line-1 {
  font-weight: 300;
  font-size: 1.2rem;
}

.title-line-2 {
  font-weight: 800;
  font-size: 2.5rem;
}

.slide-content p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 30px;
}

.btn-commander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px; /* Hauteur fixe de 30px */
  padding: 0 40px; /* Padding horizontal uniquement */
  background-color: #ffffff2a;
  color: #333;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.95rem; /* Réduire légèrement la taille de police */
  line-height: 1;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-commander:hover {
  background-color: #1f6571;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.slider-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.dot:hover,
.dot.active {
  background-color: #ffffff;
  transform: scale(1.2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .slide {
    height: auto !important;      /* ← remplace la hauteur fixe de 400px */
    min-height: 350px !important; /* ← hauteur minimum pour éviter un slider trop petit */
    padding: 20px 0 !important;
  }

  .slide-content-wrapper {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    align-items: center;
  }

  .slide-product-image {
    width: min(var(--slide-product-size, 300px), 35vw) !important;
    max-width: min(var(--slide-product-size, 300px), 35vw) !important;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .slide {
    min-height: 300px !important;
  }

  .slide-product-image {
    width: min(var(--slide-product-size, 300px), 30vw) !important;
    max-width: min(var(--slide-product-size, 300px), 30vw) !important;
  }

  .slide-content h3 {
    font-size: 1.8rem;
  }

  .title-line-1 {
    font-size: 1.5rem;
  }

  .title-line-2 {
    font-size: 1.8rem;
  }

  .slide-content p {
    font-size: 1rem;
  }

  .btn-commander {
    padding: 12px 30px;
    font-size: 1rem;
  }
}


/* ===== SLIDER AVANCÉ ===== */
.slide-advanced {
  background: transparent !important;
}

.slide-bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 1;
}

.slide-bg-image.img-position-left {
  object-position: left center;
}

.slide-bg-image.img-position-center {
  object-position: center center;
}

.slide-bg-image.img-position-right {
  object-position: right center;
}

.slide-content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px;
}

.slide-product-image {
  flex-shrink: 0;
  width: var(--slide-product-size, 300px);
  max-width: var(--slide-product-size, 300px);
}

.slide-product-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  box-shadow: 0 10px 10px rgba(0,0,0,0.3);
  object-fit: contain !important;
  margin-left: 0; /* ← Suppression du margin-left fixe de 80px */
}

.slide-content-advanced {
  flex: 1;
  color: #000000;
}

.slide-content-advanced h3 {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  align-items: flex-start;
}

/* Pour centrer les lignes si text-align: center */
.slide-content-advanced[style*="text-align: center"] h3 {
  align-items: center;
}

/* Pour aligner à droite si text-align: right */
.slide-content-advanced[style*="text-align: right"] h3 {
  align-items: flex-end;
}

.slide-content-advanced .title-line-1 {
  display: inline-block;
  position: relative;
  padding-bottom: 15px;
}

.slide-content-advanced .title-line-1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.slide-content-advanced .title-line-2 {
  display: block;
  margin-top: 10px;
}

.slide-content-advanced p {
  line-height: 1.8;
  margin-bottom: 30px;
  font-weight: 800;
}

/* Responsive */
@media (max-width: 768px) {
  .slide-content-wrapper {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

/* Sur tablette : réduit à 20vw sans dépasser la valeur choisie */
@media (max-width: 1024px) {
  .slide-product-image {
    width: min(var(--slide-product-size, 300px), 20vw) !important;
    max-width: min(var(--slide-product-size, 300px), 20vw) !important;
  }
}

/* Sur mobile */
@media (max-width: 768px) {
  .slide-product-image {
    width: min(var(--slide-product-size, 300px), 35vw) !important;
    max-width: min(var(--slide-product-size, 300px), 35vw) !important;
  }
}

/* Très petit écran */
@media (max-width: 480px) {
  .slide-product-image {
    width: min(var(--slide-product-size, 300px), 30vw) !important;
    max-width: min(var(--slide-product-size, 300px), 30vw) !important;
  }
}

  .slide-content-advanced {
    text-align: center !important;
  }
}


/* ===== FLÈCHES DE NAVIGATION SLIDER ===== */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.slider-arrow:hover {
  background-color: rgba(31, 101, 113, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.slider-arrow:hover svg {
  stroke: #ffffff;
}

.slider-arrow svg {
  width: 24px;
  height: 24px;
  stroke: #333;
  stroke-width: 2;
  transition: stroke 0.3s ease;
}

.slider-arrow-left {
  left: 20px;
}

.slider-arrow-right {
  right: 20px;
}

/* Masquer les flèches sur mobile */
@media (max-width: 768px) {
  .slider-arrow {
    width: 40px;
    height: 40px;
  }

  .slider-arrow-left {
    left: 10px;
  }

  .slider-arrow-right {
    right: 10px;
  }
}


/* ========================================
   SLIDER - MARGES RESPONSIVE
   ======================================== */

/* Réduction automatique sur tablette */
@media (max-width: 1024px) {
  .slide-content-advanced {
    margin-left: 30px !important;
    margin-right: 30px !important;
    margin-top: 30px !important;
    max-width: calc(100% - 60px) !important;
  }
}

/* Réduction automatique sur mobile */
@media (max-width: 768px) {
  .slide-content-advanced {
    margin-left: 20px !important;
    margin-right: 20px !important;
    margin-top: 20px !important;
    max-width: calc(100% - 40px) !important;
  }
}

/* Très petit écran */
@media (max-width: 480px) {
  .slide-content-advanced {
    margin-left: 15px !important;
    margin-right: 15px !important;
    margin-top: 15px !important;
    max-width: calc(100% - 30px) !important;
  }
}


/* ========================================
   SLIDER - TYPOGRAPHIE RESPONSIVE
   ======================================== */

/* Tablette */
@media (max-width: 1024px) {
  .slide-content-advanced h3 {
    font-size: clamp(1.2rem, 3vw, 2.5rem) !important;
  }

  .slide-content-advanced p {
    font-size: clamp(0.9rem, 2vw, 1.2rem) !important;
  }

  .slide-content-advanced .title-line-1 {
    font-size: clamp(0.9rem, 2vw, 1.2rem) !important;
  }

  .slide-content-advanced .title-line-2 {
    font-size: clamp(1.2rem, 3vw, 2.5rem) !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .slide-content-advanced h3 {
    font-size: clamp(1rem, 4vw, 1.8rem) !important;
    align-items: center !important;
    text-align: center !important;
  }

  .slide-content-advanced p {
    font-size: clamp(0.8rem, 3vw, 1rem) !important;
  }

  .slide-content-advanced .title-line-1 {
    font-size: clamp(0.8rem, 3vw, 1rem) !important;
  }

  .slide-content-advanced .title-line-2 {
    font-size: clamp(1rem, 4vw, 1.8rem) !important;
  }

  .btn-commander {
    font-size: 0.85rem !important;
    padding: 0 25px !important;
  }
}

/* Très petit écran */
@media (max-width: 480px) {
  .slide-content-advanced h3 {
    font-size: clamp(0.9rem, 5vw, 1.4rem) !important;
    align-items: center !important;
    text-align: center !important;
  }

  .slide-content-advanced p {
    font-size: clamp(0.75rem, 3.5vw, 0.9rem) !important;
  }

  .btn-commander {
    font-size: 0.8rem !important;
    padding: 0 20px !important;
  }
}


/* ========================================
   SLIDER - IMAGE PRODUIT RESPONSIVE
   ======================================== */

/* Tablette */
@media (max-width: 1024px) {
  .slide-product-image {
    width: clamp(150px, 20vw, 300px) !important;
    max-width: clamp(150px, 20vw, 300px) !important;
  }

  .slide-product-image img {
    width: 100% !important;
    height: auto !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .slide-product-image {
    width: clamp(100px, 25vw, 200px) !important;
    max-width: clamp(100px, 25vw, 200px) !important;
  }
}

/* Très petit écran */
@media (max-width: 480px) {
  .slide-product-image {
    width: clamp(80px, 22vw, 150px) !important;
    max-width: clamp(80px, 22vw, 150px) !important;
  }
}


/* ===== SECTION NOUVEAUTÉS ===== */
/* .kilema-topvente-section partage ce style (même modèle de carrousel,
   voir shortcode [kilema_topvente]) */
.kilema-nouveautes-section,
.kilema-topvente-section {
  padding: 0px 0;
  /* Gouttières 5vw à gauche et à droite */
  margin-inline: 5vw;
}

.nouveautes-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 50px;
  color: #2c2c2c;
}

.nouveautes-grid {
  /* Carrousel horizontal : l'utilisateur swipe / scrolle vers la droite
     pour voir les nouveautés suivantes. */
  display: flex;
  gap: 40px;
  max-width: none;
  margin: 0;
  /* padding vertical : laisse la place au décalage + ombre au survol et à la scrollbar */
  padding: 8px 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox : masque la scrollbar (le scroll reste actif) */
  -ms-overflow-style: none;   /* Edge/IE historiques */
  overscroll-behavior-x: contain;
  margin-inline: 5vw;
}

/* Firefox rend les conteneurs défilables (overflow-x: auto) focusables pour
   permettre le défilement au clavier, et affiche son contour de focus par
   défaut dès le chargement de la page, avant toute interaction. On le
   supprime sur le carrousel lui-même (les liens des cartes gardent le leur
   via la règle .nouveaute-item a plus bas). */
.nouveautes-grid:focus,
.nouveautes-grid:focus-visible {
  outline: none;
}

.nouveautes-grid::-webkit-scrollbar {
  display: none;              /* Chrome/Safari/Edge : masque la scrollbar */
}

/* Glisser à la souris (JS ajoute .is-dragging pendant le clic maintenu) */
.nouveautes-grid {
  cursor: grab;
}

.nouveautes-grid.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
}

.nouveautes-grid img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Flèches gauche / droite (ajoutées par JS, voir kilema_nouveautes_drag_script).
   Placées dans la gouttière de 5vw entre la section et le carrousel, à
   mi-hauteur des couvertures (8px de padding + moitié de la ligne image). */
.has-carousel-arrows {
  position: relative;
  --carousel-arrow-top: calc(8px + 350px / 2);
}

.carousel-arrow {
  position: absolute;
  top: var(--carousel-arrow-top);
  transform: translateY(-50%);
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.has-carousel-arrows.is-scrollable .carousel-arrow {
  display: flex;
}

.carousel-arrow-prev {
  left: max(0px, calc(2.5vw - 22px));
}

.carousel-arrow-next {
  right: max(0px, calc(2.5vw - 22px));
}

.carousel-arrow svg {
  width: 24px;
  height: 24px;
  stroke: #333;
  stroke-width: 2;
  transition: stroke 0.3s ease;
}

.carousel-arrow:hover:not(:disabled) {
  background-color: rgba(31, 101, 113, 0.9);
}

.carousel-arrow:hover:not(:disabled) svg {
  stroke: #ffffff;
}

.carousel-arrow:focus-visible {
  outline: 2px solid #1f6571;
  outline-offset: 2px;
}

/* Début / fin de liste : la flèche reste visible mais estompée. */
.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 768px) {
  .has-carousel-arrows {
    --carousel-arrow-top: calc(8px + 300px / 2);
  }

  .carousel-arrow {
    width: 36px;
    height: 36px;
  }

  .carousel-arrow svg {
    width: 20px;
    height: 20px;
  }
}

/* ===== ITEM NOUVEAUTÉ AVEC ALIGNEMENT ===== */
.nouveaute-item {
  text-align: center;
  transition: transform 0.3s ease;
  display: grid;
  grid-template-rows: 350px auto auto;
  /*gap: 2px;*/
  align-items: start;
  /* Largeur fixe d'une carte dans le carrousel (ne se compresse pas) */
  flex: 0 0 260px;
  scroll-snap-align: start;
}

.nouveaute-item:hover {
  transform: translateY(-5px);
}

.nouveaute-content {
  position: relative;
  display: flex;
  /* Couverture centrée verticalement et horizontalement dans la carte.
     Padding gauche/droite symétrique : garde la place pour l'étiquette
     verticale « COLLECTION » tout en centrant réellement la couverture. */
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  height: 100%;

}

/* ===== COLLECTION EN VERTICAL ===== */
/* ===== COLLECTION EN VERTICAL ===== */
.collection-label {
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center; /* Libellé "COLLECTION …" centré dans la hauteur du bloc */
  z-index: 2;
}

.collection-full {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  background-color: transparent;
  color: #000000;
  /*padding: 15px 5px 15px 8px; */
  font-size: 0.75rem;
  font-weight: 300; /* Compromis entre light et bold */
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: 'Roboto', sans-serif;
  border-left: 1px solid #000000;
}

/* Le mot "COLLECTION" garde la graisse de .collection-full (500) ;
   seul le nom de la collection (Théâtre, Adulte, …) passe en Roboto bold. */
.collection-name {
  font-weight: 900;
}

/* ===== IMAGE PRODUIT ===== */
.product-image {
  position: relative;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.product-image img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border-radius: 0px;
  transition: box-shadow 0.3s ease;
  border: 4px solid #ffffff;
}

/* Firefox peint parfois le cadre de la couverture avec la couleur du lien
   parent (a:where(:not(.wp-element-button)) → #1f6571), surtout pour les
   produits déjà visités ; le cadre ne redevient blanc qu'au survol.
   On neutralise la couleur du lien de couverture (visité ou non) pour que
   rien ne puisse hériter du vert. */
.product-image a,
.product-image a:visited {
  display: block;
  color: #ffffff;
  text-decoration: none;
}

.nouveaute-item:hover .product-image img {
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.no-image {
  width: 100%;
  aspect-ratio: 2/3;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  border-radius: 4px;
}

/* ===== TITRE ET AUTEUR ===== */
.product-title {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  padding: 2px 0;
  color: #2c2c2c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-height: 65px; /* Hauteur fixe pour aligner les titres */
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.product-title a:hover {
  color: #1f6571;
}

/* Pas de contour au clic sur les couvertures/titres des carrousels
   Nouveautés et Top ventes (reste visible au clavier via :focus-visible). */
.nouveaute-item a:focus:not(:focus-visible) {
  outline: none;
}

.product-author {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  padding: 2px 0;
  font-style: italic;
  min-height: 30px; /* Hauteur fixe même si pas d'auteur */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== BOUTON COMMANDER ===== */
.btn-commander-nouveaute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Hauteur pilotée par le padding (pas de height fixe) : évite le décalage
     vertical du texte sur Edge/Chrome (Blink), qui ne centrait pas la ligne
     flex de la même façon que Firefox dans une hauteur imposée.
     10px + 14.4px (0.9rem) + 10px ≈ 34px, soit l'ancien rendu. */
  box-sizing: border-box;
  padding: 10px 30px;
  line-height: 1;
  background-color: #ffffff;
  color: #2c2c2c;
  text-decoration: none;
  border: 1px solid #2c2c2c;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  margin-top: 2px;
  align-self: center;
}

.btn-commander-nouveaute:hover {
  background-color: #ffffff;
  border-color: #000000;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .nouveautes-grid {
    gap: 24px;
  }

  .nouveaute-item {
    grid-template-rows: 300px auto auto;
    /* Sur mobile : ~1,3 carte visible → l'utilisateur voit qu'il peut swiper */
    flex-basis: 78vw;
    max-width: 300px;
  }

  .nouveaute-content {
    min-height: 300px;
  }

  .collection-label span {
    font-size: 0.65rem;
    padding: 10px 4px 10px 6px;
  }

  .product-title {
    font-size: 0.95rem;
    min-height: 55px;
  }

  .product-author {
    font-size: 0.85rem;
    min-height: 25px;
  }
}

/*```

## **3. Tester le shortcode**

Une fois les fichiers modifiés, ajoutez le shortcode dans votre page :
```
[kilema_nouveautes]
```

## **3. Utiliser le shortcode**

Dans votre page d'accueil (éditeur Gutenberg), ajoutez un **Bloc Shortcode** et mettez :
```
[kilema_nouveautes limit="5"]
```

Ou si vous voulez afficher 10 produits :
```
[kilema_nouveautes limit="10"]*/


/* ===== SECTION TÉMOIGNAGES ===== */
.kilema-temoignages-section {
  padding: 0px 0;
  background-color: #f8f8f8;
}

.temoignages-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 60px;
  color: #2c2c2c;
}

.temoignages-slider-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 80px;
}

.temoignages-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.temoignages-container::-webkit-scrollbar {
  display: none;
}

/* ===== TÉMOIGNAGE ITEM ===== */
.temoignage-item {
  min-width: 100%;
  scroll-snap-align: start;
  /*padding: 40px 20px;*/
}

.temoignage-content {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* ===== GUILLEMETS ===== */
.quote-mark {
  font-size: 6rem;
  font-family: Georgia, serif;
  color: #1f6571;
  line-height: 1;
  opacity: 0.3;
}

.quote-open {
  margin-bottom: -40px;
}

.quote-close {
  margin-top: -40px;
  transform: rotate(180deg);
  display: inline-block;
}

/* ===== CITATION ===== */
.temoignage-citation {
  font-size: 1.3rem;
  line-height: 1.8;
  color: #2c2c2c;
  font-style: italic;
  margin: 30px 0;
  padding: 0 20px;
  font-weight: 300;
}

/* ===== AUTEUR ===== */
.temoignage-auteur {
  margin-top: 30px;
  font-size: 1.1rem;
  color: #666;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.temoignage-auteur strong {
  color: #2c2c2c;
  font-weight: 700;
  font-size: 1.2rem;
}

.temoignage-fonction {
  font-style: italic;
  font-size: 1rem;
  color: #999;
}

/* ===== FLÈCHES ===== */
.temoignage-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid #2c2c2c;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.temoignage-arrow:hover {
  background-color: #1f6571;
  border-color: #1f6571;
  transform: translateY(-50%) scale(1.1);
}

.temoignage-arrow:hover svg {
  stroke: #ffffff;
}

.temoignage-arrow svg {
  width: 24px;
  height: 24px;
  stroke: #2c2c2c;
  stroke-width: 2;
  transition: stroke 0.3s ease;
}

.temoignage-arrow-left {
  left: 0;
}

.temoignage-arrow-right {
  right: 0;
}

/* ===== DOTS ===== */
.temoignages-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.temoignage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(44, 44, 44, 0.3);

  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.temoignage-dot:hover,
.temoignage-dot.active {
  background-color: #1f6571;
  border-color: #1f6571;
  transform: scale(1.2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .temoignages-slider-wrapper {
    padding: 0 60px;
  }

  .temoignage-arrow {
    width: 40px;
    height: 40px;
  }

  .temoignage-citation {
    font-size: 1.1rem;
    padding: 0 10px;
  }

  .quote-mark {
    font-size: 4rem;
  }

  .quote-open {
    margin-bottom: -30px;
  }

  .quote-close {
    margin-top: -30px;
  }
}

/*```

## **3. Utiliser le shortcode**

Dans votre page d'accueil, ajoutez un bloc Shortcode avec :
```
[kilema_temoignages] */


.btn-actu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 0px;
  background-color: #2c2c2c;
  color: #ffffff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-actu:hover {
  background-color: #1f6571;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(31, 101, 113, 0.4);
}


/* ===== FOOTER KILEMA ===== */

/* Container général */
.kilema-footer {
  width: 100%;
  font-family: 'Roboto', sans-serif;
}

.footer-container {
  max-width: 80%;

  padding: 0 20px;
    margin-left: 20%;
  margin-right: 20%;
}

/* ===== FOOTER PLEINE LARGEUR ===== */

/* Le footer prend toute la largeur */
.full-width-footer {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Section réseaux sociaux en pleine largeur */
.footer-social-section {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  background-color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.footer-social-section .footer-container {
  max-width: 100%;
  padding: 20px 20px;
}

/* Les autres sections du footer gardent une largeur max */
.footer-main-section .footer-container,
.footer-bottom-section .footer-container {
  margin: 0 auto;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.social-item {
  display: flex;
  align-items: center;
  /* Centré dans sa colonne : sinon les 3 boutons, calés à gauche de leur
     tiers, paraissent décalés vers la gauche du bandeau */
  justify-content: center;
  gap: 15px;
}

.social-icon {
  width: 60px;
  height: 60px;
  background-color: #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.05);
  background-color: #1f6571;
}

.social-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.social-label {
  font-size: 14px;
  color: #666666;
  font-weight: 400;
}

.social-link {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-link:hover {
  color: #1f6571;
}

/* ===== SÉPARATEUR ===== */
.footer-separator {
  margin: 0;
  border: none;
  border-top: 1px solid #dddddd;
}

/* ===== SECTION CONTENU PRINCIPAL ===== */
.footer-main-section {
  padding: 60px 0;
}

.footer-main-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
  gap: 60px;
}

.footer-column {
  display: flex;
  flex-direction: column;
}

/* Colonne Info (Kilema) */
.footer-logo {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1px;
  color: #2c2c2c;
  margin: 0 0 20px 0;
}

.footer-address,
.footer-contact {
  font-size: 16px;
  color: #2c2c2c;
  margin: 10px 0;
  line-height: 1.6;
}

.footer-contact a {
  color: #2c2c2c;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact a:hover {
  color: #1f6571;
}

/* Colonnes Liens */
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-menu li::before {
  content: '• ';
  font-weight: 700;
  color: #2c2c2c;
}

.footer-menu a {
  font-size: 16px;
  font-weight: 700;
  color: #2c2c2c;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-menu a:hover {
  color: #1f6571;
}

/* Colonne Partenaires */
.footer-partners-title {
  font-size: 16px;
  font-weight: 700;
  color: #2c2c2c;
  margin: 0 0 20px 0;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 80px);
  gap: 15px;
}

.partner-logo {
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.partner-logo:hover {
  transform: scale(1.05);
  opacity: 0.8;
}

.partner-logo img {
  width: auto;
  display: block;
  max-height: 40px;
}

/* ===== SECTION BAS DE PAGE ===== */
.footer-bottom-section {
  padding: 30px 0;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 14px;
}

.footer-legal-links a {
  color: #1f6571;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal-links a:hover {
  color: #1f6571;
}

.footer-legal-links .separator {
  color: #999999;
}

.footer-copyright {
  font-size: 13px;
  color: #666666;
  margin: 0;
  white-space: nowrap;
}

.footer-credits {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #999999;
  text-align: center;
}

.footer-credits .separator {
  color: #cccccc;
}

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

/* Tablettes (max 1024px) */
@media (max-width: 1024px) {
  .footer-main-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .footer-info {
    grid-column: 1 / -1;
  }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
  /* Réseaux sociaux */
  .social-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .social-item {
    justify-content: center;
  }

  /* Contenu principal */
  .footer-main-section {
    padding: 40px 0;
  }

  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-info {
    grid-column: 1;
    text-align: center;
  }

  .footer-links,
  .footer-partners {
    text-align: center;
  }

  .footer-menu {
    align-items: center;
  }

  .partners-grid {
    justify-content: center;
    margin: 0 auto;
  }

  /* Bas de page */
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .footer-legal-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-legal-links .separator {
    display: none;
  }

  .footer-copyright {
    white-space: normal;
  }

  .footer-credits {
    flex-direction: column;
    gap: 5px;
  }

  .footer-credits .separator {
    display: none;
  }
}

/* Très petit mobile (max 480px) */
@media (max-width: 480px) {
  .footer-container {
    padding: 0 15px;
  }

  .footer-social-section {
    padding: 30px 0;
  }

  .social-icon {
    width: 50px;
    height: 50px;
  }

  .social-icon svg {
    width: 25px;
    height: 25px;
  }

  .social-label {
    font-size: 13px;
  }

  .social-link {
    font-size: 16px;
  }
}


/* ===== FOOTER PLEINE LARGEUR - FIX POUR PAGES PRODUITS ET ARTICLES ===== */

/* Cibler le footer peu importe où il se trouve */
footer.full-width-footer,
footer.kilema-footer,
.kilema-footer.full-width-footer {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Si le footer est dans un conteneur WordPress */
.wp-site-blocks footer.full-width-footer,
.wp-site-blocks footer.kilema-footer,
article footer.full-width-footer,
main footer.full-width-footer {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Pour les pages produits WooCommerce */
.single-product footer.full-width-footer,
.woocommerce footer.full-width-footer {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Pour les articles */
.single-post footer.full-width-footer,
.blog footer.full-width-footer {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* S'assurer que la section réseaux sociaux prend toute la largeur */
.footer-social-section {
  width: 100% !important;
  max-width: 100% !important;
}


/* ===== BANDEAU ILLUSTRATION PRODUIT ===== */

.product-banner-illustration {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 40px auto;
  overflow: hidden;
}

.product-banner-illustration img {

  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  padding-top: 20px;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .product-banner-illustration img {
    max-height: 250px;
  }
}


/* ===== MÉTADONNÉES PRODUIT - PAGE PRODUIT UNIQUEMENT ===== */

.product-metadata-single {
  margin: 20px 0 30px 0;
  padding: 20px 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.product-metadata-single .product-meta-item {
  margin: 10px 0;
  font-size: 1rem;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.product-metadata-single .meta-label {
  font-weight: 700;
  color: #2c2c2c;
}

.product-metadata-single .meta-value {
  color: #666;
}

/* ===== STYLE SPÉCIFIQUE POUR L'AUTEUR - PAGE PRODUIT ===== */

.product-author-single {
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.product-author-single .author-label-single {
  font-weight: 700;
  color: #000000;
  font-size: 1.2rem;
}

.product-author-single .author-name-single {
  color: #000000;
  font-weight: 500;
  font-size: 1.2rem;
}

/* ===== AUTRES CHAMPS - PAGE PRODUIT ===== */

.product-collection-single .meta-value {
  font-weight: 500;
  color: #2c2c2c;
}

.product-illustrator-single .meta-value,
.product-translator-single .meta-value {
  color: #2c2c2c;
}

/* Responsive - page produit */
@media (max-width: 768px) {
  .product-metadata-single {
    padding: 15px 0;
  }

  .product-metadata-single .product-meta-item {
    font-size: 0.95rem;
  }

  .product-author-single {
    font-size: 1.1rem;
  }

  .product-author-single .author-label-single,
  .product-author-single .author-name-single {
    font-size: 1.1rem;
  }
}


/* ===== QUANTITÉ PRODUIT - ACCESSIBILITÉ ===== */

/* Conteneur de la quantité */
.quantity {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 20px 0;
  padding-right: 20px;
}

/* Champ de quantité */
.quantity input.qty {
  width: 80px !important;
  height: 60px !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  border: 2px solid #ddd !important;
  border-left: none !important;
  border-right: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #2c2c2c !important;
  -moz-appearance: textfield; /* Supprime les fleches sur Firefox */
}

/* Supprime les flèches sur Chrome/Safari */
.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Boutons + et - */
.quantity .minus,
.quantity .plus {
  width: 60px !important;
  /*height: 60px !important;*/
  font-size: 2rem !important;
  font-weight: 700 !important;
  background-color: #f0f0f0 !important;
  border: 2px solid #ddd !important;
  color: #2c2c2c !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* Bouton - (gauche) */
.quantity .minus {
  border-radius: 5px 0 0 5px !important;
}

/* Bouton + (droite) */
.quantity .plus {
  border-radius: 0 5px 5px 0 !important;
}

/* Hover sur les boutons */
.quantity .minus:hover,
.quantity .plus:hover {
  background-color: #1f6571 !important;
  color: #ffffff !important;
  border-color: #1f6571 !important;
  transform: scale(1.05);
}

/* Focus pour l'accessibilité */
.quantity input.qty:focus {
  outline: 3px solid #1f6571 !important;
  outline-offset: 2px !important;
  border-color: #1f6571 !important;
}

.quantity .minus:focus,
.quantity .plus:focus {
  outline: 3px solid #1f6571 !important;
  outline-offset: 2px !important;
}

/* Bouton "Ajouter au panier" plus gros aussi */
.single_add_to_cart_button {
  height: 60px !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  padding: 0 40px !important;
  min-width: 200px !important;
  /* Blanc, contour noir : même style que les boutons de l'accueil
     (Google Maps / Je m'inscris) */
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

/* Flèches de la galerie d'images : blanc, contour et flèche noirs.
   !important : le bloc pose un background-color inline et la classe
   has-base-2-color impose la couleur de la flèche. */
body.single-product .wc-block-next-previous-buttons__button {
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  transition: all 0.3s ease;
}

body.single-product .wc-block-next-previous-buttons__button:not([aria-disabled="true"]):hover {
  background-color: #f3f3f3 !important;
}

.single_add_to_cart_button:hover {
  background-color: #f3f3f3 !important;
  color: #000000 !important;
  border-color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Responsive mobile */
@media (max-width: 768px) {
  .quantity input.qty {
    width: 70px !important;
    height: 55px !important;
    font-size: 1.6rem !important;
  }

  .quantity .minus,
  .quantity .plus {
    width: 55px !important;
    height: 55px !important;
    font-size: 1.8rem !important;
  }

  .single_add_to_cart_button {
    height: 55px !important;
    font-size: 1.1rem !important;
    width: 100% !important;
  }
}


/* ===== PAGE PRODUIT : MARGES DU SITE (5vw) ===== */
/* Le <main> apporte déjà la gouttière globale de 5 % (.has-global-padding).
   On supprime la largeur contrainte à 80 % (content-size / wide-size) de ses
   enfants pour que toute la partie produit occupe la même largeur que le
   reste du site. */
body.single-product main.is-layout-constrained > * {
  max-width: none;
}

body.single-product .product-resume-container {
  max-width: none;
}

body.single-product .product-additional-info {
  max-width: none;
  padding-inline: 0;
}

/* ===== SECTION RÉSUMÉ PRODUIT ===== */

.product-resume-section {
  width: 100%;
  margin: 40px 0;
  padding: 40px 0;
  border-top: 2px solid #e0e0e0;
}

.product-resume-container {
  display: flex;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== COLONNE BOUTONS (GAUCHE) ===== */

.product-actions-column {
  width: 412px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-action-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  /* Blanc avec contour noir par défaut, gris au survol */
  background-color: #ffffff;
  border: 1px solid #000000;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  border-radius: 8px;
  color: #000000;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-action-btn:hover {
  background-color: #f3f3f3;
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.btn-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* Les règles globales « .wp-block-group a » (color: inherit / #1f6571 au
   survol, border-bottom: none et box-shadow: none, en !important)
   écraseraient la couleur du texte, le contour du bas et l'ombre des boutons. */
.product-resume-section a.product-action-btn {
  color: #000000 !important;
  border-bottom: 1px solid #000000 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
}

.product-resume-section a.product-action-btn:hover {
  color: #000000 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

.product-action-btn:hover .btn-icon {
  background-color: #ffffff;
  color: #000000;
}

.btn-text {
  flex: 1;
  text-align: left;
}

/* ===== COLONNE RÉSUMÉ (DROITE) ===== */

.product-resume-column {
  flex: 1;
  background-color: #f3f3f3;
  padding: 30px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.resume-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c2c2c;
  margin: 0 0 20px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #e0e0e0;
}

.resume-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #2c2c2c;
}

.resume-content p {
  margin: 0 0 15px 0;
}

.resume-content p:last-child {
  margin-bottom: 0;
}

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

@media (max-width: 1024px) {
  .product-actions-column {
    width: 300px;
  }

  .product-action-btn {
    font-size: 1rem;
    padding: 12px 15px;
  }

  .btn-icon {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 768px) {
  .product-resume-container {
    flex-direction: column;
    gap: 30px;
  }

  .product-actions-column {
    width: 100%;
  }

  .product-action-btn {
    justify-content: flex-start;
  }

  .product-resume-column {
    padding: 20px;
  }

  .resume-title {
    font-size: 1.5rem;
  }

  .resume-content {
    font-size: 1rem;
  }
}

/* ===== ACCESSIBILITÉ ===== */

.product-action-btn:focus {
  outline: 3px solid #1f6571;
  outline-offset: 3px;
}

/* Augmenter la zone cliquable pour l'accessibilité */
.product-action-btn {
  min-height: 60px;
}


/* ===== SECTION INFORMATIONS ADDITIONNELLES (SANS FOND) ===== */

.product-additional-info {
  max-width: var(--wp--style--global--content-size);
  margin: 40px auto 0 auto;
  padding: 0 20px;
}

/* ===== THÈMES ABORDÉS ===== */

.product-themes-section {
  padding-bottom: 30px;
  border-bottom: 1px solid #e0e0e0;
}

.themes-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c2c2c;
  margin: 0 0 15px 0;
}

.themes-list {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #666;
  margin-bottom: 15px;
}

.themes-etiquettes {
  font-size: 1rem;
  color: #2c2c2c;
  line-height: 1.8;
}

.themes-etiquettes strong {
  font-weight: 700;
  color: #1f6571;
}

.themes-etiquettes a {
  color: #1f6571;
  text-decoration: none;
  transition: color 0.3s ease;
}

.themes-etiquettes a:hover {
  color: #164550;
  text-decoration: underline;
}

/* ===== INFORMATIONS PRODUIT ===== */

.product-info-section {
  margin-bottom: 40px;
}

.product-info-table {
  width: 100%;
  border-collapse: collapse;
}

.product-info-table tr {
  border-bottom: 1px solid #e0e0e0;
}

.product-info-table tr:last-child {
  border-bottom: none;
}

.product-info-table td {
  padding: 5px 10px;
  font-size: 1rem;
  line-height: 1.6;
}

.info-label {
  font-weight: 700;
  color: #2c2c2c;
  width: 40%;
  vertical-align: top;
}

.info-value {
  color: #666;
  width: 60%;
}

/* Responsive */
@media (max-width: 768px) {
  .product-additional-info {
    padding: 0 15px;
  }

  .product-info-table td {
    padding: 12px 8px;
    font-size: 0.95rem;
  }

  .info-label {
    width: 45%;
  }

  .info-value {
    width: 55%;
  }
}


/* ========================================
   GRILLE PRODUITS ALIGNÉE - IMAGES COMPLÈTES
   ======================================== */

/* Conteneur UL - Grille fixe */
ul.kilema-products-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  align-items: stretch !important;
}

/* Chaque LI produit - Flexbox vertical */
li.wc-block-product {
  display: flex !important;
  flex-direction: column !important;
}

/* DIV englobant avec classe kilema-product-card - Structure flex */
.kilema-product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border: 0px solid #e0e0e0 !important;
  padding: 15px !important;
  border-radius: 8px !important;
  background: #f3f3f3 !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.kilema-product-card:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  transform: translateY(-3px) !important;
}

/* IMAGE - Pas de hauteur minimale, juste maximum */
.kilema-product-card .wc-block-components-product-image {
  margin: 0 0 15px 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: flex-start !important; /* Aligne par le HAUT au lieu de flex-end */
  justify-content: center !important;
  /*min-height: 320px !important;  Hauteur minimale pour que toutes aient la même taille */
}

.kilema-product-card .wc-block-components-product-image a {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: flex-start !important; /* Aligne par le HAUT */
  justify-content: center !important; /* Centre horizontalement */
}

.kilema-product-card .wc-block-components-product-image img {
  width: auto !important; /* Largeur automatique */
  max-width: 100% !important; /* Ne dépasse pas le conteneur */
  height: auto !important; /* Hauteur automatique */
  max-height: 215px !important; /* Hauteur maximale */
  object-fit: contain !important; /* Affiche l'image complète */
  border-radius: 0px !important;
  display: block !important;
}

/* TITRE - Flex grow pour occuper l'espace */
.kilema-product-card h2.wp-block-post-title {
  flex: 1 1 auto !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
  font-weight: 600 !important;
  min-height: 0 !important;
}

.kilema-product-card h2.wp-block-post-title a {
  text-decoration: none !important;
  color: #2c2c2c !important;
}

.kilema-product-card h2.wp-block-post-title a:hover {
  color: #1f6571 !important;
}

/* PRIX - Position fixe avant le bouton */
.kilema-product-card .wp-block-woocommerce-product-price {
  margin: 10px 0 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.kilema-product-card .woocommerce-Price-amount {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
}

/* BOUTON - Toujours en bas */
.kilema-product-card .wp-block-button {
  margin: 0 !important;
  flex-shrink: 0 !important;
  width:100%;
}

.kilema-product-card .wp-block-button__link {
  width: 100% !important;
  padding: 12px 20px !important;
  background-color: #1f6571 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
  display: block !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.kilema-product-card .wp-block-button__link:hover {
  background-color: #164550 !important;
  transform: scale(1.02) !important;
}

/* Pages produits : boutons des sections « Dans la même collection » et
   « Sur le même thème » en blanc avec contour noir, comme .product-action-btn */
body.single-product .kilema-product-card .wp-block-button__link {
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;
}

body.single-product .kilema-product-card .wp-block-button__link:hover {
  background-color: #f3f3f3 !important;
  color: #000000 !important;
}

/* Titre "Produits similaires" */
h2.wp-block-heading.alignwide {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  margin: 0 0 30px 0 !important;
  color: #2c2c2c !important;
}

/* Responsive - 3 colonnes tablette */
@media (max-width: 1024px) {
  ul.kilema-products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .kilema-product-card .wc-block-components-product-image img {
    max-height: 280px !important;
  }
}

/* Responsive - 2 colonnes mobile */
@media (max-width: 768px) {
  ul.kilema-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  .kilema-product-card .wc-block-components-product-image img {
    max-height: 220px !important;
  }

  .kilema-product-card h2.wp-block-post-title {
    font-size: 0.9rem !important;
  }

  .kilema-product-card .woocommerce-Price-amount {
    font-size: 1rem !important;
  }

  .kilema-product-card .wp-block-button__link {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
  }
}

/* Responsive - 1 colonne très petit écran */
@media (max-width: 480px) {
  ul.kilema-products-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ========================================
   HEADER PAGES CATÉGORIES COLLECTIONS
   ======================================== */

.kilema-collection-header {
  /* Pleine largeur : on lève la limite « contentSize » du layout constrained.
     Le <main> porte déjà un padding de 5 % de chaque côté (root padding). */
  max-width: none !important;
  padding: 60px 0 40px 0;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 50px;
}

/* Pages boutique : la grille de livres (et sa barre de tri / notices) s'aligne
   sur le bandeau, soit les 5 % de padding du <main>, au lieu du wideSize 80 %. */
body.tax-product_cat .kilema-products-grid,
body.post-type-archive-product .kilema-products-grid {
  max-width: none !important;
}

/* Couvertures alignées : toutes les zones d'image ont la même proportion
   (celle des couvertures les plus hautes, ~276×380), la couverture y est
   affichée en entier et posée en bas. Bas des couvertures, titres et prix
   tombent ainsi sur la même ligne, quelle que soit la taille d'origine. */
body.tax-product_cat li.wc-block-product .wc-block-components-product-image,
body.post-type-archive-product li.wc-block-product .wc-block-components-product-image {
  aspect-ratio: 18 / 25;
}

body.tax-product_cat li.wc-block-product .wc-block-components-product-image > a,
body.post-type-archive-product li.wc-block-product .wc-block-components-product-image > a {
  display: block;
  height: 100%;
}

body.tax-product_cat li.wc-block-product .wc-block-components-product-image img,
body.post-type-archive-product li.wc-block-product .wc-block-components-product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom;
}

/* Bouton calé en bas de la carte : un titre sur deux lignes ne le décale plus */
body.tax-product_cat li.wc-block-product .wp-block-button,
body.post-type-archive-product li.wc-block-product .wp-block-button {
  margin-top: auto;
}

/* Boutons « Ajouter au panier » : même style que .btn-commander-nouveaute
   (accueil, Nouveautés / Meilleures ventes) */
body.tax-product_cat li.wc-block-product .wp-block-button__link,
body.post-type-archive-product li.wc-block-product .wp-block-button__link {
  box-sizing: border-box;
  padding: 10px 30px;
  line-height: 1;
  background-color: #ffffff;
  color: #2c2c2c;
  border: 1px solid #2c2c2c;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

body.tax-product_cat li.wc-block-product .wp-block-button__link:hover,
body.post-type-archive-product li.wc-block-product .wp-block-button__link:hover {
  background-color: #ffffff;
  border-color: #000000;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.kilema-collection-header-inner {
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

.kilema-collection-title-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kilema-collection-label {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #2c2c2c;
  margin: 0;
  line-height: 1;
}

.kilema-collection-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #2c2c2c;
  margin: 0;
  line-height: 1.1;
}

/* Séparateur vague */
.kilema-collection-separator {
  margin-top: 10px;
  width: 300px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12'%3E%3Cpath d='M0,6 Q15,0 30,6 T60,6 T90,6 T120,6 T150,6 T180,6 T210,6 T240,6 T270,6 T300,6' stroke='%232c2c2c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Autres collections */
.kilema-other-collections {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Répartition sur toute la largeur */
  flex-wrap: wrap;
  align-items: flex-end;
  width: 100%; /* Prend toute la largeur disponible */
}

.kilema-other-collection-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  padding-top: 20px;
}

.kilema-other-collection-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background-color: #2c2c2c;
}

.kilema-other-label {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2c2c2c;
  line-height: 1;
}

.kilema-other-link {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2c2c2c;
  text-decoration: none;
  transition: color 0.2s ease;
}

.kilema-other-link:hover {
  color: #1f6571;
}

/* Responsive */
@media (max-width: 768px) {
  .kilema-collection-header {
    padding: 40px 0 30px 0;
  }

  .kilema-collection-title {
    font-size: 2.5rem;
  }

  .kilema-collection-separator {
    width: 200px;
  }

  .kilema-other-collections {
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .kilema-collection-title {
    font-size: 2rem;
  }

  .kilema-other-collections {
    gap: 20px;
  }
}


/* ========================================
   FORMULAIRE TÉLÉCHARGEMENT CATALOGUE
   ======================================== */

.catalogue-form-wrapper {
  max-width: 600px;
  margin: 10px auto;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.catalogue-form-wrapper h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c2c2c;
  margin: 0 0 0px 0;
}

.catalogue-form-wrapper p.subtitle {
  color: #666;
  margin: 0 0 0px 0;
  font-size: 1rem;
}

.catalogue-field-group {
  margin-bottom: -23px;
}

.catalogue-field-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2c2c2c;
  margin-bottom: 6px;
}

.catalogue-field-group input[type="text"],
.catalogue-field-group input[type="email"],
.catalogue-field-group input[type="tel"] {
  width: 100% !important;
  padding: 12px 15px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  color: #2c2c2c !important;
  background: white !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.catalogue-field-group input:focus {
  border-color: #1f6571 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(31, 101, 113, 0.1) !important;
}

/* ===== BOUTONS D'ENVOI CONTACT FORM 7 (tous les formulaires) =====
   Même style que les boutons de la page d'accueil (newsletter « Je m'inscris »,
   Kiléma Le Lieu) : fond blanc, contour noir. Les règles propres à chaque
   formulaire (.catalogue-submit, .devis-submit) ne gèrent que la mise en page. */
.wpcf7 .wpcf7-submit {
  min-height: 50px !important;
  padding: 0 30px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 10px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.wpcf7 .wpcf7-submit:hover {
  background: #f3f3f3 !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.wpcf7 .wpcf7-submit:focus-visible {
  outline: 3px solid #1f6571 !important;
  outline-offset: 3px;
}

.catalogue-submit input[type="submit"] {
  width: 100% !important;
  margin-top: 10px !important;
}

/* Message de confirmation CF7 */
.wpcf7-response-output {
  margin-top: 5px !important;
  padding: 12px 15px !important;
  border-radius: 5px !important;
  font-size: 0.95rem !important;
}

.wpcf7-mail-sent-ok {
  background-color: #e8f5e9 !important;
  border-color: #4caf50 !important;
  color: #2e7d32 !important;
}

.wpcf7-validation-errors {
  background-color: #fff3e0 !important;
  border-color: #ff9800 !important;
  color: #e65100 !important;
}


/* ========================================
   FORMULAIRE CATALOGUE - 2 COLONNES
   ======================================== */

/* Grille 2 colonnes */
.catalogue-form-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

/* Le bouton prend toute la largeur */
.catalogue-submit {
  grid-column: 1 / -1 !important;
}

.message {
  grid-column: 1 / -1 !important;
}

/* Responsive - 1 colonne sur mobile */
@media (max-width: 768px) {
  .catalogue-form-fields {
    grid-template-columns: 1fr !important;
  }
}


/* ========================================
   FORMULAIRE DEVIS - 2 COLONNES
   ======================================== */

.devis-form-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 15px !important;
  font-family: 'Roboto', sans-serif !important;
}

/* Champs pleine largeur */
.devis-full-width {
  grid-column: 1 / -1 !important;
}

/* Style des inputs et textarea */
.devis-field-group input[type="text"],
.devis-field-group input[type="email"],
.devis-field-group input[type="tel"],
.devis-field-group textarea {
  width: 100% !important;
  padding: 15px !important;
  border: none !important;
  border-radius: 5px !important;
  background: #f0f0f0 !important;
  font-size: 1rem !important;
  font-family: 'Roboto', sans-serif !important;
  color: #2c2c2c !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease !important;
}

.devis-field-group input:focus,
.devis-field-group textarea:focus {
  background: #e5e5e5 !important;
  outline: none !important;
}

.devis-field-group textarea {
  min-height: 150px !important;
  resize: vertical !important;
}

/* Ligne quiz + bouton sur la même ligne, pleine largeur */
.devis-quiz-row {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Zone quiz à gauche */
.devis-quiz {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
}

.devis-quiz label {
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.95rem !important;
  color: #2c2c2c !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* Champ réponse quiz */
.devis-quiz input[type="text"] {
  width: 170px !important;
  padding: 10px !important;
  border: none !important;
  background: #f0f0f0 !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  font-family: 'Roboto', sans-serif !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Bouton envoi à droite */
.devis-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

/* Apparence : voir « BOUTONS D'ENVOI CONTACT FORM 7 » plus haut. */
.devis-submit input[type="submit"] {
  padding: 0 40px !important;
}

/* Responsive */
@media (max-width: 768px) {
  .devis-form-fields {
    grid-template-columns: 1fr !important;
  }

  .devis-quiz-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }

  .devis-submit {
    width: 100% !important;
  }

  .devis-submit input[type="submit"] {
    width: 100% !important;
  }
}


/* ========================================
   Cartouches FALC
   ======================================== */


.cartouchefalc {
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}


/* ========================================
   Exemple falc
   ======================================== */

    .exerguefalc {
    padding-left: 0px !important;
  }


  /* ========================================
   PAGE MON COMPTE - WOOCOMMERCE
   ======================================== */

/* Conteneur principal */
body.woocommerce-account .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Roboto', sans-serif;
}

/* Navigation latérale (menu gauche) */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 220px;
  float: left;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid #eeeeee;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 15px;
  color: #2c2c2c;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  transition: all 0.2s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: #1f6571;
  padding-left: 20px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: #1f6571;
  font-weight: 600;
  border-left: 3px solid #1f6571;
}

/* Contenu principal (droite) */
body.woocommerce-account .woocommerce-MyAccount-content {
  float: right;
  width: calc(100% - 260px);
}

/* Titres */
body.woocommerce-account h2,
body.woocommerce-account h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 20px;
}

/* Formulaires de connexion / inscription */
body.woocommerce-account .woocommerce-form input[type="text"],
body.woocommerce-account .woocommerce-form input[type="email"],
body.woocommerce-account .woocommerce-form input[type="password"],
body.woocommerce-account .woocommerce-form input[type="tel"] {
  width: 100% !important;
  padding: 12px 15px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  font-family: 'Roboto', sans-serif !important;
  color: #2c2c2c !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

body.woocommerce-account .woocommerce-form input:focus {
  border-color: #1f6571 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(31, 101, 113, 0.1) !important;
}

/* Labels */
body.woocommerce-account .woocommerce-form label {
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Boutons */
body.woocommerce-account .woocommerce-form button[type="submit"],
body.woocommerce-account .woocommerce-form input[type="submit"],
body.woocommerce-account .button {
  padding: 12px 30px !important;
  background-color: #1f6571 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: 'Roboto', sans-serif !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
}

body.woocommerce-account .woocommerce-form button[type="submit"]:hover,
body.woocommerce-account .woocommerce-form input[type="submit"]:hover,
body.woocommerce-account .button:hover {
  background-color: #164550 !important;
}

/* Tableau des commandes */
body.woocommerce-account .woocommerce-orders-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: 'Roboto', sans-serif !important;
}

body.woocommerce-account .woocommerce-orders-table th {
  background-color: #f5f5f5 !important;
  padding: 12px 15px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #2c2c2c !important;
  border-bottom: 2px solid #e0e0e0 !important;
  text-align: left !important;
}

body.woocommerce-account .woocommerce-orders-table td {
  padding: 12px 15px !important;
  border-bottom: 1px solid #eeeeee !important;
  font-size: 0.95rem !important;
  color: #444 !important;
}

.woocommerce-account .woocommerce-orders-table tr:hover td {
  background-color: #f9f9f9 !important;
}

/* Messages de notification */
body.woocommerce-account .woocommerce-message {
  background-color: #e8f5e9 !important;
  border-left: 4px solid #1f6571 !important;
  border-radius: 5px !important;
  padding: 15px 20px !important;
  color: #2c2c2c !important;
  font-family: 'Roboto', sans-serif !important;
  margin-bottom: 20px !important;
}

body.woocommerce-account .woocommerce-error {
  background-color: #fff3e0 !important;
  border-left: 4px solid #ff9800 !important;
  border-radius: 5px !important;
  padding: 15px 20px !important;
}

/* Responsive */
@media (max-width: 768px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
    float: none;
    margin-bottom: 30px;
  }

  body.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
  }

  body.woocommerce-account .woocommerce-orders-table {
    display: block !important;
    overflow-x: auto !important;
  }
}


/* ========================================
   LIENS COLLECTIONS - SUPPRESSION SOULIGNEMENT
   ======================================== */

/* Cibler tous les liens dans les blocs de la page d'accueil */
.wp-block-paragraph a,
.wp-block-heading a,
.wp-block-image a,
.wp-block-group a,
.wp-block-columns a,
.wp-block-column a,
.wp-block-stack a {
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.wp-block-paragraph a:hover,
.wp-block-heading a:hover,
.wp-block-image a:hover,
.wp-block-group a:hover,
.wp-block-columns a:hover,
.wp-block-column a:hover,
.wp-block-stack a:hover {
  text-decoration: none !important;
  color: #1f6571 !important;
}

.wp-block-stack-white a:hover {
  text-decoration: none !important;
  color: #ffffff !important;
}

/* ===== NEWSLETTER (Brevo) =====
   Placé ici plutôt que dans le champ CSS du plugin Brevo : le plugin échappe
   les guillemets (&quot;), ce qui casse content, url() et font-family. */
.kil-newsletter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Marges latérales alignées sur le retrait du contenu de la colonne voisine,
     pas de marge verticale pour caler le haut du bloc sur le titre d'à côté */
  margin: 0 41px;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  font-family: 'Roboto', sans-serif;
  color: #2c2c2c;
}

/* Image de fond en opacité réduite */
.kil-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/wp-content/uploads/2022/06/Visuel_home_3-scaled.webp") center / cover no-repeat;
  opacity: 0.22;
}

/* Voile dégradé pour garder le texte lisible */
.kil-newsletter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, rgba(31, 101, 113, 0.12) 100%);
}

/* Paragraphe des champs cachés Brevo : wpautop y ajoute des <br> qui créent
   ~130px de vide au-dessus du formulaire (les champs restent envoyés) */
.sib_signup_form > p:has(> input[type="hidden"]) {
  display: none;
}

/* WordPress (wpautop) insère des <br> dans le HTML du formulaire Brevo */
.kil-newsletter br {
  display: none;
}

.kil-newsletter__title {
  margin: 0 0 0.5rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: #000000;
  text-align: center;
}

.kil-newsletter__intro {
  margin: 0 auto 1.75rem;
  max-width: 45ch;
  text-align: center;
  line-height: 1.5;
}

.kil-newsletter__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}

.kil-newsletter__fields p {
  margin: 0;
}

.kil-newsletter__full {
  grid-column: 1 / -1;
}

.kil-newsletter label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.kil-newsletter input[type="email"],
.kil-newsletter input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(31, 101, 113, 0.3);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.85);
  font: inherit;
  color: #2c2c2c;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.kil-newsletter input[type="email"]:focus,
.kil-newsletter input[type="text"]:focus {
  outline: none;
  border-color: #1f6571;
  box-shadow: 0 0 0 3px rgba(31, 101, 113, 0.2);
}

/* Bouton d'envoi : même style que les boutons du site */
.kil-newsletter .sib-default-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  margin-top: 0.5rem;
  padding: 0 30px;
  border: 2px solid #000000;
  border-radius: 10px;
  background-color: #ffffff;
  color: #000000;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.kil-newsletter .sib-default-btn:hover {
  background-color: #f3f3f3;
  border-color: #000000;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.kil-newsletter .sib-default-btn:focus-visible {
  outline: 3px solid #1f6571;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .kil-newsletter {
    margin: 0;
    padding: 2rem 1.25rem;
  }

  .kil-newsletter__fields {
    grid-template-columns: 1fr;
  }
}

/* ===== BLOC TIERS-LIEU (shortcode [kil_tiers_lieu]) =====
   Même gabarit que .kil-newsletter, posé dans la colonne voisine : les colonnes
   WordPress s'étirent à la même hauteur, le bloc remplit la sienne. */
.wp-block-column:has(> .kil-tiers-lieu) {
  display: flex;
  flex-direction: column;
}

.wp-block-column > .kil-tiers-lieu {
  flex: 1;
}

/* La newsletter est imbriquée dans le formulaire Brevo : on propage la hauteur */
.wp-block-columns:has(.kil-tiers-lieu) .sib_signup_form,
.wp-block-columns:has(.kil-tiers-lieu) [class^="sib_signup_box_inside"] {
  height: 100%;
}

/* Titres en haut et boutons en bas des deux blocs, sur les mêmes lignes */
.wp-block-columns:has(.kil-tiers-lieu) .kil-newsletter {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
}

.wp-block-columns:has(.kil-tiers-lieu) .kil-newsletter__fields {
  margin-top: auto;
}

/* Paragraphe vide laissé par Brevo après le bouton : il ajoute un écart de grille */
.kil-newsletter__fields > p:empty {
  display: none;
}

.kil-tiers-lieu {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 41px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  font-family: 'Roboto', sans-serif;
  color: #2c2c2c;
}

/* Photo du lieu en fond, opacité réduite (comme .kil-newsletter) */
.kil-tiers-lieu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/images/kilema-le-lieu.jpg") center 40% / cover no-repeat;
  opacity: 0.22;
}

/* Voile dégradé pour garder le texte lisible */
.kil-tiers-lieu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, rgba(31, 101, 113, 0.12) 100%);
}

.kil-tiers-lieu__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 2.5rem 2rem;
}

.kil-tiers-lieu__title {
  margin: 0 0 1rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: #000000;
  text-align: center;
}

.kil-tiers-lieu__body p {
  margin: 0 0 1rem;
  line-height: 1.5;
}

/* Boutons (site du lieu + Google Maps) calés en bas du bloc. wpautop peut
   envelopper les liens dans un <p> : on neutralise sa marge. */
.kil-tiers-lieu__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.kil-tiers-lieu__actions p {
  display: contents;
}

/* <p> vide laissé par wpautop après les boutons (ajoutait 16px en bas). */
.kil-tiers-lieu__body > p:empty {
  display: none;
}

/* Bouton : même style que le bouton d'envoi de la newsletter */
.kil-tiers-lieu .kil-tiers-lieu__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 50px;
  padding: 0 30px;
  border: 2px solid #000000;
  /* !important : la règle globale « .wp-block-group a » retire le contour du bas */
  border-bottom: 2px solid #000000 !important;
  border-radius: 10px;
  background-color: #ffffff;
  color: #000000 !important;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.kil-tiers-lieu .kil-tiers-lieu__btn:hover {
  background-color: #f3f3f3;
  border-color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.kil-tiers-lieu .kil-tiers-lieu__btn:focus-visible {
  outline: 3px solid #1f6571;
  outline-offset: 3px;
}

.kil-tiers-lieu .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .kil-tiers-lieu {
    margin: 0;
  }

  .kil-tiers-lieu__body {
    padding: 2rem 1.25rem;
  }
}

/* ===== MINI PANIER : titre des livres =====
   Surcharge de mini-cart-style.css (WooCommerce). Le préfixe du tiroir rend
   le sélecteur plus spécifique, quel que soit l'ordre de chargement. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
  font-weight: 700;
  font-size: 1.2em;
}