/* Base */
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg)}

/* Topbars */
.topbar-admin,.topbar-client{position:sticky;top:0;z-index:50;background:#0f172a;color:#fff}
.topbar-client{background:#0f172a}
.topbar-admin{background:#111827}
.topbar-inner{display:flex;gap:12px;align-items:center;min-height:48px;padding:10px 14px}
.topbar-spacer{margin-left:auto}

/* Layout grille */
.page-wrap{display:grid;grid-template-columns:1fr;gap:16px;padding:16px}
.page-wrap.has-sidebar{grid-template-columns:220px 1fr}
@media (max-width: 992px){ .page-wrap{grid-template-columns:1fr} .page-aside{order:-1} }
.page-aside .nav, .page-aside .card{background:var(--color-surface);border-radius:var(--radius);box-shadow:0 1px 3px rgba(3,7,18,.08)}
.page-content .card{background:var(--color-surface);border-radius:var(--radius);box-shadow:0 1px 3px rgba(3,7,18,.08);padding:14px}

/* Titres */
h1{font-size:var(--text-h1);margin:0 0 10px}
h2{font-size:var(--text-h2);margin:0 0 10px}
h3{font-size:var(--text-h3);margin:12px 0 8px}

/* Boutons (variants) */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--button-height);padding:0 14px;border-radius:var(--radius);border:1px solid transparent;font-weight:600;text-decoration:none;cursor:pointer;line-height:1;user-select:none}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--color-primary);color:#fff;border-color:transparent}
.btn-primary:hover{filter:brightness(0.96)}
.btn-secondary{background:#e5e7eb;color:#111827;border-color:#d1d5db}
.btn-secondary:hover{background:#dfe3e8}
.btn-danger{background:var(--color-danger);color:#fff;border-color:transparent}
.btn-link{background:transparent;border-color:transparent;color:var(--color-primary);height:auto;padding:0}

/* Form fields */
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;height:var(--field-height);padding:0 10px;border:1px solid #d1d5db;border-radius:var(--radius);background:#fff;
}
textarea{min-height:calc(var(--field-height) * 2);padding:8px 10px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(15,118,110,.2);border-color:var(--color-primary)}

/* Aides/erreurs */
.form-help{font-size:12px;color:#6b7280;margin-top:4px}
.form-error{font-size:13px;color:#b91c1c;margin-top:4px}

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);overflow:hidden}
th,td{padding:10px 12px;border-bottom:1px solid #eef1f4;font-size:14px}
thead th{background:var(--color-tablehead);text-align:left;color:#0b1020;font-weight:700}
tbody tr:hover{background:#fafafa}

/* Nav (menu gauche paramètres) */
.nav{display:flex;flex-direction:column;padding:8px}
.nav a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:#0b1020}
.nav a.active,.nav a:hover{background:#eef2f7}

a{color:var(--color-link);text-decoration:none} a:hover{text-decoration:underline}

/* Variantes 'outline' (compat Bootstrap-like) */
.btn-outline-primary{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}
.btn-outline-primary:hover{background:rgba(15,118,110,.08)}
.btn-outline-danger{background:transparent;border:1px solid var(--color-danger);color:var(--color-danger)}
.btn-outline-danger:hover{background:rgba(220,38,38,.08)}
.btn-secondary{background:#e5e7eb;color:#111827;border-color:#d1d5db} /* déjà présent, rappel */

/* Tailles */
.btn-sm{height:calc(var(--button-height) - 6px); padding:0 10px; font-size:13px; line-height:1}

/* Sélecteurs de secours pour “delete” isolés */
button.delete, a.delete,
button[data-action="delete"], a[data-action="delete"]{
  border:1px solid var(--color-danger);
  color:var(--color-danger);
  background:transparent;
  border-radius:var(--radius);
  height:var(--button-height);
  display:inline-flex;align-items:center;justify-content:center;padding:0 12px;
}

/* Height overrides for buttons */
button.btn, a.btn, .btn { height: var(--button-height); line-height: 1; }
.btn-sm { height: calc(var(--button-height) - 6px); padding: 0 10px; font-size: 13px; }

/* Ensure outline variants keep the computed height */
a.btn.btn-outline-primary, button.btn.btn-outline-primary,
a.btn.btn-outline-danger,  button.btn.btn-outline-danger {
  height: var(--button-height);
}

/* Common delete affordances */
a.delete, button.delete,
a[data-action="delete"], button[data-action="delete"] {
  height: var(--button-height);
}

/* Topbar brand + nav */
.topbar-inner .brand{font-weight:700;text-decoration:none;color:#fff}
.topnav{display:flex;gap:12px;margin-left:16px}
.topnav a{color:#e5e7eb;text-decoration:none;font-weight:600}
.topnav a:hover{text-decoration:underline}

/* --- Ajustement sidebar client (menu gauche) --- */
.client-sidebar {
  padding-left: 1rem;   /* décale le contenu du menu */
}

/* Ajustement fin du menu gauche (pages client Projets) */
.client-sidebar {
  padding-left: 1.25rem;   /* était 1rem */
  margin-left: 0.5rem;     /* compense l'effet "bord écran" */
}

/* Limite ultra-ciblée : premier col de la ligne principale */
main .row > .client-sidebar:first-child {
  padding-left: 1.25rem;
  margin-left: 0.5rem;
}


/* === Layout commun : sidebar sticky === */
.page-wrap.has-sidebar{display:grid;grid-template-columns:260px 1fr;gap:16px}
.page-aside{align-self:start}
.page-aside > *:first-child{position:sticky;top:var(--sticky-top,72px);z-index:3}

@media (max-width: 991.98px){
  .page-wrap.has-sidebar{grid-template-columns:1fr}
  .page-aside > *:first-child{position:static;top:auto}
}

/* === Sticky sidebar (commun) : robuste === */
.page-wrap.has-sidebar{display:grid;grid-template-columns:260px 1fr;gap:16px}
.page-aside{align-self:start}
/* on colle l'enfant direct si le contenu est enveloppé, sinon on colle .page-aside elle-même */
.page-aside, .page-aside > *:first-child { position: sticky; top: var(--sticky-top,72px); z-index: 3; }

@media (max-width: 991.98px){
  .page-wrap.has-sidebar{grid-template-columns:1fr}
  .page-aside, .page-aside > *:first-child { position: static; top:auto }
}

/* === Ajustements lisibilité communs === */

/* Cas avec sidebar (pages avec menu gauche) */
.page-wrap.has-sidebar{
  grid-template-columns:220px 1fr; /* menu un peu moins large qu’avant (260→220) */
  gap:24px; /* plus d’espace entre menu et contenu */
}

/* Cas sans sidebar (page-wrap sans .has-sidebar) */
.page-wrap:not(.has-sidebar) .page-content{
  max-width: 1400px;   /* limite largeur pour éviter plein écran */
  min-width: 900px;																																				  margin: 0 auto;      /* centre le contenu */
  padding-left: 2cm;   /* marges latérales (~2cm) */
  padding-right: 2cm;
}

@media (max-width: 991.98px){
  /* Sur mobile : on supprime les marges trop larges */
  .page-wrap:not(.has-sidebar) .page-content{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* === Ajustement marges contenu quand sidebar présente === */
.page-wrap.has-sidebar .page-content{
  padding-left: 16px;   /* marge interne à gauche */
  padding-right: 16px;  /* marge interne à droite */
}

@media (max-width: 991.98px){
  /* Sur mobile : on garde léger */
  .page-wrap.has-sidebar .page-content{
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* === Ajustement renforcé des marges contenu quand sidebar présente === */
.page-wrap.has-sidebar .page-content{
  padding-left: 32px;   /* marge interne à gauche */
  padding-right: 32px;  /* marge interne à droite */
}

@media (max-width: 991.98px){
  /* Sur mobile, on reste modéré */
  .page-wrap.has-sidebar .page-content{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* === Espacement vertical entre sections de contenu === */
.page-content > .card,
.page-content > section,
.page-content > div.card {
  margin-bottom: 24px;   /* espace entre les blocs */
}

.page-content > .card:last-child,
.page-content > section:last-child {
  margin-bottom: 0; /* évite l'espace superflu en bas de page */
}

/* === Espacement renforcé pour les sections principales (ex: Projet) === */
.page-content > section.card {
  margin-top: 40px;   /* espace avant chaque grande section */
  margin-bottom: 40px;
}

.page-content > section.card:first-child {
  margin-top: 0; /* pas de marge au tout début */
}

/* === Espacement renforcé des sections principales (pages avec menu gauche) === */
.page-wrap.has-sidebar .page-content .proj-main {
  /* on prend la main sur l’ancien gap local */
  gap: 32px !important; /* était 14px inline dans certaines pages */
}

/* gros écart uniquement entre sections de premier niveau */
.page-wrap.has-sidebar .page-content .proj-main > section.card + section.card {
  margin-top: 48px !important;
}

/* sécurité : on enlève les margins parasites au premier bloc */
.page-wrap.has-sidebar .page-content .proj-main > section.card:first-child {
  margin-top: 0 !important;
}

/* === Pack communication : miniatures contenues === */
.page-content .proj-main #tournee .card img {
  max-width: 200px;
  max-height: 150px;
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  margin: 0 auto; /* centré dans la carte */
}

/* === Pack communication : grille de vignettes 1→2→3 colonnes === */
.pack-grid {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  grid-template-columns: 1fr;                /* mobile: 1 colonne */
}
@media (min-width: 640px) {
  .pack-grid { grid-template-columns: repeat(2, 1fr); }  /* tablette: 2 */
}
@media (min-width: 1200px) {
  .pack-grid { grid-template-columns: repeat(3, 1fr); }  /* desktop: 3 */
}

/* Cartes du pack : mise au propre */
.pack-grid .card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Miniatures : contenues, propres, sans déformer */
.pack-grid .card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Ligne titre + bouton dans la carte */
.pack-grid .card .row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

/* === Topbar sticky + compact (centralisé) === */
/* NB: on ne touche PAS à la couleur de fond existante */
header.topbar-client,
header.topbar-admin{
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .2s ease, transform .2s ease;
}

header.topbar-client .topbar-inner,
header.topbar-admin  .topbar-inner{
  transition: padding .2s ease;
}

/* État compact: réduit légèrement le padding + ajoute une ombre douce */
header.topbar-client.is-compact,
header.topbar-admin.is-compact{
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

header.topbar-client.is-compact .topbar-inner,
header.topbar-admin.is-compact  .topbar-inner{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* === Topbar : compact dès le premier pixel de scroll (héritage legacy) === */
header.topbar-client .topbar-inner,
header.topbar-admin  .topbar-inner{
  transition: padding .2s ease, box-shadow .2s ease;
}

/* Quand le body porte __compact, on réduit verticalement et on ajoute une ombre douce */
body.__compact header.topbar-client,
body.__compact header.topbar-admin{
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
body.__compact header.topbar-client .topbar-inner,
body.__compact header.topbar-admin  .topbar-inner{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
/* === Compat utilitaires Bootstrap (scope layout central) ================== */
.page .d-flex{display:flex}
.page .flex-wrap{flex-wrap:wrap}
.page .justify-content-between{justify-content:space-between}
.page .align-items-center{align-items:center}
/* ======================================================================== */
/* === Compat utilitaires Bootstrap (scope layout central) ================== */
.page .d-flex{display:flex !important}
.page .flex-wrap{flex-wrap:wrap !important}
.page .justify-content-between{justify-content:space-between !important}
.page .align-items-center{align-items:center !important}

/* Rangées d'actions dans les tableaux (Admin & Client) */
.page td .actions-row,
.page td .d-flex{display:flex !important; gap:6px; align-items:center}
.page td .actions-row form,
.page td .d-flex form{margin:0}
/* ======================================================================== */
/* === ARS: uniformiser comportement topbar — Option B (2025-09-29) ===
   Désactive le sticky du 1er bloc de .page-aside pour éviter l'effet "persistance" de la topbar.
   Ainsi, la topbar quitte l'écran immédiatement au scroll, partout. */
.page-aside > *:first-child{
  position: static !important;
  top: auto !important;
}
/* === ARS: Option B (complément) — neutraliser tous les sticky latéraux === */
.proj-nav-inner,
.sidebar {
  position: static !important;
  top: auto !important;
}
/* Neutraliser les sticky inline dans les sidebars */
.page-aside *[style*="position:sticky"],
.page-aside *[style*="position: sticky"]{
  position: static !important;
  top: auto !important;
}
/* === ARS: Topbar non-sticky + sidebars sticky (final override) === */

/* 1) TOPBAR : ne suit pas le défilement */
header.topbar-admin,
header.topbar-client{
  position: static !important;
  top: auto !important;
}

/* 2) SIDEBARS : suivent le défilement */
.page-wrap .page-aside > *:first-child{
  position: sticky !important;
  top: var(--sticky-top,72px) !important;
  z-index: 3 !important;
}
.page-wrap .proj-nav-inner{
  position: sticky !important;
  top: var(--sticky-top,72px) !important;
  z-index: 3 !important;
}
.page-wrap .sidebar{
  position: sticky !important;
  top: var(--sticky-top,72px) !important;
  z-index: 3 !important;
}


/* Remplacement complet du champ file natif (Chrome/Edge/Safari) */
.input-file-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.input-file-wrapper input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.input-file-wrapper .btn-file-label {
  display: inline-block;
  background: var(--color-primary, #0f766e);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.input-file-wrapper .btn-file-label:hover {
  filter: brightness(0.95);
}