/* =========================================================
   ORYXIA DESIGN — Système de design premium
   Gravure laser sur mesure
   ========================================================= */

:root {
  /* Couleurs */
  --noir: #0a0a0c;
  --noir-2: #111114;
  --noir-3: #17171b;
  --noir-4: #1f1f24;
  --gris: #2a2a30;
  --gris-clair: #9a9aa3;
  --blanc: #f4f1ea;
  --blanc-pur: #ffffff;

  /* Or */
  --or: #e6b422;
  --or-clair: #f5d061;
  --or-fonce: #b8860b;
  --or-gradient: linear-gradient(135deg, #f9e58a 0%, #e6b422 38%, #b8860b 70%, #f5d061 100%);

  /* Argent */
  --argent: #c8c8d0;
  --argent-clair: #eef0f4;
  --argent-gradient: linear-gradient(135deg, #ffffff 0%, #c8c8d0 45%, #8d8d97 70%, #e6e8ee 100%);

  /* Typo */
  --font-titre: 'Cinzel', 'Times New Roman', serif;
  --font-corps: 'Jost', 'Segoe UI', system-ui, sans-serif;

  /* Mesures */
  --max: 1240px;
  --radius: 14px;
  --radius-sm: 8px;
  --transition: .35s cubic-bezier(.22,.61,.36,1);
  --shadow: 0 24px 60px -18px rgba(0,0,0,.75);
  --shadow-or: 0 0 0 1px rgba(230,180,34,.25), 0 22px 50px -20px rgba(230,180,34,.35);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-corps);
  background: var(--noir);
  color: var(--blanc);
  line-height: 1.7;
  overflow-x: hidden;
  font-weight: 300;
  letter-spacing: .2px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
ul { list-style: none; }
button, input, textarea, select { font-family: inherit; }

/* Fond texturé subtil */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(230,180,34,.10), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(200,200,208,.05), transparent 60%);
  pointer-events: none; z-index: 0;
}

/* ---------- Conteneurs ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.section { padding: 100px 0; position: relative; }
.section--tight { padding: 70px 0; }
.bg-2 { background: var(--noir-2); }
.bg-3 { background: linear-gradient(180deg, var(--noir-2), var(--noir)); }

/* ---------- Typographie ---------- */
h1,h2,h3,h4 { font-family: var(--font-titre); font-weight: 600; line-height: 1.15; letter-spacing: .5px; }
.h-xl { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h-lg { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.h-md { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.eyebrow {
  font-family: var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--or);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.eyebrow::before { content:""; width: 34px; height: 1px; background: var(--or-gradient); }
.lead { font-size: 1.15rem; color: var(--gris-clair); max-width: 60ch; }
.text-or { color: var(--or); }

/* Texte métallique (or) */
.metal-or {
  background: var(--or-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.metal-argent {
  background: var(--argent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- En-tête / Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
  padding: 18px 0;
}
.site-header.scrolled {
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(230,180,34,.18);
  padding: 10px 0;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 50px; width: auto; transition: height var(--transition); }
.scrolled .brand img { height: 42px; }
.brand-name { font-family: var(--font-titre); font-size: 1.15rem; letter-spacing: 3px; }
.brand-name small { display:block; font-family: var(--font-corps); font-size:.6rem; letter-spacing: 5px; color: var(--or); font-weight:500; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: .92rem; font-weight: 400; position: relative; padding: 4px 0; color: var(--blanc); }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:-2px; height: 1.5px; width: 0;
  background: var(--or-gradient); transition: width var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--or-clair); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.has-drop { position: relative; }
.has-drop > a::before { content:""; }
.drop {
  position: absolute; top: 130%; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--noir-3); border: 1px solid var(--gris); border-radius: var(--radius-sm);
  padding: 10px; min-width: 230px; opacity: 0; visibility: hidden; transition: var(--transition);
  box-shadow: var(--shadow);
}
.has-drop:hover .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop a { display:block; padding: 10px 14px; border-radius: 6px; font-size: .9rem; }
.drop a:hover { background: var(--noir-4); color: var(--or-clair); }
.drop a::after { display:none; }

.nav-cta { padding: 11px 22px; }
.burger { display:none; flex-direction: column; gap: 5px; background:none; border:none; cursor:pointer; padding: 6px; }
.burger span { width: 26px; height: 2px; background: var(--blanc); transition: var(--transition); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; border-radius: 50px; font-size: .92rem; font-weight: 500;
  letter-spacing: .5px; cursor: pointer; border: 1px solid transparent;
  transition: var(--transition); position: relative; overflow: hidden;
}
.btn-or {
  background: var(--or-gradient); color: #1a1206; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(230,180,34,.6);
}
.btn-or:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -10px rgba(230,180,34,.75); color:#1a1206; }
.btn-ghost { border-color: var(--gris); color: var(--blanc); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--or); color: var(--or-clair); transform: translateY(-3px); }
.btn-light { background: var(--blanc); color: var(--noir); }
.btn-light:hover { transform: translateY(-3px); }
.btn-sm { padding: 10px 20px; font-size: .85rem; }
.btn-lg { padding: 17px 38px; font-size: 1rem; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; display: flex; align-items: center; position: relative;
  padding: 140px 0 80px;
  background:
    radial-gradient(1200px 700px at 70% 30%, rgba(230,180,34,.12), transparent 55%),
    linear-gradient(180deg, #0c0c0e, #060607);
  overflow: hidden;
}
.hero::after {
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.012) 38px 39px);
  pointer-events:none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.hero h1 { margin-bottom: 24px; }
.hero .lead { margin-bottom: 36px; font-size: 1.22rem; }
.hero-actions { display:flex; gap: 16px; flex-wrap: wrap; }
.hero-visual { position: relative; display:flex; justify-content:center; }
.hero-visual .glow {
  position:absolute; inset: -10% -5%; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,180,34,.30), transparent 60%);
  filter: blur(40px); z-index:0;
}
.hero-logo { position: relative; z-index: 1; max-width: 460px; filter: drop-shadow(0 30px 60px rgba(0,0,0,.7)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

.hero-stats { display:flex; gap: 40px; margin-top: 50px; flex-wrap: wrap; }
.hero-stats .stat .n { font-family: var(--font-titre); font-size: 2.1rem; }
.hero-stats .stat .l { font-size: .8rem; color: var(--gris-clair); text-transform: uppercase; letter-spacing: 2px; }

/* ---------- Section header ---------- */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-head .lead { margin: 0 auto; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head.left .lead { margin-left: 0; }

/* ---------- Grilles de cartes ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

.card {
  background: linear-gradient(180deg, var(--noir-3), var(--noir-2));
  border: 1px solid var(--gris); border-radius: var(--radius);
  padding: 34px 30px; transition: var(--transition); position: relative; overflow: hidden;
}
.card::before {
  content:""; position:absolute; top:0; left:0; right:0; height: 2px;
  background: var(--or-gradient); transform: scaleX(0); transform-origin: left; transition: var(--transition);
}
.card:hover { transform: translateY(-8px); border-color: rgba(230,180,34,.45); box-shadow: var(--shadow); }
.card:hover::before { transform: scaleX(1); }
.card .ico {
  width: 58px; height: 58px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: rgba(230,180,34,.10); border: 1px solid rgba(230,180,34,.3); margin-bottom: 22px; font-size: 1.6rem;
}
.card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.card p { color: var(--gris-clair); font-size: .96rem; }
.card .more { margin-top: 18px; display:inline-flex; gap:8px; color: var(--or); font-size:.88rem; font-weight:500; }

/* Carte matériau / service */
.mat-card { padding: 0; }
.mat-card .mat-top {
  height: 190px; display:flex; align-items:center; justify-content:center; font-size: 3.4rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(230,180,34,.18), transparent 70%),
    repeating-linear-gradient(45deg, #15151a 0 10px, #121216 10px 20px);
  border-bottom: 1px solid var(--gris);
}
.mat-card .mat-body { padding: 26px 28px 30px; }
.mat-card ul.bullets { margin-top: 14px; }
.bullets li { color: var(--gris-clair); font-size: .9rem; padding-left: 22px; position: relative; margin-bottom: 6px; }
.bullets li::before { content:"◆"; position:absolute; left:0; color: var(--or); font-size:.7rem; top: 4px; }

/* ---------- Process ---------- */
.steps { counter-reset: step; display:grid; gap: 22px; }
.step {
  display:grid; grid-template-columns: 70px 1fr; gap: 24px; align-items:flex-start;
  padding: 28px; border: 1px solid var(--gris); border-radius: var(--radius);
  background: var(--noir-2); transition: var(--transition);
}
.step:hover { border-color: rgba(230,180,34,.4); transform: translateX(6px); }
.step .num {
  counter-increment: step; font-family: var(--font-titre); font-size: 1.6rem;
  width: 64px; height: 64px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--or); color: var(--or);
}
.step .num::before { content: "0" counter(step); }
.step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step p { color: var(--gris-clair); font-size: .94rem; }

/* ---------- Bandeau / CTA ---------- */
.cta-band {
  text-align:center; padding: 80px 40px; border-radius: 22px;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(230,180,34,.22), transparent 60%),
    linear-gradient(180deg, var(--noir-3), var(--noir-2));
  border: 1px solid rgba(230,180,34,.3); position: relative; overflow:hidden;
}
.cta-band h2 { margin-bottom: 18px; }
.cta-band p { color: var(--gris-clair); max-width: 56ch; margin: 0 auto 30px; }

/* ---------- Liste à puces de garanties ---------- */
.feature-list { display:grid; gap: 18px; }
.feature-list li { display:flex; gap: 16px; align-items:flex-start; }
.feature-list .fi {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display:flex; align-items:center; justify-content:center;
  background: rgba(230,180,34,.1); border:1px solid rgba(230,180,34,.3); color: var(--or);
}
.feature-list h4 { font-family: var(--font-corps); font-size: 1.02rem; font-weight: 600; margin-bottom: 2px; }
.feature-list p { color: var(--gris-clair); font-size: .9rem; }

/* ---------- Galerie ---------- */
.filters { display:flex; gap: 12px; flex-wrap: wrap; justify-content:center; margin-bottom: 40px; }
.filter-btn {
  padding: 9px 20px; border-radius: 50px; border: 1px solid var(--gris); background: transparent;
  color: var(--gris-clair); cursor:pointer; font-size:.86rem; transition: var(--transition);
}
.filter-btn.active, .filter-btn:hover { border-color: var(--or); color: var(--or-clair); background: rgba(230,180,34,.08); }
.gallery { columns: 3; column-gap: 22px; }
.gallery .g-item {
  break-inside: avoid; margin-bottom: 22px; border-radius: var(--radius); overflow: hidden;
  position: relative; border: 1px solid var(--gris);
  background: linear-gradient(180deg, var(--noir-3), var(--noir-2));
}
.g-item .g-art {
  height: 0; display:flex; align-items:center; justify-content:center; font-size: 3rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(230,180,34,.18), transparent 65%),
    repeating-linear-gradient(135deg, #16161b 0 12px, #121216 12px 24px);
}
.g-item .g-meta { padding: 18px 20px; }
.g-item .g-meta h4 { font-family: var(--font-corps); font-weight:600; font-size: 1rem; }
.g-item .g-meta span { font-size:.8rem; color: var(--or); text-transform: uppercase; letter-spacing: 2px; }

/* ---------- Tarifs ---------- */
.price-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; align-items: stretch; }
.price {
  background: linear-gradient(180deg, var(--noir-3), var(--noir-2)); border: 1px solid var(--gris);
  border-radius: var(--radius); padding: 38px 32px; display:flex; flex-direction:column; transition: var(--transition);
}
.price.featured { border-color: var(--or); box-shadow: var(--shadow-or); transform: scale(1.03); }
.price:hover { transform: translateY(-6px); }
.price.featured:hover { transform: scale(1.03) translateY(-6px); }
.price .tag { font-size:.75rem; text-transform: uppercase; letter-spacing: 3px; color: var(--or); margin-bottom: 14px; }
.price .amount { font-family: var(--font-titre); font-size: 2.8rem; margin-bottom: 4px; }
.price .amount small { font-size: 1rem; color: var(--gris-clair); }
.price .desc { color: var(--gris-clair); font-size:.92rem; margin-bottom: 24px; }
.price ul { display:grid; gap: 12px; margin-bottom: 28px; flex: 1; }
.price ul li { font-size:.92rem; padding-left: 26px; position: relative; }
.price ul li::before { content:"✓"; position:absolute; left:0; color: var(--or); font-weight:700; }
.badge-pop { position:absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--or-gradient); color:#1a1206; font-size:.72rem; font-weight:700; padding: 6px 18px; border-radius: 50px; letter-spacing: 2px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display:grid; gap: 14px; }
.faq-item { border: 1px solid var(--gris); border-radius: var(--radius-sm); background: var(--noir-2); overflow: hidden; }
.faq-q { width:100%; text-align:left; padding: 22px 26px; background:none; border:none; color: var(--blanc); cursor:pointer; font-size: 1.05rem; font-weight: 500; display:flex; justify-content:space-between; align-items:center; gap: 16px; }
.faq-q .plus { color: var(--or); font-size: 1.4rem; transition: var(--transition); flex:0 0 auto; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; padding: 0 26px; color: var(--gris-clair); }
.faq-item.open .faq-a { padding: 0 26px 24px; max-height: 320px; }

/* ---------- Témoignages ---------- */
.testi { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.testi .t {
  padding: 32px; border:1px solid var(--gris); border-radius: var(--radius); background: var(--noir-2);
}
.testi .stars { color: var(--or); margin-bottom: 14px; letter-spacing: 3px; }
.testi p { color: var(--blanc); font-style: italic; margin-bottom: 20px; }
.testi .who { display:flex; align-items:center; gap: 14px; }
.testi .who .av { width: 44px; height: 44px; border-radius: 50%; background: var(--or-gradient); display:flex; align-items:center; justify-content:center; color:#1a1206; font-weight:700; font-family: var(--font-titre); }
.testi .who b { font-weight:600; }
.testi .who span { display:block; font-size:.82rem; color: var(--gris-clair); }

/* ---------- Formulaires ---------- */
.form { display:grid; gap: 20px; }
.form .row { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label { display:block; font-size:.85rem; margin-bottom: 8px; color: var(--blanc); letter-spacing:.5px; }
.field label .req { color: var(--or); }
.field input, .field textarea, .field select {
  width:100%; padding: 14px 16px; background: var(--noir-2); border:1px solid var(--gris); border-radius: var(--radius-sm);
  color: var(--blanc); font-size: .95rem; transition: var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(230,180,34,.12); }
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size:.82rem; color: var(--gris-clair); }
.form-success { display:none; padding: 18px 22px; border-radius: var(--radius-sm); background: rgba(230,180,34,.1); border:1px solid var(--or); color: var(--or-clair); }
.form-success.show { display:block; }

/* ---------- Info / contact cartes ---------- */
.info-card { display:flex; gap:18px; align-items:flex-start; padding: 24px; border:1px solid var(--gris); border-radius: var(--radius); background: var(--noir-2); }
.info-card .ic { width:46px; height:46px; flex:0 0 auto; border-radius:12px; background: rgba(230,180,34,.1); border:1px solid rgba(230,180,34,.3); color: var(--or); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.info-card h4 { font-family: var(--font-corps); font-weight:600; margin-bottom: 4px; }
.info-card p, .info-card a { color: var(--gris-clair); font-size:.94rem; }
.info-card a:hover { color: var(--or); }

/* ---------- Simulateur ---------- */
.sim-wrap { display:grid; grid-template-columns: 360px 1fr; gap: 36px; align-items:flex-start; }
.sim-panel { background: var(--noir-2); border:1px solid var(--gris); border-radius: var(--radius); padding: 28px; position: sticky; top: 100px; }
.sim-panel h3 { font-size: 1.15rem; margin-bottom: 6px; }
.sim-panel .hint { font-size:.84rem; color: var(--gris-clair); margin-bottom: 22px; }
.sim-group { margin-bottom: 22px; }
.sim-group > label { display:block; font-size:.82rem; text-transform: uppercase; letter-spacing: 2px; color: var(--or); margin-bottom: 12px; }
.dropzone {
  border: 2px dashed var(--gris); border-radius: var(--radius); padding: 30px 20px; text-align:center;
  cursor:pointer; transition: var(--transition); color: var(--gris-clair);
}
.dropzone:hover, .dropzone.drag { border-color: var(--or); background: rgba(230,180,34,.05); color: var(--or-clair); }
.dropzone .dz-ico { font-size: 2rem; margin-bottom: 10px; }
.chips { display:flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 14px; border-radius: 50px; border:1px solid var(--gris); background:transparent; color: var(--gris-clair); cursor:pointer; font-size:.82rem; transition: var(--transition); }
.chip.active, .chip:hover { border-color: var(--or); color: var(--or-clair); background: rgba(230,180,34,.08); }
.slider-row { display:flex; align-items:center; gap: 14px; margin-bottom: 14px; }
.slider-row label { flex: 0 0 100px; font-size:.84rem; color: var(--blanc); }
.slider-row input[type=range] { flex:1; accent-color: var(--or); }
.slider-row .val { flex:0 0 42px; text-align:right; font-size:.82rem; color: var(--or); }
.sim-stage {
  background:
    radial-gradient(circle at 50% 40%, #1c1c22, #0a0a0c 75%);
  border:1px solid var(--gris); border-radius: var(--radius); padding: 30px; min-height: 540px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 22px;
}
#sim-canvas { max-width: 100%; height:auto; border-radius: 8px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); }
.sim-actions { display:flex; gap: 12px; flex-wrap: wrap; justify-content:center; }
.text-input-mini { width:100%; }

/* ---------- Logos / bandeau confiance ---------- */
.trust { display:flex; gap: 50px; align-items:center; justify-content:center; flex-wrap:wrap; opacity:.65; }
.trust span { font-family: var(--font-titre); font-size: 1.1rem; letter-spacing: 2px; color: var(--argent); }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--noir-2); border-top: 1px solid var(--gris); padding: 70px 0 30px; margin-top: 0; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 50px; }
.footer-grid h4 { font-family: var(--font-corps); font-size:.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--or); margin-bottom: 20px; }
.footer-grid a, .footer-grid p { color: var(--gris-clair); font-size:.92rem; display:block; margin-bottom: 10px; }
.footer-grid a:hover { color: var(--or-clair); }
.footer-brand img { height: 64px; margin-bottom: 18px; }
.footer-brand p { max-width: 34ch; }
.socials { display:flex; gap: 12px; margin-top: 16px; }
.socials a { width:40px; height:40px; border:1px solid var(--gris); border-radius:10px; display:flex; align-items:center; justify-content:center; color: var(--blanc); }
.socials a:hover { border-color: var(--or); color: var(--or); transform: translateY(-3px); }
.footer-bottom { border-top:1px solid var(--gris); padding-top: 26px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color: var(--gris-clair); font-size:.85rem; }
.footer-bottom a { color: var(--gris-clair); }
.footer-bottom a:hover { color: var(--or); }

/* ---------- Page header (sous-pages) ---------- */
.page-hero {
  padding: 170px 0 70px; text-align:center; position: relative;
  background:
    radial-gradient(900px 400px at 50% -10%, rgba(230,180,34,.14), transparent 60%),
    linear-gradient(180deg, #0c0c0e, var(--noir));
  border-bottom: 1px solid var(--gris);
}
.page-hero .lead { margin: 0 auto; }
.breadcrumb { font-size:.82rem; color: var(--gris-clair); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--or); }

/* ---------- Split (image + texte) ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.split .visual {
  border-radius: 20px; min-height: 380px; border: 1px solid var(--gris); position: relative; overflow:hidden;
  background:
    radial-gradient(circle at 40% 30%, rgba(230,180,34,.16), transparent 60%),
    repeating-linear-gradient(45deg, #16161b 0 14px, #111116 14px 28px);
  display:flex; align-items:center; justify-content:center; font-size: 4rem;
}

/* ---------- Animations apparition ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* ---------- Divers ---------- */
.center { text-align:center; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mb-0 { margin-bottom: 0; }
.tag-pill { display:inline-block; padding:5px 14px; border:1px solid rgba(230,180,34,.4); border-radius:50px; font-size:.78rem; color: var(--or); letter-spacing:1px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; text-align:center; }
  .hero .lead { margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-stats { justify-content:center; }
  .hero-visual { order: -1; }
  .hero-logo { max-width: 320px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .gallery { columns: 2; }
  .sim-wrap { grid-template-columns: 1fr; }
  .sim-panel { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Menu plein écran opaque (évite tout débordement de la page derrière) */
  .nav-links { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    background: var(--noir); padding: 96px 32px 48px; gap: 2px;
    transform: translateX(100%); transition: transform var(--transition);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .nav-links.open { transform: none; }
  .nav-links a { width:100%; padding: 14px 0; border-bottom: 1px solid var(--gris); font-size: 1.05rem; }
  .nav-links .nav-cta { margin-top: 18px; border-bottom: none; justify-content: center; }
  .burger { display:flex; z-index: 130; }
  /* Burger -> croix quand le menu est ouvert */
  .burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.active span:nth-child(2) { opacity: 0; }
  .burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .has-drop { width: 100%; }
  .has-drop .drop { position: static; opacity:1; visibility:visible; transform:none; border:none; box-shadow:none; padding: 0 0 0 14px; min-width:auto; background:none; }
  .has-drop:hover .drop { transform:none; }
  .drop a { font-size: .95rem; color: var(--gris-clair); }
  body.menu-open { overflow: hidden; }
  .section { padding: 70px 0; }
  .grid-2, .grid-3, .grid-4, .price-grid, .testi { grid-template-columns: 1fr; }
  .gallery { columns: 1; }
  .form .row { grid-template-columns: 1fr; }
  .price.featured { transform:none; }
  .hero-stats { gap: 26px; }
}

/* =========================================================
   ANIMATIONS & EFFETS PREMIUM (additifs)
   ========================================================= */

/* Barre de progression de défilement */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--or-gradient); z-index: 200;
  box-shadow: 0 0 12px rgba(230,180,34,.7);
  transition: width .1s linear;
}

/* Bouton retour en haut */
#to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 120;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--or-gradient); color: #1a1206; font-size: 1.3rem; font-weight: 700;
  cursor: pointer; border: none; opacity: 0; visibility: hidden; transform: translateY(20px) scale(.8);
  transition: var(--transition); box-shadow: 0 10px 30px -8px rgba(230,180,34,.6);
}
#to-top.show { opacity: 1; visibility: visible; transform: none; }
#to-top:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -8px rgba(230,180,34,.8); }

/* Particules dorées du hero */
.fx-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8; }
.hero > .container, .page-hero > .container { position: relative; z-index: 2; }

/* Texte métal : reflet animé */
.metal-or {
  background: linear-gradient(110deg, #b8860b 0%, #f5d061 25%, #fff3c4 42%, #f5d061 60%, #b8860b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shineText 7s linear infinite;
}
@keyframes shineText { 0% { background-position: 200% 0; } 100% { background-position: -50% 0; } }

/* Boutons : balayage lumineux */
.btn { isolation: isolate; }
.btn-or::after, .btn-light::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn-or:hover::after, .btn-light:hover::after { left: 140%; }

/* Lueur pulsée sur le bandeau CTA */
.cta-band { animation: ctaGlow 4.5s ease-in-out infinite; }
@keyframes ctaGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(230,180,34,.3), 0 0 40px -10px rgba(230,180,34,.25); }
  50% { box-shadow: 0 0 0 1px rgba(230,180,34,.55), 0 0 70px -6px rgba(230,180,34,.45); }
}

/* Cartes : profondeur 3D au survol (JS ajoute le tilt) */
.card, .price, .mat-card, .testi .t, .info-card { transform-style: preserve-3d; will-change: transform; }
.card .ico { transition: var(--transition); }
.card:hover .ico { transform: translateZ(30px) scale(1.08); box-shadow: 0 10px 24px -8px rgba(230,180,34,.5); }

/* Halo qui suit la souris sur les cartes */
.card::after, .price::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(230,180,34,.14), transparent 60%);
  opacity: 0; transition: opacity .4s; z-index: 0;
}
.card:hover::after, .price:hover::after { opacity: 1; }
.card > *, .price > * { position: relative; z-index: 1; }

/* Variantes de révélation au scroll */
.reveal-l { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-r { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-zoom { opacity: 0; transform: scale(.9); transition: opacity .7s ease, transform .7s ease; }
.reveal-l.in, .reveal-r.in, .reveal-zoom.in { opacity: 1; transform: none; }

/* Apparition en cascade automatique des grilles */
.grid > *, .price-grid > *, .testi > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.grid.in > *, .price-grid.in > *, .testi.in > * { opacity: 1; transform: none; }
.grid.in > *:nth-child(1){transition-delay:.05s}.grid.in > *:nth-child(2){transition-delay:.12s}
.grid.in > *:nth-child(3){transition-delay:.19s}.grid.in > *:nth-child(4){transition-delay:.26s}
.grid.in > *:nth-child(5){transition-delay:.33s}.grid.in > *:nth-child(6){transition-delay:.40s}
.grid.in > *:nth-child(7){transition-delay:.47s}.grid.in > *:nth-child(8){transition-delay:.54s}
.grid.in > *:nth-child(9){transition-delay:.61s}
.price-grid.in > *:nth-child(2){transition-delay:.12s}.price-grid.in > *:nth-child(3){transition-delay:.24s}
.testi.in > *:nth-child(2){transition-delay:.12s}.testi.in > *:nth-child(3){transition-delay:.24s}

/* Logo du hero : flottement + lueur pulsée */
.hero-visual .glow { animation: glowPulse 5s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity:.7; transform: scale(1); } 50% { opacity:1; transform: scale(1.08); } }

/* Soulignement animé des titres de section */
.section-head .eyebrow::before { animation: lineGrow 2s ease-in-out infinite alternate; }
@keyframes lineGrow { from { width: 18px; } to { width: 46px; } }

/* Liens de nav : glissement doux déjà géré ; ajout d'un éclat */
.nav-cta { position: relative; overflow: hidden; }

/* Chips / filtres : rebond léger */
.chip:active, .filter-btn:active { transform: scale(.94); }

/* Effet d'entrée de page */
@keyframes fadeInUp { from { opacity:0; transform: translateY(16px);} to {opacity:1; transform:none;} }
.page-hero h1 { animation: fadeInUp .8s ease both; }
.page-hero .lead { animation: fadeInUp .8s ease .15s both; }
.page-hero .breadcrumb { animation: fadeInUp .8s ease .05s both; }

/* Curseur lumineux global (desktop) */
#cursor-glow {
  position: fixed; width: 380px; height: 380px; border-radius: 50%; left: 0; top: 0;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 1; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(230,180,34,.08), transparent 65%);
  opacity: 0; transition: opacity .4s;
}

/* Compteurs */
.count { font-variant-numeric: tabular-nums; }

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .fx-particles, #cursor-glow { display: none !important; }
}
@media (hover: none) { #cursor-glow { display: none; } }

/* Masque les éléments flottants quand le menu mobile est ouvert */
body.menu-open #to-top { opacity: 0 !important; visibility: hidden !important; }
body.menu-open #scroll-progress { opacity: 0; }

/* =========================================================
   VISUELS PRODUITS (rendus réels)
   ========================================================= */
.g-item { overflow: hidden; }
.g-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); background: #0c0c0e; }
.g-item:hover .g-img { transform: scale(1.07); }

/* Visuels des sections (remplacent les emojis) */
.visual.render { padding: 0; overflow: hidden; }
.visual.render img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; }
.visual.render::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 30% 20%, transparent 55%, rgba(0,0,0,.35));
}

/* Carte produit avec image (hero / accueil) */
.product-shot { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--gris); box-shadow: var(--shadow); }
.product-shot img { width: 100%; display: block; }
.product-shot .tag-pill { position: absolute; top: 16px; left: 16px; background: rgba(10,10,12,.7); backdrop-filter: blur(6px); }

/* =========================================================
   GALERIE : cascade, reflet, lightbox
   ========================================================= */
.gallery .g-item { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s ease, transform .6s ease; }
.gallery.in .g-item { opacity: 1; transform: none; }
.gallery.in .g-item:nth-child(2){transition-delay:.06s}.gallery.in .g-item:nth-child(3){transition-delay:.12s}
.gallery.in .g-item:nth-child(4){transition-delay:.18s}.gallery.in .g-item:nth-child(5){transition-delay:.24s}
.gallery.in .g-item:nth-child(6){transition-delay:.30s}.gallery.in .g-item:nth-child(7){transition-delay:.36s}
.gallery.in .g-item:nth-child(8){transition-delay:.42s}.gallery.in .g-item:nth-child(9){transition-delay:.48s}
.gallery.in .g-item:nth-child(n+10){transition-delay:.54s}

/* Reflet diagonal au survol des visuels produits */
.g-item, .visual.render { position: relative; }
.g-item .g-img, .visual.render img { position: relative; z-index: 0; }
.g-item::after, .visual.render::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 48%, transparent 62%);
  transform: translateX(-60%); transition: opacity .2s;
}
.g-item:hover::after, .visual.render:hover::before { opacity: 1; animation: sheenSweep .8s ease forwards; }
@keyframes sheenSweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

/* Lightbox */
#lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,8,.92); backdrop-filter: blur(8px); padding: 5vw;
  opacity: 0; visibility: hidden; transition: opacity .3s; cursor: zoom-out;
}
#lightbox.show { opacity: 1; visibility: visible; }
#lightbox img { max-width: min(92vw, 760px); max-height: 88vh; border-radius: 16px; box-shadow: 0 40px 100px -20px rgba(0,0,0,.9); transform: scale(.95); transition: transform .3s; }
#lightbox.show img { transform: scale(1); }
#lightbox .lb-close {
  position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid var(--gris); color: var(--blanc); font-size: 1.1rem; cursor: pointer; transition: var(--transition);
}
#lightbox .lb-close:hover { background: var(--or); color: #1a1206; border-color: var(--or); transform: rotate(90deg); }

/* =========================================================
   BOUTONS UNIFORMISÉS
   ========================================================= */
.btn { justify-content: center; text-align: center; min-height: 52px; line-height: 1.1; white-space: nowrap; }
.btn-sm { min-height: 42px; }
.hero-actions, .sim-actions { gap: 14px; }
.hero-actions .btn, .sim-actions .btn { flex: 0 1 auto; }

/* Sur mobile : boutons d'action pleine largeur et alignés */
@media (max-width: 560px) {
  .hero-actions, .sim-actions, .cta-band .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn, .sim-actions .btn, .cta-band .hero-actions .btn { width: 100%; }
  .btn { white-space: normal; }
}

/* Bouton Enregistrer dans la lightbox */
#lightbox .lb-save {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  padding: 12px 24px; border-radius: 50px; border: none; cursor: pointer;
  background: var(--or-gradient); color: #1a1206; font-weight: 600; font-size: .9rem;
  box-shadow: 0 10px 30px -10px rgba(230,180,34,.7); transition: var(--transition);
}
#lightbox .lb-save:hover { transform: translateX(-50%) translateY(-3px); }