/* ── Plain Text — CSS issu de text.plain-form.com/fr/plaintext ── */
/* Absolu depuis la racine du domaine : @import se résout par rapport à l'URL de
   la feuille, pas de la page. En relatif, l'import ne tenait que grâce à la règle
   de réécriture qui mappe /includes/ vers public/includes/ sur text.plain-form.com
   — et il échouait sur le domaine admin. */
@import url('/public/includes/variables.css');

@font-face {
    font-family: 'BasicallySans';
    src: url('/assets/fonts/BasicallySans-Regular.woff2') format('woff2');
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'BasicallySans';
    src: url('/assets/fonts/BasicallySans-Bold.woff2') format('woff2');
    font-weight: bold; font-style: normal;
}
@font-face {
    font-family: 'BasicallySans';
    src: url('/assets/fonts/BasicallySans-Italic.woff2') format('woff2');
    font-weight: normal; font-style: italic;
}
@font-face {
    font-family: 'BasicallySerif';
    src: url('/assets/fonts/BasicallySerif-Regular.woff2') format('woff2');
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'BasicallySerif';
    src: url('/assets/fonts/BasicallySerif-Italic.woff2') format('woff2');
    font-weight: normal; font-style: italic;
}
@font-face {
    font-family: 'BaskemoSans';
    src: url('/assets/fonts/BaskemoSans-Regular.woff2') format('woff2');
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'BaskemoSans';
    src: url('/assets/fonts/BaskemoSans-Italic.woff2') format('woff2');
    font-weight: normal; font-style: italic;
}
@font-face {
    font-family: 'ReadyLight';
    src: url('/assets/fonts/ReadyActive-Light.woff2') format('woff2');
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'PetitFrereWide';
    src: url('/assets/fonts/PetitFrereWide-Regular.otf') format('opentype');
    font-weight: normal; font-style: normal;
}

/* Variables spécifiques à plaintext */
:root {
    --fond:       #000000;
    --terne:      #eeeeee;
    --maelo:      #55E9A2;
    --last-color: #e25556;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    font-family: "BasicallySans", sans-serif;
    background-color: var(--fond);
    color: var(--terne);
    scroll-behavior: smooth;
    font-size: var(--fs-normal);
    margin: 0;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--maelo); }
a:focus, a:active,
button:focus, button:active { outline: none; -webkit-text-stroke: 0.8em var(--maelo); }

.typo-medium { font-size: 1.7em; }

.last-color { color: var(--last-color); }
.last-color-background {
    background: black;
    color: var(--last-color);
    border: 1px solid var(--last-color) !important;
}
.last-color-background:hover {
    color: var(--last-color) !important;
    border: 1px solid white !important;
}

/* ── Navigation (barre fixe en bas) ─────────────────────────── */
.liens {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    width: 100%;
    position: fixed;
    bottom: 0;
    font-family: "BaskemoSans", sans-serif;
    font-size: var(--fs-normal);
    text-transform: uppercase;
    z-index: 999;
}
.liens a { color: inherit; }
.liens a:hover { color: var(--maelo); }

/* ── Hero / section sticky ───────────────────────────────────── */
.top-infos {
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 665;
    pointer-events: none;
}
.top-infos-container {
    display: flex;
}
.top-infos-container .logo {
    width: 50%;
    position: relative;
    transition: .3s opacity;
    pointer-events: auto; /* intercepte la souris pour déclencher mouseleave sur les couvertures */
}
.top-infos-container .logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.grand { font-size: var(--fs-moyen); }
.presentationtexte { margin-top: .7em; }
.presentationtexte p { margin-bottom: 0; }

@keyframes pt-wave {
  0%, 100% { top: 0; }
  50%       { top: -0.25em; }
}
.preorder-wave-row {
    margin-top: 0.5em;
}
.preorder-wave-text,
.preorder-wave-text span {
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.top-infos-container .presentation {
    width: 50%;
    padding: 4em 4em 0 4em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: all;
}
.top-infos-container .presentation .boutton-dons { margin-bottom: 0; }
.top-infos .presentation p+p { text-indent: 1em !important; }

.pre-intro {
    font-family: "BaskemoSans", sans-serif;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
}

/* ── Boutons ─────────────────────────────────────────────────── */
.boutton-dons {
    border: 1px solid var(--terne);
    padding: .5em 1em .5em 1em;
    margin-right: .5em;
    margin-bottom: 2em;
    border-radius: .1em;
    display: inline-block;
    pointer-events: visible;
    margin-top: .85em;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    background: none;
    text-decoration: none;
}
.boutton-dons:hover { color: var(--maelo); }
.button-sad {
    opacity: .4;
    pointer-events: none;
    border-style: dashed;
    cursor: default;
}
.button-sad:hover { color: rgb(130, 0, 250); }
.read-online { margin-left: .5em !important; margin-right: .5em !important; }

.days-remaining {
    font-family: "BasicallySans", sans-serif;
    font-size: .6em;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--last-color);
    display: flex;
    justify-content: space-between;
    width: 21.5em;
    position: absolute;
    margin-top: .7em;
    align-items: start;
}

/* ── Sections numéros ────────────────────────────────────────── */
.numeros { position: relative; }

.numero {
    aspect-ratio: 2/1;
    display: flex;
}
.numero .couverture {
    width: 50%;
    min-width: 0;
    padding: 4em;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.numero .couverture img {
    position: relative;
    z-index: 666;
    transition: .3s opacity;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

/* Galerie */
.galerie-slick-slide-container-plaintext {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: .3s opacity;
    pointer-events: none;
}
.galerie-slick-slide-container-plaintext.cache-show { opacity: 1; }
.cache-hover { opacity: 0; pointer-events: none; }

/* Slides internes */
.galerie-slick {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.galerie-slick-slide {
    position: absolute;
    inset: 0;
    transition: opacity .3s;
}
.galerie-slick-slide-img {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Cover visible par défaut, galerie au hover */
.couverture { transition: background-color .3s; }
.couverture:hover { background-color: #000 !important; }
.couverture .galerie-slick-slide-container-plaintext { opacity: 0; transition: .3s opacity; }
.couverture:hover .galerie-slick-slide-container-plaintext { opacity: 1; }
.couverture img.imgcouverture { opacity: 1; transition: .3s opacity; }
.couverture:hover img.imgcouverture { opacity: 0; }

/* Flèches — fake-arrows = décoratives ET fonctionnelles (pointer-events sur les spans) */
.fake-arrows {
    display: flex; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9997;
}
.custom-slick-prev-fake {
    display: flex; align-items: center; justify-content: flex-start;
    width: 50%; height: 100%;
    padding: 0.05em .4em 0 .32em;
    color: var(--terne);
    font-family: "PetitFrereWide"; text-transform: uppercase;
    mix-blend-mode: difference; font-size: var(--fs-grand);
    pointer-events: all; cursor: pointer;
    user-select: none;
}
.custom-slick-next-fake {
    display: flex; align-items: center; justify-content: flex-end;
    width: 50%; height: 100%;
    padding: 0.05em .35em 0 .4em;
    color: var(--terne);
    font-family: "PetitFrereWide"; text-transform: uppercase;
    mix-blend-mode: difference; font-size: var(--fs-grand);
    pointer-events: all; cursor: pointer;
    user-select: none;
}

/* Bandeau new issue */
.bandeau-new-issue {
    position: absolute;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 2.5em 1em 2em 1em;
    width: 100%; left: 0; top: 0;
}
.new-issue-type {
    font-family: "BaskemoSans", sans-serif;
    font-style: italic;
    color: white;
    -webkit-text-stroke: 25px black;
    paint-order: stroke fill;
    text-transform: uppercase;
    font-size: var(--fs-moyen);
    z-index: 999;
}

/* Introduction (droite) */
.numero .introduction {
    width: 50%;
    min-width: 0;
    padding: 4em;
    height: 100%;
    background: #000000;
    color: var(--terne);
    border-top: 1px solid var(--fond);
    position: relative;
    z-index: 666;
    margin-bottom: 0;
}
.numero .introduction .top-introduction {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.numero .introduction .top-introduction .boutton-dons { margin: 0; }
.boutton-bottom-numero { text-align: right; }
.numero .introduction ul {
    list-style: none;
    padding: 0; margin-left: 0;
    line-height: 1.2;
    columns: 2;
    column-gap: 3em;
}
.numero .introduction li {
    margin-bottom: 1em;
    break-inside: avoid;
    font-size: var(--fs-normal);
}
.numero .introduction li em {
    font-family: "BasicallySerif";
    font-style: italic;
}
.numero .introduction li p {
    margin: .15em 0 0;
}

.baskemono { font-family: "BaskemoSans", sans-serif; font-size: var(--fs-normal); }
.introduction .baskemono { margin-bottom: 2em; }
.ligne { letter-spacing: -.2em; }

/* Responsive visibility */
.show-port { display: none; }
.hide-port { display: block; }
.bout-port { display: inline-block; }

/* ── Sections about / slides ─────────────────────────────────── */
.dons-home, .slide-home {
    width: 100%;
    background: #000000;
    color: var(--terne);
    position: relative;
    z-index: 888;
    display: flex;
    padding: 3rem 2rem;
}
.dons-home-container, .sponsors-home-container, .slide-home > * {
    width: 50%;
}
.about {
    width: 100%;
    background: #000000;
    color: var(--terne);
    position: relative;
    z-index: 888;
    padding: 3rem 2rem;
}
.dons-home-container h1, .about h1, .slide-home h1 {
    font-family: "ReadyLight";
    font-weight: normal;
    line-height: .8;
    font-size: var(--fs-geant);
    margin-top: 0;
    margin-bottom: 0;
}
.slide-home .center {
    text-align: center;
    padding: 0 4em;
}
.slide-home .right { text-align: right; }
.txt-right { text-align: right; }
.slide-home.slide-img {
    padding: 0;
    height: 80vh;
    background-color: black;
}
.slide-home.slide-img > div {
    width: 75vw; height: 100%;
    background-position: center -7em;
    background-size: 135%;
    margin-left: 25vw;
}
.slide-home.slide-img > div.left { margin-left: 0; }
.center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
}
.center .grand { font-size: var(--fs-moyen); max-width: 28em; }

/* ── Dons ────────────────────────────────────────────────────── */
.liste-logos { display: flex; flex-wrap: wrap; gap: 2em; align-items: center; }
.logosponsors { margin-right: 2em; display: inline-block; margin-bottom: 1.5em; }
.logosponsors img { display: block; filter: brightness(0) invert(1); opacity: .7; transition: opacity .15s; }
.logosponsors:hover img { opacity: 1; }
.dons-home p { text-indent: 0 !important; }

/* popup preorder — CSS dans public/includes/preorder-popup.php */

/* ── Menu overlay mobile ─────────────────────────────────────── */
.pt-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--fond);
    border-top: 1px solid white;
    z-index: 9999;
    align-items: center;
    justify-content: space-between;
    padding: 0 1em;
    height: 2.4em;
}
.pt-bottom-home {
    font-family: "BaskemoSans", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
    color: white;
    text-decoration: none;
}
.pt-bottom-home:hover { color: white; }
.menu-trigger {
    background: none;
    border: none;
    font-family: "BaskemoSans", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
    color: white;
    cursor: pointer;
    padding: 0;
}

.menu-overlay {
    display: flex; /* toujours flex, caché par visibility + pointer-events */
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    inset: 0;
    background: var(--fond);
    z-index: 9998; /* juste sous le trigger */
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2rem 2rem 5rem;
    gap: 0.2em;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.25, 0, 0.1, 1), visibility 0.32s;
}
.menu-overlay.open {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.menu-overlay > a {
    font-family: "BaskemoSans", sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--terne);
    display: block;
    line-height: 0.95;
}
.menu-overlay > a:hover { color: var(--maelo); }

.menu-overlay-close {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    background: none; border: none;
    color: var(--terne);
    font-family: "BasicallySans", sans-serif;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.menu-overlay-close:hover { color: var(--maelo); }

.menu-overlay-lang {
    display: flex;
    gap: 0.4em;
    align-items: center;
    margin-top: 1.5em;
}
.menu-overlay-lang a {
    font-family: "BaskemoSans", sans-serif;
    font-size: 2.5rem !important;
    letter-spacing: 0.07em;
    color: var(--terne);
    display: inline-block !important;
    line-height: 1.45;
}
.menu-overlay-lang .lang-sep { opacity: 0.3; font-size: 2.5rem; font-family: "BasicallySans", sans-serif; }

/* ── Footer ──────────────────────────────────────────────────── */
.shop-footer {
    position: relative;
    z-index: 1000;
    background: var(--fond);
    border-top: 1px solid white;
    padding: 32px 0 48px;
    font-size: var(--fs-petit);
    color: white;
}
.shop-footer-inner {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.shop-footer-inner > div:nth-child(2) { width: 25em; flex-shrink: 0; }
.shop-footer h3 {
    font-size: var(--fs-petit);
    font-weight: normal;
    margin: 0 0 12px;
    color: white;
}
.shop-footer a { color: white; display: block; margin-bottom: 4px; }
.shop-footer a:hover { color: white; }
@media (max-width: 768px) { .shop-footer-inner { flex-wrap: wrap; } .shop-footer-inner > div { flex: 1 1 40%; } }
@media (max-width: 560px) {
    .shop-footer { border-top: none; padding-bottom: 15px; font-size: var(--fs-normal); }
    .shop-footer h3 { font-size: inherit; }
    .shop-footer-inner { width: 90%; border-top: 1px solid white; padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex-direction: unset; }
    .shop-footer-inner > div:nth-child(1),
    .shop-footer-inner > div:nth-child(2) { grid-column: 1 / -1; }
    .shop-footer-inner > div:nth-child(2) { width: auto; flex-shrink: unset; }
}

/* ── Responsive tablette + mobile (≤ 63.9375em = ~1023px) ─────── */
@media screen and (max-width: 63.9375em) {
    body { padding: 0; }
    .top-infos-container { flex-direction: column; }
    .top-infos-container .presentation { width: 100%; padding: 1em; }
    .top-infos-container .logo { width: 100%; }
    .numero { flex-direction: column; height: auto; aspect-ratio: unset; }
    .numero .couverture { width: 100%; padding: 4em 2em; height: auto; }
    .numero .introduction { width: 100%; padding: 2rem; height: auto; }
    .numero .introduction ul { column-gap: 2em; }
    /* Corrige le bug tablette : desktop laisse width:75vw + margin-left:25vw sans override */
    .slide-home.slide-img > div { width: 100%; margin-left: 0; background-size: 200%; }
    .liens { display: block; background: var(--terne); columns: 2; }
    .liens a { display: block; }
    .dons-home { padding: 2rem; flex-direction: column; }
    .slide-home { flex-direction: column; padding: 2rem; }
    .slide-home > * { width: 100%; }
    .dons-home-container, .sponsors-home-container { width: 100%; }
    .show-port { display: block; }
    .hide-port { display: none; }
    .bout-port { display: block; text-align: center; }
    .boutton-dons { padding: .9em 1em .8em 1em; }
    .presentation .boutton-dons { margin-top: 1.2em; }
    ul { margin-left: 0; }
    .slide-home .center { padding: 0; }
    .dons-home-container h1, .about h1, .slide-home h1 { font-size: 6rem; }
    .liste-logos { text-align: center; }
    .logosponsors { margin-right: 0; margin-bottom: 2.5em; display: block; }
    .new-issue-type { text-align: center; font-size: 1.25rem; }
    .custom-slick-prev-fake, .custom-slick-next-fake { font-size: 3.5rem; }
    .new-issue-preorder {
        position: absolute;
        bottom: 2em; left: 0; right: 0;
        text-align: center;
        pointer-events: none;
    }
}

/* ── Tablette portrait uniquement (40em–63.9375em) ─────────────── */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    /* Nav : 2 colonnes lisibles */
    .liens { font-size: 1.1rem; padding: 1rem; }

    /* Numéros : couverture un peu moins haute */
    .numero .couverture { padding: 2em; }

    /* Titres h1 : taille intermédiaire entre desktop et mobile */
    .dons-home-container h1, .about h1, .slide-home h1 { font-size: 5rem; }

    /* Footer */
    .shop-footer-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        width: 90%;
    }
    .shop-footer-inner > div:nth-child(1),
    .shop-footer-inner > div:nth-child(2) { grid-column: 1 / -1; }
    .shop-footer-inner > div:nth-child(2) { width: auto; }
    .shop-footer { font-size: var(--fs-normal); border-top: none; }
    .shop-footer-inner { border-top: 1px solid white; padding-top: 32px; }

    /* Dons/sponsors : largeur confortable */
    .dons-home-container, .sponsors-home-container { width: 90%; margin: 0 auto; }
}

/* ── Mobile uniquement (≤ 40em = ~640px) ─────────────────────── */
@media screen and (max-width: 40em) {
    body { font-size: 1.3em; }

    /* Variables ajustées pour mobile */
    :root {
        --fs-normal: 1.1rem;
        --fs-moyen:  1.25rem;
        --fs-grand:  2.8rem;
    }
    /* Tailles explicites (ne pas compter uniquement sur la cascade des custom properties) */
    .grand                   { font-size: 1.25rem; }
    .baskemono, .pre-intro   { font-size: 1.1rem; }
    .numero .introduction li { font-size: 1.1rem; }
    .numero .introduction ul { column-gap: .5em; }

    /* Titres ReadyLight : 6rem → 4rem (÷ 1.5) */
    .dons-home-container h1, .about h1, .slide-home h1 { font-size: 4rem; }

    /* top-introduction : colonne, bouton remonté avant les infos baskemono */
    .numero .introduction .top-introduction {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8em;
    }
/* Boutons : plus petits et pleine largeur */
    .boutton-dons {
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        font-size: 1.1rem;
        margin-right: 0;
        margin-left: 0;
    }

    /* Rangée préco : empile verticalement pour pleine ligne */
    .preorder-wave-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6em !important;
    }
    .preorder-wave-text { display: block; text-align: center; }

    /* Images "about" */
    .slide-home.slide-img > div { background-size: 335%; }

    .introduction .baskemono { margin-bottom: 0.1em; }
    .read-online { margin-left: 0 !important; margin-right: 0 !important; margin-top: 0.5em !important; }

    /* Nav fixe remplacée par le trigger menu */
    .liens { display: none !important; }
    .pt-bottom-bar { display: flex; }

    /* Construction BaskemoSans : ajustement des marges inline sur mobile */
    .pre-intro.baskemono p span:first-of-type  { margin-left: 2em  !important; } /* (English+French) / (Anglais+Français) */
    .pre-intro.baskemono p span:nth-of-type(5) { margin-left: 9em  !important; } /* dernier \ */
    .pre-intro.baskemono p span:last-of-type   { margin-left: 6em  !important; } /* (by Plain Form) / (par Plain Form) */

    /* Misc */
    .plaintext-lang a { display: inline-block; }
    /* Les règles du pop-up de précommande ont été retirées d'ici : elles ne
       doivent pas différer d'un front à l'autre. Sa mise en page mobile vit
       dans public/includes/preorder-popup.php, avec le reste du pop-up. Il y
       avait un titre agrandi à 5,5rem — la seule règle qui changeait vraiment
       quelque chose — la règle de contenu, déjà présente à l'identique dans le
       bloc mobile partagé, et trois sélecteurs qui ne correspondent plus à rien
       (.pop-up-choice-buy-column, -columns, .pop-up-description-price). */

    /* Bouton menu : supprimer le gimmick focus (on le garde sur les autres éléments) */
    .menu-trigger:focus, .menu-trigger:active { -webkit-text-stroke: 0; }

    /* Via HelloAsso : coller directement sous le bouton don */
    .sponsors-home-container .boutton-dons + span { display: block; margin-top: 0; }
    .sponsors-home-container .boutton-dons { margin-bottom: 0.5em; }

    /* Logos sponsors : un par ligne, centrés — marge top du premier = gap entre logos */
    .liste-logos { flex-direction: column; align-items: center; }
    .liste-logos .logosponsors:first-child { margin-top: 2em; }

    /* Espace pour la barre fixe du bas */
    body { padding-bottom: 3em; }
}