/* ========================================
   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;
}

/* ── 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: 0.7rem;
    color: var(--neutral-foreground-hint);
}

.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;
    }
}

/* ========================================
   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);
}