/* IDOINE PARIS — idoine-front.css — Grabuge Agency */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--noir:#080808;--noir-2:#0e0e0e;--or:#99845F;--or-light:#b89b74;--or-dim:rgba(153,132,95,.15);--or-faint:rgba(153,132,95,.07);--blanc:#F2EFE9;--blanc-2:#b0aca6;--blanc-3:#58564f}
html{scroll-behavior:smooth}
body.idoine-homepage{background:var(--noir);color:var(--blanc);font-family:'Space Grotesk',sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:2px}::-webkit-scrollbar-track{background:var(--noir)}::-webkit-scrollbar-thumb{background:var(--or)}
/* HEADER */
#idoine-header{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:28px 64px;transition:padding .4s,background .4s,border-color .4s;border-bottom:1px solid transparent}
#idoine-header.scrolled{padding:16px 64px;background:rgba(8,8,8,.92);backdrop-filter:blur(20px);border-bottom-color:var(--or-dim)}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}.logo img{height:34px;width:auto}
nav{display:flex;align-items:center;gap:36px}
.nav-link{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--blanc-2);text-decoration:none;transition:color .25s;white-space:nowrap}.nav-link:hover{color:var(--blanc)}
.nav-cta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--or);border:1px solid var(--or);padding:11px 28px;text-decoration:none;transition:background .25s,color .25s;white-space:nowrap}.nav-cta:hover{background:var(--or);color:var(--noir)}
/* HERO */
.hero{position:relative;height:100vh;min-height:700px;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;transform:scale(1.06);background-size:cover!important;background-position:center!important;transition:transform 7s cubic-bezier(.25,.46,.45,.94)}.hero-bg.loaded{transform:scale(1)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(175deg,rgba(8,8,8,.2) 0%,rgba(8,8,8,.05) 35%,rgba(8,8,8,.65) 72%,rgba(8,8,8,1) 100%)}
.hero-content{position:relative;z-index:2;padding:0 64px 90px;width:100%;display:grid;grid-template-columns:1fr 400px;align-items:flex-end;gap:64px}
.hero-eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--or);margin-bottom:22px;opacity:0;transform:translateY(16px);animation:fadeUp .7s .15s forwards}
.hero-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(72px,9vw,138px);line-height:.90;letter-spacing:-.025em;opacity:0;animation:fadeUp .85s .3s forwards}.hero-title em{font-style:italic;color:var(--or)}
.hero-right{opacity:0;animation:fadeUp .8s .55s forwards;padding-bottom:6px}
.hero-sub{font-size:14px;line-height:1.85;color:var(--blanc-2);font-weight:300;margin-bottom:36px}
.hero-actions{display:flex;flex-direction:column;gap:12px}
.btn-primary{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--noir);background:var(--or);padding:16px 36px;text-decoration:none;transition:background .25s,transform .2s;display:inline-block;text-align:center}.btn-primary:hover{background:var(--or-light);transform:translateY(-2px)}
.btn-outline{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--blanc-2);border:1px solid rgba(240,237,232,.18);padding:15px 36px;text-decoration:none;transition:border-color .25s,color .25s;display:inline-block;text-align:center}.btn-outline:hover{border-color:rgba(240,237,232,.5);color:var(--blanc)}
/* TICKER */
.ticker-wrap{overflow:hidden;border-top:1px solid var(--or-dim);border-bottom:1px solid var(--or-dim);padding:15px 0;background:var(--noir)}
.ticker{display:flex;white-space:nowrap;animation:ticker 30s linear infinite}.ticker-inner{display:flex;flex-shrink:0}
.ticker span{font-size:11px;letter-spacing:.35em;text-transform:uppercase;font-weight:400;color:var(--or);margin:0 32px}.ticker span.sep{color:rgba(153,132,95,.3)}
/* LABEL/TITLE */
.s-label{font-size:10px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;color:var(--or);display:flex;align-items:center;gap:14px;margin-bottom:22px}.s-label::before{content:'';width:28px;height:1px;background:var(--or)}
.s-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(44px,5vw,70px);line-height:.95;letter-spacing:-.025em}.s-title em{font-style:italic;color:var(--or)}
/* WIRE */
.has-wire{position:relative;overflow:hidden}
.wire-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.has-wire>*:not(.wire-canvas){position:relative;z-index:1}
/* MÉTIERS */
.section-metiers{padding:140px 64px;display:grid;grid-template-columns:320px 1fr;gap:80px;align-items:start}
.metiers-header{position:sticky;top:120px}.metiers-intro{font-size:14px;line-height:1.9;color:var(--blanc-2);margin-top:28px;max-width:280px}
.metiers-list{display:flex;flex-direction:column;padding-top:4px}
.metier-item{display:grid;grid-template-columns:56px 1fr;padding:40px 0;border-bottom:1px solid rgba(240,237,232,.07);cursor:default;position:relative}
.metier-item::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.25,.46,.45,.94)}.metier-item:hover::after{transform:scaleX(1)}
.metier-num{font-size:10px;letter-spacing:.2em;color:var(--or);padding-top:12px;font-weight:500}
.metier-name{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(34px,3.8vw,56px);line-height:1;letter-spacing:-.015em;transition:transform .45s cubic-bezier(.25,.46,.45,.94)}.metier-item:hover .metier-name{transform:translateX(10px)}
.metier-text,.metier-detail{font-size:13.5px;line-height:1.8;color:var(--blanc-3);margin-top:14px;max-height:0;overflow:hidden;transition:max-height .55s ease,opacity .45s;opacity:0;max-width:520px}.metier-item:hover .metier-text,.metier-item:hover .metier-detail{max-height:200px;opacity:1}
.metier-detail{margin-top:8px;font-size:12px;transition-delay:.05s}
.metier-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-height:0;overflow:hidden;transition:max-height .55s ease .1s,opacity .45s .1s;opacity:0}.metier-item:hover .metier-tags{max-height:80px;opacity:1}
.mtag{font-size:10px;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--or-dim);color:var(--or);padding:4px 10px}
/* STATS */
.section-stats{border-top:1px solid var(--or-dim);border-bottom:1px solid var(--or-dim)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{padding:80px 40px;border-right:1px solid var(--or-dim);text-align:center;transition:background .3s}.stat-item:last-child{border-right:none}.stat-item:hover{background:var(--or-faint)}
.stat-num{font-family:'DM Serif Display',serif;font-weight:400;font-size:80px;line-height:1;letter-spacing:-.03em}.stat-num sup{font-size:32px;color:var(--or)}
.stat-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--blanc-3);margin-top:12px}
/* MARQUEE */
.section-marquee{padding:60px 0;overflow:hidden;border-bottom:1px solid var(--or-dim)}
.mq-row{display:flex;white-space:nowrap}.mq-row.fwd{animation:ticker 50s linear infinite}
.mq-word{font-family:'DM Serif Display',serif;font-style:italic;font-size:clamp(80px,10vw,130px);line-height:1;letter-spacing:-.025em;color:rgba(240,237,232,.038);margin-right:52px;flex-shrink:0}.mq-word.gold{color:rgba(153,132,95,.09)}
/* RÉALISATIONS */
.section-real{padding:140px 64px}
.real-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:56px}
.real-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:440px 320px 380px 320px 440px 360px 260px;gap:3px}
.rc{position:relative;overflow:hidden}
.rc img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.25,.46,.45,.94)}.rc:hover img{transform:scale(1.07)}
.rc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.88) 0%,rgba(8,8,8,.1) 55%,transparent 100%);opacity:0;transition:opacity .45s}.rc:hover .rc-overlay{opacity:1}
.rc-info{position:absolute;bottom:0;left:0;right:0;padding:22px 26px;transform:translateY(8px);opacity:0;transition:transform .4s,opacity .4s}.rc:hover .rc-info{transform:translateY(0);opacity:1}
.rc-name{font-family:'DM Serif Display',serif;font-size:19px;font-weight:400;color:var(--blanc)}.rc-tag{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--or);margin-top:3px}
.idoine-empty{color:var(--blanc-3);font-size:14px;padding:60px 0;text-align:center}.idoine-empty a{color:var(--or);text-decoration:none}
/* PROCESS */
.section-process{padding:140px 64px;border-top:1px solid var(--or-dim)}
.process-header{text-align:center;margin-bottom:80px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--or-dim)}
.process-step{padding:64px 40px;border-right:1px solid var(--or-dim);transition:background .35s}.process-step:last-child{border-right:none}.process-step:hover{background:var(--or-faint)}
.ps-num{font-family:'DM Serif Display',serif;font-style:italic;font-size:60px;color:rgba(153,132,95,.18);line-height:1;margin-bottom:24px;transition:color .35s}.process-step:hover .ps-num{color:var(--or)}
.ps-title{font-size:16px;font-weight:500;letter-spacing:.04em;margin-bottom:14px}.ps-desc{font-size:13.5px;line-height:1.8;color:var(--blanc-3)}
/* HISTOIRE */
.section-histoire{padding:150px 64px;display:grid;grid-template-columns:1fr 480px;gap:80px;align-items:center;position:relative;overflow:hidden}
.hist-year{position:absolute;right:-30px;top:50%;transform:translateY(-50%);font-family:'DM Serif Display',serif;font-style:italic;font-size:clamp(160px,19vw,270px);line-height:1;color:rgba(153,132,95,.055);pointer-events:none;letter-spacing:-.04em;white-space:nowrap}
.hist-quote{font-family:'DM Serif Display',serif;font-style:italic;font-size:clamp(20px,2.2vw,28px);line-height:1.6;color:var(--blanc-2);margin:36px 0 28px;padding-left:24px;border-left:2px solid var(--or)}
.hist-body{font-size:13.5px;line-height:1.9;color:var(--blanc-3);margin-bottom:40px}
.hist-img{position:relative;aspect-ratio:3/4;overflow:hidden}.hist-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.hist-img:hover img{transform:scale(1.04)}
.hist-img::before{content:'';position:absolute;top:20px;left:20px;right:-20px;bottom:-20px;border:1px solid var(--or-dim);z-index:-1}
/* CARTE */
.section-map{padding:130px 64px;border-top:1px solid var(--or-dim)}.map-header{margin-bottom:56px;text-align:center}.map-count{font-size:13px;color:var(--blanc-3);margin-top:12px;letter-spacing:.06em}
.map-container{border:1px solid var(--or-dim);overflow:hidden;position:relative}#idoine-map{height:600px;width:100%;background:var(--noir-2)}
.map-legend{position:absolute;bottom:16px;left:16px;z-index:999;background:rgba(8,8,8,.88);border:1px solid var(--or-dim);padding:10px 16px;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.12em;color:var(--blanc-2);pointer-events:none}
.legend-dot{width:10px;height:10px;border-radius:50%;background:var(--or);flex-shrink:0}
.ido-tip{background:#0e0e0e!important;color:#F2EFE9!important;border:1px solid rgba(153,132,95,.4)!important;padding:5px 10px!important;font-size:11px!important;font-family:'Space Grotesk',sans-serif!important;letter-spacing:.06em!important;box-shadow:none!important;border-radius:0!important;white-space:nowrap!important}
.ido-tip.leaflet-tooltip-top::before,.ido-tip.leaflet-tooltip-bottom::before,.ido-tip.leaflet-tooltip-left::before,.ido-tip.leaflet-tooltip-right::before{display:none!important}
/* REFS */
.section-refs{padding:120px 64px;border-top:1px solid var(--or-dim)}.refs-header{text-align:center;margin-bottom:56px}.refs-count{font-size:13px;color:var(--blanc-3);margin-top:12px;letter-spacing:.06em}
.refs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--or-dim);border:1px solid var(--or-dim)}
.ref-item{background:var(--noir);padding:16px 22px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blanc-3);font-weight:400;transition:background .25s,color .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;display:block}.ref-item:hover{background:var(--or-faint);color:var(--or)}
/* CTA */
.section-cta{padding:160px 64px;text-align:center}
.cta-ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'DM Serif Display',serif;font-style:italic;font-size:clamp(100px,15vw,210px);color:rgba(153,132,95,.04);white-space:nowrap;pointer-events:none;letter-spacing:-.03em;line-height:1}
.cta-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(54px,7.5vw,108px);line-height:.9;letter-spacing:-.025em;position:relative;z-index:1}.cta-title em{font-style:italic;color:var(--or)}
.cta-sub{margin-top:28px;font-size:14px;color:var(--blanc-3);position:relative;z-index:1}
.cta-btns{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:56px;position:relative;z-index:1}
/* FOOTER */
footer{border-top:1px solid var(--or-dim);padding:64px;display:grid;grid-template-columns:260px 1fr 1fr;gap:40px;background:var(--noir)}
.ft-logo{margin-bottom:18px;display:block}.ft-logo img{height:30px}.ft-tagline{font-size:12px;color:var(--blanc-3);line-height:1.85}
.ft-col-title{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--or);margin-bottom:20px;font-weight:500}
.ft-links{display:flex;flex-direction:column;gap:10px}.ft-links a{font-size:12px;letter-spacing:.07em;color:var(--blanc-3);text-decoration:none;transition:color .2s}.ft-links a:hover{color:var(--or)}
.ft-contact{font-size:13px;color:var(--blanc-3);line-height:2}.ft-contact a{color:var(--blanc-2);text-decoration:none;transition:color .2s}.ft-contact a:hover{color:var(--or)}
.footer-bar{border-top:1px solid rgba(153,132,95,.08);padding:20px 64px;display:flex;justify-content:space-between;align-items:center;background:var(--noir)}
.footer-bar p{font-size:11px;color:var(--blanc-3);letter-spacing:.05em}.footer-bar span{color:var(--or)}
/* REVEALS */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s ease,transform .9s ease}.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-32px);transition:opacity .9s ease,transform .9s ease}.reveal-l.visible{opacity:1;transform:translateX(0)}
.reveal-r{opacity:0;transform:translateX(32px);transition:opacity .9s ease,transform .9s ease}.reveal-r.visible{opacity:1;transform:translateX(0)}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.stagger.visible>*:nth-child(1){opacity:1;transform:none;transition-delay:.05s}
.stagger.visible>*:nth-child(2){opacity:1;transform:none;transition-delay:.15s}
.stagger.visible>*:nth-child(3){opacity:1;transform:none;transition-delay:.25s}
.stagger.visible>*:nth-child(4){opacity:1;transform:none;transition-delay:.35s}
/* KEYFRAMES */
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* MOBILE */
@media(max-width:960px){
  #idoine-header{padding:20px 24px}#idoine-header.scrolled{padding:14px 24px}.nav-link{display:none}
  .hero-content{padding:0 24px 60px;grid-template-columns:1fr;gap:32px}
  .section-metiers{padding:80px 24px;grid-template-columns:1fr;gap:48px}.metiers-header{position:static}
  .stats-grid{grid-template-columns:1fr 1fr}.stat-item{border-right:none;border-bottom:1px solid var(--or-dim)}
  .section-real{padding:80px 24px}.real-grid{display:flex;flex-direction:column}.rc{height:260px}
  .section-process{padding:80px 24px}.process-grid{grid-template-columns:1fr 1fr}.process-step{border-right:none;border-bottom:1px solid var(--or-dim)}
  .section-histoire{padding:80px 24px;grid-template-columns:1fr}.hist-img{display:none}
  .section-map{padding:80px 24px}.section-refs{padding:60px 24px}
  .section-cta{padding:100px 24px}.cta-btns{flex-direction:column}
  footer{padding:60px 24px;grid-template-columns:1fr;gap:36px}.footer-bar{padding:20px 24px;flex-direction:column;gap:8px;text-align:center}
}