/**
 * Theme Name:        ATYPYK
 * Description:       Thème classique one-page ATYPYK Running Club (vues data-view, runs, boutique, paiements Wave / Orange Money).
 * Version:           1.0.0
 * Author:            Manda Richard
 * Text Domain:       atypyk
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

:root{
    --black: #0c0c0c;
    --white: #FFFFFF;
    --accent: #EF4823;
    --contour: 2pt;
}

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

::placeholder {
    opacity: .45;
    font-style: italic;
}

@font-face {
    font-family: 'title';
    src: url(font/akira-expanded.otf);
}

.talc {
    text-align: center;
}

img.fill {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

img.fit {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.float  {
    position: absolute;
}

.no {
    display: none !important;
}

ul {
    padding: 0;
    list-style: none;
}


h1, h2, h3, h4, h7 {
    font-family: 'title';
    font-weight: 800;
}

h1, h2, h3, h4, h5, h6, h7 {
    font-weight: 100;
    margin: 0;
    line-height: .9;
}
h1 {
    font-size: 7em;
    margin: 0.15em 0 0;
}
h2 {
    font-size: 4em;
    line-height: 1;
}

h2 span {
    display: block;
    font-size: 62.5%;
}

h3 {
    font-size: 3em;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: xx-large;
    margin: 0 0 1vmax;
}

h6 {
    font-size: 1.25em;
    font-weight: 600;
    margin: 0.25em 0 0;
}

h7 {
    font-weight: 800;
    font-size: large;
}

p {
    line-height: 1.35;
    font-size: .9em;
}

a {
    text-decoration: none;
}

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

.flex-col {
    flex-direction: column;
}

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

.all-cen {
    align-items: center;
    justify-content: center;
}

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

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

.a-nor {
    align-items: normal;
}

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

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

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


/*  Grid Parametres  */

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

.v-col {
    grid-template-columns: repeat(5, 1fr);
}

.iv-col {
    grid-template-columns: repeat(4, 1fr);
}

.iii-col {
    grid-template-columns: repeat(3, 1fr);
}

.ii-col {
    grid-template-columns: repeat(2, 1fr);
}

.span-all {
    grid-column: 1 / -1;
}
.span-ii {
    grid-column: span 2;
}
.span-iii {
    grid-column: span 3;
}
.span-iv {
    grid-column: span 4;
}
.span-v {
    grid-column: span 5;
}
.span-vi {
    grid-column: span 6;
}


button {
    cursor: pointer;
    border:none;
}

.gpone {
    gap: 1vmax;
}

.gptwo {
    gap: 2vmax;
}

.gpthree {
    gap: 4vmax;
}

.gpfour {
    gap: 7vmax;
}


.bg-blk {
    background: var(--black);
    color: var(--white);
    border: solid var(--contour) var(--black);
}
a.bg-blk:hover,
a.bg-blk:focus,
button.bg-blk:focus,
button.bg-blk:hover {
    background: var(--accent);
    color: var(--black);
    border: solid var(--contour) var(--accent);
}

.bg-wh {
    background: var(--white);
    color: var(--black);
    border: solid var(--contour) var(--white);
}
a.bg-wh:hover,
a.bg-wh:focus,
button.bg-wh:focus,
button.bg-wh:hover {
    background: var(--black);
    color: var(--white);
    border: solid var(--contour) var(--black);
}

.bg-acc {
    background: var(--accent);
    color: var(--white);
    border: solid var(--contour) var(--accent);
}
a.bg-acc:hover,
a.bg-acc:focus,
button.bg-acc:focus,
button.bg-acc:hover {
    background: var(--black);
    border: solid var(--contour) var(--black);
}

.bg-off {
    background: #d9d9d9;
    color: var(--black);
    border: solid var(--contour) #d9d9d9;
}
button.bg-off:hover {
    background: var(--light-green);
    color: var(--white);
    border: solid var(--contour) var(--light-green);
}


.cl-blk {
    color: var(--black);
}
.cl-wh {
    color: var(--white);
}
.cl-acc {
    color: var(--accent);
}

*[class*="-sh"] {
    box-shadow: 0.25vmin .35vmin .75vmin rgba(0 0 0 / .15);
}

*[class^="butt-link"] {
    width: fit-content;
    white-space: nowrap;
    border-radius: 50em;
    font-weight: 600;
    font-size: smaller;
    text-transform: capitalize;
    padding: 1.25vmin 1.5vmax;
    display: inline-flex;
    gap: 1em;
}

.butt-link-main {
    border-radius: .5em;
    font-size: small;
    padding: .75vmin 1vmax;
}

a[class*="bord"],
button[class*="bord"] {
    color: var(--dark);
    background: transparent;
    border: solid var(--contour);
    font-weight: 700;
}
*[class*="bord-wh"] {
    color: var(--white);
}

a[class*="bord"]:hover,
a[class*="bord"]:focus,
button[class*="bord"]:hover,
button[class*="bord"]:focus {
    color: var(--accent);
}

*[class^="butt-link"] img {
    height: 1em;
    align-self: center;
}

/*      Font Sizes      */


footer#footer nav button,
footer#footer header div aside p,
.font-l,
footer#footer header form input {
    font-size: large;
}



.font-xxxl {
    font-size: 3rem;
    font-size: xxx-large;
}

.font-xxl,
a[class*="article-title"] {
    font-size: xx-large;
}

.font-xl  {
    font-size: x-large;
}

.font-m,
header#header nav#header-menu div,
footer#footer header div form button,
section#header-CTA button {
    font-size : medium;
}

.font-sm {
    font-size: smaller;
}

.font-ss {
    font-size: small;
}



html body {
    font-family: 'poppins', 'arial', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: var(--black);
}

.cont-wide {
    width: 90%;
    margin: 10vh auto;
}

.cont-mi {
    width: 80%;
    margin: 10vh auto;
}

.cont-si {
    width: 70%;
    margin: 10vh auto;
}

.cont-med {
    width: 60%;
    margin: 10vh auto;
}





header#header {
    margin: 3em 0 2em;
    width: 90%;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

header#header > a#home img {
    height: 4.5vh;
}

header#header > nav {
    padding: .7em .7em .7em 3em;
}

header#header > nav a {
    font-size: smaller;
    font-weight: 500;
}
section#emissions article:nth-child(2) > aside hr {
    width: 50%;
    margin: 0;
    border: dashed var(--white) 1pt;
    height: 0;
}



/* 1. White State (Used on dark backgrounds) */
#header.header-white {
  --nav-text-color: #ffffff;
  --display-logo-white: block;
  --display-logo-black: none;
}

/* 2. Black State (Used on light/white backgrounds) */
#header.header-black {
  --nav-text-color: #111111;
  --display-logo-white: none;
  --display-logo-black: block;
}

/* Logo toggling */
#header .logo-white {
  display: var(--display-logo-white);
}

#header .logo-black {
  display: var(--display-logo-black);
}

/* Nav links color transition */
#header .nav-links a {
  color: var(--nav-text-color);
  transition: color 0.25s ease;
  cursor: pointer;
}



/**************/


section#splash {
    height: 100dvh;
    overflow: hidden;
    display: block;
}
section#splash > div:after {
    z-index: 2;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    content: '';
    background: linear-gradient(0deg, black 20%, transparent 50%, transparent 70%, black);
    position: absolute;
    opacity: 75%;
}
section#splash > div {
    height: 100%;
    z-index: 1;
}
section#splash > footer img {
    height: 1.25em;
}
section#splash > footer {
    position: absolute;
    right: 5%;
    bottom: 8%;
    z-index: 9;
    filter: invert(1);
}

section#splash span {
    background: var(--white);
}
section#splash main > p {
    width: 50%;
    margin: 0;
}
section#splash main {
    position: absolute;
    z-index: 3;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}


/***********************/

section#contact div.bg:after {
    background: linear-gradient(-90deg, black 50%, transparent);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    content: '';
}

section#contact div.bg {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 1;
}

section#contact {
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: end;
}


section#contact form button img {
    height: 1.25em;
}
section#contact form label {
    font-size: small;
    font-weight: 400;
}
section#contact form input, 
section#contact form textarea {
    padding: 1em;
    font-size: 1em;
    color: var(--white);
    background: transparent;
    border: none;
    border-bottom: solid 1pt;
    resize: none;
    width: 100%;
}
section#contact form textarea {
    height: 15em;
}
section#contact form button {
    aspect-ratio: 1;
    height: 6em;
    display: block;
    border-radius: 50%;
    line-height: .05;
}
section#contact form div div {
    width: 100%;
}
section#contact form div:last-child div:last-child {
    width: fit-content;
    padding: 2em 3em 0;
}
section#contact form header {
    width: 100%;
    margin: 0 0 6em;
}
section#contact form {
    z-index: 5;
    width: 50%;
    margin: 15% 5% 10%;
}


/*******************/


section#run {
    padding: 10% 5%;
}
section#run > main header {
    gap: 0;
}
section#run > main h2 {
    white-space: nowrap;
}
section#run > main h6 {
    font-style: italic;
    font-weight: 900;
    font-size: 1.65em;
    margin: 0.5em 0 1.5em;
}
section#run > main header nav {
    align-items: center;
    gap: .75em;
    margin: 0 0 1.5em;
}
section#run > main header nav i, section#run > main header nav p {
    border-radius: 5em;
    white-space: nowrap;
}
section#run > main header nav i {
    font-weight: 800;
    padding: 0.5em 1.5em;
    height: fit-content;
}
section#run > main header nav p {
    color: var(--white);
    background: #3d3d3d;
    padding: .5em 1.5em;
    font-size: small;
}
section#run > main hr {
    width: 50%;
    border: none;
    border-top: dashed 1pt;
    justify-self: start;
    margin: 0 0;
}
section#run > main ul.info li {
    align-items: center;
    padding: 0 0 1.0em;
    border-bottom: solid .5pt;
    margin: 0 0 1em;
}
section#run > main ul.info li div {
    display: flex;
    gap: 1em;
    align-items: center;
}
section#run > main ul.info li a {
    color: var(--white);
    border-bottom: dashed .5pt;
    padding: 0 .5em .5em;
    font-size: .8em;
    opacity: 35%;
    display: flex;
    align-items: center;
    gap: 2em;
    margin: 0 1.5em 0 0;
}
section#run > main ul.info li div img {
    width: 1.5em;
}
section#run > main ul.info li a:hover {
    gap: 1.5em;
    opacity: 1;
}
section#run aside div.bg:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(90deg, #0c0c0c 10%, transparent 70%);
}
section#run aside div.bg-wh img {
    height: 5vh;
}
section#run aside div.bg-wh {
    position: absolute;
    z-index: 9;
    right: -1%;
    top: 50%;
    transform: translateY(-50%);
    padding: 1em 2em;
    border-radius: .5em;
}



/********************/



section#running {
    aspect-ratio: .85;
    padding-top: 15vmin;
}
section#running > article > img {
    filter: grayscale(1);
}
section#running > article:hover img {
    filter: grayscale(0);
}
section#running > article main {
    padding: 2em;
    width: 100%;
    color: var(--white);
    z-index: 5;
}
section#running > article {
    justify-content: end;
    align-items: center;
    overflow: hidden;
    border-radius: 1em;
}
section#running > article:after {
    content: '';
    z-index: 4;
    background: linear-gradient(0deg, black, transparent 70%);
    position: absolute;
    height: 100%;
    opacity: .85;
    width: 100%;
}
section#running > article ul {
    padding: 0;
}
section#running > article li img {
    width: 1em;
}
section#running > article li p {
    margin: 0.25em 0;
}
section#running article main > div p {
    font-size: 1.75em;
    margin: 0;
    font-weight: 900;
    font-style: italic;
}
section#running a.butt-link.bg-acc {
    height: fit-content;
    align-self: center;
}
section#running a.butt-link.bg-wh {
    padding: 0 1.5em;
}
section#running a.butt-link.bg-wh img {
    height: 2em;
}
section#running > article h5 {
    font-style: italic;
    font-weight: 900;
    line-height: 1;
}

 /*****************/

 
section#meet {
    padding: 15em 5em 10em;
}
section#meet h1 {
    text-align: center;
    color: #aaa;
    z-index: 1;
    display: block;
}
section#meet:after {
    content: '';
    position: absolute;
    height: 29%;
    width: 100%;
    background: linear-gradient(0deg, white, transparent 25%);
    z-index: 3;
    top: 0;
}
section#meet main {
    z-index: 5;
    margin: 10vh;
}
section#meet main article div {
    aspect-ratio: 3 / 5;
    border-radius: 1em;
    height: 50vh;
    box-shadow: 1vmin 1vmin 4vmin #0c0c0c33;
    overflow: hidden;
    flex-shrink: 0;
}
section#meet main article:first-child {
    flex-direction: row-reverse;
    text-align: right;
    transform: translateY(20%);
}
section#meet h7 {
    display: block;
    font-size: xx-large;
}
section#meet strong {
    text-transform: uppercase;
    color: #AAA;
    font-size: large;
}
section#meet main article:first-child div {
    rotate: -18deg;
}
section#meet main article:last-child div {
    rotate: 15deg;
}
section#meet article {
    align-items: center;
    gap: 4em;
}
section#meet aside footer {
    gap: 2em;
    display: inline-flex;
    width: fit-content;
}
section#meet aside footer img {
    height: 1.25em;
}
section#meet aside footer img:hover {
    opacity: .5;
}
section#meet p {
    font-size: smaller;
    margin: 3em 0 1em;
}

/*******************/


section#become {
    padding: 5em 5%;
}
section#become h1 {
    text-align: center;
    margin: 0 0 1.5em;
}
section#become main {
    display: flex;
    gap: 10%;
    width: 100%;
}
section#become main aside {
    width: 40%;
}
section#become main aside > footer div {
    display: flex;
    white-space: nowrap;
    gap: 1em;
    font-size: smaller;
    justify-content: end;
}
section#become main aside > footer div#rs {
    margin: 0 0 2em;
}
section#become main aside > footer div:not(#rs) a {
    background: var(--black);
    color: var(--white);
    padding: 1.5em 2.2em;
    border-radius: .5em;
}
section#become main aside > footer div a {
    display: flex;
    align-items: center;
    gap: 1em;
}
section#become main aside > footer div a img {
    height: 1.2em;
}
section#become main aside > div img {
    height: 2em;
    margin: 0 0 0 3em;
}
section#become main aside > div p {
    font-size: smaller;
    margin: 2em 0 5em;
}
section#become header {
    width: 60%;
}
section#become header div.bg-acc {
    position: absolute;
    top: 0;
    left: 0;
    width: 9em;
    aspect-ratio: 5 / 4;
    z-index: 2;
    border-radius: .5em;
}
section#become header div#player {
    z-index: 9;
    aspect-ratio: 16 / 9;
    border-radius: 0.5em;
    overflow: hidden;
    width: 90%;
    margin: 2.5em 0 0 5%;
}
section#become header div#play-butt {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    background: var(--white);
    aspect-ratio: 1;
    height: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
section#become header div#play-butt img {
    height: 1.75em;
    transform: translateX(7.5%);
}
section#become main aside > footer div#rs a {
    padding: 1em 1.5em;
    border-radius: 5em;
    border: solid 1pt;
    color: var(--black);
}


/*********************/


section#vision header > a {
    align-self: center;
}

section#vision p {
    max-width: 50vmax;
}
section#vision footer div {
    aspect-ratio: 3;
    width: 45%;
}
section#vision aside {
    width: 5em;
    align-items: center;
    justify-content: start;
    gap: 0em 3vmax;
    flex-grow: 1;
    margin: 0 4em 0 0;
}


/***********************/

section#partners header div div {
    aspect-ratio: 5;
    overflow: hidden;
}
section#partners header div article {
    margin: 5em 0;
}
section#partners footer {
    margin: 0 0 7em;
    gap: 4em;
    z-index: 9999999;
}


/*********************/



section#store {
    padding: 10em 7.5% 7em;
}
section#store article {
    padding: 1em 1em 1.5em;
    background: var(--white);
    color: var(--black);
    border-radius: 1em;
}
section#store article h6 {
    font-size: .8em;
}
section#store article footer h6 span {
    font-size: 210%;
    vertical-align: text-bottom;
}
section#store h5 {
    font-size: 2em;
    font-weight: 900;
    text-transform: uppercase;
    margin: 1.05em 0 0;
}
section#store p {
    margin: 0.5em 0 .75em;
    font-weight: 500;
    color: #888;
}
section#store article header {
    overflow: hidden;
    border-radius: 1em;
    aspect-ratio: 1;
}



footer#footer {
    padding: 10em 0;
}
footer#footer header nav img {
    height: 1.5em;
}
footer#footer header {
    margin: 0 0 2em;
}
div.place span {
    background: var(--black);
    display: block;
    aspect-ratio: 1;
    height: .5em;
    border-radius: 50%;
    width: fit-content;
}
div.place {
    display: flex;
    gap: 2em;
    align-items: center;
    background: #0c0c0c22;
    padding: 0.15em 2em 0;
    border-radius: 50em;
    font-size: small;
    width: fit-content;
}
main div.place {
    background: #ffffff22;
    padding: 0.15em 2em 0;
    color: var(--white);
    font-size: smaller;
}
footer#footer header a.footer-logo img {
    height: 12vh;
}
footer#footer footer {
    width: 60%;
    border-top: solid .25pt var(--black);
    padding-top: 3em;
}


@media screen and (max-width:1100px) and (orientation: landscape) {
    h2 {
    font-size: 2em;
}
*[class^="butt-link"] {
    font-size: small;
}
    section#creator-head section {
    margin: 0;
    gap: 1vmax;
    align-items: end;
}
section#creator-head section img {
    width: 50%;
    transform: translate(-20%, -5%);
}
h3 {
    font-size: 2em;
    text-transform: uppercase;
    line-height: 1;
}
section#creator-head section main {
    margin: 0vh 0em 0 0;
    transform: translateX(-15%);
}
.cont-mi-wide {
    width: 90%;
}
.iii-col {
    grid-template-columns: repeat(2, 1fr);
}
.iv-col {
    grid-template-columns: repeat(3, 1fr);
}
section#emissions article > aside p {
    margin: 0;
}

section#emissions article > aside div > p {
    font-size: .75em;
    max-height: 10vh;
    overflow: scroll;
}
h6 {
    font-size: 1.0em;
}
nav#controls {
    border-radius: 4em;
    padding: .5em 2em;
    background: #aaaaaa66;
}
section#emissions article:nth-child(2) {
    margin: 0 4em;
}
section#about-content main aside {
    aspect-ratio: 3 / 4;
}
section#emissions article:nth-child(2) > aside {
    max-width: 45vw;
    margin: 0 2em 0 3em;
}
}


/* Fake Loading Screen Styles */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff; /* Or #111111 depending on your brand */
  z-index: 9999; /* Ensure it covers the header (z-index 1000) */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Simple orange spinning loader */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid var(--accent); /* Uses your orange */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

footer#footer > nav a:not(.butt-link-main) {
    color: var(--black);
}
footer#footer > nav a:not(.butt-link-main):hover, 
header#header > nav a:not(.butt-link-main):hover {
    color: var(--accent) !important;
}
/* ===== Ajouts thème WordPress ===== */
.nav-links li, footer#footer > nav li { list-style: none; }
body.admin-bar header#header { top: 32px; }
.site-notice { position: fixed; z-index: 99999; left: 50%; bottom: 2em; transform: translateX(-50%); padding: 1em 2em; border-radius: .5em; font-weight: 600; max-width: 90vw; }
.menu-toggle { display: none; }

/* Modale de paiement / inscription */
dialog#pay-dialog { border: none; border-radius: 1em; padding: 2em; width: min(30em, 92vw); color: var(--black); }
dialog#pay-dialog::backdrop { background: rgba(12 12 12 / .7); }
dialog#pay-dialog h4 { margin: 0 0 .5em; }
dialog#pay-dialog form { display: flex; flex-direction: column; gap: 1em; }
dialog#pay-dialog label { font-size: small; display: flex; flex-direction: column; gap: .35em; }
dialog#pay-dialog input, dialog#pay-dialog select { padding: .8em; border: solid 1pt #ccc; border-radius: .5em; font-size: 1em; }
dialog#pay-dialog fieldset { border: none; padding: 0; margin: 0; display: flex; gap: 1em; flex-wrap: wrap; }
dialog#pay-dialog fieldset label { flex-direction: row; align-items: center; font-size: medium; }
dialog#pay-dialog .pay-amount { font-weight: 800; font-size: 1.4em; }
dialog#pay-dialog .pay-close { position: absolute; top: .5em; right: .75em; background: none; font-size: 1.5em; }
section#store article header { background: #d9d9d9; }
section#store article button { font-family: inherit; }
footer#footer > footer a { color: inherit; opacity: .7; }
footer#footer > footer a:hover { color: var(--accent); opacity: 1; }