@font-face {
    font-family: 'Almarai';
    src: url('/fonts/Almarai/Almarai-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Almarai';
    src: url('/fonts/Almarai/Almarai-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Almarai';
    src: url('/fonts/Almarai/Almarai-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Almarai';
    src: url('/fonts/Almarai/Almarai-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'ZenDots';
    src: url('/fonts/Zen_Dots/ZenDots-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* @font-face {
font-family: 'Roboto';
src: url('/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
font-weight: normal;
font-style: italic;
} */

@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/*VARIABLES*/
:root{
    /* --indigo : #5800b0 ; */
    --noir : #221F2F ;
    --vert : #28BB77 ;
    --jaune : #F7EE33 ;


    --color : #1f1f1f;
    --header_margin_x : 2rem ;
    --padding_section : 5rem ;
    --ff_titre : 'Almarai', sans-serif;
    --ff_labeur : 'Roboto', sans-serif;
    /* --ff_labeur : 'Playfair Display', serif; */
    --border_radius_page: 5rem ;
}
@media (min-width: 600px) and (max-width: 1023px) {
    :root{
        --padding_section : 2rem ;
    }
}
@media (min-width: 0px) and (max-width: 600px) {
    :root{
        --padding_section : 1rem ;
    }
}
::selection {
    background-color : var(--vert) ;
    color : white ;
}

/*FONTING*/
body{
    background-color: var(--noir) ; /*pour effet border radius invérsé*/
    font-family: var(--ff_labeur);
    line-height: 1.5;
}
h1,h2,h3,h4,h5,h6{
    line-height: initial;
    font-weight: normal;
}
strong { font-weight: normal; }
#chapo strong { font-weight: 300; }

em { font-style: normal; }


#titre_principal{
    font-size: 5rem ;
    font-family: var(--ff_titre);
}

.u{
    text-decoration: underline !important;
}
.col2 {
    /* display: flex; */
    /* flex-wrap: wrap; */
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2 colonnes de taille égale */
    /* gap : 0 ; */
    padding: var(--padding_section);
}


.col2 > * {
    /* flex-grow: 1 ; */
    /* max-width: 50% ; */
    /* display: inline-block; */
    padding: 0;
}

@media (min-width: 0px)  and (max-width: 1300px) {
    .col2  {
        /* flex-grow: 1 ; */
        /* min-width: 100% ; */
        display: block;
        padding: 0;
    }
    .col2 > * {
        /* flex-grow: 1 ; */
        /* max-width: 50% ; */
        /* display: inline-block; */
        padding: var(--padding_section);
    }
}

.row2{
    display: flex;
    flex-direction: column;
    padding: 0;
}
.row2 > * {
    /* box-shadow: 0 0 0 1px black inset ; */
    /* flex-grow: 1 ; */
    /* max-width: 50% ; */
    /* min-width: 50% ; */
}

.liste_aeree {
    font-size: 1.5rem;
    line-height: 1.5;
}
.liste_aeree > li {
    margin-bottom: 5rem;
}
.liste_accent{
    color : var(--vert);
    font-weight: 800 ;
}
@media (min-width: 0px) and (max-width: 1023px) {
    .liste_aeree {
        font-size: 1.2rem;
        /* line-height: 4rem; */
    }
    .liste_aeree > li {
        margin-bottom: 4rem;
    }
}


html,body{
    margin: 0;
    padding: 0;
}
h2{
    font-family: var(--ff_titre) ;
    font-weight : 300 ;
    font-size: 5rem;
    color : var(--vert) ;
}
@media (min-width: 0px) and (max-width: 600px) {
    h2 {
        font-size: 3.5rem;
    }
}

a{
    text-decoration: none;
    color: var(--color);
}
body{
    display: flex;
    flex-direction: column;

    min-height: 100vh;
    padding-top: 6rem; /*pour le pof*/

    font-size: 1.5rem;
    line-height: 2;
}
@media (min-width: 0px) and (max-width: 1023px) {
    body {
        font-size: 1.3rem;
        padding-top: 12rem;
        /* line-height: 1.5; */
    }
}
/* body > * {
box-shadow:  0 0 0 1px black inset ;
} */
header{
    /* background-color: lightcyan; */
    background-color: var(--noir);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
@media (min-width: 0px) and (max-width: 600px) {
    header{
        flex-direction: column;
        align-items: start;
    }
}
#header_logo{
    /* background-color: violet; */
    height: 5rem;
    padding: 0 var(--header_margin_x);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap : 1rem ;
}
#header_logo > img{
    /* height: 2rem; */
    width: 13rem ;
}
@media (min-width: 0px) and (max-width: 600px) {
    #header_logo > img{
        width: 8rem ;
    }
}
#header_tel, #header_mail{
    /* background-color: gold; */
    background-color: var(--jaune);
    padding : 1rem 2rem ;
    border-radius: 50rem;
    margin: var(--header_margin_x) 1rem;
    white-space: nowrap; box-decoration-break: clone;
    transition: .3s;
}
@media (min-width: 600px) and (max-width: 1000px) {
    #header_tel, #header_mail{
        padding : .5rem 2rem ;
    }
}
@media (min-width: 0px) and (max-width: 600px) {
    #header_tel, #header_mail{
        padding : .25rem 1rem ;
        margin: var(--header_margin_x) .5rem;
        font-size: 1rem;
    }
}

#header_tel:hover, #header_mail:hover{
    background-color: var(--vert);
    color:white;
}

#wrap_jumbotron{
    background-image: url("/images/electricien-professionnel-valence/e-comme-electricite-1.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#wrap_jumbotron + * {
    background-image: url("/images/electricien-professionnel-valence/e-comme-electricite-2.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.jumbotron{
    /* min-height: calc(80vh - var(--padding_section)); */
    /* max-width: 50rem !important; */
}
#chapo::first-letter{
    font-family: var(--ff_titre) ; font-weight: bold;
    font-size: 2rem;
}
#chapo{
    font-family: var(--ff_titre) ; font-weight: 300;
}
#chapo br {
    display: inline-block;
    margin-bottom: 1.5rem;
}

h1{
    font-size: 1rem;
    color:white;
}
#titre_principal{
    margin: 0;
}
#sous_titre{
    margin-top: 0;
    font-size: 2rem;
    font-family: var(--ff_titre) ; font-weight: 300;
    color : var(--vert) ;
    font-style: italic;
}
@media (min-width: 0px) and (max-width: 600px) {
    #sous_titre{
        line-height: initial ;
        text-align: center;
    }
}
#sous_titre strong {
    font-weight: 300 ;
}

main{
    /* background-color: pink; */
    background-color: white; /*pour effet border radius invérsé*/
    border-top-left-radius: var(--border_radius_page) ;
    border-top-right-radius: var(--border_radius_page) ;
    /* border-bottom-left-radius: var(--border_radius_page) ; */
    /* border-bottom-right-radius: var(--border_radius_page) ; */
    /* border-radius: var(--border_radius_page) ; */
    overflow: hidden;
    flex-grow: 1;
}
footer{
    /* background-color: palegreen; */
    background-color: var(--noir);
    color:white;

    /*effet rappel logo*/
    border-left : solid 2.5rem var(--vert) ;
    border-right : solid 2.5rem var(--vert) ;
}
footer a {
    color:white;
}
#copyfooter{
    text-align: center;
    padding: 2rem;
    font-size: .8rem;
}

.label_coo{
    display: inline-block;
    width: 15rem;
}

.nom_dans_titre{
    color : var(--noir) ;
    opacity: .2;
    font-size: 3rem ;
}
@media (min-width: 0px) and (max-width: 600px) {
    .nom_dans_titre{
        font-size: 8vw;
    }
}
#services .nom_dans_titre{
    color : white ;
}



section {
    /* box-shadow:  0 0 0 1px black inset ; */
    padding: var(--padding_section);
}


#services{
    color: white;
}
#services ul li::marker {
    color: var(--vert);
}



/* #gallerie{
display: flex;
flex-wrap: wrap;
}
#gallerie > img {
object-fit: cover ;
width: 20rem;
aspect-ratio : 1;
filter : grayscale(100%);
transition: 1s ;
} */
/* #gallerie > img:hover {
object-fit: cover ;
filter : grayscale(0%) sepia(50%) hue-rotate();
} */

/* Base pour tous les écrans */
#gallerie {
    display: grid;
    padding: 10px;
}

/* Style des images (carrées) */
#gallerie > img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Force les images à être carrées */
    object-fit: cover; /* Remplit l'espace tout en gardant les proportions */


    filter : grayscale(90%);
    transition: 1s ;
}
#gallerie > img:hover , #gallerie > img.hover { /*WARNING classe hover*/
    object-fit: cover ;
    filter : grayscale(50%) sepia(50%) ;
}
#gallerie > img:first-child {
    border-top-left-radius: var(--border_radius_page) ;
}
#gallerie > img:last-child {
    border-bottom-right-radius: var(--border_radius_page) ;
}

/* Desktop */
@media (min-width: 1000px) {
    #gallerie {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablette */
@media (min-width: 600px) and (max-width: 1000px) {
    #gallerie {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Smartphone */
@media (max-width: 599px) {
    #gallerie {
        grid-template-columns: 1fr;
    }
}


#avant_footer{
    background-color: var(--vert) ;
    border-top-left-radius: var(--border_radius_page) ;
    border-top-right-radius: var(--border_radius_page) ;
    /* overflow: hidden; */
}
#avant_footer , #avant_footer h2, #avant_footer a{
    color : white;
}
/* #contact_avant_footer{
} */
/* #contact_avant_footer a {
text-decoration: underline;
} */
@media (min-width: 1000px) and (max-width: 9999px) {
    /* #contact_avant_footer{
    padding-left: 50vw;
    } */
    #avant_footer{
        display: grid ;
        grid-template-columns: 1fr 1fr;
        /* display: block ; */
    }
}
#logo_avant_footer{
    padding-left: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: .1;
}




/*CARTE TOURNANTE*/
#contact_sous_wrap_carte_tournante{
    padding: var(--padding_section);
    /* padding-top: 0; */
    font-weight: 800;
    font-size: 1rem;
}
#contact_sous_wrap_carte_tournante h2{
    margin: 0;
}
#contact_sous_wrap_carte_tournante hr{
    opacity: .2 ;
}
.wrap_carte_tournante{
    --wrap_carte_tournante_h : 30vh ;
    --carte_tournante_w : 30vh ;
    --carte_tournante_aspect_ratio : 1.55 ;
    --carte_tournante_h : calc( var(--carte_tournante_w) / var(--carte_tournante_aspect_ratio) ) ;


    /* background-color: indianred; */
    height: var(--wrap_carte_tournante_h);
    position: relative;
}
@media (min-width: 0px) and (max-width: 600px) {
    .wrap_carte_tournante{
        --wrap_carte_tournante_h : 40vh ;
    }
}
@keyframes anim_carte_tournante_recto {
    0%{ transform: rotateY(0deg) rotateZ(0deg); }
    100%{ transform: rotateY(180deg) rotateZ(-90deg); }
}
@keyframes anim_carte_tournante_verso {
    0%{ transform: rotateY(180deg) rotateZ(0deg); }
    100%{ transform: rotateY(0deg) rotateZ(-90deg); }
}
.wrap_carte_tournante > * {
    backface-visibility: hidden;
    width: var(--carte_tournante_w) ;
    height : var(--carte_tournante_h) ;
    /* aspect-ratio : var(--carte_tournante_aspect_ratio) ; */
    position: absolute;
    top: 7rem;
    left: calc( 50% - var(--carte_tournante_w) / 2);
    background-position: center ;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: calc(var(--carte_tournante_w) * 0.05) ;
    animation : 30s infinite alternate ease-in-out ;
}
.carte_tournante_recto{
    /* background-color: green; */
    animation-name : anim_carte_tournante_recto ;
    background-image: url('/images/electricien-professionnel-valence/carte-de-visite-recto.png') ;
    transform: rotateY(180deg) ;
}
.carte_tournante_verso{
    /* background-color: blue; */
    background-image: url('/images/electricien-professionnel-valence/carte-de-visite-verso-rotation.png') ;
    animation-name : anim_carte_tournante_verso ;
    /* animation : anim_carte_tournante_verso 5s infinite alternate ease-in-out ; */
}


/*PAGE ERREUR 404*/
body#err {
    background-color: white;
    padding: 5rem;
    min-height: inherit;
    margin: 0 auto;
}
body#err img {
    max-width: 50vw ;
}
body#err h1 {
    font-family: var(--ff_titre) ;
    font-weight : 300 ;
    font-size: 5rem;
    color : var(--vert) ;
}
body#err a {
    text-decoration: underline;
    color : var(--vert);
}