/*===============================================     Général     ===============================================*/
:root { --couleur-principale: #00ff8f; --couleur-principale-fc: #00ee8a; --couleur-principale-fcfc: #00e381; --couleur-secondaire: #2e2395; --couleur-secondaire-fc: #18045e;  --couleur-secondaire-fc-fc: #060042; }
body, html { overflow-x: hidden; } /* Si quelque chose arrête de fonctionner c'est là ! - cette ligne était commentée mais pourquoi ? */
html { box-sizing: border-box; }
body { margin: 0; background-color: var(--couleur-secondaire-fc-fc); font-family: Montserrat, sans-serif; }
::-moz-selection, ::selection { background-color: transparent; color: var(--couleur-principale); }
a, a:active, a:focus, a:hover { outline: none; }


/*************************************************************************************************************************/
/*=====================================================     Menu     ====================================================*/
/*************************************************************************************************************************/

/*----------------------- Logo Menu change au scroll -----------------------*/
#LogoMenu { position: fixed; background-repeat: no-repeat; }
.LogoMenu-icon { margin-top: -8px; width: 90px; height: 90px; background-image: url("../img/La-Graphiste-icon-B.png"); background-size: 90px; }
.LogoMenu-logo { margin-top: 15px; width: 222px; height: 90px; background-image: url("../img/La-Graphiste-Logo-HBT.png"); background-size: 222px; transition: all 0.5s linear; }
@media (max-width: 1199px) { .LogoMenu-logo { margin-top: -2px; width: 88px; height: 88px; background-image: url("../img/La-Graphiste-Logo-VB.png"); background-size: 88px; transition: 0s; } }
@media (max-width: 767px) {
    .LogoMenu-icon { left: 25px; margin-top: -11px; width: 60px; background-size: 60px; }
    .LogoMenu-logo { left: 25px; margin-top: 10px; width: 185px; background-image: url("../img/La-Graphiste-Logo-HBT.png"); background-size: 185px; } }


/*===============================================     Menu Desktop     ===============================================*/

.MenuBandeau { position: absolute; margin: 0; width: 100%; z-index: 999; border-radius: 0; transition: all 0.7s linear; }
/*--- MenuBandeau se fixe au scroll ---*/
.affix.MenuBandeau { position: fixed; top: 0; background: var(--couleur-secondaire-fc); box-shadow: 0 -3px 13px rgba(30, 27, 86, 0.7); transition: all 0.7s linear; }

/*----------------------- Menu Desktop - MenuBandeau -----------------------*/
@media (min-width: 768px) { .MenuBandeau { top: 6%; padding: 7px 0; background-color: rgba(0,0,0,0.3); height: 87px; } }
@media (min-width: 768px) and (max-width: 1024px) { .MenuBandeau { top: 3%; } }

/*----------------------- Menu Desktop - Items -----------------------*/
.nav a, .nav a:focus, .nav a:hover, .nav a:active { text-decoration: none; }
.MenuBarre-nav { float: right!important; }
.MenuBarre-nav > li > a { position: relative; margin-top: 13px; display: block; padding: 14px 15px 18px; background-color: transparent; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #fff; opacity: .6; transition: all 0.5s linear; }
.MenuBarre-nav > li > a:hover, .MenuBarre-nav > .active > a, .MenuBarre-nav > .focus > a, .MenuBarre-nav > .hover > a { color: #fff; opacity: 1; }
li.cacher-menu { display: none; }
@media (min-width: 768px) and (max-width: 1399px) { li.cacher-menu-1 { display:none; } }
@media (max-width: 991px) { li.cacher-menu-2 { display:none; } }

/*----------------------- Menu Desktop - Soulignement des items -----------------------*/
.MenuBarre-nav > li > a::after { position: absolute; right: 0; left: 0; margin: auto; bottom: -16px; height: 3px; width: 0; content: ""; background: var(--couleur-principale); transition: all 0.3s linear; }
.MenuBarre-nav > .active > a:after, .MenuBarre-nav > li > a:hover:after { width: 60%; }


/*==========================================     Transition Menu Desktop / Menu Mobile     ==========================================*/
@media (max-width: 767px) { .Menu-Desktop { display: none; } }
@media (min-width: 768px) { .Menu-Mobile { display: none; } }


/*===============================================     Menu Mobile     ===============================================*/

/*----------------------- Menu Mobile - MenuBandeau -----------------------*/
@media (max-width: 767px) { .MenuBandeau { top: 10px;/*bottom: 10px;*/ padding: 7px; height: 50px; background-color: rgba(0,0,0,0.3); } }

/*----------------------- Menu Mobile - hamburger -----------------------*/
.Menu-Mobile-icon { position: absolute; padding: 0 6px; right: 30px; background-color: transparent; cursor: pointer; }
.hamburger { margin-top: 16px; top: 23px; right: 36px; float: right; display: block; height: 20px; width: 22px; z-index: 9999; }
.hamburger span, .hamburger span:before, .hamburger span:after { position: absolute; width: 22px; height: 3px; background-color: #fff; display: block; content: ''; }
.hamburger span:before, .hamburger span:after { transition: all .2s linear; background-clip: padding-box; }
.hamburger span:before { top: -8px; }
.hamburger span:after { bottom: -8px; }
body.open .hamburger { position: fixed; margin: 0; }
body.open .hamburger span { background: #fff; box-shadow: none; }
body.open .hamburger span:before, body.open .hamburger span:after { width: 28px; height: 4px; background: #000; }
body.open .hamburger span:hover::before, body.open .hamburger span:hover::after { background: var(--couleur-principale-fc); }
body.open .hamburger span:before { top: -0.5px; right: -3px; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
body.open .hamburger span:after { bottom: -0.5px; right: -3px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); }

/*----------------------- Menu Mobile - Panneau diagonal -----------------------*/
.menu-diagonal-nav { position: fixed; top: 0; right: 0; margin: 0; padding-top: 20%; padding-right: 11%; width: 100%; height: 100vh; display: block; background: #fff; text-align: right; box-sizing: border-box; transform: translateX(100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%); transition: all .3s cubic-bezier(.42, 0, .58, 1); }
body.open .menu-diagonal-nav { clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); transform: translateX(0); }


/*----------------------- Menu Mobile - items -----------------------*/
.menu-diagonal-nav a { margin-top: 40px; margin-left: -270px; width: 150%; height: 15px; padding: 0 13px; display: inline-block; color: #000; text-decoration: none; text-transform: uppercase; font-size: 25px; font-weight: 700; line-height: 0; letter-spacing: 1.5px; }
.menu-diagonal-nav a:hover, .menu-diagonal-nav a:focus { background-color: var(--couleur-principale); }

@media (max-width:675px) { .menu-diagonal-nav { padding-right: 10%; } }
@media (max-width:640px) { .menu-diagonal-nav { padding-right: 8%; }
    .menu-diagonal-nav a { font-size: 23px; } }
@media (max-width:600px) { .menu-diagonal-nav { padding-right: 6%; } }
@media (min-width:566px) { .SdL-MenuMobile-cacher { display: none; } }
@media (max-width:565px) { .menu-diagonal-nav a span { line-height: 55px; } }
@media (max-width:440px) { .menu-diagonal-nav a { font-size: 20px; } }
@media (max-width:330px) { .menu-diagonal-nav { padding-right: 5%; } }

@media (orientation: landscape) and (max-width:767px) { .menu-diagonal-nav { width: 80%; padding-top: 7%; } }

/*----------------------- Menus - clear: both -----------------------*/
.container-fluid:after, .container:after, .row:after, .nav:after, .MenuBarre-nav:after, .hamburger:after, .menu-diagonal-nav li:after { clear: both; }



/*************************************************************************************************************************/
/*===========================================     background images fixes     ===========================================*/
/*************************************************************************************************************************/

.image-fixe   { width: 100%; height: 100vh; position: relative; z-index: -100; }
.image-fixe-A { width: 100%; position: relative; }
.image-fixe-B { position: absolute; clip: rect(0, auto, auto, 0); z-index: -200; }
.image-fixe-C { position: fixed; background-size: cover; background-position: center center; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; }
.image-fixe-B, .image-fixe-C { top: 0; left: 0; width: 100%; height: 100%; }

.image-fixe-1 { background-image: url("../img/74.webp"); }
.image-fixe-1:after { top: 0; left: 0; width: 100%; height: 100vh; position: fixed; content: ""; display: flex;
    /*background: #2a00ff; opacity: .2; mix-blend-mode: darken;*/ }
.image-fixe-2 { background-image: url("../img/76.webp"); }
.image-fixe-3 { background-image: url("../img/09.png"); }
.image-fixe-4 { background-image: url("../img/73.webp"); }
.image-fixe-5 { background-image: url("../img/75.webp"); }



/*************************************************************************************************************************/
/*=============================================     Toutes les Sections     =============================================*/
/*************************************************************************************************************************/

.Section-Blanche { padding: 90px 0; background-color: #fff; }
.Titre-Section { margin-bottom: 20px; color: #000000; font-weight: 900; font-size: 38px; text-transform: uppercase; letter-spacing: 3px; transition: all 0.5s linear; }
.Ss-Titre-Section { padding: 2px 8px; display: inline; background: var(--couleur-principale); color: #000; font-size: 15px; font-weight: 500; letter-spacing: 1px; line-height: 25px; text-transform: uppercase; }
.Ss-Titre-Section::-moz-selection, .Ss-Titre-Section::selection { color: #fff; }
.texte { font: 300 16px/25px "Source Sans 3"; } /* FF Good Pro */
.texte strong { font-weight: 400; }

button { margin-top: 35px; background: none; border: none; outline: none; }
button:focus, button:active { background: none; border: none; outline: none; }
@media (max-width: 767px) { button { margin: 35px auto 20px; display: block; } }

.Boutons-intercalaire { padding: 8px 15px; border: 1.5px solid #fff; background: transparent; color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: 2px; }
.Boutons-intercalaire:hover, .Boutons-intercalaire:active, .Boutons-intercalaire:focus { border:  1.5px solid var(--couleur-principale); background: var(--couleur-principale); color: #000; text-decoration: none; }

a.Boutons, a.Boutons:hover, a.Boutons:focus, a.Boutons:active { color: #000; text-decoration: none; }
.Boutons { margin: 35px 16px 0 0; position: relative; padding: 3px 16px 10px 12px; background-color: var(--couleur-principale); color: #000; font: 600 12px "Montserrat", sans-serif; letter-spacing: 1.3px; }
.Boutons:after { position: absolute; top: -4.5px; right: 4px; bottom: 3px; left: -4.5px; border: 1.9px solid #000; content: ""; box-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, .1); }
.Boutons:hover { margin: -2px 16px -2px -4px; padding: 5.5px 11px 5.5px 14.5px; border: 1.9px solid #000; box-shadow: inset 2.5px 2.5px 0 rgba(0, 0, 0, .15); }
.Boutons:hover:after { border: 0; box-shadow: none; }
@media (max-width: 767px) {
    .Boutons { margin-left: 20px; }
    .Boutons:hover { margin-left: 16px; } }



/*************************************************************************************************************************/
/*================================================     Intercalaires     ================================================*/
/*************************************************************************************************************************/

.Intercalaire_Titre { padding: 75px 30px 0; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: 1px; line-height: 40px; transition: all 0.5s linear; }
.Intercalaire_Titre span { color: var(--couleur-principale); }
.Intercalaire_Texte { padding: 0 40px; color: #fff; font-size: 14px; font-weight: 200; letter-spacing:0.5px; line-height: 30px; }
.Intercalaire_Titre, .Intercalaire_Texte { text-shadow: 4px 7px 20px rgba(1, 1, 1, 0.5); }
@media (max-width: 500px) { .Intercalaire_Texte { line-height: 22px; } }
@media (max-width: 672px) { .Intercalaire_Titre { padding-top: 65px; }
    .Intercalaire_Texte { line-height: 25px; } }

#Intercalaire-Citation-Einstein { position: relative; z-index: 80; }
#Intercalaire-Citation-Einstein .Intercalaire_Titre { padding: 95px 10px 0; }
#Intercalaire-Citation-Einstein .Intercalaire_Texte { padding: 7px 0 70px; font-size: 18px; line-height: 25px; }
@media (max-width: 500px) { #Intercalaire-Citation-Einstein .Intercalaire_Titre { font-size: 29px; } }
@media (max-width: 672px) { #Intercalaire-Citation-Einstein .Intercalaire_Titre { padding-top: 80px; } }

#Intercalaire-UNE-URGENCE { position: relative; z-index: 60; }
#Intercalaire-UNE-URGENCE .Bouton_phone-iconDiv { margin-bottom: 70px; }

#Intercalaire-INVENTEZ-FORMAT { position: relative; z-index: 45; }
#Intercalaire-INVENTEZ-FORMAT .DdD { padding: 45px 0 75px; }

#Intercalaire-Citation-Forbes { position: relative; z-index: 35; }
#Intercalaire-Citation-Forbes .Intercalaire_Titre { padding: 95px 20px 0; font: 100 40px/50px 'ITC New Baskerville'; }
#Intercalaire-Citation-Forbes .Intercalaire_Titre span { color: var(--couleur-principale); }
#Intercalaire-Citation-Forbes .Intercalaire_Titre sup { font-size: 25px; }
#Intercalaire-Citation-Forbes .Intercalaire_Texte { padding: 7px 20px 0; font-size: 18px; line-height: 30px; }
#Intercalaire-Citation-Forbes .trad { padding: 0 20px 70px; color: #fff; font-size: 14px; font-weight: 400; font-style: italic; line-height: 25px; }
@media (max-width: 379px) { #Intercalaire-Citation-Forbes .Intercalaire_Titre { font-size: 35px; line-height: 42px; } }
@media (min-width: 380px) and (max-width: 513px) { #Intercalaire-Citation-Forbes .Intercalaire_Titre { font-size: 37px; line-height: 44px; } }
@media (min-width: 514px) and (max-width: 799px) { #Intercalaire-Citation-Forbes .Intercalaire_Titre { font-size: 38px; line-height: 46px; } }
@media (max-width: 752px) { .espace5 {display: none; } }
@media (min-width: 753px) and (max-width: 1099px) { .espace6 {display: none; } }
@media (min-width: 1100px) { .espace5 { display: none; } }

#Contactez-moi { position: relative; box-shadow: 0 5px 10px rgba(0,0,0,.3), 0 20px 25px rgba(0,0,0,.3); z-index: 20; }
#Contactez-moi .Intercalaire_Titre { margin: 0; }
@media (max-width: 500px) { #Contactez-moi .Intercalaire_Titre { font-size: 29px; } }
@media (max-width: 700px) { #Contactez-moi .Intercalaire_Titre { padding: 70px 20px; } }
@media (min-width: 701px) { #Contactez-moi .Intercalaire_Titre { padding: 90px 30px; } }


/*************************************************************************************************************************/
/*=====================================================     Home     ====================================================*/
/*************************************************************************************************************************/

#Home { position: relative; height: 100vh; width: 100%; background: transparent; z-index: 100; }

/*-------------------- Accueil --------------------*/
.Accueil { margin-top: -100vh; height: 100vh; /*display: table-cell; vertical-align: middle;*/ }

/*-------------------- Logo --------------------*/
.Logo { width: calc(26vmin + 26vmax); transition: all 0.5s linear; }
@media (max-width: 767px) { .Logo { width: calc(28vmin + 28vmax); } }

/*----------------------- Animation Logo -----------------------*/
.Logo-animation { margin-top: calc(13vmin + 13vmax); position: relative; animation-name: logoanimation; animation-duration: 2s; animation-delay: 0s; animation-fill-mode: forwards; /* forwards permet à l'animation de s'arrêter */ }
@keyframes logoanimation { from {top:-300px;} to {top:0;} }

@media (max-width: 767px) { .Logo-animation { margin-top: calc(17vmin + 16vmax); } }
@media (orientation: landscape) and (max-width:767px) {
    .Logo { width: 350px; }
    .Logo-animation { margin-top: 70px; } }

@media (min-width: 768px) and (max-width: 900px) {
    .Logo { width: 500px; }
    .Logo-animation { margin-top: 200px; }
    @keyframes logoanimation { from {top: -300px;} to {top: -50px;} }
    @keyframes textanimation { from {top: 150px;} to {top: -50px;} } }

@media (min-width: 1400px) {
    .Logo { width: 627px; }
    .Logo-animation { margin-top: 300px; }
    @keyframes logoanimation { from {top: -300px;} to {top: -50px;} }
    @keyframes textanimation { from {top: 150px;} to {top: -50px;} } }


/*-------------------- Texte --------------------*/
/*--- RAPIDE ET EFFICACE, MÊME À 30°C ---*/
.Text-animation .rapide, .Text-animation h1 { margin: 35px 10px 25px; color: #fff; font-size: 25px; font-weight: 100; letter-spacing: 2px; line-height: 28px; transition: all 0.5s linear; }
@media (max-width: 415px) { .Text-animation .rapide { margin: 30px auto 20px; font-size: 23px; line-height: 28px; }}

/*--- Texte ---*/
.text-Home { margin: 20px auto; width: calc(33vmin + 33vmax) !important; font-size: 15px; font-weight: 200; line-height: 27px; letter-spacing:0.5px; color: var(--couleur-principale); }
.text-Home ::-moz-selection, .text-Home::selection { color: #fff; }

@media (max-width: 767px) {
    .text-Home { padding: 0 20px; width: 100%; font-size: 13px; line-height: 24px; color: #fff; }
    .text-Home ::-moz-selection, .text-Home::selection { color: var(--couleur-principale); } }
@media (max-width: 492px) { .text-Home {  line-height: 21px; }}

/*----------------------- Animation Texte -----------------------*/
.Text-animation { position: relative; animation-name: textanimation; animation-duration:1s; animation-delay: 0s; animation-fill-mode: forwards;	/* permet à l'animation de s'arrêter */ }
@keyframes textanimation { from {top:150px;} to {top:0;} }

/*----------------------- Bouton phone -----------------------*/
.Bouton_phone-iconDiv { margin: 20px 4px; padding: 4px; height: 50px; width: 50px; border-radius: 6px; display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; cursor: pointer; transition: width 300ms ease-in-out 0s, background-color 300ms linear 200ms; }
.Bouton_phone-iconDiv:hover, .iconDiv:focus-visible { width: 195px; background-color: var(--couleur-principale); transition: width 300ms ease-in-out 0s, background-color 100ms linear 0s; }
.Bouton_phone-iconDiv:active { opacity: 0.9; }
.Bouton_phone-iconDiv:after { margin-left: 12px; content: "06 20 86 00 97"; font-size: 16px; font-weight: 700; color: #fff; text-shadow: -1px 1px 4px rgba(27, 17, 120, .4); animation: fadeIn 500ms linear forwards; }
.Bouton_phone-icon { height: 43px; }
.Bouton_phone-icon img { height: 43px; filter: drop-shadow(-1px 1px 4px rgba(27, 17, 120, .3)); }
a.Bouton_phone-link, a.Bouton_phone-link:hover, a.Bouton_phone-link:focus, a.Bouton_phone-link:active { text-decoration: none; }

@media (orientation: portrait) { .Text-animation-cacher { display: none; } }
@media (min-height: 431px) { .Text-animation-cacher { display: none; } }
@media (orientation: landscape) and (max-height: 430px) {
    .Text-animation .rapide, .Text-animation h1 { margin: 15px auto 10px; font-size: 23px; }
    .Text-animation p.text-Home { margin-top: 13px; padding: 0 7px; width: 100%; font-size: 13px; line-height: 23px; }
    .Text-animation-cacher-2 { display: none; }
    .Bouton_phone-iconDiv { margin-top: 10px!important; } }



/*************************************************************************************************************************/
/*=============================================     Section Qui_suis-je     =============================================*/
/*************************************************************************************************************************/

#Qui_suis-je { position: relative; padding: 100px 0 100px 40px; z-index: 90; }
@media (min-width: 992px) { #Qui_suis-je { padding: 100px 150px; } }
#Qui_suis-je .texte { margin: 15px 0; max-width: 650px; }

.QSJ_Titre { margin: 0 0 20px -10px; font: 100 70px "Badass Moon"; transition: all 0.5s linear; }
.QSJ_Photo_Agnes,
.QSJ_Photo_Agnes:before,
.QSJ_Photo_Agnes:after { border-radius: 50%; width: 250px; height: 250px; position: relative; }
.QSJ_Photo_Agnes { margin: -55px 0 0 60px; background: url("../img/Agnes-Sebagh.webp") -20px -30px/111% no-repeat; }
.QSJ_Photo_Agnes:before,
.QSJ_Photo_Agnes:after { left: 0; content: ""; display: flex; }
.QSJ_Photo_Agnes:before { top: 0; background: rgba(0,0,0,0.1); }
.QSJ_Photo_Agnes:after { top: -250px; background: rgba(30,27,86,0.25); border: 3.5px solid var(--couleur-principale); }
.QSJ_Photo_Agnes:hover:after, .QSJ_Photo_Agnes:hover:before { background: transparent; }

@media (min-width: 768px) and (max-width: 915px) { .QSJ_Photo_Agnes { margin-left: 30px; } }
@media (max-width: 767px) {
    #Qui_suis-je { padding-left: 0; }
    .QSJ_Titre { text-align: center; }
    .QSJ_Photo_Agnes { margin: 20px auto 0; }
    #Qui_suis-je .texte { margin: 15px 0 20px 0; text-align: center; } }
@media (max-width: 700px) { #Qui_suis-je .QSJ_Titre { font-size: 63px; } }
@media (max-width: 421px) { .QSJ_Titre { font-size: 55px; } }
@media (max-width: 345px) { .QSJ_Titre { font-size: 53px; } }



/*************************************************************************************************************************/
/*=============================================     Section Prestations     =============================================*/
/*************************************************************************************************************************/

#Prestations { position: relative; margin-top: -16px; padding: 100px 0 120px; background: #f8f8f8; z-index: 70; }
@media (min-width: 992px) { #Prestations { padding: 100px 80px; } }
@media (min-width: 1200px) { #Prestations { padding: 100px 90px; } }
@media (min-width: 1400px) { #Prestations { padding: 100px; } }

.Prestations_Titre { margin-bottom: 30px; font: 700 72px "Cormorant Garamond", serif; letter-spacing: 0; transition: all 0.5s linear;
    color: rgba(0, 0, 0, .7); text-shadow: 0 3px 4px rgba(0,0,0, 0.4), 0 4px 5px rgba(0,0,0, 0.15), 0 14px 5px rgba(0,0,0, 0.18), 0 6px 5px rgba(0,0,0, 0.21); }
.Prestations_Titre::-moz-selection, .Prestations_Titre::selection { color: var(--couleur-principale); text-shadow: 0 3px 4px rgba(11,180,93,0.4), 0 4px 5px rgba(11,180,93,0.15), 0 14px 5px rgba(11,180,93,0.18), 0 6px 5px rgba(11,180,93,0.21); }
.Prestations_container { margin-top: 40px; color: #000; }
.Prestations_item { margin-top: 40px; padding: 13px 25px; border: 1px solid transparent; transition: all 0.3s linear; }
.Prestations_item:hover { background: #fff; border-color: var(--couleur-principale); cursor: default; }
.Prestations_item h3 { margin: 0; top: 0; left: 0; position: relative; padding: 11px 0; font: 700 18px/23px "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; transition: all .5s linear; }
/*.Prestations_item h3 { margin: 0; top: 0; left: 0; position: relative; padding: 11px 0; font: 800 20px "Source Sans 3", sans-serif; text-transform: uppercase; transition: all .5s linear; }*/
@media (max-width: 323px) { .espace3 { display: none; } }
@media (min-width: 324px) and (max-width: 720px) { .espace4 { display: none; } }
@media (min-width: 721px) and (max-width: 1039px) { .espace3 { display: none; } }
@media (min-width: 1040px) { .espace4 { display: none; } }
.Prestations_item p { margin: 0; }
.Prestations_item p strong { font-weight: 400; }

@media (max-width: 370px)                        { .Prestations_Titre { font-size: 47px; }
    .Prestations_item { margin: 15px; } }
@media (min-width: 371px) and (max-width: 390px) { .Prestations_Titre { font-size: 53px; } }
@media (min-width: 391px) and (max-width: 550px) { .Prestations_Titre { font-size: 57px; } }
@media (min-width: 551px) and (max-width: 720px) { .Prestations_Titre { font-size: 65px; } }
@media (min-width: 371px) and (max-width: 720px) { .Prestations_item { margin: 15px 30px; } }
@media (min-width: 768px)                        { .Prestations_item { max-width: 390px; } }
@media (min-width: 1400px)                       { .Prestations_Titre { font-size: 76px; } }

/*----------------------- Pictos La Graphiste - Icons -----------------------*/
.LGi { display:inline-block; font: 56px/.5 "La Graphiste - Icons"; position: relative; top: 5px; left: 0; color: #000; transition: all .5s linear; }
.Prestations_item:hover .LGi, .Prestations_item:hover h3 { color: var(--couleur-principale-fcfc); position: relative; left: 25px; transition: all .5s linear; }
.Prestations_item:hover .LGi-IV { transform: rotate(5deg); top: 10px; }
.Prestations_item .LGi-IV::before { content: "D"; }
.Prestations_item:hover .LGi-OC { transform: rotate(-8deg); top: 7px; }
.Prestations_item .LGi-OC::before { content: "E"; }
.Prestations_item:hover .LGi-SM { transform: rotate(-5deg); top: 11px; }
.Prestations_item .LGi-SM::before { content: "<"; } /* content: "["; */
.Prestations_item:hover .LGi-SM::before { font-size: 55px; content: ">"; }
.Prestations_item:hover .LGi-EC { transform: rotate(-6deg); top: 5px; }
.Prestations_item .LGi-EC::before { content: "F"; }
.Prestations_item:hover .LGi-SI { transform: rotate(6deg); top: 9px; }
.Prestations_item .LGi-SI::before { content: "&"; }
.Prestations_item:hover .LGi-P { transform: rotate(10deg); top: 5px; }
.Prestations_item .LGi-P::before { content: "r"; }
.LGi-heart { font-family: "La Graphiste - Icons"; font-size: 18px; }

@media (max-width: 767px) { .Prestations_item:hover h3 { left: 0; } }



/*************************************************************************************************************************/
/*========================================     Section Processus de Création     ========================================*/
/*************************************************************************************************************************/

#Processus-Crea { position: relative; padding: 100px 0; background: linear-gradient(-225deg, #eee, #f5f5f5, #efefef, #dfdfdf); z-index: 50; }
.Processus-Crea_Titre { margin-bottom: 30px; font-family: "Bebas Neue Pro", sans-serif; font-size: 68px; letter-spacing: 1px; color: rgba(13, 0, 100, 0.9); text-shadow: 0 3px 4px  rgba(30,24,90,0.4), 0 4px 5px  rgba(30,24,90,0.2), 0 8px 5px  rgba(30,24,90,0.25), 0 14px 4px rgba(30,24,90,0.13); transition: all 0.5s linear; }
.Processus-Crea_container { margin-top: 40px; font-weight: 300; color: #000; }
.Processus-Crea_item { text-align: left; border-radius: 7px; background: linear-gradient(-225deg, #eee, #f5f5f5, #efefef, #e7e7e7); box-shadow: 3px 3px 4px rgba(0, 0, 0, .1), 7px 7px 15px rgba(0, 0, 0, .13), -3px -3px 2px rgba(255, 255, 255, 1), -3px -3px 3px rgba(255, 255, 255, 1), -6px -6px 7px rgba(255, 255, 255, 1); transition: all 0.5s linear; }
@media (max-width: 360px)  { .Processus-Crea_item { margin: 20px 10px; padding: 9px 9px 12px; } }
@media (min-width: 361px)  { .Processus-Crea_item { margin: 20px 30px; padding: 9px 9px 12px; } }
@media (min-width: 430px)  { .Processus-Crea_item { margin: 23px 50px; } }
@media (min-width: 576px)  { .Processus-Crea_item { height: 363px; margin: 20px 7px; padding: 9px; } }
@media (min-width: 620px)  { .Processus-Crea_item { height: 375px; margin: 25px 10px; padding: 12px; } }
@media (min-width: 768px)  { .Processus-Crea_item { height: 385px; margin: 20px; } }
@media (min-width: 992px)  { .Processus-Crea_item { margin: 20px 7px; padding: 9px; } }
@media (min-width: 1200px) { .Processus-Crea_item { height: 365px; margin: 20px 10px; padding: 12px; } }
@media (min-width: 1350px) { .Processus-Crea_item { height: 370px; } }
@media (min-width: 1460px) { .Processus-Crea_item { height: 380px; } }
@media (min-width: 1530px) { .Processus-Crea_item { height: 390px; } }
@media (min-width: 1580px) { .Processus-Crea_item { height: 400px; } }
@media (min-width: 1750px) { .Processus-Crea_item { height: 410px; } }

.Processus-Crea_item span { margin: 7px 5px 0; padding: 10px 0; display: block; color: var(--couleur-secondaire-fc);  font: 100 30px/.9 'Montserrat', sans-serif; }
.Processus-Crea_item h3 { margin: 0 8px; padding-bottom: 7px; font-size: 19px; color: var(--couleur-secondaire-fc); text-transform: uppercase; font-weight: 800; line-height:20px; }
/*.Processus-Crea_item h3 { margin: 0 8px; padding-bottom: 7px; color: var(--couleur-secondaire-fc); font: 700 18px/23px "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; }*/
.Processus-Crea_item p { margin: 0 8px; padding-bottom: 10px; color: #000; }
abbr { text-decoration: none; }
.Processus-Crea_img { position: relative; }
.Processus-Crea_img img { margin: auto; display: block; max-width: 100%; height: auto; border-radius: 7px; border: 2px solid rgba(255, 255, 255, 1); }
.Processus-Crea_img p { top: 0; margin: 5px 13px; position: absolute; background: transparent; text-align: center; font: 700 12px/2 'Montserrat', sans-serif; color: #fff; text-shadow: -1px 1px 6px rgba(0, 0, 0, .2); }

@media (min-width: 1500px) { .Processus-Crea_Titre { font-size: 73px; } }
@media (max-width: 770px) { .Processus-Crea_Titre { font-size: 65px; }
    .Processus-Crea_container { margin-top: 20px; } }
@media (max-width: 650px) { .Processus-Crea_Titre { font-size: 60px; } }
@media (max-width: 600px) { .Processus-Crea_Titre { font-size: 55px; margin-bottom: 25px; } }
@media (max-width: 555px) { .Processus-Crea_Titre { font-size: 50px; text-shadow: 0 3px 4px rgba(30,24,90,0.3),  0 4px 5px rgba(30,24,90, 0.3), 0 12px 4px rgba(30,24,90,0.13) } }
@media (max-width: 451px) { .Processus-Crea_Titre { line-height: 52px; } }
@media (max-width: 320px) { .Processus-Crea_Titre { font-size: 48px; line-height: 50px; } }



/*************************************************************************************************************************/
/*===========================================     Section Projets réalisés     ==========================================*/
/*************************************************************************************************************************/

#Projets { position: relative; margin-top: -16px; padding: 80px 20px 48px; background: linear-gradient(-225deg, #eee, #f5f5f5, #eee, #e5e5e5); overflow-x: hidden; z-index: 40; }
#Projets header { margin-bottom: 70px; }

.Projets_Titre { font: 100 70px ROCKETWILDNESS; color: rgb(19, 0, 187); text-shadow: 0 3px 4px rgba(0,0,0, 0.4), 0 4px 5px rgba(0,0,0, 0.15), 0 14px 5px rgba(0,0,0, 0.18), 0 6px 5px rgba(0,0,0, 0.21); transition: all 0.5s linear; }
.Projets_Titre span { font-size: 40px; color: var(--couleur-secondaire); transition: all 0.5s linear; }
.Projets_Titre::-moz-selection, .Projets_Titre::selection, .Projets_Titre span::-moz-selection, .Projets_Titre span::selection { color: var(--couleur-principale-fc); text-shadow: 0 3px 4px rgba(11,180,93,0.4), 0 4px 5px rgba(11,180,93,0.15), 0 14px 5px rgba(11,180,93,0.18), 0 6px 5px rgba(11,180,93,0.21); }

/*
#Projets { position: relative; margin-top: -16px; padding: 100px 0 120px; background: var(--couleur-secondaire-fc); z-index: 35; }
.Projets_Titre { margin-bottom: 30px; font: 100 67px Montserrat; letter-spacing: 0; text-transform: uppercase; transition: all 0.5s linear;
    color: #fff; text-shadow: 0 3px 4px rgba(0,0,0, 0.4), 0 4px 5px rgba(0,0,0, 0.15), 0 14px 5px rgba(0,0,0, 0.18), 0 6px 5px rgba(0,0,0, 0.21); }
.Projets_Titre::-moz-selection, .Projets_Titre::selection { color: rgba(60,245,150,1); text-shadow: 0 3px 4px rgba(11,180,93,0.4), 0 4px 5px rgba(11,180,93,0.15), 0 14px 5px rgba(11,180,93,0.18), 0 6px 5px rgba(11,180,93,0.21); }
*/

.Projets_Ss-Titre { font-family: 'Badass Moon'; font-size: 23px; color: var(--couleur-secondaire-fc); }
.Projets_Ss-Titre::-moz-selection, .Projets_Ss-Titre::selection { color: var(--couleur-principale-fcfc); }

@media (max-width: 309px)                         { .Projets_Titre, .Projets_Ss-Titre { margin-left: 10px; } }
@media (min-width: 310px) and (max-width: 330px)  { .Projets_Titre, .Projets_Ss-Titre { margin-left: 20px; } }
@media (max-width: 369px)                         { .Projets_Titre { font-size: 45px; line-height: 50px; }
    .Projets_Titre span { font-size: 27px; line-height: 25px; } }
@media (min-width: 370px) and (max-width: 399px)  { .Projets_Titre { font-size: 50px; line-height: 55px; } }
@media (min-width: 400px) and (max-width: 560px)  { .Projets_Titre { font-size: 55px; line-height: 60px; } }
@media (min-width: 370px) and (max-width: 560px)  { .Projets_Titre span { font-size: 30px; line-height: 30px; } }
@media (min-width: 331px) and (max-width: 560px)  { .Projets_Titre, .Projets_Ss-Titre { margin-left: 30px; } }
@media (min-width: 561px) and (max-width: 618px)  { .Projets_Titre { font-size: 45px; line-height: 45px; }
    .Projets_Titre span { font-size: 30px; } }
@media (max-width: 618px)                         { .Projets_Titre, .Projets_Ss-Titre { text-align: left; } }
@media (min-width: 619px) and (max-width: 767px)  { .Projets_Titre { font-size: 50px; line-height: 55px; }
    .Projets_Titre span { font-size: 37px; } }
@media (min-width: 768px) and (max-width: 894px)  { .Projets_Titre { font-size: 55px; line-height: 60px; } }
@media (min-width: 895px) and (max-width: 1010px) { .Projets_Titre { font-size: 60px; line-height: 65px; } }

#Projets img { width: 100%; height: auto; }
#Projets ul { margin-left: 1rem; list-style: none; }
#Projets li { flex-shrink: 0; width: clamp(250px, 50vw, 400px); }
.wrapper { display: flex; }
.demo-gallery:not(.last) { padding-bottom: 1.5rem; }

.Projets_Slide, #Projets li.Projets_slide-BA { position: relative; margin-right: 1.5rem; box-shadow: -8px 8px 18px rgba(0,0,0,.2); }

/*--- Before / After ---*/
#Projets li.Projets_slide-BA, #comparison1 { width: clamp(374px, 70vw, 598px); height: clamp(250px, 50vw, 400px); }
#comparison1 { overflow: hidden; }
#comparison1 figure { position: relative; margin: 0; width: 100%; background-image: url("../img/Projets/CG-2.webp"); }
#comparison1 figure div { position: absolute; bottom: 0; width: 50%; background-image: url("../img/Projets/CG-1.webp"); }
#comparison1 figure, #comparison1 figure div { height: 100%; background-size: cover; }

/*--- Curseur ---*/
input[type=range] { position: relative; appearance: none; top: -2rem; left: -1%; width: 102%; background-color: rgba(255,255,255,0.2); }
input[type=range]:focus, input[type=range]:active { outline: none; border: none; }
input[type=range]::-moz-range-track { position: relative; appearance: none; height:15px; width: 98%; background-color: rgba(255,255,255,0.1); outline: none; }
input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb { appearance: none; width: 12px; height: 12px; background: #fff; border-color: #fff; border-radius: 0; }
input[type=range]:focus::-webkit-slider-thumb, input[type=range]:focus::-moz-range-thumb { background: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.2); }

/*--- Ombre des Slides ---*/
.Projets_Slide:before, .Projets_Slide:after { width: 47.6%; transform: rotate(-4deg); }
.Projets_slide-BA:before, .Projets_slide-BA:after { width: 48.4%; transform: rotate(-3deg); }
.Projets_Slide:after { transform: rotate(4deg); }
.Projets_slide-BA:after { transform: rotate(3deg); }
.Projets_Slide:after, .Projets_slide-BA:after { right: 10px; }
.Projets_Slide:before, .Projets_slide-BA:before { left: 10px; }
.Projets_Slide:before, .Projets_Slide:after, .Projets_slide-BA:before, .Projets_slide-BA:after { position: absolute; top: 80%; bottom: 15px; box-shadow: 0 16px 10px rgba(0,0,0,.7); content: ""; z-index: -1; }



/*************************************************************************************************************************/
/*===============================================     Section Tarifs     ================================================*/
/*************************************************************************************************************************/

#Tarifs { position: relative; margin-top: -16px; background: linear-gradient(-225deg, #eee, #f5f5f5, #eee, #e5e5e5); z-index: 30; }
@media (min-width: 992px) { #Tarifs { padding: 100px 0; } }
@media (min-width: 768px) { #Tarifs { padding: 100px 70px; } }
@media (max-width: 767px) { #Tarifs { text-align: center; } }
@media (max-width: 580px) { #Tarifs { padding: 100px 25px; } }

.Tarifs_Titre { margin-bottom: 20px; font: 700 68px/57px Montserrat; text-transform: uppercase; letter-spacing: 2px;
    background-color: #fff; color: transparent; text-shadow: 3.5px 3.5px 0 var(--couleur-principale);
    background-clip: text; -webkit-background-clip: text; -webkit-text-stroke-color: #000; -webkit-text-stroke-width: 1.3px; transition: all 0.3s linear; }
.Tarifs_Titre span { font-weight: 700; font-size: 48px; text-shadow: 3px 3px 0 var(--couleur-principale); -webkit-text-stroke-width: 1.1px; transition: all 0.3s linear; }
.Tarifs_Titre::-moz-selection, .Tarifs_Titre ::selection, .Tarifs_Titre span::-moz-selection, .Tarifs_Titre span ::selection { color: transparent; text-shadow: 3.5px 3.5px 0 var(--couleur-secondaire); }
@media (max-width: 625px) {
    .Tarifs_Titre { font-size: 65px; line-height: 52px; -webkit-text-stroke-width: 1.2px; }
    .Tarifs_Titre span { font-size: 43px; } }
@media (max-width: 550px) {
    .Tarifs_Titre { font-size: 63px; line-height: 50px; }
    .Tarifs_Titre span { font-size: 41px; text-shadow: 2.7px 2.7px 0 var(--couleur-principale); } }
@media (max-width: 410px) {
    .Tarifs_Titre { font-size: 60px; line-height: 48px; -webkit-text-stroke-width: 1.1px; }
    .Tarifs_Titre span { font-size: 39px; text-shadow: 2.5px 2.5px 0 var(--couleur-principale); } }
@media (max-width: 369px) { .Tarifs_Titre span { font-size: 37px; } }
@media (max-width: 355px) { .Tarifs_Titre span { font-size: 33px; text-shadow: 2.3px 2.3px 0 var(--couleur-principale); } }
@media (max-width: 326px) {
    .Tarifs_Titre { line-height: 46px; }
    .Tarifs_Titre span { font-size: 30px; } }

.Tarifs_details { margin-right: 30px; }
.Tarifs_details ::-moz-selection, .Tarifs_details::selection { background-color: var(--couleur-principale); color: var(--couleur-secondaire); }
@media (max-width: 990px) { .Tarifs_details { margin-right: 0; } }

.Tarifs_container { margin-top: 0; padding: 15px; font-weight: 300; color: #000; font-size: 14px; line-height: 22px;
    background: linear-gradient(-225deg, #eee, #f5f5f5, #eee, #e5e5e5); border: 1px solid rgba(255, 255, 255, .7); border-radius: 8px;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, .15), 7px 7px 25px rgba(0, 0, 0, .1), -10px -10px 20px rgba(255, 255, 255, 1), -4px -4px 8px rgba(255, 255, 255, 1), -3px -3px 5px rgba(255, 255, 255, 1), inset 2px 2px 10px rgba(0, 0, 0, .25), inset -2px -2px 3px rgba(255, 255, 255, 1), inset -5px -5px 7px rgba(255, 255, 255, 1); }
.Tarifs_container ::-moz-selection, .Tarifs_container ::selection, #Tarifs_Bonus::-moz-selection, #Tarifs_Bonus::selection { background-color: var(--couleur-principale); color: var(--couleur-secondaire); }
@media (max-width: 991px) { .Tarifs_container { margin-top: 60px; } }
@media (max-width: 767px) { .Tarifs_container { margin-top: 20px; } }

.Tarifs_Global { position: relative; margin: 20px 6px 20px 16px; padding: 7px; height: 50px; display: flex; justify-content: space-between; color: #000; font: 600 25px Montserrat; letter-spacing: 1px; background-color: var(--couleur-principale); }
.Tarifs_Global:after { position: absolute; top: -5px; right: 4px; bottom: 4px; left: -5px; border: 1.9px solid #000; content: ""; box-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, .1); }
.Tarifs_Global > p{ margin: -1px 8px 0 3px; }

.Tarifs_Instruct { margin: 20px 0; display: flex; justify-content: start; gap: 10px; font: 400 12px/23px Montserrat; letter-spacing: .5px; text-align: center; text-transform: uppercase; }
.Tarifs_Instruct strong { font-weight: 600; }
.Tarifs_Instruct > div { margin-right: 10px; padding: 10px; width: 50%; max-width: 290px; min-height: 70px; border: 1.9px solid #000; background-color: rgba(255, 255, 255, .7); box-shadow: 3px 3px 0 rgba(0, 0, 0, .1), inset 3px 3px 0 rgba(0, 0, 0, .1); }
.Tarifs_Instruct_SdL-1, .Tarifs_Instruct_SdL-2 { display: none; }
@media (min-width: 992px) {
    .Tarifs_Instruct > div { min-height: 138px; }
    .Tarifs_Instruct_SdL-1, .Tarifs_Instruct_SdL-2 { display: unset; } }
@media (min-width: 995px) { .Tarifs_Instruct > div { min-height: 115px; } }
@media (min-width: 1037px) {
    .Tarifs_Instruct > div { min-height: 90px; }
    .Tarifs_Instruct_SdL-1 { display: none; } }
@media (min-width: 499px) and (max-width: 853px) { .Tarifs_Instruct_SdL-2 { display: unset; } }
@media (max-width: 498px) { .Tarifs_Instruct_SdL-1, .Tarifs_Instruct_SdL-2 { display: unset; } }
@media (max-width: 477px) { .Tarifs_Instruct > div { min-height: 138px; } }
@media (max-width: 390px) { .Tarifs_Instruct > div { min-height: 161px; } }

/*----------------------- Cadre de calcul -----------------------*/
#TarifsCalcul { scroll-margin-top: 120px; }
@media (max-width: 767px) { #TarifsCalcul { scroll-margin-top: 85px; } }

.Tarifs_Mission { margin-top: 45px; font: 400 14.5px/26px "Source Sans 3"; text-align: center; }
.Tarifs_Mission fieldset { margin: -15px 13px -23px; padding: 16px 15px 21px; display: flex; justify-content: space-around; gap: 12px; flex-wrap: wrap; border: 1.9px dashed var(--couleur-principale-fcfc); background-color: rgba(255, 255, 255, .3); }
.Tarifs_Mission legend { margin-bottom: -2px; font: 700 19px/30px Montserrat; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.Tarifs_Mission input { display: none; }

.Tarifs_Cas + .Tarifs_Cas-label:hover, .Tarifs_Cas:checked + .Tarifs_Cas-label { background-color: var(--couleur-principale); }
.Tarifs_Cas-label { position: relative; margin: 7px 0 0 8px; width: 45%; height: auto; min-height: 75px; background-color: rgba(255, 255, 255, .8); }
.Tarifs_Cas-label:after { position: absolute; top: -5px; right: 3px; bottom: 3px; left: -5px; border: 1.9px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, .12), inset 3px 3px 0 rgba(0, 0, 0, .08); content: ""; }
.Tarifs_Cas-label:hover:after, .Tarifs_Cas:checked + .Tarifs_Cas-label:after { box-shadow: 3px 3.5px 0 rgba(0, 0, 0, .08); }

.Tarifs_Cas-etiquette { display: block; margin: 10px 20px 20px 14px; font: 600 14px/24px Montserrat; text-transform: uppercase; letter-spacing: .5px; }
.Tarifs_Cas-detail { display: block; margin: 13px 16px 23px 9px; font: 400 14px/21px "Source Sans 3"; }
.Tarifs_Cas-detail strong { font-weight: 600; }

@media (max-width: 420px)                          { .Tarifs_Cas-label { width: 90%; }
    .label1, .label2, .label3, .label4 { padding-bottom: 0; }
    .Tarifs_Mission fieldset { margin: -20px 13px -35px; background-color: transparent; border: none; }
    .Tarifs_Mission legend { margin-bottom: 2px; } }
@media (min-width: 421px) and (max-width: 534px)   { .Tarifs_Cas-label { width: 100%; } }
@media (min-width: 421px) and (max-width: 483px)   { .label2 .Tarifs_Cas-etiquette, .label3 .Tarifs_Cas-etiquette { margin-top: 21px; } }
@media (min-width: 446px) and (max-width: 483px)   { .label4 .Tarifs_Cas-etiquette { margin-top: 21px; } }
@media (min-width: 484px) and (max-width: 534px)   { .Tarifs_Cas-label { min-height: 53px; } }
@media (min-width: 535px) and (max-width: 543px)   { .label4 .Tarifs_Cas-detail { margin: 13px 6px 0 0; } }
@media (min-width: 535px) and (max-width: 767px)   { .Tarifs_Cas-etiquette { margin: 11px 6px 21px 0; }
    .Tarifs_Cas-detail { margin: 13px 10px 21px 5px; } }
@media (min-width: 813px) and (max-width: 991px)   { .label3 .Tarifs_Cas-etiquette { margin-top: 21px; } }
@media (min-width: 818px) and (max-width: 991px)   { .label2 .Tarifs_Cas-etiquette { margin-top: 21px; } }
@media (min-width: 992px) and (max-width: 1399px)  { .Tarifs_Cas-etiquette { margin: 11px 15px 21px 9px; }
    .Tarifs_Cas-detail { margin: 17px 15px 8px 9px; } }
@media (min-width: 998px) and (max-width: 1399px)  { .label4 .Tarifs_Cas-etiquette { margin: 11px 18px 21px 9px; } }
@media (min-width: 1011px) and (max-width: 1399px) { .label4 .Tarifs_Cas-etiquette { margin-top: 23px; }
    .label3 .Tarifs_Cas-detail { margin-bottom: 24px; } }
@media (min-width: 1015px) and (max-width: 1399px) { .label2 .Tarifs_Cas-etiquette { margin-top: 23px; }
    .label1 .Tarifs_Cas-detail { margin-bottom: 24px; } }
@media (min-width: 1020px) and (max-width: 1199px) { .label3 .Tarifs_Cas-etiquette { margin: 23px 6px 33px 0; } }
@media (min-width: 1200px) and (max-width: 1399px) { .Tarifs_Cas-etiquette { margin: 16px 6px 26px 0!important; } }

/*--- Affichage label1 ---*/
@media (max-width: 306px) { .label1 .tiret1 { display: none; } }
@media (min-width: 307px) and (max-width: 329px) { .label1 .tiret2 { display: none; } }
@media (max-width: 329px) { .label1 .espace1 { display: none; } }
@media (min-width: 330px) and (max-width: 417px) { .label1 .tiret1 { display: none; } }
@media (min-width: 330px) and (max-width: 991px) { .label1 .espace2 { display: none; } }
@media (min-width: 418px) and (max-width: 483px) { .label1 .tiret2 { display: none; } }
@media (min-width: 484px) and (max-width: 783px) { .label1 .tiret1 { display: none; } }
@media (min-width: 784px) and (max-width: 991px) { .label1 .tiret2 { display: none; } }
@media (min-width: 992px) and (max-width: 1399px) { .label1 .espace1 { display: none; }
    .label1 .tiret1 { display: none; } }
@media (min-width: 1400px) { .label1 .espace2 { display: none; }
    .label1 .tiret2 { display: none; } }

/*--- Affichage label4 ---*/
@media (max-width: 325px) { .label4 .espace1 { display: none; } }
@media (min-width: 326px) { .label4 .espace2 { display: none; } }


.Tarifs_Suppl { margin: -10px 0 0 13px; }
.Tarifs_Suppl-legend { margin-top: 70px; font-weight: 500; text-align: left; }
.Tarifs_Suppl-legend span, .Tarifs_Suppl-commentaire { font-weight: 400; font-style: italic; font-size: 13px; }
@media (min-width: 503px) { .Tarifs_SdL { display: none; } }
.Tarifs_Suppl-commentaire { display: none; }
.Tarifs_Suppl-commentaire span.LGi { font-size: 18px; }

/*----------------------- Checkbox Projets et BAT suppl. -----------------------*/
.Tarifs_Checkbox input { display: none; }
.Tarifs_Checkbox-ok, .Tarifs_Checkbox { margin: -8px 20px 0 0; }
.Tarifs_Checkbox-ok, .Tarifs_Checkbox, .Tarifs_Checkbox:hover { position: relative; top: 3px; right: -3px; bottom: -2px; left: 0; }
.Tarifs_Checkbox-ok, .Tarifs_Checkbox, .Tarifs_Checkbox:hover, .Tarifs_Checkbox input:checked+span, .Tarifs_Checkbox input:checked+span:hover { border-radius: 50%; border: 1.5px solid #000; cursor: pointer; }
.Tarifs_Checkbox-ok, .Tarifs_Checkbox, .Tarifs_Checkbox input:checked+span, .Tarifs_Checkbox input:checked+span:hover { width: 15px; height: 15px; float: left; }
.Tarifs_Checkbox-ok, .Tarifs_Checkbox, .Tarifs_Checkbox:hover { box-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, .2), inset 2.5px 2.5px 0 rgba(0, 0, 0, .2); }
.Tarifs_Checkbox-ok, /*.Tarifs_Checkbox:hover, */.Tarifs_Checkbox input:checked+span { background-color: var(--couleur-principale); }
.Tarifs_Checkbox, .Tarifs_Checkbox input:not(checked)+span/*, .Tarifs_Checkbox input:checked+span:hover*/ { background-color: #fff; }
.Tarifs_Checkbox input:checked+span, .Tarifs_Checkbox input:checked+span:hover { margin: -1.5px 0 0 -1.5px; }
.Tarifs_Checkbox input:checked+span { box-shadow: inset 2.5px 2.5px 0 rgba(0, 0, 0, .2); }
@media (max-width: 350px) { .Tarifs_Checkbox-ok, .Tarifs_Checkbox { margin-right: 13px; transition: all 0.5s linear; } }

/*----------------------- Checkbox Formats d'enregistrement -----------------------*/
.Tarifs_Format-enr input { display: none; }
.Tarifs_Format-enr-ok, .Tarifs_Format-enr { margin: -2px 10px 25px 0; border: 1.5px solid #000; text-align: center; font-family: Montserrat; letter-spacing: .7px; font-size: 10px; font-weight: 600; line-height: 12px; }
.Tarifs_Format-enr-ok, .Tarifs_Format-enr, .Tarifs_Format-enr input:checked+span:before { box-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.15), inset 2.5px 2.5px 0 rgba(0, 0, 0, 0.15); }
.Tarifs_Format-enr-ok, .Tarifs_Format-enr, .Tarifs_Format-enr input+span:before { float: left; }
.Tarifs_Format-enr-ok, .Tarifs_Format-enr:hover, .Tarifs_Format-enr input:checked+span:before { background-color: var(--couleur-principale); color: #000; /*text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);*/ }
.Tarifs_Format-enr-ok, .Tarifs_Format-enr input+span:before { padding: 3px 2px 2px 4px; }
.Tarifs_Format-enr-ok { cursor: default; }
.Tarifs_Format-enr { background-color: #fff; color: #555; cursor: pointer; }

.Tarifs_Format-enr input.TIF+span:before, .Tarifs_Format-enr input.TIF:checked+span:before { padding: 3px 5px 2px 6px; content: "TIF"; }
.Tarifs_Format-enr input.EPS+span:before, .Tarifs_Format-enr input.EPS:checked+span:before { content: "EPS"; }
.Tarifs_Format-enr input.SVG+span:before, .Tarifs_Format-enr input.SVG:checked+span:before { content: "SVG"; }
.Tarifs_Format-enr input.PNG+span:before, .Tarifs_Format-enr input.PNG:checked+span:before { content: "PNG"; }

/*----------------------- Bouton Reset -----------------------*/
.Tarifs-reset { right: 12px; margin: auto; float: right; }
.Tarifs-reset:hover { margin-top: -5px; margin-right: 4px; padding: 6px 11px 6px 14.5px; border: 1.9px solid #000; box-shadow: inset 2.5px 2.5px 0 rgba(0, 0, 0, .15); }
.Tarifs-reset:focus { background-color: var(--couleur-principale); }

@media (max-width: 534px)                          { .Tarifs_container .Boutons { margin-bottom: 13px; }
    .Tarifs_container .Boutons:hover { margin-bottom: 16px; } }
@media (min-width: 515px) and (max-width: 535px)   { .Tarifs_container .Boutons { margin-left: 20px; }
    .Tarifs_container .Boutons:hover { margin-left: 16px; }
    .Tarifs-reset { right: 6px; } }
@media (min-width: 992px) and (max-width: 1080px)  { .Tarifs_container .Boutons { margin-bottom: 13px; }
    .Tarifs_container .Boutons:hover { margin-bottom: 16px; } }
@media (min-width: 1068px) and (max-width: 1080px) { .Tarifs_container .Boutons { margin-left: 20px; }
    .Tarifs_container .Boutons:hover { margin-left: 16px; }
    .Tarifs-reset { right: 7px; } }
@media (min-width: 1081px) and (max-width: 1086px) { .Tarifs_Format-enr-ok, .Tarifs_Format-enr { margin-right: 8px; } }
@media (min-width: 1087px) and (max-width: 1100px) { .Tarifs_Format-enr-ok, .Tarifs_Format-enr { margin-right: 9px; } }
@media (min-width: 1081px) and (max-width: 1199px) { .Tarifs-reset { right: 4px; } }

/*--- clear: both; ---*/
.Tarifs_Checkbox:after, .Tarifs_Checkbox-ok:after, .Tarifs_Checkbox input+span:before:after, .Tarifs_Format-enr-ok:after, .Tarifs_Format-enr:after, .Tarifs_Format-enr input+span:before:after, .Tarifs_Format-enr input:checked+span:before:after, .Tarifs-reset:after { clear: both; }

#Tarifs_Bonus { margin: 50px auto -30px; font-size: 9px; text-align: center; letter-spacing: 1px; pointer-events: none; cursor: text; text-decoration:none; color:#000; }
@media (max-width: 767px) { #Tarifs_Bonus { display: none; } }



/*************************************************************************************************************************/
/*===============================================     Section Contact     ===============================================*/
/*************************************************************************************************************************/
#Contact { position: relative; padding: 0; color: #fff; background-color: var(--couleur-secondaire); box-shadow: 0 5px 10px rgba(0,0,0,.3), 0 20px 25px rgba(0,0,0,.3); z-index: 10; }

.Contact_Container { display: grid; grid-auto-columns: 1fr .5fr 1fr; grid-gap: 10px; text-shadow: 4px 7px 20px rgba(1, 1, 1, 0.5); }
.Contact_Container a, .Contact_Container a:hover, .Contact_Container a:focus { color: #fff; text-decoration: none; }
.Contact_Container .titre { margin-bottom: 95px; grid-column: 8 / span 1; font: 68px "Cross-Stitch"; writing-mode: vertical-rl; transform: rotate(180deg); transition: all 0.5s linear; }
.Contact_Container .accroche { grid-column: 1 / span 7; padding: 20px; text-align: right; font-size: 30px; font-weight: 700; letter-spacing: 1px; color: #fff; }
.Contact_Container .accroche span { color: var(--couleur-principale); }
.Contact_Container .coord { grid-column: 9 / span 7; padding: 20px 14px; text-align: left; font-size: 20px; font-weight: 500; }
.Contact_Container .coord span, .Contact_Container .coord i { color: var(--couleur-principale); }
.Contact_Container .accroche, .Contact_Container .coord { margin: 45px 0 35px; line-height: 45px; transition: all 0.5s linear; }
.Contact_Container .plus { font: 68px "Cross-Stitch"; }
.Contact_Container .plus-1 { line-height: 100px; }
.Contact_Container .plus-2 { line-height: 115px; }
@media (max-width: 765px) {
    .Contact_Container .titre { margin-bottom: 70px; }
    .Contact_Container .accroche { font-size: 25px; }
    .Contact_Container .coord { font-size: 17px; }
    .Contact_Container .accroche, .Contact_Container .coord { margin: 25px 0; line-height: 35px; } }
@media (max-width: 675px) {
    .Contact_Container .titre { font-size: 58px; }
    .Contact_Container { grid-gap: 0; }
    .Contact_Container .accroche, .Contact_Container .coord { margin: 5px 0; } }
@media (max-width: 643px) {
    .Contact_Container .titre { margin-bottom: 62px; }
    .Contact_Container .accroche { font-size: 20px; }
    .Contact_Container .coord { font-size: 15px; }
    .Contact_Container .accroche, .Contact_Container .coord {  line-height: 30px; } }
@media (max-width: 585px) {
    .Contact_Container .titre { margin-bottom: 52px; font-size: 62px; grid-column: 2 / span 1; }
    .Contact_Container .accroche { display: none; }
    .Contact_Container .coord { margin: -5px 0; font-size: 17px; line-height: 35px; grid-column: 3 / span 7; } }
@media (max-width: 420px) {
    .Contact_Container .titre { margin-left: 20px; font-size: 58px; grid-column: 1 / span 1; }
    .Contact_Container .coord { font-size: 15px; line-height: 30px; grid-column: 2 / span 7; } }
@media (max-width: 347px) {
    .Contact_Container .titre { margin-left: 0; }
    .Contact_Container .coord { font-size: 14px; line-height: 28px; } }



/*************************************************************************************************************************/
/*===============================================     Section Footer     ================================================*/
/*************************************************************************************************************************/

.footer-place { height: 255px; }
footer { position: fixed; left: 0; bottom: 0; padding: 30px 0; width: 100%; height: 245px; background: var(--couleur-secondaire-fc-fc); font: 300 13px/27px Montserrat, sans-serif; letter-spacing: .5px; color: #aaa6d7; z-index: 0; }
footer a, footer a:active { color: #aaa6d7; text-decoration:none; }
footer a:hover, footer a:focus { color: var(--couleur-principale); text-decoration: none; }
footer img { right: 10px; width: 100px; }
.RS { margin: 15px 8px 8px; display: inline-block; font: 100 30px "La Graphiste - Icons"; }


/*************************************************************************************************************************/
/*============================================     Page : qui suis-je ?     =============================================*/
/*************************************************************************************************************************/

#QSJ { position: relative; background-color: var(--couleur-secondaire); box-shadow: 0 5px 10px rgba(0,0,0,.3), 0 20px 25px rgba(0,0,0,.3); z-index: 10; }
@media (max-width: 767px) { #QSJ .container { padding: 100px 0 20px; } }

.Page_QSJ-container { margin: 0 auto 30px; padding: 50px; background-color: #fff; border-radius: 10px; text-align: left; transition: all 0.5s linear; }

.Page_QSJ { padding: 200px 0 50px; font: 300 18px "Cormorant Garamond", Serif; line-height: 25px; }
.Page_QSJ ::-moz-selection, .Page_QSJ ::selection { background-color: var(--couleur-principale); color: var(--couleur-secondaire); }

.Page_QSJ-ss-titre { font-size: 45px; }

.Page_QSJ strong { font-weight: 600; }
.Page_QSJ strong.BigUP { font-weight: 500; }
.colonnes { column-count: 2; }
.Page_QSJ-exergue { margin: 15px 0 30px; text-align: center; font: 300 38px/48px 'Source Sans 3'; color: var(--couleur-principale-fc); }
.Page_QSJ-exergue strong { font-weight: 500; }


.Page_QSJ-Poulpes { padding: 7px; width: 450px; border: 1px solid #000; box-shadow: 4px 4px 1px rgba(0, 0, 0, .15), inset 3px 3px 1px rgba(0, 0, 0, .15); background: var(--couleur-principale); font: 300 13px/19px "Source Sans 3", sans-serif; color: #000; text-align: center;
    transform: translate(150px,-15px) rotate(-4deg) skew(0deg) scale(1,1); transition: all 0.5s linear!important; }
.Page_QSJ-Poulpes .Note { margin-bottom: 3px; padding: 1px 5px 0; line-height: 27px; font-size: 14px; font-weight: 400; background-color: #2fe585; color: #fff; text-transform: uppercase; }
.Page_QSJ-Poulpes .fa { font-size: 14px; color: #fff; }
.Page_QSJ-Poulpes .Remise { text-transform: uppercase; color: #000; }
.Page_QSJ-Poulpes strong { font-weight: 400; }
.fa-caret-right, .fa-caret-left { opacity: .5; }
.Page_QSJ-Poulpes ::-moz-selection, .Page_QSJ-Poulpes ::selection { background-color: #fff; color: #000; }

.Page_QSJ-Photo_Agnes { width: 350px; height: 350px; border-radius: 50%; background: url("../img/Agnes-Sebagh.webp") -25px -33px/111% no-repeat; border: 3.5px solid var(--couleur-principale); box-shadow: 3px 3px 1px rgba(0, 0, 0, .15); transition: all .5s linear; }

.sep { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); }
.links { margin-bottom: 30px; }
.links a, .links a:hover, .links a:focus, .links a:active { text-decoration: none; transition: all 0.2s linear; }
.links a, .links a:focus { color: #00d97b; }
.links a:hover, .links a:active { color: var(--couleur-secondaire-fc); }

@media (max-width: 400px)                          { .Page_QSJ-exergue { margin-top: 0; font-size: 25px; line-height: 31px; } }
@media (min-width: 401px) and (max-width: 767px)   { .Page_QSJ-exergue { margin-top: 0; font-size: 30px; line-height: 37px; } }

@media (max-width: 330px)                          { .Page_QSJ-Poulpes { margin-left: -180px; width: 260px; } }
@media (min-width: 331px) and (max-width: 346px)   { .Page_QSJ-Poulpes { margin-left: -170px; width: 270px; } }
@media (min-width: 347px) and (max-width: 370px)   { .Page_QSJ-Poulpes { margin: 30px 0 10px  -180px!important; width: 300px; } }
@media (min-width: 371px) and (max-width: 400px)   { .Page_QSJ-Poulpes { margin-left: -170px; width: 330px; } }
@media (min-width: 401px) and (max-width: 454px)   { .Page_QSJ-Poulpes { margin-left: -150px; width: 330px; } }
@media (min-width: 455px) and (max-width: 492px)   { .Page_QSJ-Poulpes { margin-left: -130px; width: 330px; } }
@media (max-width: 492px)                          { .Page_QSJ-Poulpes { margin-top: 30px; }
    .Page_QSJ-Photo_Agnes { width: 222px; height: 222px; background-position: -15px -20px; } }
@media (min-width: 493px) and (max-width: 517px)   { .Page_QSJ-Poulpes { margin: 30px 0 10px -130px; width: 350px; } }

@media (min-width: 493px) and (max-width: 991px)   { .Page_QSJ-Photo_Agnes { width: 280px; height: 280px; background-position: -25px -30px; } }
@media (max-width: 517px)                          { .Page_QSJ-Photo_Agnes { margin: -25px auto 40px; } }

@media (min-width: 422px) and (max-width: 549px)   { .Page_QSJ .QSJ_Titre { font-size: 63px; } }

@media (max-width: 549px)                          { .Page_QSJ-container { margin: 0 20px; } }
@media (min-width: 550px) and (max-width: 767px)   { .Page_QSJ-container { margin-bottom: 20px; width: 530px; } }

@media (min-width: 518px) and (max-width: 767px)   { .Page_QSJ-Poulpes { margin: 25px 0 10px -100px; width: 350px; }
    .Page_QSJ-Photo_Agnes { margin: -10px auto 40px; } }
@media (max-width: 767px)                          { .Page_QSJ { padding-top: 90px; }
    .Page_QSJ-container { padding: 30px; }
    .colonnes { column-count: 1; } }

@media (min-width: 768px)                          { .Page_QSJ-SdL { display: none; } }
@media (min-width: 768px) and (max-width: 991px)   { .Page_QSJ-container { padding: 30px; width: 710px; }
    .Page_QSJ-Poulpes { margin: 25px 0 10px -30px; }
    .Page_QSJ-Photo_Agnes { margin: 50px 0 0 -10px; }
    .Page_QSJ-exergue { font-size: 35px; line-height: 40px; } }
@media (min-width: 992px) and (max-width: 1199px)  { .Page_QSJ-container { width: 950px; }
    .Page_QSJ-Poulpes { margin: 25px 0 10px 0; }
    .Page_QSJ-Photo_Agnes { margin-top: 40px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .Page_QSJ-container { width: 1130px; }
    .Page_QSJ .QSJ_Titre { line-height: 100px; }
    .Page_QSJ-Poulpes { margin: 20px 0 10px 0; }
    .Page_QSJ-Photo_Agnes { margin: 40px; } }
@media (min-width: 1400px)                         { .Page_QSJ-container { padding: 60px; width: 1310px; }
    .Page_QSJ-Poulpes { margin: 40px 0 10px 50px; }
    .Page_QSJ-Photo_Agnes { margin: 40px 0 0 70px; } }



/*************************************************************************************************************************/
/*==============================================     Page : CGV et ML     ===============================================*/
/*************************************************************************************************************************/

#CGV-ML { position: relative; background-color: var(--couleur-secondaire); box-shadow: 0 5px 10px rgba(0,0,0,.3), 0 20px 25px rgba(0,0,0,.3);  z-index: 10;}
#CGV-ML ::-moz-selection, #CGV-ML ::selection { background-color: var(--couleur-principale); color: var(--couleur-secondaire); }
#CGV-ML .container { padding: 200px 0 50px; width: 80%; }
@media (max-width: 767px) { #CGV-ML .container { padding: 100px 0 20px; } }
.Annexes { margin: 0 auto 70px; padding: 50px; background-color: #fff; border-radius: 10px; text-align: left; }
.Annexes h1 { font-size: 45px; font-weight: 800; color: var(--couleur-secondaire); }
.Annexes h2 { margin: 35px 0 10px; color: var(--couleur-secondaire); font-size: 40px; font-weight: 100; line-height: 37px; }
@media (max-width: 767px) { .Annexes h1 { font-size: 43px; }
    .Annexes h2 { font-size: 37px; line-height: 35px; } }
.Annexes h2 span { padding: 2px 5px; background-color: var(--couleur-principale); color: var(--couleur-secondaire); text-transform: uppercase; font-size: 14px; font-weight: 300; letter-spacing: 2px; }
.Annexes h3 { color: var(--couleur-secondaire); font-size: 24px; font-weight: 200; line-height: 23px; }
.Annexes p { font: 300 15px/22px "FF Good Pro"; column-count: 2; text-align: justify; gap: 30px; }
.Annexes p strong { font-weight: 400; color: var(--couleur-secondaire); }
.Annexes b { font-weight: 500; color: #03e281; }
.Annexes u { font-weight: 400; }
.Annexes .Copyright { margin-left: 3px; font-family: "Source Serif 4", sans-serif; font-size: 14px; }
.Annexes .infos-CGV { margin: 50px 0 30px; column-count: 1; text-align: left!important; }
.Annexes .infos-CGV strong { display: inline-block; width: 150px; font-style: italic; }
.Annexes .infos-CGV a, .Annexes .infos-CGV a:active, .Annexes .infos-CGV a:focus, .Annexes .infos-CGV a:hover, .Annexes .infos-ML a, .Annexes .infos-ML a:active, .Annexes .infos-ML a:focus, .Annexes .infos-ML a:hover { text-decoration: none; color: #000; }
.Annexes .infos-ML { margin: 20px 0 30px; column-count: 1; text-align: left!important; }
.Annexes .infos-ML strong { display: inline-block; width: 250px; font-style: italic; }
.Annexes .intro-ML { max-width: 700px; column-count: 1; text-align: left; }
.Annexes .definitions-ML { max-width: 700px; column-count: 1; text-align: left; font-style: italic; }
.Annexes .definitions-ML u.esp { margin-top: 15px; display: inline-block; }

hr { margin: 35px 0 -15px; opacity: 1; height: 1px; background-size: 15px, 100%; border: none; background-image: linear-gradient(90deg, transparent 60%, #fff 60%), linear-gradient(90deg, var(--couleur-principale-fc), #fff); }
.hr-mini { margin: 17px 200px 13px 2px; opacity: 1; height: 1px; background-size: 8px, 100%; border: none; background-image: linear-gradient(90deg, transparent 50%, #fff 50%), linear-gradient(90deg, var(--couleur-secondaire), #fff); }

@media (min-width: 995px) { .Annexes .infos-ML .cacher-3 { display: none; } }
@media (max-width: 994px) { .Annexes .infos-ML .cacher-4 { display: none; } }
@media (max-width: 870px) { #CGV-ML .container { width: 90%; } }
@media (min-width: 768px) { .Annexes .infos-CGV .cacher-1, .Annexes .infos-ML .cacher-1 { display: none; } }
@media (max-width: 767px) {
    .Annexes p { column-count: 1; }
    .Annexes .infos-CGV .cacher-2, .Annexes .infos-ML .cacher-2 { display: none; } }
@media (max-width: 580px) { .Annexes { padding: 30px; } }
@media (max-width: 500px) { .Annexes p { text-align: left; } }
@media (max-width: 420px) { #CGV-ML .container { width: 95%; } }
@media (max-width: 392px) {
    .Annexes .infos-CGV { font-size: 14px; line-height: 21px; }
    .Annexes .infos-CGV strong { width: 120px; } }



/*************************************************************************************************************************/
/*==============================================     Page : Erreur 404     ==============================================*/
/*************************************************************************************************************************/

#CGV-ML .container-erreur { margin: auto; padding: 170px 0 50px; max-width: 850px; }
.Erreur { margin: 0 30px; padding: 30px; background-color: #fff; border-radius: 10px; border: 1px solid var(--couleur-principale); }
.Error { text-align: center; font: 800 45px Montserrat; color: var(--couleur-secondaire); }
.NotFound { font: 500 15px Montserrat; color: #000; }
.Starsky { display: block; margin: auto; width: 100%; max-width: 650px; border-radius: 7px; border: 3px solid #444; filter: grayscale(20%); }
.cliquer { font: 100 45px "Badass Moon"; color: var(--couleur-secondaire); }
@media (max-width: 429px) {
    .Error { font-size: 35px; }
    .cliquer { font-size: 35px!important; } }
@media (max-width: 767px) {
    #CGV-ML .container-erreur { padding-top: 90px; }
    .cliquer { font-size: 40px; } }
@media (min-width: 430px) and (max-width: 825px) { .Error { font-size: 40px; } }
@media (min-width: 768px) and (max-width: 1024px) { #CGV-ML .container-erreur { padding-top: 145px; } }