:root {
  --ink: #07100b;
  --ink-raised: #0c1a10;
  --surface: #102217;
  --surface-raised: #172e1d;
  --surface-hover: #1d3a24;
  --line: rgba(218, 245, 211, .12);
  --line-strong: rgba(193, 241, 154, .32);
  --leaf: #7dcd60;
  --leaf-bright: #cef59c;
  --leaf-deep: #397c45;
  --text-primary: #f2f9ee;
  --text-muted: #9fb6a1;
  --success: #8be58d;
  --danger: #ff7a86;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Alias de compatibilité pour les fragments d'éditeur injectés dans index.php. */
  --bg-void: var(--ink);
  --bg-surface: var(--surface);
  --bg-surface-2: var(--surface-raised);
  --bg-surface-3: var(--surface-hover);
  --accent: var(--leaf);
  --accent-bright: var(--leaf-bright);
  --accent-dim: var(--leaf-deep);
  --border: var(--line);
  --border-2: var(--line-strong);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--ink); color: var(--text-primary); font-family: var(--font-body); }
button, input, select, textarea { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }

/* Authentication */
body.page-login { display: grid; min-height: 100vh; place-items: center; overflow: hidden; }
#app { position: relative; width: 100%; min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.decor { position: fixed; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 16% 12%, rgba(126, 205, 96, .2), transparent 25%), radial-gradient(circle at 86% 83%, rgba(57, 124, 69, .2), transparent 28%); }
.decor::before { content: ""; position: absolute; right: -180px; top: -190px; width: 470px; height: 470px; border: 1px solid rgba(207, 246, 171, .09); transform: rotate(35deg); }
.shard { position: absolute; width: 46px; height: 46px; border: 1px solid rgba(198, 245, 166, .2); background: linear-gradient(135deg, rgba(129, 210, 94, .2), rgba(57, 124, 69, .03)); transform: rotate(45deg); animation: float-shard 8s ease-in-out infinite; }
.shard-1 { left: 12%; top: 16%; }.shard-2 { right: 10%; bottom: 20%; width: 68px; height: 68px; animation-delay: -2s; }.shard-3 { right: 19%; top: 16%; width: 25px; height: 25px; animation-delay: -4s; }.shard-4 { bottom: 10%; left: 20%; width: 31px; height: 31px; animation-delay: -6s; }
@keyframes float-shard { 50% { transform: translateY(-16px) rotate(58deg); } }
.ecran { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; width: min(410px, calc(100% - 40px)); text-align: left; }
.ecran--vertical { padding: 42px 39px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(20, 43, 27, .92), rgba(10, 23, 14, .96)); box-shadow: 0 30px 80px rgba(0,0,0,.34); }
.marque { display: flex; align-items: center; gap: 11px; }.marque-icone { display: grid; width: 43px; height: 43px; place-items: center; border: 0; border-radius: 0; clip-path: polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%); background: linear-gradient(145deg, #dcfbb8, #76cb5e); box-shadow: 0 8px 24px rgba(73, 166, 67, .24); color: #12230e; font: 800 13px var(--font-display); }.marque-nom { margin: 0; color: var(--text-primary); font-size: 10px; font-weight: 800; letter-spacing: .16em; }.accroche { margin: 35px 0 23px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }.champ-form { display: grid; gap: 7px; margin-bottom: 13px; }.champ-form label, .form-group > label { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.champ-form input, .form-group input, .form-group select, .form-group textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: none; background: rgba(5, 14, 8, .46); color: var(--text-primary); }.champ-form input, .form-group input, .form-group select { min-height: 42px; padding: 0 12px; }.champ-form input:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(125, 205, 96, .12); }.btn-principal { width: 100%; margin-top: 8px; padding: 13px 17px; border: 0; border-radius: 9px; background: linear-gradient(135deg, #ddfab9, #78ca5e); color: #12230e; font-weight: 800; cursor: pointer; }.statut { margin: 14px 0 0; color: var(--text-muted); text-align: center; font-size: 11px; }.erreur { margin: 0 0 14px; padding: 9px 11px; border: 1px solid rgba(255, 122, 134, .35); border-radius: 8px; background: rgba(130, 33, 43, .26); color: #ffb3bb; font-size: 12px; }

/* Admin shell */
body.page-admin { min-height: 100vh; background: radial-gradient(ellipse 55% 45% at 91% -5%, rgba(89, 174, 77, .14), transparent 60%), var(--ink); }
body.page-admin .decor { opacity: .25; }.app { position: relative; z-index: 1; display: grid; min-height: 100vh; grid-template-rows: 70px 1fr; }.header { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(7, 16, 11, .82); backdrop-filter: blur(18px); }.header-content, .header-actions { display: flex; align-items: center; gap: 11px; }.header .marque-icone { width: 36px; height: 36px; }.header .marque-nom small { margin-left: 6px; color: var(--leaf-bright); font-size: 8px; letter-spacing: .1em; }
.main { display: grid; min-height: 0; grid-template-columns: 250px minmax(0, 1fr); }.sidebar { padding: 26px 15px; border-right: 1px solid var(--line); background: rgba(7, 16, 11, .54); }.nav-section { margin-bottom: 28px; }.nav-section-title { padding: 0 11px 10px; color: #77997b; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.nav-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }.nav-item { display: flex; align-items: center; gap: 10px; min-height: 43px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: .16s; }.nav-item:hover { background: rgba(207, 246, 174, .06); color: var(--text-primary); }.nav-item.active { border-color: rgba(201, 244, 158, .18); background: linear-gradient(100deg, rgba(126, 205, 96, .23), rgba(57, 124, 69, .08)); color: var(--text-primary); }.nav-badge { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: rgba(207, 246, 174, .09); color: var(--leaf-bright); font-size: 10px; font-weight: 800; }
.content { min-width: 0; padding: 35px 40px 44px; overflow: auto; }.breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 19px; color: var(--text-muted); font-size: 12px; }.breadcrumb-item { color: var(--text-muted); text-decoration: none; }.breadcrumb-item.active, .breadcrumb-item:last-child { color: var(--text-primary); }.breadcrumb-item:hover { color: var(--leaf-bright); }.separator { color: #608066; }

/* Shared controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(23, 46, 29, .85); color: var(--text-primary); font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: .16s; }.btn:hover { border-color: var(--line-strong); background: var(--surface-hover); transform: translateY(-1px); }.btn:active { transform: translateY(0); }.btn-primary { border: 0; background: linear-gradient(135deg, #dffaba, #79cc60); color: #11220e; box-shadow: 0 10px 23px -13px rgba(81, 172, 70, .72); }.btn-primary:hover { border-color: transparent; filter: brightness(1.04); }.btn-secondary { background: rgba(23, 46, 29, .7); }.btn-danger { border-color: rgba(255, 122, 134, .34); background: rgba(121, 30, 41, .22); color: #ffadb5; }.btn-sm { min-height: 30px; padding: 0 9px; font-size: 11px; }.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }.upload-zone { display: flex; align-items: center; gap: 10px; padding: 7px; border: 1px dashed var(--line-strong); border-radius: 10px; background: rgba(14, 34, 20, .76); }.upload-zone.dragover { border-color: var(--leaf-bright); background: rgba(93, 172, 74, .13); }.upload-zone-label { color: var(--text-muted); font-size: 11px; }

/* File manager */
.file-table-container { overflow: hidden; min-height: 320px; border: 1px solid var(--line); border-radius: 14px; background: rgba(13, 29, 18, .8); }.file-table { width: 100%; border-collapse: collapse; }.file-table th { padding: 13px 18px; border-bottom: 1px solid var(--line); color: #779a7c; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-align: left; text-transform: uppercase; }.file-table td { padding: 13px 18px; border-bottom: 1px solid rgba(215, 244, 210, .07); font-size: 12px; }.file-table tr:last-child td { border-bottom: 0; }.file-table tbody tr:hover { background: rgba(205, 245, 173, .045); }.file-name { display: flex; align-items: center; gap: 9px; font-weight: 600; }.file-icon { font-size: 16px; }.file-size, .file-hash { color: var(--text-muted); }.file-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }.file-actions { display: flex; gap: 7px; }.empty-state td { padding: 65px 18px; }.empty-placeholder { display: grid; place-items: center; gap: 5px; color: var(--text-muted); text-align: center; }.empty-placeholder p { margin: 0; }.empty-placeholder .icon { font-size: 31px; }.hint { color: #79977d; font-size: 11px; }.status-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 0 3px; color: var(--text-muted); font-size: 11px; }.status-left { display: flex; align-items: center; gap: 9px; }.separator-dot { width: 4px; height: 4px; border-radius: 50%; background: #638568; }
.cape-item-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cape-cover-thumb { display: grid; width: 60px; height: 38px; flex: 0 0 60px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(15, 35, 21, .9); }
.cape-cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cape-cover-thumb span { font-size: 16px; opacity: .86; }
.cape-item-meta { display: grid; min-width: 0; gap: 3px; }
.cape-item-meta strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cape-cover-editor-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: -4px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(15, 35, 21, .76); }
.cape-cover-editor-preview { width: 220px; height: 126px; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface); }
.cape-cover-editor-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* News studio */
.news-dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 21px; padding: 33px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(112deg, rgba(24, 57, 33, .95), rgba(9, 22, 13, .95)), radial-gradient(circle at 84% 9%, rgba(152, 225, 103, .22), transparent 28%); }.section-label { margin: 0 0 9px; color: var(--leaf-bright); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.news-dashboard-header h1 { margin: 0; font: 700 38px/.95 var(--font-display); letter-spacing: -.065em; }.news-dashboard-header p:not(.section-label) { max-width: 490px; margin: 13px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }.news-dashboard-stats { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); max-width: 520px; margin: 0 0 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); gap: 1px; }.news-dashboard-stats div { display: grid; gap: 4px; padding: 15px 18px; background: var(--surface); }.news-dashboard-stats strong { font: 700 23px/1 var(--font-display); letter-spacing: -.04em; }.news-dashboard-stats span { color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 17px; }.news-card { display: flex; flex-direction: column; min-height: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(13, 29, 18, .87); transition: .18s; }.news-card:hover { border-color: var(--line-strong); box-shadow: 0 15px 36px -24px rgba(0, 0, 0, .7); transform: translateY(-3px); }.news-card-featured { border-color: rgba(201, 244, 158, .34); }.news-card-cover { position: relative; height: 155px; overflow: hidden; background: linear-gradient(145deg, #235b2d, #103018); }.news-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }.news-card:hover .news-card-cover img { transform: scale(1.04); }.news-card-cover-placeholder { display: grid; height: 100%; place-items: center; font-size: 30px; }.news-badge { position: absolute; top: 10px; right: 10px; padding: 4px 7px; border: 1px solid rgba(219, 250, 188, .2); border-radius: 999px; background: rgba(7, 18, 10, .78); color: var(--text-muted); font-size: 9px; font-weight: 800; backdrop-filter: blur(4px); }.news-badge-live { color: var(--leaf-bright); }.news-badge-featured { right: auto; left: 10px; background: var(--leaf-bright); color: #16250f; }.news-card-body { display: flex; flex: 1; flex-direction: column; padding: 17px; }.news-card-category { margin: 0; color: var(--leaf-bright); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.news-card-body h3 { margin: 9px 0 7px; font-size: 16px; line-height: 1.25; }.news-card-excerpt { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.48; }.news-card-date { margin: auto 0 0; padding-top: 14px; color: #759379; font-size: 10px; }.news-card-actions { display: flex; gap: 7px; margin-top: 12px; }

/* Article editor */
.news-edit-form-simple { max-width: 1120px !important; margin: 0 auto; }.news-edit-grid { display: grid !important; gap: 17px; }.news-edit-field-full { width: 100%; }.news-edit-field-full .form-group { display: grid; gap: 7px; margin: 0; }.news-edit-field-full input[type="text"] { height: 46px; }.news-edit-settings { display: grid; grid-template-columns: minmax(180px, .42fr) minmax(230px, .58fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(15, 35, 21, .76); }.news-edit-settings .form-group { margin: 0; }.news-switch { display: flex; align-items: center; gap: 11px; min-height: 42px; cursor: pointer; }.news-switch input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--leaf); }.news-switch span { display: grid; gap: 3px; }.news-switch strong { font-size: 12px; }.news-switch small { color: var(--text-muted); font-size: 10px; }.news-publish-setting { padding-top: 1px; }.news-cover-upload-zone { display: flex; align-items: center; gap: 14px; }.news-cover-preview { display: grid; width: 220px; height: 126px; place-items: center; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface); }.news-cover-preview img { width: 100%; height: 100%; object-fit: cover; }.news-cover-actions { display: flex; flex-wrap: wrap; gap: 8px; }.news-edit-textarea { width: 100%; min-height: 470px; padding: 16px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #0e2014; color: var(--text-primary); font-size: 13px; line-height: 1.6; }.news-edit-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 0; }.news-edit-toolbar .tiptap-button { min-width: 31px; height: 31px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-raised); color: var(--text-primary); font-size: 12px; cursor: pointer; }.news-edit-toolbar .tiptap-button:hover { border-color: var(--line-strong); background: var(--surface-hover); }.news-edit-toolbar .tiptap-button-separator { width: 1px; height: 22px; margin: 4px; background: var(--line); }.news-edit-preview { max-height: 500px; margin-top: 8px; padding: 17px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #0e2014; color: var(--text-primary); }.news-edit-preview h1, .news-edit-preview h2, .news-edit-preview h3 { font-family: var(--font-display); }.news-edit-preview p { line-height: 1.6; }.news-edit-preview a { color: var(--leaf-bright); }.news-edit-preview blockquote { margin: 1em 0; padding: 9px 12px; border-left: 3px solid var(--leaf); border-radius: 5px; background: var(--surface-raised); color: var(--text-muted); }.news-edit-preview pre, .news-edit-preview code { border-radius: 5px; background: var(--surface-raised); }.news-edit-preview pre { padding: 12px; overflow: auto; }.news-edit-preview img { max-width: 100%; border-radius: 8px; }.news-edit-form-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Modals and feedback */
.modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3, 9, 5, .7); backdrop-filter: blur(7px); }.modal.hidden { display: none; }.modal-overlay { position: absolute; inset: 0; }.modal-content { position: relative; width: min(500px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 25px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.45); }.modal-content h2 { margin: 0 0 17px; font: 700 22px var(--font-display); letter-spacing: -.04em; }.form-group { display: grid; gap: 7px; margin-bottom: 15px; }.form-actions { display: flex; justify-content: flex-end; gap: 9px; }.config-grid { display: grid; gap: 11px; margin-bottom: 19px; }.config-item { display: grid; gap: 5px; }.config-item label { color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.config-value { padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-raised); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; cursor: copy; }.config-value:hover { border-color: var(--line-strong); }.notification { position: fixed; z-index: 30; top: 18px; right: 18px; max-width: min(420px, calc(100vw - 36px)); padding: 11px 15px; border: 1px solid rgba(208, 249, 174, .25); border-radius: 9px; background: #265831; color: #eefae7; box-shadow: 0 16px 38px rgba(0,0,0,.3); font-size: 12px; }

@media (max-width: 820px) { .app { grid-template-rows: auto 1fr; }.header { min-height: 64px; padding: 12px 16px; }.header-actions .btn:nth-child(-n+2) { display: none; }.main { grid-template-columns: 1fr; }.sidebar { padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--line); }.nav-section { margin: 0; }.nav-section + .nav-section { margin-top: 9px; }.nav-section-title { display: none; }.nav-list { display: flex; flex-wrap: wrap; }.nav-list li { flex: 1; min-width: 120px; }.nav-item { justify-content: center; }.content { padding: 24px 17px; }.news-dashboard-header { align-items: flex-start; flex-direction: column; padding: 25px; }.news-edit-settings { grid-template-columns: 1fr; }.news-cover-upload-zone { align-items: flex-start; flex-direction: column; }.news-dashboard-stats { max-width: 100%; } }
@media (max-width: 560px) { .header-actions .btn { display: none; }.marque-nom { font-size: 9px; }.file-table-container { overflow-x: auto; }.file-table { min-width: 620px; }.status-bar { align-items: flex-start; flex-direction: column; gap: 8px; }.news-dashboard-stats div { padding: 13px 11px; }.news-dashboard-stats strong { font-size: 19px; }.news-edit-form-actions { align-items: stretch; flex-direction: column-reverse; }.news-edit-form-actions .btn { width: 100%; } }

/* Protection contre les dimensions intrinsèques des images importées : une
   couverture ne doit jamais élargir une carte, ni traverser la grille. */
.news-grid { align-items: start; }
.news-card { min-width: 0; max-width: 100%; isolation: isolate; }
.news-card-cover { width: 100%; height: 155px; flex: 0 0 155px; }
.news-card-cover img { display: block; width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; object-fit: cover !important; }
.news-card-body { min-width: 0; }
.news-card-body h3,
.news-card-excerpt { overflow-wrap: anywhere; }