@font-face {
  /* police de caractères pour les titres  */
  font-family: "mechsuit";
  src: url(Mechsuit.otf);
}

.gras {
  /* met le texte en gras */
  font-weight: bold;
}

.italique {
  /* met le texte en italique */
  font-style: italic;
}

.souligne {
  /* souligne un texte */
  text-decoration: underline;
}

p {
  /* tous les paragraphes sont par défauts justifiés */
  text-align: justify;
}

.paragraphes{
  animation: fadeInRight 1s ease;
}

@keyframes fadeInRight {
  0%{
      transform: translateX(40px);
      opacity: 0;
  }
  100%{
      transform: translateX(0px);
      opacity: 1;
  }
}

@keyframes fadeInLeft {
  0%{
      transform: translateX(-40px);
      opacity: 0;
  }
  100%{
      transform: translateX(0px);
      opacity: 1;
  }
}

@keyframes fadeInTop {
  0%{
      transform: translateY(-40px);
      opacity: 0;
  }
  100%{
      transform: translateY(0px);
      opacity: 1;
  }
}

.puces_justify {
  /* justifie les textes écrits au niveau des puces */
  text-align: justify;
}

.textecentre {
  /* centre le texte */
  text-align: center;
}

.textejustifie {
  /* justifie le texte */
  text-align: justify;
}

a {
  /* pas de décoration sur les liens */
  text-decoration: none;
  color: #17a2b8;
}

a:hover {
  /* pas de décoration sur les liens au passage de la souris */
  text-decoration: none;
}

IMG.imagecentree {
  /* centre les images */
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  border-radius: 3px;
  width: 100%;
}

iframe {
  /* centre les vidéos YouTubes */
  display: block;
  margin: auto;
  border-radius: 3px;
}

.puces_square {
  /* pour que les puces soient carrées */
  list-style-type: square;
  margin-left: 40px;
  margin-right: 40px;
}

ul li {
  /* justifie par défaut le texte des puces */
  text-align: justify;
  animation: fadeInRight 1s ease;
}

.pointer {
  /* définit la forme du curseur en pointeur */
  cursor: pointer;
}

.notes {
  /* en cas de NDLR petite police d'écriture */
  font-size: small;
}

.ombre {
  /* ombres de certains élements */
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
}

.hautdepage {
  /* laisse un espace en haut de la page */
  margin-top: 5px;
}

.findepage {
  /* laisse un espace en bas si on arrive en fin de page */
  margin-bottom: 5px;
}

.findepage_grandespace {
  padding-bottom: 10px;
}

.texte_sur_image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: x-large;
  color: white;
  font-style: italic;
  font-weight: bold;
}

/* *********** SOURCE D'IMAGES ************* */
.source_images {
  /* pour les sources d'images sur les agrandissements de photos */
  font-style: italic;
  text-align: center;
  padding-top: 10px;
  padding-right: 1em;
  padding-left: 1em;
}

.source_images_miniatures { 
  /* pour les miniatures */
  font-style: italic;
  text-align: center;
  font-size: x-small;
}

.source_images_news {
  /* pour les sources d'images sur les news, mais aussi sur les petits écrans */
  font-style: italic;
  text-align: center;
  font-size: x-small;
  animation: fadeInRight 1s ease;
}

.source_images_chrono {
  /* pour les sources d'images sur les asides des pages chronologie */
  font-style: italic;
  text-align: center;
  font-size: x-small;
  margin: 0;
}

/* *********** NEWS ************* */
.date_news {
  /* les dates des news */
  text-align: end; /* pour que la date soit à droite */
  padding-right: 20%; /* pour que la date soit systématiquement écartée de 20% de la droite */
  font-size: x-small;
  font-style: italic;
  animation: fadeInRight 1s ease;
}

.maj {
  /* en cas de mise à jour sur une news, crée un fond de couleur bisque avec une bordure */
  background-color: bisque;
  margin-left: 5em;
  margin-right: 5em;
  margin-bottom: 1em;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 10px;
  border: solid;
  border-color: burlywood;
}

.infoimportante {
  /* pour indiquer la mise à jour de la news */
  color: red;
  text-decoration: underline;
  font-size: large;
}

/* *********** BOITE CITATION ************* */

blockquote {
  min-height: 5em;
  padding: 1em 4em;
  font: 1em/150% sans-serif;
  position: relative;
  background-color: #17a2b8;
  border-radius: 10px;
  text-align: justify;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  animation: fadeInTop 1s ease;
}

blockquote::before,
blockquote::after {
  position: absolute;
  height: 3rem;
  font: 6rem/100% Georgia, "Times New Roman", Times, serif;
}

.citation::before {
  content: "“";
  top: 0.3rem;
  left: 0.9rem;
}

.citation::after {
  content: "”";
  bottom: 0.3rem;
  right: 0.8rem;
}

.citation:lang(fr)::before {
  content: "«";
  top: -1.5rem;
  left: 0.5rem;
}

.citation:lang(fr)::after {
  content: "»";
  bottom: 2.6rem;
  right: 0.5rem;
}

blockquote i {
  /* le nom de la personne qui a fait la citation + la source */
  display: block;
  font-size: 0.8em;
  margin-top: 1rem;
  font-style: italic;
  text-align: right;
}

/* ************************* FRISE GRAND ECRAN *************************** */
/** timeline box structure **/
.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eee;
  left: 50%;
  margin-left: -1.5px;
}

.tldate {
  display: block;
  width: 200px;
  background: #17a2b8;
  border: 3px solid #17a2b8;
  color: #ededed;
  margin: 0 auto;
  padding: 3px 0;
  font-weight: bold;
  text-align: center;
  -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.35);
}

.timeline li {
  margin-bottom: 25px;
  position: relative;
}

.timeline li:before,
.timeline li:after {
  content: " ";
  display: table;
}
.timeline li:after {
  clear: both;
}
.timeline li:before,
.timeline li:after {
  content: " ";
  display: table;
}

/** timeline panels **/
.timeline li .timeline-panel {
  width: 46%;
  float: left;
  background: #fff;
  border: 1px solid #d4d4d4;
  padding: 20px;
  position: relative;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/** timeline circle icons **/
.timeline li .tl-circ {
  position: absolute;
  top: 23px;
  left: 50%;
  text-align: center;
  background: #17a2b8;
  color: #fff;
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin-left: -16px;
  border: 3px solid #17a2b8;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

/** timeline content **/
.tl-heading h4 {
  margin: 0;
  color: #015249;
}

.tl-body p,
.tl-body ul {
  margin-bottom: 0;
}

.tl-body > p + p {
  margin-top: 5px;
}

/** panel arrows **/
.timeline li .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}

.timeline li .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}

.timeline li .timeline-panel.noarrow:before,
timeline li timeline-panel.noarrow {
  top: 0;
  right: 0;
  display: none;
  border: 0;
}

.timeline li.timeline-inverted .timeline-panel {
  float: right;
}

.timeline li.timeline-inverted .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}

.timeline li.timeline-inverted .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.image-box {
  height: 70%;
  width: 70%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
}

.main-image {
  border-radius: 10px;
  border: 3px solid white;
}

/* texte de la frise */
.frise_texte {
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* *************** FRISE PETIT ECRAN ***************************** */
.annee_frise_petitecran {
  text-align: center;
  width: 200px;
  background: #17a2b8;
  border: 3px solid #17a2b8;
  color: #ededed;
  margin: 1em auto 1em auto;
  padding: 3px 0;
  font-weight: bold;
  text-align: center;
  -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.35);
}

.info_frise_petitecran {
  border: #ccc solid 1px;
  padding: 20px 20px 0px 20px;
  border-radius: 8px;
  margin-bottom: 1em;
  -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.35);
}

.espace_timeline {
  margin-top: 3em;
}

/* *************** CHRONOLOGIE ***************************** */
.chronologie_encart {
  /* les textes des encarts sur les pages chronologie */
  margin-left: 5%;
  font-style: italic;
  font-size: medium;
}

.chrono_encart_espace {
  /* les encarts eux-mêmes des pages chronologie, valables uniquement sur grand écran afin de créer un espace */
  margin-top: 1.2em;
  margin-bottom: 0.2em;
}

.liste_chronologie {
  margin: 0 5em 0.5em 5em;
  text-align: justify;
}

/* *************** TEXTE SELECTIONNE ***************************** */

/* le texte sélectionné dans un h1 */
/* sera blanc sur bleu */
h1::-moz-selection {
  color: white;
  background-color: #17a2b8;
}

h1::selection {
  color: white;
  background-color: #17a2b8;
}

/* le texte sélectionné dans un h2 */
/* sera blanc sur bleu */
h2::-moz-selection {
  color: white;
  background-color: #17a2b8;
}

h2::selection {
  color: white;
  background-color: #17a2b8;
}

/* le texte sélectionné dans un h3 */
/* sera blanc sur bleu */
h3::-moz-selection {
  color: white;
  background-color: #17a2b8;
}

h3::selection {
  color: white;
  background-color: #17a2b8;
}

/* le texte sélectionné dans un paragraphe */
/* sera blanc sur bleu */
p::-moz-selection {
  color: white;
  background-color: #17a2b8;
}

p::selection {
  color: white;
  background-color: #17a2b8;
}

/* le texte sélectionné dans un lien */
/* sera blanc sur bleu */
a::-moz-selection {
  color: white;
  background-color: #17a2b8;
}

a::selection {
  color: white;
  background-color: #17a2b8;
}

/* le texte sélectionné dans un span */
/* sera blanc sur bleu */

span::-moz-selection {
  color: white;
  background-color: #17a2b8;
}

span::selection {
  color: white;
  background-color: #17a2b8;
}

/* le texte sélectionné dans une puce */
/* sera blanc sur bleu */

li::-moz-selection {
  color: white;
  background-color: #17a2b8;
}

li::selection {
  color: white;
  background-color: #17a2b8;
}

/* *********************************** BOUTONS LIRE LA SUITE ****************************** */

.lirelasuite {
  border: none;
  background-color: #17a2b8;
  color: white;
  border-radius: 10px;
  margin-right: 0.5em;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
}

.lirelasuite:hover {
  /* transformation quand on place le curseur de la souris sur le bouton lire la suite */
  transform: scale(1.1);
  transition: transform 0.1s;
  opacity: 0.6;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
}

/* texte dans les boutons lire la suite */
.texte_lirelasuite {
  padding-bottom: 0.5em;
  text-align: right;
  font-size: 1.3em;
}

.texte_lirelasuite a {
  text-decoration: none;
  color: white;
}

/* ****************************** BOUTON VISUALISER FERMER *************************** */
.visualiser_fermer {
  border: none;
  background-color: #17a2b8;
  color: white;
  border-radius: 10px;
  margin-right: 0.5em;
  margin-bottom: 1em;
  padding: 0.5em;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
}

.visualiser_fermer:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: transform 0.1s;
  opacity: 0.6;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
}

/* ****************************** BOUTON RETOUR *************************** */
.bouton_retour_grandecran {
  border: none;
  background-color: #17a2b8;
  color: white;
  border-radius: 10px;
  margin-right: 0.5em;
  float: right;
  padding: 0.5em;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  animation: fadeInTop 1s ease;
}

.bouton_retour_grandecran:hover {
  transform: scale(1.1);
  transition: transform 0.1s;
  opacity: 0.6;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
}

.bouton_retour_grandecran a {
  text-decoration: none;
  color: white;
}

.bouton_retour_petitecran {
  border: none;
  background-color: #17a2b8;
  color: white;
  border-radius: 10px;
  margin-right: 0.5em;
  padding: 0.5em;
  margin-top: 1em;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  animation: fadeInTop 1s ease;
}

.bouton_retour_petitecran:hover {
  transform: scale(1.1);
  transition: transform 0.1s;
  opacity: 0.6;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
}

.bouton_retour_petitecran a {
  text-decoration: none;
  color: white;
}

/* *********************************** BARRE DE NAVIGATION ****************************** */

.navbar-dark .navbar-nav .nav-link {
  font-size: 1.5em;
  padding-left: 30px;
}

/* *********************************** TITRE/SOUS-TITRE DES PAGES ****************************** */

h1 {
  /* titre des pages */
  font-family: "mechsuit", "arial";
  text-align: center;
  font-size: 1.5rem;
  padding: 20px 0px;
  animation: fadeInRight 1s ease;
}

h2 {
  /* sous-titre des pages */
  font-family: "mechsuit", "arial";
  text-align: center;
  font-size: 1.1rem;
  padding-top: 0.7em;
  padding-bottom: 0.3em;
  animation: fadeInLeft 1s ease;
}

h3 {
  /* généralement pour les "en termes de continuité" sur les pages épisodes */
  font-family: "mechsuit", "arial";
  text-align: center;
  font-size: 0.8rem;
  padding-bottom: 0.3em;
  animation: fadeInRight 1s ease;
}

/* *********************************** ACCES SOUS RUBRIQUE ****************************** */

.titres {
  /* les titres des sous-rubriques */
  font-style: italic;
  text-align: center;
  font-weight: bold;
  font-size: large;
  padding-top: 0.5em;
  background-color: #17a2b8;
  padding-top: 0;
  padding-bottom: 3px;
  border-radius: 0 0 3px 3px;
  color: white;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.textes {
  /* les textes des sous-rubriques */
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 3 lignes s'affichent uniquement */
  overflow: hidden;
}

.titres a {
  /* pas de décoration sur les titres des sous-rubriques */
  text-decoration: none;
  color: white;
}

/* *********************************** ACCUEIL PLUS DE NEWS ****************************** */
.plusdenews {
  border: none;
  margin-bottom: 5px;
  float: right;
  font-size: 1.2em;
  color: black;
  font-weight: bold;
}

/* *********************************** ACCUEIL RUBRIQUES ****************************** */
.lesrubriques {
  /* les noms des rubriques affichées en bas de la page accueil */
  text-align: center;
  font-style: italic;
  font-weight: bold;
  font-size: x-large;
}

.lesrubriques a {
  color: black;
}

.lesrubriques a:hover {
  color: black;
  text-decoration: none;
}

/* *********************************** PAGES EPISODES ******************************* */
.lessaisons {
  /* boutons d'accès aux autres saisons */
  margin: 1em 0.2em 0em 0.2em;
  border: none;
  background-color: white;
  color: #17a2b8;
}

.lessaisons_saisonencours {
  margin: 1em 0.2em 0em 0.2em;
  border: none;
  background-color: #17a2b8;
  color: white;
  border-radius: 2px;
  padding: 0.3em;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
}

.lessaisons_texte { 
  /* texte à l'intérieur des boutons */
    padding-bottom: 0.5em;
    text-align: center;
    font-size: 1.3em;
}

.lessaisons_texte a {
  text-decoration: none;
  color: #17a2b8;
}

.synopsis_saison {
  /* synopsis de la saison */
  font-size: large;
  font-style: italic;
  margin-right: 1em;
  animation: fadeInRight 1s ease;
}

.synopsis_episode {
  /* synopsis de l'épisode */
  font-size: large;
  font-style: italic;
  padding-top: 30px;
  animation: fadeInRight 1s ease;
}

.episodes_numerotation {
  /* la numérotation des épisodes */
  text-align: center;
  font-size: large;
  padding-top: 0px;
  padding-bottom: 0.5em;
  font-weight: bold;
  font-style: italic;
}

.episode_precedent {
  /* uniquement sur petit écran */
  float: left;
  margin: 10px;
  border: none;
  background-color: #17a2b8;
  color: white;
  border-radius: 10px;
  padding: 0.5em;
}

.episode_suivant {
  /* uniquement sur petit écran */
  float: right;
  margin: 10px;
  border: none;
  background-color: #17a2b8;
  color: white;
  border-radius: 10px;
  padding: 0.5em;
}

.episode_precedent:hover {
  /* uniquement sur petit écran */
  transform: scale(1.1);
  transition: transform 0.1s;
  opacity: 0.6;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
}

.episode_precedent a {
  /* uniquement sur petit écran */
  text-decoration: none;
  color: white;
}

.episode_suivant:hover {
  /* uniquement sur petit écran */
  transform: scale(1.1);
  transition: transform 0.1s;
  opacity: 0.6;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
}

.episode_suivant a {
  /* uniquement sur petit écran */
  text-decoration: none;
  color: white;
}

.episodes_periodes {
  list-style-type: circle;
}

.sous_puces {
  margin: 0 8% 0 0;
}

.commentaire_episode {
  border: #ccc solid 1px;
  padding: 10px 10px 10px 10px;
  border-radius: 8px;
  margin-bottom: 1em;
  -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.35);
}

.acces_resumedetaille {
  text-align: right;
  margin-bottom: 0;
}

.acces_resumedetaille a {
  color: white;
}

.acces_resumedetaille a:hover {
  color: white;
}

.background_acces_resumedetaille {
  border: none;
  background-color: #17a2b8;
  color: white;
  border-radius: 10px;
  float: right;
  padding: 0.5em;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
}

.background_acces_resumedetaille:hover {
  /* transformation quand on place le curseur de la souris sur le bouton accès résumé détaillé */
  transform: scale(1.1);
  transition: transform 0.1s;
  opacity: 0.6;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
}

.margin_haut {
  margin-top: 5em;
}

table {
  width: 100%;
  border-width:3px; 
  border-style:solid; 
  border-color:black;
  margin: 1.5em 0;
}

td, th {
  border: 1px solid black;
  padding: 0.5em 1em;
}

td {
  width: 50%;
}

th {
  text-align: center;
  font-size: large;
}

.fondnoir {
  background-color: black;
}

/* *********************************** PAGES RESUMES DETAILLES ******************************* */
.resumes_dates{
  margin: 2em 0 0.5em 0;
  font-style: italic;
  font-weight: bold;
  text-align: center;
  animation: fadeInTop 1s ease;
}

.paragraphes_gauche {
  animation: fadeInLeft 1s ease;
}

.paragraphes_droite {
  animation: fadeInRight 1s ease;
}

/* *********************************** PAGES PERSONNAGES ****************************** */

.acteurs {
  /* le nom des acteurs dans l'encart des pages personnages */
  margin-top: -10px;
  margin-right: 10px;
}

.puces_personnages1 {
  /* puces initiales des pages personnages */
  padding-left: 42%;
  text-align: justify;
  margin-top: 5px;
}

.puces_personnages2 {
  /* puces pour les sous-catégories des pages personnages */
  padding-left: 5%;
}

/* ***************** IMAGES ALIGNEMENT ********************** */
.image_gauche {
  /* ne concerne que les grands écrans */
  float: left;
  width: 23%;
  border-radius: 5%;
  margin-right: 4px;
  animation: fadeInLeft 1s ease;
}

.image_gauche_promo {
  /* ne concerne que les grands écrans */
  float: left;
  width: 25%;
  border-radius: 5%;
  margin-right: 4px;
  animation: fadeInLeft 1s ease;
}

.image_gauche_resume {
  /* ne concerne que les grands écrans pour les photos sur les pages résumés détaillés */
  float: left;
  width: 15%;
  border-radius: 5%;
  margin-right: 4px;
}

.image_droite {
  /* ne concerne que les grands écrans */
  float: right;
  width: 23%;
  border-radius: 5%;
  margin-left: 4px;
  animation: fadeInRight 1s ease;
}

.image_droite_promo {
  /* ne concerne que les grands écrans */
  float: right;
  width: 23%;
  border-radius: 5%;
  margin-left: 4px;
  animation: fadeInRight 1s ease;
}

.image_droite_resume {
  /* ne concerne que les grands écrans pour les photos sur les pages résumés détaillés */
  float: right;
  width: 15%;
  border-radius: 5%;
  margin-left: 4px;
}

.image_petitecran {
  /* ne concerne que les petits écrans */
  width: 90%;
  margin-left: 5%;
  border-radius: 10px;
}

.images_news {
  /* les images des pages news, valable sur n'importe quel écran*/
  width: 60%;
  border-radius: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  animation: fadeInLeft 1s ease;
}

.images_dossiers {
  /* ne concerne que les petits écrans */
  width: 90%;
  border-radius: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gifs {
  /* pour les gifs */
  width: 60%;
  border-radius: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2px;
}

/* *********************************** ENCARTS ****************************** */

aside {
  width: 38%;
  margin-right: 1em;
  float: left;
  background-color: #17a2b8;
  font-style: italic;
  color: black;
  border-radius: 10px;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  animation: fadeInTop 1s ease;
}

aside > p {
  margin: 0.5rem;
}

.encart {
  text-align: justify;
  font-style: italic;
}

.image_encart {
  margin-left: 2%;
  margin-top: 2%;
  width: 96%;
  border-radius: 10px;
}

.encart_petitecran {
  background-color: #17a2b8;
  padding-left: 5%;
  padding-right: 5%;
  border-radius: 10px;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
}

/* *********************************** ONGLETS ****************************** */

.nav-pills .nav-link.active {
  background-color: #17a2b8 !important;
  color: white !important;
  box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -moz-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(119, 119, 119, 0.6);
}

.nav-pills .nav-link {
  color: #17a2b8 !important;
  font-size: 1.2em;
}

/* *********************************** DOSSIERS ****************************** */
.image_dossier {
  width: 60%;
  border-radius: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.conclusion_musique {
  font-weight: bold;
  font-style: italic;
}

#trait {
  border-top: 1px solid #000;
  width : 100%;
  margin-bottom: 10px;
}

/* *********************************** RESPONSIVE ****************************** */

.videoresponsive {
  /* pour les vidéos */
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  margin-bottom: 1em;
}

.videoresponsive iframe {
  /* pour les vidéos de youtube */
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

@media all and (min-width: 850px) {
  /* tout ce qui ne doit pas apparaître sur un grand écran */
  .encart_petitecran {
    display: none;
  }
  .image_petitecran {
    display: none;
  }
  .nepasfaireapparaitre_grandecran {
    display: none;
  }
  .bouton_retour_petitecran {
    display: none;
  }
  .paragraphes {
    margin-top: 5px;
  }
  .decaler_gauche {
    margin-right: 23%;
  }
  .decaler_droite {
    margin-left: 23%;
  }
  h1 {
    margin: 0 5em 0 5em;
  }
}

@media all and (max-width: 1000px) {
  /* logo disparaît dès que l'écran fait moins de 1000px */
  .logo {
    display: none;
  }
}

@media all and (max-width: 850px) {
  /* tout ce qui ne doit pas apparaître ou doit apparaître différement sur un petit écran */
  aside {
    display: none;
  }
  .puces_personnages1 {
    padding-left: 0%;
  }
  .puces_personnages2 {
    padding-left: 10%;
  }
  .fond {
    margin-left: 0%;
    margin-right: 0%;
  }
  .image_droite {
    display: none;
  }
  .image_droite_resume {
    display: none;
  }
  .image_droite_promo {
    display: none;
  }
  .image_gauche {
    display: none;
  }
  .image_gauche_resume {
    display: none;
  }
  .image_gauche_promo {
    display: none;
  }
  .nepasfaireapparaitre_petitecran {
    display: none;
  }
  .bouton_retour_grandecran {
    display: none;
  }
  .puces_square {
    margin-left: 15px;
    margin-right: 15px;
  }
  .puces_personnages1 {
    padding-left: 5%;
  }
  .puces_personnages2 {
    padding-left: 10%;
  }
  .textes {
    margin-left: 10px;
    margin-right: 10px;
  }
  .images_news {
    width: 90%;
  }
  .date_news {
    padding-right: 5%;
  }
  .maj {
    margin-left: 1em;
    margin-right: 1em;
  }
  .image_dossier {
    width: 90%;
  }
  .chronologie {
    padding-top: 0;
  }
  .synopsis_saison {
    margin-right: 0;
  }
  .synopsis_episode {
    padding-top: 0;
  }
  .gifs {
    width: 90%;
  }
  .source_images_chrono {
    margin-bottom: 10px;
  }
  .liste_chronologie {
    margin: 0 0em 0.5em 0em;
  }
  .image_encart {
    margin-left: 0%;
    margin-top: 1em;
    width: 100%;
  }
  .encart {
    padding-bottom: 10px;
  }
}