/* La Grand'Maison — maquette VisiPro */
/* Direction artistique : éditorial, artisanal, beaucoup d'air, filets fins, peu de couleurs. */

:root{
  --paper:#f4ede2;
  --paper-alt:#e8e5da;
  --ink:#2d2018;
  --muted:#5d6762;
  --line:#cdd0c6;
  --accent:#7b2f2a;
}

*, *::before, *::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

h1, h2, h3, .eyebrow, .notice, header, .btn{
  font-family:Georgia, 'Times New Roman', serif;
}

h1, h2, h3{
  margin:0 0 18px;
  font-weight:400;
  line-height:1.06;
  letter-spacing:-0.03em;
}

p{
  margin:0 0 22px;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

.container{
  width:min(1080px, 92%);
  margin:0 auto;
}

.section{
  padding:96px 0;
}

.section-alt{
  background:var(--paper-alt);
}

.section-dark{
  background:var(--ink);
  color:var(--paper);
}

.section-dark h2,
.section-dark h3,
.section-dark p,
.section-dark a{
  color:var(--paper);
}

.section-dark .line{
  background:var(--line);
}

.line{
  width:40px;
  height:1px;
  background:var(--accent);
  margin:0 0 24px;
}

.eyebrow{
  display:inline-block;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent);
  margin:0 0 12px;
}

/* ---------- Notice ---------- */
.notice{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}

.notice .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:40px;
  padding:6px 0;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Header ---------- */
header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;
  top:0;
}

.header-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 0;
}

.brand{
  font-size:clamp(26px, 3.2vw, 40px);
  letter-spacing:-0.02em;
  color:var(--ink);
}

.nav{
  display:flex;
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:14px;
  letter-spacing:0.05em;
}

.nav a{
  display:block;
  padding:6px 0;
  color:var(--muted);
}

.nav a:hover, .nav a:focus{
  color:var(--accent);
  outline:3px solid var(--accent);
  outline-offset:4px;
  border-radius:1px;
}

.tel{
  font-size:14px;
  font-weight:600;
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:5px;
}

.tel:hover{
  color:var(--ink);
}

/* ---------- Hero ---------- */
.hero{
  padding:72px 60px 96px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
}

.hero-text{
  max-width:470px;
}

.hero .eyebrow{
  margin-bottom:14px;
}

h1{
  font-size:clamp(44px, 4.9vw, 74px);
  line-height:1.04;
  margin-bottom:20px;
}

h1 em{
  font-style:italic;
  color:var(--accent);
}

.hero p{
  font-size:16px;
  line-height:1.8;
  max-width:440px;
  margin-bottom:26px;
}

.btn{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  padding:16px 30px;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:600;
  border-radius:1px;
  border:1px solid var(--ink);
}

.btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--paper);
}

.hero-figure{
  margin:0;
  position:relative;
}

.hero-figure img{
  width:100%;
  height:520px;
  object-fit:cover;
  object-position:center;
  border:1px solid var(--line);
}

.hero-figure figcaption{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:13px;
  font-style:italic;
  color:var(--muted);
  margin-top:10px;
  line-height:1.5;
}

.hero-info{
  margin-top:30px;
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
}

.hero-info b{
  color:var(--ink);
  font-weight:600;
}

/* ---------- Services ---------- */
.services{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:-7px;
}

.services > *{
  margin:7px;
}

.services a{
  display:inline-block;
  padding:10px 18px;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:1px;
}

.services a:hover, .services a:focus{
  border-color:var(--accent);
  color:var(--accent);
  outline:3px solid var(--accent);
  outline-offset:4px;
}

.bande{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
  margin:-7px 0;
}

.bande span{
  display:none;
}

.bande a{
  min-height:48px;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(11px, 2.6vw, 13px);
  letter-spacing:0.06em;
}

/* ---------- Métiers / Prestations ---------- */
.metiers .intro-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}

.metiers .text-col{
  max-width:460px;
}

.metiers .text-col h2{
  font-size:clamp(30px, 3.4vw, 50px);
  line-height:1.15;
  margin-bottom:18px;
}

.metiers .text-col p{
  margin-bottom:26px;
}

.metiers .list-col{
  border-left:1px solid var(--line);
  padding-left:28px;
}

.metier{
  border-bottom:1px solid var(--line);
  padding:16px 0;
  display:flex;
  gap:14px;
  align-items:baseline;
}

.metier:last-child{
  border-bottom:none;
}

.metier .num{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:15px;
  color:var(--accent);
  font-style:italic;
  min-width:24px;
}

.metier h3{
  font-size:16px;
  line-height:1.4;
  margin-bottom:4px;
  letter-spacing:-0.02em;
}

.metier p{
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.6;
}

/* ---------- Preuve / Réalisations ---------- */
.proof{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.proof figure{
  margin:0;
  position:relative;
}

.proof img{
  width:100%;
  height:300px;
  object-fit:cover;
  object-position:center;
  border:1px solid var(--line);
}

.proof figcaption{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:12px;
  font-style:italic;
  color:var(--muted);
  margin-top:8px;
  line-height:1.5;
}

/* ---------- Histoire / Entreprise ---------- */
.histoire{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}

.histoire .text-col{
  max-width:470px;
}

.histoire .infos{
  margin-top:30px;
}

.histoire .infos b{
  color:var(--ink);
  font-weight:600;
}

.histoire .photo-col img{
  width:100%;
  height:420px;
  object-fit:cover;
  object-position:center;
  border:1px solid var(--line);
}

.histoire .photo-col figcaption{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:12px;
  font-style:italic;
  color:var(--muted);
  margin-top:8px;
  line-height:1.5;
}

/* ---------- Contact ---------- */
.contact .container{
  max-width:700px;
  text-align:center;
}

.contact h2{
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.15;
  margin-bottom:10px;
}

.contact p.lead{
  font-size:16px;
  color:var(--muted);
  max-width:480px;
  margin:0 auto 34px;
  line-height:1.8;
}

.contact .tel-big{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:34px;
  color:var(--paper);
  text-decoration:underline;
  text-underline-offset:5px;
  margin:0 0 6px;
  display:inline-block;
}

.contact .tel-big:hover{
  color:#d9c7b3;
}

.contact .email{
  font-size:14px;
  color:#c9c0ae;
  margin-bottom:26px;
  display:inline-block;
}

.contact .btn{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}

.contact .btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--paper);
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
  max-width:1100px;
  margin:0 auto;
  text-align:left;
}

@media (max-width:768px){
  .contact-grid{
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
  }
  .contact-right{
    text-align:center;
  }
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  background:var(--paper);
  padding:40px 0;
  font-size:13px;
  color:var(--muted);
  text-align:center;
}

.footer-note{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:12px;
  font-style:italic;
  margin-top:10px;
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  .hero{
    padding-left:24px;
    padding-right:24px;
  }
  .section,.section-alt,.section-dark{
    padding-left:24px;
    padding-right:24px;
  }
  .bande{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px;
  }
  .bande span{
    display:none;
  }
  .bande a{
    min-height:48px;
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(11px, 2.6vw, 13px);
    letter-spacing:0.06em;
  }
}

@media (max-width:760px){
  .section{
    padding:60px 0;
  }

  header .container{
    width:auto;
    padding:0 16px;
  }

  .header-wrap{
    flex-direction:column;
    gap:16px;
    align-items:flex-start;
    padding:18px 0;
  }

  .nav{
    display:flex;
    overflow-x:auto;
    white-space:nowrap;
    gap:14px;
    width:100%;
    padding-bottom:10px;
    scrollbar-width:none;
  }

  .nav::-webkit-scrollbar{
    display:none;
  }

  .nav a{
    flex-shrink:0;
    padding:12px 16px;
    font-size:15px;
    border:1px solid var(--line);
    border-radius:1px;
    white-space:nowrap;
    min-height:44px;
    display:flex;
    align-items:center;
  }

  .tel{
    width:100%;
    padding:12px 0;
    border:1px solid var(--line);
    border-radius:1px;
    text-align:center;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .hero{
    grid-template-columns:1fr;
    gap:28px;
    padding:48px 0 64px;
  }

  h1{
    font-size:clamp(40px, 9vw, 56px);
  }

  .hero-figure img{
    height:340px;
  }

  .hero-info{
    margin-top:20px;
  }

  .metiers .intro-wrap,
  .histoire{
    grid-template-columns:1fr;
    gap:34px;
  }

  .metiers .list-col{
    border-left:none;
    border-top:1px solid var(--line);
    padding-left:0;
    padding-top:24px;
  }

  .bande{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px;
  }

  .bande span{
    display:none;
  }

  .bande a{
    min-height:48px;
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(11px, 2.6vw, 13px);
    letter-spacing:0.06em;
  }

  .proof{
    grid-template-columns:1fr;
  }

  .proof img{
    height:240px;
  }
}

@media (max-width:360px){
  h1{
    font-size:44px;
  }
}

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