:root{
    font-family: "Quicksand", sans-serif;
    color: hsl(var(--frontground));
    fill: hsl(var(--frontground));
    stroke: hsl(var(--frontground));
    background-color: hsl(var(--bg1));

    --frontground: var(--c5-very-dark);
    --bg1: var(--c5-veryvery-light);
    --bg2: var(--c5-very-light);

    --trans: hsl(var(--frontground), 0%);
    --link-color :  var(--c5), 80%, 35%;
    --on-colorful-bg : var(--frontground) ;

    /* Magenta */
    --hue-1: 338; 
    --c1-dark: var(--hue-1), 100%, 71%; /* Cyclamen */
    --c1-medium: var(--hue-1), 100%, 75%; 
    --c1-light: var(--hue-1), 100%, 77%; /* tickle me pink */
    /* orange */
    --hue-2: 18; 
    --c2-dark: var(--hue-2), 100%, 72%; /* atomic tangerine FF9A6E*/ 
    --c2-medium: var(--hue-2), 100%, 77%;
    --c2-light: var(--hue-2), 100%, 79%; /* peach  */
    /* jaune */
    --hue-3: 43; 
    --c3-dark: var(--hue-3), 100%, 82%; /* vanilla */
    --c3-medium: var(--hue-3), 100%, 84%; /* dutch white  */
    --c3-light: var(--hue-3), 100%, 89%; /* dutch white  */
    --c3-light: var(--hue-3), 100%, 95%; /* cosmic latte  */
    --c3-very-light: var(--hue-3), 70%, 97%; /* floral white  */
    /* sky blue */
    --hue-4: 216; 
    --c4-very-dark: var(--hue-4), 100%, 67%; /* royal blue */
    --c4-dark: var(--hue-4), 100%, 67%; /* royal blue */
    --c4-medium: var(--hue-4), 100%, 74%; /* penn blue */
    --c4-light: var(--hue-4), 100%, 80%; /* penn blue */
    --c4-very-light: 200, 100%, 97%; /* penn blue */
    --c4-very-light: var(--hue-4), 100%, 90%; /* penn blue */
    /*  night blue */ /*  Saturation entre 51 et 62 */
    --hue-5: 234; 
    --c5-print-dark: var(--hue-5), 44%, 24%; /* space cadet */
    --c5-print-light: var(--hue-5), 42%, 36%; /* marian blue */
    --c5-very-dark: var(--hue-5), 62%, 10%; /* royal blue */
    --c5-dark: var(--hue-5), 62%, 16%; /* royal blue */
    --c5-light: var(--hue-5), 51%, 29%; /* penn blue */
    --c5-very-light: 220, 100%, 85%; /* penn blue */
    --c5-veryvery-light: 220, 100%, 97%; /* penn blue */
    /* --c5-very-light: var(--hue-5), 51%, 80%; penn blue */

    --accent-color-1 : hsl(var(--c1-medium));
    --accent-color-2 : hsl(var(--c2-medium));
    --accent-color-3 : hsl(var(--c3-medium));
    --accent-color-4 : hsl(var(--c4-medium));

    --space-top-bar-dialog : clamp(0.2rem, 1rem - 1.5vw, 2rem);    /* +10px =16px pour w = 500px min = 14px*/
    --space-hero-p : clamp(0.5rem, 2rem - 1.5vw, 3rem);    /* +10px =16px pour w = 500px min = 14px*/
    --space-bot-hero-title : clamp(1rem, 4.2rem - 1.5vw , 5rem); /* +10px =16px pour w = 500px min = 14px*/
    --space-hero : clamp(1.031rem, 1.813rem + 2.182vw , 5rem);    /* +10px =16px pour w = 500px min = 
    --fs-xs : 1rem;   

    --fs-s : clamp(0.95rem, 0.9rem + 0.327vw, 1.5rem);  /* 18px pour 1100px p, en savoir plus, ancien nom*/
    --fs-m : clamp(0.975rem, 0.9rem + 0.509vw, 1.75rem);  /* 20px pour 1100px h3, hero texte*/
    --fs-l : clamp(1rem, 0.866rem + 0.74vw, 1.875rem);  /* 22px pour 1100px NOM SITE, HERO SUBTITLE*/
    --fs-xl : clamp(1.031rem, 0.84rem + 0.96vw , 2rem);  /* 24px pour 1100px h2*/
    --fs-xxl : clamp(1.031rem, 0.813rem + 1.182vw , 2.375rem); /* 26px pour 1100px hero title*/

    /* @media (max-width: 520px) */
    --fs-s : clamp(0.8rem, 0.752rem + 0.594vw, 1.687rem);  /* 20px pour 1100px h3, hero texte*/
    --fs-m : clamp(0.9rem, 0.904rem + 0.768vw, 2rem);  /* 20px pour 1100px h3, hero texte*/
    --fs-l : clamp(1.05rem, 1.044rem + 1vw, 2.812rem);  /* 22px pour 1100px NOM SITE, HERO SUBTITLE*/
    --fs-xl : clamp(1.1rem, 1.078rem + 1.742vw , 3.437rem);  /* 24px pour 1100px h2*/
    --fs-xxl : clamp(1.2rem, 1.1rem + 1.8vw , 3.75rem); /* 26px pour 1100px hero title*/

    --fw-xs : 300;
    --fw-s : 400;
    --fw-m : 500;
    --fw-l : 600;
    --fw-xl : 700;
}

@media (min-width: 520px) {
    :root{
        --fs-s : clamp(0.8rem, 0.9rem + 0.03vw, 1.687rem);  /* 20px pour 1100px h3, hero texte*/
        --fs-m : clamp(0.968rem, 1.012rem + 0.15vw, 2rem);  /* 20px pour 1100px h3, hero texte*/
        --fs-l : clamp(1.169rem, 1.169rem + 0.2vw, 2.812rem);  /* 22px pour 1100px NOMSITE,HEROSUBTITLE*/
        --fs-xl : clamp(1.281rem, 1.2rem + 0.67vw , 3.437rem);  /* 24px pour 1100px h2*/
        --fs-xxl : clamp(1.419rem, 1.225rem + 0.8vw , 3.75rem); /* 26px pour 1100px hero title*/
    }
}

[data-theme="dark"]{
    --frontground: var(--c3-very-light);
    --bg1:  var(--c5-dark);
    --bg2: var(--c5-light);

    --link-color :  var(--c5), 80%, 75%;

    --on-colorful-bg : var(--c5-very-dark);
    /* --secondary-color: var(--c2), 75%, 70%;
    --primary-color: hsl(var(--c5-light)); */

    --accent-color-1 : hsl(var(--c1-dark));
    --accent-color-2 : hsl(var(--c2-dark));
    --accent-color-3 : hsl(var(--c3-dark));
    --accent-color-4 : hsl(var(--c4-dark));
}


body{
    margin: 0;
    min-height: 100%;
    font-size: var(--fs-m);
}

.cafe_banner, .hero{
    padding-block: 3.2em;
    margin-top: 3em;
}
.hero{
    margin-top: 1.5em;
}
footer{
    padding-block: 2em;
    background-color: hsl(var(--bg2));
    margin-top: 3em;
}
.cafe_banner h2, .hero h2{
    margin-top: 0;
}
.services, .a_propos, .contact, .localisation{
    padding-top: 3em;
}

.wrap{
    margin-inline: auto;
    width: 85vw;
    max-width: 1600px;
}
.text, .text section, .text p{
    margin-inline: auto;
    width: 80vw;
    max-width: 500px;
}
.text section{
    padding-top: 0.75em;
}

h3, h2, h1{
    justify-content: center;
    text-align: center;
}
h2{ font-size: var(--fs-xl);}
h3{font-size: var(--fs-l);}
hgroup h1, .hero hgroup h2{
    font-size: inherit;
    margin: 0;
}
hgroup p{
    text-align: center;
    margin-block: 0.5em;
    padding-bottom: 1em;
    font-weight: var(--fw-s);
}



a{ color: hsl(var(--link-color));}

button{
    border: none;
}
.btn{
    display: block;
    max-width: max-content;
    padding-block: 0.6em;
    padding-inline: 1.4em; 
    margin-top: 1.4em;
    border-radius: 3em;
    text-decoration: none;
    font-weight: var(--fw-l);
}

footer .wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em;
}
.signature{
    font-family: "Oooh Baby", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-l);
    text-decoration: none;
}

.fast_home_access{
    margin-top: 1rem;
}

.contact_fast_link{
    margin-top: 3rem;
    display: flex;
    justify-content: end;
}

header .contact_fast_link{
    margin-top: 1rem;
    /* margin-inline: auto; */
   /* justify-content: center; */
}
.trans{
    background-color: var(--trans);
}
.btn.trans, button.trans{
    border: 1px solid hsl(var(--on-colorful-bg));
    padding-block: 0.5em;
}

.icon, .icon svg, .icon img, .logo, .logo svg, .logo img{
    height: 100%;
    background-color: var(--trans);
}
.logo{
    display: grid;
    grid-template-columns: auto max-content;
    gap: 0.8em;
}

iframe{
    width: 100%;
    aspect-ratio: 2/1;
    margin-bottom: 1rem;
}

.localisation iframe{
    max-width: 700px;
    margin-inline: auto;
}

menu{
    display: grid;
    grid-auto-flow: column;
    list-style: none;
    padding-inline: 0;
    margin: 0;
    gap: 0.5em;
}
dialog{
    background-color: hsl(var(--bg1));
    color: hsl(var(--frontground));
}

.cards > *, .card{
    display: block;
    border-radius: 1.5em;
    background-color: hsl(var(--bg2));
    font-weight: var(--fw-l);
}
ul.cards{
    list-style: none;
    padding: 0;
}


/* 
.services {
    max-width: 700px;
} */
.services .cards{
    display: grid;
    grid-template-columns: auto;
    gap: var(--fs-xl);
    padding-block: var(--fs-l);
    max-width: 500px;
}
.services a, .services .a{
    display: block;
    font-size: var(--fs-l);
    padding: 1em;
    color: inherit;
    text-decoration: none;
    text-align: center;
}
.services .btn{
    font-size: var(--fs-m);
    justify-self: center;
}



.contact .cards{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--fs-xl);
    max-width: 400px;
}
.contact .cards > *{
    background-color: hsl(var(--bg2));
    min-width: 200px;
    flex: 1;
    /* overflow: hidden; */
    padding-block: var(--fs-xl);
    padding-inline: var(--fs-xl);
}
.contact .cards h3{
    margin: 0;
}

.top-bar{
    top: 0;
    position: sticky;
    z-index: 100;
    background-color: hsl(var(--bg1));
    font-size: var(--fs-l);
    margin: 0;
    padding-bottom: 0.7em;
    padding-top: 0.8em;
}
.top-bar > .wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
}
.top-bar abbr, .top-bar a{
    text-decoration: none;
}

.top-bar dialog{
    top: 0;
    left: 0;
    right: 0;
    position: relative;
    min-height: 100vh;
    border: none;
    text-align: center;
    padding: 0;
}
.top-bar dialog ul{
    list-style: none;
    display: grid;
    padding: 0;
    margin-block: 2em;
    gap: 2em;
}
.top-bar dialog ul ul{
    margin-block: 1em;
    gap: 1em;
}
.top-bar dialog a{
    padding-block: 0.3em;
    display: block;
}

header > hgroup{ 
    text-align: center; 
    font-size: var(--fs-l);
}
header > hgroup p{ 
    font-size: var(--fs-m);
    font-weight: var(--fw-s);
    margin-top: 0.2em;
}
header em{
    font-style: normal;
}

.hero{ 
    background-color: hsl(var(--bg2));
}
.hero p{ 
    font-size: var(--fs-m);
    font-weight: var(--fw-s);
    text-align: center;
}
.hero p strong{ font-weight: var(--fw-m);}
.hero hgroup{ 
    text-align: center;
    font-size: var(--fs-xxl);
    max-width: clamp(0px, 27vw + 20rem, 1200px);
}
.hero hgroup p{font-size: var(--fs-l);}
.hero h2{ font-weight: var(--fw-m);}
.hero h2 strong{ font-weight: var(--fw-xl);}


.cafe_banner{background-color: hsl(var(--bg2));}

.flex{
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    gap: 2em;
}
.cafe_banner .text, .cafe_infos .text{
    margin: 0;
    max-width: max-content;
    text-align: start;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    margin-block: 0%;
}
.cafe_banner h2{
    margin-top: 0;
    margin-bottom: 1.5em;
}
.cafe_banner p{
    max-width: max-content;
    margin-inline: 0;
    margin-block: 0.5em;
    font-size: var(--fs-l);
}
.cafe_banner .lieu{
    display: block;
    padding-block: 0.4em;
}
.cafe_banner .btn{
    margin-bottom: 0.7em;
    margin-inline: auto;
    font-size: var(--fs-m);
}
.cafe_banner svg,.cafe_infos svg,.cafe_infos img,
.cafe_banner img{
    max-width: 100%;
    max-height: 35vh;
}


@media (min-width: 1000px) {
    .services .cards{
        grid-template-columns: 1fr 1fr;
        max-width: 1600px;
    }

    .a_propos .text, .a_propos .text section, .a_propos .text p{
        margin-inline: auto;
        width: 60vw;
        max-width: 800px;
    }
}
@media (min-width: 600px) {
    .contact .cards{
        max-width: 1600px;
    }
    /* .contact .cards > *{
        max-width: 300px;
        margin-inline: auto;
    } */

}
@media (min-width: 1600px) {
    .services ul{  grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 610px) {
    .hero p{  text-align: center; }
}


.bg-1{
    background-color: var(--accent-color-1);
    color: hsl(var(--on-colorful-bg));
}
.bg-2{
    background-color: var(--accent-color-2);
    color: hsl(var(--on-colorful-bg));
}
.bg-3{
    background-color: var(--accent-color-3);
    color: hsl(var(--on-colorful-bg));
}
.bg-4{
    background-color: var(--accent-color-4);
    color: hsl(var(--on-colorful-bg));
}
.small{ font-size: var(--fs-s);}
footer .big{  font-size: var(--fs-m);}
hr{margin-top: 2em;}