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

*{
    padding:0px;
    margin:0px;
    text-decoration: none;
}

body{
    font-family: 'Labrada', serif;
    background-size: cover;
    margin-left:15%;
    background-color:#f3f3f3;
}

html{
    height: 100%;
    margin: 0;
}

/*-- LIENS--*/

a{
    color: black;
    text-decoration: none;
}
/*--HEADER--*/
.Constance{
    font-size:20px;
}
.selected{
    text-decoration: underline;
}
.hoverhead{
    text-decoration: none;
}
.hoverhead:hover{
    text-decoration: underline;
}

#pageprincipale{
    z-index:99;
    background-color:#f3f3f3;
    height:5%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    padding-top:5px;
    padding-left:35px;
    padding-bottom:15px;
    position: fixed;
    overflow: none;
}
/*----HEADER TELEPHONE---*/
@media screen and (orientation: portrait){
.Constance{
    font-size:30px;
}
.selected{
    text-decoration: underline;
}
.hoverhead{
    font-size:26px;
    text-decoration: none;
}
.hoverhead:hover{
    text-decoration: underline;
}
#pageprincipale{
    z-index:99;
    background-color:#f3f3f3;
    height:3%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    padding-top:5px;
    padding-left:35px;
    padding-bottom:15px;
    position: fixed;
    overflow: none;
}
}

/*--TEXTES--*/
h2{
    font-weight:normal;
    color:black;
    text-align:left;
    font-size:55px;
    padding-left:200px;
    padding-top:60px; 
    padding-bottom:10px; 
}
h3{
    font-weight:normal;
    font-size:12px;
    padding-left:200px;
    padding-top:60px; 
    padding-bottom:10px; 
}

.paragraphecentre{
    text-align:center;
    color:#000;
    font-size:0.9em;
    margin-bottom:10px;
    margin-top:10px;
    font-style: italic;
    padding-left:300px;
    padding-right:300px;
}

.en{
    color:#8b8b8b;
    font-size:0.8em;
    padding-left:300px;
    padding-right:300px;
    margin-top:30px;
    margin-bottom:100px;
    text-align:left;
}
.encentre{
    color:#8b8b8b;
    font-size:0.8em;
    margin-bottom:20px;
    text-align:center;
    font-style: italic;
    padding-left:300px;
    padding-right:300px;
}
.st{
    text-decoration: bold;
    color:black;
    text-align:center;
    font-size:40px;
    padding-top:40px; 
    padding-bottom:10px;
}

.textspecial{
    padding-left: 20%;
    font-size:10pt;  
}
/*menu*/
#menu {
    width:14%;
    padding:20px;
    padding-top: 50px;
    background-color:#f3f3f3;
    color: black; 
    position: fixed;
    left: 0;
    bottom:0;
    top:0;
    overflow: none;
    z-index:97; 
}

/*texte menu*/
.menu-txt {
    text-color: black;
    margin-top:10px;
    padding-left:15px;
    font-size: 10pt;
    line-height: 20px;
}

@media screen and (orientation: portrait){
/*menu*/
#menu {
    width:20%;
    padding:5px;
    padding-top:80px;
    background-color:#f3f3f3;
    color: black; 
    position: fixed;
    left: 0;
    bottom:0;
    top:0;
    overflow: none;
    z-index:97; 
}

/*texte menu*/
.menu-txt {
    text-color: black;
    margin-top:10px;
    padding-left:5px;
    font-size: 15pt;
    line-height: 30px;
}
}

li {
    text-decoration: none;
    list-style-type: none;
    padding-left:20px;
}
li:hover{
    text-decoration: underline;
}

/*--PAGES PROJETS--*/

 /*Mise en page projets détaillés*/

.feuillet{
    margin-top:100px;
    position:relative;
    width:100%;
    min-height:1000px;
    z-index:10;
    color:black;
    padding-bottom: 120px;
}

.feuillet p{
    color:#000;
    font-size:0.95em;
    padding-left:200px;
    padding-right:300px;
    margin-bottom:10px;
    margin-top:20px;
    text-align:left;
}
/*----- VERSION PHONE ------*/
@media screen and (orientation: portrait){
    .feuillet p{
    color:#000;
    font-size:14px;
    padding-left:150px;
    padding-right:100px;
    margin-bottom:20px;
    margin-top:20px;
    text-align:left;
    line-height: 1.1em;
    overflow:auto;
}
.en{
    color:#8b8b8b;
    font-size:13px;
    padding-left:150px;
    padding-right:100px;
    margin-top:30px;
    margin-bottom:50px;
    text-align:left;
    line-height: 1.1em;
    overflow:auto;
}
h2{
    font-weight:normal;
    color:black;
    text-align:left;
    font-size:80px;
    line-height: 1em;
    padding-left:150px;
    padding-top:60px; 
    padding-bottom:10px; 
}
h3{
    font-weight:normal;
    font-size:0.9em;
    padding-left:70px;
    padding-top:60px; 
    padding-bottom:10px; 
}
.paragraphecentre{
    text-align:center;
    color:#000;
    font-size:0.8em;
    margin-bottom:10px;
    margin-top:10px;
    font-style: italic;
    padding-left:100px;
    padding-right:100px;
}
.encentre{
    color:#8b8b8b;
    font-size:0.7em;
    margin-bottom:20px;
    text-align:center;
    font-style: italic;
    padding-left:100px;
    padding-right:100px;
}
}
/*--Mise en page des images--*/
 /*Bloc vertical x3 */
.boite_vertical {  
    padding-left:200px;
    padding-right:200px;
    display: grid;
    grid-template-columns: 64% 35% 35%;
    grid-template-rows: 72% 27% 27%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
        "grandbloc minibloccoté1 ."
        "grandbloc minibloccoté2 ."
        ". . .";
}
.grandbloc { 
    grid-area: grandbloc;
}
.minibloccoté1 {
    grid-area: minibloccoté1;
}
.minibloccoté2 { 
    grid-area: minibloccoté2; 
}
 /*Bloc vertical x3-reverse */
.boite_vertical_reverse { 
    padding-left:250px;
    padding-right:250px; 
    display: grid;
    grid-template-columns: 51.5% 47.5%;
    grid-template-rows: 44.5% 44.5%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "minibloccoté1_reverse- grandbloc_reverse"
    "minibloccoté2_reverse- grandbloc_reverse";
}

.grandbloc_reverse {
    grid-area: grandbloc_reverse; 
}

.minibloccoté1_reverse- { 
    grid-area: minibloccoté1_reverse-; 
}

.minibloccoté2_reverse- { 
    grid-area: minibloccoté2_reverse-; 
}

 /*Bloc vertical x2- pages maquettes,*/
.boite_horizontal {  display: grid;
    padding-left:200px;
    padding-right:200px;
    grid-template-columns: 32% 33% 33%;
    grid-template-rows: 52% 27%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "bloc_horizontal bloc_horizontal bloc_horizontal"
    "miniblocbas1 miniblocbas2 miniblocbas3"
    ". . .";
}
.bloc_horizontal { 
    grid-area: bloc_horizontal; 
}
.miniblocbas1 { 
    grid-area: miniblocbas1; 
}
.miniblocbas2 { 
    grid-area: miniblocbas2; 
}
.miniblocbas3 { 
    grid-area: miniblocbas3; 
}
 /*Bloc vertical GRAND - pages ville,*/
.boite_horizontal_grand {  display: grid;
    padding-left:200px;
    padding-right:200px;
    bottom:0px;
    grid-template-columns: 32.5% 33% 32.5%;
    grid-template-rows: 74% 25%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "bloc_horizontal_grand bloc_horizontal_grand bloc_horizontal_grand"
    "miniblocbas1_grand miniblocbas2_grand miniblocbas3_grand"
    ". . .";
}
.bloc_horizontal_grand { 
    grid-area: bloc_horizontal_grand; 
}
.miniblocbas1_grand { 
    grid-area: miniblocbas1_grand; 
}
.miniblocbas2_grand { 
    grid-area: miniblocbas2_grand; 
}
.miniblocbas3_grand { 
    grid-area: miniblocbas3_grand; 
}
/*Bloc de 2*/
.blocde2 {  
    padding-left:200px;
    padding-right:200px;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 100%;
    gap: 0px 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde2_1 blocde2_2";
}
.blocde2_2 { 
    grid-area: blocde2_2; 
}
.blocde2_1 { 
    grid-area: blocde2_1; 
}
/*bloc de 2-petit*/
.blocde2_small {  
    padding-left:300px;
    padding-right:300px;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 100%;
    gap: 0px 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde2_1_small blocde2_2_small";
}
.blocde2_2_small { 
    grid-area: blocde2_2_small; 
}
.blocde2_1_small { 
    grid-area: blocde2_1_small; 
}
/*Bloc x4 - pages IP,*/
.blocde4 {  
    padding-left:200px;
    padding-right:200px;
    display: grid;
    grid-template-columns: 24.75% 24.75% 24.75% 24.75%;
    grid-template-rows: 100%;
    gap: 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde4_1 blocde4_2 blocde4_3 blocde4_4";
}

.blocde4_1 { 
    grid-area: blocde4_1; 
}
.blocde4_2 { 
    grid-area: blocde4_2; 
}
.blocde4_3 { 
    grid-area: blocde4_3; 
}
.blocde4_4 { 
    grid-area: blocde4_4; 
}
/*bloc x3*/
.blocde3 {
    padding-left:200px;
    padding-right:200px;
    display: grid;
    grid-template-columns: 32.5% 33% 32.5%;
    grid-template-rows: 100% 100%;
    gap: 0px 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde3_1 blocde3_2 blocde3_3"
    ". . .";
}
.blocde3_1 { 
    grid-area: blocde3_1; 
}
.blocde3_2 { 
    grid-area: blocde3_2; 
}
.blocde3_3 { 
    grid-area: blocde3_3; 
}

.blocde3petit{
    padding-left:250px;
    padding-right:250px;
    display: grid;
    grid-template-columns: 32.5% 33% 32.5%;
    grid-template-rows: 100% 100%;
    gap: 0px 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde3petit_1 blocde3petit_2 blocde3petit_3"
    ". . .";
}
.blocde3petit_1 { 
    grid-area: blocde3petit_1; 
}
.blocde3petit_2 { 
    grid-area: blocde3petit_2; 
}
.blocde3petit_3 { 
    grid-area: blocde3petit_3; 
}

/*trois blocs 2 et 1 grand*/
.trois-blocs {  
    padding-left:200px;
    padding-right:200px;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 49.5% 49.5%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "trois-boites_1 trois-boites_2"
    "trois-boites_3 trois-boites_3";
}
.trois-boites_1 {
    grid-area: trois-boites_1; 
}
.trois-boites_2 { 
    grid-area: trois-boites_2; 
}
.trois-boites_3 { 
    grid-area: trois-boites_3; 
}
/*blocs x3 1 grand 2 petits*/
.boitesx3 {  display: grid;
    padding-left:200px;
    padding-right:200px;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 60.5% 38.5;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "grandeboitex3_1 grandeboitex3_1"
    "boitex3_2 boitex3_3";
}

.grandeboitex3_1 {
    grid-area: grandeboitex3_1; 
}

.boitex3_2 { 
    grid-area: boitex3_2;
}

.boitex3_3 { 
    grid-area: boitex3_3; 
}

/*bloc de 4x4*/
.bloc4x4 {      
    padding-left:200px;
    padding-right:200px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50fr;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "bloc4x4_1 bloc4x4_2"
    "bloc4x4_3 bloc4x4_4";
}

.bloc4x4_1 {
    grid-area: bloc4x4_1; 
}
.bloc4x4_2 { 
    grid-area: bloc4x4_2; 
}
.bloc4x4_3 { 
    grid-area: bloc4x4_3; 
}
.bloc4x4_4 { 
    grid-area: bloc4x4_4; 
}
/*img seule x1*/
.img_feuillet{
    padding-left:200px;
    padding-right:200px;
}
.bloc6 {  
    padding-left:200px;
    padding-right:200px;
    display: grid;
    grid-template-columns: 32.5% 32.5% 32.5%;
    grid-template-rows: 49.5% 49.5%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "bloc6_1 bloc6_2 bloc6_3"
    "bloc6_4 bloc6_5 bloc6_6"
    ". . .";
}
.bloc6_1 {
    grid-area: bloc6_1; 
}
.bloc6_2 { 
    grid-area: bloc6_2; 
}
.bloc6_3 { 
    grid-area: bloc6_3; 
}
.bloc6_4 { 
    grid-area: bloc6_4; 
}
.bloc6_5 { 
    grid-area: bloc6_5; 
}
.bloc6_6 { 
    grid-area: bloc6_6; 
}
.iframevoile {
    padding-left:200px;
    padding-right:200px;
    overflo:hidden;
}

/*recadrer toutes les images overflow*/
#recadrer{
    width:100%;
    height:100%;
    object-fit: cover;
}

/*--FOOTER SUITE*/
.suite{
    background-color:#f3f3f3;
    position:relative;
    font-size:15px;
    width:100%;
    height:40px;
    z-index:10;
    color:black;
    text-align:center;
    padding-top: 20px;
}
.suite a{
   color:black;
}
/*----- VERSION PHONE ------*/
@media screen and (orientation: portrait){
 /*Bloc vertical x3 */
.boite_vertical {  
    padding-left:50px;
    padding-right:50px;
    display: grid;
    grid-template-columns: 64% 35% 35%;
    grid-template-rows: 72% 27% 27%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
        "grandbloc minibloccoté1 ."
        "grandbloc minibloccoté2 ."
        ". . .";
}
.grandbloc { 
    grid-area: grandbloc;
}
.minibloccoté1 {
    grid-area: minibloccoté1;
}
.minibloccoté2 { 
    grid-area: minibloccoté2; 
}
 /*Bloc vertical x3-reverse */
.boite_vertical_reverse { 
    padding-left:70px;
    padding-right:70px; 
    display: grid;
    grid-template-columns: 51.5% 47.5%;
    grid-template-rows: 44.5% 44.5%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "minibloccoté1_reverse- grandbloc_reverse"
    "minibloccoté2_reverse- grandbloc_reverse";
}

.grandbloc_reverse {
    grid-area: grandbloc_reverse; 
}

.minibloccoté1_reverse- { 
    grid-area: minibloccoté1_reverse-; 
}

.minibloccoté2_reverse- { 
    grid-area: minibloccoté2_reverse-; 
}

 /*Bloc vertical x2- pages maquettes,*/
.boite_horizontal {  display: grid;
    padding-left:50px;
    padding-right:50px;
    grid-template-columns: 32% 33% 33%;
    grid-template-rows: 52% 27%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "bloc_horizontal bloc_horizontal bloc_horizontal"
    "miniblocbas1 miniblocbas2 miniblocbas3"
    ". . .";
}
.bloc_horizontal { 
    grid-area: bloc_horizontal; 
}
.miniblocbas1 { 
    grid-area: miniblocbas1; 
}
.miniblocbas2 { 
    grid-area: miniblocbas2; 
}
.miniblocbas3 { 
    grid-area: miniblocbas3; 
}
 /*Bloc vertical GRAND - pages ville,*/
.boite_horizontal_grand {  display: grid;
    padding-left:50px;
    padding-right:50px;
    bottom:0px;
    grid-template-columns: 32.5% 33% 32.5%;
    grid-template-rows: 74% 25%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "bloc_horizontal_grand bloc_horizontal_grand bloc_horizontal_grand"
    "miniblocbas1_grand miniblocbas2_grand miniblocbas3_grand"
    ". . .";
}
.bloc_horizontal_grand { 
    grid-area: bloc_horizontal_grand; 
}
.miniblocbas1_grand { 
    grid-area: miniblocbas1_grand; 
}
.miniblocbas2_grand { 
    grid-area: miniblocbas2_grand; 
}
.miniblocbas3_grand { 
    grid-area: miniblocbas3_grand; 
}
/*Bloc de 2*/
.blocde2 {  
    padding-left:50px;
    padding-right:50px;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 100%;
    gap: 0px 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde2_1 blocde2_2";
}
.blocde2_2 { 
    grid-area: blocde2_2; 
}
.blocde2_1 { 
    grid-area: blocde2_1; 
}
/*bloc de 2-petit*/
.blocde2_small {  
    padding-left:100px;
    padding-right:100px;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 100%;
    gap: 0px 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde2_1_small blocde2_2_small";
}
.blocde2_2_small { 
    grid-area: blocde2_2_small; 
}
.blocde2_1_small { 
    grid-area: blocde2_1_small; 
}
/*Bloc x4 - pages IP,*/
.blocde4 {  
    padding-left:50px;
    padding-right:50px;
    display: grid;
    grid-template-columns: 24.75% 24.75% 24.75% 24.75%;
    grid-template-rows: 100%;
    gap: 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde4_1 blocde4_2 blocde4_3 blocde4_4";
}

.blocde4_1 { 
    grid-area: blocde4_1; 
}
.blocde4_2 { 
    grid-area: blocde4_2; 
}
.blocde4_3 { 
    grid-area: blocde4_3; 
}
.blocde4_4 { 
    grid-area: blocde4_4; 
}
/*bloc x3*/
.blocde3 {
    padding-left:50px;
    padding-right:50px;
    display: grid;
    grid-template-columns: 32.5% 33% 32.5%;
    grid-template-rows: 100% 100%;
    gap: 0px 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde3_1 blocde3_2 blocde3_3"
    ". . .";
}
.blocde3_1 { 
    grid-area: blocde3_1; 
}
.blocde3_2 { 
    grid-area: blocde3_2; 
}
.blocde3_3 { 
    grid-area: blocde3_3; 
}

.blocde3petit{
    padding-left:120px;
    padding-right:120px;
    display: grid;
    grid-template-columns: 32.5% 33% 32.5%;
    grid-template-rows: 100% 100%;
    gap: 0px 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "blocde3petit_1 blocde3petit_2 blocde3petit_3"
    ". . .";
}
.blocde3petit_1 { 
    grid-area: blocde3petit_1; 
}
.blocde3petit_2 { 
    grid-area: blocde3petit_2; 
}
.blocde3petit_3 { 
    grid-area: blocde3petit_3; 
}

/*trois blocs 2 et 1 grand*/
.trois-blocs {  
    padding-left:50px;
    padding-right:50px;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 49.5% 49.5%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "trois-boites_1 trois-boites_2"
    "trois-boites_3 trois-boites_3";
}
.trois-boites_1 {
    grid-area: trois-boites_1; 
}
.trois-boites_2 { 
    grid-area: trois-boites_2; 
}
.trois-boites_3 { 
    grid-area: trois-boites_3; 
}
/*blocs x3 1 grand 2 petits*/
.boitesx3 {  display: grid;
    padding-left:50px;
    padding-right:50px;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 60.5% 38.5;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "grandeboitex3_1 grandeboitex3_1"
    "boitex3_2 boitex3_3";
}

.grandeboitex3_1 {
    grid-area: grandeboitex3_1; 
}

.boitex3_2 { 
    grid-area: boitex3_2;
}

.boitex3_3 { 
    grid-area: boitex3_3; 
}

/*bloc de 4x4*/
.bloc4x4 {      
    padding-left:50px;
    padding-right:50px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50fr;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "bloc4x4_1 bloc4x4_2"
    "bloc4x4_3 bloc4x4_4";
}

.bloc4x4_1 {
    grid-area: bloc4x4_1; 
}
.bloc4x4_2 { 
    grid-area: bloc4x4_2; 
}
.bloc4x4_3 { 
    grid-area: bloc4x4_3; 
}
.bloc4x4_4 { 
    grid-area: bloc4x4_4; 
}
/*img seule x1*/
.img_feuillet{
    padding-left:50px;
    padding-right:50px;
}
.bloc6 {  
    padding-left:50px;
    padding-right:50px;
    display: grid;
    grid-template-columns: 32.5% 32.5% 32.5%;
    grid-template-rows: 49.5% 49.5%;
    gap: 1% 1%;
    grid-auto-flow: row;
    grid-template-areas:
    "bloc6_1 bloc6_2 bloc6_3"
    "bloc6_4 bloc6_5 bloc6_6"
    ". . .";
}
.bloc6_1 {
    grid-area: bloc6_1; 
}
.bloc6_2 { 
    grid-area: bloc6_2; 
}
.bloc6_3 { 
    grid-area: bloc6_3; 
}
.bloc6_4 { 
    grid-area: bloc6_4; 
}
.bloc6_5 { 
    grid-area: bloc6_5; 
}
.bloc6_6 { 
    grid-area: bloc6_6; 
}
.iframevoile {
    padding-left:50px;
    padding-right:50px;
    overflo:hidden;
}

/*--FOOTER SUITE*/
.suite{
    background-color:#f3f3f3;
    position:relative;
    font-size:35px;
    width:100%;
    height:40px;
    z-index:10;
    color:black;
    text-align:center;
    padding-top: 20px;
    margin-bottom:20px;
}
.suite a{
   color:black;
}
}