@import 'normalize.css';

body{
    font-size: 16px;
    line-height: 160%;
    font-family: 'Caladea', serif;
    height: 200%;
    justify-content: center;
}
ul{
    list-style: none;
}
a {
    text-decoration: none;
}
/*mise en forme global*/
.txt{
    color: #004F8F;
}
/*layout grid*/
.container{
    margin:50px 5%;
    display: grid;
    grid-template-columns:64px 40px 1fr 1fr ;
    grid-template-rows: auto;
    grid-template-areas: 
        "tr tr tr tr"
        "s1 s1 s1 s1"
        "s1 s1 s1 s1"
        "s2 s2 s2 s2"
        "s2 s2 s2 s2"
        "s3 s3 s3 s3"
        "s3 s3 s3 s3"
        "s4 s4 s4 s4";
    gap: 16px;
}
.tr{
    grid-area: tr;
}
.s1{
    grid-area: s1;
}
.s2{
    grid-area: s2;
    margin-top: 36px;
}
.s3{
    grid-area: s3;
}
.s4{
    grid-area: s4;
}
.container{
    margin: 0 21px 101px;
}
/*grid credits*/
.container__source{
    display: grid;
}
/*grid header*/
.container__header{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 80px;
    grid-template-areas: 
    "dk lg lg nv";
    margin: 0 21px;
    gap: 16px;
}
.header__darkmode{
    grid-area:dk;
}
.lg{
    grid-area:lg;
}
.nv{
    grid-area:nv;
    align-items: center;
    align-content: center;
}
/* grid titre*/
.container__titre{
    margin: 21px 0 101px 0;
    display: grid;
    grid-template-columns:64px 40px 1fr 1fr ;
    grid-template-rows: auto;
    width: 100%;
    gap: 16px;
    grid-template-areas: 
    "tr3 tr3 tr1  tr1"
    " .  tr2 tr2   . ";
}
.tr1{
    grid-column: 3/5;
    grid-row: 1/2;

}
.tr2{
    grid-area: tr2;
    text-align: center;
}
.tr3{
    grid-area: tr3;
    text-align: right;
    transform: translateX(-80px) translateY(-10px) rotate(90deg);

}
.container__titre2{
    margin: 21px 0 101px 0;
    display: grid;
    grid-template-columns:64px 40px 80px 80px ;
    grid-template-rows: repeat(3,minmax(25px,40px));
    width: 100%;
    gap: 16px;
    grid-template-areas: 
    " .  tra tra  tra"
    " .  tra tra  tra"
    " .  tra tra  tra";
}
.tra{
    grid-area: tra;
}
.container__titre3{
    margin: 21px 0 101px 0;
    display: grid;
    grid-template-columns:64px 40px 80px 80px ;
    grid-template-rows: auto;
    width: 100%;
    gap: 16px;
    grid-template-areas: 
    "by rs rs rs"
    "by ty .  . "
    "by ty .  . "
    "by ty tw tw"
    "by ty tw tw";
}
.by{
    grid-area: by;
    text-align: right;
    transform: translateX(-50px) translateY(-20px) rotate(90deg);
}
.rs{
    grid-area: rs;
}
.ty{
    grid-area: ty;
    text-align: right;
    transform: translateX(-30px) translateY(-20px) rotate(90deg);
}
.tw{
    grid-area: tw;
    float: right;
    text-align: right;
}
/*grid texte*/
.container__text{
    margin: 21px 0;
    width: 100%;
    display: grid;
    grid-template-columns:64px 40px 1fr 1fr ;
    grid-template-rows: auto;
    gap: 16px;
    grid-template-areas:
    "tx1 tx1 tx1 tx1"
    "tx2 tx2 tx2 tx2"
    "tx2 tx2 tx2 tx2"
    "li1 li1 li1 li1";
}
.tx1{
    grid-area: tx1;
}
.tx2{
    grid-area: tx2;
}
.li1{
    grid-area: li1;
}
/* grid text experience */
.container__text2{
    margin:  101px 0 21px 0;
    display: grid;
    grid-template-columns:20px 64px 1fr 1fr ;
    grid-template-rows:auto;
    gap: 16px;
    grid-template-areas:
    "t1 t1 t1 t1"
    "t2 t2 t2 t2"
    "t3 t3 t3  ."
    " . t4 t4 t4"
    "t5 t5 t5 t5";
}
.t1{
    grid-area: t1;
}
.t2{
    grid-area: t2;
}
.t3{
    grid-area: t3;
}
.t4{
    grid-area: t4;
}
.t5{
    grid-area: t5;
}
/*grid card personel */
.container__card{
    margin-top: 21px;
    display: grid;
    grid-template-columns:64px 40px 1fr 1fr ;
    grid-template-rows: repeat(4,auto);
    gap: 16px;
    grid-template-areas:  
    " . c1 c1   ."
    " .  . c2 c2 "
    " . c3 c3   ."
    " . .  c4 c4 ";
}
.c1{
    grid-area: c1;
}
.c2{
    grid-area: c2;
}
.c3{
    grid-area: c3;
}
.c4{
    grid-area: c4;
}
/*grid fiche tantek*/
.container__fiche{
  /*  margin-top: 35px ;*/
    display: grid;
    grid-template-columns:64px 40px 1fr 1fr;
    grid-template-rows: auto;
    gap: 16px;
    grid-template-areas:
    "ph .  tt tt"
    "ft ft ft ft"
    "ft ft ft ft"
    "fs fs fs fs";
}
.ph{
    grid-area: ph;
    margin: 13px 0 0 13px;
}
.tt{
    grid-area: tt;
    margin-top: 21px;
}
.ft{
    grid-area: ft;
}
.fs{
    grid-area: fs;
}
/*footer grid */ 
.container__footer{
    margin-top: 21px;
    padding-top: 21px;
    display: grid;
    grid-template-columns:repeat( 4, 1fr);
    grid-template-rows: repeat(3,40px);
    gap: 10px;
    grid-template-areas:
    "ot ot ot  ot"
    " . co co  ."
    "ad ad ad  .";
    align-items: center;
}
.ad{
    grid-area: ad;
    text-align: center;
}
.co{
    grid-area: co;
    text-align: center;
}
.ot{
    grid-area: ot;
}

/*police et font */
.txt__sizeText{
    width: 35ch; 
}
.txt__sizeText--min{
    width: 30ch;
    padding-left: 21px;
}
.titre{
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 21px;
}
.titre--moyen{
    font-size: 28px;
}
.titre--grand{
    font-size: 50px;
    line-height: 100%;
    float: right;
    text-align: right;
}
/*bouton with link*/
.btn__lien{
    background-color: #C80050;
    padding: 10px 20px;
    border-radius: 20px 0 20px 20px ;
    cursor: pointer;
    margin:35px 0 0  80px;
    color: #FFEBDC;
}
.btn__lien:hover{
    transition: 0.4s;
    background-color:#800033;
    border-radius: 0 20px 20px 20px ;
    padding: 10px 10px;
}

/*header*/ 
.header{
    width: 90%;
    height: 80px;
    background-color: #004F8F;
    border-radius: 30px;
    margin-left: 5%;
    display: flex;
}
.head__logo{
    width: 80px;
    margin-top: 20px;

}
/*darkmode*/
.header__darkmode{
    width: 100%;
}
.darkmode__btn{
    width: 70px;
    height: 30px;
    padding: 5px 15px;
    background-color: antiquewhite;
    border-radius: 10px;
    margin-top: 30px;
    color: #00437A;
    font-size: 10px;
    cursor: pointer;
}
.darkmode__btn--niu{
    font-size: 14px;
    color: #00437A;
}
/*them star wars*/
.bodycolor{
    background-color:black;
    color: yellow;
}
/*navigation du header*/

.navigation{
    float: right;
    display: none;
}
.nav__liste{
    display: inline-block;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
}
.nav__lien{
    font-family: 'Abril Fatface', cursive;
    font-size: 21px;
    color: #FFEBDC;
    padding: 10px 10px;
    margin: 0px 5px 0 5px;
}
.nav__lien:hover{
    background-color: #FFEBDC;
    color: #004F8F;
    border-radius: 0 20px 20px 20px ;
    transition: 0.5s;
}
.nav__lien::before{
    content: " ";
    width: 60px;
    height: 2px;
    color: #800033;
}
.nav__lien--actif{
    border-bottom: #FFEBDC 2px solid;
}
/*img case study*/ 
.txt__img{
    width: 200px;
    object-fit: cover;
}
/*burger menu */
.nav__btn{
    border: none;
    border-left:#FFEBDC 2px solid;
    border-bottom: #FFEBDC 2px solid;
    background: transparent;
    padding: 5px 10px;
    font-family: 'Abril Fatface', cursive;
    color: #FFEBDC;
    margin-top: 30px;
    border-radius: 0 10px 10px 10px ;
}
.nav__btn:hover{
    background-color: #FFEBDC;
    color: #004F8F;
    transition: 0.5s;
}
body[data-navMenu] .navigation{
    height: 360px;
    width: 90%;
    border-radius: 20px 20px 20px 20px ;
    background-color: #004F8F;
    display: flex;
    position: fixed;
    top: 80px;
    left: 5%;
    transition:0.6s;
}
body[data-navMenu] .nav__liste{
    display: flex;
    flex-direction: column;
    float: right;
    padding-left: 40%;
    margin-top: 35px;
}
body[data-navMenu] .nav__liliste{
    margin: 21px 0;
}
body [data-navMenu] .nav__btn{
    color: #FFEBDC;
    border-top: #FFEBDC 2px solid ;
    border-right: #FFEBDC 2px solid ;
}
body[data-navMenu] .nav__btn--close{
    border-top: 2px solid #FFEBDC;
    border-left: 2px solid #FFEBDC;
}
/* card perso*/
.box{
    background-color: #00437A;
    width: 96px;
    height: 96px;
    border-radius: 20px 0 20px 20px ;

}

.box:hover{
    background-color: #002645;
    border-radius: 0 20px 20px 20px ;
    transition: 0.6s;
}
.box__text{
    color: antiquewhite;
    text-align: left;
}
.box__link{
    width: 20px;
    height: 20px;
    fill: #C80050;
    background-color: #FFEBDC;
    padding: 5px;
    border-radius: 10px;
    margin:0 0 0  30px;
}
.box__align{
    margin: 15px 0 0 15px;
}
.box__link--petit{
    margin-top: 0;
}
/* boutton for change theme for star wars*/
.changeTH{
    margin: 16px 0 0 21px;
}
.main__ChangeST{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #004F8F;
    cursor: pointer;
    margin-left: 5%;
}
.ChangeST__ds{
    width: 30px;
    height:30px;
    display: block;
    align-items: center;
    padding: 10px ;
    fill: #FFEBDC;
}
.main__ChangeST:hover{
    background-color: greenyellow;
    transition: 0.7s;
    -webkit-transform: translateX(10px); 
    -moz-transform: translateX(10px); 
    -ms-transform: translateX(10px); 
    transform: translateX(10px); 
}
.ChangeST__text{
    display: none;
}
/*lien dans le texte*/
.presentation__lien{
    color: #C80050;
   /* border-left: #C80050 solid 1px;
    border-top: #C80050 solid 1px;*/
    border-bottom: 2px solid #800033;
    padding: 5px;
    border-radius: 20px 0 20px 20px ;
    
}
.presentation__lien:hover{
    background-color: rgba(128, 0, 51,0.1);
    border-bottom: #C80050 solid 3px;
    border-left: #C80050 solid 3px;
    border-top: none;
    transition: 0.2s;
}
.presentation__lien:visited{
    color:#630028 ;
    border-right: #800033 solid 2px;
    border-bottom: #800033 solid 2px;
    border-radius: 0 20px 20px 20px ;
    padding: 5px;
}
.liste__lien{
    margin: -40px 0 0 110px;
}
/*Fiche de présentations*/
.fiche{
    background-color: #004F8F;
    border-radius: 20px 0 20px 20px ;
    color: #FFEBDC;
    width: 300px;
}
.fiche__pht{
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
.fiche__resseaux{
    margin-left:60px ;
}
.fiche__liste{
    display: flex;
    flex-direction: row;
}
.fiche__rs{
    background-color: #FFEBDC;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin: 0 8px 21px 8px ;
}
.rs__svg{
    fill: #004F8F;
    align-items: center;
    margin: 8px;
}
/*reworking texte */
.txt__align{
    margin: 35px 0 21px 0;
}
.txt__align--other{
    margin: 21px 0 21px 0;
}
.titre--align{
    margin-bottom: 21px;

}
/*footer*/
.footer{
    width: 100%;
    height: 160px;
    border-radius: 30px 30px 0 0 ;
    background-color: #004F8F;
}
.ad__liste{
    display: flex;
    flex-direction: row;
}
.ad__element{
    margin: 0 60px;
}
.footer__lien{
    color: #FFEBDC;
    font-size: 16px;
    padding: 5px 5px;
}
.footer__lien:hover {
    background-color: #FFEBDC;
    color: #004F8F;
    transition: 0.8s;
    border-radius: 0 8px 8px 8px ;
}
.footer__lien--non{
    color: #FFEBDC;
    font-size: 16px;
}
.footer__date{
    color: #FFEBDC;
}
.ot__liste{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.liste__lienOt{
    margin: 0px 10px;
}
@media (min-width:500px){
    .main--modif{
        margin-left: 30px;
    }
    .txt__sizeText{
        width: 40ch;
    }
}
@media (min-width:600px){
    body{
   line-height: 180%;
    }
    .txt__sizeText{
        width: 50ch;
    }
    .container{
        margin:50px 5%;
    display: grid;
    grid-template-columns:64px 40px 1fr 1fr 64px 40px 40px ;
    grid-template-rows: auto;
     grid-template-areas: 
        "tr tr tr tr tr tr tr"
        " . s1 s1 s1 s1 s1 . "
        " . s1 s1 s1 s1 s1 ."
        "s2 s2 s2 s2 s2 s2 s2"
        "s2 s2 s2 s2 s2 s2 s2"
        " . s3 s3 s3 s3 s3 s3"
        " . s4 s4 s4 s4 s4 s4";
    gap: 16px;
    }
    .container__titre{
        grid-template-columns:64px 40px 1fr 1fr 64px 40px 40px;
        grid-template-rows: auto;
        grid-template-areas: 
        "tr3 tr3  .  tr1 tr1 tr1 . "
        " .  tr2 tr2 .  .  .   .  ";
    }
    .tr1{
        grid-area: tr1;
    }
    .container__titre2{
        grid-template-columns:64px 40px 1fr 1fr 64px 40px 40px;
        grid-template-rows: auto;
        grid-template-areas: 
        " . .  . tra tra tra  ."
        " . .  . tra tra tra  .";
    }
    .container__titre3{
        grid-template-columns:64px 40px 1fr 1fr 64px 40px 40px ;
        grid-template-rows: auto;
        grid-template-areas: 
        " . by .  rs rs rs . "
        " . by .  ty .  .  . "
        " . by .  ty .  .  . "
        " . by .  ty tw tw . "
        " . by .  ty tw tw . ";
    }
    .container__txte {
        display: grid;
        width: 100%;
        grid-template-columns:64px 40px 1fr 1fr 64px 40px 40px;
        grid-template-rows: auto;
        gap: 16px;
        grid-template-areas:
        " . ct ct ct . . ."
        " . cp cp cp cp . ."
        "cc cc cc cc cc cc cc"
    }
    .ct{
        grid-area: ct;
    }
    .cp{
        grid-area: cp;
    }
    .cc{
        grid-area: cc;
    }
    .container__text2{
        margin:  101px 0 21px 0;
        display: grid;
        grid-template-columns:64px 40px 1fr 1fr 64px 40px 40px;
        grid-template-rows:auto;
        gap: 16px;
        grid-template-areas:
        " t1 t1 t1 t1 . ."
        " t2 t2 t2 t2 . ."
        " t3 t3 t3  . . ."
        " t4 t4 t4 t4 . ."
        " t5 t5 t5 t5 . .";
    }
    .container__card{
        width: 100%;
        grid-template-columns:64px 40px 1fr 1fr 64px 40px 40px;
        grid-template-rows: repeat(4,auto);
        gap: 16px;
        grid-template-areas:  
        " . c1 c1  .  .  .  ."
        " .  . c2 c3 c3  . ."
        " .  .  .  . c4 c4 .";
    }
    .darkmode__btn{
        width: 150px;
        font-size: 14px;
    }
} 
@media(min-width:1000px){
    .txt__sizeText--grand{
        width: 55ch;
    }
    body{
        font-family: 'Arvo', serif;
        font-size: 20px;
    }
    .titre{
        font-size: 27px;
        font-family: 'Abril Fatface', cursive;
    }
    .titre--grand{
        font-size: 84px;
    }
    .titre--moyen{
        font-size: 35px;
    }
    
    .container{
    max-width:1440px;
    margin:50px 5%;
    display: grid;
    grid-template-columns:47px 1fr 1fr 55px 1fr 1fr 1fr 89px 80px 56px 1fr ;
    grid-template-rows: auto;
     grid-template-areas: 
        "tr tr tr tr tr tr tr tr tr tr tr"
        " . s1 s1 s1 s1 s1 s1 s1 s1 s1 s1"
        " . s1 s1 s1 s1 s1 s1 s1 s1 s1 s1"
        "s2 s2 s2 s2 s2 s2 s2 s2 s2 s2 s2"
        "s2 s2 s2 s2 s2 s2 s2 s2 s2 s2 s2"
        " .  . s3 s3 s3 s3 s3 s3 s3 s3 s3"
        " .  . s4 s4 s4 s4 s4 s4 s4 s4 s4"
        " .  . s4 s4 s4 s4 s4 s4 s4 s4 s4"
        " .  . s4 s4 s4 s4 s4 s4 s4 s4 s4";
    gap: 20px;
    }
    .container__titre{
        grid-template-columns:1fr 1fr 1fr 55px 1fr 1fr 1fr 89px 1fr 56px 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        " . . tr1 tr1 tr1 tr1 tr1 tr1 tr3 . ."
        " . . tr2 tr2 .   .   .   .   tr3 . .";
    }
    .tr3{
        grid-area: tr3;
        text-align: right;
        transform: translateX(-20px) translateY(-10px) rotate(90deg);
    }
    .container__titre2{
        grid-template-columns:47px 1fr 1fr 55px 1fr 1fr 1fr 89px 80px 56px 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        " . . . . tra tra tra . . . ."
        " . . . . tra tra tra . . . .";
    }
    .container__titre3{
        grid-template-columns:47px 1fr 1fr 55px 1fr 1fr 1fr 89px 80px 56px 1fr ;
        grid-template-rows: auto;
        grid-template-areas: 
        " .  .  .   .  rs rs rs rs  . by ."
        " . tw tw  ty  .  .  .  .   . by . "
        " . tw tw  ty  .  .  .  .   . by ."
        " .  .  .  ty  .  .  .  .   . by ."
        " .  .  .  ty  .  .  .  .   . by . ";
    }
    .container__header{
        grid-template-columns: repeat(11, 1fr);
        grid-template-areas: 
        ". dk . lg nv  nv nv nv nv nv nv ";
    }
    .container__card{
        grid-template-columns:1fr 1fr 189px 55px 119px 1fr 1fr 89px 80px 56px 1fr;
        grid-template-rows:auto;
        grid-template-areas:  
        " . . c1 c2  . c3 . c4 . . .";
    }
    .container__text2{
        grid-template-columns:47px 1fr 1fr 55px 1fr 1fr 1fr 89px 80px 56px 1fr;
        grid-template-rows: auto;
        grid-template-areas:
        " . t1 t1 t1 t1 t1 .  .  . . ."
        " . t2 t2 t2 t2 t2 .  .  . . ."
        " .  .  . t3 t3 t3 t3 t3 . . ."
        " . t4 t4 t4 t4  .  .  . . . ."
        " .  . t5 t5 t5 t5 t5  . . . .";
    }
    .nav__btn{
        display: none;
    }
    .navigation{
        color: #FFEBDC;
        display: block;
    }
    .nav__liste{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 20px;
    }
    .nav__lien{
        font-size: 18px;
    }
    /*resize boxlink other perso */
    .box{
        background-color: #00437A;
        width: 196px;
        height: 130px;
        border-radius: 20px 0 20px 20px ;
    }
    .box__link{
        float: right;
        padding: 10px;
        margin:25px 20px 0  30px;
    }
    /*Fiche de présentations*/
    .fiche{
        width: 550px;
        margin-left: 67px;
    }
    .fiche__pht{
        width: 110px;
        height:110px;
        border-radius: 60px;
    }
    .fiche__resseaux{
        margin-left:190px ;
    }
    .container__fiche{
        /*  margin-top: 35px ;*/
        display: grid;
        grid-template-columns:47px 1fr 1fr 55px 1fr 1fr 1fr 89px 80px 56px 1fr;
        grid-template-areas:
        " .  ph  tt tt tt .  .  .  . . ."
        " .  ft  ft ft ft .  .  .  . . ."
        " .  ft  ft ft ft .  .  .  . . ."
        " .  fs  fs fs fs .  .  .  . . .";
    }
    .footer__lien{
        font-size: 18px;
    }
    .footer__dwm{
        width: 150%;
    }
  
}
@media(min-width:1200px){
    .nav__lien{
        font-size: 21px;
    }
}
/*darkmode*/
.darkmode {
    background-color: #004F8F;
}
.darkmode.txt {
    color: #FFEBDC;
}  
.darkmode .presentation__lien{
    color: #ffba7d;
    border-bottom: 2px solid #ffba7d;
}
.darkmode .presentation__lien:hover{
    color: #002645;
    background-color: #E5F3FF;
    border-bottom: #ffba7d solid 3px;
    border-left: #ffba7d solid 3px;
}

.darkmode .btn__lien{
    background-color: #C80050;
    padding: 10px 20px;
    border-radius: 20px 0 20px 20px ;
    cursor: pointer;
    margin:35px 0 0  80px;
    color: #FFEBDC;
}
.darkmode .btn__lien:hover{
    transition: 0.4s;
    background-color:#E5F3FF;
    border-radius: 0 20px 20px 20px ;
    padding: 10px 10px;
    color: #002645;
}
.darkmode .box,
.darkmode .header,
.darkmode .main__ChangeST,
.darkmode .footer,
.darkmode .fiche{
    background-color: #E5F3FF;
}
.darkmode .box__text, 
.darkmode .footer__lien ,
.darkmode .footer__lien--non, 
.darkmode .footer__date{
    color: #002645;
}

.darkmode .footer__lien:hover{
    background-color: #00437A;
    color: #FFEBDC;

}
.darkmode .nav__lien{
    color: #00437A;
    font-size: 21px;
}
.darkmode .nav__lien:hover{
    background-color: #00437A;
    color: #FFEBDC;
}
.darkmode .nav__lien--actif{
    border-bottom: #00437A 2px solid;
}
.darkmode .box:hover{
    background-color: #ffba7d;
}
.darkmode .nav__btn{
    border-left:#00437A 2px solid;
    border-bottom: #00437A 2px solid;
    color: #00437A;

}
.darkmode .fiche{
    color: #00437A;
}
.darkmode .nav__btn:hover{
    background-color: #00437A;
    color: #FFEBDC;
    transition: 0.5s;
}
 body[data-navMenu].darkmode .navigation{
    background-color: #E5F3FF;

}
.darkmode .fiche__rs{
    background-color: #00437A;

}
.darkmode .rs__svg{
    fill: #FFEBDC;
}
.darkmode .rs__svg:hover{
    fill: #ffba7d;
}