@font-face {
    font-family: karrik;
    src: url(font/karrik.otf);
}

/* preloader */
#preloader {
    position: fixed;
    inset: 0;
    background: #f1d751;
    color: rgb(83, 56, 21);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    z-index: 999;
}

#bar-container {
    width: 320px;
    height: 8px;
    background: #ffffff;
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 10px;
}

#bar {
    width: 0%;
    height: 100%;
    background: rgb(113, 35, 136);
    transition: width 0.15s linear;
}

/* ---------------------------------------------------------------------- helper */

/* image sélectionnée */
img.help-selected {
    outline: 3px solid lime;
}
/* section sélectionnée */
section.help-selected {
    outline: 3px solid turquoise;
    background: #40e0d011;
}
/* section qui a une image sélectionnée */
section:has(img.help-selected) {
    background: #40e0d011;
}




/* ---------------------------------------------------------------------- typo */

:root {
    /* @link https://utopia.fyi/clamp/calculator?a=360,1240,50—86 */
    --tresgroscorps: clamp(3.4375rem, -0.2699rem + 16.4773vw, 12.5rem);
    --autrices: clamp(0.5rem, -0.0625rem + 2.5vw, 1.875rem);
}

body {
    color: rgb(52, 33, 9);
    font-family: karrik;
    background-color: rgb(255, 255, 255);
    overflow-x: hidden;
}

/* img { max-width: 100%; } */

hr {
    opacity: 0;
    grid-column: 1 / span 4;
}



/* ----------------------------------------------------------------------  sections : hrlp */

.help section::before {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px dotted purple;
}
.help section::after {
    content: attr(class);
    font-family: monospace;
    font-size: 1em;
    padding: .1em .5em;
    z-index: 99999;
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: purple;
    color: white;
}

/* ----------------------------------------------------------------------  sections : free */

section.free {
    height: 50vh;
    position: relative;
}
.free img {
    position: absolute;
    width: 50%;
}
.free .right { right: 0; }
.free .left { left: 0; }
.free .top { top: 0; }
.free .bottom { bottom: 0; }


img.free { position: absolute; }

/* ----------------------------------------------------------------------  sections : grid */

section.grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    max-width: 1200px;
    gap: 1em 1em;
    margin: auto;
    position: relative;
}

article {
    position: relative;
    z-index: 1;
    grid-column: 1 / span 2;
}

section.grid img {
    position: absolute;
    width: 50%;
}
.col1 { grid-column: 1 / span 2; }
.col2 { grid-column: 2 / span 2; }
.col3 { grid-column: 3 / span 2; }
.col4 { grid-column: 4 / span 2; }
.col5 { grid-column: 5 / span 2; }
.col6 { grid-column: 6 / span 2; }
.row2 { grid-row: 2; }

.hidden { display: none; }

/* ---------------------------------------------------------------------- play pause */

.text span {
    width: 1.5em;
    height: 1.5em;
    background: url(media/play.svg);
    float: left;
    margin-right: 0.5em;
}
.text.play-right span {
    float: right;
    margin-left: 0.5em;
    margin-right: 0;
}
.text span.playing {
    background: url(media/pause.svg);
}
.text p {
    opacity: 0;
    margin: 0;
    transition: opacity 1000ms;
    pointer-events: none;
}
.text.text-visible p {
    opacity: 1;
    pointer-events: all;
}
.audioonly .text p {
    visibility: hidden !important;
}
/* -------------------------- bruitages */
[data-bruitage] {
    cursor: pointer;
}

/* ---------------------------------------------------------------------- header */
header {
    background: rgb(255, 255, 255);
}

h1 {
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    font-size: var(--tresgroscorps);
    font-size: 14vw;
    /* font-size: min(14vw, 12em); */
}

.comme {
    transform: rotate(-14.5deg) translateX(-25%);
}
.flope {
    transform: rotate(17deg) translateX(20%);
}
.rossignol {
    transform: rotate(-3.5deg);
}

/* ---------------------------------------------------------------------- colophon */
/*pour que position relative soit responsive il faut utiliser des % pas des px */

.colophon {
    height: 314.857vw;
    width: 100vw;
    background-color: rgba(229, 216, 240, 0);
    position: relative;
    overflow: visible;
}

.colophon img {
    max-width: none;
}
.colophon::after {
    content: "";
    background-image: url(images/illus/nuagescailloux/foret2.png);
    width: 150vw;
    margin-left: -25vw;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    bottom: -25vh;
    z-index: -1;
    background-size: contain;
    opacity: 0.3;
}

.autrices-nuagerouge {
    height: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin: -2em 0 10em 0;*/
    transform: rotate(-5deg);
    position: relative;
    left: 30%;
}

.autrices {
    display: flex;
    flex-direction: column;
    gap: 5em;
    align-items: center;
    margin: 0 0 0 0;
    font-size: var(--autrices);

    position: relative;
    top: -2%;
    left: 15%;
}

.maida {
    transform: translateX(40%) rotate(-14.5deg);
}

.clemence {
    transform: translateX(-40%) rotate(8deg);
}

.autrices-nuagevert {
    height: 85vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(-5deg);
    position: relative;
    left: 27%;
}

.autrices-nuagejaune {
    height: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(30deg);
    position: relative;
    top: -27%;
    left: -29%;
}

.autrices-brule {
    height: 130vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0em 0 0em 0;
    transform: rotate(60deg);
    position: relative;
    top: -34%;
    left: 14%;
}

.autrices-purplevase {
    height: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(100deg);
    position: relative;
    top: -54%;
    left: 11%;
}

.autrices-flamme {
    height: 50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(20deg);
    position: relative;
    top: -105%;
    left: -35%;
}

.autrices-feuillemorte {
    height: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(250deg);
    position: relative;
    top: -104%;
    left: -36%;
}

.autrices-herbecoupe {
    height: 71vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 0;
    transform: rotate(35deg);
    position: relative;
    top: -105%;
    left: -61%;
}

.autrices-vanille {
    height: 56vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0em 0 0em 0;
    transform: rotate(120deg);
    position: relative;
    top: -116%;
    left: 48%;
}

/* ---------------------------------------------------------------------- sections */
/*-----------------------------------------------------------------------intro*/

.intro {
    /* margin-top: -39vh;*/
    grid-template-rows: 1fr min-content 1fr;
    position: relative;
}

.intro article {
    grid-row: 2;
}

/*
.introtext{
    margin-top: -55vh;
}*/
.serveur {
    left: 13.4288%;
  top: 32.8066%;
    transform: scale(1.249);
}
.intro.free {
    height: 49.98vw; 
margin-top: -20vw;
}
.printemps.right {
    right: 24.06%;
  top: 52.7704%;
    transform: scale(1.000);
}

@media (max-width:600px) {
    section.grid{
        display: flex !important;
        flex-direction: column;
    }
    .text {
        width: 75%;
    }
    .col4, .col5, .col6 {
        margin-left: 25vw;
    }
    
}
/*-----------------------------------------------------------------------------------------terasse*/

.terassetext1 {
    margin-top: 10vh;
    grid-template-rows: 1fr min-content 1fr;
    position: relative;
}

.terassetext2 {
    margin-top: 10vh;
    grid-template-rows: 1fr min-content 1fr;
    position: relative;
}

.terassetext3 {
    margin-top: 10vh;
    grid-template-rows: 1fr min-content 1fr;
    position: relative;
}

.cetapresmidila {
    position: relative;
}

.airetaitdoux {
    position: relative;
}

.caseracomme {
    position: relative;
}

.teisane {
    left: 0%;
    top: 0%;
    transform: scale(0.15);
}

.facadethe.right {
    right: 0%;
    top: -91.1162%;
    transform: scale(0.95);
}
.envahir.right {
    right: -18.0921%;
    top: 37.0159%;
    transform: scale(1);
}
.leverdesoleil.right {
    right: 6.57895%;
    top: -133.827%;
    transform: scale(1);
}
.commedhab.right {
    right: 0%;
    top: -31.3832%;
    transform: scale(0.75);
}
.terrasseimg3.free {
    height: 47.9vw;
}
.gouttefeu {
    left: 54.9342%;
    top: 40.0933%;
    transform: scale(0.75);
}
.moussefeu {
    left: 2.96053%;
    top: 61.1593%;
    transform: scale(1.3);
}
.terrasseimg1.free {
    height: 32.86vw;
}

/*---------------------------------------------------------------------------------------------absence*/

/*-----------------------------------------------------------------------------------------------rituel*/
.librairie {
    left: 62.9167%;
  top: 0%;
    transform: scale(0.650);
}
.tasseebreche {
    left: 35.4167%;
  top: 63.7149%;
    transform: scale(0.200);
}
.albmarc {
    left: -15.4167%;
  top: 40.4968%;
    transform: scale(0.600);
}
.tachepile {
    left: 49.1667%;
  top: -3.56587%;
    transform: scale(0.900);
}
.rituel.grid {
    height: 102.80vw; }
.pilelivre {
    left: -16.25%;
  top: 18.8991%;
    transform: scale(0.900);
}
.carton {
    left: 52.0833%;
  top: 33.1626%;
    transform: scale(0.900);
}


/*---------------------------------------- section: rituel */
.mainapo { }
.carton { }
.pilelivre { }
.tachepile { }
.albmarc { }
.tasseebreche { }
.librairie { }


/*---------------------------------------- section: vendredi */
.tapismanteau { }
.manteau { }
.rideaux { }
.apocafe { }
.tapisorange { }


/*---------------------------------------- section: ancetre */
.spirale { }
.rayuresviojau { }
.tasserose { }
.tassejaune { }
.theiere { }
.couler { }
.tasseverte { }
.tasseviolette { }
.portrait { }
.famille { }
.tordu { }


/*---------------------------------------- section: moderne */
.porte { }
.etag4 { }
.thevert { }
.potvide { }
.pichet { }
.tassesunset { }
.tassepirouette { }
.sirop { }
.tasseubematcha { }
.etag3 { }
.boite { }
.tasseocean { }
.fiolinette { }
.tassechunk { }
.confiture { }
.cafetiereitalienne { }
.etag2 { }
.tassechou { }
.lessive { }
.boitethe { }
.tassinette { }
.flute { }
.huile { }
.decoction { }
.etag1 { }


/*---------------------------------------- section: lumiere */


/*---------------------------------------- section: cafe */


/*---------------------------------------- section: inquiet */


/*---------------------------------------- section: luminion */


/*---------------------------------------- section: cuisine */


/*---------------------------------------- section: marmite */


/*---------------------------------------- section: reve */


/*---------------------------------------- section: reveil */


/*---------------------------------------- section: peinture */


/*---------------------------------------- section: changement */


/*---------------------------------------- section: biblio */
/*-----------------------------------------------------------------------------------------------vendredi*/

/*-----------------------------------------------------------------------------------------------ancetre*/

/*-----------------------------------------------------------------------------------------------moderne*/

/*-----------------------------------------------------------------------------------------------lumiere*/

/*-----------------------------------------------------------------------------------------------cafe*/

/*-----------------------------------------------------------------------------------------------inquiet*/

/*-----------------------------------------------------------------------------------------------luminion*/

/*-----------------------------------------------------------------------------------------------cuisine*/

/*-----------------------------------------------------------------------------------------------marmite*/

/*-----------------------------------------------------------------------------------------------reve*/

/*-----------------------------------------------------------------------------------------------reveil*/

/*-----------------------------------------------------------------------------------------------peinture*/

/*-----------------------------------------------------------------------------------------------changement*/

/*-----------------------------------------------------------------------------------------------biblio*/

/*-----------------------------------------------------------------------------------------------fin*/

/*-------------------------------------------------------------------------------------------------------extra*/

main section {
    max-width: 600px;
    margin: auto;
    padding-inline: 20px;
}

audio {
    position: sticky;
    top: 1em;
}

button {
    height: 20px;
    width: 40px;

    color: rgb(44, 30, 4);
    background-color: #912b2b;
    border-color: #ffffff00;
    cursor: pointer;
}

.amplitude-play-pause {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.amplitude-play-pause.amplitude-paused {
    background: url(media/play.svg);
}

.amplitude-play-pause.amplitude-playing {
    background: url(media/pause.svg);
}

.titre {
    text-align: center;
}

#container {
    position: relative;
}