/* Aujourd'hui sur le Mac (screens/aujourdhui/Desk.js, maquette validée par Dylan le 28/09/2026, lot 2) et contenus
   du panneau qui s'y rattachent. Grille de 12 colonnes : 7 + 5, puis tout en une colonne quand le contenu devient étroit
   (panneau ouvert sur une fenêtre de 1 440 px, par exemple). Rien ne change de taille au survol. */
@media (min-width: 900px) {
  .dtd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .dtd > .dcc, .dtd > .dtd-att { grid-column: span 7; }
  .dtd > .dtd-day, .dtd > .dtd-side { grid-column: span 5; }
  .dtd > .dtiles { grid-column: 1 / -1; }
  @container (max-width: 980px) { .dtd > * { grid-column: 1 / -1 !important; } }

  /* Cartes */
  .dcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; min-width: 0; transition: box-shadow 0.15s; }
  .dcard.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
  .dch { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 8px; }
  .dch h2 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
  .dch-cap { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dch-2 { padding-top: 6px; border-top: 1px solid var(--line); margin-top: 6px; }
  .dch .sp { flex: 1; }
  .dlnk { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); cursor: default; white-space: nowrap; }
  .dlnk:hover { text-decoration: underline; }
  .dpad { margin: 0; padding: 0 18px 14px; }
  .dfoot { padding-top: 2px; }

  /* Carte Commission : même dessin que l'iPhone, ses trois repères deviennent des boutons */
  .dcc { border-radius: 20px; padding: 20px 22px 18px; cursor: default; box-shadow: none; transition: box-shadow 0.15s; }
  .dcc:active, .dcc.lp-press { transform: none; }
  .dcc.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
  .dcc-main { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
  .dcc-main:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 6px; border-radius: 8px; }
  .dcc .cc-v { font-size: 46px; line-height: 1.08; }
  .dcc .cc-v .dec, .dcc .cc-v .cur { font-size: 26px; opacity: 0.8; }
  .dcc .cc-track { margin: 12px 0 2px; }
  .dcc .cc-marks { gap: 10px; }
  .dcc .cc-m { position: relative; border: 0; border-radius: 10px; padding: 5px 8px; margin: -5px -8px; background: transparent; color: #fff; font: inherit; text-align: left; cursor: default; }
  .dcc .cc-m:hover { background: rgba(255, 255, 255, 0.1); }
  .dcc .cc-m.on { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
  .dcc .cc-ml { display: flex; justify-content: space-between; align-items: center; }
  .dcc .cc-ml svg { opacity: 0; transition: opacity 0.12s; }
  .dcc .cc-m:hover .cc-ml svg, .dcc .cc-m.on .cc-ml svg { opacity: 0.8; }
  .dcc .cc-mv { font-size: 18px; }

  /* Ta journée : chaque compteur en deux moitiés (−1 à gauche, +1 à droite) */
  .dctrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 6px 18px 10px; }
  .dctr { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 2px; padding: 13px 8px 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-2, var(--fill)); }
  .dctr .z { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; padding: 0; border: 0; background: transparent; cursor: default; }
  .dctr .z-m { left: 0; } .dctr .z-p { right: 0; }
  .dctr .z span { position: absolute; top: 5px; font-size: 16px; font-weight: 700; line-height: 1; color: var(--text-3); opacity: 0.55; transition: opacity 0.12s, color 0.12s; }
  .dctr .z-m span { left: 10px; } .dctr .z-p span { right: 10px; color: var(--accent); }
  .dctr:hover .z span { opacity: 0.85; }
  .dctr .z-m:hover { background: linear-gradient(to right, var(--fill-2), transparent); }
  .dctr .z-p:hover { background: linear-gradient(to left, var(--accent-soft), transparent); }
  .dctr .z:hover span { opacity: 1; }
  .dctr .z-m:hover span { color: var(--text); }
  .dctr .z:active { background-color: var(--fill); }
  .dctr .z:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
  .dctr .v { position: relative; height: 36px; overflow: hidden; font-size: 30px; font-weight: 750; line-height: 36px; pointer-events: none; }
  .dctr .v span { display: block; }
  .dctr .l { font-size: 12.5px; font-weight: 650; color: var(--text-2); pointer-events: none; white-space: nowrap; }
  .dctr.pos { background: var(--green-soft); border-color: transparent; }
  .dctr.pos .v, .dctr.pos .l, .dctr.pos .z-p span { color: var(--green); }
  /* « +1 » ou « −1 » qui s'envole à chaque clic (maquette) ; retiré à la fin de son envol */
  .dplus1 { position: absolute; left: 50%; top: 28%; z-index: 2; font-size: 13px; font-weight: 800; color: var(--accent); pointer-events: none; animation: dplus1 0.7s ease-out forwards; }
  .dplus1.m { color: var(--text-2); }
  @keyframes dplus1 { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -26px); opacity: 0; } }

  /* Tuiles */
  .dtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  @container (max-width: 820px) { .dtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .dtiles .tile { min-height: 0; padding: 14px 16px; border-radius: 16px; cursor: default; transition: box-shadow 0.15s, filter 0.15s; }
  .dtiles .tile:active { transform: none; }
  .dtiles .tile:hover { filter: brightness(1.06); }
  .dtiles .tile.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
  .dtiles .tile .t-ic { width: 30px; height: 30px; }
  .dtiles .tile .t-l { margin-top: 12px; font-size: 13.5px; font-weight: 650; }
  .dtiles .tile .t-s { font-size: 12px; }
  @container (max-width: 1100px) { .dtiles .tile .t-n { font-size: 24px; } }

  /* Lignes : liste de l'attention, dernières ventes, listes du panneau */
  .dlist { padding: 0 8px 8px; }
  .drow { min-height: 54px; padding: 8px 10px; border-radius: 10px; }
  .list.in-card .drow { padding-left: 10px; padding-right: 10px; }
  .list li + li .drow { border-top: 0; }
  .drow .row-icon { width: 34px; height: 34px; font-size: 16px; }
  .drow .row-title { font-size: 14px; }
  .drow .row-sub { font-size: 12.5px; }
  .drow .row-value { font-size: 14px; }
  .drow .row-end .pill { min-height: 20px; font-size: 11px; }
  .drow.sel, .drow.sel:hover { background: var(--accent-soft); }
  .drow-act { flex: none; }
  .drow-act .btn { min-height: 30px; padding: 0 12px; font-size: 13px; }
  .drow-act .btn-round { width: 32px; min-height: 32px; padding: 0; }
  .dmore { display: flex; justify-content: center; padding: 0 0 12px; }
  /* Rappels (DeskTasks.js) : ligne d'ajout, rond à cocher, actions au survol (maquette) */
  .addt { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; margin: 0 0 4px; border-bottom: 1px solid var(--line); }
  .addt .addt-in { flex: 1; min-width: 0; height: 32px; min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: var(--fill); font-size: 13px; }
  .addt .addt-in:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
  .addt .select-trigger, .addt .btn { min-height: 32px; font-size: 12.5px; }
  .addt .btn { padding: 0 12px; }
  .addt-pick { display: flex; align-items: center; gap: 2px; }
  .addt .addt-date { width: 150px; height: 32px; min-height: 32px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; }
  .addt .addt-pick .btn-round { width: 28px; min-height: 28px; padding: 0; }
  .tck { flex: none; width: 22px; height: 22px; margin: 0 6px; padding: 0; border-radius: 50%; border: 2px solid var(--text-3); background: transparent; color: transparent; display: grid; place-items: center; cursor: default; transition: background 0.15s, border-color 0.15s; }
  .tck:hover { border-color: var(--accent); color: var(--accent); }
  .tck.late { border-color: var(--red); }
  .tck.plus { border-style: dashed; color: var(--text-3); }
  .drow.task .row-sub svg { vertical-align: -1px; }
  .drow .qa { opacity: 0; transition: opacity 0.12s; display: flex; gap: 4px; }
  .drow:hover .qa, .drow.sel .qa, .drow:focus-within .qa { opacity: 1; }
  .task-panel .field { margin-bottom: 12px; }
  .tp-row { gap: 10px; }
  .dempty { display: flex; align-items: center; gap: 10px; padding: 12px 18px 20px; color: var(--green); font-size: 14px; }

  /* 7 derniers jours */
  .dwk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 120px; padding: 14px 18px 0; }
  .dwk-c { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; padding: 4px 0 0; border: 0; border-radius: 8px; background: transparent; cursor: default; }
  .dwk-c:hover { background: var(--fill); }
  .dwk-c.on { background: var(--accent-soft); }
  .dwk-c i { width: 100%; max-width: 30px; border-radius: 5px 5px 2px 2px; background: var(--accent-bg); opacity: 0.85; }
  .dwk-c i.z { height: 3px !important; background: var(--fill-2); }
  .dwk-c em { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
  .dwk-l { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 6px 18px 8px; font-size: 11.5px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
  .dwk-l .on { color: var(--accent); font-weight: 700; }

  /* Contenus du panneau : en-tête chiffré, clé et valeur, barre, actions */
  .dph { display: grid; justify-items: center; gap: 2px; padding: 6px 0 16px; text-align: center; }
  .dph .caption { margin: 0; }
  .dph-v { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; }
  .dph-pill { margin-top: 8px; }
  .dkv { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .dkv .kv { min-height: 42px; padding: 6px 14px; }
  .dkv .kv .k { font-size: 14px; }
  .dkv .kv .v { font-size: 14px; }
  .dkv .kv.sum .k, .dkv .kv.sum .v { color: var(--text); font-weight: 700; }
  .dp-bar { height: 8px; margin: 0 0 14px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
  .dp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent-bg); }
  .dp-form { display: grid; gap: 6px; margin: 0 0 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .dp-form .field-label { margin: 0; }
  .dp-inline { display: flex; gap: 8px; }
  .dp-inline .input-row { flex: 1; }
  .dp-reuse { justify-self: start; margin-top: 2px; }
  .dp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
  .desk-panel .notice { font-size: 14px; margin: 0 0 12px; }
  .dp-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 0 16px; color: var(--text-3); font-size: 14px; }
  .dkv .kv.is-clickable { cursor: default; } .dkv .kv.is-clickable:hover { background: var(--fill); }
  /* Pages de l'iPhone reprises dans le panneau (détail d'un mois, commission d'un mois) : à l'échelle du panneau */
  .desk-panel .dh-amt { font-size: 30px; }
  .desk-panel .sec-h { margin: 18px 2px 8px; }
  .desk-panel .sec-h .title-2 { font-size: 15px; }
  .desk-panel .list { box-shadow: none; border: 1px solid var(--line); border-radius: 12px; }
  .desk-panel .list.in-card { border: 0; border-radius: 0; }
  .desk-panel .dkv.list.in-card { border: 1px solid var(--line); border-radius: 12px; }
  .desk-panel .kv { min-height: 42px; }
  .desk-panel .kv .k, .desk-panel .kv .v { font-size: 14px; }
  .desk-panel .zoom-hero { padding: 18px 16px; border-radius: 16px; }
  .desk-panel .zoom-hero .z-v { font-size: 30px; }
  .desk-panel .goals .goal { padding: 10px 0; }

  /* Bulle d'aide (ui/desk/Tip.js) */
  .desk-tip { position: fixed; z-index: 90; max-width: 300px; padding: 7px 10px; border-radius: 9px; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: var(--shadow-pop); color: var(--text); font-size: 12px; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
  .desk-tip.show { opacity: 1; }
}