/* =======================================================
   BAYNEX RESOURCES (Industrial Premium Stylesheet)
   ======================================================= */

:root {
  --bg: #0d0c0a;
  --bg-2: #14120f;
  --bg-3: #1a1815;
  --surface: #1f1c18;
  --line: #2a2620;
  --line-strong: #3a342c;
  --text: #f4efe5;
  --text-2: #b6ab9a;
  --text-3: #807767;
  --accent: #a04a26;
  --accent-2: #c25e36;
  --accent-soft: rgba(160, 74, 38, 0.14);
  --basalte: #2C2C2A;
  --gres: #BA7517;
  --calcaire: #c9bca0;
  --success: #4ea07b;
  --danger: #c0524d;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.5);

  --header-h: 72px;

  --max: 1200px;

  --serif: "Space Grotesk", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* =================== RESET =================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* ---- Texture grain industriel global ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---- Texture pierre concassée ---- */
.tex-stone { position: relative; }
.tex-stone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='r'><feTurbulence type='turbulence' baseFrequency='0.012' numOctaves='3' seed='8'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.55 0 0 0 0 0.3 0 0 0 0.7 0'/></filter><rect width='400' height='400' filter='url(%23r)'/></svg>");
  background-size: 600px 600px;
  mix-blend-mode: soft-light;
  z-index: 0;
}
.tex-stone > * { position: relative; z-index: 1; }

/* ---- Voile rouille (rust patina) ---- */
.tex-rust { position: relative; isolation: isolate; }
.tex-rust::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background:
    radial-gradient(ellipse 60% 40% at 12% 18%, rgba(160, 74, 38, 0.55), transparent 70%),
    radial-gradient(ellipse 40% 30% at 88% 78%, rgba(160, 74, 38, 0.40), transparent 70%);
  mix-blend-mode: overlay;
  z-index: 0;
}
.tex-rust > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }
input, select, textarea {
  font-family: inherit;
  font-size: 15px;
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--radius);
  width: 100%;
  transition: border-color .2s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-2);
}
textarea { resize: vertical; }
::selection { background: var(--accent); color: #000; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* =================== TYPOGRAPHY =================== */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--text);
}
h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
p { margin: 0 0 16px; color: var(--text-2); }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  margin-bottom: 16px;
}

.accent { color: var(--accent); }

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  text-align: center;
  letter-spacing: 0.01em;
}
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.10)),
    var(--accent);
  color: #fff5e8;
  border-color: var(--accent);
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 14px rgba(160, 74, 38, 0.25);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px;
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.05)),
    var(--accent-2);
  border-color: var(--accent-2);
  color: #fff5e8;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 8px 24px rgba(160, 74, 38, 0.40);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* =================== ANNOUNCE BAR =================== */
.announce {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-2);
}
.announce-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(78, 160, 123, 0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(78, 160, 123, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(78, 160, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 160, 123, 0); }
}

/* =================== HEADER =================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Fallback : fond opaque dark si backdrop-filter échoue (iOS Safari ancien) */
  background: rgba(13, 12, 10, 0.96);
  border-bottom: 1px solid var(--line);
  /* Respect du notch iPhone */
  padding-top: env(safe-area-inset-top, 0);
}
@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .header {
    background: rgba(13, 12, 10, 0.85);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.brand {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  color: var(--text);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  text-decoration: none;
  gap: 6px;
  line-height: 1;
}
/* Logo BAYNEX en HTML/CSS pur, zéro dépendance SVG */
.brand-bay,
.brand-nex {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
  color: #f4efe5 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1;
}
.brand-arrow {
  display: inline-block !important;
  width: 0;
  height: 0;
  border-left: 14px solid var(--accent);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  vertical-align: middle;
}
/* Logo SVG du footer conservé tel quel via .brand-logo */
.brand-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .header-inner {
    height: 68px;
  }

  .brand-bay, .brand-nex { font-size: 19px; letter-spacing: 1.5px; }
  .brand-arrow {
    border-left-width: 12px;
    border-top-width: 5px;
    border-bottom-width: 5px;
  }

  .nav-toggle {
    padding: 10px;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--radius);
}
.nav a:hover { color: var(--text); background: var(--bg-3); }
.nav a.btn { color: #0d0c0a; margin-left: 8px; }
.nav a.btn:hover { color: #0d0c0a; background: var(--accent-2); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: all .2s;
}

@media (max-width: 880px) {
  .nav {
    position: fixed;
    top: 60px;          /* fallback. JS recalcule la valeur exacte au moment d'ouvrir */
    left: 0;
    right: 0;
    bottom: 0;          /* drawer plein écran sous le header */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    transform: translateY(-110%);
    transition: transform .3s ease;
    z-index: 90;        /* le header (z-index 100) reste TOUJOURS au-dessus */
    overflow-y: auto;
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 14px 12px; font-size: 16px; }
  .nav-toggle { display: flex; }
  /* Bloque le scroll du body quand le drawer est ouvert */
  body.nav-locked { overflow: hidden; }
}

/* =================== HERO =================== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 80px 0 60px;
}
.hero-bg {
  position: absolute; inset: 0;
  /* Fallback JPG pour les très anciens navigateurs */
  background-image: url('assets/concasseur.jpg');
  /* WebP en priorité pour les navigateurs modernes (~100 KB vs 1.16 MB pour le JPG) */
  background-image: image-set(
    url('assets/concasseur.webp') type('image/webp'),
    url('assets/concasseur.jpg') type('image/jpeg')
  );
  background-image: -webkit-image-set(
    url('assets/concasseur.webp') type('image/webp'),
    url('assets/concasseur.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  z-index: -2;
  filter: grayscale(0.20) contrast(1.10) brightness(0.95);
  transform: scale(1.04);
}
@media (max-width: 880px) {
  .hero-bg { background-position: 60% 25%; }
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(13,12,10,0.95) 35%, rgba(13,12,10,0.70) 70%, rgba(13,12,10,0.55) 100%),
    radial-gradient(ellipse at top right, rgba(160, 74, 38, 0.28), transparent 55%),
    radial-gradient(ellipse at 8% 90%, rgba(160, 74, 38, 0.12), transparent 50%);
  z-index: -1;
}
.hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='r'><feTurbulence type='turbulence' baseFrequency='0.008' numOctaves='3' seed='12'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.45 0 0 0 0 0.22 0 0 0 0.6 0'/></filter><rect width='600' height='600' filter='url(%23r)'/></svg>");
  background-size: 800px 800px;
  mix-blend-mode: soft-light;
}
.hero-inner {
  width: 100%;
  position: relative;
}
.hero-title {
  max-width: 880px;
  margin-bottom: 24px;
}
.hero-sub {
  max-width: 640px;
  font-size: 18px;
  color: var(--text-2);
  margin-bottom: 32px;
}
.hero-cta {
  display: flex; flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 64px;
}
.hero-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-strong);
  padding-top: 28px;
  max-width: 560px;
}
.kpi {
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.kpi:last-child { border-right: 0; }
.kpi-value {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.kpi-value span {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-left: 4px;
  text-transform: lowercase;
}
.kpi-label {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .hero-kpis { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .kpi { border-right: 0; padding: 0; }
  .hero { min-height: auto; padding: 60px 0 40px; }
}

.scroll-cue {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 40px;
  border: 2px solid var(--text-3);
  border-radius: 14px;
  display: flex; justify-content: center;
  padding-top: 8px;
}
.scroll-cue span {
  width: 3px; height: 8px;
  background: var(--text-2);
  border-radius: 2px;
  animation: scroll 1.6s ease-in-out infinite;
}
@keyframes scroll {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}
@media (max-width: 760px) { .scroll-cue { display: none; } }

/* =================== TRUST =================== */
.trust {
  background: var(--bg-2);
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.trust-label {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-3);
  margin: 0 0 16px;
}
.trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}
.trust-item {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.trust-item + .trust-item::before {
  content: "·";
  margin-right: 24px;
  color: var(--text-3);
}

/* =================== SECTIONS =================== */
.section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.section-alt {
  background: var(--bg-2);
  position: relative;
}
.section-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='r'><feTurbulence type='turbulence' baseFrequency='0.012' numOctaves='3' seed='8'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.55 0 0 0 0 0.3 0 0 0 0.7 0'/></filter><rect width='400' height='400' filter='url(%23r)'/></svg>");
  background-size: 600px 600px;
  mix-blend-mode: soft-light;
}
.section-alt > * { position: relative; z-index: 1; }

/* Filet de séparation rouillé entre sections */
.section + .section,
.section + .section-alt,
.section-alt + .section {
  border-top: 1px solid var(--line);
}
.section-head { position: relative; z-index: 2; }
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-sub {
  font-size: 17px;
  color: var(--text-2);
  margin: 0;
}
@media (max-width: 760px) {
  .section { padding: 64px 0; }
}

/* =================== PRODUITS =================== */
.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1000px) { .products { grid-template-columns: 1fr; } }

.product {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position: relative;
}
/* Coin rouille décoratif */
.product::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: linear-gradient(225deg, var(--accent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}
.product:hover::before { opacity: 0.6; }
.product:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(160, 74, 38, 0.20);
}
.product-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-2);
}
.product-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.product:hover .product-img img { transform: scale(1.05); }

.badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  background: rgba(13,12,10,0.7);
  border: 1px solid rgba(255,255,255,0.15);
}
.badge-premium { color: var(--accent); border-color: var(--accent); }
.badge-volume { color: #d4a574; border-color: rgba(212,165,116,0.5); }
.badge-soon { color: var(--calcaire); border-color: rgba(201,188,160,0.5); }

.product-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.product-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; gap: 12px;
}
.product-head h3 { margin: 0; }
.origin {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-desc { font-size: 14px; margin-bottom: 20px; }

.price-table {
  font-size: 13px;
  margin-bottom: 16px;
  width: 100%;
  border-collapse: collapse;
}
.price-table th {
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--text-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.price-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.price-table tr:last-child td { border-bottom: 0; }
/* Espacement visuel entre la colonne Granulométrie (étroite) et Désignation. */
.price-table th:first-child,
.price-table td:first-child { padding-right: 28px; width: 30%; }
.price-table th:last-child,
.price-table td:last-child { padding-left: 4px; }
.price-table td:first-child { color: var(--accent); font-weight: 600; }
.price-table td:last-child { color: var(--text); }

.product-uses {
  font-size: 13px;
  padding: 14px;
  background: var(--bg-2);
  border-radius: var(--radius);
  margin-bottom: 16px;
  color: var(--text-2);
  border-left: 2px solid var(--accent);
}
.product-uses strong { color: var(--text); }

.soon-block {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.soon-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.soon-row:last-child { border-bottom: 0; }
.soon-row span:last-child { color: var(--text); font-weight: 500; }
.soon-tag {
  background: rgba(201,188,160,0.15);
  color: var(--calcaire) !important;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* =================== CALCULATEUR =================== */
.calc {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }

.calc-form { padding: 32px; }
.calc-result {
  background: var(--bg);
  padding: 32px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
@media (max-width: 880px) {
  .calc-result { border-left: 0; border-top: 1px solid var(--line); }
}

.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 8px;
}
.field-hint {
  display: inline;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
  opacity: 0.75;
  margin-left: 6px;
}

/* ===== Validation des inputs numériques (calculateur) ===== */
/* Le span [hidden] reste invisible par défaut. Styles appliqués uniquement
   quand JS retire l'attribut hidden (donc en cas d'erreur réelle). */
.input-error-msg[hidden] { display: none !important; }
.input-error-msg:not([hidden]) {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--danger);
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(192, 82, 77, 0.10);
  border-left: 2px solid var(--danger);
  border-radius: 0 var(--radius) var(--radius) 0;
  animation: errIn .2s ease;
}
@keyframes errIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
input.input-error,
input.input-error:focus {
  border-color: var(--danger);
  background: rgba(192, 82, 77, 0.06);
}

/* ===== Séparateur entre les 2 numéros de téléphone ===== */
.phone-sep {
  margin: 0 8px;
  color: var(--text-3);
  opacity: 0.6;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

.seg {
  display: flex;
  background: var(--bg-2);
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  gap: 4px;
}
.seg-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 3px;
  transition: all .2s;
}
.seg-btn.active {
  background: var(--accent);
  color: #0d0c0a;
  font-weight: 600;
}

.result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.result-row span {
  font-size: 13px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.result-row strong {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text);
}
.result-row.big { padding: 18px 0; }
.result-row.big strong {
  font-size: 24px;
  color: var(--accent);
}
.calc-note {
  font-size: 12px;
  color: var(--text-3);
  margin: 16px 0 16px;
  line-height: 1.6;
}

/* ===== Box de recommandation produit (calculateur intelligent) ===== */
.reco-box {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: -4px 0 18px;
  position: relative;
}
.reco-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.reco-product {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 2px;
}
.reco-origin {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 8px;
}

/* =======================================================
   FORMULAIRE DEVIS — Système multi-produits
   Chaque ligne contient : un select Produit + un input Tonnage + un bouton X.
   La première ligne n'a pas de bouton X (au moins 1 produit obligatoire).
   ======================================================= */
.field-products {
  margin-bottom: 16px;
}
.products-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 10px;
}
.product-row {
  display: grid;
  /* Select large + Tonnage compact + Bouton retrait carré */
  grid-template-columns: minmax(0, 1fr) 140px 36px;
  gap: 10px;
  align-items: center;
}
.product-row-select,
.product-row-tonnage {
  /* Hérite du style général des inputs/selects du form */
  width: 100%;
  min-width: 0;
}
.product-row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.product-row-remove:hover,
.product-row-remove:focus-visible {
  background: rgba(192, 82, 77, 0.10);
  color: var(--danger);
  border-color: var(--danger);
  outline: none;
  transform: scale(1.05);
}
.product-row-remove[hidden] {
  display: none;
}
.product-row-add {
  margin-top: 4px;
}

@media (max-width: 540px) {
  .product-row {
    /* Sur petit écran : on empile les inputs et on garde le bouton X à droite */
    grid-template-columns: minmax(0, 1fr) 100px 36px;
    gap: 8px;
  }
  .product-row-tonnage {
    font-size: 13px;
  }
}

/* =======================================================
   LIENS CONTEXTUELS DE MAILLAGE INTERNE
   (1) Bouton "Voir la fiche complète" sur les cards quarry de la section Implantation
   (2) CTA "En savoir plus sur Baynex" en fin de section L'ADN BAYNEX
   ======================================================= */

/* (1) Lien sous chaque card carrière */
.quarry-link {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(160, 74, 38, 0.35);
  border-radius: 999px;
  background: rgba(160, 74, 38, 0.06);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.quarry-link:hover,
.quarry-link:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}

/* (2) Phrase + lien en fin de section L'ADN BAYNEX */
.values-cta {
  margin: 56px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}
.values-cta-link {
  display: inline-block;
  margin-left: 6px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.values-cta-link:hover,
.values-cta-link:focus-visible {
  color: var(--text);
  border-bottom-color: var(--accent);
  outline: none;
}

@media (max-width: 640px) {
  .values-cta {
    margin-top: 40px;
    font-size: 14px;
  }
  .values-cta-link {
    display: block;
    margin-left: 0;
    margin-top: 8px;
  }
}

/* =======================================================
   RÉSEAUX SOCIAUX FOOTER
   Petits cercles avec icônes monochromes — utilise les short
   links go.baynex-resources.com qui alimentent aussi sameAs.
   ======================================================= */
.foot-social {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.foot-social a:hover,
.foot-social a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

/* Lien texte secondaire (sous boutons) — pages dédiées par carrière */
.btn-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color .2s ease;
}
.btn-link:hover,
.btn-link:focus-visible { color: var(--text); text-decoration: underline; outline: none; }

/* =======================================================
   FAQ ACCORDÉON (visible on-page, citable par les IA)
   Section #faq insérée avant Contact. Structure <details>/<summary>
   pour zéro JavaScript et accessibilité clavier native.
   ======================================================= */
.faq-updated {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.faq-list {
  max-width: 880px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--bg-2, #15140f);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover { border-color: rgba(160, 74, 38, 0.35); }
.faq-item[open] {
  border-color: rgba(160, 74, 38, 0.45);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-family: var(--serif, "Space Grotesk", system-ui, sans-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  position: relative;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform .3s ease;
}
.faq-item[open] summary::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.faq-item > p {
  padding: 0 22px 22px;
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.7;
}
.faq-item > p strong { color: var(--text); }
.faq-item > p a { color: var(--accent); text-decoration: underline; }

@media (max-width: 640px) {
  .faq-item summary { padding: 16px 50px 16px 18px; font-size: 15px; }
  .faq-item summary::after { right: 16px; width: 24px; height: 24px; }
  .faq-item > p { padding: 0 18px 18px; font-size: 14px; }
}

/* =======================================================
   BOUTON WHATSAPP FLOTTANT (FAB)
   Canal n°1 de conversion B2B au Sénégal — toujours visible
   en bas-droit, accessible clavier, label étendu au hover desktop.
   ======================================================= */
.wa-fab {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0,0,0,0.25);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wa-fab:hover,
.wa-fab:focus-visible {
  background: #20bd5a;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45), 0 4px 8px rgba(0,0,0,0.3);
  outline: none;
}
.wa-fab svg { flex-shrink: 0; }
.wa-fab-label { white-space: nowrap; }

/* Sur mobile, on garde uniquement l'icône (point rond), sans le label,
   pour ne pas obstruer le contenu et limiter l'emprise. */
@media (max-width: 640px) {
  .wa-fab {
    padding: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .wa-fab-label { display: none; }
}
/* Alternative (sous-choix) du calculateur. Visible seulement si techniquement pertinent. */
.reco-box .reco-alt {
  display: inline-block;
  margin: 2px 0 10px;
  padding: 4px 10px;
  background: rgba(160, 74, 38, 0.10);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
}
.reco-box .reco-alt[hidden] { display: none; }
.reco-box .reco-alt strong { color: var(--accent); font-weight: 600; }
.reco-why {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ===== Feedback inline du formulaire ===== */
.form-feedback {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
  animation: feedbackIn .3s ease;
}
.form-feedback svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.form-feedback strong {
  display: block;
  margin-bottom: 2px;
}
.form-feedback a {
  color: inherit;
  text-decoration: underline;
}
.feedback-success {
  background: rgba(78, 160, 123, 0.12);
  border-left: 3px solid var(--success);
  color: #c8efd9;
}
.feedback-success svg { color: var(--success); }
.feedback-error {
  background: rgba(192, 82, 77, 0.12);
  border-left: 3px solid var(--danger);
  color: #f3c8c5;
}
.feedback-error svg { color: var(--danger); }
@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =================== COMPARATIF =================== */
.compare {
  overflow-x: auto;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.compare-table {
  min-width: 600px;
}
.compare-table th, .compare-table td {
  padding: 18px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.compare-table th {
  font-family: var(--serif);
  font-weight: 700;
  background: var(--bg-2);
  color: var(--text);
  font-size: 16px;
}
.compare-table th:first-child { width: 32%; }
.compare-table th small {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
}
.compare-table td:first-child {
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-2);
  font-size: 14px;
}
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table small { color: var(--text-3); font-size: 12px; }

.bar {
  display: block;
  width: 100%;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.bar-fill { display: block; height: 100%; border-radius: 3px; }
.bar-fill.bas { background: var(--accent); }
.bar-fill.gre { background: var(--gres); }
.bar-fill.cal { background: var(--calcaire); }

.check {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-weight: 700;
  margin-right: 6px;
  font-size: 13px;
}
.check.yes { background: rgba(78,160,123,0.2); color: var(--success); }
.check.no { background: rgba(192,82,77,0.2); color: var(--danger); }

.compare-rule {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-size: 14px;
  color: var(--text);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.compare-rule em { color: var(--accent); font-style: normal; font-weight: 500; }

/* =================== DECISION TREE =================== */
.tree {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  min-height: 260px;
}
.tree-step {
  display: none;
  animation: fadeIn .3s ease;
}
.tree-step.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tree-step h3 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 1.3rem;
}
.tree-options {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 540px) {
  .tree { padding: 24px; }
  .tree-options { grid-template-columns: 1fr; }
}
.tree-opt {
  padding: 18px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 15px;
  text-align: left;
  transition: all .2s;
  color: var(--text);
}
.tree-opt:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateX(4px);
}
.tree-back {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-3);
  padding: 6px 0;
}
.tree-back:hover { color: var(--accent); }

.tree-result {
  text-align: center;
  padding: 20px 0;
}
.reco {
  display: inline-block;
  padding: 12px 28px;
  background: var(--accent);
  color: #0d0c0a;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.tree-result p {
  max-width: 540px;
  margin: 0 auto;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.tree-result p.reco-detail strong { color: var(--accent); font-weight: 600; }
.tree-result p.reco-detail { text-align: left; padding: 0 4px; }

/* Choix alternatif sous la recommandation principale */
.tree-result .reco-alt {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  background: rgba(160, 74, 38, 0.10);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.tree-result .reco-alt strong { color: var(--accent); font-weight: 600; }

/* =================== CARRIERES =================== */
.quarries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .quarries { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .quarries { grid-template-columns: 1fr; } }

.quarry {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.quarry:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.quarry-img {
  height: 280px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.quarry-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(13,12,10,0.4) 100%);
}

/* Variante compacte (sans image) utilisée sous la carte */
.quarry-compact .quarry-body { padding: 24px; }
.quarry-compact { border-top: 3px solid var(--accent); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.quarry-compact:nth-child(1) { border-top: 3px solid var(--accent); }   /* Toglou featured */
.quarry-compact:nth-child(2) { border-top: 3px solid #4a4640; }         /* Ngoudiane basalte */
.quarry-compact:nth-child(3) { border-top: 3px solid var(--calcaire); } /* Pout calcaire */

/* Toglou en avant : effet halo rouille subtil */
.quarry-compact.featured {
  background: linear-gradient(180deg, rgba(160, 74, 38, 0.06), transparent 60%), var(--bg-3);
  box-shadow: 0 0 0 1px rgba(160, 74, 38, 0.30), 0 8px 24px rgba(0,0,0,0.4);
  border-top-width: 4px !important;
}
.quarry-tag-featured {
  background: var(--accent) !important;
  color: #0d0c0a !important;
  font-weight: 700 !important;
}

/* Card carrière activée par clic sur un pin de la carte */
.quarry-compact.active {
  transform: translateY(-6px);
  border-top: 3px solid var(--accent);
  box-shadow:
    0 0 0 2px var(--accent),
    0 16px 40px rgba(160, 74, 38, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation: quarryPulse 2.5s ease-out;
}
@keyframes quarryPulse {
  0%   { box-shadow: 0 0 0 0 rgba(160, 74, 38, 0.5),  0 16px 40px rgba(160, 74, 38, 0.40); }
  40%  { box-shadow: 0 0 0 14px rgba(160, 74, 38, 0), 0 16px 40px rgba(160, 74, 38, 0.30); }
  100% { box-shadow: 0 0 0 2px var(--accent),         0 16px 40px rgba(160, 74, 38, 0.30); }
}

/* ===== CARTE SVG SÉNÉGAL ===== */
.map-wrap {
  position: relative;
  margin-bottom: 32px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.map-senegal {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  background: #0d0c0a;
}

/* Voile rouille léger sur la carte au survol */
.map-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 30% 40% at 24% 42%, rgba(160, 74, 38, 0.10), transparent 70%);
}

/* Pins (pas de transform CSS au survol pour ne pas écraser le translate SVG) */
.map-pin { cursor: pointer; }
.map-pin .pin-core { transition: r .2s ease, fill .2s ease; }
.map-pin:hover .pin-core { r: 8; fill: #c25e36; }
.map-pin .pin-glow-ring { transition: stroke .2s ease; }
.map-pin:hover .pin-glow-ring { stroke: #c25e36; }

/* Légende sous la carte */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 14px 24px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.legend-pin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--text);
  box-shadow: 0 0 0 4px rgba(160, 74, 38, 0.2);
}
.legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.legend-dot-major {
  width: 8px;
  height: 8px;
  background: var(--text);
}
.legend-line {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--line-strong);
  border-bottom: 1px dashed var(--text-3);
}

@media (max-width: 760px) {
  .map-legend { padding: 12px 16px; gap: 16px; font-size: 11px; }
}
.quarry-body { padding: 32px; }
.quarry-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  margin-bottom: 12px;
}
.quarry h3 { margin-bottom: 12px; }
.quarry-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.quarry-list li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.quarry-list li::before {
  content: "▪";
  color: var(--accent);
  margin-right: 10px;
}

/* =================== POURQUOI =================== */
.why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .why { grid-template-columns: 1fr; } }

.why-card {
  padding: 28px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .3s, border-color .3s;
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.why-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border-radius: var(--radius);
  margin-bottom: 16px;
  color: var(--accent);
}
.why-icon svg { width: 22px; height: 22px; }
.why-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.why-card p { font-size: 13px; margin: 0; }

/* =================== CASE / PORT NDAYANE =================== */
.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 880px) { .case { grid-template-columns: 1fr; } }

.case-img {
  background-size: cover;
  background-position: center;
  min-height: 380px;
  position: relative;
}
.case-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(45deg, rgba(13,12,10,0.5), transparent 60%);
}
.case-body { padding: 48px; }
.case-lead {
  font-size: 17px;
  color: var(--text);
  margin-bottom: 16px;
}
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.case-stats > div {
  border-right: 1px solid var(--line);
  padding-right: 16px;
}
.case-stats > div:last-child { border-right: 0; }
.case-stats b {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 4px;
}
.case-stats span {
  font-size: 12px;
  color: var(--text-3);
}
@media (max-width: 540px) {
  .case-body { padding: 28px; }
  .case-stats { grid-template-columns: 1fr; gap: 16px; }
  .case-stats > div { border-right: 0; padding-right: 0; }
}

/* =================== FAQ =================== */
.faq {
  max-width: 820px;
  margin: 0 auto;
}
.faq details {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .2s;
}
.faq details[open] { border-color: var(--accent); }
.faq summary {
  padding: 18px 24px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--accent);
  font-size: 22px;
  font-weight: 300;
  transition: transform .2s;
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  padding: 0 24px 20px;
  font-size: 14px;
  margin: 0;
  color: var(--text-2);
}
.faq details em { color: var(--accent); font-style: italic; }

/* =================== GLOSSAIRE =================== */
.glossary-toggle {
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
}
.glossary-toggle > summary {
  padding: 18px 24px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.glossary-toggle > summary::-webkit-details-marker { display: none; }
.glossary-toggle > summary::after { content: "↓"; color: var(--accent); }
.glossary-toggle[open] > summary::after { content: "↑"; }
.glossary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) { .glossary { grid-template-columns: 1fr; } }
.gloss {
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 13px;
}
.gloss:nth-child(2n) { border-right: 0; }
.gloss b {
  display: block;
  color: var(--accent);
  font-family: var(--serif);
  margin-bottom: 4px;
  font-size: 14px;
}
.gloss span { color: var(--text-2); }

/* =================== CONTACT =================== */
.section-contact {
  background: var(--bg-2);
  background-image:
    radial-gradient(ellipse at top right, rgba(160, 74, 38, 0.14), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(160, 74, 38, 0.06), transparent 50%);
  position: relative;
}
.section-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='r'><feTurbulence type='turbulence' baseFrequency='0.012' numOctaves='3' seed='8'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.55 0 0 0 0 0.3 0 0 0 0.7 0'/></filter><rect width='400' height='400' filter='url(%23r)'/></svg>");
  background-size: 600px 600px;
  mix-blend-mode: soft-light;
}
.section-contact > * { position: relative; z-index: 1; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

.contact-info h2 { margin-bottom: 16px; }
.contact-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}
.contact-list li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.ci-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 4px;
}
.contact-list a {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text);
  font-weight: 500;
}
.contact-list a:hover { color: var(--accent); }

.contact-form {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.hp { display: none; }
.form-note {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  margin: 12px 0 0;
}

/* =================== FOOTER =================== */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 64px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  padding-bottom: 48px;
}
@media (max-width: 880px) { .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 540px) { .footer-inner { grid-template-columns: 1fr; } }

.foot-col .brand-logo { height: 36px; margin-bottom: 16px; color: var(--text); }
.foot-col h4 { margin-bottom: 14px; color: var(--text); font-family: var(--serif); font-size: 14px; }
.foot-col a {
  display: block;
  color: var(--text-2);
  font-size: 14px;
  padding: 4px 0;
}
.foot-col a:hover { color: var(--accent); }
.foot-tagline {
  color: var(--text-2);
  font-size: 14px;
  max-width: 260px;
  margin: 0;
}
.foot-small {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 24px 0;
}
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--text-3);
}
.footer-bottom p { margin: 0; }
.legal { font-size: 12px; }

/* =================== UTILS =================== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =======================================================
   RESPONSIVE MOBILE — phones ≤ 640px
   ======================================================= */
@media (max-width: 640px) {

  /* === Délimiteurs renforcés entre sections sur mobile ===
     Chaque section reçoit un filet rouille en haut + losange marqueur centré,
     et un contraste plus marqué entre fonds bg / bg-alt.
     Améliore drastiquement la lisibilité des transitions sur petit écran. */
  .section,
  .section-alt {
    border-top: 1px solid var(--line-strong);
    position: relative;
  }
  .section::before,
  .section-alt::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--accent);
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 0 0 0 4px var(--bg);
    z-index: 2;
  }
  .section-alt::before { box-shadow: 0 0 0 4px var(--bg-2); }
  /* Première section (hero ou trust) ne reçoit pas le marqueur */
  .hero::before, .trust::before { display: none; }
  .hero, .trust { border-top: 0; }

  /* Contraste plus marqué entre sections alternées en mobile */
  .section-alt { background: var(--bg-3); }


  :root { --header-h: 60px; }

  /* Empêche tout débordement horizontal SANS casser position:sticky du header (bug iOS Safari).
     overflow-x: clip est l'équivalent moderne qui ne crée pas de containing block pour sticky. */
  html { overflow-x: clip; }
  body { overflow-x: clip; max-width: 100vw; }
  .container { padding: 0 18px; }

  /* === Annonce + Header === */
  .announce { font-size: 12px; }
  .announce-inner { padding: 6px 18px; gap: 8px; }
  .announce-inner span:last-child { font-size: 11.5px; line-height: 1.4; }

  .brand-logo { height: 26px; }
  .nav a { font-size: 15px; padding: 12px 14px; }
  .nav a.btn { margin: 8px 0 0; }

  /* === Hero === */
  .hero { min-height: auto; padding: 48px 0 40px; }
  .hero-title { font-size: 2rem; line-height: 1.2; margin-bottom: 18px; }
  .hero-sub { font-size: 15px; margin-bottom: 24px; }
  .hero-cta { gap: 10px; margin-bottom: 36px; }
  .hero-cta .btn { width: 100%; padding: 14px 20px; }
  .hero-kpis {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 20px;
    max-width: 100%;
  }
  .kpi { padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi:last-child { border-bottom: 0; padding-bottom: 0; }
  .kpi-value { font-size: 22px; }
  .scroll-cue { display: none; }

  /* === Trust strip === */
  .trust { padding: 22px 0; }
  .trust-grid { gap: 6px 14px; flex-direction: column; align-items: center; }
  .trust-item { font-size: 13px; }
  .trust-item + .trust-item::before { display: none; }

  /* === Sections === */
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 36px; }
  .section-sub { font-size: 15px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.15rem; }

  /* === Produits : carrousel horizontal (catalogue de roches uniquement) === */
  .products:not(.values-products) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 18px 18px;
    margin: 0 -18px;
  }
  .products:not(.values-products)::-webkit-scrollbar { display: none; }
  .products:not(.values-products) > .product {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  .product-img { aspect-ratio: 16 / 11; }
  .product-body { padding: 18px; }
  .price-table th, .price-table td { font-size: 12.5px; padding: 8px 0; }

  /* === Valeurs : restent en colonne verticale empilée, jamais en carrousel === */
  .values-products {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    overflow: visible !important;
  }
  .values-products .product {
    width: 100%;
    max-width: 560px;
    min-width: 0;
    flex: 0 1 auto;
  }

  /* === Carrières : carrousel horizontal aussi === */
  .quarries {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 18px 18px;
    margin: 0 -18px;
  }
  .quarries::-webkit-scrollbar { display: none; }
  .quarry-compact {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }

  /* Indicateur swipe sous chaque carrousel */
  .products,
  .quarries {
    background-image: linear-gradient(to right, transparent 0%, rgba(160,74,38,0.04) 100%);
  }

  /* === Calculateur === */
  .calc { grid-template-columns: 1fr; }
  .calc-form, .calc-result { padding: 22px; }
  .seg { flex-direction: column; gap: 4px; }
  .seg-btn { padding: 12px; font-size: 13.5px; }
  .field-row { grid-template-columns: 1fr; gap: 14px; }
  .result-row strong { font-size: 16px; }
  .result-row.big strong { font-size: 22px; }

  /* === Comparatif === */
  .compare { font-size: 13px; }
  .compare-table { min-width: 480px; }
  .compare-table th, .compare-table td { padding: 12px 14px; }
  .compare-rule { font-size: 13px; padding: 14px 16px; }

  /* === Decision tree === */
  .tree { padding: 22px; min-height: auto; }
  .tree-options { grid-template-columns: 1fr; gap: 10px; }
  .tree-opt { padding: 14px 16px; font-size: 14px; }
  .tree-step h3 { font-size: 1.15rem; margin-bottom: 18px; }

  /* === Carte SVG : on cache l'inset complexe et on agrandit
         le tracé du pays + un cluster simple === */
  .map-wrap { margin-bottom: 24px; }
  .map-senegal { max-height: 480px; }
  /* Sur mobile, on remplace le bandeau bas par une version verticale */
  .map-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    font-size: 12px;
  }

  /* === Quarry compact cards === */
  .quarry-compact .quarry-body { padding: 18px; }

  /* === Pourquoi === */
  .why { gap: 14px; }
  .why-card { padding: 22px; }

  /* === FAQ + Glossaire === */
  .faq summary { padding: 14px 16px; font-size: 14px; }
  .faq details p { padding: 0 16px 16px; font-size: 13px; }
  .glossary-toggle > summary { padding: 14px 16px; font-size: 14px; }
  .gloss { padding: 12px 16px; }

  /* === Contact === */
  .contact-grid { gap: 28px; }
  .contact-form { padding: 22px; }
  .contact-list a { font-size: 16px; word-break: break-word; }

  /* === Footer === */
  .footer { padding: 48px 0 0; }
  .footer-inner { gap: 28px; padding-bottom: 32px; }
  .foot-col h4 { font-size: 13px; }
  .foot-col a { font-size: 13.5px; }
  .footer-bottom { padding: 18px 0; }
  .footer-bottom .container { font-size: 12px; flex-direction: column; align-items: flex-start; }
}

/* =======================================================
   RESPONSIVE MOBILE — petits phones ≤ 420px
   ======================================================= */
@media (max-width: 420px) {

  .container { padding: 0 14px; }

  /* L'inset reste visible sur petits téléphones : le viewBox du SVG le scale automatiquement. */

  /* Hero plus compact */
  .hero { padding: 36px 0 32px; }
  .hero-title { font-size: 1.7rem; }
  .hero-sub { font-size: 14px; }
  .eyebrow { font-size: 11px; padding: 3px 8px; }

  /* Sections encore plus serrées */
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 28px; }

  /* Produits : table très condensée */
  .price-table th, .price-table td { font-size: 11.5px; }
  .product-uses { font-size: 12px; padding: 12px; }

  /* Comparatif : table card-style en empilé */
  .compare-table { min-width: 380px; font-size: 12px; }
  .compare-table th, .compare-table td { padding: 10px 8px; }
  .compare-table th:first-child { width: 30%; }

  /* Boutons full width */
  .btn { padding: 13px 18px; font-size: 14px; }
  .btn-sm { padding: 10px 14px; font-size: 13px; }

  /* Cards carrière */
  .quarry-compact .quarry-body { padding: 16px; }
  .quarry h3 { font-size: 1.05rem; }
  .quarry-list { font-size: 12.5px; }
}

/* =======================================================
   ORIENTATION PAYSAGE SUR PHONE
   ======================================================= */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .hero { min-height: 100vh; padding: 40px 0; }
  .hero-title { font-size: 1.8rem; }
  .hero-kpis { grid-template-columns: repeat(2, 1fr); }
}


/* =======================================================
   NOS VALEURS
   ======================================================= */

.values-section {
  position: relative;
  overflow: hidden;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.value-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--bg-3);
  border: 1px solid var(--line);
  padding: 42px 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.value-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right,
    rgba(160,74,38,0.14), transparent 45%);
  pointer-events: none;
}

.value-card:hover {
  transform: translateY(-6px);
  border-color: rgba(160,74,38,0.5);
  box-shadow: var(--shadow);
}

.value-number {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 18px;
}

.value-card h3 {
  margin-bottom: 22px;
  font-size: 1.6rem;
}

.value-card p {
  color: var(--text-2);
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 980px) {
  .values-grid {
    grid-template-columns: 1fr;
  }

  .value-card {
    padding: 34px 26px;
  }
}


/* =======================================================
   VALUES SECTION USING SAME PRODUCT CAROUSEL
   ======================================================= */

.values-products .product {
  min-width: 340px;
}

.values-products .product-body {
  padding: 42px;
}

.value-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(160,74,38,0.25);
}

@media (max-width: 768px) {

  .values-products {
    grid-auto-columns: 88%;
  }

  .values-products .product-body {
    padding: 28px 22px;
  }

}


/* =======================================================
   PREMIUM VALUES DESIGN
   ======================================================= */

.values-products {
  margin-top: 56px;
  /* En 1 colonne (tablet/mobile), on centre les cards et on limite leur largeur
     pour éviter les "rectangles trop longs" en pleine largeur */
  justify-items: center;
  align-items: stretch;
}
@media (max-width: 1000px) {
  .values-products {
    grid-template-columns: 1fr;
  }
  .values-products .product {
    width: 100%;
    max-width: 620px;
  }
}

.values-products .product {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
    var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  width: 100%;
}

.values-products .product:hover {
  transform: translateY(-6px);
  border-color: rgba(160,74,38,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.values-products .product-body {
  /* Padding réduit + flex column avec hauteur 100% pour que le bloc
     .product-uses puisse être aligné en bas via margin-top: auto,
     malgré des longueurs de texte différentes selon les 3 valeurs. */
  padding: 32px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.values-products .product-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.values-products .product-head h3 {
  font-size: 1.6rem;
  line-height: 1.15;
  margin: 0;
}

.values-products .origin {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(160,74,38,0.12);
  border: 1px solid rgba(160,74,38,0.25);
  color: #d7a28d;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.values-products .product-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  /* Hauteur minimum pour aligner le haut des blocs .product-uses entre cartes,
     malgré des descriptions de longueurs différentes (~3 lignes). */
  min-height: calc(14.5px * 1.55 * 3);
}

/* Bloc sombre du bas (.product-uses) : poussé en bas via margin-top: auto
   pour aligner horizontalement les 3 sous-blocs entre les cartes Engagement,
   Performance et Qualité, malgré des longueurs de description différentes. */
.values-products .product-uses {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.values-products .product-uses p {
  margin: 0;
}

.values-products .product-uses strong {
  display: block;
  color: var(--accent);
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.value-number {
  width: 52px;
  height: 52px;
  font-size: 18px;
  margin-bottom: 2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)),
    rgba(160,74,38,0.18);
  border: 1px solid rgba(160,74,38,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

@media (max-width: 768px) {

  .values-products .product-body {
    padding: 24px 22px 22px;
    gap: 11px;
  }

  .values-products .product-head h3 {
    font-size: 1.4rem;
  }

  .values-products .product-desc {
    font-size: 14px;
    line-height: 1.55;
  }

  .values-products .product-uses {
    font-size: 13px;
    line-height: 1.6;
    padding-top: 14px;
    gap: 8px;
  }

  .value-number {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

}