/* ═══ L'ÉCRAN D'ACCUEIL EN WIDGETS, FAÇON IPHONE (12.10.2026) — js/199 ════════════════════════════
   « Ne pourrait-on pas créer des widgets à 2, 3 tailles, comme iPhone ? »
   Quatre colonnes sur ordinateur, deux sur tablette et téléphone ; des rangées de hauteur fixe, comme
   la grille d'un iPhone : petit = 1 case, moyen = 2 cases côte à côte, grand = 2 × 2. Les trous se
   comblent tout seuls (dense). */

.ew-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 196px; grid-auto-flow: row dense;
  gap: 18px; margin-bottom: 18px; }
.ew-w { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--dbx-r, 18px); box-shadow: var(--dbx-ombre);
  padding: 16px 18px; scroll-margin-top: 72px; transition: box-shadow .6s ease; }
.ew-w.dbx-repere { box-shadow: 0 0 0 3px var(--accent), var(--dbx-ombre); transition-duration: .15s; }
.ew-s { grid-column: span 1; grid-row: span 1; }
.ew-m { grid-column: span 2; grid-row: span 1; }
.ew-l { grid-column: span 2; grid-row: span 2; }

.ew-w > .ew-tete { flex: none; margin-bottom: 10px; }
.ew-w > .ew-tete h2 { font-size: var(--t-m, 15px); }
.ew-defile { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
/* Le moyen montre le haut de la liste et s'efface en douceur : le reste est à un clic (« Tout → »). */
.ew-m .ew-defile { overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.ew-liste { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.ew-plus { align-self: flex-start; margin-top: auto; }
.ew-vide { margin: auto 0; text-align: center; color: var(--text-muted); font-size: var(--t-s); line-height: 1.45; }

/* Le petit widget : l'essentiel en un regard. */
.ew-petit { all: unset; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  width: 100%; height: 100%; min-width: 0; color: var(--text); }
button.ew-petit { cursor: pointer; }
button.ew-petit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
.ew-etiq { font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-gros { font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-sous { font-size: var(--t-xs); color: var(--text-muted); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ew-petit.ew-alerte .ew-gros { color: #e5484d; }
.ew-agenda-s { height: 100%; }

/* Les indicateurs : la carte de l'accueil, telle quelle, remplit la case. */
.ew-w.ew-kpi { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.ew-kpi > .dbx-kpi { height: 100%; min-height: 0; }
.ew-s.ew-kpi .dbx-kpi-bas .dbx-tendance { display: none; }

/* L'agenda remplit sa carte (js/18, agdCarteHtml) ; en moyen, seulement « Aujourd'hui ». */
.ew-w.dbx-carte-agenda { padding: 0; }
.ew-agenda { flex: 1; min-height: 0; overflow-y: auto; }
.ew-m .ew-agenda { overflow: hidden; }
.ew-m .ew-agenda .agd-groupe ~ .agd-groupe, .ew-m .ew-agenda .agd-outlook { display: none; }

/* Mon club : le widget de js/183 est déjà une carte. En moyen, les matchs seulement. */
.ew-w.ew-club { padding: 0; background: none; border: 0; box-shadow: none; }
.ew-club #dbx-zone-club, .ew-club .spt-widget { height: 100%; margin: 0; overflow: hidden; }
.ew-m.ew-club .spt-widget-col ~ .spt-widget-col { display: none; }
.ew-club-vide { display: flex; align-items: center; justify-content: center; height: 100%; padding: 16px; box-sizing: border-box;
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--dbx-r, 18px); }

/* L'horloge Rorëx : en moyen, le cadran à gauche et le coup d'œil à droite. */
.ew-horloge.ew-m { flex-direction: row; align-items: center; gap: 16px; }
.ew-horloge.ew-m .hl-haut { flex: none; max-height: 100%; }
.ew-horloge .hli { flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.ew-horloge.ew-l { justify-content: center; }
.ew-horloge .hl-haut:empty { display: none; }
.ew-heure-attente { flex: 1; min-width: 0; height: 100%; }

/* Le pipeline, stade par stade. */
.ew-barres { display: flex; flex-direction: column; gap: 9px; }
.ew-barre-l { display: grid; grid-template-columns: minmax(0, 1.1fr) 2fr auto; align-items: center; gap: 10px; font-size: var(--t-xs); }
.ew-barre-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.ew-barre-l i { position: relative; height: 8px; border-radius: 4px; background: var(--surface-alt); overflow: hidden; }
.ew-barre-l i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--accent); border-radius: 4px; }
.ew-barre-l b { font-variant-numeric: tabular-nums; color: var(--text); }

/* ── La barre d'édition ──────────────────────────────────────────────────────────────────────── */
.ew-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; padding: 10px 12px;
  background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: 14px; }
.ew-barre[hidden] { display: none; }
.ew-jauge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--text); }
.ew-jauge-barre { width: 110px; height: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.ew-jauge-barre i { display: block; height: 100%; background: var(--accent); }
.ew-barre-esp { flex: 1; }
.ew-barre .dbx-outil:disabled { opacity: .45; cursor: not-allowed; }
.ew-barre .ew-termine { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }

/* ── Le mode édition : les widgets tremblent, comme sur iPhone ───────────────────────────────── */
/* 12.10.2026 — « Quand je clique Personnaliser, ça devient blanc et tout disparaît. » Le tremblement
   REMPLACE l'animation d'entrée des widgets (.dbx-anim, css/10), dont l'état de départ est
   opacity: 0 ; sans elle, chaque widget retombait invisible. On rend l'opacité explicitement. */
.ew-edition > .ew-w { opacity: 1; transform: none; cursor: grab; animation: ew-fremir 2.4s ease-in-out infinite; }
.ew-edition > .ew-w:nth-child(2n) { animation-delay: -1.2s; }
.ew-edition > .ew-w > :not(.ew-ctrl) { pointer-events: none; user-select: none; opacity: .32; }
.ew-edition > .ew-w.en-deplacement { opacity: .45; animation: none; cursor: grabbing; }
@keyframes ew-fremir { 0%, 100% { transform: rotate(-.35deg); } 50% { transform: rotate(.35deg); } }
@media (prefers-reduced-motion: reduce) { .ew-edition > .ew-w { animation: none; } }

.ew-ctrl { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px; }
.ew-retirer { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #8e8e93; color: #fff; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.ew-retirer:hover, .ew-retirer:focus-visible { background: #e5484d; }
.ew-ctrl-nom { max-width: 90%; padding: 4px 11px; border-radius: 999px; background: var(--surface); box-shadow: var(--dbx-ombre);
  font-size: var(--t-s); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-ctrl-bas { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--dbx-ombre); }
.ew-ctrl-bas button { min-width: 30px; height: 28px; border: 0; border-radius: 999px; background: none; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.ew-ctrl-bas button:hover:not(:disabled) { background: var(--accent-dim); color: var(--accent); }
.ew-ctrl-bas button.actif { background: var(--accent); color: var(--on-accent, #fff); }
.ew-ctrl-bas button:disabled { opacity: .35; cursor: not-allowed; }
.ew-s .ew-ctrl-nom { font-size: var(--t-xs); }

/* ── La galerie ──────────────────────────────────────────────────────────────────────────────── */
.ew-galerie { width: min(640px, 92vw); max-height: 86vh; display: flex; flex-direction: column; gap: 10px; }
.ew-galerie h3 { margin: 0; }
.ew-galerie > p { margin: 0; font-size: var(--t-s); color: var(--text-muted); }
.ew-galerie-liste { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ew-galerie-ligne { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); }
.ew-galerie-ico { font-size: 22px; text-align: center; }
.ew-galerie-txt { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-s); color: var(--text); }
.ew-galerie-txt small { font-size: var(--t-xs); color: var(--text-muted); }
.ew-galerie-tailles { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ew-galerie-tailles .btn-secondary { padding: 5px 11px; font-size: 12px; }
.ew-galerie-tailles .btn-secondary:disabled { opacity: .4; cursor: not-allowed; }

/* Tablette et petit écran d'ordinateur : deux colonnes, comme un iPhone en grand. */
@media (max-width: 1080px) {
  .ew-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
}
@media (max-width: 767.98px) {
  .ew-grille { gap: 12px; grid-auto-rows: 160px; }
  .ew-w { padding: 14px; }
  .ew-gros { font-size: 34px; }
  .ew-barre { gap: 6px; }
  .ew-barre .dbx-outil { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  .ew-retirer { width: 32px; height: 32px; }
  .ew-ctrl-bas button { min-width: 34px; height: 36px; }
  .ew-galerie-ligne { grid-template-columns: 30px minmax(0, 1fr); }
  .ew-galerie-tailles { grid-column: 1 / -1; justify-content: flex-start; }
  .ew-galerie-tailles .btn-secondary { min-height: 40px; }
}