/* ==========================================================================
   CFL Kiosk - Board public « Cérémonies du jour » (écran TV hall centre funéraire)
   Typographie large, lisible à distance. Réutilise les variables --cfl-*.
   Modificateur racine --portrait pour l'orientation TV verticale.
   ========================================================================== */

.ak-kiosk {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: var(--cfl-primary-hover);
    color: var(--cfl-white);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* Orientation portrait (TV verticale du hall). Hauteur bornée au viewport (et non min-height qui
   laisserait le contenu pousser le board au-delà de l'écran) : ainsi le body en flex:1 est borné et
   son débordement (scrollHeight > clientHeight) est mesurable → bascule auto-fit sur la demi-journée. */
.ak-kiosk--portrait {
    max-width: 1080px;
    height: 100dvh;
    min-height: 0;
    margin: 0 auto;
}

/* ===== Header ===== */
.ak-kiosk__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cfl-space-xl);
    padding: 2vh var(--cfl-space-2xl);
    background: var(--cfl-primary);
    border-bottom: 4px solid var(--cfl-primary-light);
}

/* Bloc marque : logo + nom alignés horizontalement (logo posé à gauche du nom, centré
   verticalement) plutôt que le logo flottant au-dessus. */
.ak-kiosk__brandblock {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--cfl-space-lg);
    min-width: 0;
}

/* Logo de branding : posé dans une pastille blanche pour rester lisible quel que soit le fond,
   borné en hauteur pour ne jamais faire exploser l'en-tête (width:auto conserve le ratio). */
.ak-kiosk__logo {
    flex: 0 0 auto;
    max-height: clamp(56px, 11vh, 104px);
    max-width: clamp(120px, 18vw, 240px);
    width: auto;
    height: auto;
    object-fit: contain;
    background: var(--cfl-white);
    border-radius: var(--cfl-radius-md);
    padding: var(--cfl-space-xs);
}

/* Nom masqué (toggle OFF) : le logo n'a plus à partager la place → il occupe toute la
   hauteur disponible du header. */
.ak-kiosk__brandblock--logo-only .ak-kiosk__logo {
    max-height: clamp(80px, 18vh, 168px);
    max-width: clamp(160px, 26vw, 360px);
}

.ak-kiosk__brand {
    font-size: clamp(1.6rem, 3.2vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

/* Bloc date + heure, empilé à droite : date longue (plus grande) AU-DESSUS de l'heure. */
.ak-kiosk__datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--cfl-space-xs);
    flex: 0 0 auto;
}

.ak-kiosk__date {
    font-size: clamp(1.4rem, 2.8vw, 2.6rem);
    font-weight: 600;
    color: var(--cfl-primary-bg);
    line-height: 1.1;
    text-align: right;
}

.ak-kiosk__clock {
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* ===== Body ===== */
.ak-kiosk__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 2vh var(--cfl-space-2xl) var(--cfl-space-2xl);
    overflow-y: auto;
}

.ak-kiosk__title {
    margin: 0 0 2vh 0;
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cfl-primary-light);
}

.ak-kiosk__state {
    margin-top: 8vh;
    text-align: center;
    font-size: clamp(1.6rem, 3.5vw, 3rem);
    font-weight: 600;
    color: var(--cfl-primary-bg);
}

.ak-kiosk__state--empty {
    opacity: 0.85;
}

.ak-kiosk__list {
    display: flex;
    flex-direction: column;
    gap: var(--cfl-space-xl);
}

/* ===== Groupe par demi-journée (Matin / Après-midi) ===== */
.ak-kiosk__group + .ak-kiosk__group {
    margin-top: var(--cfl-space-2xl);
}

.ak-kiosk__group-title {
    margin: 0 0 var(--cfl-space-lg) 0;
    padding-bottom: var(--cfl-space-sm);
    font-size: clamp(1.3rem, 2.8vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cfl-primary-bg);
    border-bottom: 3px solid var(--cfl-primary-light);
}

/* ===== Carte cérémonie ===== */
.ak-kiosk-card {
    display: grid;
    /* Colonnes auto-dimensionnées au contenu : l'heure et la flèche prennent exactement leur
       largeur (jamais de débordement/chevauchement sur le nom), le nom occupe le reste. */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--cfl-space-xl);
    padding: var(--cfl-space-xl) var(--cfl-space-2xl);
    background: var(--cfl-white);
    color: var(--cfl-text-primary);
    border-left: 8px solid var(--cfl-primary-light);
    border-radius: var(--cfl-radius-lg);
    box-shadow: var(--cfl-shadow-lg);
}

.ak-kiosk-card__time {
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    color: var(--cfl-primary);
    text-align: center;
    line-height: 1;
    /* Largeur minimale = ~« 00h00 » pour aligner toutes les heures d'une carte à l'autre. */
    min-width: 5ch;
    white-space: nowrap;
}

.ak-kiosk-card__main {
    display: flex;
    flex-direction: column;
    gap: var(--cfl-space-xs);
    min-width: 0;
}

.ak-kiosk-card__name {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--cfl-text-primary);
}

.ak-kiosk-card__type {
    font-size: clamp(1.1rem, 2.2vw, 1.9rem);
    font-weight: 500;
    color: var(--cfl-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ak-kiosk-card__salle {
    font-size: clamp(1.3rem, 2.6vw, 2.2rem);
    font-weight: 600;
    color: var(--cfl-text-secondary);
}

/* ===== Champs additionnels (point d'extension) ===== */
.ak-kiosk-card__extra {
    margin: var(--cfl-space-sm) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--cfl-space-xs);
}

.ak-kiosk-card__extra-row {
    display: flex;
    gap: var(--cfl-space-sm);
    font-size: clamp(1rem, 1.8vw, 1.5rem);
}

.ak-kiosk-card__extra-label {
    margin: 0;
    font-weight: 700;
    color: var(--cfl-text-muted);
}

.ak-kiosk-card__extra-value {
    margin: 0;
    color: var(--cfl-text-secondary);
}

/* ===== Flèche de guidage ===== */
.ak-kiosk-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ak-kiosk-card__arrow-glyph {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--cfl-success);
}

/* ==========================================================================
   Tablette de salon (orientation paysage). Réutilise l'en-tête + les variables.
   ========================================================================== */
.ak-kiosk--landscape {
    width: 100%;
    height: 100vh;
}

.ak-kiosk__body--salon {
    align-items: center;
    justify-content: center;
}

.ak-kiosk-salon {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cfl-space-2xl);
}

/* Ruban portant le nom du salon (aligné à droite, cf. maquette). */
.ak-kiosk-salon__ribbon {
    align-self: flex-end;
    min-width: 50%;
    padding: var(--cfl-space-lg) var(--cfl-space-2xl);
    background: var(--cfl-white);
    color: var(--cfl-text-primary);
    border-radius: var(--cfl-radius-lg) 0 0 var(--cfl-radius-lg);
    box-shadow: var(--cfl-shadow-lg);
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    font-weight: 700;
}

.ak-kiosk-salon-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    padding: var(--cfl-space-2xl);
    background: var(--cfl-white);
    color: var(--cfl-text-primary);
    border-left: 8px solid var(--cfl-primary-light);
    border-radius: var(--cfl-radius-lg);
    box-shadow: var(--cfl-shadow-lg);
}

.ak-kiosk-salon-card__name {
    font-size: clamp(2.6rem, 7vw, 6rem);
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    color: var(--cfl-text-primary);
}

.ak-kiosk-salon-card__empty {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--cfl-text-muted);
    opacity: 0.85;
}