/* The frame: top bar, navigation (tabs on the phone, icon rail on the tablet, sidebar on the computer), content,
   detail panel, version banner, full-page screens. Mobile first. */

.app {
    min-height: 100dvh;
}

/* — Top bar ----------------------------------------------------------------------------------------------- */
.barre {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(var(--space-4), env(safe-area-inset-right)) 0 max(var(--space-4), env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(var(--space-3));
    backdrop-filter: saturate(1.5) blur(var(--space-3));
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.barre__titre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.barre__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.barre__ecrire {
    width: var(--touch-min);
    padding: 0;
}

.barre__libelle {
    position: absolute;
    width: var(--space-px);
    height: var(--space-px);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* — Connection pill ----------------------------------------------------------------------------------------- */
.pastille-direct {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--space-8);
    padding: 0 var(--space-3);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-xs);
    color: var(--text-soft);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.pastille-direct__point {
    position: relative;
    flex: none;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--text-mute);
}

.pastille-direct__point::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    opacity: 0;
}

.pastille-direct--direct .pastille-direct__point { background: var(--accent); }
.pastille-direct--direct .pastille-direct__point::after { animation: pulsation var(--dur-pulse) var(--ease-out) infinite; }
.pastille-direct--connexion .pastille-direct__point,
.pastille-direct--reconnexion .pastille-direct__point { background: var(--warning); animation: respiration var(--dur-shimmer) var(--ease) infinite; }
.pastille-direct--hors-ligne { border-color: var(--error-border); background: var(--error-bg); color: var(--error-text); }
.pastille-direct--hors-ligne .pastille-direct__point { background: var(--error); }
.pastille-direct--perime { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-text); }
.pastille-direct--perime .pastille-direct__point { background: var(--warning); }
.pastille-direct__texte { line-height: var(--leading-tight); }
.pastille-direct__detail { line-height: var(--leading-tight); }
.pastille-direct__heure { font-variant-numeric: tabular-nums; }
.pastille-direct__long { display: none; }

/* — New version banner ---------------------------------------------------------------------------------------- */
.bandeau {
    position: sticky;
    top: calc(var(--topbar-h) + env(safe-area-inset-top));
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    background: var(--bg-inverse);
    color: var(--text-on-inverse);
    font-size: var(--text-sm);
    animation: descente var(--dur-slow) var(--ease-out);
}

.bandeau__texte { font-weight: var(--weight-medium); }

.bandeau__bouton {
    min-height: var(--touch-min);
    padding: 0 var(--space-2);
    font-weight: var(--weight-bold);
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}

/* — Navigation: a tab bar on the phone ------------------------------------------------------------------------- */
.navigation {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(var(--space-3));
    backdrop-filter: saturate(1.5) blur(var(--space-3));
    border-top: var(--border-width) solid var(--border-subtle);
}

.navigation__marque,
.navigation__recherche {
    display: none;
}

.navigation__liste {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--tabbar-h);
}

.navigation__lien {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    height: 100%;
    color: var(--text-dim);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    transition: color var(--dur-fast) var(--ease);
}

.navigation__lien::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--space-8);
    height: var(--border-width-thick);
    margin-left: calc(var(--space-8) / -2);
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
    background: var(--accent);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease-out);
}

.navigation__lien[aria-current="page"] { color: var(--text); font-weight: var(--weight-bold); }
.navigation__lien[aria-current="page"]::before { transform: scaleX(1); }
.navigation__lien[aria-current="page"] .navigation__icone { color: var(--accent); }

.navigation__icone {
    position: relative;
    display: grid;
    place-items: center;
}

.navigation__compte {
    position: absolute;
    top: calc(var(--space-1) * -1);
    left: calc(100% - var(--space-2));
    min-width: var(--space-4);
    height: var(--space-4);
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: var(--accent);
    box-shadow: 0 0 0 var(--border-width-thick) var(--bg-elevated);
    color: var(--on-accent);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    line-height: var(--space-4);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.navigation__compte--erreur { background: var(--error); color: var(--on-error); }
.navigation__nombre { font-variant-numeric: tabular-nums; }

/* — Content ------------------------------------------------------------------------------------------------------ */
.contenu {
    display: block;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-5) max(var(--space-4), env(safe-area-inset-right)) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-12)) max(var(--space-4), env(safe-area-inset-left));
}

/* — Detail: full screen on the phone -------------------------------------------------------------------------------- */
.panneau {
    position: fixed;
    inset: 0;
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.panneau--entree { animation: glissement var(--dur-slow) var(--ease-out); }

.panneau__barre {
    display: flex;
    flex: none;
    align-items: center;
    min-height: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(var(--space-2), env(safe-area-inset-right)) 0 max(var(--space-2), env(safe-area-inset-left));
    border-bottom: var(--border-width) solid var(--border-subtle);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
}

.panneau__fermer { display: none; }

.panneau__corps {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--border) transparent;
    scrollbar-width: thin;
    padding: var(--space-5) max(var(--space-4), env(safe-area-inset-right)) var(--space-12) max(var(--space-4), env(safe-area-inset-left));
}

.panneau__actions {
    display: grid;
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right)) calc(var(--space-3) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    border-top: var(--border-width) solid var(--border-subtle);
    background: var(--bg-elevated);
}

/* The main call spans the bottom row (the thumb's); two buttons stack, three share the first row. */
.panneau__actions > :last-child,
.panneau__actions > :first-child:nth-last-child(2) { grid-column: 1 / -1; }

/* — Full-page screens (session) ------------------------------------------------------------------------------------ */
.ecran {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: calc(env(safe-area-inset-top) + var(--space-6)) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-6));
}

.ecran__carte {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: var(--sheet-w);
    padding: var(--space-8) var(--space-6);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-lg);
    text-align: center;
    animation: apparition var(--dur-slow) var(--ease-out);
}

.ecran__icone { display: grid; width: var(--space-12); height: var(--space-12); place-items: center; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent-text); }
.ecran__marque { color: var(--text-mute); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.ecran__titre { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.ecran__texte { max-width: 36ch; color: var(--text-dim); }
.ecran__actions { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-3); }