/* ─── Party game « Action ou Vérité » (Lot 0, landing jouable) ───
   Le bloc de jeu pass-and-play un-écran + les listes de cartes crawlables.
   S'appuie sur les variables de shared.css et les gabarits de seo-landing.css. */

/* Hero compact de la page /action-ou-verite/jouer : le jeu doit rester
   au-dessus de la ligne de flottaison — pas le seo-hero plein écran (70vh).
   Padding-top aligné sur .seo-hero : la nav des pages container--landing est
   une pill FIXE (top 18px + 58px de haut, landing.css) — en dessous de
   ~110px, le h1 passe dessous. */
.party-play-hero {
    max-width: 720px;
    margin: 0 auto;
    padding: 118px 16px 28px;
    text-align: center;
}

.party-play-title {
    font-size: clamp(1.7em, 4vw, 2.6em);
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.party-play-lede {
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

.party-game {
    max-width: 640px;
    margin: 0 auto 64px;
    padding: 0 16px;
}

.party-shell {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* L'attribut hidden perd contre toute règle display posée par une classe
   (.party-choice et .party-card-actions en flex, .btn en inline-flex…) :
   au playtest du salon, les boutons de jeu du joueur courant restaient
   visibles sur l'écran de celui qui attend. On rétablit la sémantique de
   hidden pour tout le périmètre party — écrans compris. */
.party-game [hidden],
.party-salon-cta [hidden] { display: none !important; }

.party-kicker {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.78em;
    color: var(--accent-light);
    margin-bottom: 12px;
}

.party-screen-title {
    font-size: clamp(1.4em, 3.4vw, 1.9em);
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.2;
}

.party-help {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 22px;
}

/* ─── Setup ─── */

.party-players {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.party-player-input {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--text);
    font-size: 1em;
    font-family: inherit;
    text-align: center;
}

.party-player-input:focus {
    outline: none;
    border-color: var(--border-focus);
}

.party-add-player {
    background: none;
    border: none;
    color: var(--accent-light);
    cursor: pointer;
    font-size: 0.9em;
    font-family: inherit;
    margin-bottom: 22px;
    padding: 6px;
}

.party-add-player:hover { color: var(--accent-hover); }

/* Champ contexte (Lot 1) : même gabarit que les prénoms, avec son label. */
.party-context-label {
    display: block;
    color: var(--text);
    font-size: 0.95em;
    font-weight: 600;
    margin-bottom: 8px;
}

.party-context-hint {
    color: var(--text-secondary);
    font-weight: 400;
}

#party-context {
    display: block;
    width: 100%;
    margin-bottom: 22px;
}

.party-levels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    text-align: left;
}

.party-level-choice {
    display: block;
    background: var(--input-option-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.party-level-choice:hover { border-color: var(--border-hover); }

.party-level-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.party-level-choice:has(input:checked) {
    border-color: var(--border-focus);
    background: var(--accent-bg-strong);
}

.party-level-name {
    display: block;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.party-level-tag {
    display: block;
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.45;
}

.party-level-locked {
    cursor: default;
    opacity: 0.55;
}

.party-level-locked:hover { border-color: var(--border-light); }

.party-level-lock { font-size: 0.85em; }

.party-error {
    color: var(--error-text);
    margin-bottom: 14px;
    font-size: 0.9em;
}

/* ─── Tour & carte ─── */

.party-choice {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 26px;
}

.party-choice-btn {
    flex: 1;
    max-width: 220px;
    padding: 26px 12px;
    font-size: 1.15em;
    font-weight: 800;
    font-family: inherit;
    color: var(--text);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.party-choice-btn:hover {
    background: var(--accent-bg-stronger);
    border-color: var(--border-focus);
    transform: translateY(-2px);
}

.party-card-text {
    font-size: clamp(1.2em, 3vw, 1.5em);
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
    margin: 10px 0 30px;
    min-height: 3.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.party-card-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.party-main-btn { min-width: 220px; }

.party-quiet-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.85em;
    font-family: inherit;
    padding: 6px;
}

.party-quiet-btn:hover { color: var(--text-muted); }

.party-noscript {
    text-align: center;
    color: var(--text-secondary);
    margin-top: 16px;
}

/* ─── Aperçu des pools en mini-cartes (section #party-cartes) ─── */

/* Le .section-title des landings monte à 3em — plus gros que le h1 du hero.
   Un cran en dessous ici : la section reste secondaire dans la hiérarchie. */
.party-cartes-title {
    font-size: clamp(1.5em, 3vw, 2.2em);
}

/* .seo-landing-prose n'a pas de marge basse (les sections standard finissent
   sur leur prose) ; ici le premier bloc de niveau suit directement l'intro. */
.party-cartes .seo-landing-prose {
    margin-bottom: 32px;
}

/* Une température par niveau : la promesse du jeu est la montée — elle doit
   se lire avant même de lire. Soft = neutre, Amis = accent, Couple = chaud. */
.party-pool--soft { --pool-accent: var(--text-muted); --pool-accent-strong: var(--text-secondary); }
.party-pool--amis { --pool-accent: var(--accent); --pool-accent-strong: var(--accent-light); }
.party-pool--couple { --pool-accent: var(--accent-dark); --pool-accent-strong: var(--accent); }

.party-pool-details {
    max-width: 900px;
    margin: 0 auto 14px;
    background: var(--panel-light);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--pool-accent);
    border-radius: 14px;
    padding: 0 22px;
    overflow: hidden;
}

/* L'en-tête doit se signaler comme cliquable : grande zone, chevron net,
   hover — « Entre amis » et « Couple » sont fermés par défaut. */
.party-pool-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    padding: 16px 0;
    margin: 0 -22px;
    padding-left: 22px;
    padding-right: 22px;
    transition: background 0.15s ease;
}

.party-pool-summary:hover { background: var(--accent-bg-hover); }

.party-pool-summary::-webkit-details-marker { display: none; }

.party-pool-chevron {
    color: var(--pool-accent-strong);
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.party-pool-details[open] .party-pool-chevron { transform: rotate(90deg); }

.party-pool-headings { min-width: 0; }

.party-pool-title {
    display: inline;
    font-size: 1.1em;
    font-weight: 800;
    color: var(--text);
    margin-right: 10px;
}

.party-pool-tagline {
    color: var(--text-muted);
    font-size: 0.9em;
}

.party-pool-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pool-accent-strong);
    white-space: nowrap;
}

.party-pool-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 14px 0 20px;
    border-top: 1px solid var(--border-faint);
}

@media (max-width: 640px) {
    .party-pool-cols { grid-template-columns: 1fr; }
    .party-pool-count { display: none; }
}

.party-pool-subtitle {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pool-accent-strong);
    margin-bottom: 12px;
}

/* Des cartes, pas des lignes : le produit vend des cartes, la section les
   montre — même vocabulaire visuel que le jeu et l'imprimable. */
.party-pool-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.party-mini-card {
    background: var(--accent-bg-hover);
    border: 1px solid var(--border-faint);
    border-left: 2px solid var(--pool-accent);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.95em;
}

.party-cartes-cta {
    text-align: center;
    margin-top: 26px;
}

/* ─── Salon « chacun son téléphone » (Lot 2) ─── */

/* Bloc d'entrée du salon sur /jouer : deux colonnes créer / rejoindre par
   code, même vocabulaire visuel que le shell de jeu. */
.party-salon-cta {
    max-width: 760px;
    margin: 0 auto 64px;
    padding: 0 16px;
    text-align: center;
}

.party-salon-lede {
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 28px;
}

.party-salon-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    text-align: left;
}

@media (max-width: 640px) {
    .party-salon-grid { grid-template-columns: 1fr; }
}

.party-salon-create,
.party-salon-join {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.party-salon-subtitle {
    font-size: 1.05em;
    font-weight: 800;
    color: var(--text);
}

.party-salon-formats {
    display: flex;
    gap: 10px;
}

.party-salon-format {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.95em;
}

.party-salon-format:has(input:checked) {
    border-color: var(--border-focus);
    color: var(--text);
}

/* ─── Page du salon ─── */

.party-presence {
    background: var(--accent-bg-hover);
    border: 1px solid var(--border-faint);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: 18px;
}

.party-share-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.party-share-link {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: 0.88em;
    color: var(--text-secondary);
}

.party-code {
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.party-code strong {
    color: var(--text);
    letter-spacing: 1px;
}

/* Attente de l'autre écran : discret, avec une respiration animée. */
.party-waiting {
    color: var(--text-muted);
    animation: party-waiting-pulse 2.2s ease-in-out infinite;
}

@keyframes party-waiting-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .party-waiting { animation: none; }
}

/* Réponse privée d'une vérité : gabarit input, plusieurs lignes. */
.party-answer {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--text);
    font-size: 1em;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 18px;
}

.party-answer:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* Mémoire de fin de partie : les vérités partagées (et les siennes). */
.party-fact-list {
    list-style: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.party-fact-list li {
    background: var(--accent-bg-hover);
    border: 1px solid var(--border-faint);
    border-left: 2px solid var(--accent-light);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.95em;
}