/* Styles of the partials in templates/components/ and of the shared partials.
   Grouped here and loaded once by base.html.twig: a partial included several
   times on one screen used to duplicate its rules at every include. */

/* --- Main OK button of a screen (ok_button.html.twig) --- */
.ok-btn-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: var(--dark);
    flex-shrink: 0;
}

.ok-btn-wrap .ok-label {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--muted);
}

/* Le rond pulse en permanence : c'est l'action attendue sur l'écran. */
.ok-btn-wrap .ok-circle {
    animation: pulse-glow 1.8s ease-in-out infinite;
}

/* --- Date banner of the agenda screens (_date.html.twig) --- */
.agenda-date {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: center;
}

.agenda-date strong {
    color: var(--primary);
    font-weight: 700;
}

/* --- Choice buttons (components/choice_tile.html.twig) --- */

/*
  Row holding a screen's exits. align-items: stretch is already the flex default;
  it is spelled out here so that equal heights are explicit and do not rely on a
  default that a later change could override.
*/
.choice-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    flex-shrink: 0;
}

/* Background, border, focus ring and glow are inherited from .tile (base.css). */
.choice-tile {
    min-width: 300px;
    padding: 18px 28px;
    gap: 12px;
}

.choice-tile .choice-label {
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
}

/*
  The OK pastille leaves the flow when the tile is not focused (display:none,
  inherited from .tile), so that the label sits back in the middle of the tile.
  Accepted trade-off: the focused tile's label moves up to make room for the
  pastille, so the two labels of a row are not on the same line. Do not go back to
  visibility:hidden, which lined the labels up but left the text off-centre on the
  unfocused tile.
*/

/*
  base.css lifts the active tile by 4 px, which misaligned the two tiles' edges: the
  active one looked shorter. Focus is still signalled by the border, the background,
  the glow and the OK pastille — the shift added nothing. transform is dropped from
  the transition list: a running transition wins over the declared value, and .tile's
  kept the tile at -4 px despite transform: none.
*/
.choice-tile,
.choice-tile:hover,
.choice-tile:focus,
.choice-tile:focus-visible,
.choice-tile.default-active {
    transform: none;
    transition: background .2s, border-color .2s, box-shadow .2s;
}