/* ═══════════ V2 · COUCHE « APPLI » ═══════════
   Barre d'onglets en bas, barre du haut translucide, écran d'ouverture, animations.
   Active sur téléphone et tablette (≤ 900 px). Sur ordinateur, le menu classique du haut reste. */
:root {
  --tb: calc(52px + env(safe-area-inset-top));
  --spring: cubic-bezier(.32,.72,0,1);
  --out: cubic-bezier(.22,1,.36,1);
  --glass: rgba(251,249,252,.74);
  --glass-border: rgba(255,255,255,.7);
  --glass-shadow: rgba(63,58,69,.18);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(23,20,26,.72); --glass-border: rgba(255,255,255,.1); --glass-shadow: rgba(0,0,0,.45); } }
:root[data-theme="dark"] { --glass: rgba(23,20,26,.72); --glass-border: rgba(255,255,255,.1); --glass-shadow: rgba(0,0,0,.45); }

html { -webkit-tap-highlight-color: transparent; }
.accueil-h1 { font-size: 1.6rem; margin-bottom: .6em; }

/* ── Écran « Aujourd'hui » (carte en verre) ── */
.today-card { position: relative; padding: 18px 18px 16px; border-radius: 24px; margin-bottom: 14px;
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-border); box-shadow: 0 14px 40px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.6); }
.td-kicker { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mauve-dark); margin-bottom: 6px; }
.td-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mauve); box-shadow: 0 0 0 0 rgba(179,152,187,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(179,152,187,.6); } 70% { box-shadow: 0 0 0 9px rgba(179,152,187,0); } 100% { box-shadow: 0 0 0 0 rgba(179,152,187,0); } }
.td-title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; margin-bottom: 8px; }
.td-big { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--mauve-dark); letter-spacing: -.02em; margin: 2px 0 8px; }
.td-sub { font-size: .9rem; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.td-ctas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.td-ctas form.inline { display: flex; gap: 8px; }
.td-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.td-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.td-row.dim { opacity: .55; }
.td-time { font-family: var(--font-display); font-size: 1.05rem; color: var(--mauve-dark); min-width: 58px; font-variant-numeric: tabular-nums; }
.td-name { flex: 1; font-weight: 600; line-height: 1.25; display: flex; flex-direction: column; }
.td-name small { font-weight: 400; color: var(--muted); font-size: .82rem; }
.td-chev { width: 8px; height: 8px; border-right: 2px solid var(--mauve-line); border-top: 2px solid var(--mauve-line); transform: rotate(45deg); margin-right: 4px; }
.seg.subtabs { margin: 0 0 14px; }

/* ── Apparition en cascade + retour tactile ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease var(--d,0ms), transform .6s var(--out) var(--d,0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ═══ MOBILE : barre du haut, barre du bas, écran d'ouverture ═══ */
@media (max-width: 900px) {
  body.has-tabs { padding-bottom: calc(92px + env(safe-area-inset-bottom)); overscroll-behavior-y: none; }
  body.has-tabs header.topbar { display: none; }
  body.has-tabs .foot { display: none; }
  body.has-tabs main.wrap { padding-top: calc(var(--tb) + 14px); }
  body.has-tabs .v1-only { display: none; }

  /* Barre du haut translucide */
  #app-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--tb); padding-top: env(safe-area-inset-top);
    display: flex; align-items: center; justify-content: center;
    background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
    border-bottom: .5px solid var(--line); }
  #app-topbar .tb-logo { position: absolute; left: 14px; bottom: 9px; height: 32px; width: 54px; background: var(--mauve-dark);
    -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }
  #app-topbar .tb-title { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s var(--spring); }
  body.tb-scrolled #app-topbar .tb-title, body.sub-screen #app-topbar .tb-title { opacity: 1; transform: none; }
  #app-topbar .tb-back { position: absolute; left: 6px; bottom: 7px; display: none; align-items: center; gap: 0; height: 36px; padding: 0 12px 0 4px; border-radius: 18px;
    color: var(--mauve-dark); font-weight: 600; font-size: .95rem; text-decoration: none; }
  #app-topbar .tb-back:active { background: var(--mauve-soft); }
  body.sub-screen #app-topbar .tb-back { display: flex; }
  body.sub-screen #app-topbar .tb-logo { display: none; }

  /* Barre d'onglets du bas (verre dépoli) */
  #app-tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 300; max-width: 520px; margin: 0 auto; height: 66px;
    display: flex; padding: 6px; border-radius: 33px;
    background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 40px var(--glass-shadow), 0 2px 6px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.8);
    transition: transform .55s var(--spring), opacity .4s; }
  body.booting #app-tabbar, body.sheet-open #app-tabbar { transform: translateY(140%); opacity: 0; }
  #app-tabbar .tab-lens { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n, 4)); border-radius: 27px;
    background: linear-gradient(180deg, var(--card), var(--mauve-soft));
    box-shadow: 0 4px 14px rgba(143,111,154,.22), inset 0 0 0 .5px var(--mauve-line), inset 0 1px 0 rgba(255,255,255,.9);
    transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .55s cubic-bezier(.34,1.35,.5,1); }
  #app-tabbar .tab { flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); font-size: .66rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; padding: 0; -webkit-user-select: none; user-select: none; }
  #app-tabbar .tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.34,1.5,.5,1); }
  #app-tabbar .tab.active { color: var(--mauve-dark); }
  #app-tabbar .tab.active svg { transform: translateY(-1px) scale(1.1); }
  #app-tabbar .tab.bump svg { animation: bump .45s cubic-bezier(.34,1.5,.5,1); }
  @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(.78); } 100% { transform: scale(1.1) translateY(-1px); } }

  /* Les pop-ups (dialog) passent au-dessus de la barre ; en plein écran mobile elles laissent la place à la barre du haut */
  .modal { z-index: 400; }

  /* Écran d'ouverture */
  #app-splash { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--mauve) 0%, #9C7FA6 100%);
    transition: opacity .8s ease, transform .9s var(--out), filter .8s ease; }
  #app-splash.out { opacity: 0; transform: scale(1.06); filter: blur(8px); pointer-events: none; }
  #app-splash .splash-center { text-align: center; }
  #app-splash .splash-logo { width: min(60vw, 260px); height: auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.2)); opacity: 0; transform: scale(.9) translateY(10px); animation: logoIn .9s .15s var(--out) forwards; }
  @keyframes logoIn { to { opacity: 1; transform: none; } }
  #app-splash .splash-line { width: 0; height: 1px; margin: 18px auto 12px; background: rgba(255,255,255,.7); animation: lineIn .7s .8s ease forwards; }
  @keyframes lineIn { to { width: 56px; } }
  #app-splash .splash-sub { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.9); opacity: 0; animation: fadeIn .7s 1s forwards; }
  @keyframes fadeIn { to { opacity: 1; } }
  body.booting main.wrap { opacity: 0; transform: scale(1.03); }
  main.wrap { transition: opacity .6s ease, transform .7s var(--spring); }

  /* Pastilles de sous-onglets et filtres */
  .seg.subtabs, .filters { position: sticky; top: var(--tb); z-index: 150; margin-left: -16px; margin-right: -16px; padding: 8px 16px; border-radius: 0; border: 0;
    background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); border-bottom: .5px solid var(--line); display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
  .seg.subtabs::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
  .seg.subtabs a.segl, .filters .filter { border-radius: 999px; padding: 7px 14px; font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 .5px var(--line); border: 0; transition: background .3s var(--spring), color .25s, transform .25s var(--spring); }
  .seg.subtabs a.segl:active, .filters .filter:active { transform: scale(.93); }
  .seg.subtabs a.segl.on, .filters .filter.on { background: var(--mauve); color: #fff; box-shadow: 0 4px 14px rgba(179,152,187,.4); }
}

/* Ordinateur : pas de barre du bas ni d'écran d'ouverture */
@media (min-width: 901px) {
  #app-topbar, #app-tabbar, #app-splash { display: none !important; }
  body.booting main.wrap { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #app-splash, #app-splash * { animation: none !important; transition: none !important; }
  #app-tabbar .tab-lens, #app-tabbar .tab svg, main.wrap { transition: none !important; }
}

/* ═══ FICHES DEPUIS LE BAS (mobile) ═══ */
@media (max-width: 900px) {
  #sheet-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(40,32,45,.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
  #sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  #sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 401; max-width: 640px; margin: 0 auto; max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column;
    border-radius: 32px 32px 0 0; padding-bottom: env(safe-area-inset-bottom);
    background: var(--glass); -webkit-backdrop-filter: blur(34px) saturate(1.9); backdrop-filter: blur(34px) saturate(1.9);
    border: 1px solid var(--glass-border); border-bottom: none;
    box-shadow: 0 -12px 50px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.7);
    transform: translateY(105%); transition: transform .6s var(--spring); will-change: transform; }
  #sheet.open { transform: translateY(0); }
  #sheet.dragging { transition: none; }
  #sheet .sheet-grab { padding: 10px 0 4px; display: flex; justify-content: center; touch-action: none; cursor: grab; flex-shrink: 0; }
  #sheet .sheet-grab span { width: 40px; height: 5px; border-radius: 3px; background: var(--mauve-line); }
  #sheet .sheet-close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--mauve-soft); color: var(--mauve-dark); font-size: 1.2rem; line-height: 34px; cursor: pointer; z-index: 2; }
  #sheet .sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 20px 28px; }
  #sheet .sheet-body h1 { font-size: 1.45rem; padding-right: 40px; }
  #sheet .sheet-body > .modal-body > * { animation: sheetUp .5s var(--out) both; }
  #sheet .sheet-body > .modal-body > *:nth-child(2) { animation-delay: .04s; }
  #sheet .sheet-body > .modal-body > *:nth-child(3) { animation-delay: .08s; }
  #sheet .sheet-body > .modal-body > *:nth-child(n+4) { animation-delay: .12s; }
  @keyframes sheetUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  #sheet .sheet-body .card { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.6); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #sheet .sheet-body .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); } }
  :root[data-theme="dark"] #sheet .sheet-body .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
  body.sheet-open { overflow: hidden; }
  body.sheet-open main.wrap { transform: scale(.94); filter: brightness(.92); transition: transform .6s var(--spring), filter .45s ease; }
  body.has-tabs main.wrap { transition: transform .6s var(--spring), filter .45s ease, opacity .6s ease; }
  /* Les dialogues V1 ne s'ouvrent plus : leur contenu est déplacé dans la fiche */
  body.has-tabs dialog.modal[open] { display: none; }

  /* Swipe : zone et retour élastique */
  .swipe-zone { touch-action: pan-y; overflow-x: clip; }
  .swipe-zone .swipe-inner { transition: transform .45s var(--out), opacity .3s; }
  .swipe-zone.dragging .swipe-inner { transition: none; }
  @keyframes pgR { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
  @keyframes pgL { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
  .anim-r { animation: pgR .5s var(--out) both; }
  .anim-l { animation: pgL .5s var(--out) both; }
  body.has-tabs main.wrap.anim-r, body.has-tabs main.wrap.anim-l { transform: none; }
  /* Les flèches restent (souris, tablette) ; le swipe s'ajoute au doigt */
  .calnav { grid-template-columns: 26px minmax(0, 1fr) 26px; gap: 2px; }
  .calnav .calarrow { font-size: 1.9rem; min-height: 0; border-radius: 8px; opacity: .75; }

  /* Bulle d'astuce */
  #app-hint { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 310; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    padding: 10px 18px; border-radius: 22px; white-space: nowrap; font-size: .85rem; font-weight: 600; color: var(--ink);
    background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
    border: 1px solid var(--glass-border); box-shadow: 0 8px 28px var(--glass-shadow); transition: opacity .4s, transform .5s var(--spring); }
  #app-hint.show { opacity: 1; transform: translate(-50%, 0); }
  #app-hint .hand { display: inline-block; animation: hand 1.2s ease-in-out infinite; }
  @keyframes hand { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
}
@media (min-width: 901px) { #sheet, #sheet-backdrop, #app-hint { display: none !important; } }