/* -------------------------------------------------------------
   0. Karla auto-hebergee
   -------------------------------------------------------------
   Karla etait chargee depuis les serveurs de Google a chaque visite,
   ce qui transmettait l'adresse IP des visiteurs a Google.
   Une seule graisse a ete fournie (400). Les graisses 600 et 700,
   utilisees par le theme, seront donc SYNTHETISEES par le navigateur
   (gras artificiel, un peu plus epais et moins net que le vrai gras).
   Pour un rendu exact, ajoutez karla-v33-latin-700.woff2 dans
   assets/fonts/ et decommentez le second bloc ci-dessous.
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-v33-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-v33-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/


/* =============================================================
   DREAMS AETERNA — correctifs responsive
   A charger APRES master.css.
   Ne modifie rien sur ordinateur : tout est sous media query
   ou ne concerne que les ecrans tactiles.
   ============================================================= */


/* -------------------------------------------------------------
   1. Fonds figes sur ecrans tactiles
   -------------------------------------------------------------
   background-attachment: fixed n'est pas supporte par Safari iOS.
   L'image s'affiche a une echelle erronee et saute pendant le
   defilement. On garde l'effet sur ordinateur (souris/pave) et on
   bascule en fond normal sur tactile, ou il est de toute facon
   defaillant. La detection porte sur le type de pointeur, pas sur
   la largeur : un ordinateur en petite fenetre garde l'effet.
   ------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  html,
  body,
  .merch-bg,
  .shopHomePage,
  .breadcrumb,
  .parallax,
  [data-stellar-background-ratio] {
    background-attachment: scroll !important;
    /* le fond couvre correctement sans l'ancrage fixe */
    background-size: cover !important;
    background-position: center center !important;
  }
}


/* -------------------------------------------------------------
   2. Cibles tactiles
   -------------------------------------------------------------
   Sous 32 px, un lien est difficile a atteindre au doigt (Apple
   et Google recommandent 44 px). On agrandit la zone cliquable
   sans changer la taille visuelle de l'icone : le padding etend
   la surface, le dessin reste identique.
   ------------------------------------------------------------- */
@media (pointer: coarse) {

  /* Icones sociales et boutons ronds */
  .icon-button,
  .footer-social a,
  .social-icons a,
  .header-icons a,
  .header-icons .cart-trigger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Ouverture du menu : cible confortable */
  .open-menu,
  .close-menu {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Commandes du lecteur audio */
  .jplayerButton,
  .hide-player-button,
  .jp-play,
  .jp-pause,
  .jp-mute,
  .jp-unmute {
    min-width: 44px;
    min-height: 44px;
  }

  /* Entrees de menu : hauteur de ligne suffisante pour le doigt */
  .main-menu li a,
  .navbar-nav li a,
  nav ul li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Fermeture du panier */
  .da-cart-x {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}


/* -------------------------------------------------------------
   3. Lisibilite du texte sur petit ecran
   -------------------------------------------------------------
   En dessous de 12 px le texte devient penible a lire sur telephone,
   et iOS declenche un zoom automatique sur les champs de formulaire
   dont la police est inferieure a 16 px.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Plancher de lisibilite pour le texte courant */
  p, li, td, dd, dt,
  .copyright p,
  .footer p,
  small {
    font-size: max(1em, 13px);
  }

  /* Mentions et bas de page : jamais sous 12 px.
     Les liens etaient omis dans une premiere version : ils portent
     l'essentiel du texte concerne (mentions, "Go Top"). */
  .copyright,
  .copyright a,
  .copyright p,
  footer p,
  footer a,
  footer li,
  .go-top,
  .goTop,
  .goTop a,
  .copyFooter,
  .copyFooter a,
  .footer-menu a,
  .bottom-menu a,
  .list-albums .name p,
  .list-feature .name p {
    font-size: max(1em, 12px) !important;
  }

  /* Retour en haut de page : cible atteignable au doigt */
  .go-top,
  .goTop a,
  a[href="#top"],
  a[href="#home"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Plancher general : plus aucun texte sous 12 px sur telephone.
     Regle balayante volontaire, plus fiable que d'enumerer chaque
     classe du theme. Le widget Bandsintown (agenda des concerts) est
     exclu : c'est du code tiers, y toucher casserait sa mise en page. */
  body :not(script):not(style) {
    font-size: max(1em, 12px);
  }
  [class*="bit-"],
  [class*="bit-"] *,
  [id*="bit-"],
  [id*="bit-"] * {
    font-size: revert !important;
  }

  /* Empeche le zoom automatique d'iOS a la saisie */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}


/* -------------------------------------------------------------
   4. Garde-fous generaux sur petit ecran
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Aucun media ne depasse de son conteneur */
  img, video, iframe, table {
    max-width: 100%;
  }
  img, video {
    height: auto;
  }

  /* Les mots tres longs (URL, noms de fichiers) ne forcent plus
     un defilement horizontal */
  p, li, td, h1, h2, h3, h4, h5, h6, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Les tableaux larges defilent dans leur cadre plutot que
     d'elargir toute la page */
  .table-responsive,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Les videos integrees gardent leur proportion */
  .fluid-width-video-wrapper,
  .video-wrapper {
    max-width: 100%;
  }
}


/* -------------------------------------------------------------
   5. Confort d'usage
   ------------------------------------------------------------- */

/* Respect du reglage systeme "reduire les animations" */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus clavier visible : indispensable pour la navigation sans souris */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #be1e2d;
  outline-offset: 2px;
}

/* La video de fond du hero ne doit jamais deborder */
.hero-bg-video {
  max-width: 100%;
}


/* -------------------------------------------------------------
   6. Video integree (.video-container)
   -------------------------------------------------------------
   Cette classe etait utilisee dans index.html sans qu'aucune regle
   ne soit definie nulle part : l'iframe restait a sa taille par
   defaut (300x150) au lieu de s'adapter. Proportion 16/9 conservee
   a toutes les largeurs.
   ------------------------------------------------------------- */
.video-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Navigateurs anciens sans aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .video-container { height: 0; padding-bottom: 56.25%; }
}


/* -------------------------------------------------------------
   7. Volet du panier : alignement des options de paiement
   -------------------------------------------------------------
   Les regles de mise en page du theme (label en bloc, texte
   justifie, largeurs heritees) decalaient les libelles vers la
   droite. On isole le composant du reste du CSS du site.
   ------------------------------------------------------------- */
.da-cart,
.da-cart * {
  text-align: left !important;
  float: none !important;
  text-transform: none;
}
.da-cart .da-radio {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.da-cart .da-radio label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #e0e0e0 !important;
  background: #141414;
  border: 1px solid #2a2a2a;
  cursor: pointer;
}
.da-cart .da-radio label:hover { border-color: #be1e2d; }
.da-cart .da-radio input[type="radio"] {
  appearance: auto;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  accent-color: #be1e2d;
}
/* Pictogramme devant chaque moyen de paiement */
.da-cart .da-radio label .da-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 0.85;
}
.da-cart .da-f label {
  display: block !important;
  text-align: left !important;
  width: auto !important;
}
.da-cart h3, .da-cart .da-title { text-align: left !important; }


/* Lien vers la fiche produit et les avis (page shopSingle) */
.btn-reviews {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .5px;
  color: #bbb;
  text-decoration: none;
  padding: 7px;
  border: 1px solid #333;
}
.btn-reviews:hover { color: #fff; border-color: #be1e2d; }


/* -------------------------------------------------------------
   8. Apparition progressive des sections au defilement
   -------------------------------------------------------------
   Remplace, sur ecran tactile, le dynamisme perdu avec les fonds
   figes. Chaque section apparait une fois, en douceur, quand elle
   entre dans l'ecran. Aucun effet sur ordinateur (les fonds figes
   y sont conserves), et rien ne se declenche si l'utilisateur a
   demande moins d'animations dans les reglages de son systeme.
   ------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  @media (prefers-reduced-motion: no-preference) {
    .da-reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
      will-change: opacity, transform;
    }
    .da-reveal.da-seen {
      opacity: 1;
      transform: none;
    }
  }
}