/* Companion.Web/wwwroot/app.css — CSS unique de ce host (voir CLAUDE.md, convention companion :
   un seul fichier, jamais de CSS séparé). Construit à partir de Pragma.Cockpit/wwwroot/app.css :
   - lignes 1-51 (reset :root/html/body) : partie commune nécessaire — le bloc COMPANION ci-dessous
     dépend explicitement de body{overflow:hidden} pour son ancrage 100vh (voir son propre
     commentaire), même s'il ne réutilise AUCUNE variable --bg/--text/--accent (préfixe --companion-*
     scopé à .companion-shell, jamais partagé — voir le bloc lui-même).
   - lignes 3664-8015 (bloc COMPANION intégral, marqueurs inclus) : copié tel quel, DUPLIQUÉ
     temporairement avec Pragma.Cockpit/wwwroot/app.css (qui reste INTACT, le Cockpit sert encore
     /companion/* jusqu'au nettoyage) — voir docs/companion-web-migration.md.
   Sections NON reprises (B2B Cockpit only, sans rapport avec le vertical companion) : ANCIEN BLOC
   SIDEBAR/LISTE, CHAT ROOT, TOPBAR, MEDIA STRIP, THREAD, MESSAGES, ACTIONS, IMAGES, SUGGESTIONS,
   COMPOSER, LIGHTBOX, VOICE CALL SUMMARY BUBBLE, MODALS, APP SHELL, SIDEBAR (x2), HOME PAGE,
   AGENTS PAGE (x2), MODAL AGENTS, RESPONSIVE, DIVERS, FORMS, MES AGENTS (lignes 52-3663), ainsi que
   FAKE PSP et ADMIN BILLING (lignes 8017-8314, pages Cockpit-only). */

:root {
    --bg: #F5F4F0;
    --bg2: #E2DFD6;
    --panel: #F4F2EC;
    --surface: #F8F6F2;
    --border: #D5D1C7;
    --border2: #C5C0B5;
    --text: #1C1D26;
    --text-soft: #524F4A;
    --muted: #7A736C;
    --panel-sidebar: #D8D6CE;
    --sb-active-bg: #C9C6BE;
    --sb-active-text: #1C1D26;
    --sb-width: 272px;
    --accent: #C8D1DC;
    --accent-hover: #B8C4D0;
    --accent-text: #1C1D26;
    --accent-bg: rgba(59, 82, 114, 0.10);
    --accent-bd: rgba(59, 82, 114, 0.20);
    --input-bg: #FCFBF8;
    --user-bubble-bg: #D4DCE7;
    --user-bubble-text: #2E4260;
    --topbar-text: #1C1D26;
    --send-bg: #3B5272;
    --send-hover: #2E4260;
    --icon: #3B5272;
    --gradient-logo: linear-gradient(135deg, #3B5272 0%, #5A7494 100%);
    --radius: 12px;
    --font: 'Inter', system-ui, sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 300;
    font-optical-sizing: auto;
    font-feature-settings: "kern" 1;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
}


/* =========================================================================
   ===== COMPANION (tania.live) — début =====
   Tout le CSS du vertical grand-public "companion" vit ici, dans ce fichier
   unique (voir CLAUDE.md / convention companion). Ne jamais créer de fichier
   CSS séparé. Toutes les classes sont préfixées "companion-" pour ne jamais
   collisionner avec le CSS B2B Cockpit ci-dessus. Toutes les variables sont
   préfixées "--companion-" et scopées sous .companion-shell — les variables
   globales :root existantes (--bg, --text, --accent, etc.) ne sont jamais
   redéfinies ni réutilisées.
   ========================================================================= */

.companion-shell {
    /* -- Marque -- */
    --companion-pink: #EC4899;
    --companion-purple: #A855F7;
    --companion-gradient: linear-gradient(135deg, var(--companion-pink) 0%, var(--companion-purple) 100%);

    /* -- Thème clair (défaut) -- */
    --companion-bg: #FAF7F2;
    --companion-bg-elevated: #FFFFFF;
    --companion-bg-sunken: #F1ECE3;
    --companion-text: #1A1523;
    --companion-text-soft: #6B6470;
    --companion-muted: #9A93A0;
    --companion-border: #ECE6DC;
    --companion-sidebar-bg: #FFFFFF;
    --companion-active-bg: #FCE7F3;
    --companion-active-text: #BE185D;
    --companion-shadow: 0 2px 10px rgba(26, 21, 35, .06);
    --companion-shadow-lg: 0 12px 32px rgba(26, 21, 35, .10);

    /* -- Géométrie / typo -- */
    --companion-radius-sm: 10px;
    --companion-radius: 16px;
    --companion-radius-lg: 20px;
    --companion-font: 'Inter', system-ui, sans-serif;
    --companion-sb-width: 264px;
    --companion-header-h: 72px;

    display: flex;
    /* height (pas min-height) : ancre le layout à la hauteur du viewport, sinon la stretch
       flex des enfants (.companion-sidebar / .companion-main-col) n'a pas de hauteur définie
       vers laquelle converger et leur contenu déborde silencieusement sous body{overflow:hidden}
       (règle B2B globale, non scopée companion, ligne ~49 de ce fichier). */
    height: 100vh;
    height: 100dvh;
    background: var(--companion-bg);
    color: var(--companion-text);
    font-family: var(--companion-font);
    letter-spacing: -0.01em;
    color-scheme: light;
    transition: background .2s ease, color .2s ease;
}

.companion-shell[data-theme="companion-dark"] {
    --companion-bg: #0F0F1A;
    --companion-bg-elevated: #1B1A2A;
    --companion-bg-sunken: #15151F;
    --companion-text: #F5F3F7;
    --companion-text-soft: #B4AFC0;
    --companion-muted: #7C778A;
    --companion-border: rgba(255, 255, 255, .08);
    --companion-sidebar-bg: #16151F;
    --companion-active-bg: rgba(236, 72, 153, .16);
    --companion-active-text: #F472B6;
    --companion-shadow: 0 2px 10px rgba(0, 0, 0, .30);
    --companion-shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
}

.companion-shell * {
    box-sizing: border-box;
}

/* ----- Primitives réutilisables ----- */

.companion-gradient-text {
    background: var(--companion-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.companion-btn-gradient {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    background: var(--companion-gradient);
    color: #fff;
    font-family: var(--companion-font);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(168, 85, 247, .28);
    transition: transform .12s ease, box-shadow .12s ease;
    text-decoration: none;
    white-space: nowrap;
}

    .companion-btn-gradient:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(168, 85, 247, .36);
    }

.companion-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: 999px;
    border: 1.5px solid var(--companion-border);
    background: transparent;
    color: var(--companion-text);
    font-family: var(--companion-font);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
    text-decoration: none;
}

    .companion-btn-outline:hover {
        border-color: var(--companion-purple);
        color: var(--companion-purple);
    }

.companion-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--companion-border);
    background: var(--companion-bg-elevated);
    color: var(--companion-text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .12s ease, color .12s ease;
}

    .companion-icon-btn:hover {
        border-color: var(--companion-purple);
        color: var(--companion-purple);
    }

.companion-card {
    background: var(--companion-bg-elevated);
    border-radius: var(--companion-radius-lg);
    border: 1px solid var(--companion-border);
    box-shadow: var(--companion-shadow);
}

.companion-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--companion-gradient);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(168, 85, 247, .35);
}

.companion-avatar-placeholder {
    border-radius: 50%;
    background: var(--companion-bg-sunken);
    color: var(--companion-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.companion-badge-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--companion-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.companion-pill {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--companion-border);
    background: transparent;
    color: var(--companion-text-soft);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s ease;
    font-family: var(--companion-font);
}

    .companion-pill.companion-pill-active {
        border-color: transparent;
        background: var(--companion-gradient);
        color: #fff;
    }

    .companion-pill:not(.companion-pill-active):hover {
        border-color: var(--companion-purple);
        color: var(--companion-purple);
    }

/* Sélecteur de langue du header companion (CompanionLanguageSwitcher.razor) — placé juste avant le
   toggle Femme|Homme ci-dessous. Même popup que .companion-profile-menu (menu utilisateur), avec un
   déclencheur compact dédié (globe + code ISO) plutôt que .companion-icon-btn : ce dernier est un
   cercle de taille fixe, incompatible avec un contenu icône+texte. */
.companion-lang-switcher {
    position: relative;
    flex-shrink: 0;
}

.companion-lang-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--companion-border);
    background: var(--companion-bg-elevated);
    color: var(--companion-text-soft);
    font-family: var(--companion-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
}

    .companion-lang-trigger:hover {
        border-color: var(--companion-purple);
        color: var(--companion-purple);
    }

.companion-lang-flag {
    /* Step S6f : Windows n'a aucune police emoji couleur pour les Regional Indicator Symbols
       (flag_emoji) — limitation OS définitive, le repli de police tenté en Step 6c (BUG 3)
       n'y changeait rien. Remplacé par un <img> SVG local (voir CompanionLanguageSwitcher.razor,
       wwwroot/images/flags/) — cette règle stylise l'image, plus le texte de l'emoji. */
    width: 16px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Toggle Femme|Homme du header companion — même vocabulaire que .companion-pill (pastille active en
   gradient) mais regroupé dans un fond sunken pour lire comme un seul contrôle segmenté. */
.companion-gender-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--companion-bg-sunken);
    border: 1px solid var(--companion-border);
    flex-shrink: 0;
}

    .companion-gender-toggle .companion-pill {
        padding: 6px 14px;
        border: none;
    }

    .companion-gender-toggle .companion-pill:not(.companion-pill-active):hover {
        border-color: transparent;
    }

.companion-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, .92);
    color: #1A1523;
    backdrop-filter: blur(4px);
}

.companion-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
    flex-shrink: 0;
}

.companion-status-label {
    /* Filet de sécurité si le badge est malgré tout trop étroit pour le texte : tronque
       plutôt que de déborder sur le bouton coeur. min-width:0 nécessaire pour qu'un enfant
       flex accepte de rétrécir sous sa taille de contenu naturelle. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.companion-status-fast .companion-status-dot {
    background: var(--companion-pink);
}

.companion-status-mentor .companion-status-dot {
    background: #A855F7;
}

.companion-status-voice .companion-status-dot {
    background: #3B82F6;
}

/* ----- Shell / structure ----- */

.companion-main-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* min-height: 0 (pas 100vh) : laisse .companion-content (flex:1; overflow-y:auto) se
       borner réellement à la hauteur stretchée par .companion-shell et scroller en interne,
       au lieu de forcer cette colonne à grandir sans limite avec son contenu. */
    min-height: 0;
}

.companion-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px 48px;
}

/* ----- Sidebar ----- */

.companion-sidebar {
    width: var(--companion-sb-width);
    min-width: var(--companion-sb-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--companion-sidebar-bg);
    border-right: 1px solid var(--companion-border);
    padding: 18px 14px;
    gap: 8px;
}

.companion-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 20px;
}

.companion-logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--companion-text);
    letter-spacing: -0.02em;
}

.companion-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Zone scrollable interne de la sidebar : si la nav s'allonge, elle scrolle seule et
       .companion-sidebar-bottom (margin-top:auto ci-dessous) reste toujours visible en bas. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.companion-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--companion-radius-sm);
    color: var(--companion-text-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}

    .companion-nav-item svg {
        flex-shrink: 0;
        opacity: .85;
    }

    .companion-nav-item:hover {
        background: var(--companion-bg-sunken);
        color: var(--companion-text);
    }

    .companion-nav-item .companion-badge-count {
        margin-left: auto;
    }

.companion-nav-item-active {
    background: var(--companion-active-bg);
    color: var(--companion-active-text);
    font-weight: 600;
}

    .companion-nav-item-active:hover {
        background: var(--companion-active-bg);
        color: var(--companion-active-text);
    }

/* Langue + toggle Femme/Homme dupliqués dans le tiroir mobile (CompanionSidebar.razor) — masqués
   par défaut (desktop, où ces contrôles vivent déjà dans le header), activés uniquement sous 768px
   en même temps que leurs équivalents header sont masqués (voir bloc responsive). */
.companion-sidebar-mobile-controls {
    display: none;
}

.companion-sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
}

.companion-premium-card {
    display: block;
    background: var(--companion-gradient);
    border-radius: var(--companion-radius);
    padding: 14px 16px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 6px 18px rgba(168, 85, 247, .28);
}

.companion-premium-title {
    font-size: 14px;
    font-weight: 700;
}

.companion-premium-text {
    font-size: 12px;
    line-height: 1.4;
    margin: 4px 0 10px;
    color: rgba(255, 255, 255, .88);
}

.companion-premium-cta {
    font-size: 12px;
    font-weight: 600;
}

/* ── Page /companion/premium (CompanionPremium.razor) ── */

.companion-premium-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.companion-premium-intro {
    font-size: 14px;
    line-height: 1.5;
    color: var(--companion-text-soft);
    max-width: 520px;
    margin: 0;
}

.companion-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* Portrait + nom du dernier agent avec lequel l'utilisateur a interagi — purement décoratif, voir
   CompanionPremium.razor (IConversationStore.ListRecentByUser). */
.companion-premium-last-agent {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--companion-text-soft);
}

.companion-premium-last-agent-portrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.companion-premium-plan-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--companion-bg-elevated);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-lg);
    padding: 20px;
    box-shadow: var(--companion-shadow);
}

.companion-premium-plan-featured {
    background: var(--companion-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 32px rgba(168, 85, 247, .32);
}

    .companion-premium-plan-featured .companion-premium-plan-label,
    .companion-premium-plan-featured .companion-premium-plan-price {
        color: #fff;
    }

    .companion-premium-plan-featured .companion-premium-plan-quotas li {
        color: rgba(255, 255, 255, .88);
    }

.companion-premium-plan-label {
    font-size: 15px;
    font-weight: 700;
}

.companion-premium-plan-price {
    font-size: 22px;
    font-weight: 700;
}

.companion-premium-plan-quotas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--companion-text-soft);
}

.companion-premium-plan-cta {
    margin-top: 8px;
    align-self: flex-start;
    background: #fff;
    color: var(--companion-purple);
    box-shadow: none;
}

    .companion-premium-plan-cta:hover {
        background: rgba(255, 255, 255, .9);
    }

.companion-premium-checkout-message {
    font-size: 13.5px;
    padding: 12px 14px;
    border-radius: var(--companion-radius-sm);
    background: rgba(168, 85, 247, .08);
    color: var(--companion-text);
    max-width: 480px;
}

.companion-sidebar-utility {
    display: flex;
    align-items: center;
    gap: 10px;
}

.companion-theme-toggle {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--companion-bg-sunken);
    border: 1px solid var(--companion-border);
    position: relative;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: var(--companion-muted);
    transition: background .2s ease;
}

    .companion-theme-toggle::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--companion-gradient);
        transition: transform .2s ease;
    }

    .companion-theme-toggle svg {
        position: absolute;
        top: 5px;
    }

.companion-theme-icon-sun {
    left: 5px;
}

.companion-theme-icon-moon {
    right: 5px;
}

.companion-shell[data-theme="companion-dark"] .companion-theme-toggle::after {
    transform: translateX(18px);
}

.companion-profile-block {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    padding: 6px;
    border-radius: var(--companion-radius-sm);
    flex: 1;
    min-width: 0;
    transition: background .12s ease;
    /* Reset bouton — .companion-profile-block est aussi utilisé sur un <button> (état invité) */
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--companion-font);
    width: 100%;
}

    .companion-profile-block:hover {
        background: var(--companion-bg-sunken);
    }

.companion-profile-block-menu {
    position: relative;
}

.companion-profile-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--companion-font);
    padding: 0;
    min-width: 0;
}

.companion-profile-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--companion-bg-elevated);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-sm);
    box-shadow: var(--companion-shadow-lg);
    padding: 6px;
    z-index: 20;
}

.companion-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--companion-radius-sm);
    font-family: var(--companion-font);
    font-size: 13px;
    text-align: left;
    color: var(--companion-text);
    cursor: pointer;
}

    .companion-profile-menu-item svg {
        flex-shrink: 0;
    }

    .companion-profile-menu-item:hover {
        background: var(--companion-bg-sunken);
    }

.companion-profile-menu-item-danger {
    color: #dc2626;
}

.companion-profile-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.companion-profile-text {
    min-width: 0;
}

.companion-profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--companion-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.companion-profile-link {
    font-size: 11px;
    color: var(--companion-muted);
}

/* Tiroir off-canvas (sidebar mobile) : voile derrière la sidebar, masqué par défaut — activé
   uniquement en media query (voir bloc responsive en fin de fichier). Présent dans le DOM sur
   toutes les tailles d'écran (CompanionLayout.razor) mais invisible/hors-flux tant que non
   affiché ici. */
.companion-sidebar-overlay {
    display: none;
}

/* ----- Header ----- */

.companion-header {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--companion-header-h);
    padding: 0 32px;
    border-bottom: 1px solid var(--companion-border);
    flex-shrink: 0;
}

.companion-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    /* Compense la suppression du champ recherche (qui portait flex:1/margin:0 auto et poussait ce
       bloc à droite) — même résultat visuel sans lui. */
    margin-left: auto;
}

/* Bouton Premium du header (CompanionHeader.razor) — même dégradé que "Créer mon IA"
   (.companion-btn-gradient) mais compact : padding/police/ombre réduits pour rester secondaire
   visuellement malgré la couleur partagée. Étoile réutilisée à l'identique de
   CompanionBottomNav.razor (même glyphe Premium partout dans l'app). */
.companion-header-premium-btn {
    padding: 7px 14px;
    font-size: 13px;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(168, 85, 247, .22);
}

.companion-notif-btn {
    position: relative;
}

.companion-notif-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--companion-pink);
    border: 1.5px solid var(--companion-bg-elevated);
}

.companion-header-avatar {
    width: 38px;
    height: 38px;
    font-size: 14px;
    text-decoration: none;
    /* Reset bouton — .companion-header-avatar habillait autrefois un <a>, maintenant un <button>
       (déclencheur de CompanionUserMenu.razor) : neutraliser les styles natifs de <button>. */
    border: none;
    cursor: pointer;
    font-family: var(--companion-font);
}

.companion-header-user-menu {
    position: relative;
}

.companion-header-user-menu-popup {
    /* Contrairement à .companion-profile-menu (sidebar, ancré vers le bas) : le déclencheur est
       en haut de page, la popup s'ouvre donc vers le bas et à droite. */
    top: calc(100% + 8px);
    bottom: auto;
    left: auto;
    right: 0;
    min-width: 160px;
}

/* Popup de CompanionLanguageSwitcher.razor — même surface que .companion-profile-menu
   (background/border/radius/box-shadow/z-index:20, tous hérités ci-dessus, jamais redéfinis ici :
   un seul endroit de vérité pour "à quoi ressemble un popup de header"), seule la position/l'item
   actif diffèrent. Sélecteurs COMPOSÉS (.companion-profile-menu.companion-lang-menu-popup, deux
   classes) plutôt qu'un simple .companion-lang-menu-popup : sur deux règles de même spécificité,
   CSS fait gagner celle déclarée en dernier dans le fichier, pas celle listée en dernier dans
   l'attribut class= — un .companion-lang-menu-popup seul, posé plus haut dans app.css (avant la
   définition de .companion-profile-menu), voyait donc son top/left/right silencieusement écrasés
   par le bottom/left/right de la base (popup ouvert vers le haut, hors viewport au-dessus du
   header — d'où le "aucun fond visible" constaté : la boîte existait, juste invisible à cet
   endroit). Le sélecteur composé (spécificité 0,0,2,0, supérieure à 0,0,1,0) gagne quel que soit
   l'ordre dans le fichier — plus robuste que compter sur le positionnement du bloc CSS. */
.companion-profile-menu.companion-lang-menu-popup {
    top: calc(100% + 8px);
    bottom: auto;
    left: 0;
    right: auto;
    min-width: 170px;
}

.companion-profile-menu-item.companion-profile-menu-item-active {
    background: var(--companion-bg-sunken);
    font-weight: 600;
}

/* Bouton hamburger + mark de marque compacte — masqués par défaut (desktop), affichés uniquement
   en media query mobile (la sidebar devient un tiroir off-canvas, il faut un déclencheur visible
   dans le header + un repère de marque puisque le logo vit normalement dans la sidebar). */
.companion-mobile-menu-btn {
    display: none;
}

.companion-mobile-brand {
    display: none;
    align-items: center;
}

    .companion-mobile-brand .companion-logo-mark {
        width: 28px;
        height: 28px;
    }

/* ----- Home : hero ----- */

.companion-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    border-radius: var(--companion-radius-lg);
    border: 1px solid var(--companion-border);
    background: linear-gradient(135deg, rgba(236, 72, 153, .12), rgba(168, 85, 247, .12));
    padding: 44px 40px;
    margin-bottom: 28px;
    overflow: hidden;
}

.companion-hero-content {
    max-width: 480px;
}

.companion-hero-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

/* Blazor pose lui-même tabindex="-1" sur le premier <h1> de la page et le focus au chargement
   (élément <blazor-focus-on-navigate selector="h1"> injecté par blazor.web.js, comportement
   d'accessibilité du framework — rien dans nos .razor ne demande ce focus, donc rien à retirer
   côté markup). Le halo de focus par défaut du navigateur reste néanmoins visible sur un élément
   non interactif. On masque l'outline UNIQUEMENT pour ce cas précis (sélecteur [tabindex="-1"]) :
   les vrais éléments navigables au clavier (liens, boutons, pills) n'ont jamais cet attribut, donc
   leur propre halo de focus reste intact — le screen reader continue d'être informé du focus,
   seul l'indicateur visuel superflu disparaît. */
.companion-shell [tabindex="-1"]:focus {
    outline: none;
}

.companion-hero-subtitle {
    font-size: 15px;
    color: var(--companion-text-soft);
    line-height: 1.5;
    margin: 0 0 24px;
}

.companion-hero-visual {
    position: relative;
    width: 220px;
    height: 170px;
    flex-shrink: 0;
}

.companion-hero-avatar {
    position: absolute;
    border-radius: 50%;
    background: var(--companion-bg-sunken);
    border: 3px solid var(--companion-bg-elevated);
    box-shadow: var(--companion-shadow-lg);
}

.companion-hero-avatar-1 {
    width: 96px;
    height: 96px;
    top: 6px;
    left: 10px;
    z-index: 1;
}

.companion-hero-avatar-2 {
    width: 110px;
    height: 110px;
    top: 40px;
    left: 78px;
    z-index: 2;
    background: color-mix(in srgb, var(--companion-bg-sunken) 82%, var(--companion-purple) 18%);
}

.companion-hero-avatar-3 {
    width: 78px;
    height: 78px;
    top: 4px;
    left: 150px;
    z-index: 3;
    background: color-mix(in srgb, var(--companion-bg-sunken) 85%, var(--companion-pink) 15%);
}

/* ----- Home : hero album ("Mon Album") -----
   Fond volontairement toujours sombre (indépendant du thème clair/sombre de la page) : c'est une
   vitrine ponctuelle, pas la coque applicative — voir CompanionHome.razor pour le fallback vers
   l'ancien .companion-hero quand le catalogue est vide (vertical homme, pack miroir pas encore
   généré). Rotation/crossfade pilotés par wwwroot/js/companion-hero-album.js.
   Ratio du cadre résultat (étape 3) : les fichiers merge/ sur disque sont en 1448x1086 (4:3,
   paysage) — aspect-ratio 4/3 partout ci-dessous reprend ce ratio natif, pas un chiffre choisi au
   hasard (évite le crop portrait constaté sur la première version). */
/* container-type:inline-size fait de ce bandeau un query container : les @container ci-dessous (et
   les clamp() en cqw sur le trio) se calent sur la largeur RÉELLE de cette section une fois rendue —
   donc déjà nette de la sidebar (~265px) et de l'aside, sans recalcul manuel en dur. C'est le point
   qui manquait : les anciens breakpoints étaient en @media (viewport), aveugles à ce que la sidebar
   mange, d'où le débordement constaté entre le desktop et 768px de VIEWPORT (zone où le CONTENEUR,
   lui, était déjà sous le seuil critique).
   Le flex/padding/gap vit sur .companion-hero-album-row (wrapper interne), PAS ici : un élément ne
   peut pas se restyler lui-même via une @container query qui le cible lui — seuls ses descendants le
   peuvent (constaté en testant : les règles posées directement ici ne s'appliquaient jamais). Cette
   section reste donc "neutre" côté layout, uniquement le cadre visuel (fond, bordure, container). */
.companion-hero-album {
    position: relative;
    container-type: inline-size;
    container-name: hero-album;
    border-radius: var(--companion-radius-lg);
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(60% 130% at 10% 20%, rgba(168, 85, 247, .32), transparent 60%),
        radial-gradient(55% 130% at 92% 82%, rgba(236, 72, 153, .28), transparent 60%),
        linear-gradient(135deg, #150E1F 0%, #1B1030 100%);
    margin-bottom: 28px;
    overflow: hidden;
}

.companion-hero-album-row {
    display: flex;
    align-items: center;
    /* center (pas flex-start) : avec des enfants de largeur bornée (content, strip), flex-start
       laissait tout l'espace restant s'accumuler en marge droite après le trio, largement plus large
       que le padding gauche du texte. center répartit ce reste à parts égales de chaque côté du bloc
       (texte+trio) — marges gauche/droite alignées sur n'importe quelle largeur d'écran. */
    justify-content: center;
    gap: 28px;
    padding: 28px 42px;
}

/* Sparkles discrets — un seul calque de radial-gradients (pas de nouvelle image, pas de librairie),
   opacité faible, twinkle lent désactivé sous prefers-reduced-motion (voir plus bas). */
.companion-hero-album::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 15% 22%, rgba(255, 255, 255, .9), transparent),
        radial-gradient(1.5px 1.5px at 80% 15%, rgba(255, 255, 255, .8), transparent),
        radial-gradient(1px 1px at 46% 12%, rgba(236, 72, 153, .9), transparent),
        radial-gradient(1.5px 1.5px at 90% 55%, rgba(168, 85, 247, .9), transparent),
        radial-gradient(1px 1px at 28% 82%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1.5px 1.5px at 62% 88%, rgba(255, 255, 255, .6), transparent);
    opacity: .5;
    animation: companion-hero-album-sparkle 4.5s ease-in-out infinite alternate;
}

@keyframes companion-hero-album-sparkle {
    from { opacity: .3; }
    to { opacity: .75; }
}

@media (prefers-reduced-motion: reduce) {
    .companion-hero-album::before {
        animation: none;
        opacity: .5;
    }
}

/* flex-grow:0 volontairement : un content qui grandit librement laisse du vide interne entre le
   texte (court) et la fin de sa propre boîte, donc entre texte et vignette 1. Largeur cible proche du
   besoin réel du texte, complétée par le centrage du bandeau ci-dessus pour la marge.
   flex-shrink:1 + min-width:0 : SANS ça (flex-shrink:0 posé initialement), ce bloc ne pouvait jamais
   céder de place au trio quand l'espace manque — c'était la cause du débordement texte à gauche
   rapporté entre le desktop et 768px de viewport. min-width:0 lève le plancher implicite de
   min-width:auto d'un enfant flex (sinon le texte refuse de descendre sous sa largeur intrinsèque
   avant de wrapper). */
.companion-hero-album-content {
    flex: 0 1 380px;
    min-width: 0;
    max-width: 380px;
}

.companion-hero-album-title {
    font-size: clamp(23px, 2.8cqw, 32px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: #F5F3F7;
}

.companion-hero-album-subtitle {
    font-size: 15px;
    color: #C9C3D6;
    line-height: 1.5;
    margin: 0 0 20px;
}

/* flex-shrink:0 volontaire : la grille interne (tracks "auto") ne rétrécit pas ses propres colonnes
   quand sa boîte flex est forcée plus petite — elle déborde en interne à la place, masqué par
   l'overflow:hidden de la section (constaté en diagnostiquant le débordement 950-1000px : la boîte
   du strip rétrécissait via flex-shrink mais son scrollWidth réel restait plus grand, coupant le
   cadre résultat sans que ça se voie comme un débordement au niveau de la section). La taille
   naturelle du strip est déjà pilotée en continu par les clamp() (cqw) sur les images ; c'est
   .companion-hero-album-content, seul élément vraiment compressible (texte qui wrap), qui absorbe le
   reste de la contrainte via son propre flex-shrink. */
.companion-hero-album-strip {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    grid-template-areas: "selfie arrow1 portrait arrow2 couple";
    grid-template-columns: auto auto auto auto auto;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.8cqw, 18px);
}

.companion-hero-album-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.companion-hero-album-step-selfie { grid-area: selfie; }
.companion-hero-album-step-portrait { grid-area: portrait; }
.companion-hero-album-step-couple { grid-area: couple; }
.companion-hero-album-arrow-1 { grid-area: arrow1; }
.companion-hero-album-arrow-2 { grid-area: arrow2; }

.companion-hero-album-img {
    display: block;
    object-fit: cover;
    background: rgba(255, 255, 255, .04);
}

/* Vignette 1 (selfie) : image simple, fixe pour toute la session — jamais de crossfade, donc pas de
   double calque ici (voir companion-hero-album-imgwrap plus bas pour 2/3, qui tournent).
   clamp() en cqw (pas vw) : se cale sur la largeur du bandeau lui-même (container query), donc déjà
   net de la sidebar — contraction continue au lieu d'un saut brutal à un seul breakpoint déclaré. */
.companion-hero-album-step-selfie .companion-hero-album-img {
    width: clamp(72px, 11cqw, 120px);
    height: clamp(72px, 11cqw, 120px);
    border-radius: 50%;
    border: 3px solid var(--companion-purple);
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, .3),
        0 0 20px 3px rgba(168, 85, 247, .6),
        0 0 46px 12px rgba(168, 85, 247, .3);
}

/* Vignettes 2/3 (rotatives) : la taille/bordure/glow vivent sur le conteneur (imgwrap, clippé via
   overflow:hidden), les deux <img> empilés à l'intérieur se contentent de remplir cet espace — voir
   wwwroot/js/companion-hero-album.js (makeCrossfader) pour le crossfade sans frame vide entre eux. */
.companion-hero-album-imgwrap {
    position: relative;
    background: rgba(255, 255, 255, .04);
    overflow: hidden;
    /* isolation:isolate crée un contexte d'empilement local pour img-a/img-b (z-index 1/2 ci-dessous)
       — sans ça leur z-index "fuit" au-delà d'imgwrap et passe AU-DESSUS des pastille/tag "exemple"
       posés en frères juste après dans le markup (bug constaté : tag invisible sous le calque photo). */
    isolation: isolate;
}

.companion-hero-album-imgwrap .companion-hero-album-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.companion-hero-album-img-a {
    z-index: 2;
    opacity: 1;
    transition: opacity .35s ease;
}

.companion-hero-album-img-b {
    z-index: 1;
    opacity: 0;
    transition: opacity .35s ease;
}

.companion-hero-album-step-portrait .companion-hero-album-imgwrap {
    width: clamp(72px, 11cqw, 120px);
    height: clamp(72px, 11cqw, 120px);
    border-radius: 50%;
    border: 3px solid var(--companion-pink);
    box-shadow:
        0 0 0 2px rgba(236, 72, 153, .3),
        0 0 20px 3px rgba(236, 72, 153, .6),
        0 0 46px 12px rgba(236, 72, 153, .3);
}

.companion-hero-album-step-couple .companion-hero-album-imgwrap {
    /* Même coefficient de cqw que les cercles (11 * 2.5 = 27.5), pour que les 3 vignettes rétrécissent
       ensemble en gardant leurs proportions relatives — le cadre reste dominant à toute largeur. */
    width: clamp(190px, 27.5cqw, 300px);
    aspect-ratio: 4 / 3;
    border-radius: var(--companion-radius);
    border: 5px solid #FBBF24;
    box-shadow:
        0 0 0 3px rgba(251, 191, 36, .4),
        0 0 26px 6px rgba(251, 191, 36, .75),
        0 0 60px 18px rgba(251, 191, 36, .45),
        0 0 110px 36px rgba(251, 191, 36, .2);
}

/* Certains merges cadrent les visages dans la moitié haute (bas de l'image = décor : table, livre...).
   object-position privilégie le haut plutôt que le centre géométrique par défaut du crop cover. */
.companion-hero-album-step-couple .companion-hero-album-img {
    object-position: center 35%;
}

.companion-hero-album-badge {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, .85);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.companion-hero-album-step-selfie .companion-hero-album-badge {
    background: var(--companion-purple);
    box-shadow: 0 0 10px 2px rgba(168, 85, 247, .75);
}

.companion-hero-album-step-portrait .companion-hero-album-badge {
    background: var(--companion-pink);
    box-shadow: 0 0 10px 2px rgba(236, 72, 153, .75);
}

.companion-hero-album-step-couple .companion-hero-album-badge {
    background: #FBBF24;
    box-shadow: 0 0 12px 3px rgba(251, 191, 36, .85);
}

.companion-hero-album-example-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .85);
    font-size: 9px;
    font-variant: small-caps;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Flèches néon — forme dessinée en CSS pur (clip-path, pas de glyphe texte) : hampe + pointe en un
   seul élément, dégradé violet -> rose, glow via filter (le glow d'un box-shadow ne suit pas un
   clip-path, drop-shadow si). companion-hero-album-arrow-down réutilise la même forme, tournée. */
.companion-hero-album-arrow {
    width: clamp(30px, 4.2cqw, 46px);
    height: clamp(17px, 2.4cqw, 26px);
    background: linear-gradient(90deg, var(--companion-purple), var(--companion-pink));
    clip-path: polygon(0% 38%, 58% 38%, 58% 15%, 100% 50%, 58% 85%, 58% 62%, 0% 62%);
    filter: drop-shadow(0 0 5px rgba(236, 72, 153, .7)) drop-shadow(0 0 12px rgba(168, 85, 247, .5));
    flex-shrink: 0;
}

.companion-hero-album-arrow-down {
    display: none;
    grid-area: down;
    justify-self: center;
    transform: rotate(90deg);
}

/* Repositionnés à hauteur des visages (centre de la ligne, comme les flèches) plutôt qu'en haut du
   bandeau — léger décalage vers le haut pour ne pas se superposer à la flèche 2 qui occupe le même
   grid-area. Opacité remontée : à .55 ils étaient quasi invisibles sur le fond sombre. */
.companion-hero-album-hearts {
    grid-area: arrow2;
    align-self: center;
    justify-self: center;
    transform: translateY(-20px);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--companion-pink);
    text-shadow: 0 0 8px rgba(236, 72, 153, .9);
    opacity: .85;
}

/* Paliers responsive du bandeau — en @container (largeur du bandeau lui-même, déjà net de la
   sidebar ~265px), pas en @media (largeur de viewport, aveugle à ce que la sidebar mange). C'est ce
   qui manquait : le débordement rapporté apparaissait dans l'intervalle entre le desktop et 768px de
   VIEWPORT, précisément parce qu'aucun seuil n'y était déclaré alors que le CONTENEUR, lui, était
   déjà sous le seuil critique à cause de la sidebar. Ces règles remplacent les anciennes réductions
   spécifiques au bandeau dans les @media 768px/480px plus bas (qui gardent tout le reste, non lié à
   ce bandeau). */
@container hero-album (max-width: 950px) {
    .companion-hero-album-row {
        padding: 24px 30px;
        gap: 20px;
    }

    .companion-hero-album-content {
        flex-basis: 300px;
        max-width: 300px;
    }
}

/* Sous ce seuil, le trio en une seule ligne à côté du texte ne tient plus lisiblement même réduit au
   plancher du clamp() — bascule complète plutôt que de compresser jusqu'à l'illisible : texte
   au-dessus, trio en dessous, et le trio lui-même passe en L (1+2 côte à côte, résultat en pleine
   largeur en dessous). Mêmes règles que l'ancien palier mobile à 480px, déclenchées bien plus tôt. */
@container hero-album (max-width: 780px) {
    .companion-hero-album-row {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 24px 26px;
    }

    .companion-hero-album-content {
        flex: 0 0 auto;
        max-width: none;
    }

    .companion-hero-album-strip {
        grid-template-areas:
            "selfie arrow1 portrait"
            "down   down   down"
            "couple couple couple";
        grid-template-columns: auto auto auto;
        row-gap: 16px;
        column-gap: 10px;
    }

    .companion-hero-album-arrow-2,
    .companion-hero-album-hearts {
        display: none;
    }

    .companion-hero-album-arrow-down {
        display: block;
    }

    .companion-hero-album-step-couple {
        width: 100%;
    }

    .companion-hero-album-step-couple .companion-hero-album-imgwrap {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
}

/* ----- Home : layout deux colonnes ----- */

.companion-home-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.companion-home-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.companion-home-aside {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.companion-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Barre de filtres Home (2 rangées) ────────────────────────────────────────────────────────
   Rangée 1 (exclusive, "Tout"/relationship) : réutilise .companion-pills-row/.companion-pill tels
   quels, wrap autorisé, aucune classe nouvelle nécessaire — voir markup CompanionHome.razor.
   Rangée 2 (cumulable, facettes) : une seule ligne, scroll horizontal, jamais de wrap. */
.companion-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
}

.companion-facet-row-wrap {
    position: relative;
}

.companion-facet-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Scrollbar masquée (scroll au doigt/à la molette toujours possible, juste pas de piste visible —
       les chevrons sont l'affordance visuelle) — deux propriétés nécessaires, aucun navigateur
       n'accepte les deux syntaxes en une seule règle. */
    scrollbar-width: none;
}

    .companion-facet-row::-webkit-scrollbar {
        display: none;
    }

/* flex-shrink:0 est ce qui empêche les pills de se compresser au lieu de déborder — sans ça, la
   rangée se contenterait de rétrécir chaque pill pour tout faire tenir, jamais de scroll ni de
   chevrons à afficher. */
.companion-facet-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.companion-facet-pill-remove {
    font-size: 10px;
    line-height: 1;
    opacity: .85;
}

.companion-facet-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--companion-border);
    background: var(--companion-bg-elevated);
    color: var(--companion-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    transition: opacity .12s ease;
    z-index: 2;
}

    .companion-facet-chevron:hover {
        border-color: var(--companion-purple);
        color: var(--companion-purple);
    }

.companion-facet-chevron-left {
    left: -4px;
}

.companion-facet-chevron-right {
    right: -4px;
}

/* Visible UNIQUEMENT si le contenu déborde (droite) / si on a déjà scrollé (gauche) — état calculé
   côté JS (companionFacetScroll, app.js) à partir de scrollWidth/clientWidth/scrollLeft, jamais en
   CSS pur (une media query ne peut pas savoir si CE contenu précis déborde). */
.companion-facet-chevron-hidden {
    display: none;
}

.companion-filter-footer {
    display: flex;
    align-items: center;
    gap: 14px;
}

.companion-filter-count {
    font-size: 12.5px;
    color: var(--companion-text-soft);
}

.companion-filter-reset {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--companion-purple);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

    .companion-filter-reset:hover {
        text-decoration: underline;
    }

/* Scroll tactile natif seul sous 768px (spec) : les chevrons n'ont plus lieu d'être sur un écran où
   le geste de scroll horizontal est déjà l'affordance principale — masqués purement en CSS, pas de
   round-trip JS pour ça (companionFacetScroll continue de tourner, ses invocations sont juste
   ignorées visuellement par cette règle, plus simple que de désactiver le module sous ce seuil). */
@media (max-width: 768px) {
    .companion-facet-chevron {
        display: none;
    }
}

.companion-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 14px;
}

.companion-section-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}

/* ----- Home : grille personnages ----- */

.companion-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.companion-empty-state {
    padding: 32px;
    border: 1px dashed var(--companion-border);
    border-radius: var(--companion-radius);
    color: var(--companion-text-soft);
    text-align: center;
}

.companion-char-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--companion-radius-lg);
    border: 1px solid var(--companion-border);
    background: var(--companion-bg-elevated);
    box-shadow: var(--companion-shadow);
    overflow: hidden;
}

.companion-char-portrait {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--companion-bg-sunken);
}

.companion-portrait-tone-2 {
    background: color-mix(in srgb, var(--companion-bg-sunken) 80%, var(--companion-purple) 20%);
}

.companion-portrait-tone-3 {
    background: color-mix(in srgb, var(--companion-bg-sunken) 80%, var(--companion-pink) 20%);
}

.companion-portrait-tone-4 {
    background: color-mix(in srgb, var(--companion-bg-sunken) 88%, #3B82F6 12%);
}

.companion-char-portrait-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--companion-muted);
    opacity: .5;
}

/* Portrait réel (agent avec profile_image_id) — même conteneur que le placeholder ci-dessus. */
.companion-char-portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.companion-char-portrait .companion-status {
    position: absolute;
    top: 10px;
    left: 10px;
    /* right borne la largeur du badge (left+right sur un absolu = largeur contrainte) pour
       garantir un espacement minimum avec le bouton coeur (30px + 10px + marge), quelle que
       soit la longueur du texte (ex: "Voix disponible"). */
    right: 48px;
}

.companion-char-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .92);
    color: #1A1523;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .companion-char-heart.companion-char-heart-active {
        color: var(--companion-pink);
    }

.companion-char-nameplate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 12px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
    color: #fff;
}

.companion-char-name {
    font-size: 15px;
    font-weight: 700;
}

.companion-char-age {
    font-size: 13px;
    font-weight: 400;
    opacity: .85;
}

.companion-char-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    flex: 1;
}

.companion-char-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.companion-char-tag {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--companion-bg-sunken);
    color: var(--companion-text-soft);
}

/* Langue de l'agent (figée à la création) — grisée, jamais masquée, voir CompanionCharacterCard. */
.companion-char-tag-muted {
    opacity: .6;
}

/* Tag cliquable (CompanionHome uniquement, voir CompanionCharacterCard.ClickableTags) : c'est un
   <button>, pas un <span> comme le tag statique — reset des styles natifs pour rester visuellement
   identique, seul le curseur/hover trahit qu'il est interactif. */
.companion-char-tag-clickable {
    border: none;
    font: inherit;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

    .companion-char-tag-clickable:hover {
        background: var(--companion-active-bg);
        color: var(--companion-purple);
    }

.companion-char-tagline {
    font-size: 12.5px;
    color: var(--companion-text-soft);
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

.companion-char-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.companion-char-chat-btn {
    padding: 7px 14px;
    font-size: 12px;
}

.companion-char-audio-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--companion-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.companion-char-delete-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--companion-border);
    background: transparent;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

    .companion-char-delete-btn:hover {
        background: rgba(220, 38, 38, .1);
    }

/* ----- Home : colonne latérale ----- */

.companion-aside-card {
    padding: 18px;
}

.companion-aside-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
}

.companion-convo-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
}

    .companion-convo-item + .companion-convo-item {
        border-top: 1px solid var(--companion-border);
    }

.companion-convo-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.companion-convo-text {
    flex: 1;
    min-width: 0;
}

.companion-convo-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--companion-text);
}

.companion-convo-msg {
    font-size: 12px;
    color: var(--companion-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.companion-convo-time {
    font-size: 11px;
    color: var(--companion-muted);
    flex-shrink: 0;
}

.companion-promo-card {
    border-radius: var(--companion-radius-lg);
    background: var(--companion-gradient);
    color: #fff;
    padding: 18px;
}

.companion-promo-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px;
}

.companion-promo-text {
    font-size: 12px;
    line-height: 1.4;
    opacity: .9;
    margin: 0 0 14px;
}

.companion-promo-cta {
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

    .companion-promo-cta:hover {
        border-color: #fff;
        color: #fff;
    }

.companion-stats-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.companion-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.companion-stat-label {
    font-size: 12.5px;
    color: var(--companion-text-soft);
}

.companion-stat-value {
    font-size: 15px;
    font-weight: 700;
}

/* ----- Chat companion (texte, minimal) ----- */

.companion-chat-shell {
    display: flex;
    flex-direction: column;
    /* 100% : remplit .companion-inbox-center, lui-même stretché à la hauteur de .companion-inbox-shell
       (grid, align-items:stretch par défaut) — plus besoin de recalculer un calc(100vh...) séparé ici. */
    height: 100%;
    background: var(--companion-bg-elevated);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-lg);
    overflow: hidden;
}

/* Switch de conversation en état interne (CompanionChat.razor, SwitchConversationAsync) : la
   conversation précédente reste affichée à l'écran pendant le chargement de la nouvelle (jamais un
   état vide) — ce dim discret est le seul indicateur visuel de la transition. */
.companion-chat-shell-switching .companion-chat-header,
.companion-chat-shell-switching .companion-chat-messages {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s ease;
}

.companion-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--companion-border);
    flex-shrink: 0;
}

/* Bouton retour vers la liste (colonne gauche) — mobile uniquement, quand le dialogue est ouvert
   plein écran par-dessus la liste (voir bloc responsive). */
.companion-inbox-back-btn {
    display: none;
}

/* Chevron du toggle volet profil (.companion-inbox-profile-toggle-btn) — SEMANTIQUE RETENUE, ne pas
   inverser sans relire ceci :
   - SVG de base (markup, path "M6 3L11 8L6 13") pointe à DROITE.
   - Fermé (pas de classe collapsed sur .companion-inbox-shell) = droite (hérite du SVG de base,
     aucune règle nécessaire). Ouvert (collapsed présent) = tourné à 180°, gauche. Même règle pour
     desktop ET mobile — pas de cas particulier ici.
   - .companion-inbox-back-btn (chevron gauche fixe, jamais tourné) collisionnerait visuellement avec
     ce toggle à l'état ouvert (les deux pointent alors à gauche) SI les deux étaient visibles en même
     temps. Ce n'est jamais le cas : le bouton retour est masqué tant que le volet est ouvert (voir
     .companion-inbox-shell.companion-inbox-mobile-panel-open .companion-inbox-back-btn dans le bloc
     mobile plus bas — bug 4A : le volet démarre sous le header, donc le retour resterait visible et
     tappable sans ce masquage, d'où la collision remontée sur device). C'est le masquage du retour qui
     résout la collision, pas une 3e orientation du toggle. */
.companion-inbox-profile-toggle-btn svg {
    transition: transform .15s ease;
}

.companion-inbox-shell.companion-inbox-panel-collapsed .companion-inbox-profile-toggle-btn svg {
    transform: rotate(180deg);
}

.companion-chat-header-text {
    /* Pousse les boutons (poubelle/volet) tout à droite du header, quelle que soit la longueur du
       nom/tagline de l'agent — sans ça ils resteraient collés juste après l'avatar. */
    flex: 1;
    min-width: 0;
}

.companion-chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.companion-chat-name {
    font-size: 15px;
    font-weight: 700;
}

.companion-chat-tagline {
    font-size: 12.5px;
    color: var(--companion-text-soft);
}

.companion-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.companion-chat-empty {
    margin: auto;
    color: var(--companion-text-soft);
    font-size: 14px;
    text-align: center;
}

.companion-chat-bubble-row {
    display: flex;
}

.companion-chat-bubble-row-user {
    justify-content: flex-end;
}

.companion-chat-bubble-row-assistant {
    justify-content: flex-start;
}

.companion-chat-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: var(--companion-radius);
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.companion-chat-bubble-user {
    background: var(--companion-gradient);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.companion-chat-bubble-assistant {
    background: var(--companion-bg-sunken);
    color: var(--companion-text);
    border-bottom-left-radius: 4px;
}

.companion-chat-error {
    color: #dc2626;
    font-size: 13px;
    text-align: center;
}

.companion-chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--companion-border);
    flex-shrink: 0;
}

.companion-chat-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--companion-border);
    background: var(--companion-bg);
    color: var(--companion-text);
    font-family: var(--companion-font);
    font-size: 14px;
}

.companion-chat-input:focus {
    outline: none;
    border-color: var(--companion-purple);
}

/* Bouton icône seule (avion en papier) — override du padding/gap texte hérités de
   .companion-btn-gradient (pensés pour un libellé) : cercle fixe, zone tactile 44px minimum. */
.companion-chat-send-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    /* Avion en papier légèrement décalé visuellement (pointe vers le haut-droit) — recentré d'un
       poil vers le bas-gauche pour paraître optiquement centré dans le cercle, même correction
       d'usage que sur les boutons d'envoi WhatsApp/Telegram. */
    .companion-chat-send-btn svg {
        transform: translate(-1px, 1px);
    }

.companion-chat-send-btn:disabled {
    opacity: .6;
    cursor: default;
}

.companion-chat-cursor {
    display: inline-block;
    width: 2px;
    margin-left: 1px;
    animation: companion-cursor-blink 1s step-start infinite;
}

@keyframes companion-cursor-blink {
    50% { opacity: 0; }
}

.companion-chat-thinking-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    border-radius: 50%;
    background: var(--companion-text-soft);
    animation: companion-thinking-bounce 1.2s infinite ease-in-out;
}

.companion-chat-thinking-dot:nth-child(2) { animation-delay: .15s; }
.companion-chat-thinking-dot:nth-child(3) { animation-delay: .3s; }

@keyframes companion-thinking-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ----- Inbox "Chat" : shell 3 colonnes (liste / dialogue / profil) ----- */

.companion-inbox-shell {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 20px;
    height: calc(100vh - var(--companion-header-h) - 56px);
    height: calc(100dvh - var(--companion-header-h) - 56px);
}

    .companion-inbox-shell.companion-inbox-panel-collapsed {
        grid-template-columns: 280px 1fr;
    }

    .companion-inbox-shell.companion-inbox-panel-collapsed .companion-inbox-profile-panel {
        display: none;
    }

.companion-inbox-list {
    display: flex;
    flex-direction: column;
    background: var(--companion-bg-elevated);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-lg);
    overflow: hidden;
}

.companion-inbox-list-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--companion-border);
    flex-shrink: 0;
}

.companion-inbox-list-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.companion-inbox-list-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Même correctif que .companion-inbox-profile-scroll (voir sa doc) : la liste devient
       scrollable une fois assez de conversations chargées, ce qui réduisait la largeur disponible
       pour .companion-inbox-list-time (l'heure relative, alignée à droite) pile à ce moment-là.
       companion-inbox-list-time a déjà flex-shrink:0, donc pas de perte de caractères observée en
       pratique, mais scrollbar-gutter:stable élimine la variation de largeur elle-même plutôt que
       de compter sur une protection en aval. */
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--companion-border) transparent;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.companion-inbox-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--companion-radius);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background .12s ease;
}

    .companion-inbox-list-item:hover {
        background: var(--companion-bg-sunken);
    }

    /* Div cliquable (role="button", plus un <a>/NavLink — voir SwitchConversationAsync) : le
       focus visible par défaut du navigateur ne s'applique plus automatiquement, on le repose. */
    .companion-inbox-list-item:focus-visible {
        outline: 2px solid var(--companion-purple);
        outline-offset: -2px;
    }

.companion-inbox-list-item-active {
    background: var(--companion-active-bg);
}

.companion-inbox-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.companion-inbox-list-text {
    flex: 1;
    min-width: 0;
}

.companion-inbox-list-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--companion-text);
}

.companion-inbox-list-preview {
    font-size: 12.5px;
    color: var(--companion-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.companion-inbox-list-time {
    font-size: 11px;
    color: var(--companion-muted);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.companion-inbox-center {
    min-width: 0;
    min-height: 0;
}

.companion-inbox-center-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Colonne flex stricte : le carrousel (flex-shrink:0 ci-dessous) ne doit JAMAIS être compressé,
   quel que soit le contenu en dessous — c'est le conteneur .companion-inbox-profile-scroll (flex:1
   + min-height:0 + overflow-y:auto) qui absorbe tout excédent de hauteur (nom, actions, à propos,
   galerie photos). Le panneau lui-même ne scrolle plus. */
.companion-inbox-profile-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 18px;
    background: var(--companion-bg-elevated);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-lg);
    min-height: 0;
    overflow: hidden;
}

.companion-inbox-profile-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Bug : sans scrollbar-gutter, ce conteneur passe de "pas de scrollbar" (largeur pleine) à
       "scrollbar native" (largeur réduite de la largeur de la scrollbar) selon que le contenu
       dépasse ou non (ex. section Photos qui apparaît) — les lignes À propos (valeurs alignées à
       droite, companion-inbox-about-value) perdaient alors leurs derniers caractères ("53 ans" ->
       "53 an") pile au moment où la scrollbar apparaissait. scrollbar-gutter:stable réserve la
       largeur de la scrollbar EN PERMANENCE (scrollbar visible ou non) : la largeur disponible pour
       les enfants ne change plus jamais entre les deux états. overflow-x:hidden en complément —
       overflow-y:auto seul promeut overflow-x en "auto" (règle CSS : "visible" à côté d'un axe non
       "visible" devient "auto"), ce qui aurait sinon permis un clip horizontal silencieux au moindre
       dépassement d'un pixel, gutter réservée ou pas.
       Cf. companion-inbox-list-items (colonne gauche) — même correctif, même raison. */
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--companion-border) transparent;
}

/* Carrousel photo du volet profil — navigation EXPLICITE (flèches + dots), pas de scroll natif
   (aucune affordance visible sur un scroll nu, surtout sur mobile qui n'a pas de hover). Le swipe
   tactile reste possible en bonus (OnCarouselTouchStart/End, CompanionChat.razor), mais les
   boutons/dots sont le mécanisme principal, toujours visibles. */
.companion-inbox-carousel {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--companion-radius);
    background: var(--companion-bg-sunken);
    /* Laisse le scroll vertical de la page passer, capture uniquement les swipes horizontaux —
       évite que le navigateur interprète un swipe latéral comme un scroll de page sur mobile. */
    touch-action: pan-y;
}

.companion-inbox-carousel-track {
    display: flex;
    height: 100%;
    /* transform posé inline (CompanionChat.razor) selon l'index courant — transition ici, pas de
       scroll natif ni de scrollbar visible. */
    transition: transform .3s ease;
}

.companion-inbox-carousel-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--companion-bg-sunken);
}

.companion-inbox-carousel-empty {
    width: 100%;
    flex-shrink: 0;
    aspect-ratio: 3 / 4;
    border-radius: var(--companion-radius);
    font-size: 32px;
}

.companion-inbox-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    /* Fond semi-transparent sombre : reste lisible sur n'importe quelle photo (claire ou sombre),
       pas seulement au hover — visible en permanence (contrainte mobile, pas de hover). */
    background: rgba(15, 15, 26, .45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background .12s ease, opacity .15s ease;
}

    .companion-inbox-carousel-arrow:hover {
        background: rgba(15, 15, 26, .68);
    }

    .companion-inbox-carousel-arrow:disabled {
        /* Premier/dernier item : pas de boucle infinie, la flèche disparaît plutôt que de rester
           cliquable sans effet. */
        opacity: 0;
        pointer-events: none;
    }

.companion-inbox-carousel-arrow-prev {
    left: 8px;
}

.companion-inbox-carousel-arrow-next {
    right: 8px;
}

.companion-inbox-carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.companion-inbox-carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 0 0 1px rgba(15, 15, 26, .25);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

    .companion-inbox-carousel-dot:hover {
        background: rgba(255, 255, 255, .75);
    }

.companion-inbox-carousel-dot-active {
    background: #fff;
    transform: scale(1.25);
}

.companion-inbox-profile-name {
    font-size: 16px;
    font-weight: 700;
}

/* ----- Volet profil : actions rapides (bloc 1) -----
   .companion-inbox-profile-panel a align-items:center (carrousel) — les 3 nouveaux blocs sont
   des frères du carrousel/nom dans le même conteneur flex, donc chacun reçoit explicitement
   width:100% ci-dessous pour ne pas être réduit à sa largeur de contenu par ce centrage. */

.companion-inbox-quick-actions {
    display: flex;
    justify-content: center;
    gap: 22px;
    width: 100%;
}

.companion-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--companion-text-soft);
    font-family: var(--companion-font);
}

    .companion-quick-action:disabled {
        opacity: .5;
        cursor: default;
    }

.companion-quick-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--companion-border);
    background: var(--companion-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}

    .companion-quick-action:hover .companion-quick-action-icon {
        border-color: var(--companion-purple);
        color: var(--companion-purple);
    }

.companion-quick-action-icon-active {
    border-color: var(--companion-purple);
    background: var(--companion-gradient);
    color: #fff;
}

.companion-quick-action-label {
    font-size: 11px;
    font-weight: 600;
}

/* ----- Volet profil : "À propos" (bloc 2) ----- */

.companion-inbox-about {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.companion-inbox-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--companion-text);
    align-self: flex-start;
}

.companion-inbox-about-tags {
    justify-content: flex-start;
}

.companion-inbox-personality-tag {
    background: var(--companion-active-bg);
    color: var(--companion-purple);
    font-weight: 600;
}

.companion-inbox-about-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.companion-inbox-about-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}

.companion-inbox-about-icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

.companion-inbox-about-label {
    color: var(--companion-text-soft);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.companion-inbox-about-value {
    font-weight: 600;
    color: var(--companion-text);
    /* Alignée à droite (dernier enfant de la ligne flex) — c'est elle qui perdait ses derniers
       caractères quand la ligne se resserrait (voir scrollbar-gutter sur
       .companion-inbox-profile-scroll). flex-shrink:0 + white-space:nowrap : ne rétrécit/ne clippe
       jamais ; si l'espace venait vraiment à manquer, c'est le label (ellipsis ci-dessus) qui cède
       en premier, jamais la valeur. */
    flex-shrink: 0;
    white-space: nowrap;
}

/* ----- Volet profil : galerie (bloc 3) ----- */

.companion-inbox-gallery {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.companion-inbox-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
}

.companion-inbox-gallery-item {
    position: relative;
    padding: 0;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--companion-bg-sunken);
    cursor: pointer;
}

    .companion-inbox-gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Grille plafonnée à 6 tuiles (2 rangées de 3) — voir CompanionChat.razor GalleryMaxTiles. Au-delà,
   la 6e tuile garde sa miniature réelle mais reçoit un overlay sombre "+N" et ouvre la galerie
   complète (.companion-gallery-overlay-*) au lieu de pointer le carrousel. */
.companion-inbox-gallery-overflow-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 26, .55);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

/* ----- Volet profil : galerie complète (overlay plein écran, ouvert depuis la tuile "+N") ----- */

.companion-gallery-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.78);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.companion-gallery-overlay-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 86vh;
    background: var(--companion-bg-elevated);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.companion-gallery-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--companion-border);
    flex-shrink: 0;
}

.companion-gallery-overlay-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.companion-gallery-overlay-close {
    /* .companion-lightbox-close est positionné en absolute (bulle hors-cadre sur une image
       plein écran) — ici le bouton vit dans un header en flex, donc on le repose en flux normal. */
    position: static;
    top: auto;
    right: auto;
}

.companion-gallery-overlay-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 16px 18px;
}

/* ----- Bandeau incitation inscription (chat anonyme) ----- */

.companion-chat-signup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--companion-bg-sunken);
    border-bottom: 1px solid var(--companion-border);
    font-size: 12.5px;
    color: var(--companion-text-soft);
    flex-shrink: 0;
}

.companion-chat-signup-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.companion-chat-signup-banner-cta {
    border: none;
    background: var(--companion-gradient);
    color: #fff;
    font-family: var(--companion-font);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.companion-chat-signup-banner-dismiss {
    border: none;
    background: transparent;
    color: var(--companion-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

    .companion-chat-signup-banner-dismiss:hover {
        color: var(--companion-text);
    }

/* ----- Modal auth (register/login) ----- */

.companion-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 26, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.companion-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--companion-bg-elevated);
    border-radius: var(--companion-radius-lg);
    box-shadow: var(--companion-shadow-lg);
    padding: 32px 28px 24px;
}

.companion-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--companion-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

    .companion-modal-close:hover {
        background: var(--companion-bg-sunken);
        color: var(--companion-text);
    }

.companion-modal-header {
    text-align: center;
    margin-bottom: 20px;
}

    .companion-modal-header .companion-logo-mark {
        margin: 0 auto 14px;
    }

.companion-modal-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 6px;
}

.companion-modal-subtitle {
    font-size: 13px;
    color: var(--companion-text-soft);
    margin: 0;
    line-height: 1.4;
}

.companion-modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.companion-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .companion-modal-field label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--companion-text-soft);
    }

.companion-modal-input {
    padding: 10px 14px;
    border-radius: var(--companion-radius-sm);
    border: 1.5px solid var(--companion-border);
    background: var(--companion-bg);
    color: var(--companion-text);
    font-family: var(--companion-font);
    font-size: 14px;
}

    .companion-modal-input:focus {
        outline: none;
        border-color: var(--companion-purple);
    }

.companion-modal-error {
    font-size: 12.5px;
    color: #dc2626;
    background: rgba(220, 38, 38, .08);
    border-radius: var(--companion-radius-sm);
    padding: 8px 10px;
    line-height: 1.4;
}

.companion-modal-success {
    font-size: 12.5px;
    color: #15803d;
    background: rgba(21, 128, 61, .08);
    border-radius: var(--companion-radius-sm);
    padding: 8px 10px;
    line-height: 1.4;
}

.companion-modal-forgot-link {
    align-self: flex-end;
    margin-top: -6px;
    border: none;
    background: transparent;
    color: var(--companion-text-soft);
    font-family: var(--companion-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .companion-modal-forgot-link:hover {
        color: var(--companion-purple);
        text-decoration: underline;
    }

.companion-modal-submit {
    width: 100%;
    justify-content: center;
    border: none;
    cursor: pointer;
    margin-top: 4px;
}

    .companion-modal-submit:disabled {
        opacity: .6;
        cursor: default;
    }

.companion-modal-switch {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 18px;
    border: none;
    background: transparent;
    color: var(--companion-purple);
    font-family: var(--companion-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .companion-modal-switch:hover {
        text-decoration: underline;
    }

/* ----- Écran de blocage modération (WallType.Moderation, WallModal.razor) ----- */

.companion-moderation-modal .companion-modal-title {
    color: #dc2626;
}

/* ----- Favoris : état invité / vide (bouton optionnel dans companion-empty-state) ----- */

.companion-empty-state p {
    margin: 0 0 14px;
}

/* ----- Page Réinitialisation mot de passe (/companion/reset-password) ----- */

.companion-reset-password-panel {
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
}

    .companion-reset-password-panel .companion-modal-form {
        margin-top: 14px;
    }

/* ----- Page Profil (/companion/profil) ----- */

.companion-profile-page {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.companion-profile-section {
    padding: 22px;
}

.companion-profile-section-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px;
}

.companion-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.companion-profile-row-gap {
    margin-top: 12px;
}

.companion-profile-input {
    flex: 1;
    min-width: 200px;
}

.companion-profile-static {
    font-size: 14px;
    color: var(--companion-text);
}

.companion-profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

    .companion-profile-field:last-child {
        margin-bottom: 0;
    }

    .companion-profile-field label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--companion-text-soft);
    }

.companion-profile-select {
    width: 100%;
}

.companion-profile-message {
    margin-top: 10px;
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: var(--companion-radius-sm);
    line-height: 1.4;
}

.companion-profile-message-success {
    color: #15803d;
    background: rgba(21, 128, 61, .08);
}

.companion-profile-message-error {
    color: #dc2626;
    background: rgba(220, 38, 38, .08);
}

.companion-profile-plan-label {
    font-size: 12px;
    color: var(--companion-text-soft);
    margin-bottom: 3px;
}

.companion-profile-plan-expiry {
    font-size: 12px;
    color: var(--companion-text-soft);
    margin-top: 3px;
}

.companion-profile-plan-cancelled-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(180, 83, 9, 0.15);
    color: #b45309;
}

.companion-profile-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--companion-border);
}

.companion-profile-danger-title {
    color: #dc2626;
}

.companion-profile-danger-text {
    font-size: 12.5px;
    color: var(--companion-text-soft);
    margin: 4px 0 0;
    max-width: 380px;
    line-height: 1.4;
}

.companion-profile-btn-danger {
    border-color: #dc2626;
    color: #dc2626;
}

    .companion-profile-btn-danger:hover {
        background: rgba(220, 38, 38, .08);
        border-color: #dc2626;
        color: #dc2626;
    }

/* Variante pleine (bouton de soumission du modal de suppression, .companion-btn-gradient de base) :
   remplace le dégradé marque par un rouge plein — jamais le violet/rose pour une action destructive. */
.companion-btn-gradient.companion-profile-btn-danger {
    background: #dc2626;
    box-shadow: 0 4px 14px rgba(220, 38, 38, .28);
    color: #fff;
}

    .companion-btn-gradient.companion-profile-btn-danger:hover {
        background: #b91c1c;
        color: #fff;
        box-shadow: 0 8px 20px rgba(220, 38, 38, .36);
    }

/* ----- Wizard "Créer mon IA" (PROMPT-06) ----- */

.companion-wizard {
    max-width: 720px;
    margin: 0 auto;
}

.companion-wizard-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--companion-bg-sunken);
    overflow: hidden;
    margin-bottom: 8px;
}

.companion-wizard-progress-bar {
    height: 100%;
    background: var(--companion-gradient);
    transition: width .25s ease;
}

.companion-wizard-step-label {
    font-size: 12px;
    color: var(--companion-muted);
    margin-bottom: 18px;
}

.companion-wizard-step-title {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 18px;
}

.companion-wizard-name-input {
    width: 100%;
    max-width: 360px;
    font-size: 16px;
    padding: 12px 16px;
}

/* -- écran langue (étape prénom, voir CompanionWizard.razor) -- */

.companion-wizard-language-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.companion-wizard-language-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--companion-border);
    background: transparent;
    cursor: pointer;
    font-family: var(--companion-font);
}

.companion-wizard-language-pill-selected {
    border-color: var(--companion-purple);
    background: var(--companion-active-bg);
}

.companion-wizard-language-flag {
    font-size: 18px;
    line-height: 1;
}

.companion-wizard-language-name {
    font-size: 13.5px;
    font-weight: 600;
}

/* -- grid_3/4/5/6 -- */

.companion-wizard-grid {
    display: grid;
    gap: 14px;
}

.companion-wizard-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.companion-wizard-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.companion-wizard-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.companion-wizard-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.companion-wizard-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--companion-radius);
    background: var(--companion-bg-elevated);
    cursor: pointer;
    overflow: hidden;
    font-family: var(--companion-font);
    transition: border-color .12s ease, transform .12s ease;
}

    .companion-wizard-tile:hover {
        transform: translateY(-2px);
    }

.companion-wizard-tile-selected {
    border-color: var(--companion-purple);
}

.companion-wizard-tile-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--companion-bg-sunken);
}

.companion-wizard-tile-label {
    font-size: 12.5px;
    font-weight: 600;
    padding: 0 8px 10px;
}

.companion-wizard-tile-premium {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--companion-gradient);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -- grid_expandable -- */

.companion-wizard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.companion-wizard-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--companion-border);
    background: var(--companion-bg-elevated);
    color: var(--companion-text);
    font-family: var(--companion-font);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

    .companion-wizard-chip:hover {
        border-color: var(--companion-purple);
    }

.companion-wizard-chip-selected {
    border-color: transparent;
    background: var(--companion-gradient);
    color: #fff;
}

.companion-wizard-chip-emoji {
    font-size: 15px;
}

.companion-wizard-chip-premium {
    font-size: 11px;
    opacity: .85;
}

.companion-wizard-chip-more {
    margin-top: 14px;
}

/* -- slider -- */

.companion-wizard-slider {
    max-width: 420px;
    padding: 8px 0;
}

.companion-wizard-slider-value {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 14px;
    background: var(--companion-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.companion-wizard-slider-input {
    width: 100%;
    accent-color: var(--companion-purple);
}

.companion-wizard-slider-bounds {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--companion-muted);
    margin-top: 6px;
}

/* -- voice_player -- */

.companion-wizard-voice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
}

.companion-wizard-voice-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: var(--companion-radius);
    border: 1.5px solid var(--companion-border);
}

.companion-wizard-voice-row-selected {
    border-color: var(--companion-purple);
    background: var(--companion-active-bg);
}

.companion-wizard-voice-select {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--companion-font);
    padding: 0;
    flex-shrink: 0;
}

.companion-wizard-voice-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--companion-border);
    flex-shrink: 0;
}

.companion-wizard-voice-row-selected .companion-wizard-voice-radio {
    border-color: var(--companion-purple);
    background: var(--companion-gradient);
}

.companion-wizard-voice-name {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.companion-wizard-voice-audio {
    height: 32px;
    flex: 1;
    min-width: 0;
}

/* Bloc filtres "Voix" (accent/genre/âge) — règles copiées/adaptées de .companion-wizard-language-pill
   ci-dessus (même look que le bloc "Langue" juste au-dessus dans le wizard, comme demandé), sous un
   nom sémantiquement correct plutôt que réutilisées telles quelles (même raison que list_select
   ci-dessous : "Langue" et "Voix" sont deux zones distinctes du wizard). */

.companion-wizard-voice-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 20px;
}

.companion-wizard-voice-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.companion-wizard-voice-filter-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--companion-muted);
}

.companion-wizard-voice-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.companion-wizard-voice-filter-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--companion-border);
    background: transparent;
    color: var(--companion-text);
    cursor: pointer;
    font-family: var(--companion-font);
    font-size: 13px;
    font-weight: 500;
}

.companion-wizard-voice-filter-pill-selected {
    border-color: var(--companion-purple);
    background: var(--companion-active-bg);
}

/* -- liste de voix : étoiles qualité (item 4) + bouton play inline (item 5) -- */

.companion-wizard-voice-stars {
    font-size: 13px;
    color: #e0a800;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.companion-wizard-voice-play {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--companion-border);
    background: transparent;
    color: var(--companion-text);
    cursor: pointer;
    font-size: 12px;
}

.companion-wizard-voice-play:disabled {
    opacity: .6;
    cursor: default;
}

.companion-wizard-voice-play-active {
    border-color: var(--companion-purple);
    background: var(--companion-gradient);
    color: #fff;
}

.companion-wizard-voice-row-error {
    margin: -4px 0 4px 14px;
    font-size: 12px;
    color: #e5534b;
}

/* -- list_select (ex: "registre" — façon de parler) : mêmes règles que voice_player ci-dessus,
   dupliquées sous un nom sémantiquement correct plutôt que réutilisées telles quelles — ce
   composant n'a pas de lecteur audio et n'est pas sourcé depuis la DB voices. -- */

.companion-wizard-list-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
}

.companion-wizard-list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: var(--companion-radius);
    border: 1.5px solid var(--companion-border);
}

.companion-wizard-list-row-selected {
    border-color: var(--companion-purple);
    background: var(--companion-active-bg);
}

.companion-wizard-list-select {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--companion-font);
    padding: 0;
    width: 100%;
    text-align: left;
}

.companion-wizard-list-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--companion-border);
    flex-shrink: 0;
}

.companion-wizard-list-row-selected .companion-wizard-list-radio {
    border-color: var(--companion-purple);
    background: var(--companion-gradient);
}

.companion-wizard-list-name {
    font-size: 13.5px;
    font-weight: 600;
}

/* -- navigation / erreur / succès -- */

.companion-wizard-error {
    margin-top: 18px;
}

.companion-wizard-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
}

.companion-wizard-success {
    max-width: 420px;
    margin: 60px auto;
    text-align: center;
}

.companion-wizard-success-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
}

/* ----- Guest funnel : reveal wizard (2 portraits, transition) -----
   docs/prompts/prompt-1-parcours-visiteur-v2.md — séquence Generating -> Choosing ->
   Transitioning, voir CompanionWizard.razor (bloc guestRevealPhase). ----- */

.companion-wizard-reveal {
    max-width: 640px;
    margin: 60px auto;
    text-align: center;
}

.companion-wizard-reveal-generating .companion-logo-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    animation: companion-reveal-pulse 1.6s ease-in-out infinite;
}

@keyframes companion-reveal-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

.companion-wizard-reveal-portraits {
    display: flex;
    flex-direction: row;
    gap: 18px;
    margin-top: 8px;
}

.companion-wizard-reveal-portrait {
    flex: 1 1 0;
    width: 0; /* force un partage égal — flex-basis seul laisse l'image imposer sa largeur intrinsèque */
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--companion-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .12s ease, transform .12s ease;
}

    .companion-wizard-reveal-portrait:hover {
        border-color: var(--companion-purple);
        transform: translateY(-2px);
    }

.companion-wizard-reveal-avatar {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: block;
    border: 2px solid var(--companion-purple);
}

/* ----- Mon Album (remplace Explorer) ----- */

.companion-album-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

/* companion-album-page en colonne flex : laisse companion-album-empty (flex:1) se centrer dans
   l'espace libéré par le footer (retiré de /album, voir CompanionLayout.razor.ShowFooter) au lieu
   de rester collé sous le header. min-height:100% se résout contre companion-content (flex:1 dans
   companion-main-col), qui a une hauteur définie — même mécanisme que companion-content lui-même. */
.companion-album-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.companion-album-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.companion-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.companion-album-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--companion-radius-lg);
    overflow: hidden;
    background: var(--companion-bg-sunken);
    cursor: pointer;
}

    .companion-album-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Bandeau d'actions bas de vignette (Supprimer / Télécharger) — icônes blanches en permanence
   (mobile n'a pas de hover ; desktop reste cohérent avec le même rendu). Clippé par le
   border-radius/overflow:hidden de companion-album-tile. */
.companion-album-tile-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 6px 0 8px;
    background: linear-gradient(to top, rgba(15, 15, 26, .7), rgba(15, 15, 26, 0));
}

.companion-album-tile-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s ease;
}

    .companion-album-tile-action:hover {
        background: rgba(255, 255, 255, .2);
    }

.companion-album-wizard {
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}

.companion-album-wizard-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--companion-bg-sunken);
    overflow: hidden;
    margin-bottom: 16px;
}

.companion-album-wizard-progress-bar {
    height: 100%;
    background: var(--companion-gradient);
    transition: width .25s ease;
}

.companion-album-wizard-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.companion-album-wizard-actions-3 {
    flex-wrap: wrap;
}

.companion-album-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.companion-album-agent-tile {
    text-align: center;
    cursor: pointer;
    border-radius: var(--companion-radius-lg);
    padding: 8px;
    transition: background .15s ease;
}

    .companion-album-agent-tile:hover {
        background: var(--companion-bg-sunken);
    }

    .companion-album-agent-tile img {
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        border-radius: var(--companion-radius-lg);
        display: block;
        margin-bottom: 6px;
    }

    .companion-album-agent-tile span {
        font-size: 13px;
        font-weight: 600;
    }

.companion-album-rgpd-note {
    font-size: 12px;
    color: var(--companion-text-soft);
    margin: 0 0 14px;
}

.companion-album-camera-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    border-radius: var(--companion-radius-lg);
    overflow: hidden;
    background: #000;
}

.companion-album-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* miroir selfie — voir album-camera.js pour le même mirroring côté capture */
}

.companion-album-camera-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    stroke: rgba(255, 255, 255, .7);
    fill: none;
    stroke-width: 2;
    pointer-events: none;
}

.companion-album-canvas-hidden {
    display: none;
}

.companion-album-error {
    font-size: 13px;
    color: #f87171;
    margin: 10px 0 0;
}

.companion-album-wait {
    text-align: center;
    padding: 30px 0;
}

.companion-album-wait-mark {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    animation: companion-reveal-pulse 1.6s ease-in-out infinite;
}

.companion-album-canonical-preview,
.companion-album-scene-result {
    width: 100%;
    max-width: 320px;
    display: block;
    margin: 0 auto 14px;
    border-radius: var(--companion-radius-lg);
}

.companion-album-scene-input {
    width: 100%;
    min-height: 80px;
    border-radius: var(--companion-radius-lg);
    border: 1px solid var(--companion-bg-sunken);
    background: var(--companion-bg-sunken);
    color: var(--companion-text);
    padding: 10px 12px;
    font: inherit;
    resize: vertical;
}

/* ----- Bottom nav mobile (CompanionBottomNav.razor) -----
   Masquée par défaut (desktop) — activée uniquement sous 768px, où elle remplace la sidebar comme
   navigation primaire (voir bloc responsive plus bas). Présente dans le DOM à toutes les tailles
   d'écran (même pattern que .companion-sidebar-overlay ci-dessus) mais display:none tant que ce
   breakpoint n'est pas actif : jamais de layout desktop touché par son ajout. */
.companion-bottom-nav {
    display: none;
}

/* ===================================================================
   Responsive (mobile-first overrides) — breakpoints 768px / 1024px.
   Tout le CSS ci-dessus reste le rendu desktop de référence, inchangé ;
   le responsive vit exclusivement dans ces media queries, en overrides
   ciblés, pour ne jamais risquer d'altérer le rendu desktop existant.
   =================================================================== */

@media (max-width: 1024px) {
    .companion-home-aside {
        width: 260px;
    }
}

@media (max-width: 768px) {
    /* ---- Shell / structure ---- */
    /* dvh (dynamic viewport height) plutôt que vh : sur mobile, vh inclut la zone masquée par la
       barre d'adresse/le clavier virtuel, ce qui coupe le bas du layout (input de chat compris).
       Réassigner --companion-header-h ici propage automatiquement la nouvelle hauteur à tout ce
       qui la consomme (.companion-header, le calc de .companion-chat-shell plus bas). */
    .companion-shell {
        height: 100dvh;
        --companion-header-h: 60px;
        /* Hauteur RÉELLE (min-height) de .companion-chat-header, mesurée seule sous ce breakpoint
           (icônes 44px + padding:12px 14px, aucune tagline — les 5 agents de test disponibles n'en
           ont pas). Consommée par .companion-inbox-profile-panel plus bas (+ .companion-chat-shell
           border-top 1px, additionné séparément là-bas — ne PAS le refondre dans cette variable, ce
           n'est pas la hauteur du header) pour démarrer sous les DEUX headers empilés — voir bug 4A.
           min-height (pas height) : si une tagline pousse un jour le header plus haut que cette
           valeur, il grandit sans être coupé ; le volet démarrerait alors quelques px trop haut dans
           ce cas précis (résiduel très inférieur au bug actuel, non revérifié faute d'agent de test
           avec tagline). */
        --companion-chat-header-h: 69px;
        /* Hauteur totale (barre + zone tactile safe-area) de .companion-bottom-nav — consommée par
           .companion-content (padding-bottom), .companion-inbox-shell (hauteur dispo en vue liste)
           et .companion-wizard-nav (offset du bas sticky). Un seul endroit de vérité, même patron
           que --companion-header-h/--companion-chat-header-h ci-dessus. */
        --companion-bottom-nav-h: 60px;
    }

    .companion-content {
        /* Bottom nav fixe par-dessus le contenu (voir plus bas) : padding-bottom dédié pour que la
           dernière ligne de contenu (bouton "Démarrer" d'un empty state, dernière carte d'une
           grille...) ne soit jamais masquée derrière elle. Sans effet visuel quand la bottom nav est
           elle-même masquée (vue conversation /chat, voir la règle :has() plus bas) — le composer du
           chat gère déjà son propre safe-area (.companion-chat-input-row), cette marge est juste
           inutilisée dans ce cas, jamais nuisible. */
        padding: 16px 16px calc(16px + var(--companion-bottom-nav-h) + env(safe-area-inset-bottom));
    }

    /* ---- Sidebar -> tiroir off-canvas ---- */
    .companion-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(var(--companion-sb-width), 82vw);
        min-width: 0;
        height: 100dvh;
        z-index: 70;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--companion-shadow-lg);
    }

    .companion-shell.companion-sidebar-open .companion-sidebar {
        transform: translateX(0);
    }

    .companion-nav-item {
        padding: 12px;
        font-size: 15px;
    }

    /* Accueil/Mes IA/Créer/Chat : couverts par la bottom nav mobile (CompanionBottomNav.razor),
       masqués ici pour ne pas les dupliquer dans le tiroir — Mon Album/Favoris restent (seuls items
       non couverts par les 5 slots de la bottom nav). */
    .companion-nav-item-mobile-hidden {
        display: none;
    }

    /* Langue + toggle Femme/Homme : masqués du header (trop à l'étroit à côté du burger sous ce
       breakpoint), déplacés dans le tiroir via .companion-sidebar-mobile-controls ci-dessous. */
    .companion-sidebar-mobile-controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 4px 0 14px;
        border-bottom: 1px solid var(--companion-border);
        margin-bottom: 10px;
    }

        .companion-sidebar-mobile-controls .companion-gender-toggle {
            align-self: flex-start;
        }

    .companion-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 15, 26, .5);
        z-index: 60;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .companion-shell.companion-sidebar-open .companion-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---- Header ---- */
    .companion-header {
        padding: 0 14px;
        gap: 10px;
    }

    .companion-header-actions {
        gap: 8px;
    }

    .companion-mobile-menu-btn,
    .companion-mobile-brand {
        display: flex;
    }

    /* Repris dans le tiroir (.companion-sidebar-mobile-controls, voir plus haut) — le header mobile
       n'a pas la place pour burger + logo + langue + genre + créer + notif + avatar en même temps. */
    .companion-header-actions .companion-lang-switcher,
    .companion-header-actions .companion-gender-toggle {
        display: none;
    }

    /* ---- Home : hero ---- */
    .companion-hero {
        flex-direction: column;
        align-items: stretch;
        padding: 24px 20px;
        gap: 20px;
        margin-bottom: 20px;
    }

    .companion-hero-content {
        max-width: none;
    }

    .companion-hero-title {
        font-size: 25px;
    }

    .companion-hero-visual {
        align-self: center;
    }

    /* ---- Home : hero album compacté (4C, commit B) — la @container hero-album à 780px (déjà active
       à cette largeur de viewport, inchangée ici) gère la mise en page (colonne, trio en L) mais ses
       tailles restent pensées pour un container proche de 780px, pas ~360px. Ces règles se superposent
       PAR-DESSUS (ce bloc @media vient après les @container dans le fichier, aucune n'est modifiée) :
       objectif hero ≤320px de haut sous ce breakpoint pour faire remonter "Pour toi" au-dessus de la
       ligne de flottaison. Mesuré à 393px : 478px -> voir commit pour la valeur finale. */
    .companion-hero-album {
        margin-bottom: 16px;
    }

    .companion-hero-album-row {
        padding: 16px 18px;
        gap: 14px;
    }

    .companion-hero-album-title {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .companion-hero-album-subtitle {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .companion-hero-album-content .companion-btn-gradient {
        padding: 8px 16px;
    }

    .companion-hero-album-strip {
        row-gap: 8px;
    }

    /* Plancher clamp() de base (72px) pensé pour un container ~780px — trop grand ici. */
    .companion-hero-album-step-selfie .companion-hero-album-img,
    .companion-hero-album-step-portrait .companion-hero-album-imgwrap {
        width: 50px;
        height: 50px;
    }

    .companion-hero-album-step-couple .companion-hero-album-imgwrap {
        max-width: 130px;
    }

    /* ---- Home : layout deux colonnes -> empilé ---- */
    .companion-home-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
    }

    .companion-home-aside {
        width: 100%;
    }

    /* ---- Chips rangée 1 (relationship) : wrap sur 3 lignes -> scroll horizontal 1 ligne (4C) ----
       Même patron que .companion-facet-row (rangée 2, juste au-dessus dans le markup) : nowrap +
       overflow-x:auto, scrollbar masquée, scroll tactile natif seul (pas de JS ici non plus, comme
       la rangée 2 sous ce même breakpoint). .companion-pill n'a pas de flex-shrink:0 dans sa règle de
       base (contrairement à .companion-facet-pill qui l'a déjà) — sans lui les pills se
       compresseraient au lieu de déborder/scroller, voir le commentaire équivalent plus haut pour la
       rangée 2. min-width:0 sur .companion-filter-bar (parent direct) par prudence, même
       raisonnement que .companion-home-main plus haut. */
    .companion-filter-bar {
        min-width: 0;
    }

    .companion-pills-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

        .companion-pills-row::-webkit-scrollbar {
            display: none;
        }

        .companion-pills-row .companion-pill {
            flex-shrink: 0;
        }

    /* ---- Grilles personnages (home / favoris / mes IA) ---- */
    .companion-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }

    /* ---- Chat ---- */
    .companion-chat-header {
        padding: 12px 14px;
        min-height: var(--companion-chat-header-h);
    }

    /* Cible tactile 44x44 minimum (retour/poubelle/toggle profil) : la classe .companion-icon-btn
       est partagée avec le header global (burger/cloche, CompanionHeader.razor) qu'on ne touche pas
       ici — scopé à .companion-chat-header pour ne pas répercuter la taille ailleurs. */
    .companion-chat-header .companion-icon-btn {
        width: 44px;
        height: 44px;
    }

    .companion-chat-messages {
        padding: 14px;
    }

    .companion-chat-bubble {
        max-width: 86%;
    }

    .companion-chat-input-row {
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .companion-chat-signup-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ---- Inbox "Chat" : une seule colonne à la fois ---- */
    /* Vue par défaut = liste (colonne gauche) seule. Ouvrir une conversation
       (companion-inbox-dialog-active, posé dès que AgentId est présent dans la route) bascule sur le
       dialogue en plein écran par-dessus, avec un bouton retour dans son header — voir
       .companion-inbox-back-btn plus haut (hors media query, display:none par défaut). Le volet
       profil suit son propre bool mobile (companion-inbox-mobile-panel-open, séparé du bool desktop
       companion-inbox-panel-collapsed) : fermé par défaut sur mobile même quand le volet desktop est
       ouvert par défaut — même bouton, deux bools togglés ensemble (voir CompanionChat.razor). */
    .companion-inbox-shell {
        display: block;
        /* 32px = padding haut+bas de .companion-content en vue liste (16px chacun avant la marge
           bottom-nav ci-dessus) + var(--companion-bottom-nav-h) : la bottom nav reste visible (fixe)
           par-dessus la vue liste, donc la hauteur dispo pour la liste elle-même doit s'arrêter
           au-dessus d'elle. Sans objet en vue conversation (companion-inbox-dialog-active) : la
           bottom nav y est masquée (voir règle :has() plus bas) et .companion-inbox-center prend le
           relais en position:fixed plein écran, indépendant de cette hauteur. */
        height: calc(100dvh - var(--companion-header-h) - 32px - var(--companion-bottom-nav-h));
        position: relative;
    }

    .companion-inbox-list {
        height: 100%;
        border-radius: var(--companion-radius);
    }

    .companion-inbox-center {
        display: none;
    }

    .companion-inbox-shell.companion-inbox-dialog-active .companion-inbox-list {
        display: none;
    }

    .companion-inbox-shell.companion-inbox-dialog-active .companion-inbox-center {
        display: block;
        position: fixed;
        inset: var(--companion-header-h) 0 0 0;
        z-index: 40;
        background: var(--companion-bg);
    }

    /* Ajoutée par CompanionChat.razor (JS interop visualViewport, OnVisualViewportChanged) une fois
       --companion-keyboard-inset connue : bottom:0 de la règle ci-dessus est remplacé par le nombre
       de px effectivement couverts par le clavier virtuel, pour que le composer reste collé juste
       au-dessus (voir app.js, companionViewport). bottom (pas height comme avant) : avec top fixe,
       une hauteur calculée à partir de visualViewport.height SEUL ignore visualViewport.offsetTop
       (le viewport visuel peut être décalé vers le bas, sans scroll de document, quand le navigateur
       pousse le champ focus au-dessus du clavier) — d'où le "trou" constaté entre le composer et le
       clavier, remonté à mi-écran. bottom:inset comble exactement l'espace couvert quel que soit cet
       offset. Tant que la classe n'est jamais posée (JS jamais exécuté ou en échec), bottom:0 de la
       règle ci-dessus reste seul à s'appliquer — jamais de valeur manquante. */
    .companion-inbox-shell.companion-inbox-dialog-active .companion-inbox-center.companion-visual-vh-active {
        bottom: var(--companion-keyboard-inset, 0px);
    }

    .companion-chat-shell {
        border-radius: 0;
    }

    .companion-inbox-back-btn {
        display: flex;
    }

    /* Bug remonté sur device : le fix 4A a placé le volet profil pour qu'il démarre SOUS le header
       (garder le header accessible pendant que le volet est ouvert), donc .companion-inbox-back-btn
       reste visible ET tappable en même temps que .companion-inbox-profile-toggle-btn — deux chevrons
       "<" côte à côte à l'état ouvert, impossible à distinguer. Plutôt que d'inventer une 3e
       orientation pour le toggle, on masque le retour tant que le volet est ouvert : les deux boutons
       ne sont alors jamais visibles ensemble, et la sémantique gauche/droite naturelle du toggle
       (héritée de la règle desktop juste au-dessus dans ce fichier, inchangée) redevient valable ici
       aussi sans règle supplémentaire. Même patron que .companion-inbox-profile-panel elle-même
       (display:none par défaut, montrée via la même classe d'état companion-inbox-mobile-panel-open). */
    .companion-inbox-shell.companion-inbox-mobile-panel-open .companion-inbox-back-btn {
        display: none;
    }

    .companion-inbox-profile-panel {
        display: none;
    }

    .companion-inbox-shell.companion-inbox-mobile-panel-open .companion-inbox-profile-panel {
        display: flex;
        position: fixed;
        /* Bug 4A : var(--companion-header-h) seul ne compte que le header GLOBAL (burger/EN/W-M/+/
           cloche) — le header de conversation (.companion-chat-header, qui contient le chevron pour
           refermer ce volet) est empilé juste en dessous et se retrouvait sous ce volet, chevron
           inclus : aucun moyen de fermer. +1px : border-top de .companion-chat-shell (mesuré — le
           header de conversation ne commence pas exactement où .companion-inbox-center commence,
           cette bordure s'intercale) ; sans lui le volet démarrait 1px trop haut, chevauchant encore
           la bordure basse du header. Vérifié en direct (getBoundingClientRect) : le bas du volet
           correctif tombe pile sur le bas réel du header conversation, aux deux valeurs. */
        inset: calc(var(--companion-header-h) + 1px + var(--companion-chat-header-h)) 0 0 0;
        z-index: 50;
        border-radius: 0;
        justify-content: flex-start;
    }

    .companion-inbox-shell.companion-inbox-mobile-panel-open .companion-inbox-profile-scroll {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Fiche profil agent (volet mobile) : la règle de base (aspect-ratio:3/4 sur width:100%,
       app.css:5508-5519) fait dépendre la hauteur de la photo de la largeur du panneau — quand les
       deux dimensions height/aspect-ratio sont définies, height gagne et aspect-ratio devient inerte
       (spec CSS sizing), donc pas besoin de le désactiver explicitement ici. vh puis dvh (fallback
       navigateurs sans dvh, même patron que .companion-shell). Cible initiale 55vh (~469px mesurés,
       quasi identique à l'ancien aspect-ratio sur cet agent de test) : nom et rangée d'actions
       visibles, mais la 1ère ligne de bio n'affleurait qu'à 8px du bas — pas "visible" au sens utile.
       Redescendu à 48vh (mesuré, pas deviné) : 2 lignes de bio complètes rentrent avec de la marge.
       object-position biaisé vers le haut (visage), même raisonnement que
       .companion-hero-album-step-couple .companion-hero-album-img plus haut dans ce fichier — à
       ajuster après confirmation visuelle sur un vrai device, pas de donnée par photo pour calculer
       le cadrage exact ici. */
    .companion-inbox-carousel,
    .companion-inbox-carousel-empty {
        height: 48vh;
        height: 48dvh;
    }

    .companion-inbox-carousel-item {
        object-position: center 20%;
    }

    /* ---- Bottom nav mobile (CompanionBottomNav.razor) ----
       5 items fixes en bas d'écran : Accueil/Mes IA/Chat/Premium + "Créer" au centre, surélevé.
       Masquée uniquement en vue conversation de /chat (companion-inbox-dialog-active posé par
       CompanionChat.razor sur .companion-inbox-shell) via :has() — pas de state partagé entre les
       deux composants, juste un sélecteur structurel au niveau de leur ancêtre commun. */
    .companion-bottom-nav {
        display: flex;
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--companion-bottom-nav-h);
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--companion-bg-elevated);
        border-top: 1px solid var(--companion-border);
        z-index: 80;
    }

    .companion-main-col:has(.companion-inbox-shell.companion-inbox-dialog-active) .companion-bottom-nav {
        display: none;
    }

    .companion-bottom-nav-item {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 44px;
        padding: 6px 2px;
        color: var(--companion-muted);
        text-decoration: none;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
    }

        .companion-bottom-nav-item span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

    .companion-bottom-nav-item-active {
        color: var(--companion-pink);
    }

    /* "Créer" central : cercle en dégradé, légèrement surélevé au-dessus de la barre (même dégradé
       que le CTA "Créer mon IA" du header/sidebar, --companion-gradient) — jamais d'état actif visuel
       distinct (ActiveClass="" côté razor), toujours identique quel que soit le step /create courant. */
    .companion-bottom-nav-create {
        position: relative;
        justify-content: flex-end;
        padding-bottom: 8px;
    }

    .companion-bottom-nav-create-btn {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--companion-gradient);
        color: #fff;
        box-shadow: 0 4px 14px rgba(168, 85, 247, .45);
        border: 3px solid var(--companion-bg-elevated);
    }

    /* Premium : traitement visuel distinct (doré) — jamais confondu avec les 3 items neutres (gris
       muted/rose actif) ni avec le CTA "Créer" (dégradé rose/violet). Icône toujours dorée (même à
       l'état inactif, contrairement aux 3 autres items dont l'icône suit le texte) ; le label lui-
       même ne bascule au doré qu'à l'état actif, pour garder un contraste texte raisonnable au repos
       (var(--companion-muted), identique aux 3 autres items non actifs). Couleur locale (pas de
       nouvelle variable --root : seul usage de ce ton ici, même famille de teinte que la glow ambrée
       de l'étape album "couple" plus haut dans ce fichier). */
    .companion-bottom-nav-item-premium svg {
        color: #E3B23C;
    }

    .companion-bottom-nav-item-premium.companion-bottom-nav-item-active {
        color: #E3B23C;
    }

    /* ---- Modal auth : quasi plein écran sur mobile, dialog centré préservé au-delà de 768px ---- */
    .companion-modal-overlay {
        padding: 0;
        align-items: stretch;
    }

    .companion-modal {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-y: auto;
    }

    /* ---- Wizard : grilles fluides + hit targets tactiles ---- */
    /* 2 colonnes fixes (pas de fluide auto-fill) : images plus grandes qu'en desktop malgré la
       largeur réduite, chaque tuile dépasse largement les 44px de zone tactile minimum (~172x229px
       mesuré à 390px de large) — voir CompanionWizardTraitGrid.razor pour le markup (image +
       label dans .companion-wizard-tile, aucune logique changée ici, uniquement la disposition). */
    .companion-wizard-grid-3,
    .companion-wizard-grid-4,
    .companion-wizard-grid-5,
    .companion-wizard-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .companion-wizard-name-input,
    .companion-modal-input {
        min-height: 44px;
    }

    .companion-wizard-chip {
        padding: 12px 18px;
    }

    .companion-wizard-slider {
        padding: 14px 0;
    }

    /* Barre de progression fine, fixée en haut sous le header — colle au sommet de
       .companion-content (son conteneur scrollable le plus proche, lui-même déjà positionné sous le
       header par le flux normal de .companion-main-col) : top:0 relatif à CE conteneur suffit,
       inutile de soustraire var(--companion-header-h) une seconde fois. Bleed horizontal (margin
       négatif = padding de .companion-content) pour occuper toute la largeur sous le header, comme
       un vrai bandeau de progression plutôt qu'une barre encadrée par le padding du contenu. */
    .companion-wizard-progress {
        position: sticky;
        top: 0;
        z-index: 30;
        margin: -16px -16px 14px;
        border-radius: 0;
        height: 4px;
    }

    /* "Suivant"/"Précédent" toujours visibles pendant le scroll des options, au-dessus de la bottom
       nav (elle-même fixe par-dessus le contenu, voir plus haut) — jamais l'inverse : bottom nav
       toujours au-dessus (z-index 80 > 30), les deux ne se chevauchent jamais grâce à cet offset. */
    .companion-wizard-nav {
        position: sticky;
        bottom: calc(var(--companion-bottom-nav-h) + env(safe-area-inset-bottom));
        margin: 20px -16px 0;
        padding: 12px 16px;
        background: var(--companion-bg);
        border-top: 1px solid var(--companion-border);
        z-index: 30;
    }
}

@media (max-width: 480px) {
    /* Libère de la place dans le header mobile (hamburger + mark + recherche + actions) : le
       bouton "Créer mon IA" garde son icône, perd son libellé texte. */
    .companion-btn-label {
        display: none;
    }

    /* Bouton Premium du header : icône seule, cercle 40px (zone tactile mini, aligné sur
       .companion-icon-btn/38px juste à côté — la cloche) — même palier que .companion-btn-label
       ci-dessus pour ne jamais avoir un CTA en icône seule à côté d'un autre encore en texte. */
    .companion-header-premium-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
    }

    /* Même contrainte d'espace : le toggle Femme|Homme garde ses deux pastilles mais raccourcit
       ses libellés. */
    .companion-gender-toggle .companion-pill {
        padding: 6px 10px;
        font-size: 0;
    }

        .companion-gender-toggle .companion-pill::first-letter {
            font-size: 13px;
        }

    /* ---- Home : hero album — rien à ajouter ici : le @container hero-album (max-width: 780px,
       voir la section "Home : hero album" plus haut) est déjà actif bien avant ce seuil de 480px et
       couvre le layout en L. ---- */
}

/* ── Images dans le thread (rendu companion des ChatImage/ChatImagePending — pendant reprend
     l'animation @keyframes shimmer déjà définie plus haut pour le rendu B2B, pas de doublon) ── */

.companion-chat-msg-image {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: var(--companion-radius);
    margin-top: 8px;
    cursor: pointer;
    border: 1px solid var(--companion-border);
    transition: opacity .15s;
    display: block;
}

    .companion-chat-msg-image:hover {
        opacity: .9;
    }

.companion-chat-msg-image-placeholder {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: var(--companion-radius);
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--companion-border);
    background: var(--companion-bg-sunken);
}

.companion-chat-msg-image-blur-anim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--companion-bg-sunken) 25%, var(--companion-bg) 50%, var(--companion-bg-sunken) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

.companion-chat-msg-image-countdown {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--companion-text-soft);
    z-index: 1;
}

/* ── Lightbox (agrandissement image — mêmes classes/comportement que Chat.razor B2B, préfixées
     companion- pour rester dans le vocabulaire visuel du vertical) ── */

.companion-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.78);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.companion-lightbox-box {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.companion-lightbox-img {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 12px;
    display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.companion-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #111;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s;
}

    .companion-lightbox-close:hover {
        background: var(--companion-bg-sunken);
    }

/* ----- Sidebar : liens légaux bas de page (docs/mockups/tania-footer-sidebar.html §SIDEBAR) ----- */

.companion-sidebar-legal {
    border-top: 1px solid var(--companion-border);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .companion-sidebar-legal a {
        font-size: 11.5px;
        color: var(--companion-muted);
        text-decoration: none;
    }

        .companion-sidebar-legal a:hover {
            color: var(--companion-text-soft);
            text-decoration: underline;
        }

/* ----- Accent de texte partagé (h2 "SEO"/FAQ home + tout futur usage similaire) ----- */

.companion-text-accent {
    color: var(--companion-pink);
}

/* ----- Home : bas de page, texte SEO + FAQ (docs/mockups/tania-footer-sidebar.html §BAS DE HOME) ----- */

.companion-home-bottom {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.companion-seo-card {
    background: var(--companion-bg-elevated);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-lg);
    padding: 32px 36px;
    color: var(--companion-text-soft);
}

    .companion-seo-card h2 {
        margin: 0 0 20px;
        font-size: 28px;
        line-height: 1.15;
        color: var(--companion-text);
    }

    .companion-seo-card p {
        margin: 0 0 14px;
        max-width: 110ch;
        font-size: 14.5px;
        line-height: 1.6;
    }

        .companion-seo-card p:last-child {
            margin-bottom: 0;
        }

.companion-faq-section h2 {
    text-align: center;
    font-size: 28px;
    margin: 0 0 24px;
    color: var(--companion-text);
}

.companion-faq-item {
    background: var(--companion-bg-elevated);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius);
    margin-bottom: 12px;
}

.companion-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--companion-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

    .companion-faq-item summary::-webkit-details-marker {
        display: none;
    }

    .companion-faq-item summary::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--companion-muted);
        border-bottom: 2px solid var(--companion-muted);
        transform: rotate(45deg);
        transition: transform .2s ease;
        flex-shrink: 0;
    }

    .companion-faq-item summary:focus-visible {
        outline: 2px solid var(--companion-pink);
        border-radius: var(--companion-radius);
    }

.companion-faq-item[open] summary::after {
    transform: rotate(-135deg);
}

.companion-faq-answer {
    padding: 0 22px 20px;
    color: var(--companion-text-soft);
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 100ch;
}

/* ----- Footer public 4 colonnes (docs/mockups/tania-footer-sidebar.html §FOOTER) -----
   Rendu par CompanionFooter.razor, à l'intérieur de .companion-content (voir CompanionLayout.razor) —
   scrolle donc avec le contenu de page plutôt que d'être fixé hors du flux. */

.companion-site-footer {
    margin-top: 48px;
    padding: 40px 0 8px;
    border-top: 1px solid var(--companion-border);
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
    font-size: 14px;
    color: var(--companion-text-soft);
}

.companion-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 14px;
}

.companion-footer-about p {
    margin: 0 0 18px;
    max-width: 46ch;
    font-size: 13.5px;
    line-height: 1.5;
}

.companion-footer-contact {
    font-style: normal;
    margin: 0 0 18px;
    font-size: 12.5px;
    color: var(--companion-muted);
    line-height: 1.5;
}

    .companion-footer-contact b {
        display: block;
        color: var(--companion-text-soft);
        margin-bottom: 2px;
    }

.companion-footer-copy {
    margin: 0;
    font-size: 12.5px;
    color: var(--companion-muted);
}

.companion-footer-col h4 {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--companion-muted);
}

.companion-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .companion-footer-col ul a {
        font-size: 14.5px;
        font-weight: 600;
        color: var(--companion-text);
        text-decoration: none;
    }

        .companion-footer-col ul a:hover {
            text-decoration: underline;
        }

.companion-footer-cards {
    margin-top: 4px;
    background: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    height: 56px;
    display: inline-flex;
    align-items: center;
}

    .companion-footer-cards img {
        height: 40px;
        width: auto;
        display: block;
    }

@media (max-width: 1000px) {
    .companion-site-footer {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .companion-site-footer {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .companion-seo-card {
        padding: 22px;
    }

    .companion-seo-card h2,
    .companion-faq-section h2 {
        font-size: 23px;
    }

    .companion-faq-item summary {
        font-size: 15px;
        padding: 16px 18px;
    }

    .companion-home-bottom {
        margin-top: 28px;
        gap: 28px;
    }
}


/* =========================================================================
   DETTE DE DUPLICATION CSS — bloc "zone B2B" utilisé par CompanionChat.razor
   (Pragma.Companion, partagé par les deux hosts) mais resté hors du bloc
   COMPANION lors du split Step 3 (2026-08-28), donc jamais copié ici. Deux
   sources distinctes de Pragma.Cockpit/wwwroot/app.css, copiées telles
   quelles (2026-09-03) après audit "CSS zone B2B fuitée" (grep systématique
   des classes utilisées par Pragma.Companion contre les zones exclues du
   split). Pragma.Cockpit/wwwroot/app.css N'EST PAS modifié — source de
   vérité inchangée, duplication assumée comme dette, à résorber au Step 7
   (nettoyage Cockpit) — décision cible (RCL/CSS isolé Blazor ou autre) pas
   encore prise, voir docs/companion-web-migration.md.
   ========================================================================= */

/* Source : Pragma.Cockpit/wwwroot/app.css lignes 1026-1197 (section "VOICE CALL
   SUMMARY BUBBLE + TRANSCRIPT"), introduite par fa9f9fd (23/08, "transcript modal
   redesign" + "live bubble push"). Composant : CompanionChat.razor (bulle "Appel
   vocal terminé" + modal transcript). Dédupliqué au Step 7. */

.voice-call-summary {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}

.voice-call-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text-muted, var(--text));
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .voice-call-bubble:hover {
        background: var(--panel);
        border-color: var(--accent, var(--border));
    }

/* Palette explicite, propre au composant — NE JAMAIS retomber sur --panel/--text (globaux) : c'est
   exactement la cause du bug blanc-sur-blanc en mode sombre companion, qui a son propre jeu de
   variables (--companion-*, voir plus bas), jamais redéfinies pour les noms génériques --panel/
   --text. Défaut clair ci-dessous ; override sombre uniquement sous .companion-shell[data-theme=
   "companion-dark"] (Chat.razor/B2B n'a pas de mode sombre du tout aujourd'hui). Couleur PAR RÔLE,
   jamais par personne : --vtx-role-agent/--vtx-role-user distinguent agent vs utilisateur, le
   pseudo (pas la couleur) distingue les interlocuteurs entre eux à l'intérieur d'un même rôle —
   voir la doc de OpenVoiceCallTranscript pour la résolution du pseudo. */
.voice-transcript-box {
    position: relative;
    width: 520px;
    max-width: 92vw;
    max-height: 70vh;
    --vtx-bg: #FFFFFF;
    --vtx-border: #E4E1DA;
    --vtx-text: #1C1D26;
    --vtx-muted: #8A8A93;
    --vtx-role-agent: #3B6AA0;
    --vtx-role-user: #B5563C;
    background: var(--vtx-bg);
    color: var(--vtx-text);
    border: 1px solid var(--vtx-border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.companion-shell[data-theme="companion-dark"] .voice-transcript-box {
    --vtx-bg: #1B1A2A;
    --vtx-border: rgba(255,255,255,.1);
    --vtx-text: #F5F3F7;
    --vtx-muted: #B4AFC0;
    --vtx-role-agent: #86B6E8;
    --vtx-role-user: #E5A184;
}

/* Header fixe (sticky) : reste visible pendant que .voice-transcript-body scrolle indépendamment
   en dessous — c'est .voice-transcript-box qui porte max-height/overflow:hidden, .voice-transcript-
   body qui porte overflow-y:auto ; le header n'a besoin de "position: sticky" que si jamais le body
   et le header partageaient un même conteneur scrollable, ce qui n'est pas le cas ici (flex column,
   header hors du scroll) — conservé quand même en défense, coût nul. */
.voice-transcript-header {
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    padding: 14px 20px;
    background: var(--vtx-bg);
    border-bottom: 1px solid var(--vtx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.voice-transcript-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.voice-transcript-header-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voice-transcript-header-duration {
    font-size: 12px;
    color: var(--vtx-muted);
}

.voice-transcript-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--vtx-border);
    background: transparent;
    color: var(--vtx-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .12s;
}

    .voice-transcript-close:hover {
        background: rgba(128,128,128,.15);
    }

.voice-transcript-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 20px 16px;
}

.voice-transcript-loading {
    color: var(--vtx-muted);
    padding: 12px 0;
    font-size: 13px;
}

.voice-transcript-turn {
    padding: 8px 0;
    border-bottom: 1px solid var(--vtx-border);
}

    .voice-transcript-turn:last-child {
        border-bottom: none;
    }

.voice-transcript-meta {
    font-size: 11px;
    margin-bottom: 2px;
}

.voice-transcript-time {
    color: var(--vtx-muted);
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
}

.voice-transcript-speaker {
    font-weight: 700;
}

    /* Couleur par rôle uniquement — jamais par personne, voir le commentaire de .voice-transcript-box. */
    .voice-transcript-speaker.vtx-role-agent { color: var(--vtx-role-agent); }
    .voice-transcript-speaker.vtx-role-user { color: var(--vtx-role-user); }

.voice-transcript-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--vtx-text);
}

/* Bouton d'appel du composer — cercle secondaire (fond sombre/transparent, bordure fine, glyphe
   clair) face au cercle primaire plein dégradé de .companion-chat-send-btn juste à côté : même
   taille (44px) et même proportion de glyphe (~20px, voir markup du <svg> dans CompanionChat.razor)
   pour que les deux boutons du composer lisent comme une seule paire cohérente, tous viewports
   confondus (pas de media query ici, contrairement à l'ancien --icon/--border/--surface hardcodés
   ci-dessous qui venaient d'un copier-coller B2B non thémé — voir historique, remplacés par les
   variables --companion-* déjà utilisées partout ailleurs dans ce fichier pour rester correct en
   thème clair ET sombre). */
.mic-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--companion-text-soft);
    border: 1.5px solid var(--companion-border);
    background: var(--companion-bg-sunken);
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}

    .mic-btn:hover {
        background: var(--companion-bg-elevated);
    }

    .mic-btn.mic-active {
        color: #e53e3e;
        border-color: #e53e3e;
        background: rgba(229, 62, 62, .12);
        animation: mic-pulse 1.5s ease-in-out infinite;
    }

    .mic-btn.mic-speaking {
        color: var(--companion-purple);
        border-color: var(--companion-purple);
        background: var(--companion-active-bg);
    }

@keyframes mic-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(229,62,62,.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(229,62,62,0);
    }
}

/* ----- Pop d'appel vocal (CompanionVoiceCallPopup.razor) -----
   Contrairement au bloc voice-transcript-box/-call-bubble juste au-dessus (dette de duplication
   B2B, variables --bg2/--border/--text non thémées) : composant natif companion, utilise
   directement les variables --companion-* déjà theme-aware (light par défaut, override sous
   .companion-shell[data-theme="companion-dark"], voir tout en haut de ce fichier) — pas besoin
   d'une palette locale --vtx-* séparée ici. */

.companion-voice-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .78);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.companion-voice-popup {
    width: 340px;
    max-width: 100%;
    background: var(--companion-bg-elevated);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.companion-voice-popup-logo-wrap {
    margin-bottom: 14px;
}

/* Logo rond réactif à la parole — --speech (0..1) écrit chaque frame par voice-call-popup.js
   (AnalyserNode sur le flux distant), jamais d'autre manipulation DOM par frame côté JS : toute
   l'animation vit ici. Défaut --speech:0 : le logo reste au repos tant que JS n'a pas démarré
   l'analyse (phase "connecting", avant que le flux distant n'existe). Transition 80ms, scale
   plafonné à ~1.06 (calc(1 + 0.06)), léger déplacement du centre du dégradé radial + saturation. */
.companion-voice-call-logo {
    --speech: 0;
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(
        circle at calc(50% + var(--speech) * 8%) calc(50% - var(--speech) * 8%),
        var(--companion-pink) 0%,
        var(--companion-purple) 100%
    );
    box-shadow: 0 4px 24px rgba(168, 85, 247, .45);
    filter: saturate(calc(1 + var(--speech) * 0.5));
    transform: scale(calc(1 + var(--speech) * 0.06));
    transition: transform 80ms ease-out, filter 80ms ease-out, background 80ms ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.companion-voice-popup-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* Assombri légèrement pour que le dégradé réactif reste visible en surimpression (contour +
       lueur) même par-dessus une photo claire — sans ça --speech ne se voit quasiment pas. */
    mix-blend-mode: luminosity;
    opacity: .9;
}

.companion-voice-popup-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--companion-text);
}

.companion-voice-popup-status {
    font-size: 13.5px;
    color: var(--companion-text-soft);
    min-height: 18px;
}

.companion-voice-popup-quality {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
    margin: 10px 0 4px;
}

.companion-voice-quality-bar {
    width: 4px;
    border-radius: 2px;
    background: var(--companion-border);
    /* 5 barres de hauteur croissante (4/7/10/13/16px) — voir nth-child ci-dessous. */
}

    .companion-voice-quality-bar:nth-child(1) { height: 4px; }
    .companion-voice-quality-bar:nth-child(2) { height: 7px; }
    .companion-voice-quality-bar:nth-child(3) { height: 10px; }
    .companion-voice-quality-bar:nth-child(4) { height: 13px; }
    .companion-voice-quality-bar:nth-child(5) { height: 16px; }

    .companion-voice-quality-bar-active {
        background: var(--companion-purple);
    }

    /* Stats pas encore disponibles (pas connecté) : barres grisées, jamais d'état d'erreur visible. */
    .companion-voice-quality-bar-unknown {
        background: var(--companion-border);
        opacity: .5;
    }

.companion-voice-popup-devices {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 6px;
    text-align: left;
}

.companion-voice-popup-device-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--companion-text-soft);
}

.companion-voice-popup-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--companion-radius-sm);
    border: 1.5px solid var(--companion-border);
    background: var(--companion-bg);
    color: var(--companion-text);
    font-family: var(--companion-font);
    font-size: 13px;
    font-weight: 400;
}

    .companion-voice-popup-select:focus {
        outline: none;
        border-color: var(--companion-purple);
    }

.companion-voice-popup-device-empty {
    font-size: 12px;
    font-weight: 400;
    color: var(--companion-muted);
}

.companion-voice-popup-error {
    width: 100%;
    margin: 0 0 6px;
    font-size: 12.5px;
    color: #dc2626;
}

.companion-voice-popup-hangup {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #e53e3e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 4px 14px rgba(229, 62, 62, .4);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .companion-voice-popup-hangup:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(229, 62, 62, .5);
    }

    /* Combiné pivoté à 135° — convention "raccrocher" (vs. le même glyphe non pivoté = "appeler",
       voir .mic-btn/.companion-quick-action-icon ci-dessus, même tracé Lucide "phone"). */
    .companion-voice-popup-hangup svg {
        transform: rotate(135deg);
    }

    .companion-voice-popup-hangup:disabled {
        opacity: .6;
        cursor: default;
        transform: none;
        box-shadow: 0 4px 14px rgba(229, 62, 62, .4);
    }

/* Dismiss neutre (phase "failed" — permission micro refusée, échec de connexion avant tout média) :
   volontairement distinct du cercle rouge "raccrocher" ci-dessus, cette action ne raccroche rien,
   elle ferme juste une pop qui n'a jamais établi de communication. */
.companion-voice-popup-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--companion-border);
    background: var(--companion-bg-sunken);
    color: var(--companion-text-soft);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 8px;
    transition: background .12s ease;
}

    .companion-voice-popup-close:hover {
        background: var(--companion-bg-elevated);
    }

/* Mobile-first : propre dès ~380px (contrainte explicite) — la pop elle-même est déjà fluide
   (width:340px, max-width:100% sur .companion-voice-popup, padding 20px sur le backdrop), seul le
   sélecteur haut-parleur se masque naturellement via le feature-detect JS (setSinkId absent sur la
   plupart des mobiles) — aucune règle supplémentaire nécessaire ici pour ce seuil. */
@media (max-width: 380px) {
    .companion-voice-popup {
        padding: 24px 18px 20px;
    }

    .companion-voice-call-logo {
        width: 80px;
        height: 80px;
    }
}

/* ===== COMPANION (tania.live) — fin ===== */