/* -------------------------------
   STRUCTURE GLOBALE (APP)
----------------------------------*/
:root{
  --maxw: 1000px;
  --radius: 10px;
  --card-bg: #fff;
  --card-bd: #e5e7eb;
  --card-shadow: 0 2px 10px rgba(0,0,0,.12);

  /* PALETTE BILLUP (teal) */
  --brand: #eae6e1;        /* bandeau / thème principal */
  --brand-dark: #5a9897;   /* hover/ombres */
  --brand-darker: #477d7c; /* textes sur fond blanc actif */

  /* boutons du bandeau (dans le nav) */
  --accent: #5a9897;
  --accent-dark: #477d7c;

  --danger: #e74c3c;
  --danger-dark: #c0392b;
}

*{ box-sizing: border-box; }

html{
  scrollbar-gutter: stable both-edges;
  overflow-y: scroll;
  scroll-padding-top: var(--header-h, 220px); /* évite que les ancres soient masquées */
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #73b0af; /* ✅ fond vert conservé (app) */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* -------------------------------
   ENTÊTE (logo + bandeau)
----------------------------------*/
.site-header{
  width: 100%;
  background: transparent;
  position: static;
  z-index: 1000;
}

.header-fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* ✅ On conserve ton layout global du header */
.header-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  gap: 16px;               /* un peu plus d’air */
  background: #73b0af;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ✅ Bloc logo + filtres sous le logo */
.brand-block{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* mets center si tu veux logo+filtres centrés */
  gap: 10px;
  flex: 0 0 auto;
}

/* Le lien logo reste identique */
.logo-link{ display: inline-flex; align-items: center; }

.logo{
  height: 200px;
  width: auto;
  border-radius: 6px;
  display: block;

  /* ✅ SUPPRESSION TOTALE DES OMBRES / TRACES */
  filter: none;
  box-shadow: none;
  background: transparent;
}

/* ✅ Filtres sous logo (nouveau) */
.brand-filters{
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap; /* utile si petit écran */
}

/* ✅ On réutilise .filter-form mais en colonne ici */
.brand-filters .filter-form{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* Label des filtres (dans le header) */
.brand-filters label{
  font-weight: 600;
  color: #000;
  font-size: 14px;
}

/* Select des filtres (dans le header) */
.brand-filters select{
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  min-width: 210px;
  background: #fff;
}

/* Responsive : filtres en colonne sous le logo */
@media (max-width: 768px){
  .brand-filters{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .brand-filters select{
    width: 100%;
    min-width: 0;
  }
}

#header-spacer{
  height: 220px;
}

/* -------------------------------
   BANDEAU NAV
----------------------------------*/
.main-nav{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  padding: 8px 10px;
  background: var(--brand);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  max-width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-height: 44px;
  margin-left: auto;
}

@media (max-width: 1200px){
  .main-nav{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.main-nav a{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  transition: none;
}
.main-nav a:hover{ background: var(--accent-dark); }

.main-nav a:focus-visible{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}

.main-nav a.active{
  background: #fff;
  color: var(--brand-darker);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.main-nav .logout-link{ background: var(--danger); }
.main-nav .logout-link:hover{ background: var(--danger-dark); }

/* -------------------------------
   ONGLETs (Paramètres : Généraux / Documents)
----------------------------------*/
.tabs{
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--card-bd);
  margin: 8px 0 16px 0;
}
.tab{
  display:inline-block;
  padding:8px 12px;
  border:1px solid transparent;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  text-decoration:none;
  color:#374151;
  background: transparent;
}
.tab:hover{ background:#f9fafb; }
.tab.active{
  color:#111827;
  border-color:var(--card-bd);
  border-bottom-color:white;
  background:white;
}

/* -------------------------------
   CONTENEURS DE PAGE
----------------------------------*/
.catalogue-layout,
.charges-layout{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
}

/* -------------------------------
   FORMULAIRES CLASSIQUES (pile)
----------------------------------*/
form.form_user{
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:15px;
  width:100%;
  max-width:600px;
  margin-bottom:25px;
}
form label{ font-size:14px; font-weight:600; color:#333; }
form input, form select, form textarea{
  padding:10px;
  font-size:16px;
  border:1px solid #ccc;
  border-radius:6px;
  width:100%;
  background:#fff;
}

/* -------------------------------
   FORMULAIRE INLINE FLEXIBLE
----------------------------------*/
.form_grid_line{
  display:grid;
  grid-template-columns:
    minmax(140px, 1fr)
    minmax(140px, 1fr)
    minmax(180px, 1fr)
    minmax(220px, 2fr)
    minmax(140px, 1fr)
    minmax(120px, 1fr)
    auto;
  gap:14px;
  align-items:end;

  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  padding:16px 18px;
  width:100%;
  max-width:var(--maxw);
  margin:10px 0 20px;
  overflow:hidden;
}
.form_grid_line .pair{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:8px;
  min-width:0;
}
.form_grid_line label{ font-weight:600; color:#333; white-space:nowrap; }
.form_grid_line input, .form_grid_line select{
  padding:8px 10px;
  font-size:16px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
  width:100%;
  min-width:0;
}
.form_grid_line .actions{ justify-self:end; align-self:end; }
.form_grid_line .actions button{
  padding:10px 16px;
  border:none;
  border-radius:6px;
  background:var(--brand);
  color:#fff;
  font-weight:600;
  transition: none;
}
.form_grid_line .actions button:hover{ background: var(--brand-dark); }

@media (max-width: 1200px){
  .form_grid_line{
    grid-template-columns:
      minmax(140px, 1fr) minmax(140px, 1fr) minmax(180px, 1fr)
      minmax(220px, 2fr) minmax(140px, 1fr) minmax(120px, 1fr)
      auto;
    row-gap:12px;
  }
}
@media (max-width: 900px){
  .form_grid_line{ grid-template-columns: 1fr 1fr; }
  .form_grid_line .actions{ justify-self:stretch; }
  .form_grid_line .actions button{ width:100%; }
}
@media (max-width: 520px){
  .form_grid_line{ grid-template-columns: 1fr; }
}
.one_line_form{ display: contents; }

/* -------------------------------
   TABLEAU DANS UNE CARTE
----------------------------------*/
.table_card{
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  padding:16px;
  width:100%;
  max-width:var(--maxw);
  overflow:hidden;
}
.table_card table{
  width:100%;
  border-collapse:collapse;
  background:transparent;
}
.table_card th, .table_card td{
  border:1px solid #ddd;
  padding:10px 12px;
  text-align:left;
}
.table_card th{
  background: var(--brand-dark);
  color:#fff;
  font-weight:600;
}
.table_card tr:nth-child(even){ background:#f7fbfb; }
.table_card tr:hover{ background:#eaf4f4; }

/* -------------------------------
   ACTIONS DU TABLEAU
----------------------------------*/
.actions-buttons{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.actions-buttons button{
  padding:6px 10px;
  font-size:.9rem;
  border-radius:5px;
  border:none;
  cursor:pointer;
  color:#fff;
  transition:none;
}
.actions-buttons button:not(.delete){ background:var(--brand); }
.actions-buttons button:not(.delete):hover{ background:var(--brand-dark); }
.actions-buttons .delete{ background:var(--danger); }
.actions-buttons .delete:hover{ background:var(--danger-dark); }

/* -------------------------------
   BOUTONS GÉNÉRIQUES
----------------------------------*/
button,
a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 15px;
  border:none;
  border-radius:6px;
  background:var(--brand);
  color:#fff !important;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:none;
}
button:hover,
a.btn:hover{ background:var(--brand-dark); }

.btn-sm{
  padding:6px 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
}
.btn-back{
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
.btn-back:hover{ background: rgba(255,255,255,.12) !important; }

/* -------------------------------
   FLASH / TITRES / TEXTE
----------------------------------*/
.flash{
  background:#ffffff;
  color: var(--brand-darker);
  padding:10px 12px;
  margin:10px 0 20px;
  border:1px solid #cfe6e5;
  border-left:6px solid var(--brand);
  border-radius:6px;
  width:100%;
  max-width:900px;
}
h1, h2{ color:#fff; text-align:center; margin-bottom:20px; }
p{ color:#fff; text-align:center; margin-top:20px; }
.error{ color:#ffebee; text-align:center; margin-bottom:10px; }

/* ===============================
   OVERRIDES SPÉCIFIQUES PAGE CHARGES
=================================*/
.charges-layout,
.charges-layout .form_grid_line,
.charges-layout .table_card {
  max-width: none;
  width: min(95vw, 1600px);
  margin-left: auto;
  margin-right: auto;
}
.charges-layout .form_grid_line {
  grid-template-columns:
    minmax(140px, 1fr)
    minmax(140px, 1fr)
    minmax(220px, 1.2fr)
    minmax(320px, 3fr)
    minmax(160px, 1fr)
    minmax(140px, 1fr)
    fit-content(1%);
}
.charges-layout .form_grid_line .pair { min-width: 0; }
@media (max-width: 1200px) {
  .charges-layout .form_grid_line {
    grid-template-columns:
      minmax(140px, 1fr) minmax(140px, 1fr) minmax(220px, 1fr)
      minmax(280px, 2fr) minmax(160px, 1fr) minmax(140px, 1fr)
      fit-content(1%);
  }
}
@media (max-width: 900px) {
  .charges-layout .form_grid_line { grid-template-columns: 1fr 1fr; }
  .charges-layout .form_grid_line .actions { justify-self: stretch; }
  .charges-layout .form_grid_line .actions button { width: 100%; }
}
@media (max-width: 520px) {
  .charges-layout .form_grid_line { grid-template-columns: 1fr; }
}

/* -------------------------------
   ESPACE PRINCIPAL
----------------------------------*/
main{ width:100%; margin:14px auto 0; }
main > *:not(header):not(footer){
  width: min(95vw, 1600px);
  margin-left:auto;
  margin-right:auto;
}

/* ===============================
   LIGNES DE FACTURE – bouton supprimer
=================================*/
.table-lines .line-actions { text-align: center; }
.table-lines .remove-line{
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: none;
}
.table-lines .remove-line:hover{ background: var(--danger-dark); }
.table-lines .remove-line:focus-visible{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}

/* ===============================
   LAYOUT DOCUMENTS (facture / devis)
=================================*/
.seller-client-area{ margin-top: 20px; }
.client-wrapper{
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.client-block{
  max-width: 340px;
  min-width: 260px;
}

/* ===============================
   PAGE PARAMÈTRES (style pro)
=================================*/
.settings-card{
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 20px;
  width: 100%;
  max-width: 780px;
  margin: 20px auto;
}
.settings-card--subtle{ box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.settings-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 12px;
}
.settings-card__title h2,
.settings-card__title h3{
  margin:0 0 6px 0;
  color:#1f2937;
}
.settings-card__title p{
  margin:0;
  color:#6b7280;
  font-size:.95rem;
}

.settings-form{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  margin-top: 10px;
}
.settings-form__row{ display:grid; gap:8px; }
.settings-form label{ font-weight:600; color:#374151; }
.settings-form input[type="text"],
.settings-form input[type="password"]{
  padding:12px;
  border:1px solid var(--card-bd);
  border-radius:10px;
  background:#fff;
  font-size:1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.settings-form input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(115,176,175,.25);
  outline:none;
}
.settings-form .help{
  color:#6b7280;
  font-size:.9rem;
  line-height:1.5;
}

.settings-form__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  margin-top:8px;
}

.settings-tips{
  margin: 10px 0 0;
  padding-left: 18px;
  color:#374151;
}
.settings-tips li{ margin: 6px 0; }

.flash.success{
  background:#e6f9f8;
  border:1px solid #b3e4e2;
  color:#106460;
  padding:10px 14px;
  border-radius:10px;
  margin-bottom:18px;
}

@media (max-width: 640px){
  .settings-card{ padding: 16px; }
  .settings-card__header{ flex-direction:column; align-items:stretch; }
  .settings-form__actions{ flex-direction:column-reverse; align-items:stretch; }
}

/* ===============================
   PAGE CLIENTS – IMPORT + INFO TOOLTIP
=================================*/
.page-header-clients{ margin:10px 20px 20px 20px; }

.import-header-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}

.help-tooltip{
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:help;
  font-size:0.9rem;
}

.help-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid #3b82f6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:0.8rem;
  color:#1e3a8a;
  background:#eff6ff;
  box-shadow:0 1px 3px rgba(15,23,42,0.15);
  transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.help-tooltip:hover .help-icon{
  background:#dbeafe;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(15,23,42,0.18);
}

.help-tooltip-content{
  position:absolute;
  right:0;
  top:130%;
  width:380px;
  max-width:70vw;
  min-width:260px;
  white-space:normal;

  padding:0.75rem 1rem;
  border-radius:0.6rem;
  background:#0f172a;
  color:#f9fafb;
  font-size:0.8rem;
  line-height:1.4;
  box-shadow:0 10px 25px rgba(0,0,0,.4);
  z-index:20;

  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.help-tooltip-content::before{
  content:"";
  position:absolute;
  top:-6px;
  right:10px;
  border-width:0 6px 6px 6px;
  border-style:solid;
  border-color:transparent transparent #0f172a transparent;
}

.help-tooltip:hover .help-tooltip-content{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* =============================================================================
   LANDING PAGE (SCOPE)
   Objectif : la landing ne doit PAS hériter des styles "app" (body centré, fond teal)
   Tout est scoppé avec body[data-debug-template^="landing"]
============================================================================= */

/* On scope sur la landing via ton attribut existant */
body[data-debug-template^="landing"]{
  padding: 0;
  background: #ffffff;
  align-items: stretch;
}

/* Ne pas centrer tous les <p> sur la landing (sinon ça fait "app") */
body[data-debug-template^="landing"] p{
  color: inherit;
  text-align: inherit;
  margin-top: 0;
}

/* Container landing */
body[data-debug-template^="landing"] .container{
  width: min(1100px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}

/* Header landing */
body[data-debug-template^="landing"] .header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

body[data-debug-template^="landing"] .header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}

body[data-debug-template^="landing"] .brand{
  display:inline-flex;
  align-items:center;
}

body[data-debug-template^="landing"] .brand__logo{
  height: 42px;
  width: auto;
  display:block;
}

body[data-debug-template^="landing"] .nav{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap: wrap;
}

body[data-debug-template^="landing"] .nav a{
  text-decoration:none;
  font-weight: 800;
  color: rgba(15,23,42,.75);
}

body[data-debug-template^="landing"] .nav a:hover{
  text-decoration: underline;
}

body[data-debug-template^="landing"] .header__cta{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Boutons landing (scope) */
body[data-debug-template^="landing"] .btn{
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing: .1px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid transparent;
}

body[data-debug-template^="landing"] .btn--primary{
  background: #2563eb;
  color: #fff !important;
}
body[data-debug-template^="landing"] .btn--primary:hover{
  background:#1d4ed8;
}

body[data-debug-template^="landing"] .btn--secondary{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.85) !important;
  border-color: rgba(15,23,42,.10);
}
body[data-debug-template^="landing"] .btn--secondary:hover{
  background: rgba(15,23,42,.10);
}

body[data-debug-template^="landing"] .btn--ghost{
  background: transparent;
  color: rgba(15,23,42,.85) !important;
  border-color: rgba(15,23,42,.12);
}
body[data-debug-template^="landing"] .btn--ghost:hover{
  background: rgba(15,23,42,.06);
}

/* HERO */
body[data-debug-template^="landing"] .hero{
  padding: 42px 0 28px;
  background: linear-gradient(180deg, rgba(90,152,151,.10), rgba(255,255,255,0));
}

body[data-debug-template^="landing"] .hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items: start;
}

body[data-debug-template^="landing"] .eyebrow{
  margin: 0 0 10px 0;
  color: rgba(15,23,42,.65);
  font-weight: 900;
  letter-spacing: .2px;
}

body[data-debug-template^="landing"] .h1{
  margin: 0 0 12px 0;
  color: rgba(15,23,42,.92);
  line-height: 1.05;
  text-align:left;
}

body[data-debug-template^="landing"] .lead{
  margin: 0 0 18px 0;
  color: rgba(15,23,42,.70);
  max-width: 58ch;
}

/* ... (à partir d’ici : ton CSS landing reste inchangé) ... */

/* =====================================================================
   LOGO – IMAGE SEULE (AJOUT)
===================================================================== */
.site-header .logo-link{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-header .logo-link > *{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Le logo reste une image seule, sans aucun effet */
.site-header img.logo{
  display: block;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: none !important;
}

/* ===========================
   Ancienne barre de filtres sous header (désactivée)
   (Tu peux supprimer ce bloc si tu veux, mais là on évite tout effet surprise)
=========================== */
.filters-bar{
  display:none !important;
}