/* Aujourd'hui (iPhone, screens/aujourdhui) et vues agrandies des tuiles. Repris de la maquette validée par Dylan le
   27/09/2026 (D7, D10, D11, D14, D15). Les couleurs gardent leur fonction : vert positif, rouge alerte, ambre attente. */

.today-head { margin-bottom: var(--s-4); }
.today-head .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13px; }
.today-head .eyebrow::first-letter { text-transform: uppercase; }
.today-sec { margin-top: var(--s-6); }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin: 0 4px var(--s-3); }
.sec-h .title-2 { font-size: 20px; }
.sec-h .link-btn { font-size: 15px; font-weight: 500; margin: 0; }
.txt-slate { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---- Carte Commission ---- */
.cc {
  width: 100%; border: 0; text-align: left; border-radius: 26px; padding: 18px 18px 16px; background: var(--hero); color: #fff;
  display: grid; gap: 4px; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent;
  transition: transform var(--spring-snappy-d) var(--spring-snappy);
}
.cc:active, .tile:active, .ctr:active { transform: scale(0.97); }
.cc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cc-l { font-size: 14px; font-weight: 600; opacity: 0.85; }
.cc-v { font-size: 40px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.cc-sub { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.cc-dl { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-dl small { font-size: 11.5px; font-weight: 600; opacity: 0.8; }
.cc-dl.good { color: var(--hero-green); background: rgba(52, 211, 153, 0.18); }
.cc-dl.bad { color: var(--hero-red); background: rgba(255, 107, 107, 0.2); }
.cc-track { position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); margin: 10px 0 2px; }
.cc-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #fff; transition: width var(--spring-soft-d) var(--spring-soft); }
/* Repère du seuil de rentabilité sur la barre : ambre tant qu'il n'est pas couvert, vert ensuite */
.cc-track b { position: absolute; top: -4px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 2px; background: var(--hero-amber); box-shadow: 0 0 0 2px rgba(30, 24, 110, 0.5); }
.cc-track b.ok { background: var(--hero-green); }
.cc-marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.cc-m { display: grid; gap: 1px; min-width: 0; }
.cc-ml { font-size: 12px; font-weight: 600; opacity: 0.75; }
.cc-mv { font-size: 16.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ms { font-size: 12px; font-weight: 600; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-g { color: var(--hero-green); opacity: 1; } .on-a { color: var(--hero-amber); opacity: 1; } .on-r { color: var(--hero-red); opacity: 1; }

/* ---- Compteurs du jour ---- */
.ctrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ctr {
  position: relative; overflow: hidden; border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--shadow);
  padding: 10px 6px 12px; display: grid; justify-items: center; gap: 2px; cursor: pointer; color: var(--text); font: inherit;
  -webkit-tap-highlight-color: transparent; transition: transform var(--spring-snappy-d) var(--spring-snappy);
}
.ctr .c-l { font-size: 12.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ctr .c-plus { position: absolute; top: 6px; right: 9px; color: var(--accent); font-size: 16px; font-weight: 700; line-height: 1; }
.ctr.pos { background: var(--green-soft); }
.ctr.pos .roll, .ctr.pos .c-l, .ctr.pos .c-plus, .ctr.pos .plus1 { color: var(--green); }
.roll { position: relative; display: inline-block; height: 34px; overflow: hidden; font-size: 28px; font-weight: 750; line-height: 34px; min-width: 1ch; text-align: center; font-variant-numeric: tabular-nums; }
.roll .n { display: block; }
.roll .n.in { animation: rollIn 0.38s var(--spring-snappy) both; } /* seulement quand le chiffre change */
.roll.down .n.in { animation-name: rollInDown; }
@keyframes rollIn { from { transform: translateY(80%); opacity: 0; } }
@keyframes rollInDown { from { transform: translateY(-80%); opacity: 0; } }
.plus1 { position: absolute; left: 50%; top: 30%; font-size: 13px; font-weight: 800; color: var(--accent); pointer-events: none; opacity: 0; animation: plus1 0.7s ease-out; }
@keyframes plus1 { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -26px); opacity: 0; } }

/* ---- Tuiles façon Rappels ---- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--s-5); }
.tile {
  border: 0; border-radius: 22px; padding: 12px 14px; min-height: 104px; color: #fff; text-align: left; cursor: pointer; font: inherit;
  display: grid; grid-template-rows: auto 1fr auto; -webkit-tap-highlight-color: transparent;
  transition: transform var(--spring-snappy-d) var(--spring-snappy);
}
.tile .t-top { display: flex; justify-content: space-between; align-items: flex-start; }
.tile .t-ic { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); display: grid; place-items: center; }
.tile .t-n { font-size: 30px; font-weight: 750; line-height: 1; letter-spacing: -0.02em; }
.tile .t-l { font-size: 16px; font-weight: 700; margin-top: 10px; }
.tile .t-s { font-size: 12.5px; opacity: 0.88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-amber { background: linear-gradient(150deg, #F0B24A, #CF8418); }
.g-red { background: linear-gradient(150deg, #FF7B7B, #D9434B); }
.g-violet { background: linear-gradient(150deg, #8E7EFF, #5645E0); }
.g-blue { background: linear-gradient(150deg, #6B9BFF, #3563EE); }
.g-green { background: linear-gradient(150deg, #3FD6A0, #149A6C); }

/* ---- Pages des tuiles : bandeau de la couleur de la tuile (sur iPhone, jusque sous la barre du haut) ---- */
.zoom-hero { margin: 0 0 var(--s-4); padding: 22px 20px; border-radius: 22px; color: #fff; display: grid; justify-items: center; text-align: center; }
.page-scroll > .zoom-hero:first-child {
  margin: calc(-1 * (env(safe-area-inset-top) + 62px)) calc(-1 * var(--gutter)) var(--s-4); border-radius: 0;
  padding: calc(env(safe-area-inset-top) + 66px) 20px 22px;
}
.zoom-hero .z-l { font-size: 15px; font-weight: 650; opacity: 0.9; }
.zoom-hero .z-v { font-size: 40px; font-weight: 780; letter-spacing: -0.03em; }
.zoom-hero .z-s { font-size: 14px; opacity: 0.9; }
.mnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; font-size: 15px; font-weight: 650; }
.mnav .gbtn { width: 36px; height: 36px; min-width: 36px; color: #fff; }
.mnav .gbtn:disabled { opacity: 0.3; cursor: default; }
.mrs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 14px; }
.mr { display: grid; justify-items: center; gap: 2px; font-size: 12px; font-weight: 650; color: rgba(255, 255, 255, 0.92); }
.mr svg text { font-family: var(--font); }
.goals .goal { display: grid; gap: 6px; padding: var(--s-3) var(--s-4); }
.goals .goal + .goal { border-top: 1px solid var(--line); }
.g-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.g-st { font-size: 13px; font-weight: 700; white-space: nowrap; }
.g-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.g-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }