h7 {
  font-size: 1.2em;
  font-weight: 600;
  color: #C7B299;
}

    .price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:8px 0 14px}
    .price-badge{display:inline-block;background:#C7B299;color:#111;padding:8px 12px;border-radius:9999px;font-weight:700}
    .price-note{font-size:.9rem;color:#555;margin:0}

    .label{display:inline-block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;background:#f5efe7;color:#7a6a56;border:1px solid #e3d9c9;border-radius:9999px;padding:4px 10px}


/* Séparateur qui occupe les 2 colonnes de la carte */
.compare2 .compare-col .col-sep{
  grid-column: 1 / -1;
  border: 0; height: 1px; margin: 12px 0;
  background: linear-gradient(to right, transparent, #e3d9c9 12%, #B89F82 50%, #e3d9c9 88%, transparent);
}



.emoji {
  display: inline-block;   /* force une largeur homogène */
  width: auto;            /* fixe une largeur égale pour tous */
  text-align: center;      /* centre le caractère à l’intérieur */
  margin-right: 0;       /* espace constant après */
  font-size: 1.2em;        /* un peu plus grand que le texte */
  color: #C7B299;          /* beige par défaut */
}

.emoji.black {  color: #111; /* noir */}

/* Emoji + 1er mot collés, alignés sur la baseline */
.compare-grid tbody th .keep{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}


/* Case icône homogène dans la colonne de gauche */
.compare-grid tbody th .emoji{
  flex: 0 0 1.25em;
  width: 1.25em;
  height: 1.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


.btn-wrap {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center; /* centrage horizontal */
}

/* === Bouton beige pour "Détails" (cohérent avec la charte) ================================================== */
.btn-beige{
  background:#C7B299;
  color:#111;
  border:1px solid #B89F82;
  border-radius:9999px;
  padding:10px 18px;
  font-weight:600;
  transition:.2s ease;
  box-shadow:0 6px 16px rgba(199,178,153,.25);
}
.btn-beige:hover{ filter:brightness(.96); transform:translateY(-1px); }
.btn-beige:active{ transform:translateY(0); }


/* === Tableau comparatif ================================================================================== */

/* === Espace autour du tableau — UNIQUEMENT dans la section comparatif === */
.ws-woodband--compare {
  margin: 8px 0;            /* espace externe de la section */
}

.ws-woodband--compare .ws-paper,
.ws-woodband--compare .ws-paper-lame {
  margin: 0;
  padding: 8px 0;           /* coussin vertical minimal du "papier" */
}

.ws-woodband--compare .ws-content {
  padding: 0;               /* pas de padding interne en plus */
}

.ws-woodband--compare .container-compare {
  display: flow-root;       /* évite le margin-collapsing */
  padding-top: 6px;
  padding-bottom: 6px;      /* espace immédiat autour du <table> */
}

.ws-woodband--compare .compare-grid {
  margin: 6px 0;            /* marge du tableau lui-même */
}

/* (Optionnel) compacter l'intérieur du tableau */
.ws-woodband--compare .compare-grid th,
.ws-woodband--compare .compare-grid td {
  padding: 10px 12px;
}


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

.container-compare .compare-grid thead th:nth-child(2){
  text-align:center;
  vertical-align:middle;
  white-space:nowrap; /* évite le retour à la ligne */
}


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

.compare-grid {
  width: 100%;
  border-collapse: separate;   /* pas de collapse sinon l'arrondi saute */
  border-spacing: 0;
  margin-top: 20px;
  font-size: clamp(0.75rem, 2.2vw, 0.95rem);
  text-align: center;

  /* Cadre arrondi parfaitement coloré (#8a6a44) */
  border: 1px solid transparent;
  border-radius: 12px;
  overflow: hidden;            /* <-- force l’arrondi visible */

  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(#B89F82, #B89F82) border-box;
  /* (optionnel, mais robuste) */
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

/* On retire les bordures par défaut des cellules */
.compare-grid th,
.compare-grid td {
  border: 0;
  background: #fff;
  color: #222;
}

/* Séparateurs internes (horizontaux + verticaux) */
.compare-grid tr + tr > * {              /* toute ligne après la 1ère */
  border-top: 1px solid #e3d9c9;
}
.compare-grid tr > * + * {               /* toute cellule après la 1ère */
  border-left: 1px solid #e3d9c9;
}

/* En-tête */
.compare-grid thead th {
  background: #f5efe7;
  color: #111;
  font-weight: 700;
}

/* Colonne de gauche : texte beige */
.compare-grid tbody th {
  text-align: left;
  font-weight: 600;
  color: #B89F82;   /* beige charte */
  width: 25%;
}

.compare-grid th,
.compare-grid td { background: transparent; }

.compare-grid thead th {
  background: #f5efe7;
}

.compare-grid tbody th .keep{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}

/* Titres de colonnes sur une seule ligne */
.compare-grid thead th{
  white-space: nowrap;
  /* taille un peu responsive pour éviter les retours forcés */
  font-size: clamp(0.85rem, 2.2vw, 1rem);
}



@media (max-width: 767px){
  .compare-grid tbody th .emoji { display: none !important; }
  .compare-grid tbody th .keep { gap: 0; }
}

/* Colonnes égales pour Pro / Lite sur desktop */
@media (min-width: 767px){
  .compare-grid{ table-layout: fixed; } /* respecte les largeurs fixées */

  /* 1ère colonne (critères) */
  .compare-grid thead th:first-child,
  .compare-grid tbody th{
    width: 32%;   /* ajuste si besoin (30–34%) */
  }

  /* 2e et 3e colonnes : mêmes largeurs */
  .compare-grid thead th:nth-child(2),
  .compare-grid thead th:nth-child(3),
  .compare-grid tbody td:nth-child(2),
  .compare-grid tbody td:nth-child(3){
    width: 34%;
  }
}

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

/* === Compare2 : texte à gauche, vignette à droite, sans entourage === */
.compare2 .cols{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:20px;
  align-items:start;
}
@media (max-width:900px){
  .compare2 .cols{ grid-template-columns:1fr; } /* mobile : 1 carte sous l'autre */
}

/* Carte avec effet rebond (tu peux garder tes styles existants si tu préfères) */
.compare2 .compare-col{
  display:grid;
  grid-template-columns: 1fr min(38%, 320px);  /* texte | vignette */
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid #e3d9c9;
  border-radius:18px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  padding:16px;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.compare2 .compare-col:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

/* Zone texte : aligné à gauche, compact */
.compare2 .compare-col .text{
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Vignette : SANS entourage (pas de bord, pas d’ombre, pas de padding) */
.compare2 .compare-col .thumb{
  justify-self:end;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  width:100%;
  max-width:320px;
}
.compare2 .compare-col .thumb img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* Titre de colonne : style + span sur 2 colonnes */
.compare2 .compare-col .col-title{
  grid-column: 1 / -1;                 /* occupe toute la largeur de la carte */
  margin: 0 0 8px;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  border: 1px solid #B89F82;
  background: #f5efe7;
  color: #111;
  border-radius: 12px;
  padding: 6px 10px;
}

/* Les boutons sous toute la carte */
.compare2 .compare-col .btn-wrap{
  grid-column: 1 / -1;     /* sous les deux colonnes */
  margin-top: 8px;
  justify-content: center;
}

.compare2 .kv{
  display:flex; flex-wrap:wrap; gap:6px 8px; margin:4px 0 0; justify-content:flex-start;
}
.compare2 .kv li{
  list-style:none; font-size:.80rem; padding:4px 8px; border-radius:9999px;
  background:#f5efe7; color:#7a6a56; border:1px solid #e3d9c9;
}

.kv .keep-line{
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}


/* Le titre de la carte occupe toute la largeur de la carte */
.compare2 .compare-col .col-title{
  grid-column: 1 / -1;
}

/* Texte toujours colonne 1 (à gauche) */
.compare2 .compare-col .text{
  grid-column: 1;
}

/* Toutes les vignettes colonne 2 (à droite), elles s'empilent naturellement */
.compare2 .compare-col .thumb{
  grid-column: 2;
}

/* Pas d'entourage sur la vignette (au cas où .image-preview aurait des styles globaux) */
.compare2 .compare-col .thumb .image-preview{
  display:block;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}


/* Responsive : réduire un peu la vignette à mesure que l’écran rétrécit */
@media (max-width:900px){
  .compare2 .compare-col{
    grid-template-columns: 1fr min(44%, 240px);
    gap:12px; padding:14px;
  }
  .compare2 .compare-col .thumb{ max-width:240px; }
}
@media (max-width:480px){
  .compare2 .compare-col{
    grid-template-columns: 1fr min(42%, 180px);
    gap:10px; padding:12px;
  }
  .compare2 .compare-col .thumb{ max-width:180px; }
}


/* Fenêtre étroite en desktop : forcer la note sous le badge si besoin */
@media (min-width:768px) and (max-width:1024px){
  .price-row .price-note{ flex-basis:100%; }
}

/* PC : ajustement vertical fin du libellé Amazon par rapport au prix */
@media (min-width:768px){
  .price-row{ align-items:center; font-style: italic; } /* au cas où */

  .price-row .price-note.price-note--amazon{
    font-size:.9rem !important;   /* ta taille réduite */
    line-height:1.1;
    position:relative;
    top:-10px;                      /* remonte légèrement (ajuste -1 à -4px si besoin) */
  }
}


@media (max-width:767.98px){
  .price-row .price-note--amazon{ font-size:1rem;	    font-weight:300;  font-style: italic; }
}


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

/* Met le prix + boutons sur UNE SEULE LIGNE, centrés verticalement */
.cta-row{ display:flex; align-items:center; gap:10px; }

/* Les deux “bulles” conservent leur taille naturelle */
.cta-row .btn-wrap{
  display:flex; align-items:center; gap:8px;
}
.cta-row .btn{ 
  display:inline-flex; align-items:center; justify-content:center;
  height:auto !important; min-height:0 !important; /* annule tout héritage foireux */
  padding:.55rem .9rem;
}

/* Le SVG du prix ne dicte pas la hauteur aux autres */
.cta-row .price-row{ margin:0; flex:0 0 auto; }
.cta-row .price-row svg{ display:block; height:auto; }

/* Centrer les deux boutons à l'intérieur de leur div (.btn-wrap) */
.cta-row .btn-wrap{
  flex:1 1 auto;                 /* prend l'espace restant */
  display:flex;
  justify-content:center;        /* ⇦ centre horizontalement les boutons */
  align-items:center;            /* ⇦ centre verticalement si 2 lignes */
  gap:10px;
}

/* Boutons : taille naturelle, pas d'étirement */
.cta-row .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:auto;
  min-height:0;
  padding:.55rem .9rem;
}


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

  .js-zoom{cursor:zoom-in}
  #ws-zoom{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:4vh 4vw;background:rgba(0,0,0,.55);z-index:9999}
  #ws-zoom.open{display:flex}
  #ws-zoom .ws-modal{position:relative;max-width:min(900px,86vw);border-radius:14px;background:rgba(20,20,20,.72);backdrop-filter:blur(6px);box-shadow:0 30px 80px rgba(0,0,0,.45);padding:10px}
  #ws-zoom .ws-modal img{display:block;max-width:80vw;max-height:70vh;border-radius:12px}
  /* CSS */
#ws-zoom .ws-close{
  position:absolute; top:8px; right:8px;
  width:36px; height:36px; padding:0;
  display:flex; align-items:center; justify-content:center;  /* ⇦ centrage parfait */
  border-radius:999px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.12); color:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:700; font-size:20px; line-height:1; cursor:pointer;
}
#ws-zoom .ws-close span{ display:block; transform:translateY(-1px); } /* petit nudge iOS */

  .ws-clone{position:fixed;z-index:10001;will-change:left,top,width,height,border-radius;transition:left .35s cubic-bezier(.2,.65,.3,1),top .35s cubic-bezier(.2,.65,.3,1),width .35s cubic-bezier(.2,.65,.3,1),height .35s cubic-bezier(.2,.65,.3,1),border-radius .35s ease}

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

/* Loupe overlay pour les images .js-zoom */
.ws-zoom-icon{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border-radius:999px;
  background:rgba(0,0,0,.65); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  pointer-events:none;  /* ne bloque pas le clic sur l'image */
}

.ws-zoom-icon{
  background: transparent;
  color: rgba(0,0,0,.65);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: none;
  backdrop-filter: none;
}
.ws-zoom-icon:hover{ border-color: rgba(0,0,0,.28); }



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

/* Compare2 : retire l'indentation par défaut du <ul> .kv */
.compare2 .kv{
  list-style: none;
  padding-left: 0;      /* <-- clé : enlève le retrait à gauche */
  margin-left: 0;
}

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


/* Rendre n'importe quel bloc "zoomable" */
.zoomable{ position:relative; display:block; }
.zoomable > img.js-zoom{ display:block; width:100%; height:auto; cursor:zoom-in; }

/* Icône loupe en haut à droite */
.zoomable::after{
  content:"";
  position:absolute;
  top:10px; right:10px;
  width:34px; height:34px;
  background:url('/images/ui/ico-loupe.svg') center/contain no-repeat; /* adapte le chemin si besoin */
  pointer-events:none; opacity:.9;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.zoomable:hover::after{ opacity:1; }


.feature-media{ position:relative; }       /* IMPORTANT pour positionner le badge */
.feature-media img.js-zoom{
  display:block; width:100%; height:auto; cursor:zoom-in;
}
.feature-media .zoom-badge{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px;
  background:url('/images/ui/ico-loupe.svg') center/contain no-repeat;
  pointer-events:none; opacity:.9;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
  z-index:2;                                /* au cas où un overlay passe devant */
}
.feature-media:hover .zoom-badge{ opacity:1; }



/* Styles compacts pour la liste kv quand style-comparatif.css n'est pas chargé */
.features-list .feature-text .kv{
  list-style:none; padding:0; margin:.5rem 0 0;
}
.features-list .feature-text .kv li{
  display:inline-block; margin:6px 8px 0 0;
  background:#f6f6f6; border:1px solid rgba(0,0,0,.06);
  border-radius:10px; padding:6px 10px; line-height:1.2;
  font-size:.95rem; white-space:nowrap;
}
.features-list .feature-text .kv .keep-line{ display:inline-block; }
@media (max-width: 480px){
  .features-list .feature-text .kv li{ font-size:.9rem; }
}


#carousel-kv { margin-top: 8px; }
#carousel-kv .kv {
  list-style:none; padding:0; margin:.25rem 0 0; display:flex; flex-wrap:wrap; gap:8px;
}
#carousel-kv .kv li {
  background:#f6f6f6; border:1px solid rgba(0,0,0,.06);
  border-radius:10px; padding:6px 10px; line-height:1.2; font-size:.95rem;
  white-space:nowrap;
}

#carousel-1 .slide .kv{ display:none; }

.carousel-text b, .carousel-text strong { font-weight:700; }


.carousel-subtitle{
  margin: 2px 0 6px;
  font-size: 1.05rem;
  font-weight: 600;    /* aspect “gras” propre */
  line-height: 1.25;
}
@media (max-width: 480px){
  .carousel-subtitle{ font-size: 1rem; }
}


/* Mise en ligne du prix + boutons (extraits de ta CSS comparatif) */
.cta-row{ display:flex; align-items:center; gap:10px; }
.cta-row .price-row{ margin:0; flex:0 0 auto; }
.cta-row .price-row svg{ display:block; height:auto; }
.cta-row .btn-wrap{
  flex:1 1 auto; display:flex; justify-content:center; align-items:center; gap:10px;
}



/* Boutons de navigation dans la modale de zoom */
#ws-zoom .ws-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  border:0; background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#ws-zoom .ws-prev{ left:8px; }
#ws-zoom .ws-next{ right:8px; }
#ws-zoom .ws-nav:focus-visible{ outline:2px solid #fff; }


/* Respecte vraiment l’attribut [hidden] partout */
[hidden],
.feature-media img[hidden],
img.js-zoom[hidden]{
  display: none !important;
}


/* Cache fort des images supplémentaires (y compris iOS Safari) */
.features-list .feature-media img.js-zoom[hidden]{
  display:none !important;
  position:absolute !important;
  width:0 !important; height:0 !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  clip-path: inset(50%); /* évite toute prise de place résiduelle */
}

/* Renfort spécifique iOS */
@supports (-webkit-touch-callout: none) {
  .features-list .feature-media img.js-zoom[hidden]{
    display:none !important;
  }
}


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

/* Le cadre externe uniquement */
.feature-media.feature-mediav3{
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;         /* enlève tout padding interne */
  margin: 0;          /* au cas où */
}

/* Pas de marge/padding sur la section interne */
.feature-mediav3 .carousel-section{
  margin: 0 !important;
  padding: 0 !important;
}

/* Le conteneur et la piste occupent 100%, sans bord ni arrondi interne */
.feature-mediav3 .carousel-container,
.feature-mediav3 .carousel{
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Slides plein cadre */
.feature-mediav3 .slide{
  min-width: 100%;
  flex: 0 0 100%;
}

/* L’image remplit vraiment le cadre (pas de liseré blanc) */
.feature-mediav3 .slide img{
  display: block;
  width: 100% !important;
  height: auto;
  margin: 0;
  border: 0;
  box-shadow: none;
}

/* Bonus : s'assurer que tout calcule les tailles correctement */
.feature-mediav3, .feature-mediav3 *{ box-sizing: border-box; }



/* Opt-out générique pour afficher une image à sa taille native */
.features-list .feature-media img.img-native{
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* === Public.png en taille native, sans crop (override fort) === */
.features-list .feature-row .feature-media.feature-mediav2 > img.img-native{
  width: auto !important;       /* largeur naturelle */
  max-width: 100% !important;   /* ne dépasse pas sa colonne */
  height: auto !important;      /* hauteur naturelle */
  aspect-ratio: auto !important;/* annule 16/9 ou 16/10 forcés */
  object-fit: contain !important;/* aucune coupe */
  display: block;
}

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

/* Valeur par défaut si ta carte a ~16px de padding latéral */
.compare2 .compare-col { --col-pad: 16px; }

/* Image "hero" juste sous le titre : pleine largeur de la carte */
.compare2 .compare-col .col-hero{
  grid-column: 1 / -1;     /* occupe toute la largeur de la carte */
  margin: 6px 0 10px;
  border-radius: 12px;     /* angles arrondis de la photo */
  overflow: hidden;        /* masque les coins internes */
}

.compare2 .compare-col .col-hero img{
  display: block;
  width: 100%;
  height: auto;            /* s’adapte à la largeur d’écran */
  object-fit: cover;       /* remplit bien le cadre si tu mets une hauteur fixe plus tard */
}


/* iPhone / petits écrans */
@media (max-width: 767px){
  .compare2 .compare-col .col-hero{
    aspect-ratio: 16/12;       /* ratio agréable en mobile */
  }
  .compare2 .compare-col .col-hero img{
    height:100%;
    object-fit: cover;         /* pas d’écrasement, recadrage propre */
  }
}


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