/* === Webfonts (mets les fichiers dans /fonts/) === */
@font-face{
  font-family:"Discourse Narrow";
  src:url("/fonts/DiscourseNarrow-Regular.woff2") format("woff2"),
      url("/fonts/DiscourseNarrow-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Alternate Gothic No2";
  src:url("/fonts/AlternateGothicNo2-Regular.woff2") format("woff2"),
      url("/fonts/AlternateGothicNo2-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Protakt";
  src:url("/fonts/Protakt-Medium.woff2") format("woff2"),
      url("/fonts/Protakt-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}

/* === Variables (charte) === */
:root{
  --yellow:#fcb71b;    /* Lumberjack Yellow */
  --green:#5b6744;     /* Beretta Green */
  --green-text:#7a8a5d;/* variante plus claire si besoin en grand */
  --cream:#f1e8b1;     /* ✅ texte par défaut */
  --white:#ffffff;
  --muted:#cfd5dd;
  --bg:#141922;
  --card:#1f232b;
  --max-w:1200px;

  /* Polices (lisibilité) */
  --font-display:"Discourse Narrow","Barlow Condensed",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-alt:"Alternate Gothic No2",Impact,"Barlow Condensed",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-ui:"Protakt",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  font-size:16px;
  font-family:var(--font-ui); /*  tout en Protakt par défaut (net) */
}

/* === Base === */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--cream); /* ✅ crème partout */
  background:
    radial-gradient(circle at top left, rgba(91,103,68,.22), transparent 60%),
    radial-gradient(circle at bottom right, rgba(252,183,27,.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #1a1f27 100%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeSpeed;
}
:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px }
a,button{ transition:color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease }
.container{ max-width:var(--max-w); margin:0 auto; padding:0 20px }

/* === Header (lisibilité max) === */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,9,11,.88);      /* +opaque -> meilleur contraste */
  backdrop-filter:blur(3px);         /* blur réduit */
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:72px }
.logo-wrap{ display:flex; flex-direction:column; align-items:flex-start }
.logo-img{ height:40px; width:auto }
.rbq{
  margin-top:4px; color:var(--muted);
  font:600 13px/1 var(--font-ui); letter-spacing:.2px;
}

/* === Nav (UNIQUEMENT Protakt) === */
.nav{
  display:flex; gap:18px; align-items:center;
  font:700 17px/1 var(--font-ui); letter-spacing:.1px;  /* net */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.nav a{ color:var(--cream); text-decoration:none }      /* ✅ crème */
.nav a:hover{ color:var(--yellow) }
.nav a.cta{
  background:var(--yellow); color:#111; padding:8px 14px; border-radius:8px; font-weight:800;
}
.nav a.cta:hover{ background:#ffd34f }
.nav-toggle{ display:none; background:none; border:0; color:var(--muted); font-size:22px }

/* === Hero (Discourse Narrow seulement pour gros titres) === */
.hero{ padding:64px 0; display:flex; align-items:center }
.hero-inner{ display:flex; gap:40px; align-items:center }
.hero-text{ flex:1; max-width:620px }
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(28px,5.5vw,58px);
  margin:0 0 12px; color:var(--cream);                 /* ✅ crème */
  text-transform:uppercase; letter-spacing:.6px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.hero h1 span{ color:var(--yellow) }
.hero p{ color:var(--muted); margin:0 0 22px; max-width:58ch }
.hero-actions{ display:flex; gap:12px }
.btn{
  display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none;
  background:var(--yellow); color:#111; font:800 16px/1 var(--font-ui);
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.btn:hover{ background:#ffd34f }
.btn:active{ transform:translateY(1px) }

/* CTA ghost (texte crème, vert en fond/contour) */
.btn.ghost{
  background:transparent; border:1px solid var(--green); color:var(--cream);
}
.btn.ghost:hover{ background:var(--green); color:var(--white); box-shadow:0 6px 18px rgba(91,103,68,.35) }

/* === Image hero === */
.hero-image{ flex:1; display:flex; justify-content:center }
.hero-image img{
  width:100%; max-width:640px; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,12,.6);
}

/* === Sections === */
.section{ padding:56px 0 }
.section-title{
  font-family:var(--font-display);
  font-size:30px; margin:0 0 6px; color:var(--yellow);
  text-transform:uppercase; letter-spacing:.48px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.lead{ color:var(--muted); margin:0 0 20px }

/* === Services (cartes) — titres en Protakt, vert en accent non-texte) === */
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px; margin-top:18px;
}
.card{
  background:rgba(255,255,255,.05);
  padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 6px 18px rgba(91,103,68,.45); /* halo vert */
  border-color:rgba(91,103,68,.45);
}
.card h3{
  margin:0 0 8px; color:var(--cream);                 /* ✅ crème (pas blanc) */
  font:800 18px/1.2 var(--font-ui); letter-spacing:.1px; /* net, pas condensé */
}
.card p{ margin:0; color:var(--muted) }

/* Variante Gothic seulement en grand (optionnel) */
@media (min-width:901px){
  .card h3.alt{
    font-family:var(--font-alt);
    font-weight:700; font-size:20px; letter-spacing:.2px; color:var(--green-text);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
}

/* === Projects === */
.projects-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px; margin-top:18px;
}
.project{ background:var(--card); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease }
.project:hover{ transform:scale(1.02); box-shadow:0 8px 22px rgba(91,103,68,.25) }
.project img{ width:100%; display:block; height:180px; object-fit:cover }
.project figcaption{
  padding:12px; background:linear-gradient(180deg, rgba(0,0,0,.18), transparent);
  color:var(--muted); font:700 14.5px/1.25 var(--font-ui); /* lisible */
}

/* === About / Stats === */
.about-inner{ display:flex; gap:30px; align-items:stretch; flex-wrap:wrap }
.about-text{ flex:1; min-width:280px }
.about-stats{ width:260px; display:flex; flex-direction:column; gap:12px }
.stat{ background:var(--card); padding:18px; border-radius:12px; text-align:center; border:1px solid rgba(255,255,255,.06) }
.stat-value{
  color:var(--yellow);
  font:800 24px/1 var(--font-ui);
  font-feature-settings:"tnum" 1, "lnum" 1;
}
.stat-label{
  color:var(--muted);                 /* ❗ pas de vert en petit */
  font:700 13.5px/1 var(--font-ui);
}

/* === Valeurs === */
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:20px }
.value{ background:rgba(255,255,255,.04); padding:20px; border-radius:12px; border:1px solid rgba(255,255,255,.08) }
.value h3{
  font-family:var(--font-display);
  font-size:22px; margin:0 0 10px; color:var(--yellow); text-transform:uppercase; letter-spacing:.35px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.value p{ margin:0; color:var(--muted) }

/* === Contact === */
.contact-grid{ display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start }
.contact-form{ background:var(--card); padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,.06) }
.contact-form label{
  display:block; margin-bottom:10px; color:var(--muted);
  font:700 14.5px/1 var(--font-ui);
}
.contact-form input,.contact-form textarea{
  width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:transparent; color:var(--cream);           /* ✅ champs lisibles */
  margin-top:6px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#b9c0c8 }     /* placeholder doux */
.contact-form input:focus,.contact-form textarea:focus{
  border-color:var(--green); box-shadow:0 0 0 3px rgba(91,103,68,.25);
}
.form-actions{ display:flex; gap:10px; margin-top:12px }
.contact-info{ background:transparent; padding:12px; color:var(--muted) }

/* === Footer === */
.site-footer{ border-top:1px solid rgba(255,255,255,.06); padding:18px 0; color:var(--muted) }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font:700 14.5px/1 var(--font-ui);
}

/* === Bandeau chantier === */
.under-construction{
  background:linear-gradient(90deg, var(--yellow) 0%, #ffd34f 35%, var(--green) 100%);
  color:#111; text-align:center; padding:28px 16px; border:2px dashed rgba(0,0,0,.55); margin:18px 0 0;
  font:700 16px/1 var(--font-ui);
}
.construction-img{ width:110px; max-width:100%; height:auto; display:block; margin:0 auto 10px }
.hp{ position:absolute; left:-5000px; opacity:0 }

/* === Réseaux / Liens === */
.social-title{ font:800 14.5px/1 var(--font-ui); color:var(--cream); margin-bottom:8px; text-align:left } /* ✅ crème */
.social-ico{ margin-right:10px; font-size:18px; color:var(--muted); text-decoration:none }
.social-ico:hover{ color:var(--yellow) }
a[href^="tel"], a[href^="mailto"]{ color:var(--yellow); font:800 16px/1 var(--font-ui) }
a[href^="tel"]:hover, a[href^="mailto"]:hover{ color:var(--green) }
a:hover{ text-decoration:underline }

/* === Carte chantier === */
.chantier-card{
  background:linear-gradient(135deg, rgba(252,183,27,.18), rgba(91,103,68,.38));
  color:var(--cream);                                         /* ✅ texte crème */
  border:1px solid rgba(91,103,68,.55);
  border-radius:12px; padding:22px; max-width:520px; margin:0 auto;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.chantier-card:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(91,103,68,.35); border-color:rgba(91,103,68,.75) }
.chantier-card h2{ margin:0 0 12px; color:var(--yellow); font:800 20px/1 var(--font-ui) }
.chantier-card ul{ list-style:disc inside; margin:0 0 14px; padding:0 }
.chantier-card li{ margin:5px 0; font:600 15.5px/1.3 var(--font-ui); color:var(--cream) }
.chantier-card li strong{ color:var(--white) }
.chantier-footer{ font:700 13.5px/1 var(--font-ui); color:var(--muted); text-align:right; margin:0; font-style:italic }

/* === Responsive === */
@media (max-width:900px){
  .hero-inner{ flex-direction:column-reverse }
  .contact-grid{ grid-template-columns:1fr }
  .about-stats{ width:100% }
}
@media (max-width:720px){
  .nav{ display:none }
  .nav-toggle{ display:block }
  .header-inner{ height:60px }
  .hero{ padding:40px 0 }
  .nav.nav-open{
    display:flex; flex-direction:column; gap:12px;
    background:rgba(8,9,11,.95); position:absolute; top:60px; right:20px; padding:16px; border-radius:10px;
    border:1px solid rgba(255,255,255,.08);
    font:800 16.5px/1 var(--font-ui); letter-spacing:.05px;  /* ✅ mobile net */
  }
}

/* === Utilitaires === */
.font-display{ font-family:var(--font-display) }  /* à utiliser uniquement pour gros titres */
.font-alt{ font-family:var(--font-alt) }          /* à utiliser seulement ≥ 20px si besoin */
.font-ui{ font-family:var(--font-ui) }
.text-green{ color:var(--green-text)!important }  /* à réserver aux textes ≥ 20px */
.border-green{ border-color:var(--green)!important }
.uc-inner { max-width: 760px; }
/* Mise en page */
.uc-inner { max-width: 760px; text-align: center; }
.social-links { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.under-construction .social-ico { 
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; 
  font:800 15px/1 var(--font-ui); text-decoration:none; 
  border:0; color:#fff;             /* icône + texte en blanc */
}
/* ===== Boutons "glassy" pour la section under-construction ===== */
.uc-inner { max-width: 760px; text-align: center; }
.social-links { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Base glassmorphism (fond translucide, flou, reflet) */
.under-construction .social-ico{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-radius:16px;
  color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.22);
  font:800 15px/1 var(--font-ui);
  background:rgba(255,255,255,.06);             /* verre */
  backdrop-filter:saturate(140%) blur(10px);     /* flou du verre */
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),         /* liseré interne */
    0 8px 22px rgba(0,0,0,.28);                  /* ombre douce */
  transition: transform .18s ease, box-shadow .18s ease, filter .2s ease;
}
.under-construction .social-ico svg{
  width:22px; height:22px; flex:0 0 auto; fill:currentColor;
}
.under-construction .social-ico:hover{
  transform:translateY(-2px);
  filter: brightness(1.05);
}
.under-construction .social-ico:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.35),
    0 10px 26px rgba(0,0,0,.35);
}

/* Bordure dégradée fine (couleur de marque) */
.under-construction .social-ico::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.95;
  background: var(--brand-grad, linear-gradient(90deg, #fff, #fff));
}

/* Reflet subtile sur le verre */
.under-construction .social-ico::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.25), transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(255,255,255,.06));
  mix-blend-mode:screen; opacity:.7;
}

/* === Déclinaisons marque (dégradé utilisé pour la bordure & la lueur) === */
.under-construction .social-ico.insta{
  --brand-grad: conic-gradient(from 210deg at 25% 120%, #f9ed32, #ff3838, #d6249f, #285AEB, #f9ed32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 8px 22px rgba(214,36,159,.28); /* lueur IG */
}
.under-construction .social-ico.insta:hover{ filter:saturate(112%) brightness(1.06) }

.under-construction .social-ico.fb{
  --brand-grad: linear-gradient(90deg, #93c5fd, #60a5fa, #2563eb);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 8px 22px rgba(24,119,242,.28); /* lueur FB */
}
.under-construction .social-ico.fb:hover{ filter:saturate(108%) brightness(1.06) }

/* Respect des préférences — réduit les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .under-construction .social-ico,
  .under-construction .social-ico:hover{
    transition:none; transform:none; filter:none;
  }
}


/* Placeholder "Photos à venir" pour la section des réalisations */
.projects-placeholder{
  display:none;
  margin-top:14px;
  padding:22px;
  text-align:center;
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  color:var(--muted);
  font:800 16px/1.2 var(--font-ui);
  box-shadow:0 6px 18px rgba(91,103,68,.25);
}

/* Quand la section a la classe is-placeholder : on cache la grille, on montre le message */
.projects.is-placeholder .projects-grid{ display:none }
.projects.is-placeholder .projects-placeholder{ display:block }