/* ===== Doboxee — améliorations mobile (espace client) v9 ===== */

/* ---------- Titre de page animé (PC + mobile) ---------- */
@keyframes dbxShine { to { background-position: 200% center; } }

/* Tableau de bord (Filament) : réafficher le titre + dégradé animé comme "Déposer" */
.fi-panel-dashboard .fi-header { display: block !important; margin-bottom: 4px !important; }
.fi-panel-dashboard .fi-header-heading {
  background: linear-gradient(to right, #12302c, #5c60f2, #b3199e) !important;
  background-size: 200% auto !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: dbxShine 6s linear infinite;
}

@media (max-width: 900px) {

  /* L'ancien menu secondaire est remplacé par la barre d'onglets du bas */
  .customer-nav { display: none !important; }

  /* Titre du dashboard un peu plus compact sur mobile */
  .fi-panel-dashboard .fi-header-heading { font-size: 26px !important; line-height: 1.15 !important; }

  /* ---------- Pages Vue (Déposer / Mon compte) ---------- */

  /* Réduire le grand vide en haut (juste ce qu'il faut pour passer sous le header) */
  main.relative.flex { padding-top: 96px !important; overflow-x: hidden !important; }
  main.items-start { row-gap: 8px !important; }

  /* Grilles multi-colonnes -> 1 colonne */
  main [class*="grid-cols"] { grid-template-columns: 1fr !important; }
  main [class*="max-w-["] { max-width: 100% !important; }

  /* Champs pleine largeur */
  main input:not([type=checkbox]):not([type=radio]), main select, main textarea { width: 100% !important; max-width: 100% !important; }

  /* ---------- Déposer : titre compact + on masque les 3 étapes explicatives ---------- */
  main.items-start h1 { font-size: 23px !important; line-height: 1.15 !important; }
  main.items-start p.mt-6 { font-size: 14px !important; margin-top: 8px !important; }
  main.items-start .mt-10.flex.flex-col.gap-6 { display: none !important; }
  main.items-start section.justify-center { justify-content: flex-start !important; }
  main.items-start .my-6 { margin: 10px 0 !important; }

  /* ---------- Mon compte : garder le titre animé, masquer juste le paragraphe ---------- */
  main.items-center .flex-col.items-center.text-center.mb-2 { display: block !important; margin-bottom: 6px !important; padding-left: 12px !important; padding-right: 12px !important; }
  main.items-center .flex-col.items-center.text-center.mb-2 h1 { font-size: 26px !important; line-height: 1.15 !important; }
  main.items-center .flex-col.items-center.text-center.mb-2 p { display: none !important; }

  /* Mon compte : cartes pleine largeur, marges internes réduites au strict nécessaire
     pour laisser tenir le widget Cloudflare (300px fixes) sans débordement */
  main.items-center { overflow-x: hidden !important; }
  main.items-center .grid { padding-left: 8px !important; padding-right: 8px !important; margin-top: 10px !important; gap: 16px !important; }
  main.items-center .profile-accordion-content { padding-left: 10px !important; padding-right: 10px !important; }
  main.items-center section { padding: 12px !important; min-width: 0 !important; max-width: 100% !important; }

  /* Turnstile Cloudflare : centré et jamais plus large que la carte */
  main.items-center .cf-turnstile { width: 100% !important; overflow: hidden !important; display: flex !important; justify-content: center !important; }
  main.items-center .cf-turnstile iframe { max-width: 100% !important; }

  /* Textes d'aide (formats de fichiers) plus courts visuellement */
  .upload-file-help { font-size: 11px !important; line-height: 1.35 !important; }

  /* ---------- Tableau de bord (Filament) ---------- */
  .fi-main { padding-top: 8px !important; }
  .fi-page section { padding-top: 8px !important; padding-bottom: 8px !important; gap: 12px !important; }
  .fi-ta-cell, .fi-ta-header-cell { padding: 8px !important; font-size: 12.5px !important; }
}

/* Écrans très étroits (<= 360px) : le widget Cloudflare 300px est mis à l'échelle pour toujours tenir */
@media (max-width: 360px) {
  main.items-center .cf-turnstile > * { transform: scale(0.9); transform-origin: center top; }
}

/* ===== Stripe Connect : fond clair + bloc centre ===== */
.stripe-embedded-surface{background:#ffffff!important;border:1px solid #e6e2ef!important;border-radius:20px!important;overflow-x:auto!important}
.stripe-embedded-surface > *,.stripe-embedded-surface stripe-connect-account-onboarding{display:block!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}

/* Stripe mobile : plein ecran (hors cadre) => le composant a toute la place et se centre */
@media (max-width:900px){
  .stripe-embedded-surface{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;border:0!important;border-radius:0!important;background:#ffffff!important;overflow-x:hidden!important;padding-left:10px!important;padding-right:10px!important}
  .stripe-embedded-surface > *,.stripe-embedded-surface stripe-connect-account-onboarding{width:100%!important;max-width:100%!important;display:block!important;margin-left:auto!important;margin-right:auto!important}
}