/* ==================================================================
   UNIE BTP - Feuille de style principale
   Extraite de la maquette statique (index.html) pour être partagée
   par toutes les pages fonctionnelles (inscription, connexion,
   dashboard, etc.). Ne pas dupliquer ce CSS dans les pages PHP :
   toujours faire <link rel="stylesheet" href="assets/css/style.css">
   ================================================================== */

/* ==================== DESIGN TOKENS ==================== */
:root {
  --navy-950:#081420; --navy-900:#0d1e2b; --navy-800:#154053; --navy-700:#1e5470; --navy-600:#2d6b8a;
  --radar-500:#4db8e0; --radar-400:#6ec9eb; --radar-300:#9adcf0;
  --ocre-500:#d4a256; --ocre-400:#dfb373;
  --text-100:#f8fafc; --text-200:#e2e8f0; --text-300:#cbd5e1; --text-400:#94a3b8; --text-500:#64748b;
  --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --container:1240px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%}
body{font-family:var(--font-body);background:var(--navy-950);color:var(--text-200);line-height:1.6;min-height:100vh;width:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--text-100);letter-spacing:-0.02em;line-height:1.15}

/* ==================== TYPO ==================== */
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--radar-500);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:16px;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--radar-500)}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}

/* ==================== BUTTONS ==================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:var(--radius-md);font-weight:500;font-size:15px;transition:all 0.2s;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--radar-500);color:var(--navy-950);font-weight:600}
.btn-primary:hover{background:var(--radar-400);transform:translateY(-2px);box-shadow:0 0 40px rgba(94,177,255,0.15)}
.btn-ghost{background:transparent;color:var(--text-200);border:1px solid rgba(255,255,255,0.12)}
.btn-ghost:hover{background:rgba(255,255,255,0.05)}
.btn-outline{background:transparent;color:var(--radar-500);border:1px solid var(--radar-500)}
.btn-outline:hover{background:var(--radar-500);color:var(--navy-950)}
.btn-icon{width:18px;height:18px;transition:transform 0.2s}
.btn:hover .btn-icon{transform:translateX(3px)}
.btn:disabled{opacity:0.6;cursor:not-allowed}

/* ==================== LOGO ==================== */
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo-img{width:42px;height:42px;border-radius:8px;background:var(--navy-800);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0}
.nav-logo-img img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.nav-logo-text{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text-100);letter-spacing:-0.02em}
.nav-logo-text span{color:var(--radar-500)}

/* ==================== MENU HAMBURGER (mobile, tiroir latéral) ==================== */
.nav-links{display:flex;gap:10px}
.hamburger{display:none;width:40px;height:40px;background:var(--navy-800);border:1px solid rgba(255,255,255,0.08);border-radius:8px;align-items:center;justify-content:center;color:var(--text-100);cursor:pointer;flex-shrink:0}
.hamburger svg{width:20px;height:20px}
.mobile-menu{position:fixed;inset:0;z-index:9998;display:none}
.mobile-menu.open{display:block}
.mobile-menu-backdrop{position:absolute;inset:0;background:rgba(8,20,32,0.9);backdrop-filter:blur(6px)}
.mobile-menu-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--navy-900);border-left:1px solid rgba(255,255,255,0.06);padding:24px;overflow-y:auto}
.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:20px}
.mobile-menu-links{display:flex;flex-direction:column;gap:6px}
.mobile-menu-links a{padding:13px 14px;color:var(--text-200);font-size:15px;font-weight:500;border-radius:8px;cursor:pointer;transition:all 0.2s;display:block;text-align:left}
.mobile-menu-links a:hover{background:var(--navy-800);color:var(--radar-500)}
.mm-close{width:34px;height:34px;background:var(--navy-800);border:1px solid rgba(255,255,255,0.08);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-300);cursor:pointer;transition:all 0.2s}
.mm-close:hover{background:var(--danger);color:white;border-color:var(--danger)}
.mm-close svg{width:16px;height:16px}

/* ==================== AUTH PAGE ==================== */
.auth-page{min-height:100vh;width:100%;display:flex;flex-direction:column;background:radial-gradient(circle at top right,rgba(94,177,255,0.08) 0%,transparent 40%),radial-gradient(circle at bottom left,rgba(212,162,86,0.05) 0%,transparent 40%),var(--navy-950)}
/* Les enfants directs d'un flex-container en colonne ne rétrécissent pas
   sous leur "taille de contenu naturelle" par défaut (min-width:auto),
   ce qui peut pousser toute la page plus large que l'écran sur mobile
   même si chaque champ interne fait width:100%. On force le rétrécissement. */
.auth-page > *{min-width:0}
.auth-header{padding:20px 32px;display:flex;justify-content:space-between;align-items:center}
.auth-body{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px;min-width:0}

/* ==================== FORMS ==================== */
.form-container{max-width:480px;margin:0 auto;width:100%}
.form-container-lg{max-width:720px;margin:0 auto;width:100%}
.form-card{background:var(--navy-800);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);padding:40px;box-shadow:0 20px 60px rgba(0,0,0,0.5);max-width:100%}
.form-header{text-align:center;margin-bottom:32px}
.form-header h1{font-size:26px;color:var(--text-100);margin-bottom:10px;letter-spacing:-0.02em}
.form-header p{color:var(--text-400);font-size:14px}
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;color:var(--text-200);margin-bottom:8px;font-weight:500}
.form-label .required{color:var(--ocre-500);margin-left:2px}
.form-input,.form-textarea,.form-select{width:100%;padding:13px 15px;background:var(--navy-900);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-md);color:var(--text-100);font-family:var(--font-body);font-size:16px;transition:all 0.2s}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--radar-500);box-shadow:0 0 0 3px rgba(94,177,255,0.1)}
.form-input.field-error,.form-select.field-error{border-color:var(--danger)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-500)}
.form-textarea{min-height:110px;resize:vertical}
.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:40px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:6px 0}
.form-check input[type="checkbox"]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,0.2);border-radius:4px;background:var(--navy-900);cursor:pointer;position:relative;flex-shrink:0;margin-top:2px}
.form-check input[type="checkbox"]:checked{background:var(--radar-500);border-color:var(--radar-500)}
.form-check input[type="checkbox"]:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--navy-950);border-width:0 2px 2px 0;transform:rotate(45deg)}
.form-check label{font-size:12px;color:var(--text-300);line-height:1.5;cursor:pointer}
.form-check label a{color:var(--radar-500);text-decoration:underline;cursor:pointer}
.form-submit{width:100%;margin-top:14px;padding:15px 24px;font-size:15px;font-weight:600}
.form-footer{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.06);color:var(--text-400);font-size:13px}
.form-footer a{color:var(--radar-500);font-weight:500;margin-left:4px;cursor:pointer}
.form-section{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,0.06)}
.form-section:last-child{border-bottom:none}
.form-section-title{font-family:var(--font-display);font-size:17px;color:var(--text-100);margin-bottom:6px;display:flex;align-items:center;gap:12px}
.form-section-number{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:rgba(94,177,255,0.1);color:var(--radar-500);border-radius:50%;font-family:var(--font-mono);font-size:12px;font-weight:600}
.form-section-desc{color:var(--text-400);font-size:13px;margin-bottom:20px}
.field-error-msg{color:var(--danger);font-size:11px;margin-top:5px}
.alert{padding:14px 16px;border-radius:var(--radius-md);font-size:13px;margin-bottom:20px;border:1px solid transparent}
.alert-danger{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.25);color:#fca5a5}
.alert-success{background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.25);color:#6ee7b7}

/* ==================== BADGES ==================== */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase}
.badge-success{background:rgba(16,185,129,0.1);color:var(--success);border:1px solid rgba(16,185,129,0.2)}
.badge-primary{background:rgba(94,177,255,0.1);color:var(--radar-500);border:1px solid rgba(94,177,255,0.2)}

/* ==================== TABLEAU DE BORD ==================== */
.dash-header{padding:20px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,0.06)}
.dash-main{max-width:1100px;margin:0 auto;padding:40px 32px;width:100%;min-width:0}
.dash-welcome{margin-bottom:32px}
.dash-welcome h1{font-size:26px;margin-bottom:6px}
.dash-welcome p{color:var(--text-400);font-size:14px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.stat-card{background:var(--navy-800);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);padding:22px}
.stat-value{font-family:var(--font-display);font-size:28px;color:var(--text-100);font-weight:700}
.stat-label{color:var(--text-400);font-size:12px;text-transform:uppercase;letter-spacing:0.05em;margin-top:4px}
.dash-card{background:var(--navy-800);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);padding:28px;margin-bottom:24px;max-width:100%}
.dash-card h2{font-size:17px;margin-bottom:16px}
.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-size:14px;gap:12px}
.info-row:last-child{border-bottom:none}
.info-row span:first-child{color:var(--text-400)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{padding:4px 12px;background:rgba(94,177,255,0.1);color:var(--radar-500);border-radius:20px;font-size:12px}
.membre-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.membre-item{background:var(--navy-900);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-md);padding:14px}
.membre-item strong{display:block;font-size:14px;color:var(--text-100);margin-bottom:4px}
.membre-item span{font-size:12px;color:var(--text-400)}
.empty-state{color:var(--text-500);font-size:13px;font-style:italic}

/* ==================== BADGES STATUT (admin) ==================== */
.badge-warning{background:rgba(212,162,86,0.12);color:var(--ocre-500);border:1px solid rgba(212,162,86,0.3)}
.badge-danger{background:rgba(239,68,68,0.1);color:var(--danger);border:1px solid rgba(239,68,68,0.25)}
.badge-muted{background:rgba(148,163,184,0.1);color:var(--text-400);border:1px solid rgba(148,163,184,0.2)}

/* ==================== ADMIN : ONGLETS DE FILTRE ==================== */
.filter-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filter-tab{padding:8px 16px;border-radius:20px;font-size:13px;background:var(--navy-800);border:1px solid rgba(255,255,255,0.06);color:var(--text-300);transition:all 0.15s}
.filter-tab:hover{border-color:rgba(255,255,255,0.18)}
.filter-tab.active{background:var(--radar-500);color:var(--navy-950);font-weight:600;border-color:var(--radar-500)}
.filter-tab .count{opacity:0.75;margin-left:2px}

/* ==================== ADMIN : TABLEAU ==================== */
.table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{text-align:left;padding:10px 14px;color:var(--text-400);font-size:11px;text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid rgba(255,255,255,0.08);white-space:nowrap}
.admin-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.05);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.cell-actions{display:flex;gap:8px;flex-wrap:wrap}
.cell-actions form{display:inline-block}

/* ==================== ADMIN : BOUTONS COMPACTS ==================== */
.btn-sm{padding:8px 14px;font-size:13px}
.btn-danger{background:rgba(239,68,68,0.1);color:#fca5a5;border:1px solid rgba(239,68,68,0.3)}
.btn-danger:hover{background:rgba(239,68,68,0.18)}

/* ==================== DOCUMENTS ==================== */
.doc-list{display:flex;flex-direction:column;gap:10px}
.doc-item{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--navy-900);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-md);padding:14px 16px;flex-wrap:wrap}
.doc-item-info{display:flex;flex-direction:column;gap:4px}
.doc-item-info strong{font-size:14px;color:var(--text-100)}
.doc-item-meta{font-size:12px;color:var(--text-400)}

/* ==================== OPPORTUNITÉS ==================== */
.opp-list{display:flex;flex-direction:column;gap:16px}
.opp-item{background:var(--navy-900);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);padding:20px}
.opp-item-header{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.opp-item-title{font-family:var(--font-display);font-size:17px;color:var(--text-100);margin-bottom:6px;line-height:1.3}
.opp-item-meta{font-size:12px;color:var(--text-400)}
.opp-item-row{display:flex;gap:28px;flex-wrap:wrap;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06);margin-top:14px}
.opp-item-label{font-family:var(--font-mono);font-size:9px;color:var(--text-500);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:3px}
.opp-item-value{font-size:13px;color:var(--text-100);font-weight:500}
.opp-item-value.value-ocre{color:var(--ocre-500)}
.opp-item-value.value-radar{color:var(--radar-500)}

/* ==================== RESPONSIVE ==================== */
@media (max-width:768px){
  .container{padding:0 16px}
  .form-card{padding:24px 18px}
  .form-header h1{font-size:22px}
  .form-row{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .dash-main{padding:28px 16px}

  /* En-têtes (dash-header, auth-header) : le logo + les liens ne
     tiennent pas sur une seule ligne en dessous de 768px, on les
     empile plutôt que de les laisser déborder hors de l'écran. */
  .dash-header,.auth-header{padding:16px}
  .dash-header > a.btn,.auth-header > a.btn{padding:10px 14px;font-size:13px}
  .nav-logo-text{font-size:16px}

  /* Le bouton ☰ apparaît, la liste de liens à côté du logo se cache :
     elle est désormais dans le tiroir latéral (.mobile-menu). */
  .hamburger{display:flex}
  .dash-header .nav-links{display:none}

  .dash-welcome h1{font-size:22px}

  /* Liste de documents : info + actions empilées au lieu de côte à côte */
  .doc-item{flex-direction:column;align-items:stretch}
  .doc-item .cell-actions{flex-direction:row}
  .doc-item .cell-actions .btn{width:auto;flex:1}
}

@media (max-width:400px){
  .nav-logo-text{display:none}
}

/* Tableau admin sous 700px : trop de colonnes pour tenir à plat sans
   défilement horizontal inconfortable. Chaque ligne devient une fiche
   empilée (comme une carte), avec le nom de la colonne en petit au-dessus
   de sa valeur (via data-label posé sur chaque <td> dans la vue PHP). */
@media (max-width:700px){
  .table-wrap{overflow-x:visible}
  .admin-table{border:none}
  .admin-table thead{display:none}
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
  .admin-table tr{margin-bottom:14px;border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-md);padding:14px;background:var(--navy-900)}
  .admin-table tr:last-child{margin-bottom:0}
  .admin-table td{padding:6px 0;border-bottom:none}
  .admin-table td::before{content:attr(data-label);display:block;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-400);margin-bottom:3px}
  .cell-actions{flex-direction:column;align-items:stretch;margin-top:4px}
  .cell-actions .btn{width:100%}
}