/* ─────────────────────────────────────────────────────────────────
 * Blog extras CSS (avril 2026)
 *
 * Pourquoi ce fichier ?
 * ───────────────────
 * Le CSS Tailwind du site est pré-compilé statiquement (via Vite + JIT) à
 * partir des classes scannées dans les blades. Les classes ajoutées APRÈS le
 * dernier `npm run build` (notamment toute la palette `bg-violet-*`,
 * `text-violet-*`, `bg-amber-*` du module blog) NE SONT PAS dans le CSS final
 * → les boutons "⚡ Générer l'article", "🤖 Prompts IA", etc. apparaissent
 * blanc-sur-blanc (la classe `bg-violet-700` n'a aucun effet).
 *
 * Solution rapide sans rebuild Vite : on déclare les classes manquantes ici
 * en CSS plat (mêmes valeurs hex que la palette Tailwind par défaut), puis on
 * `@push('head')` ce fichier depuis les blades blog admin + public.
 *
 * Le jour où on rebuild les assets, ce fichier devient redondant mais
 * non-conflictuel (les couleurs sont strictement les mêmes).
 * ───────────────────────────────────────────────────────────────── */

/* Backgrounds violet */
.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 */
.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; }

/* Borders violet */
.border-violet-200 { border-color: #ddd6fe; }
.border-violet-300 { border-color: #c4b5fd; }
.border-violet-500 { border-color: #8b5cf6; }
.border-violet-600 { border-color: #7c3aed; }

/* Hover state violet */
.hover\:bg-violet-100:hover { background-color: #ede9fe; }
.hover\:bg-violet-200:hover { background-color: #ddd6fe; }
.hover\:bg-violet-700:hover { background-color: #6d28d9; }
.hover\:bg-violet-800:hover { background-color: #5b21b6; }
.hover\:border-violet-500:hover { border-color: #8b5cf6; }

/* Backgrounds amber (utilisés dans warning anti-markdown) */
.bg-amber-50  { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-200 { background-color: #fde68a; }

.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-amber-900 { color: #78350f; }

.border-amber-200 { border-color: #fde68a; }

/* Rose (badges erreur, suppressions) */
.bg-rose-50  { background-color: #fff1f2; }
.bg-rose-100 { background-color: #ffe4e6; }
.text-rose-600 { color: #e11d48; }
.text-rose-700 { color: #be123c; }
.text-rose-800 { color: #9f1239; }
.border-rose-200 { border-color: #fecdd3; }
.hover\:bg-rose-100:hover { background-color: #ffe4e6; }

/* Emerald (bouton "🎨 Générer image Ideogram", badges "5/5 langues", success) */
.bg-emerald-50   { background-color: #ecfdf5; }
.bg-emerald-100  { background-color: #d1fae5; }
.bg-emerald-600  { background-color: #059669; }
.bg-emerald-700  { background-color: #047857; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.border-emerald-200 { border-color: #a7f3d0; }
.hover\:bg-emerald-700:hover { background-color: #047857; }

/* Aspect ratio 16/9 (utilisé pour image hero) — Tailwind 3+ utilise aspect-* */
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }

/* scroll-mt-6 pour TOC ancres (admin/ai-prompts, blog/posts, etc.) */
.scroll-mt-6 { scroll-margin-top: 1.5rem; }

/* line-clamp (clamp à N lignes) — Tailwind 3.3+ */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Listes — utilisées dans le sommaire dépliable de show.blade.php */
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.marker\:text-slate-400::marker { color: #94a3b8; }
.marker\:font-semibold::marker { font-weight: 600; }

/* tabular-nums : numéros de page largeur fixe (pagination) */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Animation rotation chevron <details open> — sommaire & toggle "Voir défaut" admin */
details[open] > summary .group-open\:rotate-180 { transform: rotate(180deg); }
.group:not([open]) .group-open\:rotate-180 { transform: rotate(0deg); }
/* Sélecteur direct pour <details class="group" open> qui contient .group-open:rotate-180 */
details.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }

/* Couleurs hover pour boutons de partage social (LinkedIn / Facebook) — valeurs arbitraires
   Tailwind. Sans rebuild Vite, les classes [#hex] ne sont pas générées au build → on les
   pose ici en CSS plat. */
.hover\:bg-\[\#0A66C2\]:hover { background-color: #0A66C2; }    /* LinkedIn brand */
.hover\:bg-\[\#1877F2\]:hover { background-color: #1877F2; }    /* Facebook brand */
.hover\:bg-black:hover { background-color: #000; }              /* X (ex-Twitter) brand */
.hover\:text-white:hover { color: #fff; }

/* Audit UI front 2026-04-29 P2-19 : byline-row blog show — déplacé depuis le <style>
   inline scopé qui était au milieu du blade (debt CSS). Maintenant centralisé ici. */
.byline-row { font-size: 11px; }
@media (min-width: 640px) { .byline-row { font-size: 13px; } }
.byline-row .byline-update-label { display: none; }
@media (min-width: 640px) { .byline-row .byline-update-label { display: inline; } }