/* ============================================================================
   SIGN'ALLO — INTERFACE CLIENT · FEUILLE DE STYLE SMARTPHONE
   ----------------------------------------------------------------------------
   Chargée UNIQUEMENT sur téléphone via :
     <link rel="stylesheet" href="/css/client-mobile.css"
           media="(max-width:600px),(max-height:480px) and (orientation:landscape)">
   → PC / tablette conservent le CSS d'origine (inline + style.css + liquidglass.css).

   Objectif : ergonomie « gros doigts » pour public senior.
     · cibles tactiles ≥ 44 px (recommandation WCAG 2.5.5 / Apple HIG)
     · police ≥ 16 px sur les champs (empêche le zoom auto iOS)
     · mise en page mono-colonne, lisible, sans débordement horizontal
     · barre supérieure entièrement atteignable (scroll horizontal fluide)
     · classes « .cl-nuki-* » prêtes pour le futur widget serrure Nuki côté client

   ⚠ Chargée APRÈS le <style> inline → remporte la cascade à spécificité égale.
      Les styles INLINE sur éléments (style="...") exigent !important pour être
      surchargés : c'est le cas des pastilles de la topbar (min-height:32px inline).
   ============================================================================ */

/* ───────────────────────────────────────────────────────────────────────────
   0. VARIABLES & RÉGLAGES GLOBAUX TÉLÉPHONE
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Barre supérieure plus haute pour des pastilles tactiles confortables */
  --topbar-h: 58px;
  /* Hauteur cible minimale d'un élément cliquable */
  --tap: 48px;
  --tap-sm: 44px;
}

/* Pas de sélection de texte intempestive ni surbrillance bleue au tap */
* { -webkit-tap-highlight-color: transparent; }

/* On garde le défilement vertical fluide partout où c'est utile */
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* ───────────────────────────────────────────────────────────────────────────
   1. BARRE SUPÉRIEURE — défilement horizontal, rien n'est coupé
   ─────────────────────────────────────────────────────────────────────────── */
.c-topbar {
  height: var(--topbar-h);
  padding: 0 .55rem;
  gap: .4rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
  /* La barre déborde de pastilles → on autorise le glissement latéral */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* Firefox : pas de barre */
}
.c-topbar::-webkit-scrollbar { display: none; }   /* Chrome / Safari */

/* Le logo et la déconnexion ne doivent jamais rétrécir */
.c-topbar-logo,
.c-topbar-logout,
#c-topbar-logout { flex-shrink: 0; }

/* Pastilles : cibles tactiles plus grandes (surcharge des style="" inline) */
.c-topbar .c-badge-pill,
.c-topbar .c-topbar-logout,
.c-topbar #c-topbar-logout {
  min-height: var(--tap-sm) !important;
  padding: .5rem .85rem !important;
  font-size: .9rem !important;
  flex-shrink: 0;
}
.c-topbar .c-badge-pill span,
.c-topbar #c-topbar-logout span { font-size: .85rem !important; }

/* Boutons taille de police A / A+ / A++ : carrés tactiles lisibles */
.c-topbar .cl-font-btn {
  min-height: var(--tap-sm) !important;
  min-width: var(--tap-sm) !important;
  padding: .45rem .6rem !important;
  font-size: .95rem !important;
}

/* Lecteur musique : empêche qu'il écrase tout le reste de la barre */
#cl-music-player { flex-shrink: 0; }
#cl-music-player .cl-mp-ctrl {
  min-width: 38px !important;
  min-height: 38px !important;
}
#cl-music-player .cl-mp-title { max-width: 90px; }

/* ───────────────────────────────────────────────────────────────────────────
   2. STRUCTURE PRINCIPALE — une seule colonne, plein écran
   ─────────────────────────────────────────────────────────────────────────── */
#cl-home-layout {
  top: calc(var(--topbar-h) + var(--admin-h));
}

/* Zone de cartes : marge basse confortable + zone sûre iPhone (encoche) */
#cl-cards-wrap {
  padding: .75rem .8rem calc(1rem + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: 80px;
}

/* La section widgets reste masquée (remplacée par floating-widgets.js) */
#cl-widgets-wrap,
.cl-home-sep { display: none; }

/* ───────────────────────────────────────────────────────────────────────────
   3. GRILLE D'ACCUEIL « Mes services » — 2 colonnes, grosses cartes
   ─────────────────────────────────────────────────────────────────────────── */
.cl-home-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
}
.cl-home-card {
  min-height: 132px;
  padding: 1.25rem .75rem 1.1rem;
  border-radius: 1.25rem;
  border-width: 1.5px;
  gap: .5rem;
}
.cl-home-card .cl-card-icon  { font-size: 2.6rem; }
.cl-home-card .cl-card-label { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.cl-home-card .cl-card-sub   { font-size: .78rem; }

/* L'épingle reste visible (pas de hover sur tactile) */
.cl-card-pin { opacity: .55; padding: .4rem !important; font-size: 1rem; }
.cl-card-pin.active { opacity: 1; }

/* Sous-cartes : 2 colonnes, plus aérées */
.cl-sub-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.cl-sub-card { min-height: 104px; padding: 1.15rem .75rem; }
.cl-sub-card .cl-sub-icon  { font-size: 2rem; }
.cl-sub-card .cl-sub-label { font-size: .92rem; }

/* Très petits écrans (≤ 340px) : on revient à 1 colonne pour rester lisible */
@media (max-width: 340px) {
  .cl-home-grid, .cl-sub-grid { grid-template-columns: 1fr; }
  .cl-home-card { min-height: 96px; flex-direction: row; justify-content: flex-start; text-align: left; gap: .9rem; }
  .cl-home-card .cl-card-icon { font-size: 2.1rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4. BOUTONS & CHAMPS — cibles tactiles généreuses
   ─────────────────────────────────────────────────────────────────────────── */
.c-btn-primary,
.btn-primary,
.btn-secondary,
.c-btn,
button.c-btn-primary {
  min-height: var(--tap);
  padding: .8rem 1.25rem;
  font-size: 1rem;
  border-radius: .9rem;
}

/* Boutons pleine largeur dans les en-têtes de page sur téléphone */
.page-header { flex-wrap: wrap; gap: .6rem; }
.page-header .btn-primary,
.page-header .btn-secondary,
.page-header .c-btn-primary { width: 100%; }

/* Champs de saisie : 16px minimum pour bloquer le zoom auto iOS */
input, select, textarea,
.c-input, .form-input, .form-select {
  font-size: 16px !important;
  min-height: var(--tap);
  padding: .7rem .85rem;
  border-radius: .75rem;
}
textarea { min-height: 96px; }

/* Cases à cocher / radios plus grandes */
input[type="checkbox"], input[type="radio"] {
  width: 22px; height: 22px; min-height: 0;
}
/* Curseur de volume : piste plus épaisse, pouce plus large */
input[type="range"] { height: 28px; }

/* ───────────────────────────────────────────────────────────────────────────
   5. CARTES, PANNEAUX, TITRES, ONGLETS
   ─────────────────────────────────────────────────────────────────────────── */
.c-card {
  padding: 1.05rem 1rem;
  border-radius: 1.1rem;
  margin-bottom: .85rem;
}
.c-card-title { font-size: 1.05rem; }

.page-title { font-size: 1.25rem; line-height: 1.25; }
.page-header { margin-bottom: 1.1rem; }

/* Tableaux : défilement horizontal propre plutôt que débordement cassé */
.table-container, .c-card { overflow-x: auto; }
.detail-grid { grid-template-columns: 1fr !important; }

/* Onglets : barre défilante, onglets plus hauts et lisibles */
.c-tabs, .c-tabs-row {
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.c-tabs::-webkit-scrollbar { display: none; }
.c-tab, .tab {
  padding: .85rem 1.05rem;
  font-size: .95rem;
  min-height: var(--tap-sm);
}

/* ───────────────────────────────────────────────────────────────────────────
   6. MODALES & VISIONNEUSES
   ----------------------------------------------------------------------------
   Les modales du client sont construites en inline (style="max-width:480px")
   et déjà ramenées à ~pleine largeur par une règle existante (@media 500px).
   On élargit le filet de sécurité et on agrandit le contenu interne.
   ─────────────────────────────────────────────────────────────────────────── */
.modal-content,
[style*="max-width:480px"], [style*="max-width: 480px"],
[style*="max-width:520px"], [style*="max-width: 520px"],
[style*="max-width:560px"], [style*="max-width: 560px"],
[style*="max-width:600px"], [style*="max-width: 600px"] {
  max-width: calc(100vw - 1.5rem) !important;
  margin: .75rem !important;
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Boutons des visionneuses (documents, médias famille) : plus grands */
#cl-doc-viewer .cl-doc-btn,
#cl-fam-media-overlay .cl-fam-media-min {
  min-height: var(--tap-sm);
  padding: .6rem 1rem;
  font-size: .95rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   7. WIDGETS FLOTTANTS — contenus dans l'écran, jamais hors cadre
   ─────────────────────────────────────────────────────────────────────────── */
.cl-float-widget {
  max-width: min(46vw, 200px);
  min-width: 132px;
}
.cl-fw-header { padding: .6rem .7rem .42rem; }
.cl-fw-close { min-width: 32px; min-height: 32px; font-size: .85rem; }

/* ───────────────────────────────────────────────────────────────────────────
   8. ÉCRAN D'ACCUEIL (SPLASH) — allègement & lisibilité sur petit écran
   ─────────────────────────────────────────────────────────────────────────── */
/* Bouton « Entrer » : grande cible tactile */
#cl-splash-enter {
  min-height: var(--tap);
  padding: .85rem 2.4rem;
}
/* Orbes : flou réduit → animation plus fluide sur GPU mobile modeste */
.cl-sp-orb-1 { filter: blur(28px); }
.cl-sp-orb-2 { filter: blur(34px); }
.cl-sp-orb-3 { filter: blur(30px); }
.cl-sp-orb-4 { filter: blur(28px); }
.cl-sp-orb-5 { filter: blur(24px); }

/* Respect du réglage système « animations réduites » */
@media (prefers-reduced-motion: reduce) {
  .cl-sp-orb,
  .cl-sp-card { animation: none !important; }
  /* Coupe toutes les animations/transitions si l'utilisateur a demandé "réduire
     les animations" (réglage système / accessibilité). */
  .cl-mobile *, .cl-mobile *::before, .cl-mobile *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   9. NUKI — CLASSES PRÊTES POUR LE FUTUR WIDGET SERRURE CÔTÉ CLIENT
   ----------------------------------------------------------------------------
   Pensé « plein pouce » : un grand bouton circulaire ouvrir/verrouiller,
   un état lisible, l'indicateur de batterie. À réutiliser tel quel quand on
   branchera /api/nuki/client/* sur l'interface client.
   ─────────────────────────────────────────────────────────────────────────── */

/* Carte serrure — glassmorphism aligné sur le design client */
.cl-nuki-card {
  background: var(--bg-surface2);
  border: 1.5px solid var(--border);
  border-radius: 1.4rem;
  padding: 1.25rem 1.1rem 1.4rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

/* En-tête : nom de la serrure + emplacement */
.cl-nuki-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.cl-nuki-place {
  font-size: .85rem;
  color: var(--text-muted);
}

/* Pastille d'état (verrouillée / déverrouillée / occupée) */
.cl-nuki-status {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .9rem;
  border-radius: 9999px;
  font-size: .9rem; font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.cl-nuki-status::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: currentColor;
}
.cl-nuki-status.is-locked   { color: #6ee7b7; background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.32); }
.cl-nuki-status.is-unlocked { color: #fca5a5; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.3); }
.cl-nuki-status.is-busy     { color: #fcd34d; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.32); }

/* GRAND bouton d'action circulaire — cœur du widget mobile */
.cl-nuki-action {
  --nuki-size: clamp(150px, 52vw, 200px);
  width: var(--nuki-size);
  height: var(--nuki-size);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .35rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 10px 34px rgba(var(--primary-rgb), .45),
              inset 0 2px 0 rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cl-nuki-action:active { transform: scale(.95); }
.cl-nuki-action .cl-nuki-action-icon  { font-size: clamp(3rem, 13vw, 4.2rem); line-height: 1; }
.cl-nuki-action .cl-nuki-action-label { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }

/* Variantes d'action */
.cl-nuki-action.act-unlock { background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 10px 34px rgba(16,185,129,.45), inset 0 2px 0 rgba(255,255,255,.2); }
.cl-nuki-action.act-lock   { background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 10px 34px rgba(239,68,68,.4), inset 0 2px 0 rgba(255,255,255,.2); }

/* État occupé / chargement : non cliquable, animation douce */
.cl-nuki-action.is-busy { filter: saturate(.7) brightness(.9); pointer-events: none; }
.cl-nuki-action.is-busy .cl-nuki-action-icon { animation: cl-nuki-spin 1s linear infinite; }
@keyframes cl-nuki-spin { to { transform: rotate(360deg); } }

/* Rangée d'actions secondaires (ouvrir le portail, etc.) */
.cl-nuki-row {
  display: flex; gap: .7rem; width: 100%;
}
.cl-nuki-btn {
  flex: 1;
  min-height: var(--tap);
  border-radius: .9rem;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .15s, transform .1s;
}
.cl-nuki-btn:active { transform: scale(.96); }

/* Indicateur de batterie */
.cl-nuki-battery {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600; color: var(--text-muted);
}
.cl-nuki-battery.is-low { color: #fca5a5; }
.cl-nuki-battery.is-critical { color: #ef4444; font-weight: 800; }

/* Mini-journal d'accès sous la serrure (qui a ouvert / quand) */
.cl-nuki-log { width: 100%; margin-top: .25rem; }
.cl-nuki-log-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .25rem;
  border-bottom: 1px solid var(--border2);
  font-size: .9rem; color: var(--text-body); text-align: left;
}
.cl-nuki-log-item:last-child { border-bottom: none; }
.cl-nuki-log-item .cl-nuki-log-time { margin-left: auto; font-size: .78rem; color: var(--text-faint); white-space: nowrap; }

/* ───────────────────────────────────────────────────────────────────────────
   10. CONFORT GÉNÉRAL — anti-débordement & corrections fines
   ─────────────────────────────────────────────────────────────────────────── */
/* Aucun élément ne doit provoquer de défilement horizontal global */
img, video, iframe, canvas, table, pre { max-width: 100%; }

/* Liens et boutons : zone tactile minimale même si visuellement petits */
a[role="button"], .c-link-btn { min-height: var(--tap-sm); display: inline-flex; align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   11. MODE MOBILE DÉDIÉ « hors du domicile » (.cl-mobile, posé par JS)
   ----------------------------------------------------------------------------
   Splash/carousel contournés ; accueil = tableau de bord + barre de nav basse.
   Ces règles ne s'activent que quand client-mobile.js a posé .cl-mobile sur
   <html> (donc jamais sur un PC qui réduit juste sa fenêtre).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Barre supérieure épurée : on ne garde que logo + taille texte + déco ── */
.cl-mobile #cl-tb-home,
.cl-mobile #cl-tb-mute,
.cl-mobile #cl-music-player,
.cl-mobile #cl-tb-visio-adv,
.cl-mobile #cl-tb-fam-call { display: none !important; }
.cl-mobile .c-topbar { justify-content: space-between; overflow: visible; }
.cl-mobile .c-topbar-spacer { flex: 1; }

/* On masque les widgets flottants (remplacés par le tableau de bord) */
.cl-mobile .cl-float-widget { display: none !important; }

/* Place pour la barre de nav basse sous le contenu défilant */
.cl-mobile #cl-cards-wrap {
  padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}

/* ── TABLEAU DE BORD ──────────────────────────────────────────────────────── */
.cl-dash { display: flex; flex-direction: column; gap: .85rem; }

.cl-dash-hi {
  font-size: 1.3rem; font-weight: 800; color: var(--text-primary);
  line-height: 1.2; margin: .1rem 0 .15rem;
}
.cl-dash-hi small { display: block; font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-top: .15rem; }

/* Encart statut : prochain RDV + porte Nuki */
.cl-dash-status {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--bg-surface2); border: 1.5px solid var(--border);
  border-radius: 1.1rem; padding: .85rem .95rem;
}
.cl-dash-srow { display: flex; align-items: center; gap: .65rem; font-size: .95rem; color: var(--text-secondary); }
.cl-dash-srow .cl-dash-sic { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.cl-dash-srow .cl-dash-stxt { flex: 1; min-width: 0; line-height: 1.3; }
.cl-dash-srow .cl-dash-stxt b { color: var(--text-primary); font-weight: 700; }
.cl-dash-srow .cl-dash-stag { font-size: .72rem; color: var(--text-faint); }
.cl-dash-srow.is-link { cursor: pointer; }
.cl-dash-srow.is-link::after { content: '›'; margin-left: auto; font-size: 1.4rem; color: var(--text-faint); }
.cl-dash-sep { height: 1px; background: var(--border2); margin: -.1rem 0; }

/* Grille d'actions 2 colonnes — grosses tuiles tactiles */
.cl-dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.cl-dash-tile {
  min-height: 112px; border-radius: 1.1rem;
  border: 1.5px solid var(--border); background: var(--bg-surface2);
  color: var(--text-primary); font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; padding: .9rem .6rem; text-align: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .1s ease, background .15s ease, box-shadow .15s ease;
}
.cl-dash-tile:active { transform: scale(.96); }
.cl-dash-tile .cl-dash-tic { font-size: 2.3rem; line-height: 1; }
.cl-dash-tile .cl-dash-tlb { font-size: .95rem; font-weight: 700; line-height: 1.2; }
.cl-dash-tile .cl-dash-tsub { font-size: .72rem; color: var(--text-muted); font-weight: 500; }

/* Tuile SOS (aide conseiller) — rouge, pleine attention */
.cl-dash-tile.sos {
  background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(185,28,28,.28));
  border-color: rgba(239,68,68,.45); color: #fff;
  box-shadow: 0 6px 22px rgba(239,68,68,.25);
}
.cl-dash-tile.sos .cl-dash-tsub { color: rgba(255,255,255,.8); }
/* Tuile porte (Nuki) — teinte primaire */
.cl-dash-tile.door { background: linear-gradient(135deg, rgba(var(--primary-rgb),.22), rgba(var(--primary-rgb),.10)); border-color: rgba(var(--primary-rgb),.4); }
/* Tuile famille — verte */
.cl-dash-tile.fam { background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(16,185,129,.08)); border-color: rgba(16,185,129,.38); }

/* ── BARRE DE NAVIGATION BASSE ───────────────────────────────────────────── */
.cl-mnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9520;
  display: flex; align-items: stretch;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(6, 4, 22, .94);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 -4px 24px rgba(0,0,0,.45);
}
:root[data-theme="light"] .cl-mnav { background: rgba(255,255,255,.96); }
.cl-mnav-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text-muted); font-size: .7rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color .15s ease;
}
.cl-mnav-btn .cl-mnav-ic { font-size: 1.5rem; line-height: 1; }
.cl-mnav-btn:active { transform: scale(.9); }
.cl-mnav-btn.active { color: var(--primary-light); }
:root[data-theme="light"] .cl-mnav-btn.active { color: var(--primary); }
.cl-mnav-btn .cl-mnav-badge {
  position: absolute; transform: translate(14px, -10px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px;
  background: #ef4444; color: #fff; font-size: .62rem; font-weight: 800;
  display: none; align-items: center; justify-content: center;
}
.cl-mnav-btn .cl-mnav-badge.show { display: inline-flex; }

/* ── FEUILLE D'ACTIONS (bottom sheet) ────────────────────────────────────── */
.cl-sheet-back {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end;
  opacity: 0; transition: opacity .2s ease;
}
.cl-sheet-back.show { opacity: 1; }
.cl-sheet {
  width: 100%; background: var(--bg-modal);
  border-radius: 1.4rem 1.4rem 0 0;
  border-top: 1px solid var(--border-strong);
  padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(100%); transition: transform .26s cubic-bezier(.22,1,.36,1);
}
.cl-sheet-back.show .cl-sheet { transform: none; }
.cl-sheet-grip { width: 42px; height: 5px; border-radius: 9999px; background: var(--border-strong); margin: .35rem auto .6rem; }
.cl-sheet-title { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); margin: 0 .25rem .6rem; }
.cl-sheet-item {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; min-height: 56px; padding: .7rem .75rem;
  background: none; border: none; border-radius: .9rem;
  color: var(--text-primary); font-family: inherit; font-size: 1rem; font-weight: 600;
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.cl-sheet-item:active { background: var(--bg-hover); }
.cl-sheet-item .cl-sheet-ic { font-size: 1.6rem; line-height: 1; flex-shrink: 0; width: 2rem; text-align: center; }
.cl-sheet-item .cl-sheet-sub { display: block; font-size: .76rem; font-weight: 500; color: var(--text-muted); margin-top: .1rem; }
.cl-sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.cl-sheet-grid .cl-sheet-item { flex-direction: column; justify-content: center; text-align: center; min-height: 92px; gap: .35rem; border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
   12. SOUS-PAGES / SOUS-MENUS (profil, documents, agenda, factures, équipement…)
   ----------------------------------------------------------------------------
   Ces pages se rendent dans #c-content via _goTab/setContent. Elles s'appuient
   sur des classes en partie NON définies dans le CSS de base
   (.c-row2, .c-fgroup, .c-label, base .c-input) → sur téléphone elles
   tomberaient en rendu navigateur par défaut (champs blancs, sans espacement).
   On les définit ici, optimisées tactile, pour que TOUTES les sous-pages soient
   propres en mobile. (Média-gaté : n'affecte que le téléphone.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Formulaires : tout en une colonne, gros champs lisibles ──────────────── */
/* Lignes 2/3 colonnes → empilées sur téléphone */
.c-row2, .c-row3, .c-row { display: grid; grid-template-columns: 1fr; gap: .15rem .8rem; }

/* Groupe de champ : label au-dessus, champ pleine largeur */
.c-fgroup { display: block; width: 100%; margin-bottom: .9rem; }
.c-label {
  display: block; margin-bottom: .35rem;
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
  letter-spacing: .01em;
}

/* Champs (la taille 16px/48px vient de la section 4 — ici l'habillage sombre) */
.c-input, .c-select, .c-textarea, select.c-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  border-radius: .75rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s;
}
.c-input:focus, .c-select:focus, .c-textarea:focus { border-color: var(--primary); background: var(--bg-input-focus); }
.c-input::placeholder, .c-textarea::placeholder { color: var(--text-faint); }
.c-input[disabled], .c-input:disabled { opacity: .6; }
.c-textarea { min-height: 96px; padding: .7rem .85rem; line-height: 1.5; resize: vertical; }
.c-select, select.c-input { -webkit-appearance: none; appearance: none; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.15rem, calc(100% - 13px) 1.15rem; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* ── Boutons d'action des sous-pages ─────────────────────────────────────── */
.c-btn-secondary {
  min-height: var(--tap); padding: .75rem 1.1rem;
  font-size: 1rem; border-radius: .9rem;
}
/* Les boutons placés directement dans une carte = soumission de formulaire → pleine largeur */
.c-card > .c-btn-primary,
.c-card > .c-btn-secondary,
.c-fgroup > .c-btn-primary { width: 100%; margin-top: .35rem; }

/* ── Cartes & titres de sous-pages ───────────────────────────────────────── */
.c-card-title {
  font-size: 1.08rem; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: .45rem; margin-bottom: .85rem; line-height: 1.25;
}

/* ── Tableaux : compactés + défilement horizontal propre ─────────────────── */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1rem; }
.data-table { min-width: max-content; }
.data-table th, .data-table td { padding: .55rem .65rem; font-size: .85rem; white-space: nowrap; }
.data-table th { font-size: .7rem; }

/* Grilles « détails » et grilles génériques → une colonne */
.detail-grid { grid-template-columns: 1fr !important; gap: .7rem; }
/* Grilles 3 colonnes posées en style inline → 2 colonnes sur téléphone */
.cl-mobile [style*="grid-template-columns:repeat(3"],
.cl-mobile [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }

/* ── États vides / chargement / erreurs : moins d'espace perdu ───────────── */
.c-empty { padding: 2.2rem 1rem; }
.c-empty-icon { font-size: 2.8rem; margin-bottom: .6rem; }
.c-loading { padding: 1.6rem 1rem; text-align: center; color: var(--text-muted); }
.c-err { margin: .6rem 0; padding: .9rem 1rem; border-radius: .85rem; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.28); color: #fca5a5; }

/* ── Badges / pastilles d'état dans les listes ───────────────────────────── */
.c-badge, .c-badge-pill { font-size: .82rem; }

/* ── Modules spécifiques : cibles tactiles confortables ──────────────────── */
/* Communauté */
.soc-btn { min-height: var(--tap-sm); padding: .55rem .9rem; font-size: .95rem; }
.soc-avatar { width: 44px; height: 44px; }
/* Réglages diaporama : la ligne label + contrôle s'adapte sans déborder */
.cl-diap-srow { flex-wrap: wrap; gap: .5rem .75rem; }
.cl-diap-ssel { min-height: var(--tap-sm); font-size: 16px; }
/* Navigation iframe (services web) : gros boutons */
.cl-ifw-nav-btn { min-height: var(--tap-sm); min-width: var(--tap-sm); }
/* Météo : le héros peut passer à la ligne sur très petit écran (grille déjà 2 col) */
.mw-hero { flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   13. PAGES « WIDGET » DE CATÉGORIE (agenda, mon espace, communications, …)
   ----------------------------------------------------------------------------
   Chaque sous-page de catégorie est enveloppée par un layout desktop :
     .wgt-hero      = image marketing en plein fond (position:absolute, inset:0)
     .wgt-content   = contenu transparent, avec ~200px réservés à droite
     aside.wgt-sidebar = barre de navigation des sous-onglets (à droite sur PC)
   Sur téléphone : l'image marketing transparaît derrière le contenu (illisible),
   le titre du hero chevauche le bandeau d'onglets, et la colonne réservée écrase
   la page. On retire ce décor desktop pour un rendu mobile net.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) On GARDE l'image de fond (hero) — réactivée à la demande — mais on masque
      uniquement SON TITRE (qui chevauchait le bandeau d'onglets). Le contexte est
      donné par le bandeau + la barre de navigation basse.
      L'image ne s'affiche que pour les catégories où un visuel est configuré
      (sinon .wgt-hero-bg reste opacity:0). On la passe en "cover" (plein cadre)
      au lieu de "contain" qui laissait de grands vides sur écran étroit. */
.cl-mobile .wgt-hero-title { display: none !important; }
.cl-mobile .wgt-hero-bg {
  background-size: cover !important;
  background-position: center center !important;
}
/* Voile modéré : assez pour la lisibilité par-dessus une photo, sans assombrir
   exagérément les pages sans image (le fond reste quasi noir de toute façon). */
.cl-mobile .wgt-hero-fade {
  background: linear-gradient(to bottom, rgba(2,6,23,.42) 0, rgba(2,6,23,.58) 100%) !important;
}

/* 2) CLÉ DU CORRECTIF : le wrapper passe en COLONNE et le bandeau d'onglets sort
      du mode position:fixed pour revenir DANS LE FLUX, tout en haut. Le contenu se
      place alors naturellement EN DESSOUS → aucun chevauchement possible (plus de
      bidouille de padding-top à calibrer sur une hauteur de bandeau variable). */
.cl-mobile .wgt-page-wrap { flex-direction: column !important; height: 100% !important; }
.cl-mobile .wgt-page-main { min-height: 0; }

/* 3) Bandeau de sous-onglets : remis dans le flux, en tête, pleine largeur.
      position:relative + z-index élevé : reste dans le flux (pas de chevauchement)
      MAIS passe au-dessus du hero (image de fond, z-index:0) et du contenu (z-index:1). */
.cl-mobile .wgt-sidebar {
  position: relative !important;
  z-index: 3 !important;
  order: -1;                       /* au-dessus du contenu */
  width: auto !important; height: auto !important; max-height: none !important;
  flex-shrink: 0;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 0 !important;
  background: rgba(6, 4, 22, .96) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
          backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
}
:root[data-theme="light"] .cl-mobile .wgt-sidebar { background: rgba(255,255,255,.97) !important; }
.cl-mobile .wgt-sidebar-scroll { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; padding: .4rem .55rem !important; gap: .45rem; }
.cl-mobile .wgt-sidebar-item {
  flex-shrink: 0; min-height: 40px; padding: .45rem .85rem; font-size: .9rem;
  white-space: nowrap; transform: none !important;
}

/* 4) Contenu : pleine largeur, padding normal (le bandeau est au-dessus dans le flux),
      + espace en bas pour ne pas passer sous la barre de navigation. */
.cl-mobile .wgt-content,
.cl-mobile #c-content:has(#ag-layout) .wgt-content {
  padding-top: .85rem !important;
  padding-right: .8rem !important;
  padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  background: transparent;
}

/* 5) Agenda : forcer la vue calendrier en une colonne, masquer le panneau latéral
      détail (déjà prévu ≤480px, on sécurise) et borner les hauteurs. */
.cl-mobile #ag-layout { grid-template-columns: 1fr !important; }
.cl-mobile #ag-det-panel { display: none !important; }
.cl-mobile #ag-day-panel { width: 100% !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. LISIBILITÉ & GLASSMORPHISM par-dessus l'image de fond
   ----------------------------------------------------------------------------
   On garde l'effet « verre dépoli » (cartes translucides) MAIS on le rend lisible.
   Astuce perf : plutôt que poser un backdrop-filter sur chaque carte qui défile
   (recalculé à chaque frame → saccades), on FLOUTE l'image de fond elle-même via
   `filter:blur` — calculé UNE seule fois. Le fond devient un voile doux, et tout
   le contenu translucide (y compris les cartes météo en style inline, non
   ciblables autrement) redevient lisible, sans coût de défilement.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Image de fond adoucie (flou ponctuel) + léger zoom pour masquer les bords que
   le flou rendrait transparents. overflow:hidden du .wgt-hero rogne le surplus. */
.cl-mobile .wgt-hero-bg {
  filter: blur(7px);
  transform: scale(1.08);
}

/* Cartes principales : vrai verre dépoli (translucide + flou léger). Le flou ici
   reste raisonnable (12px) et n'est présent que sur ces cartes-là. */
.cl-mobile .c-card,
.cl-mobile .detail-panel {
  background: rgba(15, 13, 32, .52) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
          backdrop-filter: blur(12px) saturate(150%) !important;
}
:root[data-theme="medium"] .cl-mobile .c-card,
:root[data-theme="medium"] .cl-mobile .detail-panel { background: rgba(26, 22, 52, .5) !important; }
:root[data-theme="light"] .cl-mobile .c-card,
:root[data-theme="light"] .cl-mobile .detail-panel { background: rgba(255, 255, 255, .6) !important; }

/* Surfaces quasi opaques (nav basse, bandeau d'onglets) : le flou y est invisible
   mais coûteux pendant le scroll → on le retire, fond plein. */
.cl-mobile .cl-mnav,
.cl-mobile .wgt-sidebar,
.cl-mobile .wgt-sidebar-item,
.cl-mobile .cl-float-widget {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.cl-mobile .cl-mnav { background: rgba(8, 6, 24, .97); }
:root[data-theme="light"] .cl-mobile .cl-mnav { background: rgba(255,255,255,.99); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. ANIMATIONS — partout, mais SOBRES et performantes
   ----------------------------------------------------------------------------
   Uniquement transform/opacity (accélérées GPU, ≠ blur/layout). Animations
   d'ENTRÉE qui jouent une fois à l'insertion de l'élément → aucun coût pendant
   le défilement. Désactivées si "réduire les animations" (voir section 8).
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes cl-fade      { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes cl-fade-up   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cl-fade-down { from { opacity: 0; transform: translateY(-10px);} to { opacity: 1; transform: none; } }
@keyframes cl-pop       { from { opacity: 0; transform: scale(.94); }       to { opacity: 1; transform: none; } }

/* — Accueil / tableau de bord — */
.cl-mobile .cl-dash-hi      { animation: cl-fade-down .35s ease both; }
.cl-mobile .cl-dash-status  { animation: cl-fade-up .4s ease .04s both; }
.cl-mobile .cl-dash-grid .cl-dash-tile { animation: cl-fade-up .42s cubic-bezier(.22,1,.36,1) both; }
.cl-mobile .cl-dash-grid .cl-dash-tile:nth-child(1) { animation-delay: .06s; }
.cl-mobile .cl-dash-grid .cl-dash-tile:nth-child(2) { animation-delay: .10s; }
.cl-mobile .cl-dash-grid .cl-dash-tile:nth-child(3) { animation-delay: .14s; }
.cl-mobile .cl-dash-grid .cl-dash-tile:nth-child(4) { animation-delay: .18s; }
.cl-mobile .cl-dash-grid .cl-dash-tile:nth-child(5) { animation-delay: .22s; }
.cl-mobile .cl-dash-grid .cl-dash-tile:nth-child(6) { animation-delay: .26s; }

/* — Grille de services (accueil desktop-like) — */
.cl-mobile .cl-home-grid .cl-home-card { animation: cl-fade-up .4s ease both; }

/* — Pages internes (catégories, modules) : fondu à l'arrivée — */
.cl-mobile .wgt-content > *,
.cl-mobile #c-content > div { animation: cl-fade .3s ease both; }
.cl-mobile .c-card { animation: cl-fade-up .34s ease both; }

/* — Bandeau d'onglets + barre de nav : glissent à l'apparition — */
.cl-mobile .wgt-sidebar { animation: cl-fade-down .32s ease both; }
.cl-mobile .cl-mnav     { animation: cl-fade-up .35s cubic-bezier(.22,1,.36,1) both; }

/* — Feuilles (bottom sheets) : les items apparaissent en cascade — */
.cl-mobile .cl-sheet-item { animation: cl-fade-up .26s ease both; }
.cl-mobile .cl-sheet-grid .cl-sheet-item:nth-child(2) { animation-delay: .03s; }
.cl-mobile .cl-sheet-grid .cl-sheet-item:nth-child(3) { animation-delay: .06s; }
.cl-mobile .cl-sheet-grid .cl-sheet-item:nth-child(4) { animation-delay: .09s; }
.cl-mobile .cl-sheet-grid .cl-sheet-item:nth-child(n+5) { animation-delay: .12s; }

/* — Retour tactile cohérent sur tout ce qui se tape — */
.cl-mobile .cl-dash-tile,
.cl-mobile .cl-mnav-btn,
.cl-mobile .cl-sheet-item,
.cl-mobile .c-btn-primary,
.cl-mobile .btn-primary,
.cl-mobile .cl-home-card,
.cl-mobile .cl-sub-card,
.cl-mobile .wgt-sidebar-item,
.cl-mobile .c-tab,
.cl-mobile .cl-nuki-btn { transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.cl-mobile .cl-dash-tile:active,
.cl-mobile .cl-sheet-item:active,
.cl-mobile .cl-home-card:active,
.cl-mobile .cl-sub-card:active,
.cl-mobile .wgt-sidebar-item:active,
.cl-mobile .c-btn-primary:active,
.cl-mobile .btn-primary:active { transform: scale(.96); }
.cl-mobile .cl-mnav-btn:active { transform: scale(.9); }

/* Onglet de sous-page actif : soulignement animé */
.cl-mobile .c-tab.active { animation: cl-fade .25s ease; }