/* ========================================
   CALENDRIER DES EVENEMENTS (signalement 432)
   Bandeau de densite par mois, vue Annee en heatmap, vue Chronologie par piste.
   Trois lectures de la meme fenetre temporelle : ou sont les pics, ou sont les creux.
   ======================================== */

/* Evenement annule (signalement 439) : il reste affiche, barre et attenue. */
.evenement-annule {
    text-decoration: line-through;
    opacity: 0.65;
}

/* ── Legende du calendrier (signalement 509) ─────────────────────────────── */

/* Taille en pixels par jeton, jamais en em : en densite supercompact un 0,8 em tombait a 10 px,
   sous le plancher du guide, et la legende devenait illisible. */
.legende-calendrier {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 4px;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legende-pastille {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
}

.legende-libelle {
    font-size: var(--taille-xs);
    line-height: var(--interligne-corps);
    color: var(--texte-secondaire);
}

/* ── Bandeau de densite ───────────────────────────────────────────────────── */

.densite-bandeau {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 0;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    margin-bottom: 4px;
}

.densite-colonnes {
    display: flex;
    flex: 1;
    gap: 3px;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.densite-mois {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    flex: 1 0 44px;
    min-width: 44px;
    padding: 2px 0 3px;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    scroll-snap-align: start;
}

.densite-mois:hover {
    background: var(--neutral-fill-stealth-hover);
}

.densite-mois-actif {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
}

.densite-total {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--neutral-foreground-rest);
}

.densite-mois-vide .densite-total {
    color: var(--neutral-foreground-hint);
}

/* Hauteur fixe : les barres se comparent entre elles, pas au contenu de la colonne. */
.densite-barres {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 28px;
}

/* La couleur vient du mode choisi dans le calendrier (signalement 435), posée en ligne. */
.densite-segment {
    flex-shrink: 0;
}

/* Un mois vide se dessine : c'est le creux qu'on est venu chercher, pas une absence.
   Le trait doit rester visible dans les deux thèmes, d'où le stroke fort. */
.densite-barre-zero {
    height: 3px;
    background: var(--neutral-stroke-strong-rest);
}

.densite-libelle {
    font-size: 0.7rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--neutral-foreground-hint);
}

.densite-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 1600px) {
    .densite-barres {
        height: 48px;
    }

    .densite-total,
    .densite-libelle {
        font-size: 0.75rem;
    }
}

/* ── Vue Annee : heatmap 12 mois x 31 jours ───────────────────────────────── */

.heatmap-annee {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    overflow: auto;
    padding: 4px 2px;
}

.heatmap-barre-annee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}

.heatmap-annee-libelle {
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 54px;
    text-align: center;
}

/* Colonnes de largeur fixe : en 1fr, une case de jour atteindrait 50 px sur un grand écran,
   ce qui transforme la grille en damier illisible. */
.heatmap-ligne {
    display: grid;
    grid-template-columns: 56px repeat(31, 24px) 34px;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

.heatmap-entete {
    color: var(--neutral-foreground-hint);
    font-size: 0.7rem;
}

.heatmap-jour-entete {
    text-align: center;
}

.heatmap-mois {
    font-size: 0.75rem;
    color: var(--neutral-foreground-rest);
}

.heatmap-cellule {
    aspect-ratio: 1;
    min-height: 14px;
    border: none;
    border-radius: 2px;
    padding: 0;
    cursor: pointer;
}

.heatmap-cellule:hover {
    outline: 1px solid var(--accent-fill-rest);
}

.heatmap-cellule:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
}

/* Paliers construits par color-mix : une opacite sur blanc disparaitrait en theme sombre. */
.heatmap-niveau-0 {
    background: var(--neutral-layer-3);
    cursor: default;
}

/* Paliers neutres : ils ne servent plus qu'à la légende d'intensité. Une case pleine reçoit
   en ligne la couleur de sa classe dominante, selon le mode choisi (signalement 435). */
.heatmap-niveau-1 {
    background: color-mix(in srgb, var(--neutral-foreground-rest) 25%, transparent);
}

.heatmap-niveau-2 {
    background: color-mix(in srgb, var(--neutral-foreground-rest) 50%, transparent);
}

.heatmap-niveau-3 {
    background: color-mix(in srgb, var(--neutral-foreground-rest) 80%, transparent);
}

.heatmap-hors-mois {
    background: none;
    cursor: default;
}

.heatmap-cellule:disabled {
    cursor: default;
}

.heatmap-cellule:disabled:hover {
    outline: none;
}

.heatmap-total {
    font-size: 0.7rem;
    text-align: right;
    color: var(--neutral-foreground-rest);
}

.heatmap-legende {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    font-size: var(--taille-xs);
    color: var(--texte-secondaire);
}

.heatmap-legende .heatmap-cellule {
    width: 14px;
    min-height: 14px;
    cursor: default;
}

.heatmap-total-zero {
    color: var(--neutral-foreground-hint);
}

/* Sous 768 px, les deux grilles défilent horizontalement : la colonne de gauche reste visible,
   sinon on ne sait plus de quel mois ou de quelle piste on lit la ligne. */
@media (max-width: 767.98px) {
    .heatmap-annee {
        overflow-x: auto;
    }

    .heatmap-ligne {
        grid-template-columns: 48px repeat(31, 14px) 30px;
        justify-content: start;
    }

    .heatmap-mois,
    .chronologie-piste {
        position: sticky;
        left: 0;
        background: var(--neutral-layer-1);
        z-index: 1;
    }
}

@media (min-width: 1600px) {
    .heatmap-ligne {
        grid-template-columns: 64px repeat(31, 32px) 40px;
    }
}

/* ── Vue Chronologie : une piste par valeur de l'axe ──────────────────────── */

.chronologie {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    overflow: auto;
    padding: 4px 2px;
}

.chronologie-axes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-bottom: 4px;
}

.chronologie-axes-libelle {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.chronologie-vide {
    color: var(--neutral-foreground-hint);
    font-size: 0.85rem;
    padding: 12px 2px;
}

.chronologie-ligne {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.chronologie-compte {
    margin-left: auto;
    padding-left: 6px;
    color: var(--neutral-foreground-hint);
}

.chronologie-reste {
    font-size: 0.65rem;
    color: var(--neutral-foreground-hint);
}

.chronologie-piste {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chronologie-pastille-piste {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chronologie-semaines {
    display: grid;
    gap: 0;
}

.chronologie-semaine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 20px;
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding: 2px 0;
    flex-wrap: wrap;
}

.chronologie-point {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
}

.chronologie-point:hover {
    outline: 1px solid var(--accent-fill-rest);
}

.chronologie-axe {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    padding-top: 2px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.chronologie-axe-mois {
    display: grid;
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
}

.chronologie-axe-mois span {
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding-left: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

@media (max-width: 767.98px) {
    .chronologie-ligne,
    .chronologie-axe {
        grid-template-columns: 120px minmax(0, 1fr);
    }
}

/* ========================================
   FICHE ÉVÉNEMENT ET INSCRIPTIONS SUR SMARTPHONE (lot 4b, docs/ui-patterns.md §4)
   La fiche se consulte : Communication et Formulaire d'inscription sont en masque-mobile dans
   la page. Rien ici ne change le rendu à 768 px et au-delà.
   ======================================== */
@media (max-width: 767.98px) {
    /* Rangées de champs : la page les écrit en flex sans retour à la ligne (cinq champs sur une
       rangée, chaque FluentSelect avec son min-width de 250 px, la fiche débordait de 430 px).
       Deux champs par rangée, une zone de texte seule sur la sienne. */
    .fiche-evenement .stack-vertical > div:not(.page-header) {
        flex-wrap: wrap;
    }

    .fiche-evenement .stack-vertical > div:not(.page-header) > div {
        flex-basis: calc(50% - 6px) !important;
        min-width: 0 !important;
    }

    .fiche-evenement .stack-vertical > div:not(.page-header) > div:has(> fluent-text-area) {
        flex-basis: 100% !important;
    }

    .fiche-evenement fluent-select,
    .fiche-evenement fluent-combobox,
    .fiche-evenement fluent-text-field,
    .fiche-evenement fluent-number-field,
    .fiche-evenement fluent-date-picker,
    .fiche-evenement fluent-time-picker {
        min-width: 0 !important;
    }

    /* Le suivi chronologique (stepper) a sa règle smartphone dans app.css : elle sert aussi aux
       deux steppers de la fiche d'adhésion. */

    /* Cartes de statistiques (un nombre, un libellé) : trois par rangée, au lieu d'une pile de
       six cartes de 110 px avant la première information. */
    .rangee-cartes.cartes-statistiques {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--espace-2);
    }

    .cartes-statistiques fluent-card {
        padding: 8px 4px !important;
    }

    /* Grille des inscriptions : les colonnes dépendent de l'événement, le gabarit mobile vient
       donc du composant (variable --gabarit-mobile), avec 0px pour les colonnes col-hide-mobile. */
    table.inscriptions-grid {
        grid-template-columns: var(--gabarit-mobile) !important;
    }

    /* Statut et présence en badges texte : avec les 16 px de marge de chaque côté, « Présent » ou
       « Désinscrit » débordaient de leur piste à 393 px (signalement 505). */
    table.inscriptions-grid td.col-badge,
    table.inscriptions-grid th.col-badge {
        padding-inline: var(--espace-1) !important;
    }
}

/* ========================================
   DIALOG « RATTACHER AU FICHIER » (signalement 473)
   Une ligne par inscrit : qui il est, quelle fiche, quelle entité. Le nom domine ; ce qu'il a
   saisi et les états sont en second. Les séparations sont des filets, comme dans les grilles.
   ======================================== */

.rattachement-intro {
    margin: 0 0 var(--espace-4);
    color: var(--texte-secondaire);
    font-size: var(--taille-s);
}

.rattachement-grille {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.1fr);
    column-gap: var(--espace-4);
    align-items: start;
}

.rattachement-entete {
    padding-bottom: var(--espace-2);
    border-bottom: 1px solid var(--bordure-forte);
    font-size: var(--taille-xs);
    font-weight: var(--graisse-forte);
    color: var(--texte-secondaire);
}

.rattachement-cellule {
    min-width: 0;
    height: 100%;
    padding: var(--espace-3) 0;
    border-bottom: 1px solid var(--bordure);
}

.rattachement-nom {
    font-weight: var(--graisse-forte);
}

.rattachement-secondaire {
    font-size: var(--taille-xs);
    color: var(--texte-secondaire);
    overflow-wrap: anywhere;
}

/* Le libellé de la liste est dit par l'en-tête de colonne : il reste pour les lecteurs d'écran. */
.rattachement-libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rattachement-liste {
    width: 100%;
    min-height: 32px;
    padding: var(--espace-1) var(--espace-2);
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--rayon-m);
    font: inherit;
    cursor: pointer;
}

.rattachement-liste:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.rattachement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-1);
    margin-left: calc(-1 * var(--espace-2));
}

.rattachement-message {
    margin-top: var(--espace-1);
    font-size: var(--taille-xs);
    color: var(--texte-secondaire);
}

.rattachement-message--attente {
    color: var(--statut-attention-texte);
}

.rattachement-resultat {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: var(--espace-2);
}

@media (max-width: 767.98px) {
    /* Une colonne : la case à gauche, puis l'inscrit, sa fiche et son entité l'un sous l'autre. */
    .rattachement-grille {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--espace-3);
    }

    .rattachement-entete {
        display: none;
    }

    .rattachement-cellule {
        grid-column: 2;
        padding: var(--espace-2) 0;
        border-bottom: none;
    }

    .rattachement-cellule--case {
        grid-column: 1;
    }

    .rattachement-cellule--case,
    .rattachement-cellule--inscrit {
        border-top: 1px solid var(--bordure);
        padding-top: var(--espace-3);
    }

    .rattachement-resultat {
        grid-column: 2;
    }
}

/* Source de l'inscription et état de sa confirmation (signalement 484). */
.inscription-source {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-1);
}

/* ===================================================================================
   Plan de table d'un dîner-débat (ADR-0018) : colonne « Non placés » + grille de tables.
   Cartes en <div> et non en FluentCard : son Shadow DOM crée un containing block qui
   dérègle les menus et les classes posées par SortableJS doivent rester globales.
   =================================================================================== */
.plan-layout {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--espace-3);
    align-items: start;
}

@media (min-width: 1600px) {
    .plan-layout {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

.plan-carte {
    background: var(--surface-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre-1);
}

/* Enfants directs du FluentStack de la page : sans largeur explicite ils se replient sur leur contenu. */
.plan-signaux-carte,
.plan-vide {
    width: 100%;
    box-sizing: border-box;
}

.plan-signaux-carte {
    padding: var(--espace-3);
}

.plan-entete-actions {
    display: flex;
    gap: var(--espace-2);
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.plan-aside {
    position: sticky;
    top: var(--espace-3);
    display: flex;
    flex-direction: column;
    gap: var(--espace-2);
    padding: var(--espace-3);
    max-height: calc(var(--hauteur-ecran, 100vh) - 180px);
}

.plan-aside__titre {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espace-2);
    font-weight: 600;
}

.plan-aside .plan-liste {
    overflow-y: auto;
    min-height: 120px;
    flex: 1;
}

.plan-aside__vide {
    color: var(--texte-discret);
    font-size: var(--taille-s);
    padding: var(--espace-3);
    text-align: center;
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon-m);
}

.plan-salle {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--espace-3);
}

@media (min-width: 1600px) {
    .plan-salle {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }
}

.table-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espace-2);
    padding: var(--espace-3);
    transition: box-shadow var(--duree-normale), border-color var(--duree-normale);
}

.table-carte__coin {
    position: absolute;
    top: var(--espace-1);
    right: var(--espace-1);
    z-index: 2;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--duree-rapide);
}

.table-carte:hover .table-carte__coin,
.table-carte:focus-within .table-carte__coin {
    opacity: 1;
}

/*
 * Le rond : la liste des chaises garde son ordre DOM (celui que SortableJS manipule) ; chaque
 * chaise est tournée autour du centre, la première à midi, dans le sens horaire. Le rayon suit la
 * largeur de la tuile (unités de conteneur) et la largeur d'une chaise suit la corde entre deux
 * chaises voisines, pour que douze chaises ne se chevauchent pas.
 */
.table-ronde {
    position: relative;
    container-type: inline-size;
    --chaise-h: 38px;
    --chaise-max: 96px;
    /* Une chaise à 3 h ou 9 h déborde de la moitié de sa largeur : le rayon la retient dans la tuile. */
    --rayon: calc(50cqw - var(--chaise-max) / 2);
    --chaise-l: min(var(--chaise-max), calc(2 * var(--rayon) * sin(180deg / var(--n)) - 10px));
}

.table-ronde .table-places {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    counter-reset: chaise;
}

.table-ronde .table-places::before {
    content: "";
    position: absolute;
    /* Le plateau affleure le milieu des chaises : elles sont posées sur son bord. */
    inset: calc(50cqw - var(--rayon) - var(--chaise-h) / 2 + 6px);
    border-radius: 50%;
    border: 2px solid var(--bordure);
    background: var(--surface-creuse);
}

.table-carte--honneur .table-places::before {
    border-color: var(--marque-300);
    background: var(--statut-marque-fond);
}

.table-carte--pleine .table-places::before {
    border-color: var(--statut-succes-plein);
}

.table-ronde .table-places > li {
    --angle: calc(var(--i) * 360deg / var(--n));
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--chaise-l);
    height: var(--chaise-h);
    margin: 0;
    counter-increment: chaise;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--rayon))) rotate(calc(-1 * var(--angle)));
}

.table-ronde .table-places > li:hover,
.table-ronde .table-places > li:focus-within {
    z-index: 3;
}

.table-ronde .table-places > li:nth-child(1) { --i: 0; }
.table-ronde .table-places > li:nth-child(2) { --i: 1; }
.table-ronde .table-places > li:nth-child(3) { --i: 2; }
.table-ronde .table-places > li:nth-child(4) { --i: 3; }
.table-ronde .table-places > li:nth-child(5) { --i: 4; }
.table-ronde .table-places > li:nth-child(6) { --i: 5; }
.table-ronde .table-places > li:nth-child(7) { --i: 6; }
.table-ronde .table-places > li:nth-child(8) { --i: 7; }
.table-ronde .table-places > li:nth-child(9) { --i: 8; }
.table-ronde .table-places > li:nth-child(10) { --i: 9; }
.table-ronde .table-places > li:nth-child(11) { --i: 10; }
.table-ronde .table-places > li:nth-child(12) { --i: 11; }
.table-ronde .table-places > li:nth-child(13) { --i: 12; }

/* Numéro de chaise, pour se dire « chaise 4 » au téléphone et le retrouver sur l'impression. */
.table-places > li::before {
    content: counter(chaise);
    position: absolute;
    top: -8px;
    left: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    box-sizing: border-box;
    border-radius: var(--rayon-pilule);
    border: 1px solid var(--bordure);
    background: var(--surface-carte);
    color: var(--texte-secondaire);
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.table-ronde__centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(2 * var(--rayon) - var(--chaise-h) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    /* Un dépôt sur le centre atteint la liste : en bout de table. */
    pointer-events: none;
}

.table-ronde__centre .table-carte__titre {
    width: 100%;
}

.table-carte--honneur {
    border-color: var(--marque-300);
    background: linear-gradient(180deg, var(--statut-marque-fond) 0, var(--surface-carte) 56px);
}

.table-carte--mecene {
    border-color: var(--statut-marque-bordure);
}

.table-carte--surlignee {
    box-shadow: 0 0 0 3px var(--focus);
}

.table-carte__titre {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: var(--taille-l);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-carte__mecene {
    font-size: var(--taille-xs);
    color: var(--statut-marque-texte);
}

.table-carte__jauge {
    font-size: var(--taille-s);
    color: var(--texte-secondaire);
    font-variant-numeric: tabular-nums;
}

.table-carte--pleine .table-carte__jauge {
    color: var(--statut-succes-texte);
}

.table-carte__pied {
    font-size: var(--taille-xs);
    color: var(--texte-discret);
    min-height: 1.2em;
}

.plan-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espace-1);
}

/* La file défile : sans cela, les cartes (min-height posée) se compriment pour tenir dans la colonne
   et l'entreprise vient chevaucher le nom. */
.plan-liste > li {
    flex-shrink: 0;
}

.convive {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nom actions" "entreprise actions" "badges actions";
    column-gap: var(--espace-2);
    align-items: center;
    min-height: 40px;
    padding: var(--espace-1) var(--espace-2);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-m);
    background: var(--surface-carte);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.convive:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.convive--attente {
    border-style: dashed;
    border-color: var(--statut-attention-bordure);
    background: var(--statut-attention-fond);
}

.convive--hote .convive__nom::before {
    content: "★ ";
    color: var(--marque-500);
}

.convive--fantome {
    opacity: 0.35;
}

.convive--saisi {
    box-shadow: var(--ombre-2);
}

.convive--en-vol {
    cursor: grabbing;
    transform: rotate(-1.5deg);
}

/* Coloration par critère (genre, adhésion…) : fond teinté et liseré à gauche, teintes d'app.css. */
.convive--teinte-1 { --teinte-fond: var(--categorie-1-fond); --teinte-texte: var(--categorie-1-texte); }
.convive--teinte-2 { --teinte-fond: var(--categorie-2-fond); --teinte-texte: var(--categorie-2-texte); }
.convive--teinte-3 { --teinte-fond: var(--categorie-3-fond); --teinte-texte: var(--categorie-3-texte); }
.convive--teinte-4 { --teinte-fond: var(--categorie-4-fond); --teinte-texte: var(--categorie-4-texte); }
.convive--teinte-5 { --teinte-fond: var(--categorie-5-fond); --teinte-texte: var(--categorie-5-texte); }
.convive--teinte-6 { --teinte-fond: var(--categorie-6-fond); --teinte-texte: var(--categorie-6-texte); }
.convive--teinte-7 { --teinte-fond: var(--categorie-7-fond); --teinte-texte: var(--categorie-7-texte); }
.convive--teinte-8 { --teinte-fond: var(--categorie-8-fond); --teinte-texte: var(--categorie-8-texte); }

.convive[class*="convive--teinte-"] {
    background: var(--teinte-fond);
    box-shadow: inset 4px 0 0 var(--teinte-texte);
}

.convive--estompe {
    opacity: 0.3;
}

.plan-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-1) var(--espace-2);
    padding: var(--espace-2) var(--espace-3);
    font-size: var(--taille-s);
}

.plan-critere {
    margin-right: var(--espace-2);
}

.plan-legende__valeur {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: var(--rayon-pilule);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.plan-legende__valeur:hover {
    background: var(--surface-creuse);
}

.plan-legende__valeur--active {
    border-color: var(--marque-500);
    background: var(--surface-creuse);
}

.plan-legende__nombre {
    color: var(--texte-secondaire);
    font-variant-numeric: tabular-nums;
}

.plan-pastille {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--teinte-texte, var(--bordure));
    border: 1px solid var(--teinte-texte, var(--texte-discret));
}

.plan-pastille--teinte-1 { --teinte-texte: var(--categorie-1-texte); }
.plan-pastille--teinte-2 { --teinte-texte: var(--categorie-2-texte); }
.plan-pastille--teinte-3 { --teinte-texte: var(--categorie-3-texte); }
.plan-pastille--teinte-4 { --teinte-texte: var(--categorie-4-texte); }
.plan-pastille--teinte-5 { --teinte-texte: var(--categorie-5-texte); }
.plan-pastille--teinte-6 { --teinte-texte: var(--categorie-6-texte); }
.plan-pastille--teinte-7 { --teinte-texte: var(--categorie-7-texte); }
.plan-pastille--teinte-8 { --teinte-texte: var(--categorie-8-texte); }

/* Au centre d'une table : la part de chaque valeur, pour voir l'équilibre sans compter. */
.table-carte__equilibre {
    display: flex;
    width: 72%;
    height: 6px;
    margin-top: 2px;
    border-radius: 3px;
    overflow: hidden;
    gap: 1px;
    background: var(--surface-creuse);
}

.table-carte__equilibre > span {
    background: var(--teinte-texte, var(--bordure));
    min-width: 2px;
}

/* Cible du dépôt pendant le survol : la chaise qui sera occupée (échange ou en bout), ou la file. */
.table-places > li.convive--visee {
    outline: 2px solid var(--marque-500);
    outline-offset: 2px;
    z-index: 3;
}

.plan-liste--visee {
    outline: 2px dashed var(--marque-500);
    outline-offset: 2px;
    border-radius: var(--rayon-m);
}

.convive__nom {
    grid-area: nom;
    font-weight: 600;
    font-size: var(--taille-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.convive__entreprise {
    grid-area: entreprise;
    margin-top: 3px;
    font-size: var(--taille-xs);
    line-height: 1.3;
    color: var(--texte-secondaire);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.convive__badges {
    grid-area: badges;
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-1);
    margin-top: 2px;
}

.convive__badges:empty {
    display: none;
}

.convive__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--duree-rapide);
}

.convive:hover .convive__actions,
.convive:focus-within .convive__actions,
.convive--hote .convive__actions {
    opacity: 1;
}

.convive__hote-bouton,
.convive__menu {
    cursor: pointer;
}

.plan-lecture .convive {
    cursor: default;
}

/* Une chaise du rond : nom et entreprise tronqués, signes en icônes, actions dévoilées au survol. */
.convive--chaise {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 2px 6px;
    text-align: center;
    box-shadow: var(--ombre-1);
}

.convive--chaise .convive__nom {
    min-width: 0;
    font-size: var(--taille-xs);
    line-height: 1.2;
}

.convive--chaise .convive__entreprise {
    min-width: 0;
    margin-top: 0;
    font-size: 10px;
    line-height: 1.15;
}

.convive__signes {
    position: absolute;
    top: -8px;
    right: -4px;
    display: flex;
    gap: 1px;
    padding: 0 2px;
    border-radius: var(--rayon-pilule);
    background: var(--surface-carte);
    border: 1px solid var(--bordure);
}

.convive__signes:empty {
    display: none;
}

.convive__signes svg {
    width: 12px;
    height: 12px;
}

.convive--chaise .convive__actions {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0 2px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-m);
    background: var(--surface-carte);
    box-shadow: var(--ombre-1);
}

.convive--chaise.convive--hote:not(:hover):not(:focus-within) .convive__actions {
    opacity: 0;
}

.place-vide {
    min-height: 32px;
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon-m);
    background: var(--surface-creuse);
}

.plan-signaux {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-2);
}

.plan-signaux > li {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-1);
    font-size: var(--taille-s);
    padding: var(--espace-1) var(--espace-2);
    border-radius: var(--rayon-pilule);
    background: var(--statut-attention-fond);
    color: var(--statut-attention-texte);
    border: 1px solid var(--statut-attention-bordure);
}

.plan-signaux > li.plan-signal--info {
    background: var(--statut-neutre-fond);
    color: var(--statut-neutre-texte);
    border-color: var(--statut-neutre-bordure);
}

.plan-signaux button {
    all: unset;
    cursor: pointer;
    text-decoration: underline dotted;
}

.plan-signaux button:focus-visible {
    outline: 2px solid var(--focus);
    border-radius: var(--rayon-s);
}

.plan-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.plan-derniere-maj {
    font-size: var(--taille-xs);
    color: var(--texte-discret);
}

.plan-vide {
    padding: var(--espace-8);
    text-align: center;
    color: var(--texte-secondaire);
}

@media (max-width: 767.98px) {
    .plan-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .plan-aside {
        position: static;
        max-height: none;
    }

    .plan-aside .plan-liste {
        max-height: 40vh;
    }

    .plan-salle {
        grid-template-columns: minmax(0, 1fr);
    }

    .convive {
        cursor: default;
    }

    /* Au doigt, pas de survol : les actions restent visibles. */
    .convive__actions,
    .table-carte__coin {
        opacity: 1;
    }

    /* Le rond demande de la largeur : au téléphone, chaque table redevient une liste numérotée. */
    .table-ronde {
        container-type: normal;
        display: flex;
        flex-direction: column;
        gap: var(--espace-2);
    }

    .table-ronde .table-places {
        display: flex;
        flex-direction: column;
        gap: var(--espace-1);
        aspect-ratio: auto;
        padding-left: 22px;
    }

    .table-ronde .table-places::before {
        display: none;
    }

    .table-ronde .table-places > li {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        transform: none;
    }

    .table-places > li::before {
        top: 50%;
        left: -22px;
        transform: translateY(-50%);
    }

    .table-ronde__centre {
        order: -1;
        position: static;
        transform: none;
        width: auto;
        flex-direction: row;
        gap: var(--espace-2);
        padding-right: 72px;
        text-align: left;
        pointer-events: auto;
    }

    .convive--chaise {
        min-height: 40px;
        padding: var(--espace-1) var(--espace-2);
    }

    .convive--chaise .convive__signes,
    .convive--chaise .convive__actions {
        position: static;
        transform: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .convive--chaise .convive__actions {
        align-self: flex-end;
    }
}

/* Champs natifs des dialogs du plan de table (le shadow DOM de fluent-dialog clippe FluentSelect). */
.plan-dialog-label {
    display: block;
    font-size: var(--taille-s);
    font-weight: 500;
    margin-bottom: var(--espace-1);
}

.plan-dialog-select {
    width: 100%;
    min-height: 40px;
    padding: var(--espace-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--rayon-s);
    font-size: var(--taille-base);
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}