/* ============================================================
   ADrard — Responsive HARDENING
   Couche finale (chargée APRÈS pages.css) qui garantit :
   • Aucun scroll horizontal possible (sur toutes les pages).
   • Compatibilité iPhone notch / safe-area (haut + bas).
   • Tables larges et SVG bornés au viewport (scroll horizontal interne).
   • Sidebar, navbar, dropdowns, modals, sidebar invitée, toasts adaptés
     du mobile (≤ 480px) au grand écran (≥ 1600px).
   ============================================================ */

/* ── 1. RÈGLES GLOBALES — applicables partout ────────────────── */
html, body {
  /* Pas de scroll horizontal jamais. */
  overflow-x: hidden;
  /* Largeur strictement bornée au viewport pour éviter qu'un enfant
     mal contraint ne pousse la page. */
  max-width: 100vw;
  /* Texte lisible sur mobile, ajustement automatique du zoom iOS. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Respecte la safe area (notch iPhone, barre dynamique Android). */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Tous les éléments respectent la largeur de leur parent. */
*, *::before, *::after { box-sizing: border-box; }

/* Empêche les conteneurs en flex/grid de déborder à cause d'un
   enfant intrinsèquement plus large (le min-width:0 force le shrink). */
.app-layout,
.main-content,
.modal,
.card,
.form-section,
.dashboard-grid,
.stat-grid {
  min-width: 0;
}

/* Images, vidéos, iframes : jamais plus larges que leur parent. */
img, video, iframe, canvas, picture, object, embed {
  max-width: 100%;
  height: auto;
}
/* SVG : AUCUNE règle globale.
   Les icônes Lucide ont leur taille fixe via `style="width:Npx;height:Npx"`
   inline (priorité naturelle la plus haute). Si on applique
   `svg { max-width: 100% }` globalement, certaines icônes dans un parent
   flex sont rétrécies/grossies de manière inattendue. Les charts SVG
   inline (description, finance…) sont déjà couverts par §10-bis qui
   cible explicitement les SVG de chart (width>=100).                 */

/* ── 2. NAVBAR + SIDEBAR — ZÉRO écart entre navbar et sidebar ────
   En desktop :
   • La navbar est `position: fixed; top: 0; height: navbar-h`.
   • La sidebar est `position: fixed; top: navbar-h`.
   IMPORTANT : on n'ajoute PAS de `margin-top` à la sidebar — sur un
   élément fixed le margin-top s'ajoute au top et crée un décalage
   visible. On utilise UNIQUEMENT `top` pour positionner.

   Pour le safe-area iOS (notch) sur desktop standalone (rare mais
   possible) : on l'ajoute uniquement à la navbar, et la sidebar
   recoit le même décalage via `top`.                                */
.navbar {
  padding-top: env(safe-area-inset-top, 0);
  height: calc(var(--navbar-h) + env(safe-area-inset-top, 0));
}
@media (min-width: 1025px) {
  /* main-content : compense la navbar par margin-top (élément en flux). */
  .main-content {
    margin-top: calc(var(--navbar-h) + env(safe-area-inset-top, 0));
  }
  /* sidebar : élément fixed → utiliser top UNIQUEMENT, pas margin-top.
     Aucune marge-top sur la sidebar.                                  */
  .sidebar {
    top: calc(var(--navbar-h) + env(safe-area-inset-top, 0)) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .sidebar > :first-child {
    margin-top: 0 !important;
  }
}

/* Bell + user dropdown : toujours dans le viewport, jamais plus large
   que l'écran (avec une petite marge de sécurité). */
#navbar-bell-menu,
#navbar-user-menu,
#navbar-guest-menu {
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - var(--navbar-h) - 40px) !important;
  overflow-y: auto;
}

/* ── 3. TABLES financières : scroll horizontal contrôlé ───────── */
/* Toutes les tables larges (Trésorerie, TVA, encaiss/décaiss, finance)
   se mettent en scroll horizontal SANS déborder du viewport. */
.table-wrap,
[data-scroll-x="true"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* Les tables nues qui ne sont pas dans un wrapper : on les autorise à
   scroller à l'intérieur du parent via display:block + overflow. */
.main-content table {
  max-width: 100%;
}
.main-content > table,
.page-content table {
  /* Permet aux très larges tables de scroller même sans wrapper. */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 4. SIDEBAR — drawer mobile robuste ─────────────────────────
   Nouvelle stratégie : la sidebar mobile a `top: navbar-h` (pas top:0)
   et `padding-top: 0`. Comme cela le top de la sidebar coïncide
   exactement avec le bas de la navbar, sans écart visible.          */
@media (max-width: 1024px) {
  .sidebar {
    /* Position : top juste sous la navbar (+ safe-area iOS si notch). */
    top: calc(var(--navbar-h) + env(safe-area-inset-top, 0)) !important;
    /* Hauteur = viewport restant (= total - navbar - safe-area). */
    height: calc(100vh - var(--navbar-h) - env(safe-area-inset-top, 0));
    height: calc(100dvh - var(--navbar-h) - env(safe-area-inset-top, 0));
    /* AUCUN padding-top : le contenu commence pile en haut. */
    padding-top: 0 !important;
    /* Padding-bottom : safe-area iOS pour le bouton "Quitter" et
       garantir que le panneau "Mon accès" reste visible.            */
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0)) !important;
    /* Scroll interne autorisé si le contenu dépasse. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-overlay { z-index: calc(var(--z-sticky)); }
  .sidebar.open    { z-index: calc(var(--z-sticky) + 1); }
}

/* ── 5. NAVBAR INVITÉE — badges qui peuvent déborder ──────────── */
#navbar > div:first-child + .navbar__spacer + div,
.navbar > div:last-child {
  flex-wrap: nowrap;
  min-width: 0;
}
/* En mobile, on cache les badges secondaires (durée, statut) car ils
   débordent ; ils restent dispo dans le dropdown "Mon accès". */
@media (max-width: 640px) {
  /* Badge "Invité" à côté du logo : on le cache, le bouton "Mon accès"
     suffit à signaler le mode. */
  .navbar > div:first-child > span:last-child { display: none !important; }
  /* Badges compact statut/durée à côté du bouton "Mon accès" :
     uniquement visible sur ≥ 640px. */
  .navbar [data-guest-badge] { display: none !important; }
  /* Cards description BP : 1 colonne pleine largeur sur mobile (jamais 420px). */
  .bp-desc-cards-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3) !important;
  }
}

/* ── Garde-fou responsive global pour les pages projet/BP (mobile-first) ──
   Aucun élément ne doit déborder horizontalement ; les mots longs cassent. */
@media (max-width: 768px) {
  .main-content, .app-layout { max-width: 100%; overflow-x: hidden; }
  .main-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .main-content h1, .main-content h2, .main-content h3,
  .main-content p, .main-content li, .main-content span { overflow-wrap: break-word; }
  /* Grilles fixes fréquentes → repli en 1 colonne */
  .main-content [style*="grid-template-columns:repeat(2"],
  .main-content [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
}

/* ── 6. MODALES — viewport-safe ────────────────────────────────
   On préserve les `max-width` des variantes existantes (modal--sm/lg/xl)
   mais on garantit qu'aucune modal ne dépasse jamais le viewport, et
   que le body scrolle si nécessaire.                                  */
.modal-overlay {
  /* Évite que la modal aille au-delà des safe-areas iOS. */
  padding: calc(var(--sp-4) + env(safe-area-inset-top, 0))
           calc(var(--sp-4) + env(safe-area-inset-right, 0))
           calc(var(--sp-4) + env(safe-area-inset-bottom, 0))
           calc(var(--sp-4) + env(safe-area-inset-left, 0));
}
.modal {
  /* Plafond viewport : la modal ne dépassera jamais 95% du viewport
     (mais reste libre de descendre en dessous via ses own max-width). */
  width: 100%;
  max-height: min(90vh, 90dvh);
}
.modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(70vh, 70dvh);
}
/* En tablette/mobile : on borne la largeur effective à 95vw pour
   garantir un padding visuel des deux côtés. */
@media (max-width: 1024px) {
  .modal { max-width: min(95vw, var(--modal-max-w, 720px)); }
}

/* ── 7. TOAST — viewport-safe ─────────────────────────────────── */
.toast-container {
  max-width: calc(100vw - 32px);
  right: max(16px, env(safe-area-inset-right, 0));
  bottom: max(16px, env(safe-area-inset-bottom, 0));
  top: auto;
  left: auto;
}
.toast {
  max-width: 100%;
  word-break: break-word;
}

/* ── 8. VIEWER (BP partagé) — scroll horizontal interne ──────── */
.vw-layout {
  max-width: 100vw;
  overflow-x: hidden;
}
.vw-content {
  overflow-x: hidden;
  max-width: 100%;
}
.vw-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 9. SIDEBAR INVITÉE — section "Mon accès" compacte ────────── */
@media (max-width: 640px) {
  #sidebar-guest-info {
    font-size: 10.5px !important;
    padding: 10px !important;
  }
}

/* ── 10. PAGES PROJET — grids financières adaptatives ───────────
   Couvre les patterns inline qu'on retrouve dans les pages BP :
   • repeat(4,1fr) → 4 KPIs (Tréso, TVA, IS, BFR, Personnel, Couts-Fixes…)
   • repeat(3,1fr) → 3 cards (Compte de résultat, Plan financement)
   • 7fr 3fr / 3fr 2fr / 2fr 3fr → split chart+sidebar dans toutes les
     pages finance (tva.view, tresorerie.view, compte-resultat.view…)
   • 1fr 300px → split contenu+sidebar export.view
   • repeat(auto-fit/fill, minmax(…, 1fr)) → cards produits/sections      */

/* Tablette paysage (≤ 1024px) : 4 cols → 2 cols, splits asymétriques
   passent en empilé pour éviter qu'une colonne se retrouve à <120px. */
@media (max-width: 1024px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Splits chart+sidebar : on retire la 2ᵉ colonne fixe pour empiler. */
  [style*="grid-template-columns:7fr 3fr"],
  [style*="grid-template-columns: 7fr 3fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns:2fr 3fr"],
  [style*="grid-template-columns: 2fr 3fr"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 300px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Tablette portrait (≤ 768px) : 3 cols restantes → 2 cols ; les grids
   en 2 cols restent en 2 cols (gap réduit). */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* 2 cols : on garde 2 cols mais on resserre le gap pour ne pas
     comprimer les valeurs financières. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    gap: 10px !important;
  }
}

/* Mobile (≤ 640px) : TOUT en 1 colonne pour rester lisible.
   Les valeurs financières et KPI sont trop comprimées en 2 cols
   sur un écran de 360-480px (valeur de 6 chiffres + label). */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(2, 1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Grids auto-fit/auto-fill : on garde 1 col stricte sur mobile car
     les minmax (170-320px) laissent encore une 2ᵉ col cassée à 480px. */
  [style*="auto-fit,minmax(170px"],
  [style*="auto-fill,minmax(200px"],
  [style*="auto-fit,minmax(190px"],
  [style*="auto-fill,minmax(260px"],
  [style*="auto-fill,minmax(220px"],
  [style*="auto-fill,minmax(300px"],
  [style*="auto-fill,minmax(320px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── 10-BIS. CHARTS SVG inline des pages BP ──────────────────────
   On NE FORCE PAS de règle générique sur les SVG des pages BP : trop
   risqué (capture des icônes Lucide). À la place :
   • Les charts qui veulent être responsive doivent ajouter `data-chart`
     sur leur SVG OU être englobés dans un conteneur de classe connue.
   • La règle ci-dessous cible UNIQUEMENT les SVG explicitement marqués
     pour rester safe.                                                  */
.main-content [data-chart] svg,
.main-content .chart-wrap svg {
  max-width: 100%;
}

/* ── 11. CARDS produits/employés/loans : padding compact mobile  */
@media (max-width: 640px) {
  .produit-card,
  .employe-card,
  .loan-card,
  .invest-card,
  .invoice-card,
  .stat-card {
    padding: 14px !important;
  }
}
@media (max-width: 480px) {
  .produit-card,
  .employe-card,
  .loan-card,
  .invest-card,
  .invoice-card,
  .stat-card {
    padding: 12px !important;
  }
  /* Headers de page avec actions à droite : passe en colonne. */
  .page-header__actions {
    width: 100%;
  }
  .page-header__actions .btn {
    flex: 1;
  }
}

/* ── 11-BIS. CARDS inline "kpi/dash" des pages BP — padding & font ──
   Beaucoup de cards dans les pages projet sont inline avec un padding
   var(--sp-5/6) qui devient trop large sur mobile (la valeur déborde,
   le label est tronqué). On uniformise ici via sélecteurs d'attribut.  */
@media (max-width: 640px) {
  /* Cards inline avec un fond + bordure + radius : on cible les motifs
     courants des pages BP sans toucher aux composants nommés.          */
  .main-content [style*="background:var(--bg-1)"][style*="border:1px solid"],
  .main-content [style*="background:#fff"][style*="border:1px solid"],
  .main-content [style*="background:#FFFFFF"][style*="border:1px solid"],
  .main-content [style*="background:var(--surface-1)"][style*="border:1px solid"] {
    padding: 12px 14px !important;
  }
  /* Tailles de police énormes (KPI inline) compactées sur mobile :
     les `font-size: var(--text-3xl/2xl)` poussent souvent le contenu. */
  .main-content [style*="font-size:var(--text-3xl)"] {
    font-size: 22px !important;
  }
  .main-content [style*="font-size:var(--text-2xl)"] {
    font-size: 18px !important;
  }
  /* Labels uppercase qui débordent : autoriser le wrap. */
  .main-content [style*="text-transform:uppercase"][style*="letter-spacing"] {
    word-break: keep-all;
  }
}

/* ── 11-TER. Cards Chart-card du dashboard SPA ──────────────────
   Les wrappers SVG (charts inline finance/personnel) ont souvent
   `min-width: 0` manquant : le SVG fixe les pousse au-delà du parent.
   On force le min-width: 0 sur tous les enfants des grids pour
   permettre le shrink natif.                                          */
.main-content [style*="display:grid"] > * {
  min-width: 0;
}
.main-content [style*="display:flex"] > * {
  min-width: 0;
}

/* ── 12. INPUTS, SELECT, TEXTAREA : largeur 100% mobile ───────── */
@media (max-width: 640px) {
  .field__input,
  .field__select,
  .field__textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    max-width: 100%;
    width: 100%;
  }
}

/* ── 13. CABINET — listes clients + invitations adaptatives ──── */
@media (max-width: 768px) {
  /* Avatars + nom + actions : passent en flex-wrap. */
  .cabinet-client-row,
  .cabinet-invitation-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ── 14. SETTINGS — section split (sidebar interne + form) ───── */
@media (max-width: 900px) {
  .settings-shell {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
  }
}

/* ── 15. AUTH PAGES — illustrations cachées en mobile ────────── */
@media (max-width: 768px) {
  .auth-layout {
    grid-template-columns: 1fr !important;
  }
  .auth-layout__panel { display: none !important; }
}

/* ── 16. CHARTS dashboard front (preview du BP en SPA) ─────────
   ATTENTION : ne pas cibler `.dashboard-grid svg` génériquement, car
   les cards du dashboard contiennent des icônes Lucide qui seraient
   forcées à `width:100%` (icônes surdimensionnées).
   On cible UNIQUEMENT les SVG explicitement marqués `[data-chart]`. */
[data-chart] svg {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ── 17. GRANDS ÉCRANS (≥ 1600px) : plein écran pour les pages BP ───
   Les pages projet (description, ecosysteme, finance, etc.) utilisent
   TOUTE la largeur disponible sur grand écran. Les grids auto-fill /
   auto-fit gardent leur layout naturel (= horizontal, plusieurs
   colonnes selon la largeur disponible).                              */
@media (min-width: 1600px) {
  .app-layout .main-content {
    max-width: 100%;
    padding-left: var(--sp-8);
    padding-right: var(--sp-8);
  }
  /* Cards description BP : la cellule minimale grandit pour que chaque
     card soit large et lisible (≥ 520 px) sur grand écran. */
  .bp-desc-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)) !important;
    gap: var(--sp-5) !important;
  }
}
@media (min-width: 1920px) {
  /* Ultra-large : on permet aux cards d'occuper encore plus d'espace. */
  .bp-desc-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(620px, 1fr)) !important;
    gap: var(--sp-6) !important;
  }
}

/* ── 39. INVOICE ROWS responsive : passage en wrap sous 1100 px ── */
@media (max-width: 1100px) {
  .invoice-row {
    grid-template-columns: auto 1fr auto !important;
    grid-auto-rows: auto;
  }
  .invoice-row > *:nth-child(n+4) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .invoice-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .invoice-row > *:nth-child(8) {
    justify-content: flex-end;
  }
}

/* ── 18. ULTRA-LARGE (≥ 1920px) : on garde le contenu à 100 % ─────
   Sur écrans très larges, le contenu BP continue à occuper toute la
   largeur — les pages settings/dashboard restent cappées pour la
   lisibilité.                                                          */
@media (min-width: 1920px) {
  .app-layout .main-content {
    max-width: 100%;
    padding-left: var(--sp-10);
    padding-right: var(--sp-10);
  }
  /* Pages hors-BP (settings) : cap raisonnable pour la lisibilité. */
  body:not(:has(.app-layout)) .main-content,
  .page-content:not(.app-layout .page-content) {
    max-width: 1800px;
  }
}

/* ── 19. PRINT — masque la chrome (navbar, sidebar, toasts) ───── */
@media print {
  .navbar,
  .sidebar,
  .sidebar-overlay,
  .toast-container,
  #navbar-bell-menu,
  #navbar-user-menu,
  #navbar-guest-menu,
  #sidebar-guest-info button { display: none !important; }
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
}

/* ── 20. ULTRA-SMALL (≤ 360px) : compactage final ──────────────── */
@media (max-width: 360px) {
  .navbar { padding: 0 8px; gap: 6px; }
  .navbar__logo span { font-size: 14px; }
  .main-content { padding: 12px; }
  .stat-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   AUDIT FINAL — chaque type d'élément vérifié et durci
   ============================================================ */

/* ── 21. ICÔNES LUCIDE — flex-shrink:0 + protection contre les
   surcharges globales sur `svg`.

   Après `lucide.createIcons()`, le `<i data-lucide>` est remplacé par
   `<svg data-lucide="x" class="lucide lucide-x" style="…">`. Le style
   inline contient déjà la bonne `width`/`height`/`flex-shrink:0`,
   mais certaines règles globales du reset/components peuvent perturber.
   On réaffirme ici les comportements clés.                          */
svg[data-lucide],
i[data-lucide] {
  flex-shrink: 0 !important;
  /* On NE force PAS la largeur : on respecte le style="width:Npx"
     inline qui est posé par Icons.* dans icons.js. */
}
/* Conteneurs d'icônes nommés : flex-shrink:0 explicite (sécurité). */
.btn svg,
.btn i,
.sidebar__item svg,
.sidebar__item i,
.sidebar__icon,
.sidebar__icon svg,
.sidebar__icon i,
.field__label svg,
.field__label i,
.navbar__actions svg,
.navbar__actions i {
  flex-shrink: 0;
}

/* Si le min-width:0 universel cassait les icônes (cf §11-ter), on
   les exclut explicitement de ce comportement.                      */
.main-content [style*="display:grid"] > svg[data-lucide],
.main-content [style*="display:grid"] > i[data-lucide],
.main-content [style*="display:flex"] > svg[data-lucide],
.main-content [style*="display:flex"] > i[data-lucide] {
  min-width: auto;
}

/* ── 22. BOUTONS — wrap des labels longs en mobile ────────────────
   `.btn` a `white-space: nowrap` par défaut → un label long déborde.
   Sur mobile, on autorise le wrap multi-ligne avec `text-align:center`
   pour ne pas tronquer mais préserver la hauteur du bouton.           */
@media (max-width: 640px) {
  .btn:not(.btn--icon) {
    white-space: normal;
    line-height: 1.2;
    text-align: center;
    /* Hauteur libre, padding vertical pour aérer les labels multi-ligne. */
    height: auto;
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
    word-break: keep-all;
    hyphens: auto;
  }
  .btn--sm:not(.btn--icon) {
    min-height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .btn--lg:not(.btn--icon) {
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Boutons d'action dans les barres d'outils : permettent le wrap. */
  [style*="display:flex"][style*="gap"] > .btn {
    flex: 1 1 auto;
  }
}

/* ── 23. TEXTES LONGS — overflow, troncatures, wrap ──────────────
   Tout texte sous .main-content qui n'a pas explicitement un
   `white-space:nowrap` voulu doit autoriser le wrap pour éviter le
   débordement horizontal. Les emails, URL, noms de fichiers cassent
   sinon le layout.                                                    */
.main-content,
.main-content p,
.main-content div,
.main-content span,
.modal,
.modal p,
.modal div,
.modal span {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* Liens email / URL qui peuvent être très longs : forcent le break
   uniquement sur eux (sans casser les mots normaux ailleurs). */
a[href^="mailto:"],
a[href^="http"],
code,
.url-text,
[data-break-anywhere] {
  word-break: break-all;
}

/* ── 24. FORMULAIRES — labels alignés sur largeur disponible ─────
   Les labels et les hints doivent rester dans le viewport.
   `.field__label` est en flex avec un gap : sur mobile on autorise
   wrap pour éviter qu'un label long pousse le hint hors écran.       */
.field__label { flex-wrap: wrap; gap: 4px 8px; }
.field__hint  { white-space: normal; word-break: break-word; }
.field__error { white-space: normal; word-break: break-word; }
/* Les select avec options longues (plans, secteurs) : on laisse
   le contenu shrink. */
select.field__select,
.field__select {
  text-overflow: ellipsis;
}

/* ── 25. IMAGES / LOGOS — bornés au container ─────────────────────
   Les `<img>` avec width/height fixes dans les emails et autres
   templates doivent rester dans le viewport. La règle globale
   `max-width:100%; height:auto` couvre 99 % des cas, mais on
   sécurise spécifiquement les logos avec `object-fit:contain` pour
   préserver le ratio.                                                */
img[src*="/logo"],
img[alt*="logo"],
img[alt*="Logo"],
.navbar__logo img,
.auth-card__logo-img {
  object-fit: contain;
}
/* Avatar inline (couleur de fond + initiales) : flex-shrink:0 pour
   ne pas s'écraser à 0 dans un flex. */
[style*="border-radius:50%"][style*="flex-shrink"],
.navbar__avatar {
  flex-shrink: 0;
}

/* ── 26. BADGES / PILLS / CHIPS — ne débordent pas ───────────────
   Les badges ont des labels parfois longs ("Plan Pack Pro Premium").
   On autorise le wrap interne sans déformer le radius.               */
.badge,
[class*="chip--"],
[style*="border-radius:999px"][style*="padding"],
[style*="border-radius:9999px"][style*="padding"] {
  white-space: normal;
  word-break: keep-all;
  max-width: 100%;
}
@media (max-width: 480px) {
  /* En ultra-small, les badges deviennent compacts. */
  .badge {
    font-size: 9.5px;
    padding: 2px 6px;
  }
}

/* ── 27. DROPDOWNS / TOOLTIPS / POPOVERS positionnés ─────────────
   Tout élément `position:absolute` ou `position:fixed` doit rester
   dans le viewport. On borne via max-width et on autorise le scroll
   interne via max-height + overflow.                                 */
[style*="position:absolute"][style*="top:"],
[style*="position:fixed"][style*="top:"],
.tooltip,
.popover,
.dropdown,
[role="tooltip"],
[role="dialog"]:not(.modal) {
  max-width: calc(100vw - 16px);
}
/* Sécurité spécifique pour les dropdowns connus de l'app :
   bell, user, guest panneau, autres menus contextuels.              */
[id*="-menu"][style*="position:absolute"],
[id*="-dropdown"][style*="position:absolute"] {
  max-width: min(95vw, 360px) !important;
  max-height: min(80vh, 80dvh) !important;
  overflow-y: auto;
}

/* ── 28. FLEX CONTAINERS — gap, wrap, min-width:0 ────────────────
   Les containers flex avec `gap: var(--sp-3+)` peuvent forcer une
   ligne à dépasser quand la somme des enfants est large. On force
   `flex-wrap: wrap` sur les barres d'actions et toolbars.            */
@media (max-width: 640px) {
  /* Barres d'actions horizontales (boutons + filtres + recherche) :
     wrap autorisé pour empiler verticalement. */
  [style*="display:flex"][style*="justify-content:space-between"],
  [style*="display:flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  /* Headers de cards avec actions à droite : wrap. */
  [style*="display:flex"][style*="align-items:center"][style*="gap:"] {
    flex-wrap: wrap;
  }
}

/* ── 29. CODE BLOCKS / PRE — scroll horizontal interne ───────────
   Les blocs de code (clés API, JSON) débordent souvent en mobile.
   On les force en bloc scrollable.                                   */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  word-break: normal;
}
pre code { display: block; }

/* ── 30. SIDEBAR : items label tronqués proprement ───────────────
   Les items de sidebar ont parfois des labels longs ("Élément
   antérieur", "Emprunt & Investissement"). En desktop ils tiennent ;
   en mode mobile (sidebar 280px), on accepte le wrap multi-ligne.    */
@media (max-width: 1024px) {
  .sidebar__item {
    white-space: normal;
    line-height: 1.3;
  }
  .sidebar__item > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── 31. NAVBAR INVITÉE — badges supplémentaires en mobile ────────
   Sur ≤ 768px, on garde uniquement le bouton "Mon accès" : statut
   et durée sont visibles dans le panneau.                            */
@media (max-width: 768px) {
  /* Cible les badges statut/durée inline rendus dans la navbar guest. */
  .navbar > div:last-child > span:not(.navbar__logo) {
    display: none !important;
  }
}

/* ── 32. SETTINGS NAV ITEMS — overflow + ellipsis ────────────────
   Les `.settings-nav__item` ont label + desc qui peuvent déborder
   sur mobile (la sidebar interne passe en row flex-wrap).            */
@media (max-width: 900px) {
  .settings-nav__item {
    flex-shrink: 0;
  }
  .settings-nav__item > span:not(.settings-nav__icon) {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── 33. AUTOSAVE BAR + breadcrumb : scrollables si long ─────────
   L'autosave-bar et le breadcrumb sous projet-layout peuvent avoir
   un texte long ("Dernière modification il y a 2 minutes par Jean
   Dupont"). On les force en mono-ligne scrollable ou wrap.           */
@media (max-width: 640px) {
  #autosave-bar,
  [id*="autosave"] {
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 11px;
  }
}

/* ── 34. INPUTS NUMÉRIQUES — width pleine largeur mobile ──────────
   Les inputs financiers (montants) ont souvent `width:120px` ou
   `width:140px` inline. En mobile, on les force à 100 % pour ne
   pas casser le layout en flex.                                      */
@media (max-width: 480px) {
  input[type="number"][style*="width:"],
  input[type="text"][style*="width:1"] {
    width: 100% !important;
    max-width: 100%;
  }
}

/* ── 35. TABLEAUX BP — cellules numériques compactées en mobile ──
   Les tableaux financiers ont `font-size:11px` sur desktop. En
   mobile, on réduit légèrement et on serre le padding pour gagner
   en lisibilité sans casser la grille.                               */
@media (max-width: 640px) {
  .main-content table {
    font-size: 11px;
  }
  .main-content table th,
  .main-content table td {
    padding: 6px 8px !important;
  }
}

/* ── 36. SCROLL HORIZONTAL — indicateur visuel ───────────────────
   Quand un tableau scrolle horizontalement (overflow-x:auto), on
   ajoute un ombrage à droite pour signaler qu'il y a plus de contenu.
   Suggestion visuelle non-invasive.                                  */
@media (max-width: 1024px) {
  .table-wrap,
  [style*="overflow-x:auto"],
  [style*="overflow-x: auto"] {
    background:
      linear-gradient(to right, transparent 0, transparent 95%, rgba(0,0,0,.03) 100%)
      no-repeat right center / 20px 100%;
  }
}

/* ── 37. ABSOLUTE-POSITIONNÉS dans cards (icônes, badges flottants) */
/* Les éléments `position:absolute` dans les cards (badges premium,
   icônes décoratives) doivent rester dans la card sur mobile. */
.card [style*="position:absolute"],
[style*="position:relative"] > [style*="position:absolute"] {
  max-width: 90%;
}

/* ── 38. iOS Safari — fix du clavier qui pousse le contenu ───────
   Sur iOS, focus sur un input remonte le viewport. On force la
   height: auto sur le body si possible pour ne pas casser le scroll. */
@supports (-webkit-touch-callout: none) {
  html, body { height: auto; min-height: 100%; }
}