/*===================================================================================================================
=================================================== DEFAULT STYLE ===================================================
===================================================================================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

li {
    list-style: none;
    margin: 0;
    padding: 0;
}

li a {
    display: inline-block;
    margin: 0;
    padding: 0;
}

li a img {
    display: block;
    margin: 0;
    padding: 0;
}

input:focus, textarea:focus, select:focus{
    color: var(--text-default-dark);
}

input:focus-visible, textarea:focus-visible, select:focus-visible{
    color: var(--text-default-dark);
}

/*===================================================================================================================
=================================================== VARIABLES ===================================================
===================================================================================================================*/

:root{

    scroll-behavior: smooth;
    --scroll-margin-top: 60px;
    --white:#FFFFFF;
    --black:#000000;
    --grey:#aeaeae;
    --yellow:#EAFF05;
    --green:#05FF6D;
    --red:#FF6505;
}

/*===================================================================================================================
=================================================== FONTS ===================================================
===================================================================================================================*/

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

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

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

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

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

/*===================================================================================================================
=================================================== STYLES ==========================================================
===================================================================================================================*/

/* ================================================= */
/* ==================== GLOBALS ==================== */
/* ================================================= */

*{
    box-sizing: border-box;
}

html{
    height: 100%;
    overflow-y: scroll;
}

body{  
    font-family: 'Saira', 'Roboto', Helvetica, sans-serif; 
    color: var(--white);
    background-color: var(--black);
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main{
    justify-content: center;
    margin: 0;
}

section{    
    padding: 14% 5%;
}

.section-title{
    text-align: left;
}

.display-flex{
    display: flex;
    flex-wrap: wrap;
}

.margin-auto{
   margin:auto;  
}

.width-25{
    width: 25%;
}

.width-50{
    width: 50%;
}

.width-75{
    width: 75%;
}

h1{
    font-weight: bold;
    font-size: 1.6rem; 
    padding-top: 1rem;
    line-height: 2rem;
    text-transform: uppercase;
}

h2{
    font-family: 'Bungee Inline', 'Roboto', Helvetica, sans-serif;
    font-size: 1.2rem;
    padding: 1rem 0;
    line-height: 1.4;
}

h3{
    font-weight: bold;
    font-size: 1.2rem;
    padding: 1rem 0;
    line-height: 1.5rem;
}

h4{
    font-size: 1.1rem;
    padding: 1rem 0;
    line-height: 1.5rem;
}

strong{
    font-weight: bold;
}

.italic{
    font-style: italic;
}

p{
    font-size: 1.1rem;
    line-height: 1.6rem;
}

::selection {
  background-color: var(--black);
  color: var(--yellow);
}

.little{
    text-align: center;
    font-style: italic;
}

input::placeholder, textarea::placeholder{
    text-align: left; 
    font-size: 0.8rem;   
    color: var(--grey);
}

input:focus, textarea:focus, select:focus{
    outline: none;
    color: black;
}

.form-group, .select-group, .radio-group, .form-checkbox{
    padding: 1rem 0;    
}

.form-group input, .form-group textarea, .select-group select{
    width: 80%;
}

.frame a, .frame p{
    display: block;
    color: var(--white);
    padding: 1rem 0;
    width: 100%;
    margin: auto;
    margin-bottom: 2rem;
    border: 1px solid white;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: 0.3s ease;
}

.frame a:hover{
    background-color: rgba(255, 255, 255, 0.822);
    color: var(--black);
}

.h1-trait{
    margin: 1rem 0;
    display: block;
    background-color: white;
    width: 50px;
    height: 10px;
}

form input, form select{
    font-family: 'Saira', 'Roboto', Helvetica, sans-serif; 
    border: none;
    background-color: rgb(214, 214, 214);
    border-radius: 5px;
    padding: 10px; 
}

form textarea{
    font-family: 'Saira', 'Roboto', Helvetica, sans-serif;
    border: none;
    border-bottom: var(--purple-primary-light) 1px solid;
    background-color: rgb(214, 214, 214);
    border-radius: 5px;
    padding: 10px;
}

.text-input{ 
    font-size: 1rem;  
    color: black;
    resize: vertical;
}  

.link-button a{
    display: block;
    width: 50%;
    text-decoration: none;
    font-family: 'Saira', 'Roboto', Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    background-color: var(--yellow);
    color: var(--black);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin: 1rem auto;
    cursor: pointer;
    text-align: center;
    border: none; 
    transition: 0.3s ease;
}

.link-button a:hover{
    transform: scale(1.02);
    background-color: #effb7b;
    color: #202020;
}

button:hover{
    transform: scale(1.02);
    background-color: #effb7b;
    color: #202020;
}

.success, .error{
    position: absolute; 
    top: 10vh;
    text-align: center;    
    width: 100%;
    padding: 25px 0;
    opacity: 0.95;
    z-index: 999;
    display: block;
}

.success{    
    background-color: rgb(86, 209, 168);   
}

.error{
    background-color: rgb(237, 134, 134);
}

.success p, .error p{
    color: var(--white);
}

.success button, .error button{
    font-family: 'Saira', 'Roboto', Helvetica, sans-serif;
    background-color: white;
    color: var(--black);
    border: none;
    padding: 0.5rem 1.5rem;
    margin-top: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3 ease;
}

.success button:hover, .error button:hover{
    background-color: rgb(130, 130, 130);
    transform: scale(1.05);
}

/* ================================================= */
/* ==================== HEADER ==================== */
/* ================================================ */

header {
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    align-content: center;
    justify-content: space-evenly;
    background: transparent;
    display: flex;
    justify-content: left;
    font-size: 1rem;   
    letter-spacing: 0.1em;
    transition: 0.6s ease;
    justify-content: space-around;
}

.nav-bar-desktop{
    display: none;
}

header.scrolled {   
    background: rgba(0, 0, 0, 0.344);
    backdrop-filter: blur(12px);
}

#header-favicon{
    text-align: center;
    align-content: center;
    align-self: center;
    margin-right: 0;
}

#header-favicon a{
    display: block;    
}

#header-favicon a img{
    display: block;
    width: 60%;
    margin: auto;
}

#header img{
    width: 30%;
    height: auto;    
}

#header a{
    display: inline-block;
    vertical-align:middle;
    transition: 0.3s ease;
}

.nav-bar{
    width: 100%;
}

.nav-list {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0.8rem 0;
}

.nav-item img{
    width: 25px;
    transition: 0.3s ease;
}

.nav-item img:hover{
    transform: scale(1.05);
}

.nav-link{
    text-decoration: none;
    font-weight: normal;
    color: var(--purple-primary);
    transition: 0.3s ease;
    padding: 0 0.4rem;
    text-shadow: 0px 0px 8px rgba(119, 113, 192, 0.3);
}

.nav-link.active {
    color: var(--purple-primary-light);
}

.nav-link:hover {
    color: var(--grey);
}

.link-button button{
    font-family: 'Saira', 'Roboto', Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    background-color: var(--yellow);
    color: var(--black);
    text-shadow: 0px 0px 8px rgba(249, 250, 255, 0.734);
    border-radius: 0.5rem;
    padding: 0.5rem 2rem;
    cursor: pointer;
    text-align: center;
    transition: ease 0.1s;
    border: none;    
    margin: auto;
    transition: 0.3s ease;
}

.link-button button:hover{
    color: var(--purple-primary-light);
    cursor: pointer;
    border: 1px solid rgba(229, 228, 255, 0.898);    
}

/* =================================================== */
/* ==================== ACCUEIL ====================== */
/* =================================================== */

#accueil{
    height: 100vh;
    background-image: url("../img/background/planche-boulangerie.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    align-content: center;
}

#form-accueil-00{
    display: block;
}

#form-accueil-01{
    display: none;
}

#form-accueil-02{
    display: none;
}

.bad-adress{
    display: none;
}

.bad-bal{
    display: none; 
}

.livraison-checked{
    display: none;
}

#form-accueil-00-inputs{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#form-accueil-00-inputs .form-group{
    width: 100%;
}

#form-accueil-00-inputs .form-group input{
    width: 75%;
}

#form-accueil-01 h2, #form-accueil-02 h2{
    font-size: 1.8rem;
    padding: 0;
}

#form-accueil-01 h2, #form-accueil-02 h2{
    font-size: 1.8rem;
    padding: 0;
}

#form-accueil-01 img, #form-accueil-02 img{
    width: 25%;
    height: auto;
    padding: 1rem;
    padding-bottom: 0;
}

#form-accueil-01, #form-accueil-02{
    width: 60%;
    background-color: rgba(0, 0, 0, 0.598);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    margin: 2rem auto;
    padding: 2rem;
}

.form-accueil .logo img{
    display: block;
    width: 35%;
    height: auto;
    margin: auto;
}

.form-accueil .form-group .text-input{
    color: var(--black);
    border-radius: 10rem;
    padding: 0.6rem 1.6rem;
    margin: auto;
    background-color: var(--white);
}

.send-btn button{
    font-family: 'Saira', 'Roboto', Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    background-color: var(--yellow);
    color: var(--black);
    text-shadow: 0px 0px 8px rgba(249, 250, 255, 0.734);
    border-radius: 0.5rem;
    padding: 0.5rem 2rem;
    cursor: pointer;
    text-align: center;
    transition: ease 0.1s;
    border: none;    
    margin: auto;
    transition: 0.3s ease;
}

#accueil .radio-group{
    text-align: center;
    padding: 1rem 0;    
    display: flex;
    justify-content: center;    
}

#accueil .radio-group input[type="radio"] {
    display: none;
}

#accueil .radio-group label{
    background-color: rgb(0, 0, 0);
    color : rgb(255, 255, 255);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.6rem 1rem;
    margin: 0 1.2rem;
    border-radius: 4px;
    transition: 0.2s ease;
    border: 1px solid white;
}

#accueil .radio-group label:hover {
    background-color: rgb(67, 67, 67);
    border: 1px solid rgb(0, 0, 0);
}

#accueil .radio-group input[type="radio"]:checked + label {
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

/* ================================================= */
/* ==================== INFOS ====================== */
/* ================================================ */

#infos{
    background-image: url("../img/background/boulangerie-pains-00.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

#infos .link-button a{
    margin: 1rem 0;
}

.left-block{
    flex: 1;  
    text-align: left;
}

.right-block{
    display: none;
    justify-items: center;
    flex: 0.5;
    align-content: center;
}

.right-block img{
    display: block;
    width: 60%;
    height: auto;
}

/* ================================================= */
/* =================== DEVIS  ====================== */
/* ================================================= */

#devis{
    background-image: url("../img/background/boulangerie-pains-01.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: left;
}

.form-devis {
    display: none;
}

.form-devis.active {
    display: block;
}

#devis .frame{
    text-align: center;
}

#devis .send-button{
    text-align: center;
}

.form-devis{
    width: 100%;
    background-color: rgba(0, 0, 0, 0.598);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    margin: 2rem auto;
    padding: 2rem;
}

.form-devis button{
    font-family: 'Saira', 'Roboto', Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    background-color: var(--yellow);
    color: var(--black);
    text-shadow: 0px 0px 8px rgba(249, 250, 255, 0.734);
    border-radius: 0.5rem;
    padding: 0.5rem 2rem;
    cursor: pointer;
    text-align: center;
    transition: ease 0.1s;
    border: none;    
    margin: 2rem auto;
    transition: 0.3s ease;
}

.form-devis button:hover{
    transform: scale(1.02);
    background-color: #effb7b;
    color: #202020;
}

#form-devis-01 h3{
    text-align: left;
}

#devis .radio-group, #devis .form-checkbox{
    text-align: left;
}

#devis .radio-group input[type="radio"], #devis .form-checkbox input[type="checkbox"]{
    display: none;
}

#devis .radio-group label, #devis .form-checkbox label{
    position: relative;
    padding-left: 3rem;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
}

#devis .radio-group label::before, #devis .form-checkbox label::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 26px; 
    height: 26px;
    border: 2px solid var(--white);
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.2s, border-color 0.2s;
}

#devis .form-checkbox label::before{
    border-radius: 5px;
}

#devis .radio-group input[type="radio"]:checked + label::before, #devis .form-checkbox input[type="checkbox"]:checked + label::before{
    background-color: #fff;
}

/* ================================================= */
/* ================= CONTACT  ====================== */
/* ================================================= */

#contact{
    background-image: url("../img/background/planche-boulangerie-fond.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    align-content: center;
}

.contact-item{
    margin-bottom: 2.5rem;
    width: 80%;
    margin: auto;
}

.contact-item a{
    width: 100%;
}

.contact-title {
    text-align: left;
    position: relative;
    padding-left: 2.5rem;
}

.contact-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 32%;

    width: 24px;
    height: 24px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.contact-mail::before {
    background-image: url("../img/icons/mail.png");
}

.contact-phone::before {
    background-image: url("../img/icons/phone.png");
}

.contact-insta::before {
    background-image: url("../img/icons/insta.png");
}

.contact-item:last-child{
    margin-bottom: 20vh;
}

/* ========================================= */
/* =============== PRODUCTS =============== */
/* ========================================= */

#products{
    position: relative;
    overflow: hidden;
    text-align: center;
    align-content: center;
}

#products::before{
    content: "";
    position: fixed;
    inset: -5%;
    background: url("../img/background/planche-boulangerie.jpg") center / cover no-repeat;
    transform: translate(var(--px, 0), var(--py, 0));
    transition: transform 0.15s ease-out;
    filter: blur(15px);
    z-index: -1;
}

.products{
    width: 100%;
}

.products h1{
    margin-top: 2.5rem;
}

#products .cards{
    text-align: left;
    display: flex;
    flex-wrap: wrap;
}

.product-card{
    max-width: 250px;
    background-color: rgba(16, 16, 16, 0.56);
    backdrop-filter: blur(25px);
    margin: 1.5rem 1rem 0 0;
    border-radius: 1rem;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.352);
    transition: 0.3s ease;
}

.product-card:hover{
    filter: brightness(1.15);
}

.product-card img{
    border-radius: 1rem 1rem 0 0;
}

.product-card p{
    padding: 1.2rem;
}
/* ========================================= */
/* ================= FOOTER ================= */
/* ========================================= */

footer{
    font-weight: normal;
    font-size: 0.8rem;
    background: rgb(30, 30, 30);
    color: var(--text-default-light);
    line-height: 1rem;
}

.footer-nav-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem 1rem 1rem 1.5rem;
}

.footer-column h3{
 color:var(--text-default-light)
}

.footer-column p {
    color:var(--text-default-light);  
    margin: 0.3rem 0;  
}

.footer-column a{
    color: var(--text-default-light);
}

.footer-copyright {
  font-size: 0.7rem;
}

/* ========================================= */
/* ================ LEGALS ================ */
/* ========================================= */

.background{
    background-color: rgb(17, 17, 17);   
}

.legalcontainer{   
    padding: 5rem 2rem; 
    width: 100%;
    text-align: left;
    color: rgb(211, 211, 211);
}

.legalcontainer h1{
    text-align: center;
}

.legalContent{
    width: 100%;
    margin: auto;
}

.legalcontent p{    
    line-height: 1.7rem;
    font-size: 1rem;
    padding: 0.5rem 0;
}

/* ========================================= */
/* ================= EMPTY ================= */
/* ========================================= */

#empty{
    height: 100vh;
    align-content: center;
    text-align: center;
    background: linear-gradient(32deg, rgb(62, 59, 48), rgb(17, 17, 7));
}

/*===================================================================================================================
=================================================== MEDIA QUERIES ===================================================
===================================================================================================================*/ 
   

/* =============================================== TELEPHONE MOYEN ================================================ */

@media (min-width: 320px){
    
}

/* =============================================== GRAND TELEPHONE ================================================ */

@media (min-width: 480px) {    
}

/* =============================================== PETITE TABLETTE ================================================ */

@media (min-width: 768px) {
}

/* =============================================== GRANDE TABLETTE ================================================ */

@media (min-width: 1025px) {

    h1 {
        line-height: 3rem;
        font-size: 2.2rem;
        padding-top: 1.5rem;
        padding-left: 0;
    }

    h2 {
        font-size: 1.8rem;
        padding: 1.5rem 0;
    }

    h3 {
        font-size: 1.3rem;
        padding: 1rem 0;
        line-height: 2rem;
    }

    p {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    section{    
        padding: 4% 21%;
    }

    header {
        justify-content: center;
        font-size: 0.9rem;
        padding: 0.5rem 0;
    }

    .nav-link {
        padding: 0 1rem;
    }

    #header-favicon {
        margin-right: 6rem;
    }

    #header-favicon img {
        width: 2.8rem;
    }

    .nav-bar-desktop {
        display: flex;
        align-items: center;
    }
    
    .nav-bar-mobile{
        display: none;
    }

    .nav-item {
        padding: 0 1.3rem;
    }   

    #about-me{
        display: flex;
        align-items: center;
        padding: 0 15rem;
    } 

    #contact-infos {
        margin: 0;
    }

    footer p {
        font-size: 0.9rem;
        line-height: 1rem;
    }

    .footer-nav-bar {
        padding: 2rem 0 2rem 0;
        justify-content: space-evenly;
    }

    .footer-column p {
        margin: 1rem 0;
    }

    .footer-copyright {
        text-align: center;
        display: block;
        width: 100%;
    }

    .logo-item {
        width: 10rem;
        height: 10rem;
    }

    .legalContent{
        width: 50%;
    }

    #form-accueil-00-inputs .form-group{
        width: 33%;
    }

    .form-accueil .form-group .text-input{
        padding: 1rem 2rem;
    }

    .form-accueil .logo img{
        display: block;
        width: 18%;
        height: auto;
        margin: auto;
    }

    #header img{
        width: 3.3rem;    
    }

    .right-block{
        display: block;
    }

    .left-block{
        flex: 0.5;
    }

    .form-devis{
        width: 60%;
    }

    .frame p{
        width: 38%;
    }

    .frame a{
        width: 100%;
    }

    .contact-item{
        width: 38%;
    }

    .nav-bar{
        width: 50%;
    }   
}

/* =============================================== PETIT ECRAN ================================================ */

@media (min-width: 1280px) {
}

/* =============================================== GRAND ECRAN ================================================ */

@media (min-width: 1440px) {   

}

/* =============================================== ECRAN TRES LARGE ================================================ */

@media (min-width: 1600px) {
    section{    
        padding: 3% 28%;
    }
}

/* =============================================== ECRAN 2k et + ================================================ */

@media (min-width: 2160px) {

}