/* ============================================================
   ATLA CONSTRUCTION — one-pager premium
   Palette : noir / blanc / rouge ATLA
   Typo    : Anton (display) + Archivo (texte)
   ============================================================ */
:root{
  --terre:#101010;        /* noir profond */
  --terre-2:#1A1A1A;      /* variante panneau */
  --pierre:#F5F4F2;       /* blanc cassé, sections claires */
  --pierre-2:#EBEAE7;     /* variante clair */
  --chantier:#E02B2B;     /* rouge ATLA */
  --chantier-f:#B31E1E;   /* rouge foncé, sur fond clair */
  --encre:#141414;        /* texte sur clair */
  --brume:#9A9893;        /* texte secondaire sur sombre */
  --gris:#5A5A57;         /* texte secondaire sur clair */
  --os:#F4F4F2;           /* texte sur sombre */
  --ligne-s:rgba(244,244,242,.14);
  --ligne-c:rgba(20,20,20,.16);
  --ease:cubic-bezier(.76,0,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--terre);
  color:var(--os);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
::selection{background:var(--chantier);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{width:min(1200px,92vw);margin:0 auto}
.display{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.eyebrow{
  font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;color:var(--chantier);
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--chantier)}
.clair .eyebrow{color:var(--chantier-f)}
.clair .eyebrow::before{background:var(--chantier-f)}
.rouge{color:var(--chantier)}
/* ancres du one-pager : compenser la nav fixe */
#services,#realisations,#entreprise,#soumission{scroll-margin-top:72px}
/* grain léger sur fonds sombres */
.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   INTRO — l'animation d'ouverture (joue au chargement)
   Lettres ATLA par strates → ligne de niveau → CONSTRUCTION
   → rideau en 3 lames qui révèle le site.
   SWAP LOGO : remplacer .intro-word par <img src="logo.svg" style="height:18vw;max-height:150px">
   ============================================================ */
#intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;pointer-events:none}
#intro .blade{position:absolute;top:0;bottom:0;background:var(--terre);width:34%;transition:transform 1s var(--ease)}
#intro .blade:nth-child(1){left:0}
#intro .blade:nth-child(2){left:33%}
#intro .blade:nth-child(3){left:66%;width:34.5%}
#intro .blade::after{content:"";position:absolute;inset:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");}
#intro .intro-inner{position:relative;text-align:center;transition:opacity .35s ease}
.intro-word{font-family:'Anton',Impact,sans-serif;font-size:clamp(4.5rem,18vw,11rem);letter-spacing:.04em;line-height:1;color:var(--os);display:flex;justify-content:center}
.intro-word span{display:block;overflow:hidden}
.intro-word b{display:block;font-weight:400;transform:translateY(112%);transition:transform .9s var(--ease);transition-delay:calc(var(--i) * .09s)}
.intro-word span:last-child b{color:var(--chantier)}
#intro.step-letters .intro-word b{transform:translateY(0)}
.intro-niveau{height:3px;background:var(--chantier);margin:1.4rem auto 1.1rem;width:min(62vw,420px);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
#intro.step-line .intro-niveau{transform:scaleX(1)}
.intro-tag{font-size:.78rem;font-weight:600;letter-spacing:.55em;text-transform:uppercase;color:var(--brume);opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;padding-left:.55em}
#intro.step-tag .intro-tag{opacity:1;transform:translateY(0)}
#intro.step-exit .intro-inner{opacity:0}
#intro.step-exit .blade{transform:translateY(-101%)}
#intro.step-exit .blade:nth-child(2){transition-delay:.1s}
#intro.step-exit .blade:nth-child(3){transition-delay:.2s}
#intro.done{display:none}


/* ============================================================
   NAV
   ============================================================ */
header{position:fixed;top:0;left:0;right:0;z-index:900;transition:background .35s ease,border-color .35s ease;border-bottom:1px solid transparent}
header.scrolled{background:rgba(16,16,16,.92);backdrop-filter:blur(10px);border-color:var(--ligne-s)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Anton',Impact,sans-serif;font-size:1.45rem;letter-spacing:.06em}
.brand svg{width:20px;height:20px;flex:none}
.nav-links{display:flex;align-items:center;gap:2.2rem;font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav-links a{position:relative;padding:.3rem 0;color:var(--os)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--chantier);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.actif::after{transform:scaleX(1)}
.nav-links a.btn::after{content:none}
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--chantier);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;padding:.85rem 1.5rem;border:none;cursor:pointer;transition:transform .25s var(--ease),background .25s ease}
.btn:hover{transform:translateY(-2px);background:#F43F3F}
.btn.ghost{background:transparent;color:var(--os);outline:1px solid var(--ligne-s)}
.btn.ghost:hover{outline-color:var(--chantier);color:var(--chantier);background:transparent}
.clair .btn.ghost{color:var(--encre);outline-color:var(--ligne-c)}
.clair .btn.ghost:hover{color:var(--chantier-f);outline-color:var(--chantier-f)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:.4rem;z-index:960}
.burger span{display:block;width:26px;height:2px;background:var(--os);margin:6px 0;transition:.3s var(--ease)}
#menu{position:fixed;inset:0;background:var(--terre);z-index:950;display:none;place-items:center}
#menu.open{display:grid}
#menu a{font-family:'Anton',Impact,sans-serif;font-size:clamp(2.2rem,9vw,3.6rem);letter-spacing:.03em;text-transform:uppercase;display:block;text-align:center;margin:.55rem 0;color:var(--os)}
#menu a:hover,#menu a.actif{color:var(--chantier)}
body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
#hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:9rem;position:relative}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:end;padding-bottom:4rem}
.hero-h1{font-size:clamp(3.4rem,9.5vw,8.2rem);margin:1.4rem 0 0}
.hero-right p{color:var(--brume);font-size:1.05rem;max-width:34ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.hero-strip{border-top:1px solid var(--ligne-s);display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;padding:1.2rem 0 1.4rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brume)}
.hero-strip b{color:var(--os);font-weight:600}
.rise{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s var(--ease)}
body.ready .rise{opacity:1;transform:none}
body.ready .d2{transition-delay:.12s}
body.ready .d3{transition-delay:.24s}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--chantier);color:#fff;overflow:hidden;border-block:3px solid var(--terre)}
.marquee-track{display:flex;width:max-content;animation:defile 26s linear infinite}
.marquee span{font-family:'Anton',Impact,sans-serif;font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase;padding:.65rem 1.4rem;display:flex;align-items:center;gap:1.4rem;white-space:nowrap}
.marquee span::after{content:"▲";font-size:.7rem}
@keyframes defile{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS communes
   ============================================================ */
section{padding:6.5rem 0}
.clair{background:var(--pierre);color:var(--encre)}
.clair .sec-note,.clair p{color:var(--gris)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3.5rem}
.sec-title{font-size:clamp(2.6rem,6vw,4.6rem)}
.sec-note{color:var(--brume);max-width:36ch;font-size:.98rem}
.sec-link{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--chantier-f);white-space:nowrap;border-bottom:2px solid var(--chantier-f);padding-bottom:.2rem}
.sec-link:hover{color:var(--chantier)}
.lead{font-size:1.25rem;line-height:1.55;color:var(--encre);max-width:64ch;margin-bottom:2.8rem}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   SERVICES — rangées compactes
   ============================================================ */
.srow{display:grid;grid-template-columns:1fr 1.1fr auto;gap:2rem;align-items:center;padding:2.1rem 1.2rem;border-top:1px solid var(--ligne-c);position:relative;transition:padding-left .35s var(--ease)}
.srow:last-of-type{border-bottom:1px solid var(--ligne-c)}
.srow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--chantier);transition:width .35s var(--ease)}
.srow:hover::before,.srow:focus-visible::before{width:6px}
.srow:hover{padding-left:2rem}
.srow h3{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(1.5rem,3.2vw,2.2rem);text-transform:uppercase;letter-spacing:.02em}
.srow p{font-size:.98rem;max-width:52ch}
.srow .fleche{font-family:'Anton',Impact,sans-serif;font-size:1.6rem;transition:transform .35s var(--ease)}
.srow:hover .fleche{transform:translateX(8px);color:var(--chantier-f)}

/* ============================================================
   RÉALISATIONS — avant/après + grille duotone
   SWAP PHOTOS : remplacer les src par les vraies photos ATLA
   ============================================================ */
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.6rem}
.tuile{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--terre-2);outline:1px solid var(--ligne-s)}
.tuile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05) brightness(.85);transition:transform .8s var(--ease),filter .5s ease}
.tuile:hover .tuile-img{transform:scale(1.05);filter:grayscale(0) contrast(1.05) brightness(.95)}
.tuile-cap{position:absolute;left:0;right:0;bottom:0;padding:3.2rem 1.4rem 1.2rem;background:linear-gradient(transparent,rgba(16,16,16,.92));display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.tuile-cap h3{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;color:var(--os)}
.tuile-cap small{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chantier)}
/* avant / après */
.ba{position:relative;aspect-ratio:16/9;overflow:hidden;outline:1px solid var(--ligne-s);background:var(--terre-2);user-select:none;touch-action:none}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-avant{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);filter:grayscale(.5) brightness(.8)}
.ba-ligne{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:var(--chantier);transform:translateX(-50%);pointer-events:none}
.ba-grip{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--chantier);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.9rem;pointer-events:none;letter-spacing:.05em}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-tag{position:absolute;top:1rem;padding:.35rem .75rem;background:rgba(16,16,16,.85);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--os);pointer-events:none}
.ba-tag.t-avant{left:1rem}
.ba-tag.t-apres{right:1rem}
.ba-note{margin-top:1rem;font-size:.85rem;color:var(--brume)}

/* ============================================================
   PROCESSUS — 4 étapes numérotées
   ============================================================ */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:etape}
.etape{background:var(--pierre-2);padding:1.8rem 1.5rem 2rem;counter-increment:etape;position:relative;transition:transform .3s var(--ease)}
.etape:hover{transform:translateY(-4px)}
.etape::before{content:"0" counter(etape);font-family:'Anton',Impact,sans-serif;font-size:2.6rem;color:transparent;-webkit-text-stroke:1.5px var(--chantier-f);display:block;margin-bottom:1rem}
.etape h3{font-family:'Archivo',system-ui,sans-serif;font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.etape p{font-size:.92rem}
/* variante sombre */
.etapes.sombre .etape{background:var(--terre-2)}
.etapes.sombre .etape h3{color:var(--os)}
.etapes.sombre .etape p{color:var(--brume)}
.etapes.sombre .etape::before{-webkit-text-stroke:1.5px var(--chantier)}

/* ============================================================
   TÉMOIGNAGES (prêts à décommenter — SWAP vrais avis Google)
   ============================================================ */
.temoins{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.temoin{background:var(--terre-2);outline:1px solid var(--ligne-s);padding:2rem 1.8rem;display:flex;flex-direction:column;gap:1.2rem}
.temoin .gm{font-family:'Anton',Impact,sans-serif;font-size:2.4rem;line-height:1;color:var(--chantier)}
.temoin p{color:var(--os);font-size:.98rem}
.temoin footer{border:0;padding:0;margin-top:auto}
.temoin b{display:block;font-size:.9rem;letter-spacing:.04em}
.temoin small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brume)}

/* ============================================================
   ENTREPRISE — valeurs + secteurs (chips)
   ============================================================ */
.valeurs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:2.6rem}
.valeur{border:1px solid var(--ligne-c);padding:2rem 1.8rem}
.valeur h3{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:1.4rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:.7rem}
.valeur p{font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{border:1px solid var(--ligne-c);padding:.5rem .95rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre)}

/* ============================================================
   BANDE CTA
   ============================================================ */
.cta-bande{background:var(--chantier);color:#fff;padding:5rem 0}
.cta-bande .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem}
.cta-bande h2{font-size:clamp(2.4rem,6vw,4.4rem)}
.cta-bande .btn{background:var(--terre);color:#fff}
.cta-bande .btn:hover{background:#000}

/* ============================================================
   SOUMISSION + FAQ
   ============================================================ */
.soum-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:start}
.coords{display:grid;gap:1.1rem}
.soum-grid .coords{margin-top:0;border-top:0;padding-top:0}
.coords a,.coords div{display:flex;flex-direction:column;gap:.15rem}
.coords small{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brume)}
.coords b{font-size:1.15rem;font-weight:600;letter-spacing:.02em}
.coords a:hover b{color:var(--chantier)}
form{display:grid;gap:1.1rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
label{display:grid;gap:.45rem;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brume)}
input,select,textarea{background:var(--terre-2);border:1px solid var(--ligne-s);color:var(--os);font-family:inherit;font-size:1rem;padding:.95rem 1rem;width:100%;transition:border-color .25s ease;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--chantier)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E02B2B' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
textarea{resize:vertical;min-height:130px}
.form-ok{display:none;border:1px solid var(--chantier);padding:2rem;text-align:center}
.form-ok h3{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:1.6rem;letter-spacing:.04em;text-transform:uppercase;color:var(--chantier);margin-bottom:.4rem}
.form-ok p{color:var(--brume)}
/* FAQ */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--ligne-s)}
.faq details:last-of-type{border-bottom:1px solid var(--ligne-s)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem .4rem;font-weight:600;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Anton',Impact,sans-serif;font-size:1.5rem;color:var(--chantier);transition:transform .3s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .rep{padding:0 .4rem 1.6rem;color:var(--brume);max-width:65ch}
/* FAQ sur fond clair */
.clair .faq details{border-top-color:var(--ligne-c)}
.clair .faq details:last-of-type{border-bottom-color:var(--ligne-c)}
.clair .faq .rep{color:var(--gris)}
.clair .faq summary::after{color:var(--chantier-f)}

/* ============================================================
   FOOTER compact
   ============================================================ */
footer{border-top:1px solid var(--ligne-s);padding:2.8rem 0 2.4rem}
.foot-compact{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.4rem}
.foot-compact .brand{margin-right:auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brume)}
.foot-nav a:hover{color:var(--chantier)}
.foot-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font-size:.9rem;color:var(--brume)}
.foot-meta a:hover{color:var(--chantier)}
.foot-legal{width:100%;border-top:1px solid var(--ligne-s);margin-top:.6rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.4rem;font-size:.78rem;color:var(--brume)}
.foot-legal .rbq{letter-spacing:.12em;text-transform:uppercase}

/* ============================================================
   BARRE MOBILE COLLANTE
   ============================================================ */
.sticky-cta{display:none}

/* focus visible global */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--chantier);outline-offset:3px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .srow{grid-template-columns:1fr;gap:.6rem;padding:1.8rem .6rem}
  .srow .fleche{display:none}
  .srow:hover{padding-left:1.4rem}
  .tuiles{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr 1fr}
  .temoins{grid-template-columns:1fr}
  .valeurs{grid-template-columns:1fr}
  .soum-grid{grid-template-columns:1fr;gap:3rem}
  section{padding:4.5rem 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:2.4rem}
  .sticky-cta{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:930}
  .sticky-cta a{padding:1rem;text-align:center;font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.05em}
  .sticky-cta .s-tel{background:var(--terre-2);color:var(--os);border-top:1px solid var(--ligne-s)}
  .sticky-cta .s-soum{background:var(--chantier);color:#fff}
  main{padding-bottom:52px}
}
@media (max-width:560px){
  .etapes{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .hero-strip{gap:.4rem 1.4rem}
}

/* ============================================================
   REDUCED MOTION — on saute l'intro et les effets
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  #intro{display:none}
  .rise,.reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .marquee-track{animation:none}
  html{scroll-behavior:auto}
  *{transition:none !important}
}