@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

/* ══════════════════════════════════════════
   THEME SOMBRE (défaut)
══════════════════════════════════════════ */
:root {
  --bg:          #1a1a1a;
  --navv:        transparent;
  --s1:          #222222;
  --s2:          #2a2a2a;
  --text:        #ffffff;
  --form:        #E8BD63;
  --inform:       #c4c4c470;
  --white:       #ffffff;
  --text-muted:  rgba(255,255,255,0.55);
  --text-faint:  rgba(255,255,255,0.28);
  --border:      rgba(255,255,255,0.08);
  --border2:     rgba(255,255,255,0.16);
  --accent:      #E8BD63;
  --bg2:      #94949423;
  --shadow-sm:   none;
  --shadow-md:   none;
  --logo-filter: none;
  --fd: 'Lexend', sans-serif;
  --fb: 'Inter', sans-serif;
}

/* ══════════════════════════════════════════
   THEME CLAIR
══════════════════════════════════════════ */
[data-theme="light"] {
  --bg:          #faf8f5;
  --navlight:          #faf8f5;
  --s1:          #cacaca31;
  --s2:          #e9e5dd;
  --white:       #ffffff;
  --bloc:        #1515d4; 
  --text:        #111111;
  --form:        #000000;
  --inform:       #c4c4c42d;
  --text-muted:  #665f5fcc;
  --text-faint:  #1e3a5f;
  --border:      rgba(0,0,0,0.07);
  --border2:     rgba(0,0,0,0.14);
  --accent:      #234775;
  --bg2:      #33416923;
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.08);
  --nav-bg:      rgba(206, 77, 77, 0.336);
  --hero-fade:   linear-gradient(to top,#ffffffee 0%,rgba(255, 255, 255, 0.24) 0%,transparent 0%);
  --hero-op:     0.62;
  --logo-filter: invert(1) brightness(0);
}

/* ══════════════════════════════════════════
   BASE
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--fb);font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
img{display:block;max-width:100%;}
.masonry-item img{will-change:transform;}
.sim-card img{will-change:transform;}
a{color:inherit;text-decoration:none;}

/* ══════════════════════════════════════════
   CURSEUR
══════════════════════════════════════════ */
/* curseur natif */

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--bg);
  display:flex;align-items:center;justify-content:space-between; 
  padding:1.4rem 2.5rem;
  transition:background .3s,backdrop-filter .3s,box-shadow .3s;
}
nav.scrolled{
  background:var(--navlight);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.nav-logo{display:flex;align-items:center;}
.nav-logo img{height:34px;width:auto;filter:var(--logo-filter);transition:filter .3s;}
.nav-links{display:flex;gap:2.2rem;list-style:none;}
.nav-links a{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:var(--text);opacity:.5;transition:opacity .2s;}
.nav-links a:hover,.nav-links a.active{opacity:1;}
.nav-right{display:flex;align-items:center;gap:1rem;}
.nav-cta{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--text);border:1px solid var(--border2);padding:.5rem 1.3rem;transition:all .2s;cursor:pointer;}
.nav-cta:hover{background:var(--text);color:var(--bg);border-color:var(--text);}

/* ══════════════════════════════════════════
   TOGGLE THEME
══════════════════════════════════════════ */
.theme-btn{
  width:40px;height:24px;border-radius:12px;
  background:var(--s2);border:1px solid var(--border2);
  position:relative;cursor:pointer;flex-shrink:0;
  transition:background .3s,border-color .3s;
}
.theme-btn::after{
  content:'';position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;
  background:var(--text);
  transition:transform .3s;
}
[data-theme="light"] .theme-btn::after{transform:translateX(16px);}
.theme-btn:hover{border-color:var(--accent);}
.theme-icon-dark,.theme-icon-light{font-size:.6rem;position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;}
.theme-icon-dark{right:4px;}
.theme-icon-light{left:4px;}

.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.nav-burger span{width:22px;height:1px;background:var(--text);display:block;transition:transform .3s;}

/* ══════════════════════════════════════════
   PAGE HERO
══════════════════════════════════════════ */
.page-hero{position:relative;min-height:60vh;display:flex;align-items:flex-end;overflow:hidden;}
.ph-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0.9;
  transform:scale(1.04);transition:transform 9s ease,opacity .3s;
  filter:blur(5px)
}
.page-hero:hover .ph-bg{transform:scale(1);}
.ph-fade{position:absolute;inset:0;background:var(--hero-fade);}
.ph-content{position:relative;z-index:2;padding:5rem 2.5rem;}
.eyebrow{font-size:.68rem;letter-spacing:.35em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem;}
/* Titres hero toujours blancs — ils sont sur photo */
.ph-h1{font-family:var(--fd);font-weight:300;font-style:italic;font-size:clamp(3rem,8vw,7rem);line-height:1;letter-spacing:-.02em;color:#fff;opacity:0;transform:translateY(18px);animation:up .8s .3s forwards;}
.ph-sub{margin-top:1.2rem;font-size:.92rem;line-height:1.75;color:rgba(255,255,255,.65);max-width:520px;opacity:0;transform:translateY(12px);animation:up .7s .55s forwards;}

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */
.sec{padding:6rem 2.5rem;}
.sec-dark{background:var(--bg2);}
.sec-darker{background:var(--s2);}
.sec-label{font-size:.68rem;letter-spacing:.35em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;}
.sec-title{font-family:var(--fd);font-weight:300;font-style:italic;font-size:clamp(2rem,4.5vw,4rem);line-height:1.05;color:var(--text);}
.sec-title em{font-style:normal;color:var(--text-faint);}

/* ══════════════════════════════════════════
   BOUTONS
══════════════════════════════════════════ */
.btn-fill{display:inline-flex;align-items:center;gap:.6rem;background:var(--accent);color:#fff;padding:.85rem 2rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;transition:opacity .2s;cursor:pointer;}
.btn-fill:hover{opacity:.82;}
.btn-out{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border2);padding:.6rem 1.4rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);transition:all .2s;cursor:pointer;}
.btn-out:hover{background:var(--text);color:var(--bg);border-color:var(--text);}

/* ══════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════ */
.mq-outer{overflow:hidden;}
.mq-inner{display:flex;gap:4rem;align-items:center;animation:mq 22s linear infinite;width:max-content;}
.mq-inner img{opacity:1;transition:opacity .3s,filter .3s;}
.mq-inner img:hover{opacity:1;}
[data-theme="light"] .mq-inner img{filter:invert(1) brightness(0);opacity:.25;}
[data-theme="light"] .mq-inner img:hover{opacity:.65;}

/* ══════════════════════════════════════════
   FAQ
══════════════════════════════════════════ */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;cursor:pointer;font-size:.9rem;gap:1rem;color:var(--text);}
.faq-ico{width:22px;height:22px;flex-shrink:0;position:relative;}
.faq-ico::before,.faq-ico::after{content:'';position:absolute;background:var(--text);transition:transform .3s,opacity .3s;}
.faq-ico::before{width:12px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-ico::after{width:1px;height:12px;top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-item.open .faq-ico::after{opacity:0;}
.faq-a{font-size:.84rem;line-height:1.8;color:var(--text-muted);max-height:0;overflow:hidden;transition:max-height .4s,padding .3s;}
.faq-item.open .faq-a{max-height:300px;padding-bottom:1.4rem;}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer{border-top:1px solid var(--border);padding:4rem 2.5rem 2rem;background:var(--s1);transition:background .3s;}
.ft-top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--border);}
.ft-logo img{height:38px;width:auto;filter:var(--logo-filter);transition:filter .3s;}
.ft-tagline{font-size:.86rem;line-height:1.7;color:var(--text-muted);margin-top:.8rem;max-width:220px;}
.ft-socials{display:flex;gap:.7rem;margin-top:1.5rem;}
.ft-socials a{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);padding:.35rem .8rem;color:var(--text);transition:all .2s;}
.ft-socials a:hover{background:var(--text);color:var(--bg);border-color:var(--text);}
.ft-col-title{font-size:.63rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem;}
.ft-col a,.ft-col span{display:block;font-size:.82rem;color:var(--text-muted);margin-bottom:.6rem;transition:color .2s;}
.ft-col a:hover{color:var(--text);}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;font-size:.7rem;color:var(--text-faint);flex-wrap:wrap;gap:.5rem;}

/* ══════════════════════════════════════════
   CORRECTIONS THÈME CLAIR — couleurs codées en dur
══════════════════════════════════════════ */

/* ── Textes rgba blanc → muted ── */
[data-theme="light"] [style*="rgba(255,255,255,.6"],
[data-theme="light"] [style*="rgba(255,255,255,.65"],
[data-theme="light"] [style*="rgba(255,255,255,.55"],
[data-theme="light"] [style*="rgba(255,255,255,.5"],
[data-theme="light"] [style*="rgba(255,255,255,.4"],
[data-theme="light"] [style*="rgba(255,255,255,.38"] { color:var(--text-muted) !important; }

[data-theme="light"] [style*="rgba(255,255,255,.3"],
[data-theme="light"] [style*="rgba(255,255,255,.25"],
[data-theme="light"] [style*="rgba(255,255,255,.2"] { color:var(--text-faint) !important; }

/* ── Textes #fff / white codés en dur → texte normal (hors cartes images) ── */
[data-theme="light"] strong[style*="color:#fff"],
[data-theme="light"] strong[style*="color: #fff"],
[data-theme="light"] strong[style*="color:white"],
[data-theme="light"] strong[style*="color:#ffffff"],
[data-theme="light"] span[style*="color:#fff"],
[data-theme="light"] span[style*="color: #fff"] { color:var(--text) !important; }

/* ── Classes avec couleur blanche dans styles internes ── */
[data-theme="light"] .legal-stitle,
[data-theme="light"] .legal-title,
[data-theme="light"] .cat-label,
[data-theme="light"] .phase-item h4,
[data-theme="light"] .ah-title,
[data-theme="light"] .ah-desc { color:var(--text) !important; }

/* ── Textes muted dans classes internes ── */
[data-theme="light"] .legal-text,
[data-theme="light"] .legal-list li,
[data-theme="light"] .legal-warn p,
[data-theme="light"] .legal-highlight p,
[data-theme="light"] .phase-item p,
[data-theme="light"] .svc-desc,
[data-theme="light"] .dom-desc,
[data-theme="light"] .ind-desc,
[data-theme="light"] .about-txt,
[data-theme="light"] .testi-text,
[data-theme="light"] .ttxt,
[data-theme="light"] .blog-meta,
[data-theme="light"] .val-desc,
[data-theme="light"] .why-card p,
[data-theme="light"] .side-text,
[data-theme="light"] .sidebar-card-content,
[data-theme="light"] .info-text,
[data-theme="light"] .gallery-intro { color:var(--text-muted) !important; }

/* ── Labels discrets ── */
[data-theme="light"] .legal-row-label { color:var(--text-faint) !important; }

/* ── Boutons filtres ── */
[data-theme="light"] .fbtn { color:var(--text);border-color:var(--border2); }
[data-theme="light"] .fbtn:hover,
[data-theme="light"] .fbtn.on { color:#fff; }
[data-theme="light"] .filter-bar { background:var(--bg);border-color:var(--border); }

/* ── Cards et surfaces ── */
[data-theme="light"] .val-card,
[data-theme="light"] .why-card,
[data-theme="light"] .testi-card,
[data-theme="light"] .side-card,
[data-theme="light"] .info-card,
[data-theme="light"] .sidebar-card,
[data-theme="light"] .legal-block { background:var(--s1);border-color:var(--border);box-shadow:var(--shadow-sm); }

/* ── Témoignages ── */
[data-theme="light"] .album-testi,
[data-theme="light"] .proj-testimonial,
[data-theme="light"] .legal-highlight { background:var(--s2);border-left-color:var(--accent); }

/* ── Fiche technique ── */
[data-theme="light"] .tech-card { background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.08);backdrop-filter:blur(16px); }
[data-theme="light"] .tech-row { border-color:rgba(0,0,0,.05); }
[data-theme="light"] .tech-value { color:var(--text-muted); }

/* ── Formulaire ── */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select { background:var(--inform);border-color:var(--border2);color:var(--text); }
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus { border-color:var(--accent);background:#fff; }
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color:var(--text-faint); }
[data-theme="light"] .budget-btn { color:var(--text-muted);border-color:var(--border2); }
[data-theme="light"] .budget-btn:hover,
[data-theme="light"] .budget-btn.selected { border-color:var(--accent);color:var(--text);background:rgba(232,189,99,.1); }

/* ── Nav ── */
[data-theme="light"] nav.scrolled { background:var(--navlight); }
[data-theme="light"] .nav-links { background:var(--navlight);box-shadow:var(--navv); }

/* ── Numéros stats ── */
[data-theme="light"] .stat-n,
[data-theme="light"] .side-stat-n,
[data-theme="light"] .svc-num,
[data-theme="light"] .ind-num,
[data-theme="light"] .cat-n,
[data-theme="light"] .val-n { color:var(--text-faint); }

/* ── Textes sur cartes images — toujours blancs ── */
[data-theme="light"] .proj-name,
[data-theme="light"] .proj-client,
[data-theme="light"] .proj-cat,
[data-theme="light"] .proj-hover,
[data-theme="light"] .atitle,
[data-theme="light"] .abadge,
[data-theme="light"] .aloc,
[data-theme="light"] .aview,
[data-theme="light"] .sim-name,
[data-theme="light"] .sim-loc { color:#fff !important; }

/* ── Lightbox — toujours sombre ── */
.lb { background:rgba(0,0,0,.97) !important; }
.lb .lb-cap,.lb .lb-cnt { color:rgba(255,255,255,.4) !important; }

/* ── Divers ── */
[data-theme="light"] .phase-item { border-left-color:var(--accent); }
[data-theme="light"] .masonry-item-overlay { background:rgba(0,0,0,0) !important; }
[data-theme="light"] .masonry-item:hover .masonry-item-overlay { background:rgba(0,0,0,.15) !important; }


/* ══════════════════════════════════════════
   REVEAL
══════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s;}
.reveal.vis{opacity:1;transform:translateY(0);}

/* ══════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════ */
@keyframes up    { to{opacity:1;transform:translateY(0);} }
@keyframes mq    { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pulse { 0%,100%{opacity:.2} 50%{opacity:.85} }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:960px){
  nav{padding:1.1rem 1.5rem;}
  .nav-links{display:none;flex-direction:column;position:fixed;top:62px;left:0;right:0;background:var(--bg);padding:2rem;gap:1.5rem;border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);}
  .nav-links.open{display:flex;}
  .nav-burger{display:flex;}
  @media(max-width:960px){
  .nav-cta{
    display:inline-block;
    font-size:.65rem;
    padding:.4rem .9rem;
  }
}
  .sec{padding:4rem 1.5rem;}
  .ph-content{padding:3.5rem 1.5rem;}
  .ft-top{grid-template-columns:1fr 1fr;gap:2rem;}
  .ft-bottom{padding-top:1.2rem;}
}
@media(max-width:580px){
  .ft-top{grid-template-columns:1fr;}
}