/* On utilise encore la police Dosis sur les sous-pages NTdM */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;600&family=Source+Sans+Pro:wght@400;600;700&display=swap');

/* Police TPM */
@font-face { font-family: "Es Formal Standard"; src: url("fonts/ESFormal-StandardRegular.otf"); }
@font-face { font-family: "Es Formal Standard"; font-weight: bold; src: url("fonts/ESFormal-StandardBold.otf"); }
@font-face { font-family: "Es Formal Standard"; font-style: italic; src: url("fonts/ESFormal-StandardItalic.otf"); }
@font-face { font-family: "Es Formal Standard"; font-weight: bold; font-style: italic; src: url("fonts/ESFormal-StandardBoldItalic.otf"); }

/* Le marron utilisé sur le site du TPM pour les liens (#9a864a) est trop clair pour du texte,
 * on le remplace par un #7C6C3C */

body {
   font-family: "Es Formal Standard", Arial, sans-serif;
   font-size: 16px;
   font-weight: 300;
   background: #fff;
   color: #000;
   scroll-snap-align: start;
}

html {
   scroll-snap-align: start;
}

strong {
   font-weight: bold;
}

#moteur_wrap {
   max-width: none;
   padding: 0;
}

.mrp-titre a {
   text-align: center;
   font-style: normal;
   font-family: "Es Formal Standard", Arial, sans-serif;
   font-size: .9em;
   padding: 0 .2em;
   border-radius: 999px;
   box-shadow: 4px 4px 4px rgba(0,0,0,.5);
}

.mrp-titre a:hover {
   color: #fff !important;
   background-color: #000;
}

.mrp-titre {
   width: auto;
   margin: 0 auto 1em;
   text-align: center;
}

.mrp-titre, .fiche__titre {
   font-family: "Es Formal Standard", Arial, sans-serif;
   font-weight: bold;
   color: #000;
}

.fiche__titre {
   font-size: 4em;
   line-height: 1;
   margin-bottom: .25em;
}

.fiche__sous-titre {
   font-family: Arial, sans-serif;
   color: #000;
   font-size: 1.25em;
   font-weight: bold;
}

#div_titre_saisons, #div_moteur_boitier {
   background: transparent;
}

#div_titre_saisons {
   text-transform: none;
}

#div_moteur_spo {
   padding: 1em;
}

.reduire #div_moteur_resultat_wrap {
   border: none;
   transition: none;
}

#div_moteur_resultat::after {
   content: "";
   display: table;
   width: calc(100% + 2em);
   height: 2px;
   background: #000;
   margin-left: -1em;
   transform: translateY(1em);
}

.texte_boitier {
   color: #000;
   font-family: "Es Formal Standard", Arial, sans-serif;
   font-size: .9em;
}

a {
   /* font-weight: normal; */
   /* text-decoration: underline; */
   color: #7C6C3C;
}

a:hover {
   background-color: transparent;
   color: inherit;
}

a.c_Spectacle, a.c_Personne, a.c_Organisme {
   transition-duration: .2s;
   transition-property: background-color, color;
   color: #7C6C3C;
}

.cv { color: inherit; }

a.c_Spectacle:hover, a.c_Personne:hover, a.c_Organisme:hover {
   text-decoration: underline;
   color: #000;
}

.bouton_resultat, .bouton_resultat:hover {
    margin-right: .5em;
    color: #000;
    border-radius: 50%;
    border: 1px solid #000;
    line-height: 1.7em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 5 5' fill='none' stroke='currentColor' stroke-width='0.25'><path d='M1,2.5 h3'/></svg>");
}

.closed .bouton_resultat {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 5 5' fill='none' stroke='currentColor' stroke-width='0.25'><path d='M2.5,1 v3 M1,2.5 h3'/></svg>");
}

.onglets__onglet {
   color: #000;
   background: none;
   font-weight: bold;
   padding: .5em .75em;
   margin-right: 0;
}

.onglets__onglet:hover {
   background-color: #7C6C3C;
   color: #fff;
}

.onglets__onglet--on,
.onglets__onglet--on:hover,
.onglets--reprises .onglets__onglet.onglets__onglet--on {
   background: #fff;
   color: #000;
   border: 2px solid #000;
}

.onglets__panneau {
   border: 2px solid #000;
   border-width: 2px 0;
   transform: translateY(-2px);
}

.ligne-festival, .ligne-festival a {
   color: #000 !important;
   text-transform: uppercase;
}

.ligne-festival a {
   background: #000;
   color: #fff !important;
   padding: 0 .1em;
}

.ligne-festival {
   padding-left: 0;
   background: none;
}

.programmation__ligne-festival {
   background: none;
}

.programmation__tag, .programmation__tag-line span {
   text-transform: uppercase;
   color: #000;
   background: #fff;
   border: 1px solid #000;
   font-size: .8em;
}

.titrehisto {
   color: #000;
   font-variant: none;
   font-size: 1em;
}

.c_Titre {
   color: #000;
}

ul.liensM li {
   padding-bottom: .18em;
}

#div_moteur_copyright {
   margin-top: 2em;
   font-style: normal;
   color: inherit;
}

#div_moteur_copyright a, #div_moteur_copyright a:hover {
   color: inherit;
}

#div_moteur_titre_resultat.mrp-resultat-titre {
   background-color: transparent;
   color: #000;
   font-weight: bold;
   border: none;
   font-size: 2em;
   padding: 0;
}

#div_moteur_titre_resultat.mrp-resultat-titre--saison {
   height: 2.93rem;
   line-height: 2.93rem;
   padding: 0;
}

#div_moteur_titre_resultat .c_Normale {
   color: #000;
}

.closed #div_moteur_resultat_wrap {
   border: none;
}

#div_titre_boitier {
   text-align: center;
   padding: 1em 0;
}

.select-sa-mrp, .select-sa-mrp:hover {
   padding: .5em;
   font-weight: bold;
   color: #fff;
   background-color: #000;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50' fill='%23FFFFFF'><polygon points='0,0 100,0 50,50'/></svg>");
}

.btn-recherche-mrp, .btn-recherche-mrp:hover {
   padding: .5em;
   font-weight: bold;
   color: #000;
   background: #fff;
   border-radius: 999px;
   box-shadow: 4px 4px 4px rgba(0,0,0,.5);
   font-family: "Es Formal Standard", Arial, sans-serif;
   font-size: .9em;
}


/* Browser UI */
::-moz-selection {
   background: #000;
}

::selection {
   background: #000;
}

::-webkit-scrollbar-thumb {
   background-color: #000;
   border-color: #8c0000;
}

::-webkit-scrollbar-thumb:window-inactive {
   background-color: #cc8080;
}

html {
   scrollbar-color: #000 #e5e5e5;
}

/* Annulation layout de base LADS */
body {
   display: block;
}

#moteur_wrap {
   display: flex;
   flex-direction: column;
   margin: auto;
}

/* Annulation layout de base */
#div_moteur_gauche {
   float: none;
   border-bottom: medium solid #000;
   margin-bottom: 0;
}

@media (min-width: 59em) {
   #div_moteur_gauche {
      border-left: 3px solid #000;
   }
}

/* Annulation layout de base */
#div_moteur_droite {
   margin-left: 0;
}

#div_moteur_droite {
   padding: 0;
}

.tpm-static-page-padding {
   padding: 0 20px;
}

@media (min-width: 59em) {
   #moteur_wrap {
      flex-direction: row-reverse;
   }

   #div_moteur_gauche {
      flex: 0 0 270px;
      border-bottom: none;
   }

   #div_moteur_droite {
      flex-grow: 1;
   }
}

/* Accueil et sous-pages */

.tpm-homepage-title {
   margin: 1em .5em;
}

.ntdm-static-page h2 {
   text-transform: uppercase;
   font-size: 2em;
}

.tpm-static-page h2 {
   font-size: 4em;
   line-height: 1;
   margin: .25em 0;
}

.ntdm-static-page-links {
   display: grid;
   grid-gap: .5em;
   grid-auto-rows: 20em;
}

@media (min-width: 50em) {
   .tpm-static-page-links {
      grid-template-columns: repeat(2, 1fr);
   }

   .tpm-static-page-link {
      grid-column-end: span 1;
   }
}

@media (min-width: 59em) {
   html, body {
      scroll-snap-type: none;
   }

   .ntdm-static-page-links {
      grid-template-columns: repeat(6, 1fr);
      scroll-snap-type: none;
   }

   .ntdm-static-page-link.-span-2 {
      grid-column-end: span 2;
   }

   .ntdm-static-page-link.-span-3 {
      grid-column-end: span 3;
   }
}

@media (min-width: 75em) {
   .tpm-static-page-links {
      grid-template-columns: repeat(6, 1fr);
   }

   .tpm-static-page-link.-span-2 {
      grid-column-end: span 2;
   }

   .tpm-static-page-link.-span-3 {
      grid-column-end: span 3;
   }
}

/* Page-mère */

.tpm-homepage-link {
   font-size: 4em;
   border: 2px solid black;
   border-width: 2px 2px 2px 0;
   display: block;
   color: black;
   text-align: left;
   padding: 10px;
   transition-duration: .3s;
   line-height: 1;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   background-color: #fff;
}

.tpm-homepage-link:hover {
   border-color: #fff; /* pour que la bordure reste noire après inversion */
   background-color: #fff; /* pour priorité sur a:hover */
   filter: invert(1);
}

.tpm-homepage-link:last-of-type {
   border-right-width: 0;
}

.tpm-homepage-links {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-auto-rows: 15em;
}

@media (min-width: 59em) {
   .tpm-homepage-links {
      grid-auto-rows: 25em;
   }
}

/* Sous-pages TPM */

.tpm-static-page-links {
   display: grid;
   margin-top: 2em;
   grid-gap: 2px;
}

.tpm-static-page-link {
   font-size: 3em;
   display: block;
   color: black;
   text-align: left;
   padding: 10px;
   transition-duration: .3s;
   line-height: 1;
   box-shadow: 0 0 0 2px #000; /* correspond à la valeur de grid-gap, simule des bordures */
}

.tpm-static-page-link:hover {
   color: #fff;
   background-color: #000;
}

.tpm-static-page-link > img {
   display: block;
   margin-top: 30px;
   max-width: 100%;
}

.tpm-photo {
   width: 30em;
   max-width: 100%;
   margin: auto;
   display: block;
}

@media (min-width: 75em) {
   .tpm-photo {
      float: right;
      margin-left: 1em;
      margin-bottom: .1em;
   }
}

.tpm-photo-credit {
   font-weight: normal;
   font-style: italic;
   font-size: .9em;
}

.tpm-retour {
   color: #000;
   font-weight: 600;
   font-family: "Es Formal Standard", Arial, sans-serif;
   border-radius: 999px;
   box-shadow: 4px 4px 4px rgba(0,0,0,.5);
   padding: .2em .3em;
}

.tpm-retour::before {
   font-weight: bold;
   content: "<  ";
}

/* Sous-pages NTdM */

.ntdm-static-page {
   padding: 1em 2em;
   font-family: "Dosis", Arial, sans-serif;
}

.ntdm-static-page-link {
   min-height: 7em;
   background: #000;
   color: #fff;
   font-family: Dosis;
   text-transform: uppercase;
   background-size: cover;
   display: flex;
   flex-direction: column;
   justify-content: end;
   align-items: start;
   position: relative;
   scroll-snap-align: center;
}

.ntdm-static-page-link:hover::before {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
}

.ntdm-static-page-link__label {
   display: inline-block;
   z-index: 1;
   padding: .3em .5em .3em .3em;
   font-size: 1.3em;
   background: #fff;
   color: #000;
}

.ntdm-static-page-link__label-bis {
   display: inline-block;
   z-index: 1;
   padding: .2em .4em .1em .4em;
   font-size: 1.2em;
   transform: translateY(.25em);
   z-index: 2;
   background: #000;
   color: #fff;
}

.ntdm-temps-fort-image {
   width: 16em;
   height: auto;
   margin: auto;
   display: block;
}

.ntdm-docs-temps-fort {
   text-align: center;
}


#div_moteur_telechargement {
   display: inline-block;
}

@media (min-width: 40em) {
   .ntdm-docs-temps-fort {
      float: right;
      margin: 0 0 1em 1em;
   }

   .ntdm-docs-temps-fort {
      text-align: left;
   }
}

.f-spectacle__disciplines {
   display: table-row;
   display: initial;
}

.fiche__footer {
   padding: 0;
}

.ligne-festival {
   display: inline;
}

.ntdm-cause-annulation {
   font-style: italic;
   padding-left: 1em;
   font-size: 0.9em;
   color: #000;
}

.programmation__tag a, .programmation__tag-line a {
   color: inherit;
}

.programmation__ligne-annulation {
   text-decoration: none;
   opacity: .6;
}

.ntdm-temps-fort-spectacle .c_Personne {
   font-weight: inherit;
   border-bottom: dotted 1px #ccc;
}

.ntdm-retour {
   text-transform: uppercase;
   font-family: Dosis, Arial;
   background-color: #0096ff;
   color: #fff;
   padding: .2em .3em .2em 1.5em;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 5 5' fill='none' stroke='%23FFFFFF' stroke-width='0.5' stroke-linecap='round'><path d='M3.25,1.5 l-1.5,1 l1.5,1'/></svg>");
   background-repeat: no-repeat;
   background-position: left;
   background-size: contain;
}

.ntdm-retour:hover {
   background-color: #000;
   color: #fff;
}

.table_moteur_tournee td {
   padding: 0 1em 0 0;
}
