/* =====================================================================
   KaraokeClip.video — CSS de page adapté au thème VidMov (Play/sans-serif)
   À intégrer via : Apparence > Personnaliser > CSS additionnel
   ou dans le fichier style.css de l'enfant de thème.
   ===================================================================== */

/* Pour temporairement conserver le bouton Dark Mode accessible sur toute la page à supprimer après mise au point des CSS : */
.beeteam368-dark-light-btn {
    position: fixed;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    
    overflow: hidden;
    font-size: 19px;
    border-radius: 0;
    
    -webkit-transform: translateY(-50%);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    z-index: 9999; /* pour qu'il reste au-dessus */
}


/* ══════════════════════════════════════════════════════════════════════
   1. VARIABLES LOCALES — Mappées aux jetons du thème VidMov
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Couleurs primaires → thème */
  --kk-accent:   var(--color__main,    #DE0404);
  --kk-accent2:  var(--color__sub,     #6AC46D);
  --kk-gold:     #d97706;
  --kk-text-feature-box:  #3C3F46;
  --kk-text-warning-box:  #3C3F46;
  --kk-dark-gray:  #3C3F46;

  --accent:   #7c3aed;
  --accent2:  #c026d3;
  --gold:     #d97706;
  --dark:     #0f0520;
  --mid:      #2d1060;
  --light:    #faf8ff;
  --muted:    #7c6a9a;
  --border:   #c4b5fd;


  /* Texte → thème */
  --kk-dark:     var(--color__text-heading, #1C1C1E);
  --kk-mid:      #3C3F46;
  --kk-muted:    var(--color__post-meta, #686868);

  /* Surfaces → thème */
  --kk-light:    var(--color__post-item-wrap-background, #FFFFFF);
  --kk-bg-soft:  var(--color__icon-background, #F0F2F5);

  /* Bordures → thème */
  --kk-border:   var(--color__hr-background, #E9ECF1);

  /* Ombres → thème */
  --kk-shadow:   0px 0px 28px 0px var(--color__global-box-content-shadow, rgba(28,28,30,0.06));
  --kk-shadow-sm: 0px 2px 12px 0px var(--color__global-box-content-shadow, rgba(28,28,30,0.06));

  /* Typographie → thème */
  --kk-font:     var(--font__main, Play, sans-serif);
  --kk-font-hd:  var(--font__heading, Play, sans-serif);

  /* Rayon de bordure → thème (le thème utilise 7px pour les cartes) */
  --kk-radius:   7px;
}

/* Pour centrer les Iframes vidéo : */
/* Utilisé par exemple sur la page de demande de partenariat d'affiliation. */
.video-wrapper {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement (si hauteur définie) */
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   2. BASE DE LA PAGE
   Le thème gère body / html / conteneur principal.
   On adapte uniquement les éléments à l'intérieur du contenu.
   ══════════════════════════════════════════════════════════════════════ */

.entry-content {
  font-family:   var(--kk-font);
  font-size:     var(--font__main-size-rem, 0.88rem);
  line-height:   var(--font__main-line-height, 1.8);
  color:         var(--color__text-main, #383838);
}


/* ══════════════════════════════════════════════════════════════════════
   3. HEADER HÉROÏQUE
   ══════════════════════════════════════════════════════════════════════ */

/* Début des styles spécifiques à la page : "Histoire de la musique populaire des années 1960 à aujourd’hui" */
header .subtitle {
  font-size: 1.05rem;
  color: var(--muted);
  font-style: italic;
  margin-top: .4rem;
}
header .decade-nav {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
header .decade-nav a {
  display: inline-block;
  /* background: var(--dark); */
  background: rgba(222, 4, 4, .38);
  color: #fff;
  padding: .25rem .7rem;
  border-radius: 3px;
  text-decoration: none;
  font-size: .82rem;
  font-family: Arial, sans-serif;
  transition: background .2s;
}
header .decade-nav a:hover { background: var(--kk-accent); }
/* Fin des styles spécifiques à la page : "Histoire de la musique populaire des années 1960 à aujourd’hui" */



/* Début des styles spécifiques à la page : "Demande de partenariat d’affiliation" */
/* ── Crédits visual ── */
.credits-visual {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
  align-items: stretch;
}
.credit-card {
  flex: 1;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1rem .8rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(124,58,237,.07);
}
.credit-card .cc-number {
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--accent);
  line-height: 1.1;
}
.credit-card .cc-label {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .3rem;
  font-style: italic;
  line-height: 1.4;
}
.credit-card.gold { border-color: #fcd34d; border-left: 4px solid var(--gold); }
.credit-card.gold .cc-number { color: var(--gold); }
.credit-card.green { border-color: #86efac; border-left: 4px solid #16a34a; }
.credit-card.green .cc-number { color: #16a34a; }
/* Fin des styles spécifiques à la page : "Demande de partenariat d’affiliation" */


.entry-content header {
  background:    linear-gradient(135deg, #1C1C1E 0%, #2a2a2a 50%, #383838 100%);
  color:         #fff;
  border-radius: var(--kk-radius);
  padding:       2.5rem 2rem 2rem;
  margin-bottom: 2rem;
  position:      relative;
  overflow:      hidden;
}

.entry-content header::before {
  content:       '';
  position:      absolute;
  top:           -50%;
  right:         -10%;
  width:         400px;
  height:        400px;
  background:    radial-gradient(circle, rgba(222,4,4,0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* Badge "Ouverture officielle" */
.entry-content header .hero-badge {
  margin-right: 30px; /* pour appliquer une marge entre les deux badges */
  display:         inline-block;
  background:      var(--kk-accent);
  color:           #fff;
  font-size:       .78rem;
  padding:         .25rem .8rem;
  border-radius:   20px;
  font-family:     var(--kk-font);
  font-weight:     var(--font__button-weight, bold);
  letter-spacing:  1px;
  text-transform:  uppercase;
  margin-bottom:   .8rem;
}

/* H1 dans le header — on annule le style thème puis on redéfinit */
.entry-content header h1 {
  font-size:     var(--font__h1-single-size-rem, 2.38rem);
  line-height:   1.15;
  letter-spacing: -.5px;
  margin-bottom: .5rem;
  color:         #fff;
  border:        none;
  padding:       0;
  font-family:   var(--kk-font-hd);
  font-weight:   var(--font__heading-weight, bold);
}
.entry-content header h1::before { display: none; }
.entry-content header h1 span    { color: #fca5a5; }

.entry-content header .tagline {
  font-size:     1.05rem;
  color:         #fca5a5;
  font-style:    italic;
  margin-bottom: 1.2rem;
  font-family:   var(--kk-font);
}

.entry-content header .launch-badge {
  margin-bottom: 7px;
  display:      inline-flex;
  align-items:  center;
  gap:          .5rem;
  background:   rgba(255,255,255,.1);
  border:       1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  padding:      .4rem .9rem;
  font-size:    .88rem;
  color:        #fecaca;
  font-family:  var(--kk-font);
}

/* Navigation des guides dans le header */
.entry-content header .site-nav {
  margin-top: 1.2rem;
  display:    flex;
  flex-wrap:  wrap;
  gap:        .4rem;
}
.entry-content header .site-nav span {
  font-size:   .75rem;
  color:       #fca5a5;
  font-family: var(--kk-font);
  padding:     .25rem 0;
}
.entry-content header .site-nav a {
  display:       inline-block;
  background:    rgba(222,4,4,.38);
  color:         #fecaca;
  padding:       .22rem .65rem;
  border-radius: 3px;
  text-decoration: none;
  font-size:     .78rem;
  font-family:   var(--kk-font);
  border:        1px solid rgba(255,255,255,.2);
  transition:    background-color .2s, color .2s;
}
.entry-content header .site-nav a:hover {
  background: var(--kk-accent);
  color:      #fff;
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════════════
   4. INFOBOX (aside flottant)
   ══════════════════════════════════════════════════════════════════════ */

.infobox {
  float:         right;
  clear:         right;
  margin:        0 0 1.5rem 2rem;
  width:         535px;
  background:    var(--kk-light);
  border:        1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  font-size:     .88rem;
  overflow:      hidden;
  box-shadow:    var(--kk-shadow-sm);
  font-family:   var(--kk-font);
}

.infobox-title {
  background:  linear-gradient(135deg, var(--kk-dark), var(--kk-mid));
  color:       #fff;
  text-align:  center;
  padding:     .6rem .75rem;
  font-weight: var(--font__heading-weight, bold);
  font-size:   .95rem;
  font-family: var(--kk-font-hd);
}

/* Reset du style thème sur les tables à l'intérieur de l'infobox */
.infobox table {
  width:           100%;
  border-collapse: collapse;
  margin:          0;
}
.infobox table thead,
.infobox table tfoot          { background-color: transparent; }
.infobox table tbody > tr:nth-child(even) { background-color: transparent; }
.infobox table tbody tr > *,
.infobox table thead tr > *,
.infobox table tfoot tr > * {
  padding:       .38rem .65rem;
  border:        none;
  border-bottom: 1px solid var(--kk-bg-soft);
}
/* Première cellule de chaque ligne : */
.infobox td:first-child {
  font-weight: var(--font__heading-weight, bold);
  color:       var(--kk-mid);
  white-space: nowrap;
  font-size:   .82rem;
}

/* Toutes les cellules sauf la première : */
.infobox td:not(:first-child) {
    color:  var(--kk-dark-gray);
}

.infobox a              { color: var(--kk-accent); text-decoration: none; }
.infobox a:hover        { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════════
   5. SOMMAIRE (nav.toc)
   ══════════════════════════════════════════════════════════════════════ */

nav.toc {
  background:    var(--kk-light);
  border:        1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  padding:       1rem 1.4rem;
  margin-bottom: 2rem;
  display:       inline-block;
  min-width:     292px;
  max-width:     520px;
  box-shadow:    var(--kk-shadow-sm);
  font-family:   var(--kk-font);
}

nav.toc h2 {
  font-size:   var(--font__h5-font-size-rem, 1rem);
  margin:      0 0 .6rem;
  color:       var(--kk-dark);
  border:      none;
  padding:     0;
  font-family: var(--kk-font-hd);
  font-weight: var(--font__heading-weight, bold);
}
nav.toc h2::before { display: none; }

nav.toc ol { padding-left: 1.3rem; margin: 0; }
nav.toc li { margin: .28rem 0; }
nav.toc a  {
  color:           var(--kk-accent);
  text-decoration: none;
  font-size:       .92rem;
}
nav.toc a:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════════
   6. TITRES (h2, h3, h4) dans les sections article
   ══════════════════════════════════════════════════════════════════════ */

/* H2 — identique au thème mais avec la barre colorée thème */
.entry-content article h2,
.entry-content section h2,
.table-section h2 {
  font-size:   var(--font__h2-font-size-rem, 1.42rem);
  color: var(--color__main, #DE0404);
  border-bottom: 2px solid var(--kk-border);
  padding-bottom: .35rem;
  margin:      3rem 0 1rem;
  font-family: var(--kk-font-hd);
  font-weight: var(--font__heading-weight, bold);
  letter-spacing: var(--font__heading-letter-spacing, 0);
}

/* Barre verticale colorée devant les H2 */
.entry-content article h2::before,
.entry-content section h2::before,
.table-section h2::before {
  content:        '';
  display:        inline-block;
  width:          5px;
  height:         1.4em;
  background:     var(--kk-accent);
  border-radius:  3px;
  margin-right:   .6rem;
  vertical-align: middle;
}

/* H3 */
.entry-content article h3,
.entry-content section h3 {
  font-size:   var(--font__h3-font-size-rem, 1.27rem);
  color: var(--color__main, #DE0404);
  margin:      1.8rem 0 .6rem;
  font-family: var(--kk-font-hd);
  font-weight: var(--font__heading-weight, bold);
}

/* H4 */
.entry-content article h4,
.entry-content section h4 {
  font-size:   var(--font__h4-font-size-rem, 1.13rem);
  color: var(--color__main, #DE0404);
  margin:      1.4rem 0 .4rem;
  font-family: var(--kk-font-hd);
  font-weight: var(--font__heading-weight, bold);
}


/* ══════════════════════════════════════════════════════════════════════
   7. PARAGRAPHES, TEXTE COURANT
   ══════════════════════════════════════════════════════════════════════ */

.entry-content article p,
.entry-content section p {
  margin-bottom: 1.1rem;
  text-align:    justify;
  font-family:   var(--kk-font);
  font-size:     var(--font__main-size-rem, 0.88rem);
  line-height:   var(--font__main-line-height, 1.8);
  color:         var(--color__text-main, #383838);
}

.entry-content article strong,
.entry-content section strong { 
    color : var(--color__text-main, #383838);
}

/* Liens internes et externes dans l'article */
a.ilink {
  color:           var(--kk-accent);
  text-decoration: none;
  border-bottom:   1px dotted var(--kk-accent);
  font-weight:     var(--font__heading-weight, bold);
}
a.ilink:hover {
  background:      var(--kk-bg-soft);
  text-decoration: none;
}
a.ext-link {
  color:       var(--kk-accent);
  font-weight: var(--font__heading-weight, bold);
}


/* ══════════════════════════════════════════════════════════════════════
   8. LISTES (ul, ol, li)
   ══════════════════════════════════════════════════════════════════════ */

.entry-content article ul,
.entry-content article ol,
.entry-content section ul,
.entry-content section ol {
  margin:      .5rem 0 1.1rem 1.5rem;
  padding:     0;
  font-family: var(--kk-font);
  font-size:   var(--font__main-size-rem, 0.88rem);
  line-height: var(--font__main-line-height, 1.8);
  color:       var(--color__text-main, #383838);
  list-style:  disc;
}
.entry-content article ol,
.entry-content section ol { list-style: decimal; }

.entry-content article li,
.entry-content section li { margin: .35rem 0; }


/* ══════════════════════════════════════════════════════════════════════
   9. CITATIONS (blockquote)
   On annule le style lourd du thème (icône quote, min-height, etc.)
   ══════════════════════════════════════════════════════════════════════ */

.entry-content article blockquote,
.entry-content section blockquote {
  border-left:   4px solid var(--kk-accent);
  border-right:  none;
  border-top:    none;
  border-bottom: none;
  margin:        1.8rem 0;
  padding:       .85rem 1.1rem .85rem 1.4rem;
  background:    var(--kk-bg-soft);
  font-style:    italic;
  color:         var(--color__text-main, #383838);
  border-radius: 0 var(--kk-radius) var(--kk-radius) 0;
  /* Annulation des styles thème */
  min-height:    0;
  box-shadow:    none;
  font-size:     var(--font__main-size-rem, 0.88rem);
  font-family:   var(--kk-font);
}

/* Suppression de l'icône guillemet ajoutée par le thème */
.entry-content article blockquote::before,
.entry-content section blockquote::before { display: none; }

.entry-content article blockquote p,
.entry-content section blockquote p {
  margin:     0;
  text-align: left;
  color :     var(--kk-dark-gray, #3C3F46);
}


/* ══════════════════════════════════════════════════════════════════════
   10. FEATURE BOX (encadrés bleu/rouge)
   ══════════════════════════════════════════════════════════════════════ */

.feature-box {
  background:    var(--kk-light);
  border:        1px solid var(--kk-border);
  border-left:   5px solid var(--kk-accent);
  border-radius: var(--kk-radius);
  padding:       1.2rem 1.4rem;
  margin:        1.5rem 0;
  box-shadow:    0 2px 10px var(--color__global-box-content-shadow, rgba(28,28,30,0.06));
  font-family:   var(--kk-font);
}

.feature-box h4 {
  margin:      0 0 .5rem;
  font-style:  normal;
  color:       var(--kk-dark);
  font-size:   var(--font__h4-font-size-rem, 1.13rem);
  font-family: var(--kk-font-hd);
  font-weight: var(--font__heading-weight, bold);
}
.feature-box p,
.feature-box ul { margin: 0; font-size: .93rem; }
.feature-box a  { color: var(--kk-accent); font-weight: bold; }

.feature-box p { color: var(--kk-dark) !important; }
.feature-box p strong { color: var(--kk-dark) !important; }

/* ══════════════════════════════════════════════════════════════════════
   11. HIGHLIGHT BOX (encadrés gris clair)
   ══════════════════════════════════════════════════════════════════════ */

.highlight-box {
  background:    var(--kk-bg-soft);
  border:        1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  padding:       1.2rem 1.4rem;
  margin:        1.5rem 0;
  font-family:   var(--kk-font);
  color :        var(--kk-dark-gray, #3C3F46);
}

.highlight-box h4 {
  color:       var(--kk-mid);
  margin:      0 0 .5rem;
  font-size:   var(--font__h4-font-size-rem, 1.13rem);
  font-family: var(--kk-font-hd);
  font-weight: var(--font__heading-weight, bold);
}
.highlight-box p,
.highlight-box ul { 
	font-size: .93rem; 
    /*color :    var(--kk-dark-gray);*/
	color :     var(--kk-dark-gray) !important;
}

.highlight-box p strong,
.highlight-box ul strong { 
	color :     var(--kk-dark-gray) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   12. WARNING BOX (encadrés jaune/conseil)
   ══════════════════════════════════════════════════════════════════════ */

.warning-box {
  background:    #fffbeb;
  border:        1px solid #fcd34d;
  border-left:   5px solid var(--kk-gold);
  border-radius: var(--kk-radius);
  padding:       1rem 1.2rem;
  margin:        1.2rem 0;
  font-size:     .92rem;
  font-family:   var(--kk-font);
  color:         var(--kk-text-warning-box, #3C3F46);
}

.warning-box strong {
  color:         var(--color__main) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   13. ACCORDÉON CSS (details / summary)
   ══════════════════════════════════════════════════════════════════════ */

.entry-content details {
  background:    var(--kk-light);
  border:        1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  margin:        .8rem 0;
  overflow:      hidden;
  font-family:   var(--kk-font);
  display:       block;
}

.entry-content summary {
  cursor:        pointer;
  padding:       .85rem 1.1rem;
  font-weight:   var(--font__heading-weight, bold);
  color:         var(--kk-mid);
  background:    var(--kk-bg-soft);
  list-style:    none;
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  font-size:     .95rem;
  font-family:   var(--kk-font-hd);
}
.entry-content summary::-webkit-details-marker { display: none; }
.entry-content summary::after {
  content:     '▼';
  margin-left: auto;
  font-size:   .7rem;
  color:       var(--kk-accent);
  transition:  transform .2s;
}
.entry-content details[open] summary::after { transform: rotate(180deg); }

.entry-content details .accordion-content {
  padding:     1rem 1.2rem;
  font-size:   .92rem;
  border-top:  1px solid var(--kk-border);
  font-family: var(--kk-font);
  /*color:       var(--color__text-main, #383838);*/
  color:       var(--kk-dark-gray, #3C3F46) !important;
}

/* Ceci vient en complément de l'ouverture douce présente en JS : */
.accordion-content {
  overflow: hidden;
}


.entry-content details .accordion-content ul { 
	color :    var(--kk-dark-gray, #3C3F46);
	margin-top: .4rem;
}
.entry-content details .accordion-content li { 
	color :    var(--kk-dark-gray, #3C3F46);
	margin: .4rem 0;
}
.entry-content details .accordion-content li strong { 
	color :    var(--kk-dark-gray, #3C3F46);
}

.entry-content details .accordion-content p { 
	color :    var(--kk-dark-gray, #3C3F46);
}

.entry-content details .accordion-content p strong { 
	color :    var(--kk-dark-gray, #3C3F46);
}
/* ══════════════════════════════════════════════════════════════════════
   14. STAT GRID (chiffres clés)
   ══════════════════════════════════════════════════════════════════════ */

.stat-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap:                   1rem;
  margin:                1.5rem 0;
}

.stat-card {
  background:    var(--kk-light);
  border:        1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  padding:       1.1rem .8rem;
  text-align:    center;
  box-shadow:    0 2px 8px var(--color__global-box-content-shadow, rgba(28,28,30,0.06));
  font-family:   var(--kk-font);
}

.stat-card .number {
  font-size:   2rem;
  font-weight: var(--font__heading-weight, bold);
  color:       var(--kk-accent);
  line-height: 1.1;
  font-family: var(--kk-font-hd);
}

.stat-card .label {
  font-size:   .78rem;
  color:       var(--kk-muted);
  margin-top:  .3rem;
  font-style:  italic;
}


/* ══════════════════════════════════════════════════════════════════════
   15. STEPS (étapes numérotées)
   ══════════════════════════════════════════════════════════════════════ */

.steps   { margin: 1rem 0 1.5rem; }

.step {
  display:     flex;
  gap:         1rem;
  margin:      .7rem 0;
  align-items: flex-start;
}

.step-num {
  min-width:       32px;
  height:          32px;
  background:      var(--kk-accent);
  color:           #fff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     var(--font__heading-weight, bold);
  font-size:       .9rem;
  flex-shrink:     0;
  margin-top:      .15rem;
  font-family:     var(--kk-font-hd);
}

.step-content         { font-size: .93rem; font-family: var(--kk-font); }
.step-content strong  { color: var(--kk-dark); }


/* ══════════════════════════════════════════════════════════════════════
   16. FIELD GROUP (fiches profils)
   ══════════════════════════════════════════════════════════════════════ */

.field-group {
  background:    var(--kk-light);
  border:        1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  margin:        1rem 0;
  overflow:      hidden;
  font-family:   var(--kk-font);
}

.field-group-header {
  background:    var(--kk-bg-soft);
  padding:       .7rem 1rem;
  font-weight:   var(--font__heading-weight, bold);
  color:         var(--kk-mid);
  border-bottom: 1px solid var(--kk-border);
  font-size:     .95rem;
  font-family:   var(--kk-font-hd);
}

.field-row {
  display:     flex;
  gap:         .5rem;
  padding:     .5rem 1rem;
  border-bottom: 1px solid var(--kk-bg-soft);
  align-items: flex-start;
}
.field-row:last-child { border-bottom: none; }

.field-icon  { font-size: 1rem; min-width: 22px; }

.field-name {
  font-weight: var(--font__heading-weight, bold);
  color:       var(--kk-dark);
  font-size:   .88rem;
  min-width:   200px;
}

.field-desc {
  font-size: .83rem;
  /* color:     var(--color__text-main, #383838); */
  color :     var(--kk-dark-gray, #3C3F46);
  flex:      1;
}


/* ══════════════════════════════════════════════════════════════════════
   17. TABLEAUX (table.ranking)
   On annule le style thème pour ces tableaux et on applique le rendu page.
   ══════════════════════════════════════════════════════════════════════ */

.table-wrapper         { overflow-x: auto; margin-top: 1rem; }
.table-section         { margin-top: 3.5rem; }

table.ranking {
  width:           100%;
  border-collapse: collapse;
  font-size:       .87rem;
  background:      var(--kk-light);
  border-radius:   var(--kk-radius);
  overflow:        hidden;
  box-shadow:      0 2px 12px var(--color__global-box-content-shadow, rgba(28,28,30,0.06));
  margin:          0;
  font-family:     var(--kk-font);
  border: 1px solid red;
}

table.ranking {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .87rem;
    background: var(--kk-light);
    border: 1px solid red;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px var(--color__global-box-content-shadow, rgba(28,28,30,0.06));
    margin: 0;
    font-family: var(--kk-font);
}

table.ranking thead tr {
  background: var(--kk-dark);
  color:      #fff;
}
table.ranking thead th {
  padding:        .7rem .85rem;
  text-align:     left;
  font-weight:    var(--font__heading-weight, bold);
  letter-spacing: .3px;
  border:         none;
  color:          #fff;
  font-family:    var(--kk-font-hd);
  border-bottom: 1px solid red;
}

table.ranking thead th + th {
  border-left: 1px solid red;
}

table.ranking tbody tr:nth-child(even) { background: var(--kk-bg-soft); }
table.ranking tbody tr:hover           { background: var(--color__hr-background, #E9ECF1); }

table.ranking td {
  padding:       .5rem .85rem;
  border:        none;
  border-bottom: 1px solid var(--kk-border);
  vertical-align: middle;
  font-family:   var(--kk-font);
  /* color:         var(--color__text-main, #383838); */
  color: #000;
}

table.ranking td.rank {
  font-weight: var(--font__heading-weight, bold);
  color:       var(--kk-accent);
  text-align:  center;
  width:       40px;
}

table.ranking tbody td + td {
  border-left: 1px solid red;
}

table.ranking tbody tr:hover td {
  color: var(--color__text-main, #383838);
}

table.ranking td strong {
  color: inherit;
}

table.ranking tbody tr:hover td strong {
  color: var(--color__text-main, #383838);
}
/*
Sauvegarde du CSS original :
table.ranking {
  width:           100%;
  border-collapse: collapse;
  font-size:       .87rem;
  background:      var(--kk-light);
  border-radius:   var(--kk-radius);
  overflow:        hidden;
  box-shadow:      0 2px 12px var(--color__global-box-content-shadow, rgba(28,28,30,0.06));
  margin:          0;
  font-family:     var(--kk-font);
}

table.ranking thead tr {
  background: var(--kk-dark);
  color:      #fff;
}
table.ranking thead th {
  padding:        .7rem .85rem;
  text-align:     left;
  font-weight:    var(--font__heading-weight, bold);
  letter-spacing: .3px;
  border:         none;
  color:          #fff;
  font-family:    var(--kk-font-hd);
}

table.ranking tbody tr:nth-child(even) { background: var(--kk-bg-soft); }
table.ranking tbody tr:hover           { background: var(--color__hr-background, #E9ECF1); }

table.ranking td {
  padding:       .5rem .85rem;
  border:        none;
  border-bottom: 1px solid var(--kk-border);
  vertical-align: middle;
  font-family:   var(--kk-font);
  color:         var(--color__text-main, #383838);
}

table.ranking td.rank {
  font-weight: var(--font__heading-weight, bold);
  color:       var(--kk-accent);
  text-align:  center;
  width:       40px;
}

*/

/* ══════════════════════════════════════════════════════════════════════
   18. BADGES
   ══════════════════════════════════════════════════════════════════════ */

.badge {
  display:       inline-block;
  background:    var(--kk-accent);
  color:         #fff;
  border-radius: 3px;
  font-size:     .7rem;
  padding:       .08rem .32rem;
  vertical-align: middle;
  margin-left:   .3rem;
  font-family:   var(--kk-font);
  font-weight:   var(--font__heading-weight, bold);
}
.badge-gold  { background: var(--kk-gold,   #d97706); }
.badge-green { background: #16a34a; }
.badge-pink  { background: var(--kk-accent2); }


/* ══════════════════════════════════════════════════════════════════════
   19. FOOTER DE L'ARTICLE
   ══════════════════════════════════════════════════════════════════════ */

/* .entry-content footer-section { */
.footer-section {
  margin-top:     5rem;
  border-top:     2px solid var(--kk-border);
  padding-top:    1.2rem;
  padding-bottom: 0;
  font-size:      .82rem;
  color:          var(--color__text-main);
  text-align:     center;
  font-family:    var(--kk-font);
  /* Annulation des éventuels styles thème sur footer */
  background:     transparent;
}
/* .entry-content footer-section a { */
.footer-section a {
  color:           var(--kk-accent);
  text-decoration: none;
}
/* .entry-content footer-section a:hover { */
.footer-section a:hover { 
	text-decoration: underline; 
}


/* ══════════════════════════════════════════════════════════════════════
   20. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .infobox {
    float:  none;
    width:  100%;
    margin: 0 0 1.5rem;
  }

  .entry-content header h1 {
    font-size: var(--font__h1-font-size-rem, 1.6rem);
  }

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

  .field-name { min-width: 140px; }

  nav.toc { min-width: 0; max-width: 100%; }
}

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

  .entry-content header {
    padding: 1.5rem 1.2rem 1.2rem;
  }

  .field-row { flex-direction: column; }

  table.ranking { font-size: .78rem; }
  table.ranking th,
  table.ranking td { padding: .4rem .5rem; }
}    



h2, h3, h4, h5 {
  scroll-margin-top: 500px; /* hauteur du header sticky */
}

html {
  scroll-behavior: smooth;
}
/**/



/* Début des règles pour le formulaire de demande de partenariat affiliation : */
/* ── Conteneur principal ───────────────────────────── */
#wpforms-5326 .wpforms-form {
  font-family: var(--kk-font);
  background: var(--kk-light);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  padding: 2rem;
  box-shadow: var(--kk-shadow);
}

/* ── Labels ────────────────────────────────────────── */
#wpforms-5326 .wpforms-field-label,
#wpforms-5326 .wpforms-field-sublabel {
  color: var(--kk-dark);
  font-family: var(--kk-font-hd);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

#wpforms-5326 .wpforms-field-sublabel {
  color: var(--kk-muted);
  font-size: 0.8em;
  font-weight: 400;
}

/* ── Champs de saisie ──────────────────────────────── */
#wpforms-5326 input[type="text"],
#wpforms-5326 input[type="email"],
#wpforms-5326 input[type="url"],
#wpforms-5326 input[type="number"],
#wpforms-5326 textarea {
  background-color: var(--kk-bg-soft);
  border: 1.5px solid var(--kk-border);
  border-radius: var(--kk-radius);
  color: var(--kk-dark);
  font-family: var(--kk-font);
  font-size: 0.95rem;
  padding: 0.6rem 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

/* Focus */
#wpforms-5326 input[type="text"]:focus,
#wpforms-5326 input[type="email"]:focus,
#wpforms-5326 input[type="url"]:focus,
#wpforms-5326 input[type="number"]:focus,
#wpforms-5326 textarea:focus {
  border-color: var(--kk-accent);
  box-shadow: 0 0 0 3px rgba(222, 4, 4, 0.12);
  outline: none;
  background-color: var(--kk-light);
}

/* ── Erreurs de validation ─────────────────────────── */
#wpforms-5326 input.wpforms-error,
#wpforms-5326 textarea.wpforms-error {
  border-color: var(--kk-accent); /* rouge */
}

#wpforms-5326 label.wpforms-error {
  color: var(--kk-accent);
  font-size: 0.82em;
}

/* ── Indicateur champ obligatoire (*) ──────────────── */
#wpforms-5326 .wpforms-required-label {
  color: var(--kk-accent);
}

/* ── Bouton Envoyer ────────────────────────────────── */
#wpforms-5326 .wpforms-submit {
  background-color: var(--kk-accent);
  color: #fff;
  border: none;
  border-radius: var(--kk-radius);
  font-family: var(--kk-font-hd);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  letter-spacing: 0.03em;
}

#wpforms-5326 .wpforms-submit:hover {
  background-color: var(--kk-accent2); /* vert au survol */
  transform: translateY(-1px);
}

#wpforms-5326 .wpforms-submit:active {
  transform: translateY(0);
}

/* ── Espacement entre les champs ───────────────────── */
#wpforms-5326 .wpforms-field {
  margin-bottom: 1.25rem;
}
/* Fin des règles pour le formulaire de demande de partenariat affiliation. */



/* Début des règles pour le formulaire de la page Contact : */
/* ── Conteneur principal ───────────────────────────── */
#wpforms-4014 .wpforms-form {
  font-family: var(--kk-font);
  background: var(--kk-light);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  padding: 2rem;
  box-shadow: var(--kk-shadow);
}

/* ── Labels ────────────────────────────────────────── */
#wpforms-4014 .wpforms-field-label,
#wpforms-4014 .wpforms-field-sublabel {
  color: var(--kk-dark);
  font-family: var(--kk-font-hd);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

#wpforms-4014 .wpforms-field-sublabel {
  color: var(--kk-muted);
  font-size: 0.8em;
  font-weight: 400;
}

/* ── Champs de saisie ──────────────────────────────── */
#wpforms-4014 input[type="text"],
#wpforms-4014 input[type="email"],
#wpforms-4014 input[type="url"],
#wpforms-4014 input[type="number"],
#wpforms-4014 textarea {
  background-color: var(--kk-bg-soft);
  border: 1.5px solid var(--kk-border);
  border-radius: var(--kk-radius);
  color: var(--kk-dark);
  font-family: var(--kk-font);
  font-size: 0.95rem;
  padding: 0.6rem 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

/* Focus */
#wpforms-4014 input[type="text"]:focus,
#wpforms-4014 input[type="email"]:focus,
#wpforms-4014 input[type="url"]:focus,
#wpforms-4014 input[type="number"]:focus,
#wpforms-4014 textarea:focus {
  border-color: var(--kk-accent);
  box-shadow: 0 0 0 3px rgba(222, 4, 4, 0.12);
  outline: none;
  background-color: var(--kk-light);
}

/* ── Erreurs de validation ─────────────────────────── */
#wpforms-4014 input.wpforms-error,
#wpforms-4014 textarea.wpforms-error {
  border-color: var(--kk-accent);
}

#wpforms-4014 label.wpforms-error {
  color: var(--kk-accent);
  font-size: 0.82em;
}

/* ── Indicateur champ obligatoire (*) ──────────────── */
#wpforms-4014 .wpforms-required-label {
  color: var(--kk-accent);
}

/* ── Bouton Envoyer ────────────────────────────────── */
#wpforms-4014 .wpforms-submit {
  background-color: var(--kk-accent);
  color: #fff;
  border: none;
  border-radius: var(--kk-radius);
  font-family: var(--kk-font-hd);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  letter-spacing: 0.03em;
}

#wpforms-4014 .wpforms-submit:hover {
  background-color: var(--kk-accent2);
  transform: translateY(-1px);
}

#wpforms-4014 .wpforms-submit:active {
  transform: translateY(0);
}

/* ── Espacement entre les champs ───────────────────── */
#wpforms-4014 .wpforms-field {
  margin-bottom: 1.25rem;
}
/* Fin des règles pour le formulaire de la page Contact. */