/* VisiPro — ETS HENRI, paysagiste Saint-Hilaire-Saint-Mesmin (45) */
/* Direction artistique : éditorial et artisanal. Pas de JS, pas d'ombre, pas de dégradé. */

:root{
  --paper:#f6f3ec;
  --ink:#3f5a35;
  --muted:#5d6762;
  --line:#cdd0c6;
  --accent:#a8673a;
  --teinte:#e8e5da;
  --sombre:#3f5a35;
}

*, *::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:15px;
  line-height:1.7;
  overflow-wrap: anywhere;
}

h1, h2, h3, .nom, .surtitre, .numero, .tel-grand, .grand{
  font-family:Georgia, 'Times New Roman', serif;
  font-weight:400;
  letter-spacing:-0.03em;
}

a{ color:inherit; text-decoration:none; text-underline-offset:5px; }
a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

/* --- Notice --- */
.notice{
  background:var(--teinte);
  color:var(--muted);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:bold;
  text-align:center;
  padding:7px 0;
}

/* --- En-tête --- */
.site-header .barre{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.nom{
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:0.10em;
}
.nav{
  display:flex;
  gap:26px;
  font-size:13px;
}
.nav a{ color:var(--muted); }
.tel{
  font-size:15px;
  font-weight:bold;
  border-bottom:1px solid var(--accent);
  text-underline-offset:6px;
}

/* --- Hero asymétrique (2 colonnes), composition typographique à droite (pas de photo exploitable) --- */
.hero{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  padding:96px 20px;
  align-items:center;
}
.hero-texte{ max-width:480px; }
.surtitre{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-weight:bold;
  color:var(--accent);
  margin:0 0 12px 0;
}
h1{
  font-size:clamp(44px, 4.9vw, 74px);
  line-height:1.05;
  margin:0 0 18px 0;
  letter-spacing:-0.04em;
}
h1 em{
  font-style:italic;
  color:var(--accent);
}
.intro{
  font-size:15px;
  line-height:1.7;
  margin:0 0 22px 0;
  color:var(--ink);
}
.infos{
  display:flex;
  flex-wrap:wrap;
  gap:14px 26px;
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:26px;
}
.infos span{ white-space:nowrap; }

.bouton{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:1px;
  font-size:13px;
  padding:0 24px;
  height:52px;
  line-height:50px;
  text-decoration:none;
}
.bouton:hover{ background:var(--accent); border-color:var(--accent); }
.lien{
  color:var(--accent);
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:5px;
}

.hero-compo{
  background:var(--teinte);
  padding:46px 34px;
  border-left:3px solid var(--accent);
}
.filet{
  height:1px;
  background:var(--line);
  margin:0 0 14px 0;
  width:44px;
}
.grand{
  font-size:46px;
  color:var(--accent);
  margin:0 0 8px 0;
  letter-spacing:-0.02em;
}
.petit{
  font-size:13px;
  color:var(--muted);
  margin:0;
  max-width:260px;
}

/* --- Bande de services --- */
.bandes-services{
  padding:60px 20px;
}
.services{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:15px;
  color:var(--muted);
}
.services .serv{
  color:var(--ink);
  font-weight:bold;
  border-bottom:1px solid var(--line);
  text-underline-offset:6px;
  padding-bottom:3px;
}
.services .serv:hover{ border-color:var(--accent); }
.separateur{
  display:inline-block;
  width:1px;
  height:14px;
  background:var(--line);
  margin:0 12px;
  vertical-align:middle;
}

/* --- Sections génériques --- */
.section{
  padding:96px 20px;
}
.cadré{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
  max-width:1080px;
  margin:0 auto;
}
.cadré > *{ min-width: 0; }
.titre-section{
  max-width:470px;
}
.numero{
  font-size:11px;
  color:var(--accent);
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin:0 0 6px 0;
}
.surtitre.block{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-weight:bold;
  color:var(--accent);
  margin:0 0 12px 0;
}
h2{
  font-size:clamp(30px, 3.4vw, 50px);
  line-height:1.15;
  margin:0 0 16px 0;
  letter-spacing:-0.03em;
}
.intro-blanc{ margin:0 0 30px 0; }

/* --- Métiers : liste à droite, lignes séparées par des filets --- */
.metiers-liste{
  border-top:1px solid var(--line);
}
.metier{
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.metier:last-child{ border-bottom:none; }
.metier .num{
  display:inline-block;
  font-size:12px;
  color:var(--accent);
  margin-right:10px;
}
.metier h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:18px;
  margin:0 0 6px 0;
  letter-spacing:-0.02em;
}
.metier p{ margin:0; font-size:14px; color:var(--muted); }

/* --- Preuves : engagements numérotés + avis --- */
.preuve{ background:var(--teinte); }
.engagements{
  display:grid;
  gap:18px;
  margin-bottom:40px;
}
.engagement{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.engagement > div{ min-width: 0; }
.engagement .num{
  font-size:12px;
  color:var(--accent);
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin-top:2px;
}
.engagement .titre{
  font-size:13px;
  color:var(--ink);
  margin:0 0 4px 0;
  font-weight:bold;
}
.engagement p{ margin:0; font-size:14px; color:var(--muted); }
blockquote{
  margin:0 0 18px 0;
  padding:0 0 0 14px;
  border-left:2px solid var(--line);
  font-size:14px;
  font-style:italic;
  color:var(--ink);
}
blockquote p{ margin:0 0 8px 0; }
.auteur{
  font-style:normal;
  font-size:12px;
  color:var(--muted);
  margin:0;
}

/* --- Entreprise : texte | infos pratiques --- */
.entreprise-infos{
  border-top:1px solid var(--line);
  padding-top:24px;
}
.ligne{
  display:grid;
  grid-template-columns:115px minmax(0,1fr);
  gap:6px 14px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.ligne:last-child{ border-bottom:none; }
.étiquette{
  color:var(--muted);
  font-size:12.5px;
  white-space:nowrap;
}

/* --- Contact sur fond sombre --- */
.contact{
  background:var(--sombre);
  color:var(--paper);
  padding:104px 20px;
}
.contact h2{
  color:var(--paper);
  font-size:clamp(34px, 4vw, 56px);
  margin:0 0 14px 0;
}
.contact p.intro-blanc{ color:#d8e0d8; }
.tel-grand{
  font-size:34px;
  color:var(--paper);
  margin:0 0 10px 0;
  display:block;
  border-bottom:none;
}
.contact .bouton{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
  margin-top:10px;
}
.contact .bouton:hover{ background:#ffffff; }
.contact-bas{
  margin-top:34px;
  font-size:13px;
  color:#b9c6b9;
}
.contact-bas a{ color:var(--paper); text-decoration:underline; text-underline-offset:4px; }
.contact .ligne{ border-color:#5d6e5b; color:#d8e0d8; }
.contact .étiquette{ color:#9fb19b; }

/* --- Pied --- */
footer{
  padding:40px 20px;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.pied{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}
.pied .nom{
  font-size:18px;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:0.10em;
}

/* --- Responsive --- */
@media (max-width:1100px){
  .cadré{ grid-template-columns:1fr; gap:40px; }
  .titre-section{ max-width:100%; }
}
@media (max-width:768px){
  .hero{ grid-template-columns:1fr; gap:32px; padding:64px 20px; }
  .hero-texte{ max-width:100%; }
  h1{ font-size:46px; }
  .hero-compo{ border-left:none; border-top:3px solid var(--accent); padding-top:40px; margin-top:24px; }
  .petit{ max-width:100%; }
  .bandes-services{ padding:44px 20px; }
  .services{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .services .serv{
    display:flex;
    align-items:center;
    justify-content:center;
    height:52px;
    border:none;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:1px;
  }
  .services .serv:hover{ border-color:var(--accent); }
  .separateur{ display:none; }
  .services :nth-child(3){ grid-column:1 / -1; }
  .section{ padding:56px 20px; }
  .contact{ padding:64px 20px; }
}
@media (max-width:360px){
  h1{ font-size:44px; }
  .tel-grand{ font-size:28px; }
}