@font-face {
    font-family: 'Kyiv Sans';
    src: url(../fonts/KyivTypeSans-VarGX.woff2) format('woff2-variations');
    font-weight: 100 1000;
    font-display: swap;
}

*, *::after, *::before {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding:0;
    border:0;
}

/* Custom properties */

:root{
    /* Polices */
    --ff-body: "neue-haas-grotesk-text", Arial, Helvetica, sans-serif;
    --ff-display: 'Kyiv Sans', Arial, Helvetica, sans-serif;
    --ff-titles: "neue-haas-grotesk-display", Arial, Helvetica, sans-serif;
    /* Font sizes */
    --ratio-type-scale: 1.2; /* Type scale minor third */
    --ratio-screen-size: 1.125; /* Ratio entre corps min et max */
    --fs-p: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem); /* 16 à 18px pour la police de body */
    --fs-md: calc(var(--fs-p) * 1.063); /* Les autres polices commencent à 17px */
    --fs-l : calc(var(--fs-md) * var(--ratio-type-scale)); /* environ 20px pour la taille min*/
    --fs-xl : calc(var(--fs-l) * var(--ratio-type-scale)); /* environ 25px */
    --fs-2xl : calc(var(--fs-xl) * var(--ratio-type-scale)); /* environ 29px */
    --fs-3xl : calc(var(--fs-2xl) * var(--ratio-type-scale)); /* environ 35px */

    --fs-h1: var(--fs-3xl);
    --fs-h2: var(--fs-xl);
    --fs-h3: var(--fs-l);
    --fs-sub-h3: var(--fs-md);
    --fs-h4: var(--fs-md);
    --fs-sub-h4: var(--fs-md);
    --fs-vignette: var(--fs-xl);
    --fs-btn: var(--fs-md);
    --fs-page: var(--fs-xl);
    --fs-nav: var(--fs-l);
    --fs-nav-hero: var(--fs-l);
    --fs-social: var(--fs-p);
    --fs-footer: calc(var(--fs-p) / var(--ratio-type-scale));

    /* Marges, padding, etc. */
    --page-margin-inline:3rem;
    --page-margin-top:5rem;
    --page-margin-bottom:2rem;
    --inline-padding:3vw;
    --vignette-width:33rem;
    --horizontal-max-width:33vw;
    --vertical-max-width: calc(100vw - 4rem);
    --ambiance-padding-top: calc((100vh - var(--horizontal-max-width)) / 2);
    --ambiance-padding-bottom: calc(var(--ambiance-padding-top) - 3rem);
    --ambiance-padding-left: 2rem;
    --ambiance-padding-right: calc(var(--ambiance-padding-left) - 3rem);
    /* Couleurs */
    --clr-dark: #000000;
    --clr-dark-transp: rgba(0, 0, 0, 0.5);
    --clr-light:#FFFFFF;
    --clr-light-transp:rgba(255, 255, 255, 0.7);
    --clr-cyan: rgba(55, 183, 215, 1);
    --clr-cyan-transp:rgba(55, 183, 215, 0.7);
    --clr-jaune:rgba(238, 215, 73, 1);
    --clr-jaune-transp:rgba(238, 215, 73, 0.6);
    --clr-rose:rgba(240, 86, 126, 1);
    --clr-rose-transp:rgba(240, 86, 126, 0.7);
    --clr-vert:rgba(51, 176, 74, 1);
    --clr-vert-transp:rgba(51, 176, 74, 0.6);
    --clr-rouge:rgba(254, 32, 32, 1);
    --clr-rouge-transp:rgba(254, 32, 32, 0.7);
    --clr-violet:rgba(139, 91, 222, 1);
    --clr-violet-transp:rgba(139, 91, 222, 0.5);
    --clr-orange:rgba(235, 124, 58, 1);
    --clr-orange-transp:rgba(235, 124, 58, 0.7);
}

/* Généralités */

:focus-visible{
    outline: 5px solid var(--clr-light);
}

body{
    background-color: var(--clr-dark);
    color: var(--clr-light);
    font-family: var(--ff-body);
    font-size: var(--fs-p);
    line-height: 1.5em;
    letter-spacing: 0.042em;
}

article.container{
    margin: 3rem auto;
    padding-inline: 2rem;
    max-width: 40rem;
}

/* Classe manipulée par le javascript pour cacher ou montrer des éléments. Cache les boutons quand le modal est ouvert, la navigation quand le hero est visible */

.hidden{
    display: none;
}

/* Utility classes */

.cercle {
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
	aspect-ratio: 1;
}

/* Typographie */

p{
    font-family: var(--ff-body);
    font-size: var(--fs-p);
    line-height: 1.6em;
    letter-spacing: 0.03em;
}

h1{
    font-family: var(--ff-display);
    font-size: var(--fs-h1);
    line-height: 1.1em;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variation-settings: 'CONT' 500, 'MIDL' 0;
    text-align: center;
    margin-block: 0.18em;
    margin-top: 3rem;
}

#accueil h1{
    font-size: var(--fs-h2);
}

article.container h1{
    margin-bottom: 6rem;
}

.subH1{
    font-family: var(--ff-titles);
    font-size:var(--fs-sub-h1);
    line-height: 1.1em;
    letter-spacing: 0.01em;
    text-align: center;
}

h2{
    font-family:var(--ff-display);
    font-size: var(--fs-h2);
    line-height: 1.125em;
    font-variation-settings: 'CONT' 800, 'MIDL' 0;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

h3{
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    line-height: 1.25em;

    :focus-visible{
        outline: 5px solid var(--clr-light);
    }
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variation-settings: 'CONT' 600, 'MIDL' 0;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

#realisations h3{
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}

.subH3{
    font-family: var(--ff-titles);
    font-size: var(--fs-sub-h3);
    line-height: 1.25em;
    letter-spacing: 0.05em;
}

h4{
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.25em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-variation-settings: 'CONT' 600, 'MIDL' 0;
}

.subH4{
    font-family: var(--ff-titles);
    font-size: var(--fs-sub-h4);
    line-height: 1.25em;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

article p{
    margin-bottom: 0.9em;
}

footer p{
    font-size: var(--fs-footer);
}

blockquote{
    font-style: italic;
    margin-bottom: 0.5em;
}

.auteur{
    font-weight: 700;
    text-align: right;
}

/* Liens */

a{
    color: var(--clr-light);
    text-decoration: none;
}

article a{
    text-decoration: underline;
    color: var(--clr-cyan);
}

article a:hover, article a:focus-visible{
    color: var(--clr-rose);
}

/* Boutons */

button, .btn{
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding: 0.5rem;
    color: inherit;
    background-color: inherit;
    cursor: pointer;
    font-family: var(--ff-display);
    text-transform: uppercase;
    font-size:var(--fs-btn);
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variation-settings: 'CONT' 500, 'MIDL' 0;
}

.btn{
    border: 3px solid;
    color: var(--clr-dark);
    text-align: center;
    padding: 1rem;
    margin: 1.5rem auto;
}

.btn:hover, .btn:focus-visible{
    background-color: transparent;
    -webkit-box-shadow: 8px 8px 16px -4px rgba(0,0,0,0.6);
    box-shadow: 8px 8px 16px -4px rgba(0,0,0,0.6);
}

.btn a{
    text-decoration: none;
    color: inherit;
}

    /* Couleurs des boutons */
.bg-cyan{
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan);
}

.bg-cyan:hover, .bg-cyan:focus-visible{
    color: var(--clr-cyan);
}

.bg-jaune{
    background-color: var(--clr-jaune);
    border-color: var(--clr-jaune);
}

.bg-jaune a:hover, .bg-jaune a:focus-visible{
    color: var(--clr-jaune);
}

.bg-rose{
    background-color: var(--clr-rose);
    border-color: var(--clr-rose);
}

.bg-rose:hover, .bg-rose:focus-visible{
    color: var(--clr-rose);
}

/* Header */

.skip-nav{
    position: absolute;
    padding: 1rem;
    border-radius: 50rem;
    border: 5px solid var(--clr-jaune);
    -webkit-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
            transform: translateY(-200%);
    -webkit-transition: -webkit-transform 300ms ease-in-out;
    transition: -webkit-transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}

.skip-nav:focus-visible{
    -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
            transform: translateY(200%);
}

header{
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding: 1rem 2rem;
    z-index: 3;
    background-color: var(--clr-dark-transp);
    margin-bottom: 2rem;
}

.identification * {
    text-align: center;
}

.title{
    margin-top: 0.5rem;
}

.pauline{
    font-family: var(--ff-display);
    font-size:var(--fs-vignette);
    line-height: 1em;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-variation-settings: 'CONT' 500, 'MIDL' 0;
}

.metiers{
    font-family: var(--ff-titles);
    line-height: 1em;
    letter-spacing: 0.1em;
}

.social-networks{
    margin-top: 0.25em;
}

i.fa-brands{
    padding: 0.25rem;
    border: 3px solid transparent;
    border-radius: 50%;
}

i.fa-brands:hover, i.fa-brands:focus-visible{
    border-color: inherit;
    background-color: var(--clr-light);
}

i.fa-brands::before{
    font-size: var(--fs-social);
}

.fa-youtube{
    color:var(--clr-rouge);
}

.fa-twitch{
    color:var(--clr-violet);
}

.fa-tiktok{
    color:var(--clr-cyan);
}

.fa-instagram{
    color:var(--clr-jaune);
}

header nav ul
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap:0.5rem;
    list-style-type: none;
    margin-top: 1rem;
}

header nav ul li
{
    position: relative;
    padding: 0rem 0.5rem 0.25rem 0.5rem;
    font-family: var(--ff-display);
    font-size: var(--fs-nav);
    line-height: 1em;
}

header nav ul li::before{
    content: '';
    position: absolute;
    bottom: -8%;
    left: 0;
    right: 0;
    display: block;
    height: calc(var(--fs-nav) * 1.4);
    width: calc(var(--fs-nav) * 1.4);
    border-radius: 50rem;
    -webkit-transition: 300ms linear;
    transition: 300ms linear;
}

header nav ul li a
{
    position: relative;
    z-index: 1;
}

header nav ul li.jaune::before
{
    background-color: var(--clr-jaune);
}

header nav ul li.cyan::before
{
    background-color: var(--clr-cyan);
}

header nav ul li.vert::before
{
    background-color: var(--clr-vert);
}

header nav ul li.rose::before
{
    background-color: var(--clr-rose);
}

header nav ul li:hover::before,
header nav ul li:focus-visible::before
{
    width: 100%;
}

/* Fin header */

/* Footer */

footer{
    font-size: var(--fs-footer);
    line-height:1.2em;
    padding: 1rem 0;
    text-align: center;
}

footer a{
    color: var(--clr-light);
    text-decoration: underline;
}

/* Formulaire */

form{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

fieldset{
    padding: 0;
}

.form-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
}

form div, form p{
    margin-bottom: 1.5rem;
}

form input, form textarea{
    padding: 1rem;
    border-radius: 1.5rem;
}

form input{
    width: 17.5rem;
}

form textarea{
    width: 100%;
}

.honeypot { /* Champs invisible pour pièger spambots*/
    display:none
}

.error{
    color: var(--clr-rouge);
    font-weight: 700;
}

form input:focus, form textarea:focus{
    outline:5px solid var(--clr-cyan);
}

.rouge{
    color:var(--clr-rouge);
}

/* Tableau */

table.tarifs{
    width: 100%;
    max-width: 25rem;
    margin-inline: auto;
    margin-bottom:1rem;
}

table.tarifs, .tarifs th, .tarifs td {
    border: 1px solid var(--clr-cyan);
    border-collapse: collapse;
  }

.tarifs td{
    padding: 0.5rem;
}

/* Photo */

#about img{
    width: 100%;
    border-radius: 50rem;
    margin-bottom: 2rem;
}

@media screen and (min-width:1200px){
    header{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .identification * {
        text-align: left;
    }
}

@media screen and (max-height:500px){

    header{
        position: static;
    }
}

@media screen and (max-width:360px){
    header nav ul li{
        font-size: 1rem;
    }
}