/* =====================================================================
   Hotfix 2026-04-29 — login panel gauche disparu en prod.
   Le bundle Tailwind ne contient pas md:flex / md:w-1/2 / lg:w-1/2 /
   xl:p-14 / xl:text-5xl utilisés par layouts/auth.blade.php (panneau
   marketing gauche). Sans ces règles, la div reste `hidden` à toutes
   les tailles d'écran. À conserver tant que Tailwind est pré-compilé.
   ===================================================================== */
@media (min-width: 768px) {
    .md\:flex { display: flex !important; }
    .md\:hidden { display: none !important; }
    .md\:w-1\/2 { width: 50%; }
    .md\:p-12 { padding: 3rem; }
}
@media (min-width: 1024px) {
    .lg\:w-1\/2 { width: 50%; }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:p-12 { padding: 3rem; }
}
@media (min-width: 1280px) {
    .xl\:p-14 { padding: 3.5rem; }
    .xl\:text-5xl { font-size: 3rem; line-height: 1; }
}
@media (min-width: 640px) {
    .sm\:p-10 { padding: 2.5rem; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   safelist.css — Classes Tailwind absentes du bundle pré-compilé
   =====================================================================
   ⚠️  DO NOT DELETE — CRITICAL FILE
   ⚠️  DO NOT REPLACE BY A FUTURE `npm run build` WITHOUT MIGRATING THESE RULES

   Le bundle Tailwind (public/build/assets/app-*.css) est généré une fois
   pour toutes (Vite build). Toutes les classes utilisées dans les Blade
   ne sont pas forcément scannées au moment du build, donc certaines sont
   absentes du bundle final → le rendu est cassé.

   Ce fichier est chargé GLOBALEMENT depuis les 4 layouts (app, auth,
   user, admin) et ré-implémente "à la main" les classes manquantes.
   Audit complet du 2026-04-27 — Marc.

   À retirer le jour où on remet en place un Vite build local + safelist
   dans tailwind.config.js. En attendant, c'est la solution propre.

   Wave 2 Infra 2026-04-29 (P1-13, P2-6) :
   - Future-proof : si quelqu'un réintroduit un `npm run build`, vérifier
     que `tailwind.config.js` contient un `safelist:` avec TOUTES les classes
     listées ici (lookups grep `\.\(text\|bg\|border\|ring\|from\|to\)-(amber|emerald|rose|...)`)
   - Sinon : conserver ce fichier en chargement direct dans les layouts
     (`<link rel="stylesheet" href="/css/safelist.css?v=…">`) AVANT le bundle
     Vite, pour qu'il ne soit pas écrasé par les classes Tailwind générées.
   - Validation existence : un script CI bash (futur) pourra check
     `[ -f public/css/safelist.css ] || exit 1` post-deploy.
   ===================================================================== */

/* ---------- Animations manquantes ---------- */
@keyframes _safelist_ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping {
    animation: _safelist_ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ---------- Numérique tabular ---------- */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------- Line clamp 3 (excerpts blog, bios) ---------- */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Aspect ratios arbitrary ---------- */
.aspect-\[16\/9\]  { aspect-ratio: 16 / 9; }
.aspect-\[9\/16\]  { aspect-ratio: 9 / 16; }
.aspect-\[4\/3\]   { aspect-ratio: 4 / 3; }
.aspect-\[3\/2\]   { aspect-ratio: 3 / 2; }
.aspect-\[21\/9\]  { aspect-ratio: 21 / 9; }
.aspect-\[1\.91\/1\] { aspect-ratio: 1.91 / 1; }

/* ---------- Grille auto-rows-fr (égalisation hauteurs cards blog) ---------- */
.auto-rows-fr { grid-auto-rows: 1fr; }

/* ---------- Padding/margin arbitrary utilisés par overlays ---------- */
.pt-\[10vh\] { padding-top: 10vh; }
.pt-\[15vh\] { padding-top: 15vh; }
.pb-\[10vh\] { padding-bottom: 10vh; }
.mt-\[10vh\] { margin-top: 10vh; }

/* ---------- Min tap targets WCAG 44px ---------- */
.min-w-\[44px\] { min-width: 44px; }
.min-h-\[44px\] { min-height: 44px; }
.min-w-\[48px\] { min-width: 48px; }
.min-h-\[48px\] { min-height: 48px; }

/* ---------- Min widths utilitaires (tables admin scrollables) ---------- */
.min-w-\[600px\]  { min-width: 600px; }
.min-w-\[800px\]  { min-width: 800px; }
.min-w-\[1000px\] { min-width: 1000px; }
.min-w-\[1200px\] { min-width: 1200px; }

/* ---------- Couleurs amber étoiles + accents ---------- */
.text-amber-300 { color: #fcd34d; }
.text-amber-400 { color: #fbbf24; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.bg-amber-300  { background-color: #fcd34d; }
.bg-amber-400  { background-color: #fbbf24; }
.bg-amber-500  { background-color: #f59e0b; }  /* Bandeau impersonate (user + admin) */
.bg-amber-950  { background-color: #451a03; }  /* Texte/bouton sur bandeau impersonate */
.bg-amber-900  { background-color: #78350f; }  /* hover bouton bandeau impersonate */
.text-amber-50  { color: #fffbeb; }
.text-amber-950 { color: #451a03; }
.hover\:bg-amber-900:hover { background-color: #78350f; }
.border-amber-300 { border-color: #fcd34d; }
.border-amber-400 { border-color: #fbbf24; }

/* Opacités amber slash (pills, ribbons) */
.bg-amber-100\/50  { background-color: rgba(254, 243, 199, 0.5); }
.bg-amber-200\/30  { background-color: rgba(253, 230, 138, 0.3); }
.bg-amber-300\/30  { background-color: rgba(252, 211, 77, 0.3); }
.bg-amber-400\/15  { background-color: rgba(251, 191, 36, 0.15); }
.bg-amber-400\/20  { background-color: rgba(251, 191, 36, 0.2); }
.bg-amber-400\/30  { background-color: rgba(251, 191, 36, 0.3); }
.bg-amber-500\/10  { background-color: rgba(245, 158, 11, 0.1); }
.bg-amber-500\/20  { background-color: rgba(245, 158, 11, 0.2); }
.border-amber-200\/50 { border-color: rgba(253, 230, 138, 0.5); }
.border-amber-300\/30 { border-color: rgba(252, 211, 77, 0.3); }
.border-amber-300\/80 { border-color: rgba(252, 211, 77, 0.8); }
.ring-amber-300\/80 { --tw-ring-color: rgba(252, 211, 77, 0.8); }

/* ---------- Couleurs violet/fuchsia (auth, admin IA blog, hover services) ---------- */
.bg-violet-50   { background-color: #f5f3ff; }
.bg-violet-100  { background-color: #ede9fe; }
.bg-violet-200  { background-color: #ddd6fe; }
.bg-violet-300  { background-color: #c4b5fd; }
.bg-violet-400  { background-color: #a78bfa; }
.bg-violet-500  { background-color: #8b5cf6; }
.bg-violet-600  { background-color: #7c3aed; }
.bg-violet-700  { background-color: #6d28d9; }
.bg-violet-800  { background-color: #5b21b6; }
.bg-violet-900  { background-color: #4c1d95; }
.text-violet-500 { color: #8b5cf6; }
.text-violet-600 { color: #7c3aed; }
.text-violet-700 { color: #6d28d9; }
.text-violet-800 { color: #5b21b6; }
.text-violet-900 { color: #4c1d95; }
.border-violet-200 { border-color: #ddd6fe; }
.border-violet-300 { border-color: #c4b5fd; }
.border-violet-500 { border-color: #8b5cf6; }
.text-violet-100 { color: #ede9fe; }
.text-violet-200 { color: #ddd6fe; }
.text-violet-300 { color: #c4b5fd; }
.text-violet-400 { color: #a78bfa; }
.ring-violet-300 { --tw-ring-color: #c4b5fd; }
.ring-violet-400 { --tw-ring-color: #a78bfa; }
.ring-violet-500 { --tw-ring-color: #8b5cf6; }
.ring-violet-600 { --tw-ring-color: #7c3aed; }
.hover\:bg-violet-100:hover { background-color: #ede9fe; }
.hover\:bg-violet-200:hover { background-color: #ddd6fe; }
.hover\:bg-violet-500:hover { background-color: #8b5cf6; }
.hover\:bg-violet-600:hover { background-color: #7c3aed; }
.hover\:bg-violet-700:hover { background-color: #6d28d9; }
.hover\:bg-violet-800:hover { background-color: #5b21b6; }
.hover\:text-violet-700:hover { color: #6d28d9; }
.hover\:text-violet-800:hover { color: #5b21b6; }

/* Opacités violet slash (décor, cards, badges, hover overlays) */
.bg-violet-50\/30  { background-color: rgba(245, 243, 255, 0.3); }
.bg-violet-50\/50  { background-color: rgba(245, 243, 255, 0.5); }
.bg-violet-100\/50 { background-color: rgba(237, 233, 254, 0.5); }
.bg-violet-400\/30 { background-color: rgba(167, 139, 250, 0.3); }
.bg-violet-500\/10 { background-color: rgba(139, 92, 246, 0.1); }
.bg-violet-500\/20 { background-color: rgba(139, 92, 246, 0.2); }
.bg-violet-500\/30 { background-color: rgba(139, 92, 246, 0.3); }
.bg-violet-600\/80 { background-color: rgba(124, 58, 237, 0.8); }
.bg-violet-600\/90 { background-color: rgba(124, 58, 237, 0.9); }
.text-violet-700\/80 { color: rgba(109, 40, 217, 0.8); }
.border-violet-200\/50 { border-color: rgba(221, 214, 254, 0.5); }
.border-violet-300\/50 { border-color: rgba(196, 181, 253, 0.5); }

/* Fuchsia (décor auth + accents AI/blog) */
.bg-fuchsia-400 { background-color: #e879f9; }
.bg-fuchsia-500 { background-color: #d946ef; }
.bg-fuchsia-400\/30 { background-color: rgba(232, 121, 249, 0.3); }
.bg-fuchsia-400\/40 { background-color: rgba(232, 121, 249, 0.4); }
.bg-fuchsia-500\/20 { background-color: rgba(217, 70, 239, 0.2); }
.bg-fuchsia-500\/25 { background-color: rgba(217, 70, 239, 0.25); }
.bg-fuchsia-500\/30 { background-color: rgba(217, 70, 239, 0.3); }

/* ---------- Couleurs emerald slash (badges OK, success states) ---------- */
.bg-emerald-400\/15 { background-color: rgba(52, 211, 153, 0.15); }
.bg-emerald-400\/20 { background-color: rgba(52, 211, 153, 0.2); }
.bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1); }
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2); }
.border-emerald-300\/50 { border-color: rgba(110, 231, 183, 0.5); }

/* ---------- Couleurs rose/red slash (badges erreur) ---------- */
.bg-rose-400\/15 { background-color: rgba(251, 113, 133, 0.15); }
.bg-rose-400\/20 { background-color: rgba(251, 113, 133, 0.2); }
.bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.1); }
.bg-rose-500\/20 { background-color: rgba(244, 63, 94, 0.2); }
.text-rose-500\/70 { color: rgba(244, 63, 94, 0.7); }
.border-rose-300\/50 { border-color: rgba(253, 164, 175, 0.5); }
/* Audit 04-bugs F-28 (2026-04-29) : zone sensible refund admin/orders/show:825 */
.bg-rose-50\/40   { background-color: rgba(255, 241, 242, 0.4); }
.bg-rose-50       { background-color: #fff1f2; }
.border-rose-200  { border-color: #fecdd3; }
.text-rose-800    { color: #9f1239; }

/* ---------- Couleurs blue slash (badges info) ---------- */
.bg-blue-50\/40   { background-color: rgba(239, 246, 255, 0.4); }
.bg-blue-400\/15  { background-color: rgba(96, 165, 250, 0.15); }
.bg-blue-500\/10  { background-color: rgba(59, 130, 246, 0.1); }
.bg-blue-500\/20  { background-color: rgba(59, 130, 246, 0.2); }
.bg-blue-600      { background-color: #2563eb; }
.bg-blue-700      { background-color: #1d4ed8; }
.hover\:bg-blue-600:hover { background-color: #2563eb; color: #fff; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; color: #fff; }

/* ---------- Brand colors avec opacity slash ---------- */
.bg-brand-secondary\/10 { background-color: rgba(124, 58, 237, 0.1); }
.bg-brand-secondary\/20 { background-color: rgba(124, 58, 237, 0.2); }
.bg-brand-secondary\/30 { background-color: rgba(124, 58, 237, 0.3); }
.bg-brand-secondary\/80 { background-color: rgba(124, 58, 237, 0.8); }
.bg-brand-secondary\/90 { background-color: rgba(124, 58, 237, 0.9); }
.bg-brand-primary\/10   { background-color: rgba(79, 66, 255, 0.1); }
.bg-brand-primary\/20   { background-color: rgba(79, 66, 255, 0.2); }
.bg-brand-primary\/30   { background-color: rgba(79, 66, 255, 0.3); }
.bg-brand-dark\/40      { background-color: rgba(23, 20, 47, 0.4); }
.bg-brand-dark\/60      { background-color: rgba(23, 20, 47, 0.6); }
.bg-brand-dark\/80      { background-color: rgba(23, 20, 47, 0.8); }
.text-brand-secondary\/70 { color: rgba(124, 58, 237, 0.7); }
.text-brand-secondary\/80 { color: rgba(124, 58, 237, 0.8); }
.border-brand-secondary\/30 { border-color: rgba(124, 58, 237, 0.3); }
.hover\:bg-brand-dark:hover { background-color: #17142f; color: #fff; }

/* ---------- Tracking arbitrary (eyebrows blog) ---------- */
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }

/* ---------- Z-index arbitrary (modales, overlays) ----------
   Stack global du projet (audit 2026-04-28) :
     z-10  : sticky table headers, kpi-card overlays
     z-20  : sticky page headers, mobile backdrop sidebar
     z-30  : sidebar fixed (admin, user)
     z-40  : nav publique sticky
     z-50  : modals (_confirm-modal, _danger_zone), cookie banner, skip-to-content
     z-[60..70] : overlays au-dessus des modals (combobox in-modal, tooltips)
     z-[100] : top-most (dev/debug overlays)
   Toujours déclarer un z- explicite quand on ajoute un overlay/modal pour
   éviter les conflits avec les sticky/sidebar.
*/
.z-\[60\]  { z-index: 60; }
.z-\[70\]  { z-index: 70; }
.z-\[100\] { z-index: 100; }

/* ---------- Width/height arbitrary ---------- */
.w-\[1px\]  { width: 1px; }
.h-\[1px\]  { height: 1px; }
.w-\[2px\]  { width: 2px; }
.h-\[2px\]  { height: 2px; }
.w-\[420px\] { width: 420px; }
.w-\[500px\] { width: 500px; }
.h-\[420px\] { height: 420px; }
.h-\[500px\] { height: 500px; }

/* Max-heights viewport-relative (modals plein écran mobile, dropdowns search) */
.max-h-\[60vh\] { max-height: 60vh; }
.max-h-\[70vh\] { max-height: 70vh; }
.max-h-\[85vh\] { max-height: 85vh; }
.max-h-\[90vh\] { max-height: 90vh; }

/* ---------- Gradients personnalisés (cards, hero, badges AI blog) ---------- */
.from-violet-50  { --tw-gradient-from: #f5f3ff; --tw-gradient-to: rgb(245 243 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-violet-100 { --tw-gradient-from: #ede9fe; --tw-gradient-to: rgb(237 233 254 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-violet-500 { --tw-gradient-from: #8b5cf6; --tw-gradient-to: rgb(139 92 246 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-violet-600 { --tw-gradient-from: #7c3aed; --tw-gradient-to: rgb(124 58 237 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-violet-600  { --tw-gradient-stops: var(--tw-gradient-from), #7c3aed, var(--tw-gradient-to, rgb(124 58 237 / 0)); }
.to-violet-50    { --tw-gradient-to: #f5f3ff; }
.to-violet-100   { --tw-gradient-to: #ede9fe; }
.to-violet-600   { --tw-gradient-to: #7c3aed; }
.to-violet-700   { --tw-gradient-to: #6d28d9; }
.to-violet-800   { --tw-gradient-to: #5b21b6; }
.from-fuchsia-400 { --tw-gradient-from: #e879f9; --tw-gradient-to: rgb(232 121 249 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-fuchsia-500 { --tw-gradient-from: #d946ef; --tw-gradient-to: rgb(217 70 239 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-fuchsia-400   { --tw-gradient-to: #e879f9; }
.to-fuchsia-500   { --tw-gradient-to: #d946ef; }
.to-fuchsia-600   { --tw-gradient-to: #c026d3; }

/* ---------- prose-invert minimaliste pour rich blocks dark ---------- */
.prose-invert h1, .prose-invert h2, .prose-invert h3,
.prose-invert h4, .prose-invert h5, .prose-invert h6 { color: #fff; }
.prose-invert p, .prose-invert li, .prose-invert blockquote { color: rgba(255,255,255,0.9); }
.prose-invert a { color: #fff; text-decoration: underline; }
.prose-invert strong { color: #fff; }

/* ---------- Audit 2026-04-28 : opacités slash sur couleurs non-white ----------
 * Le bundle Tailwind pré-compilé (public/build/assets/app-*.css) ne contient PAS
 * ces variantes. Sans ces overrides, on perd silencieusement la couleur ou la
 * bordure (cf admin/dashboard cards deposits/tickets, bandeau "économie volume"
 * sur user/orders/create, toast newsletter footer).
 * cf mémoire bf_tailwind_safe_classes — toujours ajouter ici les nouvelles
 * opacités slash sur couleurs non-white. */
.text-amber-700\/80     { color: rgba(180,83,9,.8); }
.text-blue-700\/80      { color: rgba(29,78,216,.8); }
.bg-amber-100\/40       { background-color: rgba(254,243,199,.4); }
.bg-amber-50\/40        { background-color: rgba(255,251,235,.4); }
.border-amber-200\/30   { border-color: rgba(253,230,138,.3); }
.border-amber-200\/60   { border-color: rgba(253,230,138,.6); }
.border-emerald-500\/20 { border-color: rgba(16,185,129,.2); }
.text-emerald-300       { color: #6ee7b7; }

/* ---------- Footer separators (audit UI front 2026-04-29 P2-09) ----------
 * Sépare les liens légaux du footer avec un divider neutre sans inline style. */
.footer-legal-row { gap: 8px 0; }
.footer-sep       { color: #64748b; font-size: 14px; line-height: 1; }
.footer-sep-link  { padding: 0 14px; }

/* ---------- Hyphens (audit UI front 2026-04-29 P2-02) ----------
 * Permet la coupure auto des locales longues (DE, PL, JA) dans le hero home. */
.hyphens-auto { hyphens: auto; -webkit-hyphens: auto; }
.hyphens-none { hyphens: none; -webkit-hyphens: none; }

/* ---------- Brand secondary slash sur background pour service show
 *            (audit UI front 2026-04-29 P2-10 — remplace bg-violet-600/80
 *            standard Tailwind par bg-brand-secondary/80 cohérent). */
.bg-brand-secondary\/40 { background-color: rgba(124, 58, 237, 0.4); }
.bg-brand-secondary\/50 { background-color: rgba(124, 58, 237, 0.5); }

/* ---------- Service card flex-shrink for star badge (P2-12) ---------- */
.flex-shrink-0 { flex-shrink: 0; }

/* ---------- prefers-reduced-motion : neutralise aussi animation-delay/iteration
 *            (audit UI front 2026-04-29 P2-08). La règle dans resources/css/app.css
 *            n'a effet qu'au rebuild Vite — on duplique ici pour les overrides
 *            inline `style="animation-delay:1s; animation-duration:5s"` qui
 *            outrepassaient le `animation-duration: 0.01ms` global. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}