/* ============================================================
   _OVERRIDES — RELIQUAT EN COURS DE DISSOLUTION
   Les règles sans collision de sélecteur ont été rapatriées dans
   les partials propriétaires. Celles qui restent partagent des
   sélecteurs avec des règles antérieures de la cascade et doivent
   être fusionnées "en place" (remplacer la définition d'origine).
   Ne plus RIEN ajouter ici.
   ============================================================ */

/* UX 12 — Separator trash icon: white in dark mode, muted in light */
.agency-separator-block .delete-block {
    color: var(--agency-text-muted);
}

.agency-theme-dark .agency-separator-block .delete-block {
    color: #ffffff;
}

@media (max-width: 768px) {
    /* Activer la flèche retour */
    .agency-back-arrow {
        display: flex;
    }

    /* Afficher la liste de projets dans le panneau ouvert */
    .agency-header-right.is-open .agency-mobile-projects {
        display: block;
        padding: 12px 0;
        border-top: 1px solid var(--agency-border-color);
    }


    .agency-header-logo {
        height: 30px;
    }

    /* S'assurer que la flèche + logo sont alignés */
    .agency-header-left {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    /* Iframes vidéo responsive */
    .video-embed-container iframe,
    .video-embed-container video {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

/* --- 2. Design tokens : déplacés dans assets/css/tokens.css (valeurs identiques) --- */
/* --- 3. Button outline variant : déplacé dans assets/css/ui.css --- */
/* --- 4. Header: border-bottom for cleaner glassmorphism --- */
.agency-header-fixed {
    border-bottom: 1px solid var(--agency-border-color);
    box-shadow: none;
}

.block-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--agency-text-muted);
    margin-bottom: 20px;
    min-height: 1.4em;
    /* Surface visible en lecture comme en édition, claire ou sombre selon le thème */
    background: var(--agency-panel-bg);
    padding: 12px 16px;
    border-radius: var(--agency-radius-small);
}

.block-description[contenteditable="true"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--agency-primary-color);
    border-radius: var(--agency-radius-small);
}

/* --- 6. Cards: consistent border across block view panels --- */
.block-header-full,
.block-column-left,
.block-column-right {
    border: 1px solid var(--agency-border-color);
}

/* --- 7. Footer: consistent across all views --- */
.agency-footer {
    border-top: 1px solid var(--agency-border-color);
}

.agency-theme-dark .agency-form-input,
.agency-theme-dark select.agency-form-input,
.agency-theme-dark textarea.agency-form-input,
.agency-theme-dark input.agency-form-input {
    background: rgba(255, 255, 255, 0.05);
    color: var(--agency-text-color);
    border-color: var(--agency-border-color);
}

.agency-theme-dark .agency-form-input:focus {
    border-color: var(--agency-primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

/* --- 10. Dark mode: block-project-name badge --- */
.agency-theme-dark .block-project-name {
    background: rgba(255, 255, 255, 0.08);
    color: var(--agency-text-muted);
}

/* --- 11. Dark mode: block descriptions --- */
.agency-theme-dark .block-description {
    color: var(--agency-text-muted);
}

/* --- 12. Comment panel: subtle separator for storyboard/version --- */
.storyboard-comments,
.version-comments {
    border-left: 1px solid var(--agency-border-color);
    padding-left: 20px;
}

/* On mobile (single-column), convert to top border */
@media (max-width: 1024px) {
    .storyboard-comments,
    .version-comments {
        border-left: none;
        border-top: 1px solid var(--agency-border-color);
        padding-left: 0;
        padding-top: 20px;
    }
}

/* --- 13. Comment textarea: consistent styling --- */
.asset-comment-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--agency-border-color);
    border-radius: var(--agency-radius-small);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    background: var(--agency-surface-1, #ffffff);
    color: var(--agency-text-color);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    display: block;
}

.asset-comment-input:focus {
    outline: none;
    border-color: var(--agency-primary-color);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

/* --- 14. Mobile: wrap action rows on narrow screens --- */
@media (max-width: 600px) {
    .agency-actions {
        flex-wrap: wrap;
    }
    .agency-btn {
        white-space: normal;
    }
}

/* --- 15. Mobile: consistent column collapse --- */
@media (max-width: 768px) {
    .storyboard-item {
        grid-template-columns: 1fr;
    }
    .block-two-column-layout {
        grid-template-columns: 1fr;
    }
    .version-content-grid {
        grid-template-columns: 1fr;
    }
    .agency-actions {
        flex-wrap: wrap;
    }
}

/* --- 16. Touch devices: disable hover transforms --- */
@media (hover: none) {
    .agency-project-card:hover,
    .agency-block:hover {
        transform: none;
        box-shadow: var(--agency-shadow);
    }
    .agency-project-card:active,
    .agency-block.clickable-card:active {
        transform: scale(0.98);
    }
}

/* --- 20. Projects toolbar: consistent flex layout --- */
.agency-projects-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

/* --- 24. External links: consistent dark mode --- */
.agency-theme-dark .external-link-item {
    border-color: var(--agency-border-color);
    color: var(--agency-text-color);
}

.agency-theme-dark .external-link-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--agency-primary-color);
}

/* ========================================
   FOLLOW-UP FIXES
   ======================================== */
/* Fix 2 — block-header-full: padding + Ajouter un lien button width */
.agency-links {
    align-items: flex-start;
}

.block-header-full {
    padding-bottom: 28px;
}

/* Fix 3 — Block descriptions: remove duplicate type-specific margin-bottom rules
   (these classes also have .block-description which already provides consistent styling) */
.storyboard-description {
    margin-bottom: unset;
}

.video-description {
    margin-bottom: unset;
}

/* Fix 5 — Mobile hamburger: use fixed positioning so nav is always above content */
@media (max-width: 768px) {
    .agency-header-right {
        position: fixed;
        top: var(--agency-header-height);
        left: 0;
        right: 0;
    }
    body.admin-bar .agency-header-right {
        top: calc(var(--agency-header-height) + 46px);
    }
}

/* Fix 7 — Header logo overlap: CSS Grid 3-column layout */
.agency-header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.agency-header-left {
    justify-self: start;
}

.agency-header-center {
    position: static;
    transform: none;
    justify-self: center;
    pointer-events: auto;
}

.agency-header-right {
    justify-self: end;
}

/* Hamburger sits outside the grid flow, anchored to the right */
.agency-hamburger {
    grid-column: 3;
    justify-self: end;
}

/* On mobile: only 2 columns (left | hamburger), center logo hidden via existing conditional */
@media (max-width: 768px) {
    .agency-header-container {
        grid-template-columns: 1fr auto;
    }
    .agency-header-center {
        display: none;
    }
    .agency-header-right {
        grid-column: unset;
    }
    .agency-hamburger {
        grid-column: 2;
    }
}

body.agency-project-view .agency-subtitle {
    margin-top: 0;
    margin-bottom: 24px;
}

/* Repli polices emoji système pour les éléments à contenu mixte
 * (titres avec préfixe emoji, breadcrumb, badges) — non auto-remplacés
 * par AgencyEmoji car ils contiennent du texte. */
.breadcrumb-item,
.project-name-badge,
.agency-label {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
}

/* ========================================
   ROUND 3 FIXES
   ======================================== */
/* Fix A — Mobile hamburger: solid opaque background so page doesn't bleed through */
@media (max-width: 768px) {
    .agency-header-right {
        background: var(--agency-light-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        border: 1px solid var(--agency-border-color);
        border-top: none;
    }
}

/* More breathing room around block header action areas */
.agency-links {
    margin-bottom: 8px;
}

.agency-actions {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Also fix the non-focused base state: remove the broken --agency-bg-color fallback */
.block-description[contenteditable="true"],
.script-description[contenteditable="true"] {
    color: var(--agency-text-color);
}

.block-description[contenteditable="true"]:focus,
.script-description[contenteditable="true"]:focus {
    background: var(--agency-surface-1, #ffffff);
    color: var(--agency-text-color);
}

/* ============================================================
 * Accents — pilotés exclusivement par la couleur du client
 * (--agency-primary-color). Les thèmes (Aurora, Sunset, etc.)
 * ne pilotent QUE le chrome (bg, cartes, bordures, rayon, police),
 * jamais les accents — c'est le client qui choisit sa couleur.
 * ============================================================ */
.agency-label-filter.is-active,
.agency-label-filter.active {
    background: var(--agency-primary-color);
    border-color: var(--agency-primary-color);
    color: #fff;
}

/* Inputs lisibles sur tous les thèmes : surface plus claire que le bg. */
.agency-form-input,
#project-search {
    background: #ffffff;
    color: var(--agency-text-color);
    border: 1px solid var(--agency-border-color);
}

/* ============================================================
 * Mobile header polish (v1.0.6)
 * - Drawer slide-down animation + scroll lock
 * - Reduced logo height < 480px
 * - Edit-mode keeps Save/Preview visible (no drawer collapse)
 * ============================================================ */
.agency-header-right {
    transition: transform 0.22s ease, opacity 0.22s ease;
}

@media (max-width: 768px) {
    .agency-header-right {
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
    }
    .agency-header-right.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Verrouille le scroll body quand le drawer est ouvert */
    body.agency-header-drawer-open {
        overflow: hidden;
    }

    /* Mode édition : le slot droit ne devient PAS un drawer.
       Les boutons Aperçu + Enregistrer restent toujours visibles. */
    .agency-header-mode-edit .agency-header-right {
        display: flex !important;
        position: static;
        background: transparent;
        box-shadow: none;
        border-top: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        flex-direction: row;
        gap: 8px;
        max-height: none;
        overflow: visible;
    }
    .agency-header-mode-edit .agency-hamburger {
        display: none;
    }

    /* Centrage logo plus compact */
    .agency-header-logo {
        height: 32px;
    }
}

@media (max-width: 480px) {
    .agency-header-container {
        padding: 0 10px;
    }
    .agency-header-logo {
        height: 26px;
    }
    .agency-back-arrow {
        padding: 4px;
    }
    .agency-header-edit-client {
        font-size: 12px;
        padding: 4px 8px;
    }
    .agency-header-edit-client svg {
        display: none;
    }
    .agency-header-mode-edit .agency-header-actions .agency-btn {
        padding: 6px 10px;
        font-size: 11.5px;
    }
}

/* ============================================================
 * Project cards — responsive breakpoints (v1.0.6)
 * ≥1024px  : 3 colonnes
 * 768–1023 : 2 colonnes
 * <768px   : 1 colonne, padding réduit, hauteur min relâchée
 * ============================================================ */
@media (max-width: 1023px) {
    .agency-projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .agency-projects-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 20px;
    }

    .agency-project-card {
        padding: 16px;
        min-height: 200px;
    }

    /* Cover image cards : ratio constant pour cohérence visuelle */
    .agency-project-card.has-project-bg {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    /* Header de carte : éviter le débordement de flex children */
    .project-card-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .project-card-header > * {
        min-width: 0;
    }

    .project-title,
    .project-name-badge {
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .project-description {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .project-blocks-list {
        margin: 12px 0;
        padding: 10px;
    }
}

/* ── Bouton copier lien : verrouillé en plan gratuit (managers) ─────────── */
.copy-block-link-btn.agency-premium-locked {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Fonctionnalités premium : verrouillage UI (frontend manager) ─────── */
.agency-premium-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.agency-premium-wrapper--locked .agency-premium-locked,
.agency-premium-locked {
    opacity: 0.2;
    pointer-events: none;
    filter: grayscale(0.3);
}

.agency-premium-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-left: 6px;
    flex-shrink: 0;
}

/* ── Bannière plan gratuit pour les managers (frontend) ──────────────── */
.agency-manager-premium-banner {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    position: relative;
}

.agency-manager-premium-banner p { margin: 0; }

.agency-manager-premium-banner a {
    color: #f59e0b;
    text-decoration: none;
    font-weight: 600;
}

.agency-manager-premium-banner a:hover { text-decoration: underline; }

.agency-manager-banner-dismiss {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.agency-manager-banner-dismiss:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}