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

html {
    font-size: 16px;
}

:root {
    /* --------------- FONT-FAMILY ----------------- */
    --font-1: 'Roboto-Light', arial, sans-serif;
    --font-2: 'Roboto-LightItalic', arial, sans-serif;
    --font-3: 'Photoshoot', arial, sans-serif;
    /* --------------- TEXT COLOR ----------------- */
    --text-color-1: #000000;
    --text-color-2: #f9f9f9;
    --text-color-3: #adadad;
    --text-color-4: #706f6f;
    --text-color-5: #041a70;
    --text-color-6: #4e4e4e;
    --text-color-7: #f50088;
    --text-color-8: #ec6118;
    /* --------------- COLORS ----------------- */
    --color-1: #111111;
    --color-2: #f6f6f6;
    --color-3: #adadad;
    --color-4: #706f6f;
    --color-5: #041a70;
    --color-6: #ffcc00;
    --color-7: #7d7939;
    --color-8: #2441b9;
    --color-9: #0c614c;
    --color-10: #a41c2a;
    --color-11: #d59a02;
    --color-12: #c4cd7c;
    --color-13: #7d881f;
    --color-14: #ec6f05;
    --color-15: #5397ea;  
    --color-16: #d03382;
    --color-17: #abe473;
    --color-18: #d0334e;
    --color-19: #80c2b8;
    --color-20: #01adbb;
}

body, input, button, textarea, select, a {font-size: clamp(12px, 0.8855vw, 100px);}

textarea{resize: none;}

ul {list-style-type: none;}

h1, h2, h3, h4, h5, h6 {font-family: var(--font-1);}

p, a, ul, ol, button, input, textarea, div {font-family: var(--font-1);}


p {letter-spacing: 0.5px;}

a {
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Rest button */
.btn-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  text-transform: none;
  appearance: none;
  -webkit-appearance: none;
  outline: revert;
  cursor: pointer;
}

/* Focus visible natif */
.btn-reset:focus {
  outline: revert;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus, :focus-within) {
	border: 0 !important;
	clip-path: inset(50%) !important;
    /*Pour navigateur ancien*/
    clip: rect(0, 0, 0, 0) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(caption):not(:focus, :focus-within){
	position: absolute !important;
}

.visually-hidden *,
.visually-hidden-focusable:not(:focus, :focus-within) * {
	overflow: hidden !important;
}

/*Vire effet bleu moche au click sur certains navigateurs mobiles (non-standard)*/
.not-highlight {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.not-highlight:focus {
    outline: none !important;
}

.not-selectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*Footer*/
.footer__ul {
    width: 100%;
    background-color: var(--color-5);
    gap: clamp(10px, 1.2vw, 10000px);
    padding: 5px 0;
}

.footer__a{
    font-size: clamp(9px, 0.8vw, 10000px);
    color: var(--text-color-2);
}


/*
------------------------------------------------------ FLEXBOX AND TEXT------------------------------------------------------
*/
.flex {display: -webkit-flex; display: flex; }

.row {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
}

.col {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

/*------------ FLEX-WRAP ------------*/
.f-fw-w {-ms-flex-wrap: wrap; flex-wrap: wrap;}
.f-fw-nw {-ms-flex-wrap: nowrap; flex-wrap: nowrap;}

/*------------ FLEX-WRAP ------------*/
.f-fg-1 {flex-grow: 1;}
.f-fg-2 {flex-grow: 2;}

/*------------ JUSTIFY-CONTENT ------------*/
.f-jc-fs {justify-content: flex-start;}
.f-jc-c {justify-content: center;}
.f-jc-fe {justify-content: flex-end;}
.f-jc-sb {justify-content: space-between;}
.f-jc-sa {justify-content: space-around;}
.f-jc-se {justify-content: space-evenly;}

/*------------ ALIGN-ITEMS ------------*/
.f-ai-fs {align-items: flex-start;}
.f-ai-c {align-items: center;}
.f-ai-fe {align-items: flex-end;}

.f-c {
    justify-content: center;
    align-items: center;
}

.text-c {text-align: center;}
.text-l{text-align: left;}
.text-r{text-align: right;}