/* NB : le fond ne doit pas descendre sous ~#0b0c0e, sinon le fond gris du logo (mix-blend-mode: lighten) réapparaît en carré.
   Olydyne : thème v2 (serif élégant, fond plus noir, sections aérées).
   Chargé APRÈS le <style> de chaque page : il surcharge les règles de base. Une seule feuille pour tout le site. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url(fonts/cormorant-garamond-normal.woff2) format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url(fonts/cormorant-garamond-italic.woff2) format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0b0c0e;
  --bg-alt: #0f1013;
  --border: #1f2227;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

body { line-height: 1.6; }

/* En-tête */
header { background: rgba(11, 12, 14, 0.88); }
nav a { font-size: 0.85rem; letter-spacing: 0.06em; }

/* Hero : halo doré très discret, hauteur plafonnée */
.hero { min-height: min(62vh, 560px); background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(197, 168, 128, 0.09), transparent 70%); }
.hero .eyebrow { color: var(--accent); letter-spacing: 0.22em; font-size: 0.78rem; }
.hero .product-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.6rem, 11vw, 6.2rem);
  letter-spacing: 0.01em;
  line-height: 1;
  color: #fff;
  margin: 0 0 20px;
}
.hero p.tagline { font-size: 1.12rem; line-height: 1.7; }
.hero p.motto {
  color: #e2c99a;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 400;
  margin: 8px 0 26px;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 56px;
  margin: 6px 0 30px;
}
.hero-stats .stat { text-align: center; }
.hero-stats .stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.1;
  color: #fff;
}
.hero-stats .stat span {
  display: block;
  margin-top: 6px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Accueil : slogan du hero en serif */
.hero p.tagline.serif { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.7rem); font-style: italic; color: #cfcfc8; }

/* Sections : plus d'air, un point doré comme séparateur à la place du filet */
section { border-top: 0; padding: 104px 24px; }
section::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: 0 auto 64px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}
h2.section-title { font-size: 0.78rem; letter-spacing: 0.22em; }
h3.section-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0.2px;
  margin: 0 0 24px;
}
p.lead { line-height: 1.85; }

/* Titres de cartes et de blocs */
.card, .product-card, .specs, .price-box, .models li, .sensor-call { border-radius: 14px; }
.card { padding: 28px; background: rgba(255, 255, 255, 0.02); }
.card h4 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; letter-spacing: 0.2px; margin: 0 0 10px; }
.card p { font-size: 0.92rem; line-height: 1.7; }
.product-card h4 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; }
.group-title { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; }
.price-box .price { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; }
.faq-item h4 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; letter-spacing: 0.2px; }
h4.sub-heading { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; }
.pillar-num { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.15em; }
.card .pillar-num { margin-bottom: 8px; }

/* Articles (pages à gabarit article) */
article h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 6vw, 3.4rem); line-height: 1.1; }
article h2 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; }
article p.intro { font-family: var(--serif); font-size: 1.45rem; line-height: 1.5; color: #e8e8e2; }

@media (max-width: 640px) {
  section { padding: 72px 20px; }
  section::before { margin-bottom: 44px; }
  .hero-stats { gap: 16px 32px; }
}

.grid + p.lead, .grid + .feature-group, p.lead + .grid { margin-top: 36px; }
.grid.pillars + p.lead { margin-top: 44px; }

/* Chiffres alignés (« lining ») : par défaut Cormorant dessine des chiffres elzéviriens où le 1 ressemble à un I */
.hero .product-name, .hero p.motto, .hero p.tagline.serif, .hero-stats .stat b, h3.section-heading, .card h4, .product-card h4,
.group-title, .price-box .price, .faq-item h4, h4.sub-heading, .pillar-num, article h1, article h2, article p.intro {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* En-tête : logo à gauche, menu centré sur la page, langues à droite */
header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; }
header .logo { justify-self: start; }
header nav { justify-self: center; }
header .langs { justify-self: end; display: flex; gap: 8px; }
header .langs a {
  white-space: nowrap; text-decoration: none; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.06em;
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; transition: color 0.2s, border-color 0.2s;
}
header .langs a:hover { color: var(--fg); border-color: var(--accent); }
@media (max-width: 760px) {
  header { grid-template-columns: auto 1fr; row-gap: 10px; }
  header .langs { grid-column: 2; grid-row: 1; }
  header nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; justify-content: center; }
}

/* Fiche technique : cartes clé / valeur */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; margin-top: 40px; }
.spec-card { border: 1px solid var(--border); border-radius: 14px; padding: 28px; background: rgba(255, 255, 255, 0.02); }
.spec-card h4 { margin: 0 0 14px; font-family: var(--serif); font-weight: 500; font-size: 1.55rem; color: var(--accent); letter-spacing: 0.2px; }
.spec-card dl { margin: 0; }
.spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.9rem; line-height: 1.5; }
.spec-row:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-row dt { color: var(--muted); flex: none; }
.spec-row dd { margin: 0; text-align: right; color: var(--fg); }
#fiche-technique { max-width: 1120px; }
#fiche-technique .section-title, #fiche-technique .section-heading, #fiche-technique .compat-note { max-width: 872px; margin-left: max(0px, calc((100% - 872px) / 2)); }

/* Pages simples (mentions légales, confidentialité, CGV, 404) : titre en serif */
.wrap h1, main h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: 0.2px; }