/* ═══════════════════════════════════════════════════
   CARDHUB PRO — THÈME 3A PLUS SARL
   Charte graphique officielle — Version 1.0
   ═══════════════════════════════════════════════════ */

:root {
  /* Couleurs marque */
  --brand-blue:         #1277BD;
  --brand-blue-light:   #E8F4FB;
  --brand-blue-dark:    #0A5A8A;
  --brand-orange:       #EE7E23;
  --brand-orange-light: #FFF3E8;
  --brand-orange-dark:  #C96A18;
  --brand-gray:         #666666;
  --brand-dark:         #0D1B2A;

  /* Interface */
  --color-bg:           #F8FAFC;
  --color-surface:      #FFFFFF;
  --color-border:       #E5E7EB;
  --color-border-dark:  #D1D5DB;
  --color-text:         #111827;
  --color-text-muted:   #6B7280;
  --color-text-light:   #9CA3AF;

  /* Typographies */
  --font-title:         'Barlow Condensed', sans-serif;
  --font-body:          'Barlow', sans-serif;

  /* Espacements */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

/* Typographie */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
  line-height: 1.2;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }

/* Liens */
a { color: var(--brand-blue); text-decoration: none; }
a:hover { color: var(--brand-blue-dark); text-decoration: underline; }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary   { background: var(--brand-blue);   color: #fff; }
.btn-primary:hover { background: var(--brand-blue-dark); color: #fff; text-decoration: none; }
.btn-accent    { background: var(--brand-orange); color: #fff; }
.btn-accent:hover { background: var(--brand-orange-dark); color: #fff; text-decoration: none; }
.btn-outline   { background: transparent; color: var(--brand-blue); border: 1.5px solid var(--brand-blue); }
.btn-outline:hover { background: var(--brand-blue-light); text-decoration: none; }
.btn-sm  { padding: 6px 12px; font-size: 0.8rem; }
.btn-lg  { padding: 12px 24px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }

/* Formulaires */
.form-group { margin-bottom: 1.2rem; }
.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(18,119,189,0.15);
}
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 36px; }

/* Cartes UI */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

/* Badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.badge-blue    { background: var(--brand-blue-light);   color: var(--brand-blue-dark); }
.badge-orange  { background: var(--brand-orange-light); color: var(--brand-orange-dark); }
.badge-gray    { background: #F3F4F6; color: var(--brand-gray); }
.badge-success { background: #D1FAE5; color: #065F46; }
.badge-danger  { background: #FEE2E2; color: #991B1B; }

/* Alertes */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  border-left: 4px solid transparent;
  margin-bottom: 1rem;
}
.alert-info    { background: var(--brand-blue-light);   border-color: var(--brand-blue);   color: var(--brand-blue-dark); }
.alert-warning { background: var(--brand-orange-light); border-color: var(--brand-orange); color: var(--brand-orange-dark); }
.alert-success { background: #D1FAE5; border-color: #10B981; color: #065F46; }
.alert-danger  { background: #FEE2E2; border-color: #EF4444; color: #991B1B; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--color-bg);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
}
.table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}
.table tr:hover td { background: var(--brand-blue-light); }

/* Sidebar admin */
.sidebar {
  width: 220px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.sidebar-logo {
  padding: 18px 16px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-blue);
  letter-spacing: 0.05em;
}
.sidebar-logo span { color: var(--brand-orange); }
.sidebar-nav { padding: 10px 8px; flex: 1; overflow-y: auto; }
.nav-section {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 8px 5px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  text-decoration: none;
  margin-bottom: 2px;
}
.nav-item:hover {
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  text-decoration: none;
}
.nav-item.active {
  background: var(--brand-blue);
  color: #ffffff;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Layout principal */
.main-layout { margin-left: 220px; min-height: 100vh; }
.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}
.page-content { padding: 24px; }

/* Stats KPI */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.stat-label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.stat-value { font-family: var(--font-title); font-size: 2rem; font-weight: 700; color: var(--brand-blue); line-height: 1; }
.stat-sub   { font-size: 0.75rem; color: var(--color-text-light); margin-top: 4px; }

/* Sélecteur de template dans les formulaires */
.template-opt:has(+ input[type="radio"]:checked),
input[type="radio"]:checked + .template-opt { border-color: var(--brand-blue) !important; }

/* La barre supérieure n'avait pas de retour à la ligne : sur téléphone, le titre
   et les boutons se poussaient hors de l'écran au lieu de s'empiler. */
.topbar { flex-wrap: wrap; gap: 10px; }

/* Responsive mobile */
@media (max-width: 768px) {
  /* La barre latérale sort de l'écran et revient au clic. Sa largeur est plafonnée
     en vw : à 220px fixes sur un écran de 320px elle couvrait presque toute la page,
     y compris le bouton qui sert à la refermer. */
  .sidebar { width: min(220px, 78vw); transform: translateX(-100%); transition: transform 0.25s; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .main-layout { margin-left: 0; }
  .page-content { padding: 16px; }
  .topbar { padding: 10px 14px; }
  #sidebar-toggle { display: block !important; }

  /* `repeat(2, 1fr)` était imposé ici : à 320px les tuiles tombaient à 137px de
     large et le chiffre en 2rem débordait. La règle de base en auto-fit choisit
     déjà le bon nombre de colonnes à chaque largeur, on la laisse faire. */

  /* Neuf tableaux du back-office vivent dans un .card. Sans cette règle, un
     tableau de cinq colonnes fait défiler la PAGE entière horizontalement.
     Ici le défilement reste à l'intérieur de la carte. */
  .card { overflow-x: auto; }

  /* iOS zoome automatiquement à la mise au point d'un champ dont le texte fait
     moins de 16px, puis ne dézoome pas. 0.95rem valait 15.2px : chaque clic dans
     un formulaire décalait la page. */
  .form-control { font-size: 16px; }

  /* Cible tactile : 9px de padding donnaient des boutons de 38px de haut,
     sous le minimum utilisable au doigt. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}

/* ── Écrans « formulaire + aperçu » ────────────────────────────
   Cinq vues affichaient deux colonnes dont une en pixels fixes, écrites en
   style inline (1fr 380px, 1fr 340px, 1fr 280px). Une largeur fixe impose un
   minimum d'environ 700 px : sur téléphone la page débordait horizontalement
   et le formulaire devenait inutilisable. Un style inline ne pouvant pas
   contenir de media query, la largeur latérale passe par une variable CSS.
   En dessous de 900 px les deux colonnes s'empilent : l'aperçu se retrouve
   sous le formulaire, ce qui est l'ordre de lecture attendu sur mobile. */
.split-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--split-side, 380px);
    gap: var(--split-gap, 24px);
    align-items: start;
}
@media (max-width: 900px) {
    .split-preview { grid-template-columns: minmax(0, 1fr); }
}