/* ============================================================
   ADLUX SOLUTIONS — style.css
   ============================================================ */

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --ink:       #0d1117;
  --ink-2:     #141820;
  --ink-3:     #1c2230;
  --ink-hero:  #000000;
  --surface:   #f2ede8;
  --ice:       #6ecfe0;
  --teal:      #3a8fa6;
  --dim:       rgba(200,210,220,.5);
  --on-dark:   #edf2f6;
  --on-light:  #1a1822;
  --border-d:  rgba(110,207,224,.1);
  --border-l:  rgba(0,0,0,.1);
  --ff-display:'Cormorant Garamond',serif;
  --ff-label:  'Josefin Sans',sans-serif;
  --ff-body:   'Work Sans',sans-serif;
}

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:18px; }
body {
  font-family:var(--ff-body);
  background:var(--ink);
  color:var(--on-dark);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; }

/* ─── CURSOR ─────────────────────────────────────────────── */
.cursor {
  position:fixed; width:8px; height:8px; border-radius:50%;
  background:var(--ice); pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
}
.cursor-ring {
  position:fixed; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(110,207,224,.4); pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
}
@media (hover:none) {
  .cursor, .cursor-ring { display:none; }
  body, a { cursor:auto; }
}

/* ─── NAV ────────────────────────────────────────────────── */
#main-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 4rem;
  transition:background .4s, padding .4s;
}
#main-nav.scrolled {
  background:rgba(13,17,23,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-d);
  padding:1.1rem 4rem;
}
.nav-logo {
  font-family:var(--ff-label); font-weight:400;
  font-size:.82rem; letter-spacing:.32em;
  text-decoration:none; color:var(--on-dark); text-transform:uppercase;
}
.nav-logo span { color:var(--ice); }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a {
  font-family:var(--ff-label); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
  text-decoration:none; transition:color .3s;
}
.nav-links a:hover { color:var(--ice); }
.nav-burger { display:none; background:none; border:none; cursor:pointer; padding:4px; }
.nav-burger span {
  display:block; width:22px; height:1px;
  background:var(--on-dark); margin:5px 0;
  transition:transform .3s, opacity .3s;
}
.nav-burger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.nav-mobile {
  display:none; position:fixed; inset:0; z-index:99;
  background:var(--ink-2); flex-direction:column;
  align-items:center; justify-content:center; gap:2.5rem;
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  font-family:var(--ff-label); font-size:1rem; letter-spacing:.25em;
  text-transform:uppercase; text-decoration:none;
  color:var(--on-dark); transition:color .3s;
}
.nav-mobile a:hover { color:var(--ice); }

/* ─── BOUTONS ────────────────────────────────────────────── */
.btn {
  display:inline-block; padding:.9rem 2.2rem;
  font-family:var(--ff-label); font-size:.68rem; fonthero-right-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; border-radius:1px;
  transition:all .3s; cursor:pointer; border:1px solid transparent;
}
.btn-primary { background:var(--ice); color:var(--ink); border-color:var(--ice); }
.btn-primary:hover { background:transparent; color:var(--ice); }
.btn-ghost { background:transparent; color:var(--on-dark); border-color:var(--border-d); }
.btn-ghost:hover { border-color:var(--ice); color:var(--ice); }
.btn-teal { background:var(--teal); color:#fff; border-color:var(--teal); }
.btn-teal:hover { background:transparent; color:var(--teal); }
.btn-outline-ice { background:transparent; color:var(--ice); border-color:rgba(110,207,224,.4); }
.btn-outline-ice:hover { background:var(--ice); color:var(--ink); }

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  min-height:100vh;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:4rem;
  padding:9rem 5rem 5rem;
  position:relative; overflow:hidden;
  background: var(--ink-hero);
}
.hero::before {
  content:''; position:absolute;
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(110,207,224,.04) 0%, transparent 70%);
  top:50%; right:5%; transform:translateY(-50%);
  pointer-events:none;
}
.hero-left { display:flex; flex-direction:column; align-items:flex-start; }
.hero-tag {
  font-family:var(--ff-label); font-size:.65rem;
  letter-spacing:.35em; text-transform:uppercase; color:var(--ice);
  margin-bottom:2rem;
  opacity:0; animation:fadeUp .7s ease .2s forwards;
}
.hero-name {
  font-family:var(--ff-label); font-weight:300;
  font-size:.9rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin-bottom:.6rem;
  opacity:0; animation:fadeUp .7s ease .35s forwards;
}
.hero-title {
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(3rem,5vw,5.5rem); line-height:.95;
  color:#e8f2f8; margin-bottom:1rem;
  opacity:0; animation:fadeUp .7s ease .5s forwards;
}
.hero-title em { font-style:italic; color:var(--ice); }
.hero-sub {
  font-family:var(--ff-label); font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
  margin-bottom:1.8rem;
  opacity:0; animation:fadeUp .7s ease .65s forwards;
}
.hero-desc {
  font-size:.9rem; font-weight:300; line-height:1.9;
  color:var(--dim); max-width:420px;
  opacity:0; animation:fadeUp .7s ease .8s forwards;
}
.hero-cta {
  margin-top:2.8rem; display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0; animation:fadeUp .7s ease .95s forwards;
}
.hero-right { display:flex; align-items:center; justify-content:center; }
.hero-logo-wrap {
  position:relative; width:100%; max-width:380px;
  opacity:0; animation:fadeIn 2s ease .6s forwards;
}
.hero-logo-wrap img {
    width:100%; height:auto;
}

.hero-logo-wrap::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 35%, #000000 75%);
  pointer-events:none;

}
/* .hero-line::before {
  content:'scroll';
  font-family:var(--ff-label); font-size:.58rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--dim);
} */
 
.hero-line::after {
  content:''; width:1px; height:42px;
  background:linear-gradient(to bottom, var(--ice), transparent);
  animation:pulse 2.2s ease-in-out infinite;
}

/* ─── SECTIONS BASE ──────────────────────────────────────── */
.section { padding:8rem 5rem; }
.section--dark    { background:var(--ink); }
.section--dark-2  { background:var(--ink-2); }
.section--dark-3  { background:var(--ink-3); }
.section--surface { background:var(--surface); color:var(--on-light); }

.section-label {
  font-family:var(--ff-label); font-size:.62rem;
  letter-spacing:.38em; text-transform:uppercase;
  color:var(--ice); margin-bottom:.9rem;
}
.section--surface .section-label { color:var(--teal); }

.section-title {
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(2.8rem,4.5vw,4.5rem); line-height:.95;
  margin-bottom:4rem; color:#e8f2f8;
}
.section-title em { font-style:italic; color:var(--ice); }
.section--surface .section-title { color:var(--on-light); }
.section--surface .section-title em { color:var(--teal); }

.section-divider {
  height:1px;
  background:linear-gradient(to right, transparent, rgba(110,207,224,.2), transparent);
}

/* ─── OFFRES (cartes) ────────────────────────────────────── */
.offres-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border-d);
}
.offre {
  padding:3rem 2.5rem; position:relative; overflow:hidden;
  background:var(--ink-3); transition:background .4s;
}
.offre::after {
  content:''; position:absolute; top:0; left:0;
  width:100%; height:2px; background:var(--ice);
  transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.offre:hover { background:#222d3e; }
.offre:hover::after { transform:scaleX(1); }
.offre-num {
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:3.5rem; color:var(--ice); margin-bottom:.8rem;
  opacity:.6; line-height:1;
}
.offre-title {
  font-family:var(--ff-label); font-size:1rem; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase;
  color:#e8f2f8; margin-bottom:1.2rem;
}
.offre-text {
  font-size:.87rem; line-height:1.9;
  color:rgba(200,210,220,.75); font-weight:300; margin-bottom:2rem;
}
.offre-arrow {
  font-family:var(--ff-label); font-size:.65rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ice);
  text-decoration:none; display:inline-block;
  opacity:.6; transition:opacity .3s, letter-spacing .3s;
}
.offre:hover .offre-arrow { opacity:1; letter-spacing:.26em; }

/* ─── SERVICES DÉTAIL ────────────────────────────────────── */
.service-detail {
  display:grid; grid-template-columns:1fr 2fr;
  gap:6rem; align-items:start;
}
.service-detail-num {
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:8rem; line-height:1; color:var(--ice);
  opacity:.1; position:sticky; top:8rem;
}
.service-detail-content h2 {
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(2rem,3.5vw,3rem); line-height:1.05;
  margin-bottom:2.5rem; color:#e8f2f8;
}
.service-detail-content p {
  font-size:.95rem; font-weight:300; line-height:2;
  margin-bottom:1.5rem; color:rgba(200,210,220,.75);
}
.service-detail-content .btn { margin-top:1rem; }

/* ─── À PROPOS ───────────────────────────────────────────── */
.about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:7rem; align-items:center;
}
.about-text p {
  font-size:.9rem; font-weight:300; line-height:1.95;
  color:rgb(0, 0, 0); margin-bottom:1.3rem;
}
.about-img { position:relative; }
.about-img img {
  width:100%; aspect-ratio:3/4;
  object-fit:cover; object-position:center top;
  filter:grayscale(10%);
}
.about-img::after {
  content:''; position:absolute;
  top:14px; left:14px; right:-14px; bottom:-14px;
  border:1px solid rgba(58,143,166,.5); z-index:-1;
}


/* ─── PORTFOLIO ──────────────────────────────────────────── */
.real-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-top:4rem;
}

.real-item {
  position:relative; overflow:hidden;
  aspect-ratio:4/3; background:var(--ink-3);
}
.real-item img {
  width:100%; height:100%; object-fit:cover; object-position:top;
  transition:transform .7s ease, filter .7s ease;
  filter:grayscale(20%);
}
.real-item:hover img { transform:scale(1.04); filter:grayscale(0); }
.real-overlay {
  position:absolute; inset:0; padding:2.5rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top, rgba(13,17,23,.95) 0%, rgba(13,17,23,.1) 55%, transparent 100%);
}
.real-tag {
  font-family:var(--ff-label); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ice); margin-bottom:.5rem;
}
.real-title {
  font-family:var(--ff-display); font-weight:400;
  font-size:1.8rem; color:#fff; margin-bottom:.5rem; line-height:1.1;
}
.real-desc {
  font-size:.82rem; color:var(--dim);
  font-weight:300; margin-bottom:1.2rem; line-height:1.7;
}
.real-link {
  font-family:var(--ff-label); font-size:.65rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ice);
  text-decoration:none; transition:letter-spacing .3s;
}
.real-link:hover { letter-spacing:.28em; }
.real-placeholder {
  width:100%; height:100%;
  background:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-label); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(110,207,224,.15);
}

/* ─── CONTACT ────────────────────────────────────────────── */
.contact { text-align:center; }
.contact-title {
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(3.5rem,7vw,6rem); line-height:.95;
  color:var(--on-light); margin-bottom:1rem;
}
.contact-title em { font-style:italic; color:var(--teal); }
.contact-desc {
  font-size:.88rem; font-weight:300;
  color:rgba(26,24,34,.5); margin-bottom:3rem;
}
.contact-links {
  display:flex; justify-content:center; gap:3rem;
  flex-wrap:wrap; margin-bottom:4rem;
}
.contact-links a {
  font-family:var(--ff-label); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-light);
  text-decoration:none;
  border-bottom:1px solid var(--teal); padding-bottom:3px;
  transition:color .3s;
}
.contact-links a:hover { color:var(--teal); }
.contact-form {
  max-width:560px; margin:0 auto;
  display:flex; flex-direction:column; gap:1rem; text-align:left;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  background:#fff; border:1px solid var(--border-l);
  border-radius:1px; padding:1rem 1.2rem;
  font-family:var(--ff-body); font-size:.88rem; color:var(--on-light);
  outline:none; transition:border-color .3s;
  -webkit-appearance:none; width:100%;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color:var(--teal); }
.contact-form textarea { min-height:130px; resize:vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:rgba(26,24,34,.35); }
.form-success {
  display:none; margin-top:1.5rem;
  font-family:var(--ff-label); font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal);
}

/* ─── FOOTER ─────────────────────────────────────────────── */
footer {
  background:var(--ink); padding:2rem 4rem;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border-d);
  font-family:var(--ff-label); font-size:.65rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  flex-wrap:wrap; gap:1rem;
}
.footer-right { display:flex; gap:2.5rem; }
footer a { color:var(--dim); text-decoration:none; transition:color .3s; }
footer a:hover { color:var(--ice); }

/* ─── MENTIONS LÉGALES ───────────────────────────────────── */
.mentions {
  display:none; background:var(--ink-2); padding:3rem 5rem;
  border-top:1px solid var(--border-d);
  font-size:.85rem; line-height:1.8; color:var(--dim);
}
.mentions.open { display:block; }
.mentions h3 {
  font-family:var(--ff-display); font-weight:300;
  font-size:1.5rem; color:#e8f2f8; margin-bottom:1.5rem;
}
.mentions p { margin-bottom:1rem; }
.mentions strong { color:var(--on-dark); font-weight:500; }

/* ─── REVEAL ─────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.no-js .reveal { opacity:1; transform:none; }

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:none; }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scaleY(1); }
  50%      { opacity:.25; transform:scaleY(.45); }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1100px) {
  .service-detail { grid-template-columns:1fr; gap:2rem; }
  .service-detail-num { display:none; }
}

@media (max-width:900px) {
  #main-nav { padding:1.2rem 1.8rem; }
  #main-nav.scrolled { padding:1rem 1.8rem; }
  .nav-links { display:none; }
  .nav-burger { display:block; }

  .hero { grid-template-columns:1fr; padding:7rem 1.8rem 4rem; text-align:center; }
  .hero-left { align-items:center; }
  .hero-right { display:none; }
  .hero-line { left:50%; transform:translateX(-50%); }

  .section { padding:5rem 1.8rem; }
  .offres-grid { grid-template-columns:1fr; }
  .offre { border-bottom:1px solid var(--border-d); }
  .offre:last-child { border-bottom:none; }
  .about-grid { grid-template-columns:1fr; gap:3rem; }
  .real-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  footer { flex-direction:column; text-align:center; padding:2rem 1.8rem; }
  .footer-right { justify-content:center; }
  .mentions { padding:2.5rem 1.8rem; }
}