/* LES TYPOS */
@import "typo.css";
/* Oswald est dispo en normal, bold, font-weight: 100, normal italic & OStencil
La script Sofia est dispo aussi, normal.
*/

/* LES COULEURS */
/*
// @import "couleurs.css";
// bleu #127dc1;
// bleu clair #127dc181;
// rouge #db1c2a;
// gris 6a6a6a;
 */
/* STYLES BASIQUES TOUTES PAGES */
body {
  background-image: url("../img/fon_cahier.png");
  background-position: center;
  background-repeat: repeat;
}

h1 {
  color: #127dc181;
}

h2 {

}

h3, h4 {
  color: #db1c2a;
  text-align: center;
  font-size: 1.6em
 }

 article h3{
   text-align: left;
   font-size: 2em
 }
 #vaR{
 font-family: 'OStencil'; font-size: 1em;  }

.ppal{
  color:  #127dc181;
  font-size: 1.1em;
}
p {}

a {   color: #127dc1ff; text-decoration: none;}

a:active, a:hover {

   color: #db1c2a;
}

a[title] {}

ul {
  font-size: 0.9em;
  font-weight: 100;
  max-width: 90%;
    list-style-type: none;
}

ul li {display:block;}


  .bicol{column-count: 2;}

  .tricol{
    column-count: 3;
  }
/* le container complet, avec flexbox */
#tout {
width: 90%;
min-width: 640px;
max-width: 1020px;
padding: 0;
margin: auto;
// background-color: #ffffff;
display: flex;
flex-wrap: wrap;
}

/* HEADER */
header {
  width: 100%;
  position: relative;
//  background: linear-gradient(#ffffff, #6a6a6a);
  border-bottom: 1px solid  #127dc181;
  max-height: 90px;
}

header #logo {
  float: left;
  margin : 10px;
}

header #logo img, header figure img {
  max-width: 85px;
  max-height: 85px;
  float: left;
}

header hgroup {
  float: left;
  line-height: 0.3em;
}

header hgroup h2{  font-family: "Sofia";   font-weight: normal; font-size: 2.2em; display: inline-block; float: left; color:#127dc1ff;}
header hgroup h5{  font-family: 'Oswald';  font-weight: normal; font-size: 1.8em;  display: inline-block; float: left; margin-left: 10px; color:#127dc181;}

/* MENU */
header nav {
  position: absolute;
  bottom:-2px;
  right: 2%;
  background-color: #ffffff;
  border-radius: 15px 15px 0 0;
  border : 1px  solid  #127dc181;;
  border-bottom: none;
}

header nav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  margin-left: -25px; // pourquoi???
}

header nav li {
  margin-right: 15px;
}
header nav a {
  font-weight: bold;
  font-size: 1.3em;
  padding-bottom: 3px;
  text-decoration: none;
}

header nav a:hover {
  border-bottom: 3px solid #127dc181;
}
header nav a:active {
  color: #db1c2a;
}

/* SECTIONS */
section {
  width: 100%;
  background-color: #ffffff;
}

/* la section principale Index, Projets & Expo, avec flexbox */
#page, #fiche {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}


/* Structure */
#page aside {
  flex: 1 1 220px;
  max-width: 320px;
position: relative;
padding: 10px;
font-size: 0.9em;
}

#page article {
  flex: 3 2 49%;
}

/* BANNIERE (article #diapo) */

#diapo {
  position: relative;
  height: 200px;
}

#diapo_img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  /* contain | fill | scale-down */
  object-position: bottom;
  overflow: hidden;
  border-radius: 15px;
}

#diapo h1 {
  position: absolute;
  top: 35%;
  right: 15%;
  color: white;
  font-size: 2em;
}

/* sur la page projet j'ai besoin que les comportements de la banniere
soient repris par plusieurs blocs, : class projet */

.projet {
  position: relative;
  height: 200px;
  margin: 5px;
  background-image: url("../img/fon_carr.png");
    background-position: center;
    background-repeat: repeat;
    border-radius: 15px;
}

.img_projet {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  /* contain | fill | scale-down */
  object-position:  center;
  overflow: hidden;
  border-radius: 15px;
}

.projet:last-of-type {
  height: auto;
}

 .projet:last-of-type  .img_projet:last-of-type{max-height: 80%; height: auto}

.projet h2 {
  position: absolute;
  color: white;
  font-size: 1.5em;
font-weight: normal;
background-color: #6a6a6a6a;
padding: 0 5px;
}

.projet:nth-child(n) h2 {
  top: 5%;
  left: 5%;
}

.projet:nth-child(5n-1) h2 {
  top: 35%;
  left: 55%;
}

/* Liens vers galeries */
.projet:hover h2{
  background-color: #db1c2a;
}

.projet:hover .img_projet{
  /* contain | fill | scale-down | cover*/
}


/* CV & pages textes avec grid */

#cv, #fiche{  width: 100%;
  display: grid;
 grid-template-columns:66% 32%;
 /* grid-gap: 10px;*/
 grid-template-rows: auto;}

.xp{
  grid-column: 1;
  padding: 15px;
  padding-right: 60px;
}

#cv aside, #fiche aside{
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 10;
  padding: 10px;
}
#cv h2{ color:#6a6a6a6a;}

#cv aside h3{
  color:#127dc181;
  font-size: 1.6em;
}

/* Structure Accueil : aside #def article #reve article #reel aside #moiJe */

#def{ padding: 20px; background-color: #ffffff; color: #6a6a6a}

#reve{
min-height: 200px;
 padding: 10px;
 padding-right: 50px;}

#reel{height: 200px;
// background-color: #ffff0033;
border-radius: 15px;
 padding: 10px 50px 10px 10px;
height: auto;
color:#6a6a6a;}

#reel h3{color:#6a6a6a;}

#moiJe{ position: relative;
  min-height: 300px;
  max-height: 400px;
border-radius: 15px;
background: linear-gradient(#127dc1, #ffffff );
/* box-shadow: 0px 5px 5px 0px #9f9f9f; */
color: white;
padding: 10px;}

#moiJe h2{color:#ffffff;}

  #moi_img{    text-align: center; }
  #moi_img img{ // medaillon
  width: 50%; max-width: 150px;
  border-radius: 50%;   }

  #socialMe{ text-align: center;   }

a.social:active,
a.social:hover {
    padding-bottom: 15px;
  }

  /* la section des liens, avec flexbox */
  #liens {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    border-top: 2px solid #db1c2a;
  }
 #liens>article{
   position: relative;
   flex:1 1 30%;
   padding: 10px;
 }

#liens article:nth-child(n){background-color: #ffffff;}
#liens article:nth-child(2n){  background-image: url("../img/fon_carr.png");
  background-position: center;
  background-repeat: repeat;
  border-radius: 15px;
     text-align: center;
     margin:  0 5px 0 5px;
}
 #liens>article h3, #liens>article h4{
   font-family: OStencil;
 line-height: 1em;
   font-size: 1.2em;
margin: 0}

#liens>article h5, #liens>article h5{
  font-family: Sofia, cursive;
  font-weight: normal;
  line-height: 1em;
  font-size: 1.2em;
 margin: 0;
}

   #liens>article p {
font-family: Sofia, cursive;
color: #3c3c3c;
 }

 #liens>article ul {
   list-style-type: none;
   margin-left:-20px;
 }
 #liens article ul li:nth-child(n) a{

 }
 #liens article ul li:nth-child(2n) a{
    color: #6a6a6a;
 }

 #coeur{position: absolute;
 top: -50px; left: 40%;}


 a.ppal{  font-family: Sofia, cursive; font-size: 1.1em}

footer{
  width: 100%;
  text-align: center;
  font-size: 0.8em;
}

/* Galeries avec grid */

#galerie{
  width: 100%;
  display: grid;
 grid-template-columns: 32% 16% 16% 32%;
 /* grid-gap: 10px;*/
 grid-template-rows: auto;
}

   #galerie article{
     position: relative;
     min-height: 200px;
     margin: 5px;
    /* background-image: url("../img/fon_carr.png");
       background-position: center;
       background-repeat: repeat; */
       border-radius: 15px;
   }

.titre {
  grid-column: 1 / span 3;
   grid-row: 1;
}
.titre h1{ text-align: center;font-size: 2em; line-height: 1em}
.fiche{
  grid-column:4;
   grid-row: 1/ span 2;

   padding: 15px;
}
.mi{
  grid-column: 1;
 grid-row: 2;
}
.fa{ grid-column: 2 / span 2;
  grid-row: 2;}

   .sol:nth-child(n){grid-column: 1 / span 2;}
   .sol:nth-child(2n){grid-column: 3/ span 2;}

.der{ grid-column: 1 / span 3;
 }
 .fin{ grid-column: 4; padding: 15px;}

   .img_gal img {
     width: 100%; max-height: 240px;
     object-fit: cover;
     /* contain | fill | scale-down */
     object-position:  bottom;
     border-radius: 15px;
     overflow: hidden;
   }

   .img_gal img.top{  object-position:  top;}
   .img_gal img.center{  object-position:  center;}

#galerie figure{
    border: thin #6a6a6a6a solid;
    position: relative;
     padding: 0px;
     margin: auto;
     border-radius: 15px;
      overflow: hidden;
       max-height: 235px;
   }
#galerie figcaption h4{
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
    position: absolute;
    bottom: 5px; left: 5px;
    border-radius: 5px;
    margin:0;
 }


/* SPECIAL CV */
span.date {
  color:#127dc1;
  font-weight: 100;
   font-family: 'Oswald';
}
.xp hgroup {
   border-left: 2px dotted #db1c2a;
   padding-left: 20px;
   margin-left: -12px;
   padding-top:  1px;
   padding-bottom: 1px;
}
.xp hgroup h5{ font-size: 1.1em; margin-bottom: 0;
font-weight: normal;
 line-height: 1em;}

.xp hgroup h6 {
    font-family: 'Sofia', cursive;
    font-weight: normal;
     color:#6a6a6a; font-size: 1em; line-height: 0.9em;  margin-top: 0.2em; }

span.poste {  font-family: 'Oswald'; color:#3c3c3c;}

span.entite {
  font-family: 'OStencil';
  color: #db1c2a;
}

#moi {
  max-width: 160px;
  max-height: 160px;
  float: left;
  margin-right: 10%;
  color: #127dc181;
}
table
{
    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
table caption, table th{
  font-family: 'Oswald';  font-weight: bold; font-size: 0.9em;   color:#127dc181;
}
table td{  font-family: 'Oswald';  font-weight: normal; font-size: 0.8em;   color:#3c3c3c;
}
th, td{border: 1px solid #3c3c3c3c; padding: 5px;}