/* Start custom CSS for html, class: .elementor-element-b73e5eb *//* =========================
   CandyCrazy – Article BUBS (Champions League)
   Scope : .cc-bubs-ultimate
   ========================= */

.cc-bubs-ultimate{
  --cc-text: rgba(0,0,0,.88);
  --cc-muted: rgba(0,0,0,.60);
  --cc-border: rgba(0,0,0,.10);
  --cc-soft: rgba(0,0,0,.04);
  --cc-soft2: rgba(0,0,0,.06);
  --cc-shadow: 0 10px 30px rgba(0,0,0,.08);
  --cc-radius: 18px;
  --cc-radius2: 14px;
  --cc-pad: 18px;
  --cc-gap: 14px;
  --cc-max: 90%;

  color: var(--cc-text);
  max-width: var(--cc-max);
  margin: 0 auto;
  line-height: 1.65;
  font-size: 1rem;
 font-family: 'Grandstander' !important;

}

.cc-bubs-ultimate a{
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.18);
   font-family: 'Grandstander', cursive;
}
.cc-bubs-ultimate a:hover{
  border-bottom-color: rgba(0,0,0,.45);
}

.cc-bubs-ultimate p{ margin: 0 0 12px; }
.cc-bubs-ultimate ul, .cc-bubs-ultimate ol{ margin: 0 0 12px; padding-left: 20px; }
.cc-bubs-ultimate li{ margin: 6px 0; }
.cc-bubs-ultimate strong{ font-weight: 700; }

.cc-bubs-ultimate h1,
.cc-bubs-ultimate h2,
.cc-bubs-ultimate h3{
  line-height: 1.2;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  font-family: 'Grandstander', cursive;
}

.cc-bubs-ultimate h4{
  line-height: 1.2;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  text-align: center;
  font-family: 'Grandstander', cursive;
}


.cc-bubs-ultimate h1{ font-size: 2rem; }
.cc-bubs-ultimate h2{ font-size: 1.45rem; margin-top: 26px; }
.cc-bubs-ultimate h3{ font-size: 1.15rem; margin-top: 18px; }
.cc-bubs-ultimate h4{ font-size: 1.02rem; margin-top: 10px; }

.cc-mini{
  font-size: .92rem;
  color: var(--cc-muted);
}

/* HERO */
.cc-bubs-ultimate .cc-hero{
  border: 1px solid var(--cc-border);
  background: linear-gradient(180deg, var(--cc-soft), rgba(255,255,255,1));
  border-radius: var(--cc-radius);
  padding: calc(var(--cc-pad) + 4px);
  box-shadow: var(--cc-shadow);
  margin-bottom: 18px;
}

.cc-bubs-ultimate .cc-kicker{
  display: inline-block;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--cc-soft2);
  border: 1px solid var(--cc-border);
  font-size: .85rem;
  color: var(--cc-muted);
}

.cc-bubs-ultimate .cc-subtitle{
  margin: 10px 0 14px;
  color: var(--cc-muted);
  font-size: 1.03rem;
}

.cc-bubs-ultimate .cc-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: var(--cc-muted);
  font-size: .9rem;
}

/* CTA buttons */
.cc-bubs-ultimate .cc-ctaRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
}

.cc-bubs-ultimate .cc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--cc-border);
  background: #fff;
  color: var(--cc-text);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  font-weight: 650;
  font-size: .95rem;
  border-bottom: none; /* override link underline */
}

.cc-bubs-ultimate .cc-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.cc-bubs-ultimate .cc-btnPrimary{
  background: rgba(0,0,0,.88);
  color: #fff;
  border-color: rgba(0,0,0,.88);
}

.cc-bubs-ultimate .cc-btnGhost{
  background: #fff;
}

/* TOC */
.cc-bubs-ultimate .cc-toc{
  border: 1px solid var(--cc-border);
  background: #fff;
  
  border-radius: var(--cc-radius);
  padding: var(--cc-pad);
  margin: 0 0 18px;
}

.cc-bubs-ultimate .cc-tocTitle{
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.cc-bubs-ultimate .cc-toc ol{
  margin: 0;
  padding-left: 18px;
}

.cc-bubs-ultimate .cc-toc a{
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.20);
  text-underline-offset: 2px;
}
.cc-bubs-ultimate .cc-toc a:hover{
  text-decoration-color: rgba(0,0,0,.55);
}

/* Sections */
.cc-bubs-ultimate .cc-section{
  border: 1px solid var(--cc-border);
  background: #fff;
  border-radius: var(--cc-radius);
  padding: var(--cc-pad);
  margin: 0 0 16px;
}

.cc-bubs-ultimate .cc-fiches{
  border: 1px solid var(--cc-border);
  background: #fff;
  border-radius: var(--cc-radius);
  padding: 0;
  margin: 0 0 10px;
}


/* Cadre identique à .cc-section pour la section fiches en mode gauge */
.cc-bubs-ultimate #bubs-fiches-gauges{
  border: 1px solid var(--cc-border);
  background: #fff;
  border-radius: var(--cc-radius);
  padding: 40px 5%;
  margin: 0 0 16px;
  box-shadow: var(--cc-shadow);
  overflow: hidden; /* évite que des éléments "cassent" l'arrondi */
}

/* Callouts */
.cc-bubs-ultimate .cc-callout{
  border-radius: var(--cc-radius2);
  border: 1px solid var(--cc-border);
  padding: 12px 14px;
  background: var(--cc-soft);
  margin: 12px 0;
}

.cc-bubs-ultimate .cc-calloutTip{
  background: linear-gradient(180deg, var(--cc-soft2), #fff);
}

.cc-bubs-ultimate .cc-calloutNote{
  background: linear-gradient(180deg, var(--cc-soft), #fff);
}

/* Grids and cards */
.cc-bubs-ultimate .cc-grid{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.cc-bubs-ultimate .cc-grid2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-bubs-ultimate .cc-grid3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cc-bubs-ultimate .cc-card{
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.cc-bubs-ultimate .cc-card ul{
  margin: 8px 0 8px;
}

/* Table */
.cc-bubs-ultimate .cc-tableWrap{
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  overflow: auto;
  background: #fff;
  margin-top: 10px;
  width: 90%;

}

.cc-bubs-ultimate .cc-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
  text-align: center;
  font-family: 'Grandstander', cursive;
}

.cc-bubs-ultimate .cc-table th,
.cc-bubs-ultimate .cc-table td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--cc-border);
  vertical-align: top;
  text-align: center;
}

.cc-bubs-ultimate .cc-table thead th{
  position: sticky;
  top: 0;
  background: rgba(0,0,0,.03);
  z-index: 1;
}

/* CTA Box */
.cc-bubs-ultimate .cc-ctaBox{
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: linear-gradient(180deg, rgba(0,0,0,.03), #fff);
  padding: 16px;
  margin-top: 14px;
}

.cc-bubs-ultimate .cc-links{
  margin: 12px 0 0;
  padding-left: 18px;
}

.cc-bubs-ultimate .cc-links a{
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.20);
  text-underline-offset: 2px;
  border-bottom: none;
}

/* Steps */
.cc-bubs-ultimate .cc-steps{
  padding-left: 20px;
}
.cc-bubs-ultimate .cc-steps li{
  margin: 10px 0;
}

/* FAQ */
.cc-bubs-ultimate .cc-faq{
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 12px 14px;
  background: #fff;
  margin: 10px 0;
  font-family: 'Grandstander', cursive;
}

.cc-bubs-ultimate .cc-faq summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--cc-text);
}
.cc-bubs-ultimate .cc-faq summary::-webkit-details-marker{ display:none; }

.cc-bubs-ultimate .cc-faq summary::after{
  content: "＋";
  float: right;
  opacity: .7;
}

.cc-bubs-ultimate .cc-faq[open] summary::after{
  content: "−";
  
}

.cc-bubs-ultimate .cc-footer{
  margin-top: 18px;
  padding: 10px 4px 0;
}

/* Responsive */
@media (max-width: 860px){
  .cc-bubs-ultimate{ --cc-pad: 16px; }
  .cc-bubs-ultimate h1{ font-size: 1.65rem; }
  .cc-bubs-ultimate .cc-grid3{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .cc-bubs-ultimate .cc-grid2{ grid-template-columns: 1fr; }
  .cc-bubs-ultimate .cc-btn{ width: 100%; }
}

/* Motion preference */
@media (prefers-reduced-motion: no-preference){
  .cc-bubs-ultimate .cc-btn{ transition: transform .15s ease, box-shadow .15s ease; }
}



.gauge-wrapper{
  display:inline-block;
  width:auto;
  margin:0 auto;
  padding:20px 15px 15px;
}

.gauge{
  background:#e7e7e7;
  box-shadow:0 -3px 6px 2px rgba(0,0,0,.50);
  width:200px;
  height:100px;
  border-radius:100px 100px 0 0!important;
  position:relative;
  overflow:hidden;
}

/* ---- Le demi-arc en 5 parts (36° chacune sur 180°) ---- */
.slice-colors{
  position:absolute;
  inset:0;
}

/* Arc coloré */
.five .slice-colors::before{
  content:"";
  position:absolute;
  inset:0;

  /* 0deg placé à GAUCHE pour que 0..180 corresponde au haut (gauche→droite) */
  background: conic-gradient(
    from -90deg at 50% 100%,
    #3B82F6 0deg 36deg,    /* bleu */
    #8B5CF6 36deg 72deg,   /* violet */
    #EC4899 72deg 108deg,  /* rose bonbon */
    #F43F5E 108deg 144deg, /* framboise */
    #FACC15 144deg 180deg, /* jaune acidulé */
    transparent 180deg 360deg);
}

/* ---- Centre ---- */
.gauge-center{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: 60%;
  height: 60%;

  background: #15222E;
  border-radius: 999px 999px 0 0!important;
  box-shadow: 0 -13px 15px -10px rgba(0,0,0,.28);

  display: flex;
  flex-direction: column;
  justify-content: center;   /* ✅ centrage vertical */
  align-items: center;       /* ✅ centrage horizontal */

  color: #fff;
  z-index: 10;
}

.gauge-center .label,
.gauge-center .number{
  display:block;
  width:100%;
  text-align:center;
  border:0!important;
}

.gauge-center .label{font-size:1.2em; opacity:1; margin:0.5em 0 0 0;}
.gauge-center .number{font-size:1.1em;}

/* ---- Aiguille ---- */
.needle{
  width:80px;
  height:7px;
  background:#fff;
  border-bottom-left-radius:100%!important;
  border-bottom-right-radius:5px!important;
  border-top-left-radius:100%!important;
  border-top-right-radius:5px!important;
  position:absolute;
  bottom:-2px;
  left:20px;
  transform-origin:100% 4px;
  transform:rotate(0deg);
  box-shadow:0 2px 2px 1px rgba(0,0,0,.38);
  display:none;
  z-index:9;
}

/* ---- 5 positions d’aiguille ----
   On garde les mêmes “bornes” que ta version 4 niveaux : 16° → 164°
   et on répartit en 5 paliers : 16, 53, 90, 127, 164
*/
/* Aiguille pilotable via --value (0..100) */
.needle{
  /* longueur de l’aiguille (responsive) */
  --needleL: 40%;

  position: absolute;
  width: var(--needleL);
  height: clamp(5px, 7%, 8px);

  background: #fff;
  border-radius: 999px;

  /* ✅ ancrage : le bout droit tombe pile au centre du cercle (x=50%) */
  left: calc(50% - var(--needleL));
  bottom: clamp(-2px, -1.2%, 0px);

  /* pivot sur l’extrémité droite, au milieu en hauteur */
  transform-origin: 100% 50%;

  /* 0..100 -> 16deg..164deg (tes bornes d’origine) */
  transform: rotate(calc(16deg + (clamp(0, var(--value), 100) * 148deg / 100)));

  box-shadow: 0 2px 6px rgba(0,0,0,.40);
  z-index: 9;
  display: block;
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}


@-webkit-keyframes fivespeed1 {0%{transform:rotate(0);} 100%{transform:rotate(16deg);} }
@-webkit-keyframes fivespeed2 {0%{transform:rotate(0);} 100%{transform:rotate(53deg);} }
@-webkit-keyframes fivespeed3 {0%{transform:rotate(0);} 100%{transform:rotate(90deg);} }
@-webkit-keyframes fivespeed4 {0%{transform:rotate(0);} 100%{transform:rotate(127deg);} }
@-webkit-keyframes fivespeed5 {0%{transform:rotate(0);} 100%{transform:rotate(164deg);} }


.gauge-section{
  width: 100%;
  padding: 20px 5%;
  box-sizing: border-box;
}

.gauge-grid{
  display: grid;
  width: 100%;
  gap: 24px;

  /* auto responsive */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  
}

.gauge-grid .cc-card{
  border: 1px solid var(--cc-border);
   border-radius: var(--cc-radius);
   background: #fff;
   box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.gauge-grid > img{
  align-self: center;
  justify-self: center;
}

.gauge-item{
  display:flex;
  justify-content:center;
  align-items: center; /* ✅ centre vertical */
  height: 100%;        /* ✅ prend toute la hauteur de la cellule */
}

/* ✅ jauge toujours “circulaire” (demi-cercle parfait) */
.gauge{
  width: min(90%, 220px);     /* s’adapte à la cellule, limite une taille max */
  aspect-ratio: 2 / 1;         /* largeur / hauteur = 2 => demi-cercle parfait */
  height: auto;                /* laisse l’aspect-ratio piloter la hauteur */
}

/* Sécurité : tout ce qui était en dur (200x100) devient “fluide” */
.gauge{
  /* si tu avais encore width:200px; height:100px; -> supprime-les */
  /* on garde la forme */
  border-radius: 999px 999px 0 0!important;
}

/* Si ton centre est positionné en % ça restera OK,
   sinon (si tu as du px), mieux vaut le rendre proportionnel */
.gauge-center{
  width: 60%;
  height: 60%;
  right: 20%;
}

/* Conteneur */
.slice-colors{
  position:absolute;
  inset:0;
}

/* Style général des chiffres */
/* Les chiffres 1..5 sur l’arc, orientés tangentiellement */
.tick{
  position: absolute;
  left: 50%;
  bottom: 0;                 /* bas du demi-cercle = centre du cercle */
  transform-origin: 0 0;     /* on travaille depuis le centre */

  /* distance du texte à partir du centre (à ajuster) */
  --r: 82px;

  font: 800 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  user-select: none;

  /* 1) on tourne pour aller sur l’angle
     2) on pousse vers l’extérieur (rayon)
     3) on tourne de +90° pour devenir tangent
     4) on centre le texte sur son point */
  transform:
    rotate(var(--a))
    translateY(calc(-1 * var(--r)))
    rotate(0deg)
    translate(-50%, -50%);
}

/* Responsive : adapte automatiquement le rayon au scale */
.gauge{ --R: 1; } /* juste pour être explicite */
.gauge .tick{
  --r: clamp(58px, 38%, 88px);
}

/* Le calque des chiffres */
/* Le SVG doit pouvoir "déborder" sinon il coupe tout */
.gauge-labels{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;     /* <-- CRUCIAL */
  pointer-events: none;
}

/* Chiffres (SVG <text>) */
.gauge-labels .gl{
  fill:#fff;
  text-anchor:middle;
  dominant-baseline:middle;
  paint-order:stroke;
  stroke:rgba(0,0,0,.35);
  stroke-width:2px;
  font: 800 clamp(10px, 2vw, 16px)/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --r: 82;
  transform:
    rotate(var(--a))
    translate(0, calc(-1px * var(--r)))
    rotate(0deg);
  transform-origin: 100px 100px;
  transform-box: fill-box;
}

/* Groupes extrémités : on part du centre du cercle (100,100) */
.edge-label{
  --r: 82;
  transform:
    translate(100px, 100px)
    rotate(var(--a))
    translate(0, calc(-1px * var(--r)))
    rotate(0deg);
  transform-origin: 0 0;
}

/* Le bloc HTML dans le SVG */
.edge-text{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;

  font: 700 clamp(9px, 2.2vw, 8px)/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;

  /* wrap propre */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  /* optionnel pour lisibilité */
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* Chaque chiffre est placé au centre de son segment
   180° / 5 = 36°
   Centre de chaque tranche = 18°, 54°, 90°, 126°, 162°
*/

.t1 { transform: rotate(18deg)  translateY(-120%); }
.t2 { transform: rotate(54deg)  translateY(-120%); }
.t3 { transform: rotate(90deg)  translateY(-120%); }
.t4 { transform: rotate(126deg) translateY(-120%); }
.t5 { transform: rotate(162deg) translateY(-120%); }


/* Responsive */
@media (max-width: 1100px){
  .gauge-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .gauge-grid{
    grid-template-columns: 1fr;
  }
}


.cc-image{
  text-align:center;
  margin: 0;
}

.cc-image img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

.cc-image figcaption{
  margin-bottom:10px; /* 👈 légende AU-DESSUS */
  font-size:0.9rem;
  font-weight:600;
  color:#555;
}

  .bubs-table {
    width: 80%;
    margin: 0 auto;              /* centre le tableau */
    border-collapse: collapse;
    table-layout: fixed;
  }

  .bubs-table th,
  .bubs-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;          /* centre le texte dans les cases */
    vertical-align: middle;
    word-wrap: break-word;
  }

  .bubs-table thead th {
    font-weight: 700;
  }

  /* Mobile : le tableau prend (presque) toute la largeur */
  @media (max-width: 768px) {
    .bubs-table {
      width: 95%;
    }
    .bubs-table th,
    .bubs-table td {
      padding: 8px;
      font-size: 14px;
    }
  }

  /* Conteneur pleine largeur */
.bubs-card-wrapper{
  width: 100%;
  margin: 10px 0;
}

/* Carte */
.bubs-card{
  width: 100%;
  box-sizing: border-box;

  padding: 10px 10px;

  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;

  background: #f3f4f6;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);

  transition: transform .2s ease, box-shadow .2s ease;
}

/* Petit effet subtil au survol */
.bubs-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

/* Titre en haut à gauche */
.bubs-card__title{
  margin: 0 0 14px 0;

  font-size: 1.4rem;
  font-weight: 750;
  line-height: 1.2;

  color: rgba(0,0,0,.9);
}

/* Description */
.bubs-card__description{
  margin: 0;

  font-size: 1rem;
  line-height: 1.65;

  color: rgba(0,0,0,.75);
}

/* Responsive */
@media (max-width: 640px){
  .bubs-card{
    padding: 22px 20px;
  }

  .bubs-card__title{
    font-size: 1.2rem;
  }
}

@media (max-width: 640px){

  /* le wrap reste normal */
  .cc-bubs-ultimate .cc-tableWrap{
    width: 100%;
    overflow: visible; /* on n'a plus besoin de scroll horizontal */
  }

  /* le tableau peut respirer */
  .cc-bubs-ultimate .cc-table{
    min-width: 0;      /* ✅ tue le min-width 700px */
    width: 90%;
    border-collapse: separate;
    border-spacing: 0 0px; /* espace entre "cartes" */
    margin: auto; 
  }

  /* on cache l'entête (on recrée des labels sur chaque cellule) */
  .cc-bubs-ultimate .cc-table thead{
    display: none;
  }

  /* chaque ligne devient une carte */
  .cc-bubs-ultimate .cc-table tbody tr{
    display: block;
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    margin: 0 0 16px; 
  }

  /* chaque cellule devient une ligne "label : valeur" */
  .cc-bubs-ultimate .cc-table tbody td{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;

    padding: 10px 12px;
    text-align: right;     /* valeur à droite */
    border-bottom: 1px solid var(--cc-border);
  }

  .cc-bubs-ultimate .cc-table tbody tr td:last-child{
    border-bottom: none;
  }

  /* labels automatiques via nth-child */
  .cc-bubs-ultimate .cc-table tbody td::before{
    font-weight: 800;
    color: rgba(0,0,0,.65);
    text-align: left;
    flex: 0 0 40%;
  }

  .cc-bubs-ultimate .cc-table tbody td:nth-child(1)::before{ content: "Nom"; }
  .cc-bubs-ultimate .cc-table tbody td:nth-child(2)::before{ content: "Acidité"; }
  .cc-bubs-ultimate .cc-table tbody td:nth-child(3)::before{ content: "Mâche"; }
  .cc-bubs-ultimate .cc-table tbody td:nth-child(4)::before{ content: "Arôme"; }

  /* petit bonus : le nom ressort */
  .cc-bubs-ultimate .cc-table tbody td:nth-child(1){
    font-weight: 800;
    text-align: left;
  }
}

 /* labels (Nom, Acidité, Mâche, Arôme) */
  .cc-bubs-ultimate .cc-table tbody td::before{
    color: rgba(0,0,0,.70);
    background: rgba(250, 204, 21, .18); /* ✅ jaune acidulé très léger */
    border: 1px solid rgba(250, 204, 21, .22);
    padding: 6px 10px;
    border-radius: 999px;
    line-height: 1;
    flex: 0 0 auto; /* le label prend sa taille */
    white-space: nowrap;
  }

@media (max-width: 640px){

  /* Supprime les bordures internes héritées du tableau */
  .cc-bubs-ultimate .cc-table tbody td{
    border: none !important;
    background: transparent !important;
  }

  /* Supprime aussi toute bordure résiduelle sur le tableau */
  .cc-bubs-ultimate .cc-table{
    border: none !important;
  }

  .cc-bubs-ultimate .cc-tableWrap{
    border: none !important;
  }
}

/* TOC layout (Sommaire à gauche + image à droite) */
.cc-bubs-ultimate .cc-tocLayout{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  align-items: stretch;

  margin: 0 0 18px;        /* ✅ c'est lui qui espace avec la suite */
  padding-bottom: 2px;     /* ✅ empêche les glitches de collapse */
  overflow: hidden;        /* ✅ coupe tout débordement visuel */
  
}

/* On garde le style existant du sommaire, mais on enlève sa marge externe */
.cc-bubs-ultimate .cc-toc{
  margin: 0;
  align-self: stretch; 
}

/* Bloc image */
.cc-bubs-ultimate .cc-tocMedia{
  margin: 0;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--cc-shadow);
  display: grid;
  place-items: center;
  padding: 10px;
}

.cc-bubs-ultimate .cc-tocMedia img{
  width: 100%;
  height: auto;
  max-height: 260px;      /* ajuste si tu veux plus grand */
  object-fit: contain;       /* cover = look “hero”, contain = pas de crop */
  border-radius: 14px;
}

/* Mobile : on empile (sommaire puis image) */
@media (max-width: 860px){
  .cc-bubs-ultimate .cc-tocLayout{
    grid-template-columns: 1fr;
  }
  .cc-bubs-ultimate .cc-tocMedia img{
    max-height: 220px;
  }
}

.cc-card-images{
  display: flex;
  gap: 12px;
  width: 100%;
  overflow: hidden;              /* sécurité anti-débordement */
}

.cc-card-images > *{
  flex: 1 1 0;                    /* autorise le shrink */
  min-width: 0;                   /* TRÈS IMPORTANT */
}

.cc-card-images img{
  width: 100% !important;         /* force l'adaptation */
  max-width: 100% !important;     /* bloque le dépassement */
  height: auto;
  display: block;
}/* End custom CSS */