/* Sous-menu : le texte grossit, le fond assombri reste à sa place */
.wp-block-navigation .wp-block-navigation__submenu-container {
  overflow: hidden; /* coupe tout débordement du fond assombri */
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  overflow: hidden; /* le fond de l'élément ne dépasse pas */
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  display: inline-block; /* nécessaire pour que transform fonctionne */
  transition: transform 0.25s ease;
  transform-origin: left center; /* grossit vers la droite, ne sort pas par la gauche */
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
  transform: scale(1.1);
}
/*Surlignage, modifier : #ff9a2e pour changer */
::selection {
  background: #fcbf49;
  color: #000;
}
::-moz-selection {
  background: #ff9a2e;
  color: #000;
}

/* Effet Disparition du Header en Scroll */
.site-header {
    transition: opacity 0.8s ease !important;
}
.site-header.header-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100%;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
/* Video en bannière avec bandeau */
.video-banner-wrapper {
  position: relative; /* indispensable : sert de repère au bandeau */
}
.video-banner-clip {
  position: relative;
  box-sizing: border-box;
}

.banner-video {
  width: 100%;
  height: 710px; /* <- ajuste uniquement cette valeur pour la hauteur */
  overflow: hidden;
}

.banner-video .wp-block-embed__wrapper,
.banner-video iframe {
  width: 100% !important;
  height: 100% !important;
}

.banner-video iframe {
  pointer-events: none; /* clic désactivé sur toute la vidéo */
}

.video-banner-overlay {
  --banner-top: 45%;   /* <- position verticale : 0% = haut, 50% = milieu, 100% = bas */
  position: absolute;
  top: var(--banner-top);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  padding: 1.5rem 2rem;
  width: max-content;   /* la largeur suit celle du texte sur grand écran */
  max-width: 90%;       /* plafond : le texte passe à la ligne au-delà */
  text-align: center;
  box-sizing: border-box;
  overflow-wrap: break-word; /* coupe les mots trop longs si besoin */
  word-break: break-word;
}

.video-banner-overlay * {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.video-banner-overlay img {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 0.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  .video-banner-overlay {
    width: 90%;            /* largeur fixe : le texte reste dans le bandeau */
    max-width: 90%;
    padding: 1rem;
  }

  .video-banner-overlay p,
  .video-banner-overlay h1,
  .video-banner-overlay h2,
  .video-banner-overlay h3 {
    font-size: clamp(1rem, 4vw, 1.4rem) !important; /* texte plus petit */
    line-height: 1.3;
    margin: 0;
  }

  .video-banner-overlay img {
    max-width: 140px;
  }
}

/* La carte : colonne flex */
li.wc-block-product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* L'élément intermédiaire (souvent un <a>) : doit AUSSI être
   une colonne flex et s'étirer sur toute la hauteur de la carte */
li.wc-block-product > a,
li.wc-block-product > .wc-block-grid__product-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;   /* c'est LA ligne qui manquait */
    min-height: 0;
}

/* L'image garde sa taille fixe */
li.wc-block-product .wc-block-components-product-image {
    flex: 0 0 auto;
}

/* Le bandeau remplit tout l'espace restant */
li.wc-block-product .wp-block-group {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease;
}

li.wc-block-product .wp-block-post-title {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 10px 0;
}

/* Hover */
li.wc-block-product {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}
li.wc-block-product:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
li.wc-block-product:hover .wp-block-group {
    background-color: #fcbf49;
}	
/* Bannières cliquables */
.banner-festival,
.banner-collectif,
.banner-label,
.banner-fabrique {
    position: relative !important;
    cursor: pointer !important;
    transition: transform 0.25s ease;
}

.banner-festival::after,
.banner-collectif::after,
.banner-label::after,
.banner-fabrique::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.banner-festival:hover::after,
.banner-collectif:hover::after,
.banner-label:hover::after,
.banner-fabrique:hover::after {
    border-color: #000;
}
/* Overlay coloré + texte centré au survol */
.banner-festival::before,
.banner-collectif::before,
.banner-label::before,
.banner-fabrique::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: rgba(0,0, 0, 0.80); /* couleur + opacité de la surimpression */
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Texte affiché pour chaque bannière */
.banner-festival::before  { content: "LE FESTIVAL"; }
.banner-collectif::before { content: "LE COLLECTIF D'ARTISTES"; }
.banner-label::before     { content: "LE LABEL"; }
.banner-fabrique::before  { content: "LE LIEU DE FABRIQUE"; }

.banner-festival:hover::before,
.banner-collectif:hover::before,
.banner-label:hover::before,
.banner-fabrique:hover::before{
font-family: "Madani Arabic DEMO", sans-serif; /* remplace par la police trouvée */
    opacity: 1;
}
/* Effet rapetissant au survol */
.banner-festival:hover,
.banner-collectif:hover,
.banner-label:hover,
.banner-fabrique:hover {
    transform: scale(0.95);
}
/* Conteneur : l'image qui grossit est rognée par le cadre */
.wp-block-image,
.wp-caption,
.wp-block-gallery .blocks-gallery-item {
  position: relative;
  overflow: hidden;
}
/* ⬇ Le rayon se règle UNIQUEMENT ici (0px, 20px, 25px...) */
.wp-block-image.photo-artistes {
  --bloc-radius: 20px;
}

/* Conteneur : le bloc entier rapetisse au survol */
.wp-block-image.photo-artistes {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* évite les coins carrés pendant l'animation (Safari) */
  border-radius: var(--bloc-radius);
  transition: transform 0.3s ease;
}

/* L'image suit le même rayon */
.wp-block-image.photo-artistes img {
  border-radius: var(--bloc-radius) !important;
}

/* Effet rapetissant sur tout le bloc au survol */
.wp-block-image.photo-artistes:hover {
  transform: scale(0.95);
}

/* Bandeau : recouvre toute l'image, texte centré au milieu */
.wp-block-image.photo-artistes figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 12px;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  font-family: "Madani Arabic DEMO", sans-serif;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--bloc-radius);
}

/* Bandeau visible au survol */
.wp-block-image.photo-artistes:hover figcaption {
  opacity: 1;
}
/* ==========================================================
   AGENDA KLAM — RÉGLAGES PRINCIPAUX
   ========================================================== */

.klam-agenda-date {

    /* -------- RÉGLAGES FACILES À MODIFIER -------- */

    --carre-taille: 64px;       /* 1. Taille du carré */
    --jour-taille: 27px;        /* 2. Taille du chiffre */
    --mois-taille: 16px;        /* 3. Taille du mois */
    --espace-mois: 4px;         /* 4. Espace entre jour et mois */


    /* -------- CARRÉ ORANGE -------- */

    flex: 0 0 var(--carre-taille) !important;
    width: var(--carre-taille) !important;
    height: var(--carre-taille) !important;

    background: #ffffff !important;
    border: 2px solid #FF6900 !important;

    color: #000000 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--espace-mois) !important;

    text-align: center !important;
    box-sizing: border-box !important;
}


/* Supprime les <br> ajoutés automatiquement par WordPress */
.klam-agenda-date br,
.klam-agenda-event br {
    display: none !important;
}


/* ==========================================================
   JOUR — exemple : 17
   ========================================================== */

.klam-agenda-day {

    display: block !important;

    font-size: var(--jour-taille) !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    color: #000000 !important;

    margin: 0 !important;
    transform: none !important;
}


/* ==========================================================
   MOIS — exemple : oct
   ========================================================== */

.klam-agenda-month {

    display: block !important;

    font-size: var(--mois-taille) !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    color: #000000 !important;

    text-transform: lowercase !important;

    margin: 0 !important;
    transform: none !important;
}


/* ==========================================================
   LIGNE COMPLÈTE DE L'ÉVÉNEMENT
   ========================================================== */

.klam-agenda-event {

    display: flex !important;
    align-items: center !important;

    gap: 14px !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    padding: 12px 0 !important;
    margin: 0 !important;

    /* Ligne entre les événements */
    border-bottom: 1px solid #000 !important;
}


/* ==========================================================
   CONTENU À DROITE DU CARRÉ
   ========================================================== */

.klam-agenda-content {

    flex: 1 1 auto !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   TITRE
   ========================================================== */

.klam-agenda-title {

    color: #FF6900 !important;

    font-size: 1.15rem !important;
    font-weight: 700 !important;

    line-height: 1.25 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-wrap: anywhere !important;
}


/* ==========================================================
   LIEU
   ========================================================== */

.klam-agenda-location {

    margin-top: 5px !important;

    font-size: 0.85rem !important;
    line-height: 1.3 !important;

    overflow-wrap: anywhere !important;
}


/* ==========================================================
   PETITE LARGEUR / MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .klam-agenda-event {
        gap: 10px !important;
    }

    .klam-agenda-date {

        --carre-taille: 58px;
        --jour-taille: 24px;
        --mois-taille: 14px;

    }

    .klam-agenda-title {
        font-size: 1.05rem !important;
    }
}
/* ===== Conteneur (groupe vidéo + logo) ===== */
.wrap-MDE, .wrap-SP, .wrap-EM4, .wrap-IE, .wrap-DX,
.wrap-LB3, .wrap-LB4, .wrap-MB, .wrap-FP, .wrap-LAB {
    position: relative !important;
    overflow: hidden !important;
}

/* ===== Hauteur de la vidéo en pixels, une ligne par vidéo ===== */
.wrap-MDE .wp-block-embed__wrapper, .wrap-MDE iframe { height: 710px !important; }
.wrap-SP  .wp-block-embed__wrapper, .wrap-SP  iframe { height: 710px !important; }
.wrap-EM4 .wp-block-embed__wrapper, .wrap-EM4 iframe { height: 710px !important; }
.wrap-IE  .wp-block-embed__wrapper, .wrap-IE  iframe { height: 710px !important; }
.wrap-DX  .wp-block-embed__wrapper, .wrap-DX  iframe { height: 710px !important; }
.wrap-LB3 .wp-block-embed__wrapper, .wrap-LB3 iframe { height: 710px !important; }
.wrap-LB4 .wp-block-embed__wrapper, .wrap-LB4 iframe { height: 710px !important; }
.wrap-MB  .wp-block-embed__wrapper, .wrap-MB  iframe { height: 710px !important; }
.wrap-FP  .wp-block-embed__wrapper, .wrap-FP  iframe { height: 710px !important; }
.wrap-LAB .wp-block-embed__wrapper, .wrap-LAB iframe { height: 710px !important; }

/* ===== Logo : centré, plus grand, visible uniquement au survol ===== */
.wrap-MDE .wp-block-image, .wrap-SP .wp-block-image, .wrap-EM4 .wp-block-image,
.wrap-IE .wp-block-image, .wrap-DX .wp-block-image, .wrap-LB3 .wp-block-image,
.wrap-LB4 .wp-block-image, .wrap-MB .wp-block-image, .wrap-FP .wp-block-image,
.wrap-LAB .wp-block-image {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
    width: 550px !important;      /* taille du logo : à ajuster */
    max-width: 85% !important;
    padding: 0 !important;
    background: none !important;
    box-sizing: border-box;
    text-align: center;
    margin: 0 !important;

    opacity: 0;                    /* caché par défaut */
    pointer-events: none;          /* ne bloque pas les clics sur la vidéo */
    transition: opacity 0.4s ease;
}

/* Apparition au survol du groupe */
.wrap-MDE:hover .wp-block-image, .wrap-SP:hover .wp-block-image, .wrap-EM4:hover .wp-block-image,
.wrap-IE:hover .wp-block-image, .wrap-DX:hover .wp-block-image, .wrap-LB3:hover .wp-block-image,
.wrap-LB4:hover .wp-block-image, .wrap-MB:hover .wp-block-image, .wrap-FP:hover .wp-block-image,
.wrap-LAB:hover .wp-block-image {
    opacity: 1;
}

.wrap-MDE .wp-block-image img, .wrap-SP .wp-block-image img, .wrap-EM4 .wp-block-image img,
.wrap-IE .wp-block-image img, .wrap-DX .wp-block-image img, .wrap-LB3 .wp-block-image img,
.wrap-LB4 .wp-block-image img, .wrap-MB .wp-block-image img, .wrap-FP .wp-block-image img,
.wrap-LAB .wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ===== Conteneur VIDEO AK (groupe vidéo) ===== */
.wrap-video-ak {
    position: relative !important;
    overflow: hidden !important;
    pointer-events: none !important;  /* ni la vidéo ni le bandeau ne sont cliquables */
}

/* Sécurité : force aussi l'iframe, au cas où le lecteur vidéo réactiverait les clics */
.wrap-video-ak iframe {
    pointer-events: none !important;
}

/* ===== Hauteur de la vidéo ===== */
.wrap-video-ak .video-ak .wp-block-embed__wrapper,
.wrap-video-ak .video-ak iframe {
    height: 710px !important;
}

/* ===== Bandeau texte : uniquement le wp-block-group extérieur ===== */
.wrap-video-ak .wp-block-group.text-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
    width: 80% !important;
    max-width: 1000px !important;
    padding: 24px 32px !important;
    border-radius: 20px !important;
    box-sizing: border-box;
    text-align: center;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.65) !important;
}

/* ===== On neutralise TOUS les fonds/positions/marges internes ===== */
.wrap-video-ak .wp-block-group.text-overlay .wp-block-columns,
.wrap-video-ak .wp-block-group.text-overlay .wp-block-column {
    position: static !important;
    background: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== Titre et paragraphe ===== */
.wrap-video-ak .wp-block-group.text-overlay h1,
.wrap-video-ak .wp-block-group.text-overlay h2,
.wrap-video-ak .wp-block-group.text-overlay h3,
.wrap-video-ak .wp-block-group.text-overlay h4,
.wrap-video-ak .wp-block-group.text-overlay p {
    color: #000 !important;
    background: none !important;
    margin: 0 0 8px 0 !important;
}

.wrap-video-ak .wp-block-group.text-overlay p:last-child {
    margin-bottom: 0 !important;
}
.video-banner-overlay .separateur {
  margin: 0 15px; /* ajuste la valeur selon l'espacement voulu */
  opacity: 0.7;
}
/* ===== Fond du lecteur Real3DFlipbook ===== */
.real3dflipbook,
.flipbook-main-wrapper,
.flipbook-container,
.flipbook-bookLayer,
.flipbook-book3d {
    --flipbook-bg: #fcbf49;   /* <- couleur de fond : à changer */
    background: var(--flipbook-bg) !important;
    background-color: var(--flipbook-bg) !important;
}

/* Le canvas du livre doit rester transparent pour laisser voir le fond */
.flipbook-book-webgl canvas {
    background: transparent !important;
}
/* Galerie produit : le conteneur suit les proportions réelles de l'image */
.wc-block-product-gallery-large-image__container,
.wc-block-product-gallery-large-image__wrapper,
.wc-block-product-gallery-large-image__wrapper .wc-block-components-product-image {
    aspect-ratio: auto !important;
    height: auto !important;
}
/* Image produit : supprime le retrait de liste pour l'aligner sur le lecteur Spotify */
.wc-block-product-gallery-large-image__container,
.wc-block-product-gallery-large-image__wrapper {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}
/* Remplace l'icône "Lien" par une note de musique */
.wp-block-social-links .wp-social-link-chain svg {
  display: none;
}

.wp-block-social-links .wp-social-link-chain a::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor; /* reste blanc comme les autres icônes */
  -webkit-mask: url("https://klam-records.net/wp-content/uploads/2026/09/la-musique.png") center / contain no-repeat;
  mask: url("https://klam-records.net/wp-content/uploads/2026/09/la-.wc-block-components-quantity-selector {
  display: flex !important;
  align-items: center;
  width: 130px !important;
  max-width: none !important;
}
.wc-block-components-quantity-selector {
  display: flex;
  align-items: center;
}
/*Sélecteur de quantité Panier*/
html body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  padding: 15px 0 !important;
  padding-inline: 0 !important;
  width: 60px !important;
  min-width: 60px !important;
  overflow: visible !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
  text-indent: 0 !important;
}