/* Duplibridge — feuille de style commune */

:root {
    --vert: #1f5d45;          /* tapis de jeu */
    --vert-fonce: #154532;
    --creme: #f6f1e6;
    --papier: #fffdf8;
    --encre: #1d2421;
    --encre-douce: #5b6660;
    --rouge: #b3263a;
    --bordure: #e3dccb;
    --ok: #2e7d4f;
    --ko: #b3263a;
    --rayon: 12px;
    --ombre: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .06);
    --police-titre: Georgia, "Times New Roman", serif;
    --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
/* Place de la barre de défilement toujours réservée : une page courte (sans barre) et une page longue ont leur contenu
   centré au même endroit, et le fil d'Ariane et les boutons de navigation ne se décalent pas d'une page à l'autre */
html { scrollbar-gutter: stable; }

body {
    background: var(--creme);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: 16px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

a { color: var(--vert); }

.conteneur {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
}

/* En-tête */
.entete {
    background: var(--papier);
    border-bottom: 1px solid var(--bordure);
}
.entete__contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    gap: 16px;
}
.marque {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 4px 0;
    text-decoration: none;
    color: var(--vert);
}
/* Logo inspiré de duplibridge.com : les quatre couleurs au-dessus du nom */
.marque__couleurs {
    display: inline-flex;
    font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", Arial, sans-serif;
    font-size: 36px;
    line-height: .85;
    font-variant-emoji: text;
}
.marque__couleur { color: var(--encre); }
.marque__couleur--rouge { color: #d4202c; }
.marque:hover .marque__couleurs { transform: translateY(-1px); }
.marque__nom {
    font-family: var(--police-texte);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--vert);
}
@media (max-width: 600px) {
    .marque__couleurs { font-size: 28px; }
    .marque__nom { font-size: 17px; }
}
.navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 16px;
}
.navigation__lien { color: var(--encre-douce); }
.navigation__lien--inactif { cursor: default; opacity: .6; }

/* Boutons */
.bouton {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}
.bouton--principal { background: var(--vert); color: var(--creme); }
.bouton--principal:hover { background: var(--vert-fonce); }
.bouton--discret { border-color: var(--bordure); color: var(--encre); background: transparent; }
.bouton--inactif { opacity: .55; cursor: not-allowed; }

/* Accroche */
.accroche {
    background: var(--vert);
    color: var(--creme);
    padding: 64px 0 56px;
    position: relative;
    overflow: hidden;
}
.accroche__contenu { position: relative; }
.accroche__sur-titre {
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 13px;
    opacity: .8;
}
.accroche__titre {
    margin: 0 0 16px;
    font-family: var(--police-titre);
    font-size: clamp(28px, 5vw, 46px);
    line-height: 1.15;
    max-width: 18em;
}
.accroche__texte {
    margin: 0 0 28px;
    max-width: 38em;
    font-size: 18px;
    opacity: .92;
}
.accroche__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.accroche .bouton--principal { background: var(--creme); color: var(--vert-fonce); }
.accroche__mention { font-size: 14px; opacity: .8; }

.couleurs {
    position: absolute;
    right: 16px;
    top: -10px;
    display: flex;
    gap: 6px;
    font-size: 64px;
    pointer-events: none;
}
/* Logo de l'accroche en couleurs franches sur le vert : rouge comme le logo de l'en-tête, vert très foncé pour pique et trèfle */
.couleur--rouge { color: #d4202c; }
.couleur--noire { color: #061a12; }

/* Cartes d'atouts */
.atouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: -28px;
    margin-bottom: 40px;
    position: relative;
}
.carte {
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 22px;
    box-shadow: var(--ombre);
}
.carte p { margin: 0; color: var(--encre-douce); }
.carte__titre {
    margin: 0 0 8px;
    font-family: var(--police-titre);
    font-size: 20px;
}

/* État technique */
.etat {
    background: var(--papier);
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon);
    padding: 20px 22px;
    margin-bottom: 48px;
}
.etat__titre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 16px;
}
.etat__pastille {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--encre-douce);
}
.etat--ok .etat__pastille { background: var(--ok); }
.etat--ko .etat__pastille { background: var(--ko); }
.etat__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0;
}
.etat__liste dt { font-size: 13px; color: var(--encre-douce); }
.etat__liste dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.etat__note { margin: 14px 0 0; font-size: 13px; color: var(--encre-douce); }

/* Page d'erreur */
.erreur { padding: 64px 16px; text-align: center; }
.erreur__code {
    margin: 0;
    font-family: var(--police-titre);
    font-size: 72px;
    color: var(--vert);
}
.erreur h1 { font-family: var(--police-titre); }

/* Pied de page */
.pied {
    border-top: 1px solid var(--bordure);
    background: var(--papier);
    color: var(--encre-douce);
    font-size: 14px;
}
.pied__contenu {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Sélecteur de langue */
.langues {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 2px;
    list-style: none;
    border: 1px solid var(--bordure);
    border-radius: 999px;
}
.langues__lien {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--encre-douce);
}
.langues__lien:hover { color: var(--encre); }
.langues__lien--active { background: var(--vert); color: var(--creme); }
.langues__lien--active:hover { color: var(--creme); }

/* --- v0.3 : utilisateur connecté --- */
.navigation__utilisateur { font-weight: 600; }
.navigation__deconnexion { margin: 0; }
button.bouton { font: inherit; font-weight: 600; cursor: pointer; }

/* Mises en page des pages de contenu */
.page-etroite { max-width: 520px; padding-top: 40px; padding-bottom: 56px; }
.page-large { padding-top: 32px; padding-bottom: 56px; }
.page__titre {
    margin: 0 0 8px;
    font-family: var(--police-titre);
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.2;
}
.page__intro { margin: 0 0 24px; color: var(--encre-douce); }
.page__pied { margin: 20px 0 0; color: var(--encre-douce); font-size: 15px; }

/* Formulaires */
.formulaire {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 22px;
    box-shadow: var(--ombre);
}
.champs-cote-a-cote {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ label { font-weight: 600; font-size: 15px; }
.champ input, .champ select {
    width: 100%;
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: #fff;
    color: var(--encre);
}
.champ input:focus, .champ select:focus {
    outline: 2px solid var(--vert);
    outline-offset: 1px;
    border-color: var(--vert);
}
.champ--erreur { border-color: var(--ko) !important; }
/* Mot de passe avec bouton « œil » (site.js) */
.mot-de-passe { position: relative; display: block; }
.champ .mot-de-passe input { padding-right: 46px; }
.mot-de-passe__oeil {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--encre-douce); cursor: pointer;
}
.mot-de-passe__oeil:hover, .mot-de-passe__oeil[aria-pressed="true"] { color: var(--vert); }
.mot-de-passe__oeil:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; }
.champ--code {
    font-size: 26px !important;
    letter-spacing: .4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.champ__aide { margin: 0; font-size: 13px; color: var(--encre-douce); }
.champ__libelle { font-weight: 600; font-size: 15px; }
.champ__valeur { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--creme); font-weight: 600; }
[hidden] { display: none !important; }
.champ__erreur { margin: 0; font-size: 14px; color: var(--ko); }
.bouton--large { width: 100%; padding: 12px 18px; }
.bouton--petit { padding: 6px 12px; font-size: 14px; }
.bouton--danger { background: transparent; color: var(--ko); border-color: currentColor; }
.bouton--danger:hover { background: var(--ko); color: #fff; }
.lien {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--vert);
    text-decoration: underline;
    cursor: pointer;
}

/* Alertes */
.alerte {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 15px;
}
.alerte--info { background: #eaf4ee; border-color: #b9d8c5; color: #1c4a33; }
.alerte--erreur { background: #fbeaec; border-color: #eab8c0; color: #7d1a28; }
.alerte--avertissement { background: #fdf5e2; border-color: #ead7a4; color: #6b4e0f; }

/* Administration */
.onglets {
    display: flex;
    gap: 4px;
    margin: 16px 0 24px;
    border-bottom: 1px solid var(--bordure);
    overflow-x: auto;
}
.onglets__lien {
    padding: 10px 14px;
    text-decoration: none;
    color: var(--encre-douce);
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.onglets__lien--actif { color: var(--vert); border-bottom-color: var(--vert); }
.bloc { margin-bottom: 36px; }
.bloc__titre { margin: 0 0 6px; font-family: var(--police-titre); font-size: 22px; }
.bloc__intro { margin: 0 0 16px; color: var(--encre-douce); }
.tableau-defilant {
    /* positionné : les libellés cachés (.visuellement-cache) restent dans le cadre défilant au lieu d'élargir la page */
    position: relative;
    overflow-x: auto;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau th, .tableau td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}
.tableau th { font-size: 13px; color: var(--encre-douce); font-weight: 600; background: var(--creme); }
.tableau tbody tr:last-child td { border-bottom: 0; }
/* Tableau dense (scores du tournoi) : beaucoup de colonnes, cellules resserrées */
.tableau--dense { font-size: 14px; }
.tableau--dense th, .tableau--dense td { padding: 8px 8px; }
.tableau--dense .tableau__nombre { white-space: nowrap; }
.tableau__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tableau__actions form { margin: 0; }
/* Sur une cellule, la mise en page flex la sortirait du tableau (bordure décalée) : elle reste une cellule */
td.tableau__actions { display: table-cell; text-align: right; white-space: nowrap; vertical-align: middle; }
td.tableau__actions > * { display: inline-block; vertical-align: middle; }
td.tableau__actions > * + * { margin-left: 8px; }
.tableau__date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pastille {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--creme);
    border: 1px solid var(--bordure);
    font-size: 12px;
    color: var(--encre-douce);
}
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- v0.4 : packs de tables --- */
.section__titre {
    margin: 0 0 6px;
    font-family: var(--police-titre);
    font-size: clamp(24px, 3.5vw, 30px);
}
.section__intro { margin: 0 0 20px; color: var(--encre-douce); max-width: 42em; }
.packs-accueil { margin-bottom: 40px; }
.packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}
.pack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 22px 20px 20px;
    box-shadow: var(--ombre);
}
.pack--promotion { border: 2px solid var(--rouge); }
.pack__badge {
    position: absolute;
    top: -12px;
    left: 18px;
    margin: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--rouge);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pack p { margin: 0; }
.pack__libelle { margin: 0; font-family: var(--police-titre); font-size: 22px; }
.pack__tables { font-weight: 600; color: var(--vert); }
.pack__prix { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 !important; }
.pack__prix-actuel { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pack--promotion .pack__prix-actuel { color: var(--rouge); }
.pack__prix-normal { color: var(--encre-douce); }
.pack__prix-table { margin-top: -4px !important; font-size: 13px; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.pack__validite, .pack__fin-vente { font-size: 14px; color: var(--encre-douce); }
.pack__fin-vente { font-weight: 600; }
.pack__bouton { margin-top: auto; text-align: center; }
.pack__validite + .pack__bouton, .pack__fin-vente + .pack__bouton { margin-top: 14px; }
.packs__mention { margin: 14px 0 0; font-size: 13px; color: var(--encre-douce); }

/* Administration : en-têtes de bloc, formulaires longs, tableaux */
.bloc__entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.bloc--formulaire { max-width: 760px; }
.groupe-champs {
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    min-width: 0;
}
.groupe-champs legend { padding: 0 6px; font-weight: 700; font-size: 15px; }
.groupe-champs .champ__aide { margin-bottom: 10px; }
.series-seance > summary { cursor: pointer; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.champ--case { flex-direction: row; align-items: center; gap: 10px; align-self: end; padding-bottom: 10px; }
.champ--case input { width: 20px; height: 20px; accent-color: var(--vert); }
.formulaire__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tableau__nombre { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.texte-discret { color: var(--encre-douce); font-size: 13px; margin-left: 6px; }
.pastille--ok { background: #eaf4ee; border-color: #b9d8c5; color: #1c4a33; margin-left: 0; }
.pastille--ko { background: #f3efe6; color: var(--encre-douce); margin-left: 0; }
.pastille--alerte { background: #fdf5e2; color: #6b4e0f; margin-left: 0; }
/* Plafonds de création (règles de gestion, 3.5) */
.plafonds-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 20px; }
.plafonds-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 20px; margin: 0 0 12px; }
.plafonds-liste div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.plafonds-liste dt { color: var(--encre-douce); }
.plafonds-liste dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pastille--promotion { background: #fbeaec; border-color: #eab8c0; color: #7d1a28; }

/* --- v0.5 : création d'un groupe, groupes, factures --- */
/* Page moyenne : le contenu garde 760 px de large, mais le fil d'Ariane et les boutons de navigation sont alignés sur
   la largeur des pages larges (1080 px), pour rester au même endroit d'une page à l'autre */
.page-moyenne { padding-top: 32px; padding-bottom: 56px; }
.page-moyenne > :not(.fil-ariane):not(.navigation-tournoi) { max-width: 728px; margin-left: auto; margin-right: auto; }
.etape__titre { margin: 8px 0 6px; font-family: var(--police-titre); font-size: 24px; }
.fil-ariane { margin: 0 0 10px; font-size: 14px; color: var(--encre-douce); }

/* Fil d'étapes */
.etapes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 22px;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}
.etapes__etape {
    counter-increment: etape;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    border: 1px solid var(--bordure);
    background: var(--papier);
    font-size: 13px;
    color: var(--encre-douce);
}
.etapes__etape::before {
    content: counter(etape);
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--creme);
    font-weight: 700;
    font-size: 12px;
}
.etapes__etape a { color: inherit; }
.etapes__etape.etape-faite { color: var(--vert); border-color: #b9d8c5; }
.etapes__etape.etape-faite::before { content: "✓"; background: #eaf4ee; }
.etapes__etape.etape-courante { color: var(--creme); background: var(--vert); border-color: var(--vert); font-weight: 600; }
.etapes__etape.etape-courante::before { background: var(--creme); color: var(--vert); }

/* Choix du pack */
.choix-packs { display: grid; gap: 10px; margin-bottom: 12px; }
.choix-pack {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    cursor: pointer;
}
.choix-pack:has(input:checked) { border: 2px solid var(--vert); padding: 13px 15px; }
.choix-pack--promotion { border-color: #eab8c0; }
.choix-pack input { width: 20px; height: 20px; accent-color: var(--vert); flex: none; }
.choix-pack__contenu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; flex: 1; }
.choix-pack__libelle { font-family: var(--police-titre); font-size: 19px; font-weight: 700; }
.choix-pack__detail { color: var(--encre-douce); font-size: 14px; }
.choix-pack__prix { margin-left: auto; font-weight: 700; font-size: 18px; white-space: nowrap; text-align: right; }
.choix-pack__prix-table { display: block; font-size: 12px; font-weight: 400; color: var(--encre-douce); }

/* Choix d'un type (équipe, client) */
.choix-type { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.choix-type__option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.choix-type__option:has(input:checked) { border-color: var(--vert); box-shadow: 0 0 0 1px var(--vert); }
.choix-type__option input { margin-top: 3px; accent-color: var(--vert); }
.choix-type__option .champ__aide { display: block; }

/* Récapitulatif et paiement */
.recapitulatif {
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.recapitulatif__liste { display: grid; gap: 10px; margin: 0 0 8px; }
.recapitulatif__liste div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.recapitulatif__liste dt { color: var(--encre-douce); font-size: 14px; }
.recapitulatif__liste dd { margin: 0; }
.recapitulatif__total { padding-top: 10px; border-top: 1px solid var(--bordure); font-size: 20px; font-weight: 700; }
.recapitulatif__total dt { font-size: 16px; color: var(--encre); align-self: center; }
#dropin-container { min-height: 60px; }
.case-cgv { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.case-cgv input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--vert); flex: none; }
.paiement__attente { margin: 0; color: var(--encre-douce); text-align: center; }

/* Confirmation */
.confirmation { text-align: center; padding: 24px 0; }
.confirmation__icone {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 0 8px;
    border-radius: 16px;
    background: var(--vert);
    color: var(--creme);
    font-size: 38px;
}
.confirmation p { margin: 8px 0 18px; }

/* Groupes */
.liste-groupes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-groupes__groupe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.liste-groupes__groupe a { font-family: var(--police-titre); font-size: 19px; font-weight: 700; text-decoration: none; }
.pastille--manager { background: var(--vert); border-color: var(--vert); color: var(--creme); }
.vide { padding: 24px; text-align: center; background: var(--papier); border: 1px dashed var(--bordure); border-radius: var(--rayon); }
.groupe__entete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.groupe__entete .page__titre { margin: 0; }
.groupe__entete .pastille { margin-left: 0; }
.groupe__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.liste-simple { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.liste-simple li { padding: 10px 12px; background: var(--papier); border: 1px solid var(--bordure); border-radius: 8px; }
.stock { margin: 0 0 6px; }
.stock__nombre { font-size: 40px; font-weight: 700; color: var(--vert); font-variant-numeric: tabular-nums; }

/* Parcours : formulaire + résumé */
.page-parcours { max-width: 1080px; padding-top: 32px; padding-bottom: 56px; }
.parcours { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.resume {
    position: sticky;
    top: 16px;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 18px;
    font-size: 14px;
}
.resume__titre { margin: 0 0 10px; font-family: var(--police-titre); font-size: 18px; }
.resume__vide { margin: 0; color: var(--encre-douce); }
.resume__liste { margin: 0; }
.resume__liste dt {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--bordure);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--encre-douce);
}
.resume__liste dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.resume__liste dt a { text-transform: none; letter-spacing: 0; font-weight: 600; }
.resume__liste dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.resume__liste .texte-discret { margin-left: 0; }
.resume__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 2px solid var(--encre);
}
.resume__total strong { font-size: 22px; }
.resume__abandon { margin: 14px 0 0; font-size: 13px; text-align: center; }
@media (max-width: 880px) {
    .parcours { grid-template-columns: 1fr; }
    .resume { position: static; order: -1; }
}

/* CGV */
.texte-juridique h2 { font-family: var(--police-titre); font-size: 20px; margin: 28px 0 8px; }
.texte-juridique p, .texte-juridique li { color: var(--encre); }
.texte-juridique ul, .texte-juridique ol { padding-left: 22px; }

/* Facture */
.facture-page { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 28px; }
@media print {
    .entete, .pied, .ne-pas-imprimer { display: none !important; }
    body { background: #fff; }
    .facture-page { border: 0; padding: 0; }
}

.alertes-accueil { padding-top: 16px; }

@media (max-width: 600px) {
    .navigation__lien--inactif, .navigation__lien--secondaire { display: none; }
    .navigation { gap: 10px; }
    .accroche { padding: 28px 0 48px; }
    /* Les couleurs de l'accroche, en haut à droite, passaient sur le sur-titre (« Tournois de bridge en duplicate ») :
       sur mobile, elles gardent leur propre bande au-dessus du texte */
    .accroche__contenu { padding-top: 50px; }
    .couleurs { font-size: 40px; top: -4px; }
}

/* v0.6 : membres, managers et invitations du groupe */
.bloc__sous-titre { margin: 28px 0 10px; font-family: var(--police-titre); font-size: 18px; }
.role-icone { display: inline-block; width: 1.2em; color: var(--encre-douce); text-align: center; }
.role-icone--manager { color: var(--vert); }
.formulaire--ligne { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.formulaire--ligne .champ { margin-bottom: 0; }
.formulaire--ligne .champ:first-child { flex: 1 1 260px; }
.champ--bouton { flex: 0 0 auto; }

/* v0.6 : réponse à une invitation */
.invitation { background: var(--papier); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 20px; margin-bottom: 24px; }
.invitation__groupe { margin: 0 0 6px; font-family: var(--police-titre); font-size: 24px; }
.invitation__detail { margin: 0; color: var(--encre-douce); }
.invitation__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.invitation__actions form { margin: 0; }
.choix-equipe { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.choix-equipe legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 15px; }
.choix-equipe label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.choix-equipe input { accent-color: var(--vert); }
.liste-groupes__infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.liste-groupes__equipes { font-size: 14px; color: var(--encre-douce); }
.liste-simple li.equipe--mienne { border-color: var(--vert); }

/* v0.6.1 : lien « Mon compte » dans l'en-tête */
a.navigation__utilisateur { color: inherit; text-decoration: none; }
a.navigation__utilisateur:hover { text-decoration: underline; }

/* v0.7 : équipes, présentation et réglages du groupe */
.groupe__reglages { margin-left: auto; }
/* Bouton « Partager » (règles de gestion, 19) : en fin d'en-tête, poussé à droite s'il n'y a pas de bouton de gestion */
.partage { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.groupe__entete .partage { margin-left: auto; }
.groupe__entete .groupe__reglages ~ .partage { margin-left: 0; }
.partage__bouton { display: inline-flex; align-items: center; gap: 6px; }
.partage__message { font-size: 13px; color: var(--encre-douce); }
.partage__message:empty { display: none; }
@media print { .partage { display: none; } }
.groupe__presentation { background: var(--papier); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 18px 20px; }
.presentation { margin: 0 0 12px; }
/* Commentaire d'une grille de mouvement (10.6) : texte simple, retours à la ligne conservés */
.commentaire-grille.texte-discret { margin: 4px 0 0; font-size: 13px; }
.champ__aide.commentaire-grille { font-style: italic; }
.commentaire-grille p:last-child, .commentaire-grille ul:last-child, .commentaire-grille ol:last-child { margin-bottom: 0; }
.mode-emploi-grille p { margin: 4px 0 0; }
.groupe__adresse { font-style: normal; display: flex; flex-direction: column; gap: 2px; color: var(--encre-douce); margin-bottom: 12px; }
.groupe__adresse strong { color: var(--encre); }
.formulaire--compact { margin-top: 16px; padding: 16px; gap: 12px; }
.formulaire__titre { margin: 0; font-weight: 700; }
.ligne-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ligne-action form { margin: 0; }
.champ textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; resize: vertical; }

/* v0.7 : recherche des groupes */
.resultats { margin-top: 28px; }
.liste-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.resultat { padding: 14px 16px; background: var(--papier); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.resultat__entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.resultat__entete .pastille { margin-left: 0; }
.resultat__nom { font-family: var(--police-titre); font-size: 19px; font-weight: 700; text-decoration: none; }
.resultat__lieu { margin: 4px 0 0; color: var(--encre-douce); font-size: 15px; }
.resultat__extrait { margin: 6px 0 0; font-size: 15px; }
/* v0.45 : activité d'un groupe trouvé (règles de gestion, 6.1) */
.resultat__activite { margin: 4px 0 0; color: var(--encre-douce); font-size: 14px; }

/* v0.8 : championnats */
.fiche { margin: 0; display: grid; gap: 10px; }
.fiche > div { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 12px; padding: 10px 14px; background: var(--papier); border: 1px solid var(--bordure); border-radius: 8px; }
.fiche dt { font-weight: 600; }
.fiche dd { margin: 0; }
.actions-statut { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.actions-statut form { margin: 0; }
.ligne-liens { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 12px 0 0; }
@media (max-width: 560px) { .fiche > div { grid-template-columns: 1fr; gap: 2px; } }

/* v0.9 : grilles de mouvement */
.filtres { margin-bottom: 18px; }
.filtres .champ:first-child { flex: 0 1 220px; }
.resume-grille { margin-bottom: 4px; }
.grille-plan { border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; background: var(--papier); }
.grille-plan th, .grille-plan td { border: 1px solid var(--bordure); padding: 4px 8px; text-align: center; vertical-align: middle; }
.grille-plan thead th { background: var(--creme); font-size: 13px; color: var(--encre-douce); font-weight: 600; white-space: nowrap; }
.grille-plan tbody th { background: var(--creme); font-weight: 700; }
.grille-plan__set { display: block; font-weight: 700; color: var(--vert); }
.grille-plan__equipes { display: block; white-space: nowrap; }
.grille-plan .case-vide { background: #f3efe6; }
.grille-saisie td { padding: 4px; }
.grille-saisie input {
    width: 3.4em; padding: 3px 4px; font: inherit; font-size: 13px; text-align: center;
    border: 1px solid var(--bordure); border-radius: 6px; background: #fff;
    -moz-appearance: textfield; appearance: textfield;
}
.grille-saisie input::-webkit-outer-spin-button, .grille-saisie input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.grille-saisie input:focus { outline: 2px solid var(--vert); outline-offset: 0; border-color: var(--vert); }
.grille-saisie .grille-saisie__set { display: block; margin: 0 auto 4px; border-color: #b9d8c5; background: #eaf4ee; font-weight: 700; }
.grille-saisie__places { display: flex; gap: 3px; justify-content: center; }
.grille-import { margin-top: 18px; }
.grille-import summary { cursor: pointer; font-weight: 600; color: var(--vert); }
.texte-code { width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; padding: 8px; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; tab-size: 6; }
.controles__liste { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.controles__liste li { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--bordure); background: var(--papier); }
.controles__liste .controle-bloquant { border-color: #eab8c0; background: #fbeaec; }
.controles__genre { display: inline-block; min-width: 110px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--encre-douce); }
.controles__liste .controle-bloquant .controles__genre { color: var(--ko); }
.controles__ok { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: #eaf4ee; border: 1px solid #b9d8c5; color: #1c4a33; }

/* v0.10 : tournois */
.tour { margin-top: 22px; }
.tour__entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tour__titre { margin: 0; font-family: var(--police-titre); font-size: 18px; }
.tour__horaire { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.tour__horaire input,
.placement select,
.placement input {
    padding: 6px 10px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 14px;
}
.placement select { min-width: 200px; }
.placement input { width: 100%; min-width: 180px; }
.mouvements .mouvements__debut td,
.mouvements .mouvements__debut th { border-top: 2px solid var(--bordure); }
.mouvements tbody th { font-weight: 700; color: var(--encre); background: transparent; font-size: 15px; }

/* v0.11 : saisie des scores à la table */
.liens-saisie { margin: 0 0 20px; }
.mouvements-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.mouvements-nav__titre { font-size: 13px; color: var(--encre-douce); margin-right: 4px; }
.mouvements-nav__lien {
    min-width: 34px; padding: 4px 8px; text-align: center; border-radius: 8px;
    border: 1px solid var(--bordure); background: var(--papier); color: var(--encre); text-decoration: none;
}
.mouvements-nav__lien--actif { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 700; }
.donne {
    margin: 0 0 16px; padding: 14px 16px; background: var(--papier);
    border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.donne__entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.donne__titre { margin: 0; font-family: var(--police-titre); font-size: 19px; }
.donne__infos { font-size: 14px; color: var(--encre-douce); }
.donne__score { font-size: 17px; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.donne__deja-jouee { margin: 6px 0; }
.donne__autre { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.donne__action { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
/* Simple saisie : saisie présentée aux adversaires, lisible de l'autre côté de la table */
.presentation {
    margin: 10px 0; padding: 14px 16px; text-align: center;
    background: #fdf3df; border: 2px solid #d99a2b; border-radius: var(--rayon);
}
.presentation__titre { margin: 0 0 4px; font-weight: 700; color: #5e3f04; }
.presentation__consigne { margin: 0 0 10px; font-size: 15px; }
.presentation__contrat { margin: 6px 0; font-size: 34px; font-weight: 700; line-height: 1.2; }
.presentation__entame { margin: 4px 0; font-size: 18px; }
.presentation__scores { margin: 8px 0 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px;
    font-size: 18px; font-weight: 600; }
.presentation__actions { display: flex; justify-content: center; margin: 0; }
.presentation__actions .bouton { min-height: 48px; padding-left: 22px; padding-right: 22px; font-size: 17px; }
.presentation__aide { margin: 10px 0 0; }
.donne__saisie { margin-top: 8px; }
.donne__saisie summary { cursor: pointer; font-weight: 600; color: var(--vert); padding: 4px 0; }
.donne__rang { margin: 12px 0 8px; font-weight: 600; }
.contrat { white-space: nowrap; font-weight: 600; }
.symbole--rouge { color: var(--rouge); }
.symbole--noir { color: var(--encre); }
/* ♥ ♦ ♠ ♣ en caractères (et non en emoji) pour que la couleur s'applique, y compris sur mobile */
.contrat, .entame, .saisie__champs select { font-variant-emoji: text; }
/* liste déroulante : la couleur choisie (cœur, carreau) s'affiche en rouge, liste fermée comme ouverte */
.saisie__champs select:has(option.symbole--rouge:checked) { color: var(--rouge); }
.saisie__champs select option { color: var(--encre); }
.saisie__champs select option.symbole--rouge { color: var(--rouge); }
.saisie { margin-top: 8px; }
.saisie__champs { display: grid; gap: 10px; margin-bottom: 10px; }
.saisie__contrat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.saisie__contrat label { display: flex; flex-direction: column; gap: 4px; }
.saisie__libelle { font-size: 12px; color: var(--encre-douce); font-weight: 600; }
.saisie__entame { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.saisie__champs select {
    font: inherit; font-size: 17px; padding: 8px 6px; border: 1px solid var(--bordure);
    border-radius: 8px; background: #fff; min-height: 44px;
}
.saisie__passe { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.resultats-donne { font-size: 13px; }
.resultats-donne td, .resultats-donne th { padding: 4px 8px; white-space: nowrap; }
.resultats-donne--ns .col-ns, .resultats-donne--eo .col-eo { background: #eaf4ee; font-weight: 700; }
.resultats-donne__ma-table td { font-weight: 700; }
.filtres-liens { display: flex; gap: 14px; margin: 0 0 14px; flex-wrap: wrap; }
.filtres-liens__actif { font-weight: 700; text-decoration: none; color: var(--encre); }
.saisies-lignes { display: grid; gap: 10px; }
.saisies-lignes__ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.saisies-lignes__ligne form { margin: 0; }
@media (max-width: 560px) {
    .saisie__contrat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .saisie__passe { margin-left: 0; }
}
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.saisie__champs select:disabled { background: var(--creme); color: var(--encre-douce); }

/* Remplissage des mouvements de la table */
.mouvements-nav__lien { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.mouvements-nav__lien.mouvement-complet { background: #eaf4ee; border-color: #b9d8c5; color: #1c4a33; }
.mouvements-nav__lien.mouvement-partiel { background: #fdf5e2; border-color: #ead7a4; color: #6b4e0f; }
.mouvements-nav__lien.mouvement-vide { background: var(--papier); }
.mouvements-nav__lien.mouvement-actif { background: var(--vert); border-color: var(--vert); color: #fff; box-shadow: 0 0 0 2px var(--creme), 0 0 0 4px var(--vert); }
.mouvements-nav__marque { font-size: 12px; font-weight: 700; }
/* Tournoi en plusieurs séances (10.11) : repère de la séance dans la navigation de la table */
.mouvements-nav__seance {
    margin-left: 8px; padding: 2px 6px; border-radius: 6px; font-size: 12px; font-weight: 700;
    color: var(--encre-douce); background: var(--creme); border: 1px dashed var(--bordure);
}
.mouvements-nav__seance:first-of-type { margin-left: 0; }
.liste-avertissements { margin: 0 0 12px; padding-left: 28px; }
.liste-avertissements li + li { margin-top: 4px; }
.placement-seance { margin: 0 0 12px; }
.placement-seance > summary { cursor: pointer; color: var(--vert); font-weight: 600; margin-bottom: 8px; }
.champs-limites { flex-wrap: wrap; }
.choix-echange { outline: 2px solid var(--vert); outline-offset: 1px; transition: outline-color .3s; }
.mouvements-legende { display: flex; flex-wrap: wrap; gap: 12px; margin: -8px 0 16px; font-size: 12px; color: var(--encre-douce); }
.mouvements-legende__item { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--bordure); }
.mouvements-legende__item--complet { background: #eaf4ee; border-color: #b9d8c5; color: #1c4a33; }
.mouvements-legende__item--partiel { background: #fdf5e2; border-color: #ead7a4; color: #6b4e0f; }
.mouvements-legende__item--vide { background: var(--papier); }

/* Mes tournois */
.navigation__badge {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px;
    background: var(--vert); color: #fff; font-size: 12px; font-weight: 700; text-align: center; line-height: 20px;
}
.mes-tournois { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mes-tournois__tournoi {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 16px; background: var(--papier); border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.mes-tournois__infos .texte-discret { margin-left: 0; display: block; }
.formulaire-bouton { margin: 0; }
.mes-tournois__participants { margin-top: 6px; font-size: 14px; }
.mes-tournois__participants summary { cursor: pointer; color: var(--vert); }
.mes-tournois__liste { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mes-tournois__liste li { padding: 2px 10px; border-radius: 999px; background: var(--creme); border: 1px solid var(--bordure); }
.mes-tournois__liste .mes-tournois__mienne { background: #eaf4ee; border-color: #b9d8c5; font-weight: 700; }

/* Dates interdites (règles de gestion, 10.8) */
.texte-discret--bloc { display: block; margin: 0 0 12px; }
.dates-interdites .texte-discret { display: block; margin-left: 0; }
.formulaire--date-interdite { margin-top: 12px; }
.choix-type--compact { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.choix-type--compact .choix-type__option { padding: 10px 12px; }
.pastille--alerte { background: #fdf5e2; border-color: #ead7a4; color: #6b4e0f; margin-left: 0; }
.incompatibilites { display: block; }
.incompatibilites p { margin: 4px 0; }
.incompatibilites ul { margin: 6px 0 0; padding-left: 20px; }
.champ--interdit { border-color: #c99a2e !important; box-shadow: 0 0 0 1px #c99a2e; }

.calendrier-dates { margin: 8px 0 12px; }
.calendrier-dates__alerte { margin: 0 0 8px; }
.calendrier-dates__details > summary { cursor: pointer; font-weight: 600; color: var(--vert); padding: 4px 0; }
.calendrier-dates__grille { max-width: 340px; margin-top: 8px; }
.calendrier__entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.calendrier__mois { font-weight: 700; text-transform: capitalize; }
.calendrier__nav {
    border: 1px solid var(--bordure); background: var(--papier); border-radius: 8px;
    width: 34px; height: 30px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--encre);
}
.calendrier__nav:hover { border-color: var(--vert); }
.calendrier__jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendrier__nom-jour { font-size: 11px; text-align: center; color: var(--encre-douce); text-transform: capitalize; padding-bottom: 2px; }
.calendrier__jour {
    aspect-ratio: 1 / 1; border: 1px solid var(--bordure); background: var(--papier); border-radius: 6px;
    font: inherit; font-size: 13px; cursor: pointer; color: var(--encre); padding: 0;
}
.calendrier__jour:hover { border-color: var(--vert); }
.calendrier__jour--passe { color: var(--encre-douce); opacity: .6; }
.calendrier__jour--aujourdhui { font-weight: 700; border-color: var(--vert); }
.calendrier__jour--interdit { background: #fbeaec; border-color: #eab8c0; color: #7d1a28; text-decoration: line-through; }
.calendrier__jour--choisi { background: var(--vert); border-color: var(--vert); color: var(--creme); text-decoration: none; }
.calendrier__jour--choisi.calendrier__jour--interdit { background: #b3263a; border-color: #b3263a; color: #fff; }
.tour .calendrier-dates { margin: 0 0 10px; }

/* Feuilles de marque à imprimer (règles de gestion, 11.6) : une feuille par donne, autant de feuilles par page que la
   hauteur le permet, sans couper une feuille ; les feuilles sont découpées par donne, donc chacune porte le logo et
   le nom de Duplibridge, et le barème des IMP. */
.feuille-marque { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 20px; margin-bottom: 24px; }
.feuille-marque__entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.feuille-marque__logo { display: flex; flex-direction: column; align-items: center; flex: none; color: var(--vert); }
.feuille-marque__logo .marque__couleurs { font-size: 22px; }
.feuille-marque__nom { font-family: var(--police-texte); font-size: 13px; font-weight: 700; }
.feuille-marque__infos { flex: 1; }
/* Barème des IMP : les tranches reviennent à la ligne dans la largeur de la feuille */
.feuille-marque__bareme { display: flex; flex-wrap: wrap; column-gap: .45em; margin: 6px 0 0; font-size: 10px; line-height: 1.4; color: var(--encre-douce); max-width: 100%; }
.feuille-marque__bareme-titre { font-weight: 600; margin-right: 4px; }
.feuille-marque__tranche { white-space: nowrap; }
.feuille-marque__tranche:not(:last-child)::after { content: " ·"; }
.feuille-marque__tournoi { margin: 0; font-weight: 600; }
.feuille-marque__type { margin: 0; color: var(--encre-douce); font-size: 14px; }
.feuille-marque__donne { text-align: right; }
.feuille-marque__donne h2 { margin: 0; font-family: var(--police-titre); font-size: 28px; }
.feuille-marque__donne p { margin: 0; font-size: 14px; }
.feuille-marque__tableau td { height: 34px; }
.feuille-marque__tableau th, .feuille-marque__centre { text-align: center !important; }
.feuille-marque__tableau td.feuille-marque__points { vertical-align: top; }
/* Numéros des équipes de la ligne, en petit, en haut à droite de la case des points */
.feuille-marque__rappel { display: block; text-align: right; font-size: 9px; line-height: 1; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.feuille-marque__case { width: 11%; }
.feuille-marque__case--etroite { width: 7%; }
@media screen and (max-width: 700px) {
    .feuille-marque { overflow-x: auto; }
    .feuille-marque__tableau { min-width: 640px; }
}
@media print {
    @page { size: A4 portrait; margin: 12mm; }
    .feuille-marque { border: 0; border-radius: 0; padding: 0 0 5mm; margin: 0 0 5mm; border-bottom: 1px dashed #000;
                      break-inside: avoid; page-break-inside: avoid; }
    .feuille-marque:last-of-type { border-bottom: 0; margin-bottom: 0; }
    .feuille-marque__entete { margin-bottom: 2mm; }
    .feuille-marque__logo { color: #000; }
    .feuille-marque__bareme { margin-top: 1mm; font-size: 8px; line-height: 1.35; color: #000; }
    .feuille-marque__donne h2 { font-size: 20px; }
    .feuille-marque__tableau { font-size: 11px; table-layout: fixed; }
    .feuille-marque__tableau th, .feuille-marque__tableau td,
    .feuille-marque__tableau tbody tr:last-child td { border: 1px solid #000; background: #fff; color: #000;
                                                      padding: 0.5mm 1.5mm; line-height: 1.2; }
    .feuille-marque__tableau th { font-size: 10px; }
    .feuille-marque__tableau th.feuille-marque__etroite { width: 6%; }
    .feuille-marque__tableau tbody td.feuille-marque__points { padding: 0.3mm 0.8mm; }
    .feuille-marque__rappel { font-size: 7px; color: #000; }
    .feuille-marque__tableau td { height: 7mm; overflow: hidden; }
    .conteneur.page-large { max-width: none; padding: 0; }
}

/* Classements (règles de gestion, 9 et 10.4) : l'équipe classée première en gras */
.classement__premier td { font-weight: 700; }

/* Série de tournois créée à partir d'une répartition (règles de gestion, 9.4) */
.liste-tournois-serie { display: grid; gap: 14px; margin-bottom: 18px; }
.liste-tournois-serie .bloc { margin: 0; }
.liste-equipes-serie { margin: 8px 0 12px; padding-left: 1.6em; display: grid; gap: 2px; }
.liste-equipes-serie .pastille { margin-left: 6px; }
.ligne-liens--entete { margin: 0; gap: 8px; }
.tournois-tour-serie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 24px; }
.tournoi-serie__titre { margin: 8px 0 0; font-size: 15px; }
.calendrier__jour--depart { border: 2px dashed var(--vert); }

/* Liste des tournois d'un championnat : équipes de chaque tournoi, résultats affichés à la demande */
.ligne-tournoi { cursor: pointer; }
.ligne-tournoi:hover > td, .ligne-tournoi[aria-expanded="true"] > td { background: var(--creme); }
.ligne-tournoi:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }
.ligne-tournoi__equipes { font-size: 13px; color: var(--encre-douce); min-width: 14em; }
.apercu-ligne > td { background: var(--creme); padding: 8px 12px 14px; }
.apercu-tournoi .tableau-defilant { margin: 0; }
.apercu-tournoi__mention { margin: 0 0 6px; font-size: 13px; color: var(--encre-douce); }
.apercu-tournoi__liens { margin: 8px 0 0; }

/* Report d'une feuille de saisie (11.6) : mode détaillé, classique (codes courts) ou score seul */
.modes-saisie { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; padding: 0; margin: 0 0 12px; }
.modes-saisie legend { font-weight: 700; margin-bottom: 6px; }
.modes-saisie__option { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.saisie__codes { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.saisie__codes label, .saisie__score label { display: flex; flex-direction: column; gap: 4px; }
.saisie__codes input, .saisie__score input { text-transform: uppercase; text-align: center; font-size: 18px;
    font-variant-numeric: tabular-nums; padding: 6px 8px; width: auto; }

/* Saisie par donne (report d'une feuille de marque complète, 11.6) */
.page__sous-titre { display: block; font-family: var(--police-texte); font-size: 15px; font-weight: 600;
    color: var(--encre-douce); margin-top: 4px; }
.navigation-donnes { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
    flex-wrap: wrap; margin: 0 0 16px; }
.navigation-donnes__aller { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.navigation-donnes__aller select { width: auto; }
.feuille-donne td { vertical-align: middle; }
.feuille-donne th.feuille-donne__code, .feuille-donne td.feuille-donne__code { padding-left: 3px; padding-right: 3px;
    text-align: center; }
.feuille-donne__code input { width: 3em; padding: 5px 4px; text-align: center; text-transform: uppercase;
    font-size: 16px; font-variant-numeric: tabular-nums; }
.feuille-donne__score input { width: 5em; }
.feuille-donne__code input[aria-invalid="true"] { border-color: var(--rouge); box-shadow: 0 0 0 2px #f3c6cd; }
.feuille-donne__enregistre { white-space: nowrap; }
.feuille-donne__ligne--erreur td { background: #fdf3f4; border-bottom: 0; }
.feuille-donne__erreur td { background: #fdf3f4; color: #7d1a28; font-size: 13px; padding-top: 0; }
.barre-actions { position: sticky; bottom: 0; z-index: 2; background: var(--creme); padding: 12px 0;
    margin-top: 12px; border-top: 1px solid var(--bordure); }
@media (max-width: 640px) {
    .barre-actions { position: static; border-top: 0; }
}

/* Boutons d'accès alignés sur une ligne (scores et classement d'un tournoi) */
.ligne-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Jeu d'une donne (règles de gestion, 11.5) : les 4 mains autour de la table, Nord en haut */
.donne__jeu { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bordure); }
.donne__sous-titre { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.jeu {
    display: grid; grid-template-columns: auto auto auto; justify-content: start;
    grid-template-areas: ". n ." "o c e" ". s ."; gap: 6px 14px; align-items: center;
    max-width: 460px; font-variant-emoji: text;
}
.jeu__main[data-siege="N"] { grid-area: n; }
.jeu__main[data-siege="O"] { grid-area: o; }
.jeu__main[data-siege="E"] { grid-area: e; }
.jeu__main[data-siege="S"] { grid-area: s; }
.jeu__siege { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--encre-douce); }
.jeu__points { font-weight: 400; margin-left: 4px; }
.jeu__couleurs { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.45; }
.jeu__couleurs li { display: flex; gap: 6px; white-space: nowrap; }
.jeu__symbole { width: 1em; text-align: center; }
.jeu__cartes { font-weight: 600; letter-spacing: .02em; }
.jeu__chicane { color: var(--encre-douce); font-weight: 400; }
.jeu__centre {
    grid-area: c; position: relative; width: 74px; height: 74px; border-radius: 10px;
    background: var(--vert); color: var(--creme); font-size: 13px; font-weight: 700;
}
.jeu__point-cardinal { position: absolute; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; }
.jeu__point-cardinal[data-siege="N"] { top: 3px; left: 26px; }
.jeu__point-cardinal[data-siege="S"] { bottom: 3px; left: 26px; }
.jeu__point-cardinal[data-siege="O"] { left: 3px; top: 26px; }
.jeu__point-cardinal[data-siege="E"] { right: 3px; top: 26px; }
.jeu__point-cardinal.jeu-vulnerable { background: var(--rouge); }
.jeu__point-cardinal.jeu-donneur { text-decoration: underline; text-underline-offset: 2px; }
/* Tablette et ordinateur : le jeu est centré dans son bloc (sur téléphone, il reste aligné à gauche) */
@media (min-width: 641px) {
    .jeu { justify-content: center; margin-left: auto; margin-right: auto; }
}
@media (max-width: 420px) {
    .jeu { gap: 4px 8px; }
    .jeu__couleurs { font-size: 14px; }
    .jeu__centre { width: 56px; height: 56px; }
    .jeu__point-cardinal[data-siege="N"], .jeu__point-cardinal[data-siege="S"] { left: 17px; }
    .jeu__point-cardinal[data-siege="O"], .jeu__point-cardinal[data-siege="E"] { top: 17px; }
}

/* Saisie d'un jeu : en touchant les cartes, ou en tapant chaque couleur */
.jeu-saisie { display: grid; gap: 12px; margin: 8px 0 12px; font-variant-emoji: text; }
.jeu-saisie__aide { margin: 0; font-size: 14px; color: var(--encre-douce); }
.jeu-saisie__onglets { display: flex; flex-wrap: wrap; gap: 6px; }
.jeu-saisie__onglet {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--bordure);
    border-radius: 8px; background: #fff; cursor: pointer; font-weight: 600; min-height: 44px;
}
.jeu-saisie__onglet:has(input:checked) { border-color: var(--vert); box-shadow: 0 0 0 2px #cfe3d8; }
.jeu-saisie__compte { font-size: 13px; font-weight: 400; color: var(--encre-douce); }
.jeu-saisie__compte--complet { color: var(--ok); font-weight: 700; }
.jeu-saisie__compte--trop { color: var(--rouge); font-weight: 700; }
.jeu-saisie__grille { display: grid; gap: 6px; margin-top: 8px; }
.jeu-saisie__rangee { display: grid; grid-template-columns: 1.4em repeat(13, minmax(0, 1fr)); gap: 3px; align-items: center; }
.jeu-saisie__symbole { font-size: 18px; text-align: center; }
.jeu-carte {
    position: relative; font: inherit; font-size: 15px; font-weight: 600; min-height: 40px; padding: 0;
    border: 1px solid var(--bordure); border-radius: 6px; background: #fff; color: var(--encre); cursor: pointer;
}
.jeu-carte[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.jeu-carte--autre { background: #f1ede3; color: #a59f92; }
.jeu-carte__main { position: absolute; right: 2px; bottom: 0; font-size: 9px; font-weight: 700; }
.jeu-saisie__textes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jeu-saisie__main { margin: 0; padding: 8px 10px 10px; border: 1px solid var(--bordure); border-radius: 8px; display: grid; gap: 6px; min-width: 0; }
.jeu-saisie__main legend { padding: 0 4px; font-weight: 700; font-size: 14px; }
.jeu-saisie__couleur { display: flex; align-items: center; gap: 6px; }
.jeu-saisie__couleur input {
    font: inherit; width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: 6px;
    text-transform: uppercase; min-height: 38px;
}
.jeu-saisie__couleur input[aria-invalid="true"] { border-color: var(--rouge); box-shadow: 0 0 0 2px #f3c6cd; }
.jeu-saisie__ouest { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.jeu-saisie__erreur { margin: 0; color: #7d1a28; font-size: 14px; }
@media (max-width: 600px) {
    .jeu-saisie__textes { grid-template-columns: 1fr; }
    .jeu-carte { font-size: 13px; min-height: 36px; }
}
.import-pbn { margin: 0 0 16px; padding: 16px; gap: 12px; }
.historique-jeu { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
.jeu-saisie__couleur .jeu-saisie__symbole { width: 1.2em; flex: none; }
.reouverture { margin-top: 16px; padding: 16px; gap: 12px; }
.reouverture__titre { margin: 0; font-size: 16px; }

/* Propositions de date (règles de gestion, 10.9) */
.navigation__badge--propositions { background: #b7791f; }
.propositions__liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.proposition { padding: 12px 14px; background: var(--papier); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.proposition p { margin: 4px 0; }
.proposition__entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.proposition__entete .pastille { margin-left: 0; }
.proposition .actions-statut { margin-top: 8px; }
.proposition__avis { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.propositions__formulaire { margin-top: 12px; gap: 12px; }
.propositions__sous-titre { margin: 18px 0 6px; font-size: 15px; }
.propositions__closes { margin: 0; padding-left: 18px; font-size: 14px; color: var(--encre-douce); }
.messages-tournoi__formulaire { margin-bottom: 16px; gap: 12px; }
.message-tournoi__texte { overflow-wrap: anywhere; }
/* Texte mis en forme (MiseEnForme : p, br, strong, em, ul, ol, li, a) */
.texte-mis-en-forme p { margin: 0 0 8px; }
.texte-mis-en-forme ul, .texte-mis-en-forme ol { margin: 0 0 8px; padding-left: 22px; }
.texte-mis-en-forme > :last-child { margin-bottom: 0; }
.texte-mis-en-forme a { overflow-wrap: anywhere; }
/* Barre de mise en forme au-dessus d'un champ de texte */
.mise-en-forme { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 6px; }
.mise-en-forme__bouton {
    min-width: 36px; min-height: 32px; padding: 4px 8px;
    font: inherit; font-size: 14px; color: var(--encre);
    background: var(--papier); border: 1px solid var(--bordure); border-radius: 6px; cursor: pointer;
}
.mise-en-forme__bouton:hover:not(:disabled) { border-color: var(--vert); color: var(--vert); }
.mise-en-forme__bouton:disabled { opacity: .45; cursor: default; }
.mise-en-forme__bouton[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.mise-en-forme__apercu { margin-left: auto; }
.mise-en-forme__compteur { font-size: 13px; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.mise-en-forme__compteur--limite { color: #7d1a28; font-weight: 600; }
.mise-en-forme__rendu {
    min-height: 120px; padding: 10px 12px;
    background: var(--papier); border: 1px dashed var(--bordure); border-radius: var(--rayon);
}
.message-tournoi--supprime { opacity: .65; border-style: dashed; }

/* v0.18 : vues de pilotage du super-administrateur (ventes, consommation des tables) */
.periodes { margin: 4px 0 20px; }
.periodes__affichee { margin: 0 0 8px; color: var(--encre-douce); }
.periodes__affichee strong { color: var(--encre); margin-left: 4px; }
.periodes .filtres-liens { margin-bottom: 10px; }
.periodes__libres { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.periodes__libres .champ:first-child { flex: 0 1 180px; }
.periodes__libres .champ { flex: 0 1 180px; }
.bouton--actif { border-color: var(--vert); color: var(--vert); font-weight: 700; }
.indicateurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 12px;
}
.indicateur {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.indicateur dt { font-size: 13px; color: var(--encre-douce); font-weight: 600; }
.indicateur dd {
    margin: 0;
    font-family: var(--police-titre);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.indicateur dd small { display: block; font-family: var(--police-texte); font-size: 13px; font-weight: 400; color: var(--encre-douce); }
.indicateur--principal { border-color: #b9d8c5; background: #eaf4ee; }
.indicateur--principal dd { color: var(--vert); }
.texte-note { margin: 0; font-size: 13px; color: var(--encre-douce); }
.texte-bloc { display: block; margin-left: 0; }
.texte-code-court { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }

/* Graphique en barres empilées par mois */
.histogramme-cadre { margin: 0 0 12px; }
.legende { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.legende li { display: inline-flex; align-items: center; gap: 6px; }
.legende__pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; vertical-align: -1px; }
.histogramme {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 240px;
    padding: 8px 10px 0;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow-x: auto;
}
.histogramme__colonne { flex: 1 0 40px; max-width: 80px; display: flex; flex-direction: column; min-width: 0; }
.histogramme__total { font-size: 11px; text-align: center; color: var(--encre-douce); white-space: nowrap; font-variant-numeric: tabular-nums; }
.histogramme__barre { flex: 1; display: flex; flex-direction: column-reverse; border-bottom: 1px solid var(--encre-douce); }
.histogramme__segment { display: block; width: 100%; min-height: 2px; border-top: 1px solid var(--papier); }
.histogramme__segment:last-child { border-radius: 4px 4px 0 0; }
.histogramme__mois { padding: 4px 0 6px; font-size: 12px; text-align: center; color: var(--encre-douce); white-space: nowrap; }
.donnees-graphique summary { cursor: pointer; font-weight: 600; color: var(--vert); margin-bottom: 8px; }
.serie-0 { background: #1f5d45; }
.serie-1 { background: #c9a227; }
.serie-2 { background: #3b7ea1; }
.serie-3 { background: #b3263a; }
.serie-4 { background: #7a5c99; }
.serie-5 { background: #8aa05b; }
.serie-6 { background: #d9822b; }
.serie-7 { background: #5b6660; }
.serie-8 { background: #6fb59a; }
.serie-9 { background: #e2c96b; }
.serie-c0 { background: #1f5d45; }
.serie-c1 { background: #b3263a; }
.part { min-width: 160px; }
.part__barre { display: inline-block; width: 100px; height: 8px; border-radius: 4px; background: var(--creme); overflow: hidden; vertical-align: middle; }
.part__barre span { display: block; height: 100%; }
.part__valeur { margin-left: 8px; font-variant-numeric: tabular-nums; }
.tableau tfoot th { background: var(--creme); color: var(--encre); font-size: 14px; border-top: 1px solid var(--bordure); }
.tri { color: inherit; text-decoration: none; white-space: nowrap; }
.tri:hover { color: var(--vert); text-decoration: underline; }
.tri--actif { color: var(--vert); }
.tri__sens { font-size: 10px; margin-left: 2px; }
.ligne--alerte td { background: #fffaf0; }

/* v0.19 : journal du groupe */
.pastille--administration { background: #e8eef6; border-color: #c3d2e6; color: #23415f; margin-left: 0; white-space: nowrap; }
.journal__detail { overflow-wrap: anywhere; min-width: 220px; white-space: pre-line; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.pagination__position { color: var(--encre-douce); font-size: 14px; }

/* v0.20 : courbes de progression du championnat */
.progression { margin-top: 32px; }
.progression__dessin {
    overflow-x: auto;
    padding: 8px;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.progression__dessin svg { display: block; width: 100%; min-width: 560px; height: auto; }
.progression__grille line { stroke: var(--bordure); stroke-width: 1; }
.progression__grille .progression__repere { stroke: var(--encre-douce); }
.progression__grille text { font-family: var(--police-texte); font-size: 12px; fill: var(--encre-douce); }
.progression__zero { stroke: var(--encre-douce); stroke-width: 1.2; stroke-dasharray: 5 4; }
.courbe { transition: opacity .15s; }
.courbe polyline { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.courbe circle { fill: currentColor; stroke: var(--papier); stroke-width: 1.5; }
.courbe--pointille polyline { stroke-dasharray: 7 4; }
.progression--focus .courbe { opacity: .12; }
.progression--focus .courbe.courbe--active { opacity: 1; }
.courbe--active polyline { stroke-width: 3.5; }
.courbe-0 { color: #1f5d45; }
.courbe-1 { color: #c9a227; }
.courbe-2 { color: #3b7ea1; }
.courbe-3 { color: #b3263a; }
.courbe-4 { color: #7a5c99; }
.courbe-5 { color: #8aa05b; }
.courbe-6 { color: #d9822b; }
.courbe-7 { color: #5b6660; }
.courbe-8 { color: #6fb59a; }
.courbe-9 { color: #a05a7a; }
.progression__legende { list-style: none; margin: 12px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.progression__equipe {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px; font: inherit; font-size: 14px;
    background: var(--papier); border: 1px solid var(--bordure); border-radius: 999px; cursor: pointer;
}
.progression__equipe[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.progression__equipe:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.progression__trait { display: inline-block; width: 18px; height: 0; border-top: 3px solid; color: inherit; }
.progression__equipe .progression__trait { border-top-color: currentColor; }
.progression__equipe.courbe--pointille .progression__trait { border-top-style: dashed; }
.progression__equipe span:not(.progression__trait) { color: var(--encre); }
.progression__valeur { font-variant-numeric: tabular-nums; color: var(--encre-douce) !important; font-size: 13px; }
.texte-attenue { color: var(--encre-douce); }

/* v0.21 : sélecteur du journal */
.selecteur-journal { margin-bottom: 12px; gap: 12px; }
.selecteur-journal__champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.selecteur-journal__champs .champ { margin-bottom: 0; }
.selecteur-journal__champs select, .selecteur-journal__champs input { width: 100%; }
.selecteur-journal__texte { grid-column: span 2; }
@media (max-width: 560px) { .selecteur-journal__texte { grid-column: auto; } }

/* v0.22 : tournoi à partir des tables (règles de gestion, 10.12) */
.tables-salle { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.table-salle {
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 12px 14px;
}
.table-salle--complete { border-color: #b9d8c5; background: #f4faf6; }
.table-salle--fantome { border-style: dashed; border-color: var(--vert); }
.table-salle--incomplete { border-color: #e7c98f; background: #fffaf0; }
.table-salle--vide { border-style: dashed; }
.table-salle__titre { margin: 0 0 8px; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.table-salle__places { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.table-salle__place { display: grid; grid-template-columns: 74px 1fr; gap: 2px 8px; align-items: baseline; font-size: 14px; }
.table-salle__position { color: var(--encre-douce); font-size: 13px; }
.table-salle__equipe { overflow-wrap: anywhere; }
/* Actions sous l'équipe, sur toute la largeur de la carte : elles ne débordent jamais du cadre */
.table-salle__actions { grid-column: 1 / -1; min-width: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.table-salle__deplacer { display: flex; flex: 1 1 100%; min-width: 0; gap: 6px; align-items: center; }
.table-salle__actions select { flex: 1 1 auto; width: 0; min-width: 0; max-width: 100%; padding: 4px 6px; border: 1px solid var(--bordure); border-radius: 6px; font: inherit; }
.table-salle__actions .bouton { flex: 0 0 auto; white-space: nowrap; }
.table-salle { min-width: 0; overflow: hidden; }

/* Boutons de passage entre les pages d'un tournoi (tournoi, scores, jeux, classement, résultats par donne) */
.navigation-tournoi { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.navigation-tournoi a[aria-current="page"] { background: var(--vert); border-color: var(--vert); color: var(--creme); }

/* Afficheurs du tournoi (règles de gestion, 10.14) : liens, chronomètre en réduction et commandes (managers) */
.afficheurs__liens { display: grid; gap: 10px; margin: 12px 0 18px; }
.afficheurs__lien {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--papier); border: 1px solid var(--bordure); border-radius: 8px;
}
.afficheurs__nom { font-weight: 600; margin-right: auto; }
.chrono--mini {
    background: #0f1f19; color: #f6f1e6; border-radius: var(--rayon); padding: 16px 20px;
    display: grid; gap: 4px; text-align: center; max-width: 520px;
}
.chrono--mini p { margin: 0; }
.chrono--mini .chrono__seance { color: #a9bdb4; font-size: 14px; min-height: 0; }
.chrono--mini .chrono__etape { font-family: var(--police-titre); font-size: 20px; }
.chrono--mini .chrono__temps { font-size: 54px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.chrono--mini .chrono__barre { height: 6px; background: #17302a; border-radius: 999px; overflow: hidden; margin: 4px 0; }
.chrono--mini .chrono__avancement { height: 100%; width: 0; background: #7fd1a5; transition: width .25s linear; }
.chrono--mini .chrono__suite, .chrono--mini .chrono__fin { color: #a9bdb4; font-size: 14px; }
.chrono--mini .chrono__fin strong { color: #f6f1e6; }
.chrono--mini .chrono__arret { justify-self: center; background: #f3b23c; color: #0f1f19; border-radius: 999px; padding: 0 12px; font-weight: 600; font-size: 14px; }
.chrono--mini .chrono__hors-ligne { justify-self: center; background: #a9bdb4; color: #0f1f19; border-radius: 999px; padding: 0 12px; font-size: 13px; }
.chrono--mini[data-niveau="alerte"] .chrono__temps { color: #f3b23c; }
.chrono--mini[data-niveau="alerte"] .chrono__avancement { background: #f3b23c; }
.chrono--mini[data-niveau="changement"] .chrono__avancement { background: #ff6b6b; }
.chrono--mini[data-niveau="changement"] .chrono__temps,
.chrono--mini[data-niveau="changement"] .chrono__etape,
.chrono--mini[data-niveau="fini"] .chrono__etape { color: #ff6b6b; }
.chrono--mini[data-niveau="fini"] .chrono__temps { font-size: 34px; color: #a9bdb4; }
.chrono--mini[data-niveau="fini"] .chrono__barre,
.chrono--mini[data-niveau="fini"] .chrono__fin > span:first-child,
.chrono--mini[data-niveau="fini"] .chrono__fin > strong { display: none; }
.chrono--mini[data-niveau="attente"] .chrono__temps, .chrono--mini[data-niveau="termine"] .chrono__temps,
.chrono--mini[data-niveau="attente"] .chrono__barre, .chrono--mini[data-niveau="termine"] .chrono__barre { display: none; }
.chrono--mini[data-arrete="oui"] .chrono__temps { color: #a9bdb4; }
.afficheurs__commandes { display: grid; gap: 10px; max-width: 520px; }
.afficheurs__boutons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.afficheurs__boutons .bouton { padding: 10px 6px; }
.afficheurs__message { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--ok); }
.afficheurs__message--erreur { color: var(--ko); }
.afficheurs__regenerer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
@media (max-width: 520px) {
    .afficheurs__boutons { grid-template-columns: repeat(2, 1fr); }
}

/* Choix de la séance et de la donne (report des feuilles, 11.6) : gris rien de saisi, orange en partie, vert ✓ rempli,
   contour épais pour la sélection ; pastille du nombre de tables saisies */
.choix-donnes { margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.choix-donnes__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 10px; }
.choix-donnes__titre { flex: 0 0 100%; font-size: 13px; font-weight: 600; color: var(--encre-douce); }
.choix {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    min-width: 48px; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 2px solid;
    font-size: 17px; font-weight: 700; text-decoration: none;
}
.choix--vide { background: #ecebe7; border-color: #cfccc4; color: #4a504c; }
.choix--partiel { background: #fbe3b6; border-color: #d99a2b; color: #5e3f04; }
.choix--complet { background: #d3eadb; border-color: #4f9a6d; color: #154532; }
.choix:hover { filter: brightness(.96); }
.choix:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }
.choix--actif { box-shadow: 0 0 0 3px var(--creme), 0 0 0 6px var(--encre); }
.choix__coche { font-size: 14px; }
.choix__pastille {
    position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--encre); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
    border: 2px solid var(--creme);
}
.choix-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 0; font-size: 12px;
    color: var(--encre-douce); }
.choix-legende__item { padding: 1px 8px; border-radius: 999px; border: 1px solid; }
.choix-legende__pastille { border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.choix-legende__pastille .choix__pastille { position: static; }

/* Écran de la table : les mouvements suivent le même code couleur que les séances et les donnes */
.mouvements-nav__lien.mouvement-vide { background: #ecebe7; border-color: #cfccc4; color: #4a504c; }
.mouvements-nav__lien.mouvement-partiel { background: #fbe3b6; border-color: #d99a2b; color: #5e3f04; }
.mouvements-nav__lien.mouvement-complet { background: #d3eadb; border-color: #4f9a6d; color: #154532; }
.mouvements-legende__item--vide { background: #ecebe7; border-color: #cfccc4; }
.mouvements-legende__item--partiel { background: #fbe3b6; border-color: #d99a2b; color: #5e3f04; }
.mouvements-legende__item--complet { background: #d3eadb; border-color: #4f9a6d; color: #154532; }
[data-donne-detail] { scroll-margin-top: 12px; }
.mouvements-nav__lien.mouvement-actif { background: var(--vert); border-color: var(--vert); color: #fff; }

/* Écran de la table : représentation de la table (sièges autour du plateau) */
.table-jeu {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: ". n ." "o p e" ". s ."; gap: 8px; align-items: center;
    max-width: 520px; margin: 0 auto 18px;
}
.table-jeu__siege.siege-N { grid-area: n; }
.table-jeu__siege.siege-S { grid-area: s; }
.table-jeu__siege.siege-E { grid-area: e; }
.table-jeu__siege.siege-O { grid-area: o; }
.table-jeu__siege {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; min-width: 0;
    padding: 8px 6px; border-radius: 10px; background: var(--papier); border: 1px solid var(--bordure);
}
.table-jeu__siege.siege-moi { background: #d3eadb; border: 2px solid var(--vert); }
.table-jeu__orientation { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); }
.table-jeu__equipe { font-weight: 700; overflow-wrap: anywhere; line-height: 1.25; }
.table-jeu__vous { font-size: 12px; font-weight: 700; color: var(--vert); }
.table-jeu__plateau {
    grid-area: p; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 8px; border-radius: 14px; background: var(--vert); color: var(--creme); text-align: center;
    box-shadow: inset 0 0 0 4px var(--vert-fonce);
}
.table-jeu__numero { font-family: var(--police-titre); font-size: 22px; font-weight: 700; line-height: 1.1; }
.table-jeu__detail { font-size: 13px; opacity: .92; }
.table-jeu__equipes { text-align: center; font-size: 14px; margin: -8px 0 16px; }
.table-jeu__equipes a { margin-left: 6px; }
/* Écran de la table : informations compactes sous les donnes */
.fiche--compacte { gap: 4px; }
.fiche--compacte > div { grid-template-columns: minmax(110px, 160px) 1fr; gap: 8px; padding: 6px 10px; font-size: 14px; }

/* ------------------------------------------------------------------ vitrine de l'accueil visiteur
   Le déroulement d'un tournoi en quatre écrans d'illustration (données fictives), dans des cadres d'appareils :
   tablette (remplissage des tables), écran de salle (chronomètre), téléphone (saisie à la table), portable
   (classement). Avec JavaScript, un écran à la fois en onglets (.vitrine--js) ; sans, les quatre à la suite. */

.vitrine {
    background: var(--papier);
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
    padding: 52px 0 48px;
    margin-bottom: 44px;
    overflow: hidden;
}
.vitrine__sur-titre {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 13px;
    color: var(--rouge);
    font-weight: 600;
}
.vitrine__titre { font-size: clamp(24px, 3.6vw, 34px); margin-bottom: 8px; }

/* Profil du visiteur (club ou groupe d'amis) et onglets des étapes : seulement avec JavaScript */
.vitrine__commandes { display: none; }
.vitrine--js .vitrine__commandes { display: grid; gap: 14px; margin: 4px 0 30px; justify-items: start; }
.vitrine__profils {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--creme);
    border: 1px solid var(--bordure);
}
.vitrine__profils-libelle { padding: 0 8px 0 12px; font-size: 14px; color: var(--encre-douce); }
.vitrine__profil {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--encre);
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 6px 16px;
    cursor: pointer;
    font-variant-emoji: text;
    transition: background .2s, box-shadow .2s;
}
.vitrine__profil:hover { background: var(--papier); }
.vitrine__profil:focus-visible { outline: 3px solid rgba(31, 93, 69, .35); outline-offset: 1px; }
.vitrine__profil[aria-pressed="true"] { background: var(--papier); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); color: var(--vert-fonce); }
.vitrine__ecrans[hidden] { display: none; }
/* Sans JavaScript, les deux profils se suivent, chacun sous son titre */
.vitrine__ecrans-titre {
    margin: 0 0 18px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--bordure);
    font-family: var(--police-titre);
    font-size: 20px;
    color: var(--vert);
}
.vitrine--js .vitrine__ecrans-titre { display: none; }
.vitrine--js .vitrine__appel-texte[hidden] { display: none; }

/* Onglets */
.vitrine__onglets { display: flex; flex-wrap: wrap; gap: 10px; }
.vitrine__onglet {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--encre);
    background: var(--creme);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    padding: 8px 18px 8px 8px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.vitrine__onglet:hover { border-color: var(--vert); }
.vitrine__onglet:focus-visible { outline: 3px solid rgba(31, 93, 69, .35); outline-offset: 2px; }
.vitrine__numero {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--papier);
    border: 1px solid var(--bordure);
    font-size: 13px;
    color: var(--vert);
}
.vitrine__onglet[aria-selected="true"] { background: var(--vert); border-color: var(--vert); color: var(--creme); }
.vitrine__onglet[aria-selected="true"] .vitrine__numero { background: var(--creme); border-color: var(--creme); }
/* Défilement automatique : un filet se remplit sous l'onglet affiché jusqu'au passage au suivant */
.vitrine__progression {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #ffb3bd;
}
.vitrine--auto .vitrine__onglet[aria-selected="true"] .vitrine__progression.en-cours {
    animation: vitrine-progression var(--vitrine-duree, 11s) linear forwards;
}
@keyframes vitrine-progression { from { width: 0; } to { width: 100%; } }

/* Panneaux : le texte à gauche, l'écran à droite */
.vitrine__panneau {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: center;
    margin-bottom: 44px;
}
.vitrine--js .vitrine__panneau { margin-bottom: 0; min-height: 430px; }
.vitrine__panneau[hidden] { display: none; }
.vitrine--js .vitrine__panneau:not([hidden]) .vitrine__texte { animation: vitrine-entree .45s ease-out; }
.vitrine--js .vitrine__panneau:not([hidden]) .appareil { animation: vitrine-entree .55s ease-out; }
@keyframes vitrine-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.vitrine__etape { margin: 0 0 10px; font-family: var(--police-titre); font-size: 24px; line-height: 1.25; }
.vitrine__texte > p { margin: 0 0 16px; color: var(--encre-douce); }
.vitrine__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vitrine__points li { position: relative; padding-left: 28px; }
.vitrine__points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #eaf4ee;
    color: var(--vert);
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.vitrine__mention { margin: 18px 0 0; font-size: 13px; color: var(--encre-douce); font-style: italic; }

/* Appel à l'achat */
.vitrine__appel {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 28px;
    background: var(--vert);
    color: var(--creme);
    border-radius: var(--rayon);
    padding: 22px 26px;
}
.vitrine__appel p { margin: 0; }
.vitrine__appel-titre { font-family: var(--police-titre); font-size: 22px; }
.vitrine__appel-texte { opacity: .88; max-width: 36em; }
.vitrine__appel-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vitrine__appel .bouton--principal { background: var(--creme); color: var(--vert-fonce); }
.vitrine__appel .bouton--discret,
.accroche .bouton--discret { color: var(--creme); border-color: rgba(246, 241, 230, .45); }
.vitrine__appel .bouton--discret:hover,
.accroche .bouton--discret:hover { border-color: var(--creme); }

/* Cadres d'appareils */
.appareil {
    position: relative;
    justify-self: center;
    width: 100%;
    background: #1b211e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 22px 50px rgba(21, 69, 50, .22);
}
.appareil .demo { position: relative; overflow: hidden; height: 100%; container-type: inline-size; }
.appareil--tablette { max-width: 560px; border-radius: 26px; padding: 16px; }
.appareil--tablette .demo { border-radius: 12px; background: var(--creme); }
.appareil--ecran { max-width: 600px; border-radius: 12px; padding: 10px; margin-bottom: 26px; }
.appareil--ecran .demo { border-radius: 4px; aspect-ratio: 16 / 10; }
.appareil--ecran::after {          /* pied de l'écran */
    content: "";
    position: absolute;
    left: 50%;
    bottom: -24px;
    width: 30%;
    height: 14px;
    transform: translateX(-50%);
    background: linear-gradient(#2a332f, #1b211e);
    border-radius: 0 0 10px 10px;
}
.appareil--telephone { max-width: 310px; border-radius: 40px; padding: 12px; }
.appareil--telephone::before {     /* encoche */
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 34%;
    height: 20px;
    transform: translateX(-50%);
    background: #1b211e;
    border-radius: 0 0 14px 14px;
    z-index: 1;
}
.appareil--telephone .demo { border-radius: 30px; background: var(--creme); padding: 30px 12px 16px; }
.appareil--portable { max-width: 600px; border-radius: 14px 14px 4px 4px; padding: 12px 12px 14px; margin-bottom: 18px; }
.appareil--portable .demo { border-radius: 4px; background: var(--papier); }
.appareil--portable::after {       /* socle du portable */
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -14px;
    height: 14px;
    background: linear-gradient(#d8d2c4, #b9b2a2);
    border-radius: 0 0 14px 14px;
}

.demo { font-size: 13px; line-height: 1.35; color: var(--encre); text-align: left; }
.demo-rouge { color: #e0505f; }
.demo__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 14px;
    background: var(--papier);
    border-bottom: 1px solid var(--bordure);
}
.demo__barre strong { font-family: var(--police-titre); font-size: 15px; }
.demo-cache { opacity: 0 !important; visibility: hidden; }

/* 1. Remplissage des tables */
.demo-remplissage__compteurs { display: flex; gap: 12px; color: var(--encre-douce); font-size: 12px; }
.demo-remplissage__compteurs b { color: var(--vert); font-size: 15px; font-variant-numeric: tabular-nums; }
.demo-tables {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}
.demo-tables--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 22px 16px; gap: 12px; }
.demo-tables--trois .demo-place { min-height: 40px; }
.demo-tables--trois .demo-place__nom { font-size: 13px; }
.demo-table {
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: 9px;
    padding: 7px;
    display: grid;
    gap: 5px;
    align-content: start;
    transition: border-color .3s, box-shadow .3s;
}
.demo-table--complete { border-color: #8fc0a6; box-shadow: inset 0 0 0 1px #8fc0a6; }
.demo-table--libre { border-style: dashed; background: transparent; }
.demo-table__numero { font-weight: 700; font-size: 12px; color: var(--vert); }
.demo-table__libre { color: var(--encre-douce); font-size: 11px; padding: 14px 0; text-align: center; }
.demo-place {
    display: grid;
    background: #eef5f1;
    border-radius: 6px;
    padding: 3px 6px;
    min-height: 34px;
    transition: background .3s;
}
.demo-place__ligne { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); }
.demo-place__nom { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-place--vide { background: transparent; outline: 1px dashed var(--bordure); outline-offset: -1px; }
.demo-place--vide .demo-place__nom { visibility: hidden; }
.demo-place--arrivee .demo-place__nom { animation: demo-arrivee .45s cubic-bezier(.3, 1.6, .5, 1); }
.demo-place--arrivee { animation: demo-surbrillance 1.2s ease-out; }
@keyframes demo-arrivee { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes demo-surbrillance { from { background: #fbe9a8; } to { background: #eef5f1; } }
.demo-remplissage__fin {
    margin: 0 12px 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--vert);
    color: var(--creme);
    font-weight: 600;
    transition: opacity .4s;
}

/* 2. Chronomètre : reprend les couleurs de l'afficheur (afficheur.css) */
.demo-chrono {
    background: #0f1f19;
    color: #f6f1e6;
    display: flex;
    flex-direction: column;
}
.demo-chrono__bandeau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqi;
    padding: 2cqi 3.5cqi;
    border-bottom: 1px solid #2c4a40;
}
.demo-chrono__identite { display: flex; align-items: center; gap: 2cqi; min-width: 0; }
.demo-chrono__couleurs { font-size: 4.2cqi; letter-spacing: .08em; font-variant-emoji: text; }
.demo-chrono__groupe { display: block; font-family: var(--police-titre); font-size: 3.2cqi; white-space: nowrap; }
.demo-chrono__tournoi { display: block; color: #a9bdb4; font-size: 2.3cqi; }
.demo-chrono__horloge { font-size: 5.4cqi; font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-chrono__centre {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1cqi;
    text-align: center;
}
.demo-chrono__centre p { margin: 0; }
.demo-chrono__seance, .demo-chrono__suite { color: #a9bdb4; font-size: 3cqi; }
.demo-chrono__etape { font-family: var(--police-titre); font-size: 5.4cqi; }
.demo-chrono__temps {
    font-size: 19cqi;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    transition: color .4s;
}
.demo-chrono__temps--fin { color: #f3b23c; }
.demo-chrono__barre { width: 78%; height: 1.4cqi; background: #17302a; border-radius: 999px; overflow: hidden; }
.demo-chrono__avancement { height: 100%; background: #7fd1a5; transition: width .9s linear; }
.demo-chrono__pied { padding: 1.4cqi 3.5cqi 2cqi; text-align: right; color: #a9bdb4; font-size: 2.4cqi; }

/* 3. Saisie à la table */
.demo-jeu {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    grid-template-areas: ". n ." "o p e" ". s .";
    gap: 5px;
    align-items: center;
    margin-bottom: 10px;
}
.demo-jeu__siege {
    display: grid;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    padding: 4px 3px;
    border-radius: 7px;
    background: var(--papier);
    border: 1px solid var(--bordure);
}
.demo-jeu__siege small { font-weight: 400; font-size: 9.5px; color: var(--encre-douce); }
.demo-jeu__siege--moi { background: #eaf4ee; border-color: #8fc0a6; color: var(--vert-fonce); }
.demo-jeu__siege--n { grid-area: n; }
.demo-jeu__siege--s { grid-area: s; }
.demo-jeu__siege--e { grid-area: e; }
.demo-jeu__siege--o { grid-area: o; }
.demo-jeu__plateau {
    grid-area: p;
    display: grid;
    text-align: center;
    padding: 12px 4px;
    border-radius: 12px;
    background: var(--vert);
    color: var(--creme);
    font-size: 10.5px;
    box-shadow: inset 0 0 0 3px #2a7358;
}
.demo-jeu__plateau b { font-family: var(--police-titre); font-size: 14px; }
.demo-donnes { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.demo-choix {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 42px;
    height: 34px;
    border-radius: 9px;
    font-weight: 700;
    border: 1px solid var(--bordure);
    background: #ece8de;
    color: var(--encre-douce);
    transition: background .3s, color .3s, border-color .3s;
}
.demo-choix--partiel { background: #fdf0d8; border-color: #ecc77d; color: #6b4e0f; }
.demo-choix--complet { background: #eaf4ee; border-color: #8fc0a6; color: #1c4a33; }
.demo-choix--actif { box-shadow: 0 0 0 2px var(--vert); }
.demo-choix__coche { font-size: 12px; }
.demo-choix--partiel .demo-choix__coche { display: none; }
.demo-choix__pastille {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--vert);
    color: var(--creme);
    font-size: 10px;
    line-height: 17px;
    text-align: center;
}
.demo-donne {
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 10px;
    min-height: 196px;
}
.demo-donne__entete { display: grid; margin-bottom: 8px; }
.demo-donne__entete b { font-family: var(--police-titre); font-size: 15px; }
.demo-donne__entete span { font-size: 11px; color: var(--encre-douce); }
.demo-champs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.demo-champ { display: grid; gap: 2px; text-align: center; }
.demo-champ small { font-size: 8.5px; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-champ > span {
    display: block;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    background: #fff;
    padding: 4px 0;
    font-size: 15px;
    font-weight: 700;
    font-variant-emoji: text;
    transition: border-color .2s, box-shadow .2s;
}
.demo-champ--attente > span { color: #c4bcaa; font-weight: 400; }
.demo-champ--actif > span { border-color: var(--vert); box-shadow: 0 0 0 2px rgba(31, 93, 69, .2); animation: demo-arrivee .35s ease-out; }
.demo-bouton {
    display: block;
    text-align: center;
    background: var(--vert);
    color: var(--creme);
    border-radius: 8px;
    padding: 7px;
    font-weight: 600;
    transition: transform .15s, background .15s;
}
.demo-bouton--appuye { transform: scale(.95); background: var(--vert-fonce); }
/* Jeu de la donne, en petit (reprend .jeu de l'écran de la table) : les 4 mains autour de la table, Nord en haut */
.demo-mains {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas: ". n ." "o c e" ". s .";
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 10px;
    padding: 8px 4px;
    border-radius: 8px;
    background: #f7f3ea;
    font-variant-emoji: text;
}
.demo-main { display: grid; font-size: 10.5px; line-height: 1.35; }
.demo-main--N { grid-area: n; }
.demo-main--O { grid-area: o; }
.demo-main--E { grid-area: e; }
.demo-main--S { grid-area: s; }
.demo-main__siege { margin: 0 0 1px; font-size: 9.5px; font-weight: 700; color: var(--encre-douce); white-space: nowrap; }
.demo-main__siege span { font-weight: 400; }
.demo-main__couleur { display: flex; gap: 3px; white-space: nowrap; }
.demo-main__symbole { width: 1em; text-align: center; }
.demo-main__cartes { font-weight: 600; }
.demo-mains__centre {
    grid-area: c;
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 7px;
    background: var(--vert);
    color: var(--creme);
    font-size: 9px;
    font-weight: 700;
}
.demo-mains__point { position: absolute; width: 13px; height: 13px; line-height: 13px; text-align: center; border-radius: 3px; }
.demo-mains__point[data-siege="N"] { top: 2px; left: 14.5px; }
.demo-mains__point[data-siege="S"] { bottom: 2px; left: 14.5px; }
.demo-mains__point[data-siege="O"] { left: 2px; top: 14.5px; }
.demo-mains__point[data-siege="E"] { right: 2px; top: 14.5px; }
.demo-mains__point[data-vulnerable] { background: var(--rouge); }
.demo-mains__point[data-donneur] { text-decoration: underline; text-underline-offset: 2px; }
.demo-resultat--entree .demo-mains { animation: vitrine-entree .45s ease-out .1s backwards; }
.demo-resultat__score { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; font-size: 14px; }
.demo-resultat__score .pastille { margin-left: 0; font-size: 11px; }
.demo-resultats { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.demo-resultats th { font-size: 10px; color: var(--encre-douce); font-weight: 600; text-align: left; border-bottom: 1px solid var(--bordure); padding: 3px 4px; }
.demo-resultats td { padding: 3px 4px; border-bottom: 1px solid #efe9dc; white-space: nowrap; }
.demo-resultats tr:last-child td { border-bottom: 0; }
.demo-resultats tr[data-moi] td { background: #eaf4ee; font-weight: 700; }
.demo-resultat--entree { animation: vitrine-entree .4s ease-out; }
.demo-resultat--entree tbody tr { animation: vitrine-entree .4s ease-out .45s backwards; }
.demo-resultat--entree tbody tr:nth-child(2) { animation-delay: .57s; }
.demo-resultat--entree tbody tr:nth-child(3) { animation-delay: .69s; }
.demo-resultat--entree tbody tr:nth-child(4) { animation-delay: .81s; }

/* 4. Classement */
.demo-classement__etat {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eaf4ee;
    color: #1c4a33;
    border: 1px solid #b9d8c5;
    transition: background .3s, color .3s;
}
.demo-classement__etat--provisoire { background: #fdf5e2; color: #6b4e0f; border-color: #ecd9a8; }
.demo-rangs { list-style: none; margin: 0; padding: 8px 12px 12px; display: grid; gap: 5px; }
.demo-rang {
    display: grid;
    grid-template-columns: 26px minmax(0, 1.3fr) minmax(0, 1fr) 62px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--creme);
    position: relative;
}
.demo-rang__numero {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    background: var(--papier);
    border: 1px solid var(--bordure);
}
.demo-rang--1 .demo-rang__numero { background: #e9c46a; border-color: #d4a73a; color: #4a3505; }
.demo-rang--2 .demo-rang__numero { background: #d9dde0; border-color: #b8bec3; color: #333b40; }
.demo-rang--3 .demo-rang__numero { background: #e6b48f; border-color: #c98f62; color: #4b2a10; }
.demo-rang__nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-rang__barre { height: 8px; border-radius: 999px; background: var(--papier); overflow: hidden; }
.demo-rang__barre span { display: block; height: 100%; border-radius: 999px; background: var(--vert); transition: width .8s ease; }
.demo-rang--1 .demo-rang__barre span { background: #2e7d4f; }
.demo-rang__pourcentage { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-rang--monte { animation: demo-monte 1.4s ease-out; }
.demo-rang--descend { animation: demo-descend 1.4s ease-out; }
@keyframes demo-monte { from { background: #d8eee0; } to { background: var(--creme); } }
@keyframes demo-descend { from { background: #f6dfe2; } to { background: var(--creme); } }

/* ------------------------------------------------------------------ accueil : section « Entre amis » */
.accroche__amis { margin: 22px 0 0; font-size: 15px; opacity: .92; }
.accroche__amis span { color: #ffb3bd; }
.accroche__amis a { color: var(--creme); font-weight: 600; text-underline-offset: 3px; }

.entre-amis { padding: 8px 0 48px; }
.entre-amis__entete {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
    align-items: center;
    margin-bottom: 32px;
}
.entre-amis__sur-titre {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 13px;
    font-weight: 600;
    color: var(--rouge);
}
.entre-amis__titre { font-size: clamp(24px, 3.6vw, 34px); margin-bottom: 10px; }
.entre-amis__intro { margin: 0; font-size: 17px; color: var(--encre-douce); max-width: 34em; }

/* Illustration : une proposition de date et un message aux joueurs, en cartes de notification */
.entre-amis__illustration { position: relative; display: grid; gap: 12px; padding: 6px 0 6px 18px; }
.notification {
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 14px 34px rgba(21, 69, 50, .14);
    font-size: 14px;
    transform: rotate(-1.2deg);
}
.notification--message { margin-left: 34px; margin-right: -6px; transform: rotate(1.4deg); }
.notification p { margin: 0; }
.notification__titre { font-weight: 700; font-size: 13px; color: var(--vert); margin-bottom: 4px !important; }
.notification__icone { font-size: 15px; }
.notification__texte { color: var(--encre); }
.notification__dates { margin: 4px 0 8px !important; font-size: 15px; }
.notification__dates s { color: var(--encre-douce); }
.notification__accord { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--encre-douce); margin-bottom: 10px; }
.notification__jauge { flex: 1; height: 6px; border-radius: 999px; background: var(--creme); overflow: hidden; }
.notification__jauge span { display: block; height: 100%; background: var(--vert); border-radius: 999px; }
.notification__boutons { display: flex; gap: 8px; }
.notification__bouton {
    padding: 4px 14px;
    border-radius: 8px;
    border: 1px solid var(--bordure);
    font-size: 13px;
    font-weight: 600;
}
.notification__bouton--oui { background: var(--vert); border-color: var(--vert); color: var(--creme); }

/* Atouts pour un groupe d'amis */
.entre-amis__atouts {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.entre-amis__atout {
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 20px 20px 18px;
}
.entre-amis__atout h3 { margin: 6px 0 6px; font-family: var(--police-titre); font-size: 19px; }
.entre-amis__atout p { margin: 0; color: var(--encre-douce); font-size: 15px; }
.entre-amis__couleur {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eaf4ee;
    color: var(--vert-fonce);
    font-size: 20px;
    font-variant-emoji: text;
}
.entre-amis__couleur[data-rouge] { background: #fbeaec; color: var(--rouge); }

/* Démarrer : quatre étapes, puis le budget et les actions */
.entre-amis__demarrer {
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 26px 26px 24px;
}
.entre-amis__sous-titre { margin: 0 0 18px; font-family: var(--police-titre); font-size: 22px; }
.entre-amis__etapes {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    counter-reset: etape;
}
.entre-amis__etapes li { display: grid; gap: 4px; align-content: start; position: relative; }
.entre-amis__etapes li span:last-child { color: var(--encre-douce); font-size: 15px; }
.entre-amis__numero {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--vert);
    color: var(--creme);
    font-weight: 700;
    margin-bottom: 4px;
}
/* Filet entre les numéros des étapes */
.entre-amis__etapes li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 42px;
    right: -8px;
    border-top: 2px dashed var(--bordure);
}
.entre-amis__budget {
    margin: 0 0 18px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #eaf4ee;
    color: #1c4a33;
    font-size: 15px;
}
.entre-amis__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 880px) {
    .entre-amis__entete { grid-template-columns: 1fr; gap: 24px; }
    .entre-amis__illustration { max-width: 420px; padding-left: 0; }
    .entre-amis__atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .entre-amis__etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .entre-amis__etapes li::after { display: none; }
}
@media (max-width: 600px) {
    .entre-amis__atouts, .entre-amis__etapes { grid-template-columns: 1fr; }
    .entre-amis__demarrer { padding: 20px 18px; }
    .notification--message { margin-left: 16px; margin-right: 0; }
}

@media (max-width: 880px) {
    .vitrine__panneau { grid-template-columns: 1fr; gap: 28px; }
    .vitrine--js .vitrine__panneau { min-height: 0; }
}
@media (max-width: 600px) {
    .vitrine { padding: 36px 0 32px; }
    .vitrine__onglet { font-size: 14px; padding-right: 14px; }
    .appareil--tablette { padding: 10px; border-radius: 20px; }
    .demo-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-tables--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 8px; gap: 6px; }
    .demo-tables--trois .demo-place__nom { font-size: 11px; }
    .vitrine__profils-libelle { display: none; }
    .demo-remplissage__compteurs { font-size: 11px; }
    .demo-rang { grid-template-columns: 24px minmax(0, 1fr) 58px; }
    .demo-rang__barre { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .vitrine *, .vitrine *::before, .vitrine *::after { animation: none !important; transition: none !important; }
}

/* Versions imprimables (règles de gestion, 18) : classement d'un tournoi, résultats de ses donnes, calendrier d'un
   championnat. À l'écran, une feuille blanche sous une barre « Retour / Imprimer » ; à l'impression, la feuille
   seule, en noir sur blanc, avec l'en-tête du groupe et du championnat. */
.impression-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.impression-barre__aide { margin: 0; }
.impression { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 28px; }
.impression__entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
                      padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--encre); }
.impression__groupe p { margin: 0; }
.impression__nom-groupe { font-family: var(--police-titre); font-size: 22px; font-weight: 700; }
.impression__adresse { font-size: 13px; color: var(--encre-douce); }
.impression__championnat { margin-top: 4px !important; font-size: 16px; font-weight: 600; }
.impression__marque { display: flex; flex-direction: column; align-items: center; flex: none; color: var(--vert); }
.impression__marque .marque__couleurs { font-size: 20px; }
.impression__nom-site { font-size: 12px; font-weight: 700; }
.impression__titres { margin-bottom: 14px; }
.impression__titre { margin: 0; font-family: var(--police-titre); font-size: 24px; }
.impression__detail { margin: 2px 0 0; color: var(--encre-douce); }
.impression__section { margin-top: 16px; }
.impression__section h2 { margin: 0 0 6px; font-family: var(--police-titre); font-size: 17px; }
.impression__mention { margin: 0 0 8px; font-size: 13px; font-style: italic; }
.impression__note { margin: 8px 0 0; font-size: 12px; color: var(--encre-douce); }
.impression .tableau-defilant { margin: 0; }
.impression .tableau { font-size: 13px; }
.impression .tableau th, .impression .tableau td { padding: 4px 8px; }
/* Une donne : son jeu à gauche, les scores des tables à droite (dessous sur un écran étroit) */
.impression-donne { padding: 12px 0; border-top: 1px solid var(--bordure); }
.impression-donne:first-of-type { border-top: 0; padding-top: 0; }
.impression-donne__titre { margin: 0 0 8px; font-size: 16px; }
.impression-donne__titre span { font-weight: 400; font-size: 13px; color: var(--encre-douce); margin-left: 8px; }
.impression-donne__corps { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; align-items: start; }
.impression-donne__corps > * { min-width: 0; }
.impression-donne .jeu { margin: 0; justify-content: start; }
.impression-donne__vide { margin: 0; font-size: 13px; color: var(--encre-douce); }
/* Calendrier : une ligne par tournoi, les tournois groupés par tour */
.calendrier-impression .calendrier-impression__tour th { background: var(--creme); color: var(--encre); font-size: 14px;
                                                        text-align: left; }
.calendrier-impression__annule td { text-decoration: line-through; color: var(--encre-douce); }
.calendrier-impression__court { white-space: nowrap; }
/* Les équipes prennent toute la largeur restante : date, heure, type et état se réduisent à leur contenu */
.calendrier-impression__equipes { width: 100%; }
@media (max-width: 700px) {
    .impression { padding: 16px; }
    .impression-donne__corps { grid-template-columns: 1fr; }
}
@media print {
    @page { size: A4 portrait; margin: 12mm; }
    .impression { border: 0; border-radius: 0; padding: 0; }
    .impression, .impression * { color: #000 !important; }
    .impression__entete { border-bottom-color: #000; }
    .impression__marque .marque__couleur--rouge { color: #000; }
    .impression .tableau-defilant { overflow: visible; border: 0; }
    .impression .tableau { font-size: 10.5pt; }
    .impression .tableau th, .impression .tableau td { border: 1px solid #000; background: #fff !important;
                                                       padding: 1mm 2mm; }
    .impression .tableau thead { display: table-header-group; }
    .impression .tableau tr { break-inside: avoid; page-break-inside: avoid; }
    .calendrier-impression .calendrier-impression__tour th { background: #eee !important; }
    .calendrier-impression th, .calendrier-impression td { padding: 1mm 1.5mm; }
    .calendrier-impression td.tableau__date, .calendrier-impression td.calendrier-impression__court { font-size: 9pt; }
    /* Une donne n'est jamais coupée entre deux pages */
    .impression-donne { break-inside: avoid; page-break-inside: avoid; border-top-color: #000; padding: 3mm 0; }
    .impression-donne__corps { grid-template-columns: auto 1fr; }
    .impression-donne .jeu__couleurs { font-size: 10pt; line-height: 1.3; }
    .impression-donne .jeu__centre { background: #fff; border: 1px solid #000; }
    .impression-donne .jeu__point-cardinal.jeu-vulnerable { background: #000; color: #fff !important;
                                                            -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .impression-donne .resultats-donne { font-size: 9pt; }
    .impression-donne .resultats-donne td, .impression-donne .resultats-donne th { padding: 0.6mm 1.2mm; }
    .conteneur.page-large, .conteneur.page-moyenne { max-width: none; padding: 0; }
}

/* v0.39 : en-têtes de colonnes cliquables des classements (critère du classement) et choix des courbes */
.tableau th .tri { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.tableau th .tri:hover, .tableau th .tri:focus-visible { color: var(--vert); text-decoration: underline; }
.tableau th[aria-sort] .tri { color: var(--vert); }
.tri__fleche { font-size: 11px; opacity: .55; }
.tableau th[aria-sort] .tri__fleche { opacity: 1; }
.choix-courbe { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
@media print { .tri__fleche, .choix-courbe { display: none; } }
.progression--chargement .progression__cadre { opacity: .5; transition: opacity .15s; }

/* v0.40 : compte rendu des invitations des joueurs d'une équipe placée à partir des tables (10.12) */
.liste-alerte { list-style: disc inside; }
.liste-alerte li + li { margin-top: 4px; }

/* v0.44 : Contacter Duplibridge (règles de gestion, 21) */
/* Champ piège du formulaire des visiteurs : hors de l'écran, seuls les robots le remplissent */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demande { border: 1px solid var(--bordure); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; background: #fff; }
.demande__texte { white-space: pre-wrap; margin: 10px 0; }
.demande__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 10px; }
.demande__actions details { flex-basis: 100%; }

/* Mode maintenance (règles de gestion, 12.5) */
.bandeau-maintenance { border-top: 1px solid; border-bottom: 1px solid; font-size: 15px; }
.bandeau-maintenance__contenu { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding-top: 10px; padding-bottom: 10px; }
.bandeau-maintenance__message { flex-basis: 100%; white-space: pre-wrap; }
.bandeau-maintenance--annonce { background: #fdf5e2; border-color: #ead7a4; color: #6b4e0f; }
.bandeau-maintenance--lecture_seule,
.bandeau-maintenance--ferme { background: #fbeaec; border-color: #eab8c0; color: #7d1a28; }
.maintenance-page__message { white-space: pre-wrap; }
.maintenance-page__liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }