:root{
  --bg:#0b0d0f;
  --bg2:#11151a;
  --bg3:#171c22;
  --ligne:rgba(255,255,255,.1);
  --ligne-forte:rgba(255,255,255,.22);
  --texte:#eceae6;
  --doux:#a6a49f;
  --accent:#1fd1c2;
  --accent-2:#4fe3d6;
  --rayon:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow',system-ui,sans-serif;
  background:var(--bg);color:var(--texte);
  line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.logo-texte{
  font-family:'Barlow Condensed','Barlow',sans-serif;
  text-transform:uppercase;letter-spacing:.02em;
  line-height:1.05;font-weight:700;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* En-tête */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(11,13,15,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ligne);
}
.barre{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:34px;width:34px;object-fit:contain}
.logo-texte{font-size:1.5rem;color:#fff}
.logo-texte span{color:var(--accent)}
.liens{display:flex;gap:30px;list-style:none;height:100%}
.liens a{
  display:flex;align-items:center;height:100%;
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.liens a:hover{color:#fff;border-bottom-color:var(--ligne-forte)}
.liens a.actif{color:#fff;border-bottom-color:var(--accent)}
#burger,.burger{display:none}

/* Boutons */
.btn{
  display:inline-block;padding:15px 30px;border-radius:var(--rayon);
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.btn-plein{background:var(--accent);color:#04201d;box-shadow:0 6px 20px rgba(31,209,194,.18)}
.btn-plein:hover{background:var(--accent-2);box-shadow:0 8px 26px rgba(31,209,194,.28)}
.btn-plein:disabled{opacity:.6;cursor:wait}
.btn-contour{border-color:var(--ligne-forte);color:#fff}
.btn-contour:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-bloc{display:block;text-align:center;width:100%}
.boutons{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.sur-titre{
  display:flex;align-items:center;gap:14px;
  font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:22px;
}
.sur-titre::before{content:"";width:34px;height:1px;background:var(--accent)}

/* Bannière d'accueil (fond fixe, sans animation) */
.hero{
  display:flex;align-items:center;padding:90px 0;
  background:
    linear-gradient(90deg,rgba(11,13,15,.96) 0%,rgba(11,13,15,.78) 50%,rgba(11,13,15,.5) 100%),
    url("../images/fond.jpg") center/cover no-repeat,
    #1a1410;
  border-bottom:1px solid var(--ligne);
}
.hero-grille{
  display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;
}
.hero h1{
  font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:640px;
  margin-top:6px;color:#eceae6;
}
.hero p{max-width:540px;margin-top:20px;font-size:1.1rem;color:#d3d0ca}

/* Marque (logo + nom) en tête de l'accueil */
.marque{display:flex;align-items:center;gap:22px;margin-bottom:30px}
.marque img{
  height:96px;width:96px;object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 0 18px rgba(31,209,194,.35));
}
.marque-nom{
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-size:clamp(3.4rem,8vw,6.2rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;line-height:.92;color:#fff;
}
.marque-nom span{color:var(--accent)}
.marque-sous{
  margin-top:12px;
  font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}

/* Panneau de tarifs (accueil) */
.carte-tarifs{
  background:rgba(17,21,26,.94);
  border:1px solid var(--ligne-forte);border-radius:12px;
  padding:32px;box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.carte-tarifs h2{font-size:1.5rem;color:#fff;margin-bottom:4px}
.carte-tarifs .sous{color:var(--doux);font-size:.93rem;margin-bottom:18px}
.carte-tarifs .t{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px 0;border-top:1px solid var(--ligne);
}
.carte-tarifs .t span{color:#d3d0ca}
.carte-tarifs .t strong{
  font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;font-weight:700;
  color:var(--accent);line-height:1;
}
.carte-tarifs .t em{
  font-style:normal;font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texte);border:1px solid var(--ligne-forte);padding:5px 12px;border-radius:6px;
}
.carte-tarifs .btn{margin-top:22px}

/* En-tête de page intérieure */
.page-titre{padding:78px 0 56px;border-bottom:1px solid var(--ligne);background:var(--bg2)}
.page-titre h1{font-size:clamp(2.4rem,5.5vw,4rem)}
.page-titre p{max-width:620px;margin-top:18px;color:var(--doux);font-size:1.08rem}

/* Bandeau de chiffres clés */
.faits{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ligne)}
.fait{padding:34px 28px;border-left:1px solid var(--ligne)}
.fait:first-child{border-left:0;padding-left:0}
.fait strong{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:1.7rem;text-transform:uppercase;letter-spacing:.03em;color:#fff;line-height:1.1;
}
.fait span{display:block;margin-top:6px;color:var(--doux);font-size:.95rem}

/* Sections */
.section{padding:92px 0}
.section.alt{background:var(--bg2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.section.suite{padding-top:0}
.section-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:44px}
.section-tete h2{font-size:clamp(2rem,4vw,3rem)}
.lien-fleche{
  font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;transition:color .2s;
}
.lien-fleche:hover{color:#fff}

/* Liste de prestations */
.services{border-bottom:1px solid var(--ligne)}
.ligne{
  display:grid;grid-template-columns:70px 1fr auto;gap:24px;align-items:center;
  padding:30px 20px;margin:0 -20px;border-top:1px solid var(--ligne);
  transition:background .2s;
}
.ligne:hover{background:rgba(255,255,255,.03)}
.ligne .num{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:600;color:var(--accent)}
.ligne h3{font-size:1.7rem;margin-bottom:6px;color:#fff}
.ligne p{color:var(--doux);max-width:620px}
.ligne .tag{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--doux);border:1px solid var(--ligne);padding:6px 12px;border-radius:6px;
}
a.tag{transition:color .2s,border-color .2s}
a.tag:hover{color:#fff;border-color:var(--ligne-forte)}

/* Tarifs */
.prix{min-width:230px}
.prix .p{
  display:flex;align-items:baseline;justify-content:space-between;gap:28px;
  padding:9px 0;border-top:1px solid var(--ligne);
}
.prix .p:first-child{border-top:0;padding-top:0}
.prix .p:last-child{padding-bottom:0}
.p-nom{
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--doux);
}
.p-val{
  font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:700;
  color:var(--accent);line-height:1;
}
.p-devis{
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texte);border:1px solid var(--ligne-forte);padding:5px 12px;border-radius:6px;
}

/* Avant / Après */
.avap-liste{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.avap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photo{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--bg2);border:1px solid var(--ligne);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .vide{
  color:var(--doux);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:0 12px;
}
.photo .badge{
  position:absolute;left:12px;top:12px;z-index:2;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 12px;border-radius:6px;
  background:rgba(11,13,15,.85);color:#fff;border:1px solid var(--ligne-forte);
}
.photo.apres .badge{background:var(--accent);color:#04201d;border-color:var(--accent)}

/* Étapes */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.etape{border-top:1px solid var(--ligne);padding-top:22px}
.etape .num{
  font-family:'Barlow Condensed',sans-serif;font-size:3rem;font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--accent);
}
.etape h3{font-size:1.35rem;margin:14px 0 8px;color:#fff}
.etape p{color:var(--doux);font-size:.97rem}

/* Cartes « atouts » */
.atouts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.atout{
  background:var(--bg2);border:1px solid var(--ligne);border-radius:12px;
  padding:34px 30px;transition:border-color .2s;
}
.atout:hover{border-color:rgba(31,209,194,.5)}
.atout .trait{display:block;width:34px;height:3px;background:var(--accent);margin-bottom:22px;border-radius:2px}
.atout h3{font-size:1.45rem;color:#fff;margin-bottom:10px}
.atout p{color:var(--doux);font-size:.98rem}

/* Bandeau d'appel à l'action */
.appel{background:var(--bg2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);padding:68px 0}
.appel .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.appel h2{font-size:clamp(1.8rem,3.5vw,2.6rem);max-width:640px}

/* Deux colonnes */
.deux{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:start}
.deux h2{font-size:clamp(1.9rem,3.5vw,2.7rem);margin-bottom:22px}
.deux p{color:#cfccc6;margin-bottom:16px}
.encadre{border:1px solid var(--ligne);background:var(--bg2);padding:34px;border-radius:12px}
.encadre h3{font-size:1.4rem;margin-bottom:10px;color:#fff}
.liste{list-style:none;margin-top:8px}
.liste li{
  position:relative;padding:14px 0 14px 28px;border-top:1px solid var(--ligne);color:#cfccc6;
}
.liste li:first-child{border-top:0}
.liste li::before{
  content:"";position:absolute;left:0;top:25px;width:10px;height:2px;background:var(--accent);
}
.liste a{color:var(--accent)}
.liste a:hover{color:#fff}

/* Formulaire de contact */
.formulaire{display:grid;gap:22px}
.deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.champ label{
  display:block;margin-bottom:8px;
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--doux);
}
.champ input,.champ select,.champ textarea{
  width:100%;background:var(--bg2);color:var(--texte);
  border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:14px 16px;font:inherit;font-size:1rem;
  transition:border-color .2s,box-shadow .2s;
}
.champ textarea{min-height:150px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,209,194,.15);
}
.champ select option{background:#11151a;color:#eceae6}
.consent{
  display:flex;gap:12px;align-items:flex-start;
  color:var(--doux);font-size:.9rem;line-height:1.5;
}
.consent input{margin-top:4px;accent-color:var(--accent);width:auto}
.piege{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.statut{display:none;padding:16px 18px;border-radius:var(--rayon);font-size:.98rem}
.statut.ok{display:block;border:1px solid var(--accent);background:rgba(31,209,194,.1);color:#bff5ef}
.statut.erreur{display:block;border:1px solid #e0624f;background:rgba(224,98,79,.1);color:#f5c4bb}

/* Pied de page */
footer{background:#07090a;border-top:1px solid var(--ligne);padding:64px 0 30px}
.pied{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px}
.pied p{color:var(--doux);font-size:.95rem;max-width:340px;margin-top:16px}
.pied h4{
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-bottom:16px;
}
.pied ul{list-style:none}
.pied li{margin-bottom:10px}
.pied li a{color:var(--doux);font-size:.97rem;transition:color .2s}
.pied li a:hover{color:var(--accent)}
.copy{
  margin-top:50px;padding-top:22px;border-top:1px solid var(--ligne);
  color:var(--doux);font-size:.85rem;
}

/* Mobile */
@media(max-width:960px){
  .hero-grille{grid-template-columns:1fr;gap:44px}
  .atouts{grid-template-columns:1fr}
}
@media(max-width:860px){
  body{font-size:16px}
  .burger{
    display:block;cursor:pointer;padding:9px 16px;border:1px solid var(--ligne-forte);border-radius:6px;
    font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  }
  .liens{
    display:none;position:absolute;left:0;right:0;top:72px;height:auto;
    flex-direction:column;gap:0;background:#0b0d0f;border-bottom:1px solid var(--ligne);
  }
  .liens a{height:auto;padding:18px 24px;border-bottom:1px solid var(--ligne)}
  .liens a.actif{border-bottom-color:var(--ligne);color:var(--accent)}
  #burger:checked ~ .liens{display:flex}
  .hero{padding:64px 0}
  .faits{grid-template-columns:1fr 1fr}
  .fait{padding:26px 18px}
  .fait:nth-child(odd){border-left:0;padding-left:0}
  .fait:nth-child(n+3){border-top:1px solid var(--ligne)}
  .section{padding:64px 0}
  .section.suite{padding-top:0}
  .section-tete{flex-direction:column;align-items:flex-start}
  .ligne{grid-template-columns:44px 1fr;gap:14px;align-items:baseline;padding:26px 0;margin:0}
  .ligne:hover{background:none}
  .ligne .tag{grid-column:2;justify-self:start}
  .prix{grid-column:2;min-width:0;max-width:280px}
  .avap-liste{grid-template-columns:1fr;gap:20px}
  .etapes{grid-template-columns:1fr 1fr;gap:28px}
  .deux{grid-template-columns:1fr;gap:40px}
  .deux-champs{grid-template-columns:1fr}
  .pied{grid-template-columns:1fr;gap:34px}
}
@media(max-width:520px){
  .etapes{grid-template-columns:1fr !important}
  .carte-tarifs{padding:26px 22px}
  .marque{gap:16px}
  .marque img{height:64px;width:64px}
  .marque-sous{font-size:.72rem;letter-spacing:.14em}
}
@media(max-width:860px){
  .etapes[style]{grid-template-columns:1fr !important}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}