/* =============================================================================================
   Page « Partie partagée » (partie.html, générée par scripts/generer_partie.py).
   Fichier additif, comme style-mes-parties.css : la page charge style-comment-jouer.css pour
   l'en-tête et le conteneur .rules-content, puis cette feuille. Tout est dessiné par partie.js.
   Maquette : artefact « Partie partagée Mapetanque » (maquettes/partie-partagee/).
   Page sombre (12/10/2026, demandé par Rémy) : la palette du compteur (style-compteur.css), qu'on
   suit ici sur un autre téléphone ; moins de batterie sur les écrans OLED. Logo en version
   principale négative (images/mapetanque-logo.svg), posé par le générateur avec la classe
   .page-sombre du <body>. Vert et terre cuite des deux équipes, comme dans le compteur.
============================================================================================= */

/* --- Page et en-tête sombres ------------------------------------------------------------- */
body.page-sombre {
    background: #1c1b17;
    color: #f2ece0;
}

.page-sombre .entete-sobre #menu-button,
.page-sombre .entete-sobre .province-breadcrumb,
.page-sombre .entete-sobre .province-breadcrumb a,
.page-sombre .entete-sobre .hero-headline {
    color: #f2ece0;
}

.page-sombre .entete-sobre .province-breadcrumb a:hover {
    color: #9fd585;
}

/* Ordinateur : les trois rubriques du menu (leurs listes déroulantes gardent leur panneau clair) */
.page-sombre .entete-sobre .game-nav-link,
.page-sombre .entete-sobre #lang-switcher-inline .lang-toggle {
    color: #f2ece0;
}

.partie-partagee,
.partie-partagee * {
    box-sizing: border-box;
}

.partie-partagee {
    max-width: 520px;
    display: grid;
    gap: 14px;
}

.pt-tete {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.pt-tete h2 {
    margin: 0;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: #f2ece0;
}

.pt-etiq {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #9fd585;
    background: rgba(159, 213, 133, 0.14);
    border-radius: 999px;
    padding: 4px 10px;
}

.pt-etiq i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9fd585;
}

/* En direct : le point pulse */
.pt-etiq.direct i {
    animation: pt-pouls 1.6s ease-in-out infinite;
}

@keyframes pt-pouls {
    50% { opacity: 0.25; }
}

.pt-etiq.gris {
    color: #a89e8c;
    background: #26241e;
}

/* --- Score : une ligne par équipe ------------------------------------------------------- */
.pt-score {
    display: grid;
    border-radius: 16px;
    overflow: hidden;
}

.pt-eq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    color: #f2ece0;
}

.pt-eq.a {
    background: #4c7a3d;
}

.pt-eq.b {
    background: #b5502e;
}

.pt-n {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pt-noms {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-vous {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f2ece0;
    color: #1c1b17;
    border-radius: 999px;
    padding: 3px 8px 3px 6px;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
}

.pt-vous svg {
    width: 11px;
    height: 11px;
    stroke-width: 2.6;
}

/* « +3 » de la mène reçue en direct, qui s'envole puis disparaît */
.pt-eq {
    position: relative;
}

.pt-gain {
    position: absolute;
    right: 76px;
    top: 50%;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #f2ece0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 999px;
    padding: 3px 10px;
    pointer-events: none;
    animation: pt-envol 1.2s ease-out forwards;
}

@keyframes pt-envol {
    0% { transform: translateY(-30%); opacity: 0; }
    20% { transform: translateY(-50%); opacity: 1; }
    100% { transform: translateY(-140%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-etiq.direct i { animation: none; }
    .pt-gain { animation: pt-fondu 1.6s forwards; }
    @keyframes pt-fondu { 0%, 60% { opacity: 1; transform: translateY(-50%); } 100% { opacity: 0; transform: translateY(-50%); } }
}

.pt-s {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pt-mention {
    margin: 0;
    font-size: 13px;
    color: #a89e8c;
}

/* --- Cartes ------------------------------------------------------------------------------ */
.pt-carte {
    background: #26241e;
    border: 1px solid #3a372f;
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 12px;
    justify-items: start;
}

.pt-carte p {
    margin: 0;
}

.pt-question {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.pt-equipe {
    display: grid;
    gap: 6px;
    width: 100%;
}

.pt-etiquette {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #a89e8c;
}

.pt-etiquette i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4c7a3d;
}

.pt-equipe.b .pt-etiquette i {
    background: #b5502e;
}

.pt-choix-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pt-choix {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #f2ece0;
    background: #26241e;
    border: 1px solid #3a372f;
    border-radius: 999px;
    padding: 8px 15px;
    cursor: pointer;
}

.pt-choix:hover:not(:disabled) {
    border-color: #a89e8c;
}

.pt-choix.pris {
    color: #6f675a;
    background: #1c1b17;
    border-color: #3a372f;
    cursor: default;
}

.pt-choix.libre {
    border-style: dashed;
}

.pt-choix svg {
    width: 14px;
    height: 14px;
}

.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    padding: 11px 20px;
    cursor: pointer;
}

.pt-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.pt-btn.vert {
    background: #f2ece0;
    color: #1c1b17;
}

.pt-btn.vert:hover {
    background: #ffffff;
}

.pt-btn.ligne {
    background: transparent;
    color: #f2ece0;
    border: 1px solid #3a372f;
}

.pt-btn.ligne:hover {
    border-color: #a89e8c;
}

.pt-btn svg {
    width: 16px;
    height: 16px;
}

.pt-lien {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #9fd585;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pt-actualiser {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 13px;
    color: #a89e8c;
}

.pt-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #9fd585;
}

.pt-ok svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Fin de partie : écriture manuscrite, une fois sur l'écran (charte) */
.pt-fin {
    font-family: 'Caveat', 'Manrope', Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #f2ece0;
}

.pt-statut {
    font-size: 13.5px;
    color: #f28b7d;
}

.pt-statut:empty {
    display: none;
}

.pt-statut.info {
    color: #9fd585;
    font-weight: 600;
}

/* --- Passer la main ----------------------------------------------------------------------
   Étiquettes sous le titre (« En direct », « Julie marque »), et score tactile pour le joueur
   qui a la main : toucher une ligne = +1, pastilles +2 à +6 comme dans le compteur. */
.pt-etiqs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pt-etiq svg {
    width: 12px;
    height: 12px;
}

.pt-etiq.fort {
    color: #1c1b17;
    background: #9fd585;
}

button.pt-eq {
    width: 100%;
    border: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 14px 16px;
    cursor: pointer;
}

button.pt-eq:active:not(:disabled) {
    filter: brightness(1.1);
}

button.pt-eq:disabled {
    cursor: default;
}

button.pt-eq:focus-visible {
    outline: 3px solid #f2ece0;
    outline-offset: -3px;
}

.pt-eq.tactile .pt-n {
    flex: 1 1 auto;
}

.pt-pts {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pt-pt {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #f2ece0;
    background: rgba(0, 0, 0, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    padding: 8px 11px;
}

.pt-lien-picto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pt-lien-picto svg {
    width: 16px;
    height: 16px;
}

.pt-lien:disabled {
    opacity: 0.6;
    cursor: default;
}

.pt-compte {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #a89e8c;
}

.pt-pastille {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #74C15A;
    color: #fff;
    display: grid;
    place-items: center;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
}

/* --- Les trois façons de rejoindre (écran sans code) ------------------------------------- */
.pt-facons {
    justify-items: stretch;
}

.pt-facons-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.pt-facons-liste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pt-facons-liste svg {
    flex-shrink: 0;
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(116, 193, 90, 0.14);
    color: #9fd585;
}

.pt-facons-liste li > span {
    display: grid;
    gap: 2px;
    padding-top: 2px;
}

.pt-facons-liste strong {
    font-size: 15px;
}

.pt-creer {
    text-align: center;
}

/* --- Code tapé à la main ----------------------------------------------------------------- */
.pt-code {
    justify-items: stretch;
}

.pt-ligne-code {
    display: flex;
    gap: 8px;
}

.pt-champ {
    flex: 1;
    min-width: 0;
    /* Sans largeur, le champ garde sa largeur naturelle (une vingtaine de caractères) et la
       page déborde sur un téléphone ; flex: 1 lui rend la place disponible. */
    width: 0;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 12px;
    border: 1px solid #3a372f;
    border-radius: 12px;
    background: #1c1b17;
    color: #f2ece0;
}

.pt-champ:focus {
    outline: none;
    border-color: #a89e8c;
    background: #26241e;
}

.partie-partagee button:focus-visible,
.partie-partagee a:focus-visible {
    outline: 2px solid #9fd585;
    outline-offset: 2px;
}