/* CRM Stilae – Styles principaux */
/* Généré le 2026-05-27 */


  :root {
    --primary: #1a6b5a; --primary-light: #e8f5f2; --primary-dark: #114840;
    --accent: #e8a838; --danger: #e05252;
    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
    --gray-300: #d1d5db; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
    --gray-900: #111827; --white: #ffffff;
    --shadow: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --radius: 8px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--gray-50); color: var(--gray-900); font-size: 14px; }

  /* LOGIN SCREEN */
  .login-screen { display: none; position: fixed; inset: 0; background: linear-gradient(135deg, #0f4c3a 0%, #1a6b5a 50%, #2d9b82 100%); align-items: center; justify-content: center; z-index: 200; }
  .login-screen.active { display: flex; }
  .login-box { background: white; border-radius: 16px; padding: 40px; width: 380px; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.3); }
  .login-logo { width: 56px; height: 56px; background: var(--accent); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: white; margin: 0 auto 20px; }
  .login-box h1 { font-size: 22px; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
  .login-box p { font-size: 13px; color: var(--gray-500); margin-bottom: 28px; line-height: 1.5; }
  .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 14px; font-weight: 500; cursor: pointer; background: white; color: var(--gray-700); transition: all 0.15s; }
  .btn-google:hover { background: var(--gray-50); border-color: var(--gray-300); box-shadow: var(--shadow); }
  .btn-google svg { width: 18px; height: 18px; }
  .login-footer { font-size: 11px; color: var(--gray-500); margin-top: 20px; }

  /* LOADING */
  .loading-screen { display: none; position: fixed; inset: 0; background: rgba(255,255,255,0.9); align-items: center; justify-content: center; z-index: 150; flex-direction: column; gap: 12px; }
  .loading-screen.active { display: flex; }
  .spinner { width: 36px; height: 36px; border: 3px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { font-size: 13px; color: var(--gray-500); }

  /* HEADER */
  .header { background: var(--primary); color: white; padding: 12px 24px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  .header-left { display: flex; align-items: center; gap: 12px; flex: 1; }
  .logo-dot { width: 32px; height: 32px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: white; flex-shrink: 0; }
  .header h1 { font-size: 17px; font-weight: 600; }
  .header .subtitle { font-size: 11px; opacity: 0.7; margin-top: 1px; }
  .user-info { display: flex; align-items: center; gap: 10px; font-size: 12px; }
  .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }
  .sync-indicator { font-size: 11px; opacity: 0.8; display: flex; align-items: center; gap: 5px; }
  .sync-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
  .sync-dot.syncing { background: var(--accent); animation: pulse 1s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .btn-logout { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: white; padding: 5px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; }
  .btn-logout:hover { background: rgba(255,255,255,0.25); }

  /* TABS */
  .tabs { background: white; border-bottom: 1px solid var(--gray-200); padding: 0 24px; display: flex; gap: 4px; }
  .tab { padding: 11px 16px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--gray-500); border-bottom: 2px solid transparent; transition: all 0.15s; }
  .tab:hover { color: var(--primary); }
  .tab.active { color: var(--primary); border-bottom-color: var(--primary); }

  /* MAIN */
  .main { padding: 20px 24px; max-width: 1600px; margin: 0 auto; }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* STATS */
  .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 14px; margin-bottom: 22px; }
  .stat-card { background: white; border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); border-left: 3px solid var(--primary); }
  .stat-card .val { font-size: 26px; font-weight: 700; color: var(--primary); line-height: 1.1; }
  .stat-card .lbl { font-size: 11px; color: var(--gray-500); margin-top: 3px; }
  .stat-card.warn { border-left-color: var(--accent); } .stat-card.warn .val { color: var(--accent); }
  .stat-card.ok { border-left-color: #22c55e; } .stat-card.ok .val { color: #22c55e; }
  .stat-card-clickable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
  .stat-card-clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

  /* CHARTS */
  .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .chart-card { background: white; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
  .chart-card h3 { font-size: 12px; font-weight: 600; color: var(--gray-700); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.4px; }
  .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: nowrap; }
  .bar-row-clickable { cursor: pointer; border-radius: 4px; padding: 2px 4px; margin: -2px -4px 7px; transition: background 0.15s; }
  .bar-row-clickable:hover { background: var(--primary-light); }
  .bar-label { min-width: 220px; width: 220px; font-size: 13px; color: var(--gray-800); white-space: normal; line-height: 1.35; flex-shrink: 0; }
  .bar-track { flex: 1; background: var(--gray-200); border-radius: 4px; height: 8px; overflow: hidden; position: relative; }
  .bar-fill { height: 100%; background: var(--primary); border-radius: 4px; }
  .bar-fill-overlay { position: absolute; top: 0; left: 0; height: 100%; border-radius: 4px; }
  .bar-count { font-size: 13px; color: var(--gray-700); min-width: 56px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

  /* TABLE */
  .toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
  .search-box { flex: 1; min-width: 200px; position: relative; }
  .search-box input { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 13px; outline: none; background: white; }
  .search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,107,90,0.1); }
  .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-500); font-size: 13px; }
  .filter-select { padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 13px; background: white; cursor: pointer; outline: none; }
  .filter-select:focus { border-color: var(--primary); }
  .btn { padding: 8px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; }
  .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-dark); }
  .btn-outline { background: white; color: var(--gray-700); border: 1px solid var(--gray-200); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
  .count-info { font-size: 12px; color: var(--gray-500); margin-left: auto; align-self: center; }
  .table-wrap { background: white; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  table { width: 100%; border-collapse: collapse; }
  thead th { background: var(--gray-50); padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--gray-200); white-space: nowrap; cursor: pointer; user-select: none; }
  thead th:hover { background: var(--gray-100); color: var(--primary); }
  tbody tr { border-bottom: 1px solid var(--gray-100); transition: background 0.1s; }
  tbody tr:hover { background: var(--primary-light); }
  tbody td { padding: 9px 12px; font-size: 13px; color: var(--gray-700); }
  .td-name { font-weight: 500; color: var(--gray-900); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .td-site a { color: var(--primary); text-decoration: none; font-size: 12px; }
  .td-site a:hover { text-decoration: underline; }
  /* Pastille Contact (table Hôtels) : vert = ≥1 contact, rouge = aucun */
  .contact-dot { display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; }
  .contact-dot-yes { background: #dcfce7; color: #16a34a; }
  .contact-dot-no  { background: #fee2e2; color: #dc2626; }
  .stars { color: var(--accent); letter-spacing: -2px; }
  .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; }
  .badge-0{background:var(--gray-100);color:var(--gray-500)} .badge-1{background:#dbeafe;color:#1e40af}
  .badge-2{background:#fef9c3;color:#854d0e} .badge-3{background:#ede9fe;color:#5b21b6}
  .badge-4{background:#dcfce7;color:#166534} .badge-5{background:#fee2e2;color:#991b1b}

  /* PAGINATION */
  .pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 14px; }
  .page-btn { padding: 5px 10px; border: 1px solid var(--gray-200); border-radius: 6px; cursor: pointer; font-size: 12px; background: white; color: var(--gray-700); min-width: 30px; text-align: center; }
  .page-btn:hover { border-color: var(--primary); color: var(--primary); }
  .page-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
  .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* PIPELINE */
  .pipeline-wrap { overflow-x: auto; padding-bottom: 8px; }
  .pipeline { display: flex; gap: 14px; min-width: max-content; }
  .pipeline-col { width: 270px; flex-shrink: 0; }
  .pipeline-header { padding: 10px 14px; border-radius: var(--radius) var(--radius) 0 0; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
  .pipeline-header .count { background: rgba(255,255,255,0.3); padding: 1px 7px; border-radius: 10px; font-size: 11px; }
  .pipeline-body { background: var(--gray-100); border-radius: 0 0 var(--radius) var(--radius); padding: 10px; min-height: 150px; max-height: 62vh; overflow-y: auto; }
  .pipeline-card { background: white; border-radius: 6px; padding: 9px 11px; margin-bottom: 7px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; border-left: 3px solid transparent; }
  .pipeline-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .pipeline-card .card-name { font-size: 12px; font-weight: 600; color: var(--gray-900); margin-bottom: 3px; line-height: 1.3; }
  .pipeline-card .card-meta { font-size: 11px; color: var(--gray-500); display: flex; gap: 8px; flex-wrap: wrap; }
  .col-0 .pipeline-header{background:#6b7280;color:white} .col-0 .pipeline-card{border-left-color:#6b7280}
  .col-1 .pipeline-header{background:#3b82f6;color:white} .col-1 .pipeline-card{border-left-color:#3b82f6}
  .col-2 .pipeline-header{background:#f59e0b;color:white} .col-2 .pipeline-card{border-left-color:#f59e0b}
  .col-3 .pipeline-header{background:#8b5cf6;color:white} .col-3 .pipeline-card{border-left-color:#8b5cf6}
  .col-4 .pipeline-header{background:#22c55e;color:white} .col-4 .pipeline-card{border-left-color:#22c55e}
  .col-5 .pipeline-header{background:#ef4444;color:white} .col-5 .pipeline-card{border-left-color:#ef4444}

  /* MODAL */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; align-items: center; justify-content: center; }
  .modal-overlay.open { display: flex; }
  .modal { background: white; border-radius: 12px; padding: 24px; width: 480px; max-width: 95vw; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
  .modal h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--gray-900); }
  .form-group { margin-bottom: 13px; }
  .form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--gray-700); margin-bottom: 4px; }
  .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 13px; outline: none; }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,107,90,0.1); }
  .form-group textarea { resize: vertical; min-height: 65px; }
  .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
  .hotel-info { background: var(--gray-50); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; font-size: 12px; color: var(--gray-600); line-height: 1.8; }
  .save-status { font-size: 11px; color: var(--primary); margin-right: auto; align-self: center; }

  /* TOAST */
  .toast { position: fixed; bottom: 24px; right: 24px; background: var(--gray-900); color: white; padding: 10px 16px; border-radius: 8px; font-size: 13px; z-index: 300; transform: translateY(80px); opacity: 0; transition: all 0.3s; }
  .toast.show { transform: translateY(0); opacity: 1; }
  .toast.success { background: var(--primary); }
  .toast.error { background: var(--danger); }

  /* MODAL GÉNÉRIQUE (suppliers, admin, team) */
  .modal-box { background: white; border-radius: 12px; width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
  .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--gray-200); }
  .modal-header h3 { font-size: 15px; font-weight: 600; color: var(--gray-900); }
  .modal-close { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--gray-500); padding: 4px 8px; border-radius: 4px; line-height: 1; }
  .modal-close:hover { background: var(--gray-100); color: var(--gray-900); }
  .modal-body { padding: 20px 22px; }
  .modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--gray-200); }

  /* FORMULAIRES */
  .form-group { margin-bottom: 14px; }
  .form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--gray-700); margin-bottom: 4px; }
  .form-input { width: 100%; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 13px; outline: none; font-family: inherit; background: white; }
  .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,107,90,0.1); }
  .form-input:disabled { background: var(--gray-50); color: var(--gray-500); }
  textarea.form-input { resize: vertical; min-height: 70px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  /* GROUPES HÔTELIERS */
  /* Cellule logo dans la table */
  .group-logo-cell {
    width: 40px; height: 40px; border-radius: 6px;
    background: var(--gray-50); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .group-logo-cell img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
  .group-logo-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; opacity: 0.4;
  }

  /* Layout cartes (ancien rendu, gardé au cas où) */
  .groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; }
  .group-card { background: white; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border-top: 3px solid var(--primary); display: flex; flex-direction: column; gap: 10px; }
  .group-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .group-card-name { font-size: 16px; font-weight: 700; color: var(--gray-900); }
  .group-badge { display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 10px; margin-top: 4px; }
  .group-badge--intl   { background: #dbeafe; color: #1d4ed8; }
  .group-badge--indep  { background: #e0e7ff; color: #4338ca; }
  .group-badge--family { background: #fef3c7; color: #b45309; }
  .group-badge--coop   { background: #d1fae5; color: #047857; }
  .group-badge--gestion { background: #fae8ff; color: #86198f; }

  /* ── Classification marché : rôles / segment / scope / priorité (ADR 2026-06-05) ── */
  .role-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .role-badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 9px; white-space: nowrap; line-height: 1.5; }
  .role--franchiseur  { background: #dbeafe; color: #1d4ed8; }
  .role--operateur    { background: #fae8ff; color: #86198f; }
  .role--proprietaire { background: #fef3c7; color: #b45309; }
  .role--reseau       { background: #d1fae5; color: #047857; }
  .role--luxe         { background: #fce7f3; color: #be185d; }
  .scope-flag { font-size: 13px; line-height: 1; }
  .prio-star { font-size: 12px; line-height: 1; }
  .filter-checkbox { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gray-700); cursor: pointer; white-space: nowrap; padding: 0 4px; }
  .filter-checkbox input { cursor: pointer; }
  .role-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
  .role-check { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 6px; border: 1px solid var(--gray-200); border-radius: 8px; transition: background .12s, border-color .12s; }
  .role-check:hover { background: var(--gray-50); }
  .role-check input { cursor: pointer; }
  .role-check input:checked + .role-badge { outline: 2px solid currentColor; outline-offset: 1px; }
  .prio-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-700); cursor: pointer; padding: 9px 0; }
  .star-breakdown { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; flex-wrap: nowrap; }
  .star-pill { display: inline-flex; align-items: baseline; gap: 3px; font-size: 12px; padding: 1px 7px; border-radius: 10px; white-space: nowrap; line-height: 1.6; }
  .star-pill strong { font-weight: 700; }
  .star-tier { font-size: 10px; font-weight: 600; opacity: 0.75; }
  .star-pill--3 { background: #d1fae5; color: #065f46; }
  .star-pill--4 { background: #fef3c7; color: #92400e; }
  .star-pill--5 { background: #ede9fe; color: #5b21b6; }
  .star-pill--clickable { cursor: pointer; transition: filter .12s, box-shadow .12s; }
  .star-pill--clickable:hover { filter: brightness(0.95); box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
  /* Panneau latéral : hôtels d'un groupe par niveau d'étoiles */
  #group-hotels-overlay .modal-body { padding-top: 6px; }
  .ghp-row { padding: 9px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--gray-100); margin-bottom: 6px; transition: background .12s, border-color .12s; }
  .ghp-row:hover { background: var(--gray-50); border-color: var(--gray-200); }
  .ghp-name { font-size: 13px; font-weight: 600; color: var(--gray-900); }
  .ghp-sub { font-size: 12px; color: var(--gray-500); margin-top: 1px; }
  .ghp-tag { font-size: 11px; }
  .seg-multi { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 9px; background: #e0e7ff; color: #4338ca; }
  .count-sub { display: block; font-size: 11px; color: var(--gray-500); font-weight: 400; margin-top: 1px; }
  .group-section-title { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 6px; border-top: 1px solid var(--gray-100); padding-top: 10px; }
  .group-contacts-list { display: flex; flex-direction: column; gap: 8px; }
  .group-contact-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; background: var(--gray-50); border-radius: 6px; padding: 8px 10px; }
  .group-hotel-tag { display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 12px; padding: 3px 10px; border-radius: 12px; cursor: pointer; transition: background 0.15s; }
  .group-hotel-tag:hover { background: #c5e4dc; }

  /* CONTACT CARDS (modal hôtel) */
  .contact-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
  .contact-card-info { flex: 1; min-width: 0; }
  .contact-card-info > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* TOGGLE SWITCH (connecteurs) */
  .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--gray-300); border-radius: 22px; transition: 0.3s; }
  .toggle-slider:before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; }
  .toggle-switch input:checked + .toggle-slider { background: var(--primary); }
  .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

  /* ──────────────────────────────────────────────────────────────────
     FICHE HÔTEL — Panneau latéral droit (hotel-panel-mode)
     Réutilise la structure .modal-overlay/.modal-box mais s'affiche
     en slide-in depuis la droite. Le mode est activé via la classe
     .hotel-panel-mode sur l'overlay (cf. index.html).
     ────────────────────────────────────────────────────────────────── */
  .modal-overlay.hotel-panel-mode { justify-content: flex-end; align-items: stretch; }
  .modal-overlay.hotel-panel-mode .modal-box {
    width: 60vw; max-width: 920px; min-width: 460px;
    max-height: 100vh; height: 100vh;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(.4, 0, .2, 1);
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  }
  .modal-overlay.hotel-panel-mode.open .modal-box { transform: translateX(0); }
  .modal-overlay.hotel-panel-mode .modal-body { flex: 1; overflow-y: auto; }
  .modal-overlay.hotel-panel-mode .modal-footer { background: white; }

  /* Row clickable dans la table hôtels */
  tbody tr.row-clickable { cursor: pointer; }

  /* Badge "Assigné à" dans le header du panneau */
  .panel-assignee {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
  }

  /* PHOTO + CARTE en haut du panneau */
  .panel-media {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 18px;
  }
  .panel-photo-wrap, .panel-map-wrap {
    height: 220px; border-radius: 10px; overflow: hidden;
    background: var(--gray-100); position: relative;
  }
  #panel-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
  .panel-photo-placeholder {
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-size: 56px; opacity: 0.25;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
  }
  .panel-map { width: 100%; height: 100%; border: 0; display: block; }

  /* Bandeau infos rapides */
  .panel-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
    font-size: 13px; color: var(--gray-700);
    padding: 12px 14px; background: var(--gray-50);
    border-radius: 8px; margin-bottom: 14px;
  }
  .panel-info-grid > div { display: flex; align-items: baseline; gap: 6px; }
  .panel-info-grid .info-label {
    font-size: 11px; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.3px;
    flex-shrink: 0; min-width: 80px;
  }
  .panel-info-grid a { color: var(--primary); text-decoration: none; word-break: break-all; }
  .panel-info-grid a:hover { text-decoration: underline; }

  .panel-description {
    font-size: 12px; color: var(--gray-700); line-height: 1.5;
    font-style: italic; margin-bottom: 16px; padding: 0 4px;
  }
  .panel-description:empty { display: none; }

  /* Marques amenities détectées (intel concurrentielle) */
  .panel-amenities {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #fdf2f8;
    border: 1px solid #fbcfe8;
    border-radius: 8px;
  }
  .amenities-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
  }
  .amenities-title {
    font-size: 12px; font-weight: 600; color: #9d174d;
    text-transform: uppercase; letter-spacing: 0.3px;
  }
  .amenities-source {
    font-size: 11px; color: var(--gray-500); text-decoration: none;
  }
  .amenities-source:hover { color: var(--primary); text-decoration: underline; }
  .amenities-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .amenity-chip {
    display: inline-block;
    padding: 4px 10px;
    background: white;
    border: 1px solid #f9a8d4;
    color: #831843;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
  }
  /* Chip "Stilae" en vert (c'est nous !) */
  .amenity-chip.is-stilae {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: white;
  }

  /* Bouton enrichir Google Places */
  .panel-enrich {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 18px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 8px; border: 1px solid #fde047;
  }
  .panel-enrich button { background: white; border-color: #d97706; color: #92400e; }
  .panel-enrich button:hover { background: #fffbeb; color: #78350f; }
  .panel-enrich button:disabled { opacity: 0.6; cursor: not-allowed; }
  .enrich-status { font-size: 12px; color: var(--gray-700); flex: 1; }
  .enrich-status.ok { color: #15803d; }
  .enrich-status.err { color: var(--danger); }

  /* Responsive : mobile/tablet → panneau plein écran */
  @media (max-width: 900px) {
    .modal-overlay.hotel-panel-mode .modal-box { width: 100vw; min-width: 0; }
    .panel-media { grid-template-columns: 1fr; }
    .panel-photo-wrap, .panel-map-wrap { height: 180px; }
    .panel-info-grid { grid-template-columns: 1fr; }
  }

  /* ── CONTACT STATS (cellule Contacts table hôtels) ─────────────────
     Rendu compact : perso (vert) · chips LinkedIn/email · générique (gris)
     ────────────────────────────────────────────────────────────────── */
  .cs-wrap { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
  /* Compteur décideurs — valeur principale */
  .cs-perso { font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; }
  /* Chips LinkedIn (bleu) et email (orange atténué) */
  .cs-chip { display: inline-block; font-size: 10px; font-weight: 500;
    padding: 1px 5px; border-radius: 8px; white-space: nowrap; }
  .cs-li { background: #dbeafe; color: #1e40af; }
  .cs-em { background: #fef3c7; color: #92400e; }
  /* Générique : atténué, séparé par un pipe implicite via gap */
  .cs-generic { font-size: 11px; color: var(--gray-500); white-space: nowrap; }
  /* État vide */
  .cs-empty { color: var(--gray-300); font-size: 13px; }

  /* ── ADMIN SYNCS ──────────────────────────────────────────────────
     Panneau "État de la base" + cartes Sync hebdo / Scraper
     ────────────────────────────────────────────────────────────────── */

  /* État de la base — grille de tuiles avec avant/après par métrique */
  .sync-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
  }
  .sync-status-tile {
    background: white;
    padding: 16px 18px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--gray-300);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sync-status-tile.fresh { border-left-color: var(--primary); }
  .sync-status-tile.warn  { border-left-color: var(--accent); }
  .sync-status-tile.stale { border-left-color: var(--danger); }
  .sync-status-tile.never { border-left-color: var(--gray-300); }

  .sync-tile-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-500);
    font-weight: 600;
  }
  .sync-tile-when {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
  }
  .sync-tile-metrics {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
  }
  .sync-tile-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px solid var(--gray-100);
  }
  .sync-tile-row:last-child { border-bottom: 0; }
  .sync-tile-row-label {
    color: var(--gray-700);
    flex-shrink: 0;
    margin-right: 8px;
  }
  .sync-tile-row-values {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
  }
  .sync-tile-before {
    color: var(--gray-500);
  }
  .sync-tile-arrow {
    color: var(--gray-400, #9ca3af);
    margin: 0 2px;
  }
  .sync-tile-after {
    color: var(--gray-900);
    font-weight: 600;
  }
  .sync-tile-delta {
    margin-left: 6px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
  }
  .sync-tile-delta.pos  { color: var(--primary-dark); background: var(--primary-light); }
  .sync-tile-delta.neg  { color: #9b2c2c;         background: #fde8e8; }
  .sync-tile-delta.warn { color: #b87010;         background: #fef3e0; }
  .sync-tile-delta.zero { color: var(--gray-500); background: var(--gray-100); }
  .sync-tile-row--coverage { border-bottom: 2px solid var(--gray-200); padding-bottom: 6px; margin-bottom: 4px; }
  .sync-tile-date {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: auto;
  }

  /* Grandes cartes — Sync hebdo / Scraper */
  .sync-card {
    background: white;
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .sync-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .sync-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
  }
  .sync-card-subtitle {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
  }
  .sync-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .sync-badge.auto   { background: var(--primary-light); color: var(--primary-dark); }
  .sync-badge.manual { background: #fef3e0; color: #b87010; }

  /* Form scraper — layout 2 colonnes (presets / filtres) */
  .scraper-launch-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: start;
  }
  .scraper-presets {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .scraper-preset {
    background: white;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .scraper-preset:hover {
    border-left-color: var(--primary);
    background: var(--gray-50);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }
  .scraper-preset-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
  }
  .scraper-preset-desc {
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .scraper-preset-volume {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
  }

  .scraper-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .scraper-filters .form-group { margin-bottom: 0; }

  .scraper-summary {
    background: var(--primary-light);
    padding: 16px;
    border-radius: var(--radius);
    margin-top: 8px;
  }
  .scraper-summary-count {
    font-size: 13px;
    color: var(--primary-dark);
    margin-bottom: 4px;
  }
  .scraper-summary-count #scraper-count-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-right: 4px;
  }
  .scraper-summary-time {
    font-size: 13px;
    color: var(--gray-700);
  }

  .scraper-mini-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
  }

  /* Animation flash après création d'un job */
  @keyframes scraper-flash {
    0%   { background: rgba(232, 168, 56, 0.4); }
    100% { background: transparent; }
  }
  .scraper-row-flash {
    animation: scraper-flash 1.5s ease-out forwards;
  }

  /* Responsive : 2 colonnes → 1 colonne sur tablette */
  @media (max-width: 900px) {
    .scraper-launch-grid { grid-template-columns: 1fr; }
  }

  /* ── STATS — sous-libellé du KPI Contacts ─────────────── */
  .stat-card .sublbl {
    font-size: 10px;
    color: var(--gray-500);
    margin-top: 4px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── STAT-CARD VEILLE MARCHÉ ──────────────────────────── */
  .stat-card-veille { border-left-color: #0ea5e9; }
  .stat-card-veille .val { color: #0ea5e9; }

  /* ── CONTACTS ─────────────────────────────────────────── */

  /* Barre de filtres structurée en deux lignes */
  .contacts-filterbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
  }
  .cfb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cfb-row--main { }
  .cfb-search { flex: 1; min-width: 180px; }

  .cfb-row--filters {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 8px 12px;
    gap: 16px;
  }

  /* Groupe de filtre (label + contrôle) */
  .cfb-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .cfb-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    white-space: nowrap;
  }

  /* Cases à cocher présence / étoiles */
  .cfb-checks {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .cfb-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
    padding: 3px 7px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: white;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
    user-select: none;
  }
  .cfb-check:hover { border-color: var(--primary); background: var(--primary-light); }
  .cfb-check input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); width: 13px; height: 13px; }

  /* ── CHECKBOX DROPDOWNS (Fonction / Région) ────────────────── */
  .cfb-dropdown {
    position: relative;
  }
  .cfb-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: white;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, background 0.12s;
    font-family: inherit;
    line-height: 1.6;
  }
  .cfb-dropdown-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
  }
  .cfb-dropdown-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--primary);
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }
  .cfb-dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    min-width: 180px;
  }
  .cfb-dropdown-panel.open {
    display: block;
  }
  .cfb-dropdown-items {
    padding: 6px 4px;
  }
  .cfb-dropdown-items--scroll {
    max-height: 240px;
    overflow-y: auto;
  }
  .cfb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
    user-select: none;
    white-space: nowrap;
  }
  .cfb-dropdown-item:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
  }
  .cfb-dropdown-item input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--primary);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  .cfb-dropdown-footer {
    border-top: 1px solid var(--gray-100);
    padding: 5px 10px;
  }
  .cfb-dropdown-clear {
    background: none;
    border: none;
    font-size: 11px;
    color: var(--gray-500);
    cursor: pointer;
    padding: 2px 0;
    font-family: inherit;
  }
  .cfb-dropdown-clear:hover { color: var(--danger); }

  /* Séparateur visuel entre groupes */
  .cfb-group + .cfb-group { border-left: 1px solid var(--gray-200); padding-left: 16px; }

  /* Bouton reset discret en bout de ligne */
  .cfb-reset {
    margin-left: auto;
    font-size: 12px;
    padding: 4px 10px;
    color: var(--gray-500);
    border-color: var(--gray-200);
    flex-shrink: 0;
  }
  .cfb-reset:hover { color: var(--danger); border-color: var(--danger); }

  /* Segmented control — navigation entre types de contacts */
  .contacts-segments {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    background: white;
  }

  .contacts-seg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 12px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--gray-200);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
    min-height: 88px;
  }
  .contacts-seg:first-child { border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px); }
  .contacts-seg:last-child  { border-right: none; border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0; }
  .contacts-seg:hover { background: var(--gray-50); }

  .contacts-seg-icon {
    font-size: 20px;
    line-height: 1;
  }
  .contacts-seg-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
  .contacts-seg-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-500);
    line-height: 1;
  }

  /* Segment acheteur : priorité commerciale n°1 — bleu soutenu */
  .contacts-seg.seg--acheteur.active {
    background: #eff6ff;
    border-bottom-color: #1e40af;
  }
  .contacts-seg.seg--acheteur.active .contacts-seg-label { color: #1e40af; }
  .contacts-seg.seg--acheteur.active .contacts-seg-count { color: #1e40af; }

  /* Segment dirigeant : propriétaires — orange accent */
  .contacts-seg.seg--dirigeant.active {
    background: #fffbeb;
    border-bottom-color: var(--accent);
  }
  .contacts-seg.seg--dirigeant.active .contacts-seg-label { color: #92400e; }
  .contacts-seg.seg--dirigeant.active .contacts-seg-count { color: #b45309; }

  /* Segment manager — vert primaire */
  .contacts-seg.seg--manager.active {
    background: var(--primary-light);
    border-bottom-color: var(--primary);
  }
  .contacts-seg.seg--manager.active .contacts-seg-label { color: var(--primary-dark); }
  .contacts-seg.seg--manager.active .contacts-seg-count { color: var(--primary); }

  /* Segment generic : canaux — gris discret (label plus léger même actif) */
  .contacts-seg.seg--generic .contacts-seg-label { font-weight: 500; }
  .contacts-seg.seg--generic.active {
    background: var(--gray-50);
    border-bottom-color: var(--gray-400);
  }
  .contacts-seg.seg--generic.active .contacts-seg-label { color: var(--gray-500); }
  .contacts-seg.seg--generic.active .contacts-seg-count { color: var(--gray-500); }

  /* Pastilles présence LinkedIn / Email / Tél (vert = on a l'info, gris = absent) */
  th.td-dot, td.td-dot { width: 36px; text-align: center; padding-left: 2px; padding-right: 2px; }
  .ct-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
    text-decoration: none;
  }
  .ct-dot--yes { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
  a.ct-dot--yes:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
  /* Email présent mais non vérifié ContactOut */
  .ct-dot--warn { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }
  a.ct-dot--warn:hover { background: var(--accent); color: #fff; border-color: #d97706; }
  /* Absent = contour discret gris, texte très effacé — pas de rouge agressif sur 7 000 lignes */
  .ct-dot--no { background: transparent; color: var(--gray-300); border: 1px solid var(--gray-200); }

  /* Badge vérification email dans la fiche contact */
  .email-verified-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1.5;
  }
  .email-verified-badge--ok   { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
  .email-verified-badge--warn { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }

  /* Logo + nom du groupe / opérateur lié */
  .ct-group { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; max-width: 230px; }
  .ct-group:hover .ct-group-name { color: var(--primary-dark); text-decoration: underline; }
  .ct-logo { width: 24px; height: 24px; object-fit: contain; border-radius: 4px;
    border: 1px solid var(--gray-200); background: #fff; flex: none; }
  .ct-logo-ph { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; background: var(--gray-100); border-radius: 4px; flex: none; }
  .ct-group-name { font-size: 12.5px; font-weight: 600; color: var(--gray-700);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Compteur d'hôtels liés */
  .th-hcount { white-space: nowrap; text-align: center; }
  .td-hcount  { text-align: center; }
  .ct-hcount { display: inline-block; min-width: 28px; padding: 2px 8px; border-radius: 10px;
    background: var(--primary-light); color: var(--primary-dark);
    font-size: 12px; font-weight: 700; text-align: center;
    border: 1px solid rgba(26,107,90,0.15); }

  /* Bandeau "Responsable Stilae" en tête de la fiche contact */
  .cp-assignee { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 18px;
    background: var(--primary-light); border: 1px solid rgba(26,107,90,0.2); border-radius: var(--radius); }
  .cp-assignee--none { background: var(--gray-50); border-color: var(--gray-200); }
  .cp-assignee-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
  .cp-assignee--none .cp-assignee-avatar { background: var(--gray-300); box-shadow: none; }
  .cp-assignee-meta { display: flex; flex-direction: column; gap: 2px; }
  .cp-assignee-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--primary-dark); font-weight: 700; opacity: 0.7; }
  .cp-assignee--none .cp-assignee-label { color: var(--gray-500); opacity: 1; }
  .cp-assignee-name { font-size: 13px; font-weight: 600; color: var(--gray-900); }
  .cp-assignee-none { font-size: 13px; color: var(--gray-400); font-style: italic; }

  /* Formulaire "Nouveau contact" */
  .nc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 6px; }
  .nc-field { display: flex; flex-direction: column; gap: 4px; }
  .nc-col-2 { grid-column: 1 / -1; }
  .nc-label { font-size: 11px; font-weight: 600; color: var(--gray-600); }
  .nc-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
    padding-top: 16px; border-top: 1px solid var(--gray-200); }
  /* Autocomplete hôtel */
  .nc-hotel-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: #fff; border: 1px solid var(--gray-200); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); margin-top: 4px; max-height: 260px; overflow-y: auto; }
  .nc-hotel-opt { padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--gray-100); }
  .nc-hotel-opt:last-child { border-bottom: none; }
  .nc-hotel-opt:hover { background: var(--primary-light); }
  .nc-hotel-city { color: var(--gray-500); font-size: 12px; }
  .nc-hotel-opt.nc-empty { color: var(--gray-400); cursor: default; font-style: italic; }
  .nc-hotel-opt.nc-empty:hover { background: #fff; }

  /* Actions Modifier / Archiver dans le bandeau de la fiche contact */
  .cp-actions { display: flex; gap: 8px; margin-left: auto; }
  .btn-sm { padding: 4px 10px; font-size: 12px; line-height: 1.3; }
  .btn-danger-outline { background: #fff; border: 1px solid #fecaca; color: #dc2626; }
  .btn-danger-outline:hover { background: #fef2f2; border-color: #f87171; }

  /* Sous-titre du header dans les panneaux contact / dirigeant */
  .cp-header-meta {
    font-size: 12px; color: var(--gray-500);
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 3px;
  }

  /* Marqueur de tri colonne "Entité liée" */
  #th-linked { cursor: pointer; }
  .sort-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: var(--gray-400, #9ca3af);
    vertical-align: middle;
    transition: color 0.15s;
  }
  .sort-icon--active { color: var(--primary); }
  #th-linked:hover .sort-icon { color: var(--primary); }
  .th-sortable { cursor: pointer; user-select: none; }
  .th-sortable:hover .sort-icon { color: var(--primary); }

  /* td-name dans la table contacts : le contact-sub dessous autorise le wrap */
  #contacts-tbody .td-name {
    white-space: normal;
    max-width: 200px;
  }
  /* Sous-texte gris sous le nom / entité dans la table contacts */
  .contact-sub {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 2px;
    line-height: 1.3;
  }
  /* Badge fonction décideur siège (ADR 2026-06-05) */
  .fn-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; vertical-align: middle; letter-spacing: 0.2px; }
  .fn--achats { background: #ffedd5; color: #c2410c; }      /* cible n°1 */
  .fn--rse    { background: #dcfce7; color: #15803d; }      /* cible bio/écolo */
  .fn--ops    { background: #e0e7ff; color: #4338ca; }
  .fn--dg     { background: #f3e8ff; color: #7e22ce; }
  .fn--other  { background: var(--gray-100); color: var(--gray-600); }
  .contact-linked-entity {
    color: var(--primary);
    text-decoration: none;
  }
  .contact-linked-entity:hover { text-decoration: underline; }
  .contact-row-archived { opacity: 0.5; }

  /* Sous-lien hôtel sous une ligne dirigeant (entité liée) */
  .owner-sub-hotel {
    color: var(--primary);
    text-decoration: none;
    font-size: 11px;
  }
  .owner-sub-hotel:hover { text-decoration: underline; }

  /* Bouton résumé "N sociétés · M hôtels" dans la colonne Entité liée (dirigeants groupés) */
  .dirigeant-summary-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid rgba(26,107,90,0.2);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.4;
    font-family: inherit;
  }
  .dirigeant-summary-btn:hover {
    background: #c5e4dc;
    border-color: var(--primary);
  }
  /* Badge source (vignette Génériques) */
  .ct-source-badge {
    display: inline-block; padding: 1px 7px; border-radius: 8px;
    font-size: 11px; font-weight: 500;
    background: var(--gray-100); color: var(--gray-600);
    border: 1px solid var(--gray-200);
    white-space: nowrap;
  }

  /* Badge groupe (marque dominante) sur une ligne dirigeant */
  .contact-group-chip {
    display: inline-block;
    padding: 2px 8px;
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }
  .contact-group-chip--link { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
  .contact-group-chip--link:hover { background: #e0e7ff; border-color: #a5b4fc; }

  /* Flag "Fiche complète" (colonne Fiche) */
  .fiche-flag { font-size: 14px; line-height: 1; }
  .fiche-flag-yes { color: #16a34a; }
  .fiche-flag-no  { color: var(--gray-300); }

  /* ── Toggle Type (Tous / Personnels / Génériques) ── */
  .cfb-radio-group {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
    background: white;
  }
  .cfb-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .cfb-radio input[type="radio"] { display: none; }
  .cfb-radio span {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    background: white;
    border-right: 1px solid var(--gray-200);
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    line-height: 1.6;
  }
  .cfb-radio:last-child span { border-right: none; }
  .cfb-radio input:checked + span {
    background: var(--primary);
    color: white;
    font-weight: 600;
  }
  .cfb-radio span:hover { background: var(--primary-light); color: var(--primary-dark); }
  .cfb-radio input:checked + span:hover { background: var(--primary-dark); }

  /* ── Badges catégorie contact ── */
  .cat-badge { display: inline-block; }

  /* ── Badges étoiles dans la table contacts ── */
  .star-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
    white-space: nowrap;
  }

  /* ── Badges région dans la table contacts ── */
  .region-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    white-space: nowrap;
    line-height: 1.5;
  }

  /* ── Colonnes étroites (étoiles / région) ── */
  .th-narrow { white-space: nowrap; min-width: 56px; }
  .ct-region  { max-width: 140px; }
  .ct-region  .region-badge { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

  /* ── Ligne de nom + badge fonction ── */
  .ct-name-line { display: inline; }
  .ct-cat-line  { margin-top: 2px; }

  /* ── Entité liée cliquable (remplace la variante inline) ── */
  .contact-linked-entity--click {
    cursor: pointer;
    color: var(--primary);
    display: inline-block;
  }
  .contact-linked-entity--click:hover { text-decoration: underline; }

  /* Ligne contact cliquable -> panneau fiche */
  tr.contact-row-click { cursor: pointer; }
  tr.contact-row-click:hover { background: var(--primary-light); }

  /* Panneau Fiche contact */
  .cp-section-title {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--gray-500); font-weight: 700; margin: 20px 0 8px;
    padding-bottom: 5px; border-bottom: 1px solid var(--gray-100);
  }
  .cp-info { display: flex; flex-direction: column; gap: 6px; }
  .cp-line { font-size: 13px; color: var(--gray-700); }
  .cp-line a { color: var(--primary); text-decoration: none; }
  .cp-line a:hover { text-decoration: underline; }
  .cp-add { display: flex; flex-direction: column; gap: 8px; background: var(--gray-50);
    padding: 12px; border-radius: var(--radius); margin-bottom: 14px;
    border: 1px solid var(--gray-200); }
  .cp-add select, .cp-add input, .cp-add textarea { font-size: 13px; }
  .cp-add .btn { align-self: flex-start; }
  .cp-timeline { display: flex; flex-direction: column; gap: 8px; }
  .ca-empty { font-size: 13px; color: var(--gray-500); padding: 8px 0; }
  .ca-item {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--primary);
    border-radius: 6px; padding: 9px 12px;
  }
  .ca-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .ca-type { font-size: 12px; font-weight: 600; color: var(--gray-900); text-transform: capitalize; }
  .ca-date { font-size: 11px; color: var(--gray-500); white-space: nowrap; }
  .ca-body { font-size: 13px; color: var(--gray-700); margin-top: 5px; white-space: pre-wrap; }
  .ca-who  { font-size: 11px; color: var(--gray-500); margin-top: 4px; }

  /* ── PANNEAUX CONTACTS (slide-in depuis la droite) ──────── */
  #contact-panel-overlay.hotel-panel-mode .modal-box,
  #dirigeant-panel-overlay.hotel-panel-mode .modal-box {
    width: 480px;
    min-width: 320px;
    max-width: 92vw;
  }

  /* ── PANNEAU DIRIGEANT DEPUIS FICHE HÔTEL (slide-in GAUCHE, 420px) ── */
  /* Overlay transparent pour garder la fiche hôtel visible à droite.     */
  /* z-index 110 = au-dessus de la fiche hôtel (z-index 100).             */
  #hotel-dirigeant-panel-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    background: transparent;
    z-index: 110;
    pointer-events: none;
  }
  #hotel-dirigeant-panel-overlay .modal-box {
    width: 420px;
    min-width: 320px;
    max-width: 92vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18);
    pointer-events: all;
    overflow: hidden;
  }
  #hotel-dirigeant-panel-overlay.open .modal-box {
    transform: translateX(0);
  }
  #hotel-dirigeant-panel-overlay .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
  }
  /* Zone cliquable pour fermer : couvre tout l'écran sauf le panneau lui-même */
  #hotel-dirigeant-panel-overlay .hdp-dismiss {
    position: absolute;
    inset: 0;
    cursor: default;
  }

  /* Mention "détient N hôtels" sous le nom du dirigeant */
  .hotel-contact-holdings-hint {
    font-size: 11px;
    color: var(--primary);
    font-weight: 500;
    margin-top: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .hotel-contact-holdings-hint:hover {
    text-decoration: underline;
  }
  /* Nom cliquable du dirigeant quand il a des hôtels liés */
  .hotel-contact-name-clickable {
    cursor: pointer;
    color: var(--gray-900);
  }
  .hotel-contact-name-clickable:hover {
    color: var(--primary);
    text-decoration: underline;
  }

  .dirigeant-panel-intro {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 16px;
    line-height: 1.5;
  }

  .dirigeant-panel-societes {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .dirigeant-panel-societe {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .dirigeant-panel-societe-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: white;
    border-bottom: 1px solid var(--gray-100);
  }

  .dirigeant-panel-societe-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-900);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dirigeant-panel-societe-siren {
    font-size: 11px;
    color: var(--gray-500);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    flex-shrink: 0;
  }

  .dirigeant-panel-hotels-list {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .dirigeant-panel-hotel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
  }
  .dirigeant-panel-hotel:hover {
    background: var(--primary-light);
  }

  .dirigeant-panel-hotel-icon {
    font-size: 13px;
    flex-shrink: 0;
  }

  .dirigeant-panel-hotel-name {
    font-size: 13px;
    color: var(--primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dirigeant-panel-hotel:hover .dirigeant-panel-hotel-name {
    text-decoration: underline;
  }

  .dirigeant-panel-hotel-empty {
    font-size: 12px;
    color: var(--gray-500);
    font-style: italic;
    padding: 4px 6px;
  }

  /* ── PANNEAU FICHE CONTACT DEPUIS FICHE HÔTEL (slide-in gauche) ─
     Miroir de #hotel-dirigeant-panel-overlay.
     z-index 111 = au-dessus du panneau dirigeant (110) si les deux
     sont ouverts simultanément.
     ──────────────────────────────────────────────────────────────── */
  #hotel-contact-panel-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    background: transparent;
    z-index: 111;
    pointer-events: none;
  }
  #hotel-contact-panel-overlay .modal-box {
    width: 420px;
    min-width: 320px;
    max-width: 92vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18);
    pointer-events: all;
    overflow: hidden;
  }
  #hotel-contact-panel-overlay.open .modal-box {
    transform: translateX(0);
  }
  #hotel-contact-panel-overlay .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
  }
  #hotel-contact-panel-overlay .hcp-dismiss {
    position: absolute;
    inset: 0;
    cursor: default;
  }

  /* Ligne contact cliquable dans le bloc contacts de la fiche hôtel */
  .hotel-contact-row-clickable {
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 6px;
    margin: 0 -6px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .hotel-contact-row-clickable:hover {
    background: var(--primary-light);
  }
  .hotel-contact-row-arrow {
    font-size: 16px;
    color: var(--gray-300);
    flex-shrink: 0;
    align-self: center;
    line-height: 1;
    transition: color 0.12s;
  }
  .hotel-contact-row-clickable:hover .hotel-contact-row-arrow {
    color: var(--primary);
  }

  /* Badge "siège" pour les acheteurs_corporate dans la liste hôtel */
  .hotel-contact-badge-corp {
    background: #dbeafe;
    color: #1e40af;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: 6px;
    font-weight: 500;
    vertical-align: middle;
  }

  /* Avatar acheteur corporate (bleu) */
  .hotel-contact-avatar-corp {
    background: #3b82f6;
  }

  /* ── CONTENU DU PANNEAU FICHE CONTACT ─── */
  .hcp-titre {
    font-size: 13px;
    color: var(--gray-600);
    margin: 12px 0 0;
    line-height: 1.4;
  }

  .hcp-badge-fn {
    display: inline-flex;
    align-items: center;
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

  .hcp-assignee-band {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-light);
    border: 1px solid #b6ddd7;
    border-radius: var(--radius);
    padding: 10px 14px;
    margin: 14px 0 0;
  }
  .hcp-assignee-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .hcp-assignee-label {
    font-size: 10px;
    color: var(--primary-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
  }
  .hcp-assignee-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark);
  }

  .hcp-section {
    margin-top: 20px;
  }
  .hcp-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }

  .hcp-coords {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .hcp-coord-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }
  .hcp-coord-icon {
    width: 18px;
    flex-shrink: 0;
    color: var(--gray-500);
    font-style: normal;
    font-size: 12px;
    text-align: center;
  }
  .hcp-coord-value {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
  }
  .hcp-coord-value:hover { text-decoration: underline; }
  .hcp-coord-missing {
    color: var(--gray-400);
    font-style: italic;
    font-size: 12px;
  }
  .hcp-verified {
    font-size: 10px;
    font-weight: 600;
    color: #059669;
    background: #d1fae5;
    padding: 1px 6px;
    border-radius: 8px;
  }

  /* Signaux clés */
  .hcp-signals-section {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    padding: 14px 16px;
  }
  .hcp-signals-section .hcp-section-title {
    margin-bottom: 8px;
    color: var(--primary-dark);
  }
  .hcp-signals-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
  }
  .hcp-signal-item {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.5;
    padding: 2px 0;
  }

  .hcp-footer {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
    font-size: 11px;
    color: var(--gray-400);
  }
  .hcp-source-link {
    color: var(--gray-500);
    text-decoration: underline;
  }
  .hcp-source-link:hover { color: var(--primary); }

  /* ── HCP VEILLE RÉCENTE (contact_signals) ─────────────────────── */
  .hcp-veille-section {
    background: #fafafa;
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 16px;
  }
  .hcp-veille-section .hcp-section-title {
    color: #92400e;
    margin-bottom: 10px;
  }
  .hcp-veille-empty {
    font-size: 12px;
    color: var(--gray-400);
    font-style: italic;
  }
  .hcp-veille-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hcp-veille-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 10px 12px;
  }
  .hcp-veille-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
  }
  .hcp-veille-topic {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .hcp-veille-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-900);
    text-decoration: none;
    line-height: 1.35;
  }
  a.hcp-veille-title:hover {
    color: var(--primary);
    text-decoration: underline;
  }
  .hcp-veille-summary {
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.45;
    margin: 4px 0 6px;
  }
  .hcp-veille-meta {
    font-size: 11px;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .hcp-veille-score {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
  }
  .hcp-veille-score-high {
    background: #d1fae5;
    color: #065f46;
  }
  .hcp-veille-score-low {
    background: var(--gray-100);
    color: var(--gray-500);
  }

  /* Pastille veille dans la liste contacts de la fiche hôtel */
  .hotel-contact-veille-pin {
    font-size: 11px;
    margin-left: 5px;
    vertical-align: middle;
    cursor: default;
  }
  /* ─────────────────────────────────────────────────────────────── */

  /* ── VEILLE MARCHE (fiche hôtel — bas du panneau) ───────────────
     Bloc autonome qui réutilise les classes .hcp-veille-* pour les
     cartes individuelles. Seul le conteneur wrapper est spécifique.
     ─────────────────────────────────────────────────────────────── */
  .hotel-veille-marche-block {
    background: white;
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
  }
  .hotel-veille-marche-block .hotel-block-title::before {
    content: '📡 ';
  }
  .hotel-veille-summary-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* ─────────────────────────────────────────────────────────────── */

  /* ── OWNER PANEL (fiche hôtel) ──────────────────────────────────
     Section "🏛️ Propriétaire" affichée en bas du slide-in hôtel.
     Border-left orange = couleur dirigeant/propriétaire (cohérent avec
     le segment dirigeant du segmented control et le badge catégorie dirigeant).
     ──────────────────────────────────────────────────────────────── */
  .owner-panel {
    margin: 4px 0 18px 0;
    padding: 14px 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
  }
  .owner-panel-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
  }
  .owner-panel-title {
    font-size: 15px; font-weight: 600; color: var(--gray-900);
    line-height: 1.3;
  }
  .owner-panel-tag {
    font-size: 11px; color: var(--gray-500);
    background: white; border: 1px solid var(--gray-200);
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  }
  .owner-panel-address {
    margin-top: 4px; font-size: 12px; color: var(--gray-700);
  }
  .owner-panel-sub {
    margin-top: 2px; font-size: 11px; color: var(--gray-500);
  }
  .owner-panel-siren {
    margin-top: 4px; font-size: 10px; color: var(--gray-500);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.3px;
  }
  .owner-panel-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
  }
  .owner-panel-section-title {
    font-size: 11px; font-weight: 600; color: var(--gray-700);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 8px;
  }

  /* Ligne dirigeant */
  .owner-dirigeant-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px dashed var(--gray-200);
  }
  .owner-dirigeant-row:last-child { border-bottom: none; }
  .owner-dirigeant-avatar {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 50%;
    background: white; border: 1px solid var(--gray-200);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
  }
  .owner-dirigeant-body { flex: 1; min-width: 0; }
  .owner-dirigeant-name {
    font-size: 13px; font-weight: 600; color: var(--gray-900);
  }
  .owner-dirigeant-titre {
    font-size: 11px; color: var(--gray-500); margin-top: 1px;
  }
  .owner-dirigeant-contacts {
    margin-top: 4px; font-size: 12px;
    display: flex; flex-wrap: wrap; gap: 4px 10px;
  }
  .owner-dirigeant-link {
    color: var(--primary); text-decoration: none;
  }
  .owner-dirigeant-link:hover { text-decoration: underline; }
  .owner-dirigeant-nocontact {
    color: var(--gray-500); font-style: italic;
  }

  /* Grille des hôtels frères */
  .owner-siblings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
  }
  .owner-sibling-card {
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .owner-sibling-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
  }
  .owner-sibling-name {
    font-size: 12px; font-weight: 600; color: var(--gray-900);
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .owner-sibling-meta {
    font-size: 11px; color: var(--gray-500); margin-top: 2px;
  }

  .owner-empty {
    font-size: 12px; color: var(--gray-500); font-style: italic;
    padding: 4px 0;
  }
  .owner-panel-actions {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    display: flex; justify-content: flex-end;
  }

  /* ──────────────────────────────────────────────────────────────────
     HOTEL PANEL REDESIGN — Slide-in fiche hôtel restructurée
     Header (titre + responsable + RS) / Photo + Map / Bloc Hôtel
     éditable / Bloc Contacts (managers + dirigeants) / Propriétaire.
     ────────────────────────────────────────────────────────────────── */

  /* On retire le modal-header par défaut au profit de .hotel-header (fiche hôtel) */
  .modal-overlay.hotel-panel-mode .modal-box > .modal-header { display: none; }
  /* …mais on le garde (avec sa croix ✕) pour les panneaux contact + dirigeant + groupe */
  #contact-panel-overlay .modal-box > .modal-header,
  #dirigeant-panel-overlay .modal-box > .modal-header,
  #group-hotels-overlay .modal-box > .modal-header,
  #group-panel-overlay .modal-box > .modal-header { display: flex; }

  /* HEADER ZONE */
  .hotel-header {
    position: relative;
    padding: 20px 24px 16px 24px;
    background: linear-gradient(180deg, #fafbfa 0%, #ffffff 100%);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
  }
  .hotel-header-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    background: white; border: 1px solid var(--gray-200);
    border-radius: 50%; cursor: pointer;
    font-size: 16px; color: var(--gray-500);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .hotel-header-close:hover {
    background: var(--gray-100); color: var(--danger);
    border-color: var(--gray-300);
  }
  .hotel-header-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding-right: 40px;
    margin-bottom: 4px;
  }
  .hotel-header-title {
    font-size: 20px; font-weight: 700; color: var(--gray-900);
    line-height: 1.25; margin: 0;
    flex: 1; min-width: 0;
  }
  .hotel-header-status { flex-shrink: 0; }
  .hotel-header-group-zone { flex-shrink: 0; }
  .hotel-header-group-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; background: #eef2ff; color: #3730a3;
    border: 1px solid #c7d2fe; border-radius: 14px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: inherit; white-space: nowrap; transition: background 0.15s, border-color 0.15s;
  }
  .hotel-header-group-badge:hover { background: #e0e7ff; border-color: #a5b4fc; }
  .hotel-header-manager-badge { background: #fae8ff; color: #86198f; border-color: #f0abfc; }
  .hotel-header-manager-badge:hover { background: #f5d0fe; border-color: #e879f9; }
  .hotel-header-meta {
    font-size: 13px; color: var(--gray-500);
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    align-items: center;
  }
  .hotel-header-stars {
    color: var(--accent); font-weight: 600;
  }
  .hotel-header-address { color: var(--gray-700); }
  .hotel-header-group {
    padding: 1px 8px; background: var(--gray-100);
    border-radius: 10px; font-size: 11px;
    color: var(--gray-700);
  }
  .hotel-header-divider {
    height: 1px; background: var(--gray-200);
    margin: 12px 0;
  }
  .hotel-header-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
  }

  /* RESPONSABLE STILAE (avatar + nom, éditable) */
  .hotel-assignee {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 0;
  }
  .hotel-assignee-label {
    font-size: 11px; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.4px;
    font-weight: 600;
  }
  .hotel-assignee-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    cursor: pointer; font-size: 13px;
    transition: all 0.15s;
  }
  .hotel-assignee-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
  }
  .hotel-assignee-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary); color: white;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .hotel-assignee-name {
    font-weight: 500; color: var(--gray-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hotel-assignee-role { color: var(--gray-500); font-weight: 400; font-size: 12px; }
  .hotel-assignee-caret { color: var(--gray-500); font-size: 10px; }
  .hotel-assignee-empty {
    padding: 5px 12px;
    background: white; border: 1px dashed var(--gray-300);
    border-radius: 20px; cursor: pointer;
    color: var(--primary); font-size: 12px; font-weight: 500;
  }
  .hotel-assignee-empty:hover {
    background: var(--primary-light); border-color: var(--primary);
  }
  .hotel-assignee-select {
    padding: 5px 8px;
    border: 1px solid var(--primary); border-radius: 6px;
    font-size: 13px; outline: none;
    background: white;
  }

  /* RÉSEAUX SOCIAUX */
  .hotel-social-icons {
    display: flex; align-items: center; gap: 8px;
  }
  .hotel-social-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: all 0.15s;
    border: 1px solid transparent;
  }
  .hotel-social-icon svg { width: 16px; height: 16px; }
  .hotel-social-icon.is-active { cursor: pointer; }
  .hotel-social-icon.is-active:hover { transform: translateY(-2px); }
  .hotel-social-icon.is-inactive {
    color: var(--gray-300);
    background: var(--gray-50);
    border-color: var(--gray-200);
    cursor: not-allowed;
  }
  .hotel-social-linkedin.is-active  { color: white; background: #0077b5; }
  .hotel-social-instagram.is-active { color: white; background: #e1306c; }
  .hotel-social-facebook.is-active  { color: white; background: #1877f2; }
  .hotel-social-x.is-active         { color: white; background: #000000; }

  /* CONTENU PRINCIPAL DU PANEL */
  .modal-overlay.hotel-panel-mode .modal-body {
    padding: 18px 24px;
  }

  /* PHOTO + MAP */
  .hotel-photo-map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
  }
  .hotel-photo-wrap, .hotel-map-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--gray-100);
  }
  .hotel-photo {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
  }
  .hotel-photo-wrap:hover .hotel-photo { transform: scale(1.03); }
  .hotel-photo-empty, .hotel-map-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    color: var(--gray-500); font-size: 12px;
    font-style: italic;
  }
  .hotel-map {
    width: 100%; height: 100%;
    border: 0; display: block;
  }

  /* BLOC GÉNÉRIQUE (style commun pour blocs hôtel/contacts/édition) */
  .hotel-block,
  .hotel-contacts-block,
  .hotel-edit-block {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
  }
  .hotel-block-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-100);
  }
  .hotel-block-title {
    font-size: 13px; font-weight: 700; color: var(--gray-900);
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .hotel-block-enrich {
    padding: 3px 10px; font-size: 11px;
    background: white; border: 1px solid #d97706; color: #92400e;
    border-radius: 12px; cursor: pointer; font-weight: 500;
  }
  .hotel-block-enrich:hover { background: #fffbeb; }
  .hotel-block-enrich:disabled { opacity: 0.6; cursor: not-allowed; }

  /* BLOC HÔTEL : champs éditables */
  .hotel-block-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .hotel-block-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    align-items: center; gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px dashed var(--gray-100);
    font-size: 13px;
  }
  .hotel-block-row:last-child { border-bottom: none; }
  .hotel-block-label {
    color: var(--gray-500); font-size: 12px;
    font-weight: 500;
  }
  .hotel-block-value {
    color: var(--gray-900); min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  .hotel-block-value a {
    color: var(--primary); text-decoration: none;
  }
  .hotel-block-value a:hover { text-decoration: underline; }
  .hotel-block-edit-btn {
    background: none; border: none;
    color: var(--gray-300); cursor: pointer;
    font-size: 13px; padding: 2px 6px;
    border-radius: 4px; transition: all 0.15s;
  }
  .hotel-block-edit-btn:hover {
    background: var(--gray-100); color: var(--primary);
  }
  .hotel-block-inline-input {
    padding: 4px 8px !important; font-size: 13px !important;
    width: 100%;
  }
  .hotel-block-description {
    margin-top: 10px; padding: 10px 12px;
    background: var(--gray-50); border-radius: 6px;
    font-size: 12px; color: var(--gray-700);
    font-style: italic; line-height: 1.5;
  }

  /* MARQUES AMENITIES (éditable inline) */
  .hotel-brands-section {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--gray-100);
  }
  .hotel-brands-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
  }
  .hotel-brands-title {
    font-size: 12px; font-weight: 600; color: #9d174d;
    text-transform: uppercase; letter-spacing: 0.3px;
  }
  .hotel-brands-source {
    font-size: 11px; color: var(--gray-500); text-decoration: none;
  }
  .hotel-brands-source:hover { color: var(--primary); text-decoration: underline; }
  .hotel-brands {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
  }
  .hotel-brand-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 4px 4px 10px;
    background: #fdf2f8;
    border: 1px solid #f9a8d4;
    color: #831843;
    border-radius: 14px;
    font-size: 12px; font-weight: 500;
  }
  .hotel-brand-tag.is-stilae {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: white;
  }
  .hotel-brand-remove {
    background: none; border: none;
    color: inherit; opacity: 0.5;
    cursor: pointer; padding: 0 4px;
    font-size: 12px; line-height: 1;
    border-radius: 50%;
  }
  .hotel-brand-remove:hover { opacity: 1; background: rgba(0,0,0,0.08); }
  .hotel-brand-add {
    padding: 4px 10px;
    background: white; border: 1px dashed var(--gray-300);
    color: var(--primary); border-radius: 14px;
    font-size: 12px; font-weight: 500; cursor: pointer;
  }
  .hotel-brand-add:hover {
    background: var(--primary-light); border-color: var(--primary);
  }
  .hotel-brands-empty {
    font-size: 12px; color: var(--gray-500); font-style: italic;
  }

  /* BLOC CONTACTS (managers + dirigeants) */
  .hotel-contacts-section {
    margin-bottom: 14px;
  }
  .hotel-contacts-section:last-child { margin-bottom: 0; }
  .hotel-contacts-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; color: var(--gray-700);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--gray-100);
  }
  .hotel-contacts-count {
    display: inline-block;
    padding: 1px 8px; background: var(--gray-100);
    border-radius: 10px; font-size: 11px;
    color: var(--gray-500); letter-spacing: 0;
  }
  .hotel-contact-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px dashed var(--gray-100);
  }
  .hotel-contact-row:last-child { border-bottom: none; }
  .hotel-contact-avatar {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: white;
  }
  .hotel-contact-avatar-mgr { background: #10b981; }
  .hotel-contact-avatar-dir { background: var(--accent); }
  .hotel-contact-avatar-morale {
    background: var(--gray-200); color: var(--gray-700);
    font-size: 14px;
  }
  .hotel-contact-badge-morale {
    background: var(--gray-100); color: var(--gray-500);
    padding: 1px 6px; border-radius: 10px;
    font-size: 10px; margin-left: 8px;
    font-weight: 500; vertical-align: middle;
  }
  .hotel-contact-body { flex: 1; min-width: 0; }
  .hotel-contact-name {
    font-size: 13px; font-weight: 600; color: var(--gray-900);
  }
  .hotel-contact-title {
    font-size: 11px; color: var(--gray-500); margin-top: 1px;
  }
  .hotel-contact-channels {
    margin-top: 4px; font-size: 12px;
    display: flex; flex-wrap: wrap; gap: 4px 10px;
  }
  .hotel-contact-link {
    color: var(--primary); text-decoration: none;
  }
  .hotel-contact-link:hover { text-decoration: underline; }
  .hotel-contact-nocontact {
    color: var(--gray-500); font-style: italic;
  }
  .hotel-contacts-empty {
    font-size: 12px; color: var(--gray-500);
    padding: 4px 0; font-style: italic;
  }
  .hotel-contacts-link {
    background: none; border: none; color: var(--primary);
    cursor: pointer; font-size: 12px; font-weight: 500;
    text-decoration: underline; padding: 0;
  }
  .hotel-contacts-link:hover { color: var(--primary-dark); }

  /* BÉNÉFICIAIRE EFFECTIF — chaîne de propriété résolue (hotel_ultimate_owners) */
  .ultimate-owner-block {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--gray-400);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .ultimate-owner-block--family {
    background: #fffbeb;
    border-color: #fde68a;
    border-left-color: #f59e0b;
  }
  .ultimate-owner-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
  }
  .ultimate-owner-title {
    font-size: 12px; font-weight: 700; color: var(--gray-700);
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .ultimate-owner-badge {
    display: inline-block;
    background: #fef3c7; color: #b45309;
    font-size: 10px; font-weight: 600;
    padding: 1px 8px; border-radius: 10px;
  }
  .ultimate-owner-label {
    font-size: 14px; font-weight: 700; color: var(--gray-900);
    margin-bottom: 2px;
  }
  .ultimate-owner-meta {
    font-size: 11px; color: var(--gray-500);
    margin-bottom: 8px;
  }
  .ultimate-owner-list {
    display: flex; flex-direction: column; gap: 2px;
  }
  .ultimate-owner-row {
    display: flex; gap: 10px; align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed var(--gray-100);
  }
  .ultimate-owner-row:last-child { border-bottom: none; }
  .ultimate-owner-avatar {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: white;
    background: var(--accent);
  }
  .ultimate-owner-block--family .ultimate-owner-avatar { background: #f59e0b; }
  .ultimate-owner-body { flex: 1; min-width: 0; }
  .ultimate-owner-name {
    font-size: 13px; font-weight: 600; color: var(--gray-900);
  }
  .ultimate-owner-sub {
    font-size: 11px; color: var(--gray-500); margin-top: 1px;
  }
  .ultimate-owner-more {
    font-size: 11px; color: var(--gray-500);
    padding: 6px 0 0 40px;
  }
  .ultimate-owner-note {
    font-size: 10px; color: var(--gray-400); font-style: italic;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--gray-100);
  }

  /* Contacts legacy (hotel_contacts Apollo) — affichage compact */
  .hotel-legacy-contacts:not(:empty) {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--gray-100);
  }
  .hotel-legacy-contacts:empty { display: none; }

  /* ── ADMIN PANEL HEADER ──────────────────────────────────────────
     Barre d'en-tête du panneau Admin : picto "s" + titre + boutons.
     ─────────────────────────────────────────────────────────────── */
  .admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--gray-200);
  }
  .admin-panel-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .admin-brand-logo {
    flex-shrink: 0;
    display: block;
    object-fit: contain;
  }
  .admin-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
  }
  .admin-panel-sub {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 2px;
    letter-spacing: 0.2px;
  }

  /* ── ADMIN STATS — bloc Complétude des contacts ──────────────────
     Sous-blocs joignabilité générique / personnel nommé.
     ─────────────────────────────────────────────────────────────── */
  .cc-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
  }
  .cc-denom {
    font-weight: 400;
    color: var(--gray-600);
  }
  .cc-reach-block {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 10px 12px;
  }
  .cc-reach-block.cc-reach-generic {
    border-left: 3px solid var(--primary);
  }
  .cc-reach-block.cc-reach-perso {
    border-left: 3px solid var(--accent);
  }
  .cc-reach-block.cc-reach-empty {
    background: #fffbeb;
    border-color: #fde68a;
    border-left-color: #f59e0b;
  }
  .cc-reach-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gray-200);
  }
  .cc-reach-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
  }
  .cc-reach-hint {
    font-weight: 400;
    color: var(--gray-600);
  }
  .cc-reach-count {
    font-size: 13px;
    color: var(--gray-600);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cc-enrich-notice {
    font-size: 12px;
    font-weight: 500;
    color: #b45309;
    padding: 6px 0 2px;
    font-style: italic;
  }
  .cc-enrich-notice--wide {
    padding: 6px 0 10px;
  }

  /* Status global enrich (sous le bouton) */
  .hotel-block .enrich-status {
    display: block; font-size: 11px; color: var(--gray-500);
    margin-top: 8px;
  }
  .hotel-block .enrich-status.ok { color: #15803d; }
  .hotel-block .enrich-status.err { color: var(--danger); }

  /* RESPONSIVE — stack photo+map, et hotel-header-row en colonne */
  @media (max-width: 720px) {
    .hotel-photo-map-grid { grid-template-columns: 1fr; }
    .hotel-header-row {
      flex-direction: column; align-items: flex-start; gap: 12px;
    }
    .hotel-block-row {
      grid-template-columns: 1fr auto;
    }
    .hotel-block-row .hotel-block-label {
      grid-column: 1 / -1;
      margin-bottom: 2px;
    }
    .hotel-block-row .hotel-block-value { grid-column: 1; }
  }

/* ── ALERTES (Admin → onglet "🔔 Alertes") ─────────────────────────── */

/* Badge ⚠️ qui apparaît sur le bouton de la navbar admin quand il y a un pb */
.alert-badge {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  animation: alert-pulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.6));
}
@keyframes alert-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.85; }
}

/* Carte de statut du script en haut de la section */
.alert-status-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid;
}
.alert-status-ok   { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.alert-status-warn { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.alert-status-fail { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.alert-status-icon { font-size: 28px; line-height: 1; }
.alert-status-body { flex: 1; }
.alert-status-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.alert-status-sub   { font-size: 13px; opacity: 0.85; }
.alert-status-sub code {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* Liste des alertes actives */
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alert-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #9ca3af;
  border-radius: 8px;
  padding: 14px 18px;
  transition: box-shadow 0.15s ease;
}
.alert-item:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.alert-item.sev-critical { border-left-color: #dc2626; background: #fef2f2; }
.alert-item.sev-high     { border-left-color: #ea580c; background: #fff7ed; }
.alert-item.sev-medium   { border-left-color: #ca8a04; background: #fefce8; }
.alert-item.sev-info     { border-left-color: #2563eb; background: #eff6ff; }

.alert-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
}
.alert-item-sev {
  font-weight: 700;
  letter-spacing: 0.4px;
}
.alert-item-meta {
  color: #6b7280;
  font-size: 11px;
}
.alert-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}
.alert-item-hint {
  font-size: 12px;
  color: #4b5563;
  font-style: italic;
  margin-bottom: 8px;
  line-height: 1.5;
}
.alert-item-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.alert-item-actions .btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

/* ── CRONS (Admin → onglet "🔄 Syncs" — section Tâches planifiées) ────────── */

.cron-section-title {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--gray-500);
  letter-spacing: 0.4px;
  margin: 0 0 12px;
  font-weight: 600;
}

.cron-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cron-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 12px 16px;
  transition: box-shadow 0.15s;
}
.cron-card:hover         { box-shadow: var(--shadow-md); }
.cron-card-fail          { border-left-color: var(--danger); background: #fff8f8; }
.cron-card-running       { border-left-color: #3b82f6; background: #eff6ff; }

.cron-card-main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cron-card-left {
  min-width: 200px;
  flex: 0 0 200px;
}
.cron-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
}
.cron-card-schedule {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}

.cron-card-center {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cron-card-when {
  font-size: 12px;
  color: var(--gray-600);
}
.cron-card-duration {
  font-size: 12px;
  color: var(--gray-500);
}
.cron-card-duration::before {
  content: '·';
  margin-right: 8px;
  color: var(--gray-300);
}

.cron-card-right {
  flex: 1;
  min-width: 0;
}

.cron-card-hist {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Badge statut inline */
.cron-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--gray-100);
  color: var(--gray-600);
}
.cron-badge-ok      { background: #dcfce7; color: #15803d; }
.cron-badge-fail    { background: #fee2e2; color: #b91c1c; }
.cron-badge-running { background: #dbeafe; color: #1d4ed8; }

/* Résumé texte */
.cron-summary {
  font-size: 12px;
  color: var(--gray-600);
}
.cron-summary-fail {
  color: var(--danger);
}

/* Pastilles mini-historique */
.cron-hist-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-200);
}
.cron-hist-ok      { background: #22c55e; }
.cron-hist-fail    { background: var(--danger); }
.cron-hist-running { background: #3b82f6; }

/* ── RESPONSIVE MOBILE (≤768px) ──────────────────────────────────────────── */

/* 1. Header : masquer "Synchronisé" + username, garder logo + logout */
@media (max-width: 768px) {
  .sync-indicator,
  #user-name {
    display: none !important;
  }
  .header {
    padding: 10px 16px;
  }
  .user-info {
    gap: 8px;
  }
}

/* 2. Mobile tab bar fixée en bas, masquer la nav desktop sur mobile */
@media (max-width: 768px) {
  #app-tabs.tabs {
    display: none !important;
  }
  #mobile-tab-bar {
    display: flex;
  }
  .main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .toast {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* Mobile tab bar — structure */
#mobile-tab-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: white;
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#mobile-tab-bar::-webkit-scrollbar { display: none; }

#mobile-tab-bar-inner {
  display: flex;
  min-width: max-content;
  width: 100%;
}

.mob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 0 60px;
  min-width: 60px;
  padding: 8px 4px 6px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.mob-tab:hover { color: var(--primary); }
.mob-tab.active { color: var(--primary); }
.mob-tab .mob-tab-icon {
  font-size: 18px;
  line-height: 1;
}
.mob-tab.active .mob-tab-icon::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  margin: 3px auto 0;
}

/* 4. Charts : 1 colonne sous 768px */
@media (max-width: 768px) {
  .charts-row {
    grid-template-columns: 1fr;
  }
}

/* 5. Toolbar + barre de filtres contacts : adaptation mobile */
@media (max-width: 768px) {
  .toolbar {
    gap: 8px;
  }
  .filter-select {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
  }
  .cfb-row--filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cfb-group + .cfb-group {
    border-left: none;
    border-top: 1px solid var(--gray-200);
    padding-left: 0;
    padding-top: 10px;
    width: 100%;
  }
  .cfb-reset { margin-left: 0; }
  .search-box {
    flex: 1 1 100%;
  }
  .count-info {
    margin-left: 0;
    width: 100%;
    text-align: right;
  }
}

/* 6. Table : overflow-x: auto */
@media (max-width: 768px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 7. Login box pleine largeur sous 480px */
@media (max-width: 480px) {
  .login-box {
    width: calc(100vw - 32px);
    padding: 28px 20px;
    border-radius: 12px;
  }
}

/* ── HAMBURGER + DRAWER (mobile ≤768px) ───────────────────────────────────── */

/* Bouton ☰ dans le header — masqué par défaut, visible ≤768px */
.mob-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mob-hamburger:hover { background: rgba(255,255,255,0.22); }
.mob-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: all 0.2s;
}

@media (max-width: 768px) {
  .mob-hamburger { display: flex; }
}

/* Overlay sombre derrière le drawer */
.mob-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 110;
  opacity: 0;
  transition: opacity 0.25s;
}
.mob-drawer-overlay.open {
  display: block;
  opacity: 1;
}

/* Drawer lui-même — slide depuis la gauche */
.mob-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: white;
  z-index: 120;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(.4, 0, .2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mob-drawer.open {
  transform: translateX(0);
}

/* En-tête du drawer */
.mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
}
.mob-drawer-close {
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mob-drawer-close:hover { background: var(--gray-100); color: var(--danger); }

/* Liste des items */
.mob-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.mob-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 20px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--gray-700);
  text-align: left;
  transition: all 0.13s;
  -webkit-tap-highlight-color: transparent;
}
.mob-drawer-item:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.mob-drawer-item.active {
  background: var(--primary-light);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}
.mob-drawer-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* ── CONTACTS SCORING (stilae_tier) ─────────────────────────────
   Pastille ronde colorée selon le tier commercial Stilae.
   Visible uniquement dans les vignettes Groupes / Opérateurs.
   ────────────────────────────────────────────────────────────── */

/* Colonne Scoring : largeur fixe, centrée */
th.th-tier, td.td-tier {
  width: 56px;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

/* Pastille de base */
.tier-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Couleurs par tier — alignées sur les variables existantes */
.tier-dot--high   { background: #16a34a; box-shadow: 0 0 0 2px #dcfce7; }
.tier-dot--medium { background: var(--accent); box-shadow: 0 0 0 2px #fef3c7; }
.tier-dot--low    { background: var(--danger); box-shadow: 0 0 0 2px #fee2e2; }
/* Undetermined : à qualifier (mandataire/propriétaire — peut devenir High) — gris présent */
.tier-dot--undetermined { background: var(--gray-400); box-shadow: 0 0 0 2px var(--gray-100); }
/* NULL / hors périmètre (générique) : gris très discret */
.tier-dot--none   { background: var(--gray-200); box-shadow: none; }

/* ── DASHBOARD — CARTE COUVERTURE CONTACTS PAR RÉGION ─── */
.dash-map-loading {
  padding: 40px 0;
  text-align: center;
  color: var(--gray-500);
  font-size: 13px;
}
.dash-map-wrap {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.dash-map-svg {
  flex: 0 1 380px;
  max-width: 420px;
  width: 100%;
  height: auto;
}
.dash-map-region {
  stroke: #fff;
  stroke-width: 1.2;
  cursor: pointer;
  transition: filter .15s ease, stroke .15s ease;
}
.dash-map-region:hover { filter: brightness(.88); }
.dash-map-region--sel {
  stroke: var(--accent);
  stroke-width: 2.5;
  filter: brightness(.95);
}
.dash-map-om text {
  font-size: 11px;
  fill: var(--gray-700);
  stroke: none;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.dash-map-stats {
  flex: 1 1 320px;
  min-width: 280px;
}
.dash-map-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.dash-map-stats-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
}
.dash-map-back {
  font-size: 12px;
  padding: 4px 10px;
}
.dash-map-table {
  width: 100%;
  border-collapse: collapse;
}
.dash-map-table th {
  text-align: center;
  font-size: 11.5px;
  color: var(--gray-500);
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-200);
}
.dash-map-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--gray-100);
  text-align: center;
  vertical-align: middle;
}
.dash-map-table td.cov-lbl {
  text-align: left;
  font-size: 12.5px;
  color: var(--gray-700);
  font-weight: 600;
  white-space: nowrap;
}
.dash-map-table td.cov-na { color: var(--gray-300); }
.cov-pct {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}
.cov-cnt {
  display: block;
  font-size: 11.5px;
  color: var(--gray-700);
  margin-top: 1px;
}
.dash-map-legend {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--gray-500);
}
/* Ligne de tête : couverture globale (≥ 1 contact) */
.dash-map-table tr.cov-row--main td { background: var(--gray-50, #f8f9fa); }
.dash-map-table tr.cov-row--main td.cov-lbl { font-size: 13px; color: var(--gray-800); }
.dash-map-table tr.cov-row--main .cov-pct { font-size: 17px; }
/* Ligne de tête de sous-groupe : contacts identifiés (total) */
.dash-map-table tr.cov-row--sub-head td { background: var(--gray-50, #f8f9fa); border-top: 1px solid var(--gray-200); }
.dash-map-table tr.cov-row--sub-head td.cov-lbl { font-size: 13px; color: var(--gray-800); }
.dash-map-table tr.cov-row--sub-head .cov-pct { font-size: 15px; }
/* Sous-lignes : sans email / avec email */
.dash-map-table tr.cov-row--sub td.cov-lbl { padding-left: 14px; font-weight: 400; color: var(--gray-500); font-size: 12px; }
.dash-map-table tr.cov-row--sub .cov-pct { font-size: 13px; color: var(--gray-600); }
.dash-map-table tr.cov-row--sub .cov-cnt { color: var(--gray-400); }

/* ── EMAILS ─────────────────────────────────────────────────────────
   Module admin : Audiences / Vérification / Campagnes / Stats
   Palette : --primary vert Stilae + --accent orange + grays
   ─────────────────────────────────────────────────────────────────── */

/* Sous-nav onglets */
.email-module { padding-top: 4px; }
.email-subnav {
  display: flex; gap: 0;
  background: white; border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--gray-200);
  margin-bottom: 20px; overflow: hidden;
}
.email-subnav-btn {
  flex: 1; padding: 11px 16px;
  background: transparent; border: none; border-bottom: 3px solid transparent;
  font-size: 13px; font-weight: 500; color: var(--gray-500);
  cursor: pointer; font-family: inherit; transition: all 0.15s;
  border-right: 1px solid var(--gray-200);
}
.email-subnav-btn:last-child { border-right: none; }
.email-subnav-btn:hover { color: var(--primary); background: var(--gray-50); }
.email-subnav-btn.active {
  color: var(--primary); border-bottom-color: var(--primary);
  background: var(--primary-light); font-weight: 600;
}

/* Carte générique email */
.email-card {
  background: white; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px;
  margin-bottom: 16px;
}
.email-card-title {
  font-size: 15px; font-weight: 600; color: var(--gray-900);
  margin-bottom: 16px;
}
.email-section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--gray-500); margin-bottom: 8px;
}

/* Layout 2 colonnes (builder + liste) */
.email-section-grid {
  display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start;
}
.email-builder-col { position: sticky; top: 12px; }
.email-list-col {}

@media (max-width: 960px) {
  .email-section-grid { grid-template-columns: 1fr; }
  .email-builder-col { position: static; }
}

/* Badges type campagne */
.email-type-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap; line-height: 1.6;
}
.email-type--perso { background: #ede9fe; color: #5b21b6; }
.email-type--news  { background: #dbeafe; color: #1e40af; }

/* Badges statut campagne */
.email-status-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap; line-height: 1.6;
}
.email-status--draft     { background: var(--gray-100); color: var(--gray-500); }
.email-status--scheduled { background: #fef3c7; color: #b45309; }
.email-status--sending   { background: var(--primary-light); color: var(--primary-dark); }
.email-status--paused    { background: #fff7ed; color: #c2410c; }
.email-status--sent      { background: #dcfce7; color: #15803d; }
.email-status--failed    { background: #fee2e2; color: #991b1b; }

/* Badges résultat vérification */
.email-verif-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap; line-height: 1.6;
}
.email-verif--valid   { background: #dcfce7; color: #15803d; }
.email-verif--invalid { background: #fee2e2; color: #991b1b; }
.email-verif--risky   { background: #fff7ed; color: #c2410c; }
.email-verif--unknown { background: var(--gray-100); color: var(--gray-500); }

/* Pills filtres audience */
.email-checks-row { display: flex; flex-wrap: wrap; gap: 6px; }
.email-check-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--gray-700); cursor: pointer;
  padding: 4px 10px; border: 1px solid var(--gray-200); border-radius: 20px;
  background: white; transition: background 0.12s, border-color 0.12s; user-select: none;
}
.email-check-pill:hover { border-color: var(--primary); background: var(--primary-light); }
.email-check-pill input { cursor: pointer; accent-color: var(--primary); }

/* Tuiles de comptage live */
.email-count-tiles { margin: 16px 0 0; }
.email-count-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
@media (max-width: 700px) { .email-count-grid { grid-template-columns: repeat(3, 1fr); } }
.email-count-tile {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 8px; padding: 10px 10px 8px; text-align: center;
}
.email-count-tile.ect--sendable {
  background: var(--primary-light); border-color: rgba(26,107,90,0.2);
}
.email-count-tile.ect--sendable .ect-val { color: var(--primary-dark); }
.email-count-tile.ect--warn { background: #fff7ed; border-color: #fdba74; }
.email-count-tile.ect--warn .ect-val { color: #c2410c; }
.email-count-tile.ect--muted { opacity: 0.7; }
.ect-val {
  font-size: 22px; font-weight: 700; color: var(--gray-900);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ect-label { font-size: 10px; color: var(--gray-500); margin-top: 3px; line-height: 1.3; }

/* Lignes audiences enregistrées */
.email-audience-row {
  background: white; border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; transition: border-color 0.15s, box-shadow 0.15s;
}
.email-audience-row:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(26,107,90,0.08); }
.email-audience-row-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.email-audience-name { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.email-audience-desc { font-size: 12px; color: var(--gray-500); margin-top: 2px; line-height: 1.4; }
.email-audience-meta { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-bottom: 8px; }
.email-aud-stat { font-size: 12px; color: var(--gray-700); }
.email-aud-stat--warn { color: #c2410c; }
.email-aud-sep { width: 1px; height: 12px; background: var(--gray-200); margin: 0 10px; display: inline-block; }
.email-aud-bar-wrap { display: flex; align-items: center; gap: 10px; }
.email-aud-bar { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.email-aud-bar-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.3s; }
.email-aud-bar-label { font-size: 11px; color: var(--gray-500); white-space: nowrap; min-width: 80px; text-align: right; }

/* Vérification : compteur + garde-fou */
.email-verif-counter {
  background: var(--primary-light); border-radius: var(--radius);
  padding: 16px 20px; text-align: center; margin: 16px 0;
}
.evc-number { font-size: 36px; font-weight: 700; color: var(--primary-dark); line-height: 1; }
.evc-label { font-size: 13px; color: var(--primary); margin-top: 4px; }
.email-verif-guardrail {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius);
  padding: 12px 14px; font-size: 12px; color: #92400e; line-height: 1.6;
}

/* Tuiles résumé vérification */
.email-verif-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 4px; }
.email-verif-tile {
  border-radius: var(--radius); padding: 14px 12px; text-align: center; border: 1px solid transparent;
}
.evt--valid   { background: #dcfce7; border-color: #86efac; }
.evt--invalid { background: #fee2e2; border-color: #fca5a5; }
.evt--risky   { background: #fff7ed; border-color: #fdba74; }
.evt--unknown { background: var(--gray-100); border-color: var(--gray-200); }
.evt-val   { font-size: 28px; font-weight: 700; line-height: 1; }
.evt--valid   .evt-val { color: #15803d; }
.evt--invalid .evt-val { color: #991b1b; }
.evt--risky   .evt-val { color: #c2410c; }
.evt--unknown .evt-val { color: var(--gray-500); }
.evt-label { font-size: 12px; font-weight: 600; color: var(--gray-700); margin-top: 4px; }
.evt-sub   { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

/* Campagnes layout */
.email-campaigns-layout { display: flex; flex-direction: column; gap: 0; }

/* Wizard */
.wizard-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap; margin-top: 8px;
}
.wiz-step { font-size: 12px; color: var(--gray-400); white-space: nowrap; }
.wiz-step--active { color: var(--primary); font-weight: 600; }
.wiz-step--done { color: var(--primary); }
.wiz-sep { color: var(--gray-300); font-size: 12px; }

/* Wizard step 0 : cartes type */
.wizard-type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wizard-type-card {
  border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 18px 16px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.wizard-type-card:hover { border-color: var(--primary); background: var(--gray-50); }
.wizard-type-card--active { border-color: var(--primary); background: var(--primary-light); }
.wtc-icon { font-size: 28px; margin-bottom: 8px; }
.wtc-title { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.wtc-desc { font-size: 12px; color: var(--gray-600); line-height: 1.55; margin-bottom: 10px; }
.wtc-pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 10px; border-radius: 20px;
  background: var(--gray-100); color: var(--gray-600);
}
.wizard-type-card--active .wtc-pill { background: rgba(26,107,90,0.15); color: var(--primary-dark); }

/* Wizard step 1 preview audience */
.email-wiz-aud-preview {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 12px; margin-top: 10px;
}

/* Wizard step 2 : expéditeurs */
.email-sender-cards { display: flex; flex-direction: column; gap: 10px; }
.email-sender-card {
  display: flex; align-items: flex-start; gap: 12px;
  border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; transition: border-color 0.15s; background: white;
}
.email-sender-card:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.email-sender-card input[type="radio"] { margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.esc-name { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.esc-email { font-size: 12px; color: var(--primary); margin-top: 2px; }
.esc-note { font-size: 11px; color: var(--gray-500); margin-top: 3px; }

/* Wizard step 3 : modes composition (Personnalisé) */
.email-compose-modes { display: flex; flex-direction: column; gap: 8px; }
.email-compose-mode {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 12px 14px;
  cursor: pointer; transition: border-color 0.15s;
}
.email-compose-mode:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.email-compose-mode input[type="radio"] { margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.ecm-title { font-size: 13px; font-weight: 600; color: var(--gray-900); margin-bottom: 3px; }
.ecm-desc  { font-size: 12px; color: var(--gray-600); line-height: 1.5; }

/* Wizard step 4 : sliders cadence */
.email-slider { width: 100%; accent-color: var(--primary); cursor: pointer; }
.email-slider-bounds { display: flex; justify-content: space-between; font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.email-cadence-estimate {
  background: var(--primary-light); border-radius: var(--radius); padding: 14px 16px; margin-top: 16px;
}
.ece-main  { font-size: 13px; color: var(--primary-dark); margin-bottom: 4px; }
.ece-result { font-size: 16px; font-weight: 700; color: var(--primary-dark); }
.ece-sub    { font-size: 12px; font-weight: 400; color: var(--primary); margin-left: 6px; }

/* Wizard step 5 : pré-vol */
.email-preflight {
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px;
}
.epf-row {
  display: flex; gap: 16px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px;
}
.epf-row:last-child { border-bottom: 0; }
.epf-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gray-500); min-width: 80px; flex-shrink: 0; }
.email-preflight-cta {
  display: flex; align-items: center; gap: 20px;
  background: var(--primary-light); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; flex-wrap: wrap;
}
.epc-count { display: flex; align-items: baseline; gap: 8px; }
.epc-number { font-size: 36px; font-weight: 700; color: var(--primary-dark); line-height: 1; }
.epc-label  { font-size: 13px; color: var(--primary); }
.epc-guards { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.epc-guard {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.epc-guard--ok { background: #dcfce7; color: #15803d; }
.email-preflight-warn {
  background: #fff7ed; border: 1px solid #fde68a; border-radius: var(--radius);
  padding: 10px 14px; font-size: 12px; color: #92400e; line-height: 1.5;
}

/* Stats : funnel visuel */
.email-funnel {
  display: flex; align-items: flex-end; justify-content: center; gap: 0;
  padding: 16px 0 8px; height: 140px;
}
.ef-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; }
.ef-step-bar { width: 48px; border-radius: 4px 4px 0 0; transition: height 0.3s; flex-shrink: 0; }
.ef-step-val { font-size: 16px; font-weight: 700; color: var(--gray-900); }
.ef-step-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gray-500); }
.ef-step-pct { font-size: 12px; color: var(--gray-500); }
.ef-arrow { font-size: 20px; color: var(--gray-300); align-self: center; margin: 0 4px; padding-bottom: 40px; }

/* Stats : clics par lien */
.email-link-row {
  display: flex; align-items: center; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--gray-100); font-size: 12px;
}
.email-link-row:last-child { border-bottom: 0; }

/* Stats : statut destinataire */
.email-rec-status {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
}
.email-rec--clicked   { background: #ede9fe; color: #5b21b6; }
.email-rec--opened    { background: var(--primary-light); color: var(--primary-dark); }
.email-rec--delivered { background: var(--gray-100); color: var(--gray-500); }
.email-rec--bounced   { background: #fee2e2; color: #991b1b; }

/* ── EMAIL TEMPLATES (section Newsletter du wizard Campagnes) ────────────── */

/* Bandeau d'avertissement éditorial (points à valider avant envoi) */
.eit-warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.55;
}
.eit-warning strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #78350f;
}
.eit-warning ul {
  margin: 4px 0 0 16px;
  padding: 0;
}
.eit-warning li { margin-bottom: 2px; }

/* Grille des 3 cartes template */
.eit-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .eit-gallery { grid-template-columns: 1fr; }
}

/* Carte template individuelle */
.eit-card {
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.eit-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(26,107,90,0.12);
  transform: translateY(-2px);
}
.eit-card.eit-card--active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(26,107,90,0.15);
}

/* Pastille "Sélectionné" */
.eit-card--active::after {
  content: 'Sélectionné';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: var(--primary);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
}

.eit-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
}
.eit-card--active .eit-card-name { color: var(--primary-dark); }

.eit-card-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e0e7ff;
  color: #3730a3;
  align-self: flex-start;
  white-space: nowrap;
}

.eit-card-when {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.5;
  flex: 1;
}

.eit-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--gray-100);
  margin-top: 4px;
}

/* Bouton Aperçu (ouvre la modale preview) */
.eit-preview-btn {
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-600);
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.eit-preview-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* Bouton Choisir (sélection active) */
.eit-select-btn {
  background: white;
  border: 1px solid var(--primary);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  flex: 1;
}
.eit-select-btn:hover {
  background: var(--primary);
  color: white;
}
.eit-card--active .eit-select-btn {
  background: var(--primary);
  color: white;
  border-color: var(--primary-dark);
}

/* Objet pré-rempli (affiche le 1er subject du template sélectionné) */
.eit-subject-preview {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.5;
}
.eit-subject-preview strong {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gray-500);
  display: block;
  margin-bottom: 4px;
}

/* Sujets alternatifs (dropdown ou liste) */
.eit-subjects-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.eit-subject-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray-700);
  background: white;
  transition: border-color 0.12s, background 0.12s;
  font-family: inherit;
  text-align: left;
  line-height: 1.45;
}
.eit-subject-option:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
}
.eit-subject-option.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 500;
}
.eit-subject-option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

/* Modale preview email (iframe) */
.eit-preview-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 250;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.eit-preview-modal-overlay.open {
  display: flex;
}
.eit-preview-modal {
  background: white;
  border-radius: 12px;
  width: 680px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}
.eit-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.eit-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}
.eit-preview-close {
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 13px;
  color: var(--gray-500);
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}
.eit-preview-close:hover { color: var(--danger); border-color: var(--danger); }
.eit-preview-frame {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f4f5f7;
}
.eit-preview-inner {
  max-width: 600px;
  margin: 0 auto;
}
/* ─────────────────────────────────────────────────────────────────────────── */