/* =========================================================================
   PHAERIS RETRO — habillage du site
   Palette calee sur l'oeuf du launcher : cyan sur fond sombre.
   Tout est pilote par les variables ci-dessous : changer la DA = changer ici.
   ========================================================================= */

:root {
    --ph-bg:        #0a0d13;
    --ph-bg-2:      #0f1420;
    --ph-panel:     #141a26;
    --ph-panel-2:   #1a2233;
    --ph-line:      rgba(120, 220, 210, .13);

    --ph-cyan:      #4ED0C4;
    --ph-cyan-hi:   #77E7DC;
    --ph-cyan-deep: #1f8f86;
    --ph-violet:    #8B5CD6;

    --ph-text:      #E9EEF4;
    --ph-muted:     #8E9BAC;
    --ph-faint:     #5D6878;
    --ph-on-cyan:   #052623;

    --ph-radius:    14px;
    --ph-shadow:    0 18px 50px rgba(0, 0, 0, .45);
    --ph-glow:      0 0 40px rgba(78, 208, 196, .28);
}

/* ----------------------------------------------------------------- base */

html, body { height: 100%; }

body {
    background: var(--ph-bg);
    color: var(--ph-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* voile d'etoiles + halo cyan, fixes derriere tout le site */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(78, 208, 196, .10), transparent 70%),
        radial-gradient(700px 400px at 85% 15%, rgba(139, 92, 214, .07), transparent 70%),
        linear-gradient(180deg, var(--ph-bg-2) 0%, var(--ph-bg) 60%);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .5;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.2px 1.2px at 28% 68%, rgba(160,240,235,.45), transparent),
        radial-gradient(1.6px 1.6px at 47% 12%, rgba(255,255,255,.40), transparent),
        radial-gradient(1.2px 1.2px at 63% 55%, rgba(160,240,235,.40), transparent),
        radial-gradient(1.5px 1.5px at 78% 30%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.2px 1.2px at 91% 74%, rgba(160,240,235,.35), transparent),
        radial-gradient(1.3px 1.3px at 36% 88%, rgba(255,255,255,.35), transparent);
    background-repeat: repeat;
    background-size: 100% 100%;
}

a { color: var(--ph-cyan); text-decoration: none; }
a:hover { color: var(--ph-cyan-hi); }

::selection { background: rgba(78, 208, 196, .3); color: #fff; }

/* barre de defilement */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ph-bg); }
::-webkit-scrollbar-thumb { background: #223046; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2c3d58; }

/* ---------------------------------------------------------------- navbar */

.ph-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(10, 13, 19, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ph-line);
}

.ph-nav-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 68px;
}

.ph-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--ph-text) !important;
    font-size: 1.05rem;
}
.ph-brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(78, 208, 196, .55));
}
.ph-brand small {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: 2.2px;
    color: var(--ph-cyan);
    text-transform: uppercase;
    margin-top: -2px;
}

.ph-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 18px;
    flex-wrap: wrap;
}
.ph-links a,
.ph-links .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--ph-muted);
    font-weight: 600;
    font-size: .93rem;
    border: 1px solid transparent;
    transition: background .18s, color .18s, border-color .18s;
    background: none;
}
.ph-links a:hover,
.ph-links .dropdown-toggle:hover {
    color: var(--ph-text);
    background: rgba(255, 255, 255, .05);
}
.ph-links a.active {
    color: var(--ph-cyan);
    background: rgba(78, 208, 196, .10);
    border-color: rgba(78, 208, 196, .22);
}

/* boutons de droite */
.ph-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 11px;
    font-weight: 700;
    font-size: .94rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s;
    white-space: nowrap;
}
.ph-btn:active { transform: translateY(1px); }

.ph-btn-primary {
    background: linear-gradient(180deg, var(--ph-cyan-hi), var(--ph-cyan));
    color: var(--ph-on-cyan) !important;
    box-shadow: 0 8px 24px rgba(78, 208, 196, .28);
}
.ph-btn-primary:hover {
    box-shadow: 0 12px 34px rgba(78, 208, 196, .45);
    color: var(--ph-on-cyan) !important;
}

.ph-btn-ghost {
    background: rgba(255, 255, 255, .04);
    border-color: var(--ph-line);
    color: var(--ph-text) !important;
}
.ph-btn-ghost:hover {
    background: rgba(78, 208, 196, .10);
    border-color: rgba(78, 208, 196, .35);
    color: var(--ph-cyan) !important;
}

.ph-btn-lg { padding: 15px 34px; font-size: 1.05rem; border-radius: 13px; }

/* ------------------------------------------------------------------ hero */
/* Banniere plein ecran : l'artwork porte l'ambiance, le texte est centre
   par-dessus. Deux voiles (vertical + radial) garantissent la lisibilite
   quelle que soit l'image. */

/* L'artwork n'est PAS un bloc borne : c'est un grand fond de page qui descend
   DERRIERE les actualites et s'efface en degrade (principe des sites de jeu).
   Il est pose une fois en haut du document, le contenu passe par-dessus. */
#app { position: relative; }

.ph-topbg {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: clamp(900px, 96vw, 1320px);
    z-index: 0;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}
/* voile sombre + extinction progressive vers le fond du site */
.ph-topbg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 420px at 50% 26%, rgba(6, 10, 16, .68), transparent 74%),
        linear-gradient(180deg,
            rgba(8, 11, 17, .70) 0%,
            rgba(8, 11, 17, .28) 22%,
            rgba(10, 13, 19, .60) 52%,
            rgba(10, 13, 19, .88) 76%,
            var(--ph-bg) 100%);
}
/* teinte cyan discrete pour raccrocher l'artwork a la DA */
.ph-topbg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 460px at 50% 34%, rgba(78, 208, 196, .12), transparent 70%);
    mix-blend-mode: screen;
}

/* le hero devient une simple zone de texte posee sur ce fond */
.ph-hero {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    min-height: clamp(380px, 34vw, 520px);
}

.ph-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 62px 0 58px;
    margin: 0 auto;
    max-width: 720px;
}

.ph-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--ph-cyan);
    background: rgba(78, 208, 196, .09);
    border: 1px solid rgba(78, 208, 196, .22);
    padding: 7px 15px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.ph-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ph-cyan);
    box-shadow: 0 0 0 0 rgba(78, 208, 196, .7);
    animation: ph-pulse 2s infinite;
}
@keyframes ph-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(78, 208, 196, .65); }
    70%  { box-shadow: 0 0 0 9px rgba(78, 208, 196, 0); }
    100% { box-shadow: 0 0 0 0 rgba(78, 208, 196, 0); }
}

.ph-title {
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -1.5px;
    margin: 0 0 8px;
}
.ph-title .ph-accent {
    background: linear-gradient(120deg, var(--ph-cyan-hi), var(--ph-cyan) 45%, var(--ph-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ph-subtitle {
    font-size: 1.32rem;
    color: var(--ph-cyan);
    font-weight: 600;
    margin-bottom: 18px;
}
.ph-lead {
    font-size: 1.05rem;
    color: #C3CEDB;
    max-width: 34rem;
    line-height: 1.75;
    margin: 0 auto 32px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

.ph-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* le titre doit rester lisible sur l'artwork */
.ph-hero .ph-title { text-shadow: 0 4px 30px rgba(0, 0, 0, .8); }
.ph-hero .ph-subtitle {
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: .84rem;
    font-weight: 700;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .8);
}

/* --------------------------------------------------------------- sections */

.ph-section { padding: 52px 0; position: relative; z-index: 2; }

.ph-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.ph-eyebrow {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--ph-cyan);
    margin-bottom: 8px;
}
.ph-h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.6px;
    margin: 0;
}

/* ------------------------------------------------------------------ cartes */

.ph-card {
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.ph-card:hover {
    transform: translateY(-4px);
    border-color: rgba(78, 208, 196, .34);
    box-shadow: var(--ph-shadow);
}
.ph-card-img {
    width: 100%;
    height: 172px;
    object-fit: cover;
    background: var(--ph-panel-2);
    display: block;
    transition: transform .35s ease;
}
/* vignette cliquable : zoom doux au survol pour signaler le lien */
.ph-card-imglink {
    display: block;
    overflow: hidden;
    cursor: pointer;
}
.ph-card:hover .ph-card-img { transform: scale(1.05); }
.ph-card-body { padding: 20px; flex: 1 1 auto; display: flex; flex-direction: column; }
.ph-card-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 9px; }
.ph-card-title a { color: var(--ph-text); }
.ph-card-title a:hover { color: var(--ph-cyan); }
.ph-card-text { color: var(--ph-muted); font-size: .93rem; line-height: 1.65; flex: 1 1 auto; }
.ph-card-meta {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--ph-line);
    font-size: .78rem;
    color: var(--ph-faint);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* carte "feature" (wiki, ladder, vote, rejoindre) */
.ph-feature {
    display: block;
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    padding: 26px 22px;
    height: 100%;
    transition: transform .2s, border-color .2s, background .2s;
}
.ph-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(78, 208, 196, .34);
    background: var(--ph-panel-2);
}
.ph-feature-ico {
    width: 50px; height: 50px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(78, 208, 196, .11);
    border: 1px solid rgba(78, 208, 196, .22);
    color: var(--ph-cyan);
    font-size: 1.32rem;
    margin-bottom: 15px;
}
.ph-feature h3 { font-size: 1.06rem; font-weight: 700; color: var(--ph-text); margin: 0 0 7px; }
.ph-feature p  { font-size: .89rem; color: var(--ph-muted); margin: 0; line-height: 1.6; }

/* --------------------------------------------------------------- panneaux */

/* Azuriom rend beaucoup de .card bootstrap : on les habille */
.card {
    background: var(--ph-panel) !important;
    border: 1px solid var(--ph-line) !important;
    border-radius: var(--ph-radius) !important;
    color: var(--ph-text);
}
.card-header, .card-footer {
    background: rgba(255, 255, 255, .02) !important;
    border-color: var(--ph-line) !important;
    color: var(--ph-muted);
}
.table { --bs-table-color: var(--ph-text); --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-color: var(--ph-line); }
.list-group-item { background: var(--ph-panel); border-color: var(--ph-line); color: var(--ph-text); }

/* formulaires (connexion / inscription) */
.form-control, .form-select {
    background: var(--ph-bg-2);
    border: 1px solid var(--ph-line);
    color: var(--ph-text);
    border-radius: 10px;
    padding: 11px 14px;
}
.form-control:focus, .form-select:focus {
    background: var(--ph-bg-2);
    color: var(--ph-text);
    border-color: var(--ph-cyan);
    box-shadow: 0 0 0 .22rem rgba(78, 208, 196, .16);
}
.form-control::placeholder { color: var(--ph-faint); }
.form-label { color: var(--ph-muted); font-weight: 600; font-size: .9rem; }
.form-check-input { background-color: var(--ph-bg-2); border-color: var(--ph-line); }
.form-check-input:checked { background-color: var(--ph-cyan); border-color: var(--ph-cyan); }

/* boutons bootstrap -> DA Phaeris */
.btn-primary {
    background: linear-gradient(180deg, var(--ph-cyan-hi), var(--ph-cyan));
    border: none;
    color: var(--ph-on-cyan);
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 20px;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(180deg, var(--ph-cyan-hi), var(--ph-cyan-deep));
    color: var(--ph-on-cyan);
}
.btn-secondary {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--ph-line);
    color: var(--ph-text);
    border-radius: 10px;
}
.btn-secondary:hover { background: rgba(78, 208, 196, .12); border-color: rgba(78,208,196,.3); color: var(--ph-cyan); }

/* boite auth centree */
.ph-auth {
    max-width: 470px;
    margin: 60px auto;
}
.ph-auth-card {
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: 18px;
    padding: 34px 32px;
    box-shadow: var(--ph-shadow);
}
.ph-auth-head { text-align: center; margin-bottom: 26px; }
.ph-auth-head img { width: 66px; margin-bottom: 12px; filter: drop-shadow(0 0 16px rgba(78,208,196,.5)); }
.ph-auth-head h1 { font-size: 1.55rem; font-weight: 800; margin: 0 0 5px; }
.ph-auth-head p { color: var(--ph-muted); font-size: .93rem; margin: 0; }

/* ========================= VIGNETTES D'ACTUALITE ========================= */
/* Titre et date poses SUR l'image, facon site de jeu. */

.ph-news-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--ph-radius);
    border: 1px solid var(--ph-line);
    background: var(--ph-panel);
    height: 210px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.ph-news-tile-lg { height: 250px; }

.ph-news-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(78, 208, 196, .38);
    box-shadow: var(--ph-shadow);
}
.ph-news-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.ph-news-tile:hover img { transform: scale(1.06); }

.ph-news-tile-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 11, 17, .05) 0%,
        rgba(8, 11, 17, .42) 48%,
        rgba(8, 11, 17, .92) 100%);
}
.ph-news-tile-text {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 18px;
    display: block;
}
.ph-news-tile-date {
    display: block;
    font-size: .72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ph-cyan);
    margin-bottom: 6px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.ph-news-tile-title {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ph-text);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

/* ====================== LISTE D'ACTUALITES (page /news) ====================== */

.ph-news-list { margin-top: 34px; }

.ph-news-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 26px;
    align-items: center;
    padding: 24px 0;
    border-top: 1px solid var(--ph-line);
}
.ph-news-row:last-child { border-bottom: 1px solid var(--ph-line); }

.ph-news-row-img {
    display: block;
    position: relative;
    height: 168px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ph-line);
    background: var(--ph-panel-2);
}
.ph-news-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.ph-news-row:hover .ph-news-row-img img { transform: scale(1.05); }
.ph-news-row-noimg {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--ph-faint);
    font-size: 2rem;
}

.ph-news-row-title { font-size: 1.32rem; font-weight: 800; margin: 0 0 10px; }
.ph-news-row-title a { color: var(--ph-text); }
.ph-news-row-title a:hover { color: var(--ph-cyan); }
.ph-news-row-text {
    color: var(--ph-muted);
    font-size: .96rem;
    line-height: 1.7;
    margin: 0 0 14px;
}
.ph-news-row-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--ph-faint);
}
.ph-news-row-meta i { color: var(--ph-cyan); margin-right: 5px; }

/* ------------------------------- pagination ------------------------------- */

.ph-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 40px;
}
.ph-page {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    color: var(--ph-muted);
    font-weight: 600;
    font-size: .93rem;
    transition: background .18s, color .18s, border-color .18s;
}
.ph-page:hover {
    background: var(--ph-panel-2);
    color: var(--ph-text);
    border-color: rgba(78, 208, 196, .3);
}
.ph-page.active {
    background: linear-gradient(180deg, var(--ph-cyan-hi), var(--ph-cyan));
    border-color: transparent;
    color: var(--ph-on-cyan);
}
.ph-page.disabled { opacity: .35; pointer-events: none; }

.ph-page-count {
    text-align: center;
    color: var(--ph-faint);
    font-size: .84rem;
    margin-top: 14px;
}

@media (max-width: 767px) {
    .ph-news-row { grid-template-columns: 1fr; gap: 14px; }
    .ph-news-row-img { height: 190px; }
}

/* ================================== WIKI ================================== */

/* -------------------------------- accueil -------------------------------- */

.wk-hero { position: relative; z-index: 2; padding: 56px 0 20px; }
.wk-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 30px;
}
.wk-hero-title {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -1.4px;
    margin: 0 0 16px;
}
.wk-hero-lead {
    color: var(--ph-muted);
    font-size: 1.06rem;
    line-height: 1.7;
    max-width: 30rem;
    margin: 0 0 26px;
}
.wk-hero-art { position: relative; display: grid; place-items: center; min-height: 210px; }
.wk-hero-art img { width: min(210px, 70%); position: relative; filter: drop-shadow(0 16px 34px rgba(0,0,0,.55)); }
.wk-hero-glow {
    position: absolute; width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(78,208,196,.22) 0%, transparent 65%);
}

/* trois arguments */
.wk-pitch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 46px;
}
.wk-pitch-card {
    display: block;
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    padding: 24px 22px;
    transition: transform .2s, border-color .2s, background .2s;
}
.wk-pitch-card:hover {
    transform: translateY(-4px);
    border-color: rgba(78,208,196,.34);
    background: var(--ph-panel-2);
}
.wk-pitch-ico {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(78,208,196,.10);
    border: 1px solid rgba(78,208,196,.2);
    font-size: 1.2rem;
    margin-bottom: 14px;
}
.wk-pitch-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--ph-text); margin: 0 0 8px; }
.wk-pitch-card p  { font-size: .9rem; color: var(--ph-muted); line-height: 1.65; margin: 0 0 14px; }
.wk-pitch-card strong { color: var(--ph-cyan); }
.wk-pitch-link { font-size: .86rem; font-weight: 600; color: var(--ph-cyan); }

/* recherche */
.wk-search { display: flex; gap: 8px; }
.wk-search input {
    background: var(--ph-bg-2);
    border: 1px solid var(--ph-line);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--ph-text);
    min-width: 240px;
    font-family: inherit;
}
.wk-search input:focus { outline: none; border-color: var(--ph-cyan); }
.wk-search button {
    background: var(--ph-panel-2);
    border: 1px solid var(--ph-line);
    border-radius: 10px;
    color: var(--ph-text);
    padding: 0 14px;
    cursor: pointer;
}
.wk-search button:hover { background: rgba(78,208,196,.12); color: var(--ph-cyan); }

/* categories et cartes */
.wk-cat { margin-bottom: 40px; }
.wk-cat-title {
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--ph-cyan);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ph-line);
}
.wk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.wk-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: 12px;
    padding: 18px 20px;
    transition: transform .18s, border-color .18s, background .18s;
}
.wk-card:hover { transform: translateY(-3px); border-color: rgba(78,208,196,.35); background: var(--ph-panel-2); }
.wk-card-tag {
    font-size: .68rem; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ph-faint);
}
.wk-card-title { font-size: 1rem; font-weight: 700; color: var(--ph-text); }
.wk-card-desc  { font-size: .86rem; color: var(--ph-muted); line-height: 1.55; }

/* ------------------------------ page d'article ------------------------------ */

.wk-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 220px;
    gap: 36px;
    align-items: start;
    padding: 34px 0 60px;
}

/* navigation laterale */
.wk-nav { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 6px; }
.wk-nav::-webkit-scrollbar { width: 7px; }
.wk-nav::-webkit-scrollbar-thumb { background: #223046; border-radius: 6px; }

.wk-nav-home {
    display: flex; align-items: center; gap: 9px;
    font-weight: 700; color: var(--ph-text);
    margin-bottom: 16px;
}
.wk-nav-home i { color: var(--ph-cyan); }

.wk-nav-search input {
    width: 100%;
    background: var(--ph-bg-2);
    border: 1px solid var(--ph-line);
    border-radius: 9px;
    padding: 8px 12px;
    color: var(--ph-text);
    font-size: .88rem;
    margin-bottom: 20px;
    font-family: inherit;
}
.wk-nav-search input:focus { outline: none; border-color: var(--ph-cyan); }

.wk-nav-group { margin-bottom: 22px; }
.wk-nav-cat {
    font-size: .72rem; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--ph-faint);
    margin-bottom: 8px;
}
.wk-nav-item {
    display: block;
    padding: 6px 12px;
    border-left: 2px solid var(--ph-line);
    color: var(--ph-muted);
    font-size: .9rem;
    line-height: 1.45;
    transition: color .15s, border-color .15s;
}
.wk-nav-item:hover { color: var(--ph-text); border-color: var(--ph-faint); }
.wk-nav-item.is-active { color: var(--ph-cyan); border-color: var(--ph-cyan); font-weight: 600; }
.wk-nav-sub { padding-left: 22px; font-size: .86rem; }

/* corps */
.wk-crumb { display: flex; gap: 8px; font-size: .82rem; color: var(--ph-faint); margin-bottom: 12px; }
.wk-crumb a { color: var(--ph-muted); }
.wk-crumb a:hover { color: var(--ph-cyan); }

.wk-title {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -.8px;
    margin: 0 0 26px;
}

/* l'article reutilise .ph-article, avec quelques ajustements */
.wk-article { background: none; border: none; padding: 0; font-size: 1rem; }
.wk-article h2 { scroll-margin-top: 90px; }
.wk-article h3 { scroll-margin-top: 90px; }

.wk-foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    margin-top: 40px; padding-top: 18px;
    border-top: 1px solid var(--ph-line);
    font-size: .84rem; color: var(--ph-faint);
}

/* sommaire */
.wk-toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
.wk-toc-title {
    font-size: .72rem; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--ph-faint);
    margin-bottom: 12px;
}
.wk-toc-link {
    display: block;
    padding: 5px 0 5px 12px;
    border-left: 2px solid var(--ph-line);
    color: var(--ph-muted);
    font-size: .85rem;
    line-height: 1.45;
    transition: color .15s, border-color .15s;
}
.wk-toc-link:hover { color: var(--ph-text); }
.wk-toc-link.is-sub { padding-left: 24px; font-size: .81rem; }
.wk-toc-link.is-active { color: var(--ph-cyan); border-color: var(--ph-cyan); }

@media (max-width: 1199px) {
    .wk-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .wk-toc { display: none; }
}
@media (max-width: 991px) {
    .wk-shell { grid-template-columns: 1fr; gap: 22px; }
    .wk-nav { position: static; max-height: none; }
    .wk-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .wk-hero-lead { margin-left: auto; margin-right: auto; }
    .wk-hero-art { order: -1; }
    .wk-pitch { grid-template-columns: 1fr; }
}

/* ============================== PAGE D'ARTICLE ============================== */

.ph-post-hero {
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--ph-line);
    display: flex;
    align-items: flex-end;
    min-height: clamp(300px, 30vw, 420px);
}
.ph-post-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 11, 17, .62) 0%,
        rgba(8, 11, 17, .40) 38%,
        rgba(10, 13, 19, .92) 88%,
        var(--ph-bg) 100%);
}
/* article sans image : on garde un fond sobre plutot qu'un vide */
.ph-post-hero-plain {
    min-height: auto;
    background: linear-gradient(160deg, rgba(78,208,196,.08), rgba(139,92,214,.05));
}
.ph-post-hero-plain::before { background: none; }

.ph-post-hero-inner {
    position: relative;
    z-index: 2;
    padding: 40px 0 34px;
    width: 100%;
}

.ph-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--ph-muted);
    margin-bottom: 16px;
}
.ph-back:hover { color: var(--ph-cyan); }

.ph-post-title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 18px;
    text-shadow: 0 3px 24px rgba(0, 0, 0, .8);
    max-width: 40rem;
}

.ph-post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    color: var(--ph-muted);
    font-size: .9rem;
}
.ph-post-meta i { color: var(--ph-cyan); margin-right: 5px; }
.ph-post-author {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ph-text);
    font-weight: 600;
}
.ph-post-author img {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(78, 208, 196, .4);
    object-fit: cover;
}

/* corps de l'article */
.ph-post-wrap { max-width: 860px; margin: 0 auto; padding: 38px 0 60px; }

.ph-article {
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    padding: 34px 36px;
    color: #CBD5E1;
    font-size: 1.02rem;
    line-height: 1.8;
}
.ph-article > *:first-child { margin-top: 0; }
.ph-article > *:last-child  { margin-bottom: 0; }

.ph-article h1, .ph-article h2, .ph-article h3,
.ph-article h4, .ph-article h5 {
    color: var(--ph-text);
    font-weight: 800;
    letter-spacing: -.3px;
    margin: 32px 0 14px;
}
.ph-article h1 { font-size: 1.8rem; }
.ph-article h2 { font-size: 1.5rem; }
.ph-article h3 { font-size: 1.22rem; }
.ph-article h2, .ph-article h3 {
    padding-left: 14px;
    border-left: 3px solid var(--ph-cyan);
}

.ph-article p { margin: 0 0 16px; }
.ph-article a { color: var(--ph-cyan); text-decoration: underline; text-underline-offset: 3px; }
.ph-article strong { color: var(--ph-text); }

.ph-article ul, .ph-article ol { margin: 0 0 18px; padding-left: 26px; }
.ph-article li { margin-bottom: 8px; }
.ph-article ul li::marker { color: var(--ph-cyan); }
.ph-article ol li::marker { color: var(--ph-cyan); font-weight: 700; }

/* images inserees dans le contenu depuis l'editeur d'administration */
.ph-article img {
    max-width: 100%;
    height: auto;
    border-radius: 11px;
    border: 1px solid var(--ph-line);
    margin: 20px 0;
    display: block;
}
.ph-article figure { margin: 22px 0; }
.ph-article figcaption {
    font-size: .84rem;
    color: var(--ph-faint);
    text-align: center;
    margin-top: 8px;
}

.ph-article blockquote {
    margin: 22px 0;
    padding: 14px 20px;
    border-left: 3px solid var(--ph-cyan);
    background: rgba(78, 208, 196, .06);
    border-radius: 0 10px 10px 0;
    color: var(--ph-muted);
}
.ph-article code {
    background: var(--ph-bg-2);
    border: 1px solid var(--ph-line);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: .9em;
    color: var(--ph-cyan);
}
.ph-article pre {
    background: var(--ph-bg-2);
    border: 1px solid var(--ph-line);
    border-radius: 10px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 20px 0;
}
.ph-article pre code { background: none; border: none; padding: 0; color: #CBD5E1; }
.ph-article hr { border-color: var(--ph-line); margin: 26px 0; }
.ph-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
.ph-article th, .ph-article td {
    border: 1px solid var(--ph-line);
    padding: 10px 12px;
    text-align: left;
}
.ph-article th { background: var(--ph-panel-2); color: var(--ph-text); }

/* actions sous l'article */
.ph-post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 16px 20px;
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
}
.ph-post-actions .ph-btn.active {
    background: rgba(78, 208, 196, .14);
    border-color: rgba(78, 208, 196, .4);
    color: var(--ph-cyan) !important;
}
.ph-post-signature { color: var(--ph-faint); font-size: .86rem; }

/* --------------------------------------------------------- commentaires */

.ph-comments { margin-top: 50px; }

.ph-comment {
    display: flex;
    gap: 15px;
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    padding: 18px 20px;
    margin-bottom: 14px;
}
.ph-comment-avatar {
    width: 46px; height: 46px;
    border-radius: 11px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--ph-line);
}
.ph-comment-body { flex: 1 1 auto; min-width: 0; }
.ph-comment-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.ph-comment-head strong { color: var(--ph-text); font-size: .95rem; }
.ph-comment-head span   { color: var(--ph-faint); font-size: .8rem; }
.ph-comment-del { margin-left: auto; color: var(--ph-danger, #D86058); }
.ph-comment-text { color: var(--ph-muted); font-size: .95rem; line-height: 1.7; }

.ph-comment-form {
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    padding: 24px;
    margin-top: 22px;
}
.ph-comment-form h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; color: var(--ph-text); }

.ph-comment-guest {
    background: rgba(78, 208, 196, .07);
    border: 1px solid rgba(78, 208, 196, .22);
    border-radius: var(--ph-radius);
    padding: 16px 20px;
    color: var(--ph-muted);
    margin-top: 20px;
}

@media (max-width: 575px) {
    .ph-article { padding: 22px 20px; }
    .ph-post-wrap { padding: 26px 0 44px; }
}

/* ------------------------------------------------- affichage conditionnel */
/* Les pages CMS sont du HTML pur (pas de Blade) : on montre le bon bloc
   selon la classe posee sur <body> par le layout. */
.ph-is-guest .ph-only-auth  { display: none !important; }
.ph-is-auth  .ph-only-guest { display: none !important; }

/* ------------------------------------------------------ page "Rejoindre" */

.ph-steps { display: grid; gap: 22px; margin: 34px 0 10px; }

.ph-step {
    display: grid;
    /* minmax(0, 1fr) et NON 1fr : une piste « 1fr » conserve min-width:auto,
       donc elle refuse de descendre sous la largeur minimale de son contenu.
       Un <pre> d'une seule longue ligne imposait ainsi sa largeur a toute la
       page, qui partait en defilement horizontal. minmax(0, ...) autorise le
       retrecissement — le <pre> defile alors chez lui, ou c'est sa place. */
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    padding: 24px;
    align-items: start;
}
.ph-step-num {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(78, 208, 196, .11);
    border: 1px solid rgba(78, 208, 196, .28);
    color: var(--ph-cyan);
    font-weight: 800; font-size: 1.2rem;
}
.ph-step h3 { font-size: 1.16rem; font-weight: 700; margin: 6px 0 8px; color: var(--ph-text); }
.ph-step p  { color: var(--ph-muted); font-size: .95rem; line-height: 1.65; margin: 0 0 14px; }
/* Les enfants d'une grille heritent eux aussi de min-width:auto. */
.ph-step > * { min-width: 0; }

.ph-step-shot {
    display: block;
    width: 100%;
    /* Les captures font 900 px de large. Sans plafond, « width: 100% » les
       ETIRAIT au-dela du natif — 1286 px a l'ecran, donc floues et
       demesurees. On les affiche au plus a leur taille reelle. */
    max-width: 900px;
    height: auto;
    border-radius: 11px;
    border: 1px solid var(--ph-line);
    margin-top: 6px;
    background: var(--ph-bg-2);
}
.ph-step-links { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* cartes de telechargement OS */
.ph-os { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 8px 0 4px; }
.ph-os-card {
    display: flex; align-items: center; gap: 16px;
    background: var(--ph-panel); border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius); padding: 20px 22px;
    transition: transform .2s, border-color .2s;
}
.ph-os-card:hover { transform: translateY(-3px); border-color: rgba(78,208,196,.35); }
.ph-os-ico {
    width: 46px; height: 46px; flex: 0 0 46px;
    display: grid; place-items: center; border-radius: 12px;
    background: rgba(78,208,196,.1); border: 1px solid rgba(78,208,196,.22);
    color: var(--ph-cyan); font-size: 1.4rem;
}
.ph-os-card strong { display: block; color: var(--ph-text); font-size: 1.02rem; }
.ph-os-card span   { color: var(--ph-faint); font-size: .82rem; }

/* Plateforme pas encore disponible : la carte reste a sa place pour ne pas
   deformer la grille, mais elle ne fait rien et se voit au premier coup d'oeil.
   Mieux vaut ca qu'un lien qui repond 404. */
.ph-os-card-bientot {
    opacity: .55;
    cursor: default;
    border-style: dashed;
}
.ph-os-card-bientot:hover { transform: none; border-color: var(--ph-line); }

/* encart d'appel a l'action (creation de compte, bien visible) */
.ph-cta-box {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(160deg, rgba(78,208,196,.10), rgba(139,92,214,.07));
    border: 1px solid rgba(78, 208, 196, .3);
    border-radius: 18px;
    padding: 40px 28px;
    margin: 40px 0;
}
.ph-cta-box h2 { font-size: 1.7rem; font-weight: 800; margin: 0 0 10px; }
.ph-cta-box p  { color: var(--ph-muted); margin: 0 auto 24px; max-width: 34rem; }

@media (max-width: 767px) {
    .ph-os { grid-template-columns: 1fr; }
    .ph-step { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ footer */

.ph-footer {
    border-top: 1px solid var(--ph-line);
    background: rgba(6, 9, 14, .7);
    padding: 44px 0 30px;
    margin-top: auto;
}
.ph-footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.ph-footer-brand img { width: 34px; filter: drop-shadow(0 0 9px rgba(78,208,196,.45)); }
.ph-footer-brand strong { font-size: 1.02rem; }
.ph-footer p { color: var(--ph-muted); font-size: .89rem; }
.ph-footer h4 {
    font-size: .76rem; letter-spacing: 1.9px; text-transform: uppercase;
    color: var(--ph-faint); margin-bottom: 13px;
}
.ph-footer-links { list-style: none; padding: 0; margin: 0; }
.ph-footer-links li { margin-bottom: 8px; }
.ph-footer-links a { color: var(--ph-muted); font-size: .9rem; }
.ph-footer-links a:hover { color: var(--ph-cyan); }
.ph-footer-bottom {
    margin-top: 28px; padding-top: 20px;
    border-top: 1px solid var(--ph-line);
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap;
    color: var(--ph-faint); font-size: .84rem;
}
.ph-social a {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ph-line);
    color: var(--ph-muted); margin-left: 7px;
}
.ph-social a:hover { background: rgba(78,208,196,.12); border-color: rgba(78,208,196,.32); color: var(--ph-cyan); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 991px) {
    .ph-hero { min-height: clamp(320px, 44vw, 420px); }
    .ph-hero-inner { padding: 48px 0 44px; }
    .ph-links { display: none; }
}

@media (max-width: 575px) {
    .ph-hero { min-height: 300px; }
    .ph-hero-inner { padding: 54px 0 48px; }
    .ph-section { padding: 52px 0; position: relative; z-index: 2; }
    .ph-nav-actions .ph-btn { padding: 9px 15px; font-size: .87rem; }
    .ph-hero-cta .ph-btn { width: 100%; }
}

/* ------------------------- video dans un article / wiki ------------------------- */
/* Meme traitement que les images du contenu : arrondi, liseré, pleine largeur. */
.ph-article video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 11px;
    border: 1px solid var(--ph-line);
    margin: 20px 0;
    background: #000;
}
/* Démo de jeu : ces captures sont de TRES petite résolution (l'aura fait
   116x174). Les étirer sur la largeur de l'article les rendait floues (x7).
   On les centre et on plafonne l'agrandissement à x2, qui reste net. */
.ph-article figure.ph-demo {
    text-align: center;
    margin: 26px 0;
}
.ph-article figure.ph-demo video {
    display: inline-block;
    width: auto;
    max-width: 232px;
    max-height: 348px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px rgba(78, 208, 196, .25), 0 14px 40px rgba(0, 0, 0, .5);
    border-color: rgba(78, 208, 196, .35);
}
.ph-article figure.ph-demo figcaption {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

/* ============================ PAGES CMS (generique) ============================ */

.ph-page-wrap { max-width: 980px; margin: 0 auto; padding: 40px 0 64px; }
.ph-page-title {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -.8px;
    margin: 0 0 24px;
}

/* ============================== ACHAT D'OGRINES ============================== */

/* Banniere de lancement : disparait toute seule si le bonus est mis a 0. */
.og-banniere {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(160deg, rgba(78,208,196,.12), rgba(139,92,214,.08));
    border: 1px solid rgba(78, 208, 196, .34);
    border-radius: var(--ph-radius);
    padding: 20px 22px;
    margin: 26px 0 30px;
}
.og-banniere-tag {
    flex: none;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ph-on-cyan);
    background: linear-gradient(180deg, var(--ph-cyan-hi), var(--ph-cyan));
    padding: 6px 12px;
    border-radius: 999px;
    margin-top: 2px;
}
.og-banniere strong { color: var(--ph-text); }
.og-banniere p { margin: 6px 0 0; color: var(--ph-muted); font-size: .94rem; line-height: 1.6; }
.og-banniere p strong { color: var(--ph-cyan); }

/* La grille d'offres */
.og-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin: 30px 0;
}

.og-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ph-panel);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    padding: 24px 22px 22px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.og-carte:hover {
    transform: translateY(-4px);
    border-color: rgba(78, 208, 196, .34);
    box-shadow: var(--ph-shadow);
}
/* L'offre au meilleur rapport ogrines/euro — calculee, pas decretee. */
.og-carte-phare {
    border-color: rgba(78, 208, 196, .5);
    background: linear-gradient(180deg, var(--ph-panel-2), var(--ph-panel));
    box-shadow: 0 0 0 1px rgba(78, 208, 196, .18), var(--ph-shadow);
}
.og-ruban {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ph-on-cyan);
    background: linear-gradient(180deg, var(--ph-cyan-hi), var(--ph-cyan));
    padding: 5px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(78, 208, 196, .3);
}

.og-prix {
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ph-faint);
    margin-bottom: 10px;
}
.og-montant { display: flex; align-items: baseline; gap: 7px; margin-bottom: 14px; }
.og-montant strong {
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--ph-cyan);
    line-height: 1;
}
.og-montant span { font-size: .88rem; color: var(--ph-muted); }

.og-detail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.og-detail > span {
    font-size: .74rem;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--ph-line);
    color: var(--ph-muted);
}
.og-plus { color: var(--ph-text) !important; }
.og-plus-ouverture {
    color: var(--ph-cyan) !important;
    background: rgba(78, 208, 196, .10) !important;
    border-color: rgba(78, 208, 196, .3) !important;
    font-weight: 700;
}

.og-gain { font-size: .84rem; color: var(--ph-muted); margin-bottom: 18px; }
.og-gain strong { color: var(--ph-text); }
.og-gain-vide { visibility: hidden; }

.og-btn { width: 100%; margin-top: auto; }

.og-pied {
    color: var(--ph-muted);
    font-size: .9rem;
    line-height: 1.7;
    border-top: 1px solid var(--ph-line);
    padding-top: 18px;
}
.og-pied strong { color: var(--ph-text); }

@media (max-width: 575px) {
    .og-banniere { flex-direction: column; gap: 10px; }
    .og-grille { grid-template-columns: 1fr; }
}

/* Note sous les cartes de telechargement : la variante Intel et, surtout,
   l'etape de premier lancement macOS. Sans cet avertissement un joueur croit
   que le fichier est verole quand Gatekeeper le bloque. */
.ph-os-note {
    margin: 14px 0 4px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(78, 208, 196, .06);
    border: 1px solid rgba(78, 208, 196, .18);
    color: var(--ph-muted);
    font-size: .88rem;
    line-height: 1.6;
}
.ph-os-note code {
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--ph-line);
    border-radius: 6px;
    padding: 1px 6px;
    color: var(--ph-cyan);
    font-size: .85em;
}
.ph-os-note strong { color: var(--ph-text); }

/* Ligne de commande a copier (etape macOS). Elle doit rester selectionnable
   d'un bloc et defiler horizontalement plutot que de casser la mise en page :
   une commande coupee au mauvais endroit est une commande qui echoue. */
.ph-cmd {
    margin: 10px 0 4px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid var(--ph-line);
    border-left: 3px solid var(--ph-cyan);
    border-radius: 10px;
    overflow-x: auto;
    white-space: pre;
}
.ph-cmd code {
    color: var(--ph-cyan-hi);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    background: none;
    border: none;
    padding: 0;
}

/* Avertissement franc : une information qui evite au joueur de telecharger
   1 Go pour rien merite d'etre vue, pas glissee dans un paragraphe gris. */
.ph-os-alerte {
    background: rgba(255, 176, 32, .07);
    border-color: rgba(255, 176, 32, .28);
}
.ph-os-alerte strong { color: #FFC559; }