/*
 * Aperçus des sections du builder de landing pages : un squelette gris de la mise en page.
 * Seul le titre est lisible ; un élément manquant apparaît en orange, comme dans le plan.
 * Fichier CSS brut, publié par `php artisan filament:assets`.
 */
.lp-sk {
    --lp-sk-bar: #e5e7eb;
    --lp-sk-fill: #f3f4f6;
    --lp-sk-accent: #c8ecaa;
    --lp-sk-dark: #103a31;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #fff;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #6b7280;
    cursor: pointer;
}

.lp-sk * { box-sizing: border-box; }
.lp-sk-center { align-items: center; text-align: center; }
.lp-sk-center > .lp-sk-cols,
.lp-sk-center > .lp-sk-split,
.lp-sk-center > .lp-sk-stack { align-self: stretch; text-align: start; }

.lp-sk-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
}

.lp-sk-title-lg { font-size: 1.0625rem; }
.lp-sk-title-default { font-weight: 500; color: #9ca3af; }

.lp-sk-line { display: block; height: 0.4375rem; width: 100%; border-radius: 999px; background: var(--lp-sk-bar); flex-shrink: 0; }
.lp-sk-line-bold { height: 0.5625rem; background: #d1d5db; }
.lp-sk-w-20 { width: 20%; }
.lp-sk-w-40 { width: 40%; }
.lp-sk-w-60 { width: 60%; }
.lp-sk-w-80 { width: 80%; }

.lp-sk-button { display: block; height: 1.125rem; width: 5.5rem; border-radius: 0.375rem; background: var(--lp-sk-accent); flex-shrink: 0; }
.lp-sk-square { display: block; width: 1.125rem; height: 1.125rem; border-radius: 0.3125rem; background: #d1d5db; flex-shrink: 0; }
.lp-sk-dot { display: block; width: 0.625rem; height: 0.625rem; border-radius: 999px; background: #d1d5db; flex-shrink: 0; }

.lp-sk-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: 0.5rem;
    background: var(--lp-sk-fill);
    background-size: cover;
    background-position: center;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    padding: 0.5rem;
}

.lp-sk-box-tall { min-height: 5.5rem; }

.lp-sk-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    border: 1px dashed #f59e0b;
    border-radius: 0.5rem;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
}

.lp-sk-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: center; }
.lp-sk-stack { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.lp-sk-inline { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.lp-sk-cols { display: grid; grid-template-columns: repeat(var(--lp-sk-n, 3), minmax(0, 1fr)); gap: 0.5rem; }
.lp-sk-card { display: flex; flex-direction: column; gap: 0.375rem; border-radius: 0.5rem; background: var(--lp-sk-fill); padding: 0.5rem; min-width: 0; }
.lp-sk-card .lp-sk-line { background: #e0e2e6; }

.lp-sk-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-radius: 0.375rem; background: var(--lp-sk-fill); padding: 0.375rem 0.5rem; }
.lp-sk-row::after { content: "+"; color: #9ca3af; font-weight: 600; }

.lp-sk-timeline { border-top: 2px solid var(--lp-sk-bar); padding-top: 0.5rem; }
.lp-sk-timeline .lp-sk-dot { margin-top: -0.8125rem; }

.lp-sk-dark { background: var(--lp-sk-dark); }
.lp-sk-dark .lp-sk-title { color: #fff; }
.lp-sk-dark .lp-sk-line,
.lp-sk-card.lp-sk-dark .lp-sk-line { background: rgba(255, 255, 255, 0.2); }
.lp-sk-dark .lp-sk-box { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); }
.lp-sk-box.lp-sk-dark { color: rgba(255, 255, 255, 0.85); }

.dark .lp-sk { background: rgba(255, 255, 255, 0.03); color: #9ca3af; }
.dark .lp-sk-title { color: #f9fafb; }
.dark .lp-sk-title-default { color: #6b7280; }
.dark .lp-sk-line, .dark .lp-sk-square, .dark .lp-sk-dot { background: rgba(255, 255, 255, 0.12); }
.dark .lp-sk-box, .dark .lp-sk-card, .dark .lp-sk-row { background: rgba(255, 255, 255, 0.05); color: #9ca3af; }
.dark .lp-sk-missing { background: rgba(245, 158, 11, 0.1); color: #fbbf24; }

@media (max-width: 640px) {
    .lp-sk-split { grid-template-columns: minmax(0, 1fr); }
    .lp-sk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Aperçu Google (onglet SEO) */
.lp-serp { font-family: Arial, sans-serif; background: #fff; border-radius: 0.75rem; padding: 1rem; border: 1px solid #e5e7eb; }
.lp-serp-site { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #202124; }
.lp-serp-favicon { width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--lp-sulu-300, #b4e782); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #103a31; font-size: 0.6875rem; }
.lp-serp-url { color: #4d5156; }
.lp-serp-title { color: #1a0dab; font-size: 1.125rem; line-height: 1.3; margin: 0.375rem 0 0.25rem; }
.lp-serp-description { color: #4d5156; font-size: 0.8125rem; line-height: 1.5; }


/*
 * Plan de la page (libellés du builder, cf. BlockOutline) : numéro, type, titre tronqué, état.
 */
.fi-fo-builder-item-header-label:has(.lp-outline) {
    flex: 1;
    min-width: 0;
}

.lp-outline {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    font-size: 0.875rem;
}

.lp-outline-number {
    flex-shrink: 0;
    min-width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lp-outline-type {
    flex-shrink: 0;
    font-weight: 600;
    color: #111827;
}

.lp-outline-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    color: #6b7280;
}

.lp-outline-status {
    flex-shrink: 0;
    border-radius: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.lp-outline-status-ready {
    background: #e8f6d9;
    color: #2f4d1a;
}

.lp-outline-status-todo {
    background: #fef3c7;
    color: #92400e;
}

.lp-outline-status-auto {
    background: #f3f4f6;
    color: #4b5563;
}

.lp-outline-summary {
    font-size: 0.875rem;
    color: #4b5563;
}

.dark .lp-outline-type {
    color: #f9fafb;
}

.dark .lp-outline-number,
.dark .lp-outline-status-auto {
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
}

.dark .lp-outline-title,
.dark .lp-outline-summary {
    color: #9ca3af;
}

/*
 * Menu « Ajouter une section » : type, rôle dans la page et une phrase d'explication.
 */
.lp-picker {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    white-space: normal;
    text-align: start;
}

.lp-picker-label {
    font-weight: 600;
}

.lp-picker-group {
    margin-inline-start: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.lp-picker-description {
    font-size: 0.75rem;
    line-height: 1.35;
    color: #6b7280;
}

/*
 * En-tête de la page de modification : statut et adresse de la landing page.
 */
.lp-page-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.lp-page-status {
    border-radius: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.lp-page-status-published { background: #e8f6d9; color: #2f4d1a; }
.lp-page-status-scheduled { background: #e0f2fe; color: #075985; }
.lp-page-status-draft { background: #f3f4f6; color: #4b5563; }
.lp-page-url { color: #6b7280; }

.dark .lp-page-status-draft { background: rgba(255, 255, 255, 0.08); color: #d1d5db; }
.dark .lp-page-url { color: #9ca3af; }

/* Sections repliées en erreur, listées sous le plan. */
.lp-block-errors {
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    background: #fef2f2;
    color: #991b1b;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.lp-block-errors ul { margin: 0.375rem 0 0; padding-inline-start: 1.125rem; list-style: disc; }
.dark .lp-block-errors { border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.08); color: #fca5a5; }