/**
 * shell.css
 * =============================================================================
 * Universal shell styles — loaded on EVERY page via page_header-v3.php.
 * Covers: font, body base, header, nav, account buttons, footer.
 *
 * Rules here must be safe for ALL pages (validation, my-account, bench, etc.)
 * No page-specific font sizes. No content layout rules.
 *
 * Variables defined here are shell-only:
 *   --content_width, --nav_purple, --account_purple, --nav_title, --account_text
 *
 * Content variables (--text, --grid_title, --highlight) live in each page's
 * own CSS so they can't bleed across pages.
 * =============================================================================
 */

/* ── Font ──────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'raleway-regular';
    src: url('../fonts/raleway-regular.eot');
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular.woff') format('woff'),
         url('../fonts/raleway-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ── Shell variables ───────────────────────────────────────────────────────── */
:root {
    --content_width       : 1230px;

    /* Colours */
    --nav_purple          : #a62393;
    --purple_text         : #df31c6;
    --account_purple      : #921984;
    --account_purple_hover: #801674;
    --highlight_color     : #ec32d2;

    /* Nav/header text — px-based, independent of body font-size */
    --nav_title           : clamp(12px, 1.6vw, 15px);
    --account_text        : clamp(11px, 1.2vw, 13px);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
    margin: 0;
    background-color: #212121;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
}

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

.hide {
    display: none;
}

/* Headings — px-based so they're independent of any font-size base trick.
   globals-min.css loads after shell.css on non-validation pages and can
   override these with its em values (which work correctly at 62.5% base).
   On validation/shell-only pages these px values are the sole heading rules. */
h1, h2, h3, h4, h5, h6 {
    font-family: 'raleway-regular', Arial, sans-serif;
}
h1 { font-size: clamp(18px, 3.8vw, 23px); }
h2 { font-size: clamp(16px, 2.5vw, 20px); }
h3 { font-size: clamp(12px, 2vw, 16px);   }
h4 { font-size: clamp(14px, 2.5vw, 18px); }
h5 { font-size: clamp(13px, 2vw, 16px);   }
h6 { font-size: clamp(11px, 1.5vw, 14px); }

/* ── Layout helpers (used across pages) ────────────────────────────────────── */
.fullwidth {
    width: 100%;
}

.mobile_advert {
    display: flex;
    justify-content: center;
}

/* Override globals-min.css 123em fixed-width wrapper for pages that use it */
body > section .main-wrapper {
    width: min(var(--content_width), 100%) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.header {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    background-image: url("/medias/images/desktop-header.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.header_logo,
.header_navbar {
    display: flex;
}

.header_logo {
    width: min(var(--content_width), 100%);
    min-height: 8vh;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.header_logo a {
    min-height: 8vh;
    padding-inline-start: 2%;
    padding-inline-end: 2%;
    display: flex;
    align-items: center;
}

.header_logo a img {
    height: 5vh;
    width: auto;
}

.header_navbar {
    width: 100%;
    background-color: var(--nav_purple);
    display: flex;
    justify-content: center;
}

.advert_block {
    width: fit-content;
}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.nav {
    width: 100%;
    max-width: var(--content_width);
    padding: 0 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4vh;
}

.menu ul {
    display: flex;
    list-style: none;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

.menu ul li {
    height: 4vh;
    display: flex;
    align-items: center;
    padding: 0 0.75em;
    justify-content: center;
}

.menu ul li a {
    color: white;
    text-decoration: none;
    font-size: var(--nav_title);
    font-weight: 400;
    font-family: raleway-regular;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu ul li:hover,
.menu ul li.active {
    background-color: var(--account_purple_hover);
}

/* ── Burger ────────────────────────────────────────────────────────────────── */
.burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
}

.burger span {
    display: block;
    height: 3px;
    background-color: white;
    border-radius: 2px;
}

/* ── Account buttons (nav header — all pages) ──────────────────────────────── */
#account {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

/* PHP-rendered states */
#account_unlogged,
#account_logged {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2em;
    height: 4vh;
}

.create_account, .login, .my_account, .logout {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1em;
    background-color: var(--account_purple);
}

.create_account:hover, .login:hover, .my_account:hover, .logout:hover {
    background-color: var(--account_purple_hover);
}

.create_account a, .login a, .my_account a, .logout a {
    display: flex;
    align-items: center;
    gap: 1em;
    color: white;
    text-decoration: none;
    font-size: var(--account_text);
    font-weight: 300;
    height: 100%;
}

.account_icon {
    width: 20px;
    height: 20px;
}

#account_logged .logout img {
    transform: rotate(180deg);
}

/* JS-injected states (logout.php / update-content.php use double-underscore ids) */
#account__logged,
#account__unlogged {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2em;
    height: 4vh;
}

#account__logged > div,
#account__unlogged > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1em;
    background-color: var(--account_purple);
}

#account__logged > div:hover,
#account__unlogged > div:hover {
    background-color: var(--account_purple_hover);
}

#account__logged > div a,
#account__unlogged > div a {
    display: flex;
    align-items: center;
    gap: 1em;
    color: white;
    text-decoration: none;
    font-size: var(--account_text);
    font-weight: 300;
    height: 100%;
    cursor: pointer;
}

/* Icons via pseudo-elements (JS-injected HTML has no <img> tags) */
#account__logged > div:first-child a::before,
#account__unlogged > div:first-child a::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('/medias/images/icon-account.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

#account__logged > div:last-child a::before,
#account__unlogged > div:last-child a::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('/medias/images/icon-login.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

#account__logged > div:last-child a::before {
    transform: rotate(180deg);
}

/* ── Responsive — nav ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    nav {
        padding: 0;
    }

    #account span {
        display: none;
    }
}

@media (max-width: 768px) {
    .burger {
        display: flex;
        width: 20px;
    }

    .menu {
        display: none;
        position: absolute;
        top: 11vh;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: var(--nav_purple);
        z-index: 1000;
    }

    .menu ul {
        flex-direction: column;
        gap: 0;
    }

    .menu li {
        padding: 0 0.75em;
    }

    .menu.active {
        display: flex;
    }

    #account span {
        display: block;
    }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer {
    width: 100%;
    background: none;
    position: relative;
}

.footer_wrapper {
    width: min(var(--content_width), 100%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.sitemap_wrapper,
.linksite {
    position: relative;
    z-index: 1;
    padding: 2rem;
}

.sitemap_wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: -9999px;
    width: 9999px;
    height: 100%;
    background-color: #141414;
    z-index: -1;
}

.linksite::after {
    content: "";
    position: absolute;
    top: 0;
    right: -9999px;
    width: 9999px;
    height: 100%;
    background-color: #191919;
    z-index: -1;
}

.sitemap_wrapper {
    display: flex;
    flex-direction: column;
    width: 35%;
    padding: 0.4em 2%;
    background-color: #141414;
    box-sizing: border-box;
}

.linksite {
    width: 65%;
    background-color: #191919;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.legal {
    position: relative;
    justify-self: center;
    width: min(var(--content_width), 100%);
    background-color: #0f0f0f;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.4em;
}

.legal::before {
    content: "";
    position: absolute;
    top: 0;
    left: -9999px;
    width: 9999px;
    height: 100%;
    background-color: #0f0f0f;
    z-index: -1;
}

.legal::after {
    content: "";
    position: absolute;
    top: 0;
    right: -9999px;
    width: 9999px;
    height: 100%;
    background-color: #0f0f0f;
    z-index: -1;
}

.legal_text {
    text-transform: uppercase;
    font-size: var(--account_text);
    color: #414141;
}

.privacy_policy {
    text-transform: uppercase;
    font-size: var(--account_text);
    color: #fff;
}

.canard_pc {
    width: 60%;
}

.cpuid {
    width: 43%;
}

.sitemap {
    color: #fff;
}

.sitemap h6 {
    position: relative;
}

.sitemap h6::before {
    content: '';
    display: inline-block;
    background: #fff url('../images/icon-compass.svg') no-repeat;
    width: 2em;
    height: 2em;
    background-size: auto 100%;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 0.6em;
}

.footer_menu {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.footer_menu ul {
    width: 50%;
    margin: 0;
    padding-left: 0;
}

.footer_menu li {
    list-style: none;
    color: #fff;
    font-size: var(--account_text);
    padding-block-end: 0.6em;
    padding-block-start: 0.6em;
    border-bottom: 1px dotted #3e3e3e;
}

/* ── Responsive — footer ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .footer_wrapper {
        flex-direction: column;
    }

    .sitemap_wrapper {
        width: 100%;
    }

    .linksite {
        width: 100%;
        justify-content: space-between;
    }
}