/* ---------- BUREAU D'ENTREPRISE ----------
   Même ossature que le back office : colonne sombre à gauche sur ordinateur,
   barre d'icônes horizontale sur téléphone. Les produits se travaillent en
   maître/détail — liste et fiche côte à côte sur grand écran, la fiche prend
   tout l'écran sur mobile. */

/* ---- pastille de statut, partagée par les comptes et les produits ---- */
.company-pill{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:8.5px; text-transform:uppercase;
  letter-spacing:.05em; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap;}
.company-pill.approved{background:#DCE8D6; color:#3F5A3A;}
.company-pill.pending{background:#F3E4C6; color:#8A6416;}
.company-pill.rejected{background:#F3DAD7; color:#8B4A3F;}
.company-pill.suspended{background:#E4E1D8; color:#4A4640;}
.company-pill.draft{background:var(--bg); color:var(--ink-soft);}

/* ---- carte du profil ---- */
.company-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.company-card-head strong{font-size:14px; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.company-card-lead{font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 12px;}
/* Motif d'un refus : c'est la seule information qui permet de corriger, elle ne
   doit pas se lire comme une note de bas de page. */
.company-card-note{font-size:12.5px; line-height:1.5; color:#8B4A3F; background:#F3DAD7; border-radius:10px; padding:9px 12px; margin:0 0 12px;}
.company-cta{width:100%; border:none; background:var(--action); color:#fff; border-radius:12px; padding:11px; font-size:13.5px; font-weight:600; font-family:'Inter',sans-serif;}
.company-cta:hover{opacity:.9;}
.company-link-btn{width:100%; margin-top:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:12px; padding:10px; font-size:13px; font-weight:600; font-family:'Inter',sans-serif;}
.company-link-btn:hover{border-color:var(--ink-soft);}
.company-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.company-fullrow{grid-column:1 / -1;}
.company-form-error{font-size:12.5px; color:#8B4A3F; margin:10px 0 0;}
.company-form-actions{display:flex; gap:8px; margin-top:14px;}
.company-form-actions button{flex:1;}

/* Entête de téléphone : le nom de l’entreprise prend la place du titre
   générique, avec la mention en dessous — même hiérarchie que la barre
   latérale sur ordinateur. */
.company-mobile-title{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; margin:0;}
.company-mobile-name{max-width:100%; font-family:'Fraunces',serif; font-size:15px; font-weight:600; font-style:italic;
  color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.company-mobile-tag{font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:400; font-style:normal;}

/* Les zones de texte n’héritaient d’aucun style : bordure par défaut du
   navigateur, largeur qui ne suivait pas la grille, et une poignée de
   redimensionnement qui n’a rien à faire dans un formulaire à champs fixes.
   Elles s’alignent maintenant sur les champs voisins, hauteur figée. */
.company-product-form textarea,
#companyProfileCard textarea{
  width:100%; box-sizing:border-box; resize:none; height:88px;
  border:1px solid var(--border); background:var(--surface); border-radius:10px;
  padding:9px 12px; font-size:13.5px; color:var(--ink); font-family:'Inter',sans-serif; line-height:1.45;}
.company-product-form textarea:focus,
#companyProfileCard textarea:focus{outline:none; border-color:var(--ink-soft);}

/* ---- ossature de la page ---- */
.company-shell{flex:1; overflow:hidden; display:flex; flex-direction:column;}
.company-sidebar{padding:16px 14px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--action);}
.company-sidebar-brand{display:none;}
/* La zone principale ne défile jamais elle-même : chaque vue gère son propre
   défilement, pour que la barre d'outils des produits reste en place. */
.company-main{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:4px 18px 16px; background:var(--bg);}
#companyDashView{flex:1; min-height:0; overflow-y:auto;}

.company-tabs{display:flex; flex-direction:column; gap:4px;}
.company-tab-btn{width:100%; text-align:left; position:relative; display:flex; align-items:center; gap:10px; border:none;
  background:none; color:rgba(255,255,255,.6); border-radius:12px; padding:11px 13px; font-size:13px; font-weight:600;
  font-family:'Inter',sans-serif; transition:background .15s, color .15s;}
.company-tab-btn svg{width:17px; height:17px; flex-shrink:0; opacity:.75;}
.company-tab-btn:hover{background:rgba(255,255,255,.08); color:#fff;}
.company-tab-btn.active{background:rgba(255,255,255,.16); color:#fff;}
.company-tab-btn.active svg{opacity:1;}

.company-toolbar{display:flex; gap:8px;}
.company-toolbar .admin-search{flex:1; min-width:0; margin-bottom:0;}
.company-empty{font-size:12.5px; color:var(--ink-soft); font-style:italic; padding:26px 2px; text-align:center;}
.company-notice{font-size:12.5px; color:#8A6416; background:#F3E4C6; border-radius:10px; padding:9px 12px; margin:0 0 14px;}

/* ---- tableau de bord ---- */
.company-stats{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:16px;}
.company-stat{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 12px; min-width:0;}
.company-stat-value{font-family:'Fraunces',serif; font-size:24px; font-weight:600; color:var(--ink); line-height:1;}
.company-stat-label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:6px; line-height:1.4;}
.company-table-head{display:grid; grid-template-columns:1fr 72px 72px; gap:8px; font-family:'IBM Plex Mono',monospace;
  font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:0 2px 6px; border-bottom:1px solid var(--border);}
.company-table-head span:not(:first-child){text-align:right;}
.company-table-row{display:grid; grid-template-columns:1fr 72px 72px; gap:8px; align-items:center;
  padding:11px 2px; border-bottom:1px solid var(--border); cursor:pointer;}
.company-table-row:hover{background:var(--surface);}
.company-table-name{min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.company-table-title{font-size:13px; font-weight:600; color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.company-table-num{text-align:right; font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:var(--ink); line-height:1.15;}
.company-table-num small{display:block; font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:400; color:var(--ink-soft); margin-top:3px;}

/* ---- produits : liste à gauche, fiche à droite ---- */
#companyProductsSplit{display:none; flex-direction:column; gap:14px; height:100%; min-height:0;}
.company-products-list{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden;}
.company-products-list .company-toolbar{padding:10px; border-bottom:1px solid var(--border); flex-shrink:0;}
#companyProductRows{overflow-y:auto; min-height:0;}
.company-product-row{display:flex; align-items:center; gap:11px; padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer;}
.company-product-row:last-child{border-bottom:none;}
.company-product-row:hover{background:var(--bg);}
.company-product-row.active{background:var(--accent-bg);}
.company-product-thumb{width:44px; height:44px; border-radius:9px; background:var(--bg); border:1px solid var(--border); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.company-product-thumb img{width:100%; height:100%; object-fit:cover;}
.company-product-body{flex:1; min-width:0;}
.company-product-title{font-size:13.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.company-product-meta{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); margin-top:3px;}
.company-product-note{font-size:11.5px; color:#8B4A3F; margin-top:4px; line-height:1.4;}
.company-product-side{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0;}
.company-product-nums{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft); white-space:nowrap;}

.company-product-detail{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow-y:auto;}
.company-detail-empty{flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:13px; font-style:italic;}
.company-product-form{display:flex; flex-direction:column; gap:16px; padding:18px;}
/* Flèche de retour : utile seulement en maître/détail, donc sur téléphone. */
.company-detail-back{display:none; align-items:center; gap:6px; align-self:flex-start; border:none; background:none;
  padding:2px 0 4px; font-size:12.5px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif;}
.company-detail-back svg{width:13px; height:13px;}
.company-detail-back:hover{color:var(--ink);}
.company-review-banner{font-size:12.5px; line-height:1.5; color:#8A6416; background:#F3E4C6; border-radius:10px; padding:9px 12px; margin:0;}
.company-image-preview{width:100%; height:190px; border-radius:12px; background:var(--bg); border:1px solid var(--border);
  overflow:hidden; display:flex; align-items:center; justify-content:center;}
.company-image-preview img{max-width:100%; max-height:100%; object-fit:contain;}
.company-image-empty{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.company-fieldgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.company-upload-row{display:flex; align-items:center; gap:10px; margin-top:7px; flex-wrap:wrap;}
.company-upload-row input[type=file]{font-size:11.5px; color:var(--ink-soft); min-width:0; flex:1;}
.company-upload-note{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft);}
.company-editor-actions{display:flex; gap:8px; flex-wrap:wrap;}
.company-editor-actions button{flex:1 1 auto; min-width:120px; padding:11px 10px;}
.company-editor-note{font-size:11.5px; line-height:1.5; color:var(--ink-soft); margin:0;}

/* ---------- ORDINATEUR ----------
   Le bureau est un outil de travail, pas un écran de téléphone : il prend toute
   la largeur, comme le back office (les .notif-page sont plafonnées à 430px). */
@media (min-width:900px){
  #companyPage{max-width:none; width:100%; left:0; transform:none;}
  #companyPage > .notif-header{display:none;}
  .company-shell{flex-direction:row;}
  .company-sidebar{width:240px; flex-shrink:0; border-bottom:none; border-right:1px solid var(--border); padding:20px 16px; overflow-y:auto;}
  .company-main{padding:24px 32px;}
  /* Flèche et logo sur une première rangée, nom et mention en dessous sur toute
     la largeur : la colonne fait 208 px utiles, contre 128 quand les trois
     éléments se partageaient la même ligne. */
  .company-sidebar-brand{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:2px 2px 18px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.12);}
  .company-sidebar-back{width:30px; height:30px; flex-shrink:0; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:none; color:#fff; display:flex; align-items:center; justify-content:center;}
  .company-sidebar-back:hover{background:rgba(255,255,255,.1);}
  .company-sidebar-back svg{width:13px; height:13px;}
  .company-sidebar-brandtext{flex:1 0 100%; display:flex; flex-direction:column; line-height:1.2; min-width:0; margin-top:2px;}
  /* Un nom d’entreprise coupé par des points de suspension n’identifie plus
     personne : il reste entier et passe à la ligne. La colonne ne fait que
     ~128 px de large une fois la flèche et le logo posés. */
  .company-sidebar-name{font-size:15px; font-weight:600; font-style:italic; font-family:'Fraunces',serif; color:#fff;
    white-space:normal; overflow-wrap:break-word; line-height:1.25;}
  .company-sidebar-tag{font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:2px;}

  .company-stats{grid-template-columns:repeat(4, 1fr);}
  #companyProductsSplit{flex-direction:row; gap:18px;}
  .company-products-list{width:320px; flex-shrink:0;}
  .company-product-detail{flex:1; min-width:0;}
  .company-fieldgrid{grid-template-columns:1fr 1fr;}
}

/* ---------- TÉLÉPHONE ----------
   La colonne sombre devient une barre horizontale, icône au-dessus du libellé.
   Les panneaux encadrés perdent leur cadre : sur un petit écran ils créent un
   effet de boîte dans une boîte et gaspillent de la largeur. */
@media (max-width:899px){
  .company-sidebar{padding:8px 6px 6px;}
  .company-tabs{flex-direction:row; gap:2px;}
  .company-tab-btn{flex:1 1 0; min-width:0; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:5px; padding:8px 2px 7px; font-size:9.5px; font-weight:600; line-height:1.15; text-align:center; border-radius:10px;}
  .company-tab-btn svg{width:19px; height:19px;}
  .company-tab-btn .admin-tab-badge{top:2px; right:auto; left:calc(50% + 4px);}

  .company-main{padding:0;}
  .company-products-list, .company-product-detail{border:none; border-radius:0;}
  .company-products-list .company-toolbar{flex-wrap:wrap; gap:8px; padding:12px 14px;}
  .company-products-list .company-toolbar .admin-search,
  .company-products-list .company-toolbar .admin-new-btn{flex:1 1 100%; width:100%;}
  .company-products-list .company-toolbar .admin-search{padding:11px 14px; font-size:14px;}
  .company-product-row{padding:13px 14px; border-radius:0;}
  #companyDashView{padding:14px 18px 24px;}
  .company-detail-back{display:flex; margin:-2px 0 2px; font-size:13px; color:var(--ink);}
  .company-product-form{padding:14px;}

  /* Maître/détail : on voit la liste, puis la fiche prend tout l'écran. */
  #companyProductsSplit{gap:0;}
  #companyProductsSplit:not(.editing) .company-product-detail{display:none;}
  #companyProductsSplit.editing .company-products-list{display:none;}
  #companyProductsSplit.editing .company-product-detail{flex:1; height:100%;}
}
@media (max-width:520px){
  .company-form-grid, .company-fieldgrid{grid-template-columns:1fr;}
  .company-table-head, .company-table-row{grid-template-columns:1fr 58px 58px;}
}

/* ---- sélecteur d'entreprise ----
   N'apparaît qu'à partir de deux entreprises (géré en JS) : à une seule, une
   liste déroulante à un choix ne ferait qu'encombrer. */
.company-switcher-wrap{margin-bottom:10px;}
.company-switcher{width:100%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff;
  border-radius:10px; padding:9px 11px; font-size:12.5px; font-weight:600; font-family:'Inter',sans-serif;}
.company-switcher:focus{outline:none; border-color:rgba(255,255,255,.4);}
.company-switcher option{color:var(--ink); background:var(--surface);}

/* ---- liste des entreprises dans le profil ---- */
.company-profile-row{padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border);}
.company-profile-row:last-of-type{border-bottom:none; margin-bottom:6px;}
.company-form-title{font-family:'Fraunces',serif; font-size:15px; font-weight:600; color:var(--ink); margin-bottom:12px;}

/* ---- équipe d'une entreprise ---- */
.company-team-add{display:flex; gap:8px; margin:12px 0 6px; flex-wrap:wrap;}
.company-team-add .admin-search{flex:1 1 180px; min-width:0; margin-bottom:0;}
.company-role-select{flex-shrink:0; border:1px solid var(--border); background:var(--surface); border-radius:10px;
  padding:9px 11px; font-size:13px; color:var(--ink); font-family:'Inter',sans-serif;}
.company-member-row{display:flex; align-items:center; gap:11px; padding:12px 2px; border-bottom:1px solid var(--border);}
.company-member-body{flex:1; min-width:0;}
.company-member-email{font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.company-member-meta{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); margin-top:3px;}
.company-member-actions{display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end;}

/* ---- onglet Entreprises du back office ----
   Même ossature que l'onglet Produits : liste à gauche, fiche à droite sur
   ordinateur ; sur téléphone la fiche remplace la liste. */
#adminCompaniesSplit{display:none; flex-direction:column; gap:14px; height:100%; min-height:0;}
.admin-companies-list{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden;}
.admin-companies-toolbar{padding:10px 10px 0; flex-shrink:0;}
.admin-companies-toolbar .admin-search{margin-bottom:0;}
#adminCompanyRows{overflow-y:auto; min-height:0;}
/* Catalogue/Soumissions et Actives/Effacées choisissent ce que la liste
   montre : ils prennent la bande de vues commune (css/base.css). Ils étaient
   des pastilles claires, un style de plus pour un geste déjà nommé ailleurs. */
.admin-comp-seg{flex-shrink:0;}
.admin-company-row{display:flex; align-items:flex-start; gap:11px; padding:11px 12px; border-bottom:1px solid var(--border); cursor:pointer;}
.admin-company-row:last-child{border-bottom:none;}
.admin-company-row:hover{background:var(--bg);}
.admin-company-row.active{background:var(--accent-bg);}
.admin-company-body{flex:1; min-width:0;}
.admin-company-title{font-size:13.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.admin-company-meta{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); margin-top:5px; line-height:1.6; word-break:break-word;}
/* Ce qui attend une décision, sur la ligne même : on voit quelle entreprise
   demande du travail sans ouvrir sa fiche. */
.admin-company-flag{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  color:#8A6416; background:#F3E4C6; border-radius:999px; padding:2px 8px; margin-top:6px; display:inline-block;}
.admin-company-desc{font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.5;}
.admin-company-actions{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.admin-company-btn{border:1px solid var(--border); background:var(--surface); border-radius:9px; padding:6px 11px;
  font-size:12px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif; text-decoration:none; display:inline-flex; align-items:center;}
.admin-company-btn:hover{border-color:var(--ink-soft);}
.admin-company-btn.approve{background:var(--action); border-color:var(--action); color:#fff;}
.admin-company-btn.reject{color:#8B4A3F;}
.admin-company-thumb{width:44px; height:44px; border-radius:10px; background:var(--bg); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.admin-company-thumb img{width:100%; height:100%; object-fit:cover;}

/* ---- fiche d'une entreprise ---- */
.admin-company-detail{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow-y:auto;}
.admin-company-card{padding:18px;}
.admin-company-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.admin-company-name{font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:var(--ink); min-width:0;}
.admin-section-label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); margin:22px 0 10px; padding-top:14px; border-top:1px solid var(--border);}
.admin-company-member{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--ink); word-break:break-word;}
.admin-company-member:last-child{border-bottom:none;}
.admin-company-product{display:flex; align-items:flex-start; gap:11px; padding:13px 0; border-bottom:1px solid var(--border);}
.admin-company-product:last-child{border-bottom:none;}
.admin-company-card .company-stats{grid-template-columns:repeat(2, 1fr); margin-bottom:0;}

@media (min-width:900px){
  #adminCompaniesSplit{flex-direction:row; gap:18px;}
  .admin-companies-list{width:320px; flex-shrink:0;}
  .admin-company-detail{flex:1; min-width:0;}
  .admin-company-card .company-stats{grid-template-columns:repeat(4, 1fr);}
}
@media (max-width:899px){
  .admin-companies-list, .admin-company-detail{border:none; border-radius:0;}
  #adminCompaniesSplit{gap:0;}
  #adminCompaniesSplit:not(.editing) .admin-company-detail{display:none;}
  #adminCompaniesSplit.editing .admin-companies-list{display:none;}
  #adminCompaniesSplit.editing .admin-company-detail{flex:1; height:100%;}
  .admin-companies-toolbar{padding:12px 14px 0;}
  .admin-company-row{padding:13px 14px;}
  .admin-company-card{padding:14px;}
}
/* ---- invitation d'équipe reçue ----
   Volontairement en haut de la zone principale et sur fond accentué : c'est la
   seule chose à faire tant qu'on n'a pas répondu, elle ne doit pas se lire
   comme une ligne de liste parmi d'autres. */
#companyInvites{display:none;}
.company-invite{background:var(--accent-bg); border:1px solid var(--accent); border-radius:14px; padding:14px 16px; margin-bottom:16px;}
.company-invite-title{font-size:14px; font-weight:600; color:var(--ink); line-height:1.45;}
.company-invite-role{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-top:5px;}
.company-invite-desc{font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:8px;}
.company-invite-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.company-invite-actions button{flex:1 1 auto; min-width:120px; justify-content:center;}
@media (max-width:899px){
  #companyInvites{padding:14px 18px 0;}
}

/* ---------- PANNEAU DE VISIBILITÉ ----------
   Partagé par le bureau et le back office. Période et portée en haut, trois
   chiffres, puis le graphique. */
.stats-panel{margin-bottom:18px;}
.stats-controls{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.stats-seg{display:flex; background:var(--bg); border-radius:999px; padding:3px; flex:1 1 190px; min-width:0;}
.stats-seg-btn{flex:1 1 0; min-width:0; border:none; background:none; border-radius:999px; padding:7px 6px;
  font-size:12px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif; white-space:nowrap;}
.stats-seg-btn.active{background:var(--action); color:#fff;}
.stats-select{flex:1 1 170px; min-width:0; border:1px solid var(--border); background:var(--surface); border-radius:999px;
  padding:8px 12px; font-size:12.5px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif;}
.stats-select:focus{outline:none; border-color:var(--ink-soft);}

.stats-numbers{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:16px;}
.stats-num{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; min-width:0;}
.stats-num-value{font-family:'Fraunces',serif; font-size:24px; font-weight:600; color:var(--ink); line-height:1;}
.stats-num-label{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); margin-top:6px; line-height:1.4;}

/* Le graphique s'étire en largeur (preserveAspectRatio="none") : sans texte à
   l'intérieur, rien ne se déforme. Les libellés sont en HTML autour. */
.stats-chart-wrap{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 14px 10px;}
.stats-chart{display:block; width:100%; height:120px;}
.stats-chart-max{position:absolute; top:10px; right:14px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft);}
.chart-view{fill:var(--border-soft);}
.chart-click{fill:var(--accent);}
.chart-axis{stroke:var(--border); stroke-width:.5; vector-effect:non-scaling-stroke;}
.stats-chart-axis{display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace;
  font-size:9.5px; color:var(--ink-soft); margin-top:7px;}
.stats-legend{display:flex; gap:14px; margin-top:10px; padding-top:9px; border-top:1px solid var(--border);}
.stats-legend-item{display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
.stats-legend-item i{width:9px; height:9px; border-radius:2px; flex-shrink:0;}
.stats-legend-item .dot-view{background:var(--border-soft);}
.stats-legend-item .dot-click{background:var(--accent-fill);}
.stats-note{font-size:11.5px; line-height:1.5; color:var(--ink-soft); margin:12px 0 0;}
@media (max-width:520px){
  .stats-numbers{grid-template-columns:1fr 1fr;}
  .stats-numbers .stats-num:last-child{grid-column:1 / -1;}
}

  /* ---------- LES COMMANDITES ----------
     Un contrat se lit d'un coup : ce qu'il porte, où, à quel prix, et où il
     en est. La jauge dit le reste mieux qu'un pourcentage. */
  .ads-form{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 18px 20px; margin-bottom:22px;}
  .ads-form-titre{font-family:'Fraunces',serif; font-size:17px; font-weight:600; margin-bottom:6px;}
  .ads-form-mot{margin:0 0 14px; font-size:13px; line-height:1.55; color:var(--ink-soft);}
  .ads-champ{
    width:100%; border:1px solid var(--border); border-radius:9px; background:var(--bg);
    padding:9px 11px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
  }
  .ads-champ:focus{outline:none; border-color:var(--accent);}
  .ads-duo{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .ads-total{
    margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:12px;
    color:var(--ink-soft); letter-spacing:.04em;
  }
  .ads-total span{font-size:19px; font-weight:600; color:var(--ink); margin-right:4px;}
  .ads-commander{
    margin-top:14px; width:100%; background:var(--action); color:#fff; border:none; border-radius:9px;
    padding:11px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer;
  }
  .ads-commander:disabled{opacity:.45; cursor:default;}

  .ads-liste-titre{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:22px 0 9px;
  }
  .ads-carte{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:15px 16px; margin-bottom:9px;}
  .ads-carte-tete{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
  .ads-produit{font-size:15px; font-weight:600; line-height:1.3;}
  .ads-meta{
    margin-top:4px; font-family:'IBM Plex Mono',monospace; font-size:10px;
    letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); line-height:1.6;
  }
  .ads-statut{
    flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; padding:3px 8px 2px; border-radius:5px;
    border:1px solid var(--border); color:var(--ink-soft); white-space:nowrap;
  }
  .ads-statut.active{border-color:#4F6B4A; color:#4F6B4A;}
  .ads-statut.pending{border-color:var(--accent); color:var(--accent);}
  .ads-statut.rejected, .ads-statut.paused{border-color:#B5473F; color:#B5473F;}
  .ads-jauge{height:5px; border-radius:3px; background:var(--bg); overflow:hidden; margin:12px 0 8px;}
  .ads-jauge span{display:block; height:100%; background:var(--accent-fill);}
  .ads-compte{font-size:12.5px; color:var(--ink-soft);}
  .ads-compte b{color:var(--ink); font-weight:600;}
  .ads-note{
    margin-top:10px; padding-top:9px; border-top:1px solid var(--border-soft, var(--border));
    font-size:12.5px; color:var(--ink-soft); font-style:italic;
  }
  .ads-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
  .ads-actions button{
    border:1px solid var(--border); background:var(--bg); border-radius:8px; padding:7px 13px;
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer;
  }
  .ads-actions button.danger{border-color:#B5473F; color:#B5473F;}
  .ads-vide{padding:24px 4px; text-align:center; color:var(--ink-soft); font-size:13.5px; font-style:italic;}

  /* ---------- LES ZONES, AU BACK OFFICE ---------- */
  .azone{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:15px 16px; margin-bottom:9px;}
  .azone.inactive{opacity:.6;}
  .azone.neuve{border-style:dashed;}
  .azone-tete{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
  .azone-nom{
    flex:1; min-width:0; border:1px solid var(--border); border-radius:9px; background:var(--bg);
    padding:8px 11px; font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; color:var(--ink);
  }
  .azone-actif{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
  .azone-villes{
    width:100%; border:1px solid var(--border); border-radius:9px; background:var(--bg);
    padding:8px 11px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink); resize:vertical;
  }
  .azone-pied{display:flex; gap:8px; margin-top:10px;}
  .azone-pied button{
    border:1px solid var(--border); background:var(--bg); border-radius:8px; padding:7px 13px;
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer;
  }
  .azone-pied button.danger{border-color:#B5473F; color:#B5473F;}

  /* La carte d'ajout s'annonce : sans ce titre, un formulaire vide se lit
     comme une zone qui s'appellerait « Nom de la zone ». */
  .azone-neuve-titre{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:11px;
  }
  /* Un exemple doit se lire comme un exemple. Sans ça, il passe pour une
     valeur déjà saisie — c'est exactement ce qui s'était produit. */
  .azone-nom::placeholder, .azone-villes::placeholder{
    color:var(--ink-soft); opacity:.55; font-style:italic; font-weight:400;
  }

/* La case « on se déplace » : une case et son mot sur la même ligne, alignés
   sur le texte et non sur le haut de la case. */
.compreq-case{display:flex; align-items:center; gap:8px; cursor:pointer;}
.compreq-case input{width:15px; height:15px; margin:0; flex-shrink:0;}
.compreq-case span{
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}

/* La deuxième porte — travailleur autonome. Même poids que la première dans
   la lecture, moins d'encre : c'est un choix, pas une option de repli. */
.company-cta.secondaire{
  background:var(--surface); color:var(--ink); border:1px solid var(--border);
}
.company-cta.secondaire:hover{border-color:var(--ink-soft);}
.company-card-lead.petite{font-size:12px; line-height:1.55; opacity:.85; margin-top:10px;}