p {
    text-align:justify;
}

li {
    text-align:justify;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

ul.files
{
    list-style-type: none;
}
li.files
{
    list-style-type: none;
}
.lesfichiers
{
    border-style:solid;
    border-width:1px;
    background-color:#ccc;
    padding:20px;
}

#videowp1
{
    visibility:hidden;
    width:0px;
    
}

#videowp2
{
    visibility:hidden;
    width:0px;
    height:100%;
    
}

#videowp3
{
    visibility:hidden;
    width:0px;
    
}

#videowp4
{
    visibility:hidden;
    width:0px;
    
}

.titrerep
{
    font-size: 1.2em;
}
.titrefile{
    font-size: 1.2em;
}
.cadre_tweet
{
   height:100%;
   width:100%;
   display:block;
   height:100%;
   right:0px;
    
}
.jumbotron{
    height: 100vh;
}

.wp{
    font-size:1.5vh;
}

.alterne{

}

.divdrapeau
{
    position:relative;
}

.drapeau {
    position:absolute;
    right:0px;
    top:10px;
        
}
.drapeau2 {
    position:absolute;
    right:0px;
    top:40px;
    
        
}
.warning
{
    font-size:1.5vh;
    color:#ff0000;
}


.footer-logo {
    max-width: 80px;
    height: auto;
    margin-bottom: 20px;
}
.fondpage
{
/*background-image: url('../img/principale/0.png');    */
background-color:#000;
color:#fff;
text-align:center;
}

 #principale
{
/*background-image: url('../img/principale/0.png');    */
background-size:100%;
 


}


#txt_principale
{
background-color:#fff8;
border-radius: 10px;

}

#txt_principale h1
{
font-size:2.5vw;
}

#txt_principale p
{
font-size:14px;
}

.btn {font-size: 1vw;
width:80%;}


.wrapper {
    width: 100%;
    max-width:960px;
    margin: 0 auto;
    font-family: 'Lato', sans-serif;
    
    
}


 
.clear {
   clear: both;
}
 
.wrapper .tri {
    margin-bottom: 40px; /* On ne veut pas que le menu touche les items du portfolio ! */
}
 
.portfolio .tri ul {
    display: table; /* Le display table me permet de centrer mon menu avec margin: 0 auto; sans avoir besoin de préciser de taille ! */
    margin: 0 auto;
    border-radius: 20px;
    border: 1px solid #eee;
    padding: 0 2em;
    
    box-sizing: border-box; /* On change le mode d'affichage, afin de ne pas avoir à faire des calculs dingues à chaque fois que l'on ajoute du padding */
}
 
.portfolio .tri ul li {
    float: left; /* Tous mes éléments de menu sont en float left pour pouvoir les mettre l'un à côté de l'autre. */
    color: #aaa;
    cursor: pointer; /* Permet de changer l'icône de la souris, ça indique à l'utilisateur qu'il y a une action à faire ! */
    font-size: 14px;
    padding: 1em;
    transition: all .2s ease-in-out; /* Les transitions permettent d'ajouter de la fluidité à un changement de propriété : Ici je dis que chaque élément prend 0,2s de easing en début et en fin d'animation, et ce sur TOUS les changements. */
    -moz-transition: all .2s ease-in-out; /* À décliner pour tous les navigateurs. */
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    font-weight: 300; /* Ma typo aura une graisse "light" (100 = thin, 300 = light, 400 = regular, 500 = semi bold, 600 = bold, 900 = black habituellement) */
    letter-spacing: 3px; /* J'espace chaque lettre, pour le style que j'ai choisis. */
    text-transform: uppercase; /* Chaque élément est en majuscule */
    border-top: 1px solid transparent; /* Ligne importante pour l'animation d'après : Au statut actif (quand sélectionné) on va ajouter un border top de 1px, et sans cette ligne, à l'activation la hauteur de ton menu va augmenter de 1 pixel, ce qui fera bouger tout le menu. */
    margin-top: -1px; /* Et pour remettre mon menu là où il devrait être sans cette bordure, je le remonte de 1 pixel. */
}
 
.portfolio .tri ul li:hover {
    color: #888;
}
 
.portfolio .tri ul li.active {
    color: rgb(27,163,156);
    border-top: 1px solid rgba(27,163,156,.6); /* Ma fameuse bordure : Grâce aux transitions sur le li, cette bordure apparaitra en 0,2s avec un effet d'easing. De même, elle disparaitra avec le même easing (ease-in-out veut dire en entrée et en sortie). */
}

.portfolio .item {
    width:100%; /* On ne met pas 50% afin de créer un espace de 2% de chaque côté (rappel : 2 colonnes, donc 2% sur la colonne de gauche et 2% sur la colonne de droite). */
    display: block; /* Comme les items sont des ancres à la base (qui sont de type inline), il faut les transformer en block pour manipuler leur positionnement. */
    color: #000;
    box-sizing: border-box;
    padding: 1em;
    position: relative; /* La position relative permet de dire que les éléments suivants devront se placer par rapport à celui ci. On transforme .item en référence pour les prochains éléments qui seront en position absolute. */
    height: 100px;
    overflow: hidden; /* Grâce à cette ligne, on évite les débordements, et surtout on cache l'état 0 des animations. */
    cursor: pointer;
    margin-bottom: 20px;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.2); /* Permet d'ajouter une ombre portée légère, les paramètres dans l'ordre sont : x, y, portée, couleur. */
    transition: all .2s ease-in-out; /* Comme pour le menu, on ajoute la transition pour créer un easing sur nos animations. */
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    text-decoration: none; /* On se débarasse des vilains soulignements tout moches ! */
    background-color: #fff9;
}
 
/* Ici les SUITES MATHÉMATHIQUES ! : Explication :
On peut utiliser des sélecteurs comme :first-child, :last-child, :nth-child(2), etc..
Par contre, si on a 2000 (ok j'exagère) items, comment faire ? Et bien grâce aux suites mathématiques, il est possible de créer une constance.
:nth-child(xn + y) : n est en fait un compteur qui va s'incrémenter (0, 1, 2, 3, etc..). On peut ainsi créer une formule de math : Il est important de visualiser ce que tu veux faire ! Nous on est partis sur 2 colonnes, et je vais cibler les .item tous les 2n (0, 2, 4, 6, 8, etc.. Tous les chiffres pairs) */
 
.portfolio .item:nth-child(2n) {
    float: right; /* Je met un float right sur tous les .item pairs pour les mettre à droite */
}
 
/* Et à l'inverse, un float left sur tous les .items impairs (2n+1 : 1, 3, 5, 7, etc...) */
.portfolio .item:nth-child(2n+1) {
    float: left;
}
 
/* Et voilà ! Notre grille est déjà faite, c'est magique, non?  */
 
.portfolio .item .black-overlay {
    position: absolute; /* Permet de placer l'overlay par rapport au premier parent en position relative, .item donc. */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; /* Les 4 lignes left, right, top et bottom ici permettent de dire à l'élément de se coller au bord à gauche, à droite, en haut et en bas : Il prend donc 100% de la largeur et de la hauteur de son parent automatiquement ! */
    height: 300px;
    z-index: -1; /* z-index permet de créer des "calques" : De base à 0, ici on recule ce calque car le prochain calque sera le texte, qui ne doit pas être affecté par l'overlay. */
    background: rgba(27,163,156,0.65); /* La couleur de notre overlay, j'ai appelé la classe ".black-overlay" mais elle n'est pas de couleur noire, my bad ! */
    opacity: 0; /* Et de base, l'overlay n'est pas affichée. Elle sert uniquement à l'animation. */
}
 
.portfolio .item:hover .black-overlay {
    opacity: 1; /* Justement : On active l'overlay au passage de la souris. */
}
 
.portfolio .item .hr-title-top {
    width: 0%; /* De base, nos séparateurs ne doivent pas être affichés. Comme mon animation est de les faire apparaître progressivement (de la gauche vers la droite), je vais jouer sur la propriété "width", pour donner un effet de trait qui se dessine. */
    height: 1px;
    background: #fff;
    border: none;
    margin: 0; /* On remet à zéro le margin avant de le manipuler plus bas */
    margin-top: 50px;
    margin-bottom: 20px;
    transition: all .4s ease-in-out; /* On leur applique à nouveau les transitions pour appliquer le easing. Note qu'ici j'ai mis 0,4s plutôt que 0,2 : C'est pour donner un effet de délai entre les différentes animations. */
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}
 
/* Celui ci est similaire au précédent, je ne le commenterais pas. J'ai juste changé les margins pour qu'ils soient en accord avec leur position. */
.portfolio .item .hr-title-bot {
    width: 0%;
    height: 1px;
    background: #fff;
    border: none;
    margin: 0;
    margin-top: 20px;
    display: block;
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}
 
.portfolio .item:hover .hr-title-top, .portfolio .item:hover .hr-title-bot {
    width: 20%; /* Et ici on règle la largeur finale de ces traits lorsqu'ils se dessineront. L'élément le plus important du sélecteur c'est le ".item:hover" : Ce dernier dit à notre CSS de s'activer uniquement lorsqu'on passe la souris sur ".item". */
}
 
.portfolio .item .background {
    background-size: cover; /* Ici on dit que l'image doit s'adapter à la div "background" automatiquement. */
    background-position: center center; /* Si l'image est trop grande, elle se placera au milieu de la div automatiquement */
    position: absolute; /* On place la div qui contient l'image en position absolute afin de lui donner une position en faisant référence à la div parente (".item") */
    left: 0;
    top: 0; /* On place la div en haut à gauche */
    width: 100%; /* On dit que la div fait la taille du parent (".item") en largeur */
    z-index: -2; /* On place la div en dessous de l'overlay (donc l'overlay de couleur sera au dessus de l'image, et le texte sera au dessus de l'overlay) */
    height: 300px;
    transform: scale(1); /* La transformation "scale" permet de créer un effet de zoom. Par défaut elle est à 1. On initialise donc l'animation avec l'état de base. */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transition: all .2s ease-in-out; /* Et la fameuse transition, toujours ! */
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}
 
.portfolio .item .background_txt {
    margin:auto;
    font-size:30px;
    opacity:1;
    z-index: 99;
}

.portfolio .item:hover .background {
    transform: scale(1.5); /* L'animation qui fait que l'image zoom au passage de la souris. */
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
}
 
.portfolio .item .item-title {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    
    text-transform: uppercase;
    font-weight: 900;
    position: relative; /* On place notre titre en position relative afin de pouvoir le déplacer par rapport à son parent ('.item'). */
    top: 0px; /* Notre titre possède un effet qui apparait du bas vers le haut, pour ça, de base on place notre titre plus bas que prévu. */
    line-height: 100%;
    transition: all .2s ease-in-out; /* Et on prévoit l'animation. */
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;    
    -webkit-transition: all .2s ease-in-out;
    opacity: 1; /* De base, il n'est pas affiché du tout, en opacité à 0% : Grâce à ça on va pouvoir le faire apparaitre progressivement également. */
}
 
.portfolio .item:hover .item-title {
    top: 0; /* A la fin de l'animation, le titre sera à top: 0. */
    opacity: 1; /* Et on lui donne l'opacité à la fin de l'animation (En fait, en 0,2s, l'animation sera passée de 0% à 100% d'opacité : D'où l'effet de easing qui calcule les pas intermédiaires tout seul). */
}
 
/* De même pour la description, on va la faire apparaître de la droite vers la gauche. Le principe est exactement le même ! */
 
.portfolio .item .item-description {
    line-height: 1.5em;
    position: relative;
    left: 100px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 300;
    text-shadow: 0 0 5px rgba(0,0,0,.4);
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    opacity: 0;
}
 
.portfolio .item:hover .item-description {
   opacity: 1;
   left: 0;
}
 
.portfolio .item .view-more {
    /* Ici c'est que du style "graphique", rien concernant l'animation ou le positionnement encore. */
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    border-radius: 20px;
    letter-spacing: 3px;
    border: 1px solid #000;
    color: #000;
    box-sizing: border-box;
    padding: 0.5em 0;
    cursor: pointer;
    width: 150px;
    
    /* Petit trick ici : Je veux qu'il soit au milieu de ma box, pour ça : position absolute, left 50%, et le décaler de -(sa largeur / 2) : -150/2 = -75. */
    /* La box doit être en position relative pour que ça fonctionne. */
    position: absolute;
    left: 50%;
    bottom: 0px; /* Animation : Le bouton apparaît du bas vers le haut, donc de base il est au bord du bas. */
    background: transparent; /* De base, le bouton n'a pas de background. C'est juste du texte et une bordure. */
    margin-left: -75px;
    text-align: center;
    transition: all .2s ease-in-out; /* On prépare l'animation. */
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    opacity: 0; /* Animation : De base, le bouton est à 0% d'opacité. */
}
 
.portfolio .item .view-more:hover {
   background: #fff;
   color: #000; /* Au hover du bouton, je veux que le background devienne blanc, et le texte noir. Ca profite aussi du easing ! */
}
 
.portfolio .item:hover .view-more {
    opacity: 1;
    bottom: 5px; /* A la fin de l'animation, le bouton est à 20px du bord et il est à 100% d'opacité. */
}


.sortedDown {
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
    filter: grayscale(.8); /* Filtre qui permet de rajouter un effet noir et blanc. */
    -webkit-filter: grayscale(.8);
}


.container_trombi {
  position: relative;
  width: 95%;
}

.image_trombi {
  display: block;
  width: 100%;
  height: auto;
}

.container_instit {
  position: relative;
  width:20%;
  height:200px;
  display:block;
  float:left;
}

.image_instit {
  
}

.container_pers {
  position: relative;
  display:block;
  float:left;
}

.overlay_pers {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  opacity:0.8;
  overflow: hidden;

  height: 0;
  transition: .5s ease;
}
.overlay_inst {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  opacity:0.8;
  overflow: hidden;

  height: 0;
  transition: .5s ease;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  opacity:0.8;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container_trombi:hover .overlay {
  height: 100%;
}

.container_instit:hover .overlay_inst {
  height: 100%;

 
}

.container_pers:hover .overlay_pers {
  height: 100%;

 
}

.image_sp {
    margin-bottom: 10px;
    margin-top: -10px;
    margin-left: 20px;
    margin-right: -30px;
    float: right;
    width:30%;
}

.image_sp_g {
    margin-bottom: 5px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 30px;
    float: left;
    width:30%;
}


.text {
  white-space: nowrap; 
  color: black;
  font-size: 10px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}