@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Public+Sans:wght@400;500;600&display=swap');

:root{
  --ardoise:#16302F;
  --ardoise-clair:#22423F;
  --chaux:#F2F2EE;
  --chaux-2:#E7E7E1;
  --ocre:#C0761F;
  --ocre-fonce:#96590F;
  --encre:#171916;
  --pierre:#6B6E68;
  --trait:#D6D6CE;
  --max:1080px;
  --pad:clamp(1.25rem,4vw,2.5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;
  background:var(--chaux);
  color:var(--encre);
  font-family:'Public Sans',system-ui,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:4.5rem;
}
@media (min-width:800px){body{padding-bottom:0}}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem)}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:62ch}
a{color:var(--ocre-fonce);text-underline-offset:.18em}
a:focus-visible,button:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}

.eyebrow{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--pierre);
  margin:0 0 .9rem;display:block;
}

/* ---------- en-tête ---------- */
.topbar{background:var(--ardoise);color:var(--chaux)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap}
.marque{
  display:flex;align-items:center;gap:.65rem;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;
  letter-spacing:-.01em;color:var(--chaux);text-decoration:none;line-height:1.2;
}
.marque .signe{width:36px;height:36px;flex:0 0 auto;display:block}
.marque .lieu{display:block;font-weight:500;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#9FB3AE;margin-top:.15rem}
.marque-bloc{min-width:0}
.marque-contact{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:.05rem;margin:.55rem 0 0;max-width:none;line-height:1.4;
}
.marque-contact a{text-decoration:none;border-bottom:1px solid transparent}
.marque-contact .tel{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(1.35rem,5.5vw,2rem);   /* doublé : 1 rem -> 2 rem sur ordinateur */
  line-height:1.1;letter-spacing:-.015em;color:var(--chaux);
}
.marque-contact .mail{font-size:.82rem;color:#9FB3AE;overflow-wrap:anywhere}
.marque-contact a:hover{color:var(--ocre);border-bottom-color:var(--ocre)}
.nav{display:flex;gap:1.15rem;flex-wrap:wrap}
.nav a{color:var(--chaux);text-decoration:none;font-size:.9rem;font-weight:500;padding:.2rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--ocre)}

/* ---------- héros ---------- */
.hero{background:var(--ardoise);color:var(--chaux);padding-top:clamp(2rem,6vw,3.5rem);padding-bottom:clamp(2rem,6vw,3.5rem)}
.hero h1{color:var(--chaux);max-width:16ch}
.hero .accroche{color:#C9D6D2;font-size:1.1rem;max-width:52ch}
.hero .eyebrow{color:#8FA8A3}

/* --- héros : le Canigou en fond du bloc titre --- */
.hero-tete{
  position:relative;overflow:hidden;
  background:var(--ardoise);
  padding:clamp(1.5rem,4.5vw,3rem);
  display:flex;align-items:center;
  min-height:clamp(19rem,30vw,26rem);
}
.hero-fond{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 80%;
}
/* assombrissement progressif : fort là où se pose le texte, léger sur le massif */
.hero-voile{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(22,48,47,.97) 0%,  rgba(22,48,47,.93) 26%,
      rgba(22,48,47,.55) 50%, rgba(22,48,47,.18) 74%, rgba(22,48,47,.10) 100%),
    linear-gradient(to bottom,
      rgba(22,48,47,.10) 0%,  rgba(22,48,47,.12) 40%, rgba(22,48,47,.58) 100%);
}
.hero-texte{position:relative;max-width:34rem}
.hero-texte > :last-child{margin-bottom:0}

/* en dessous de 920 px le texte occupe toute la largeur : voile uniforme */
@media (max-width:919px){
  .hero-tete{min-height:0;padding:clamp(1.4rem,5vw,2rem)}
  .hero-fond{object-position:50% 65%}
  .hero-voile{
    background:linear-gradient(to bottom,
      rgba(22,48,47,.50) 0%, rgba(22,48,47,.66) 45%, rgba(22,48,47,.90) 100%);
  }
  .hero-texte{max-width:none}
}

/* --- métiers : à la suite et centrés, comme sur le flyer --- */
.metiers{
  margin:2.4rem 0 0;padding:1.9rem 0 2rem;
  border-top:1px solid #3A5551;border-bottom:1px solid #3A5551;
  text-align:center;
}
.metiers p{margin:0;max-width:none;line-height:1.16}
.metiers p + p{margin-top:.4rem}
.metiers a,.metiers span{
  font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.45rem,4.4vw,2.5rem);
}
.metiers a{color:var(--chaux);text-decoration:none}
.metiers a:hover{color:var(--ocre)}
.metiers span{color:var(--ocre);margin:0 .42em;display:inline-block}

/* sur téléphone les lignes ne tiennent plus : un métier par ligne, sans point */
@media (max-width:699px){
  .metiers{padding:1.4rem 0 1.5rem}
  .metiers p{display:flex;flex-direction:column;align-items:center;gap:.15rem}
  .metiers p + p{margin-top:.15rem}
  .metiers span{display:none}
}

/* ---------- boutons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;
  padding:.85rem 1.4rem;border-radius:2px;text-decoration:none;border:2px solid transparent;
}
.btn-tel{background:var(--ocre);color:#1A1204}
.btn-tel:hover{background:#D68727}
.btn-ligne{border-color:currentColor;color:var(--chaux)}
.btn-ligne:hover{background:rgba(255,255,255,.08)}
.btn-sombre{background:var(--ardoise);color:var(--chaux)}
.btn-sombre:hover{background:var(--ardoise-clair)}

/* ---------- sections ---------- */
section{padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
section + section{border-top:1px solid var(--trait)}
.bande{background:var(--chaux-2);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}

.grille{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:700px){.grille-2{grid-template-columns:1fr 1fr}.grille-3{grid-template-columns:repeat(3,1fr)}}

.carte{background:#fff;border:1px solid var(--trait);border-radius:2px;padding:1.4rem}
.carte h3{margin-bottom:.4rem}
.carte p{margin-bottom:0;font-size:.98rem;color:#3B3D39}
.carte ul{margin:.6rem 0 0;padding-left:1.1rem;font-size:.98rem;color:#3B3D39}
.carte li{margin-bottom:.25rem}

/* ---------- communes ---------- */
.communes{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.2rem 0 0}
.communes li{
  background:#fff;border:1px solid var(--trait);border-radius:2px;
  padding:.35rem .8rem;font-size:.95rem;font-weight:500;
}

/* ---------- galerie ---------- */
.galerie{display:grid;gap:1.5rem;grid-template-columns:1fr;padding:0;margin:2rem 0 0;list-style:none}
@media (min-width:620px){.galerie{grid-template-columns:1fr 1fr}}
@media (min-width:940px){.galerie{grid-template-columns:repeat(3,1fr)}}
.realisation{margin:0;background:#fff;border:1px solid var(--trait);border-radius:2px;overflow:hidden}
.realisation img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--chaux-2)}
.realisation figcaption{padding:1rem 1.1rem 1.2rem}
.realisation .meta{
  font-family:'Archivo',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ocre-fonce);display:block;margin-bottom:.35rem;
}
.realisation .titre{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.05rem;display:block;margin-bottom:.35rem;letter-spacing:-.01em}
.realisation p{font-size:.95rem;color:#3B3D39;margin:0}

/* --- avant / après : occupe toute la largeur de la galerie --- */
.galerie li{margin:0}
.galerie .duo{grid-column:1/-1}
.duo-vues{display:grid;grid-template-columns:1fr;gap:2px;background:var(--trait)}
@media (min-width:520px){.duo-vues{grid-template-columns:1fr 1fr}}
.duo-vues .vue{position:relative;margin:0}
.duo-vues img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--chaux-2)}
.etiquette{
  position:absolute;top:0;left:0;
  background:var(--ardoise);color:var(--chaux);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.14em;
  padding:.35rem .7rem;
}
.duo .titre{font-size:1.12rem;line-height:1.35}

.vide{border:2px dashed var(--trait);border-radius:2px;padding:2rem;text-align:center;color:var(--pierre)}

/* ---------- contact ---------- */
.coord{list-style:none;padding:0;margin:1.4rem 0 0}
.coord li{padding:.9rem 0;border-bottom:1px solid var(--trait);display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.coord b{font-family:'Archivo',sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--pierre);flex:0 0 9rem}
.tel-geant{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(1.8rem,7vw,2.6rem);letter-spacing:-.02em;text-decoration:none;color:var(--encre);display:inline-block;margin:.3rem 0}
.tel-geant:hover{color:var(--ocre-fonce)}

/* ---------- pied ---------- */
footer{background:var(--ardoise);color:#C9D6D2;padding:2.5rem 0;font-size:.93rem}
footer a{color:var(--chaux)}
footer .grille{gap:2rem}
footer h3{color:var(--chaux);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:.8rem}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.4rem}
/* numéro du pied de page, doublé : .93 rem -> 1.86 rem */
.tel-pied{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(1.3rem,5.2vw,1.86rem);
  line-height:1.15;letter-spacing:-.015em;
  color:var(--chaux);text-decoration:none;
  display:inline-block;margin:.15rem 0 .35rem;
}
.tel-pied:hover{color:var(--ocre)}

/* ---------- barre d'appel mobile ---------- */
.appel-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--ocre);border-top:2px solid var(--ocre-fonce);
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1rem;text-decoration:none;color:#1A1204;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.01em;
}
@media (min-width:800px){.appel-mobile{display:none}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.todo{background:#FFF4D6;border-left:4px solid var(--ocre);padding:.7rem 1rem;font-size:.92rem;color:#5A3F06;margin:1rem 0}

/* ---------- e-mail mis en avant ---------- */
.mail-fort{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(1.05rem,3.8vw,1.55rem);letter-spacing:-.01em;
  color:var(--encre);text-decoration:none;
  border-bottom:3px solid var(--ocre);
  display:inline-block;margin:.1rem 0 .8rem;
  overflow-wrap:anywhere;
}
.mail-fort:hover{color:var(--ocre-fonce);border-bottom-color:var(--ocre-fonce)}
footer .mail{overflow-wrap:anywhere}