/* Reprise de la grille de cartes, du survol et de la barre de NeoAccWeb. */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f4f6f8; color: #222; }
a { color: #215e8e; }
a:focus-visible { outline: 3px solid #144873; outline-offset: 4px; }
.topbar { background: #ca4f08; color: #fff; padding: 14px 25px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.project-name { color: #fff; font-size: 21px; font-weight: bold; text-decoration: none; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-top { display: inline-flex; align-items: center; gap: 8px; background: #2d6ea3; color: #fff; padding: 10px 14px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: bold; transition: background .18s; }
.btn-top:hover { background: #1f5a86; }
.page-wrap { max-width: 1300px; margin: 0 auto; padding: 30px 25px 50px; }
.header { margin-bottom: 28px; }
.header h1 { margin: 8px 0 0; font-size: 30px; line-height: 1.25; color: #1f2d3d; max-width: 900px; }
.eyebrow { margin: 0 0 5px; font-size: 12px; color: #486378; font-weight: bold; letter-spacing: .08em; }
.level-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 20px; }
h2 { margin: 0 0 7px; font-size: 23px; color: #1f2d3d; line-height: 1.25; }
.level-header p:not(.eyebrow) { margin: 0; color: #5c6973; line-height: 1.5; }
.date-chip, .count-chip { display: inline-block; background: #e6eff7; color: #214e73; padding: 8px 11px; border-radius: 6px; font-size: 13px; font-weight: bold; white-space: nowrap; }
.date-chip { background: #fff0e6; color: #8b3b11; }
.breadcrumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; font-size: 13px; line-height: 1.6; }
.breadcrumb a { font-weight: bold; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.separator { color: #789; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 360px)); gap: 20px; justify-content: start; align-items: stretch; }
.brand-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #d9e1e7; border-radius: 10px; text-decoration: none; color: #222; overflow: hidden; transition: transform .18s ease-in-out, box-shadow .18s, border-color .18s; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.brand-card:hover { transform: translateY(-3px); border-color: #9fb7cc; box-shadow: 0 6px 16px rgba(0,0,0,.10); }
.card-top { display: flex; justify-content: space-between; align-items: center; background: #eaf1f7; padding: 13px 18px; border-bottom: 1px solid #dbe5ed; }
.card-code { font-size: 14px; font-weight: bold; color: #224f72; }
.card-arrow { color: #aa4408; font-size: 21px; }
.brand-info { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.brand-name { margin: 0 0 18px; font-size: 20px; font-weight: bold; color: #1e2a36; line-height: 1.35; overflow-wrap: anywhere; }
.card-date { margin-top: auto; align-self: flex-start; padding: 6px 8px; background: #fff1e7; color: #854013; border-radius: 5px; font-size: 13px; }
.brand-link { font-size: 13px; font-weight: bold; color: #2d6ea3; margin-top: 18px; display: flex; justify-content: space-between; align-items: center; }
.brand-link span { font-size: 23px; line-height: 1; }
.empty-state, .notes { background: #fff; border: 1px solid #d9e1e7; border-radius: 9px; padding: 22px; margin-bottom: 20px; }
.empty-state { border-left: 4px solid #ca4f08; }
.empty-state h3, .notes h3 { margin: 0 0 8px; font-size: 18px; }
.empty-state p { margin: 0; color: #5c6973; line-height: 1.6; }
.notes ul { margin: 10px 0 0; padding-left: 22px; }
.notes li { margin: 8px 0; line-height: 1.6; overflow-wrap: anywhere; }
.back-row { margin-top: 24px; }
.status { border: 1px solid #cb6f59; background: #fff1ec; color: #7a2714; border-radius: 8px; padding: 18px; line-height: 1.6; }
.timeline { list-style: none; padding: 0 0 0 20px; margin: 0 0 28px 7px; border-left: 3px solid #c8d9e6; max-width: 940px; }
.timeline li { position: relative; padding: 0 0 23px 8px; display: grid; grid-template-columns: 165px 1fr; gap: 20px; }
.timeline li::before { content: ''; position: absolute; left: -27px; top: 4px; width: 11px; height: 11px; background: #ca4f08; border-radius: 50%; }
.timeline time { font-size: 14px; font-weight: bold; padding-top: 3px; color: #854013; }
.timeline a { display: block; background: #fff; border: 1px solid #d9e1e7; padding: 14px 18px; border-radius: 8px; text-decoration: none; }
.timeline a:hover { border-color: #9fb7cc; }
.timeline a span { display: block; font-size: 12px; margin-bottom: 5px; }
.timeline strong { color: #1e2a36; line-height: 1.4; }
@media (max-width: 600px) {
  .topbar { padding: 12px 16px; flex-wrap: wrap; }
  .page-wrap { padding: 22px 16px 40px; }
  .header h1 { font-size: 25px; }
  .brand-grid { grid-template-columns: 1fr; }
  .level-header { align-items: flex-start; flex-direction: column; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .brand-card { transition: none; } .brand-card:hover { transform: none; } }
@media print { .topbar, .back-row { display: none; } body { background: #fff; } .brand-card, .timeline li { break-inside: avoid; } .brand-card { box-shadow: none; } }

/* Mode édition du plan XML */
.btn-edit { background: #5b6470; }
.btn-edit:hover { background: #414852; }
.btn-edit.active { background: #2e7d32; }
.btn-edit.active:hover { background: #256629; }
.status.success { border-color: #84b58a; background: #eef8ef; color: #225d28; }
.level-admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: -5px 0 20px; }
.btn-admin-add, .btn-admin-edit, .btn-secondary, .btn-save, .btn-delete {
    display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px;
    padding: 9px 13px; font: inherit; font-size: 13px; font-weight: bold; text-decoration: none; cursor: pointer;
}
.btn-admin-add { background: #2d6ea3; color: #fff; }
.btn-admin-add:hover { background: #1f5a86; color: #fff; }
.btn-admin-edit { background: #e9edf1; color: #314455; border: 1px solid #cbd5de; }
.btn-admin-edit:hover { background: #dce4ea; color: #263947; }
.editor-panel { background: #fff; border: 2px solid #8aa9c2; border-radius: 10px; padding: 22px; margin: 0 0 24px; box-shadow: 0 5px 18px rgba(30,60,85,.09); }
.editor-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.editor-title-row h3 { margin: 4px 0 0; font-size: 21px; color: #1f2d3d; }
.btn-secondary { background: #e8edf1; color: #30485b; border: 1px solid #c4d0da; }
.btn-secondary:hover { background: #dbe4eb; }
.editor-grid { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(300px, 2fr); gap: 16px 18px; }
.editor-field { display: flex; flex-direction: column; gap: 6px; }
.editor-field label { font-size: 13px; font-weight: bold; color: #324b5e; }
.editor-field small { color: #6e7c87; font-size: 12px; line-height: 1.4; }
.editor-span-2 { grid-column: span 1; }
.editor-span-all { grid-column: 1 / -1; }
.editor-input { width: 100%; border: 1px solid #b9c7d2; border-radius: 6px; padding: 10px 11px; font: inherit; color: #222; background: #fff; }
.editor-input:focus { outline: 3px solid rgba(45,110,163,.18); border-color: #2d6ea3; }
.editor-notes { min-height: 130px; resize: vertical; line-height: 1.5; }
.editor-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.btn-save { background: #2e7d32; color: #fff; }
.btn-save:hover { background: #256629; }
.btn-delete { background: #b9342b; color: #fff; margin-left: auto; }
.btn-delete:hover { background: #96271f; }
.editor-file-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e0e6eb; color: #687680; font-size: 12px; }
.brand-card-wrapper { display: flex; flex-direction: column; min-width: 0; }
.brand-card-wrapper .brand-card { flex: 1; }
.card-admin-bar { display: flex; align-items: center; justify-content: flex-end; background: #f8fafb; border: 1px solid #d9e1e7; border-top: 0; border-radius: 0 0 8px 8px; padding: 8px 10px; margin-top: -6px; position: relative; z-index: 2; }
.card-admin-bar a { color: #2d6ea3; font-size: 12px; font-weight: bold; text-decoration: none; }
.card-admin-bar a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-span-all { grid-column: 1; }
  .editor-title-row { flex-direction: column; }
  .btn-delete { margin-left: 0; }
}
@media print { .editor-panel, .level-admin-actions, .card-admin-bar, .btn-edit { display: none !important; } }


/* Ressources assignées aux points */
.header-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.resource-chip { display: inline-block; background: #e8f5ea; color: #236735; border: 1px solid #b8ddc0; padding: 7px 10px; border-radius: 6px; font-size: 13px; font-weight: bold; white-space: nowrap; }
.card-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.card-meta .card-date { margin-top: 0; }
.resource-chip-card { padding: 5px 8px; font-size: 12px; }
.timeline-resource { margin-left: auto; font-style: normal; background: #e8f5ea; color: #236735; border-radius: 5px; padding: 4px 7px; font-size: 12px; font-weight: bold; }
.inline-resource { color: #236735; font-weight: bold; }