/* ============================================================
   dropfleet.eu — Warm Motion Design System v1.0
   Palette : Orange #FF6B00 · Cacao #563225 · Crème #FFF8F1
   Typo : DM Sans (UI) · Noto Sans Arabic (AR/DA)
   ============================================================ */

:root {
  /* Couleurs principales */
  --color-orange:    #FF6B00;
  --color-orange-2:  #E05E00;
  --color-cacao:     #563225;
  --color-creme:     #FFF8F1;
  --color-espresso:  #120D0A;
  --color-sauge:     #66804F;
  --color-amber:     #F5A524;
  --color-danger:    #D84A3A;
  --color-info:      #5F7F95;

  /* Thème clair (défaut) */
  --bg:              #FFF8F1;
  --bg-card:         #FFFFFF;
  --bg-sidebar:      #563225;
  --text-primary:    #120D0A;
  --text-secondary:  #6B4F3A;
  --text-muted:      #9B7B6A;
  --text-on-orange:  #FFFFFF;
  --border:          #E8D5C4;
  --shadow:          0 2px 8px rgba(86,50,37,.10);
  --shadow-lg:       0 8px 24px rgba(86,50,37,.15);

  /* Typographie */
  --font-ui:         'DM Sans', system-ui, sans-serif;
  --font-ar:         'Noto Sans Arabic', sans-serif;
  --radius:          8px;
  --radius-lg:       12px;
  --radius-pill:     999px;
  --transition:      .18s ease;
}

[data-theme="dark"] {
  --bg:              #1A1008;
  --bg-card:         #241507;
  --bg-sidebar:      #0E0804;
  --text-primary:    #FFF8F1;
  --text-secondary:  #C4A88A;
  --text-muted:      #7A5E48;
  --border:          #3A2010;
}

/* ── Reset minimal ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-ui); background: var(--bg); color: var(--text-primary); line-height: 1.5; }
a { color: var(--color-orange); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }
img { max-width: 100%; display: block; }

/* ── Layout sidebar ──────────────────────────────────────── */
.layout-sidebar { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--bg-sidebar);
  color: #FFF8F1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,248,241,.12);
  font-size: 1.1rem;
  font-weight: 600;
}

.sidebar__logo { font-size: 1.5rem; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1.25rem;
  color: rgba(255,248,241,.75);
  font-size: .9rem;
  transition: var(--transition);
  border-left: 3px solid transparent;
}

.sidebar nav a:hover,
.sidebar nav a.active {
  color: #FFF8F1;
  background: rgba(255,107,0,.15);
  border-left-color: var(--color-orange);
  text-decoration: none;
}

.sidebar__footer {
  margin-top: auto;
  padding: 1rem 1.25rem 0;
  border-top: 1px solid rgba(255,248,241,.12);
  font-size: .82rem;
  color: rgba(255,248,241,.55);
}

.sidebar__logout { display: block; margin-top: .4rem; color: var(--color-amber); }

/* ── Topbar ──────────────────────────────────────────────── */
.main-wrapper { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.5rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.topbar__toggle { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-primary); }
.topbar__title { font-size: 1.05rem; font-weight: 600; flex: 1; color: var(--color-cacao); }
.topbar__actions { display: flex; align-items: center; gap: .75rem; }

/* ── Contenu ─────────────────────────────────────────────── */
.content { flex: 1; padding: 1.75rem; }

/* ── Cards stats ─────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  box-shadow: var(--shadow);
}

.stat-card__value { font-size: 2rem; font-weight: 700; color: var(--color-cacao); }
.stat-card__label { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
.stat-card--orange .stat-card__value { color: var(--color-orange); }
.stat-card--sauge .stat-card__value  { color: var(--color-sauge); }
.stat-card--amber .stat-card__value  { color: var(--color-amber); }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: var(--radius);
  border: none;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn--primary   { background: var(--color-orange); color: #fff; }
.btn--primary:hover { background: var(--color-orange-2); text-decoration: none; }
.btn--cacao     { background: var(--color-cacao); color: #fff; }
.btn--cacao:hover { background: #422619; text-decoration: none; }
.btn--ghost     { background: transparent; border: 1px solid var(--border); color: var(--text-primary); }
.btn--ghost:hover { background: var(--bg); text-decoration: none; }
.btn--danger    { background: var(--color-danger); color: #fff; }
.btn--sm        { padding: .3rem .7rem; font-size: .8rem; }
.btn--lg        { padding: .75rem 1.5rem; font-size: 1rem; }

/* ── Formulaires ─────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .4rem; color: var(--text-secondary); }
.form-control {
  width: 100%;
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color var(--transition);
}
.form-control:focus { outline: none; border-color: var(--color-orange); }
.form-error { font-size: .8rem; color: var(--color-danger); margin-top: .25rem; }

/* ── Tables ──────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
thead th { padding: .75rem 1rem; text-align: left; font-weight: 600; background: var(--bg); border-bottom: 2px solid var(--border); color: var(--text-secondary); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
tbody td { padding: .7rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-primary); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255,107,0,.04); }

/* ── Badges statut ───────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 600;
}
.badge--new       { background: #EBF5FF; color: #1A6FAA; }
.badge--assigned  { background: #FFF3CD; color: #856404; }
.badge--in_transit{ background: #E8F5E9; color: #2E7D32; }
.badge--delivered { background: #E8F5E9; color: #1B5E20; }
.badge--failed    { background: #FFEBEE; color: #C62828; }
.badge--cancelled { background: #F5F5F5; color: #616161; }
.badge--online    { background: #E8F5E9; color: #2E7D32; }
.badge--offline   { background: #F5F5F5; color: #616161; }
.badge--privacy   { background: #FFF3CD; color: #856404; }
.badge--urgent    { background: #FFEBEE; color: #C62828; }
.badge--high      { background: #FFF3CD; color: #856404; }
.badge--normal    { background: #E8F5E9; color: #2E7D32; }
.badge--low       { background: #F5F5F5; color: #616161; }

/* ── Flash messages ──────────────────────────────────────── */
.flash-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; max-width: 360px; }
.flash {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  font-size: .88rem;
  box-shadow: var(--shadow-lg);
  animation: slideIn .2s ease;
}
.flash--success { background: #E8F5E9; border-left: 4px solid #2E7D32; color: #1B5E20; }
.flash--error   { background: #FFEBEE; border-left: 4px solid #C62828; color: #B71C1C; }
.flash--warning { background: #FFF3CD; border-left: 4px solid #F9A825; color: #6D4C00; }
.flash--info    { background: #E3F2FD; border-left: 4px solid #1976D2; color: #0D47A1; }
.flash__close   { background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .6; padding: 0 0 0 .75rem; }

/* ── Lang switcher ───────────────────────────────────────── */
.lang-switcher { display: flex; gap: .25rem; }
.lang-switcher__btn {
  padding: .2rem .45rem;
  border-radius: var(--radius);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.lang-switcher__btn--active { background: var(--color-orange); color: #fff; }

/* ── Pagination ──────────────────────────────────────────── */
.pagination { display: flex; gap: .3rem; margin-top: 1rem; }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: var(--radius);
  font-size: .85rem;
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
}
.pagination a:hover { background: var(--color-orange); color: #fff; border-color: var(--color-orange); }
.pagination .active { background: var(--color-orange); color: #fff; border-color: var(--color-orange); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .layout-sidebar { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -220px; z-index: 200; transition: left var(--transition); height: 100vh; }
  .sidebar--open { left: 0; }
  .topbar__toggle { display: block; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 1rem; }
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }

/* ── Utilitaires ─────────────────────────────────────────── */
.text-muted     { color: var(--text-muted); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.mt-1 { margin-top:.25rem; } .mt-2 { margin-top:.5rem; } .mt-3 { margin-top:1rem; } .mt-4 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.25rem; } .mb-2 { margin-bottom:.5rem; } .mb-3 { margin-bottom:1rem; } .mb-4 { margin-bottom:1.5rem; }
.d-flex { display:flex; } .align-center { align-items:center; } .justify-between { justify-content:space-between; }
.gap-1 { gap:.25rem; } .gap-2 { gap:.5rem; } .gap-3 { gap:1rem; }
.w-100 { width:100%; }

/* ═══════════════════════════════════════════════════════════
   DISPATCH — Additions Phase D
   ═══════════════════════════════════════════════════════════ */

/* Extra badge sizes */
.badge--xs { padding:.15rem .4rem; font-size:.65rem; border-radius:var(--radius-pill); font-weight:600; }
.badge--neutral { background:rgba(107,79,58,.2); color:var(--text-muted); }

/* Button sizes */
.btn--xs { padding:.2rem .55rem; font-size:.72rem; border-radius:var(--radius); }

/* Form control small */
.form-control--sm { padding:.3rem .55rem; font-size:.8rem; }

/* Dark page override — dispatch bypasses layout-sidebar */
.page-dispatch { overflow:hidden; }


/* ═══════════════════════════════════════════════════════════
   PHASE G — Portail client + formulaire public
   ═══════════════════════════════════════════════════════════ */

/* ── Auth cards ────────────────────────────────────────────── */
.page-auth { display:flex; align-items:center; justify-content:center;
             min-height:100vh; background:var(--bg); padding:1rem; }

.auth-card { background:var(--bg-card); border-radius:var(--radius-lg);
             box-shadow:0 4px 24px rgba(0,0,0,.08); padding:2.5rem 2rem;
             width:100%; max-width:420px; }
.auth-card--wide { max-width:520px; }

.auth-card__logo { display:flex; align-items:center; gap:.5rem;
                   justify-content:center; margin-bottom:1.5rem; }
.auth-logo-icon { font-size:2rem; }
.auth-logo-text { font-size:1.4rem; font-weight:700; color:var(--color-cacao); }

.auth-card__title    { font-size:1.4rem; font-weight:700; text-align:center;
                       margin-bottom:1.5rem; color:var(--color-espresso); }
.auth-card__subtitle { font-size:.8rem; text-align:center; color:var(--text-muted);
                       margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
.auth-card__desc     { font-size:.9rem; color:var(--text-muted); text-align:center;
                       margin-bottom:1.25rem; }
.auth-card__links    { text-align:center; margin-top:1.25rem; }
.auth-card__link     { font-size:.85rem; color:var(--color-orange); text-decoration:none; }
.auth-card__link:hover { text-decoration:underline; }

.auth-card__tenant-badge { background:var(--color-orange); color:#fff;
                            text-align:center; border-radius:var(--radius-pill);
                            padding:.35rem .8rem; font-size:.85rem;
                            margin-bottom:1.25rem; }

/* ── Section card ──────────────────────────────────────────── */
.section-card { background:var(--bg-card); border-radius:var(--radius-lg);
                box-shadow:0 2px 12px rgba(0,0,0,.06); padding:1.5rem;
                margin-bottom:1.5rem; }
.section-card__header { display:flex; justify-content:space-between;
                         align-items:center; margin-bottom:1.25rem; }
.section-card__title  { font-size:1.1rem; font-weight:700; color:var(--color-espresso); }

/* ── Stats grid ────────────────────────────────────────────── */
.stats-grid { display:grid; gap:1rem; margin-bottom:1.5rem; }
.stats-grid--3 { grid-template-columns:repeat(3,1fr); }
@media(max-width:600px) { .stats-grid--3 { grid-template-columns:1fr 1fr; } }

.stat-card--warning .stat-card__value { color:var(--color-amber,#E6A817); }
.stat-card--success .stat-card__value { color:#2E7D32; }

/* ── CTA card ──────────────────────────────────────────────── */
.cta-card { background:linear-gradient(135deg,var(--color-orange),var(--color-cacao));
            color:#fff; border-radius:var(--radius-lg);
            padding:1.5rem 2rem; display:flex;
            justify-content:space-between; align-items:center; gap:1rem; }
.cta-card__text h3 { font-size:1.1rem; font-weight:700; margin-bottom:.25rem; }
.cta-card__text p  { font-size:.9rem; opacity:.85; }
@media(max-width:540px){ .cta-card { flex-direction:column; text-align:center; } }

/* ── Empty state ───────────────────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.empty-state__icon { font-size:3rem; display:block; margin-bottom:1rem; }
.empty-state p { margin-bottom:1rem; }

/* ── Orders table ──────────────────────────────────────────── */
.orders-table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.data-table th { text-align:left; padding:.6rem .8rem; font-size:.75rem;
                  text-transform:uppercase; color:var(--text-muted);
                  border-bottom:2px solid var(--border); }
.data-table td { padding:.7rem .8rem; border-bottom:1px solid var(--border);
                  vertical-align:middle; }
.data-table tr:hover td { background:#fafafa; }
.td-truncate { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Filters bar ───────────────────────────────────────────── */
.filters-bar { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center;
               margin-bottom:1.25rem; }
.filters-bar__search { flex:1; min-width:160px; }
.filters-bar__select { min-width:140px; }

/* ── Pagination ────────────────────────────────────────────── */
.pagination__btn { padding:.35rem .7rem; border:1px solid var(--border);
                    border-radius:var(--radius); font-size:.85rem; text-decoration:none;
                    color:var(--text-body); background:var(--bg-card); }
.pagination__btn--active { background:var(--color-orange); color:#fff;
                             border-color:var(--color-orange); }
.pagination__btn:hover:not(.pagination__btn--active) { border-color:var(--color-orange); }

/* ── Badge priority ────────────────────────────────────────── */
.badge--priority-normal  { background:#E8F5E9; color:#2E7D32; }
.badge--priority-urgent  { background:#FFEBEE; color:#C62828; }
.badge--priority-express { background:#FFF3CD; color:#856404; }

/* ── Order detail ──────────────────────────────────────────── */
.order-detail__header { display:flex; justify-content:space-between;
                         align-items:center; margin-bottom:1.5rem; }
.order-detail__actions { display:flex; gap:.5rem; }
.detail-grid { display:grid; gap:1.5rem; grid-template-columns:1fr 1fr; }
@media(max-width:768px) { .detail-grid { grid-template-columns:1fr; } }

.detail-list { display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem;
               font-size:.9rem; }
.detail-list dt { font-weight:600; color:var(--text-muted); font-size:.8rem;
                   text-transform:uppercase; white-space:nowrap; align-self:start;
                   padding-top:.1rem; }
.detail-list dd { color:var(--text-body); }

/* ── Timeline ──────────────────────────────────────────────── */
.timeline { list-style:none; padding-left:1.2rem; }
.timeline__item { position:relative; padding:.5rem 0 .5rem 1rem; border-left:2px solid var(--border); }
.timeline__item:last-child { border-left-color:transparent; }
.timeline__dot { position:absolute; left:-6px; top:.75rem;
                  width:10px; height:10px; border-radius:50%;
                  background:var(--color-orange); border:2px solid #fff; }
.timeline__desc { font-size:.9rem; margin-bottom:.15rem; }
.timeline__time { font-size:.75rem; color:var(--text-muted); }

/* ── Form additions ────────────────────────────────────────── */
.form-fieldset { border:none; padding:0; margin-bottom:1.5rem; }
.form-legend { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
               color:var(--text-muted); font-weight:600; margin-bottom:1rem;
               padding-bottom:.4rem; border-bottom:1px solid var(--border);
               width:100%; }
.form-row { display:grid; gap:1rem; margin-bottom:0; }
.form-row--2 { grid-template-columns:1fr 1fr; }
.form-row--3 { grid-template-columns:1fr 1fr 1fr; }
@media(max-width:540px) {
  .form-row--2, .form-row--3 { grid-template-columns:1fr; }
}
.form-hint { font-size:.78rem; color:var(--text-muted); margin-top:.25rem; display:block; }
.form-actions { display:flex; gap:.75rem; justify-content:flex-end;
                padding-top:1rem; border-top:1px solid var(--border); }
.required { color:var(--color-orange); }

/* ── Public order form ─────────────────────────────────────── */
.page-public-order { background:var(--bg); min-height:100vh;
                      padding:2rem 1rem; display:flex; flex-direction:column;
                      align-items:center; }
.public-order { width:100%; max-width:640px; }
.public-order__header { text-align:center; margin-bottom:2rem; }
.public-order__logo   { max-height:60px; margin-bottom:1rem; }
.public-order__brand  { font-size:1.4rem; font-weight:700; color:var(--color-cacao);
                         margin-bottom:.5rem; }
.public-order__title  { font-size:1.6rem; font-weight:700; color:var(--color-espresso); }
.public-order__card   { background:var(--bg-card); border-radius:var(--radius-lg);
                         box-shadow:0 4px 24px rgba(0,0,0,.08); padding:2rem; }
.public-order__card--confirm { text-align:center; padding:3rem 2rem; }
.public-order__footer { margin-top:2rem; font-size:.8rem; color:var(--text-muted);
                         text-align:center; }

/* Confirm page */
.confirm-icon  { font-size:4rem; margin-bottom:1rem; }
.confirm-title { font-size:1.8rem; font-weight:700; margin-bottom:.75rem; }
.confirm-ref   { font-size:1rem; margin-bottom:1rem; }
.confirm-msg   { color:var(--text-muted); margin-bottom:2rem; line-height:1.6; }

/* ── Btn additions ─────────────────────────────────────────── */
.btn--lg  { padding:.7rem 1.6rem; font-size:1rem; }
.btn--full { width:100%; }


/* ═══════════════════════════════════════════════════════════
   PHASE H — Landing page & Pricing
   ═══════════════════════════════════════════════════════════ */

/* ── Nav ────────────────────────────────────────────────────── */
.landing-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem; position:sticky; top:0; z-index:100;
  background:rgba(255,248,241,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.landing-nav__brand { font-size:1.2rem; font-weight:700; color:var(--color-cacao); text-decoration:none; }
.landing-nav__brand strong { color:var(--color-orange); }
.landing-nav__links { display:flex; align-items:center; gap:1.25rem; }
.landing-nav__links a { font-size:.9rem; color:var(--color-cacao); text-decoration:none; }
.landing-nav__links a:hover { color:var(--color-orange); }
@media(max-width:600px){
  .landing-nav__links a:not(.btn){ display:none; }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  align-items:center; padding:5rem 4rem 4rem;
  max-width:1200px; margin:0 auto;
}
@media(max-width:900px){ .hero{ grid-template-columns:1fr; padding:3rem 1.5rem 2rem; } }
@media(max-width:900px){ .hero__visual{ display:none; } }

.hero__badge {
  display:inline-block; background:rgba(255,107,0,.12); color:var(--color-orange);
  font-size:.8rem; font-weight:600; padding:.3rem .8rem; border-radius:var(--radius-pill);
  margin-bottom:1.25rem;
}
.hero__title { font-size:clamp(2rem,4vw,3.2rem); font-weight:700; line-height:1.15; color:var(--color-espresso); margin-bottom:1rem; }
.hero__accent { color:var(--color-orange); }
.hero__sub { font-size:1.1rem; color:var(--text-secondary); margin-bottom:2rem; line-height:1.6; max-width:500px; }
.hero__cta { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.hero__note { font-size:.8rem; color:var(--text-muted); }

/* Mock screen */
.hero__screen {
  background:var(--color-espresso); border-radius:12px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25); max-width:400px; margin:0 auto;
}
.mock-topbar {
  background:#1e1410; padding:.6rem 1rem; display:flex; align-items:center; gap:.4rem;
}
.mock-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.mock-dot--red    { background:#FF5F57; }
.mock-dot--yellow { background:#FEBC2E; }
.mock-dot--green  { background:#28C840; }
.mock-title { margin-left:.5rem; font-size:.75rem; color:#666; }
.mock-body { padding:1.25rem; display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.mock-stat { background:#1e1410; border-radius:8px; padding:.75rem 1rem; }
.mock-stat--orange .mock-stat__n { color:var(--color-orange); }
.mock-stat--green  .mock-stat__n { color:#28C840; }
.mock-stat__n { font-size:1.6rem; font-weight:700; color:#fff; display:block; }
.mock-stat span:last-child { font-size:.7rem; color:#666; }
.mock-map {
  grid-column:1/-1; background:#1e1410; border-radius:8px; padding:.75rem 1rem;
  font-size:.8rem; color:#888; text-align:center;
}

/* ── Social proof ───────────────────────────────────────────── */
.social-proof { background:var(--color-cacao); padding:1.5rem 2rem; }
.social-proof__items {
  max-width:900px; margin:0 auto;
  display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; gap:1.5rem;
}
.social-proof__item { text-align:center; color:#fff; }
.social-proof__item strong { display:block; font-size:1.4rem; color:var(--color-orange); }
.social-proof__item span   { font-size:.8rem; opacity:.7; }
.social-proof__sep { width:1px; height:40px; background:rgba(255,255,255,.2); }
@media(max-width:500px){ .social-proof__sep{ display:none; } }

/* ── Features ───────────────────────────────────────────────── */
.features { padding:5rem 2rem; max-width:1200px; margin:0 auto; }
.features__header { text-align:center; margin-bottom:3rem; }
.features__header h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; color:var(--color-espresso); }
.features__header p  { color:var(--text-muted); margin-top:.5rem; font-size:1rem; }
.features__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; }

.feature-card {
  background:var(--bg-card); border-radius:var(--radius-lg); padding:1.5rem;
  border:1px solid var(--border); transition:box-shadow var(--transition), transform var(--transition);
}
.feature-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.feature-card__icon  { font-size:2rem; margin-bottom:.75rem; }
.feature-card__title { font-size:1rem; font-weight:700; color:var(--color-cacao); margin-bottom:.5rem; }
.feature-card__desc  { font-size:.875rem; color:var(--text-muted); line-height:1.5; }

/* ── Pricing preview & full ─────────────────────────────────── */
.pricing-preview {
  background:var(--bg); padding:5rem 2rem;
}
.pricing-preview__header { text-align:center; margin-bottom:3rem; }
.pricing-preview__header h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; }
.pricing-preview__header p  { color:var(--text-muted); margin-top:.5rem; }
.pricing-preview__cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; max-width:960px; margin:0 auto; }
.pricing-preview__note { text-align:center; margin-top:2rem; font-size:.875rem; color:var(--text-muted); }

.pricing-hero { text-align:center; padding:5rem 2rem 2rem; }
.pricing-hero h1 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; color:var(--color-espresso); }
.pricing-hero p  { color:var(--text-muted); font-size:1.1rem; margin-top:.75rem; }
.pricing-full { padding:2rem; }
.pricing-full__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; max-width:1000px; margin:0 auto; }
.pricing-full__note { text-align:center; margin-top:2rem; font-size:.8rem; color:var(--text-muted); max-width:700px; margin-left:auto; margin-right:auto; }

/* Plan cards */
.plan-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:2rem 1.5rem; display:flex; flex-direction:column; gap:.75rem; position:relative;
}
.plan-card--highlighted {
  border-color:var(--color-orange); box-shadow:0 0 0 2px rgba(255,107,0,.2);
}
.plan-card__badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--color-orange); color:#fff; font-size:.75rem; font-weight:700;
  padding:.25rem .8rem; border-radius:var(--radius-pill); white-space:nowrap;
}
.plan-card__name   { font-size:1.1rem; font-weight:700; color:var(--color-cacao); }
.plan-card__price  { margin-bottom:.5rem; }
.plan-card__amount { font-size:2rem; font-weight:700; color:var(--color-espresso); }
.plan-card__period { font-size:.85rem; color:var(--text-muted); margin-left:.25rem; }
.plan-card__features { list-style:none; padding:0; margin:0 0 auto; display:flex; flex-direction:column; gap:.4rem; }
.plan-card__features li { font-size:.875rem; color:var(--text-secondary); }
.plan-card .btn { margin-top:1.5rem; }

/* ── Landing CTA section ─────────────────────────────────────── */
.landing-cta {
  background:linear-gradient(135deg,var(--color-orange),var(--color-cacao));
  color:#fff; text-align:center; padding:5rem 2rem;
}
.landing-cta h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; margin-bottom:1rem; }
.landing-cta p  { opacity:.85; margin-bottom:2rem; font-size:1.05rem; }

/* ── Footer landing ──────────────────────────────────────────── */
.landing-footer {
  background:var(--color-espresso); color:#fff; padding:2rem;
  text-align:center; display:flex; flex-direction:column; gap:1rem; align-items:center;
}
.landing-footer__brand { font-size:1.1rem; font-weight:700; }
.landing-footer__brand strong { color:var(--color-orange); }
.landing-footer__links { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.landing-footer__links a { color:rgba(255,255,255,.6); font-size:.85rem; text-decoration:none; }
.landing-footer__links a:hover { color:#fff; }
.landing-footer__copy { font-size:.75rem; color:rgba(255,255,255,.4); }

/* Éviter que le layout base ne force un bg */
.page-landing body, .page-pricing body { background:var(--bg); }

/* ════════════════════════════════════════════════════════════════
   PHASE H — Notifications in-app
   ════════════════════════════════════════════════════════════════ */

/* ── Cloche dans la topbar ── */
.notif-bell            { position: relative; }
.notif-bell__btn       { background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: .35rem .45rem; border-radius: 8px; line-height: 1; position: relative; transition: background .15s; }
.notif-bell__btn:hover { background: var(--bg-subtle, #f3f4f6); }
.notif-bell__badge     { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: #ef4444; color: #fff; font-size: .6rem; font-weight: 700; border-radius: 99px; line-height: 16px; text-align: center; }

/* ── Dropdown ── */
.notif-dropdown        { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.12); z-index: 999; overflow: hidden; }
.notif-dropdown__header{ display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--border, #e5e7eb); font-size: .8rem; font-weight: 600; color: var(--text, #111); }
.notif-dropdown__read-all{ background: none; border: none; cursor: pointer; font-size: .75rem; color: var(--color-primary, #FF6B00); font-weight: 600; }
.notif-dropdown__read-all:hover { text-decoration: underline; }

/* ── Liste ── */
.notif-list            { list-style: none; max-height: 340px; overflow-y: auto; padding: 0; margin: 0; }
.notif-empty           { padding: 1.5rem; text-align: center; color: var(--text-muted, #9ca3af); font-size: .85rem; }
.notif-item            { border-bottom: 1px solid var(--border, #f3f4f6); }
.notif-item--unread    { background: #fff8f1; }
.notif-item__link      { display: flex; flex-direction: column; gap: 2px; padding: .65rem 1rem; text-decoration: none; color: inherit; transition: background .1s; }
.notif-item__link:hover{ background: var(--bg-subtle, #f9fafb); }
.notif-item__title     { font-size: .85rem; font-weight: 600; color: var(--text, #111); line-height: 1.3; }
.notif-item--unread .notif-item__title { color: var(--color-primary, #FF6B00); }
.notif-item__body      { font-size: .78rem; color: var(--text-muted, #6b7280); }
.notif-item__time      { font-size: .7rem; color: var(--text-muted, #9ca3af); margin-top: 2px; }

/* ── Toast ── */
.notif-toast           { position: fixed; bottom: 24px; right: 24px; background: #1a1a2e; color: #fff; padding: .7rem 1.2rem; border-radius: 10px; font-size: .85rem; font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 9999; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; pointer-events: none; }
.notif-toast--show     { opacity: 1; transform: translateY(0); }


/* ── Cookie banner ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--bg,#fff);border-top:1px solid var(--border,#e5e7eb);padding:.875rem 1.5rem;z-index:9998;box-shadow:0 -4px 16px rgba(0,0,0,.08);}
.cookie-banner__content{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.cookie-banner__text{font-size:.875rem;color:var(--text,#374151);margin:0;}
.cookie-banner__actions{display:flex;gap:.5rem;flex-shrink:0;}