*{box-sizing:border-box}
body{margin:0;background:#f8f7f3;color:#292929;font-family:Arial,Helvetica,sans-serif;line-height:1.65}
.wrap{width:min(1080px,88vw);margin:0 auto}
.site-header{height:86px;background:#fbfaf7;border-bottom:1px solid #e7e3da}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{text-decoration:none;color:#222;line-height:1.05;font-family:Georgia,serif;font-size:20px}
.brand small{display:block;font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:9px;color:#777;margin-top:7px}
nav{display:flex;align-items:center;gap:28px}
nav a{color:#333;text-decoration:none;font-size:13px}
nav .active{font-weight:700}
.cta-small{border:1px solid #333;padding:9px 16px}
.intro{padding:88px 0 65px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:#777;margin:0 0 17px}
.intro h1{font:400 clamp(44px,6vw,72px)/1.03 Georgia,serif;letter-spacing:-.035em;margin:0 0 28px}
.intro h1 em{font-style:normal}
.lead{max-width:720px;font-size:19px;color:#555;margin:0}
.hero-image{position:relative}
.hero-image img{display:block;width:100%;height:auto}
.hero-caption{position:absolute;left:0;bottom:0;background:rgba(248,247,243,.94);padding:18px 24px;font-size:14px;color:#555}
.hero-caption strong{font-family:Georgia,serif;font-size:21px;font-weight:400;color:#292929}
.section{padding-top:105px;padding-bottom:105px}
.two-col{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;border-bottom:1px solid #ddd8cd}
.two-col h2,.split h2,.history h2,.practical h2{font:400 clamp(34px,4vw,52px)/1.1 Georgia,serif;margin:0}
.copy p{color:#555;margin:0 0 19px}
.journey-title{padding-top:0;padding-bottom:12px}.journey-title h2{font:400 clamp(34px,4vw,52px)/1.1 Georgia,serif;margin:0;text-align:center}
.three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.three-cards article{border-top:1px solid #bbb6aa;padding-top:18px}
.three-cards img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:25px}
.three-cards h2{font:400 29px/1.15 Georgia,serif;margin:0 0 14px}
.three-cards article>p:last-child{color:#555;font-size:15px}
.split{display:grid;grid-template-columns:1.08fr .92fr;gap:0;align-items:stretch}
.image-panel img{display:block;width:100%;height:100%;object-fit:cover}
.panel{background:#ebe7de;padding:70px}
.panel p{color:#555}
.history{display:grid;grid-template-columns:1fr .65fr;gap:75px;align-items:center}
.history-text>p:not(.eyebrow){color:#555}
.history img{width:100%;height:360px;object-fit:cover}
.audience{background:#292a28;color:#f4f0e8;padding:105px 0}
.narrow{width:min(850px,88vw)}
.audience .eyebrow{color:#aaa}
.audience h2{font:400 clamp(40px,5vw,62px)/1.05 Georgia,serif;margin:0 0 28px}
.audience h2 em{font-style:normal}
.audience p:not(.eyebrow){color:#d6d2ca;font-size:17px;max-width:760px}
.practical{display:grid;grid-template-columns:1fr 1.2fr;gap:75px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.facts div{border-top:1px solid #c8c1b5;padding-top:14px}
.facts strong{display:block;font:400 21px Georgia,serif;margin-bottom:5px}
.facts span{display:block;font-size:13px;color:#777}
.final-cta{background:#ebe7de;padding:100px 0}
.final-cta h2{font:400 clamp(40px,5vw,62px)/1.05 Georgia,serif;margin:0 0 25px}
.final-cta p:not(.eyebrow){max-width:760px;color:#555}
.button{display:inline-block;margin-top:18px;background:#292a28;color:#f4f0e8;text-decoration:none;padding:13px 22px;font-size:13px}
.site-footer{padding:30px 0;background:#f8f7f3;color:#777;font-size:12px}
.footer-inner{display:flex;justify-content:space-between;gap:30px}
.footer-inner strong{font-family:Georgia,serif;color:#333;font-size:14px}
@media(max-width:850px){
 .site-header{height:auto;padding:20px 0}.nav{display:block}.brand{display:block;margin-bottom:18px}nav{gap:15px;flex-wrap:wrap}
 .intro{padding:60px 0 45px}
 .two-col,.split,.history,.practical{grid-template-columns:1fr;gap:40px}
 .three-cards{grid-template-columns:1fr}
 .section{padding-top:70px;padding-bottom:70px}
 .panel{padding:45px}
 .history img{height:auto}
 .facts{grid-template-columns:1fr 1fr}
 .footer-inner{display:block}.footer-inner>div+div{margin-top:10px}
}
@media(max-width:520px){.facts{grid-template-columns:1fr}.hero-caption{position:static}.hero-caption strong{font-size:19px}}

.detail-vitrail{margin:0}
.detail-vitrail img{display:block;width:100%;height:360px;object-fit:cover}
.detail-vitrail figcaption{margin-top:10px;text-align:center;color:#777;font-size:12px;font-style:italic;line-height:1.4}


/* Navigation commune aux quatre pages */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.site-nav .nav-link {
  font-weight: 400;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
}
.site-nav .nav-link.active {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.site-nav .nav-link:hover {
  text-decoration: none;
}
.site-nav .nav-cta {
  text-decoration: none;
}

/* =========================================================
   BANDEAU SUPÉRIEUR — RÈGLE COMMUNE AUX 4 PAGES
   ========================================================= */
.site-header {
  height: 86px !important;
  min-height: 86px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: border-box;
  background: #fbfaf7;
  border-bottom: 1px solid #e7e3da;
  padding: 0 !important;
}
.site-header-inner {
  width: min(1080px, 88vw);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  box-sizing: border-box;
}
.site-header .brand {
  display: block;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  color: #222;
  text-decoration: none;
  line-height: 1.05;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px !important;
  font-weight: 400 !important;
}
.site-header .brand span {
  display: block;
  font: 400 20px/1.05 Georgia, "Times New Roman", serif !important;
  letter-spacing: 0 !important;
}
.site-header .brand small {
  display: block;
  margin: 7px 0 0 !important;
  color: #777;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
.site-header .site-nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.site-header .site-nav .nav-link,
.site-header .site-nav .nav-cta {
  color: #333;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border: 0;
  padding: 0;
}
.site-header .site-nav .nav-link.active {
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 2px solid #333 !important;
  padding-bottom: 5px !important;
}
.site-header .site-nav .nav-cta {
  border: 1px solid #333 !important;
  padding: 9px 16px !important;
}
.site-header .site-nav .nav-link:hover {
  text-decoration: none !important;
}

@media(max-width:850px) {
  .site-header {
    height: auto !important;
    min-height: 0;
    padding: 20px 0 !important;
  }
  .site-header-inner {
    width: min(100% - 36px, 700px);
    height: auto;
    display: block;
  }
  .site-header .brand {
    margin-bottom: 18px !important;
  }
  .site-header .site-nav {
    justify-content: flex-start;
    gap: 15px !important;
    flex-wrap: wrap;
  }
}


/* =========================================================
   HARMONISATION DES INTRODUCTIONS — toutes les pages
   ========================================================= */

/* Même style d'intitulé au-dessus du titre */
main .intro .eyebrow {
  color: #b08b43 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Même traitement typographique pour les grands titres */
main .intro h1 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(42px, 5.5vw, 72px) !important;
  line-height: 1.04 !important;
  font-weight: 400 !important;
  letter-spacing: -.03em !important;
}

/* Même largeur de texte introductif */
main .intro > .lead,
main .intro > p.lead {
  font-size: 19px !important;
  line-height: 1.65;
}

@media (max-width: 850px) {
  main .intro h1 {
    font-size: 42px !important;
  }
}


/* Bandeau bas harmonisé avec la page d'accueil */
.site-footer {
  width: 100%;
  box-sizing: border-box;
  background: #171918;
  color: rgba(255,255,255,.7);
  padding: 35px 0;
  font-size: 13px;
  border: 0;
}
.site-footer .footer-inner {
  width: min(1080px, 88vw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.site-footer strong {
  display: inline;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
}
.site-footer span {
  color: rgba(255,255,255,.7);
}
.site-footer a {
  color: #fff;
  text-decoration: none;
}
.site-footer .footer-contact {
  text-align: right;
}
.site-footer .footer-contact strong {
  display: block;
  margin-bottom: 2px;
}
.site-footer .footer-contact .phone {
  display: inline;
}
@media(max-width:850px){
  .site-footer .footer-inner { display:block; }
  .site-footer .footer-inner > div + div { margin-top: 12px; }
  .site-footer .footer-contact { text-align:left; }
}
/* V19 correction: doré uniquement pour les petits titres (eyebrows) */
.eyebrow,
.audience .eyebrow { color:#b08b43 !important; }



/* Identité visuelle — logo officiel Verre et Vitrail */
.site-header .brand {
  display: block;
  flex: 0 0 190px;
  width: 190px;
  line-height: 0;
}
.site-header .brand img {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
}
@media (min-width: 851px) {
  .site-header {
    height: 108px !important;
    min-height: 108px;
  }
}
@media (max-width: 850px) {
  .site-header .brand {
    width: 190px;
    max-width: 100%;
    margin-bottom: 18px !important;
  }
}

/* Correction ciblée : bandeau compact sur téléphone en mode paysage */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 850px) {
  .site-header {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
  }
  .site-header-inner {
    width: calc(100% - 28px) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .site-header .brand {
    flex: 0 0 125px !important;
    width: 125px !important;
    max-width: 125px !important;
    margin: 0 !important;
  }
  .site-header .brand img {
    width: 125px !important;
    max-width: 125px !important;
    height: auto !important;
  }
  .site-header .site-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }
  .site-header .site-nav .nav-link,
  .site-header .site-nav .nav-cta {
    white-space: nowrap !important;
    font-size: 11px !important;
  }
  .site-header .site-nav .nav-cta {
    padding: 6px 8px !important;
  }
}