/* =============================================================
   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%;
}