/*
Theme Name: Cabinet de Sciençage 2025
*/

:root {
    --black : #061a1e;
    --white : #FFFFFF;
    --night : #000A2B;
    --soul: #402a4a;
    --terra: #4e3e1e;
    --accent : #BD4D20;
}

*, *:after, *:before {
    box-sizing: border-box;
    width: auto;
    height: auto;
    position: relative;
    transition: .3s ease-in-out;
    color: inherit;    
    font-family: inherit;
}

img[class^="fi"] {
    position: absolute;
    width: 100%;
    height: 100%;
}

img.fill {
    object-fit: cover;
}

img.fit {
    object-fit: contain;
}

.no-li {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: 'Outfit', sans-serif;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
}

h2 {
    font-size: 7em;
    font-weight: 400;
    letter-spacing: .07em;
}

h3 {
    font-size: 3.5em;
}

h4 {
    font-size: 2.75em;
}

h6 {
    font-size: 2em;
    margin: 2vmin 0 0;
    line-height: 1;
}

.mob-on {
    display: none;
}

.wi-med {
    width: clamp(300px, 80%, 2000px);
    margin: 5vmax auto;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'inter', sans-serif;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    background: var(--white);
    color: var(--black);
}

p.bold {
    font-weight: 800;
}

a {
    text-decoration: none;
}

button {
    background: transparent;
    border: none;
    cursor: pointer;
}

button, 
a[class*="link"] {
    padding: 1vmax 1.75vmax;
    font-size: 0.75vmax;
    text-transform: capitalize;
    font-weight: 600;
    font-family: "outfit", sans-serif;
    display: inline-block;
    width: fit-content;
}

.button {
    padding: 1.25vmax 1.75vmax;
    display: inline-block;
    font-weight: 600;
    font-size: 1.05em;
    width: fit-content;
    border:none;
    cursor: pointer;
    font-family: 'outfit', sans-serif;
}

.bg-dk {
    background: var(--black);
    color: var(--white);
    border: solid 1.7pt var(--black);
}

.bg-wh {
    background: var(--white);
    color: var(--black);
    border: solid 1.7pt var(--white);
}

.bord {
    border: solid 1.7pt;
}

.bord:hover {
    color: var(--accent);
}

.bg-lgt, 
a[class*="bg"]:hover,
button[class*="bg"]:hover {
    background: var(--accent);
    color: var(--black);
    border-color: var(--accent);
}

.cen {
    text-align: center;
}

*[class*="grid"] {
    display: grid;
}

*[class*="flex"] {
    display: flex;
}

*[class*="-col"] {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

/*   Flex Justification   */

.jst-sb {
    justify-content: space-between;
}

.jst-cen {
    justify-content: center;
}

.jst-end {
    justify-content: end;
}

/*   Flex aligns   */

.a-end {
    align-items: end;
}

.a-sta {
    align-items: start;
}

.a-cen {
    align-items: center;
}

/*  Display Gaps    */

.gpone {
    gap: 1vmax;
}
.gptwo {
    gap: 3vmax;
}
.gpthree {
    gap: 6vmax;
}

main#visit-pop {
    height: fit-content;
    width: fit-content;
    backdrop-filter: blur(2px);
    border: none;
    padding: 2vmax;
    position: fixed;
    max-width: 90%;
}
main#visit-pop::backdrop {
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(5pt);
}
main#visit-pop section {
    margin: 1vmax 0 0;
    padding: 1vmax;
}
main#visit-pop h7 {
    display: block;
    font-family: "outfit", sans-serif;
    font-size: 3em;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 0 2vmax;
}
main#visit-pop::backdrop {
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(5pt);
}


nav#header-search {
    position: fixed;
    width: 100%;
    background: var(--white);
    top: 0;
    z-index: 991;
    padding: 5vmax 0 0;
    transform: translateY(-105%);
}

nav#header-search.open {
    transform: translateY(0%);
}


/*  Header - Header     */

header#header {
    position: fixed;
    width: clamp(300px, 95%, 2400px);
    left: 50%;
    transform: translateX(-50%);
    top: 4vh;
    z-index: 999;
    filter: invert(1);
    mix-blend-mode: difference;
}

nav#menu-slide {
    padding: 5vmax 0 8vmax;
    background: linear-gradient(180deg, white 80%, rgba(255, 255, 255, 0));
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 99;
    transform: translateY(-105%);
}
nav#menu-slide.open {
    transform: translateY(0%);
}

nav#menu-slide > main footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vmax;
    font-size: 2.5em;
}
nav#menu-slide footer footer:hover img:not(:hover) {
    opacity: .35;
}

nav#menu-slide main a {
    opacity: 0;
    transform: translateX(3vmax);
}

nav#menu-slide.open main a {
    opacity: 1;
    transform: translateX(0);
}

nav#menu-slide.open main a {
    transition-delay: .3s;
}

nav#menu-slide.open main a:nth-child(2),
nav#menu-slide.open main a:nth-child(4) {
    transition-delay: .35s;
}

nav#menu-slide.open main a:nth-child(3),
nav#menu-slide.open main a:nth-child(6) {
    transition-delay: .4s;
}

nav#menu-slide.open main a:nth-child(5),
nav#menu-slide.open main a:nth-child(8) {
    transition-delay: .45s;
}

nav#menu-slide main footer a:hover {
    color: var(--accent);
}
nav#menu-slide > footer h7 {
    margin: 0 0 2vmax;
    display: block;
    font-size: 1.5vmax;
    font-weight: 800;
    text-transform: uppercase;
}
nav#menu-slide > footer footer img {
    height: 2vmax;
}
nav#menu-slide > footer footer {
    display: flex
;
    justify-content: end;
    gap: 6%;
}
nav#menu-slide > footer {
    text-align: right;
}

/*      Header logo     */

a#home-logo {
    gap: .5vmax;
    height: 8vmin;
}
a#home-logo img:first-child {
    height: 100%;
    z-index: 9;
}
a#home-logo img.hide {
    height: 55%;
    transform: translateX(15%);
    opacity: 0;
}
a#home-logo:hover img.hide {
    transform: translateX(0);
    opacity: 1;
}



/*    Header Navigation   */

button#src-butt {
    padding: 0;
}
button#src-butt img {
    height: 1.75vmax;
}

aside#menu-burger {
    aspect-ratio: 7 / 5;
    height: 1.75vmax;
    margin-left: 1vw;
    cursor: pointer;
}
aside#menu-burger hr {
    border: none;
    border-bottom: solid 2pt;
    width: 100%;
    background: var(--black);
    position: absolute;
    top: 0;
    margin: 0;
}
aside#menu-burger hr:first-child {
    top: 50%;
    transform: translateY(-50%);
}
aside#menu-burger hr:last-child {
    top: 100%;
    transform: translateY(-100%);
}


aside#menu-burger.open hr {
    width: 0;
}

aside#menu-burger.open hr:last-child {
    transform: translate(0, -800%) rotate(45deg);
    width: 70% ;
}

aside#menu-burger.open hr:first-child {
    transform: translate(0, 00%) rotate(135deg);
    width: 70% ;
}


/*     Home Exposition    */

section#home-expo {
    margin: 10vmax auto 5vmax;
}
section#home-expo header {
    overflow: hidden;
    height: 50vh;
}

section#home-expo main {
    width: 80%;
    margin: 0 auto;
}




/*  Footer  */


footer#footer > main {
    width: clamp(300px, 90%, 2400px);
    margin: 5vh auto;
}

footer#footer header p {
    margin: 0;
    font-size: 120%;
    font-weight: 600;
}

footer#footer > footer {
    padding: 1vmax 5%;
    font-size: 90%;
}
footer#footer header > img {
    height: 25vh;
    align-self: baseline;
}
footer#footer main header nav a img {
    height: 2.5vh;
}
section#main-links {
    width: 40%;
}
section#main-links a {
    text-align: right;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
}
section#main-links main a {
    font-size: 5em;
    padding-right: calc(5em / 4.05);
    font-weight: 600;
}

section#main-links footer {
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: end;
}
section#main-links footer a {
    font-size: 2.5em;
    font-weight: 700;
    width: 40%;
    padding-right: calc(3em / 2.15);
}
section#main-links footer a:nth-child(even) {
    width: 55%;
}
section#main-links a img {
    height: 70%;
    margin-left: 1.35vmin;
    position: absolute;
    right: 0;
    top: 55%;
    transform: translateY(-50%);
}



section#home-prog article {
    padding: 2vmax 4% 4vmax;
    border-top: dashed 1pt;
}
section#home-prog p {
    margin: 0;
}
section#home-prog main article > aside {
    width: 15%;
    font-size: x-large;
    opacity: .5;
    font-family: 'Outfit', sans-serif;
}
section#home-prog main article > a {
    width: 38%;
    font-weight: 800;
    font-size: 2.25em;
}
section#home-prog main article > a:hover {
    color: var(--accent);
}
section#home-prog main article > footer {
    width: 47%;
}

section#home-prog > a {
    margin: 0 auto;
    padding: 1.5vmax 3vmax;
}

nav.flex-wrap.gptwo {
    gap: 1vmax 3vmax;
}

section#home-podcast main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vmax 2vmax;
}
section#home-podcast p {
    margin: 0;
}

section#home-podcast a > p {
    opacity: .5;
}

section#home-podcast main a:nth-child(even) {
    color: var(--terra);
}



section#home-artist a:nth-child(even) {
    color: darkgoldenrod;
}
section#home-artist a span {
    font-size: 40%;
    font-weight: 600;
    margin: 0 1vmin 0 0;
}
section#home-artist a {
    font-size: 6em;
    display: inline-flex;
    text-transform: uppercase;
    line-height: .70;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    padding: 0 0 0 2vmin;
}
section#home-artist:hover a:not(:hover) {
    opacity: .25;
    filter: blur(1pt);
}
section#home-artist {
    text-align: center;
    margin: 15vmax auto;
    user-select: text;
}


section#home-about {
    width: clamp(300px, 90%, 2400px);
    margin: 10vmax auto;
}
section#home-about > main {
    width: 30%;
}
section#home-about > div {
    width: 70%;
    background: lightgray;
    aspect-ratio: 3 / 2;
}



section#home-actu {
    width: clamp(300px, 90%, 2400px);
    margin: 15vmax auto;
}
section#home-actu aside {
    text-align: right;
    width: 30%;
}
section#home-actu > main {
    width: 70%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
section#home-actu main a header {
    aspect-ratio: 1 / 1;
    background: lightgrey;
}
section#home-actu a p {
    font-size: 90%;
    line-height: 1.1;
    opacity: .5;
}
section#home-actu main:hover a:not(:hover) {
    opacity: .25;
    filter: blur(1pt);
}


section#promo aside {
    aspect-ratio: 1;
}
section#promo > * {
    width: 100%;
}
section#promo main div {
    padding: 1vmax;
}



section#blob > main {
    width: 100%;
    padding: 0 5vmax;
}
section#blob {
    border: none;
    margin: 10vmax 0;
}

.blob-bg {
    left: 0;
    top: 0;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-attachment: fixed;
    height: 75vh;
    width: 100%;
}

section#blob p {
    font-size: 1.25em;
}

.blob-bg img {
    width: 60vh;
}

section#blob em {
    display: block;
    padding: 1.15vmin 2.5vmin;
    color: var(--white);
    background: var(--accent);
    width: fit-content;
}

footer#newsletter main {
    width: 60%;
    margin: 20vmax auto 20vmax;
    padding: 2vmax 3vmax;
}
footer#newsletter main input {
    width: 100%;
    background: transparent;
    border: solid 1.2pt;
    padding: 2vmax;
    font-size: large;
    font-weight: 400;
}
footer#newsletter footer p {
    padding: 0 2vmax;
}
footer#newsletter button {
    white-space: nowrap;
    font-size: 1.5em;
    padding: 1.5vmax 3vmax;
    text-transform: none;
}




section#about-main {
    margin-top: 25vh;
}


section#about-blick main {
    width: 60%;
    margin: 6vmax 0;
}
section#about-blick div {
    width: 40%;
    background: lightblue;
    min-height: 30vh;
}
section#about-blick {
    padding: 0 12.5%;
    overflow: hidden;
    border: none;
    margin: 10vmax 0;
    align-items: normal;
}

section#about-service {
    margin: 10vmax auto;
}
section#about-service article {
    width: 25%;
}
section#about-service article div {
    background: lightgrey;
    aspect-ratio: 4 / 5;
}



section#about-project {
    padding: 5vmax 7.5%;
    margin: 10vmax 0;
}
section#about-project > aside {
    width: 35%;
    text-align: right;
}
section#about-project > main {
    width: 65%;
    gap: 3vmax 3%;
}
section#about-project main a div {
    aspect-ratio: 1;
    width: 100%;
    background-size: cover;
}
section#about-project main a img {
    position: absolute;
    width: 60%;
    height: 60%;
    object-fit: contain;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


section#about-project > main a {
    width: 31.33%;
}
section#about-project > main:hover a:not(:hover) {
    opacity: .25;
    filter: blur(1pt);
}
section#about-project > main a i {
    font-style: normal;
    text-transform: capitalize;
    padding: 1vmin;
    display: inline-block;
    font-size: 70%;
    margin: 0 5% 0 0;
    border: solid 1pt;
    letter-spacing: .05em;
}
section#about-project > main a p {
    font-size: 90%;
    opacity: .35;
}
section#about-project > main a h7 {
    font-size: 1.7em;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 1em;
    display: block;
}



section#about-big-links a {
    font-family: 'outfit', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 3em;
    display: block;
    line-height: 1;
    padding-right: 1.25em;
}

section#about-big-links a img {
    height: 70%;
    margin-left: 1.35vmin;
    position: absolute;
    right: 0;
    top: 55%;
    transform: translateY(-50%);
}



section#cds-message {
    width: clamp(300px, 90%, 2400px);
    margin: 15vmax auto;
}

section#cds-message section footer {
    width: 35%;
}
section#cds-message section main {
    width: 65%;
}


section#cds-message header form button {
    width: 100%;
    display: flex;
    padding: 2vmax;
    justify-content: center;
}
div.input-bloc label {
    font-size: large;
    font-weight: 500;
}
.col-full {
    grid-column: 1 / -1;
}
div.input-bloc textarea {
    min-height: 20vh;
}

div.input-bloc input, 
div.input-bloc textarea {
    font-family: inherit;
    border: solid 1pt;
    color: inherit;
    padding: 1vmax;
    resize: none;
}
form div.input-bloc {
    display: flex;
    flex-direction: column;
    gap: .75vmin;
}
section#cds-message header form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vmax;
}

section#cds-message section main > div {
    width: 100%;
    height: 50vh;
    background: lightblue;
}

section#cds-message section footer > div:first-child {
    width: 90%;
    flex-grow: 1;
    background: lightblue;
}

header#contact {
    width: 90%;
}

div#about-newsletter input {
    width: 100%;
    background: transparent;
    font-size: 1.5em;
    font-weight: 400;
    border: solid 1pt;
    padding: 1vmax;
    margin: 2vmax 0 0;
}
div#about-newsletter {
    padding: 3vmax;
}







ul#store-cat {
    width: 25%;
    position: sticky;
}

ul#store-cat h4 {
    margin-bottom: 2vmax;
}
ul#store-cat li i {
    display: block;
    font-style: normal;
    font-size: 90%;
    border: solid 1pt;
    border-radius: 2vmax;
    z-index: 2;
    padding: .75vmin 1.25vmin;
    line-height: 1;
}
ul#store-cat li p {
    font-size: 120%;
    margin: 0;
    z-index: 2;
    line-height: 1;
    font-weight: 600;
}
ul#store-cat li {
    font-size: 1em;
    border-bottom: solid 1pt;
    margin-bottom: 1.5vmax;
    padding: 0 4% 1.5vmin;
    cursor: pointer;
}
ul#store-cat li:after {
    z-index: 1;
    position: absolute;
    width: 100%;
    left: 0;
    transition: .2s ease-in-out;
    bottom: 0;
    height: 0;
    background: var(--accent);
    content: '';
}
ul#store-cat li:before {
    z-index: 2;
    position: absolute;
    padding: 0 0 0 1vmax ;
    left: 0;
    transform: translate(-200%, 0%)scale(1.15);
    bottom: 45%;
    display: block;
    color: var(--white) !important;
    content: 'X';
    font-family: 'outfit', sans-serif;
}
ul#store-cat li:hover:after {
    height: 125%;
}
ul#store-cat li:hover {
    padding-left: 2vmin;
}

ul#store-cat li.b-dk {
    padding-left: 5vmin;
    color: var(--white);    
}
ul#store-cat li.b-dk:before {
    transform: translate(0%, 00%)scale(1.15);
}
ul#store-cat li.b-dk:after {
    background: var(--black);
    height: 125%;
}



main#store-elt article > p:after {
    content: ' Fcfa';
}
main#store-elt article > p {
    font-size: 1.15em;
    font-weight: 600;
}
main#store-elt article header {
    aspect-ratio: 1;
}
.prod-hide {
    display: none;
}
main#store-elt article main {
    margin: 1vmax 0 0;
}
main#store-elt article main i {
    display: block;
    font-style: normal;
    margin: 0 0 .5vmax;
}
main#store-elt article h7 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.5em;
    line-height: 1;
}
main#store-elt article {
    cursor: pointer;
}
main#store-elt:hover article:not(:hover) {
    opacity: .25;
    scale: .9;
}
main#store-elt {
    width: 77%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10vmin 1vmax;
}



main#fs-elt {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
main#fs-elt article {
    cursor: pointer;
}
main#fs-elt article header {
    aspect-ratio: 5 / 7;
}
main#fs-elt article main {
    margin: 1vmax 0;
}
main#fs-elt article main i {
    display: block;
    font-style: normal;
    font-size: 1.1em;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    margin: 0 0 .75vmin;
}
main#fs-elt article main h7 {
    font-size: 1.5em;
    font-weight: 800;
}
main#fs-elt article > p {
    font-size: 1.2em;
    font-weight: 800;
}
main#fs-elt article > p:after {
    content: ' Fcfa';
}
main#fs-elt:hover article:not(:hover) {
    opacity: .25;
    filter: blur(1pt);
    scale: .95;
}


section#store-intro p {
    font-size: 1.5em;
    padding-left: calc(13em / 20);
}
section#store-intro footer {
    padding-left: calc(13em / 12);
}
section#store-intro h2 {
    font-size: 13em;
    letter-spacing: 0;
}
section#store-intro {
    background-size: cover;
    padding: 7vmax;
    height: 65vh;
    margin: 20vh auto 15vh;
    background: var(--black);
    color: white;
}
section#store-intro * {
    z-index: 2;
}
section#store-intro:after {
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: .35;
    background: var(--black);
    z-index: 1;
    position: absolute;
}



section#billet {
    margin: 10vmax auto;
}
section#billet article {
    width: 50%;
    aspect-ratio: 5 / 4;
}


section#actu-intro {
    padding: 0vmax 20%;
    height: 60vh;
    margin: 20vh 0 10vh;
    background-size: cover; 
    background-position: center center;
}

section#actu-intro:after {
    content: '';
    z-index: 9;
    background: var(--black);
    opacity: .35;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
section#actu-intro * {
    z-index: 999;
    color: var(--white);
}

main#blog-articles header {
    flex-grow: 1;
    background: lightblue;
    min-height: 30vh;
}
main#blog-articles p {
    font-size: 80%;
    opacity: .5;
}
main#blog-articles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2vmax;
}


section#abonne-intro > div {
    width: 67.5%;
    aspect-ratio: 6 / 4;
    background: lightblue;
}
section#abonne-intro a {
    border: solid 1pt;
    width: fit-content;
    padding: 1vmax 1.5vmax;
    margin: 1vmax 0 0;
    font-size: 1.5em;
}
section#abonne-intro p {
    opacity: .65;
    width: 80%;
}
section#abonne-intro {
    width: clamp(300px, 95%, 2400px);
    margin: 17.5vh auto 10vmax;
}
section#abonne-intro > nav {
    width: 35%;
}


section.abonne-sec {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vmax;
}
article.abo-elt {
    padding: 1vmax;
}
article.abo-elt aside {
    width: 100%;
    background: lightblue;
    aspect-ratio: 7 / 4;
}
article.abo-elt nav {
    margin: 2vmax 0 0;
}
article.abo-elt footer {
    gap: 1vmax 4vmax;
    margin: 1vmax 0 0;
}
article.abo-elt footer p {
    margin: 0;
}



section#podcast-intro {
    margin: 17.5vh auto 15vh;
}

section#podcast-intro > header {
    border-top-right-radius: 20vmax;
    border-top-left-radius: 20vmax;
    background: lightblue;
    min-height: 40vh;
    width: 40%;
    overflow: hidden;
    align-self: normal;
}

section#podcast-intro > section {
    width: calc(60% - 6vmax);
    padding-bottom: 1vmax;
}

nav#pod-butt {
    margin: 3vmax 0 2vmax;
}
nav#pod-butt main hr {
    border: none;
    background: var(--black);
    height: .75vmin;
    margin: 0;
}
nav#pod-butt main hr#pod-line {
    opacity: .25;
    z-index: 2;
}
nav#pod-butt main hr#manip {
    left: 0;
    top: 0;
    width: var(--pod-lvl);
    transition: .1s;
    position: absolute;
    z-index: 1;
}
nav#pod-butt main div {
    border-radius: 50%;
    position: absolute;
    left: var(--pod-lvl);
    transform: translate(-50%, -50%);
    top: 50%;
    aspect-ratio: 1;
    background: var(--black);
    height: 2.35vmin;
    z-index: 3;
}

section#podcast-ctrl h6 {
    font-size: 3em;
    font-weight: 800;
    margin: 0 0 1vmax;
}

header header h7 {
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35em;
}
header header hr {
    height: .1vmin;
    background: var(--black);
    flex-grow: 1;
    border: none;
}

button#pod-play p {
    margin: 0;
}
button#pod-play {
    display: inline-flex;
    align-items: center;
}

nav#pod-butt footer p {
    user-select: none;
}

nav#pod-butt button div {
    height: 0vmin;
    aspect-ratio: 2;
    white-space: nowrap;
}

nav#pod-butt button div:before,
nav#pod-butt button div:after {
    display: inline-block;
    overflow: hidden;
    top: 50%;
    transform: translateY(-50%);
    content: '';
}

button#pod-next div:after,
button#pod-next div:before, 
button#pod-play div:after {
    border: solid .5vmax transparent;
    border-left-color: var(--accent);
}

button#pod-next div:after {
    margin: 0 0 0 -0.35vmax;
}

button#pod-next:hover div:after,
button#pod-next:hover div:before,
button#pod-play:hover div:after {
    border-left-color: var(--white);
}

button#pod-pause div:before, 
button#pod-pause div:after {
    height: 1vmax;
    width: .35vmax;
    background: var(--accent);
}
button#pod-pause div:before {
    margin: 0 0.25vmax 0 0;
}

button#pod-pause:hover div:before, 
button#pod-pause:hover div:after {
    background: var(--white);
}

section#podcast-ctrl footer nav i:not(:last-child):after {
    content: '';
}
section#podcast-ctrl footer nav {
    margin: 2vmax 0 0 0;
}
section#podcast-ctrl footer nav i {
    display: inline-block;
    margin: 0 1vmin 0 0;
    font-style: normal;
    padding: 1vmin 1.5vmin;
    border: solid 1pt;
    font-size: 80%;
}


button#pod-play.on-play {
    background: var(--black);
    color: var(--white);
}

button#pod-play.on-play div:after {
    border-left-color: var(--accent);    
}



nav#pod-sel h8 {
    font-weight: 800;
    font-size: 2em;
    text-transform: uppercase;
}
nav#pod-sel button {
    border: solid 1pt;
    border-radius: 0;
    font-size: 1.1em;
    padding: 1.5vmax 3vmax;
    margin-left: 1vmax;
}
input#pod-search {
    color: inherit;
    border: solid 1.5pt;
    padding: 1.5vmax;
    text-transform: capitalize;
    font-size: 1.25em;
    margin: 0 0 1vmax;
}


#bloc h3 {
    margin-bottom: 3vmax;
}

header#art-head-img {
    height: 50vh;
}

nav#single-meta ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav#single-meta ul li {
    padding: 1vmax 2vmax;
    background: var(--black);
    color: var(--white);
    text-transform: uppercase;
    font-family: 'outfit', sans-serif;
    font-weight: 800;
    font-size: large;
}

nav#single-meta > a {
    text-transform: capitalize;
    background: var(--soul);
    color: var(--white);
    padding: 1vmin 2vmin;
    border-radius: 1vmin;
}

nav#single-meta {
    margin: 3vmax 0;
}


form#search button {
    font-size: 1.5em;
    padding: 2rem 5rem;
}
form#search input {
    flex-grow: 1;
    padding: 1.25vmax;
    font-size: 1.1vmax;
}

section#cds-message header form section > div {
    width: 100%;
}


main#contact-form-pop header nav a {
    padding: 1vmax 2vmax;
}
main#contact-form-pop form section div {
    flex-grow: 1;
}
main#contact-form-pop header {
    width: clamp(300px, 70vw, 100%);
}
main#contact-form-pop form input {
    width: 100%;
}
main#contact-form-pop form {
    display: grid
;
    grid-template-columns: repeat(2, 1fr);
}
main#contact-form-pop::backdrop {
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(4px);
}
main#contact-form-pop {
    max-width: 90%;
    position: fixed;
    max-height: 90vh;
    padding: 3vmax;
    width: fit-content;
    border: none;
}



div#container p {
    font-size: large;
}

div#container {
    padding: 2vmax 0 0;
}

div#container h4, div#container h3, div#container h2, div#container h1, div#container h5, div#container h6 {
    margin: 3vmax 0 1vmax;
    font-size: 2.25vmax;
}



section#home-off header > img {
    width: 100%;
    filter: invert(1) brightness(5);
}

div.h-off-img {
    position: absolute;
    width: 70%;
    left: 15%;
    aspect-ratio: 2.5;
    bottom: 0;
    transform: translateY(5vmax);
}   

section#home-off {
    padding: 1vmax 0 5vmax;
}
section#home-off header {
    margin: 0 0 3vmax;
}

section#home-off h2 {
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0;
}


*[id*="-form"][class*="-form"] {
    max-width: 600px;
    margin: auto;
    font-family: sans-serif;
}
.form-section {
    display: none;
}
.form-section.active {
    display: block;
}
*[id*="-form"][class*="-form"] label {
    display: block;
    margin-bottom: 15px;
}
*[id*="-form"][class*="-form"] input, 
*[id*="-form"][class*="-form"] select, 
*[id*="-form"][class*="-form"] textarea {
    width: 100%;
    padding: 2vmin;
    margin-top: 1.5vmin;
}
*[id*="-form"][class*="-form"] textarea {
    height: 25vh;
    resize: none;
}
*[id*="-form"][class*="-form"] button {
    padding: 10px 20px;
    margin: 10px 5px 0 0;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}
*[id*="-form"][class*="-form"] button:hover {
    background-color: #555;
}

*[id*="-form"][class*="-form"] h3 {
    margin: 0 0 5vmax;
    font-weight: 900;
}

@font-face {
    font-family: 'maken';
    src: url('img/CEFOJY/Makent.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Recommended for better performance */
}

section#cefojy-hero > aside {
    background: linear-gradient(135deg, green, red, yellow);
    width: 50%;
    color: white;
    display: flex;
    justify-content: center;
}
section#cefojy-hero > aside.rdk {
    background: var(--night);
    width: 50%;
    color: white;
    display: flex;
    justify-content: center;
}
section#cefojy-hero > form {
    width: 50%;
    padding: 10vmax 0;
}

section#cefojy-hero > aside main {
    padding: 5vmax 15%;
    gap: 2vmax;
    display: flex;
    flex-direction: column;
}
img#cefojy-logo {
    rotate: 15deg;
    height: 45vh;
    margin: 0 0 3.5vmax;
}
img#rdk-logo {
    height: 70vh;
}
h3.cefojy-title {
    font-family: 'maken';
    font-weight: 100;
    font-size: 7.5em;
    letter-spacing: -.1vmin;
    line-height: .8;
}
section#cefojy-hero > aside main footer img {
    filter: invert(1);
    height: 1vmax;
}
section#cefojy-hero > aside main footer a {
    display: flex;
    gap: 1vmax;
    background: black;
}
section#cefojy-hero > aside main footer a:hover {
    background: orangered;
    color: black;
}
section#cefojy-hero {
    margin-top: 17.5vh;
}

@media only screen and (max-width : 1400px) {
    p {
        font-size: 1vmax;
    }

    h3 {
        font-size: 3.5vmax;
    }

    h6 {
        font-size: 2vmax;
    }

    section#podcast-ctrl h6 {
        font-size: 3vmax;
    }

    button, a[class*="link"] {
        padding: .8vmax 1.5vmax;
        font-size: 0.85vmax;
    }

    header header h7 {
        font-size: 1.35vmax;
    }



    section#main-links main a {
        font-size: 5vmax;
    }

    section#main-links footer a {
        font-size: 1.85vmax;
        width: 40%;
    }

    footer#footer header p {
        font-size: 1.2vmax;
    }

    footer#newsletter button {
        font-size: 1.5vmax;
    }


    section#cefojy-hero {
        flex-direction: column;
    }
    section#cefojy-hero > aside {
        width: 100% !important;
        display: block;
        padding: 10vmax 0 0;
    }
    section#cefojy-hero > aside:after {
    display: block;
    clear: both;
    content: '';
}
    section#cefojy-hero > aside main#cefojy-info {
    padding: 10vmax 10%;
    float: right;
    width: 60%;
}

    section#cefojy-hero > aside main > img#cefojy-logo {
    position: absolute;
    transform: translate(-115%, 30%);
}
    *[id*="-form"][class*="-form"] h3 {
    font-size: 2.5em;
}
    section#cefojy-hero > aside main footer a {
    font-size: .75em;
    padding: 1.5vmax;
}

*[id*="-form"][class*="-form"] label.flex input[type="checkbox"] {
    width: min-content;
}
*[id*="-form"][class*="-form"] label.flex {
    display: flex;
    align-items: flex-start;
}




    @media (max-width : 600px) and (orientation : portrait) {
        
        .mob-on {
            display: flex;
            align-items: end;
        }
        nav#menu-slide button {
            font-size: 1.1em;
        }
        .flex-mc {
            flex-direction: column;
        }

        .wi-med {
            width: 90%;
        }

        p {
            font-size: .75em;
        }

        button, a[class*="link"] {
            padding: 1.5vmax 2.5vmax;
            font-size: 1.5vmax;
        }

        h2 {
            font-size: 4.5em;
            letter-spacing: .015em;
        }

        h6 {
            font-size: 2.5vmax;
        }

        /*  Header  */

        header#header {
            width: 90%;
            left: 5%;
            transform: translateX(0%);
        }

        header#header nav > button:not(#src-butt) {
            display: none;
        }

        button#src-butt {
            margin-right: 1.75vmax;
            display: flex;
            align-items: center;
        }

        button#src-butt img {
            height: 3.5vmax;
        }

        a#home-logo {
            height: 6vh;
        }

        aside#menu-burger {
            height: 3.75vmax;
        }



        /*  Footer  */

        section#main-links {
            width: 100%;
        }

        footer#footer > main > header *:not(img) {
            align-items: center;
            width: 100%;
        }
        footer#footer > main > header {
            width: 100%;
            align-items: center;
            text-align: center;
        }
        footer#footer header > img {
            align-self: unset;
        }
        footer#footer header p {
            font-size: 1.75vmax;
            line-height: 1.5;
        }
        footer#footer > main {
            width: 90vw;
            flex-direction: column;
        }

        div#lang button {
            font-size: .65em;
            padding: 2vmax 3vmax;
        }
        div#lang {
            align-items: end;
            display: flex        ;
            flex-direction: column;
            margin: 5vmax 0;
            font-size: x-large;
        }



        /*  Newsletter  */

        footer#newsletter main input {
            font-size: 1em;
        }
        footer#newsletter main p {
            line-height: 1.25;
        }
        footer#newsletter main button {
            white-space: break-spaces;
        }
        footer#newsletter main footer {
            flex-direction: column;
            align-items: start;
        }
        footer#newsletter main {
            width: 70%;
        }



        /*   Index   */

        section#home-expo main footer p {
            margin: 0;
            font-size: 1.6vmax;
            font-weight: 600;
        }
        section#home-expo main footer {
            flex-direction: column;
            gap: 2vmax;
            margin: 3vmax 0;
        }

        section#home-actu aside {
            text-align: left;
            width: 100%;
            align-items: start;
        }
        section#home-actu > main {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        section#home-prog main article > * {
            width: 100% !important;
        }
        section#home-prog main article > a {
            font-size: 2em;
            line-height: 1;
        }

        section#home-artist a {
            font-size: 3em;
        }

        section#home-about {
            width: 90%;
        }
        section#home-about > div {
            width: 100%;
            aspect-ratio: 3 / 4;
        }

        section#home-about > main {
            width: 100%;
        }

        section#home-podcast main {
            grid-template-columns: repeat(2, 1fr);
            gap: 8vmax 1vmax;
        }


        /*  Abonnements */

        section#abonne-intro {
            width: 90%;
            margin: 7.5vh auto 10vmax;
            flex-direction: column;
        }

        section#abonne-intro > div {
            width: 100%;
        }

        section#abonne-intro > nav {
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
        }

        section#abonne-intro a {
            font-size: 1.5vmax;
        }

        article.abo-elt nav {
            margin: 3vmax 0 4vmax;
            flex-direction: row;
            flex-wrap: wrap;
        }

        section.abonne-sec {
            grid-template-columns: repeat(1, 1fr);
        }


        /*  A Propos    */

        section#about-main {
            margin-top: 15vh;
        }

        section#about-service > main {
            flex-direction: column;
        }
        section#about-service article {
            width: 100%;
        }
        section#about-service article div {
            aspect-ratio: 4 / 3;
        }


        section#cds-message header > nav {
            flex-wrap: wrap;
        }

        section#about-blick > * {
            width: 100% !important;
        }
        section#about-blick {
            padding: 0 7.5%;
            overflow: hidden;
            flex-direction: column;
            gap: 0vmax;
        }

        section#about-service > main {
            flex-direction: column;
        }
        section#about-service article {
            width: 100%;
        }
        section#about-service article div {
            aspect-ratio: 4 / 3;
        }

        section#about-big-links {
            flex-direction: column;
            gap: 3vmax;
        }

        section#about-big-links a {
            font-size: 2em;
            padding-right: 1.25em;
            width: fit-content;
        }

        section#about-project > main {
            width: 100%;
            gap: 3vmax 3%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        section#about-project > main a h7 {
            font-size: 1.2em;
        }

        section#about-project > aside {
            width: 100%;
        }

        section#cds-message {
            width: 90%;
            margin: 15vmax auto;
        }

        section#cds-message header > nav {
            flex-wrap: wrap;
        }

        section#cds-message header form {
            grid-template-columns: repeat(1, 1fr);
        }

        div.input-bloc label {
            font-size: small;
            font-weight: 500;
            margin: 1vmax 0 0;
        }

        header#contact {
            width: 100%;
        }

        div#about-newsletter input {
            font-size: 1.15em;
            padding: 1.25vmax;
        }

        section#cds-message section footer {
            width: 100%;
            flex-direction: column-reverse;
        }
        section#cds-message section footer > div:first-child {
            width: 100%;
            aspect-ratio: 1;
        }

        section#cds-message > section {
            flex-direction: column;
        }

        section#cds-message section > * {
            width: 100% !important;
        }

        section#about-project {
            flex-direction: column;
        }

        section#about-project > main a {
            width: 100%;
        }




        /*  Boutique  */

        section#store-intro p {
            font-size: 0.85em;
            padding-left: calc(2em / 20);
            font-weight: 600;
        }

        section#store-intro h2, section#actu-intro h2 {
            font-size: 2em;
            letter-spacing: 0;
        }

        section#store-intro footer {
            padding-left: calc(2em / 12);
        }

        main#fs-elt {
            grid-template-columns: repeat(2, 1fr);
        }


        section#store-units {
            flex-direction: column;
        }

        ul#store-cat {
            width: 100%;
            position: relative;
        }

        ul#store-cat li {
            font-size: 1em;
            padding: 0 4% 3.5vmin;
        }

        ul#store-cat li i {
            padding: 2.25vmin 3.25vmin;
            line-height: .5;
        }

        main#store-elt {
            width: 100%;
            grid-template-columns: repeat(2, 1fr);
        }

        ul#store-cat li.b-dk {
            padding-left: 10%;
            color: var(--white);
        }

        ul#store-cat h4 {
            margin-bottom: 4vh;
        }

        section#billet article {
            width: 100%;
            aspect-ratio: 5 / 4;
        }

        main#blog-articles {
            grid-template-columns: repeat(2, 1fr);
        }

        section#actu-intro {
            margin: 10vh 0;
        }        

        main#store-elt article main ul {
            font-size: .65vmax;
            padding: 0 0 0 2vmin;
            line-height: 1.5;
            color: darkslategrey;
        }



        /*  Podcasts  */

        section#podcast-intro > header {
            width: 100%;
        }

        section#podcast-intro > section {
            width: 100%;
            padding: 0 5% 1vmax;
        }

        nav#pod-butt > ul {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2vmax;
        }

        nav#pod-butt > ul a {
            grid-column: span 2;
            width: 100%;
            text-align: center;
        }

        nav#pod-butt button div:before, nav#pod-butt button div:after {
            transform: translateY(-100%);
        }

        section#podcast-ctrl header footer p {
            margin: 0;
        }
        section#podcast-ctrl header footer {
            flex-direction: column;
            gap: 1vmax;
            margin: 2vmax 0;
        }

        header header h8 {
            font-size: 1.15vmax;
        }

        section#podcast-ctrl header header {
            margin: 3vmax 0 0;
        }

        section#podcast-ctrl footer nav i {
            margin: 0px 0vmin 0 0;
            border: none;
        }

        section#podcast-ctrl footer nav i:not(:last-child):after {
            content: " -";
        }

        nav#menu-slide > main footer {
            grid-template-columns: repeat(2, 1fr);
            gap: 3vmax 0vmax;
            font-size: 1.25em;
            font-weight: 600;
        }

        nav#menu-slide {
            padding: 10vmax 0 15vmax;
        }

        nav#menu-slide > footer footer img {
            height: 4vmax;
        }

        nav#menu-slide > footer footer {
            gap: 10%;
        }

        main#visit-pop h7 {
            font-size: 2em;
            line-height: 1;
        }


        main#visit-pop a {
            margin: 0 3vmin 3vmin 0vmin;
            font-size: 1em;
        }
        section.horaire footer.flex-mc {
            gap: 1vmax;
            margin: 1vmax;
        }
        section.horaire p {
            margin: 0;
            font-size: 1em;
            font-weight: 500;
        }
        main#visit-pop section {
            margin: 1vmax 0 0;
            padding: 1vmax;
        }

        form#search button {
            font-size: 1.05em;
            padding: 1rem 3rem;
        }

        form#search input {
            padding: 2.25vmax;
            font-size: 1.0em;
        }

        nav#header-search {
            padding: 10vmax 0 0;
        }

        h3.cefojy-title {
            font-size: 3.5em;
        }

        section#cefojy-hero > aside main footer img {
            height: 2.5vmax;
        }

        section#cefojy-hero > aside main footer a {
            font-size: .85em;
            padding: 2.5vmax;
        }

        section#cefojy-hero > form {
            width: 80%;
        }

        *[id*="-form"][class*="-form"] input, *[id*="-form"][class*="-form"] select, *[id*="-form"][class*="-form"] textarea {
            padding: 5vmin 4vmin;
            margin-top: 2vmin;
        }

        section#cefojy-hero > aside main,
        section#cefojy-hero > aside main#cefojy-info {
            width: 100%;
        }

        section#cefojy-hero > aside main > img,
        section#cefojy-hero > aside main > img#cefojy-logo {
            position: relative;
            transform: translate(0%, 0%);
        }

    }
}


.off {
    display: none !important;
}