/* ============================================================
   css/global.css
   Thème "dark fantasy" + base RESPONSIVE (mobile-first).
   Toutes les media queries élargissent vers le PC.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    --bg:          #15101f;
    --bg-2:        #1f1730;
    --panel:       #271d3a;
    --panel-light: #34284d;
    --ink:         #ece6f5;
    --ink-soft:    #b3a8c9;
    --accent:      #d9a441;   /* or */
    --accent-2:    #8b5cf6;   /* violet */
    --danger:      #e2566b;
    --success:     #57c08a;
    --radius:      14px;
    --shadow:      0 10px 30px rgba(0,0,0,.45);
    --maxw:        1200px;

    --font-title: 'Cinzel', Georgia, serif;
    --font-body:  'Spectral', Georgia, serif;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(139,92,246,.18), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(217,164,65,.10), transparent 55%),
        var(--bg);
    display: flex;
    flex-direction: column;
}

h1, h2, h3 { font-family: var(--font-title); letter-spacing: .5px; }

/* ---------- Barre de navigation ---------------------------- */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(31,23,48,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(217,164,65,.25);
}
.topbar__inner {
    max-width: var(--maxw); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem 1rem; gap: 1rem;
}
.brand {
    font-family: var(--font-title); font-weight: 700;
    font-size: 1.4rem; color: var(--accent);
    text-shadow: 0 0 12px rgba(217,164,65,.4);
}

/* Burger (mobile) */
.nav-burger { display: flex; flex-direction: column; gap: 5px; padding: 6px; }
.nav-burger span {
    width: 26px; height: 3px; border-radius: 3px;
    background: var(--ink); transition: .3s;
}
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menu : empilé en plein écran sur mobile */
.mainnav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--panel);
    flex-direction: column;
    display: none;
    padding: .5rem 1rem 1rem;
    border-bottom: 1px solid rgba(217,164,65,.25);
}
.nav-toggle:checked ~ .mainnav { display: flex; }
.mainnav a {
    padding: .85rem .5rem; border-radius: 8px;
    color: var(--ink-soft); font-size: 1.05rem;
}
.mainnav a:hover { color: var(--ink); background: var(--panel-light); }
.nav-logout { color: var(--accent) !important; }

/* ---------- Contenu / layout ------------------------------- */
.content {
    flex: 1;
    width: 100%; max-width: var(--maxw);
    margin: 0 auto; padding: 1.25rem 1rem;
}

/* ---------- Boutons / alertes ------------------------------ */
.btn {
    display: inline-block; text-align: center;
    padding: .8rem 1.2rem; border-radius: 10px;
    font-family: var(--font-title); font-weight: 600;
    transition: transform .12s, box-shadow .2s;
}
.btn--primary {
    background: linear-gradient(135deg, var(--accent), #b8862f);
    color: #2a1c05; box-shadow: 0 6px 18px rgba(217,164,65,.35);
}
.btn--primary:hover { transform: translateY(-2px); }
.alert { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; }
.alert--error   { background: rgba(226,86,107,.15); border: 1px solid var(--danger); }
.alert--success { background: rgba(87,192,138,.15); border: 1px solid var(--success); }

/* ---------- Authentification ------------------------------- */
.auth {
    max-width: 420px; margin: 2rem auto;
    background: var(--panel); border-radius: var(--radius);
    padding: 1.75rem; box-shadow: var(--shadow);
    border: 1px solid rgba(217,164,65,.2);
}
.auth__title { text-align: center; color: var(--accent); font-size: 2rem; margin-bottom: 1.25rem; }
.authtab { display: none; }
.auth__tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.auth__tabs label {
    flex: 1; text-align: center; padding: .6rem; cursor: pointer;
    border-radius: 8px; background: var(--bg-2); color: var(--ink-soft);
    font-family: var(--font-title);
}
#tab-login:checked    ~ .auth__tabs label[for="tab-login"],
#tab-register:checked ~ .auth__tabs label[for="tab-register"] {
    background: var(--accent); color: #2a1c05;
}
.auth__form { display: none; flex-direction: column; gap: 1rem; }
#tab-login:checked    ~ .auth__form--login    { display: flex; }
#tab-register:checked ~ .auth__form--register { display: flex; }
.auth__form label { display: flex; flex-direction: column; gap: .35rem; font-size: .92rem; color: var(--ink-soft); }
.auth__form input {
    padding: .75rem; border-radius: 8px;
    background: var(--bg); border: 1px solid rgba(255,255,255,.12); color: var(--ink);
}
.auth__form input:focus { border-color: var(--accent); }

/* ---------- Accueil ---------------------------------------- */
.home { text-align: center; padding: 1rem 0; }
.home__welcome { font-size: 1.8rem; color: var(--accent); }
.home__sub { color: var(--ink-soft); margin-bottom: 2rem; }
.home__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.card-link {
    background: var(--panel); border: 1px solid rgba(217,164,65,.2);
    border-radius: var(--radius); padding: 1.5rem;
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    transition: transform .15s, border-color .2s;
}
.card-link:hover { transform: translateY(-3px); border-color: var(--accent); }
.card-link__icon  { font-size: 2.4rem; }
.card-link__label { font-family: var(--font-title); font-size: 1.05rem; }

/* ---------- Pied de page ----------------------------------- */
.sitefooter {
    text-align: center; padding: 1.25rem;
    color: var(--ink-soft); font-size: .85rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* ============================================================
   RESPONSIVE - élargissement vers tablette / PC
   ============================================================ */
@media (min-width: 720px) {
    .nav-burger { display: none; }
    .mainnav {
        position: static; display: flex; flex-direction: row;
        background: none; border: none; padding: 0; gap: .25rem;
    }
    .mainnav a { padding: .5rem .8rem; }
    .home__welcome { font-size: 2.4rem; }
    .home__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .content { padding: 2rem 1.5rem; }
}

/* ---------- Collection ------------------------------------- */
.collection__head { text-align: center; margin-bottom: 1rem; }
.collection__title { color: var(--accent); font-size: 1.8rem; }
.collection__count { color: var(--ink-soft); }

.filters {
    display: flex; flex-wrap: wrap; gap: .6rem;
    justify-content: center; align-items: center;
    margin-bottom: 1.25rem;
}
.filters__sel {
    padding: .5rem .7rem; border-radius: 8px;
    background: var(--panel); color: var(--ink);
    border: 1px solid rgba(217,164,65,.3);
}
.filters__owned {
    display: flex; align-items: center; gap: .4rem;
    color: var(--ink-soft); font-size: .9rem;
}

.cardgrid {
    display: grid; gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.cardthumb {
    position: relative;
    aspect-ratio: 1350 / 1890;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(217,164,65,.25);
    transition: transform .12s, box-shadow .15s;
    cursor: pointer;
}
.cardthumb:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.55); }
.cardthumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cardthumb--locked .cardthumb__img {
    filter: grayscale(1) brightness(1.32) contrast(0.5);
}

.cardthumb__qty {
    position: absolute; bottom: 4px; right: 4px;
    background: var(--accent); color: #2a1c05;
    font-size: .72rem; font-weight: 700;
    padding: 1px 7px; border-radius: 10px;
}

.collection__empty { text-align: center; color: var(--ink-soft); margin-top: 1.5rem; }

@media (min-width: 720px) {
    .cardgrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ---------- Mon compte ------------------------------------- */
.account { max-width: 520px; margin: 0 auto; text-align: center; }
.account__title { color: var(--accent); font-size: 1.8rem; margin-bottom: 1.25rem; }
.account__panel {
    background: var(--panel); border-radius: var(--radius);
    padding: 1.25rem; margin-bottom: 1.5rem;
    border: 1px solid rgba(217,164,65,.2);
}
.account__row { display: flex; justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.account__row:last-child { border-bottom: none; }
.account__row span { color: var(--ink-soft); }

/* ---------- Auth : variante formulaire unique (WordPress) -- */
.auth__intro { text-align: center; color: var(--ink-soft); margin-bottom: 1.25rem; }
.auth__form--solo { display: flex; flex-direction: column; gap: 1rem; }
.auth__note { text-align: center; color: var(--ink-soft); font-size: .88rem; margin-top: 1.25rem; }
.auth__note a { color: var(--accent); text-decoration: underline; }

/* ---------- Modale choix de faction ------------------------ */
.faction-modal {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(8,6,16,.88);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.faction-modal__box {
    background: var(--panel); border-radius: var(--radius);
    border: 1px solid rgba(217,164,65,.35);
    box-shadow: var(--shadow);
    padding: 1.5rem; max-width: 640px; width: 100%;
    text-align: center;
}
.faction-modal__title { color: var(--accent); font-size: 1.6rem; margin-bottom: .5rem; }
.faction-modal__intro { color: var(--ink-soft); margin-bottom: 1.25rem; font-size: .95rem; }
.faction-modal__grid {
    display: grid; gap: .8rem;
    grid-template-columns: repeat(2, 1fr);
}
.faction-pick { margin: 0; }
.faction-pick__btn {
    width: 100%; padding: .5rem;
    border: 2px solid rgba(217,164,65,.25);
    border-radius: 10px; cursor: pointer;
    background: var(--bg-2);
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    transition: transform .12s, border-color .15s, box-shadow .15s;
}
.faction-pick__btn:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.faction-pick__back {
    width: 100%; max-width: 110px;
    aspect-ratio: 1350 / 1890;
    object-fit: cover; border-radius: 7px;
    box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.faction-pick__name {
    font-family: var(--font-title); font-size: 1rem;
    color: var(--ink);
}
.faction-pick--disabled .faction-pick__btn {
    cursor: not-allowed; opacity: .45;
}
.faction-pick--disabled .faction-pick__back { filter: grayscale(1); }
.faction-pick--disabled:hover .faction-pick__btn {
    transform: none; border-color: rgba(217,164,65,.25); box-shadow: none;
}

@media (min-width: 560px) {
    .faction-modal__grid { grid-template-columns: repeat(5, 1fr); }
    .faction-modal__box { max-width: 760px; }
}

/* ============================================================
   ACCUEIL : grille a 5 raccourcis (Jouer / Collection / Mon Deck /
   Mon compte / Boutique). Surcharge le repeat(3) responsive.
   ============================================================ */
.home__grid--5 { grid-template-columns: 1fr; }
@media (min-width: 600px)  { .home__grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .home__grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .home__grid--5 { grid-template-columns: repeat(5, 1fr); } }

/* ============================================================
   MODE "MON DECK" (page Collection avec ?view=deck)
   ============================================================ */

/* --- Bandeau du deck courant (au-dessus de la collection) --- */
.deckbar {
    background: var(--panel);
    border: 1px solid rgba(217,164,65,.25);
    border-radius: var(--radius);
    padding: .8rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}
.deckbar__grid {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
@media (min-width: 720px) {
    .deckbar__grid { grid-template-columns: repeat(10, 1fr); }  /* 20 cartes = 2 lignes de 10 */
}
.deckthumb {
    position: relative;
    aspect-ratio: 1350 / 1890;
    border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(217,164,65,.3);
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, filter .15s;
}
.deckthumb:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.5); filter: brightness(1.05); }
.deckthumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deckthumb__remove {
    position: absolute; top: 3px; right: 3px;
    width: 1.4em; height: 1.4em; line-height: 1.4em; text-align: center;
    border-radius: 999px; background: var(--danger); color: #fff;
    font-size: .8rem; font-weight: 700; opacity: 0;
    transition: opacity .15s;
}
.deckthumb:hover .deckthumb__remove { opacity: 1; }
.deckbar__empty { color: var(--ink-soft); text-align: center; padding: .6rem; margin: 0; }

/* --- Etats des vignettes de la collection en mode deck --- */
/* carte deja dans le deck : assombrie + non cliquable */
.collection--deck .cardthumb--indeck {
    filter: brightness(.5);
    pointer-events: none;
}
.collection--deck .cardthumb--indeck::after {
    content: "✓ dans le deck";
    position: absolute; inset: auto 0 0 0;
    background: rgba(0,0,0,.6); color: var(--success);
    font-size: .7rem; text-align: center; padding: 2px 0;
}
/* deck plein : TOUTES les cartes de la collection assombries + non cliquables */
.collection--deck.deck-full .cardthumb {
    filter: brightness(.5);
    pointer-events: none;
    cursor: not-allowed;
}
/* en mode deck, le curseur indique l'ajout possible */
.collection--deck .cardthumb:not(.cardthumb--indeck):not(.cardthumb--locked) { cursor: pointer; }

/* Filtres dedies au bandeau deck (vue Mon Deck) */
.filters--deck { margin-bottom: .6rem; }
.filters__deckcount { color: var(--ink-soft); font-size: .85rem; align-self: center; }


/* ============================================================
   ★ MODALE « COMMENT CA MARCHE ? » - gabarit PARTAGE (21/08)
   Deplace depuis le <style> de pages/accueil.php, ou il etait
   inaccessible aux autres pages. Sert a l'aide du booster, a celle
   du sticker Saison 2, et a l'aide de la Seduction (Collection).
   ⚠ Toute page qui ouvre une .boosterhelp depend de ce bloc.
   ============================================================ */
/* ============================================================
   Modale d'aide "Comment ca marche ?" : centree plein ecran,
   identique desktop / mobile. Affichee au CLIC uniquement.
   ============================================================ */
.boosterhelp {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.boosterhelp[hidden] { display: none; }
.boosterhelp__backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 4, 20, .72);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.boosterhelp__box {
    position: relative; z-index: 1;
    width: min(420px, 100%);
    max-height: min(86vh, 640px); overflow-y: auto;
    text-align: left;
    background: linear-gradient(180deg, #241a3a 0%, #1b1430 100%);
    border: 1px solid rgba(160,130,220,.45);
    border-radius: 16px; padding: 22px 22px 20px;
    box-shadow: 0 20px 60px rgba(5,2,15,.6), inset 0 1px 0 rgba(255,255,255,.07);
    -webkit-overflow-scrolling: touch;
}
.boosterhelp__close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1;
    color: #cdc3e6; background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .15s ease, color .15s ease;
}
.boosterhelp__close:hover { background: rgba(255,255,255,.16); color: #fff; }

.booster-help__title {
    margin: 0 34px 12px 0; font-size: 17px; color: #f3ecff; font-weight: 700;
}
.booster-help__title em { font-style: italic; }
.booster-help__list { margin: 0; padding-left: 20px; }
.booster-help__list li {
    font-size: 14px; line-height: 1.5; color: #cdc3e6; margin: 0 0 8px;
}
.booster-help__list li b { color: #ffd98a; font-weight: 700; }
.booster-help__odds {
    width: 100%; margin: 6px 0 12px; border-collapse: collapse;
    font-size: 13.5px; color: #e7dff6;
}
.booster-help__odds td {
    padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.booster-help__odds td:first-child {
    font-weight: 800; color: #ffd98a; width: 42%;
    font-family: "Bahnschrift","Oswald","Impact",sans-serif; letter-spacing: .03em;
}
.booster-help__odds td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.booster-help__odds tr:last-child td { border-bottom: none; }
.booster-help__stat {
    margin: 12px 0 0; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 12.5px; line-height: 1.55; color: #b7add0; font-style: italic;
}
.booster-help__lead {
    margin: 0 0 10px;
    font-size: .95rem;
    color: #f3ecff;
}


/* ============================================================
   ★ AIDE SEDUCTION - l'etiquette « Seduction : 38 » de la Collection
   est un BOUTON d'information. Elle fait echo au « ? » dore de
   l'accueil sans en reprendre la vivacite : ici le fond reste sombre,
   seule la bordure doree et le « ? » signalent qu'on peut cliquer.
   ============================================================ */
.sedbtn {
    display: inline-flex; align-items: center; gap: .5em;
    margin: 0; padding: .42rem .7rem .42rem .8rem;
    font-family: inherit; font-size: .86rem; line-height: 1;
    color: var(--ink-soft, #b3a8c9); cursor: pointer;
    background: linear-gradient(180deg, rgba(217,164,65,.10), rgba(217,164,65,.04));
    border: 1px solid rgba(217,164,65,.42);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.sedbtn b { color: var(--accent, #d9a441); font-weight: 700; font-size: .95rem; }
.sedbtn__q {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%;
    font-size: 11px; font-weight: 800; line-height: 1;
    color: #2a1c05; background: var(--accent, #d9a441);
}
.sedbtn:hover, .sedbtn:focus-visible {
    outline: none; transform: translateY(-1px);
    border-color: var(--accent, #d9a441);
    background: linear-gradient(180deg, rgba(217,164,65,.20), rgba(217,164,65,.08));
}

/* ★ L'etiquette entre DANS le conteneur des filtres et se pousse a
   droite : elle se cale ainsi d'elle-meme sur la meme ligne et le meme
   bord que la grille, sans aucun nombre magique a maintenir. */
.filters .sedbtn { margin-left: auto; }
@media (max-width: 560px) {
    .filters .sedbtn { margin-left: 0; }   /* les filtres passent a la ligne */
}

/* Paragraphes de la modale d'aide (le gabarit d'origine n'avait que
   des listes ; ici le texte se lit d'une traite). */
.booster-help__p {
    margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: #cdc3e6;
}
.booster-help__p b { color: #ffd98a; font-weight: 700; }

/* ============================================================
   ★ 23/08 - TOAST GLOBAL - LE SEUL DU SITE
   ============================================================
   Remplace les deux mecanismes qui vivaient chacun dans une page :
   `#shopToast` / `.shop-toast` de pages/boutique.php et `.offrtoast`
   de pages/collection.php. Les deux blocs ont ete RETIRES de ces
   fichiers le meme jour ; s'ils y reapparaissent, c'est un doublon.

   ★ EN BAS, decision Fred du 23/08. `.topbar` est sticky top:0 avec un
   z-index de 50 : un bandeau en haut lui passerait dessus et masquerait
   le burger sur telephone. Le bas est libre sur toutes les pages.

   ★ z-index 1200. La convention de ce fichier est : 50 la barre de
   navigation, 200 la modale de faction, 1000 la modale d'aide. Le
   bandeau doit passer AU-DESSUS de tout, y compris d'une modale
   ouverte, sinon une distinction gagnee pendant qu'une modale est
   affichee tomberait derriere elle sans que rien ne le signale.

   ★ pointer-events : `none` sur la ZONE, `auto` sur le bandeau. La zone
   couvre une bande d'ecran ; si elle captait les clics, elle rendrait
   inerte tout ce qui se trouve dessous, meme quand elle est vide.
   NE JAMAIS mettre pointer-events:auto sur #gToastZone.
   ============================================================ */
#gToastZone {
    position: fixed;
    left: 50%;
    bottom: 26px;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: min(92vw, 560px);
    pointer-events: none;   /* ★ voir ci-dessus */
}

.gtoast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 11px 20px;
    border-radius: 22px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    box-shadow: 0 10px 26px rgba(0,0,0,.55);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
}
.gtoast.is-visible { opacity: 1; transform: translateY(0); }

/* Les quatre tons. 'ok' et 'err' reprennent EXACTEMENT les degrades de
   l'ancien toast de la boutique ; 'info' reprend le fond sobre de
   l'ancien toast de la collection. Le joueur ne doit pas avoir
   l'impression que le site a change d'apparence. */
.gtoast--ok    { background: linear-gradient(135deg,#1ea95a,#15904b); }
.gtoast--err   { background: linear-gradient(135deg,#d2453d,#b5322b); }
.gtoast--info  {
    background: rgba(36,27,54,.97);
    border: 1px solid rgba(122,168,232,.5);
    color: #cfe3ff;
}
/* 'badge' : l'or du theme (--accent). Reserve aux distinctions, pour
   qu'elles ne se confondent avec aucun accuse de reception. */
.gtoast--badge {
    background: linear-gradient(135deg,#f0c268,#b8862c);
    border: 1px solid rgba(255,226,160,.75);
    color: #2a1c05;
    font-family: var(--font-title);
    letter-spacing: .3px;
}

.gtoast__icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.gtoast__txt  { min-width: 0; }

@media (max-width: 560px) {
    #gToastZone { max-width: 92vw; }
    .gtoast { font-size: 14px; padding: 10px 16px; }
}

/* Un bandeau qui glisse n'apporte rien a qui a demande moins
   d'animation ; il apparait alors simplement. */
@media (prefers-reduced-motion: reduce) {
    .gtoast { transition: opacity .12s linear; transform: none; }
    .gtoast.is-visible { transform: none; }
}