:root{ --bg:#0b0b0b; --fg:#faf7ef; --muted:#c7c1b3; --accent:#caa85a; --border:#2a2a2a; --card:#141414; }
*{box-sizing:border-box}
html{overflow-y:scroll}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}
a{color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;padding:1.2rem}
.topbar{position:sticky;top:0;z-index:10;background:#0f0f0f;border-bottom:1px solid var(--border)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between}
.topbar nav a{margin-left:1rem;text-decoration:none;font-weight:600}
.brand{font-weight:800;text-decoration:none;color:var(--fg)}
.btn{display:inline-block;border:1px solid var(--accent);padding:.55rem 1rem;border-radius:.6rem;text-decoration:none;color:var(--fg);font-weight:700;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(202, 168, 90, 0.15)}
.btn:hover:not(:disabled):not([data-disabled="true"]){transform:translateY(-2px);box-shadow:0 4px 12px rgba(202, 168, 90, 0.3);background:rgba(202, 168, 90, 0.1)}
.btn:disabled, .btn[disabled], .btn[data-disabled="true"]{background:var(--border) !important;border-color:var(--border) !important;color:var(--muted) !important;cursor:not-allowed !important;opacity:0.6;box-shadow:none}
.btn-primary{background:var(--accent);color:#000;border-color:var(--accent)}
.btn-primary:hover:not(:disabled):not([data-disabled="true"]){background:#d4b86a;transform:translateY(-2px)}
.btn-primary:disabled, .btn-primary[disabled], .btn-primary[data-disabled="true"]{background:var(--border) !important;color:var(--muted) !important;border-color:var(--border) !important}
.btn-ghost{border-color:var(--border);color:var(--muted)}
.btn-ghost:hover:not(:disabled){background:rgba(199, 193, 179, 0.1);border-color:var(--accent)}
.btn-danger{border-color:#e74c3c;color:#e74c3c}
.btn-danger:hover:not(:disabled){background:#e74c3c;color:#fff;transform:translateY(-2px)}
.btn-danger:disabled, .btn-danger[disabled], .btn-danger[data-disabled="true"]{border-color:var(--border) !important;color:var(--muted) !important}
.hero{position:relative;border-bottom:1px solid var(--border)}
.hero img{width:100%;height:55vh;object-fit:cover;filter:brightness(.7)}
.hero-text{position:absolute;left:0;right:0;bottom:2rem;display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2rem auto}
.features article{background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:1rem;transition:all 0.3s ease}
.features article:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(202, 168, 90, 0.2);transform:translateY(-4px)}
.features article h2{color:var(--fg);margin:0 0 1rem 0;font-size:1.3rem;display:flex;align-items:center;gap:0.5rem}
.features article h2::before{content:attr(data-emoji);font-size:1.8rem;display:inline-block}
.footer{border-top:1px solid var(--border);background:#0f0f0f;margin-top:2rem}
.footer .smalll{color:var(--muted);font-size:.9rem}
#catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:1rem;transition:all 0.2s ease}
.card h3{margin:.2rem 0}
#paybox{border:1px solid rgba(202, 168, 90, 0.3);background:rgba(202, 168, 90, 0.05)}
#result{padding:.8rem;border-radius:.5rem;margin-top:.5rem;min-height:1.5rem;transition:all 0.3s ease}
#result:empty{display:none}
#result.error{background:rgba(217, 83, 79, 0.1);border-left:4px solid #d9534f;border:1px solid rgba(217, 83, 79, 0.3);color:#d9534f}
#result.success{background:rgba(92, 184, 92, 0.1);border-left:4px solid #5cb85c;border:1px solid rgba(92, 184, 92, 0.3);color:#5cb85c}
.badge{display:inline-block;background:#222;border:1px solid var(--border);border-radius:999px;padding:.2rem .5rem;color:var(--muted);font-size:.8rem}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.2rem}
section{display:flex;flex-direction:column}
section > h2{border-bottom:2px solid var(--accent);padding-bottom:.8rem;margin-bottom:.5rem}
#hcaptcha-container{display:flex;justify-content:center;align-items:center;margin:1rem auto;}
#hcaptcha-container iframe{margin:0 auto;}
.cart{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:.8rem;overflow:hidden}
.cart th,.cart td{padding:.6rem;border-bottom:1px solid var(--border)}
.cart input[type=number]{width:5rem;background:#101010;border:1px solid var(--border);border-radius:.4rem;color:var(--fg);padding:.25rem .4rem}
label{display:block;margin:.6rem 0;font-weight:500;color:var(--fg)}
input,select,textarea{width:100%;padding:.55rem;border:1px solid var(--border);border-radius:.5rem;background:#111;color:var(--fg);transition:all 0.2s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(202, 168, 90, 0.15);background:#1a1a1a}
.summary{display:flex;justify-content:space-between;align-items:center;margin:.6rem 0;color:var(--muted)}
.muted{color:var(--muted)}
.features article ul{margin:0.5rem 0;padding-left:1.5rem;line-height:1.8;color:var(--fg)}
.features article li{margin:0.6rem 0}
.features article p{margin:0.5rem 0;line-height:1.6;color:var(--fg)}
@media (max-width: 800px){
  .wrap{padding:0.6rem;}
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:0.5rem;}
  .topbar nav{display:flex;flex-direction:column;gap:0.5rem;width:100%;}
  .brand img{height:70px;}
  .hero img{height:25vh;}
  .features{grid-template-columns:1fr;gap:0.5rem;}
  .features article{padding:0.8rem;background:var(--card);border:1px solid var(--border);border-radius:.6rem;}
  .features article h2{font-size:1.1rem;margin:0 0 0.8rem 0;gap:0.3rem;}
  .grid{grid-template-columns:1fr;}
  .card{padding:0.7rem;}
  #catalog{grid-template-columns:1fr;gap:0.5rem;}
  .cart th, .cart td{font-size:0.96rem;padding:0.4rem;}
  section > h2{border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:.3rem;font-size:1.3rem;}
  label{margin:.5rem 0;}
  .btn{padding:.45rem .8rem;font-size:.95rem;}
  section .wrap > div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

/* Optimisation pour petits mobiles (≤ 600px) */
@media (max-width: 600px){
  .features{gap:0.8rem !important;}
  .features article{
    padding:0.6rem;
    gap:0.8rem !important;
  }
  .features article h2{
    font-size:1rem;
    margin:0 0 0.6rem 0;
  }
  .features article h2 i{
    font-size:1.2rem !important;
    flex-shrink:0;
  }
  /* Compresser les conteneurs internes */
  .features article > div[style*="display:flex"]{
    gap:0.7rem !important;
  }
  .features article > div[style*="display:flex"] > div[style*="display:flex"]{
    gap:0.5rem !important;
  }
  .features article i[class*="fa-"]{
    font-size:1.2rem !important;
    margin-top:0 !important;
  }
  .features article strong{
    font-size:0.95rem;
    margin-bottom:0.15rem !important;
  }
  .features article p, .features article address{
    font-size:0.9rem;
    line-height:1.5;
    margin:0;
  }
  .features article a{
    font-size:1rem !important;
  }
}

/* Ultra petit mobile (≤ 480px) */
@media (max-width: 480px){
  .features{gap:1rem !important;}
  .features article{
    padding:0.5rem;
  }
  .features article h2{
    font-size:0.95rem;
    margin:0 0 0.5rem 0;
    gap:0.2rem;
  }
  .features article h2 i{
    font-size:1rem !important;
  }
  .features article > div[style*="display:flex"]{
    gap:0.6rem !important;
    margin-bottom:0.5rem;
  }
  .features article > div[style*="display:flex"]:last-child{
    margin-bottom:0;
  }
  .features article i[class*="fa-"]{
    font-size:1rem !important;
    min-width:1rem;
    text-align:center;
  }
  .features article strong{
    font-size:0.9rem;
    display:block;
    margin-bottom:0.1rem;
  }
  .features article p, .features article address{
    font-size:0.85rem;
    line-height:1.4;
    margin:0;
  }
  .features article a{
    font-size:0.95rem !important;
    word-break:break-word;
  }
}

@media (max-width:275px){
  .wrap{padding:0.2rem;}
  .topbar{font-size:0.93rem;}
  .brand img{height:50px;}
}

/* Ultra small screens (< 400px) - override inline styles */
@media (max-width: 399px){
  .wrap{padding:0.3rem !important;}
  h1{font-size:1rem !important;margin:0.3rem 0 !important;}
  h2{font-size:0.9rem !important;margin:0.3rem 0 !important;}
  
  /* Grid layout */
  .grid{display:flex !important;flex-direction:column !important;gap:0.5rem !important;width:100% !important;}
  section{padding:0 !important;margin:0 !important;display:block !important;}
  
  /* Cart styling - full override to block list */
  .cart{width:100% !important;border:none !important;background:transparent !important;border-collapse:separate !important;table-layout:auto !important;display:block !important;}
  .cart thead{display:none !important;}
  .cart tbody{display:block !important;width:100% !important;}
  .cart tr{display:block !important;border:1px solid var(--border) !important;border-radius:0.4rem !important;background:var(--card) !important;padding:0.5rem !important;margin-bottom:0.5rem !important;page-break-inside:avoid !important;overflow:hidden !important;}
  .cart td{display:block !important;width:100% !important;padding:0.2rem 0 !important;border:none !important;font-size:0.8rem !important;text-align:left !important;margin-bottom:0.3rem !important;border-bottom:none !important;}
  .cart td::before{content:'' !important;display:none !important;}
  .cart td:first-child{font-weight:700 !important;color:var(--accent) !important;font-size:0.9rem !important;margin-bottom:0.4rem !important;}
  .cart td:nth-child(2){color:var(--muted) !important;font-size:0.75rem !important;}
  .cart td:nth-child(3){margin-bottom:0.3rem !important;}
  .cart td:nth-child(4){font-weight:600 !important;color:var(--accent) !important;font-size:0.85rem !important;margin-bottom:0.3rem !important;}
  .cart td:last-child{display:flex !important;justify-content:flex-end !important;margin-bottom:0 !important;margin-top:0.3rem !important;padding-top:0.3rem !important;border-top:1px solid var(--border) !important;}
  .cart button{padding:.2rem .3rem !important;font-size:0.7rem !important;min-width:auto !important;height:auto !important;line-height:1.2 !important;}
  .cart button i{margin-right:0.2rem !important;font-size:1.1rem !important;}
  
  /* Summary */
  .summary{display:flex !important;flex-direction:column !important;gap:0.3rem !important;font-size:0.8rem !important;margin:0.4rem 0 !important;padding:0.5rem !important;background:rgba(202, 168, 90, 0.08) !important;border-radius:0.3rem !important;border-left:3px solid var(--accent) !important;width:100% !important;}
  .summary div{margin:0 !important;width:100% !important;font-weight:600 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}
  
  /* Buttons */
  .btn{padding:.25rem .4rem !important;font-size:0.75rem !important;border-radius:0.3rem !important;width:auto !important;}
  #btn-clear{width:100% !important;margin-top:0.4rem !important;}
  
  /* Form */
  label{display:block !important;margin:.25rem 0 0 0 !important;font-size:0.8rem !important;font-weight:600 !important;}
  input, select, textarea{display:block !important;width:100% !important;padding:.25rem !important;font-size:0.8rem !important;margin:0.2rem 0 0.4rem 0 !important;box-sizing:border-box !important;}
  

  
  /* hCaptcha centré sur ultra-mobile */
  #hcaptcha-container{display:flex !important;justify-content:center !important;align-items:center !important;margin:0.8rem auto !important;width:100% !important;}
  #hcaptcha-container iframe{margin:0 auto !important;display:block !important;}
  
  /* Payment box */
  #paybox{padding:0.5rem !important;margin:0.4rem 0 !important;border-radius:0.3rem !important;}
  #paypal-buttons{width:100% !important;display:block !important;}
  #paypal-buttons > div{display:grid !important;grid-template-columns:1fr !important;gap:0.4rem !important;}
  #paypal-buttons .card{padding:0.4rem !important;}
  #pay-info{font-size:0.75rem !important;margin-bottom:0.2rem !important;line-height:1.2 !important;}
  #pay-amounts{font-size:0.7rem !important;margin-top:0.2rem !important;line-height:1.2 !important;}
  
  /* Actions */
  .actions{margin-top:0.4rem !important;display:flex !important;flex-direction:column !important;gap:0.3rem !important;}
  #btn-submit{width:100% !important;padding:.25rem !important;font-size:0.8rem !important;}
  
  /* Hide hCaptcha hidden textareas that take up space */
  textarea[name="g-recaptcha-response"],
  textarea[name="h-captcha-response"]{
    display:none !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
  }
  
  /* Date picker fieldsets */
  fieldset{border:1px solid var(--border) !important;padding:1rem !important;border-radius:0.5rem !important;margin:0.5rem 0 !important;}
  fieldset legend{font-weight:600 !important;font-size:0.95rem !important;padding:0 0.5rem !important;}
  fieldset label{display:flex !important;align-items:center !important;gap:0.8rem !important;margin:0.8rem 0 !important;cursor:pointer !important;font-weight:normal !important;}
  fieldset input[type="radio"]{
    cursor:pointer !important;
    margin:0 !important;
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    padding:0 !important;
    accent-color:var(--accent) !important;
    flex-shrink:0 !important;
  }
  fieldset input[type="radio"]:checked + span{color:var(--accent) !important;font-weight:600 !important;}
  fieldset span{flex:1 !important;text-align:left !important;}
  
  /* Override des styles inline des boutons du panier */
  .cart td:nth-child(3) button{padding:.15rem .25rem !important;font-size:0.65rem !important;min-width:auto !important;height:auto !important;line-height:1 !important;}
  .cart td:nth-child(3) span{min-width:1rem !important;font-size:0.75rem !important;}
  .cart td:last-child button{padding:.15rem .25rem !important;font-size:0.65rem !important;}
  .cart td:last-child i{font-size:0.6rem !important;}
}