/* ===================================================================
   BOUCHEX CHARPENTE — feuille de style principale
   Palette : vert cyprès (structure) + terre cuite (accent/CTA)
   =================================================================== */

:root{
  /* Couleurs */
  --vert-cypres:      #1E3B2C;
  --vert-cypres-dark: #12251C;
  --vert-cypres-light:#2F5741;
  --terre-cuite:      #C1592D;
  --terre-cuite-dark: #A3491F;
  --bois-chene:        #8B5A34;
  --pierre:            #F3EEE3;
  --pierre-dark:       #E8E0D0;
  --encre:             #1B1B16;
  --blanc:             #FFFFFF;

  /* Typo */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Space Grotesk', 'Segoe UI', sans-serif;

  /* Rythme */
  --rayon: 4px;
  --ombre: 0 10px 30px rgba(18,37,28,0.15);
  --marge-section: clamp(4rem, 8vw, 7rem);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  background: var(--pierre);
  color: var(--encre);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0 0 .6em;
  font-weight: 600;
}
h1{ font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3{ font-size: 1.35rem; }
p{ margin:0 0 1em; }
.container{
  width:100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.eyebrow{
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--terre-cuite);
  display:inline-block;
  margin-bottom: .9rem;
}
.section{ padding: var(--marge-section) 0; }
.section--sombre{ background: var(--vert-cypres); color: var(--pierre); }
.section--sombre .eyebrow{ color: #E8956B; }
.section--pierre-dark{ background: var(--pierre-dark); }
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family: var(--font-sans);
  font-weight:600;
  font-size:.95rem;
  padding: .85rem 1.6rem;
  border-radius: var(--rayon);
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primaire{ background: var(--terre-cuite); color: var(--blanc); }
.btn--primaire:hover{ background: var(--terre-cuite-dark); }
.btn--contour{ border-color: currentColor; background: transparent; }
.btn--contour.on-dark{ color: var(--pierre); }
.btn--contour.on-dark:hover{ background: rgba(243,238,227,.1); }
.btn--contour.on-light{ color: var(--vert-cypres); border-color: var(--vert-cypres); }
.btn--contour.on-light:hover{ background: var(--vert-cypres); color: var(--blanc); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(243,238,227,.92);
  border-bottom: 1px solid var(--pierre-dark);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: .7rem; padding-bottom: .7rem;
  gap: 1.5rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand img{ height: 52px; width:auto; }
.brand-text{ display:flex; flex-direction:column; }
.brand-text .name{ font-family: var(--font-sans); font-weight:700; font-size: .95rem; letter-spacing:.03em; color: var(--vert-cypres-dark); }
.brand-text .baseline{ font-size:.68rem; letter-spacing:.06em; color: var(--bois-chene); text-transform:uppercase; }

.nav-principale{ display:flex; align-items:center; gap:2.1rem; }
.nav-principale a{
  font-size:.92rem; font-weight:600; color: var(--vert-cypres-dark);
  position:relative; padding-bottom: 4px;
}
.nav-principale a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background: var(--terre-cuite); transform: scaleX(0); transform-origin:left;
  transition: transform .2s ease;
}
.nav-principale a:hover::after, .nav-principale a[aria-current="page"]::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:.9rem; }
.tel-header{ display:flex; align-items:center; gap:.45rem; font-weight:700; color: var(--vert-cypres-dark); font-size:.95rem; }
.tel-header svg{ width:18px; height:18px; stroke: var(--terre-cuite); }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:.3rem; }
.nav-toggle svg{ width:28px; height:28px; }

@media (max-width: 860px){
  .nav-principale{
    position:fixed; inset: 64px 0 0 0; background: var(--pierre);
    flex-direction:column; align-items:flex-start; padding: 2rem 1.5rem; gap:1.4rem;
    transform: translateX(100%); transition: transform .25s ease; overflow-y:auto;
  }
  .nav-principale.ouvert{ transform: translateX(0); }
  .nav-principale a{ font-size:1.15rem; }
  .nav-toggle{ display:block; }
  .tel-header span{ display:none; }
}

/* ---------- Motif ferme de charpente (séparateur signature) ---------- */
.ferme-divider{ width:100%; overflow:hidden; line-height:0; }
.ferme-divider svg{ width:100%; height:auto; display:block; }
.ferme-divider--haut-vert-sur-pierre{ color: var(--pierre); }
.ferme-divider--haut-pierre-sur-vert{ color: var(--vert-cypres); }
.ferme-divider--pierredark-sur-pierre{ color: var(--pierre-dark); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: linear-gradient(180deg, var(--vert-cypres) 0%, var(--vert-cypres-dark) 100%);
  color: var(--pierre);
  overflow:hidden;
  padding: clamp(3.5rem,9vw,7rem) 0 0;
}
.hero .container{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:center;
}
.hero h1{ color: var(--blanc); }
.hero h1 em{ font-style: normal; color: #E8956B; }
.hero p.lead{ font-size: 1.15rem; max-width: 34rem; color: #DDE6DC; }
.hero-ctas{ display:flex; gap:1rem; margin-top: 2rem; flex-wrap:wrap; }
.hero-badges{ display:flex; gap:1.6rem; margin-top: 3rem; flex-wrap:wrap; }
.hero-badges div{ font-size:.82rem; color:#C7D3C6; max-width:9.5rem; }
.hero-badges strong{ display:block; font-family: var(--font-display); font-size:1.6rem; color:var(--blanc); font-weight:500; }
.hero-truss{ position:relative; }
.hero-truss svg{ width:100%; height:auto; }

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-truss{ order:-1; max-width: 340px; margin: 0 auto 1rem; }
}

/* ---------- Intro / gérant ---------- */
.presentation{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items:center; }
.presentation-portrait{
  aspect-ratio: 4/5; border-radius: var(--rayon); background: var(--pierre-dark);
  display:flex; align-items:center; justify-content:center; color: var(--bois-chene);
  border: 2px dashed var(--bois-chene); font-size:.85rem; text-align:center; padding:1.5rem;
  position:relative; overflow:hidden;
}
.signature-artisan{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--pierre-dark); }
.signature-artisan .nom{ font-family: var(--font-display); font-size:1.3rem; }
.signature-artisan .role{ color: var(--terre-cuite); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; }
@media (max-width: 800px){ .presentation{ grid-template-columns: 1fr; } .presentation-portrait{ max-width:280px; margin:0 auto; } }

/* ---------- Valeurs matériaux ---------- */
.materiaux-strip{ display:flex; gap: 2.5rem; flex-wrap:wrap; justify-content:space-between; margin-top:2.5rem; }
.materiau{ flex:1 1 150px; text-align:center; }
.materiau .pastille{
  width:64px; height:64px; margin:0 auto .8rem; border-radius:50%;
  background: var(--pierre); border: 2px solid var(--bois-chene);
  display:flex; align-items:center; justify-content:center;
}
.materiau .pastille svg{ width:30px; height:30px; stroke: var(--bois-chene); }
.materiau strong{ display:block; font-size:.95rem; }
.materiau span{ font-size:.8rem; color: var(--vert-cypres-light); }

/* ---------- Prestations ---------- */
.prestations-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 2.5rem; }
.carte-prestation{
  background: var(--blanc); border-radius: var(--rayon); padding: 2rem 1.8rem;
  border-top: 4px solid var(--terre-cuite); box-shadow: var(--ombre);
  display:flex; flex-direction:column; gap:.9rem;
}
.carte-prestation .num{ font-family: var(--font-display); font-size:.85rem; color: var(--bois-chene); letter-spacing:.1em; text-transform:uppercase; }
.carte-prestation ul{ margin:0; padding-left: 1.1rem; font-size:.92rem; color:#3c3c33; }
.carte-prestation li{ margin-bottom:.35rem; }
.carte-prestation .icone{ width:46px; height:46px; }
.carte-prestation .icone svg{ width:100%; height:100%; stroke: var(--terre-cuite); fill:none; stroke-width:1.6; }
@media (max-width: 900px){ .prestations-grid{ grid-template-columns: 1fr; } }

/* ---------- Zone d'intervention ---------- */
.zone-liste{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.zone-liste span{
  background: rgba(243,238,227,.08); border:1px solid rgba(243,238,227,.35);
  padding:.45rem 1rem; border-radius: 999px; font-size:.85rem;
}

/* ---------- CTA bande ---------- */
.cta-bande{
  background: var(--terre-cuite); color: var(--blanc);
  border-radius: var(--rayon); padding: 2.6rem 2.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta-bande h3{ margin:0; color: var(--blanc); }
.cta-bande .btn--contour{ border-color: var(--blanc); color: var(--blanc); }
.cta-bande .btn--contour:hover{ background: var(--blanc); color: var(--terre-cuite); }

/* ---------- Réalisations : grille galerie ---------- */
.galerie-filtre{ display:flex; gap:.7rem; flex-wrap:wrap; margin: 1.8rem 0 2.4rem; }
.galerie-filtre button{
  font-family: var(--font-sans); font-weight:600; font-size:.85rem; padding:.5rem 1.1rem;
  border-radius: 999px; border:1.5px solid var(--vert-cypres); background:transparent; color: var(--vert-cypres);
  cursor:pointer; transition: all .2s ease;
}
.galerie-filtre button.actif, .galerie-filtre button:hover{ background: var(--vert-cypres); color: var(--pierre); }
.galerie-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.galerie-item{
  aspect-ratio: 4/3; border-radius: var(--rayon); overflow:hidden; position:relative;
  background: var(--pierre-dark);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1.3rem;
  cursor: pointer;
}
.chantier-intro{
  width: 100%; color: var(--vert-cypres-dark); font-size: 1.02rem;
  margin: 0 0 1.8rem; padding: 1rem 1.3rem; background: var(--pierre-dark);
  border-left: 3px solid var(--terre-cuite); border-radius: var(--rayon);
  box-sizing: border-box;
}
.galerie-item img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition: transform .35s ease; }
.galerie-item .placeholder-txt{ position:relative; z-index:1; font-size:.82rem; color: var(--bois-chene); }
.galerie-item .tag{
  position:absolute; bottom:.7rem; left:.7rem; z-index:2; background: rgba(30,59,44,.88); color:var(--pierre);
  font-size:.72rem; padding:.3rem .7rem; border-radius:4px; text-transform:uppercase; letter-spacing:.05em;
}
.galerie-item::after{
  content:""; position:absolute; inset:0; z-index:1; background: rgba(18,37,28,0);
  transition: background .2s ease;
}
.galerie-item:hover::after, .galerie-item:focus-visible::after{ background: rgba(18,37,28,.32); }
.galerie-item:hover img, .galerie-item:focus-visible img{ transform: scale(1.06); }
.galerie-item:focus-visible{ outline: 3px solid var(--terre-cuite); outline-offset:3px; }
.galerie-item .zoom-icone{
  position:absolute; top:50%; left:50%; z-index:2; width:46px; height:46px; border-radius:50%;
  background: rgba(243,238,227,.94); display:flex; align-items:center; justify-content:center;
  transform: translate(-50%,-50%) scale(.75); opacity:0; transition: opacity .2s ease, transform .2s ease;
}
.galerie-item:hover .zoom-icone, .galerie-item:focus-visible .zoom-icone{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.galerie-item .zoom-icone svg{ width:20px; height:20px; stroke: var(--vert-cypres); fill:none; }
@media (max-width: 900px){ .galerie-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .galerie-grid{ grid-template-columns: 1fr; } }

/* ---------- Album / visionneuse (lightbox) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background: rgba(15,23,18,.95); padding: 2rem; opacity:0; visibility:hidden;
  transition: opacity .25s ease;
}
.lightbox.ouvert{ opacity:1; visibility:visible; }
.lightbox-scene{ width:100%; max-width:1000px; max-height:90vh; }
.lightbox-figure{ margin:0; display:flex; flex-direction:column; align-items:center; }
.lightbox-figure img{
  max-width:100%; max-height:66vh; width:auto; border-radius: var(--rayon);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.lightbox-figure figcaption{ margin-top:1.3rem; text-align:center; max-width:38rem; }
.lightbox-figure figcaption .tag{
  position:static; display:inline-block; margin-bottom:.7rem; background: var(--terre-cuite);
  color: var(--blanc); font-size:.72rem; padding:.3rem .8rem; border-radius:4px;
  text-transform:uppercase; letter-spacing:.06em;
}
.lightbox-figure figcaption p{ margin:0 0 .6rem; font-size:1.02rem; color:#EDEFE6; }
.lightbox-compteur{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:#9db29b; }
.lightbox-fermer, .lightbox-nav{
  position:absolute; border:none; border-radius:50%; background: rgba(243,238,227,.12);
  color: var(--pierre); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .2s ease;
}
.lightbox-fermer:hover, .lightbox-nav:hover{ background: rgba(243,238,227,.25); }
.lightbox-fermer{ top:1.5rem; right:1.5rem; width:44px; height:44px; }
.lightbox-fermer svg{ width:20px; height:20px; }
.lightbox-nav{ top:50%; transform: translateY(-50%); width:52px; height:52px; }
.lightbox-nav svg{ width:24px; height:24px; }
.lightbox-prec{ left:1.5rem; }
.lightbox-suiv{ right:1.5rem; }
body.lightbox-ouvert{ overflow:hidden; }
@media (max-width: 640px){
  .lightbox{ padding: 1rem; }
  .lightbox-fermer{ top:.8rem; right:.8rem; width:38px; height:38px; }
  .lightbox-nav{ width:40px; height:40px; }
  .lightbox-prec{ left:.4rem; }
  .lightbox-suiv{ right:.4rem; }
  .lightbox-figure img{ max-height:52vh; }
}

/* ---------- Instagram ---------- */
.insta-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.insta-embed-zone{
  margin-top:2rem; border-radius: var(--rayon); border: 2px dashed var(--bois-chene);
  padding: 2.5rem; text-align:center; background: rgba(139,90,52,.05);
}
.insta-embed-zone code{ background: var(--pierre-dark); padding:.15rem .4rem; border-radius:3px; }
.insta-grid-manuelle{ display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin-top:2rem; }
@media (max-width: 900px){ .insta-grid-manuelle{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:start; }
.coord-liste{ display:flex; flex-direction:column; gap:1.5rem; margin-top:1.8rem; }
.coord-item{ display:flex; gap:1rem; align-items:flex-start; }
.coord-item .icone{ width:42px; height:42px; flex:none; border-radius:50%; background: var(--vert-cypres); display:flex; align-items:center; justify-content:center; }
.coord-item .icone svg{ width:20px; height:20px; stroke: var(--pierre); fill:none; stroke-width:1.8; }
.coord-item strong{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--terre-cuite); }
.coord-item a, .coord-item p{ font-size:1.05rem; margin:0; }

.form-contact{ background: var(--blanc); border-radius: var(--rayon); padding: 2.2rem; box-shadow: var(--ombre); }
.form-contact label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; color: var(--vert-cypres-dark); }
.form-contact .champ{ margin-bottom:1.2rem; }
.form-contact input, .form-contact select, .form-contact textarea{
  width:100%; padding:.7rem .9rem; border:1.5px solid var(--pierre-dark); border-radius: var(--rayon);
  font-family: var(--font-sans); font-size:.95rem; background: var(--pierre); color: var(--encre);
}
.form-contact input:focus, .form-contact select:focus, .form-contact textarea:focus{
  outline: none; border-color: var(--terre-cuite);
}
.form-contact textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:.78rem; color: var(--bois-chene); margin-top: .8rem; }
.carte-zone{ margin-top:2.2rem; border-radius: var(--rayon); overflow:hidden; border: 1px solid var(--pierre-dark); }
.carte-zone iframe{ width:100%; height:280px; border:0; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer{ background: var(--vert-cypres-dark); color: #C7D3C6; padding: 3.5rem 0 1.6rem; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.footer-grid h4{ color: var(--pierre); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; font-family: var(--font-sans); }
.footer-grid a{ display:block; font-size:.9rem; margin-bottom:.55rem; color:#C7D3C6; }
.footer-grid a:hover{ color: var(--terre-cuite); }
.footer-logo{ height:40px; margin-bottom:1rem; }
.footer-social{ display:flex; gap:.8rem; margin-top:1rem; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid #3d5c48; display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:18px; height:18px; stroke:#C7D3C6; }
.footer-bas{ border-top:1px solid #24402f; margin-top:2.6rem; padding-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.7rem; font-size:.78rem; }
@media (max-width: 800px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Utilitaires visibles au clavier ---------- */
a:focus-visible, button:focus-visible{ outline: 3px solid var(--terre-cuite); outline-offset:2px; }

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}
/* Adaptation pour mobiles */
@media (max-width: 768px) {
  /* Réduire la taille du titre H1 */
  h1 {
    font-size: 20px !important;
  }

  /* Mettre les éléments de la grille en colonne */
  .prestations-grid, .container {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }

  /* Ajuster l'image du logo */
  .hero-truss img {
    max-width: 100% !important;
  }

  /* Cacher la navigation par défaut sur mobile */
  .nav-principale {
    display: none; 
    flex-direction: column;
    width: 100%;
  }

  /* Cette classe sera ajoutée par le JavaScript pour afficher le menu */
  .nav-principale.ouvert {
    display: flex !important;
  }
}

/* Agrandissement des textes du Hero */
.hero h1 {
    font-size: 32px !important; /* Augmente la taille du titre */
}

.hero .eyebrow {
    font-size: 20px !important; /* Agrandit "Intervention dans le Gard" */
    font-weight: bold;         /* Le rend plus lisible */
}
/* --- Centrage et ajustement du logo Hero --- */
@media (min-width: 992px) { /* S'applique uniquement aux écrans d'ordinateur */
    .hero .container {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr; /* Donne un peu plus de place au texte, un peu moins au logo */
        align-items: center;               /* Aligne verticalement texte et logo au centre */
        gap: 4rem;                        /* Augmente l'espace entre les deux colonnes */
    }
}

/* Force le centrage de l'image du logo dans sa colonne */
.hero-truss img {
    margin: 0 auto !important; /* Centre l'image horizontalement */
    display: block;            /* Assure que margin: 0 auto fonctionne */
    max-width: 420px !important; /* Ajuste légèrement la taille max pour un meilleur équilibre */
}/* Centrage des badges du Hero */
.hero-badges {
    display: flex;
    justify-content: center; /* Centre horizontalement les éléments */
    gap: 2rem;               /* Ajoute de l'espace entre les deux blocs */
    flex-wrap: wrap;         /* Permet de passer à la ligne sur très petit écran */
    margin-top: 2rem;        /* Ajoute un peu d'espace au-dessus */
}

/* Optionnel : pour que le texte soit aussi centré à l'intérieur des blocs */
.hero-badges div {
    text-align: center;
}
.prestations-band {
  background-color: var(--pierre-dark);
}