@font-face { font-family: "Amaranth"; src: url("/fonts/Amaranth-Regular.ttf") format("truetype"); }
@font-face { font-family: "Comfortaa"; src: url("/fonts/Comfortaa-Regular.ttf") format("truetype"); }

/* Variables scopees a .profil_page (plutot que :root) : ce fragment est
   inclus a la fois sur la page /profil standalone et dans la vue interne du jeu
   (index.html) - aide.css/classement.css declarent des noms de variables
   proches (--ink/--encre, --orange...) avec des valeurs differentes, un
   :root global les ferait s'ecraser silencieusement des que les 3 pages sont
   chargees en meme temps. */
.profil_page { --vert: #397a2e; --vert-fonce: #24561f; --vert-pale: #edf4e9; --orange: #d86f1f; --encre: #263126; --texte-secondaire: #667066; --bordure: #dce3d9; --fond: #f7f9f5; --danger: #a33c3c; }
.profil_page, .profil_page * { box-sizing: border-box; }
.profil_page [hidden] { display: none !important; }
/* Fond exterieur de la page autonome. La vue interne fournit son propre fond
   plein ecran dans pages-secondaires-spa.css. */
body.page-profil { margin: 0; min-height: 100vh; color: #263126; font-family: "Comfortaa", sans-serif; background-color: #589306; background-image: url(/images/padding.png); }
.profil_page button, .profil_page input { font: inherit; }
.profil_page button { letter-spacing: 0; }

.profil_page { position: relative; z-index: 1; width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 80px 0 44px; }
.profil_page .profil_surface { overflow: hidden; background: #fff; border: 1px solid rgba(30, 63, 24, .18); border-radius: 8px; box-shadow: 0 20px 50px rgba(17, 43, 13, .27); }

.profil_page .profil_entete { min-height: 190px; display: grid; grid-template-columns: minmax(260px, 1fr) 150px minmax(230px, auto); gap: 24px; align-items: center; padding: 28px 32px; border-bottom: 1px solid var(--bordure); background: #fff; }
.profil_page .profil_identite { min-width: 0; display: flex; align-items: center; gap: 18px; }
.profil_page .avatar_profil_page { position: relative; flex: 0 0 104px; width: 104px; height: 104px; overflow: visible; border-radius: 50%; background: var(--fond); }
.profil_page .avatar_profil_page > img { position: relative; z-index: 2; width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.profil_page .modifier_avatar_profil { position: absolute; z-index: 4; right: -2px; bottom: -2px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--vert); color: #fff; font-size: .8rem; cursor: pointer; box-shadow: 0 2px 6px rgba(17, 43, 13, .3); }
.profil_page .modifier_avatar_profil:hover, .profil_page .modifier_avatar_profil:focus-visible { background: var(--vert-fonce); outline: none; }
.profil_page .profil_identite_texte { min-width: 0; }
.profil_page .sur_titre { margin: 0 0 6px; color: var(--vert); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.profil_page .modifier_pseudo_profil { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--vert); font-size: .68rem; cursor: pointer; vertical-align: middle; }
.profil_page .modifier_pseudo_profil:hover, .profil_page .modifier_pseudo_profil:focus-visible { color: var(--vert-fonce); outline: none; }
.profil_page h1, .profil_page h2, .profil_page h3 { margin: 0; font-family: "Amaranth", sans-serif; font-weight: 400; letter-spacing: 0; }
.profil_page h1 { max-width: 100%; font-size: 2.15rem; overflow-wrap: anywhere; }
.profil_page h2 { font-size: 1.55rem; color: var(--encre); }
.profil_page h3 { font-size: 1.15rem; color: var(--encre); }
.profil_page .texte_secondaire { margin: 6px 0 0; color: var(--texte-secondaire); font-size: .76rem; }
.profil_page .profil_niveau { min-height: 132px; display: flex; flex-direction: column; justify-content: center; padding: 16px; border-left: 1px solid var(--bordure); border-right: 1px solid var(--bordure); text-align: center; }
.profil_page .profil_niveau span, .profil_page .profil_palier span { color: var(--texte-secondaire); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.profil_page .profil_niveau strong { color: var(--vert-fonce); font-family: "Amaranth", sans-serif; font-size: 3.5rem; line-height: 1; }
.profil_page .profil_niveau small, .profil_page .profil_palier small { display: block; margin-top: 5px; color: var(--texte-secondaire); font-size: .66rem; line-height: 1.35; }
.profil_page .barre_progression, .profil_page .barre_mode { width: 100%; height: 6px; overflow: hidden; margin-top: 8px; border-radius: 3px; background: #dde6d9; }
.profil_page .barre_progression i, .profil_page .barre_mode i { display: block; width: 0; height: 100%; background: var(--orange); transition: width .25s ease; }
.profil_page .profil_palier { display: flex; align-items: center; gap: 13px; }
.profil_page .avatar_profil_page .etoiles_palier { position: absolute; z-index: 3; inset: 0; overflow: visible; pointer-events: none; }
.profil_page .avatar_profil_page .bordure_palier_img { filter: drop-shadow(0 3px 5px rgba(35, 20, 0, .3)); }
.profil_page .profil_palier strong { display: block; margin-top: 3px; color: var(--encre); font-family: "Amaranth", sans-serif; font-size: 1.35rem; }
.profil_page .bouton_secondaire, .profil_page .profil_navigation button, .profil_page .pagination_parties button, .profil_page .ligne_boutons_profil button { min-height: 40px; border: 1px solid var(--bordure); border-radius: 6px; background: #fff; color: var(--encre); cursor: pointer; }
.profil_page .bouton_secondaire { padding: 0 14px; white-space: nowrap; }
.profil_page .bouton_secondaire:hover, .profil_page .pagination_parties button:hover:not(:disabled) { border-color: var(--vert); color: var(--vert); }

.profil_page .profil_navigation { display: flex; overflow-x: auto; padding: 0 22px; background: #f5f8f3; border-bottom: 1px solid var(--bordure); scrollbar-width: thin; }
.profil_page .profil_navigation button { position: relative; flex: 1 0 135px; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: #5f695f; font-size: .78rem; font-weight: 700; }
.profil_page .profil_navigation button > i { flex: 0 0 auto; font-size: .9rem; }
.profil_page .profil_navigation button::after { content: ""; position: absolute; right: 12px; bottom: 0; left: 12px; height: 3px; background: transparent; }
.profil_page .profil_navigation button.actif { color: var(--vert-fonce); }
.profil_page .profil_navigation button.actif::after { background: var(--orange); }
.profil_page .profil_navigation button:focus-visible { outline: 2px solid var(--orange); outline-offset: -3px; }

.profil_page .profil_contenu { padding: 28px 32px 34px; }
.profil_page .profil_panneau { min-height: 430px; }
.profil_page .titre_panneau { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.profil_page .etiquette { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #d8e5d2; border-radius: 6px; background: var(--vert-pale); color: var(--vert-fonce); font-size: .68rem; font-weight: 700; }
.profil_page .etiquette.prive { border-color: #eadcc8; background: #fff5e8; color: #7b4b17; }
.profil_page .grille_indicateurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.profil_page .grille_indicateurs.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profil_page .indicateur { min-height: 88px; padding: 12px 18px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond); }
.profil_page .indicateur.accent { border-color: #dfb38c; background: #fff7ef; }
.profil_page .indicateur span, .profil_page .classement_resume span, .profil_page .mode_carte span { display: block; color: var(--texte-secondaire); font-size: .69rem; font-weight: 700; text-transform: uppercase; }
.profil_page .indicateur strong { display: block; margin: 8px 0 0; color: var(--vert-fonce); font-family: "Amaranth", sans-serif; font-size: 1.8rem; overflow-wrap: anywhere; }
.profil_page .indicateur.accent strong { color: #a84f12; }
.profil_page .indicateur small, .profil_page .classement_resume small, .profil_page .mode_carte strong { color: var(--texte-secondaire); font-size: .68rem; line-height: 1.45; }
.profil_page .indicateur .valeur_indicateur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; margin-top: 8px; }
.profil_page .indicateur .valeur_indicateur strong { margin: 0; }
.profil_page .deux_colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.profil_page .carte_contenu { min-width: 0; padding: 20px; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; }
.profil_page .entete_carte { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profil_page .entete_carte > small { color: var(--texte-secondaire); font-size: .65rem; }
.profil_page .resume_palier { display: flex; align-items: center; gap: 18px; min-height: 110px; margin-top: 12px; padding: 14px; background: var(--fond); border-radius: 6px; }
.profil_page .resume_palier img { width: 76px; height: 76px; object-fit: contain; }
.profil_page .resume_palier strong, .profil_page .resume_palier span { display: block; }
.profil_page .resume_palier strong { font-size: .88rem; }
.profil_page .resume_palier span { margin-top: 6px; color: var(--texte-secondaire); font-size: .72rem; }
.profil_page .relations_grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; overflow: hidden; border: 1px solid var(--bordure); border-radius: 6px; background: var(--bordure); }
.profil_page .relations_grille > div { min-height: 110px; padding: 15px; background: var(--fond); }
.profil_page .relations_grille span, .profil_page .relations_grille strong, .profil_page .relations_grille small { display: block; }
.profil_page .relations_grille span { color: var(--texte-secondaire); font-size: .64rem; font-weight: 700; text-transform: uppercase; }
.profil_page .relations_grille strong { margin: 9px 0 4px; color: var(--vert-fonce); font-size: .92rem; overflow-wrap: anywhere; }
.profil_page .relations_grille small { color: var(--texte-secondaire); font-size: .66rem; line-height: 1.45; }

.profil_page .classement_resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--bordure); border-radius: 8px; background: var(--bordure); }
.profil_page .classement_resume > div { min-height: 120px; padding: 20px; background: var(--fond); }
.profil_page .classement_resume strong { display: block; margin: 9px 0 4px; color: var(--vert-fonce); font-family: "Amaranth", sans-serif; font-size: 1.8rem; }
.profil_page .liste_segments { display: grid; gap: 8px; margin-top: 14px; }
.profil_page .ligne_segment { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--bordure); }
.profil_page .ligne_segment:last-child { border-bottom: 0; }
.profil_page .ligne_segment strong { font-size: .76rem; overflow-wrap: anywhere; }
.profil_page .ligne_segment span { color: var(--vert-fonce); font-size: .76rem; font-weight: 700; }
.profil_page .ligne_segment small { color: var(--texte-secondaire); font-size: .65rem; }
.profil_page .etat_vide { margin: 18px 0; color: var(--texte-secondaire); font-size: .76rem; text-align: center; }

/* CPT-74/75 : un seul badge par famille (le plus avance obtenu), voir
   Succes.js#getMeilleursParFamille - jamais les paliers intermediaires. */
.profil_page .succes_liste { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.profil_page .succes_liste .etat_vide { width: 100%; margin: 6px 0; }
.profil_page .succes_badge { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--fond); }
.profil_page .succes_badge img { width: 32px; height: 32px; object-fit: contain; }
.profil_page .succes_badge span { color: var(--vert-fonce); font-size: .74rem; font-weight: 700; }
.profil_page .tableau_defilant { overflow-x: auto; margin-top: 14px; }
.profil_page table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.profil_page th, .profil_page td { padding: 11px 8px; border-bottom: 1px solid var(--bordure); text-align: left; white-space: nowrap; }
.profil_page th { color: var(--texte-secondaire); font-size: .63rem; text-transform: uppercase; }
.profil_page .liste_statistiques, .profil_page .liste_compte { margin: 14px 0 0; }
.profil_page .liste_statistiques > div, .profil_page .liste_compte > div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--bordure); }
.profil_page .liste_statistiques > div:last-child, .profil_page .liste_compte > div:last-child { border-bottom: 0; }
.profil_page .liste_statistiques dt, .profil_page .liste_compte dt { color: var(--texte-secondaire); font-size: .72rem; }
.profil_page .liste_statistiques dd, .profil_page .liste_compte dd { margin: 0; max-width: 62%; font-size: .76rem; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.profil_page .modes_grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.profil_page .mode_carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 18px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond); }
.profil_page .mode_carte b { color: var(--vert-fonce); font-family: "Amaranth", sans-serif; font-size: 1.55rem; }
.profil_page .mode_carte strong { display: block; margin-top: 5px; }
.profil_page .mode_taux { text-align: right; }
.profil_page .mode_taux small { display: block; margin-top: 2px; color: var(--texte-secondaire); font-size: .6rem; }
.profil_page .mode_carte .barre_mode { grid-column: 1 / -1; margin-top: 0; }
.profil_page .historique_parties { padding-bottom: 14px; }
.profil_page .liste_parties { display: grid; margin-top: 12px; }
.profil_page .entree_partie:last-child { border-bottom: 0; }
.profil_page .entree_partie { border-bottom: 1px solid var(--bordure); }
.profil_page .ligne_partie { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 0; padding: 7px 8px; border-radius: 5px; cursor: pointer; }
.profil_page .ligne_partie:hover { background-color: rgba(0, 0, 0, .03); }
.profil_page .ligne_partie:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }
.profil_page .detail_partie { margin: 0 8px 14px; padding: 16px 18px; border: 1px solid var(--bordure); border-radius: 10px; background: linear-gradient(160deg, var(--fond), #fff 70%); animation: apparition_detail_partie .18s ease; }
@keyframes apparition_detail_partie { from { opacity: 0; transform: translateY(-4px); } }
.profil_page .detail_partie_entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px dashed var(--bordure); }
.profil_page .detail_partie_entete code { color: var(--texte-secondaire); font-size: .66rem; font-family: monospace; }
.profil_page .detail_partie_entete span { color: var(--texte-secondaire); font-size: .68rem; }
.profil_page .detail_partie_stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.profil_page .stat_detail_partie { display: flex; align-items: center; gap: 9px; min-width: 118px; padding: 9px 12px; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; }
.profil_page .stat_detail_partie i { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vert-pale); color: var(--vert-fonce); font-size: .78rem; }
.profil_page .stat_detail_partie div { display: flex; flex-direction: column; }
.profil_page .stat_detail_partie strong { font-size: .82rem; line-height: 1.15; }
.profil_page .stat_detail_partie span { color: var(--texte-secondaire); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.profil_page .detail_partie_sieges { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.profil_page .siege_detail_partie { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; }
.profil_page .siege_detail_partie.vide { opacity: .5; }
.profil_page .siege_detail_partie .avatar_partie_compact { flex: none; width: 32px; height: 32px; font-size: .8rem; }
.profil_page .siege_detail_partie .avatar_partie_compact.ia, .profil_page .siege_detail_partie .avatar_partie_compact.invite { font-size: 1rem; }
.profil_page .siege_detail_partie div { display: flex; flex-direction: column; min-width: 0; }
.profil_page .siege_detail_partie strong { font-size: .74rem; overflow-wrap: anywhere; }
.profil_page .siege_detail_partie span { color: var(--texte-secondaire); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.profil_page .ligne_partie.victoire { background: linear-gradient(to right, rgba(58, 138, 58, .16), rgba(58, 138, 58, 0) 62%); }
.profil_page .ligne_partie.defaite { background: linear-gradient(to right, rgba(176, 58, 58, .15), rgba(176, 58, 58, 0) 62%); }
.profil_page .ligne_partie.abandon { background: linear-gradient(to right, rgba(120, 120, 120, .18), rgba(120, 120, 120, 0) 62%); }
.profil_page .colonne_resultat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.profil_page .resultat_partie { width: 34px; height: 34px; border-radius: 50%; background: #eaf4e7; color: var(--vert-fonce); font-size: 1.15rem; display: flex; align-items: center; justify-content: center; }
.profil_page .ligne_partie.defaite .resultat_partie { background: #f9eaea; color: #8c3333; }
.profil_page .ligne_partie.abandon .resultat_partie { background: #ececec; color: #6b6b6b; }
.profil_page .date_partie_condensee { color: var(--texte-secondaire); font-size: .58rem; line-height: 1.25; text-align: center; white-space: nowrap; }
.profil_page .ligne_partie strong, .profil_page .ligne_partie small { display: block; }
.profil_page .ligne_partie strong { font-size: .74rem; line-height: 1.3; overflow-wrap: anywhere; }
.profil_page .ligne_partie small { margin-top: 3px; color: var(--texte-secondaire); font-size: .62rem; line-height: 1.3; }

.profil_page .avatars_partie { display: flex; gap: 6px; margin: 4px 0; }
.profil_page .avatar_partie_compact { position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background-color: #8a8a8a; background-position: center; background-size: cover; color: #fff; font-size: .55rem; font-weight: 700; cursor: default; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.profil_page .avatar_partie_compact.ia, .profil_page .avatar_partie_compact.invite { font-size: .68rem; }
.profil_page .avatar_partie_couleur_0 { background-color: #e66c59; }
.profil_page .avatar_partie_couleur_1 { background-color: #3988bb; }
.profil_page .avatar_partie_couleur_2 { background-color: #58a65e; }
.profil_page .avatar_partie_couleur_3 { background-color: #c49531; }
.profil_page .avatar_partie_cliquable { cursor: pointer; }
.profil_page .avatar_partie_cliquable:hover, .profil_page .avatar_partie_cliquable:focus-visible { z-index: 1; outline: 2px solid var(--accent, #58a65e); outline-offset: 1px; }
.profil_page .pagination_parties { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--bordure); }
.profil_page .pagination_parties button { padding: 0 12px; font-size: .69rem; }
.profil_page .pagination_parties button:disabled { opacity: .45; cursor: default; }
.profil_page .pagination_parties span { color: var(--texte-secondaire); font-size: .68rem; }
.profil_page .etat_construction { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border: 1px dashed #cbd8c6; border-radius: 8px; background: var(--fond); text-align: center; }
.profil_page .etat_construction strong { color: var(--vert-fonce); font-family: "Amaranth", sans-serif; font-size: 2rem; }
.profil_page .etat_construction p { max-width: 520px; margin: 10px 0 0; color: var(--texte-secondaire); font-size: .78rem; line-height: 1.6; }

.profil_page .compte_grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.profil_page .compte_danger { grid-column: 1 / -1; }
.profil_page .bloc_parametre_compte { padding: 14px 0; border-bottom: 1px solid var(--bordure); }
.profil_page .bloc_parametre_compte:last-child { border-bottom: 0; }
.profil_page .lien_action_profil, .profil_page #bouton_afficher_suppression { padding: 0; border: 0; background: transparent; color: var(--vert); font-weight: 700; font-size: .75rem; text-decoration: underline; cursor: pointer; }
.profil_page #bouton_afficher_suppression { color: var(--danger); }
.profil_page .bloc_parametre_compte input, .profil_page #mot_de_passe_suppression, .profil_page #fichier_avatar { display: block; width: 100%; min-height: 42px; margin: 10px 0; padding: 9px 10px; border: 1px solid #cfd8cc; border-radius: 6px; background: #fff; color: var(--encre); font-size: .75rem; }
.profil_page #fichier_avatar { padding: 7px; }
.profil_page .erreur_parametre_compte, .profil_page #erreur_suppression_compte { min-height: 1em; margin: 0 0 8px; color: var(--danger); font-size: .68rem; }
.profil_page .confirmation_parametre_compte { margin: 0 0 8px; color: var(--vert); font-size: .68rem; }
.profil_page .ligne_boutons_profil { display: flex; gap: 8px; }
.profil_page .ligne_boutons_profil button { flex: 1 1 0; padding: 0 10px; font-size: .7rem; }
.profil_page .ligne_boutons_profil .bouton_valider_profil { border-color: var(--vert); background: var(--vert); color: #fff; }
.profil_page .avertissement_suppression { margin: 10px 0; padding: 12px; border-radius: 6px; background: #fdefef; color: #7a2e2e; font-size: .7rem; line-height: 1.5; }
.profil_page #bouton_confirmer_suppression { border-color: var(--danger); background: var(--danger); color: #fff; }
.profil_page .profil_invite { max-width: 620px; margin: 30px auto; padding: 20px; border-radius: 8px; background: #fff; text-align: center; }
.profil_page .profil_invite a { color: var(--vert); font-weight: 700; }

@media (max-width: 980px) {
	.profil_page .profil_entete { grid-template-columns: minmax(240px, 1fr) 140px minmax(210px, auto); }
	.profil_page .profil_entete .bouton_secondaire { grid-column: 1 / -1; justify-self: end; }
	.profil_page .grille_indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.profil_page { width: min(100% - 20px, 1240px); padding-top: 68px; }
	.profil_page .profil_entete { grid-template-columns: 1fr 1fr; padding: 22px 18px; }
	.profil_page .profil_identite { grid-column: 1 / -1; }
	.profil_page .profil_niveau { border-left: 0; border-right: 1px solid var(--bordure); }
	.profil_page .profil_palier { justify-content: center; }
	.profil_page .profil_entete .bouton_secondaire { grid-column: 1 / -1; justify-self: stretch; }
	.profil_page .profil_navigation { padding: 0 8px; }
	.profil_page .profil_navigation button { flex-basis: 128px; }
	.profil_page .profil_contenu { padding: 22px 16px 26px; }
	.profil_page .deux_colonnes, .profil_page .compte_grille { grid-template-columns: 1fr; }
	.profil_page .compte_danger { grid-column: auto; }
	.profil_page .classement_resume { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.profil_page .profil_entete { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
	.profil_page .profil_identite { flex-direction: column; text-align: center; }
	.profil_page .avatar_profil_page { flex-basis: 92px; width: 92px; height: 92px; }
	.profil_page h1 { font-size: 1.85rem; }
	.profil_page .profil_niveau { min-height: 112px; border: 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
	.profil_page .profil_palier { justify-content: flex-start; }
	.profil_page .titre_panneau { flex-direction: column; }
	.profil_page .grille_indicateurs, .profil_page .grille_indicateurs.trois, .profil_page .modes_grille { grid-template-columns: 1fr; }
	.profil_page .relations_grille { grid-template-columns: 1fr; }
	.profil_page .ligne_segment { grid-template-columns: minmax(0, 1fr) auto; }
	.profil_page .ligne_segment small { grid-column: 1 / -1; }
	.profil_page .ligne_partie { grid-template-columns: 78px minmax(0, 1fr); }
	.profil_page .ligne_partie time { grid-column: 2; text-align: left; }
	.profil_page .pagination_parties { flex-wrap: wrap; }
	.profil_page .ligne_boutons_profil { flex-direction: column; }
}

/* Portrait large : variante compacte reservee aux ecrans tres allonges. La
   classe est posee par profil.js avec le meme seuil que le plateau de jeu. */
.profil_page.profil-layout-portrait-large .profil_entete {
	display: grid;
	grid-template-columns: minmax(92px, .85fr) minmax(118px, 1.15fr);
	gap: 10px 14px;
	align-items: center;
	padding: 18px 16px;
}

.profil_page.profil-layout-portrait-large .profil_identite { display: contents; }

.profil_page.profil-layout-portrait-large .avatar_profil_page {
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
	flex-basis: 88px;
	width: 88px;
	height: 88px;
}

.profil_page.profil-layout-portrait-large .profil_niveau {
	grid-column: 2;
	grid-row: 1;
	width: min(100%, 142px);
	min-height: 88px;
	padding: 8px 12px;
	border: 0;
	border-left: 1px solid var(--bordure);
}

.profil_page.profil-layout-portrait-large .profil_niveau strong { font-size: 2.65rem; }
.profil_page.profil-layout-portrait-large .profil_niveau small { margin-top: 3px; font-size: .6rem; }
.profil_page.profil-layout-portrait-large .profil_niveau .barre_progression { margin-top: 5px; }

.profil_page.profil-layout-portrait-large .profil_identite_texte {
	grid-column: 1 / -1;
	grid-row: 2;
	text-align: center;
}

.profil_page.profil-layout-portrait-large h1 { font-size: 1.75rem; }
.profil_page.profil-layout-portrait-large .profil_identite_texte .texte_secondaire { margin-top: 3px; }

.profil_page.profil-layout-portrait-large .profil_palier {
	display: none;
}

.profil_page.profil-layout-portrait-large .profil_navigation {
	overflow-x: visible;
	padding: 0 6px;
}

.profil_page.profil-layout-portrait-large .profil_navigation button {
	flex: 1 1 0;
	min-width: 0;
	min-height: 48px;
	padding: 0;
}

.profil_page.profil-layout-portrait-large .profil_navigation button > i { font-size: 1.05rem; }

/* Le libelle reste dans l'arbre d'accessibilite tout en laissant uniquement
   l'icone visible dans cette navigation compacte. */
.profil_page.profil-layout-portrait-large .profil_navigation button > span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.profil_page.profil-layout-portrait-large .profil_navigation button::after {
	right: 6px;
	left: 6px;
}

.profil_page.profil-layout-portrait-large .profil_contenu { padding: 18px 12px 24px; }
.profil_page.profil-layout-portrait-large .titre_panneau { flex-direction: row; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.profil_page.profil-layout-portrait-large .titre_panneau h2 { font-size: 1.3rem; line-height: 1.1; }
.profil_page.profil-layout-portrait-large .titre_panneau .etiquette { padding: 5px 7px; font-size: .6rem; }

.profil_page.profil-layout-portrait-large .grille_indicateurs,
.profil_page.profil-layout-portrait-large .grille_indicateurs.trois {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.profil_page.profil-layout-portrait-large .indicateur {
	min-height: 78px;
	padding: 10px 12px;
}

.profil_page.profil-layout-portrait-large .indicateur span { font-size: .6rem; line-height: 1.35; }
.profil_page.profil-layout-portrait-large .indicateur strong { margin: 6px 0 0; font-size: 1.55rem; }
.profil_page.profil-layout-portrait-large .indicateur small { font-size: .61rem; line-height: 1.35; }
.profil_page.profil-layout-portrait-large .indicateur .valeur_indicateur { gap: 3px 5px; margin-top: 6px; }
.profil_page.profil-layout-portrait-large .indicateur .valeur_indicateur strong { margin: 0; }

.profil_page.profil-layout-portrait-large #panel_overview .deux_colonnes { gap: 10px; }

.profil_page.profil-layout-portrait-large #panel_overview .deux_colonnes .carte_contenu,
.profil_page.profil-layout-portrait-large #panel_overview > .carte_contenu {
	padding: 14px;
}

.profil_page.profil-layout-portrait-large #panel_overview .resume_palier {
	gap: 12px;
	min-height: 72px;
	margin-top: 8px;
	padding: 8px 10px;
}

.profil_page.profil-layout-portrait-large #panel_overview .resume_palier img {
	width: 54px;
	height: 54px;
}

.profil_page.profil-layout-portrait-large #panel_overview .resume_palier strong { font-size: .8rem; }
.profil_page.profil-layout-portrait-large #panel_overview .resume_palier span { margin-top: 3px; font-size: .64rem; }

.profil_page.profil-layout-portrait-large #panel_overview .relations_grille {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 10px;
}

.profil_page.profil-layout-portrait-large #panel_overview .relations_grille > div {
	min-height: 92px;
	padding: 10px;
}

.profil_page.profil-layout-portrait-large #panel_overview .relations_grille span { font-size: .56rem; line-height: 1.35; }
.profil_page.profil-layout-portrait-large #panel_overview .relations_grille strong { margin: 6px 0 3px; font-size: .8rem; }
.profil_page.profil-layout-portrait-large #panel_overview .relations_grille small { font-size: .58rem; line-height: 1.35; }

.profil_page.profil-layout-portrait-large #panel_overview > .carte_contenu { margin-top: 10px; }
.profil_page.profil-layout-portrait-large #panel_overview .succes_liste { gap: 8px; margin-top: 8px; }
.profil_page.profil-layout-portrait-large #panel_overview .succes_liste .etat_vide { margin: 2px 0; }
.profil_page.profil-layout-portrait-large #panel_overview .succes_badge { padding: 6px 11px 6px 6px; }
.profil_page.profil-layout-portrait-large #panel_overview .succes_badge img { width: 28px; height: 28px; }