* { margin:0; padding:0; box-sizing:border-box; }
  :root{
    --bg:#0a0f0d;
    --panel:#0f1a15;
    --panel-raised:#122019;
    --border:#1f3a2c;
    --copper:#c98a3d;
    --copper-bright:#e8a94f;
    --led:#2dd4bf;
    --led-dim:#1a9c8a;
    --text:#e5ede8;
    --text-dim:#7d9186;
    --danger:#ff5d5d;
    --font-display:'DotGothic16', monospace;
    --font-body:'Inter', -apple-system, sans-serif;
  }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.6;
    font-size:15px;
  }
  a{ color:inherit; text-decoration:none; }
  .hidden{ display:none !important; }

  /* QUADRILLAGE DE FOND, avec effet de révélation au passage de la souris */
  .grid-bg, .grid-bg-glow{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:
      linear-gradient(var(--grid-color) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size:48px 48px;
  }
  .grid-bg{
    --grid-color:var(--border);
    opacity:0.5;
  }
  .grid-bg-glow{
    --grid-color:var(--led);
    opacity:0.9;
    -webkit-mask-image:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%), black 0%, transparent 100%);
    mask-image:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%), black 0%, transparent 100%);
  }


  /* Encoche "pin 1" façon puce électronique, utilisée sur les cartes */
  .chip-card{
    position:relative;
    background:var(--panel);
    border:1px solid var(--border);
    border-top:2px solid var(--copper);
    clip-path:polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
  }
  .chip-card::before{
    content:'';
    position:absolute; top:0; left:0;
    width:14px; height:14px;
    background:var(--copper);
    clip-path:polygon(0 0, 100% 0, 0 100%);
    opacity:0.5;
  }

  /* HEADER */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(10,15,13,0.95);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(6px);
  }
  .nav-wrap{
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px;
  }
  .logo{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:1px; }
  .logo span{ color:var(--copper-bright); }
  nav ul{ display:flex; gap:28px; list-style:none; }
  nav a{ color:var(--text-dim); font-size:0.9rem; font-weight:500; transition:color .2s; }
  nav a:hover{ color:var(--text); }

  /* HERO */
  .hero{
    position:relative;
    padding:90px 24px 70px;
    text-align:center;
    border-bottom:1px solid var(--border);
    overflow:hidden;
  }
  .hero-inner{ position:relative; z-index:1; }
  .hero h1{
    font-family:var(--font-display);
    font-size:2.4rem; line-height:1.35; margin-bottom:20px; font-weight:400;
    color:var(--copper-bright);
    text-shadow:0 0 24px rgba(201,138,61,0.35);
  }
  .hero p{
    color:var(--text-dim); font-size:1.05rem; max-width:600px; margin:0 auto 36px;
  }
  .hero-ctas{ display:flex; gap:16px; justify-content:center; margin-bottom:60px; flex-wrap:wrap; }
  .btn{
    padding:13px 30px; font-weight:600; font-size:0.92rem;
    cursor:pointer; border:1px solid transparent; transition:all .2s;
    font-family:var(--font-body);
    clip-path:polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  }
  .btn-primary{ background:var(--copper); color:#0a0f0d; }
  .btn-primary:hover{ background:var(--copper-bright); }
  .btn-secondary{ background:transparent; border:1px solid var(--border); color:var(--text); }
  .btn-secondary:hover{ border-color:var(--led); color:var(--led); }

  .btn-danger{ background:transparent; border:1px solid #f85149; color:#f85149; }
  .btn-danger:hover{ background:#f85149; color:#0a0f0d; }

  /* LEVEL SELECTOR (les 3 boutons de départ) */
  .levels{
    display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
    max-width:920px; margin:0 auto;
  }
  .level-card{
    padding:26px 26px 22px; width:220px; cursor:pointer; transition:all .2s; text-align:left;
  }
  .level-card:hover{ border-top-color:var(--led); transform:translateY(-3px); }
  .level-card:hover::before{ background:var(--led); }
  .level-card.active{
    border-top-color:var(--led); background:var(--panel-raised);
    box-shadow:0 0 0 1px var(--led);
  }
  .level-card.active::before{ background:var(--led); }
  .level-tag{
    font-family:var(--font-display); font-size:0.75rem; color:var(--text-dim);
    letter-spacing:1px; display:block; margin-bottom:10px;
  }
  .level-card h3{ font-size:1.05rem; margin-bottom:8px; font-weight:700; }
  .level-card p{ font-size:0.85rem; color:var(--text-dim); margin:0; }

  /* SECTIONS COMMUNES */
  section{ max-width:1200px; margin:0 auto; padding:80px 24px; position:relative; }
  .section-title{ margin-bottom:48px; }
  .section-title .eyebrow{
    font-family:var(--font-display); font-size:0.85rem; color:var(--copper);
    display:block; margin-bottom:10px;
  }
  .section-title h2{ font-size:1.9rem; margin-bottom:12px; font-weight:800; }
  .section-title p{ color:var(--text-dim); font-size:0.98rem; }

  /* STATS STRIP */
  .stats-strip{
    display:flex; flex-wrap:wrap; justify-content:center; gap:0;
    max-width:900px; margin:0 auto; border:1px solid var(--border);
  }
  .stat{
    flex:1; min-width:160px; text-align:center; padding:22px 16px;
    border-right:1px solid var(--border);
  }
  .stat:last-child{ border-right:none; }
  .stat .num{ font-family:var(--font-display); font-size:1.5rem; color:var(--led); display:block; margin-bottom:4px; }
  .stat .label{ font-size:0.78rem; color:var(--text-dim); }

  /* FEATURES */
  .features-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;
  }
  .feature-card{ padding:26px; }
  .feature-card .num-tag{
    font-family:var(--font-display); font-size:0.8rem; color:var(--copper);
    display:block; margin-bottom:12px;
  }
  .feature-card h3{ margin-bottom:10px; font-size:1.05rem; font-weight:700; }
  .feature-card p{ color:var(--text-dim); font-size:0.88rem; }

  /* HOW IT WORKS */
  .steps{ display:flex; gap:0; flex-wrap:wrap; }
  .step{
    flex:1; min-width:220px; padding:28px; border-right:1px solid var(--border);
  }
  .step:last-child{ border-right:none; }
  .step-num{
    font-family:var(--font-display); font-size:2rem; color:var(--copper);
    margin-bottom:14px; display:block;
  }
  .step h3{ margin-bottom:8px; font-size:1rem; font-weight:700; }
  .step p{ color:var(--text-dim); font-size:0.86rem; }

  /* CONFIGURATOR */
  #configurateur{ border-top:1px solid var(--border); }
  .config-hint{
    display:none; background:rgba(45,212,191,0.08); border:1px solid var(--led);
    color:var(--led); padding:14px 18px; margin-bottom:28px;
    font-size:0.88rem;
  }
  .config-hint.show{ display:block; }
  .category-section{ margin-bottom:36px; }
  .category-section h3{
    margin-bottom:16px; font-size:0.95rem; color:var(--copper-bright);
    font-family:var(--font-display); letter-spacing:0.5px;
  }
  .category-toggle{
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; user-select:none;
  }
  .category-toggle .toggle-arrow{ color:var(--text-dim); font-size:0.8rem; font-family:var(--font-body); }
  .components-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;
  }
  .component-btn{
    background:var(--panel); border:1px solid var(--border); border-left:2px solid transparent;
    padding:14px; text-align:left; cursor:pointer; color:var(--text);
    display:flex; flex-direction:column; gap:5px; transition:all .2s;
  }
  .component-btn:hover{ border-left-color:var(--led); }
  .component-btn.selected{ border-left-color:var(--copper); background:var(--panel-raised); }
  .component-btn .component-thumb{
    width:100%; height:100px; object-fit:contain; background:var(--bg);
    border:1px solid var(--border); border-radius:4px; margin-bottom:2px;
  }
  .component-btn .name{ font-weight:600; font-size:0.92rem; }
  .component-btn .specs{ font-size:0.76rem; color:var(--text-dim); }
  .component-btn .price{ font-family:var(--font-display); font-size:0.9rem; color:var(--copper-bright); }
  .component-btn .detail-btn{
    align-self:flex-start; margin-top:4px; background:transparent; border:1px solid var(--border);
    color:var(--text-dim); font-size:0.7rem; padding:4px 8px; cursor:pointer; font-family:var(--font-body);
  }
  .component-btn .detail-btn:hover{ border-color:var(--led); color:var(--led); }

  /* MODAL DÉTAIL COMPOSANT */
  .modal-overlay{
    display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.65);
    align-items:center; justify-content:center; padding:20px;
  }
  .modal-overlay.show{ display:flex; }
  .modal-box{ max-width:520px; width:100%; max-height:80vh; overflow-y:auto; padding:28px; position:relative; }
  .modal-close{
    position:absolute; top:14px; right:14px; background:transparent; border:none;
    color:var(--text-dim); font-size:1.1rem; cursor:pointer; line-height:1;
  }
  .modal-close:hover{ color:var(--danger); }
  .modal-box h3{ font-size:1.2rem; margin-bottom:6px; padding-right:24px; }
  .detail-image{
    width:100%; max-height:180px; object-fit:contain; background:var(--bg);
    border:1px solid var(--border); border-radius:6px; margin:10px 0;
  }
  .modal-box h4{ font-size:0.85rem; color:var(--copper-bright); font-family:var(--font-display); font-weight:400; }
  .detail-price-ref{ color:var(--text-dim); font-size:0.85rem; margin-bottom:16px; }
  .detail-specs, .detail-prices{ display:flex; flex-direction:column; gap:2px; }
  .detail-row{
    display:flex; justify-content:space-between; gap:12px; padding:8px 0;
    border-bottom:1px solid var(--border); font-size:0.88rem;
  }
  .detail-row:last-child{ border-bottom:none; }
  .detail-row .k{ color:var(--text-dim); text-transform:capitalize; }
  .detail-row .v{ font-weight:600; text-align:right; }

  .build-preview{ padding:26px; margin-top:36px; }
  .build-preview h3{ font-family:var(--font-display); font-size:1rem; margin-bottom:14px; font-weight:400; }
  .build-preview p{ font-size:0.9rem; padding:4px 0; }
  .compat-result{ margin-top:16px; padding:14px; font-size:0.9rem; }
  .compat-ok{ background:rgba(45,212,191,0.1); border:1px solid var(--led); color:var(--led); }
  .compat-fail{ background:rgba(255,93,93,0.1); border:1px solid var(--danger); color:var(--danger); }

  /* AI ASSISTANT */
  #assistant-ia{ border-top:1px solid var(--border); background:var(--panel); }
  .chat-box{
    max-width:700px; margin:0 auto; background:var(--bg); border:1px solid var(--border);
    padding:26px;
  }
  .chat-input-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
  .chat-input-row input{
    flex:1; min-width:200px; padding:13px 16px; border:1px solid var(--border);
    background:var(--panel); color:var(--text); font-size:0.92rem; font-family:var(--font-body);
  }
  .chat-input-row input:focus{ outline:none; border-color:var(--led); }
  .chat-response{
    margin-top:22px; padding:18px; background:var(--panel);
    border:1px solid var(--border); font-size:0.9rem; display:none;
  }
  .chat-response.show{ display:block; }
  .chat-response.error{ border-color:var(--danger); color:var(--danger); background:rgba(255,93,93,0.06); }
  .suggestion-list{ list-style:none; margin:4px 0 18px; }
  .suggestion-list li{
    display:flex; justify-content:space-between; gap:12px;
    padding:9px 0; border-bottom:1px solid var(--border); font-size:0.9rem;
  }
  .suggestion-list li:last-child{ border-bottom:none; }
  .suggestion-list .cat{ color:var(--text-dim); }
  .suggestion-list .val{ font-weight:600; text-align:right; }
  .suggestion-total{
    display:flex; justify-content:space-between; padding-top:12px;
    font-family:var(--font-display); font-size:1.05rem; color:var(--copper-bright);
  }
  .use-config-btn{ margin-top:18px; width:100%; }
  .ai-confirm{ margin-top:14px; font-size:0.85rem; color:var(--led); }
  .ai-verification{
    margin-top:18px; padding:14px 16px;
    background:var(--panel-raised); border-left:2px solid var(--led);
  }
  .ai-verification-label{
    font-family:var(--font-display); font-size:0.78rem; color:var(--led);
    display:block; margin-bottom:8px;
  }
  .ai-verification p{ font-size:0.86rem; color:var(--text); line-height:1.5; }

  /* Sélecteur de jeu pour l'estimation FPS */
  .fps-picker{ margin-top:18px; }
  .fps-picker > label{
    display:block; font-size:0.82rem; color:var(--text-dim); margin-bottom:8px;
  }
  .fps-selected-game{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px;
  }
  .fps-game-chip{
    display:flex; align-items:center; gap:8px; padding:8px 12px;
    background:var(--panel-raised); border:1px solid var(--led); font-size:0.85rem;
  }
  .fps-game-chip button{
    background:transparent; border:none; color:var(--text-dim); cursor:pointer; font-size:0.85rem; padding:0;
  }
  .fps-game-chip button:hover{ color:var(--danger); }
  #fps-estimate-btn{ margin-top:14px; }
  #fps-estimate-btn:disabled{ opacity:0.4; cursor:not-allowed; }

  /* Page dédiée /estimer-fps */
  .fps-config-columns{
    display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px;
  }
  .fps-config-col{ padding:24px; max-height:400px; overflow-y:auto; }
  .fps-config-col h3{ font-family:var(--font-display); font-size:1rem; margin-bottom:16px; font-weight:400; }
  .fps-build-row{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:12px 14px; border:1px solid var(--border); margin-bottom:8px; cursor:pointer;
  }
  .fps-build-row:hover{ border-color:var(--led); background:var(--panel-raised); }
  .fps-build-row .nom{ font-weight:600; font-size:0.9rem; }
  .fps-build-row .date{ font-size:0.76rem; color:var(--text-dim); white-space:nowrap; }
  .fps-selected-config{ padding:26px; }
  .fps-selected-config h3{ font-size:1.1rem; margin-bottom:14px; }

  @media (max-width:768px){
    .fps-config-columns{ grid-template-columns:1fr; }
  }

  footer{
    border-top:1px solid var(--border); padding:44px 24px; text-align:center;
    color:var(--text-dim); font-size:0.85rem;
  }

  @media (max-width:640px){
    .hero h1{ font-size:1.8rem; }
    .steps{ flex-direction:column; }
    .step{ border-right:none; border-bottom:1px solid var(--border); }
    .step:last-child{ border-bottom:none; }
    .stats-strip{ flex-direction:column; }
    .stat{ border-right:none; border-bottom:1px solid var(--border); }
    .stat:last-child{ border-bottom:none; }

    nav ul{ gap:14px 18px; flex-wrap:wrap; justify-content:flex-end; }
    nav a{ font-size:0.82rem; }

    .price-row{ flex-wrap:wrap; }
    .price-row .vendeur{ flex-basis:100%; }
    .price-row .prix{ text-align:left; }
  }

  /* COMPARATEUR DE PRIX */
  .search-box{ position:relative; max-width:500px; margin-bottom:8px; }
  .search-box input{
    width:100%; padding:13px 16px; border:1px solid var(--border);
    background:var(--panel); color:var(--text); font-size:0.92rem; font-family:var(--font-body);
  }
  .search-box input:focus{ outline:none; border-color:var(--led); }
  .search-results{
    position:absolute; top:100%; left:0; right:0; z-index:10;
    background:var(--panel-raised); border:1px solid var(--border); border-top:none;
    max-height:280px; overflow-y:auto; display:none;
  }
  .search-results.show{ display:block; }
  .search-result-item{
    padding:11px 16px; cursor:pointer; font-size:0.88rem; border-bottom:1px solid var(--border);
  }
  .search-result-item:last-child{ border-bottom:none; }
  .search-result-item:hover{ background:var(--panel); color:var(--led); }
  .search-result-item .cat{ color:var(--text-dim); font-size:0.78rem; }

  .compare-result{ margin-top:36px; }
  .compare-heading{
    margin-bottom:6px; font-size:1.2rem; font-weight:700;
    display:flex; align-items:center; gap:16px;
  }
  .compare-heading-text .cat-badge{
    font-family:var(--font-display); font-size:0.78rem; color:var(--copper);
    display:block; margin-bottom:6px;
  }
  .compare-heading-thumb{
    width:64px; height:64px; object-fit:contain; background:var(--panel);
    border:1px solid var(--border); border-radius:6px; flex-shrink:0;
  }
  .price-table{ margin-top:20px; }
  .price-row{
    display:flex; align-items:center; gap:16px; padding:14px 18px;
    border:1px solid var(--border); border-left:2px solid transparent; margin-bottom:10px;
  }
  .price-row.best{ border-left-color:var(--led); background:var(--panel-raised); }
  .price-row .vendeur{ flex:1; font-weight:600; }
  .price-row .prix{ font-family:var(--font-display); font-size:1.15rem; color:var(--copper-bright); min-width:100px; text-align:right; }
  .price-row.best .prix{ color:var(--led); }
  .price-row .date{ font-size:0.78rem; color:var(--text-dim); min-width:110px; }
  .price-row .lien-btn{
    padding:8px 16px; font-size:0.8rem; font-weight:600;
    background:transparent; border:1px solid var(--border); color:var(--text);
  }
  .price-row .lien-btn:hover{ border-color:var(--led); color:var(--led); }
  .price-row.lien-mort{ border-left-color:var(--danger); }
  .dead-link-badge{
    display:block; color:var(--danger); font-size:0.72rem; font-weight:500; margin-top:4px;
  }
  .price-row .report-link-btn{
    padding:8px 12px; font-size:0.75rem; font-weight:600; white-space:nowrap;
    background:transparent; border:1px solid var(--border); color:var(--text-dim); cursor:pointer;
  }
  .price-row .report-link-btn:hover{ border-color:var(--danger); color:var(--danger); }
  .price-disclaimer{
    margin-top:18px; font-size:0.8rem; color:var(--text-dim);
    padding:12px 16px; border:1px solid var(--border); background:var(--panel);
  }
  .no-price{ color:var(--text-dim); font-size:0.9rem; padding:20px; border:1px dashed var(--border); text-align:center; }

  /* COMPTE (inscription / connexion / mes builds) */
  .auth-tabs{ display:flex; gap:0; margin-bottom:24px; max-width:420px; }
  .auth-tab{
    flex:1; text-align:center; padding:12px; cursor:pointer;
    background:var(--panel); border:1px solid var(--border); color:var(--text-dim); font-weight:600; font-size:0.9rem;
  }
  .auth-tab.active{ background:var(--panel-raised); color:var(--led); border-bottom-color:var(--led); }
  .auth-form{ max-width:420px; display:none; }
  .auth-form.show{ display:block; }
  .auth-form label{ display:block; font-size:0.85rem; color:var(--text-dim); margin-bottom:6px; margin-top:16px; }
  .auth-form input{
    width:100%; padding:12px 14px; border:1px solid var(--border);
    background:var(--panel); color:var(--text); font-size:0.9rem; font-family:var(--font-body);
  }
  .auth-form input:focus{ outline:none; border-color:var(--led); }
  .auth-form button{ margin-top:20px; width:100%; }
  .auth-error{ margin-top:14px; padding:12px; font-size:0.85rem; display:none; }
  .auth-error.show{ display:block; background:rgba(255,93,93,0.1); border:1px solid var(--danger); color:var(--danger); }

  .account-bar{
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 20px; margin-bottom:32px;
  }
  .account-bar .email{ font-weight:600; }
  .build-card{ padding:0; margin-bottom:14px; overflow:hidden; }
  .build-card-header{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:20px; cursor:pointer;
  }
  .build-card-header:hover{ background:var(--panel-raised); }
  .build-card .build-name{ font-weight:700; margin-bottom:4px; }
  .build-card .build-date{ font-size:0.78rem; color:var(--text-dim); }
  .build-card-toggle{ font-family:var(--font-display); color:var(--text-dim); }
  .build-detail{ display:none; border-top:1px solid var(--border); padding:8px 20px 20px; }
  .build-detail.show{ display:block; }
  .build-detail-row{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--border);
  }
  .build-detail-row:last-child{ border-bottom:none; }
  .build-detail-row .item-info{ display:flex; align-items:center; gap:12px; min-width:0; }
  .build-detail-row .row-thumb{
    width:40px; height:40px; object-fit:contain; background:var(--panel);
    border:1px solid var(--border); border-radius:6px; flex-shrink:0;
  }
  .build-detail-row .cat{ font-size:0.76rem; color:var(--text-dim); display:block; }
  .build-detail-row .nom{ font-weight:600; }
  .build-detail-row .prix{ font-family:var(--font-display); color:var(--copper-bright); white-space:nowrap; }
  .build-detail-row .buy-btn{
    padding:8px 16px; font-size:0.8rem; font-weight:600; white-space:nowrap;
    background:var(--led); color:#0a0f0d; border:none;
  }
  .build-detail-row .buy-btn:hover{ background:var(--led-dim); }

  /* TOOLBAR TRI / BUDGET */
  .config-toolbar{
    display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end;
    margin-bottom:28px; padding:18px 20px;
  }
  .config-toolbar .field{ display:flex; flex-direction:column; gap:6px; }
  .config-toolbar label{ font-size:0.78rem; color:var(--text-dim); }
  .config-toolbar select, .config-toolbar input{
    padding:10px 12px; border:1px solid var(--border);
    background:var(--panel); color:var(--text); font-size:0.88rem; font-family:var(--font-body);
    min-width:180px;
  }
  .config-toolbar select:focus, .config-toolbar input:focus{ outline:none; border-color:var(--led); }
  .budget-summary{ margin-left:auto; text-align:right; font-size:0.85rem; }
  .budget-summary .total{ font-family:var(--font-display); font-size:1.1rem; color:var(--copper-bright); }
  .budget-summary .remaining.over{ color:var(--danger); }
  .budget-summary .remaining.ok{ color:var(--led); }

  .component-btn.over-budget{ opacity:0.45; }
  .component-btn.over-budget .price::after{ content:' · dépasse le budget'; color:var(--danger); font-size:0.72rem; }