/* =========================================================
   CONNECT.RCI — Design tokens (v3)
   L'orange (#FF5500) est la couleur de l'identité CONNECT.RCI —
   celle du logo 3D fourni par le client — et redevient ici la
   couleur PRINCIPALE du site (boutons, liens actifs, accents de
   marque). Le teal reste présent comme accent SECONDAIRE (numéros,
   anneaux de l'orbite, badges) pour conserver la richesse visuelle
   déjà validée, sans jamais dominer sur l'orange.
   Typographie : Manrope (texte) + DM Mono (labels techniques).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --accent: #FF5500;
    --accent-2: #26D5B6;
    --ink: #091D2B;
    --paper: #F6F7F5;
    --muted: #65737D;
    --line: #DFE5E3;
    --radius: 2px;

    --font-display: 'Manrope', Arial, sans-serif;
    --font-body: 'Manrope', Arial, sans-serif;
    --font-mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id], .card[id], .job-card[id] { scroll-margin-top: 100px; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.12;
    margin: 0 0 0.5em;
    letter-spacing: -0.03em;
    font-weight: 800;
}

h1 { font-size: clamp(2.4rem, 5.1vw, 4.6rem); line-height: 1.05; letter-spacing: -0.055em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.12; letter-spacing: -0.045em; }
h2 em, h3 em { font-style: normal; color: var(--accent); }
h3 { font-size: 1.2rem; font-weight: 700; }

p { margin: 0 0 1em; color: var(--muted); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 max(5vw, 28px);
}

.eyebrow {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
}
.eyebrow.muted { color: #5A6B73; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 14px 19px;
    border: 0;
    border-radius: var(--radius);
    text-decoration: none;
    background: #fff;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: filter 0.15s ease;
    cursor: pointer;
}
.btn:hover { filter: brightness(0.96); }
.btn b { font-size: 1.1rem; font-weight: 700; }
.btn-primary { background: var(--accent); color: var(--ink); box-shadow: none; }
.btn-dark { background: var(--ink); color: #fff; box-shadow: none; }
.text-link {
    font-size: 0.82rem;
    font-weight: 800;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 3px;
    display: inline-block;
}

/* ---------- Header ---------- */
.site-header {
    height: 88px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #EDF0EF;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
.brand img { max-width: 190px; max-height: 56px; transition: transform 0.25s ease, filter 0.25s ease; }
.brand:hover img { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(255,85,0,0.45)); }
.brand-text { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: 0.01em; }
.brand-text span { color: var(--accent); }

nav.main-nav { display: flex; align-items: center; gap: 26px; font-size: 0.82rem; font-weight: 700; }
nav.main-nav a { color: var(--ink); opacity: 0.75; padding: 4px 0; transition: opacity 0.15s ease, color 0.25s ease; }
nav.main-nav a:hover, nav.main-nav a.active { opacity: 1; }
nav.main-nav a.btn-primary,
nav.main-nav a[href$="contact.php"].btn {
    background: var(--accent); color: var(--ink); opacity: 1;
    border-radius: 30px; padding: 11px 22px !important; box-shadow: none;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    transition: border-color 0.25s ease;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: '';
    display: block;
    width: 15px;
    height: 1.5px;
    background: var(--ink);
    margin: 3.5px auto;
    transition: 0.2s, background-color 0.25s ease;
}

/* Variante "transparente" : l'en-tête se fond dans la photo du bandeau
   d'accueil. Le fond reste identique, avant et après défilement — seul un
   léger renfort d'ombre apparaît au défilement pour la lisibilité, jamais
   de changement de couleur. */
.site-header.header-overlay {
    position: fixed; top: 0; left: 0; right: 0;
    background: linear-gradient(180deg, rgba(9,29,43,0.55) 0%, rgba(9,29,43,0.28) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-header.header-overlay.is-scrolled {
    box-shadow: 0 6px 24px rgba(9,29,43,0.25);
}
.site-header.header-overlay nav.main-nav a:not(.btn-primary) { color: #fff; opacity: 0.85; }
.site-header.header-overlay nav.main-nav a:not(.btn-primary):hover,
.site-header.header-overlay nav.main-nav a.active:not(.btn-primary) { opacity: 1; }
.site-header.header-overlay .nav-toggle { border-color: rgba(255,255,255,0.4); }
.site-header.header-overlay .nav-toggle span { background: #fff; }

/* ---------- Hero (bandeau photo sombre, image de fond modifiable en admin) ---------- */
.hero-photo {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    background: linear-gradient(155deg, #0D1F30 0%, var(--ink) 60%, #050B11 100%);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
.hero-photo::before {
    /* Voile sombre : garde le texte lisible quelle que soit la photo envoyée */
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9,29,43,0.72) 0%, rgba(9,29,43,0.88) 100%);
}
.hero-photo::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(255,85,0,0.16), transparent 45%);
}
.hero-photo .container { position: relative; z-index: 1; padding: clamp(90px, 12vw, 150px) max(5vw, 28px) 70px; }
.hero-photo .eyebrow { color: var(--accent); }
.hero-photo h1 { color: #fff; max-width: 18ch; }
.hero-photo h1 em { font-style: normal; color: var(--accent); }
.hero-photo p.lede { color: #C7D2D4; font-size: 1.08rem; max-width: 56ch; }
.hero-photo .hero-cta { display: flex; align-items: center; gap: 28px; margin-top: 30px; flex-wrap: wrap; }
.hero-photo .hero-cta .text-link { color: #fff; border-color: #fff; }

.hero-pills { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 48px; }
.hero-pills .pill {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 30px;
    padding: 10px 20px;
    display: flex; align-items: baseline; gap: 8px;
}
.hero-pills .pill strong { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: 1.05rem; }
.hero-pills .pill span { font-size: 0.76rem; color: #C7D2D4; }

/* Intro simple (pages intérieures) */
.page-hero {
    background: #fff;
    padding: clamp(60px, 10vw, 110px) max(5vw, 28px) 50px;
    border-bottom: 1px solid var(--line);
}
.page-hero .container { max-width: 900px; margin: 0; padding: 0; }
.page-hero p.lede { font-size: 1.05rem; color: #52616A; max-width: 56ch; }

/* ---------- Stats ---------- */
.stats-bar { background: #fff; border-bottom: 1px solid var(--line); }
.stats-bar .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 0;
    padding-bottom: 0;
}
.stat {
    padding: 28px 24px 28px 0;
    display: flex;
    align-items: baseline;
    gap: 13px;
    border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat + .stat { padding-left: 24px; }
.stat .value { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.04em; font-weight: 800; color: var(--ink); }
.stat .label { font-size: 0.72rem; color: var(--muted); max-width: 15ch; line-height: 1.35; }

/* ---------- Sections ---------- */
section { padding: 100px max(5vw, 28px); }
section .container { padding: 0; }
section.tinted { background: #ECF0EE; }
section.dark { background: var(--ink); color: #fff; }
section.dark .eyebrow.muted { color: #B1BEC4; }
section.dark p { color: #B5C1C7; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 46px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 0; }
.section-head .lede { width: 270px; font-size: 0.82rem; color: var(--muted); margin: 0; }

/* Grille de services : cadre plein, façon carnet technique */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.card {
    background: #fff;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 28px;
    min-height: 220px;
    position: relative;
}
.card .icon-badge { display: none; }
.card .num-tag { font: 500 0.7rem var(--font-mono); color: var(--accent-2); }
.card h3 { font-size: 1.15rem; margin: 32px 0 10px; letter-spacing: -0.03em; }
.card p { font-size: 0.8rem; line-height: 1.65; }
section.dark .card, section.tinted .card { background: transparent; border-color: rgba(255,255,255,0.2); }
section.dark .grid-cards, section.tinted .grid-cards { border-color: rgba(255,255,255,0.2); }

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,0.2);
}
.process-steps .step { padding: 26px 25px 5px 0; }
.process-steps .step + .step { padding-left: 25px; border-left: 1px solid rgba(255,255,255,0.2); }
.process-steps .step .num { font: 500 0.7rem var(--font-mono); color: var(--accent-2); display: block; margin-bottom: 8px; }
.process-steps .step h3 { font-size: 1.2rem; margin: 0 0 8px; }
.process-steps .step p { font-size: 0.78rem; color: #B5C1C7; }

.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.client-tile { background: #fff; padding: 26px 22px; text-align: left; }
.client-tile .nom { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.client-tile .secteur { font-size: 0.8rem; color: var(--muted); }

.cta-banner {
    position: relative; background: var(--ink); color: #fff; padding: 90px max(5vw, 28px);
    text-align: left; background-size: cover; background-position: center; overflow: hidden;
}
.cta-banner.has-image::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9,29,43,0.82) 0%, rgba(9,29,43,0.9) 100%);
}
.cta-banner .container { position: relative; z-index: 1; max-width: 1600px; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #B5C1C7; }
.cta-banner .btn-primary { background: var(--accent); color: var(--ink); }

/* Bloc "histoire" façon vignette (à-propos) */
.story-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.story-art {
    min-height: 400px; background: var(--ink); background-size: cover; background-position: center;
    display: grid; place-items: center; position: relative; overflow: hidden;
}
.story-art::before {
    content: ''; position: absolute; width: 380px; height: 380px;
    border: 1px solid rgba(38,213,182,0.45); border-radius: 50%; transform: translate(-30%, -20%);
}
.story-art.has-image::before { display: none; }
.story-art.has-image::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9,29,43,0.35) 0%, rgba(9,29,43,0.6) 100%);
}
.story-panel {
    width: 200px; height: 240px; background: var(--accent); padding: 26px;
    position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.story-panel p { font-size: 1.7rem; font-weight: 800; line-height: 0.9; color: var(--ink); margin: 0; }
.story-panel .accent-i { color: #fff; }
.story-panel span { font: 500 0.68rem/1.4 var(--font-mono); color: var(--ink); }
.signature-line { font: 600 0.72rem var(--font-mono); color: var(--ink); }
.founder-card { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.founder-photo {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.founder-photo-fallback {
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
}


/* ---------- Forms ---------- */
form.form-card {
    background: #fff;
    padding: 30px;
    display: grid;
    gap: 14px;
    box-shadow: 0 10px 28px rgba(9,29,43,0.05);
    border-radius: var(--radius);
}
.form-row label {
    font-size: 0.72rem;
    color: #5D6D75;
    font-weight: 700;
    display: grid;
    gap: 5px;
    margin-bottom: 0;
}
.form-row input, .form-row textarea, .form-row select {
    width: 100%;
    border: 1px solid #D8E1DE;
    background: #FBFCFB;
    padding: 10px;
    font: 0.9rem var(--font-body);
    color: var(--ink);
    border-radius: 1px;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.form-msg { padding: 12px 15px; font-size: 0.8rem; border-radius: var(--radius); margin-bottom: 18px; }
.form-msg.success { background: #D9F5ED; color: #176653; }
.form-msg.error { background: #FFE1DF; color: #A13A35; }
/* Piège anti-robots (honeypot) — invisible pour un visiteur humain */
.trap-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* ---------- Emplois ---------- */
.job-card {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 24px; margin-bottom: 1px; flex-wrap: wrap;
}
.job-card .tag {
    font-family: var(--font-mono); font-size: 0.68rem; background: var(--paper);
    border: 1px solid var(--line); padding: 3px 9px; border-radius: 20px; margin-right: 6px;
}

/* ---------- Footer ---------- */
footer.site-footer {
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 32px max(5vw, 28px);
    font-size: 0.72rem;
    color: var(--muted);
}
footer.site-footer .container {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
footer.site-footer .brand-text { color: var(--ink); }
footer.site-footer .footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
footer.site-footer .footer-social { display: flex; gap: 10px; }
footer.site-footer .footer-social a {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--ink);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
footer.site-footer .footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
footer.site-footer a:hover { text-decoration: underline; }

/* ---------- Accessibilité ---------- */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    background: var(--ink); color: #fff; padding: 12px 18px; font-weight: 700; font-size: 0.85rem;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Menus déroulants d'en-tête ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-panel {
    display: none;
    position: absolute; top: 100%; left: 0;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(9,29,43,0.16);
    padding: 10px; min-width: 240px; margin-top: 10px; border-radius: var(--radius);
}
/* Alignée à droite pour les rubriques proches du bord droit de l'en-tête,
   afin que le panneau ne déborde jamais hors de l'écran. */
.nav-dropdown-panel.nav-dropdown-panel--right { left: auto; right: 0; }
/* L'ouverture/fermeture est pilotée en JavaScript (voir main.js), pas par
   :hover en CSS pur : chaque rubrique gère explicitement son propre menu,
   ce qui évite tout chevauchement avec la rubrique voisine. */
.nav-dropdown-panel.open { display: block; }
/* Le texte du menu déroulant reste toujours vert émeraude foncé sur fond blanc,
   y compris quand l'en-tête transparent force par ailleurs un texte blanc :
   le panneau, lui, a toujours un fond blanc, donc son texte ne doit JAMAIS
   suivre la couleur de l'en-tête — d'où le !important, volontaire ici. */
.nav-dropdown-panel a,
.nav-dropdown-panel .nav-dropdown-more {
    display: block; padding: 9px 12px; font-size: 0.82rem;
    color: #0B6B4F !important; opacity: 1 !important; border-radius: 2px;
}
.nav-dropdown-panel a:hover { background: var(--paper); }
.nav-dropdown-panel .nav-dropdown-more { font-weight: 700; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }

/* ---------- Newsletter ---------- */
.newsletter-band { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 46px max(5vw,28px); }
.newsletter-band .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input[type="email"] {
    border: 1px solid #D8E1DE; background: #fff; padding: 12px 14px; font: 0.9rem var(--font-body);
    border-radius: 1px; min-width: 260px;
}
.newsletter-form input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.newsletter-msg { font-size: 0.85rem; color: var(--muted); margin: 0; }
.newsletter-msg.error { color: #A13A35; }

/* ---------- Bouton WhatsApp flottant ---------- */
.whatsapp-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(9,29,43,0.25);
    transition: transform 0.15s ease;
}
.whatsapp-fab:hover { transform: scale(1.06); }

/* ---------- Bandeau cookies ---------- */
.cookie-banner {
    position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 95;
    max-width: 640px; margin: 0 auto;
    background: var(--ink); color: #DDE6E8;
    padding: 18px 22px; border-radius: var(--radius);
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    box-shadow: 0 14px 34px rgba(9,29,43,0.35);
}
/* Sans cette règle, l'attribut "hidden" posé par le JS n'a aucun effet visuel :
   notre propre "display:flex" ci-dessus (règle d'auteur) l'emporte sinon sur la
   règle par défaut du navigateur pour [hidden] — le bouton semblait alors ne rien faire. */
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 0.8rem; color: #C7D2D4; flex: 1; min-width: 220px; }
.cookie-banner a { color: var(--accent); text-decoration: underline; }
.cookie-banner .btn-primary { padding: 10px 16px; font-size: 0.78rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .site-header { height: 70px; }
    nav.main-nav { position: fixed; top: 70px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; padding: 20px max(5vw,28px); border-bottom: 1px solid var(--line); display: none; gap: 18px; max-height: calc(100vh - 70px); overflow-y: auto; }
    nav.main-nav.open { display: flex; }
    .nav-toggle { display: block; }
    /* Le panneau mobile déplié a toujours un fond blanc, même quand l'en-tête est
       transparent en haut de page — les liens doivent donc rester foncés ici. */
    .site-header.header-overlay nav.main-nav a:not(.btn-primary) { color: var(--ink); opacity: 0.75; }
    .site-header.header-overlay nav.main-nav a:not(.btn-primary):hover,
    .site-header.header-overlay nav.main-nav a.active:not(.btn-primary) { opacity: 1; }
    .nav-dropdown-panel { display: block; position: static; transform: none; box-shadow: none; border: 0; margin: 6px 0 0; padding: 0 0 0 12px; min-width: 0; }
    .hero { grid-template-columns: 1fr; }
    .hero .hero-copy { padding: 60px max(5vw,28px) 40px; }
    .hero-art { min-height: 300px; }
    .stats-bar .container { grid-template-columns: 1fr 1fr; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .section-head .lede { width: auto; }
    .process-steps { grid-template-columns: 1fr 1fr; }
    .story-split { grid-template-columns: 1fr; gap: 40px; }
    footer.site-footer .container { flex-direction: column; align-items: flex-start; }
    .newsletter-band .container { flex-direction: column; align-items: flex-start; }
    .whatsapp-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; }
    .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .orbit { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Apparition légère au défilement ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Transition douce à l'arrivée sur une page ---------- */
html.page-enter body { opacity: 0; transform: translateY(6px); }
html.page-enter-active body { opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }

/* ---------- Admin ---------- */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: #F4F6F5; }
.admin-sidebar { background: var(--ink); color: #DBE5E8; padding: 30px 24px; }
.admin-sidebar .brand-text { color: #fff; margin-bottom: 30px; font-size: 1rem; }
.admin-sidebar a { display: block; color: #DBE5E8; text-decoration: none; padding: 9px 12px; border-radius: 3px; margin-bottom: 2px; font-size: 0.82rem; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,0.1); color: #fff; }
.admin-main { padding: 50px max(5vw, 32px); max-width: 1000px; }
.admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ink); }
.admin-login-wrap .form-card { width: min(420px, 90vw); }
table.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
table.admin-table th, table.admin-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 0.85rem; vertical-align: top; }
table.admin-table th { background: var(--paper); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-unread { background: var(--accent-2); color: var(--ink); font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.inline-actions form { display: inline; }
.inline-actions button { background: none; border: none; color: var(--ink); cursor: pointer; text-decoration: underline; font-size: 0.8rem; opacity: 0.7; }
.inline-actions button:hover { opacity: 1; }
.inline-actions button.danger { color: #A13A35; }