/* Objectif : Mutualiser le code avec création de classes et variables css génériques réutilisables */

/* Important spécial Safari correction comportement row bootsrap 4*/
.row:before, .row:after {
    display: none !important;
}

/* Définition des polices et taille de polices */

:root {
--typo-principale : 'Kumbh Sans', sans-serif;;
--typo-secondaire : 'votre police secondaire';

--font-size-normale-main_Title : 40px /*7rem*/;
--font-size-mobile-main_Title : 30px /*7rem*/;


--font-size-normale-lien_raccourci : 29px /*7rem*/ ; 
--font-size-tablette-lien_raccourci :  /*7rem*/; 
--font-size-mobile-lien_raccourci : 16px ;

--font-size-normale-callButton : 23px /*7rem*/;
--font-size-mobile-callButton : 17px /*7rem*/;

--font-size-normale-h1: 65px;
--font-size-mobile-h1: 25px;

--font-size-contact-h1--normal : 55px;
--font-size-contact-h1--mobile : 33px;
--font-size-contact_info : 22px;
--font-size-contact_placeholder : 20px;




--font-size-normale-h2 : 30px ; 
--font-size-tablette-h2 : 30px /*4vh*/ ; 
--font-size-mobile-h2 : 25px;

--font-size-normale-h3 : 29px ;
--font-size-mobile-h3 : 17px ;

--font-size-normale-corps : 14px;
--font-size-mobile-corps : 12px;

--font-size-normale-page_content : 20px;


--font-size-normale-card-title : 25px ;
--font-size-normale-card-sub_title : 13px ; 

--font-size-normale-header--footer : 20px;
--font-size-mobile--header: 25px;
--font-size-mobile--footer: 16px;
--font-size-normale-footer--title : 40px;


}

/* Définition d'une palette de couleurs  */

/* Couleurs utilisées sur le site
fond : blanc
texte & fond footer :  bleu marine #011936
gris :#707070
gris-pale : #0000002E
fond bouton bleumarine--2 #00172D
fond bas footer bleu nuit #000D1A */

:root {
--main-text-color : #011936;
--main-button-color : #00172D;
--bleu--nuit : #000D1A; 
/* --main-button-color-transparent : rgba(232, 65, 65,0.9);
--dropdown-transparent-bg : #CECECE80;
--second-button-color : #009789;
--second-button-color-transparent : rgba(0, 151, 137, 0.5); */
}

/* Définition des tailles ( polices, marges et padding)*/
/*base Bootstrap4 :  -1 = 0.25 rem*/ 
:root {
--large_rem : 5rem;
--fin_rem : 1rem; /* = bootstrap -3 ex : pr-3*/
--normal_rem : 2rem;
--moyen_rem : 3rem;
--x-large_rem : 20rem;
}

/* Définition de bordure  */
:root {
--normal_px : 4px;
--fin_px : 2px;
--extra-fin_px : 1px; 
--xl_px : 10px;
}


/* Définition des checkbox  (diminuer de 10px pour tablettes et mobiles) */
input[type=checkbox]{
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
height: calc(4*var(--xl_px));
width: calc(4*var(--xl_px));
background: var(--main-bg-color);
border: var(--fin_px) solid var(--main-text-color);
margin-top: -3px;

}
/* (diminuer de 10px pour tablettes et mobiles) */
input[type="checkbox"]:checked {
border: 0px;
background-image: url(/webroot/img/images/checkbox_checked.svg); /* exemple checkbox personnalisée*/
background-size: calc(4*var(--xl_px)) calc(4*var(--xl_px));
}

/* Définition du header  */
/* A conserver sinon header ne prend pas en compte le font-family */
body {
font-family: var(--typo-principale);
font-size: var(--font-size-normale-corps);
}
cursor {
    cursor: pointer;
}

header, footer {
    font-size: var(--font-size-normale-header--footer);
}
header nav {
    background-color: #011936db;
    border-radius: 0px ! important; 
}
h1, h2 {
    font-size: var(--font-size-normale-main_Title);
}
footer {
color: white;
background-color: var(--main-text-color);
}
footer .nav > li > a {
    padding: 0px;
}
footer .nav > li > a:hover {
    background-color: transparent;
    color: white;
    text-decoration-line: underline;
    transition: ease-in 200ms;
    text-decoration-thickness: 2px;
}

.footer_bas, .footer_bas a, .footer_bas a:hover {
    background-color: var(--bleu--nuit);
    color: #6c757d !important;
}
.main_page a, .page_main a {
    color: var(--main-text-color) !important;
}
a {
    color: white;
}




/* MENUS */
header .nav > li > a {
    padding: calc(var(--xl_px)/2) calc(var(--xl_px)*2);
} 
.btn-navbar {
font-size: var(--font-size-normale-bouton);
margin-bottom: calc(var(--xl_px));
margin-top: calc(var(--xl_px)/2);
color: var(--main-bg-color);
background-color: var(--main-text-color);
position: relative;
display: inline-block;
text-decoration: none !important;
text-align: center;
word-break: break-word;
}

.btn-navbar:active {
transform: translate(0px, calc(var(--xl_px)/2));
-webkit-transform: translate(0px, calc(var(--xl_px)/2));
box-shadow: 0px 1px 0px 0px;
}

/* Focus uniquement sur les menus .mainMenu*/
.nav>li>a:focus {
text-decoration: none;
background-color: transparent;
}

/* Définition de contenu principal  */

/*page ACCUEIL*/
#hero {
    background-image: url("/img/accueil_Hero_resized.jpg");
    background-size: cover;
    height: 1047px;
}
.mainLogo img {
    /* width: 85%; */
    /* width: 93rem; */
   /*  width: 902px;
    height: 902px; */
    aspect-ratio: attr(width) / attr(height);
    margin-top: 25px;
margin-bottom: -77px;
}
.fleche_wrapper {
    position: relative;
    top: -26rem;
}
.flecheBas img {
    aspect-ratio: attr(width) / attr(height);
}
.principal_CallToAction {
    margin-bottom: 5rem;
}
.lienRecherche {
    padding: var(--xl_px);
    margin-bottom: 4vh;
    border-radius: var(--xl_px);
    width: 521px;
    height: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--xl_px);
    text-align: center;
    font-size: var(--font-size-normale-callButton);
}
.call_to_Action--contact_btn {
    background: var(--main-button-color)0% 0% no-repeat padding-box;
    color: var(--main-text-color);
    box-shadow: 7px 7px 15px #0000005D;
    transition: 0.2s;
}
.call_to_Action--contact_btn a {
    width: 100%;
}
.call_to_Action--contact_btn:hover {
    transform: scale(1.1);
    color: white;
    box-shadow: 0px 0px 2rem var(--main-text-color);
}
.lienRecherche a:hover, .card-link:hover {
    color:var(--second-button-color);
    background-color: var(--main-bg-color);
    transition: ease-in 600ms;
    text-decoration: none;    
}


/* .card-Acceuil{
    width: 100%;
overflow: hidden;
display: inline-block;
text-overflow: " ... Lire la suite";
white-space: nowrap;
} */
/* Text overflow ne fonctionne que sur span ? https://medium.com/@surbhisoni241/why-css-text-overflow-ellipsis-not-working-968814b43370 */
.card-Acceuil .card-body {
    overflow: hidden;
    height: 320px;
}
.card-Acceuil img {
    height: 215px;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-size: cover;
    background-position: center;
    background-blend-mode: luminosity;
    background-color: #2f4258;
  }
  .apparition_on_hover p {
    color: white;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .article_link {
      color: var(--main-button-color);
  }
  .card-Acceuil:hover .overlay {
    opacity: 1;
  }
.card-Acceuil .card-subtitle {
    font-size: var(--font-size-normale-card-sub_title);
}
.card-Acceuil .card-title {
    font-size: var(--font-size-normale-card-title);
    height: 6rem;
}
#exempleImg {
    background-image: url("/img/marteau_resized.jpg");
    background-size: cover;
    height: 794px;
    background-repeat: no-repeat;
}

/* cookie */
.cookie_alert {
    box-shadow: 3px 2px 0px 2px var(--main-button-color);
    color: var(--bleu--nuit);
    background-color: #f1f1f6;
    border: 1px solid var(--main-button-color);
}
#close_alertBox {
    cursor: pointer;
    margin-left: 15px;
    position: relative;
    padding: 0;
    color: var(--main-text-color);
  }
/* Page ARTICLE */
#article_hero {
    /* background-image: url("/webroot/img/article_Hero--Marteau.jpg"); */
    background-size: cover;
    height: 794px;
    background-repeat: no-repeat;
}
.page_main h1, .page_main h2 {
    font-size: var(--font-size-normale-h1);
    font-weight: bold;
    /* text-align: center */
}
.page_main h3 {
    font-size: var(--font-size-normale-h3);
    font-weight: bold;
}
.page_main p {
    font-size: var(--font-size-normale-page_content);
}
/* Page SERVICE */
#service_DroitFamille--hero {
    background-image: url("/img/service_hero--DroitFamille_resized.jpg");
    background-size: cover;
    height: 794px;
    background-repeat: no-repeat;
}
.service_section_image {
    background-image: url("/img/service_DroitFamille_resized.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.banner_bg {
    background-color: var(--main-text-color);
}
/* Page CONTACT */
#contact--hero {
    background-image: url("/img/accueil_Hero_resized.jpg");
    background-size: cover;
    height: 709px;
    background-repeat: no-repeat; 
}
.contact_main h1 {
    font-size: var(--font-size-contact-h1--normal);
}
.contactForm {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: var(--main-text-color) solid 3px;
    border-radius: 0px;
    width: 90%;
}
.contactForm::placeholder {
    color: #a6a7a8; /* Attention contraste pas assez élévé */
    font-size: var(--font-size-contact_placeholder); 
}
.contactButton {
border-radius: var(--xl_px);
width: 90%;
height: 74px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}

/* Définition du formulaire de contact  */
.contactForm h2 {
color: var(--main-text-color);
border: var(--fin_px) solid var(--main-text-color);
font-size: 4rem;
padding: var(--xl_px) ;
width: 70%;
margin: auto;
margin-bottom: 50px;
text-align: center;

}
.contactForm input, .contactForm textarea{
font-size: var(--font-size-normale-card-text);
font-family: var(--typo-principale);
color: var(--main-text-color);
}
.contactForm input::placeholder, .contactForm textarea::placeholder, .contactForm label {
font-size: 15px;
}

.contactForm label {
color: var(--main-button-color);
}
.contactForm input:focus, .contactForm textarea:focus {
border-color: var(--second-button-color);
box-shadow: 0 0 0 .2rem var(--second-button-color-transparent) ;
}

#inputUser_message {
width: 100% !important;
/* border: laissez class border de BS4 color : #ced4da 1px solid*/
padding: var(--xl_px) !important;
height: 100px;
}

.formSubmit {
font-size: 1.5rem;
padding: var(--xl_px);
}
.formSubmit:hover{
color: var(--main-bg-color);
background-color: var(--second-button-color);
}
.formSubmit:active {
color: var(--main-bg-color);
background-color: var(--main-bg-color);
border: var(--second-button-color) solid var(--fin_px) ;
}
/* ipad */ 
@media screen and (min-width: 768px) and (max-width: 810px) {
    .card-Acceuil img {
        height: auto;}
    .mainLogo img{
       /*  width: 58rem; */
       /* width: 603px; */
        margin-top: 38rem;
        aspect-ratio: attr(width) / attr(height);
    }
}

@media (max-width: 568px) {
    #hero {
        background-image: url("/img/BG Mobile_resized.jpg");
        background-size: cover;
        height: 778px;
    }
    body {
        font-size: var(--font-size-mobile-corps);
        }
    footer h2 {
        font-size: var(--font-size-mobile-main_Title);
    }
    header {
        font-size: var(--font-size-mobile--header);
    }
    footer {
        font-size: var(--font-size-mobile--footer);
    }
    h1 {
        font-size: var(--font-size-mobile-h1);
    }
    .lien_raccourci {
        font-size: var(--font-size-mobile-lien_raccourci);
    }
    .lienRecherche {
        width: 275px;
        height: 69.5px;
        display: flex;
        font-size: var(--font-size-mobile-callButton);
    }
    .card-Acceuil .card-text {
        font-size: var(--font-size-mobile-corps);
    }
    .card-Acceuil .card-body {
        text-align: left;
    }
    .mainLogo img{
        /* width: 100%; */
        /* width: 33rem; */
        /* width: 330px; */
        aspect-ratio: attr(width) / attr(height);
        margin-top: 68%;
        margin-bottom: 55%;
    }
    
    #navbarContent .navbar-nav {
        width: 330px !important;
    }
    #navbarContent ul .nav-item {
        text-align: left !important;
    }
    #navbarContent ul .nav-item a{
        color: white !important;
    }
    #navbarContent ul .nav-item a:hover{
        text-decoration-line: underline !important;
        transition: ease-in 200ms !important;
        text-decoration-thickness: 2px;
        text-decoration: white !important;
    }
    #article_hero {
        background-image: url("/webroot/img/article_Hero--Marteau--mobile.jpg");
        background-size: cover;
        height: 622px;
        background-repeat: no-repeat;
    }
    .page_main h1, .page_main h2 {
        font-size: var(--font-size-mobile-h1);
    }
    .page_main h3 {
        font-size: var(--font-size-mobile-h3);
    }
    #service_DroitFamille--hero {
        background-image: url("/webroot/img/service_hero--DroitFamille--mobile.jpg");
        background-size: cover;
        height: 666px;
        background-repeat: no-repeat;
    }
    .service_section_image {
        height: 413px;
    }
    .page_main p {
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media screen and (max-width: 360px) {
    .mainLogo img{
        /* width: 28rem; */
        /* width: 297px; */
        aspect-ratio: attr(width) / attr(height);
    }
    .fleche_wrapper {
        position: relative;
        top: 0rem;
    }
}