/* Terre de Dragons — widgets insérés via TinyMCE (complète css.min.css) */

/* Accordéons (plugin "accordeon") : le 1er titre ouvre / ferme le reste du bloc */
.accordeon{margin:1em 0;border-bottom:1px solid rgba(0,0,0,.15)}
.accordeon-toggle{cursor:pointer;position:relative;padding-right:2em}
.accordeon-toggle::after{content:"+";position:absolute;right:.3em;top:50%;transform:translateY(-50%);font-weight:700}
.accordeon-toggle.open::after{content:"\2013"}
.accordeon-content{display:none;padding-bottom:1em}

/* Onglets de l'en-tête (raccourcis), bureau : même hauteur, alignés en bas, picto à gauche */
@media screen and (min-width: 861px){
  .shortlinks{display:flex;justify-content:center;align-items:flex-end}
  .shortlink{display:flex;align-items:center;box-sizing:border-box;height:76px;padding:8px 20px;border-radius:20px 20px 0 0}
  .shortlink > a{display:flex;align-items:center;gap:10px;text-align:left;font-size:1.1em}
  .shortlink > a > svg{flex:none;margin:0;height:38px}
  .shortlink div{line-height:1.15em}
  .shortlink small{display:inline-block;line-height:1.15em;margin-top:2px}
  /* survol : l'onglet se lève (il s'allonge par le bas : seule la marge basse grandit, le contenu
     garde sa place sous le bord haut), puis prend sa couleur ; en sortie, blanc puis il redescend */
  .shortlink{padding-bottom:8px;
    transition:height .25s ease .15s, padding-bottom .25s ease .15s, box-shadow .25s ease .15s, background-color .2s ease}
  .shortlink a, .shortlink div, .shortlink small{transition:color .2s ease}
  .shortlink svg, .shortlink svg *{transition:fill .2s ease, stroke .2s ease}
  .shortlink:hover{height:92px;padding-bottom:24px;box-shadow:0 -6px 14px rgba(0,0,0,.18);
    transition:height .25s ease, padding-bottom .25s ease, box-shadow .25s ease, background-color .2s ease .15s}
  .shortlink:hover a, .shortlink:hover div, .shortlink:hover small{transition:color .2s ease .15s}
  .shortlink:hover svg, .shortlink:hover svg *{transition:fill .2s ease .15s, stroke .2s ease .15s}
}
@media screen and (min-width: 861px) and (prefers-reduced-motion: reduce){
  .shortlink, .shortlink a, .shortlink div, .shortlink small, .shortlink svg, .shortlink svg *{transition:none}
}
/* l'en-tête s'arrête au bas de l'image : sans cela, l'image (inline) laisse ~4 px vides dessous */
.mediaPrincipal.ordi img, .entete video{display:block}
/* mobile : l'onglet horaires prend toute la largeur, la mention tient sur une ligne */
@media screen and (max-width: 860px){
  .calendrier.shortlink small br{display:none}
}

/* FAQ (bloc article de classe « FAQ », questions = accordéons) — aux couleurs du parc */
#corps .txt.FAQ{max-width:860px!important;margin-left:auto!important;margin-right:auto!important;float:none;display:block}
.txt.FAQ > h2{text-align:center;margin-bottom:20px}
.FAQ .accordeon{background:#fff;border:none;border-radius:20px;margin:0 0 10px;padding:12px 18px 12px 22px;
  box-shadow:0 2px 10px rgba(127,36,28,.08)}
.FAQ .accordeon .accordeon-toggle{display:flex;align-items:center;min-height:28px;margin:0;padding-right:44px;
  font-family:'Montserrat',arial;font-size:1em;font-weight:700;line-height:1.25;text-transform:none;letter-spacing:0;
  color:var(--marron)!important;transition:color .3s}
.FAQ .accordeon .accordeon-toggle::after{content:"";right:0;width:28px;height:28px;border-radius:50%;
  background:var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .3s ease, background-color .3s}
.FAQ .accordeon .accordeon-toggle.open::after{transform:translateY(-50%) rotate(90deg);background-color:var(--marron)}
.FAQ .accordeon .accordeon-toggle:hover, .FAQ .accordeon .accordeon-toggle.open{color:var(--rouge)!important}
.FAQ .accordeon .accordeon-content{padding:8px 44px 4px 0}
.FAQ .accordeon .accordeon-content p{text-align:left}
/* FAQ : tailles fixées (les règles des h3 du site, notamment en mobile, les grossissaient)
   et pas de capitales (lecture plus facile) */
.FAQ .accordeon .accordeon-toggle{font-size:17px!important;text-transform:none!important;line-height:1.25!important}
.FAQ .accordeon .accordeon-content, .FAQ .accordeon .accordeon-content p{font-size:16px}
@media screen and (max-width: 860px){
  #corps .txt.FAQ > h2{font-size:26px!important;line-height:1.1}
  .FAQ .accordeon{padding:10px 12px 10px 16px;border-radius:16px}
  .FAQ .accordeon .accordeon-toggle{font-size:15px!important;padding-right:36px}
  .FAQ .accordeon .accordeon-toggle::after{width:24px;height:24px;background-size:12px}
  .FAQ .accordeon .accordeon-content{padding:6px 0 4px}
  .FAQ .accordeon .accordeon-content, .FAQ .accordeon .accordeon-content p{font-size:15px}
}

/* Bouton « J'achète mes billets » (bloc .achatBillet de l'accueil) : au survol il s'élargit
   des deux côtés (il est centré) ; fond, texte et picto changent de couleur en douceur.
   Le picto est un masque coloré (au lieu d'échanger deux images, ce qui ne s'anime pas). */
.achatBillet h5 a, .achatBillet .bouton a{
  transition:padding .4s cubic-bezier(.25,.8,.35,1), background-color .35s ease, color .35s ease, box-shadow .4s ease}
.achatBillet h5 a:hover, .achatBillet .bouton a:hover{padding:16px 46px;box-shadow:0 5px 14px rgba(0,0,0,.45)}
.achatBillet h5 a::before, .achatBillet .bouton a::before{
  background:var(--marron)!important;
  -webkit-mask:url(/images/billeterie-shortcut.svg) center/contain no-repeat;
          mask:url(/images/billeterie-shortcut.svg) center/contain no-repeat;
  transition:background-color .35s ease}
.achatBillet h5 a:hover::before, .achatBillet .bouton a:hover::before{background:#fff!important}
@media (prefers-reduced-motion: reduce){
  .achatBillet h5 a, .achatBillet .bouton a, .achatBillet h5 a::before, .achatBillet .bouton a::before{transition:none}
}