/* =========================================================
   Vitrier 49 — Design system "coupe de verre"
   Palette: verre glacé + teal profond + accent ambre urgence
   Typo: Space Grotesk (display) / IBM Plex Sans (texte) / IBM Plex Mono (data)
   ========================================================= */

:root{
  --glass-50:   #F4F8F9;
  --glass-100:  #E7EFF1;
  --glass-200:  #C9D6DA;
  --ink:        #17252B;
  --teal-700:   #0F6E7C;
  --teal-800:   #0B5560;
  --teal-900:   #14313B;
  --amber-500:  #E8792C;
  --amber-600:  #CC661F;
  --white:      #FFFFFF;

  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 2px;
  --max: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--glass-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--teal-900);
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; }
h3{ font-size: 1.15rem; font-weight: 600; }
p{ margin: 0 0 1em; color: #2E4147; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-700);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width: 18px; height: 1px;
  background: var(--amber-500);
}

/* ---------- Score-line divider : le geste du vitrier qui raye le verre ---------- */
.score-line{
  position: relative;
  height: 34px;
  overflow: hidden;
}
.score-line svg{ width:100%; height:100%; display:block; }
.score-line .snap-point{ fill: var(--amber-500); }
.score-line .cut{ stroke: var(--glass-200); stroke-width:1; fill:none; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(244,248,249,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--glass-200);
}
.site-header .row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px; padding: 14px 0;
}
.brand{
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.2rem;
  color: var(--teal-900);
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.brand .mark{
  width: 26px; height: 26px; flex-shrink:0;
}
.brand small{
  display:block; font-family: var(--font-mono); font-weight:400;
  font-size:.62rem; letter-spacing:.08em; color: var(--teal-700);
  text-transform:uppercase;
}
nav.main-nav{ display:flex; gap: 26px; }
nav.main-nav a{
  font-size:.92rem; font-weight:500; text-decoration:none;
  color: var(--ink); position:relative; padding: 4px 0;
}
nav.main-nav a[aria-current="page"]{ color: var(--teal-700); }
nav.main-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--amber-500);
}
.call-btn{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--teal-800); color:#fff;
  font-weight:600; font-size:.92rem;
  padding: 10px 18px; border-radius: var(--radius);
  text-decoration:none; white-space:nowrap;
  border: 1px solid var(--teal-800);
  transition: background .15s ease;
}
.call-btn:hover{ background: var(--teal-700); }
.call-btn.ghost{
  background: transparent; color: var(--teal-800);
}
.call-btn.ghost:hover{ background: var(--glass-100); }
.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: var(--teal-900);
  color: #fff;
  overflow:hidden;
}
.hero img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; opacity:.22;
}
.hero .wrap{
  position:relative; padding: 76px 24px 96px;
}
.hero .eyebrow{ color: var(--glass-200); }
.hero .eyebrow::before{ background: var(--amber-500); }
.hero h1{ color:#fff; max-width: 700px; margin-top:.4em; }
.hero p.lead{ color: var(--glass-100); max-width: 560px; font-size:1.08rem; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 28px; }
.btn-amber{
  display:inline-flex; align-items:center; gap:9px;
  background: var(--amber-500); color:#1B1200;
  font-weight:700; padding: 14px 24px; border-radius: var(--radius);
  text-decoration:none; font-size:1.02rem;
  border: 1px solid var(--amber-500);
  transition: background .15s ease;
}
.btn-amber:hover{ background: var(--amber-600); }
.btn-outline{
  display:inline-flex; align-items:center; gap:9px;
  background: transparent; color:#fff;
  border: 1px solid rgba(255,255,255,.4);
  font-weight:600; padding: 14px 24px; border-radius: var(--radius);
  text-decoration:none; font-size:1.02rem;
}
.btn-outline:hover{ border-color: #fff; }

/* ---------- Trust strip ---------- */
.trust-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:1px;
  background: var(--glass-200);
  margin-top: -46px; position:relative; z-index:5;
  border: 1px solid var(--glass-200);
}
.trust-strip .cell{
  background:#fff; padding: 22px 24px; display:flex; gap:14px; align-items:flex-start;
}
.trust-strip h3{ margin-bottom:.2em; font-size:1rem; }
.trust-strip p{ margin:0; font-size:.88rem; color:#4A5C61; }

/* ---------- Sections generic ---------- */
section.block{ padding: 64px 0; }
section.block.tight{ padding: 44px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 36px; flex-wrap:wrap; }
.section-head p{ max-width: 480px; margin:0; }
.link-more{ font-weight:600; color: var(--teal-700); text-decoration:none; font-size:.92rem; white-space:nowrap; }

/* ---------- Service cards (icon based, no photo duplication) ---------- */
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.svc-card{
  background:#fff; border:1px solid var(--glass-200); border-radius: var(--radius);
  padding: 26px; display:flex; flex-direction:column; gap:12px;
  position:relative;
}
a.svc-card{
  text-decoration:none; color:inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.svc-card:hover{
  border-color: var(--teal-700);
  box-shadow: 0 4px 16px rgba(15,110,124,.12);
  transform: translateY(-2px);
}
a.svc-card::after{
  content:"";
  position:absolute; top:22px; right:22px;
  width:16px; height:16px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E7C' stroke-width='2'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
a.svc-card:hover::after{ opacity:1; transform:translateX(0); }
.svc-card .icon{
  width: 44px; height:44px; border-radius: var(--radius);
  background: var(--teal-900); display:flex; align-items:center; justify-content:center;
  color: var(--amber-500);
}
.svc-card h3{ margin-bottom:.15em; }
.svc-card p{ font-size:.9rem; margin:0; color:#4A5C61; }
.svc-card ul{ margin:.6em 0 0; padding-left:1.1em; font-size:.86rem; color:#4A5C61; }
.svc-card li{ margin-bottom:.3em; }
.svc-card .svc-link{
  margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:6px;
  font-size:.86rem; font-weight:600; color: var(--teal-700); text-decoration:none;
}
.svc-card .svc-link:hover{ color: var(--amber-600); }
.svc-card.linked{ text-decoration:none; }

/* ---------- Bandeau "autres spécialités" (maillage interne) ---------- */
.related-specialties{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.related-specialties a{
  display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid var(--glass-200);
  border-radius: var(--radius); padding:16px 18px; text-decoration:none; font-size:.86rem; color: var(--ink);
}
.related-specialties a strong{ color: var(--teal-800); font-family: var(--font-display); font-size:.92rem; }
.related-specialties a:hover{ border-color: var(--teal-700); }
.faq-item{ border-top:1px solid var(--glass-200); padding: 18px 0; }
.faq-item:first-child{ border-top:none; }
.faq-item h3{ font-size:1rem; margin-bottom:.35em; }
.faq-item p{ margin:0; font-size:.92rem; }
@media (max-width: 900px){ .related-specialties{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .related-specialties{ grid-template-columns: 1fr; } }

/* Photo feature block */
.feature-photo{
  display:grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items:center;
}
.feature-photo img{ border-radius: var(--radius); }
.feature-photo.reverse{ direction: rtl; }
.feature-photo.reverse > *{ direction: ltr; }

/* Panel-icône : remplace une photo quand aucune image inédite n'est disponible,
   évite toute duplication d'image tout en gardant un repère visuel fort */
.icon-panel{
  background: var(--teal-900);
  border-radius: var(--radius);
  min-height: 320px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.icon-panel::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px);
}
.icon-panel svg{ position:relative; width: 40%; height:40%; color: var(--amber-500); }

/* Numbered process (real sequence -> numbers justified) */
.process{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; counter-reset: step; }
.process .step{ position:relative; padding-left: 46px; }
.process .step::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:0;
  width:34px; height:34px; border-radius: var(--radius);
  background: var(--glass-100); border:1px solid var(--glass-200);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; color: var(--teal-700);
}

/* ---------- CTA band ---------- */
.cta-band{ background: var(--amber-500); color:#1B1200; }
.cta-band .wrap{ padding: 42px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cta-band h2{ color:#1B1200; margin-bottom:.2em; }
.cta-band .call-btn{ background:#1B1200; border-color:#1B1200; }
.cta-band .call-btn:hover{ background:#000; }

/* ---------- Commune chips ---------- */
.chip-field{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family: var(--font-mono); font-size:.78rem;
  background: var(--glass-100); border:1px solid var(--glass-200);
  padding: 7px 12px; border-radius: var(--radius); color: var(--teal-800);
}

/* ---------- Zone map cards ---------- */
.zone-cards{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.zone-card{ background:#fff; border:1px solid var(--glass-200); border-radius: var(--radius); padding:20px; position:relative; }
.zone-card h3{ font-size:.98rem; }
.zone-card p{ font-size:.84rem; margin:0; color:#4A5C61; }
a.zone-card{
  text-decoration:none; color:inherit; display:block;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.zone-card:hover{
  border-color: var(--teal-700);
  box-shadow: 0 4px 16px rgba(15,110,124,.12);
  transform: translateY(-2px);
}
a.zone-card::after{
  content:"";
  position:absolute; top:18px; right:18px;
  width:14px; height:14px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E7C' stroke-width='2'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
a.zone-card:hover::after{ opacity:1; transform:translateX(0); }

/* ---------- Tarifs table ---------- */
.price-table{ width:100%; border-collapse: collapse; background:#fff; border:1px solid var(--glass-200); }
.price-table th{ text-align:left; background: var(--teal-900); color:#fff; padding:14px 18px; font-family: var(--font-mono); font-weight:600; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
.price-table td{ padding:14px 18px; border-top:1px solid var(--glass-200); font-size:.94rem; }
.price-table td.price{ font-family: var(--font-mono); font-weight:700; color: var(--teal-800); text-align:right; white-space:nowrap; }
.price-table tr:nth-child(even) td{ background: var(--glass-50); }
.note-box{ display:flex; gap:12px; align-items:flex-start; background: var(--glass-100); border:1px solid var(--glass-200); padding:16px 18px; font-size:.86rem; color:#4A5C61; border-radius: var(--radius); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.3fr; gap: 34px; align-items:start; }
.info-card{ background:#fff; border:1px solid var(--glass-200); border-radius: var(--radius); padding:24px; display:flex; flex-direction:column; gap:18px; }
.info-row{ display:flex; gap:12px; align-items:flex-start; }
.info-row h3{ margin-bottom:.1em; font-size:.96rem; }
.info-row p{ margin:0; font-size:.86rem; color:#4A5C61; }
form.quote-form{ background:#fff; border:1px solid var(--glass-200); border-radius: var(--radius); padding: 28px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:.82rem; font-weight:600; color: var(--teal-900); }
.field input, .field select, .field textarea{
  border:1px solid var(--glass-200); border-radius: var(--radius); padding:10px 12px;
  font-family: var(--font-body); font-size:.94rem; background: var(--glass-50); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--teal-700); outline-offset:1px; }
.submit-btn{
  background: var(--teal-800); color:#fff; border:none; font-weight:700;
  padding: 13px 26px; border-radius: var(--radius); font-size:.98rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
}
.submit-btn:hover{ background: var(--teal-700); }
.confirm-msg{ margin-top:14px; background: var(--glass-100); border:1px solid var(--glass-200); padding:12px 16px; font-size:.86rem; border-radius: var(--radius); }

/* ---------- Footer ---------- */
footer.site-footer{ background: var(--teal-900); color: var(--glass-100); margin-top: 60px; }
footer .wrap{ padding: 52px 24px 28px; display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
footer h3{ color:#fff; font-size:.95rem; margin-bottom:14px; }
footer p{ color: var(--glass-200); font-size:.88rem; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
footer a{ text-decoration:none; color: var(--glass-200); font-size:.88rem; }
footer a:hover{ color:#fff; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; color:#fff; font-size:1.1rem; margin-bottom:12px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); text-align:center; padding: 16px 24px; font-size:.78rem; color: var(--glass-200); font-family: var(--font-mono); }

/* ---------- Skip link / a11y ---------- */
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; color:var(--teal-900); padding:10px 16px; z-index:100; }
.skip-link:focus{ left:12px; top:12px; }
:focus-visible{ outline: 2px solid var(--amber-500); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .trust-strip{ grid-template-columns:1fr; }
  .zone-cards{ grid-template-columns: repeat(2,1fr); }
  .feature-photo, .contact-grid, footer .wrap{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr; }
  nav.main-nav{ display:none; }
}
@media (max-width: 620px){
  .services-grid{ grid-template-columns:1fr; }
  .zone-cards{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
}