@font-face {
    font-family: 'Estrada';
    src: url('../fonts/estrada/Estrada-Signature-free.eot');
    src: url('../fonts/estrada/Estrada-Signature-free.eot?#iefix') format('embedded-opentype'),
         url('../fonts/estrada/Estrada-Signature-free.woff2') format('woff2'),
         url('../fonts/estrada/Estrada-Signature-free.woff') format('woff'),
         url('../fonts/estrada/Estrada-Signature-free.ttf')  format('truetype'),
         url('../fonts/estrada/Estrada-Signature-free.svg#Estrada Signature') format('svg');
}

* {text-rendering:optimizelegibility;}
*, *:before, *:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

body, html {width:100%; height:100%;}

.cookie-message {position:fixed; bottom:0; width:100%; margin:0 auto; padding:2rem 2rem 1.5rem 2rem; background-color:#cc4a22; z-index: 99; box-shadow:0px 0px 10px #595959;}
a.cookiebar-close {position:relative; display:block; width:200px; cursor:pointer; margin:1rem auto 0 auto;}
.cookie-message p {font-size:90%; color:white; text-align: center;}

/* End Modals */

:root {
  --FontColor: #424242;
  --TitleFont: "Lora", serif; 
  --TextFont: "Roboto", sans-serif;
  --Marron:#5f5b52c9;
  --MainTextsColor:#5e5e5e;
  --ContentsTitles: 300 270% "Roboto", sans-serif;
  --ContentsSousTitles: 300 140% "Roboto", sans-serif;
  --ContentsTextes: 300 120% "Roboto", sans-serif;
  --Link:#950909;
  --LinkHover:green;
  
}

.G100 {font-weight:100}
.G300 {font-weight:300}
.G400 {font-weight:400}
.G500 {font-weight:500}

button:focus{background-color:rgb(123, 174, 230)}

.btn-small {height:2.1rem}
.btn-small i {font-size:inherit}
.btn-small i.left {margin-right:8px;}
.btn-small i.right {margin-left:8px;}

.btn-very-small i {font-size:inherit}
.btn-very-small i.left {margin-right:6px;}
.btn-very-small i.right {margin-left:6px;}

.btn-very-very-small i {font-size:inherit}
.btn-very-very-small i.left {margin-right:4px;}
.btn-very-very-small i.right {margin-left:4px;}

.btn-cb {font-size:115%; font-weight:400; line-height:.1em; padding:25px 40px; background-color:#0b5db1; color:#fff;}
.btn-cb:hover {background-color:#6d8297;color:#fff;}
.btn-blue {background-color:rgb(89, 124, 183, .8);color:#fff;}
.btn-blue:hover {background-color:rgb(89, 124, 183);color:#fff;}
.btn-red {background-color:rgb(230, 123, 123, .8);color:#fff;}
.btn-red:hover {background-color:rgb(230, 123, 123);color:#fff;}

body {font:100% var(--TextFont); color:var(--FontColor);}

.wrapper {margin: 0 auto;}
div.FlexCentral {display:flex; flex-direction:column; align-items:center;}
div.FlexCentral div.Central {display:flex; width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center;}
section#cover .FullImg {position:relative; top:0; left:0; width:100%; min-height:calc(100vh - 30px); overflow:hidden;}
div.FlexCentral div.Central div.MainTitle h1,
div.FlexCentral div.Central div.MainTitle h3 {text-align:center; color:white; text-shadow:1px 1px 2px #393939;}
div.FlexCentral div.Central div.MainTitle h1 {margin:0; letter-spacing:.14rem; font:400 380% var(--TitleFont);}
div.FlexCentral div.Central div.MainTitle h3 {margin:0; font-weight:300; text-transform:uppercase; font-size:150%;}
div.FlexCentral div.FlexBlocs {display:flex; flex-direction:row; flex-wrap:wrap; align-items: center; justify-content:center; width:100%; margin-top:4rem}
div.FlexCentral div.FlexBlocs div.LeftBloc, div.FlexCentral div.FlexBlocs div.RightBloc {width:48%; min-height:23.8rem; padding:2.3%; border:none; border-radius:6px; background-color:rgba(255,255,255,0.65);}
div.FlexCentral div.Central div.FlexBlocs h2 {text-align:center;  margin-top:.5rem; letter-spacing:.04rem; font:400 220% var(--TitleFont); color:var(--FontColor);} 
div.FlexCentral div.Central div.FlexBlocs div.RightBloc h2 {font:300 3.7rem "Estrada", sans-serif; letter-spacing:inherit; line-height:5.2rem}
div.FlexCentral div.FlexBlocs div.LeftBloc {margin-right: 1%}
div.FlexCentral div.FlexBlocs div.RightBloc {margin-left: 1%}
div.FlexCentral div.FlexBlocs blockquote {margin:20px 0; padding-left:1.5rem; border-left: 5px solid #ee6e73; font-size:125%; font-weight:300}
div.FlexCentral div.FlexBlocs div.LeftBloc blockquote {margin:40px 0;}
div.FlexCentral div.FlexBlocs blockquote ul {margin:.5rem 0}
div.FlexCentral div.FlexBlocs blockquote ul li {line-height:1.4rem; margin-bottom:.6rem}
div.FlexCentral div.FlexBlocs p.TTBlocs {font-size:130%; text-align:center; text-transform:uppercase; color:var(--FontColor);}
div.FlexCentral div.FlexBlocs button {display:block; margin:0 auto;}
div.FlexCentral div.FlexBlocs div.LeftBloc:hover, div.FlexCentral div.FlexBlocs div.RightBloc:hover {background-color:rgba(255,255,255,0.8); cursor: pointer;}

section#cover_mob {padding:3px; height:900px;}
section#cover_mob .wrapper {width:100%;}
section#cover_mob div.Central {display:flex; width:100%; height:63%; max-height: 600px ; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center;}
section#cover_mob div.Central div.MainTitle h1, section#cover_mob div.Central div.MainTitle h3 {text-align:center; color:white; text-shadow:1px 1px 2px black;}
section#cover_mob div.Central div.MainTitle h1 {margin:2rem 0 0.5rem 0; font:400; font-family:var(--TitleFont);}
section#cover_mob div.Central div.MainTitle h3 {margin:0; text-transform:uppercase;}
section#cover_mob div.FlexBlocs {display:block; width:100%; margin-top:2.5rem}
section#cover_mob div.FlexBlocs div.LeftBloc, section#cover_mob div.FlexBlocs div.RightBloc {display:block; width:90%; min-height:23.8rem; border-radius:6px; background-color:rgba(255,255,255,0.65);}
section#cover_mob div.Central div.FlexBlocs h2 {text-align:center; margin-top:.5rem; font-family:var(--TitleFont); font-weight:400; color:var(--FontColor);}
section#cover_mob div.Central div.FlexBlocs div.RightBloc h2 {font:300 3.7rem "Estrada", sans-serif; letter-spacing:inherit; line-height:5.2rem}
section#cover_mob div.FlexBlocs blockquote {font-weight:300}
section#cover_mob div.FlexBlocs blockquote ul {margin:.5rem 0}
section#cover_mob div.FlexBlocs p.TTBlocs {text-align:center; text-transform:uppercase; color:var(--FontColor);}
section#cover_mob div.FlexBlocs button {display:block; margin:0 auto;}
section#cover_mob div.FlexBlocs div.LeftBloc:hover, section#cover_mob div.FlexBlocs div.RightBloc:hover {background-color:rgba(255,255,255,0.8); cursor:pointer;}

/* Tout ordinateur écran > 1920px et au delà */
@media only screen and (orientation:landscape) and (min-width:1921px) {
    section#cover {padding:.8rem;}
    section#cover .wrapper {width:1440px;}
    div.FlexCentral {justify-content:center; min-height:calc(100vh - 90px)}
    main .wrapper {width:1360px; height:100%;}    
}

/* Tout ordinateur écran > 1440px et <= 1920px */  
@media only screen and (orientation:landscape) and (min-width:1441px) and (max-width:1920px) {
    section#cover {padding:.8rem;}
    section#cover .wrapper {width:1440px;}
    div.FlexCentral {justify-content:center; min-height:calc(100vh - 90px)}
    main .wrapper {width:1360px; height:100%;}
}

/* Tout ordinateur et Ipads en paysage écran jusqu'à 1440px */
@media only screen and (orientation:landscape) and (min-width:901px) and (max-width:1440px) {
    section#cover {padding:.5rem;}
    section#cover .wrapper {width:95%;}
    div.FlexCentral {justify-content:flex-start;}
    div.FlexCentral div.Central div.MainTitle {margin-top:10%;}
    main .wrapper {width:95%; height:100%;}
}

/* IPad2 et IpadPro 10 pouces orientation paysage jusqu'à 1112pxpx */
@media only screen and (orientation:landscape) and (min-width:901px) and (max-width:1112px) {
    section#cover .wrapper {width:100%;}
    section#cover div.Central div.FlexBlocs h2 {font-size:200%; letter-spacing:-.05rem;}
    main .wrapper {width:100%;}  
}


/* IpadPro 12 pouces orientation Portrait (La valeur du cookie [DeviceType] est "Desktop")*/
@media only screen and (orientation:portrait) and (min-width:835px) and (max-width:1620px) {
    section#cover {padding:3px; height:900px;}
    section#cover .wrapper {width:760px;}
    div.FlexCentral {justify-content:flex-start;}
    section#cover div.Central div.MainTitle {margin-top:6rem;}
    section#cover div.Central div.MainTitle h1 {margin:2rem 0 0.5rem 0; font-size:320%;}
    section#cover div.FlexBlocs {display:block;}
    section#cover div.FlexBlocs div.LeftBloc, section#cover div.FlexBlocs div.RightBloc {display:block; width:90%; margin:0 auto 6% auto; padding:4%;}
    section#cover div.FlexBlocs blockquote {font-size:130%;}
    main .wrapper {width:99%; height:100%;}
}

/* IPad2 et IpadPro 10 pouces orientation Portrait */
@media only screen and (orientation:portrait) and (min-width:768px) and (max-width:834px) {
    section#cover {padding:3px; height:900px;}
    section#cover .wrapper {width:760px;}
    div.FlexCentral {justify-content:flex-start;}
    section#cover div.Central div.MainTitle {margin-top:6rem;}
    section#cover div.Central div.MainTitle h1 {margin:2rem 0 0.5rem 0; font-size:320%;}
    section#cover div.FlexBlocs {display:block;}
    section#cover div.FlexBlocs div.LeftBloc, section#cover div.FlexBlocs div.RightBloc {display:block; width:90%; margin:0 auto 6% auto; padding:4%;}
    section#cover div.FlexBlocs blockquote {font-size:130%;}
    main .wrapper {width:99%; height:100%;}    
}

/* Smartphones orientation Portrait (La valeur du cookie [DeviceType] doit être "Mobile")*/
@media only screen and (orientation:portrait) and (max-width:767px) {
    section#cover_mob div.Central div.MainTitle h1 {margin:1.8rem 0 0 0; font:400 200% var(--TitleFont); letter-spacing:.08rem; text-shadow:1px 1px 2px #393939;}
    section#cover_mob div.Central div.MainTitle h3 {font-size:110%; letter-spacing:.05rem; font-weight:400; text-transform: inherit; text-shadow:1px 1px 2px #595959;}
    section#cover_mob div.FlexBlocs div.LeftBloc, section#cover_mob div.FlexBlocs div.RightBloc {margin:0 auto 10% auto; padding:8% 4% 8% 4%;}
    section#cover_mob div.Central div.FlexBlocs h2 {font-size:170%; letter-spacing:-.05rem;}
    section#cover_mob div.FlexBlocs blockquote {font-size:125%; margin-left:.8rem;}
    section#cover_mob div.FlexBlocs blockquote ul li {line-height:1.4rem; margin-bottom:.6rem}
    section#cover_mob div.FlexBlocs p.TTBlocs {font-size:110%;}
    main .wrapper {width:95%; height:100%;}
}

/* Smartphones orientation Paysage (La valeur du cookie [DeviceType] doit être "Mobile")*/
@media only screen and (orientation:landscape) and (max-width:900px) {
    .cookie-message {padding:1rem;}
    .cookie-message p {font-size:50%; color:white; text-align: center;}
    section#cover_mob div.Central div.MainTitle h1 {margin:1.8rem 0 0 0; font:400 300% var(--TitleFont); letter-spacing:.10rem; text-shadow:1px 1px 2px #393939;}
    section#cover_mob div.Central div.MainTitle h3 {font-size:120%; font-weight:400; text-transform: inherit; text-shadow:1px 1px 2px #393939;}
    section#cover_mob div.FlexBlocs div.LeftBloc, section#cover_mob div.FlexBlocs div.RightBloc {margin:0 auto 6% auto; padding:4%;}
    section#cover_mob div.Central div.FlexBlocs h2 {font-size:240%; letter-spacing:.04rem;}
    section#cover_mob div.FlexBlocs blockquote {font-size:130%;}
    section#cover_mob div.FlexBlocs blockquote ul {line-height:2rem;}
    section#cover_mob div.FlexBlocs blockquote ul li {line-height:1.4rem; margin-bottom:.7rem}
    section#cover_mob div.FlexBlocs p.TTBlocs {font-size:120%;}
    main .wrapper {width:95%; height:100%;}
}