/* 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 0.2s var(--ease);
}
/* Enfoncement doux, sans rebond : le rebond du ressort vif faisait « scintiller » la carte sous un appui long (Dylan, 28/09) */
.cc:active, .tile:active, .ctr:active, .cc.lp-press, .tile.lp-press, .ctr.lp-press { 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), background-color 0.3s var(--ease); }
/* Repère du seuil de rentabilité (29/09, Dylan : « intégré esthétiquement à la barre ») : anneau ambre à atteindre, qui
   se remplit en vert, coché, une fois le seuil couvert. Son fond reprend le dégradé à sa place : il paraît creux. */
.cc-track b {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; color: #0B5B3E; background: var(--hero-a);
  background: color-mix(in srgb, var(--hero-a), var(--hero-b) var(--mix, 50%));
  box-shadow: inset 0 0 0 2.5px var(--hero-amber), 0 2px 6px rgba(16, 12, 70, 0.4);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cc-track b.goal { box-shadow: inset 0 0 0 2.5px #fff, 0 2px 6px rgba(16, 12, 70, 0.4); }
.cc-track b.goal::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; } /* l'objectif : une cible blanche */
.cc-track b.ok { background: var(--hero-green); box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(16, 12, 70, 0.4); }
.cc-track b.ok::after { display: none; }
.cc-track b .icon { stroke-width: 3.4; }
/* Barre blanche, ambre dès qu'un repère est passé, verte une fois pleine */
.cc-track i.a { background: var(--hero-amber); } .cc-track i.g { background: var(--hero-green); }
.cc-marks { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.cc-m, .cc-l3 { display: grid; gap: 1px; min-width: 0; align-content: start; }
.cc-m.cc-goal { display: flex; align-items: center; gap: 10px; }
.cc-ml { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; opacity: 0.75; }
/* Anneau du pourcentage de l'objectif ; seul le cercle tourne pour partir du haut, la coche reste droite */
.cc-ring { position: relative; flex: none; width: 44px; height: 44px; }
.cc-ring > svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.cc-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; stroke: var(--hero-amber); transition: stroke-dasharray var(--spring-soft-d) var(--spring-soft), stroke 0.3s var(--ease); }
.cc-ring circle.t { stroke: rgba(255, 255, 255, 0.22); }
.cc-ring circle.ok { stroke: var(--hero-green); }
.cc-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 750; color: #fff; }
.cc-ring b .icon { color: var(--hero-green); stroke-width: 3; }
/* Rappel du repère du seuil devant son libellé */
.cc-mini { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--hero-amber); }
.cc-mini.ok { background: var(--hero-green); box-shadow: none; }
.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; overflow-wrap: break-word; } /* passe à la ligne sur un petit iPhone plutôt que d'être coupé */
/* Changer de mois (demande de Dylan du 29/09) : le contenu arrive du côté du mois choisi */
.cc { touch-action: pan-y; }
/* iPhone : les mois sur un rail (le mois affiché au centre, ses voisins de part et d'autre). Seule la vue coupe ce qui
   dépasse ; la carte elle-même ne coupe rien (Safari la dessinait sans ses coins après le menu de l'appui long). */
.cc.cc-pg { padding: 0; display: block; }
.cc-view { display: block; overflow: hidden; border-radius: inherit; }
.cc-rail { display: flex; transform: translate3d(-100%, 0, 0); will-change: transform; }
.cc-pane { flex: 0 0 100%; min-width: 0; box-sizing: border-box; padding: 18px 18px 16px; display: grid; gap: 4px; align-content: start; }
.cc.cc-drag, .cc.cc-drag:active, .cc.cc-drag.lp-press { transform: none; } /* le rail glisse : la carte ne s'enfonce pas */
/* Pas d'enfoncement dès le contact (état :active de Safari) : il n'arrive qu'après un instant sans bouger (lp-press,
   150 ms) ; sinon la carte s'enfonçait puis ressortait au départ de chaque glissé (vidéo de Dylan du 29/09). */
.cc.cc-pg:active:not(.lp-press) { transform: none; }
.cc-in { display: grid; gap: 4px; min-width: 0; }
.cc-in.next { animation: ccNext 0.32s var(--ease); }
.cc-in.prev { animation: ccPrev 0.32s var(--ease); }
@keyframes ccNext { from { opacity: 0; transform: translateX(28px); } }
@keyframes ccPrev { from { opacity: 0; transform: translateX(-28px); } }
.cc-back { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cc-ring circle.miss { stroke: var(--hero-red); }
.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 ---- */
/* Deux rangées : 4 compteurs (ce qui a eu lieu), puis 3 (ce qui n'a pas eu lieu), sur une grille de 12 colonnes */
.ctrs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.ctrs > * { grid-column: span 3; }
.ctrs > :nth-child(n+5) { grid-column: span 4; }
.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 0.2s var(--ease);
}
.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; } /* le chiffre qui change roule : animation lancée par Compteurs.js, jamais par une classe */
.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 0.2s var(--ease);
}
.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); }
.g-pink { background: linear-gradient(150deg, #FF7EB3, #D9437F); }

/* ---- 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; }