/* ═══════════════════════════════════════════════════════════════════
   DIASPO'ACTIF — Responsive Universal Patch v1.0
   Incluire dans TOUTES les pages après styles.css et ds.css
   Couvre : mobile-first, tablette, desktop, 2K/4K, rotation
   ═══════════════════════════════════════════════════════════════════ */

/* ─── VARIABLES RESPONSIVE ──────────────────────────────────────── */
:root {
  /* Touch targets minimaux (WCAG 2.5.5 recommande 44px) */
  --touch-target: 44px;
  --touch-target-sm: 36px;

  /* Marges mobiles */
  --page-px: clamp(12px, 4vw, 24px);
  --page-py: clamp(12px, 3vw, 24px);

  /* Type scale fluide (clamp = min, preferred, max) */
  --fs-xs:   clamp(0.65rem, 2vw, 0.70rem);
  --fs-sm:   clamp(0.75rem, 2.5vw, 0.82rem);
  --fs-base: clamp(0.82rem, 3vw, 0.875rem);
  --fs-md:   clamp(0.9rem,  3.5vw, 1.0rem);
  --fs-lg:   clamp(1.0rem,  4vw,   1.125rem);
  --fs-xl:   clamp(1.1rem,  4.5vw, 1.25rem);
  --fs-2xl:  clamp(1.2rem,  5vw,   1.5rem);
  --fs-3xl:  clamp(1.3rem,  6vw,   1.875rem);
  --fs-hero: clamp(1.4rem,  7vw,   2.5rem);
}

/* ─── RESET UNIVERSEL MOBILE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Évite le scroll horizontal accidentel */
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  min-width: 320px; /* Plus petit iPhone SE */
}
img, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
table { border-collapse: collapse; }

/* ─── TOUCH TARGETS ──────────────────────────────────────────────── */
/* Tous les éléments interactifs ont une zone de touch suffisante */
button, [role="button"], a, input[type="checkbox"], input[type="radio"],
select, .btn, .da-btn, .nav a, .da-sidebar__item {
  min-height: var(--touch-target-sm);
  display: inline-flex;
  align-items: center;
}
/* La bande laterale reste en liste verticale (un module par ligne) — sans
   cette regle, la ligne ci-dessus la passe en inline-flex et deux modules
   courts finissent cote a cote sur la meme ligne. */
.sidebar a {
  min-height: var(--touch-target-sm);
  display: flex;
  width: 100%;
  align-items: center;
}
/* Taille explicite pour boutons */
.btn, .da-btn {
  min-height: var(--touch-target);
  padding-top: max(8px, env(safe-area-inset-top, 8px));
}
.btn-sm, .da-btn--sm { min-height: var(--touch-target-sm); }
.btn-xs, .da-btn--xs { min-height: 32px; }

/* Checkboxes et radios plus grands sur mobile */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px;
  cursor: pointer;
}

/* ─── SAFE AREAS (iPhone notch/Dynamic Island) ───────────────────── */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.topbar, .da-navbar {
  padding-top: env(safe-area-inset-top);
}
/* Contenu bas — navigation mobile */
.page-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ─── NAVIGATION MOBILE BOTTOM BAR ──────────────────────────────── */
/* Depuis le 2026-08-24, générée exclusivement par renderMobileBottomNavAuto() dans
   assets/app.js (source unique — voir la fonction pour le détail). Le prototype de
   référence (Diaspo'Actif Mobile.dc.html, ligne ~799) rend cette barre défilable
   horizontalement — jusqu'à 9 items pour un compte connecté (Menu/Tableau de bord/
   Accueil/Annuaire/Profil/Événements/Fil/Mon Associé/Vitrines), 5 en visiteur.
   .mobile-bottom-nav__scroll porte le défilement horizontal (items à largeur fixe,
   flex-shrink:0, plutôt que flex:1 : au-delà de ce que l'écran peut afficher, le surplus
   devient défilable au lieu d'être compressé illisible) ; .mobile-bottom-nav (le parent,
   fixed) reste lui immobile et porte en plus deux flèches ‹ › qui déclenchent ce
   défilement par clic — demande explicite (2026-08-24) en complément du geste de
   balayage, la seule barre de défilement native n'étant pas jugée suffisamment
   découvrable à elle seule. */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(60px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid #e0e8f0;
  box-shadow: 0 -2px 16px rgba(0,0,0,.08);
  z-index: 150;
  align-items: center;
}
.mobile-bottom-nav__scroll {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Barre de défilement native VOLONTAIREMENT visible (pas scrollbar-width:none) : elle
     sert d'indice visuel qu'il y a plus d'items à découvrir, en plus des flèches. */
}
.mobile-bottom-nav__arrow {
  flex: none;
  width: 26px;
  height: 100%;
  border: none;
  background: rgba(255,255,255,.96);
  color: #1a3a5c;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.mobile-bottom-nav__arrow--left { box-shadow: 4px 0 10px -4px rgba(0,0,0,.2); }
.mobile-bottom-nav__arrow--right { box-shadow: -4px 0 10px -4px rgba(0,0,0,.2); }
.mobile-bottom-nav__arrow[hidden] { display: none; }
.mobile-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 700;
  flex: 1 0 auto;
  min-width: 64px;
  padding: 6px 4px;
  min-height: 52px;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  transition: color .15s;
  position: relative;
  scroll-snap-align: start;
}
/* En dessous de 6 items (ex. barre visiteur, 5 items), flex:1 0 auto avec un contenu
   total qui tient déjà dans l'écran se comporte comme l'ancien flex:1 pur (les items
   grandissent pour occuper toute la largeur) — aucun changement visuel pour ce cas,
   la bascule vers le défilement ne se déclenche que si le contenu déborde réellement. */
.mobile-bottom-nav__item.active { color: #1a3a5c; }
.mobile-bottom-nav__item .nav-icon { font-size: 1.3rem; }
.mobile-bottom-nav__badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  background: #e74c3c;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 20px;
  min-width: 16px;
  text-align: center;
}
/* Bouton central surélevé (ex. "Publier"/"Nouveau") de la barre du bas */
.mobile-bottom-nav__item--publish .nav-icon {
  background: linear-gradient(135deg, #2563EB, #1d4ed8);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px !important;
  margin-top: -22px;
  box-shadow: 0 4px 14px rgba(37,99,235,.45);
  border: 3px solid #fff;
}
.mobile-bottom-nav__item--publish span:last-child { margin-top: 2px; }

/* ─── FORMULAIRES MOBILE-FIRST ───────────────────────────────────── */
/* Taille minimale des inputs pour le confort tactile */
input, select, textarea,
.da-input, .da-select, .da-textarea,
.geo-input, .chat-input input,
.auth-form-card input, .auth-form-card select,
.search-row input {
  min-height: var(--touch-target);
  font-size: 16px !important; /* Empêche le zoom iOS sur focus */
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
}
/* Exception : textarea peut être plus petit en hauteur initiale */
textarea, .da-textarea { min-height: 80px; font-size: 16px !important; }

/* Espacement entre champs */
.da-form-field, .form-field, .auth-form-card label + input,
.auth-form-card label + select { margin-bottom: 12px; }

/* ─── TABLEAUX ADAPTATIFS ────────────────────────────────────────── */
/* Wrapper scrollable sur petit écran */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  /* Ombre pour indiquer le scroll */
  background:
    linear-gradient(to right, white 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to right, rgba(255,255,255,0), white 70%) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.08), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), transparent) right center;
  background-repeat: no-repeat;
  background-size: 60px 100%, 60px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Autorisé à défiler horizontalement sur petit écran */
.simple-table, .card table, .da-table {
  min-width: 500px;
}

/* ─── MODALES RESPONSIVES ────────────────────────────────────────── */
/* Centré sur desktop, bottom-sheet sur mobile */
.modal-overlay, .da-modal-backdrop {
  padding: 16px;
  align-items: center;
}
.modal-box, .da-modal {
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── IMAGES LAZY LOADING ────────────────────────────────────────── */
img[loading="lazy"] {
  /* Placeholder pendant le chargement */
  background: linear-gradient(90deg, #e0e8f0 25%, #f0f4f8 50%, #e0e8f0 75%);
  background-size: 200% 100%;
  animation: img-loading 1.4s ease infinite;
}
@keyframes img-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
img[loading="lazy"].loaded { background: none; animation: none; }

/* ─── OVERFLOW SCROLL INDICATORS ────────────────────────────────── */
/* Fading aux bords pour les contenus scrollables */
.scroll-fade-x {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-fade-x::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.9));
  pointer-events: none;
  border-radius: 0 8px 8px 0;
}

/* Tabs scrollables */
.da-tabs, .feed-filter-bar, .chip-group {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  flex-wrap: nowrap !important;
  display: flex !important;
}
.da-tabs::-webkit-scrollbar, .feed-filter-bar::-webkit-scrollbar { display: none; }
.da-tab, .feed-filter-bar button { white-space: nowrap; flex-shrink: 0; }

/* ─── MESSAGERIE RESPONSIVE ──────────────────────────────────────── */
/* Gestion du panneau de conversation sur mobile */
.chat-mobile-back {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #e0e8f0;
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
}
.chat-wrap.conversation-open .chat-list { display: none; }
.chat-wrap.conversation-open .chat-mobile-back { display: flex; }

/* ─── TEXTE FLUIDE ───────────────────────────────────────────────── */
/* Typography fluid optionnelle — à activer avec .fluid-type */
.fluid-type h1, .fluid-type .page-title { font-size: var(--fs-hero); }
.fluid-type h2 { font-size: var(--fs-2xl); }
.fluid-type h3 { font-size: var(--fs-xl); }
.fluid-type p, .fluid-type li { font-size: var(--fs-base); }

/* ─── GRILLES ADAPTATIVES ────────────────────────────────────────── */
/* Auto-fill responsive sans media queries */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}
.auto-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 12px;
}
.auto-grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 20px;
}

/* ─── BREAKPOINT : TRÈS PETIT MOBILE (< 360px) ──────────────────── */
@media (max-width: 359px) {
  :root { --page-px: 10px; }
  .btn, .da-btn { padding-left: 10px; padding-right: 10px; font-size: 13px; }
  .da-modal-backdrop { padding: 0; }
  .da-modal { border-radius: 0; max-height: 100dvh; }
  .topbar-inner, .da-navbar { padding-left: 10px; padding-right: 10px; }
  h1, .da-page-title { font-size: 1.2rem; }
  .card, .da-card { padding: 12px; }
}

/* ─── BREAKPOINT : MOBILE STANDARD (< 480px) ────────────────────── */
@media (max-width: 479px) {
  /* Layout */
  .container { padding: 0 var(--page-px); }
  .content { padding: 14px var(--page-px); }

  /* Boutons */
  .btn, .da-btn { min-height: 46px; font-size: 14px; }

  /* Sidebar */
  .with-sidebar { flex-direction: column; }

  /* Stat cards : 1 colonne */
  .stat-row, .stats-row,
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Cards : pleine largeur */
  .da-cards-grid, .da-stats-grid { grid-template-columns: 1fr; }

  /* Modales bottom-sheet */
  .da-modal-backdrop { padding: 0; align-items: flex-end; }
  .da-modal { border-radius: 20px 20px 0 0; max-height: 92dvh; }
  .modal-box { max-width: 100% !important; border-radius: 20px 20px 0 0 !important; margin: 0 !important; }
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }

  /* Tableaux → cartes */
  .simple-table, .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hero */
  .hero-inner { padding: 24px var(--page-px); }
  .hero h1 { font-size: 1.4rem; }
  .network { height: 200px; }

  /* Chat */
  .chat-wrap { flex-direction: column; height: auto; min-height: 400px; }
  .chat-list { width: 100%; max-height: 200px; border-right: none; border-bottom: 1px solid #e0e8f0; }

  /* Profil */
  .profile-head { flex-direction: column; align-items: center; text-align: center; }

  /* Formulaires */
  .search-row { flex-direction: column; }
  .filters { grid-template-columns: 1fr; }
  .form-row, .da-form-row { grid-template-columns: 1fr !important; }

  /* Bottom nav visible */
  .mobile-bottom-nav { display: flex; }
  /* Compensation du bottom nav */
  .page { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .da-layout { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  /* Grilles style= inline */
  [style*="display:grid"],[style*="display: grid"] { grid-template-columns: 1fr !important; }
  /* Sauf exclusions explicites */
  .no-mobile-stack,[data-no-stack] { grid-template-columns: unset !important; }
}

/* ─── BREAKPOINT : MOBILE LARGE / PHABLET (480px - 639px) ──────── */
@media (min-width: 480px) and (max-width: 639px) {
  .da-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .da-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .mobile-bottom-nav { display: flex; }
  .page { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  .da-modal-backdrop { padding: 0; align-items: flex-end; }
  .da-modal { border-radius: 20px 20px 0 0; max-height: 90dvh; }
  .modal-box { max-width: 100% !important; border-radius: 20px 20px 0 0 !important; }
}

/* ─── BREAKPOINT : TABLET PORTRAIT (640px - 767px) ──────────────── */
@media (min-width: 640px) and (max-width: 767px) {
  .container { padding: 0 20px; }
  .da-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .da-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .filters { grid-template-columns: repeat(2, 1fr); }
  .chat-list { max-height: 220px; }
  /* Bottom nav visible sur tablette portrait */
  .mobile-bottom-nav { display: flex; }
  .page { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ─── BREAKPOINT : TABLET LANDSCAPE (768px - 1023px) ────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 0 20px; }
  .da-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .da-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Bottom nav visible sur tablette paysage */
  .mobile-bottom-nav { display: flex; }
  .page { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  /* Sidebar réduite sur tablette */
  .da-sidebar { width: 240px; }
  .with-sidebar .sidebar { width: 240px; }
  .content { padding: 20px 24px; }

  /* Chat : panneau liste plus étroit */
  .chat-list { width: 220px; }
}

/* Pages avec un bouton menu dédié dans la barre du bas (mobile) : pas besoin du
   bouton rond flottant en plus tant que cette barre est visible (<1024px) — voir
   assets/app.js (classe ajoutée uniquement si #mobile-nav-menu-toggle existe). */
@media (max-width: 1023px) {
  .sidebar-toggle.sidebar-toggle--has-mobile-nav-alt { display: none; }
}

/* Dropdown Notifications (assets/app.js, #notif-dropdown) : ancré en position:absolute avec
   right:0 par rapport au bouton cloche et une largeur fixe de 340px — sur mobile, ce bouton
   est proche du bord gauche du topbar (peu d'espace après lui), donc le dropdown déborde très
   largement hors de l'écran vers la gauche (jusqu'à -240px de x, entièrement invisible). Le
   clic déclenchait bien l'ouverture (open:true) mais rien n'était visible à l'écran, d'où
   l'impression d'un bouton "cassé". On repositionne en fixed, pleine largeur avec marges,
   indépendant de la position du bouton déclencheur — signalé par un utilisateur sur mobile
   le 2026-08-14. */
@media (max-width: 767px) {
  .notif-dropdown {
    position: fixed !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Bandeau cookies (assets/cookies-banner.js, position:fixed;bottom:0;z-index:9999) : sur
   mobile, ce z-index très élevé le fait passer AU-DESSUS de .mobile-bottom-nav (z-index:150,
   également bottom:0) plutôt que d'être caché derrière — il recouvrait le bouton central
   "Nouveau" (cercle surélevé, voir .mobile-bottom-nav__item--publish), le faisant apparaître
   tronqué. On remonte le bandeau au-dessus de la barre du bas tant qu'elle est visible.
   +16px de marge : le cercle du bouton "Nouveau" déborde d'environ 12px au-dessus du sommet
   de la barre (margin-top:-22px sur son icône) — sans cette marge, son sommet restait couvert
   par le bandeau même une fois celui-ci remonté à ras de la barre. */
@media (max-width: 1023px) {
  #da-cookie-banner { bottom: calc(60px + 16px + env(safe-area-inset-bottom)) !important; }
}

/* Logo réaffiché sur mobile, VISITEUR DÉCONNECTÉ UNIQUEMENT (2026-08-24, capture de référence
   utilisateur — qui montrait précisément cet état). Masqué depuis styles.v2.css:480 pour
   garder "Déconnexion" atteignable sans défiler ; testé connecté avec le logo réaffiché aussi
   : "Déconnexion" sort alors du viewport (topbar-right y est déjà plus chargé — badges,
   pastille compte...). Le body.da-logged-out est posé par renderMobileBottomNavAuto()
   (assets/app.js), déjà déclenché sur chaque page — pas de logique dupliquée ici. */
@media (max-width: 768px) {
  body.da-logged-out .logo { display: flex !important; font-size: 13px; gap: 6px; }
  body.da-logged-out .logo-img { width: 22px; height: 22px; }
  /* Avec le logo réaffiché ci-dessus, "Se connecter" + "S'inscrire" (215px environ à eux
     deux) ne tiennent plus dans l'espace restant de .topbar-right (mesuré à seulement 88px
     sur un écran de 375px, une fois le logo ET la marge réservée pour #sidebar-toggle
     soustraits) — "S'inscrire" se retrouvait poussé hors du défilement horizontal habituel
     de cette zone (styles.v2.css:482-491, comportement volontaire pour les icônes/badges du
     compte connecté, mais pas adapté à 2 boutons pleine largeur). Capture utilisateur à
     l'appui montrant le chevauchement/troncature. Repli sur un retour à la ligne plutôt que
     le défilement, réservé au visiteur déconnecté (peu de contenu dans topbar-right dans ce
     cas — uniquement ces 2 boutons une fois le sélecteur de langue et les widgets assistants
     masqués), pour ne pas changer le comportement délibéré du cas connecté (plus chargé). */
  /* Premier essai (topbar-right seul en flex-wrap) corrigé : ça faisait chevaucher "Se
     connecter" avec le logo au lieu de passer proprement à la ligne, la marge de gauche
     réservée pour #sidebar-toggle (74px, styles.v2.css via la règle plus haut dans ce
     fichier) interagissant mal avec le retour à la ligne d'un seul enfant. Plus robuste :
     faire passer TOUT .topbar-inner sur 2 lignes (logo seul en haut, boutons en dessous,
     pleine largeur) plutôt que de faire coexister les deux sur la même ligne. */
  body.da-logged-out .topbar-inner { flex-wrap: wrap; }
  body.da-logged-out .topbar-right {
    flex-wrap: nowrap; justify-content: center; overflow-x: visible; mask-image: none;
    width: 100%; margin-left: 0 !important; margin-top: 6px;
  }
}

/* Bulle flottante consolidée des assistants (#assist-hub-fab, assets/app.js) — demandée à
   retirer sur mobile (capture de référence, 2026-08-24) : elle flotte au-dessus de la barre
   de navigation basse et n'apporte rien que "Menu" ne couvre déjà (Support Pilote y est
   listé). Les widgets individuels qu'elle consolide (#cb-fab, #oz-bubble…) restent chacun
   masqués comme avant (classe .assist-hub-hidden, logique inchangée) — seul le bouton
   consolidé disparaît, pas de doublon visible en repli. */
@media (max-width: 1023px) {
  #assist-hub-fab, #assist-hub-menu { display: none !important; }
}

/* "💎 Mon Associé" du bandeau haut (#mon-associe-btn, assets/app.js, posé pour tout compte
   connecté) — demandé à retirer sur mobile pour libérer de la place (2026-08-24) : déjà
   présent dans la barre basse (l'un des 9 items générés par renderMobileBottomNavAuto()),
   donc pas de repli à construire, juste un doublon à masquer — même logique que Déconnexion
   un peu plus tôt. Contrairement à Déconnexion, "Mon Associé" est TOUJOURS dans la barre
   basse pour tout compte connecté (jamais conditionné à une redirection), donc masquage
   inconditionnel ici, sans classe body à poser en JS. */
@media (max-width: 1023px) {
  #mon-associe-btn { display: none !important; }
}

/* ─── MENU "☰" PLEIN ÉCRAN SUR MOBILE (2026-08-24, demande explicite avec captures du
   prototype à l'appui : recherche + sections groupées) ─── Le tiroir .sidebar existant
   (280px) passe en plein écran sous 1024px quand ouvert, plutôt que de construire un
   nouveau composant séparé : mêmes liens réels, mêmes gestionnaires de clic déjà câblés
   (certaines pages naviguent par data-section avec des écouteurs attachés directement aux
   éléments — les cloner ou les reconstruire ailleurs les aurait rendus inertes). Une barre
   de recherche est insérée en haut par JS (assets/app.js, juste après cette règle) et
   filtre les liens existants par texte, sans toucher à leur fonctionnement. */
@media (max-width: 1023px) {
  .sidebar {
    width: 100%;
    left: 0;
    top: 0;
    height: 100dvh;
    padding-top: 14px;
    /* Bug réel trouvé à l'exécution (pas un artefact d'outil de test, confirmé sur deux
       pages différentes) : translateX(-100%)/(0) de styles.v2.css est un pourcentage —
       recalculé par rapport à LARGEUR ACTUELLE de l'élément. Cette même règle change width
       (240/280/300px → 100%) EN MÊME TEMPS que la classe .open change transform : la
       transition de .3s se retrouvait à animer entre deux pourcentages recalculés en
       continu pendant que la largeur se stabilisait, sans jamais se figer sur la valeur
       cible (constaté : même un style en ligne transform + !important restait sans effet
       tant que la transition existait ; se figeait immédiatement dès qu'elle était
       désactivée). Un slide plein écran n'apporte de toute façon rien visuellement — la
       transition est donc simplement retirée dans ce cas précis, pas ailleurs. */
    transition: none;
  }
  .sidebar .brand { display: none; } /* redondant avec le logo du bandeau, visible derrière une fois le tiroir fermé */
  #da-sidebar-search-wrap {
    position: sticky; top: 0; z-index: 2;
    background: var(--navy); padding: 6px 0 14px;
    display: flex; align-items: center; gap: 10px;
  }
  #da-sidebar-search {
    flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; border: none;
    background: rgba(255,255,255,.1); color: #fff; font-size: 14px;
  }
  #da-sidebar-search::placeholder { color: rgba(255,255,255,.55); }
  .sidebar a[hidden] { display: none; }
  /* "Déconnexion" en pied de menu (voir assets/app.js) : texte simple centré en rouge,
     sans le fond blanc des autres items — cohérent avec la référence fournie et distinct
     visuellement d'une action de navigation normale. */
  #da-sidebar-logout {
    display: block; text-align: center; background: none !important; color: #ff6b6b !important;
    margin-top: 10px; box-shadow: none;
  }
}
/* Doublon avec le bandeau haut (toujours visible ≥1024px, où le menu plein écran n'existe
   pas) évité dans l'autre sens : cet item ajouté par JS sur toute largeur reste caché tant
   que le menu plein écran lui-même ne l'est pas. */
@media (min-width: 1024px) {
  #da-sidebar-logout { display: none !important; }
}
/* #logout-link (bandeau haut) masqué sur mobile UNIQUEMENT quand #da-sidebar-logout existe
   (posé par assets/app.js — la classe ci-dessous n'est ajoutée à <body> que dans ce cas
   précis) : sur les pages sans .sidebar, aucun repli de déconnexion dans le menu n'existe,
   le masquer y aurait laissé aucun moyen de se déconnecter. */
@media (max-width: 1023px) {
  body.da-has-menu-logout #logout-link { display: none !important; }
}

/* Chevauchement constaté sur mobile (annuaire.html et pages similaires, capture utilisateur
   2026-08-24) : sous 769px, .logo et .nav du topbar passent en display:none (voir styles.v2.css),
   ne laissant plus que .topbar-right comme unique enfant flex visible de .topbar-inner — avec
   .sidebar-toggle sorti du flux (position:fixed), un seul enfant flex avec justify-content:
   space-between se retrouve collé au bord GAUCHE du topbar, exactement sous le bouton rond
   flottant (left:14px, width:50px) : "Se connecter" apparaissait à moitié caché derrière.
   Condition ":not(--has-mobile-nav-alt)" plutôt que ciblée sur --no-sidebar : annuaire.html a
   en réalité un <aside class="sidebar"> cache (bouton donc sans AUCUN des deux modificateurs,
   ni --no-sidebar ni --has-mobile-nav-alt) — la vraie condition du bug est juste "le bouton
   rond est effectivement affiché", pas telle ou telle variante précise. .sidebar-toggle
   précède toujours .topbar-right dans le DOM (voir topbar-inner), d'où ce sélecteur de
   fratrie plutôt qu'un enfant caché arbitraire ailleurs sur le site. */
@media (max-width: 768px) {
  .sidebar-toggle:not(.sidebar-toggle--has-mobile-nav-alt) ~ .topbar-right { margin-left: 74px; }
}

/* ─── BREAKPOINT : DESKTOP (1024px - 1279px) ────────────────────── */
@media (min-width: 1024px) {
  /* Sidebar toujours visible */
  .mobile-bottom-nav { display: none !important; }
  .da-navbar__hamburger { display: none; }

  /* Grilles 3 colonnes */
  .da-cards-grid { grid-template-columns: repeat(3, 1fr); }
  .da-stats-grid { grid-template-columns: repeat(4, 1fr); }

  /* Le topbar (logo + nav + bloc compte) était plafonné à 1180px (styles.v2.css) quelle
     que soit la largeur réelle de l'écran : sur un compte avec beaucoup d'éléments à
     droite (Aperçu, chat, notifications, avatar, badge de rôle, Déconnexion, Mon Associé),
     la nav n'avait plus assez de place et repassait en résumé sur deux lignes, chevauchant
     le bouton rond flottant en bas à gauche. On laisse le topbar utiliser toute la largeur
     disponible à partir du desktop pour que la nav ne se replie plus inutilement. */
  .topbar-inner { max-width: 1500px; }
}

/* ─── BREAKPOINT : LARGE DESKTOP (1280px - 1535px) ──────────────── */
@media (min-width: 1280px) {
  .container, .da-content { max-width: 1200px; }
  .da-cards-grid { grid-template-columns: repeat(3, 1fr); }
  .da-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── BREAKPOINT : TRÈS GRAND ÉCRAN 2K (1536px - 2559px) ─────────  */
@media (min-width: 1536px) {
  .container { max-width: 1400px; padding: 0 40px; }
  /* Ce palier contenait DEUX déclarations .topbar-inner{max-width} contradictoires
     (1800px puis, juste en dessous, 1400px qui l'écrasait silencieusement) — c'était la
     cause du bandeau bleu qui restait visiblement plus étroit que l'écran sur cette
     tranche de largeurs, malgré un fond bleu déjà pleine largeur. Fusionné en une seule
     valeur, généreusement élargie (1400 -> 2000px) plutôt que simplement réparée. */
  .topbar-inner { max-width: 2000px; padding: 14px 40px; }
  .da-content { max-width: 1400px; }
  body { font-size: 15px; }
  .da-cards-grid { grid-template-columns: repeat(4, 1fr); }
  .da-stats-grid { grid-template-columns: repeat(5, 1fr); }
  .sidebar { width: 300px; }
  .da-sidebar { width: 300px; }
}

/* ─── BREAKPOINT : 4K ET ULTRA-WIDE (>= 2560px) ─────────────────── */
@media (min-width: 2560px) {
  :root { font-size: 18px; }
  .container { max-width: 1800px; padding: 0 60px; }
  .da-content { max-width: 1800px; }
  .da-cards-grid { grid-template-columns: repeat(5, 1fr); }
  .da-stats-grid { grid-template-columns: repeat(6, 1fr); }
  .da-sidebar { width: 300px; }
  .topbar-inner { max-width: 2400px; padding: 18px 60px; }
}

/* ─── ROTATION (ORIENTATION) ─────────────────────────────────────── */
/* Portrait → paysage : réajustements spéciaux */
@media (orientation: landscape) and (max-height: 500px) {
  /* Petits mobiles en paysage (iPhone SE etc.) */
  .hero-inner { padding: 16px var(--page-px) 20px; }
  .hero h1 { font-size: 1.2rem; }
  .network { height: 160px; }
  .da-modal { max-height: 80dvh; }
  .modal-box { max-height: 80dvh !important; overflow-y: auto; }
  .da-sidebar, .sidebar { height: calc(100dvh - 56px); overflow-y: auto; }
  /* Bottom nav en paysage : côté ou caché */
  .mobile-bottom-nav {
    height: calc(48px + env(safe-area-inset-bottom));
  }
}

/* Tablette/mobile landscape : sidebar visible */
@media (orientation: landscape) and (min-width: 640px) {
  .chat-wrap { height: min(520px, 80vh); }
}

/* ─── PERFORMANCES MOBILES ───────────────────────────────────────── */
/* Désactiver animations complexes sur mobile bas de gamme */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lazy loading natif */
img:not([loading]) { loading: auto; }

/* Contenu en dehors du viewport : will-change pour GPU
   (.sidebar exclue : elle gère son propre transform pour le tiroir repliable,
   voir assets/styles.v2.css — un translateZ(0) ici l'écrasait silencieusement) */
.da-modal-backdrop, .da-sidebar {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.sidebar { will-change: transform; }

/* ─── TYPOGRAPHIE RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 768px) {
  h1, .page-title, .da-page-title { font-size: clamp(1.2rem, 5vw, 1.6rem); }
  h2, .section h2 { font-size: clamp(1.0rem, 4vw, 1.3rem); }
  h3 { font-size: clamp(0.95rem, 3.5vw, 1.1rem); }
  p, li, td { font-size: clamp(0.82rem, 3vw, 0.9rem); }
}

/* ─── APERÇU MULTI-APPAREILS — masqué sur téléphone (déjà redondant : on EST sur un téléphone) ─── */
@media (max-width: 640px) {
  #apercu-appareils-btn { display: none !important; }
}

/* ─── CARTES INIT MOBILE ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .init-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .init-card .meta .tags { margin-top: 8px; }
  .feed-post { padding: 14px; }
  .feed-actions { gap: 12px; font-size: 0.78rem; }
  .ad-banner { flex-wrap: wrap; }
  .profile-cover { height: 100px; }
  .profile-head { padding: 0 14px 14px; margin-top: -24px; }
  .profile-head .init-logo { width: 52px; height: 52px; font-size: 18px; }
  .nat-card { flex-direction: column; align-items: flex-start; }

  /* Timeline vertical compact */
  .timeline-item { gap: 10px; }
  .date-chip { width: 44px; height: 44px; font-size: 11px; }
}

/* ─── FORMULAIRES TACTILES ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Espacement entre éléments de formulaire */
  .auth-form-card label, .da-label { margin-bottom: 6px; font-size: 0.8rem; }
  .auth-form-card input,
  .auth-form-card select,
  .da-input, .da-select, .da-textarea {
    padding: 12px 14px;
    font-size: 16px !important;
    border-radius: 10px;
    margin-bottom: 6px;
  }
  /* Select personnalisé */
  .da-select, select { padding-right: 36px; }

  /* Boutons de formulaire pleine largeur sur mobile */
  .auth-form-card .btn,
  .auth-form-card .da-btn,
  .modal-box .btn-block { width: 100%; justify-content: center; }

  /* Cases à cocher + radios */
  .da-check, .da-radio { gap: 10px; min-height: var(--touch-target-sm); }
  .da-check input[type="checkbox"],
  .da-radio input[type="radio"] { width: 20px; height: 20px; }

  /* Switch */
  .da-switch__input { width: 44px; height: 24px; }
  .da-switch__thumb { width: 18px; height: 18px; top: 3px; left: 3px; }
  .da-switch__input input:checked ~ .da-switch__thumb { transform: translateX(20px); }
}

/* ─── MESSAGERIE MOBILE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .chat-wrap {
    flex-direction: column;
    height: calc(100dvh - 56px - 60px);
  }
  .chat-list {
    width: 100%;
    max-height: 45%;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid #e0e8f0;
  }
  .chat-main { flex: 1; overflow: hidden; }
  .chat-body { padding: 12px; gap: 8px; }
  .bubble { max-width: 80%; font-size: 0.85rem; padding: 8px 12px; }
  .chat-input { padding: 10px 12px; gap: 8px; }
  .chat-input input {
    font-size: 16px !important;
    padding: 10px 12px;
  }
}

/* ─── AGENDA MOBILE ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  #ag-header { flex-wrap: wrap; gap: 6px; height: auto; padding: 8px 10px; }
  #ag-period { font-size: 0.78rem; }
  .ag-nav-btn { padding: 5px 8px; font-size: 0.75rem; }
  #ag-main { padding: 8px; }
  .month-grid { gap: 0px; }
  .month-day { min-height: 44px; padding: 2px 3px; }
  .day-num { font-size: 0.72rem; }
  .month-event { display: none; }
  .month-more { font-size: 0.6rem; }
  /* Semaine : réduire hauteur slots */
  .week-day-slots, .day-slots { height: 700px; }
  .week-hour-label { height: 29px; font-size: 0.58rem; }
  .week-slot { font-size: 0.62rem; padding: 1px 2px; }
}

/* ─── CV BUILDER MOBILE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  #cvb-sidebar {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #e0e8f0;
    max-height: 50dvh;
    overflow-y: auto;
  }
  #cvb-preview-wrapper { padding: 10px; }
  .a4-wrapper { transform: scale(0.65); transform-origin: top center; margin-bottom: -180px; }
}
@media (max-width: 600px) {
  .a4-wrapper { transform: scale(0.48); margin-bottom: -340px; }
}

/* ─── MEETING MOBILE ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  #video-grid { padding: 2px; gap: 2px; }
  .vid-tile { border-radius: 6px; }
  #toolbar { padding: 6px 8px; flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .t-btn { padding: 8px; font-size: 0.75rem; white-space: nowrap; flex-shrink: 0; }
  .t-btn span { display: none; }
  #timer { font-size: 0.75rem; }
  #chat-panel { width: 100%; }
}

/* ─── ACCESSIBILITÉ FOCUS VISIBLE ───────────────────────────────── */
@media (pointer: coarse) {
  /* Appareils tactiles : pas de :hover, utiliser :focus-visible */
  a:hover, button:hover { text-decoration: none; }
  .btn:focus-visible, .da-btn:focus-visible,
  .sidebar a:focus-visible, .da-sidebar__item:focus-visible {
    outline: 3px solid #4a90d9;
    outline-offset: 2px;
  }
}

/* ─── IMPRESSION ─────────────────────────────────────────────────── */
@media print {
  .topbar, .sidebar, .da-navbar, .da-sidebar,
  .mobile-bottom-nav, .da-fab, .da-toast-container,
  .feed-filter-bar, .sidebar-toggle, .chat-list,
  #ag-header, #ag-view-tabs, #toolbar, #chat-panel, #parts-panel {
    display: none !important;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .container, .content, .da-layout, .da-content { padding: 0; max-width: 100%; }
  .card, .da-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .chat-main, .chat-body { height: auto !important; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #666; }
  .page { padding-bottom: 0; }
}

/* ─── SCROLLBAR STYLING (desktop) ───────────────────────────────────
   SOURCE UNIQUE DE VERITE pour les barres de defilement de la plateforme.
   Ce fichier est charge par les 90 pages du site ; ui-enhancements.v2.css et
   design-upgrade.v2.css definissaient chacun leur propre barre, la derniere
   chargee ecrasant les autres avec un pouce #CBD5E1 sur piste #F1F5F9 (deux
   gris quasi identiques = barre invisible). Ces blocs ont ete retires au
   profit de celui-ci. Ne pas re-declarer ::-webkit-scrollbar ailleurs.
   Contraste pouce/piste ~3.9:1 (seuil WCAG des composants non textuels : 3:1).

   Deux mecanismes, volontairement redondants :
   1. scrollbar-color (standard, heritee) — Firefox, Chrome 121+, Safari 18+.
      C'est ce qui s'applique aujourd'hui : barre de largeur systeme (~15px).
   2. ::-webkit-scrollbar — repli pour les moteurs plus anciens uniquement.
      Des que scrollbar-color est reconnue, Chrome IGNORE ces regles ; ne pas
      s'attendre a voir le 12px ci-dessous sur un navigateur recent. */
@media (min-width: 768px) {
  html { scrollbar-color: #64748B #E2E8F0; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: #E2E8F0; border-radius: 8px; }
  ::-webkit-scrollbar-thumb {
    background: #64748B;
    border-radius: 8px;
    border: 2px solid #E2E8F0; /* detache le pouce de la piste */
  }
  ::-webkit-scrollbar-thumb:hover  { background: #475569; }
  ::-webkit-scrollbar-thumb:active { background: #334155; }
  ::-webkit-scrollbar-corner { background: #E2E8F0; }

  /* Surfaces sombres (sidebar navy) : le pouce clair reste lisible. */
  .sidebar { scrollbar-color: rgba(255,255,255,.55) rgba(255,255,255,.12); }
  .sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,.12); }
  .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.55); border-color: transparent; }
  .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.78); }
}

/* ─── FOCUS OUTLINE UNIVERSEL ────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }