/* =========================================================================
   Phaeris : couche responsive (27/09/2026)
   Chargee EN DERNIER, apres portal.css (voir layouts/base.blade.php).
   Elle adapte le site aux telephones et aux tablettes. Au-dessus de 900 px,
   le rendu bureau ne change pas, a part des filets de securite sans effet
   visible (images fluides, mots trop longs, pagination qui passe a la ligne).

   Paliers :
     900 px  tablette : menu burger, cibles tactiles de 44 px, texte lisible ;
     640 px  telephone : une colonne ;
     480 px  petit telephone : la barre ne garde que l'action principale ;
     380 px  tres petit ecran.

   Piege connu du theme : une piste de grille « 1fr » ne retrecit pas sous la
   largeur de son contenu. D'ou les minmax(0, 1fr) et min-width: 0 ci-dessous.
   ========================================================================= */

/* ------------------------------------------------ filets, toutes largeurs */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Une URL ou un mot sans espace ne doit jamais elargir la page. */
body { overflow-wrap: break-word; }

/* Medias fluides : jamais plus larges que leur cadre. max-width seulement,
   pas width: 100% : une image n'est jamais etiree au-dela de sa taille. */
img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
/* Seule illustration qui deborde volontairement (son panneau la rogne). */
.pr-account-art { max-width: none; }

/* Bouton colle dans une page CMS : son libelle passe a la ligne plutot que
   d'elargir la page (cas de /recompenses a 320 px). */
.ph-article .btn, .pr-paper .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Une longue liste de pages ne deborde pas : elle passe a la ligne. */
.pagination { flex-wrap: wrap; }

/* Tableaux du contenu (wiki, actualites, pages CMS) : world.js les place
   dans ce cadre, qui defile horizontalement au lieu d'elargir la page. */
.ph-table-scroll { overflow-x: auto; margin: 20px 0; }
.ph-table-scroll > table { margin: 0; }
.table-responsive, .ph-table-scroll { overscroll-behavior-x: contain; }
.table-responsive:focus-visible, .ph-table-scroll:focus-visible { outline: 3px solid #f2d993; outline-offset: 2px; }

/* Classements : une ombre au bord signale qu'il reste des colonnes a voir.
   Les caches (fond du registre) suivent le contenu, les ombres restent au
   bord : sans defilement possible, rien n'apparait. */
.pr-record .table-responsive {
    background:
        linear-gradient(90deg, #e7e5d2 35%, #e7e5d200) 0 0 / 32px 100% no-repeat local,
        linear-gradient(270deg, #e7e5d2 35%, #e7e5d200) 100% 0 / 32px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, #1b3a4259, #1b3a4200) 0 0 / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, #1b3a4259, #1b3a4200) 100% 0 / 14px 100% no-repeat scroll;
}

/* Elements propres au mobile, caches ailleurs. */
.ph-nav-account { display: none; }
.wk-toc-toggle { display: none; }

@keyframes ph-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* =================================================== tablette : <= 900 px */

@media (max-width: 900px) {

    /* ---- barre de navigation : logo | action | burger, panneau dessous */
    .ph-nav-inner { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 0; }
    .ph-brand { width: auto; min-width: 0; min-height: 44px; }
    .ph-brand small { font-size: 10px; }
    .ph-nav-actions { gap: 8px; min-width: 0; }
    .ph-nav-actions .ph-btn { min-height: 44px; padding: 10px 16px; font-size: 14px; gap: 6px; }
    .pw-menu-toggle {
        display: inline-grid; place-items: center;
        width: 44px; height: 44px; padding: 0;
        font-size: 26px; line-height: 1;
    }
    /* Sans JavaScript, les liens restent affiches : le bouton ne servirait a rien. */
    html:not(.pw-navigation-ready) .pw-menu-toggle { display: none; }
    .ph-nav .dropdown-item { display: flex; align-items: center; gap: 8px; min-height: 44px; }

    .ph-links {
        flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
        gap: 2px; margin: 10px 0 0; padding: 8px 0 12px;
    }
    .ph-links a {
        flex: none; justify-content: flex-start; gap: 12px;
        min-height: 48px; padding: 12px 14px;
        font-size: 16px; text-align: left; border-radius: 4px;
    }
    .ph-links a > .bi { flex: none; width: 22px; font-size: 18px; line-height: 1; text-align: center; }
    .ph-links a > img { flex: none; width: 20px; height: 20px; margin-inline: 1px; }
    .ph-links a > svg { flex: none; width: 22px; }
    .ph-links a.active::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
    .ph-links.is-open, .ph-nav-account.is-open { animation: ph-menu-in .18s ease-out; }
    .ph-nav-account { grid-column: 1 / -1; grid-row: 3; }

    /* ---- surtitres : 8 a 10 px sur bureau, illisibles au doigt */
    .pr-eyebrow,
    .pr-stage > .pr-eyebrow,
    .pr-board-title .pr-eyebrow,
    .pr-start .pr-eyebrow,
    .pr-masthead .pr-eyebrow,
    .pr-side .pr-eyebrow,
    .pr-account-nav .pr-eyebrow,
    .pr-gate-story .pr-eyebrow,
    .pr-section-title .pr-eyebrow { font-size: 12px; letter-spacing: .14em; }

    /* ---- formulaires et boutons : 44 px au doigt, 16 px pour que iOS
            ne zoome pas sur le champ au moment de la saisie */
    .btn:not(.btn-close) { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; }
    .form-control, .form-select { min-height: 44px; font-size: 16px; }
    .form-check:not(.form-check-inline) { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-left: 0; margin-bottom: 0; }
    .form-check:not(.form-check-inline) .form-check-input { float: none; flex: none; margin: 0; }
    .form-check:not(.form-check-inline):not(.form-switch) .form-check-input { width: 1.25em; height: 1.25em; }
    .form-check-label { padding-block: 8px; }
    .pagination { gap: 6px; }
    .pagination .page-link { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

    /* ---- accueil */
    .pr-home-grid { grid-template-columns: minmax(0, 1fr); }
    .pr-home-grid > * { min-width: 0; }
    .pr-village { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-stage-copy p { font-size: 16px; line-height: 1.6; }
    .pr-stage-copy small { font-size: 12px; letter-spacing: .04em; }
    .pr-play small { font-size: 12px; letter-spacing: .08em; }
    .pr-stage .pw-motion { justify-content: center; width: 44px; height: 44px; padding: 0; }
    .pr-notice time { font-size: 13px; }
    .pr-notice h3 { font-size: 17px; }
    .pr-notice span { font-size: 14px; }
    .pr-board-link { align-items: center; min-height: 48px; font-size: 15px; }
    .pr-server-list { font-size: 15px; }
    .pr-server small { font-size: 13px; }
    .pr-signposts strong { font-size: 16px; }
    .pr-signposts small { font-size: 14px; line-height: 1.45; }
    .pr-section-title > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
    .pr-tag { font-size: 12px; }
    /* Le bloc texte prend toute la carte : les pourcentages ci-dessous se
       calculent sur la carte, pas sur la largeur du titre. */
    .pr-destination > div { flex: 1 1 auto; min-width: 0; }
    .pr-destination p { max-width: 60%; font-size: 15px; line-height: 1.5; }
    .pr-destination b { font-size: 14px; }
    .pr-start li a { min-height: 44px; font-size: 16px; }

    /* ---- en-tete des rubriques */
    .pr-breadcrumb { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 6px; font-size: 13px; }
    .pr-masthead h1, .pr-masthead .pr-masthead-title { font-size: clamp(28px, 22.6px + 1vw, 31.5px); }
    .pr-lead, .pr-masthead .pr-lead { max-width: 34rem; font-size: 16px; line-height: 1.6; }

    /* ---- colonne laterale des rubriques */
    .pr-side p { font-size: 16px; line-height: 1.65; }
    .pr-side > a, .pr-side nav > a { display: flex; align-items: center; min-height: 44px; padding-block: 10px; font-size: 15px; }
    .pr-side ol { font-size: 15px; }

    /* ---- telechargement */
    .pr-platform p { font-size: 16px; }
    .pr-platform .ph-btn { min-height: 48px; padding: 12px 18px; font-size: 15px; }
    .pr-install-steps p { font-size: 16px; line-height: 1.7; }
    .pr-install-steps details { font-size: 15px; }
    .pr-install-steps summary { padding-block: 11px; }

    /* ---- votes */
    .pr-vote-rewards .vt-intro { font-size: 16px; line-height: 1.7; }
    .vt-aide { font-size: 16px; }
    .vt-note { font-size: 16px; }
    .pr-vote-action .alert { font-size: 15px; }
    .vt-tranche-votes, .vt-palier-nom { font-size: 14px; }
    .vt-palier-etat, .vt-tranche-etat { font-size: 13px; }

    /* ---- actualites */
    .pr-news-feature h2 { font-size: clamp(22px, 17px + 1.6vw, 29px); }
    .pr-news-feature p { font-size: 16px; }
    .pr-news-feature time, .pr-news-entry time { font-size: 13px; }
    .pr-news-feature b { font-size: 14px; }
    .pr-news-entry p { font-size: 16px; line-height: 1.6; }
    .ph-post-title { font-size: clamp(26px, 18px + 2.6vw, 42px); }
    .ph-post-meta { font-size: 14px; }
    .ph-back { min-height: 44px; margin-bottom: 8px; font-size: 15px; }
    .ph-article a.ph-link-cta { display: inline-block; padding-block: 11px; }
    .ph-post-signature { font-size: 14px; }

    /* ---- wiki */
    .pr-library-search input { font-size: 16px; }
    .pr-library-search button { min-width: 52px; }
    .pr-guide-list a strong { font-size: 16px; }
    .pr-guide-list a small { font-size: 14px; }
    .wk-main .ph-article { font-size: 16px; }
    .wk-main .wk-title { font-size: clamp(24px, 19px + 1.5vw, 32px); }
    .wk-crumb { flex-wrap: wrap; align-items: center; font-size: 14px; }
    .wk-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
    .wk-nav-home { min-height: 44px; margin-bottom: 8px; }
    .wk-nav-search input { min-height: 44px; font-size: 16px; }
    .wk-nav-cat { font-size: 12px; }
    .wk-nav-item { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
    .pr-wiki-tree summary { padding-block: 12px; font-size: 15px; line-height: 20px; }
    .wk-toc-link { font-size: 14px; }
    .wk-foot { font-size: 14px; }
    .wk-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

    /* ---- classements */
    .pr-subnav a { font-size: 14px; }
    .pr-champion strong { font-size: 14px; }
    .pr-champion small { font-size: 12px; }
    .pr-medal { font-size: 12px; }
    .pr-record-head span { font-size: 13px; }
    .pr-record th, .pr-record td { font-size: 14px; }
    .pr-record thead th { font-size: 12px; letter-spacing: .06em; }
    .pr-ladder-note { font-size: 16px; }
    .pr-empty { font-size: 16px; }

    /* ---- connexion et inscription */
    .pr-gate-form .form-label, .pr-gate-form .form-check-label { font-size: 15px; }
    .pr-gate-story p:not(.pr-eyebrow) { font-size: 16px; }
    .pr-gate-story h2 { font-size: clamp(24px, 16px + 2vw, 32px); }
    .pr-gate-form h1 { font-size: clamp(24px, 20px + 1.2vw, 30px); }
    .pr-gate-return { font-size: 15px; }
    .pr-gate-return a, .pr-gate-form a.float-md-end { display: inline-flex; align-items: center; min-height: 44px; }

    /* ---- espace compte (profil, comptes de jeu, pages d'erreur) */
    .pr-account-nav a, .pr-account-nav nav a { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
    .pr-account-content h1 { font-size: clamp(24px, 19px + 1.4vw, 31px); }
    .pr-account-content .table { font-size: 14px; }
    .pr-account-content .nav-link { display: flex; align-items: center; min-height: 44px; font-size: 14px; }

    /* ---- pied de page */
    .ph-footer p { font-size: 15px; }
    .ph-footer .pw-footer-note { font-size: 13px !important; }
    .ph-footer-links li { margin-bottom: 0; }
    .ph-footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
    .ph-footer-bottom { font-size: 13px; }
    .ph-social a { width: 44px; height: 44px; }
}

/* Tablette : les liens du menu sur deux colonnes. */
@media (min-width: 600px) and (max-width: 900px) {
    .ph-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}

/* Tablette : trois cartes « Choisis ton chemin » de 230 px ne laissent pas la
   place au texte ET a l'illustration. Deux colonnes, la boutique en bandeau. */
@media (min-width: 641px) and (max-width: 900px) {
    /* L'Iop et la Cra (285 px) recouvraient le texte et le bouton « Jouer » :
       leur taille suit maintenant la largeur de l'ecran. */
    .pr-stage-iop { width: clamp(170px, 27vw, 250px); }
    .pr-stage-cra { width: clamp(165px, 26vw, 240px); }
    /* Colonne laterale un peu plus large : le texte y passe a 16 px. */
    .pr-page-grid { grid-template-columns: 210px minmax(0, 1fr); }
    .pr-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-destinations > .pr-shop { grid-column: 1 / -1; }
    .pr-destination img { right: -30px; opacity: 1; }
    .pr-destination p { max-width: 55%; }
}

/* ================================================== telephone : <= 640 px */

@media (max-width: 640px) {
    /* Pseudo trop long : points de suspension (il faut un bloc, pas un flex). */
    .ph-nav-actions .dropdown-toggle { display: block; max-width: 160px; line-height: 24px; }
    .pr-village { grid-template-columns: minmax(0, 1fr); }
    /* Place sous le texte pour l'Iop et la Cra : ils ne mordent plus la
       mention « Windows & macOS ». */
    .pr-stage { padding-bottom: 150px; }
    /* Cartes « Choisis ton chemin » : l'illustration descend dans le coin et
       ne recouvre plus la fin du titre. */
    .pr-destination p { max-width: 58%; }
    .pr-destination img { width: 175px; height: 175px; right: -18px; bottom: -14px; }
    .pr-dungeon img { width: 150px; height: 150px; right: -4px; bottom: 0; }
    .pr-shop img { width: 155px; height: 155px; right: -12px; bottom: -6px; }

    /* Connexion : portal.css masquait le premier <br> du titre, ce qui collait
       deux mots (« aussiont »). Le retour a la ligne est rendu. */
    .pr-gate-story h2 br:first-child { display: inline; }

    /* Votes : tranches et paliers deux par ligne (minmax(150px) n'en placait
       qu'un a 375 px, pour 1 px de trop). */
    .vt-tranches, .vt-paliers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vt-tranche, .vt-palier { padding: 14px 10px; }

    /* Rubriques sur une colonne : la colonne laterale reste en tete, compacte. */
    .pr-page-grid > .pr-side nav { gap: 0 18px; }
    .pr-page-grid > .pr-side nav a { min-height: 44px; padding: 8px 0; }

    /* Classements : colonnes resserrees, le tableau defile dans son cadre. */
    .pr-record th, .pr-record td { padding: 10px 8px; }
    .pr-record td.pr-player { gap: 8px; }
    .pr-player img { width: 28px; height: 32px; }

    /* Wiki : sommaire replie derriere un bouton (world.js), arbre replie. */
    .wk-nav { padding: 4px 16px; }
    .wk-nav .pr-wiki-tree[open] { max-height: min(440px, 62vh); padding-bottom: 12px; }
    .wk-toc { padding: 4px 16px; }
    /* phaeris.css le masque sous 1200 px ; sur telephone il revient, replie,
       en tete de page (un sommaire vide reste masque par portal.css). */
    .pw-js .wk-toc { display: block; }
    .pw-js .wk-toc-title { display: none; }
    .pw-js .wk-toc-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        width: 100%; min-height: 44px; padding: 0;
        background: none; border: 0; color: #c4e6d7; text-align: left;
        font: 700 15px 'Trebuchet MS', sans-serif; cursor: pointer;
    }
    .pw-js .wk-toc-toggle .bi { transition: transform .2s; }
    .pw-js .wk-toc.is-open .wk-toc-toggle .bi { transform: rotate(180deg); }
    .pw-js .wk-toc:not(.is-open) #wikiToc { display: none; }
    .pw-js .wk-toc.is-open #wikiToc { padding-bottom: 12px; }
    .wk-toc-link { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
    .wk-toc-link.is-sub { font-size: 14px; }
}

/* Deux cartes de telechargement cote a cote ne tiennent plus. */
@media (max-width: 560px) {
    .pr-downloads { grid-template-columns: minmax(0, 1fr); }
    .pr-platform .ph-btn { width: 100%; }
}

/* =========================================== petit telephone : <= 479 px */

@media (max-width: 479px) {
    /* La barre garde le logo, l'action principale et le burger ;
       connexion ou compte passent dans le panneau du menu. */
    .ph-nav-actions .ph-btn-ghost, .ph-nav-actions .dropdown { display: none; }
    .ph-nav-account {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px;
        margin: 2px 0 0; padding: 14px 0 16px; border-top: 1px solid #294754;
    }
    .pw-navigation-ready .ph-nav-account:not(.is-open) { display: none; }
    .ph-nav-account .ph-btn { min-height: 48px; padding: 12px; font-size: 15px; }
    .ph-nav-account-name {
        grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
        color: #9bdfd5; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    }
    .ph-nav-account-link {
        grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
        min-height: 48px; padding: 12px 14px; border-radius: 4px;
        color: #c7d8df; font-size: 16px; font-weight: 650;
    }
    .ph-nav-account-link:hover { background: #437c7c25; color: #d4fff3; }
    .ph-nav-account-link > .bi { flex: none; width: 22px; font-size: 18px; line-height: 1; text-align: center; }
    .ph-nav-account-link > img { flex: none; width: 20px; height: 20px; object-fit: contain; margin-inline: 1px; }
    .ph-nav-account-link strong { color: #78d3c8; font-variant-numeric: tabular-nums; }

    /* Classement PvM ou PvP : tient sans defilement a 375 px avec des noms
       usuels ; au-dela (noms longs, Kolizeum), le tableau defile chez lui. */
    .pr-record th, .pr-record td { padding-inline: 6px; }
    .pr-record thead th { letter-spacing: .03em; }
    .pr-record td.pr-player { gap: 6px; }
    .pr-player img { width: 24px; height: 28px; }
}

/* Le nom du site tient a nouveau depuis que la barre n'a plus qu'un bouton. */
@media (max-width: 360px) {
    .ph-brand > span { display: block; }
}

/* =============================================== tres petit ecran : <= 380 */

@media (max-width: 380px) {
    .pr-stage-iop, .pr-stage-cra { width: 132px; }
    .pr-podium { gap: 6px; }
    .pr-champion strong { font-size: 13px; }
    .pr-subnav a { padding-inline: 4px; font-size: 13px; }
    .pr-destination p { max-width: 62%; }
}

/* Les animations d'interface suivent la preference systeme. */
@media (prefers-reduced-motion: reduce) {
    .ph-links.is-open, .ph-nav-account.is-open { animation: none; }
    .pw-js .wk-toc-toggle .bi { transition: none; }
}