@font-face {
    font-family: 'Agipo';
    src: url(../agipo_regular-webfont.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'Agipo';
    src: url(../agipo_italic-webfont.woff2) format('woff2');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'Stefan';
    src: url(../ABCStefan-Simple.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Neue Haas Grotesk Display';
    src: url(../NeueHaasGroteskText-Regular.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
}

hr {
    width: 100%;
    border: .5px solid black;
    margin: .2rem 0;
}

hr.white {
    border: .5px solid rgb(255, 255, 255);
}

div.container {
    background-color: white;
}





body::after {
    content: "";
    position: absolute;
}


hr.margin {
    margin-top: 1em;
}


:root {

    --ROSE: #ed76ab;
    --ORANGE: #ed7102;
    --BLEU-CLAIR: #36b8c1;
    --BLEU-FONCE: #005ebe;
    --VERT: #6ab546;
    --JAUNE: #f1ed54;
    --ROUGE: #f80000;
    --GRIS: #b2d0e1;
    --MARRON: #57302e;
    --DARKER-VIOLET: #282934;
    --VIOLET: #63289c;

    --margin: 1em;
}

.pink {
    color: var(--ROSE);

}

button {
    text-decoration: none;
    width: calc(100% - 2em);
    height: 4em;
    border-radius: 5em;
    background-color: var(--DARKER-VIOLET);
    padding: .05em .5em 0.00em .5em;
    border-radius: 5em;
    border: none;

    margin: 1em;

    font-family: 'stefan', sans-serif;
    transition: all 0.2s ease-in-out;
    ;
}

button:active,
button:hover {

    filter: brightness(1.1);
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
}

hr.pink {
    border: .5px solid var(--ROSE)
}

button a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    animation: wiggle 1s ease infinite;
    display: block;
    font-size: 1.5rem;

}

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

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(3deg);
    }

    30% {
        transform: rotate(-3deg);
    }

    45% {
        transform: rotate(3deg);
    }

    60% {
        transform: rotate(-3deg);
    }

    75% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


.marron-bg {
    background-color: var(--MARRON);
    color: white;
    box-shadow: 10vw 0px 0 var(--MARRON), -10vw 0px 0 var(--MARRON);

    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.pink-bg {
    background-color: var(--ROSE);
    color: white;
    box-shadow: 10vw 0px 0 var(--ROSE), -10vw 0px 0 var(--ROSE);

    margin-top: 2rem;
    margin-bottom: 2rem;

}

.darker-violet-bg {
    background-color: var(--DARKER-VIOLET);
    color: white;
    box-shadow: 10vw 0px 0 var(--DARKER-VIOLET), -10vw 0px 0 var(--DARKER-VIOLET);
    margin-top: 2rem;

    margin-bottom: 2rem;
    padding-bottom: 2rem;
    padding-top: 1rem;

}

.blue {
    color: var(--BLEU-FONCE);
}

.light-blue {
    color: var(--BLEU-CLAIR);
}

.light-blue-bg {}

.orange {
    color: var(--ORANGE);
}

.darker-violet {
    color: var(--DARKER-VIOLET);
}

.green {
    color: var(--VERT);
}

.yellow {
    color: var(--JAUNE);
}

.red {
    color: var(--ROUGE);
}

.gray {
    color: var(--GRIS);
}

.gray-bg {
    background-color: var(--GRIS);
    color: white;
    outline: 2rem solid var(--GRIS);
    margin-top: 2rem;
    margin-bottom: 3rem;

}

.marron {
    color: var(--MARRON);
}

.violet {
    color: var(--VIOLET);
}

.white {
    color: white;
}

body {
    font-family: "Agipo", sans-serif;
    font-size: 5.5vw;

    margin: 0;

    height: calc(100dvh - var(--margin) * 2);
    overflow: hidden;
}

div.container {}

p {
    margin: 0;
}

.smaller-line {
    line-height: 0.8;
}

.bigger-line {
    line-height: 1;
}

p.read,
p.read>span {
    font-family: "Agipo", sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    font-size: 3.8vw;
    text-align: left;
    hyphens: auto;
    letter-spacing: 0;
    line-height: 1.2;

}

p.read>span {
    margin-left: 3em;
    display: block;
}

strong {
    font-family: "Agipo", sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    letter-spacing: -.04em;
    line-height: 0.9;

}

em {
    font-size: 100%;
    font-family: "Stefan", sans-serif;
    font-style: normal;
    letter-spacing: -.1em;

}

section.intro {
    height: calc(100dvh - var(--margin) * 2);

}

ul.bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    gap: 1em;
    font-size: 3dvw !important;
    text-align: left;
    line-height: 1.15;
    border-top: 1px solid black;
    padding: .2em 0 1em 0;
    justify-content: space-around;
}

section.slide-1 {
    line-height: 0.9em;
    height: calc(100dvh);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* espace entre le haut (titre) et le bas (hr + ul) */
    /* prend toute la hauteur de la fenêtre */

    /* ajustable selon besoin */
    box-sizing: border-box
}


section.slide-1>strong {
    font-size: 20vw;
    margin-top: .2em;
}

section.slide-1,
.huge {
    font-size: 18vw;
    text-align: center;
    z-index: 200;
    position: relative;
}

section.slide-1 {

    display: flex;
    flex-direction: column;

    /*justify-content: space-between; */
}



section.slide-2 {
    line-height: 0;
    text-align: center;
}

section.slide-3 {

    text-align: center;
}

section.slide-3 .huge {
    font-size: 19vw;
}

div.calendar,
section.slide-3 {
    font-size: 3.8vw;
    line-height: 1.15;
    padding-top: 1em;
}

.informations {
    padding-top: 1em;
}

div.calendar span {
    font-family: 'Agipo', sans-serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    margin: 0 1em;
    display: inline;

}

.space {
    margin: 0 1em;
    font-style: normal;
}

sup {
    line-height: 0;
    font-size: 50%;
}



div.calendar em {
    font-family: 'Agipo', sans-serif;
    font-weight: normal;
    font-style: italic;
    letter-spacing: normal;
    /* margin: 0 1em; */

}

section.day {
    display: flex;

    /* gap: .5em; */
    padding: .4em;
}

section.day>p {

    text-align: left;
}

section.slide-3 {

    padding-bottom: 2em;
}

section.informations>article {
    column-count: 1;
    gap: .5rem;

}

h2 {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    font-size: 100%;
    text-align: left;
    text-transform: uppercase;
    padding: .1em 0 .1em 0;
    margin: .2em 0;
}

section.informations>article>p {
    hyphens: auto;
    text-align: left;
    /* text-indent: 1em; */
}


section.informations>article>p:first-line {
    /* text-indent: 1em; */
}

section.informations ul {
    list-style: none;
    padding-left: 3ch;
    margin: 0;
    text-align: left;
}

div.container {
    /* scroll-snap-type: y proximity; */
    padding: 0 var(--margin);

    overflow-y: auto;
    height: calc(100dvh);
    /* padding-top: 1.5em; */

}

strong p.read {

    padding: .4em;

}

section.place {
    padding: .4em;
}

section.slide-1,
section.slide-2,
section.slide-3 {
    scroll-snap-align: start;
}

section.slide-2,
section.slide-3 {
    padding-top: .01em;
    padding-bottom: 1em;
}


@media (width>=760px) {


    :root {
        --margin: .5em;
    }


    .gray-bg,
    .pink-bg {
        color: white;
        outline-width: 3rem;
        margin-top: 3rem;
        margin-bottom: 3rem;
    }



    div.container {
        max-width: 500px;
        background-color: white;
        margin: 1em;
        height: calc(100dvh - var(--margin) * 4);
        border-radius: .2em;
    }

    section.slide-1>strong {
        font-size: 7rem;
        margin-top: .2em;
    }

    section.slide-1 {
        line-height: 0.9em;
        max-height: 100%;
        min-height: fit-content;
    }

    section.slide-1 {
        font-size: 6.5rem;
    }

    section.slide-3 .huge,
    .huge {
        font-size: 6.5rem;

        text-align: center;
    }

    div.calendar {
        font-size: 1.5rem;
        padding-top: 1em;
    }


    p.read,
    p.read>span,
    section.slide-3 {

        font-size: 1.5rem;
    }

    ul.bottom {

        font-size: 1.5rem !important;
    }

    body {
        background: linear-gradient(180deg, #cce9fb 50%, #562F2D 75%, #562F2D 99%);
    }

    .nightmode {
        background: linear-gradient(180deg, rgb(39 41 65) 60%, rgb(79 82 214) 83%);
    }

    .nightmode .container::after,
    .daymode .container::after {
        z-index: 100;
        pointer-events: none;

        color: yellow;
        /* pour que le clic passe à travers */
    }

    .nightmode .container::after {
        content: "🌙";
        font-family: 'Stefan' !important;
        position: absolute;
        top: 2em;
        right: 1em;
        font-size: 3rem;
    }

    .daymode {
        background: linear-gradient(180deg, rgb(179 208 226) 75%, rgb(241 237 84) 93%)
    }

    .daymode .container::after {
        content: "🌞";
        font-family: 'Stefan' !important;

        position: absolute;
        top: 1em;
        right: 30vw;
        font-size: 3rem;
    }
}