@import url(../fonts/fonts.css);

:root {
	color-scheme: light dark;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
  
  
	/* Couleurs principales theme */
	--primary-color:#a09e35;
	--secondary-color:#dfdc70;
	--light-color:#ffffff;
	--dark-color:#000000;  

    /* Viewports
        320px — 480px: Mobile devices.
        481px — 768px: iPads, Tablets.
        769px — 1024px: Small screens, laptops.
        1025px — 1200px: Desktops, large screens.
    */
}

/* ERASER styles default navigateur */
html {
    word-wrap: break-word;
}

*, ::before, ::after {
    word-wrap: inherit;
}

html {
    box-sizing: border-box;
}

*, ::before, ::after {
    box-sizing: inherit;
}

body, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, td, textarea {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    border: 0;
}

a{
    text-decoration: none;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;

    font-family: 'Poppins', Helvetica, sans-serif;
}

/* DEFINITION TEMPLATE DEFAULT */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--light-color);

    min-width: 300px;
}

#root{
    width: 100%;
}

:is(header,main,footer) {
	/* VALEUR TEST */
    background-color: green;
}

/* CONTROLE DISPOSITION GENERALE */
.page-content{
    width:800px;
    margin-left: auto;
    margin-right: auto;

    /*position: relative;*/
}

/* Mobile */
@media(max-width: 800px) {
    .page-content{
        width:100%;
        margin-left: 0;
        margin-right: 0;
    }
}

h1,h2,h3{
    color: var(--primary-color);
}

h1{
    font-weight: bold;
    font-size: 48px;
    line-height: 1.8;
    letter-spacing: normal;        
    align-self: center;
    text-align: center;
}

h2{ 
    font-weight: bold;
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: normal;
    align-self: center;
    text-align: center;
}
h3{ 
    font-weight: bold;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: normal;
    align-self: center;
    text-align: center;
}

hr{
    width: 20%;
    border:none;
    size: 10px;
    height: 4px;
    background-color: var(--dark-color);
}

p{
    overflow-wrap: normal;
    text-align:justify;
    hyphens: auto;
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.4em;  
}

/* Composition 
      - Header
      - Slot
      - Footer
*
*
*/
header {
    background-color: var(--light-color);
        
    box-shadow:  0 0 25px rgba(0, 0, 0, 0.829);

    isolation: isolate;

    & .page-content{
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: center;    
    }

    & img{
        height: 158px;
        margin: 10px auto;
    }
}

/* Tablettes */
@media(max-width: 1280px) {
    header img{
        height: 120px;
        margin: 8px auto;
    }
}

/* Mobile */
@media(max-width: 800px) {
    header img{
        height: 5rem;
        margin: .5rem auto;
    }
}

main{
    /*background-color: var(--light-color);*/
    background:
      linear-gradient(to right, rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)),
      url(/assets/images/background_arc.svg) center no-repeat;

    background-size: auto, 600px;
    background-position: bottom -400px right -100px;

    color: var(--dark-color);

    & .flex-row{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
    }


    & .btn_cta{
        width: 200px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: stretch;

        background-color: var(--primary-color);

        color: var(--dark-color);
        font-weight: light;

        padding: 0.4em .7em;
        margin: 5px 0.5em 10px;
        vertical-align: middle;

        & svg{
            margin-top: auto;
            margin-bottom: auto;
            display: inline-block;
        }        
    }

 /*    @media(min-width: 801px) {
        .btn_cta{
            width: 200px;
        }
      }

    @media(max-width: 800px) {
        .btn_cta{
            flex
        }
    } */

    & .btn_cta.vertical{
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }


    & .contact-form{
        margin-left: auto;
        margin-right: auto;

        & .form-input{
            display: flex;
            flex-flow: column wrap;
            margin-top: 10px;
        }

        & .error{
            content:'nbps;';
            font-weight: 700;
            font-size: 12px;
        }
        /* input[type='text'], textarea{
            background-color: var(--light-color);
        } */

        & .btn_cta{
            margin-top: 15px;
            padding: .4em .8em;
            width: 130px;
            float: right;
        }
    }
    .form-input input[type='text'],
     .form-input textarea,
     .form-input select{
        width: 100%;
        background-color: var(--light-color);
        color:var(--dark-color);
        border: 1px solid grey;
        margin-top: 3px;
        resize: none;
    }
  /*  .form-input textarea{
        
    }*/

}
footer{
    padding: 15px;
    background-color: var(--dark-color); 

    .page-content{
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: space-between;
        
    }
}

footer .info-contact{
    /*float: left;*/
    margin: 10px 0 0 10px;
    width: 200px;
}

footer .info-other{
    margin-right: 0px;
    width: 260px;

    display:flex;
    flex-direction: column;
    align-items: flex-end;
justify-content: space-between;
}



/* Mobile */
@media(max-width: 500px) {
    footer{
        .info-contact
        {
            margin: 10px auto;
        }

        .info-other{
        margin:0 auto;
        align-items: center;
        }
    }
  }

footer .info-contact > div{
    display:flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5px;
}


/* Mobile */
@media(max-width: 500px) {
    footer .info-contact > div{
        justify-content: center;
    }
  }

footer .networks{
    display:flex;
    flex-direction: row;

}


footer .networks div.picto{
    display:flex;
    flex-direction: row;
    align-items: center;    
}

footer{
    font-size: 14px;
    text-align: left;
}
footer .info-contact p
,footer .info-contact span
,footer .networks span{
    margin-left: 10px;
    color: var(--light-color);
}

footer .networks svg{
    margin: 10px 10px 0 0;    
}

footer .info-other .legals{
    text-align: right;
    margin-top: 10px;

}
/* Mobile */
@media(max-width: 500px) {
    footer .info-other .legals{
                text-align: center;
        line-height: 2em;
    }
  }

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}