@charset "UTF-8";
/*On définit les variables à l'intérieur de la section root. Les variables commencent par "--" et on leur affecte
une valeur avec ":"*/
/*We’ll use the html element (better than body as it’s always at least the height of the
browser window). We set a fixed and centered background on it, then adjust it’s size
using background-size set to the cover keyword. To ensure cross browser compatibility some tutorials seem to add the following lines of code as well.
webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;*/
body.hidden-scroll {
  overflow: hidden;
}

.sl-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  opacity: 0.7;
  display: none;
  z-index: 1035;
}

.sl-wrapper {
  z-index: 1040;
}
.sl-wrapper * {
  box-sizing: border-box;
}
.sl-wrapper button {
  border: 0 none;
  background: transparent;
  font-size: 28px;
  padding: 0;
  cursor: pointer;
}
.sl-wrapper button:hover {
  opacity: 0.7;
}
.sl-wrapper .sl-close {
  display: none;
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 10060;
  margin-top: -14px;
  margin-right: -14px;
  height: 44px;
  width: 44px;
  line-height: 44px;
  font-family: Arial, Baskerville, monospace;
  color: #000;
  font-size: 3rem;
}
.sl-wrapper .sl-close:focus {
  outline: none;
}
.sl-wrapper .sl-counter {
  display: none;
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 1060;
  color: #000;
  font-size: 1rem;
}
.sl-wrapper .sl-navigation {
  width: 100%;
  display: none;
}
.sl-wrapper .sl-navigation button {
  position: fixed;
  top: 50%;
  margin-top: -22px;
  height: 44px;
  width: 22px;
  line-height: 44px;
  text-align: center;
  display: block;
  z-index: 10060;
  font-family: Arial, Baskerville, monospace;
  color: #000;
}
.sl-wrapper .sl-navigation button.sl-next {
  right: 5px;
  font-size: 2rem;
}
.sl-wrapper .sl-navigation button.sl-prev {
  left: 5px;
  font-size: 2rem;
}
.sl-wrapper .sl-navigation button:focus {
  outline: none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 10px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 10px;
    font-size: 3rem;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 20px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 20px;
    font-size: 3rem;
  }
}
.sl-wrapper.sl-dir-rtl .sl-navigation {
  direction: ltr;
}
.sl-wrapper .sl-image {
  position: fixed;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 10000;
}
.sl-wrapper .sl-image img {
  margin: 0;
  padding: 0;
  display: block;
  border: 0 none;
  width: 100%;
  height: auto;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
.sl-wrapper .sl-image iframe {
  background: #000;
  border: 0 none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
.sl-wrapper .sl-image .sl-caption {
  display: none;
  padding: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  font-size: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-top {
  bottom: auto;
  top: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-outside {
  bottom: auto;
}
.sl-wrapper .sl-image .sl-download {
  display: none;
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #000;
  z-index: 1060;
}

.sl-spinner {
  display: none;
  border: 5px solid #333;
  border-radius: 40px;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -20px;
  opacity: 0;
  position: fixed;
  top: 50%;
  width: 40px;
  z-index: 1007;
  -webkit-animation: pulsate 1s ease-out infinite;
  -moz-animation: pulsate 1s ease-out infinite;
  -ms-animation: pulsate 1s ease-out infinite;
  -o-animation: pulsate 1s ease-out infinite;
  animation: pulsate 1s ease-out infinite;
}

.sl-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.sl-transition {
  transition: -moz-transform ease 200ms;
  transition: -ms-transform ease 200ms;
  transition: -o-transform ease 200ms;
  transition: -webkit-transform ease 200ms;
  transition: transform ease 200ms;
}

@-webkit-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-moz-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-o-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-ms-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
/*On définit les variables à l'intérieur de la section root. Les variables commencent par "--" et on leur affecte
une valeur avec ":"*/
/*We’ll use the html element (better than body as it’s always at least the height of the
browser window). We set a fixed and centered background on it, then adjust it’s size
using background-size set to the cover keyword. To ensure cross browser compatibility some tutorials seem to add the following lines of code as well.
webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;*/
/*On définit la police utilisée par défaut dans tout le html. Si une autre police est précisée
dans une section interne à body, c'est cette dernière qui sera utilisée pour la section
en question. Les propriétés les plus précises/ciblantes prévalent toujours.
On définit aussi la couleur de la police en hexadécimal.*/
html {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/background/stmalo1.jpg") no-repeat center center fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'montserrat', Arial, sans-serif;
  color: #181818;
  width: 100%;
  height: 100%;
  /*Permet de dire au navigateur de ne pas adapter la taille du
  texte lui même. On pourrait lui dire 175% au lieu de none, pour
  multiplier par 1.75 la taille de base du texte mais cela n'est
  pas encore bien pris en charge par les navigateurs. Du coup je
  gère la taille autrement.*/
  text-size-adjust: none;
}
@media screen and (max-device-width: 1100px) {
  html {
    font-size: 1.75em;
  }
}

/*Les paragraphes sont naturellement définies avec des marges de block et inline
Il faut les définir à zéro si on ne les veut pas. Ici on ne précise que les block
qui impactaient les descriptions en noir transparents qui n'étaient plus collées aux
images*/
p {
  margin-block-start: 0em;
  margin-block-end: 0em;
}

/*Chaque section "@font-face" permet de définir une nouvelle police (pour celles inconnues par le navigateur et 
qu'il faut importer). On définit le nom de la police qui sera utilisé dans le code avec font-family. Ensuite on
met le lien interne vers le fichier de police. On met en fait plusieurs types d'extension pour une même police 
pour qu'elle puisse être utilisée par tous les navigateurs.*/
@font-face {
  font-family: "montserrat";
  src: url("../polices/montserrat-v14-latin/montserrat-v14-latin-regular.eot") format("eot"), url("../polices/montserrat-v14-latin/montserrat-v14-latin-regular.svg") format("svg"), url("../polices/montserrat-v14-latin/montserrat-v14-latin-regular.ttf") format("ttf"), url("../polices/montserrat-v14-latin/montserrat-v14-latin-regular.woff") format("woff");
}
@font-face {
  font-family: "source-sans-pro";
  src: url("../polices/source-sans-pro-v13-latin/source-sans-pro-v13-latin-regular.eot") format("eot"), url("../polices/source-sans-pro-v13-latin/source-sans-pro-v13-latin-regular.svg") format("svg"), url("../polices/source-sans-pro-v13-latin/source-sans-pro-v13-latin-regular.ttf") format("ttf"), url("../polices/source-sans-pro-v13-latin/source-sans-pro-v13-latin-regular.woff") format("woff");
}
/*On définit les variables à l'intérieur de la section root. Les variables commencent par "--" et on leur affecte
une valeur avec ":"*/
/*We’ll use the html element (better than body as it’s always at least the height of the
browser window). We set a fixed and centered background on it, then adjust it’s size
using background-size set to the cover keyword. To ensure cross browser compatibility some tutorials seem to add the following lines of code as well.
webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;*/
/*On définit la largeur du bloc page : la section qui contient tous les éléments à par
le background.*/
.bloc_page {
  width: 1100px;
  margin: auto;
}
@media screen and (max-device-width: 1100px) {
  .bloc_page {
    width: auto;
  }
}

/*Le main header est ici la photo tout en haut. On la colle au haut avec margin-top
On arrondit la photo avec border-radius et on définit une ombre avec box-shadow.
On définit le background du header i.e. la photo avec la bonne largeur et on met une marge
en dessous.*/
.main_header {
  height: 149px;
  border-radius: 5px;
  background: url("../images/header/header2_1100.jpg") no-repeat;
  background-size: 1100px auto;
  box-shadow: 0px 4px 4px #1c1a19;
  margin-bottom: 40px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.main_header > p {
  position: absolute;
  padding: 0.5em 1em 0.5em 1em;
  width: min-content;
  white-space: nowrap;
  background-color: rgba(25, 125, 195, 0.9);
  color: white;
  height: 25px;
  align-items: center;
  left: 0px;
  font-size: 1.3em;
  border-radius: 5px 0px 0px 0px;
}
@media screen and (max-device-width: 1100px) {
  .main_header > p {
    font-size: 1em;
  }
}
.main_header a {
  padding: 0.5em 1em 0.5em 1em;
  width: min-content;
  white-space: nowrap;
  background-color: rgba(24, 24, 24, 0.5);
  color: white;
  height: 25px;
  display: flex;
  color: inherit;
  text-decoration: inherit;
  align-items: center;
}
.main_header a:nth-child(2) {
  border-radius: 0px 5px 0px 0px;
}
.main_header a p {
  color: white;
}
.main_header a img {
  margin-right: 0.5em;
  max-height: 100%;
}

/*On poursuit avec le reste des propriétés propre aud div_accueil_body.
display:flex permet d'organiser le contenu à l'interieur (cf Openclassrooms)
flex-direction:	column organise le contenu ligne par ligne plutôt que colonne par colonne
*/
.content_body {
  display: flex;
  width: 100%;
  flex-direction: column;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/background/fond_jaune_o95.png") no-repeat center center fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*Le menu est la barre avec accueil, films, musique, etc...
justify-content : center permet de centrer selon l'axe principale ici horizontal
align-items : center permet de centrer selon l'axe secondaire ici vertical.
On définit aussi une police propre au menu.
On peut définir une couleur de fond grâce à rgba le dernier chiffre est l'opacité
1 = totalement opaque 0 = totalement transparent*/
.menu {
  display: flex;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  justify-content: center;
  align-items: center;
  font-family: source-sans-pro;
  /* #menu a vise toutes les balises a de la balise qui a l'id menu. flex : 1 permet de 
  donner un poids égal à 1 à cette section en termes d'occupation de l'espace. 
  text-align : center perment de centrer le texte dans cette section.
  color : inherit permet de préciser que la couleur ne doit pas être celle par défaut des
  sections a mais celle héritée des balises parentes dans le code css. Idem pour
  text-decoration*/
  /*Rien de nouveau*/
}
@media screen and (max-device-width: 1100px) {
  .menu {
    margin-bottom: -1px;
  }
}
.menu .onglet_menu {
  flex: 1;
  justify-content: center;
  text-align: center;
  font-size: 1.6em;
  color: inherit;
  text-decoration: inherit;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  /*::after ajoute un élément dans le code html
  Donc ici lorsque l'on survole un onglet_menu l'opacité de l'élément ajouté passe à un et
  il devient valors visible.*/
}
@media screen and (max-device-width: 1100px) {
  .menu .onglet_menu {
    font-size: 1em;
  }
}
.menu .onglet_menu:hover::after {
  opacity: 1;
}
.menu .onglet_menu::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(242, 242, 242, 0.5);
  opacity: 0;
  z-index: -1;
  transition: opacity 200ms;
}
.menu .onglet_menu--courant {
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/background/fond_jaune_o95.png") no-repeat center center fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

footer {
  width: 100%;
  height: min-content;
  display: flex;
  background: url("../images/background/bleu_plein.jpg");
  justify-content: space-around;
  color: white;
  margin-bottom: 50px;
}
@media screen and (max-device-width: 1100px) {
  footer {
    font-size: 0.6em;
  }
}
footer .footer__div {
  width: 100%;
  display: flex;
}
footer .footer__div h2 {
  font-size: 1.4em;
  font-weight: normal;
  flex: 3;
  text-align: center;
}
footer .footer__div--left {
  margin-left: 40px;
  justify-content: space-between;
}
footer .footer__div--left a {
  width: 100%;
  flex: 1;
  margin: 5px 0px 10px 20px;
}
footer .footer__div--left img {
  width: 100%;
  height: auto;
}
footer .footer__div--center {
  margin-left: 20px;
  display: flex;
  justify-content: center;
  text-align: center;
}
footer .footer__div--right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*On définit les variables à l'intérieur de la section root. Les variables commencent par "--" et on leur affecte
une valeur avec ":"*/
/*We’ll use the html element (better than body as it’s always at least the height of the
browser window). We set a fixed and centered background on it, then adjust it’s size
using background-size set to the cover keyword. To ensure cross browser compatibility some tutorials seem to add the following lines of code as well.
webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;*/
/*space-between est une autre valeur possible de la propriété justify-content
cf openclassrooms. margin définit les 4 marges dans l'ordre :
top, right, bottom, left.*/
.section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin: 30px 60px 30px 60px;
}
@media screen and (max-device-width: 1100px) {
  .section {
    display: block;
  }
}
.section--top {
  margin-top: 60px;
}
.section--bottom {
  margin-bottom: 60px;
}
.section .categorie {
  /*On affecte un poids d'occupation de l'espace de 2/3 et 1/3*/
  /*width:min-content définit la largeur au minimum nécessaire par les balises internes*/
}
.section .categorie--films {
  flex: 2;
}
.section .categorie--musique {
  flex: 1;
}
@media screen and (max-device-width: 1100px) {
  .section .categorie--musique {
    margin: 60px 0px 0px 10%;
    max-width: 80%;
  }
}
.section .categorie--jeux_video {
  flex: 1;
  margin-right: 30px;
}
.section .categorie--videastes {
  flex: 1;
  margin-left: 30px;
}
@media screen and (max-device-width: 1100px) {
  .section .categorie--videastes {
    margin: 60px 0px 0px 0px;
  }
}
.section .categorie--etudes {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 1.2em;
}
.section .categorie .header_cat {
  height: 50px;
  display: flex;
  align-items: center;
  font-family: source-sans-pro;
  width: min-content;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/background/bleu_plein.jpg") no-repeat center center fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  	/*white-space : nowrap permet de ne pas passer à la ligne dans le titre du header de
	chaque catégorie*/
}
@media screen and (max-device-width: 1100px) {
  .section .categorie .header_cat {
    margin-bottom: -1px;
  }
}
.section .categorie .header_cat__icone, .section .categorie .header_cat h1, .section .categorie .header_cat h2 {
  margin: 8px 8px 8px 8px;
}
.section .categorie .header_cat h1, .section .categorie .header_cat h2 {
  font-size: 1.5em;
  color: white;
  white-space: nowrap;
}
.section .categorie .header_cat h1 a, .section .categorie .header_cat h2 a {
  color: inherit;
  text-decoration: inherit;
  cursor: pointer;
}
.section .categorie .header_cat h1 a:hover, .section .categorie .header_cat h2 a:hover {
  text-decoration: underline;
  cursor: pointer;
}
.section .categorie .body_cat {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/background/bleu_plein.jpg") no-repeat center center fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  box-shadow: 10px 10px 10px #1c1a19;
  /*font-size : 1.2em permet d'affecter un coeff multiplicatif (je crois) à la taille 
  habituelle de la police.*/
  /*La largeur max de body_cat--films est 90% de la largeur/largeur max du bloc parent*/
}
.section .categorie .body_cat--presentation {
  height: auto;
  display: flex;
  font-size: 1.2em;
  /*display:flex et align-items :center permettent de centrer le paragraphe de présentation
  dans la balise texte présentation parente. text-align : justify justifie le texte*/
}
@media screen and (max-device-width: 1100px) {
  .section .categorie .body_cat--presentation {
    font-size: 1em;
    flex-direction: column;
  }
}
.section .categorie .body_cat--presentation .photo_profil {
  margin: 10px 0px 10px 10px;
  min-width: 24%;
  /*Permet de dire à l'image qu'elle ne peut pas prendre plus que la largeur/largeur max
  de sa balise parente. Il faut avoir défini une largeur ou une largeur max de la balise
  parente d'une manière ou d'une autre.*/
}
@media screen and (max-device-width: 1100px) {
  .section .categorie .body_cat--presentation .photo_profil {
    display: flex;
    justify-content: center;
  }
}
.section .categorie .body_cat--presentation .photo_profil img {
  max-width: 97%;
}
@media screen and (max-device-width: 1100px) {
  .section .categorie .body_cat--presentation .photo_profil img {
    max-width: 40%;
  }
}
.section .categorie .body_cat--presentation__text {
  display: flex;
  align-items: center;
  text-align: justify;
  margin: 10px 10px 10px 10px;
  padding: 20px 20px 20px 20px;
  background: url("../images/background/bleu_plein40.jpg");
}
.section .categorie .body_cat--films {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  max-width: 90%;
}
@media screen and (max-device-width: 1100px) {
  .section .categorie .body_cat--films {
    max-width: 100%;
  }
}
.section .categorie .body_cat--films div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px 10px 10px 10px;
  transition: transform 200ms ease-in-out 0ms;
  /*width : 100% permet de dire au texte en fond noir transparent d'occuper toute la largeur
  car par défaut il n'aurait pris que la largeur nécessaire et on aurait donc eu un fond
  noir transparent que sur la largeur nécessaire*/
}
.section .categorie .body_cat--films div:hover {
  transform: scale(1.05);
}
.section .categorie .body_cat--films div img {
  max-width: 100%;
}
.section .categorie .body_cat--films div p {
  text-align: center;
  color: white;
  width: 100%;
  background-color: rgba(24, 24, 24, 0.8);
}
.section .categorie .body_cat--musique {
  display: flex;
  flex-direction: column;
  /*#body_cat--musique :nth-child(3) Permet de cibler la 3ème balise définie dans body_cat--musique
  sans lui donner d'id*/
}
.section .categorie .body_cat--musique__row {
  flex: 1;
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.section .categorie .body_cat--musique__row div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0px 20px 0px 20px;
  transition: transform 200ms ease-in-out 0ms;
}
.section .categorie .body_cat--musique__row div:hover {
  transform: scale(1.05);
}
.section .categorie .body_cat--musique__row div p {
  text-align: center;
  color: white;
  width: 100%;
  background-color: rgba(24, 24, 24, 0.8);
}
.section .categorie .body_cat--musique__row img {
  max-width: 100%;
  width: 100%;
}
.section .categorie .body_cat--musique :nth-child(3) {
  margin-bottom: 15px;
}
.section .categorie .body_cat--jeux_video {
  display: flex;
  justify-content: space-around;
}
.section .categorie .body_cat--jeux_video div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px 10px 10px 10px;
  transition: transform 200ms ease-in-out 0ms;
}
.section .categorie .body_cat--jeux_video div:hover {
  transform: scale(1.05);
}
.section .categorie .body_cat--jeux_video div p {
  text-align: center;
  color: white;
  width: 100%;
  background-color: rgba(24, 24, 24, 0.8);
}
.section .categorie .body_cat--jeux_video div img {
  max-width: 100%;
}
.section .categorie .body_cat--videastes {
  display: flex;
  justify-content: space-around;
  align-content: center;
}
.section .categorie .body_cat--videastes a {
  transition: transform 200ms ease-in-out 0ms;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px 10px 10px 10px;
  text-decoration: inherit;
  color: inherit;
}
.section .categorie .body_cat--videastes a:hover {
  transform: scale(1.05);
}
.section .categorie .body_cat--videastes a p {
  text-align: center;
  color: white;
  width: 100%;
  background-color: rgba(24, 24, 24, 0.8);
}
.section .categorie .body_cat--videastes img {
  max-width: 100%;
}
.section .categorie .body_cat--etudes__row {
  flex: 1;
  display: flex;
  width: 100%;
  /*background-color : white car les logos sont au format png*/
}
.section .categorie .body_cat--etudes__row a {
  flex: 1;
  width: 100%;
  background-color: white;
  margin: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  transition: transform 200ms ease-in-out 0ms;
  /*vertical-align: middle pour que les logos des écoles soient centrés verticalement*/
  /* display : inline pour que les balises en italique soient affichées à la suite et pas 
  en flex*/
}
.section .categorie .body_cat--etudes__row a:hover {
  transform: scale(1.05);
}
.section .categorie .body_cat--etudes__row a img {
  align-items: center;
  width: 100%;
}
.section .categorie .body_cat--etudes__row p {
  flex: 3;
  width: 100%;
  display: inline;
  margin: 10px 10px 10px 10px;
  padding: 10px 10px 10px 10px;
  background: url("../images/background/bleu_plein40.jpg");
}

/*Pour enlever l'espace entre les images et la légende à cause de la balise <a>*/
a > img {
  display: inherit;
}