/* ----------------------------- */
/* Reset CSS + modifications UX
/* ----------------------------- */

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

html {
    /* 1rem = 10px, pour faciliter l'utilisation des unités rem */
    font-size: 62.5%;
    /* permet les transitions entre valeurs numériques et intrinsèques (auto, etc.) */
    interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body{
    overflow-wrap: break-word;
}

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

img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
}

table {
    border-collapse: collapse;
}

input, button, textarea, select {
    font: inherit;
}

p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

ol, ul, menu, summary {
    list-style: none;
}

button {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
}

button,
select{
    cursor: pointer;
}

::placeholder{
    opacity: 1;
}

:where([hidden]) {
    display: none !important;
}



/* ----------------------------- */
/* Typo
/* ----------------------------- */

@font-face {
    font-family: 'Resum Medium A';
    src: url('../fonts/Resum-Medium-A.woff2') format('woff2'),
        url('../fonts/Resum-Medium-A.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ES Face';
    src: url('../fonts/ESFace-Regular.woff2') format('woff2'),
        url('../fonts/ESFace-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ES Face';
    src: url('../fonts/ESFace-Italic.woff2') format('woff2'),
        url('../fonts/ESFace-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Marianne';
    src: url('../Marianne-Medium.woff2') format('woff2'),
        url('../Marianne-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marianne';
    src: url('../Marianne-MediumItalic.woff2') format('woff2'),
        url('../Marianne-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Marianne';
    src: url('../Marianne-Bold.woff2') format('woff2'),
        url('../Marianne-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marianne';
    src: url('../Marianne-BoldItalic.woff2') format('woff2'),
        url('../Marianne-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}


body{
    font-family: 'Marianne', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
}

.logo{
    font-family: 'Resum Medium A', Helvetica, Arial, sans-serif;
    font-size: 10cqw;
    line-height: 1;
}

.r62{
    font-family: 'Resum Medium A', Helvetica, Arial, sans-serif;
    font-size: 6.2rem;
    line-height: 0.85;
}
.r52{
    font-family: 'Resum Medium A', Helvetica, Arial, sans-serif;
    font-size: 5.2rem;
    line-height: 0.9;
}
.r36{
    font-family: 'Resum Medium A', Helvetica, Arial, sans-serif;
    font-size: 3.6rem;
    line-height: 0.9;
}
.page-controls,
.r20{
    font-family: 'Resum Medium A', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    line-height: 1;
}
.r14U{
    font-family: 'Resum Medium A', Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    line-height: 1;
    text-transform: uppercase;
}

.f44{
    font-family: 'ES Face', Georgia, serif;
    font-size: 4.4rem;
    line-height: 1;
}
.f32{
    font-family: 'ES Face', Georgia, serif;
    font-size: 3.2rem;
    line-height: 1;
}
.f28{
    font-family: 'ES Face', Georgia, serif;
    font-size: 2.8rem;
    line-height: 1;
}
.f22{
    font-family: 'ES Face', Georgia, serif;
    font-size: 2.2rem;
    line-height: 1;
}

body,
.t22{
    font-size: 2.2rem;
} 
.t17{
    font-size: 1.7rem;
}
.t15{
    font-size: 1.5rem;
}



/* ----------------------------- */
/* Couleurs
/* ----------------------------- */

:root{
    --couleur-black: #000;
    --couleur-white: #fff;
    --couleur1: #CEF2D8;
    --couleur2: #FED7E6;
    --couleur3: #D3ECF3;
    --couleur4: #E9DBF3;
    --couleur5: #FCD4CE;
    --couleur6: #FFF0A8;
    --couleur7: #E8EEB6;
    --couleur8: #F8EACD;
}

.bg1{
    background-color: var(--couleur1);
}
.bg2{
    background-color: var(--couleur2);
}
.bg3{
    background-color: var(--couleur3);
}
.bg4{
    background-color: var(--couleur4);
}
.bg5{
    background-color: var(--couleur5);
}
.bg6{
    background-color: var(--couleur6);
}
.bg7{
    background-color: var(--couleur7);
}
.bg8{
    background-color: var(--couleur8);
}

*:nth-child(8n + 1) > * { --selection: var(--couleur1); }
*:nth-child(8n + 2) > * { --selection: var(--couleur2); }
*:nth-child(8n + 3) > * { --selection: var(--couleur3); }
*:nth-child(8n + 4) > * { --selection: var(--couleur4); }
*:nth-child(8n + 5) > * { --selection: var(--couleur5); }
*:nth-child(8n + 6) > * { --selection: var(--couleur6); }
*:nth-child(8n + 7) > * { --selection: var(--couleur7); }
*:nth-child(8n + 8) > * { --selection: var(--couleur8); }

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


/* ----------------------------- */
/* Marges
/* ----------------------------- */

:root{
    --marge: 1.6rem;
}

.header{
    padding: 2px var(--marge) 0;
}

.footer-part2{
    padding: 0.5rem var(--marge) 2px var(--marge);
}


/* ----------------------------- */
/* Liserés
/* ----------------------------- */


:root{
    --bordure: 0.2rem;
    --bordure-css: var(--bordure) solid var(--couleur-black);;
}

.header{
    border-bottom: var(--bordure-css);
}

.footer-part2{
    border-top: var(--bordure-css);
}


/* ----------------------------- */
/* Layout
/* ----------------------------- */



/* ----------------------------- */
/* Communs header + footer
/* ----------------------------- */

.header,
.footer-part2{
    container-type: inline-size;
}

.page-controls{
    display: flex;
    height: 4rem;
}

.page-controls button{
    display: flex;
    align-items: center;
}
.page-controls button:nth-of-type(1){
    margin-right: 2em;
}
.page-controls button:nth-of-type(2){
    margin-left: 2em;
}

.toggle-search img{
    width: 0.9em;
    margin-right: 0.4em;
}
.toggle-menu img{
    width: 0.77em;
    margin-left: 0.5em;
    position: relative;
    top: 0.01em;
}

.logo-ellipses{
    flex-grow: 1;
    display: flex;
}

.logo-ellipses div{
    width: 50%;
    border-radius: 50%;
}

.logo{
    font-size: 7.12cqw;
    margin-left: -0.065em;
    margin-bottom: -0.07em;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.logo:hover{
    color: var(--couleur-white);
    -webkit-text-stroke: 0.015em var(--couleur-black);
}

.logo a{
    display: block;
}


/* ----------------------------- */
/* Header
/* ----------------------------- */




/* ----------------------------- */
/* Footer
/* ----------------------------- */