/* ------------------------------- CSS PAGE DE PRODUIT --------------------------------- */

/* -------- CONTENEUR PRINCIPAL ----------------------------- */

.produit_conteneur {
  display: flex; /* Les éléments contenus dans le conteneur seront structurés suivant le mode flexbox */
  flex-direction: column; /* Propriété flexbox : Ils seront structurés verticalement */
  align-items: center; /* Ils seront centrés sur l'axe principal (défini comme axe vertical) */
  width: 80%; /* La largeur du conteneur est de 80% de la largeur du parent (main) */
}

/* -------- FONCTIONNALITES DU PRODUIT ---------------------- */

.produit_conteneur .produit {
    box-sizing: border-box;/* Les dimensions de l'élément contiendront la bordure (0px) + le padding (15px de chaque côté) + le contenu (logos, boutons de nav, icones) */
    padding: 15px; /* Le padding est de 15px */ 
    margin-bottom: 100px; /* Espacement de 100px en dessous de chaque élément */
    text-align: justify; /* Le texte est justifié */
    font-size: 25px; /* Le texte mesure 25px */
    display: flex; /* Les éléments contenus dans .produit seront structurés suivant le mode flexbox */
    align-items: center; /* Propriété flexbox : Ils seront centrés sur l'axe principal (axe horizontal par défaut) */ 
    background-color: rgba(0,0,0,0.6); /* Fond noir opaque à 60% */
    border-radius: 5px;
    color: yellow;
}

.produit_conteneur .produit > div {
  margin: 0 15px; /* Le margin est de 0px verticalement (au-dessus et en-dessous) et de 15px horizontalement (à gauche et à droite) */
}

/* ------- IMAGES ASSOCIEES A CHAQUE FONCTIONNALITE --------- */

.produit_conteneur .produit .image {
  flex-grow: 1; /* Propriété flexbox : l'élément occupera un espace plus faible que les autres (texte) sur la largeur du conteneur : cf. .produit_conteneur .produit .text */
}

/* ------- TEXTES ASSOCIES A CHAQUE FONCTIONNALITE ---------- */

.produit_conteneur .produit .text {
  flex-grow: 4; /* Propriété flexbox : l'élément occupera un espace beaucoup plus large que les autres (image) sur la largeur du conteneur */
}

.produit_conteneur .produit .text h1 {
  margin: 0; /* Annule le margin que le navigateur définit par défaut aux titres h1 */
  color: white; /* Le texte est blanc */
}

/* ------- VIDEO TEASER ------------------------------------- */

.video { /* Conteneur de la vidéo */
  width: 100%; /* La largeur du conteneur fait 100% de la largeur de son parent (main) */
  display: flex; /* Les éléments contenus dans ce conteneur seront structurés suivant le mode flexbox */
  flex-direction: column; /* Propriété flexbox : Les éléments seront structurés verticalement */
  align-items: center; /* Propriété flexbox : Les éléments seront centrés sur l'axe principal (défini comme axe vertical) */
  box-sizing: border-box; /* Les dimensions de l'élément contiendront la bordure (0px) + le padding (40px de chaque côté) + le contenu (logos, boutons de nav, icones) */
  padding: 40px; /* Le padding est de 40px*/
  margin-bottom: 100px; /* Un espace de 100px sépare le conteneur de l'élément qui se situe sous lui */
}

video {
  background-color:rgb(1,1,1,0.5); /* L'élément vidéo a un fond noir opaque à 50% */
  box-sizing: border-box; /* Les dimensions de l'élément contiendront la bordure (0px) + le padding (15px de chaque côté) + le contenu (logos, boutons de nav, icones) */
  padding: 15px; /* Permet de faire dépasser le fond semi-transparent de 15px de part et d'autre de la vidéo */
}