* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --black: #1a1a1a;
  --dark: #2d2d2d;
  --gray: #555;
  --light-gray: #888;
  --border: #c8c8c8;
  --bg: #d6d6d6;
  --white: #E2E2E2;
  --card-bg: #ececec;
  --input-bg: #f0f0f0;
}

body { font-family:'Barlow',sans-serif; background:var(--white); color:var(--black); }

/* ── HEADER ── */
header {
  background:var(--dark);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.5rem; height:56px;
  position:fixed; top:0; left:0; right:0; z-index:100;
}
.header-logo {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900; font-size:17px; letter-spacing:3px;
  color:#fff; text-transform:uppercase; line-height:1.1;
}
.header-logo .sub { font-size:9px; font-weight:400; letter-spacing:4px; opacity:.55; display:block; }
nav { display:flex; }
nav button {
  background:none; border:none; color:rgba(255,255,255,0.55);
  font-family:'Barlow',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase;
  padding:0 1.3rem; height:56px; cursor:pointer;
  border-left:1px solid rgba(255,255,255,0.1);
  transition:color .2s, background .2s;
}
nav button:hover { color:#fff; background:rgba(255,255,255,0.06); }
nav button.active { color:#fff; border-bottom:2px solid #fff; }

/* ── PAGES ── */
.page { display:none; padding-top:56px; min-height:100vh; }
.page.active { display:block; }

/* ── BANDE TITRE ── */
.page-title-bar {
  display:flex; align-items:center; gap:1rem;
  background:var(--dark); padding:.7rem 1.25rem;
}
.page-title-bar p {
  flex:1; margin:0; text-align:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:4px; color:#fff; text-transform:uppercase;
}

/* ── GRAND TITRE ── */
.page-heading {
  text-align:center; padding:2.5rem 1rem 2rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:52px; letter-spacing:4px; text-transform:uppercase; color:var(--black);
}

/* ══ ACCUEIL ══ */

/* Section intro */
.home-intro {
  max-width:700px; margin:0 auto; text-align:center;
  padding:0 2rem 2.5rem;
  font-size:14px; font-weight:300; color:var(--gray); line-height:1.75;
}

/* Séparateur de section */
.section-label {
  padding:0.9rem 2.5rem;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  font-size:10px; font-weight:600; letter-spacing:4px; text-transform:uppercase;
  color:var(--light-gray); background:var(--bg);
}

/* Grille cartes */
.cards-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.75rem; padding:2rem 2.5rem 3rem;
  max-width:1100px; margin:0 auto;
}
.card { display:flex; flex-direction:column; }
.card-image {
  width:100%; aspect-ratio:3/4;
  border:1.5px solid var(--border); background:var(--bg);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:0.9rem;
}
.card-badge {
  position:absolute; top:10px; left:10px;
  background:var(--black); color:#fff;
  font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  padding:3px 9px;
}
.card-label {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:15px; letter-spacing:3px; text-transform:uppercase;
  text-align:center; margin-bottom:0.45rem;
}
.card-desc {
  font-size:12.5px; font-weight:300; color:var(--gray);
  text-align:center; line-height:1.6;
}
.card-tags {
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:0.7rem;
}
.tag {
  font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  padding:3px 9px; border:1px solid var(--border); color:var(--gray);
}

/* Visuels CSS matériaux */
.img-pla {
  background:linear-gradient(150deg,#e0ddd8 0%,#c8c5bf 45%,#b8b5af 100%);
}
.img-pla::after { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 20px,rgba(255,255,255,.15) 20px,rgba(255,255,255,.15) 21px);
}
.img-petg {
  background:linear-gradient(140deg,rgba(180,215,255,.55) 0%,rgba(215,238,255,.75) 50%,rgba(155,198,245,.45) 100%);
}
.img-petg::before { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,transparent 0,transparent 10px,rgba(255,255,255,.2) 10px,rgba(255,255,255,.2) 11px);
}
.img-asa-abs {
  background:linear-gradient(140deg,#202028 0%,#363648 45%,#262630 100%);
}
.img-asa-abs::after { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,transparent 0,transparent 6px,rgba(255,255,255,.04) 6px,rgba(255,255,255,.04) 7px);
}
.img-tpu {
  background:linear-gradient(160deg,#1e3a5f 0%,#2a5f8f 50%,#1a3550 100%);
}
.img-tpu::after { content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.09) 0%,transparent 60%);
}

/* Visuels finitions */
.img-fin-standard {
  background:linear-gradient(150deg,#d8d4ce 0%,#c0bcb6 50%,#b4b0aa 100%);
}
.img-fin-standard::after { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px);
}
.img-fin-lisse {
  background:linear-gradient(135deg,#e8e4de 0%,#d8d4ce 40%,#ccc8c2 100%);
}
.img-fin-lisse::after { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 40% 35%,rgba(255,255,255,.35) 0%,transparent 60%);
}
.img-fin-sable {
  background:
    radial-gradient(circle,#9a8060 1px,transparent 1px),
    radial-gradient(circle,#7a6040 1px,transparent 1px);
  background-size:10px 10px,7px 7px; background-position:0 0,5px 5px;
  background-color:#8a7050;
}
.img-fin-elastique {
  background:linear-gradient(160deg,#1e3a5f 0%,#2a5f8f 50%,#1a3550 100%);
}
.img-fin-elastique::after { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 8px,rgba(255,255,255,.06) 8px,rgba(255,255,255,.06) 9px);
}

/* ── FOOTER CONTACT ── */
.footer-contact {
  background:var(--dark); text-align:center; padding:1.75rem 1rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:3px; color:#fff; text-transform:uppercase;
}
.footer-contact-links { margin-top:0.9rem; display:flex; justify-content:center; flex-wrap:wrap; gap:0.25rem 0; }
.footer-contact-links a {
  color:rgba(255,255,255,.6); text-decoration:none;
  font-weight:400; font-size:11px; letter-spacing:2px; text-transform:none;
  padding:0.2rem 1.25rem; border-right:1px solid rgba(255,255,255,.15);
}
.footer-contact-links a:last-child { border-right:none; }
.footer-contact-links a:hover { color:#fff; }

/* ══ COMMANDE ══ */
.order-wrapper { max-width:800px; margin:0 auto; padding:2rem 2rem 4rem; }
.order-section { margin-bottom:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--border); }
.order-section:last-child { border-bottom:none; }
.order-section-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.step-num {
  width:32px; height:32px; border:1.5px solid var(--black);
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; flex-shrink:0;
}
.order-section-header h3 {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:20px; letter-spacing:2px; text-transform:uppercase;
}
.form-row { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.form-group { flex:1; min-width:180px; }
.form-group label {
  display:block; font-size:10px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--gray); margin-bottom:0.45rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; border:1.5px solid var(--border);
  background:var(--input-bg); color:var(--black);
  font-family:'Barlow',sans-serif; font-size:14px;
  padding:0.7rem 0.9rem; outline:none; transition:border-color .2s; appearance:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--black); }
.form-group textarea { min-height:110px; resize:vertical; line-height:1.5; }
.form-group select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:2rem;
}

/* Grille matériaux (commande) */
.material-select-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem; }
.mat-btn {
  border:1.5px solid var(--border); background:var(--input-bg);
  cursor:pointer; padding:1rem 0.9rem; text-align:left;
  transition:border-color .2s; font-family:'Barlow',sans-serif;
}
.mat-btn:hover { border-color:var(--black); }
.mat-btn.selected { border-color:var(--black); border-width:2px; background:var(--bg); }
.mat-btn .m-name { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:1px; text-transform:uppercase; display:block; margin-bottom:2px; }
.mat-btn .m-sub { font-size:11px; color:var(--light-gray); }
.mat-btn.selected .m-sub { color:var(--gray); }
.mat-other-note { margin-top:0.75rem; font-size:12px; color:var(--light-gray); font-style:italic; }

/* Upload */
.upload-zone {
  border:1.5px dashed var(--border); padding:2.5rem;
  text-align:center; cursor:pointer; position:relative;
  transition:border-color .2s, background .2s; background:var(--input-bg);
}
.upload-zone:hover { border-color:var(--black); background:var(--bg); }
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload-zone .u-icon { font-size:30px; display:block; margin-bottom:0.6rem; }
.upload-zone p { font-size:13px; color:var(--gray); line-height:1.5; }
.upload-zone strong { color:var(--black); }
.upload-zone .u-fmt { font-size:10px; color:var(--light-gray); letter-spacing:1px; margin-top:0.4rem; }
.file-chosen { display:none; margin-top:0.75rem; padding:0.5rem 0.9rem; border:1.5px solid var(--black); font-size:11px; letter-spacing:1px; background:var(--bg); }

/* Finitions */
.finition-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem; margin-top:0.5rem; }
.fin-btn {
  border:1.5px solid var(--border); background:var(--input-bg);
  cursor:pointer; padding:1rem; text-align:left; transition:border-color .2s; font-family:'Barlow',sans-serif;
}
.fin-btn:hover { border-color:var(--black); }
.fin-btn.selected { border-color:var(--black); border-width:2px; background:var(--bg); }
.fin-btn .f-n { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:1px; display:block; }
.fin-btn .f-d { font-size:11px; color:var(--light-gray); margin-top:2px; line-height:1.4; }
.fin-btn.selected .f-d { color:var(--gray); }

/* Qualité couches */
.quality-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; margin-top:0.5rem; }
.q-btn {
  border:1.5px solid var(--border); background:var(--input-bg);
  cursor:pointer; padding:1rem; text-align:left; transition:border-color .2s; font-family:'Barlow',sans-serif;
}
.q-btn:hover { border-color:var(--black); }
.q-btn.selected { border-color:var(--black); border-width:2px; background:var(--bg); }
.q-btn .q-n { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:1px; display:block; }
.q-btn .q-d { font-size:11px; color:var(--light-gray); margin-top:2px; }
.q-btn.selected .q-d { color:var(--gray); }

/* Couleurs */
.color-grid-simple { display:flex; flex-wrap:wrap; gap:10px; margin-top:0.5rem; }
.c-pill {
  display:flex; align-items:center; gap:8px;
  border:1.5px solid var(--border); background:var(--input-bg);
  padding:6px 14px 6px 8px; cursor:pointer;
  font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
  transition:border-color .2s;
}
.c-pill:hover { border-color:var(--black); }
.c-pill.selected { border-color:var(--black); border-width:2px; background:var(--bg); }
.c-pill .c-dot { width:18px; height:18px; flex-shrink:0; }
.c-pill-autre {
  border:1.5px dashed var(--border); background:var(--input-bg);
  padding:6px 14px; cursor:pointer;
  font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
  transition:border-color .2s;
}
.c-pill-autre:hover { border-color:var(--black); }
.c-pill-autre.selected { border-color:var(--black); border-width:2px; background:var(--bg); }

/* Résumé */
.order-summary-box {
  border:1.5px solid var(--black); padding:1.5rem; background:var(--bg); margin-top:2rem;
}
.sum-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16px; letter-spacing:3px; text-transform:uppercase; margin-bottom:1rem; padding-bottom:0.75rem; border-bottom:1px solid var(--border); }
.sum-row { display:flex; justify-content:space-between; padding:0.45rem 0; border-bottom:1px solid var(--border); font-size:13px; }
.sum-row:last-child { border-bottom:none; }
.sum-label { color:var(--light-gray); font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.sum-val { font-weight:500; max-width:60%; text-align:right; word-break:break-word; }
.sum-empty { font-size:12px; color:var(--light-gray); letter-spacing:1px; padding:0.5rem 0; }
.submit-btn {
  margin-top:1.5rem; width:100%;
  background:var(--black); color:#fff; border:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:18px; letter-spacing:3px; text-transform:uppercase;
  padding:1.1rem; cursor:pointer; transition:opacity .2s;
}
.submit-btn:hover { opacity:.85; }
.submit-btn:disabled { opacity:.3; cursor:not-allowed; }
.submit-note { font-size:11px; color:var(--light-gray); letter-spacing:1px; margin-top:0.75rem; text-align:center; line-height:1.5; }

/* ══ À PROPOS ══ */
.about-body { max-width:900px; margin:0 auto; padding:2rem 2.5rem 4rem; }
.about-intro { padding:1.5rem 0 2rem; border-bottom:1px solid var(--border); margin-bottom:2.5rem; }
.about-intro p { font-size:15px; font-weight:300; color:var(--gray); line-height:1.8; max-width:640px; }
.about-blocks { display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; margin-bottom:2.5rem; }
.about-block { padding:1.5rem; border:1.5px solid var(--border); background:var(--card-bg); }
.about-block h3 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; letter-spacing:2px; text-transform:uppercase; margin-bottom:0.75rem; }
.about-block p { font-size:13px; font-weight:300; color:var(--gray); line-height:1.65; }
.contact-section { border:1.5px solid var(--black); padding:2rem; background:var(--card-bg); }
.contact-section h3 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px; letter-spacing:3px; text-transform:uppercase; margin-bottom:1.5rem; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.contact-item label { display:block; font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gray); margin-bottom:0.35rem; }
.contact-item span { font-size:14px; font-weight:500; }
.contact-item a { color:var(--black); font-size:14px; font-weight:500; text-decoration:underline; text-underline-offset:3px; }

/* ══ PRODUITS ══ */
.shop-intro {
  max-width:700px; margin:0 auto; text-align:center;
  padding:0 2rem 2.5rem;
  font-size:14px; font-weight:300; color:var(--gray); line-height:1.75;
}
.products-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.75rem; padding:2rem 2.5rem 3rem;
  max-width:1200px; margin:0 auto;
}
.product-card {
  display:flex; flex-direction:column;
  background:var(--card-bg); border:1.5px solid var(--border);
  transition:border-color .2s, box-shadow .2s;
}
.product-card:hover { border-color:#aaa; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.product-img {
  width:100%; aspect-ratio:1/1; overflow:hidden;
  position:relative; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.product-img-label {
  font-family:'Barlow Condensed',sans-serif; font-size:11px;
  letter-spacing:3px; text-transform:uppercase; color:var(--light-gray);
  pointer-events:none;
}
.prod-badge {
  position:absolute; top:10px; left:10px;
  background:var(--black); color:#fff;
  font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  padding:3px 9px;
}
.prod-badge.new { background:#2a7a40; }
.prod-badge.promo { background:#8a2020; }
.product-info { padding:1.1rem 1.1rem 0.5rem; flex:1; }
.product-name {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:18px; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:0.35rem;
}
.product-mat {
  font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--light-gray); margin-bottom:0.6rem;
}
.product-desc {
  font-size:12.5px; font-weight:300; color:var(--gray); line-height:1.6; margin-bottom:0.75rem;
}
.product-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:0.75rem; }
.product-footer {
  padding:0.9rem 1.1rem;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.product-price {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:20px; letter-spacing:1px; color:var(--black);
}
.product-price .price-note {
  font-size:10px; font-weight:400; color:var(--light-gray); letter-spacing:1px; display:block;
}
.btn-order {
  background:var(--black); color:#fff; border:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  padding:0.6rem 1.2rem; cursor:pointer; transition:opacity .2s;
}
.btn-order:hover { opacity:.8; }

/* Visuels produits CSS */
.img-support-phone {
  background:linear-gradient(145deg,#2a2a3a 0%,#3a3a5a 50%,#252530 100%);
}
.img-support-phone::after { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,transparent 0,transparent 8px,rgba(255,255,255,.03) 8px,rgba(255,255,255,.03) 9px);
}
.img-boitier {
  background:linear-gradient(150deg,#8a7050 0%,#a08060 40%,#7a6040 100%);
  background:radial-gradient(circle,#9a8060 1px,transparent 1px) 0 0,
             radial-gradient(circle,#7a6040 1px,transparent 1px) 5px 5px,
             #8a7050;
  background-size:10px 10px,7px 7px,100%;
}
.img-pied-meuble {
  background:linear-gradient(160deg,#1e3a5f 0%,#2a5f8f 50%,#1a3550 100%);
}
.img-pied-meuble::after { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 8px,rgba(255,255,255,.05) 8px,rgba(255,255,255,.05) 9px);
}
.img-vase {
  background:linear-gradient(140deg,rgba(180,215,255,.55) 0%,rgba(215,238,255,.75) 50%,rgba(155,198,245,.45) 100%);
}
.img-vase::before { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,transparent 0,transparent 10px,rgba(255,255,255,.2) 10px,rgba(255,255,255,.2) 11px);
}
.img-coque {
  background:linear-gradient(150deg,#e0ddd8 0%,#c8c5bf 45%,#b8b5af 100%);
}
.img-coque::after { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 20px,rgba(255,255,255,.15) 20px,rgba(255,255,255,.15) 21px);
}
.img-deco {
  background:linear-gradient(145deg,#c0a020 0%,#e0c030 40%,#a08010 100%);
}
.img-deco::after { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 40% 35%,rgba(255,255,255,.25) 0%,transparent 55%);
}

/* Modal commande produit */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:200; display:none; align-items:center; justify-content:center;
  padding:1rem;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--white); border:1.5px solid var(--black);
  max-width:520px; width:100%; max-height:90vh; overflow-y:auto;
  padding:2rem;
}
.modal-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border);
}
.modal-header h3 {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:22px; letter-spacing:2px; text-transform:uppercase;
}
.modal-header .modal-product-ref {
  font-size:10px; color:var(--light-gray); letter-spacing:2px; margin-top:2px;
}
.modal-close {
  background:none; border:none; font-size:22px; cursor:pointer;
  color:var(--gray); line-height:1; padding:0 4px;
}
.modal-close:hover { color:var(--black); }
.modal-note {
  font-size:12px; color:var(--gray); line-height:1.6; margin-bottom:1.25rem;
  padding:0.75rem; background:var(--bg); border-left:3px solid var(--black);
}

/* TOAST */
.toast {
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--black); color:#fff;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  padding:1rem 2rem; opacity:0; transition:all .3s; z-index:999; white-space:nowrap;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* Responsive */
@media(max-width:720px){
  .cards-grid,.products-grid { grid-template-columns:repeat(2,1fr); gap:1.25rem; padding:1.5rem 1rem 2rem; }
  .material-select-grid,.finition-grid { grid-template-columns:1fr; }
  .about-blocks { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  nav button { padding:0 0.75rem; font-size:10px; }
}
@media(max-width:480px){
  .cards-grid,.products-grid { grid-template-columns:1fr; }
  .quality-grid { grid-template-columns:1fr 1fr; }
}

/* ══ Images téléversées (matériaux & produits) ══ */
/* Une image envoyée depuis l'admin remplace le visuel dégradé */
.card-photo, .product-photo {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.card-badge, .prod-badge { z-index:2; }
.product-img-label { z-index:1; }

/* ══ Bouton admin discret ══ */
.admin-dot {
  position:fixed; bottom:14px; right:14px; z-index:150;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--light-gray); background:transparent;
  font-size:15px; line-height:1; text-decoration:none;
  opacity:.22; transition:opacity .2s, color .2s;
}
.admin-dot:hover { opacity:.9; color:var(--black); }

/* ══ Carrousel d'images produit (grille) — Splide ══ */
.product-carousel{position:absolute;inset:0;z-index:0;height:100%}
.product-carousel,.product-carousel .splide__track,.product-carousel .splide__list{height:100%}
.product-carousel .splide__slide{height:100%}
.product-carousel .splide__slide img{width:100%;height:100%;object-fit:cover;display:block}
.product-carousel .splide__arrow{background:rgba(26,26,26,.55);border-radius:0;width:30px;height:44px;opacity:1;transition:background .2s}
.product-carousel .splide__arrow:hover{background:var(--black)}
.product-carousel .splide__arrow svg{fill:#fff;width:13px;height:13px}
.product-carousel .splide__arrow--prev{left:0}
.product-carousel .splide__arrow--next{right:0}
.product-carousel .splide__arrow:disabled{opacity:.25}
.product-carousel .splide__pagination{bottom:8px;padding:0}
.product-carousel .splide__pagination__page{background:rgba(255,255,255,.55);margin:3px;opacity:1;transition:background .2s}
.product-carousel .splide__pagination__page.is-active{background:#fff;transform:scale(1)}

/* Le nom et le bouton deviennent des liens */
a.product-name { color:var(--black); text-decoration:none; display:block; }
a.product-name:hover { text-decoration:underline; }
a.btn-order { display:inline-block; text-decoration:none; text-align:center; }

/* ══ Rupture de stock (affichage client) ══ */
.oos-tag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(226,226,226,.72);color:var(--black);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:15px;letter-spacing:3px;text-transform:uppercase;z-index:4;pointer-events:none}
.product-card.oos .product-img,.card.oos .card-image{filter:grayscale(.65)}
.mat-btn.oos{opacity:.5;cursor:not-allowed}
.c-pill.oos{opacity:.45;cursor:not-allowed}
.color-hint{width:100%;grid-column:1/-1;color:var(--light-gray);font-size:13px;font-style:italic;margin:0}

/* ══ Logo dans la bande de titre (sous le header) ══ */
.page-title-bar .title-logo{max-height:100px;width:auto;flex-shrink:0;object-fit:contain}
@media(max-width:640px){.title-logo{height:50px}}