:root{
  /* --- Palette de marque, dérivée du nouveau logo Silensia --- */
  --brume: #F5F7F5;        /* fond général */
  --nacre: #FFFFFF;        /* panneaux */
  --lagon: #1D7C7C;        /* accent primaire (turquoise du logo, assombri pour le contraste texte) */
  --lagon-pale: #DFF6F6;   /* turquoise du logo, en teinte pastel pour les fonds */
  --sauge: #9E882E;        /* accent secondaire (jaune du logo, assombri) */
  --sauge-pale: #F5F0D6;   /* jaune du logo, en teinte pastel */
  --encre: #073B44;        /* teinte foncée de contraste (bandeaux, CTA, titres) */
  --corail: #C05548;       /* alerte (assombri pour le contraste texte) */
  --vert: #4C8C6A;         /* validation (assombri pour le contraste texte) */

  --text: #16383E;
  --text-muted: #5C7278;
  --text-faint: #6B8183;
  --border: #DFE6E4;
  --border-soft: #EAEFED;

  --radius: 12px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 1px 1px, rgba(7,59,68,0.045) 1px, transparent 0) 0 0/26px 26px,
    var(--brume);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

::selection{ background:var(--lagon-pale); color:var(--encre); }
a{ color:var(--lagon); }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:36px 24px 64px;
}

/* ---------- Header ---------- */
header.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  max-width:1180px;
  margin:0 auto 22px;
  padding:32px 24px 20px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{ height:56px; width:auto; display:block; }

/* ---------- Barre d'onglets persistante (espace pro) ---------- */
.tab-bar{
  display:flex;
  align-items:center;
  gap:4px;
  border-bottom:1px solid var(--border);
  margin:-20px 0 28px;
  padding:0;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:40;
  background:var(--brume);
  transition:box-shadow 0.2s ease;
}
.tab-bar.scrolled{ box-shadow:0 6px 16px rgba(7,59,68,0.08); border-bottom-color:transparent; }
.tab-bar-toggle{ display:none; }
.tab-bar-items{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.tab-bar-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:11px 16px;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  color:var(--text-muted);
  text-decoration:none;
  border-bottom:2px solid transparent;
  position:relative;
  top:1px;
}
.tab-bar-item:hover{ color:var(--encre); }
.tab-bar-item.active{ color:var(--encre); font-weight:600; border-bottom-color:var(--lagon); }
.tab-badge{
  background:var(--corail);
  color:#fff;
  font-size:10px;
  font-weight:700;
  border-radius:9px;
  padding:1px 6px;
  min-width:15px;
  text-align:center;
  display:none;
}
.tab-badge.show{ display:inline-block; }
.back-to-site{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  color:var(--text-muted);
  text-decoration:none;
  border:1px solid var(--border);
  padding:7px 12px;
  border-radius:7px;
}
.back-to-site:hover{ color:var(--encre); border-color:var(--lagon); }

.account-area{ position:relative; display:flex; align-items:center; gap:10px; }
.cart-area{ position:relative; }
.cart-btn{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--brume);
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 14px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
}
.cart-btn:hover{ border-color:var(--lagon); }
.cart-badge{
  background:var(--encre);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  border-radius:10px;
  padding:1px 6px;
  min-width:16px;
  text-align:center;
}
.cart-panel{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:var(--nacre);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(7,59,68,0.12);
  width:340px;
  padding:16px;
  z-index:20;
}
.cart-panel.open{ display:block; }
.cart-panel-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  color:var(--encre);
  margin-bottom:10px;
}
.cart-items{ display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; margin-bottom:10px; }
.cart-empty{ font-size:12.5px; color:var(--text-faint); text-align:center; padding:12px 0; }
.cart-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  background:var(--brume);
  border-radius:7px;
  padding:9px 10px;
}
.cart-item-info{ font-size:12px; line-height:1.5; }
.cart-item-info strong{ color:var(--encre); font-family:var(--font-mono); }
.cart-item-remove{
  background:none; border:none; color:var(--corail); cursor:pointer; font-size:12px; padding:2px 4px; flex:none;
}
.cart-total{
  display:flex; justify-content:space-between; font-weight:700; font-size:13.5px; color:var(--encre);
  padding-top:10px; border-top:1px solid var(--border-soft); margin-bottom:12px;
}
.cart-send-btn{
  width:100%; background:var(--encre); color:#fff; border:none; border-radius:8px;
  padding:11px; font-weight:600; font-size:13px; cursor:pointer; font-family:var(--font-body);
}
.cart-send-btn:hover{ filter:brightness(1.1); }
.cart-send-btn:disabled{ opacity:0.6; cursor:not-allowed; }
.cart-feedback{ font-size:12px; margin-top:8px; text-align:center; }
.cart-feedback.success{ color:var(--vert); }
.cart-feedback.error{ color:var(--corail); }

.avatar-btn{
  width:40px; height:40px;
  border-radius:50%;
  background:var(--encre);
  color:#fff;
  border:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.avatar-btn:hover{ filter:brightness(1.15); }
.avatar-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:var(--nacre);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(7,59,68,0.12);
  min-width:200px;
  padding:8px;
  z-index:90;
}
.avatar-menu.open{ display:block; }
.avatar-menu-who{
  padding:8px 10px 10px;
  font-size:12px;
  color:var(--text-faint);
  border-bottom:1px solid var(--border-soft);
  margin-bottom:6px;
  word-break:break-word;
}
.avatar-menu-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:9px 10px;
  border-radius:7px;
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
}
.avatar-menu-item:hover{ background:var(--brume); }
.avatar-menu-sep{ height:1px; background:var(--border-soft); margin:6px 0; }
.avatar-menu-logout{ color:var(--corail); }

/* ===== Page d'accueil de l'espace pro ===== */
.hub-greeting{ margin-bottom:24px; }
.hub-greeting-title{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--encre); }
.hub-greeting-sub{ font-size:13.5px; color:var(--text-muted); margin-top:2px; }
.hub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .hub-grid{ grid-template-columns:1fr; } }
.hub-card-primary{
  grid-column:1/-1;
  background:var(--encre);
  border-radius:12px;
  padding:24px 26px;
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
  cursor:pointer;
  border:none;
}
.hub-card-primary:hover{ filter:brightness(1.08); }
.hub-card-primary .hub-icon{ font-size:30px; color:var(--lagon-pale); }
.hub-card-primary .hub-card-title{ font-family:var(--font-display); font-weight:600; font-size:16px; color:#fff; }
.hub-card-primary .hub-card-sub{ font-size:12.5px; color:#9FC4C9; margin-top:2px; }
.hub-card{
  background:var(--nacre);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 20px;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  display:block;
}
.hub-card:hover{ border-color:var(--lagon); }
.hub-card .hub-icon{ font-size:22px; color:var(--lagon); }
.hub-card .hub-card-title{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--encre); margin-top:10px; }
.hub-card .hub-card-sub{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }
.hub-card-badge{
  position:absolute; top:14px; right:16px;
  background:var(--corail); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:10px; padding:1px 7px;
}

h1.hero{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(22px,3vw,30px);
  margin:0 0 8px;
  letter-spacing:-0.01em;
  color:var(--encre);
}
p.hero-sub{
  color:var(--text-muted);
  max-width:620px;
  margin:0 0 32px;
  font-size:15px;
}

/* ---------- Layout ---------- */
.grid{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:20px;
  align-items:start;
}
@media (max-width: 880px){
  .grid{ grid-template-columns: 1fr; }
}

.panel{
  background:var(--nacre);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 1px 2px rgba(7,59,68,0.04), 0 8px 24px rgba(7,59,68,0.03);
}

.panel-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:8px;
}
.panel-title .idx{ color:var(--lagon); }

/* ---------- Form controls ---------- */
.field{ margin-bottom:20px; }
.field:last-child{ margin-bottom:0; }
label{
  display:block;
  font-size:12.5px;
  font-weight:500;
  color:var(--text-muted);
  margin-bottom:8px;
}
select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:var(--brume) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%235C7278" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 14px center;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:9px;
  padding:12px 38px 12px 14px;
  font-family:var(--font-body);
  font-size:14.5px;
  cursor:pointer;
  transition:border-color .15s ease;
}
select:hover{ border-color:var(--lagon); }
select:focus{ outline:none; border-color:var(--lagon); box-shadow:0 0 0 3px var(--lagon-pale); }
select:disabled{ opacity:0.45; cursor:not-allowed; }

.toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.toggle button{
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:500;
  padding:9px 9px 11px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--brume);
  color:var(--text-muted);
  cursor:pointer;
  transition:all .15s ease;
  text-align:center;
  line-height:1.35;
}
.toggle button .t-thumb{
  display:block;
  width:100%;
  height:64px;
  object-fit:cover;
  border-radius:6px;
  margin-bottom:8px;
  filter:grayscale(0.4) opacity(0.85);
  transition:filter .15s ease;
}
.toggle button.active .t-thumb{ filter:none; }
.toggle button .t-sub{
  display:block;
  font-size:10.5px;
  color:var(--text-faint);
  font-weight:400;
  margin-top:2px;
}
.toggle button:hover{ border-color:var(--lagon); color:var(--text); }
.toggle button.active{
  background:var(--lagon-pale);
  border-color:var(--lagon);
  color:var(--encre);
}
.toggle button.active .t-sub{ color:var(--lagon); }

.manual-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:18px;
}
.manual-grid-4{ grid-template-columns:repeat(2, 1fr); }
.manual-grid label{
  display:block;
  font-size:12.5px;
  color:var(--text-muted);
  margin-bottom:6px;
}
.manual-grid input{
  width:100%;
  background:var(--brume);
  border:1px solid var(--border);
  border-radius:8px;
  padding:11px 12px;
  font-family:var(--font-mono);
  font-size:13.5px;
  color:var(--text);
}
.manual-grid input:focus{ outline:none; border-color:var(--lagon); }
.manual-note{
  font-size:11.5px;
  color:var(--text-faint);
  margin:-8px 0 22px;
  line-height:1.5;
}

.dim-confirm{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--sauge-pale);
  border:1px solid var(--sauge);
  border-radius:9px;
  padding:14px 16px;
  margin-bottom:22px;
  cursor:pointer;
}
.dim-confirm input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--lagon); }
.dim-confirm-text{ font-size:12.5px; color:var(--text); line-height:1.5; }
.dim-confirm-text strong{ display:block; margin-bottom:2px; }
.dim-confirm.confirmed{ background:rgba(76,140,106,0.1); border-color:var(--vert); }

.propose-note{
  background:var(--lagon-pale);
  border:1px solid var(--lagon);
  border-radius:9px;
  padding:14px 16px;
  margin-bottom:22px;
  font-size:12.5px;
  color:var(--encre);
  line-height:1.5;
}

.devis-cta{ margin-bottom:24px; }
.devis-btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
.billing-form{
  background:var(--panel-raised);
  border:1px solid var(--border);
  border-radius:9px;
  padding:16px;
  margin-top:12px;
}
.billing-form-title{
  font-size:12.5px;
  font-weight:600;
  color:var(--encre);
  margin-bottom:12px;
  line-height:1.4;
}
.devis-btn{
  background:var(--encre);
  color:#fff;
  border:none;
  border-radius:9px;
  padding:13px 24px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  font-family:var(--font-body);
}
.devis-btn:hover{ filter:brightness(1.1); }
.devis-btn:disabled{ opacity:0.6; cursor:not-allowed; }
.devis-btn-secondary{
  background:var(--nacre);
  color:var(--encre);
  border:1px solid var(--border);
  border-radius:9px;
  padding:13px 20px;
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  font-family:var(--font-body);
}
.devis-btn-secondary:hover{ border-color:var(--lagon); }
.devis-btn-secondary:disabled{ opacity:0.6; cursor:not-allowed; }
.devis-feedback{ font-size:12.5px; margin-top:10px; }
.devis-feedback.success{ color:var(--vert); }
.devis-feedback.error{ color:var(--corail); }

.search-field{ position:relative; }
.search-field input{
  width:100%;
  background:var(--brume);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text);
}
.search-field input:focus{ outline:none; border-color:var(--lagon); }
.search-results{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0; right:0;
  background:var(--nacre);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(7,59,68,0.12);
  max-height:240px;
  overflow-y:auto;
  z-index:15;
}
.search-results.open{ display:block; }
.search-result-item{
  padding:9px 12px;
  cursor:pointer;
  font-size:12.5px;
  border-bottom:1px solid var(--border-soft);
}
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ background:var(--brume); }
.search-result-item .sr-modele{ font-family:var(--font-mono); font-weight:600; color:var(--encre); }
.search-result-item .sr-fab{ color:var(--text-faint); margin-left:6px; }
.search-empty{ padding:10px 12px; font-size:12px; color:var(--text-faint); }

.projets-section{ margin-top:24px; padding-top:20px; border-top:1px solid var(--border-soft); }
.projets-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:10px;
}
.projets-empty{ font-size:12px; color:var(--text-faint); }
.projets-list{ display:flex; flex-direction:column; gap:8px; }
.projet-groupe{ border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.projet-groupe-header{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--nacre);
  border:none;
  padding:10px 12px;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
}
.projet-groupe-header:hover{ background:var(--brume); }
.projet-groupe-header::after{ content:'▾'; color:var(--text-faint); font-weight:400; margin-left:8px; }
.projet-groupe-header.open::after{ content:'▴'; }
.projet-groupe-count{ font-size:11px; color:var(--text-faint); font-weight:400; }
.projet-groupe-items{ display:flex; flex-direction:column; gap:6px; padding:8px; background:var(--brume); }
.projet-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--brume);
  border:1px solid var(--border);
  border-radius:7px;
  padding:8px 10px;
}
.projet-item-nom{ font-size:12.5px; font-weight:500; color:var(--text); }
.projet-item-actions{ display:flex; gap:6px; }
.projet-item-actions button{
  background:none; border:none; cursor:pointer; font-size:11.5px; padding:3px 6px; border-radius:5px;
}
.projet-charger{ color:var(--lagon); }
.projet-charger:hover{ background:var(--lagon-pale); }
.projet-suppr{ color:var(--corail); }
.projet-suppr:hover{ background:rgba(192,85,72,0.1); }

.save-projet-form{ display:flex; gap:8px; margin-top:10px; }
.save-projet-form input{
  flex:1; background:var(--brume); border:1px solid var(--border); border-radius:7px;
  padding:9px 11px; font-family:var(--font-body); font-size:13px; color:var(--text);
}
.save-projet-form input:focus{ outline:none; border-color:var(--lagon); }
.save-projet-form button{
  background:var(--lagon); color:#fff; border:none; border-radius:7px; padding:0 16px;
  font-weight:600; font-size:12.5px; cursor:pointer; font-family:var(--font-body);
}
.save-projet-form button:hover{ filter:brightness(1.1); }

.qte-stepper{ display:flex; align-items:stretch; }
.qte-btn{
  width:40px;
  background:var(--brume);
  border:1px solid var(--border);
  color:var(--text);
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  font-family:var(--font-body);
}
.qte-btn:first-child{ border-radius:8px 0 0 8px; border-right:none; }
.qte-btn:last-child{ border-radius:0 8px 8px 0; border-left:none; }
.qte-btn:hover{ background:var(--lagon-pale); color:var(--encre); }
.qte-stepper input{
  flex:1;
  min-width:0;
  text-align:center;
  border:1px solid var(--border);
  background:var(--brume);
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text);
  -moz-appearance:textfield;
}
.qte-stepper input::-webkit-outer-spin-button,
.qte-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qte-stepper input:focus{ outline:none; border-color:var(--lagon); position:relative; z-index:1; }

.checkbox-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--text);
  line-height:1.5;
  cursor:pointer;
}
.checkbox-label input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--lagon); }

.hint{
  font-size:12px;
  color:var(--text-faint);
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--border-soft);
  line-height:1.6;
}

/* ---------- Empty state ---------- */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 24px;
  color:var(--text-faint);
  gap:14px;
}
.empty-state svg{ opacity:0.6; }
.empty-state .e-title{ font-family:var(--font-display); font-size:17px; color:var(--text-muted); font-weight:600; }
.empty-state .e-sub{ font-size:13.5px; max-width:320px; }

/* ---------- Result header ---------- */
.result-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.ref-block .ref-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:6px;
}
.ref-block .ref-code{
  font-family:var(--font-mono);
  font-size:30px;
  font-weight:600;
  color:var(--encre);
  letter-spacing:0.01em;
}
.ref-block .ref-type{
  font-size:13px;
  color:var(--text-muted);
  margin-top:4px;
}
.price-block{ text-align:right; }
.price-block .p-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:6px;
}
.price-block .p-value{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  color:var(--encre);
}
.price-block .p-sub{ font-size:12px; color:var(--text-faint); margin-top:2px;}

.badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:500;
  padding:7px 12px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--brume);
}
.badge .bd-dot{ width:7px;height:7px;border-radius:50%; flex:none; }
.badge.good{ background:rgba(76,140,106,0.1); border-color:rgba(76,140,106,0.4); }
.badge.good .bd-dot{ background:var(--vert); }
.badge.warn{ background:var(--sauge-pale); border-color:var(--sauge); }
.badge.warn .bd-dot{ background:var(--sauge); }
.badge.bad{ background:rgba(192,85,72,0.1); border-color:rgba(192,85,72,0.4); }
.badge.bad .bd-dot{ background:var(--corail); }

/* ---------- Spec grid ---------- */
.spec-section{ margin-bottom:26px; }
.spec-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:1px;
  background:var(--border-soft);
  border:1px solid var(--border-soft);
  border-radius:9px;
  overflow:hidden;
}
.spec-cell{
  background:var(--brume);
  padding:13px 14px;
}
.spec-cell .sc-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:6px;
}
.spec-cell .sc-value{
  font-family:var(--font-mono);
  font-size:14.5px;
  font-weight:500;
  color:var(--text);
}
.spec-cell .sc-value.flag{ color:var(--corail); }

/* ---------- Spectrum analyzer ---------- */
.spectrum-wrap{
  background:var(--brume);
  border:1px solid var(--border-soft);
  border-radius:11px;
  padding:22px 20px 16px;
}
.spectrum-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:10px;
}
.spectrum-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.spectrum-global{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--lagon);
  display:flex;
  align-items:center;
  gap:7px;
}

.bars{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:10px;
  align-items:end;
  height:150px;
  padding:0 4px;
  position:relative;
}
.bars::before{
  content:'';
  position:absolute;
  left:0; right:0; top:50%;
  border-top:1px dashed var(--border);
}
.bar-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  position:relative;
}
.bar-val{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  margin-bottom:6px;
  color:var(--text-muted);
  white-space:nowrap;
}
.bar-shape{
  width:100%;
  max-width:26px;
  border-radius:3px;
  background:repeating-linear-gradient(
    to top,
    var(--lagon) 0px, var(--lagon) 3px,
    transparent 3px, transparent 5px
  );
  transition:height .5s cubic-bezier(.2,.8,.2,1);
}
.bar-shape.rise{
  background:repeating-linear-gradient(
    to top,
    var(--corail) 0px, var(--corail) 3px,
    transparent 3px, transparent 5px
  );
}
.bar-freq{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-faint);
  margin-top:8px;
}
.spectrum-note{
  font-size:11.5px;
  color:var(--text-faint);
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border-soft);
  line-height:1.6;
}

/* ---------- Footer CTA ---------- */
.cta{
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  padding:20px 22px;
  border-radius:var(--radius);
  background:var(--encre);
}
.cta-text{ font-size:13.5px; color:rgba(255,255,255,0.75); }
.cta-text strong{ color:#fff; font-weight:600; }
.cta a.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:var(--encre);
  background:var(--lagon-pale);
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
  transition:filter .15s ease;
}
.cta a.btn:hover{ filter:brightness(0.96); }

footer.page-footer{
  margin-top:40px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
  letter-spacing:0.04em;
}

/* ---------- En-tête simple : tiroir, logo, compte — alignés en ligne,
   défile normalement avec la page, ni fixe ni sticky. ---------- */

.mobile-nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-direction:column;
  width:40px;
  height:40px;
  flex:none;
  background:var(--nacre);
  border:1px solid var(--border);
  border-radius:9px;
  box-shadow:0 2px 8px rgba(7,59,68,0.06);
  cursor:pointer;
}
.mobile-nav-toggle:hover{ border-color:var(--lagon); }
body.nav-open .mobile-nav-toggle{ visibility:hidden; }
.mobile-nav-toggle span{
  display:block;
  width:16px;
  height:2px;
  background:var(--encre);
  border-radius:1px;
}

.mobile-nav-drawer{
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:270px;
  background:var(--nacre);
  border-right:1px solid var(--border);
  box-shadow:6px 0 24px rgba(7,59,68,0.1);
  z-index:65;
  padding:24px 0;
  transform:translateX(-100%);
  transition:transform 0.28s ease;
  overflow-y:auto;
  visibility:hidden;
}
body.nav-open .mobile-nav-drawer{ transform:translateX(0); visibility:visible; }

.mobile-nav-close{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 20px 20px;
  padding:9px 14px;
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
  cursor:pointer;
  align-self:flex-start;
}
.mobile-nav-close:hover{ color:var(--encre); border-color:var(--lagon); }

.mobile-nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 12px 8px;
  padding:11px 14px;
  background:var(--nacre);
  border:1px solid var(--border);
  border-radius:10px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:13.5px;
  color:var(--text);
  text-decoration:none;
}
.mobile-nav-item:hover{ border-color:var(--lagon); }
.mobile-nav-item.active{
  color:var(--encre);
  font-weight:600;
  background:var(--lagon-pale);
  border-color:var(--lagon);
}
.mobile-nav-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:8px;
  flex:none;
}
.mobile-nav-icon--lagon{ background:var(--lagon); color:#fff; }
.mobile-nav-icon--sauge{ background:var(--sauge); color:#fff; }

/* Léger voile derrière le tiroir : clique n'importe où pour refermer,
   sans jamais décaler le contenu de la page. */
.mobile-nav-backdrop{
  position:fixed; inset:0; background:rgba(7,59,68,0.12);
  z-index:64; opacity:0; visibility:hidden; transition:opacity 0.2s ease;
}
body.nav-open .mobile-nav-backdrop{ opacity:1; visibility:visible; }

/* ---------- Mobile (espace pro + formulaires partagés) ---------- */
@media (max-width: 640px){
  .wrap{ padding:20px 16px 40px; }

  header.top{ padding:14px 0; }
  .mobile-nav-toggle{ width:36px; height:36px; }
  .brand{ gap:10px; }
  .brand-logo{ display:none; }
  .avatar-btn{ width:36px; height:36px; font-size:14px; }
  .avatar-menu{ min-width:180px; }

  .mobile-nav-drawer{ width:230px; }

  .panel{ padding:18px 16px; }
  .manual-grid{ grid-template-columns:1fr; gap:12px; }
  .manual-grid-4{ grid-template-columns:1fr 1fr; }

  .devis-btn-row{ flex-direction:column; }
  .devis-btn, .devis-btn-secondary{ width:100%; text-align:center; }

  .result-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .price-block{ text-align:left; }

  .hub-hero-content{ padding:22px 20px; max-width:none; }
  .hub-hero-title{ font-size:19px; }
}

/* ---------- Infobulle "?" réutilisable ---------- */
.info-tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid var(--border);
  color:var(--text-faint);
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:600;
  cursor:help;
  flex:none;
  background:var(--nacre);
}
.info-tip:hover{ border-color:var(--lagon); color:var(--lagon); }
.info-tip-content{
  display:none;
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  width:230px;
  background:var(--encre);
  color:#fff;
  font-size:11.5px;
  font-weight:400;
  line-height:1.55;
  padding:10px 12px;
  border-radius:8px;
  z-index:100;
  box-shadow:0 6px 18px rgba(7,59,68,0.2);
  text-align:left;
}
.info-tip:hover .info-tip-content,
.info-tip.open .info-tip-content{ display:block; }