@media (min-width: 601px) {body {
    margin-top: 2vw;
    margin-right: 5vw;
    margin-left: 5vw;
    /*padding-top: 2vw;*/
    overflow-x: hidden;
    padding-bottom: 5vw;
}


@font-face {
    font-family: "arial-n";
    src: url("/FONTS/arial-webfont/ARIALN.woff");
}

@font-face {
    font-family: "arial-ni";
    src: url("/FONTS/arial-webfont/ARIALNI.woff");
}

@font-face {
    font-family: "arial";
    src: url("/FONTS/arial-webfont/ARIAL.woff");
}

@font-face {
    font-family: "arial-nb";
    src: url("/FONTS/arial-webfont/ARIALNB.woff");
}
@font-face {
    font-family: "brush";
    src: url("/FONTS/BRS.ttf");
}
@font-face {
    font-family: times;
    src: url("/FONTS/times.ttf");
}

.header {
    font-family: "brush";
    font-size: 10vw;
}

h1 {
    font-family: "arial-n";
    font-size: 5vw;
}

h3 {
    font-family: "arial-n";
    font-size: 1.5vw;
}

.sticker {
    position: fixed;
    right: 10vw;
    rotate: -20deg;
    height: 10vw;
}

.sticker-random {
    position: absolute;
    height: 10vw; /* taille de l’image */
    pointer-events: none; /* pour ne pas bloquer les clics */
  }

.sticker-home {
    position: fixed;
    rotate: -7deg;
    height: 5vw;
    left: 1.5vw;
    top: 3vw;
    z-index: 100;
}
.sticker-home-behind {
    position: fixed;
    rotate: 2deg;
    height: 5vw;
    left: 2.5vw;
    top: 2vw;
    z-index: 99;
}

.grid {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 3vw;
    row-gap: 2vw;
    padding-top: 8vw;
    padding-right: 5vw;
    grid-auto-rows: auto;
    width: calc(100vw - 8vw);
    margin-left: 1vw;
}

/*.menu {
    font-family: "arial-n";
    font-size: 1.5vw;
    grid-column: 1;
    grid-row: 1;
}
*/

.menu {
    font-family: "times";
    color: black;
    font-size: 2vw;
    text-align: center;
    position: sticky;
    top: 0.5vw;
    font-weight: 100;
}
.menu-selected {
    font-family: "times";
    color: black;
    text-align: center;
    position: sticky;
    top: 0.5vw;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3vw;
    font-weight: 100;
}
table {
    width: 100%;
    table-layout: fixed;
    border: 0.15vw solid black;
    background-color: white;
    font-size: 1.2vw;
    font-weight: 100;
}
th {
    padding: 0.5vw;
    width: 25%;
    font-weight: 100;
}
th:hover {
    background: #efefef;
}

.img-marge {
    position: absolute;
    z-index: -1;
    right: 5vw;
    padding-top: 5vw;
    max-width: 20vw;
}

.img-header {
    display: none;
}

.img-header-ordi {
    z-index: -1;
    max-width: 100%;
    padding-top: 2vw;
}

.bouton {
    border: 0.15vw solid black;
    background-color: white;
    font-size: 1.2vw;
    font-family: "times";
    cursor: pointer;
    display: flex;
    padding: 7px 10px;
    width: fit-content;
    margin-right: 1.5vw;
    margin-top: 3vw;
}
.bouton-container {
    display: flex;
}
.bouton:hover {
    background: #efefef;
}

a:link{
    font-family: "times";
    text-decoration: none;
    color: black;
}
a:hover {
    font-family: "times";
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3vw;}
a:visited{
    font-family: "times";
    color: black;
    text-decoration: none;
}
.note {
    border: 0.15vw solid black;
    background-color: white;
    font-family: "arial";
    font-size: 1.5vw;
    padding : 1.5vw;
    margin-top: 2vw;
    width: fit-content;
}

/*.img {
    grid-column: 2;
    margin-top: 1vw;
    max-width: 80vw;
    margin-bottom: 1vw;
}
.img-small {
    grid-column: 2;
    margin-top: 1vw;
    max-width: 39.5vw;
}
.img-tiny {
    grid-column: 2;
    margin-top: 1vw;
    max-width: 26vw;
}
.img-tiny-big {
    grid-column: 2;
    margin-top: 1vw;
    max-width: 26vw;
}*/

.titre {
    grid-column: 2;
    font-family: "times";
    font-size: 3vw;
    text-decoration: underline;
    text-underline-offset: 0.5vw;
}
.description {
    font-family: "arial";
    font-size: 1.5vw;
    padding-bottom: 2vw;
    margin-right: 6vw;
    padding-top: 2vw;
    width: 75%;
}
.torchon {
    font-family: "brush";
}

/* Espacement entre les questions */
.bytheway{
    margin: 1.5vw 0;
}

/* Masquer les checkbox et les paragraphes */
.bytheway input,
.bytheway p{
    display: none;
}

/* Si le checkbox est coché, montrer tous les paragraphes */
.bytheway input[type=checkbox]:checked~p{
    display: block;
    font-family: "arial";
    font-size: 1.5vw;    
    /* Restaurer le texte entier */
    text-overflow: clip;
    white-space: normal;
    overflow: visible;
}

/* Style des label */
.bytheway label{
    border: 0.15vw solid black;
    background-color: white;
    font-size: 1.5vw;
    font-family: "times";
    cursor: pointer;
    display: block;
    position: relative;
    padding: 7px 10px;
    transition: all .15s ease-out;
}

/* Éviter de sélectionner le texte en cliquant plusieurs fois */
.bytheway label::selection{
    background: none;
}

.bytheway label:hover{
    background: #efefef;
}

/* Style du label si le checkbox est coché */
.bytheway input[type=checkbox]:checked~label{
    border: 0.15vw solid black;
    background: #efefef;
}

/* Flèche du label par défaut */
.bytheway label::before{
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -6px;
    border: 6px solid transparent;
    border-left-color: inherit;
}

/* Flèche du label sélectionné */
.bytheway input[type=checkbox]:checked~label::before{
    border: 6px solid transparent;
    border-top-color: inherit;
    margin-top: -3px;
    right: 10px;
}

/*.description-eng {
    grid-column: 2;
    font-family: "arial-ni";
color: rgb(200, 200, 200);
    font-size: 1.2vw;
    padding-bottom: 2vw;
    margin-right: 5vw;
}
.description-titre {
    font-family: "arial";
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.3vw;
}
.disclaimer {
    grid-column: 2;
    font-family: "arial";
    font-size: 1.2vw;
   color: rgb(204, 204, 204);
}
a.disclaimer {
    grid-column: 2;
    font-family: "arial";
    font-size: 1.2vw;
    color: black;
}
.download {
    grid-column: 2;
    font-family: "arial";
    font-size: 1.5vw;
color: rgb(200, 200, 200);
}
a.download:link {
    grid-column: 2;
    font-family: "arial";
    font-size: 1.5vw;
color: rgb(200, 200, 200);
}
*/
}







@media (max-width: 600px) {
    body {
        margin-top: 4vw;
        margin-left: 5vw;
        margin-right: 6vw;
        padding-bottom: 10vw;
    }

    @font-face {
        font-family: "arial-n";
        src: url("/FONTS/arial-webfont/ARIALN.woff");
    }
    
    @font-face {
        font-family: "arial-ni";
        src: url("/FONTS/arial-webfont/ARIALNI.woff");
    }
    
    @font-face {
        font-family: "arial";
        src: url("/FONTS/arial-webfont/ARIAL.woff");
    }
    
    @font-face {
        font-family: "arial-nb";
        src: url("/FONTS/arial-webfont/ARIALNB.woff");
    }
    @font-face {
        font-family: "brush";
        src: url("/FONTS/BRS.ttf");
    }
    @font-face {
        font-family: times;
        src: url("/FONTS/times.ttf");
    }

    .header {
        font-family: "brush";
        font-size: 18vw;
    }
    
    .grid {
        display: grid;
        grid-template-columns: min-content 1fr;
        gap: 3vw;
        row-gap: 2vw;
        padding-top: 8vw;
        padding-right: 5vw;
        grid-auto-rows: auto;
        width: calc(100vw - 8vw);
        margin-left: 1vw;
    }
    
    /*.menu {
        font-family: "arial-n";
        font-size: 1.5vw;
        grid-column: 1;
        grid-row: 1;
    }
    */
    
    .menu {
        font-weight: 100;
        font-family: "times";
        color: black;
        font-size: 5vw;
        position: sticky;
        top: 4vw;
    }
    .menu-selected {
        font-weight: 100;
        font-family: "times";
        color: black;
        position: sticky;
        top: 4vw;
        text-decoration: underline;
        text-decoration-thickness: 0.5px;
        text-underline-offset: 0.5vw;
    }
    table {
        width: 100%;
        border: 1px solid black;
        background-color: white;
        font-size: 2.5vw;
        font-family: "times";
        font-weight: 100;
    }
    th {
        padding: 0.5vw;
        font-family: "times";
        font-weight: 100;
    }
    
    .img-marge {
        display: none;
    }

    .img-header {
        z-index: -1;
        max-width: 100%;
        padding-top: 5vw;
    }
    .img-header-ordi {
        display: none;
    }
    
    a:link{
        font-family: "times";
        text-decoration: none;
        color: rgb(58, 38, 38);
    }
    a:visited{
        font-family: "times";
        color: black;
        text-decoration: none;
    }
    .note {
        border: 0.15vw solid black;
        background-color: white;
        font-family: "arial";
        font-size: 4vw;
        padding : 1.5vw;
        margin-top: 2vw;
        width: fit-content;
    }
    .lien {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.5vw;    
    }
    
    /*.img {
        grid-column: 2;
        margin-top: 1vw;
        max-width: 80vw;
        margin-bottom: 1vw;
    }
    .img-small {
        grid-column: 2;
        margin-top: 1vw;
        max-width: 39.5vw;
    }
    .img-tiny {
        grid-column: 2;
        margin-top: 1vw;
        max-width: 26vw;
    }
    .img-tiny-big {
        grid-column: 2;
        margin-top: 1vw;
        max-width: 26vw;
    }*/
    
    .titre {
        grid-column: 2;
        font-family: "times";
        font-size: 6vw;
        text-decoration: underline;
        text-underline-offset: 1.5vw;
        text-decoration-thickness: 0.5vw;
    }
    .description {
        font-family: "arial";
        font-size: 4vw;
        padding-bottom: 2vw;
        padding-top: 5vw;
    }
    .torchon {
        font-family: "brush";
    }
    
    /* Espacement entre les questions */
    .bytheway{
        margin: 1.5vw 0;
    }
    
    /* Masquer les checkbox et les paragraphes */
    .bytheway input,
    .bytheway p{
        display: none;
    }
    
    /* Si le checkbox est coché, montrer tous les paragraphes */
    .bytheway input[type=checkbox]:checked~p{
        display: block;
        font-family: "arial";
        font-size: 4vw;    
        /* Restaurer le texte entier */
        text-overflow: clip;
        white-space: normal;
        overflow: visible;
    }
    
    /* Style des label */
    .bytheway label{
        border: 1px solid black;
        background-color: white;
        font-size: 4vw;
        font-family: "times";
        cursor: pointer;
        display: block;
        position: relative;
        padding: 7px 10px;
        transition: all .15s ease-out;
    }
    
    /* Éviter de sélectionner le texte en cliquant plusieurs fois */
    .bytheway label::selection{
        background: none;
    }
    
    .bytheway label:hover{
        background: #efefef;
    }
    
    /* Style du label si le checkbox est coché */
    .bytheway input[type=checkbox]:checked~label{
        border: 0.15vw solid black;
        background: #efefef;
    }
    
    /* Flèche du label par défaut */
    .bytheway label::before{
        content: '';
        position: absolute;
        right: 4px;
        top: 50%;
        margin-top: -6px;
        border: 6px solid transparent;
        border-left-color: inherit;
    }
    
    /* Flèche du label sélectionné */
    .bytheway input[type=checkbox]:checked~label::before{
        border: 6px solid transparent;
        border-top-color: inherit;
        margin-top: -3px;
        right: 10px;
    }
    .bouton {
        border: 1px solid black;
        background-color: white;
        font-size: 2.5vw;
        font-family: "times";
        cursor: pointer;
        display: flex;
        padding: 0.5vw;
        margin-right: 1.5vw;
        margin-top: 3vw;
    }
    .bouton-container {
        display: flex;
    }
    .bouton:hover {
        background: #efefef;
    }
}