/* ── Poubelle drag (filaire rouge, couvercle anime) ──────────── */
#trash-zone {
  position: fixed;
  /* Superposee EXACTEMENT au bouton principal central de la nav (84x84,
     border-radius 22, sorti vers le haut via margin-top:-38px depuis la
     nav bottom). Le bouton est donc a bottom: padding-nav(0.5rem) +
     safe-area + 14 (padding-bottom interne) = ~22px + safe. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 0;
  width: 84px;
  height: 84px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border: 2px solid #fca5a5;
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(220,38,38,0.35);
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1),
              border-color 0.2s, background 0.2s, box-shadow 0.2s;
  pointer-events: none;
}
/* Le label texte "Supprimer" devient inutile vu la taille reduite -- on
   le masque (toujours dans le DOM pour les screen readers). */
#trash-zone span {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* Override dimensions internes pour matcher la taille 84x84 du conteneur
   (les regles originales .trash-can/.trash-lid/.trash-body plus bas font
   44x58 -- on les agrandit a ~44x58 deja OK pour 84x84). On garde donc
   les valeurs originales mais on agrandit un peu pour bonne visibilite. */
#trash-zone .trash-can { width: 48px; height: 62px; }
#trash-zone .trash-lid { width: 48px; height: 16px; top: 0; }
#trash-zone .trash-body { width: 44px; height: 46px; top: 16px; }
#trash-zone .trash-lid, #trash-zone .trash-body { stroke-width: 2.5; }
#trash-zone.drag-active {
  display: flex;
  animation: trash-appear 0.28s cubic-bezier(0.4,0,0.2,1);
}
@keyframes trash-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.85); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}
#trash-zone.drag-over-trash {
  transform: translateX(-50%) scale(1.12);
  border-color: #dc2626;
  background: rgba(254,226,226,0.95);
  box-shadow: 0 14px 34px rgba(220,38,38,0.45);
}
.trash-can {
  position: relative;
  width: 44px;
  height: 58px;
}
.trash-lid, .trash-body {
  position: absolute;
  left: 50%;
  stroke: #dc2626;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.trash-lid {
  top: 0;
  width: 44px;
  height: 14px;
  transform: translateX(-50%);
  transform-origin: 10% 75%;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.trash-body {
  top: 14px;
  width: 40px;
  height: 44px;
  transform: translateX(-50%);
}
#trash-zone.drag-over-trash .trash-lid {
  transform: translateX(-50%) rotate(-32deg) translate(2px,-1px);
}
#trash-zone span {
  font-size: 0.72rem;
  font-weight: 700;
  color: #dc2626;
  letter-spacing: 0.03em;
}
/* Chute du widget dans la poubelle */
.falling-into-trash {
  transition: left 0.4s cubic-bezier(0.55,0.05,0.75,1),
              top 0.4s cubic-bezier(0.55,0.05,0.75,1),
              width 0.4s ease,
              height 0.4s ease,
              opacity 0.35s ease 0.12s,
              transform 0.4s cubic-bezier(0.55,0.05,0.75,1) !important;
}
/* Wiggle temporaire pendant un long-press drag (hors edit-mode) */
#widget-grid.wiggling .widget-wrap {
  animation: wiggle 0.35s ease-in-out infinite alternate;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#widget-grid.wiggling {
  touch-action: none;
}

/* ── Bloquer les comportements natifs (menus contextuels, callout iOS,
      selection de texte, drag-image natif) dans toute l app ─────────── */
html, body, .ra-home-wrap, .widget-wrap, .widget-wrap *, nav, header, button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
img, svg {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
/* Re-autoriser la selection dans les champs saisissables */
input, textarea, [contenteditable="true"], [contenteditable=""],
.cv-modal input, .cv-modal textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ── Overlay edition groupe (sortir une icone) ───────────────────────── */
.group-edit-overlay {
  position: fixed; inset: 0; z-index: 480;
  background: rgba(17,33,50,0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: geo-fade 0.2s ease;
  padding: 1rem;
}
@keyframes geo-fade { from { opacity: 0; } to { opacity: 1; } }
.group-edit-panel {
  background: #fff;
  border-radius: 20px;
  padding: 1rem 1.1rem 0.8rem;
  min-width: 260px;
  max-width: 90vw;
  box-shadow: 0 18px 48px rgba(17,33,50,0.3);
  animation: geo-pop 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes geo-pop {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.group-edit-title {
  font-size: 0.82rem; font-weight: 800; color: #0ea5a4;
  text-align: center; margin-bottom: 0.2rem;
  letter-spacing: 0.01em;
}
.group-edit-hint {
  font-size: 0.68rem; font-weight: 500; color: #94a3b8;
  text-align: center; margin-bottom: 0.8rem;
}
.group-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 12px;
  margin-bottom: 0.8rem;
}
.group-edit-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 12px 6px 10px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid #e2e8f0;
  border-radius: 13px;
}
.group-edit-emoji { font-size: 1.75rem; line-height: 1; }
.group-edit-label {
  font-size: 0.6rem; font-weight: 700; color: #475569;
  text-align: center; line-height: 1.1;
  max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.group-edit-remove {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #ef4444; color: #fff;
  border: 2px solid #fff;
  font-size: 0.95rem; line-height: 1; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(220,38,38,0.35);
  -webkit-tap-highlight-color: transparent;
}
.group-edit-remove:active { transform: scale(0.88); }
.group-edit-close {
  width: 100%; padding: 0.65rem;
  border: none; border-radius: 12px;
  background: #f1f5f9; color: #475569;
  font-size: 0.82rem; font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.group-edit-close:active { background: #e2e8f0; }

.ra-home-wrap {
  /* Mobile : 100dvh + overflow hidden = ecran fige (comportement voulu).
     Desktop avec console ouverte / petit viewport : si le contenu deborde,
     on permet le scroll (sinon des icones deviennent inaccessibles).
     Écran FIGÉ (non scrollable) sur écran normal ; on n'autorise le scroll que
     si le viewport est trop COURT (échappatoire ci-dessous, max-height). */
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: hidden;
  overflow-x: hidden;
  /* Fond par défaut bleu ciel de la palette (agnostique, tous tenants) : fond
     bleu soutenu -> écriture BLANCHE lisible. Le wrap a toujours un fond défini,
     que la détection de contraste lit directement. Surchargé par le choix perso
     / default_bg du tenant (inline) ; un fond CLAIR bascule le texte en noir. */
  background-image: linear-gradient(135deg, #0ea5a4 0%, #2389ae 100%);
  background-size: cover;
  background-position: center;
  background-attachment: local;
  transition: background 0.3s;
}
/* Sur mobile (largeur <= 600px), on revient au comportement fige strict :
   l ecran n est PAS scrollable, conformement a la regle metier. */
@media (max-width: 600px) {
  .ra-home-wrap {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
}
/* Échappatoire : viewport trop COURT (console ouverte, paysage) -> on autorise le
   scroll pour ne pas rendre des icônes inaccessibles. Sinon : écran figé. */
@media (max-height: 640px) {
  .ra-home-wrap { height: auto; min-height: 100dvh; overflow-y: auto; }
}
/* Preserver pull-to-refresh Android: ne pas bloquer l overscroll vertical du body */
html, body { overscroll-behavior-y: auto; }
/* L espace sous la derniere ligne de widgets (zone nav) va au widget-grid */
#widget-grid {
  touch-action: pan-y;
  /* padding-bottom retire (LOT UX-Grid v3) : la grille a maintenant height fixe = viewport - topbar - nav, le padding-bottom causerait un overflow vertical */
  align-content: start;
  overflow: hidden; /* securite : tout ce qui depasserait est cache, pas de scroll body */
}

/* Picker fond */
/* Boutons auth topbar */
.ra-btn-login-wrap {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(0,0,0,0.25); border-radius: 99px;
  padding: 0.3rem 0.7rem; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  -webkit-tap-highlight-color: transparent;
}
.ra-btn-login-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #dc2626; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(220,38,38,0.8);
}
.ra-btn-login-text { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.ra-btn-login-sep { color: rgba(255,255,255,0.4); font-size: 0.65rem; }
.ra-btn-adherer {
  font-size: 0.72rem; font-weight: 900; color: #fde68a;
  letter-spacing: 0.01em;
}
.ra-btn-logout {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(0,0,0,0.2); border-radius: 99px;
  padding: 0.3rem 0.7rem; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.72rem; font-weight: 700; color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.ra-btn-logout::before {
  content: '●'; font-size: 0.55rem; color: #4ade80;
  text-shadow: 0 0 6px rgba(74,222,128,0.8);
}

.ra-frais-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; margin: 0.75rem 0 0;
  background: var(--frais-bg, linear-gradient(135deg, #1d4ed8 0%, #2563eb 60%, #3b82f6 100%));
  border-radius: 20px; text-decoration: none; color: #fff;
  box-shadow: 0 6px 24px rgba(37,99,235,0.35);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative; overflow: hidden;
}
.ra-frais-card::after {
  content: ''; position: absolute;
  top: -30%; right: -10%; width: 80px; height: 80px;
  background: rgba(255,255,255,0.08); border-radius: 50%;
}
.ra-frais-card:active { transform: scale(0.97); box-shadow: 0 3px 12px rgba(37,99,235,0.3); }
.ra-frais-card-left { display: flex; align-items: center; gap: 0.85rem; }
.ra-frais-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ra-frais-card-icon svg { width: 1.4rem; height: 1.4rem; }
.ra-frais-card-title { font-size: 0.95rem; font-weight: 800; color: #fff; }
.ra-frais-card-sub { font-size: 0.7rem; color: rgba(255,255,255,0.75); margin-top: 0.1rem; }
.ra-frais-card-right { text-align: center; background: rgba(255,255,255,0.15);
  border-radius: 12px; padding: 0.4rem 0.65rem; }
.ra-frais-card-count {
  font-size: 1.6rem; font-weight: 900; color: #fff; line-height: 1;
}
.ra-frais-card-count-label { font-size: 0.6rem; color: rgba(255,255,255,0.75); font-weight: 600; }

/* Recherche moderne */
.ra-search-wrap { margin: 0.5rem 0; }
.ra-search-box {
  display: flex; align-items: center; gap: 0.6rem;
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 14px; padding: 0.6rem 0.85rem;
  box-shadow: 0 2px 8px rgba(22,58,90,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ra-search-box:focus-within {
  border-color: #2389ae;
  box-shadow: 0 0 0 3px rgba(35,137,174,0.1);
}
.ra-search-ico { width:1.1rem;height:1.1rem;color:#94a3b8;flex-shrink:0; }
.ra-search-input {
  flex:1; border:none; outline:none; font-size:0.9rem;
  font-family:inherit; color:#1e293b; background:transparent;
}
.ra-search-input::placeholder { color:#94a3b8; }

/* Widget échéances */
.ra-echeances {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.85rem; margin: 0.5rem 0 0;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(22,58,90,0.05);
  -webkit-tap-highlight-color: transparent;
}
.ra-echeances:active { background: #f8fafc; }
.ra-ech-label {
  font-size: 0.65rem; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0;
}
.ra-ech-content { flex: 1; min-width: 0; }
.ra-ech-item { display: flex; align-items: center; gap: 0.4rem; }
.ra-ech-icon { font-size: 0.9rem; }
.ra-ech-name { font-size: 0.8rem; font-weight: 700; color: #1e293b; }
.ra-ech-date { font-size: 0.7rem; color: #64748b; margin-left: auto; white-space: nowrap; }
.ra-ech-urgent { color: #dc2626 !important; font-weight: 800; }
.ra-ech-voir {
  font-size: 0.65rem; font-weight: 700; color: #2389ae;
  white-space: nowrap; flex-shrink: 0;
}
.ra-ech-loading { font-size: 0.75rem; color: #94a3b8; }

/* Calendrier fiscal liste */
.cal-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0; border-bottom: 1px solid #f1f5f9;
}
.cal-item:last-child { border-bottom: none; }
.cal-icon { font-size: 1.2rem; flex-shrink: 0; }
.cal-body { flex: 1; }
.cal-label { font-size: 0.85rem; font-weight: 700; color: #1e293b; }
.cal-date { font-size: 0.72rem; color: #64748b; margin-top: 0.1rem; }
.cal-delta {
  font-size: 0.65rem; font-weight: 800; padding: 0.15rem 0.45rem;
  border-radius: 99px; flex-shrink: 0;
}
.cal-urgent { background: #fef2f2; color: #dc2626; }
.cal-soon { background: #fef3c7; color: #b45309; }
.cal-normal { background: #f0fdf4; color: #166534; }

/* Slider — revue de presse */
.ra-slider-wrap { margin: 0.75rem 0 0; overflow: hidden; border-radius: 18px;
  box-shadow: 0 4px 20px rgba(22,58,90,0.10); }
.ra-slider {
  display: flex; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  width: 100%;
}
.ra-slide {
  min-width: 100%; width: 100%; flex-shrink: 0;
  background: #fff; border: 1px solid #e2e8f0;
  overflow: hidden; position: relative; box-sizing: border-box;
}
.ra-slide::before {
  content: ''; display: block; height: 4px; width: 100%;
}
.ra-slide-1::before { background: linear-gradient(90deg,#0ea5a4,#2389ae); }
.ra-slide-2::before { background: linear-gradient(90deg,#0f5132,#20c997); }
.ra-slide-3::before { background: linear-gradient(90deg,#7c3aed,#2563eb); }
.ra-slide-4::before { background: linear-gradient(90deg,#b45309,#f59e0b); }
.ra-slide-inner { padding: 0.6rem 0.85rem 0.65rem; }
.ra-slide-meta {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem;
}
.ra-slide-eyebrow {
  font-size: 0.62rem; font-weight: 800; color: #0ea5a4;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: #eff6ff; padding: 0.15rem 0.5rem; border-radius: 99px;
}
.ra-slide-source { font-size: 0.6rem; color: #94a3b8; font-style: italic; }
.ra-slide-title {
  font-size: 1.05rem; font-weight: 900; color: #0f172a;
  line-height: 1.25; margin-bottom: 0.4rem;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -0.01em;
}
.ra-slide-desc {
  font-size: 0.78rem; color: #475569; line-height: 1.5;
  margin-bottom: 0.65rem;
  display: -webkit-box; -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; overflow: hidden;
}
.ra-slide-footer {
  display: flex; align-items: center; justify-content: space-between;
}
.ra-slide-cta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.38rem 0.8rem; background: #0ea5a4; color: #fff;
  border-radius: 99px; font-size: 0.7rem; font-weight: 700;
  text-decoration: none;
}
.ra-slide-date { font-size: 0.6rem; color: #94a3b8; }
.ra-slider-dots {
  display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.5rem;
}
.ra-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #cbd5e1; cursor: pointer; transition: all 0.2s;
}
.ra-dot.active { background: #0ea5a4; width: 16px; border-radius: 3px; }
/* Carte */
/* ════════════════════════════════════════════════════════════════════
   CARTE DE VISITE — Paramètres relief « bombé » premium
   Vraie carte plastique : courbure, highlight bords, ombres profondes,
   bandeau navy avec liseré or, body chaud crème, séparateur doré.
   ════════════════════════════════════════════════════════════════════ */
.ra-card {
  position: relative;
  /* Body warm cream avec gradient radial decentre (effet bombe lumineux) */
  background:
    radial-gradient(ellipse 130% 100% at 35% 25%, #fffefb 0%, #fff8ec 35%, #fbedce 75%, #f4dfb4 100%);
  border-radius: 22px;
  margin: 0.5rem 0;
  overflow: visible;
  /* Multi-shadow profond + double anneau (style bouton central nav) */
  box-shadow:
    /* Inset bombe (haut clair, bas/cotes ombre) */
    inset 0 3px 6px rgba(255,255,255,1),
    inset 0 -4px 8px rgba(22,58,90,0.18),
    inset 3px 0 6px rgba(255,255,255,0.55),
    inset -3px 0 6px rgba(22,58,90,0.10),
    /* Double anneau: liseré clair 1.5px + halo navy 3px */
    0 0 0 1.5px rgba(255,255,255,0.95),
    0 0 0 3.5px rgba(22,58,90,0.22),
    /* Ombres projetees (decollage 3D franc) */
    0 1px 1px rgba(22,58,90,0.06),
    0 4px 8px rgba(22,58,90,0.12),
    0 10px 20px rgba(22,58,90,0.18),
    0 20px 40px rgba(22,58,90,0.22),
    0 36px 72px -10px rgba(22,58,90,0.30);
  transform: translateZ(0);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}
/* Highlight fin courbe sur bord superieur — effet vitre bombee */
.ra-card::before {
  content: '';
  position: absolute;
  top: 1px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent);
  pointer-events: none;
  z-index: 5;
  border-radius: 50%;
  filter: blur(0.4px);
}
.ra-card:active {
  transform: translateY(2px) scale(0.995) translateZ(0);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(22,58,90,0.15),
    0 0 0 1.5px rgba(255,255,255,0.95),
    0 0 0 3px rgba(22,58,90,0.20),
    0 2px 6px rgba(22,58,90,0.14),
    0 8px 16px rgba(22,58,90,0.18),
    0 16px 32px rgba(22,58,90,0.20);
}

/* Filigrane: derriere tout (z=0) */
.cv-watermark {
  position: absolute; top: 80px; right: calc(118px + 0.9rem); bottom: 0; left: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0 0 0 22px;
}
.cv-watermark img { width:72%; max-width:240px; opacity:0.16; filter:grayscale(60%) contrast(1.1); object-fit:contain; }

/* Filigrane texte par defaut SUPPRIME (cosmetique 28/04/2026) — affiche rien si pas d'image */

/* Bannière: navy → cyan profond avec reflet et separateur dore */
.ra-card-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0.9rem 0.85rem;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255,255,255,0.20) 0%, transparent 55%),
    linear-gradient(135deg, #0a1f33 0%, #0ea5a4 32%, #0ea5a4 65%, #2389ae 100%);
  position: relative; z-index: 1;
  border-radius: 22px 22px 0 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 -1px 0 rgba(0,0,0,0.25) inset;
}
/* Separateur subtil banner/body (highlight + ombre douce) */
.ra-card-topbar::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}
/* Reflet sur la banner */
.ra-card-topbar::after {
  content: '';
  position: absolute; top:0; left:0; right:0; height:55%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
  pointer-events: none;
  border-radius: 22px 22px 0 0;
}
.ra-card-actions { display:flex; gap:0.45rem; align-items:center; position:relative; z-index:3; }
.ra-card-btn {
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.85);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}
.ra-card-btn:active { transform: scale(0.90); }
/* Crayon (modifier) en VERT */
.ra-card-btn-edit {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.20),
    0 4px 12px rgba(22,163,74,0.40),
    0 1px 0 rgba(255,255,255,0.35) inset;
}
/* Partage en ORANGE */
.ra-card-btn-share {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.20),
    0 4px 12px rgba(245,158,11,0.45),
    0 1px 0 rgba(255,255,255,0.35) inset;
}

/* Photo profil avec relief (ring blanc + ombre douce) */
.cv-photo-wrap { position:relative; width:54px; height:54px; cursor:pointer; flex-shrink:0; z-index:2; }
.cv-photo-inner {
  width:54px; height:54px; border-radius:50%;
  background: linear-gradient(145deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
  border:2.5px solid rgba(255,255,255,0.85);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; color:#fff; position:relative; flex-shrink:0;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    0 4px 12px rgba(0,0,0,0.12),
    0 1px 0 rgba(255,255,255,0.4) inset;
  transition: transform 0.2s;
}
.cv-photo-wrap:active .cv-photo-inner { transform: scale(0.94); }
.cv-photo-inner img {
  position:absolute; top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  border-radius:50%; display:block;
}
.cv-photo-inner svg { width:1.4rem; height:1.4rem; }
.cv-photo-hint { font-size:0.5rem; font-weight:700; margin-top:0.1rem; opacity:0.85; }
.cv-photo-edit {
  position:absolute; bottom:-1px; right:-1px; width:18px; height:18px;
  border-radius:50%;
  background: linear-gradient(135deg,#0ea5a4,#0ea5a4);
  color:#fff; font-size:0.6rem;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index:3;
}

/* Corps carte */
.ra-card-body {
  display:grid; grid-template-columns:1fr auto;
  gap:0.95rem; align-items:center; padding:1rem 0.9rem 1.1rem;
  position:relative; z-index:1;
}
.cv-name {
  font-family: 'Syne', system-ui, sans-serif;
  font-size:1.15rem; font-weight:800; color:#0a1f33;
  line-height:1.1; margin-bottom:0.25rem;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  letter-spacing:-0.015em;
}
.cv-job {
  font-size:0.8rem; font-weight:600; color:#0ea5a4;
  letter-spacing:0.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.cv-company {
  font-size:0.72rem; color:#7c5b2f; margin-top:0.15rem;
  font-style: italic; font-weight:500;
}
.cv-status-badge {
  display:inline-block; margin-top:0.4rem;
  padding:0.16rem 0.55rem; border-radius:99px;
  font-size:0.62rem; font-weight:700;
  background: linear-gradient(135deg,#dcfce7,#bbf7d0);
  color:#166534; border:1px solid #86efac;
  box-shadow: 0 1px 2px rgba(22,163,74,0.15), 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* QR avec relief: mini-carte qui sort de la carte (cadre dore) */
.ra-card-qr-box {
  width:118px; height:118px; flex-shrink:0;
  background: #ffffff;
  border-radius:13px;
  border:1.5px solid rgba(212,168,87,0.45);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding: 4px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.95) inset,
    0 1px 2px rgba(22,58,90,0.08),
    0 4px 10px rgba(22,58,90,0.12),
    0 8px 20px rgba(22,58,90,0.14),
    0 0 0 0.5px rgba(196,145,74,0.3);
}
.cv-qr { width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius: 8px; overflow:hidden; background:#fff; }
.cv-qr svg { width:100%; height:100%; display:block; }

/* ── Carte de visite FLUIDE (owner only, active par la classe .cv-fluid posee
   en JS). Le CONTENANT pilote le CONTENU : tout est en multiples de --u (unite
   derivee de la cellule) + --qr (taille du QR garantie de tenir). La carte
   remplit 100% de sa cellule, sans transform -> meme design proportionnel a
   toute taille, QR jamais tronque. Aucun effet sans la classe .cv-fluid
   -> zero impact sur les autres utilisateurs. */
.ra-card.cv-fluid {
  width:100%; height:100%; margin:0; box-sizing:border-box;
  display:flex; flex-direction:column; overflow:hidden;
}
.ra-card.cv-fluid .ra-card-topbar {
  flex:0 0 auto; min-height:0;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 0.95);
  border-radius: calc(var(--u) * 1.55) calc(var(--u) * 1.55) 0 0;
}
.ra-card.cv-fluid .cv-photo-wrap { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); }
.ra-card.cv-fluid .cv-photo-inner { width:100%; height:100%; }
.ra-card.cv-fluid .cv-photo-inner svg { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
.ra-card.cv-fluid .cv-photo-hint { font-size: calc(var(--u) * 0.5); }
.ra-card.cv-fluid .cv-photo-edit {
  width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); font-size: calc(var(--u) * 0.62);
}
.ra-card.cv-fluid .ra-card-actions { gap: calc(var(--u) * 0.45); }
.ra-card.cv-fluid .ra-card-btn { width: calc(var(--u) * 3.0); height: calc(var(--u) * 3.0); }
.ra-card.cv-fluid .ra-card-btn svg { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
.ra-card.cv-fluid .ra-card-body {
  flex:1 1 auto; min-height:0; align-items:center;
  grid-template-columns: minmax(0,1fr) auto;
  gap: calc(var(--u) * 0.9);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 0.95);
}
.ra-card.cv-fluid .ra-card-identity { min-width:0; }
.ra-card.cv-fluid .cv-name {
  font-size: calc(var(--u) * 1.5); line-height:1.1; margin-bottom: calc(var(--u) * 0.2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ra-card.cv-fluid .cv-job { font-size: calc(var(--u) * 0.98); overflow:hidden; text-overflow:ellipsis; }
.ra-card.cv-fluid .cv-company { font-size: calc(var(--u) * 0.86); margin-top: calc(var(--u) * 0.12); overflow:hidden; text-overflow:ellipsis; }
.ra-card.cv-fluid .cv-status-badge { font-size: calc(var(--u) * 0.62); margin-top: calc(var(--u) * 0.4); }
.ra-card.cv-fluid .ra-card-qr-box {
  width: var(--qr); height: var(--qr); flex-shrink:0;
  padding: calc(var(--u) * 0.35);
  border-radius: calc(var(--u) * 1.05);
}

/* Modals */
.cv-overlay {
  position:fixed; inset:0; z-index:3000;
  display:none; align-items:flex-end; justify-content:center;
  background:rgba(15,23,42,0.5); backdrop-filter:blur(4px);
}
.cv-overlay.is-visible { display:flex !important; }
.cv-modal {
  background:#fff; width:100%;
  border-radius:24px 24px 0 0;
  padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 32px rgba(15,23,42,0.16);
  max-height:92vh; overflow-y:auto;
}
.cv-modal-sm { max-height:70vh; }
.cv-modal-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:0.85rem; gap:0.75rem;
}
.cv-modal-title { margin:0; font-size:1.05rem; font-weight:800; color:#0ea5a4; }
.cv-modal-sub { margin:0.2rem 0 0; font-size:0.75rem; color:#64748b; }
.cv-modal-close {
  width:34px; height:34px; border:none; border-radius:50%;
  background:#f1f5f9; color:#475569; font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cv-form { display:grid; gap:0.6rem; }
.cv-row2 { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.cv-field { display:flex; flex-direction:column; gap:0.2rem; }
.cv-field label { font-size:0.7rem; font-weight:700; color:#0ea5a4; }
.cv-input {
  width:100%; padding:0.55rem 0.7rem;
  border:1px solid rgba(22,58,90,0.14); border-radius:9px;
  font-size:0.88rem; font-family:inherit; color:#1e293b;
  background:#fdfdfd; box-sizing:border-box;
}
.cv-input:focus { outline:none; border-color:#2389ae; box-shadow:0 0 0 3px rgba(35,137,174,0.1); }
.cv-share-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; margin-bottom:0.75rem; }
.cv-check-label {
  display:flex; align-items:center; gap:0.4rem;
  font-size:0.8rem; font-weight:600; color:#1e293b;
  padding:0.45rem 0.6rem; border-radius:9px;
  background:#f0f7fa; border:1px solid rgba(22,58,90,0.08); cursor:pointer;
}
.cv-check-label input { width:15px; height:15px; accent-color:#0ea5a4; flex-shrink:0; }
.cv-modal-actions { display:flex; gap:0.5rem; margin-top:0.85rem; }
.cv-btn-primary {
  flex:1; padding:0.7rem; background:linear-gradient(135deg,#0ea5a4,#0ea5a4);
  color:#fff; border:none; border-radius:11px;
  font-size:0.88rem; font-weight:700; cursor:pointer; font-family:inherit;
}
.cv-btn-secondary {
  flex:1; padding:0.7rem; background:#f1f5f9; color:#475569;
  border:1px solid #e2e8f0; border-radius:11px;
  font-size:0.88rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.cv-section-label { font-size:0.75rem; font-weight:700; color:#475569; margin:0.5rem 0 0.4rem; }
.cv-swatches { display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.6rem; }
.cv-swatch {
  width:32px; height:32px; border-radius:8px; border:none; cursor:pointer;
  transition:transform 0.12s; flex-shrink:0;
}
.cv-swatch:active { transform:scale(0.9); }
.cv-file-btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.5rem 0.75rem; background:#f0f9ff;
  border:1px solid #bae6fd; border-radius:9px;
  font-size:0.82rem; font-weight:600; color:#1d4ed8; cursor:pointer;
}

/* Badge statut */
.ra-role-badge { display:inline-block; padding:0.2rem 0.6rem; border-radius:99px; font-size:0.68rem; font-weight:700; }
/* ── Header refactor: alignement + CTA Adherer ─────────────────── */
.ra-topbar {
  display: flex; align-items: center;
  padding: 0.6rem 0.75rem;
  gap: 0.35rem;
  position: relative; z-index: 50;
}
.ra-topbar-spacer { flex: 1; }
.hdr-badge-chip { white-space: nowrap; letter-spacing: 0.02em; }
.ra-cta-adherer {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  background: linear-gradient(135deg, #f59e0b 0%, #fb923c 55%, #f97316 100%);
  color: #fff; text-decoration: none;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(245,158,11,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.35);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.ra-cta-adherer:hover { box-shadow: 0 4px 12px rgba(245,158,11,0.55); transform: translateY(-1px); }
.ra-cta-adherer:active { transform: scale(0.94); }
.ra-cta-adherer .ra-ico { width: 0.85em; height: 0.85em; }
.ra-status-loading { background:#f1f5f9; color:#94a3b8; }
.ra-status-membre { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.ra-status-adherent { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.ra-status-president { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border:1px solid #f59e0b; }
.ra-status-admin { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }

/* Nav bottom */
.ra-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: visible;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid #e2e8f0;
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom,0px));
  z-index: 100; box-shadow: 0 -4px 20px rgba(17,33,50,0.08);
}
.ra-nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.3rem; padding: 0.3rem 0.15rem;
  text-decoration: none; color: #64748b;
  font-size: 0.62rem; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.ra-nav-item:hover, .ra-nav-item.active { color: #0ea5a4; }
.ra-nav-icon-wrap {
  width: 2.4rem; height: 2.4rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.ra-nav-item:active .ra-nav-icon-wrap { transform: scale(0.9); }
.ra-nav-icon-wrap svg { width: 1.3rem; height: 1.3rem; }

.ia-fire-emoji {
  font-size: 1.9rem; line-height: 1;
  display: block; transform-origin: bottom center;
  animation: fire-dance 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,120,0,0.8));
}
@keyframes fire-dance {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(0deg); }
  20%  { transform: scaleX(0.93) scaleY(1.06) rotate(-2deg); }
  40%  { transform: scaleX(1.06) scaleY(0.95) rotate(2deg); }
  60%  { transform: scaleX(0.96) scaleY(1.04) rotate(-1.5deg); }
  80%  { transform: scaleX(1.04) scaleY(0.97) rotate(1.5deg); }
  100% { transform: scaleX(1)    scaleY(1)    rotate(0deg); }
}

/* Bouton IA central */
.ra-nav-reseau-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; border: none; background: none; cursor: pointer;
  position: relative; padding: 0 0 14px 0;
  margin-top: -38px;
  -webkit-tap-highlight-color: transparent;
}
.ra-nav-reseau-core {
  width: 84px; height: 84px; border-radius: 22px;
  background: radial-gradient(ellipse at 35% 30%, #ffffff 0%, #e8f0f8 45%, #c8d8ea 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 10px 28px rgba(22,58,90,0.4),
    0 5px 10px rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.15),
    inset 0 3px 6px rgba(255,255,255,1),
    inset 0 -3px 6px rgba(22,58,90,0.15),
    inset 3px 0 6px rgba(255,255,255,0.5),
    inset -3px 0 6px rgba(22,58,90,0.08),
    0 0 0 3px #fff,
    0 0 0 5px rgba(22,58,90,0.18);
  position: relative; z-index: 2;
  transition: transform 0.12s, box-shadow 0.12s;
}
.ra-nav-reseau-btn:active .ra-nav-reseau-core {
  transform: scale(0.91) translateY(3px);
  box-shadow:
    0 4px 10px rgba(22,58,90,0.35),
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 2px 4px rgba(255,255,255,0.8),
    inset 0 -1px 3px rgba(22,58,90,0.2),
    0 0 0 3px #fff;
}
.ra-nav-reseau-logo {
  width: 56px; height: 56px; object-fit: contain;
}
.ra-nav-reseau-label {
  font-size: 0.6rem; font-weight: 900; color: #0ea5a4;
  letter-spacing: 0.04em; margin-top: 0.4rem;
  text-transform: uppercase;
}


/* Modal IA */
.ia-modal {
  max-height: 85vh;
  display: flex; flex-direction: column;
}
.ia-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.75rem;
}
.ia-modal-title-wrap {
  display: flex; align-items: center; gap: 0.5rem;
}
.ia-pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #8bc61c;
  animation: ia-pulse-dot 1.5s ease-in-out infinite;
}
@keyframes ia-pulse-dot {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}
.ia-modal-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: #0ea5a4; }
.ia-access-msg {
  text-align: center; padding: 1.5rem 0.5rem;
  color: #475569;
}
.ia-lock-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.ia-messages {
  flex: 1; overflow-y: auto; padding: 0.5rem 0;
  display: flex; flex-direction: column; gap: 0.75rem;
  min-height: 200px; max-height: 45vh;
}
.ia-msg {
  max-width: 85%; padding: 0.65rem 0.85rem;
  border-radius: 16px; font-size: 0.85rem; line-height: 1.5;
}
.ia-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #0ea5a4, #0ea5a4);
  color: #fff; border-radius: 16px 16px 4px 16px;
}
.ia-msg-agent {
  align-self: flex-start;
  background: #f1f5f9; color: #1e293b;
  border-radius: 16px 16px 16px 4px;
}
.ia-msg-typing {
  align-self: flex-start;
  background: #f1f5f9; padding: 0.65rem 1rem;
  border-radius: 16px 16px 16px 4px;
}
.ia-typing-dots span {
  display: inline-block; width: 6px; height: 6px;
  background: #94a3b8; border-radius: 50%; margin: 0 2px;
  animation: ia-typing 1.2s ease-in-out infinite;
}
.ia-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ia-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ia-typing {
  0%,60%,100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}
.ia-input-wrap {
  display: flex; gap: 0.5rem; align-items: flex-end;
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
}
.ia-input {
  flex: 1; padding: 0.65rem 0.75rem;
  border: 1px solid rgba(22,58,90,0.14); border-radius: 12px;
  font-size: 0.88rem; font-family: inherit; resize: none;
  background: #fdfdfd;
}
.ia-input:focus { outline: none; border-color: #2389ae; }
.ia-send-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #0ea5a4, #0ea5a4);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ia-send-btn svg { width: 1.1rem; height: 1.1rem; }

/* Footer */
.ra-home-footer {
  display:flex; justify-content:center; align-items:center; gap:0.5rem;
  padding:0.75rem 0 0.25rem; font-size:0.7rem; color:#94a3b8;
}
.ra-home-footer a { color:#94a3b8; text-decoration:none; }
.ra-search-wrap { margin:0.4rem 0; }

/* ══ WIDGET GRID — 4 colonnes unifiees ══ */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, 1fr);
  /* Hauteur STABLE : on s'aligne sur --app-vh (= window.innerHeight figé au load,
     maj sur resize/orientation) comme main.container, au lieu de 100dvh qui se
     recalcule en continu (barre d'URL mobile, settle) -> la grille (et la carte
     de visite qui occupe 3/7) sautait en hauteur a chaque rechargement. */
  height: calc(var(--app-vh, 100dvh) - 56px - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  gap: 0.6rem;
  padding: 0.75rem;
  box-sizing: border-box;
}

/* Tailles — span sur 4 colonnes */
.w-icon   { grid-column: span 1; min-height: 0; aspect-ratio: auto; }
.w-small  { grid-column: span 2; min-height: 0; }
.w-medium { grid-column: span 4; min-height: 0; }
.w-large  { grid-column: span 4; min-height: 0; grid-row: span 2; }
.w-wide   { grid-column: span 4; min-height: 160px; }
.w-group  { grid-column: span 1; min-height: 0; aspect-ratio: auto; transition: all 0.2s; }
.w-group.expanded {
  grid-column: span 2;
  grid-row: span 2;       /* prend 2 rangees pour donner de la place */
  min-height: 156px;
  box-shadow: 0 12px 32px rgba(22,58,90,0.28) !important;
  z-index: 50;
  position: relative;
  transform: scale(1.04);
}
.w-group.expanded .grp-cell {
  padding: 8px 4px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.7);
  transition: background 0.15s, transform 0.12s;
}
.w-group.expanded .grp-cell:active { background: #eff6ff; transform: scale(0.96); }
/* AGRANDISSEMENT des icones et labels en mode expanded */
.w-group.expanded .grp-emoji {
  font-size: 1.95rem !important;
  line-height: 1 !important;
}
.w-group.expanded .grp-label {
  font-size: 0.62rem !important;
  margin-top: 4px !important;
  font-weight: 700 !important;
}

/* ── Layouts internes du groupe ────────────────────────────────── */
.grp-root { height: 100%; box-sizing: border-box; }
.grp-grid { display: grid; gap: 2px; padding: 4px; height: 100%; box-sizing: border-box; align-items: center; justify-items: center; }
.grp-pyramid { display: flex; flex-direction: column; height: 100%; padding: 4px; gap: 2px; box-sizing: border-box; justify-content: center; }
.grp-row { display: flex; justify-content: center; gap: 4px; flex: 1; align-items: center; min-height: 0; }
.grp-row-top .grp-cell { width: 50%; }   /* sommet pyramide */
.grp-row-bot .grp-cell { flex: 1; max-width: 50%; }
.w-group.expanded .grp-row-top .grp-cell { width: 40%; }
.w-group.expanded .grp-row-bot .grp-cell { max-width: 45%; }

.grp-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; padding: 2px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  min-width: 0;
}
.grp-emoji {
  font-size: 0.9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: font-size 0.18s ease;
}
.grp-emoji .ra-ico { width: 1.3em; height: 1.3em; }
.w-group.expanded .grp-emoji .ra-ico { width: 1.6em; height: 1.6em; }
/* PHASE 6 — Uniformisation TAILLE des icones du groupe (collapsed et expanded).
   Certaines icones du catalogue (ic_ia, ic_admin_events, ...) ont
   des dimensions inline width="32" height="32" et N'ONT PAS la classe .ra-ico,
   donc echappaient aux 2 selecteurs ci-dessus. On cible TOUS les <svg> dans
   .grp-emoji avec !important pour garantir une taille uniforme dans le groupe,
   peu importe la source de l'icone (catalog hardcode vs manifest serveur). */
.w-group .grp-emoji > svg,
.w-group .grp-emoji svg:not(.ra-ico) {
  width: 1.3em !important;
  height: 1.3em !important;
  max-width: 1.3em;
  max-height: 1.3em;
}
.w-group.expanded .grp-emoji > svg,
.w-group.expanded .grp-emoji svg:not(.ra-ico) {
  width: 1.6em !important;
  height: 1.6em !important;
  max-width: 1.6em;
  max-height: 1.6em;
}
/* PHASE 6 — Uniformisation REPARTITION des cellules dans le groupe.
   align-items:center / justify-items:center empechait les .grp-cell de
   stretcher dans leur cellule de grid -> en mode expanded une cellule
   pouvait paraitre plus grande que les voisines selon le contenu interne.
   On force le stretch + width/height 100% sur les .grp-cell des layouts
   grid (pas pyramide qui a sa logique flex). */
.grp-grid .grp-cell { width: 100%; height: 100%; align-self: stretch; justify-self: stretch; }
.grp-label {
  font-size: 0.4rem; font-weight: 700; color: #475569;
  margin-top: 1px; text-align: center; line-height: 1.1;
  overflow: hidden; max-width: 100%;
  text-overflow: ellipsis; white-space: nowrap;
  transition: font-size 0.18s ease;
}
/* Adaptations selon le nombre d icones (collapsed uniquement) */
.w-group:not(.expanded) .grp-n-1 .grp-emoji { font-size: 1.6rem; }
.w-group:not(.expanded) .grp-n-2 .grp-emoji { font-size: 1.05rem; }
.w-group:not(.expanded) .grp-n-3 .grp-emoji { font-size: 0.95rem; }
.w-group:not(.expanded) .grp-n-4 .grp-emoji { font-size: 0.9rem; }

/* Bloc groupe dynamique */
.widget-group-wrap {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
}
.group-icon-slot {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; padding: 0.25rem;
  border-radius: 10px; transition: background 0.15s;
  flex: 1; min-width: 40px;
}
.group-icon-slot:active { background: #f1f5f9; }
.group-icon-slot-emoji { font-size: 1.3rem; line-height: 1; }
.group-icon-slot-label {
  font-size: 0.52rem; font-weight: 700;
  color: #475569; margin-top: 0.1rem;
  text-align: center; line-height: 1.1;
}

/* Icone widget */
.widget-icon-inner {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; padding: 0.3rem;
  border-radius: 16px;
}
.widget-icon-emoji { font-size: 1.6rem; line-height: 1; }
.widget-icon-label {
  font-size: 0.58rem; font-weight: 700;
  color: #475569; margin-top: 0.18rem;
  text-align: center; line-height: 1.2;
}

/* Base widget */
/* Etats des boutons dans le menu utilitaire (active/disabled/trashed) */
.util-item.util-item-disabled {
  opacity: 0.45;
  filter: grayscale(0.5);
  cursor: default;
}
.util-item.util-item-disabled .util-icon {
  box-shadow: none;
}
.util-item-badge {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 0.55rem; font-weight: 800;
  padding: 0.1rem 0.35rem;
  background: #f59e0b; color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 5;
  line-height: 1.1;
}
.util-item { position: relative; }

/* Etats des icones dans les groupes (mini-cells) */
.grp-cell.grp-cell-disabled {
  opacity: 0.45;
  filter: grayscale(0.5);
}
.grp-cell-badge {
  position: absolute;
  top: -2px; right: -2px;
  font-size: 0.45rem; font-weight: 800;
  padding: 0.05rem 0.25rem;
  background: #f59e0b; color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  z-index: 5;
  line-height: 1.1;
}
.grp-cell { position: relative; }

/* Etats des icones (active/disabled) */
.widget-icon-inner.icon-state-disabled {
  opacity: 0.45;
  filter: grayscale(0.5);
  cursor: default !important;
}
.widget-icon-inner.icon-state-disabled .widget-icon-emoji,
.widget-icon-inner.icon-state-disabled .widget-icon-label {
  pointer-events: none;
}
.icon-state-badge {
  position: absolute;
  top: -4px; right: -4px;
  font-size: 0.55rem; font-weight: 800;
  padding: 0.1rem 0.35rem;
  background: #f59e0b; color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 5;
}

.widget-wrap {
  position: relative;
  border-radius: 16px;
  overflow: visible;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.15s;
  min-height: 0;
  min-width: 0;
}
.widget-wrap > div:last-child {
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}
.widget-wrap:active { transform: scale(0.98); }

/* Mode édition — tremblement iOS */
.edit-mode .widget-wrap {
  animation: wiggle 0.35s ease-in-out infinite alternate;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.edit-mode {
  touch-action: none;
}
@keyframes wiggle {
  from { transform: rotate(-1deg) scale(1.01); }
  to   { transform: rotate(1deg)  scale(1.01); }
}

/* Bouton supprimer widget */
.widget-del {
  display: none;
  position: absolute;
  top: -10px; left: -10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 2px solid #fff;
  font-size: 1.1rem;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.edit-mode .widget-del { display: block; }

/* Bouton taille widget */
.widget-resize {
  display: none;
  position: absolute;
  top: -10px; right: -10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  border: 2px solid #fff;
  font-size: 0.75rem;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  font-weight: 900;
}
.edit-mode .widget-resize { display: block; }

/* Barre mode édition */
.edit-bar {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 200;
  background: rgba(22,58,90,0.95);
  border-radius: 99px;
  padding: 0.5rem 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.edit-bar-btn {
  border: none;
  border-radius: 99px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.edit-bar-add  { background: #f59e0b; color: #fff; }
.edit-bar-done { background: #16a34a; color: #fff; }

/* Bibliothèque widgets */
.lib-modal { max-height: 82vh; overflow-y: auto; }

/* Onglets */
.lib-tabs {
  display: flex; gap: 0.5rem; margin-bottom: 0.75rem;
}
.lib-tab {
  flex: 1; padding: 0.5rem; border-radius: 10px;
  border: 1.5px solid #e2e8f0; background: #f8fafc;
  font-size: 0.82rem; font-weight: 700; color: #64748b;
  cursor: pointer; transition: all 0.15s;
}
.lib-tab.active {
  background: #0ea5a4; color: #fff; border-color: #0ea5a4;
}
.lib-panel { overflow-y: auto; max-height: 55vh; }

/* Grille widgets 2 col */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.lib-item {
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  min-width: 0;
  /* Hauteur FIXE + contenu centré -> toutes les tuiles strictement identiques,
     que le nom tienne sur 1 ou 2 lignes (le grid-auto-rows:1fr ne fonctionne
     pas en conteneur auto-hauteur). */
  height: 116px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}
.lib-item:active { background: #f0f9ff; border-color: #2563eb; }
.lib-item.already-added { border-color: #86efac; background: #f0fdf4; }
.lib-item.locked { opacity: 0.6; cursor: default; }
.lib-item-icon { font-size: 1.8rem; margin-bottom: 0.3rem; }
.lib-item-name { font-size: 0.78rem; font-weight: 700; color: #0ea5a4; line-height: 1.2;
  width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-item-sizes { font-size: 0.65rem; color: #64748b; margin-top: 0.15rem; }
.lib-lock { position: absolute; top: 6px; right: 8px; font-size: 0.75rem; color: #f59e0b; }
.lib-check { position: absolute; top: 6px; right: 8px; font-size: 0.75rem; color: #16a34a; }

/* Grille icones 4 col */
.lib-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.lib-icon-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0.45rem 0.25rem;
  border: 2px solid #e2e8f0; border-radius: 14px;
  cursor: pointer; text-align: center;
  transition: all 0.15s; position: relative;
  background: #fff;
  min-width: 0;
  overflow: hidden;
}
.lib-icon-item:active { background: #f0f9ff; border-color: #2563eb; transform: scale(0.95); }
.lib-icon-item.already-added { border-color: #86efac; background: #f0fdf4; }
.lib-icon-item.locked { opacity: 0.55; }
.lib-icon-item-emoji { font-size: 1.6rem; line-height: 1; margin-bottom: 0.2rem;
  height: 1.6rem; display: flex; align-items: center; justify-content: center; }
.lib-icon-item-emoji svg { width: 1.6rem; height: 1.6rem; }
.lib-icon-item-name { font-size: 0.58rem; font-weight: 700; color: #475569; line-height: 1.2;
  width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-icon-item .lib-check { top: 3px; right: 4px; font-size: 0.65rem; }
.lib-icon-item .lib-lock { top: 3px; right: 4px; font-size: 0.65rem; }
.lib-selected { border-color: #2563eb !important; background: #eff6ff !important; }
.lib-sel-check {
  position: absolute; top: 3px; right: 4px;
  font-size: 0.65rem; color: #2563eb; font-weight: 900;
}
.lib-item .lib-sel-check { top: 6px; right: 8px; font-size: 0.75rem; }

/* ══ CONTENU DES WIDGETS ══ */

/* Widget carte de visite */
/* Le wrapper de la carte ne doit jamais ajouter de cadre/fond/ombre/clip:
   c est la .ra-card elle-meme qui porte tout le relief.
   On cible par data-id (le wrapper n a pas systematiquement la classe wgt-carte). */
.widget-wrap[data-id="carte"],
.widget-wrap.wgt-carte,
.wgt-carte {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 22px;
}
/* Idem pour le wrapper enfant generique du widget */
.widget-wrap[data-id="carte"] > div:last-child {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 22px !important;
}
.wgt-carte .ra-card-topbar { min-height: 80px; }
.wgt-carte.w-medium .ra-card-body { padding: 0.6rem; }

/* Anti-débordement : la carte ne doit jamais dépasser sa zone de grille et
   recouvrir les blocs voisins. La règle plus haut force le conteneur interne en
   overflow:visible (pour le relief) -> la carte, plus haute que ses lignes,
   débordait sur les blocs du dessous. On RE-clippe le conteneur interne à la
   cellule (et on cape la carte). Léger rognage de l'ombre, mais plus de
   chevauchement. (Le mode QR compact .w-small garde son rendu carré dédié.) */
.widget-wrap[data-id="carte"]:not(.w-small) > div:last-child {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
}
.widget-wrap[data-id="carte"] .ra-card {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
/* La carte de visite a besoin de 3 rangées (topbar + identité + QR/actions).
   `.w-large` la posait sur 2 rangées : tronquée sur petits écrans, déformée sur
   grands. On lui rend ses 3 rangées (= legacy `large` rowSpan:3), uniquement
   pour la carte (les autres widgets `large` restent sur 2). */
.widget-wrap.w-large[data-id="carte"] { grid-row: span 3; }

/* ══ Mode QR compact (size=small) : juste le QR centre, pas de carte ══ */
/* Force le wrapper a etre un carre parfait (aspect-ratio 1/1) ╨ taille de 4 icones */
.widget-wrap.w-small[data-id="carte"] {
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 0 !important;
}
.wgt-carte-qr-compact {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
/* Le QR occupe le centre (parfaitement centre vertical + horizontal) */
.wgt-carte-qr-compact .qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.6rem;
  box-sizing: border-box;
}
.wgt-carte-qr-compact .qr-box > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wgt-carte-qr-compact .qr-box canvas,
.wgt-carte-qr-compact .qr-box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
/* Le nom est en bas absolu, n'affecte pas le centrage du QR */
.wgt-carte-qr-compact .qr-name {
  position: absolute;
  bottom: 0.35rem;
  left: 0.4rem;
  right: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #0ea5a4;
  text-align: center;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255,255,255,0.85);
  border-radius: 4px;
  padding: 1px 4px;
  pointer-events: none;
}

/* Widget échéances small */
.wgt-echeances { padding: 0.75rem; cursor: pointer; }
.wgt-echeances .ra-ech-label { font-size: 0.7rem; color: #64748b; font-weight: 700; margin-bottom: 0.3rem; }

/* Widget frais */
.wgt-frais { text-decoration: none; display: block; padding: 0; overflow: hidden; }

/* Widget bien-être small */
.wgt-bienetre-small {
  padding: 0.75rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
}
.wgt-bienetre-note { font-size: 1.8rem; font-weight: 900; color: #0ea5a4; line-height: 1; }
.wgt-bienetre-label { font-size: 0.65rem; color: #64748b; margin-top: 0.2rem; }

/* Widget agent IA */
.wgt-ia {
  padding: 0.75rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(135deg, #0ea5a4, #0ea5a4);
}
.wgt-ia-icon { font-size: 2rem; margin-bottom: 0.3rem; }
.wgt-ia-label { font-size: 0.78rem; font-weight: 700; color: #fff; }

/* Widget annuaire */
.wgt-annuaire { padding: 0.75rem; cursor: pointer; }
.wgt-annuaire-title { font-size: 0.85rem; font-weight: 800; color: #0ea5a4; margin-bottom: 0.5rem; }

/* Widget placeholder (utilisateur requis) */
.wgt-premium {
  padding: 0.75rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.wgt-premium-icon { font-size: 1.5rem; margin-bottom: 0.3rem; }
.wgt-premium-label { font-size: 0.72rem; font-weight: 700; color: #92400e; }
.wgt-premium-lock { font-size: 0.65rem; color: #b45309; margin-top: 0.2rem; }

/* Bouton menu utilitaire nav */
.ra-nav-util-btn {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom,0px) + 8px);
  right: 0;
  width: calc(50% - 42px);
  height: 48px;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; z-index: 101; padding: 0;
}
.ra-nav-util-core {
  width: 48px; height: 48px; border-radius: 14px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.ra-nav-util-btn:active .ra-nav-util-core { background: rgba(22,58,90,0.08); }
.ra-nav-util-core svg { width: 1.7rem; height: 1.7rem; }

/* PHASE 2 — Bouton Evenements (nav basse, miroir gauche) */
/* Modal menu utilitaire */
.util-modal {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-radius: 24px 24px 0 0;
  padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px));
  box-shadow: 0 -8px 32px rgba(15,23,42,0.16);
  max-height: 80vh; overflow-y: auto;
}
.util-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem; font-size: 0.9rem; font-weight: 800; color: #0ea5a4;
}
.util-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
}
.util-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  border: none; background: none; cursor: pointer; padding: 0.5rem 0.25rem;
  border-radius: 14px; transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.util-item:active { background: #f1f5f9; }
.util-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
}
.util-icon-ia {
  overflow: visible !important;
  box-shadow: none !important;
}
.util-item span {
  font-size: 0.68rem; font-weight: 700; color: #1e293b;
  text-align: center; line-height: 1.3;
}

/* Halo ampoule Agent IA */
.util-ia-halo {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 14px;
  background: radial-gradient(circle, rgba(250,204,21,0.4) 0%, rgba(250,204,21,0) 70%);
  animation: ia-halo-pulse 2s ease-in-out infinite;
  z-index: 0;
}
@keyframes ia-halo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.4); opacity: 0; }
}

/* PHASE 7 — Rayons animes de l'ampoule Agent IA en CSS au lieu de SMIL.
   SMIL <animateTransform>/<animate> ne s'animent PAS quand le SVG est insere
   via innerHTML dans Safari iOS et plusieurs navigateurs (timing graph non
   attache). Utiliser les animations CSS sur transform/opacity garantit
   l'animation peu importe la methode d'insertion (statique ou dynamique).
   Les classes ci-dessous sont attachees aux <line> rayons de l'icone
   ic_ia (ICON_CATALOG + app/static/home-icons/icons/ic_ia/icon.svg).      */
@keyframes ia-ray-up { 0%,100% { transform: translateY(0);    opacity: 1; } 50% { transform: translateY(-2px);     opacity: 0.3; } }
@keyframes ia-ray-tr { 0%,100% { transform: translate(0,0);   opacity: 1; } 50% { transform: translate( 1px,-1px); opacity: 0.3; } }
@keyframes ia-ray-tl { 0%,100% { transform: translate(0,0);   opacity: 1; } 50% { transform: translate(-1px,-1px); opacity: 0.3; } }
@keyframes ia-ray-r  { 0%,100% { transform: translate(0,0);   opacity: 1; } 50% { transform: translate( 2px, 0);   opacity: 0.3; } }
@keyframes ia-ray-l  { 0%,100% { transform: translate(0,0);   opacity: 1; } 50% { transform: translate(-2px, 0);   opacity: 0.3; } }
.ia-ray { transform-box: fill-box; transform-origin: center; }
.ia-ray-up { animation: ia-ray-up 1.5s ease-in-out infinite; }
.ia-ray-tr { animation: ia-ray-tr 1.5s ease-in-out infinite; animation-delay: 0.2s; }
.ia-ray-tl { animation: ia-ray-tl 1.5s ease-in-out infinite; animation-delay: 0.4s; }
.ia-ray-r  { animation: ia-ray-r  1.5s ease-in-out infinite; animation-delay: 0.6s; }
.ia-ray-l  { animation: ia-ray-l  1.5s ease-in-out infinite; animation-delay: 0.8s; }

/* Widget drag & drop states */
.widget-selected {
  box-shadow: 0 0 0 3px #2563eb, 0 4px 16px rgba(37,99,235,0.3) !important;
}
.widget-drop-target {
  box-shadow: 0 0 0 3px #16a34a, 0 4px 16px rgba(22,163,74,0.3) !important;
  transform: scale(1.02);
}
/* Cellule cible exacte du drop (preview de l atterrissage) */
.widget-drop-cell {
  background: rgba(37,99,235,0.18);
  border: 2.5px dashed #2563eb;
  border-radius: 14px;
  pointer-events: none;
  z-index: 1;
  animation: drop-cell-pulse 0.9s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(37,99,235,0.35), inset 0 0 12px rgba(37,99,235,0.20);
  min-height: 72px;
  display: flex; align-items: center; justify-content: center;
}
@keyframes drop-cell-pulse {
  0%, 100% { background: rgba(37,99,235,0.16); border-color: #2563eb; }
  50%      { background: rgba(37,99,235,0.32); border-color: #1e40af; }
}
/* Cellule INTERDITE (sous nav / au-dela 7 lignes) — sens interdit */
.widget-drop-cell.widget-drop-forbidden {
  background: rgba(220,38,38,0.18);
  border-color: #dc2626;
  box-shadow: 0 0 22px rgba(220,38,38,0.45), inset 0 0 14px rgba(220,38,38,0.22);
  animation: drop-cell-forbidden 0.6s ease-in-out infinite;
}
@keyframes drop-cell-forbidden {
  0%, 100% { background: rgba(220,38,38,0.18); }
  50%      { background: rgba(220,38,38,0.36); }
}
.edit-mode .widget-wrap {
  cursor: grab;
}

/* ══ ANNUAIRE CSS ══ */
.ann-card {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: stretch; gap: 0;
  padding: 0.7rem; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 14px;
  margin-bottom: 0.5rem; cursor: pointer;
  transition: background 0.15s; -webkit-tap-highlight-color: transparent;
}
.ann-card:active { background: #f0f9ff; }
.ann-card-info { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.ann-card-name { font-size: 0.88rem; font-weight: 700; color: #1e293b; }
.ann-card-job { font-size: 0.72rem; color: #475569; margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-card-loc { font-size: 0.68rem; color: #94a3b8; margin-top: 0.2rem; }

/* ── Reseau Hub modernise (3 onglets Annuaire/Offres/Carte) ─────── */
.reseau-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: #fff; border-radius: 14px;
  margin: 0 0 0.7rem; box-shadow: 0 2px 8px rgba(22,58,90,0.08);
  position: sticky; top: 0; z-index: 5;
}
.reseau-tab {
  flex: 1; padding: 0.55rem 0.4rem;
  border: none; background: transparent;
  border-radius: 10px; cursor: pointer;
  font-size: 0.78rem; font-weight: 700; color: #64748b;
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  transition: background 0.18s, color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.reseau-tab.active {
  background: linear-gradient(135deg, #0ea5a4, #0ea5a4);
  color: #fff; box-shadow: 0 2px 6px rgba(22,58,90,0.25);
}
.reseau-tab.active .ra-ico { color: #fff !important; }
.reseau-empty {
  text-align: center; padding: 3rem 1rem; color: #64748b;
}
.reseau-empty-icon { margin-bottom: 0.6rem; opacity: 0.7; }
.reseau-empty-title { font-size: 0.95rem; font-weight: 800; color: #475569; margin-bottom: 0.4rem; }
.reseau-empty-msg { font-size: 0.78rem; line-height: 1.4; max-width: 280px; margin: 0 auto; }
/* Marker carte: logo adherent ou initiales */
.reseau-marker {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #2389ae, #0ea5a4);
  border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; color: #fff;
  overflow: hidden;
}
.reseau-marker img { width: 100%; height: 100%; object-fit: cover; }
.reseau-marker-me {
  background: #2563eb; border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.25), 0 4px 10px rgba(0,0,0,0.3);
  animation: reseau-me-pulse 1.8s ease-in-out infinite;
}
@keyframes reseau-me-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(37,99,235,0.25), 0 4px 10px rgba(0,0,0,0.3); }
  50%     { box-shadow: 0 0 0 10px rgba(37,99,235,0.10), 0 4px 10px rgba(0,0,0,0.3); }
}
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { margin: 12px 14px; font-family: system-ui, sans-serif; }
.ann-pub-zone {
  width: 90px; min-width: 90px; max-width: 90px;
  margin-left: 0.6rem; border-radius: 12px;
  border: 2px dashed #cbd5e1; background: #f8fafc;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; align-self: stretch;
  overflow: hidden; box-sizing: border-box;
}
.ann-pub-zone img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  max-width: 90px; max-height: 90px;
}
.ann-pub-zone img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.ann-pub-icon { font-size: 1.4rem; }
.ann-pub-label { font-size: 0.62rem; color: #94a3b8; text-align: center; margin-top: 0.25rem; font-weight: 600; line-height: 1.4; }

/* Modal detail membre */
.ann-modal-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg,#0ea5a4,#2389ae);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.5rem;
  margin: 0 auto 0.75rem; overflow: hidden; flex-shrink: 0;
}
.ann-modal-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ann-action-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; margin-top: 0.75rem;
}
.ann-action-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.3rem; padding: 0.65rem 0.3rem; border-radius: 12px;
  text-decoration: none; font-size: 0.68rem; font-weight: 700;
  transition: opacity 0.15s; -webkit-tap-highlight-color: transparent;
  /* Reset des styles natifs <button> pour qu'il rende comme un <a> */
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; line-height: 1.2;
}
.ann-action-btn:active { opacity: 0.7; }
.ann-action-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.ann-action-call .ann-action-icon { background:#dcfce7; }
.ann-action-call { color:#166534; }
.ann-action-sms .ann-action-icon { background:#dbeafe; }
.ann-action-sms { color:#1d4ed8; }
.ann-action-email .ann-action-icon { background:#fef3c7; }
.ann-action-email { color:#b45309; }
.ann-action-maps .ann-action-icon { background:#fce7f3; }
.ann-action-maps { color:#9d174d; }
.ann-action-web .ann-action-icon { background:#ede9fe; }
.ann-action-web { color:#5b21b6; }

/* ═════════════════════════════════════════════════════════════════
   Desktop : shell affiche en colonne centree (mode "preview mobile").
   N'affecte rien sous 720px : tout le rendu mobile reste identique.
   ═════════════════════════════════════════════════════════════════ */
@media (min-width: 720px) {
  body {
    background:
      radial-gradient(ellipse at top, #1e293b 0%, #0b1220 70%) fixed;
  }
  .ra-home-wrap {
    max-width: 440px;
    margin-inline: auto;
    box-shadow: 0 0 80px rgba(0,0,0,0.45);
  }
  /* Re-ancrer les elements en position:fixed au cadre central */
  .ra-bottom-nav,
  .util-modal,
  #ra-notif-prompt,
  .cv-overlay {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 440px;
  }
  .ra-nav-profil-btn {
    left: calc(50% - 220px);
    width: calc(220px - 42px);
  }
  .ra-nav-util-btn {
    right: calc(50% - 220px);
    width: calc(220px - 42px);
  }
}

/* ═════════════════════════════════════════════════════════════════
   MODE ORDINATEUR — pilote CANARI, 100 % ADDITIF.
   Tout est gaté par html[data-ngd] (posé par le cookie ngd=1, cf. <head>)
   ET par (min-width:1024px) and (orientation:landscape). Sans le cookie,
   ou sous ce seuil, ou en portrait : aucune de ces règles ne s'applique,
   le rendu mobile 440px est inchangé au pixel près.
   ⛔ Le seuil cité ci-dessus est déplacé par `scripts/mode_ordinateur_seuil.py`,
   qui tient les quatorze emplacements ensemble. Ne l'édite jamais à la main.
   Principe : PAS de zoom de l'appli mobile. Le tableau de bord garde ses
   4 colonnes (le moteur de glisser-déposer les suppose, positions stockées
   en col/row), on lui donne une largeur naturelle et l'espace gagné sert à
   de VRAIES surfaces desktop : rail de navigation + lanceur d'applications.
   ═════════════════════════════════════════════════════════════════ */
#ngd-rail, #ngd-side, #ngd-panel, #ngd-restore, #ngd-qr-overlay, #ngd-hello { display: none; }

/* Fenêtre QR « Sur mon téléphone » : affichée par JS (ngdOpenPhoneQr) quel que
   soit l'écran une fois le mode ordinateur actif. */
html[data-ngd] #ngd-qr-overlay.is-open {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px);
}
html[data-ngd] .ngd-qr-card {
  position: relative; background: #fff; border-radius: 22px;
  padding: 1.6rem 1.6rem 1.3rem; width: min(92vw, 340px); text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  font-family: Inter, system-ui, Arial, sans-serif;
}
html[data-ngd] .ngd-qr-close {
  position: absolute; top: 8px; right: 12px; border: 0; background: none;
  font-size: 1.6rem; line-height: 1; color: #94a3b8; cursor: pointer;
}
html[data-ngd] .ngd-qr-card h3 {
  margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 800; color: #0ea5a4;
}
html[data-ngd] .ngd-qr-card p {
  margin: 0.2rem 0; font-size: 0.85rem; font-weight: 600; color: #475569;
}
html[data-ngd] .ngd-qr-img {
  margin: 1rem auto; width: 220px; height: 220px; padding: 10px;
  background: #fff; border: 1px solid #eef2f7; border-radius: 16px;
}
html[data-ngd] .ngd-qr-img img { width: 100%; height: 100%; display: block; }
html[data-ngd] .ngd-qr-hint { font-size: 0.75rem !important; color: #94a3b8 !important; }

@media (min-width: 1024px) and (orientation: landscape) {
  html[data-ngd] {
    --ngd-rail: 268px;    /* rail de navigation gauche */
    --ngd-board: 556px;   /* tableau de bord 4 colonnes (tuiles ~124px) */
    --ngd-top: 56px;      /* hauteur du bandeau haut */
    --ngd-ecart: 14px;    /* entre le tableau de bord et la colonne de droite */
    --ngd-marge: 18px;    /* marge minimale au bord de la fenêtre */
    /* Repli des navigateurs sans min()/max() (Safari < 13.4) : géométrie du
       27/07, calée à gauche. Le plafond de largeur est alors tenu par le
       `max-width` de #ngd-side, pas par ce calcul. */
    --ngd-cote: 620px;
    --ngd-gouttiere: var(--ngd-marge);
  }
  /* ── Largeur et centrage de la composition (02/08) ────────────────
     Avant : la colonne de droite s'étirait jusqu'à 1000 px — 1,80 × le tableau
     de bord — et tout restait collé à gauche, laissant 736 px morts à 2560.
     Maintenant elle est plafonnée à 620 px (≈ 1,1 × le tableau, deux colonnes
     de cartes au plus) et le couple tableau + colonne est CENTRÉ dans l'espace
     à droite du rail. Les marges deviennent symétriques.
     ⛔ Le tableau de bord garde ses 556 px et ses 4 colonnes : on le DÉPLACE
     (rembourrage du cadre), on ne le redimensionne pas — `icon-engine.js` code
     en dur `innerW/4` et les positions col/row sont partagées avec le
     téléphone (cf. contrainte du 23/07). */
  @supports (width: min(1px, 2px)) {
    html[data-ngd] {
      --ngd-cote: min(620px, calc(100vw - var(--ngd-rail) - var(--ngd-board)
                                  - var(--ngd-ecart) - 2 * var(--ngd-marge)));
      --ngd-gouttiere: max(var(--ngd-marge),
                           calc((100vw - var(--ngd-rail) - var(--ngd-board)
                                 - var(--ngd-ecart) - var(--ngd-cote)) / 2));
    }
  }
  html[data-ngd] body { background: #e8eef6; }

  /* Le cadre « téléphone » cède la place au plein écran. Le rembourrage porte
     le centrage : le bandeau haut et le tableau de bord se déplacent ENSEMBLE
     (les décaler séparément désalignait la pastille « Prochain événement » du
     tableau qu'elle surplombe). Le fond, lui, reste pleine largeur. */
  html[data-ngd] .ra-home-wrap {
    max-width: none;
    margin: 0 0 0 var(--ngd-rail);
    padding-left: var(--ngd-gouttiere);
    padding-right: var(--ngd-gouttiere);
    box-sizing: border-box;
    box-shadow: none;
    height: 100dvh;
    min-height: 100dvh;
  }

  /* ── Bandeau haut ─────────────────────────────────────────────── */
  html[data-ngd] .ra-topbar {
    height: var(--ngd-top);
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    box-sizing: border-box;
  }
  /* Le bandeau « prochain événement » ne doit pas s'étirer sur tout l'écran */
  html[data-ngd] .ra-event-banner { flex: 0 0 auto; max-width: 360px; }

  /* ── Accueil personnalisé, au-dessus du tableau de bord ────────── */
  html[data-ngd] #ngd-hello {
    display: block;
    width: var(--ngd-board);
    box-sizing: border-box;
    padding: 0.1rem 1.1rem 0.55rem;
    line-height: 1.25;
  }
  html[data-ngd] #ngd-hello-title {
    display: block;
    font-size: 1.45rem; font-weight: 800; letter-spacing: -0.015em;
    color: #fff;
  }
  html[data-ngd] #ngd-hello-sub {
    display: block; margin-top: 0.1rem;
    font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.72);
  }
  /* Fond clair choisi dans /parametres : le texte blanc deviendrait illisible.
     Même bascule que le bandeau haut (`ra-topbar--light`, posée par
     ngentoAdaptHeaderContrast). */
  html[data-ngd] .ra-topbar--light ~ #ngd-hello #ngd-hello-title { color: #1e293b; }
  html[data-ngd] .ra-topbar--light ~ #ngd-hello #ngd-hello-sub { color: rgba(30, 41, 59, 0.7); }

  /* ── Tableau de bord : 4 colonnes, largeur naturelle, à gauche ── */
  html[data-ngd] #widget-grid {
    width: var(--ngd-board);
    /* Plafond de hauteur : sur un grand écran, 7 rangées de 1fr étireraient les
       tuiles en hauteur (effet « zoom »). On les garde proches du carré.
       ⛔ `--ngd-hello` (hauteur de la ligne d'accueil) est retranché ici :
       sans cela le tableau déborde sous la fenêtre de la hauteur ajoutée. */
    height: min(calc(var(--app-vh, 100dvh) - var(--ngd-top) - var(--ngd-hello, 0px) - 20px), 880px);
    padding: 0.35rem 0.9rem 0.9rem 1.1rem;
  }
  html[data-ngd] { --ngd-hello: 62px; }

  /* La navigation basse (logo central, profil, menu) migre dans le rail */
  html[data-ngd] .ra-bottom-nav,
  html[data-ngd] .ra-nav-profil-btn,
  html[data-ngd] .ra-nav-util-btn { display: none !important; }

  /* ── Rail de navigation ───────────────────────────────────────── */
  html[data-ngd] #ngd-rail {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--ngd-rail);
    box-sizing: border-box;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    padding: 0.9rem 0.7rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    z-index: 150;
  }
  html[data-ngd] .ngd-brand {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; padding: 0.35rem 0.45rem 0.75rem;
    border: 0; background: none; cursor: pointer; text-align: left;
    font-family: inherit;
  }
  html[data-ngd] .ngd-brand img {
    width: 40px; height: 40px; border-radius: 12px;
    object-fit: contain; background: #f8fafc; padding: 3px; flex-shrink: 0;
  }
  html[data-ngd] .ngd-brand span {
    font-size: 0.94rem; font-weight: 800; color: #0ea5a4;
    line-height: 1.15; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  /* Depuis le 02/08 le rail porte les entrées de l'ancien « Menu rapide » : il
     peut donc dépasser sur un écran bas (1024x600 en paysage). La navigation
     défile, le pied (Paramètres / téléphone) reste collé en bas. */
  html[data-ngd] .ngd-nav {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 0; overflow-y: auto;
    scrollbar-width: thin;
  }
  html[data-ngd] .ngd-navitem {
    display: flex; align-items: center; gap: 0.65rem;
    width: 100%; padding: 0.58rem 0.6rem;
    border: 0; border-radius: 12px; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.86rem; font-weight: 700;
    color: #334155; text-align: left; text-decoration: none;
    transition: background 0.12s, color 0.12s;
  }
  html[data-ngd] .ngd-navitem:hover { background: #f1f5f9; color: #0ea5a4; }
  html[data-ngd] .ngd-navitem svg { width: 19px; height: 19px; flex-shrink: 0; }
  /* Page courante : un rail sans repère de position ne dit pas où l'on est.
     La couleur vient de la MARQUE du tenant (`--ngd-accent`, posée par JS
     depuis NGENTO_SHELL_CONFIG), avec un repli neutre pour les cas sans marque
     et pour les navigateurs sans `color-mix`. */
  html[data-ngd] .ngd-navitem.is-active {
    background: #eef4f9;
    background: color-mix(in srgb, var(--ngd-accent, #0ea5a4) 9%, #fff);
    color: #0ea5a4;
    color: var(--ngd-accent, #0ea5a4);
  }
  html[data-ngd] .ngd-navitem.is-active::before {
    content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--ngd-accent, #0ea5a4);
  }
  /* Entrées du rail soumises au registre d'icônes (data-icon-id) : même
     traitement « désactivé » que les tuiles du menu rapide, badge compris. */
  html[data-ngd] .ngd-navitem.util-item-disabled {
    opacity: 0.45; filter: grayscale(0.5); cursor: default;
  }
  html[data-ngd] .ngd-navitem.util-item-disabled:hover { background: none; }
  html[data-ngd] .ngd-navitem { position: relative; }
  html[data-ngd] .ngd-navitem .util-item-badge { top: 50%; transform: translateY(-50%); right: 8px; }
  html[data-ngd] .ngd-rail-sep {
    height: 1px; background: #eef2f7; margin: 0.6rem 0.3rem;
  }
  html[data-ngd] .ngd-rail-foot { margin-top: auto; }
  html[data-ngd] .ngd-rail-hint {
    font-size: 0.68rem; font-weight: 600; color: #94a3b8;
    padding: 0.35rem 0.6rem 0;
  }

  /* ── Colonne de droite : « Ce qui m'attend » + applications ───── */
  /* La position fixe est portée par le CONTENEUR ; les deux panneaux ne sont
     plus que des cartes empilées dedans. Largeur et centrage : cf. le bloc
     « Largeur et centrage de la composition » plus haut. */
  html[data-ngd] #ngd-side {
    display: flex;
    flex-direction: column;
    gap: var(--ngd-ecart);
    position: fixed;
    top: calc(var(--ngd-top) + 6px);
    left: calc(var(--ngd-rail) + var(--ngd-gouttiere) + var(--ngd-board) + var(--ngd-ecart));
    right: var(--ngd-gouttiere);
    bottom: var(--ngd-marge);
    /* Filet : sur un navigateur sans min()/max(), la gouttière vaut 18 px et
       `right` ne plafonne plus rien — sans ceci la colonne s'étirerait sur
       toute la largeur restante d'un écran 2560. */
    max-width: 620px;
    box-sizing: border-box;
    z-index: 60;
  }
  html[data-ngd] #ngd-side > section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    padding: 0.9rem 1rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  /* « Ce qui m'attend » prend sa hauteur NATURELLE (une carte de 800 px pour
     trois lignes est le défaut qu'on corrige), plafonnée à 58 % et défilante
     au-delà. « Mes applications » prend TOUT le reste jusqu'en bas : c'est une
     liste qui grandit avec le nombre d'applications, la rogner par un plafond
     coupait les cartes (constaté le 02/08). Fil masqué → il occupe la colonne
     entière, sans règle supplémentaire. */
  html[data-ngd] #ngd-side { justify-content: flex-start; }
  html[data-ngd] #ngd-feed  { flex: 0 0 auto; max-height: 58%; }
  html[data-ngd] #ngd-panel { flex: 1 1 auto; min-height: 0; }
  html[data-ngd] #ngd-feed[hidden] { display: none; }
  html[data-ngd] .ngd-feed-body {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    padding-right: 2px;
  }
  /* Une ligne = une chose datée. La date à gauche, en colonne fixe, pour que
     l'œil descende sur une seule verticale. */
  html[data-ngd] .ngd-feed-row {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.5rem 0.6rem;
    border: 0; border-radius: 12px; background: none;
    width: 100%; text-align: left; font-family: inherit; cursor: pointer;
    text-decoration: none; color: inherit;
    transition: background 0.12s;
  }
  html[data-ngd] .ngd-feed-row:hover { background: #f1f5f9; }
  html[data-ngd] .ngd-feed-date {
    flex: 0 0 52px; text-align: center; line-height: 1.05;
    display: flex; flex-direction: column; gap: 1px;
  }
  /* #94a3b8 sur blanc ne fait que 2,8:1 — sous le minimum lisible de 4,5:1
     pour un texte de cette taille. #64748b est à 4,8:1. */
  html[data-ngd] .ngd-feed-month {
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; color: #64748b;
  }
  html[data-ngd] .ngd-feed-day { font-size: 1.05rem; font-weight: 800; color: #0ea5a4; }
  html[data-ngd] .ngd-feed-main { min-width: 0; flex: 1; }
  html[data-ngd] .ngd-feed-title {
    display: block; font-size: 0.86rem; font-weight: 700; color: #1e293b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-ngd] .ngd-feed-meta {
    display: block; font-size: 0.72rem; font-weight: 600; color: #64748b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-ngd] .ngd-feed-tag {
    flex: 0 0 auto; font-size: 0.66rem; font-weight: 800;
    padding: 0.12rem 0.45rem; border-radius: 6px;
    background: #f1f5f9; color: #64748b;
  }
  html[data-ngd] .ngd-feed-tag.is-urgent { background: #fee2e2; color: #b91c1c; }
  html[data-ngd] .ngd-feed-tag.is-soon   { background: #fef3c7; color: #b45309; }
  /* Les alertes sans date (messages non lus, adhésion) : bandes en bas du fil,
     visuellement distinctes des lignes datées. */
  html[data-ngd] .ngd-feed-strips {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid #eef2f7;
  }
  html[data-ngd] .ngd-feed-strip {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.7rem; border: 0; border-radius: 12px;
    font-family: inherit; font-size: 0.8rem; font-weight: 700;
    text-align: left; width: 100%; cursor: pointer; text-decoration: none;
    background: #f8fafc; color: #334155;
  }
  html[data-ngd] .ngd-feed-strip:hover { background: #f1f5f9; }
  html[data-ngd] .ngd-feed-strip svg { width: 17px; height: 17px; flex-shrink: 0; }
  html[data-ngd] .ngd-feed-strip.is-warn { background: #fff7ed; color: #b45309; }
  html[data-ngd] .ngd-panel-head {
    display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.75rem;
  }
  html[data-ngd] .ngd-panel-title {
    font-size: 0.95rem; font-weight: 800; color: #0ea5a4; white-space: nowrap;
  }
  /* Une application = une vignette « mini navigateur » : barre d'adresse avec
     son vrai domaine, écran aux couleurs de SA marque (donc chaque appli est
     reconnaissable d'un coup d'œil), pied avec son nom.
     Pourquoi un rendu et pas une iframe live : la plateforme refuse d'être
     encadrée (X-Frame-Options: DENY, anti-clickjacking) et une iframe d'un
     AUTRE domaine est un contexte tiers où le navigateur bloque le cookie de
     session — on n'y verrait qu'un écran de connexion. */
  html[data-ngd] .ngd-appcards {
    flex: 1; min-height: 0; overflow-y: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.7rem; align-content: start; padding: 2px 2px 0.4rem;
  }
  /* Compactage du 02/08 : le panneau des applications partage désormais la
     colonne avec « Ce qui m'attend ». Mêmes cartes, mêmes fonctions — juste
     réduites (logo 64→44, titre 1,14→0,95 rem, moitié moins de rembourrage). */
  /* ⛔⛔ `overflow:hidden` (nécessaire aux coins arrondis du mini-navigateur)
     met la taille minimale automatique d'un élément de grille à ZÉRO : la
     rangée peut alors être plus courte que la carte, qui se fait ROGNER — le
     nom de l'application disparaissait sous le bord (mesuré : rangée 87,9 px
     pour un contenu de 94,2 px). On rend donc le minimum explicite. La valeur
     en pixels d'abord, pour les navigateurs sans `max-content` (Safari < 12,
     Edge Legacy — justement les vieux postes du mode ordinateur). */
  html[data-ngd] #ngd-panel .ngd-mb { min-height: 96px; min-height: max-content; }
  html[data-ngd] #ngd-panel .ngd-mb-screen { gap: 0.7rem; padding: 0.6rem 0.75rem; }
  html[data-ngd] #ngd-panel .ngd-mb-logo { width: 44px; height: 44px; padding: 6px; border-radius: 12px; }
  html[data-ngd] #ngd-panel .ngd-mb-logo-ini b { font-size: 1.1rem; }
  html[data-ngd] #ngd-panel .ngd-mb-txt b { font-size: 0.95rem; }
  html[data-ngd] #ngd-panel .ngd-mb-bar { padding: 0.3rem 0.5rem; }
  html[data-ngd] #ngd-panel .ngd-mb-url { font-size: 0.65rem; }
  html[data-ngd] #ngd-panel .ngd-panel-head { margin-bottom: 0.5rem; }
  /* Les actions (créer, relier) restent sur toute la largeur, sous les applis. */
  html[data-ngd] .ngd-mb-new,
  html[data-ngd] .ngd-linkform { grid-column: 1 / -1; }
  html[data-ngd] .ngd-mb {
    display: block; width: 100%; padding: 0; box-sizing: border-box;
    border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
    background: #fff; cursor: pointer; font-family: inherit; text-align: left;
    text-decoration: none;
    box-shadow: 0 5px 0 var(--ac, #2389ae), 0 10px 22px rgba(15, 23, 42, 0.10);
    transition: transform 0.12s, box-shadow 0.12s;
  }
  html[data-ngd] .ngd-mb:hover { transform: translateY(-2px); }
  html[data-ngd] .ngd-mb:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--ac, #2389ae), 0 4px 10px rgba(15, 23, 42, 0.10);
  }
  html[data-ngd] .ngd-mb-bar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.42rem 0.6rem; background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
  }
  html[data-ngd] .ngd-mb-dots { display: flex; gap: 4px; flex-shrink: 0; }
  html[data-ngd] .ngd-mb-dots i {
    display: block; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1;
  }
  html[data-ngd] .ngd-mb-url {
    flex: 1; min-width: 0; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 99px; padding: 0.14rem 0.6rem;
    font-size: 0.7rem; font-weight: 600; color: #64748b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* L'écran du mini navigateur = MINIATURE de l'appli : son en-tête (logo +
     nom) puis ses vraies tuiles (blocs actifs), sur son fond de marque. On
     reconnaît l'appli d'un coup d'œil, sans agrandir quoi que ce soit. */
  /* « Page » du mini navigateur : fond CLAIR (comme une vraie page), la couleur
     de la marque ne sert que d'accent (pastille du logo + relief en base de
     carte). C'est ce qui rend le logo et le nom lisibles quelle que soit la
     couleur du tenant : un nom blanc sur fond de marque devient illisible dès
     que la marque est claire. */
  /* Corps de carte en ligne (façon liste d'applications) : pastille du logo à
     gauche, nom + sous-titre à droite. Un mince trait à la couleur de la marque
     rappelle l'identité sans écraser le nom. Robuste : pas de superposition. */
  html[data-ngd] .ngd-mb-screen {
    display: flex; align-items: center; gap: 0.95rem;
    background: #fff; padding: 1rem 1.1rem;
    border-left: 4px solid var(--ac, #2389ae);
  }
  html[data-ngd] .ngd-mb-logo {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; flex-shrink: 0;
    padding: 9px; box-sizing: border-box;
    background: #fff; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--ac, #2389ae) 18%, #eef2f7);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.07);
  }
  html[data-ngd] .ngd-mb-logo img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain;
  }
  /* Sans logo : pastille pleine à la couleur de la marque, initiales. */
  html[data-ngd] .ngd-mb-logo-ini {
    padding: 0; border: 0;
    background: color-mix(in srgb, var(--ac, #2389ae) 14%, #fff);
  }
  html[data-ngd] .ngd-mb-logo-ini b {
    font-size: 1.5rem; font-weight: 800; letter-spacing: 0.01em;
    color: var(--ac, #2389ae);
  }
  html[data-ngd] .ngd-mb-txt { min-width: 0; flex: 1; text-align: left; }
  html[data-ngd] .ngd-mb-txt b {
    display: block; font-size: 1.14rem; font-weight: 800; color: #0ea5a4;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-ngd] .ngd-mb-close {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 7px; flex-shrink: 0;
    color: #94a3b8; cursor: pointer;
  }
  html[data-ngd] .ngd-mb-close:hover { background: #e2e8f0; color: #b42318; }
  html[data-ngd] .ngd-mb-close svg { width: 12px; height: 12px; }
  html[data-ngd] .ngd-unhide {
    grid-column: 1 / -1; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.78rem; font-weight: 700; color: #64748b;
    text-align: left; padding: 0.2rem 0.3rem; text-decoration: underline;
  }
  html[data-ngd] .ngd-unhide:hover { color: #0ea5a4; }
  html[data-ngd] .ngd-mb-foot {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem;
  }
  html[data-ngd] .ngd-mb-name {
    flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 800; color: #0ea5a4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-ngd] .ngd-mb-badge {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em;
    color: #166534; background: #dcfce7; border: 1px solid #bbf7d0;
    border-radius: 99px; padding: 0.18rem 0.55rem; flex-shrink: 0;
  }
  html[data-ngd] .ngd-mb-badge-go {
    color: #1e40af; background: #dbeafe; border-color: #bfdbfe;
  }
  /* Carte de création + rattachement d'adresse : gabarit « à remplir » */
  html[data-ngd] .ngd-mb-new {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.9rem 1rem; border-radius: 16px;
    background: rgba(255, 255, 255, 0.55); border: 2px dashed #cbd5e1;
    box-shadow: none; cursor: pointer; font-family: inherit; text-align: left;
    width: 100%; box-sizing: border-box;
  }
  html[data-ngd] .ngd-mb-new:hover { background: #fff; border-color: #94a3b8; }
  html[data-ngd] .ngd-mb-new-ico {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, #0d9488 13%, #fff);
  }
  html[data-ngd] .ngd-mb-new-ico svg { width: 22px; height: 22px; }
  html[data-ngd] .ngd-mb-new-txt { display: flex; flex-direction: column; min-width: 0; }
  html[data-ngd] .ngd-mb-new-txt b { font-size: 0.9rem; font-weight: 800; color: #334155; }
  html[data-ngd] .ngd-mb-new-txt small {
    font-size: 0.74rem; font-weight: 600; color: #64748b; margin-top: 1px;
  }
  html[data-ngd] .ngd-linkform {
    display: none; flex-direction: column; gap: 0.5rem;
    padding: 0.85rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff;
  }
  html[data-ngd] .ngd-linkform.is-open { display: flex; }
  html[data-ngd] .ngd-linkform input {
    border: 1px solid #e2e8f0; border-radius: 11px; padding: 0.5rem 0.7rem;
    font-family: inherit; font-size: 0.85rem; color: #1e293b;
  }
  html[data-ngd] .ngd-linkform input:focus {
    outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.35);
  }
  html[data-ngd] .ngd-linkform button {
    border: 0; border-radius: 11px; padding: 0.55rem 0.8rem; cursor: pointer;
    font-family: inherit; font-size: 0.85rem; font-weight: 800; color: #fff;
    background: #0ea5a4;
  }
  html[data-ngd] .ngd-linkform p {
    margin: 0; font-size: 0.76rem; font-weight: 600; color: #64748b;
  }
  html[data-ngd] .ngd-createform .cf-row {
    display: flex; gap: 0.5rem;
  }
  html[data-ngd] .ngd-createform .cf-row > input { flex: 1; min-width: 0; }
  html[data-ngd] .ngd-createform .cf-colorrow {
    align-items: center; gap: 0.7rem;
  }
  html[data-ngd] .ngd-createform .cf-colorrow label {
    font-size: 0.85rem; font-weight: 700; color: #334155;
  }
  html[data-ngd] .ngd-createform input[type="color"] {
    width: 48px; height: 34px; padding: 2px; border: 1px solid #e2e8f0;
    border-radius: 10px; background: #fff; cursor: pointer; flex: 0 0 auto;
  }

  /* ── Modales : plein cadre desktop au lieu de la feuille 440px ── */
  html[data-ngd] .cv-overlay {
    left: var(--ngd-rail); right: 0;
    width: auto; max-width: none; transform: none;
    align-items: center;
  }
  html[data-ngd] .cv-modal {
    max-width: 620px; margin: 0 auto;
    border-radius: 22px;
    padding: 1.25rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  }
  html[data-ngd] .util-modal {
    position: static;
    left: auto; right: auto; bottom: auto; transform: none;
    width: 100%; max-width: 560px; margin: 0 auto;
    border-radius: 22px; padding: 1.25rem;
  }
  html[data-ngd] .util-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Écran large mais pas assez pour trois colonnes : on garde rail + tableau de
   bord, les applications restent accessibles par le sélecteur du rail. */
@media (min-width: 1024px) and (max-width: 1199px) and (orientation: landscape) {
  /* ⛔ Masquer #ngd-side, pas seulement #ngd-panel : depuis le 02/08 c'est le
     CONTENEUR qui porte la position fixe. Ne masquer que le panneau laisserait
     « Ce qui m'attend » posé sur le tableau de bord. */
  html[data-ngd] #ngd-side { display: none; }
  /* La colonne étant absente, elle ne doit plus peser dans le centrage : sinon
     le tableau de bord reste calé à gauche avec tout le vide à sa droite. */
  html[data-ngd] { --ngd-cote: 0px; --ngd-ecart: 0px; }
}

/* Pastille de retour à la version ordinateur, pour qui a choisi la version
   téléphone sur un grand écran (cookie ngd=0). Invisible pour tout autre
   visiteur : sans ce cookie, l'attribut n'est jamais posé. */
@media (min-width: 1024px) and (orientation: landscape) {
  html[data-ngd-off] #ngd-restore {
    display: inline-flex; align-items: center; gap: 0.45rem;
    position: fixed; left: 16px; bottom: 16px; z-index: 9000;
    padding: 0.5rem 0.85rem;
    border: 1px solid #e2e8f0; border-radius: 99px; background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    font-family: Inter, system-ui, Arial, sans-serif;
    font-size: 0.8rem; font-weight: 700; color: #334155; cursor: pointer;
  }
  html[data-ngd-off] #ngd-restore:hover { background: #f8fafc; }
  html[data-ngd-off] #ngd-restore svg { width: 17px; height: 17px; }
}