@charset "UTF-8";

.notranslate[translate="no"] { unicode-bidi: plaintext; }

/* === BASE === */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif; /* ou la police que tu choisis */
  font-weight: 700;
  color: #222;
  margin-bottom: 0.5em;
  line-height: 1.2;
}


h1 {
  font-size: 2.6em;
  color: white;
  margin-top: 0.5em;
}

h2 {
  font-size: 2em;
  color: #C7B299;
}

h3 {
  font-size: 1.5em;
  font-weight: 600;
  color: #B8B8B8;
}

h4 {
  font-size: 1.2em;
  font-weight: 600;
  color: #444;
}

h5 {
  font-size: 1.2em;
  font-weight: 600;
  color: #444;
}

p {
	font-family: 'Poppins', sans-serif;
}

a {
	font-family: 'Poppins', sans-serif;
}

section {
padding: 20px 20px; /* Réduit le padding général entre les sections */
  margin-bottom: 20px; /* Ajoute un espace entre chaque section */

}
/* ≥ 767px : padding + barre sous le header, via .container_header (desktop) */
@media (min-width: 767px){
  .container_header{
    width: 100%;
    margin: 0 auto;
    padding-bottom: 12px;          /* espace AVANT la barre */
    border-bottom: 2px solid #000; /* barre noire */
  }
}

/* Mobile : barre grise très fine, sous le header */
@media (max-width: 766px){
  .container_header{
    padding-bottom: 0;
    border-bottom: 0 !important; /* on neutralise la bordure sur le container */
  }
  header::after{
    content: "";
    position: absolute;  /* header est déjà sticky => OK */
    left: 0; right: 0; bottom: 0;
    height: 1px;         /* très fin */
    background: #e6e6e6; /* gris clair */
    pointer-events: none;
  }
}


.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;

}

/* === COOKIES === */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  color: #000;
  padding: 20px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
}
.cookie-banner p {
  margin: 0 0 10px 0;
  text-align: center;
}
.cookie-banner button {
  background-color: #C7B299;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  margin: 0 5px;
}
.cookie-banner button:hover {
  background-color: #a88f73;
}



/* === CAROUSEL === */
#carousel-title {
  text-align: left;
  font-size:2em;  /* Desktop par défaut */
  font-weight: bold;
  margin-bottom: 20px;
  color: #C7B299;
opacity: 1;
  transition: opacity 0.5s ease;
}

#carousel-description {
  font-size: 1.1em;
/* color: #C7B299; */
  margin-top: 20px;
   max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.5s ease;
}

.carousel-section {
  background: transparent;
  padding: 20px 20px;
  color: #111;
}


/* ==============================
   Cas cat > 4 (images spéciales)
   ============================== */
body.cat-gt4 #carousel-1 .slide img {
  max-height: 500px; /* ajuste selon ton rendu */
  width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Ajustement mobile */
@media (max-width: 767px) {
  body.cat-gt4 #carousel-1 .slide img {
    max-height: 320px; /* ajuste selon ton rendu */
  }

  /* Optionnel : centrer verticalement l’image */
  body.cat-gt4 #carousel-1 .slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }
	
	/* cat <=4 */
	body.cat-lt4 #carousel-1 .slide img {
  margin-bottom: 50px; /* ajuste la valeur à ton goût (px ou rem) */
}
	
}

/* ==============================*/

.carousel-container {
  position: relative;
  max-width: 1200px;
/* height: 200px; */      /* ← hauteur fixe à définir selon ton besoin */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

.carousel {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1); /* effet smooth */
}

.slide {
  min-width: 100%;
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: scale(0.98);
  opacity: 0.7;
}

.slide.active {
  transform: scale(1);
  opacity: 1;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  object-fit: cover;
  filter: none;
}

/* Par défaut : aucune pastille */
.slide::after {
  content: none !important;
  display: none !important;
}

/* Activer la pastille uniquement sur le carrousel 1 */
#carousel-1 .slide::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 20px;
  left: 30px;
  font-size: 1.1em;
  background: rgba(255,255,255,0.7);
  color: #222;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


/* Slide cliquable : lien plein-cadre */
#carousel-2 .slide { position: relative; }
#carousel-2 .slide .slide-link{
  position: absolute; inset: 0;
  display: block;
  text-indent: -9999px;       /* masquer le texte du lien s’il y en a */
  overflow: hidden;
  z-index: 2;                  /* au-dessus de l’image, sous les flèches */
  cursor: pointer;
}

/* Accessibilité focus clavier */
#carousel-2 .slide .slide-link:focus{
  outline: 2px solid #C7B299;
  outline-offset: 2px;
}


.carousel-text {
  min-height: 270px;        /* hauteur stable */
  display: flex;            /* flexbox */
  flex-direction: column;   /* pile verticale */
  justify-content: center;  /* centre verticalement le groupe titre + texte */
 align-items: flex-start; /* aligne tout à gauche */
  text-align: left;       /* option : centre le texte */
}


/*=================================================================================*/
/* ----- Layout 2 colonnes sur PC ----- */
.carousel-layout {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: nowrap;
}
.carousel-layout .carousel-text { flex: 1 1 40%; order: 1; text-align: left; }
.carousel-layout .carousel-container { flex: 1 1 60%; order: 2;   max-width: 1200px;   /* 🔑 même contrainte que carousel2 */
  margin: 0 auto;      /* 🔑 centré comme carousel2 */}

/* Texte */
.carousel-layout .carousel-text h3 {
  font-size: 1.8em;
  color: #C7B299;
  margin-bottom: 15px;
  text-align: left;
}
.carousel-layout .carousel-text p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

@media (max-width: 767px) {
  .carousel-layout {
    flex-direction: column;
    gap: 20px;
  }

  .carousel-layout .carousel-container {
    order: 1;
    width: 100%;
    max-width: 1200px;   /* 🔑 comme carousel2 */
    margin: 0 auto;
  }

  .carousel-layout .carousel-text {
    order: 2;
    text-align: left;   /* pas centré, aligné à gauche */
    width: 100%;
    margin-top: 10px;
  }

  .carousel-layout .carousel-container img {
    border-radius: 20px; /* 🔑 même rendu visuel que carousel2 */
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* === Carousel1 : aligner exactement la largeur de carousel2 sur mobile === */
@media (max-width: 767px) {
  /* Le container NE RAJOUTE PAS de padding : la section a déjà 20px */
  #carousel1-section .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Le carrousel occupe 100% de la largeur disponible du container */
  #carousel1-section .carousel-container {
    width: 100%;
    max-width: 1200px; /* même contrainte que carousel2 */
    margin: 0 auto;
    border-radius: 20px; /* même rendu que carousel2 */
    overflow: hidden;
  }

  /* Pas de 100vw ici : on reste dans le cadre de la section (.carousel-section) 
     qui a déjà padding: 20px; (cf. style.css) */
  #carousel1-section .carousel { width: 100%; }
  #carousel1-section .slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
  }
}

/* Mobile : réduire l’espace entre le texte et le carrousel du carousel1 */
@media (max-width: 767px) {
  #carousel1-section .carousel-layout {
    gap: 0px; /* réduit l’écart entre texte et carrousel */
  }

  #carousel1-section .carousel-text h3 {
    margin-bottom: 0px; /* réduit l’écart sous le titre */
  }

  #carousel1-section .carousel-text {
    margin-top: 0px; /* évite un gros trou au-dessus */
  }
}

/* PC : réduire la largeur du carrousel */
@media (min-width: 768px) {
  #carousel1-section .carousel-text {
    flex: 1 1 50%;   /* Texte un peu plus large */
  }
  #carousel1-section .carousel-container {
    flex: 1 1 50%;   /* Carrousel moins large */
    max-width: none; /* 🔑 option : largeur max fixe si tu veux un vrai cadre réduit */
    margin: 0 auto;   /* centre le carrousel dans sa colonne */
  }
}




/*=================================================================================*/


.carousel-dots {
  position: absolute;
  bottom: 15px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 5;
}

.carousel-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #000; /* Ajout de la bordure noire autour des ronds */
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
	display: inline-block;  /* Pour assurer que l'élément reste de taille fixe */
  padding: 0; /* Enlever tout padding supplémentaire qui pourrait déformer la forme */
}

.carousel-dots button:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
  border-color: #C7B299; /* Change la couleur de la bordure au survol */
}

.carousel-dots button.active {
  background: #C7B299;
}




/* Mobile : les bullets défilent horizontalement */
@media (max-width: 767px){
  #carousel-dots-1{
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding: 8px 2px;
    margin: 8px auto 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
  }
  #carousel-dots-1::-webkit-scrollbar{ display: none; }  /* WebKit */

  /* Dots plus petits pour gagner de la place */
  #carousel-dots-1 > *{
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    scroll-snap-align: center;
  }
  /* Dot actif un peu plus visible */
  #carousel-dots-1 > *.active{
    transform: scale(1.25);
  }
}






.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em; /* Taille des flèches */
  background: rgba(255, 255, 255, 0.6); /* Fond léger */
  color: #333; /* Couleur des flèches */
  border: 0px solid #000; /* Ajout de la bordure noire autour des ronds */
  border-radius: 50%; /* Assure que les flèches sont rondes */
  width: 40px; /* Largeur du bouton */
  height: 40px; /* Hauteur du bouton */
  display: flex;
  align-items: center;
  justify-content: center; /* Centrer l'icône dans le bouton */
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease, color 0.3s ease; /* Transition de la couleur */
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.8); /* Changer le fond au survol */
  color: #C7B299; /* Changer la couleur des flèches au survol */
}

.carousel-btn.prev { 
  left: 10px; 
}

.carousel-btn.next { 
  right: 10px; 
}

/* === Deuxième Carrousel === */

#carousel-title-2 {
  text-align: left;
  font-size:2em;  /* Desktop par défaut */
  font-weight: bold;
  margin-bottom: 20px;
  color: #C7B299;
opacity: 1;
  transition: opacity 0.5s ease;
}

#carousel-description-2 {
  font-size: 1.1em;
  color: #000000;
  margin-top: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.5s ease;
}


/* Desktop/tablette : sur une ligne avec un “trait” */
.ws-tagline{
  display:flex;
  align-items:center;
  gap:.5rem;            /* espace entre éléments */
  line-height:1.2;      /* optionnel */
}

/* Mobile : retour à la ligne + on cache le trait */
@media (max-width: 767px){
  .ws-tagline{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .ws-tagline .sep{ display:none; }
}

/
/*========================================================================================*/


/* ——— Rotateur : styles sûrs ——— */
#ws-rotator.rotator--slide{
  position: relative;
  overflow: hidden;
  padding-bottom: 10px;     /* place pour la barre */
}

/* slides */
#ws-rotator.rotator--slide p{
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(20%);
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
  will-change: transform, opacity;
}
#ws-rotator.rotator--slide p.is-active{ opacity:1; transform:translateY(0); }
#ws-rotator.rotator--slide p.is-leaving{ opacity:0; transform:translateY(-20%); }

/* flash doré discret quand un slide arrive */
#ws-rotator.rotator--slide p.flash{
  animation: ws-flash 600ms ease both;
}
@keyframes ws-flash{
  0% { background: rgba(199,178,153,0.18); }
  100% { background: transparent; }
}

/* barre de progression (toujours visible) */
#ws-rotator .rotator-progress{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;          /* ⬅ au lieu de bottom:0 */
  height: 6px;     /* même épaisseur que la lame */
  background: rgba(0,0,0,.08); /* tu peux garder ou mettre transparent */
  border-radius: 0;
  z-index: 3;
}

#ws-rotator .rotator-progress span{
  display: block; width: 0%; height: 100%;
  background: #C7B299;
  will-change: width;
}

@media (max-width: 800px){
  #ws-rotator.rotator--slide p{ line-height: 1.45; }
}

/* Centrer verticalement le texte du rotateur + donner de l'air en haut/bas */
#ws-rotator.rotator--slide{
  position: relative;
  padding: 10px 0 12px;   /* top + bottom (la barre de progression reste en bas) */
  box-sizing: border-box;
}

/* Les slides occupent toute la hauteur et centrent le texte verticalement */
#ws-rotator.rotator--slide p{
  position: absolute; inset: 0;
  margin: 0;
  display: flex;                 /* ← clé : centrage vertical */
  align-items: center;           /* vertical */
  justify-content: center;       /* horizontal (option) */
  text-align: center;
  padding: 0 8px;                /* air latéral pour éviter que ça touche les bords */
  line-height: 1.45;
}

/* Mobile : un peu plus d’air si besoin */
@media (max-width: 800px){
  #ws-rotator.rotator--slide{
    padding: 12px 0 14px;
  }
  #ws-rotator.rotator--slide p{ padding: 0 10px; }
}

#ws-rotator .rotator-progress{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(180deg,#D5C3AB 0%, #C7B299 65%, #B39374 100%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  overflow: hidden;
  z-index: 3;
}
#ws-rotator .rotator-progress span{
  display:block;
  width:0%;
  height:100%;
  background: #fff; /* ou un beige clair pour l’animation */
}

/* 2.1) (si tu avais désactivé la lame partout, on la réactive) */
.ws-paper.ws-paper-lame::before{
  content:"";
  position:absolute;
  top:-4px;
  left: clamp(16px, 4vw, 48px);
  right: clamp(16px, 4vw, 48px);
  height:6px;
  background: linear-gradient(180deg,#D5C3AB 0%, #C7B299 65%, #B39374 100%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  border-radius: 0;
}

/* 2.2) Dans le cadre avec rotateur : on cache la lame et on met la barre animée au même endroit */
.ws-paper.ws-paper-lame.has-rotator{ position: relative; }
.ws-paper.ws-paper-lame.has-rotator::before{ content: none; }

.ws-paper.ws-paper-lame.has-rotator .rotator-progress{
  position:absolute;
  top:-4px;
  left: clamp(16px, 4vw, 48px);
  right: clamp(16px, 4vw, 48px);
  height:6px;
  background: linear-gradient(180deg,#D5C3AB 0%, #C7B299 65%, #B39374 100%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;
  z-index:3;
}
.ws-paper.ws-paper-lame.has-rotator .rotator-progress span{
  display:block; width:0%; height:100%;
  background:#fff; /* ou #F6EEE2 si tu préfères un beige clair */
}


/* Bandeau beige "Semaine" — style btn-beige + largeur fluide */
.ws-paper-header2 {
  /* largeur responsive : max 1200px, sinon prend 100% */
  inline-size: min(1200px, 100%);
  box-sizing: border-box;
  margin: 20px auto;
  padding: 10px 18px;

  background: #C7B299;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  text-align: center;

  border: 1px solid #B89F82;
  border-radius: 9999px; /* pill arrondi */
  box-shadow: 0 6px 16px rgba(199,178,153,.25);
  transition: .2s ease;

  /* si parent en flex/grid, autorise le rétrécissement */
  flex: 0 1 1200px;
  min-width: 0;
}

.ws-paper-header2 h2 {
  margin: 0;
  color: #fff;
  font-size: inherit;
  font-weight: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ——— RELIEF du bandeau "Semaine" (style btn btn-beige) ——— */
.ws-paper-header2{
  position: relative;                 /* nécessaire pour les pseudo-éléments */
  /* renforce le relief interne comme un bouton */
  box-shadow:
    0 6px 16px rgba(199,178,153,.25), /* ombre externe existante */
    inset 0 1px 0 rgba(255,255,255,.35),  /* liseré haut clair */
    inset 0 -2px 0 rgba(0,0,0,.12);       /* liseré bas sombre */
}

/* couche de relief bombé (reflets doux) */
.ws-paper-header2::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(120% 75% at 50% -20%, rgba(255,255,255,.28), rgba(255,255,255,0) 62%),
    radial-gradient(120% 85% at 50% 120%, rgba(0,0,0,.22), rgba(0,0,0,0) 64%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%, rgba(0,0,0,.08) 80%, rgba(0,0,0,.18));
}

/* reflet diagonal (sheen) comme un bouton premium */
.ws-paper-header2::after{
  content:"";
  position:absolute;
  top:-70%; left:-230%;
  width:95%; height:270%;
  transform: translateX(0) rotate(25deg);
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.18) 42%,
    rgba(255,255,255,.34) 50%,
    rgba(255,255,255,.18) 58%,
    transparent 100%
  );
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  will-change: transform;
}

/* déclenchement du sheen au survol (optionnel) */
.ws-paper-header2:hover::after{
  transform: translateX(600%) rotate(25deg);
}


/* Responsive : sur mobile */
@media (max-width: 767px) {
  .ws-paper-header2 {
    max-width: 95%;       /* presque plein écran */
    font-size: 1.1rem;
    padding: 10px 16px;
  }
}


/* Variante compacte qui ne touche PAS à position/animations/pseudo-éléments */
.ws-woodband .ws-paper .ws-paper-header.ws-paper-header--compact{
  /* on ne modifie ni position, ni transform, ni background, ni overflow */
  padding-block: 8px;       /* compacte verticalement */
  padding-inline: 12px;
  margin-bottom: 8px;
  line-height: 1.2;
  font-size: clamp(15px, 1.6vw, 18px);
  min-height: 0;            /* si une min-height globale existe */
  /* pas de display:..., pas de box-shadow: none, pas de content: none */
}

@media (max-width: 768px){
  .ws-woodband .ws-paper .ws-paper-header.ws-paper-header--compact{
    padding-block: 6px;
    padding-inline: 10px;
    font-size: 1rem;
  }
}

/* Bandeau de conclusion — version compacte, sans toucher aux effets/ornements */
.ws-woodband .ws-conclusion .ws-concl-highlight.ws-concl-highlight--compact{
  /* ne pas modifier position/transform/background/overflow */
  padding-block: 8px;        /* ↓ compresse la hauteur */
  padding-inline: 14px;
  line-height: 1.25;
  font-size: clamp(15px, 1.6vw, 18px);
  margin-block: 10px;
  min-height: 0;             /* neutralise une éventuelle min-height globale */
  /* on ne définit PAS display/height/box-shadow/content */
}

@media (max-width: 768px){
  .ws-woodband .ws-conclusion .ws-concl-highlight.ws-concl-highlight--compact{
    padding-block: 6px;
    padding-inline: 12px;
    font-size: 1rem;
  }
}

/* Compacte UNIQUEMENT ce bandeau de conclusion dans la section woodband */
.ws-woodband .ws-conclusion .ws-concl-highlight.ws-concl-highlight--compact{
  /* 1) écrase les marges par défaut du <p> (souvent la cause du “plus haut”) */
  margin: 0 !important;

  /* 2) compresse la hauteur réelle */
  padding: 6px 12px !important;      /* ↓ */
  line-height: 1.15 !important;      /* ↓ */
  font-size: clamp(14px,1.4vw,17px) !important;

  /* 3) désactive toute hauteur imposée par ailleurs */
  min-height: 0 !important;
  height: auto !important;
}

/* Si le conteneur gonfle la hauteur : compresse dans CE contexte uniquement */
.ws-woodband .ws-conclusion{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}


/* Mise en ligne + centrage vertical parfait */
.ws-woodband .ws-concl-highlight.ws-concl-highlight--compact{
  display: inline-flex;
  align-items: center;
  gap: .6em;                 /* espace logo/texte */
}

/* Taille du logo : plus grand, responsive et borné */
.ws-woodband .ws-concl-highlight.ws-concl-highlight--compact .ws-concl-logo{
  height: clamp(22px, 1.6em, 30px);  /* ↑ augmente nettement la taille */
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: auto;
  /* Alignement optique, si besoin : */
  /* transform: translateY(.5px); */
}





/*=========================================================================================================*/

/* 2.3) S’il reste une règle ancienne qui force la barre en bas, on l’annule ici */
#ws-rotator .rotator-progress{ top:auto !important; bottom:auto !important; }


/* Les <b> du rotateur : beige et un peu plus grands */
#ws-rotator p b {
  color: #C7B299;
  font-weight: 700;
  font-size: 1.05em;   /* ≈5% plus grand que le texte normal */
}


/* === ROTATOR : colonne <b> à gauche / texte à droite (PC) === */
@media (min-width: 801px){
  #ws-rotator.rotator--slide p{
    /* ton p est déjà en position:absolute; on garde le flex pour l’animation/centrage */
    display: flex;
    align-items: baseline;
    justify-content: center;   /* centre le bloc global si besoin */
    gap: 12px;
    text-align: left;          /* pas centré à l'intérieur */
  }

  /* Colonne gauche : le <b> (beige, un peu plus grand, pas de retour à la ligne) */
  #ws-rotator p b{
    min-width: 310px;   /* ajuste selon ton design : 200–240px par ex. */
    display: inline-block;   /* pour que le min-width soit pris en compte */
    color: #C7B299;
    font-weight: 700;
    font-size: 1.05em;
    white-space: nowrap;       /* ne passe pas à la ligne */
    margin-right: 2px;         /* petit espace avant la 2e colonne */
  }

  /* Colonne droite : le texte restant */
  #ws-rotator p .ws-after{
    flex: 1 1 auto;
    min-width: 0;              /* autorise le wrap */
  }
}

/* ===== MOBILE (≤800px) : pas de colonnes dans le rotator ===== */
@media (max-width: 800px){
  /* Le slide redevient un bloc simple (plus de flex-colonnes) */
  #ws-rotator.rotator--slide p{
    display: block !important;        /* ← clé pour casser le layout en colonnes */
    text-align: left;
    line-height: 1.45;
    padding: 0 10px;
  }

  /* Le <b> reste inline + un petit espace après */
  #ws-rotator p b{
    display: inline !important;
    white-space: normal !important;
    margin-right: .25em;
    font-size: 1.05em;                 /* comme souhaité */
    color: #C7B299;
    font-weight: 700;
  }

  /* Le texte après <b> n'est plus une colonne flex */
  #ws-rotator p .ws-after{
    display: inline !important;
    flex: none !important;            /* annule le flex:1 du desktop */
    min-width: 0 !important;
  }
}




/*============================================================================================*/
/* === Liste flexible sous carousel1 : lignes duplicables texte + image === */
.features-list { padding: 20px 20px; }

.features-list .feature-row{
  display: grid;
grid-template-columns: 1.3fr 0.7fr; /* ≈ 65% texte / 35% image */

  gap: 22px 28px;
  align-items: center;                      /* centres verticalement mais chaque ligne garde sa propre hauteur */
}

/* Plus d’espace vertical entre les lignes texte+image */
.features-list .feature-row {
  margin: 30px 0;        /* espace haut/bas autour de chaque ligne */
  gap: 28px;             /* espace horizontal entre texte et image */
}

/* Harmoniser la taille des textes dans features-list */
.features-list .feature-text p {
  font-size: clamp(0.9rem, 0.95vw, 1rem) !important;
  line-height: 1.5;
  font-weight: 400;   /* pas de gras */
}

/* Colonne texte */
.features-list .feature-text h4{
  margin: 0 0 6px;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.3vw, 1.2rem);   /* cohérent avec tes petits titres */
  color: #C7B299;
}
.features-list .feature-text p{
  margin: 0;
  color: #333;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.6;
}

/* Colonne image : ratio régulier et recadrage élégant */
.features-list .feature-media{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.features-list .feature-media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;        /* garde des blocs visuellement réguliers */
  object-fit: cover;           /* recadre proprement selon l’image */
}

.features-list .feature-media.feature-mediav2 img {
  aspect-ratio: 16 / 10;
}


/* Alternance visuelle automatique (ligne paire = image à gauche, texte à droite) */
@media (min-width: 768px){
  .features-list .feature-row:nth-child(even){
grid-template-columns: 1.3fr 0.7fr; /* ≈ 65% texte / 35% image */
  }
  .features-list .feature-row .feature-text { order: 1; }
  .features-list .feature-row .feature-media { order: 2; }
}

/* Séparateur très discret (PC seulement) */
@media (min-width: 768px){
  .features-list .feature-row:not(:first-child){
    border-top: 1px solid #eee;   /* gris très clair */
    padding-top: 20px;            /* petit espace au-dessus du séparateur */
    margin-top: 20px;             /* aérer entre les sections */
  }
	
	.features-list .feature-row:last-child{
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;   /* optionnel */
  margin-bottom: 20px;    /* optionnel */
}

}



/* Mobile : image avant texte + séparateur lame beige plus courte et espacée */
@media (max-width: 767px){
  .features-list .feature-row{
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 36px 0;   /* plus d’air entre les blocs */
    position: relative;
  }
	
  .features-list .feature-media{ order:1; }
  .features-list .feature-text{  order:2; }

  /* Séparateur type lame beige au-dessus de chaque ligne sauf la 1ère */
  .features-list .feature-row:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -24px;                 /* espace au-dessus */
    left: 25%;                  /* réduit la largeur : centré */
    right: 25%;                 /* ← tu peux ajuster (20% / 30%) */
    height: 4px;
    background: linear-gradient(180deg,
      #D5C3AB 0%, #C7B299 65%, #B39374 100%);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    border-radius: 0;
  }
	
	/* Séparateur bas sur mobile (uniquement dernier bloc) */
.features-list .feature-row:last-child::after {
  content: "";
  position: absolute;
  bottom: -24px;               /* espace en dessous */
  left: 25%;                   /* largeur identique au séparateur haut */
  right: 25%;                  /* donc même centrage */
  height: 4px;
  background: linear-gradient(180deg,
    #D5C3AB 0%, #C7B299 65%, #B39374 100%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  border-radius: 0;
}


  /* ajoute aussi un petit espace en dessous du séparateur */
  .features-list .feature-row:not(:first-child) {
    padding-top: 20px;
  }
}

/*===========================================================================*/
/*===========================================================================*/

/* === 3 bulles horizontales (responsive) === */
.ws-bubbles { padding: 20px 20px; }

.bubbles-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

/* Mobile et petites tablettes : 2 colonnes */
@media (max-width: 767px){
  .bubbles-grid{ grid-template-columns: repeat(2, 1fr); }
}

.bubble-item{
  text-align: center;
  padding: 10px 8px;
}

/* ===== BULLE CIRCULAIRE GARANTIE (mobile compris) ===== */
.bubble{
  --size: clamp(120px, 14vw, 140px);
  width: var(--size);
  height: var(--size);
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;              /* masque tout ce qui dépasse */
  position: relative;
  isolation: isolate;            /* isole les z-index internes */
  z-index: 0;

  /* Esthétique */
  background: radial-gradient(120% 85% at 50% 15%, #ffffff 0%, #f7f4ef 55%, #efe8df 100%);
  border: 2px solid #C7B299;
  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    inset 0 10px 18px rgba(255,255,255,.35),
    inset 0 -8px 14px rgba(0,0,0,.08);
}

/* léger reflet diagonal premium (au-dessus de l’image) */
.bubble::after{
  content:"";
  position:absolute; inset:-30% -60% auto -60%;
  height: 60%;
  transform: rotate(22deg);
  background: linear-gradient(120deg, transparent 0%,
            rgba(255,255,255,.25) 45%,
            rgba(255,255,255,.65) 50%,
            rgba(255,255,255,.25) 55%,
            transparent 100%);
  opacity:.6;
  pointer-events: none;
  z-index: 2;
}

/* L’image remplit la bulle et est ELLE-MÊME découpée en cercle */
.bubble img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;

  /* Safeguards anti-bugs mobile */
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 99.5%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;

  /* Supprime le filtre qui casse le clipping sur certains mobiles */
  filter: none !important;
}

/* Titres + textes sous la bulle */
.bubble-item h4{
  margin: 6px 0 4px;
  font-weight: 700;
  color: #C7B299;
  font-size: clamp(1.1rem, 1.3vw, 1.2rem);
}
.bubble-item p{
  margin: 0;
  color: #333;
  line-height: 1.5;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
}

/* Mobile : un peu plus petites + moins d’espace */
@media (max-width: 767px){
  .bubbles-grid{ gap: 16px; }
  .bubble{ --size: 110px; }
}
@media (max-width: 480px){
  .bubble{ --size: 100px; }
}

/* Fallback très anciens navigateurs */
@supports not (clip-path: circle(50% at 50% 50%)) {
  .bubble img{ border-radius: 50%; } /* au minimum */
}



/* --- iOS Safari hard-fix anti-carré --- */
@supports (-webkit-touch-callout: none) {
  .bubble{
    /* masque circulaire au NIVEAU CONTENEUR (clippe image + reflet) */
    -webkit-mask-image: radial-gradient(closest-side, #000 99.95%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;

    /* évite des recompositions qui cassent le masque */
    box-shadow: none;                 /* si besoin : commente pour tester */
    background: #f7f4ef;              /* fond simple, sans dégradé */
    transform: translateZ(0);
    will-change: transform;
  }
  .bubble::after{ display: none; }    /* retire le reflet qui déclenche le bug */
  .bubble img{
    filter: none !important;          /* le drop-shadow casse le clipping */
    border-radius: 0;                  /* le masque parent suffit */
    clip-path: none;                   /* idem */
    transform: translateZ(0);
  }
}


/*===========================================================================*/

/* ==== Bulles : rendu fiable iOS Safari ==== */
.ws-bubbles .bubble{
  --size: clamp(120px, 14vw, 140px);
  width: var(--size);
  height: var(--size);
  border-radius: 9999px;      /* rond */
  overflow: hidden;           /* clippe l'image */
  position: relative;
  flex: 0 0 auto;
  /* Fallback robuste si border-radius+overflow bug */
  -webkit-mask-image: -webkit-radial-gradient(circle, #fff 99%, transparent 100%);
          mask-image: radial-gradient(circle, #fff 99%, transparent 100%);
}

.ws-bubbles .bubble > img{
  position: absolute; inset: 0; /* occupe tout le cercle */
  width: 100%;
  height: 100%;
  object-fit: cover;            /* remplissage sans déformation */
  display: block;               /* pas d’espace inline */
  -webkit-transform: translateZ(0); /* évite un bug de peinture iOS */
}

/* Optionnel : si tu préfères clip-path comme fallback */
@supports (clip-path: circle(50% at 50% 50%)) {
  .ws-bubbles .bubble{
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
  }
}




/*===========================================================================*/

/* === LOGO === */

.logo {
  height: auto;
  max-height: 150px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: inline-block;
  margin-right: auto;
  transition: transform 0.3s ease;
  vertical-align: middle;
  align-self: center;
  position: relative;
  z-index: 1001;
  margin-bottom: -100px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
.logo:hover {
  transform: scale(1.05);
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
	justify-content: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
  z-index: 1002;
  height: auto;
	  width: auto;
	  margin-right: auto;
	
}

.logo-wrapper a {
	display: block;
}

.logo-text {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8em;
  font-weight: 700;
  color: #C7B299;
  position: relative;
  z-index: 1001;
  border: none;
margin-left: auto; /* Permet au texte de se déplacer à droite */
text-align: right; /* Aligne le texte à droite */
margin-right: 5px;
	
	display: inline-block;
 	opacity: 0;
 	transform: translateY(-10px);
	animation: fadeSlideIn 0.8s ease forwards 0.3s;

  white-space: nowrap;
	width: auto;
	align-items: flex-end;
}

/* === HEADER === */
header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s, box-shadow 0.3s;
  backdrop-filter: blur(6px);
}


:root {
  --header-height: 100px;
}

#nav-menu.show {
  top: var(--header-height) !important;
}


@media (min-width: 768px){
/* === MENU BURGER === */
.menu-toggle {
   display: none;
 }
}



/* === NAVIGATION === */
nav {
	  font-family: 'Poppins', sans-serif;  /* Assurer que toute la navigation utilise la même police */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  height: 100%;
}
nav ul {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
	  font-family: 'Poppins', sans-serif;
  position: relative;
  text-decoration: none;
  color: #222;
  font-weight: 600;
  font-size: 1em;
  padding: 10px 8px;
  transition: color 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeSlideIn 0.6s forwards;
}
nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #C7B299;
  transition: width 0.3s ease;
}
nav a:hover::after {
  width: 100%;
}
nav a:hover {
  color: #C7B299;
}

/* === SECTION ACTIVE === */
nav a.active {
  color: #C7B299;
}
nav a.active::after {
  width: 100%;
  background-color: #C7B299;
}

/* === SELECTEUR DE LANGUE === */
nav select {
  font-family: 'Poppins', sans-serif;  /* Assure la cohérence avec le reste du site */
  font-size: 1.1em;  /* Taille de la police */
  padding: 8px 15px;  /* Espacement pour le texte */
  padding-left: 25px;  /* Décalage pour l'icône si utilisé */
  border: 2px solid #C7B299;  /* Bordure de couleur claire */
  border-radius: 8px;  /* Coins arrondis */
  background-color: #fff;  /* Fond blanc */
  color: #333;  /* Couleur du texte */
  cursor: pointer;  /* Curseur en forme de main */
  transition: all 0.3s ease;  /* Transition pour l'animation */
  appearance: none;  /* Supprimer les styles par défaut du sélecteur (pour les navigateurs Webkit) */
  outline: none; /* Enlever le contour par défaut */
  box-shadow: none;  /* Enlever l'ombre par défaut */
}

nav select i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #C7B299;  /* Couleur de l'icône */
}

nav select:hover {
  border-color: #a88f73;  /* Bordure plus sombre lors du survol */
  background-color: #f4f4f4;  /* Fond légèrement grisé */
  box-shadow: 0 0 8px rgba(199, 178, 153, 0.3);  /* Ombre légère */
}

nav select:focus {
  border-color: #C7B299;  /* Maintenir la bordure harmonieuse */
  box-shadow: 0 0 8px rgba(199, 178, 153, 0.5);  /* Ombre plus forte pour focus */
}

nav select option {
  padding: 10px;
  background-color: #fff;  /* Fond blanc pour les options */
  color: #333;  /* Couleur sombre pour le texte */
  font-size: 1em;  /* Taille de la police */
}

/* Effet sur le menu déroulant */
nav select::-ms-expand {
  display: none; /* Cache la flèche du sélecteur dans IE */
}

nav select::-webkit-appearance: none; /* Cache la flèche dans Webkit browsers */

/* Pour les écrans mobiles, rendre le menu plus accessible */
@media (max-width: 767px) {
  nav select {
    width: 100%;  /* Prendre toute la largeur sur les petits écrans */
    padding: 10px;  /* Espacement plus grand */
    font-size: 1.2em;  /* Augmenter la taille de la police sur mobile */
  }
}


@media (max-width: 768px) {
  #nav-menu a.active {
    color: #8A6B45 !important; /* variante foncée de ton beige doré */
    font-weight: 600;          /* astuce : un peu plus épais = encore plus visible */
  }
}



/* Style de base pour le menu de langue */
.lang-selector {
  position: relative;
}

.language-dropdown {
  position: relative;
}

.dropdown-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9em;
  padding: 6px 12px;
  border: 2px solid #D3D3D3;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-btn .flag-icon {
  font-size: 1.1em; /* Ajuste la taille des icônes */
}

.language-dropdown .dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 150px;
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1;
  top: 100%;
  left: 0;
}

.language-dropdown:hover .dropdown-content {
  display: block;
}

.lang-option {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #333;
  text-decoration: none;
  font-size: 0.9em;
}

.lang-option:hover {
  background-color: #f4f4f4;
  color: #D3D3D3;
}

/* Ajouter un effet de transition */
.dropdown-btn:hover,
.lang-option:hover {
  background-color: #f4f4f4;
  color: #D3D3D3;
}

/* Masquer les options de langue par défaut */
@media (max-width: 767px) {
  .language-dropdown {
    width: 100%;
  }
  .dropdown-btn {
    width: 100%;
    text-align: center;
    padding: 10px 15px;
    font-size: 1em;
  }
}

/* === HERO === */
.hero {
  background: url('/images/photos/hero-index.jpg') center 50%/cover no-repeat;
  color: white;
  text-align: center;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.hero > * {
  position: relative;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  margin-top: 20px;
}

.hero h1 {
	  animation: fadeIn 2s ease-out;
  font-size: 3em;
  margin-bottom: 20px;
	 font-weight: 700;
}
.hero p {
  font-size: 1.2em;
  opacity: 0.9;
}

#hero-planche-large {
  background: url('/images/DALL·E 2025-01-07 18.51.22.jpg') center 80%/cover no-repeat;
  color: white;
  text-align: center;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

#hero-planche-medium {
  background: url('/images/DALL·E 2025-02-22 17.56.12.jpg') center 80%/cover no-repeat;
  color: white;
  text-align: center;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  .hero {
    background: url('/images/photos/hero-index.jpg') center 70% / cover no-repeat;
  }

  #hero-planche-large {
    background: url('/images/DALL·E 2025-01-07 18.51.22.jpg') center 70% / cover no-repeat;
  }

  #hero-planche-medium {
    background: url('/images/DALL·E 2025-02-22 17.56.12.jpg') center 70% / cover no-repeat;
  }
}


/* === BOUTONS =========================================================================== */

.btn { cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

.btn-hero {
  /* style premium verre dépoli (exclusif hero) */
  display: inline-block;
  padding: 16px 36px;
  font-size: 1.1em;
  font-weight: 700;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: all 0.35s ease;
  letter-spacing: 0.5px;
}
.btn-hero:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #C7B299;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.btn-hero:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}



/* === HERO – reflet type Amazon (hover + scroll) === */
.btn-hero {
  position: relative;
  overflow: hidden;
}

/* Calque de reflet (mêmes proportions/angle que l’Amazon) */
.btn-hero::after {
  content:"";
  position:absolute;
  top:-70%; left:-230%;
  width:95%; height:270%;
  transform: translateX(0) rotate(25deg);
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.18) 42%,
    rgba(255,255,255,.38) 50%,
    rgba(255,255,255,.18) 58%,
    transparent 100%
  );
  transition: transform 1.45s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  will-change: transform;
}

/* Hover = même mouvement que l’Amazon noir */
.btn-hero:hover::after {
  transform: translateX(600%) rotate(25deg);
}

/* Scroll = on rejoue exactement le même mouvement */
.btn-hero.is-shining::after {
  transform: translateX(600%) rotate(25deg);
}

/*==================================================================================*/
.btn-beige {
  background: #C7B299;
  color: #fff;
}

.btn-beige:hover,
.btn-beige:focus {
  background: #C7B299; /* reste beige */
  color: #fff;         /* reste blanc */
}

/*==================================================================================*/
  /* Bouton "Acheter" – surcharge pour qu'il tranche vraiment */
.btn.btn-buy {
  background: linear-gradient(135deg, #d4b98a, #c7a870) !important; /* ou la version dorée */
  color: #111 !important;  /* ou #111 si doré */
  border: none !important;
}

/* === Bouton "Acheter" : tranchant, premium doré === */
.btn-buy {
  border-radius: 9999px;
  padding: 12px 22px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(199,178,153,.35);
  transition: all .25s ease;
}
.btn-buy:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn-buy:active {
  transform: translateY(0);
}

/*================*/

/* —— BEIGE (neutre premium) —— */
.btn-beige{
  background: linear-gradient(180deg, #dfccb1 0%, #c7b299 55%, #b29173 100%) !important;
  color:#111 !important;
  border:1px solid #a88c6d !important;
  box-shadow:
    0 10px 18px rgba(199,178,153,.32),
    0 -1px 0 rgba(0,0,0,.16) inset !important;  /* biseau bas uniquement */
  text-shadow:none !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-beige:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.btn-beige:active{
  transform:translateY(0); filter:none;
  box-shadow:
    0 8px 16px rgba(0,0,0,.20),
    0 -2px 0 rgba(0,0,0,.22) inset !important;
}
.btn-beige:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(199,178,153,.35),
    0 12px 22px rgba(0,0,0,.22),
    0 -1px 0 rgba(0,0,0,.18) inset !important;
}

/* —— ACHETER (doré plus “punchy”) —— */
.btn-buy{
  background: linear-gradient(135deg, #f2d8a4 0%, #e4c184 45%, #cfa35d 100%) !important;
  color:#111 !important;
  border:1px solid #a77f37 !important;
  box-shadow:
    0 12px 22px rgba(207,163,93,.38),
    0 -1px 0 rgba(0,0,0,.18) inset !important;  /* biseau bas uniquement */
  text-shadow:none !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-buy:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.btn-buy:active{
  transform:translateY(0); filter:none;
  box-shadow:
    0 8px 16px rgba(0,0,0,.22),
    0 -2px 0 rgba(0,0,0,.24) inset !important;
}
.btn-buy:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(207,163,93,.35),
    0 12px 22px rgba(0,0,0,.24),
    0 -1px 0 rgba(0,0,0,.20) inset !important;
}

/*=======*/

/* === Acheter (Amazon) : 3D premium renforcé, sans pseudo-élément === */
.btn-buy{
  /* double dégradé : gloss léger + doré */
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%) ,
    linear-gradient(135deg, #f6d9a2 0%, #e8c487 45%, #cfa35d 100%) !important;
  color:#111 !important;
  border:1px solid #a77f37 !important;

  /* profondeur : ombre externe + biseaux internes haut/bas */
  box-shadow:
    0 14px 24px rgba(207,163,93,.42),     /* ombre portée */
    inset 0 1px 0 rgba(255,255,255,.28),  /* arête haute douce (une seule ligne) */
    inset 0 -2px 0 rgba(0,0,0,.22) !important; /* arête basse */
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-buy:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 18px 28px rgba(207,163,93,.46),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,0,0,.24) !important;
}

.btn-buy:active{
  transform: translateY(0);
  filter: none;
  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    inset 0 .5px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.28) !important;
}

.btn-buy:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(207,163,93,.35),
    0 14px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.22) !important;
}


/* Atténuer le halo (ombre du bas) du bouton Acheter */
.btn-buy{
  box-shadow:
    0 8px 14px rgba(0,0,0,.16),          /* ombre externe plus douce */
    inset 0 1px 0 rgba(255,255,255,.22), /* arête haute légère */
    inset 0 -1px 0 rgba(0,0,0,.18) !important; /* biseau bas adouci */
}

.btn-buy:hover{
  box-shadow:
    0 10px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.20) !important;
}

.btn-buy:active{
  box-shadow:
    0 6px 10px rgba(0,0,0,.20),
    inset 0 .5px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.26) !important;
}

.btn-buy:focus-visible{
  box-shadow:
    0 0 0 3px rgba(207,163,93,.32),
    0 10px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
}



/* ===============================
   AMAZON BUTTON (noir premium luxe)
   =============================== */
/* ===== Bouton noir premium (utilisable partout) ===== */
.acheter .btn.ws-sheen-dark,
.btn.ws-sheen-dark {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .95em;
  letter-spacing: .3px;
  text-decoration: none;
  color: #f5f1ea;
  background: linear-gradient(180deg,#242424 0%, #101010 100%);
  border: 1.5px solid #C7B299;
  box-shadow:
    0 12px 28px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}

.acheter .btn.ws-sheen-dark:hover,
.btn.ws-sheen-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.60);
  color: #fff;
}

/* Relief bombé permanent */
.acheter .btn.ws-sheen-dark::before,
.btn.ws-sheen-dark::before {
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(120% 75% at 50% -20%, rgba(255,255,255,.32), rgba(255,255,255,0) 62%),
    radial-gradient(120% 85% at 50% 120%, rgba(0,0,0,.55), rgba(0,0,0,0) 64%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%, rgba(0,0,0,.08) 80%, rgba(0,0,0,.25));
  box-shadow:
    inset 0 10px 22px rgba(255,255,255,.10),
    inset 0 -14px 26px rgba(0,0,0,.45);
}

/* Reflet diagonal (sheen) */
.acheter .btn.ws-sheen-dark::after,
.btn.ws-sheen-dark::after {
  content:"";
  position:absolute;
  top:-70%; left:-230%;
  width: 95%; height: 270%;
  transform: translateX(0) rotate(25deg);
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.16) 42%,
    rgba(255,255,255,.34) 50%,
    rgba(255,255,255,.16) 58%,
    transparent 100%
  );
  transition: transform 1.45s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  will-change: transform;
}

.acheter .btn.ws-sheen-dark:hover::after,
.btn.ws-sheen-dark:hover::after {
  transform: translateX(600%) rotate(25deg);
}

/* Déclenchement auto (quand visible à l’écran) */
.acheter .btn.ws-sheen-dark.is-shining::after,
.btn.ws-sheen-dark.is-shining::after {
  animation: ws-amz-sheen 1.45s cubic-bezier(.22,.61,.36,1);
}

@keyframes ws-amz-sheen{
  0%   { transform: translateX(0)     rotate(25deg); }
  50%  { transform: translateX(600%)  rotate(25deg); }
  100% { transform: translateX(0)     rotate(25deg); }
}


/* ===============================
   AUTRES BOUTONS (hors Hero & Amazon)
   Scope pour ne pas toucher au Hero
   =============================== */
.produit .btn:not(.ws-sheen-dark):not(.btn-hero),
.avis .btn:not(.ws-sheen-dark):not(.btn-hero),
.faq .btn:not(.ws-sheen-dark):not(.btn-hero),
.contact .btn:not(.ws-sheen-dark):not(.btn-hero),
.texte .btn:not(.ws-sheen-dark):not(.btn-hero),
.acheter .btn:not(.ws-sheen-dark):not(.btn-hero) {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 12px;
  background: linear-gradient(180deg, #c7b299, #a88f73); /* or au repos */
  color: #fff;
  border: 1.5px solid #C7B299;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow:
    0 6px 14px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.2);
}

.produit .btn:not(.ws-sheen-dark):not(.btn-hero):hover,
.avis .btn:not(.ws-sheen-dark):not(.btn-hero):hover,
.faq .btn:not(.ws-sheen-dark):not(.btn-hero):hover,
.contact .btn:not(.ws-sheen-dark):not(.btn-hero):hover,
.texte .btn:not(.ws-sheen-dark):not(.btn-hero):hover,
.acheter .btn:not(.ws-sheen-dark):not(.btn-hero):hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    inset 0 2px 4px rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(0,0,0,.2);
}

.produit .btn:not(.ws-sheen-dark):not(.btn-hero):active,
.avis .btn:not(.ws-sheen-dark):not(.btn-hero):active,
.faq .btn:not(.ws-sheen-dark):not(.btn-hero):active,
.contact .btn:not(.ws-sheen-dark):not(.btn-hero):active,
.texte .btn:not(.ws-sheen-dark):not(.btn-hero):active,
.acheter .btn:not(.ws-sheen-dark):not(.btn-hero):active {
  transform: translateY(1px) scale(.98);
  box-shadow:
    0 4px 10px rgba(0,0,0,.18),
    inset 0 3px 6px rgba(0,0,0,.25);
}

.contact form .btn {
	font-size: 14px; }

/* === CONTENU PRODUIT =========================================================== */

.produit {
  padding: 20px 20px; /* Espace interne réduit pour la section produit */
}

.produit .content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  position: relative;
  width: 100%;
  max-width: 1200px;  /* Limiter la largeur du conteneur */
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;  /* Pour éviter que l'image touche les bords */
  box-sizing: border-box;
  z-index: 1;  /* Assurer que le conteneur se place derrière l'image */
}


.produit {
  padding: 20px 20px;
}

.produits-container {
  display: flex; /* Utilisation de flexbox pour aligner les produits côte à côte */
  justify-content: space-between; /* Espace entre les produits */
  gap: 20px; /* Espacement entre les produits */
  flex-wrap: wrap; /* Permet aux produits de se déplacer sur une nouvelle ligne sur les petits écrans */
}

.produit-item {
  flex: 1; /* Chaque produit occupe une largeur égale */
  max-width: 48%; /* Limiter la largeur pour les produits côte à côte */
  text-align: center;
}

.produit-item a {
  text-decoration: none;
}

.produit-item img {
  max-width: 100%;
  height: auto;
	object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.produit-item img:hover {
  transform: scale(1.05); /* Zoomer sur l'image au survol */
}

/* Par défaut (PC et grands écrans) */
.produit-item img.produit-image2 {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Sur mobile (≤ 767px) */
@media (max-width: 767px) {
  .produit-item img.produit-image2 {
    max-width: 50%;
  }
}




.produit-item h3 {
  font-size: 1.6em;
  color: #C7B299;
  margin-top: 15px;
}

.produit-item h5 {
  font-size: 1.5em;
  color: #B8B8B8;
  margin-top: 15px;
}

.produit-item p {
  font-size: 1.1em;
  color: #555;
  margin-top: 10px;
}

/* Badges “kv” dans les cartes du comparatif catalogue */
.catalog-list .produit-item .kv{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: center;         /* centre sous le texte ; mets 'flex-start' si tu préfères à gauche */
}
.catalog-list .produit-item .kv li{
  display: inline-block;
  font-size: .85rem;
  padding: 4px 8px;
  border-radius: 9999px;
  background: #f5efe7;
  color: #7a6a56;
  border: 1px solid #e3d9c9;
  white-space: nowrap;             /* évite les coupures moches */
}

@media (max-width: 768px){
  .catalog-list .produit-item .kv{ gap: 6px; }
  .catalog-list .produit-item .kv li{ font-size: .82rem; }
}


@media (max-width: 767px) {
	
  .produits-container {
    flex-direction: column; /* Empiler les produits sur les petits écrans */
    align-items: center;
  }

  .produit-item {
    max-width: 100%; /* Chaque produit prend la pleine largeur sur mobile */
    margin-bottom: 30px;
  }

}


/* ================================
   Aperçu interne dans la photo (produits)
   ================================ */

/* Conteneur cliquable de l'image principale */
.produit .produit-item .image-preview{
  /* largeur du panneau (facile à ajuster) */
  --panel-min: 200px;
  --panel-ideal: 50%;
  --panel-max: 400px;

  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;                      /* tout reste dans la photo */
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}

/* Image de base */
.produit .produit-item .image-preview .base{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  transition: transform .35s ease, filter .35s ease;
}

/* Mise en valeur au survol */
.produit .produit-item .image-preview:hover .base,
.produit .produit-item .image-preview:focus-visible .base{
  transform: scale(1.03);
  filter: brightness(.90) saturate(1.04);
}

/* Calque plein cadre pour accueillir le panneau */
.produit .produit-item .image-preview .hover-panel{
  position: absolute;
  inset: 0;
  pointer-events: none;                   /* garde le lien cliquable */
}

/* Panneau interne (ouvre depuis la droite, dans l'image) */
.produit .produit-item .image-preview .hover-frame{
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(100%, clamp(var(--panel-min), var(--panel-ideal), var(--panel-max)));

  /* voile + FLou renforcé pour la profondeur */
  background: linear-gradient(to left, rgba(0,0,0,.35), rgba(0,0,0,0));
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);

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

  transform: translateX(100%);            /* caché à droite */
  transition: transform .45s cubic-bezier(.22,1,.36,1); /* ouverture douce */
  padding: 0; border: 0; box-shadow: none;
}

/* Ligne blanche premium en relief sur le bord gauche du panneau */
.produit .produit-item .image-preview .hover-frame::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1.5px;
  /* blanc poli avec léger halo */
  background: linear-gradient(180deg, #ffffff, #f2f2f2 50%, #ffffff);
  box-shadow:
    1px 0 0 rgba(0,0,0,.25),         /* ombre nette à droite → relief */
    0 0 6px rgba(255,255,255,.25);   /* halo doux */
  pointer-events: none;
}
/* filet d'ombre très fin accolé à la ligne (accent) */
.produit .produit-item .image-preview .hover-frame::after{
  content: "";
  position: absolute;
  left: 2px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.32));
  opacity: .75;
  pointer-events: none;
}

/* Image d'aperçu (pas de cadre) */
.produit .produit-item .image-preview .hover-frame img{
  max-width: 98%;
  max-height: 96%;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Déclenchement (souris / clavier) */
.produit .produit-item .image-preview:hover .hover-frame,
.produit .produit-item .image-preview:focus-visible .hover-frame{
  transform: translateX(0);
  outline: none;
}

/* Accessibilité : moins d'animations si demandé */
@media (prefers-reduced-motion: reduce){
  .produit .produit-item .image-preview .base{ transition: none; }
  .produit .produit-item .image-preview .hover-frame{ transition: none; }
}

/* Ouvre le panneau soit au :hover (desktop), soit quand .peek est présent (mobile) */
.produit .produit-item .image-preview.peek .hover-frame {
  transform: translateX(0);
}



/*================================================================================*/

/* le conteneur sert de repère */
.produits-container { position: relative; }

/* bouton flottant centré (PC) */
.compare-between{
  position: absolute;
  left: 50%;
  top: 50%;                 /* recalé précisément par le JS ci-dessous */
  transform: translate(-50%,-50%);
  z-index: 5;
}

/* mobile : après les deux produits */
@media (max-width: 767px){
  .compare-between{
    position: static;
    transform: none;
    align-self: center;
    margin-top: 6px;
  }
}

/* taille uniquement (aucune couleur ici) */
.btn-compare { border-radius: 12px; padding: 12px 28px; }

/* si PAS noir Amazon, on garde la version or */
.btn-compare:not(.ws-sheen-dark) {
  background: linear-gradient(180deg, #c7b299, #a88f73);
  color: #fff;
  border: 1.5px solid #C7B299;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-compare:not(.ws-sheen-dark):hover{
  background: linear-gradient(180deg, #ffffff, #f7f3ec);
  color: #6b5a46;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* Bouton Comparer spécifique */
.btn-compare.ws-sheen-dark {
  padding: 12px 18px;         /* moins large */
  font-size: 0.9rem;          /* texte un peu réduit */
  border-radius: 9999px;      /* rond/pill */
  min-width: auto;
  white-space: nowrap;        /* pas de retour à la ligne */
  text-align: center;
}

/* Sur mobile : un peu plus grand pour la lisibilité */
@media (max-width: 767px) {
  .btn-compare.ws-sheen-dark {
    padding: 14px 20px;
    font-size: 1rem;
  }
}

/* --- ASTUCE MOBILE ---
   Sur mobile, les cartes sont empilées : on remet le bouton dans le flux
   et on le place "entre" les deux visuellement, bien centré. */
@media (max-width: 767px){
  .compare-between{
    position: static;        /* plus “flottant” */
    transform: none;
    order: 3;                /* au milieu si la liste passe en colonne */
    align-self: center;
    margin-top: 6px;
  }
  .btn-compare{
    padding: 12px 22px;
    font-size: .95rem;
  }

  /* Un peu plus d’air entre les 2 produits et le bouton */
  .produits-container{
    gap: 14px;               /* léger espace vertical */
  }
}


.compare-sep{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:12px; z-index:5;
}
.compare-sep .sep-line{
  display:block; width:72px; height:4px;
  background:linear-gradient(180deg,#D5C3AB 0%, #C7B299 65%, #B39374 100%);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));
}

.btn-pill{ border-radius:9999px; padding:10px 20px; font-size:.95rem; }

@media (max-width:767px){
  .compare-sep{ position:static; transform:none; justify-content:center; margin-top:6px; }
  .compare-sep .sep-line{ display:none; }
}

/* Masquer les barres latérales quand largeur < 1000px */
@media (max-width: 1200px){
  .compare-sep .sep-line {
    display: none !important;
  }
}

/* Par défaut (PC) → on cache le texte long */
.btn-compare .txt-long { display: none; }
.btn-compare .txt-short { display: inline; }

/* Mobile : <768px → on cache le court, on montre le long */
@media (max-width: 767px){
  .btn-compare .txt-short { display: none; }
  .btn-compare .txt-long { display: inline; }
}



/*= BULLES==============================================================================*/

/* Mobile : mise en grille "bulles" UNIQUEMENT pour .produit--muscles */
@media (max-width: 767px){
  section.produit.produit--muscles .produits-container{
    display: grid !important;                   /* écrase un éventuel flex */
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: stretch;
    justify-items: center;
  }
  section.produit.produit--muscles .produit-item{
    width: 100%;
    text-align: center;
    padding: 6px 4px;
  }
  section.produit.produit--muscles .produit-item a{ display:block; }

  /* Image pleine largeur + espace sous l’image */
  section.produit.produit--muscles .produit-item img.produit-image2{
    display:block;
    width:100% !important;
    max-width:none !important;                  /* neutralise un 50% mobile existant */
    height:auto;
    margin:0 0 15px;
  }

  section.produit.produit--muscles .produit-item h5{
    margin:6px 0 4px;
    font-size:1.1rem;
    color:#C7B299;
  }
  section.produit.produit--muscles .produit-item p{
    margin:0;
    line-height:1.45;
  }
}


@media (max-width: 767px){
  /* Libellés courts : pas de tiret, pas de gras, un point au début */
  .produit--muscles .mobile-short{
    font-size: 0;           /* masque le texte long */
    margin: 4px 0;
  }
  .produit--muscles .mobile-short::after{
    content: attr(data-short);  /* espace + texte court */
    display: block;
    font-size: clamp(1.05rem, 3.2vw, 1.25rem); /* lisible mais < h5 */
    line-height: 1.35;
    font-weight: 400;       /* pas de gras */
  }

  /* Titre plus grand que les libellés */
  .produit--muscles h5{
    font-size: clamp(1.2rem, 3.6vw, 1.45rem);  /* > aux <p> ci-dessus */
    line-height: 1.25;
    /* on ne touche pas au font-weight du h5 (il garde celui de ta charte) */
  }
}

/* === 4ème vignette cachée=================== */

/* Par défaut : caché */
.produit--muscles .mobile-only { display: none !important; }

/* Mobile seul : on affiche la 4e vignette */
@media (max-width: 767px){
  .produit--muscles .mobile-only { display: block !important; }
}



/* === CONTENU CONTENT ================================================================== */

.content img {
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* Ombre plus forte */
  transition: transform 0.3s ease;
  z-index: 2;  /* L'image doit être au-dessus du fond */
  position: relative;  /* L'image doit se placer au-dessus du conteneur */
  display: block;  /* L'image doit se comporter comme un bloc */
  margin: 0 auto;  /* Centrer l'image horizontalement */
}

.content img:hover {
  transform: scale(1.1);  /* Zoom sur l'image au survol */
}

.texte {
		font-family: 'Poppins', sans-serif;
  width: 100%;
  margin-left: calc(-50vw + 50%);
	margin-top: 50px;
  padding: 20px 20px;
  background-image: url('images/cible.png');
  background-size: 10%;
  background-position: left bottom;
  background-repeat: no-repeat;
  color: white;
  position: relative;
  z-index: 0;  /* Assurer que le texte reste derrière l'image */
}

.texte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);  /* Fond sombre sous le texte */
  z-index: -1;  /* Placer derrière l'image et le texte */
}

.texte ul {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.texte li {

  margin-bottom: 10px;
	 color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}


/* === AVIS === */
.avis {
  padding: 20px 20px; /* Espace interne réduit pour la section avis */
}

.avis-box {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.09);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.avis-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.avis-box p::before {
  content: "\201C";
  font-size: 2em;
  vertical-align: top;
  line-height: 0;
  color: #C7B299;
  margin-right: 5px;
}


/* === SECTION ACHETER === */
.acheter {
  background-color: #C7B299;
  color: white;
  text-align: center;
	padding: 20px 20px; /* Espace interne réduit pour la section avis */
}
.acheter .btn {
  background-color: #fff;
  color: #C7B299;
  font-weight: bold;
}
.acheter .btn:hover {
  background-color: #f0e9e1;
  color: #a88f73;
}

/* Bloc Acheter (cadre premium) */
.acheter {
  position: relative;
  padding: clamp(40px, 6vw, 80px) 20px;
  background: linear-gradient(180deg, #c7b299 0%, #a88f73 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
  border-top: 2px solid rgba(255,255,255,.6);
  border-bottom: 2px solid rgba(0,0,0,.15);
  box-shadow:
    inset 0 6px 12px rgba(255,255,255,.25),
    inset 0 -6px 12px rgba(0,0,0,.25),
    0 20px 40px rgba(0,0,0,.25);
}

/* visible par défaut; l’anim ne démarre que quand .ws-inview arrive */
.acheter.ws-pop {
  opacity:1;
  transform:none;
}
.acheter.ws-pop.ws-inview {
  animation: acheter-pop .7s cubic-bezier(.2,.9,.2,1.02) forwards;
}

@keyframes acheter-pop {
  0% {opacity:0; transform:translateY(20px) scale(.97);}
  60%{opacity:1; transform:translateY(-6px) scale(1.02);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

/* Titre et texte dans le bloc */
.acheter h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  margin-bottom: 14px;
  font-weight: 800;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
}
.acheter p {
  font-size: 1.1rem;
  margin-bottom: 28px;
  color:#f5f1ea;
  opacity:.95;
}


/*==============================================================================================*/
/* Assure-toi que le fond bois ne masque rien */
.ws-woodband{ position:relative; z-index:0; }

/* Papier satiné (base) */
.ws-paper{
  position: relative;
  background: linear-gradient(180deg,#fff 0%, #f8f6f3 100%);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow:
    0 -4px 0 #fff,
    0  4px 0 #fff,
    0 18px 48px rgba(0,0,0,.18),
    0 48px 96px rgba(0,0,0,.12);
  overflow: hidden;
  z-index:0;
}

/* Le contenu au-dessus */
.ws-paper > *{ position: relative; z-index: 1; }

/* ===== Tranche beige nette (haut) ===== */
.ws-paper::before{
  content:"";
  position:absolute;
  top:-4px; left:0; right:0;
  height:4px;
  background:#C7B299; /* beige Woodsport */
  z-index:1;          /* au-dessus du halo */
}

/* ===== Halo bas (si tu en veux encore un) ===== */
.ws-paper::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:120px;
  background: radial-gradient(120% 140% at 50% 0%,
    rgba(199,178,153,.28) 0%,
    rgba(255,255,255,.45) 40%,
    rgba(255,255,255,.85) 80%,
    rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(to top, #000 70%, transparent 100%);
          mask: linear-gradient(to top, #000 70%, transparent 100%);
  filter: blur(2px);
  opacity:1; /* mets 0 si tu veux l’activer uniquement au scroll */
  z-index:0; /* derrière la tranche beige */
}

/* Activation du halo au scroll */
.ws-paper.ws-inview::after{ opacity:1; }

.ws-band.ws-inview .ws-paper::before,
.ws-band.ws-inview .ws-paper::after,
.ws-pop.ws-inview .ws-paper::before,
.ws-pop.ws-inview .ws-paper::after{
  opacity:1;
}



/* Poppins (déjà importée normalement via Google Fonts) */
.poppins{
  font-family: 'Poppins', sans-serif;
  font-weight: 500;        /* un peu plus marquant */
  letter-spacing: 0.5px;
  font-size: 1.2em;        /* ressort légèrement plus */
  color: #141414;          /* noir profond */
}

.pristina{
  font-family: 'Pristina', cursive;
  font-weight: 400;
  font-size: clamp(1.6em, 2.2vw, 2em);  /* plus souple */
  letter-spacing: 0.3px;
}



/* ============================
   BANDEAU BEIGE MARQUANT EN HAUT
   ============================ */
.ws-paper-header {
  position: relative;
  width: 100%;
  background: #C7B299;         /* beige Woodsport */
  color: #fff;                 /* texte en blanc par contraste */
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-align: center;
  padding: 18px 20px;
  overflow: hidden;            /* masque le halo qui déborde */
  border-bottom: 3px solid rgba(0,0,0,.12);

  /* angles incisifs (pas d’arrondi, coupés net) */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* HALO animé qui traverse le bandeau */
.ws-paper-header::after {
  content:"";
  position:absolute;
  top:0; left:-150%;
  width: 200%; height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,.25) 45%,
    rgba(255,255,255,.8) 50%,
    rgba(255,255,255,.25) 55%,
    transparent 100%
  );
  animation: ws-header-sheen 3.5s linear infinite;
  pointer-events:none;
}

@keyframes ws-header-sheen {
  0%   { transform: translateX(0); }
  100% { transform: translateX(150%); }
}


/* === Variante avec lame beige tranchante === */
.ws-paper-lame{ overflow:visible; }

.ws-paper-lame::before{
  content:"";
  position:absolute;
  top:-4px; /* flotte au-dessus du papier */
  left: clamp(16px, 4vw, 48px);
  right: clamp(16px, 4vw, 48px);
  height:6px;

  background: linear-gradient(180deg,
    #D5C3AB 0%, #C7B299 65%, #B39374 100%);

  border-radius:0; /* tranchant net */
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85); /* arête brillante */

  z-index:2;
  pointer-events:none;
}

/* ===========================
   Zone de contenu (1 colonne, lisible)
   =========================== */
.ws-content{
  max-width: 1200px;   /* 1 colonne confortable */
  margin: 0 auto;
  padding: clamp(18px, 3vw, 32px);
  font-family:'Poppins', system-ui, sans-serif;
  color:#141414;
}

/* ===========================
   Liste: version avec ✔ (sélectionnées)
   =========================== */
.ws-list{
  margin:0; padding:0; list-style:none;
  display:block;
}
.ws-list li{
  position:relative;
  padding-left:30px;
  margin: 10px 0;
  line-height:1.55;
  font-size: clamp(1rem, 1.05vw, 1.15rem);
}

/* Plus d'espace entre les éléments de liste (check) */
.ws-list.ws-checks li {
  margin-bottom: 22px !important;  /* espace net entre chaque point */
  line-height: 1.6;                /* plus lisible */
}

/* Supprime la marge du dernier pour éviter un “trou” inutile */
.ws-list.ws-checks li:last-child {
  margin-bottom: 0 !important;
}


/* Option : note en dessous de la liste */
.ws-list-note {
  margin-top: 10px;
  font-size: 0.95rem;
  display: block;
}


/* Harmonisation des listes dans ws-woodband */
.ws-woodband .ws-content .ws-list.ws-checks li {
  font-size: clamp(0.95rem, 1vw, 1.1rem);  /* même gabarit que tes autres textes */
  line-height: 1.55;
  margin: 8px 0;
  padding-left: 26px;                         /* espace pour ✔ */
}

/* Harmonisation : forcer ws-list à être comme ws-list2 */
.ws-woodband .ws-list.ws-checks li {
  font-size: clamp(0.9rem, 0.95vw, 1rem) !important;
  line-height: 1.5;
}



.ws-list.ws-checks li::before{
  content:"\2714";             /* ✔ fiable */
  position:absolute; left:0; top:.05em;
  font-size:1.1em;
  color:#C7B299 !important;           /* beige Woodsport */
  -webkit-text-fill-color:#C7B299;     /* anti-emoji iOS */
  font-family:'Poppins', sans-serif;
}




/*=========================================================================*/
/* Grille 1→2 colonnes */
.ws-list2{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px 32px;
  grid-template-columns: 1fr;            /* mobile: 1 col */
}
@media (min-width:900px){
  .ws-list2{ grid-template-columns: 1fr 1fr; }  /* desktop: 2 col */
}

/* Items */
.ws-list2 li{
  position:relative;
  padding-left:30px;
  font-size: clamp(0.95rem, 1.4vmin, 1.05rem);
  line-height: 1.5;
	  font-weight:500;
}

/* ✔ */
.ws-checks li::before{
  content:"\2714";             /* ✔ fiable */
  position:absolute; left:0; top:.05em;
  font-weight:500; font-size:1.1em;
  color:#C7B299; -webkit-text-fill-color:#C7B299;
  font-family:'Poppins', sans-serif;
}

/*---------------------------------------------------------------------*/

/* Ultra serré par défaut (desktop) */
.ws-woodband .ws-list.ws-checks.ws-tight li{
  line-height: 0.5 !important;
	  margin-bottom: 6px;  /* espace entre items */
}

/* Sécurité anti-chevauchement quand ça wrap (mobile) */
@media (max-width: 1200px){
  .ws-woodband .ws-list.ws-checks.ws-tight li{
    line-height: 1.25 !important;   /* 1.15–1.3 selon ton rendu */
    margin-bottom: 4px;              /* garde la liste compacte */
  }
}

.ws-woodband .ws-list.ws-checks.ws-tight li:last-child{
  margin-bottom: 0;
}

/*----------------------------------------------------------------------*/

/* Conclusion séparée, pas limitée par le max-width des listes */
.ws-conclusion{
  width: 100%;                 /* s’étend au max */
  max-width: none;              /* pas de limite à 1200px */
  margin: 0px auto 0;          /* espace au-dessus */
  font-weight:600;
  font-size: 1.15rem;
  line-height:1.6;
  text-align: center;           /* centrée pour se distinguer */
}

/* Phrase finale mise en avant */
.ws-conclusion span{
  display:block;
  margin-top:0px;
  font-weight:700;
  color:#C7B299;                /* beige Woodsport */
}

/* Conclusion : plus large mais typographiquement harmonisée avec les ✔ */
.ws-content { position: relative; overflow: visible; }

/* Conclusion harmonisée mais valorisée */
.ws-conclusion{
  margin-top: 0px;
margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;

  max-width: 1000px;
  text-align: center;
  padding: 10px 30px;
  border-top: 1px solid #eee;   /* séparateur discret */
}

.ws-concl-main{
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  line-height: 1.6;
  color: #333;
  margin: 0 0 0px;
  font-weight: 500;
}

.ws-concl-highlight{
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  font-weight: 600;
  color: #C7B299;               /* beige Woodsport */
  margin: 0;
}

/* Flèche décorative avant la ligne de conclusion */
.ws-concl-main::before {
  content: "➔";                 /* la flèche */
  color: #C7B299;               /* beige Woodsport */
  font-size: 1.5em;              /* légèrement plus grande que le texte */
  margin-right: 10px;            /* espace avec le texte */
  vertical-align: middle;
  display: inline-block;
}


@media (max-width: 767px){
  .ws-conclusion{
	  margin-top: 10px;
    justify-content: flex-start; /* flex */
    justify-items: start;        /* grid */
  }
}


@media (max-width: 800px){
  /* Supprime la flèche */
  .ws-concl-main::before{
    content: none !important;
    display: none !important;
  }

  /* Cadre global conclusion : marge interne gauche/droite */
  .ws-conclusion{
    padding: 0 16px;      /* espace à gauche et à droite */
    box-sizing: border-box;
  }

  /* Texte principal plus condensé */
  .ws-concl-main{
    font-size: clamp(1rem, 4vw, 1.15rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }

  /* Texte mis en avant un peu réduit */
  .ws-concl-highlight{
    font-size: clamp(1rem, 4vw, 1.15rem) !important;
    line-height: 1.4 !important;
  }
}




/* ===========================
   Texte simple (sans checkbox)
   =========================== */
.ws-text p{
  margin: 0 0 12px;
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height:1.65;
	  font-weight: 500;
}
.ws-text p:last-child{ margin-bottom:0; }

/* (option) petit séparateur fin si besoin entre sections */
.ws-sep{
  height:1px; margin:16px 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
}

/*==========================================================================================*/

/* Empêche Safari/iOS d'auto-agrandir les textes */
html { -webkit-text-size-adjust: 100%; }

/* Woodsport – bloc texte : taille plus sobre partout */
.ws-woodband .ws-content .ws-text p{
  /* vmin = prend la plus petite dimension écran → évite le “boost” en paysage */
  font-size: clamp(0.95rem, 1.4vmin, 1.05rem);
  line-height: 1.5;
  margin: 0 0 10px;
}

/* ——— OVERRIDE TAGLINE ——— */
.ws-woodband .ws-tagline{
  /* augmente la base de la ligne (affecte Poppins + Pristina si à 1em) */
  font-size: clamp(1.2rem, 2.2vmin, 2rem) !important;
}

/* grossir spécifiquement la partie "Pristina" */
.ws-woodband .ws-tagline .pristina{
  font-size: 1.2em !important;   /* ex. 20% plus grand que la ligne */
  letter-spacing: 0.4px;
}

/* si tu veux aussi gonfler "Woodsport" (poppins) pour l’équilibrer */
.ws-woodband .ws-tagline .poppins{
  font-size: 1.05em !important;
  font-weight: 600;
}


/* Petits écrans en paysage (iPhone landscape) : on plafonne plus bas */
@media (max-height: 500px) and (orientation: landscape){
  .ws-woodband .ws-content .ws-text p{ font-size: 0.85rem; line-height: 1.45; }
  .ws-woodband .ws-tagline{ font-size: 0.85rem; }
}

/* iPhone paysage très “ras” */
@media (max-height: 430px) and (orientation: landscape){
  .ws-woodband .ws-content .ws-text p{ font-size: 0.8rem; }
  .ws-woodband .ws-tagline{ font-size: 0.8rem; }
}



/* === FORMULAIRE ==================================================================================== */
form {
  background: #f9f9f9;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
input, textarea {
  font-family: 'Inter', sans-serif;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1em;
}
input:focus, textarea:focus {
  outline: none;
  border-color: #C7B299;
  box-shadow: 0 0 0 2px rgba(199, 178, 153, 0.2);
}

/* === FOOTER === */
footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 40px 20px;
  font-size: 0.9em;
}
.footer-icons {
  margin-top: 10px;
}
.footer-icons a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
  font-size: 1.4em;
  transition: color 0.3s;
}
.footer-icons a:hover {
  color: #C7B299;
}

.site-footer{background:#0f0f0f;color:#eaeaea;padding:24px 0;border-top:1px solid rgba(255,255,255,.08)}
.site-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.site-footer a:hover{opacity:.85}

.footer-grid{
  display:grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "claims legal social"
    "copy  copy  copy";
  align-items:center;
  gap:16px 24px;
}

/* Zones */
.footer-claims{grid-area:claims;margin:0;font-style:italic}
.footer-legal{grid-area:legal;display:flex;gap:.75rem;align-items:center;justify-content:center;white-space:nowrap}
.footer-legal span{opacity:.6}
.footer-social{grid-area:social;display:flex;gap:12px;justify-content:flex-end}
.footer-social img{  display:block;  opacity:.9;  transition:opacity .2s; }
.footer-social a:hover img{ opacity:1; }
.footer-copy{grid-area:copy;margin:4px 0 0;color:#bdbdbd;font-size:.92rem}

@media (max-width: 820px){
  .footer-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "claims"
      "legal"
      "social"
      "copy";
    text-align:center;
  }
  .footer-social{justify-content:center}
}

/* Optionnel : fine-tune la lisibilité */
.footer-claims strong{font-weight:700}


/* === FAQ === */
.faq {
  padding: 20px 20px; /* Espace interne réduit pour la section FAQ */
}

.faq-item h3::before {
  content: "❓";
  display: inline-block;
  color: #c62828;        /* rouge */
  font-size: 1.2em;      /* un peu plus gros que le texte */
  margin-right: 8px;     /* espace avant le titre */
  vertical-align: middle;
}



.consent-label, .consent-label *, .consent-text { font-weight: 400 !important; font-size: 12px; }
.consent-label a { text-decoration: underline; font-weight: 400 !important; font-size: 12px; }
.consent-label b, .consent-label strong { font-weight: 400 !important; font-size: 12px; }




/* ---- Section Conseils d’utilisation ---- */
.guide-tips { margin-top: 32px; }

.guide-tips > h2 {
  margin-bottom: 16px;
}

/* Card principale */
.tips-card {
  max-width: 1200px;
  margin: 0 auto;       /* centre horizontalement */
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,.09);
 border: 1px solid #eee;
  font-family: 'Poppins', sans-serif; /* police cohérente avec la nav */
}

/* Grille interne */
.tips-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .tips-grid { grid-template-columns: 1fr 1fr; }
}

/* === Conseils : aplatir visuellement les groupes pour éviter "card dans card" === */
.tips-card{
  /* on garde la card principale telle quelle (déjà définie plus haut) */
}

/* Groupes = simples sections avec liseré gauche + séparateurs, pas de card */
.tips-group{
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid #C7B299 !important;
  padding: 10px 0 10px 14px !important;
  margin: 8px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Ligne de séparation légère entre groupes */
.tips-group + .tips-group{
  border-top: 1px dashed #e9e3db;
  padding-top: 14px;
}

/* Titres des groupes, sans soulignement "card-like" */
.tips-group h3{
  margin: 0 0 6px !important;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 700;
}

/* Liste harmonisée, puce discrète */
.tips-list{ list-style: none !important; margin: 0; padding: 0; }
.tips-list li{
  position: relative; padding-left: 16px; margin: 6px 0; line-height: 1.55;
}
.tips-list li::before{
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; background: #C7B299; border-radius: 2px;
}



/* ---- Programme : card harmonisée + image plein cadre ---- */

/*.programme { margin-top: 32px; } */
.programme > h2 { margin-bottom: 16px; }

/* card identique aux autres (avis-box) */
.programme-card {
	/* padding: 30px; */
  font-family: 'Poppins', sans-serif; 
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.09);
  border: none;
  overflow: hidden; /* pour que l'image soit vraiment plein cadre */
}

.programme-card2 {
	/* padding: 30px; */
	padding-left: 30px;
  font-family: 'Poppins', sans-serif; 
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.09);
  border: none;
  overflow: hidden; /* pour que l'image soit vraiment plein cadre */
}

/* image plein cadre (pas de padding autour) */
.programme-hero {
  margin: 20px 0;                 /* espace haut/bas */
  display: flex;                  /* centre horizontalement */
  justify-content: center;
}

.programme-hero img {
  max-width: 1100px;              /* largeur max = largeur réelle de l’image */
  width: 100%;                    /* s’adapte sur mobile */
  height: auto;                   /* garde les proportions */
  display: block;
}




/* ---- Programme : card harmonisée + image plein cadre ---- */
    .qr-program { 
		margin-top: 32px; 
}
    .qr-program > .container > h2 { 
		margin-bottom: 16px; 
}

    .qr-card {
    background:#fff; 
	border-radius:12px; 
	box-shadow:0 4px 12px rgba(0,0,0,.09); 
	border:none;
	overflow:hidden;
	font-family: 'Poppins', sans-serif;
    }

    .qr-card .inner { padding:30px; }

    .qr-hero { margin: 20px 0; display:flex; justify-content:center; }
    .qr-hero img { max-width:1100px; width:100%; height:auto; display:block; }

    .qr-form { display:grid; gap:14px; max-width:1100px; }
    .qr-form label { font-weight:600; }
    .qr-form input[type="email"], .qr-form select {
      width:100%; padding:12px; border:1px solid #ddd; border-radius:10px; font-size:16px;
    }
    .qr-form button {
      appearance:none; border:0; border-radius:10px; padding:12px 16px;
      background:#111; color:#fff; font-weight:700; cursor:pointer;
    }
    .qr-note { font-size:13px; color:#666; margin-top:8px; }
    .qr-success { padding:16px; border-radius:10px; background:#f0fff5; color:#0b5d2a; margin:12px 0; }
    .qr-error { padding:16px; border-radius:10px; background:#fff2f2; color:#8a1f1f; margin:12px 0; }
 
 /* ---- ============================================== ---- */




	/* Titre "Recevez votre programme personnalisé" plus petit sur mobile */
@media (max-width: 767px){
  .qr-program h2{
    font-size: 24px;       /* ajustable : 16–20px */
    line-height: 1.25;
    margin-bottom: 8px;
  }
}
.qr-form .consent-label{ display:flex; align-items:flex-start; gap:10px; }
.qr-form .consent-label .consent-text a{ display:inline; white-space:nowrap; }

		




/* Notices dans le hero */
.hero .notice {
color: black;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.09);
  padding: 22px 24px;
  max-width: 900px;
  margin: 0 auto;
  border-left: 4px solid #C7B299; /* accent site */
}
.hero .notice h1 { margin: 0 0 8px; font-weight: 700; color: red; }
.hero .notice p { margin: 6px 0; line-height: 1.5; }
.hero .notice p.small { font-size: 14px; color: #666; }

.hero .notice.success { border-left-color: #2e7d32; } /* vert */
.hero .notice.error   { border-left-color: #c62828; } /* rouge */

 /* ---- ============================================== ---- */



/* contenu interne avec le padding des autres cards */
.programme-body {
 /* padding: 30px; */
  font-family: 'Poppins', sans-serif; /* si tu veux Poppins pour ce bloc */
}

/* listes à puces harmonisées avec l’accent du site */
.program-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}
.program-list li {
  position: relative;
  padding-left: 16px;
  margin: 6px 0;
  line-height: 1.55;
}
.program-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  background: #C7B299; /* ton accent */
  border-radius: 2px;
}

/* titres internes */
.programme-body h3 {
  margin: 18px 0 8px;
  font-weight: 600;
}




/* === CONTACT === */
.contact {
  padding: 20px 20px; /* Espace interne réduit pour la section Contact */
}

/* === MESSAGE BIEN ENVOYE -------------------------------------------------------- === */

.alert {
  display:none;            /* caché par défaut */
  position:relative;
  padding:16px 48px 16px 56px;
  border-radius:14px;
  border:2px solid #C7B299;          /* couleur de ta charte */
  background:#111;                    /* noir : contraste fort */
  color:#fff;
  font-family: 'Poppins', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  line-height:1.35;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  margin-top:16px;
  transform:translateY(-8px);
  opacity:0;
  transition:opacity .35s ease, transform .35s ease;
}
.alert.alert-success svg{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
}
.alert.show{ display:block; opacity:1; transform:translateY(0); }
.alert .alert-close{
  position:absolute; right:10px; top:8px;
  background:transparent; border:0; color:#fff;
  font-size:24px; line-height:1; cursor:pointer;
}

/* Version “bandeau” hero si tu veux le mettre en haut de page aussi */
.hero .alert{ margin-top:24px; }

/* -------- Overlay plein écran -------- */
#success-overlay[hidden]{ display:none; }
.success-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); backdrop-filter: blur(3px);
  opacity:0; transform:scale(.98); transition:opacity .25s ease, transform .25s ease;
}
.success-overlay.show{ opacity:1; transform:scale(1); }

.success-card{
  position:relative; text-align:center; color:#fff;
  background: linear-gradient(180deg,#111,#000);
  border:3px solid #C7B299; border-radius:20px;
  padding:28px 28px 24px; max-width:640px; width:min(92vw,640px);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.success-icon{ margin-bottom:10px; position:relative; display:inline-block; }
.success-icon::after{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:2px solid #C7B299; opacity:.7; animation:ws-ping 1.1s ease-out infinite;
}
@keyframes ws-ping{
  0%{ transform:scale(1); opacity:.7;}
  100%{ transform:scale(1.25); opacity:0;}
}
.success-card h2{ font-family:Poppins, Inter, system-ui, sans-serif; font-weight:800; font-size:clamp(22px,2.4vw,28px); margin:8px 0 4px; }
.success-card p{ margin:0 0 14px; opacity:.9; }

.btn-primary{
  display:inline-block; border:0; cursor:pointer;
  background:#C7B299; color:#111; font-weight:800;
  padding:12px 20px; border-radius:12px; box-shadow:0 10px 22px rgba(199,178,153,.25);
}

/* -------- Bandeau hero (persiste après overlay) -------- */
.alert{
  display:none; position:relative;
  padding:10px 28px 10px 12px;
  border-radius:10px;
  background: rgba(17,17,17,.85);
  color:#eee;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:600;
  font-size:clamp(13px,1.1vw,15px);
  line-height:1.35;
  border:1px solid rgba(199,178,153,.55);
  box-shadow:none;
  margin-top:10px;
  opacity:0; transition:opacity .2s ease;
}
.alert.show{ display:block; opacity:1; }          /* pas d’animation/pop */
.alert .alert-close{
  position:absolute; right:8px; top:4px;
  background:transparent; border:0; color:inherit;
  font-size:18px; line-height:1; cursor:pointer; opacity:.7;
}


/* Mouvements sobres pour attirer l'Å“il */
.alert.show{ animation:ws-pop .28s ease-out; }
@keyframes ws-pop{ from{ transform:translateY(-8px); opacity:0;} to{ transform:translateY(0); opacity:1;} }

/* Accessibilité : réduire les anims si demandé */
@media (prefers-reduced-motion: reduce){
  .success-icon::after, .alert.show{ animation:none; }
  .success-overlay{ transition:none; }
}


/* ===------------------------------------------------------------------------------------ === */


/* === ANIMATIONS === */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
  body {
    /*padding-top: 100px;*/
  }
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(6px);
    height: 100px;
  }

  .logo-wrapper {
    display: flex;
    justify-content: flex-end; /* Aligne le logo et le texte à droite */
    width: 100%;
		      position: relative; /* Nécessaire pour que le texte "Woodsport" se positionne correctement */
  }
	
	
	  .logo {
    position: fixed;
    top: 10px;
    left: 20px;
    height: 150px;
    max-width: 150px;
    z-index: 1003;
    display: block;
  }
	
	.logo-text {
    position: absolute;
    top: 10px;
    right: 0;
 margin-right: 10px; /* Laisse un espace à droite */
    font-size: 1.8em;
}
	

	/* === MENU BURGER === */
.menu-toggle {
  color: #000;
  font-size: 2em;
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
  display: block;
  position: absolute;
  top: 40px;
   right: 20px;
  z-index: 1002;
}
	

.menu-toggle::before { content: "\2630"; }     /* ☰ burger */
.menu-toggle.active::before { content: "\2716"; } /* ✖ croix */
	
	
	
	.hero {
  padding: 30px 10px;
	 }
	
.hero h1 {
    font-size: 2.2em;
  }
  .hero p {
    font-size: 1em;
  }
	
nav {
  width: 100%;
  display: flex;
  justify-content: flex-end; /* Aligne les éléments du menu à droite */
  flex-direction: column;
  align-items: flex-start; /* S'assure que les éléments restent alignés à gauche pour les petits écrans */
}

  nav select {
    display: none;
  }

nav ul {
  position: fixed;
top: var(--header-height);
  right: 0;
  left: auto;
  width: 100%; /* Assure que l'élément prend toute la largeur */
  background-color: rgba(255, 255, 255, 0.70);
  z-index: 1004;
  list-style: none;
  padding: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end; /* Aligne tous les éléments (liens et select) à droite */
  text-align: right;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  transform: translateX(100%) translateY(-10px);
}

/* Lorsque le menu est affiché */
nav ul.show {
  display: flex;
  opacity: 1;
  transform: translateX(0);
  z-index: 1004;
  box-shadow: -2px 0 12px rgba(0,0,0,0.1);
}

/* Affichage du selecteur dans le menu déroulant */
nav ul.show select {
  display: inline-block;
}

/* === Sélecteur de langue === */
.lang-selector {
  position: relative;
  margin-right: 0; /* Ajoute un espace entre le sélecteur et le bord droit */
	    font-size: 0.8em; /* Ajuster la taille de la police si nécessaire */
}
	
}

.slide.no-slides {
  display: flex;
  align-items: center;     /* centre verticalement */
  justify-content: center; /* centre horizontalement */
  height: 100%;            /* occupe la hauteur du carrousel */
  min-height: 300px;       /* sécurité sur mobile */
  background: #f9f9f9;
  border-radius: 20px;
  padding: 20px;
}

.no-slides-content {
  display: flex;
  flex-direction: column;  /* empile image + textes */
  align-items: center;     /* centre horizontalement */
  text-align: center;      /* centre le texte */
  gap: 15px;               /* espace entre les éléments */
  max-width: 80%;          /* évite que ça prenne toute la largeur */
}

.no-slides-content img {
  max-width: 120px;        /* limite la taille de l’image */
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
.no-slides-content img {
  max-width: 50px;        /* limite la taille de l’image */
  width: 100%;
  height: auto;
}
}

.no-slides-content h3 {
  margin: 0;
  font-size: 1.3rem;
  color: #222;
}

.no-slides-content p {
  margin: 0;
  font-size: 1rem;
  color: #555;
  line-height: 1.4;
}

/* =========================================================================== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
}
.overlay.show {
  display: block;
}

/* Style pour le bouton retour en haut */

#scroll-top-btn {
  position: fixed;
  bottom: 20px; /* 20px du bas de la page */
  right: 20px;  /* 20px de la droite de la page */
  background-color: #C7B299; /* Couleur de fond */
  color: #fff; /* Couleur du texte */
  font-size: 1.5em; /* Taille du texte (flèche) */
  width: 50px; /* Largeur du bouton */
  height: 50px; /* Hauteur du bouton */
  border-radius: 50%; /* Pour le rendre rond */
border: 1px solid #fff; /* Bordure blanche */
  display: none; /* Par défaut, il est caché */
  align-items: center;
  justify-content: center;
  cursor: pointer; /* Curseur en forme de main */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ombre autour du bouton */
  transition: background-color 0.3s ease; /* Transition douce pour la couleur */
  z-index: 1000; /* Assurez-vous qu'il est au-dessus des autres éléments */
}

#scroll-top-btn:hover {
  background-color: #a88f73; /* Couleur du bouton au survol */
}

/* Pour les petits écrans (smartphones) */
@media (max-width: 767px) {
  #scroll-top-btn {
    width: 12vw;  /* Taille ajustée sur mobile */
    height: 12vw; /* Garder la forme ronde */
    font-size: 1.5em; /* Taille de l'icône réduite */
  }
}


/* ==== FIX FINAL : tagline plus petite sur mobile (prend le dessus sur tout) ==== */
@media (max-width: 800px){
  .ws-woodband .ws-tagline{ font-size: 0.95rem !important; line-height: 1.25; }
  .ws-woodband .ws-tagline .poppins{ font-size: 1em !important; }      /* ≈16px */
  .ws-woodband .ws-tagline .pristina{ font-size: 1.2em !important; }    /* ≈19px */
}


/* === LEGAL PAGES (scoped, clean) === */
.legal-page header.site h1{ font-size: clamp(1.50rem, 2.4vw, 1.25rem); margin-bottom: 6px; }
.legal-page h2{ font-size: clamp(1.30rem, 2.0vw, 1.12rem); margin: 10px 0 6px; }

.legal-page h3 { font-size: clamp(1.00rem, 1.6vw, 0.95rem); }
.legal-page * + h3 { margin-top: 10px; } /* espace AVANT le h3 */

/* Inter-sections + gestion du premier/dernier enfant */
.legal-page section{
  margin: 0 0 6px;     /* espace entre sections, resserré */
  padding-top: 4px;    /* évite le margin-collapsing et donne un souffle interne */
}
.legal-page section + section{ margin-top: 0; }
.legal-page section > h2:first-child{ margin: 2px 0 4px; }
.legal-page section > p:first-of-type{ margin-top: 6px; } /* petite marge avant le 1er <p> */
.legal-page section > :last-child{ margin-bottom: 0; }

/* Typo & utilitaires */
.legal-page p,
.legal-page li{
  font-size: clamp(0.80rem, 1.2vw, 0.90rem);
  line-height: 1.45;
  margin: 4px 0;
}
.legal-page .note{ color:#555; font-size:clamp(0.80rem, 1.2vw, 0.90rem); }
.legal-page .legal-ref{ font-variant-numeric: tabular-nums; }
.legal-page .address{ white-space: pre-line; }

/* Layouts */
.legal-page .container{ padding-block: 16px; }

.legal-page .grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 8px;         /* resserré verticalement */
}
@media (max-width: 800px){
  .legal-page .grid-2{ grid-template-columns: 1fr; }
}

/* Cards */
.legal-page .card{
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 10px;        /* compact propre */
  background: #fff;
}
.legal-page .card > *{ margin: 4px 0; }

/* Cartes sous le H1 (identité/coordonnées) si utilisées */
.legal-page .legal-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 6px 0 12px;
}
@media (min-width: 800px){
  .legal-page .legal-cards{ grid-template-columns: 1fr 1fr; }
}


/* Espace avant chaque h3 sur la page index (pages légales) */
.legal-page .card > h3,
.legal-page section h3{
  margin-top: 10px;     /* espace AVANT le h3 */
}

/* (optionnel) on garde un bas compact dans les cards */
.legal-page .card > h3{
  margin-bottom: 4px;
}



/* Mobile : forcer CGV • Confidentialité • Mentions légales sur UNE seule ligne */
@media (max-width: 767px){
  .footer-legal{
    display: flex;
    flex-wrap: nowrap;     /* interdit le retour à la ligne */
    white-space: nowrap;   /* idem pour les textes longs */
    gap: .5rem;            /* réduit l’espace entre les liens */
    justify-content: center;
    font-size: clamp(11px, 2.8vw, 13px); /* rétrécit un peu si l’écran est très étroit */
  }
  .footer-legal a{ white-space: nowrap; }
}


/* Mobile : forcer les liens légaux sur UNE ligne (override du nav{} mobile) */
@media (max-width: 767px){
  nav.footer-legal{
    display: flex;
    flex-direction: row;     /* ← clé : repasse en ligne */
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: .5rem;
    width: auto;             /* évite d’étirer à 100% si inutile */
  }
  nav.footer-legal a,
  nav.footer-legal span{
    display: inline-flex;    /* neutralise tout display:block hérité */
    padding: 0;
    margin: 0;
  }
}


	
	/* === Bloc sécurité Woodsport === */
.ws-safety-box {
  background: #f9f9f9;          /* gris clair */
  border: 2px solid #C7B299;    /* beige premium */
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #222;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.ws-safety-box strong {
  color: #000;
}

	/* === Badges Woodsport === */
.ws-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;
}
.ws-badges .badge {
  background: #C7B299;
  color: #fff;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.95rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  white-space: nowrap;
}

/*=====================================================================*/
/* Wrapper (optionnel : fond blanc pour que le fondu se fasse vers du blanc) */
.ws-sep--subtil{
  position: relative;
  background: #fff; /* retire si tu veux fond de page */
}

/* Bas UNIQUEMENT : pas de fondu en haut */
.ws-sep--subtil img{
  display: block;
  margin-left: 15%;
  height: auto;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}


/* Mobile : ton override existant */
@media (max-width: 767px){
  .ws-sep--subtil img{
    margin-left:0%;
	     margin-top:0.3%;
	  
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,     /* fondu en haut */
    rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 80%,
    rgba(0,0,0,0) 100%    /* fondu en bas */
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 80%,
    rgba(0,0,0,0) 100%
  );
  }
}

/* Espace sous le séparateur, avant le container */
.ws-sep--subtil{
  margin-block-end: clamp(12px, 4vw, 48px);  /* ~12–48px selon la largeur */
}

/* Option : un peu moins d’air sur mobile */
@media (max-width: 767px){
  .ws-sep--subtil{
    margin-block-end: clamp(20px, 6vw, 60px);
  }
}

/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

/* Crée la place pour le badge, sans toucher au carrousel */
#carousel1-section[data-promote="true"] .carousel-container{
  position: relative;
  padding-top: 20px;      /* ↓ était 26px : badge moins imposant */
  overflow: hidden;       /* les slides adjacentes restent cachées */
  border-radius: 16px;
}

/* BADGE ROUGE sombre, légèrement transparent, plus compact */
#carousel1-section[data-promote="true"] .ws-flag{
  position: absolute; top: 4px; right: 8px; z-index: 5;

  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;                 /* ↑ lisibilité sans être lourd */
  font-size: .88rem;                /* ↓ était 1rem */
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  padding: .40rem .72rem;           /* ↓ padding plus discret */
  border-radius: 99px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);

  /* Rouge sombre, MAT, avec légère transparence (fond uniquement) */
  background: linear-gradient(
    180deg,
    rgba(159, 26, 20, .85) 0%,     /* #9F1A14 */
    rgba(125, 18, 15, .85) 55%,    /* #7D120F */
    rgba( 74,  8,  7, .85) 100%    /* #4A0807 */
  );
  border: 1.2px solid rgba(50, 6, 6, .65);

  /* Relief sobre (sans sheen) */
  box-shadow:
    0 10px 20px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 0 rgba(0,0,0,.30);
}

/* Neutralise tout ancien reflet/pseudo-élément éventuel */
#carousel1-section[data-promote="true"] .ws-flag::before,
#carousel1-section[data-promote="true"] .ws-flag::after{
  content: none !important;
}

/* ===== Reflet premium (aller-retour) pour le badge du carousel home ===== */

/* === Reflet premium continu (ping-pong) pour le badge === */
/* Force l'overflow pour clipper le reflet à l'intérieur du badge */
#carousel1-section[data-promote="true"] .ws-flag{
  overflow: hidden;
  position: absolute; /* rappel */
}

/* Réactive ::after malgré le content:none !important précédent */
body #carousel1-section[data-promote="true"] .ws-flag::after{
  content: "" !important;                 /* override dur */
  position: absolute;
  top: -120%; left: -220%;
  width: 150%; height: 360%;
  pointer-events: none;
  /* bande douce, pas une barre nette */
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.22) 46%,
    rgba(255,255,255,.36) 50%,
    rgba(255,255,255,.22) 54%,
    rgba(255,255,255,0) 62%
  );
  filter: blur(8px);
  opacity: 1;
  mix-blend-mode: screen;
  transform: translateX(-180%) rotate(25deg);
  animation: wsFlagSheenPing 1.2s cubic-bezier(.22,.61,.36,1) infinite alternate !important;
}

/* Aller-retour continu */
@keyframes wsFlagSheenPing{
  0%   { transform: translateX(-180%) rotate(25deg); }
  100% { transform: translateX(680%)  rotate(25deg); }
}

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce){
  #carousel1-section[data-promote="true"] .ws-flag::after{ animation: none !important; }
}

/* Ralentir le reflet (ex. 2.4s au lieu de 1.2s) */
body #carousel1-section[data-promote="true"] .ws-flag::after{
  animation-duration: 2s !important;
}