/* ════ /home — mise en page « grille » (22/10) ═══════════════════════════════════════════
   Remplace le nuage de pastilles (largeurs toutes différentes, retours à la ligne au hasard)
   et les grandes tuiles étirées sur toute la largeur pour deux lignes de texte.
   - Ordinateur : grille bento. La grande tuile d'état occupe un bloc 2 × 2 en tête de rubrique,
     les outils deviennent des tuiles de taille égale, alignées en colonnes autour.
   - Téléphone : grille d'icônes façon écran d'accueil (icône au-dessus du nom, 4 colonnes).
   Seule la présentation change : recherche, épingles, personnalisation, données en direct et
   animations gardent leurs classes. Valeurs prises dans la charte (charte.css). */

/* ── Grille commune ── */
body.d-c .grid, body.d-c .grid-2, body.d-c .grid-3, body.d-c .grid-4, body.d-c .grid-live {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important;
  grid-auto-flow: row dense !important; gap: 10px !important; align-items: stretch !important; }
body.d-c .grid::before { content: none !important; display: none !important; }

/* ── Tuile d'outil : même taille partout ── */
body.d-c .card { width: auto !important; min-width: 0 !important; flex: none !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important;
  padding: 11px 14px 11px 11px !important; min-height: 60px !important;
  border-radius: var(--wc-r-m) !important; text-align: left !important;
  background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.07) !important; }
body.d-c .card:hover { background: rgba(255,255,255,.065) !important; border-color: rgba(255,255,255,.15) !important; }
body.d-c .card .card-icon { width: 36px !important; height: 36px !important; border-radius: var(--wc-r-s) !important; flex: none; }
body.d-c .card .card-icon svg { width: 18px !important; height: 18px !important; }
body.d-c .card .card-content { min-width: 0; }
body.d-c .card .card-title { font-size: 14px !important; font-weight: 600 !important; line-height: 1.25 !important;
  white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }


/* ── Grande tuile d'état : bloc 2 × 2 ── */
body.d-c .card.featured, body.d-c .card.lv.featured {
  grid-column: span 2 !important; grid-row: span 2 !important;
  flex-direction: column !important; align-items: flex-start !important; justify-content: space-between !important;
  min-height: 130px !important; padding: 16px 18px !important; border-radius: var(--wc-r-l) !important; gap: 14px !important; }
body.d-c .card.featured .card-icon { width: 44px !important; height: 44px !important; border-radius: var(--wc-r-m) !important; }
body.d-c .card.featured .card-icon svg { width: 21px !important; height: 21px !important; }
body.d-c .card.featured .card-title { font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.015em; white-space: normal !important; }
body.d-c .card.featured .card-desc { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px !important; line-height: 1.45 !important; color: var(--wc-text-secondary) !important; margin-top: 3px; }
body.d-c .card.featured .h2-vif { font-size: 13.5px; }

/* ── En-têtes de rubrique et accès rapide : un peu plus d'air ── */
body.d-c main.sections > section.section { margin-bottom: 34px !important; }
body.d-c .section-header { margin-bottom: 14px !important; }
body.d-c .section-title { font-size: 16px !important; }
.h2-rapide .h2-astuce { font-size: 12.5px; opacity: .8; }

/* ── Tablette étroite : la grande tuile prend la largeur, au-dessus de ses outils ── */
@media (max-width: 860px) {
  body.d-c .card.featured, body.d-c .card.lv.featured { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 0 !important;
    flex-direction: row !important; align-items: center !important; }
  body.d-c .card.featured .card-icon { width: 42px !important; height: 42px !important; }
}

/* ── Téléphone : grille d'icônes, 4 colonnes ── */
@media (max-width: 600px) {
  body.d-c .grid, body.d-c .grid-2, body.d-c .grid-3, body.d-c .grid-4, body.d-c .grid-live {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px 6px !important; }
  body.d-c .card:not(.featured) { flex-direction: column !important; justify-content: flex-start !important; align-items: center !important;
    gap: 7px !important; padding: 0 !important; min-height: 0 !important; text-align: center !important;
    background: none !important; border: 0 !important; }
  body.d-c .card:not(.featured):hover { background: none !important; }
  body.d-c .card:not(.featured):active .card-icon { transform: scale(.92); }
  body.d-c .card:not(.featured) .card-icon { width: 58px !important; height: 58px !important; border-radius: var(--wc-r-l) !important;
    border: 1px solid rgba(255,255,255,.07); transition: transform .12s; }
  body.d-c .card:not(.featured) .card-icon svg { width: 25px !important; height: 25px !important; }
  body.d-c .card:not(.featured) .card-title { font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.22 !important;
    white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--wc-text) !important; }
  /* compteur d'un outil (« Retours clients 3 ») : pastille sur le coin de l'icône, comme une appli */
  body.d-c .card:not(.featured) { position: relative; }
  body.d-c .card:not(.featured) .card-title .h2-badge { position: absolute; top: -5px; left: calc(50% + 17px); margin: 0 !important;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--wc-r-m); font-size: 11.5px; line-height: 20px; box-shadow: 0 0 0 2px var(--wc-fond-plateforme); }
  body.d-c .card.featured, body.d-c .card.lv.featured { padding: 14px 15px !important; gap: 13px !important; }
  body.d-c .card.featured .card-title { font-size: 16.5px !important; }
  body.d-c .card.featured .card-desc { -webkit-line-clamp: 1 !important; font-size: 13px !important; }
  body.d-c main.sections > section.section { margin-bottom: 30px !important; }
  body.d-c .card .h2-pin { top: -4px !important; right: 4px !important; }
}

/* Les outils masqués (recherche, personnalisation, droits) restent masqués : la règle d'affichage
   « body.d-c .card { display:flex } » ci-dessus est plus forte que leurs règles d'origine. */
body.d-c .card.cache-recherche, body.d-c .card.hidden-card, body.d-c .card.h2-masque { display: none !important; }
body.d-c.h2-mode-perso .card.h2-masque { display: flex !important; opacity: .35; }

/* ════ Panneau des notifications (23/10) ════════════════════════════════════════════════
   Ordinateur : menu déroulant sous la cloche. Téléphone : panneau qui monte du bas, fond assombri.
   « À traiter » en cartes colorées, « Récent » groupé par jour, réglages sur une vue à part (⚙). */
.h2-pn-voile { position: fixed; inset: 0; z-index: 1199; background: rgba(0,0,0,.45); }
.h2-pn-voile[hidden] { display: none; }
.h2-panneau { display: flex; flex-direction: column; overflow: hidden !important; padding: 0 !important; width: min(400px, calc(100vw - 32px)) !important;
  max-height: min(78vh, 640px) !important; border-radius: var(--wc-r-xl) !important; background: rgba(16,21,34,.97) !important;
  border: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 24px 60px rgba(0,0,0,.55) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.h2-panneau[hidden] { display: none !important; }
.h2-pn-poignee { display: none; }
.h2-panneau-tete { flex: none; display: flex; align-items: center; gap: 6px; padding: 14px 12px 10px 18px !important; border-bottom: 1px solid rgba(255,255,255,.07); }
.h2-panneau-tete b { flex: 1; font-size: 16px !important; font-weight: 700; }
.h2-pn-actions { display: flex; align-items: center; gap: 2px; }
.h2-panneau-tete #h2-tout-vu { font-size: 13px !important; font-weight: 600; padding: 6px 10px; border-radius: var(--wc-r-pilule); color: var(--accent) !important; }
.h2-pn-ic, .h2-pn-retour { display: grid; place-items: center; width: 34px; height: 34px; padding: 0 !important; border-radius: 50%; background: none; border: 0; color: var(--text-secondary, #aab) !important; cursor: pointer; }
.h2-pn-ic:hover, .h2-pn-retour:hover { background: rgba(255,255,255,.07); }
.h2-pn-ic svg, .h2-pn-retour svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h2-pn-ic[hidden], .h2-pn-retour[hidden], #h2-tout-vu[hidden] { display: none !important; }
.h2-pn-retour { margin-left: -8px; }
.h2-pn-defil { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 0 12px; }
.h2-pn-section { margin: 14px 18px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
/* À traiter : cartes */
.h2-pn-cartes { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.h2-pn-carte { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--wc-r-m); text-decoration: none; color: #fff; border: 1px solid transparent; }
.h2-pn-carte .ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 15px; }
.h2-pn-carte b { flex: 1; font-size: 14px; font-weight: 600; }
.h2-pn-carte svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .5; flex: none; }
.h2-pn-carte.live { background: rgba(255,69,58,.12); border-color: rgba(255,69,58,.3); } .h2-pn-carte.live .ic { background: rgba(255,69,58,.2); }
.h2-pn-carte.alerte { background: rgba(255,159,10,.1); border-color: rgba(255,159,10,.3); } .h2-pn-carte.alerte .ic { background: rgba(255,159,10,.2); }
.h2-pn-carte.info { background: rgba(var(--wc-accent-rgb),.09); border-color: rgba(var(--wc-accent-rgb),.24); } .h2-pn-carte.info .ic { background: rgba(var(--wc-accent-rgb),.18); }
/* Récent : une ligne par notification */
.h2-notif { position: relative; align-items: flex-start; gap: 12px !important; padding: 10px 18px !important; }
.h2-notif .ic { width: 34px !important; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.07); font-size: 15px !important; }
.h2-notif .tx { flex: 1; min-width: 0; }
.h2-notif b { font-weight: 500 !important; color: var(--text-secondary, #c6cede); line-height: 1.35; }
.h2-notif small { margin-top: 2px; line-height: 1.4; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h2-notif time { flex: none; font-size: 11.5px; color: var(--text-tertiary); padding-top: 2px; white-space: nowrap; }
.h2-notif.nouveau b { font-weight: 650 !important; color: #fff; }
.h2-notif.nouveau b::after { content: none !important; }
.h2-notif.nouveau::before { content: ''; position: absolute; left: 7px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.h2-panneau-vide { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 34px 24px !important; text-align: center; }
.h2-panneau-vide span { font-size: 28px; } .h2-panneau-vide b { color: #fff; font-size: 15px; }
/* vue Réglages */
.h2-pn-vue-reglages { padding: 6px 0 4px; }
.h2-pn-vue-reglages[hidden] { display: none; }
.h2-pn-vue-reglages .h2-appareil { margin: 10px 14px 0 !important; }
@media (max-width: 700px) {
  /* hauteur « grand » fixe ; la hauteur visible (moitié / grand) se règle par translateY (geste façon iOS, home-4.js) */
  .h2-panneau { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 92vh; max-height: none !important;
    border-radius: var(--wc-r-xl) var(--wc-r-xl) 0 0 !important; border-bottom: 0 !important; padding-bottom: env(safe-area-inset-bottom) !important; will-change: transform; touch-action: none; }
  .h2-pn-defil { touch-action: pan-y; }
  .h2-pn-poignee { width: 42px !important; height: 5px; margin: 9px auto 2px !important; }
  .h2-panneau-tete { cursor: grab; }
  .h2-pn-poignee { display: block; flex: none; width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 8px auto 0; }
  .h2-panneau-tete { padding-top: 8px !important; }
  html.h2-pn-ouvert .wc-onglets { display: none !important; }
}
@keyframes h2-pn-monte { from { transform: translateY(100%); } to { transform: none; } }