/* ============================================================
   LBDC Organisation — Design system
   Teal #14363F + Gold #C9AC6A · Fraunces (titres) / Inter (texte)
   ============================================================ */
:root{
  --teal:#14363F;
  --teal-d:#0E272D;
  --gold:#C9AC6A;
  --gold-d:#B7975B;
  --paper:#ffffff;
  --mist:#F2F6F4;
  --soft:#E3EAEC;
  --ink:#1F1F1F;
  --muted:#5A6B6E;
  --line:#E6ECEC;
  --maxw:1200px;
  --pad:clamp(20px,5vw,120px);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:var(--teal);font-weight:700;line-height:1.1;letter-spacing:-.5px}
h1{font-size:clamp(34px,5vw,60px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(20px,2.2vw,28px)}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:clamp(56px,8vw,100px) 0}
.eyebrow{color:var(--gold);font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;display:block;margin-bottom:12px}
.gold-rule{width:48px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:22px}
.lead{font-size:clamp(16px,1.4vw,19px);color:var(--muted);max-width:620px}
.center{text-align:center}
.center .lead,.center .gold-rule{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:14px 24px;font-weight:600;font-size:15px;cursor:pointer;border:1.5px solid transparent;transition:.15s}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:#0f2b32}
.btn-outline{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn-outline:hover{background:var(--teal);color:#fff}
.btn-light{background:#fff;color:var(--teal)}
.btn-gold{background:var(--gold);color:var(--teal-d)}
.btn-gold:hover{background:var(--gold-d)}
.link-arrow{color:var(--teal);font-weight:600;display:inline-flex;gap:6px}
.link-arrow .ar{color:var(--gold)}
.on-teal .link-arrow{color:#fff}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:18px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px}
.nav-links a:hover{color:var(--teal)}
.nav-links a.active{color:var(--teal);font-weight:600}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{font-size:13px;color:var(--muted)}
.nav-cta{display:flex;gap:10px}
.nav-cta .btn{padding:9px 16px;font-size:14px}
.nav-toggle{display:none;background:none;border:0;font-size:24px;color:var(--teal);cursor:pointer}

/* Logo (demi-roue + wordmark) */
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{width:54px;height:30px;flex-shrink:0}
.logo .mark .arc{fill:none;stroke:var(--teal);stroke-width:2.2}
.logo .mark .ray{stroke:var(--gold);stroke-width:1.5}
.logo .mark .hub{fill:var(--gold)}
.logo .word{font-family:'Fraunces',serif;font-weight:700;font-size:20px;color:var(--teal);letter-spacing:-.3px}
.logo--light .word{color:#fff}
.logo--light .mark .arc{stroke:#fff}

/* Hero */
.hero-teal{background:var(--teal);color:#fff}
.hero-teal h1{color:#fff}
.hero-teal .lead{color:#C7D2D4}
.hero-teal .eyebrow{color:var(--gold)}
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}
.hero-teal .btn-outline,.band-teal .btn-outline{color:#fff;border-color:#fff}
.hero-teal .btn-outline:hover,.band-teal .btn-outline:hover{background:#fff;color:var(--teal)}
.ph-note{font-size:12px;color:#C7D2D4;margin-top:14px;opacity:.85}

/* Stats */
.stats{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.stat .num{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(34px,4vw,48px);color:var(--teal)}
.on-teal .stat .num{color:#fff}
.stat .lbl{color:var(--muted);font-size:14px}
.on-teal .stat .lbl{color:#C7D2D4}
.center .stats .stat{text-align:center}
.team .member{text-align:center}
.worldwrap{position:relative;width:100%}
.worldwrap .pings span{position:absolute;width:12px;height:12px;border-radius:50%;background:#C9AC6A;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(201,172,106,.22)}
.team .member .name{margin-top:4px}
.team .member .role{margin-top:4px;line-height:1.45}

/* Cards / brands */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid-2-7{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.05);overflow:hidden}
.card .body{padding:28px}
.card h3{margin-bottom:8px}
.brand-visual{position:relative;height:230px;display:flex;align-items:center;justify-content:center}
.brand-pastille{position:absolute;left:20px;bottom:20px;width:72px;height:72px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}

/* Bands */
.band-teal{background:var(--teal);color:#fff}
.band-teal h2{color:#fff}
.band-teal .lead{color:#C7D2D4}
.band-teal .eyebrow{color:var(--gold)}
.cta-band{text-align:center}
.cta-band .btn{margin-top:22px}

/* Features grid */
.features{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.feature h3{font-size:21px;margin:14px 0 6px}

/* Phone mockup */
.phone{width:280px;height:560px;background:var(--teal);border-radius:42px;padding:15px;margin:0 auto;flex-shrink:0}
.phone .screen{width:100%;height:100%;background:var(--soft);border-radius:30px;display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:13px}

/* Experiences / timeline / team */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.timeline{display:grid;gap:18px;margin-top:24px}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.tl-item .yr{font-family:'Fraunces',serif;font-weight:700;color:var(--teal)}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:30px}
.member .ph{height:200px;border-radius:var(--radius);margin-bottom:12px}
.member .name{font-weight:600;color:var(--teal)}
.member .role{font-size:13px;color:var(--muted)}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.quote p{color:var(--ink);font-size:16px}
.quote .who{margin-top:14px;font-size:13px;color:var(--muted)}

/* Forms */
.form{display:grid;gap:16px;max-width:640px}
.form.wide{max-width:100%}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--teal)}
.field input,.field textarea,.field select{font:inherit;padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.segmented{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.seg{padding:10px 16px;border:1.4px solid var(--line);border-radius:999px;font-size:14px;cursor:pointer;background:#fff}
.seg.active{border-color:var(--teal);background:var(--teal);color:#fff}
.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
.info-block{display:grid;gap:18px}
.socials{display:flex;gap:14px;color:var(--gold);font-weight:600}

/* Newsletter inline */
.nl{display:flex;gap:10px;flex-wrap:wrap}
.nl input{padding:12px 14px;border:1px solid var(--line);border-radius:8px;min-width:200px}

/* Placeholders (à remplacer par les vraies images) */
.ph{background:var(--soft);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:var(--radius);text-align:center;padding:10px}
.on-teal .ph{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#C7D2D4}
.ph-16x9{aspect-ratio:16/9}
.ph-1x1{aspect-ratio:1/1}
.ph-4x3{aspect-ratio:4/3}
.ph-wide{height:200px}
.ph-tall{height:440px}
.brand-visual.ph{height:230px}

/* Footer */
.site-footer{background:var(--teal-d);color:#C7D2D4;padding:72px 0 28px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px}
.footer-top h4{color:var(--gold);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;font-weight:700}
.footer-top a{display:block;margin-bottom:10px;font-size:14px}
.footer-top a:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.foot-brand p{color:#C7D2D4;font-size:14px;margin:12px 0}
.foot-social{color:var(--gold);font-weight:600;font-size:14px}

/* Responsive */
@media(max-width:900px){
  .hero-split,.grid-2,.grid-2-7,.features,.contact-grid{grid-template-columns:1fr}
  .grid-3,.team{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .nav-links,.nav-right .lang{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:#fff;padding:20px var(--pad);border-bottom:1px solid var(--line);gap:16px}
  .tl-item{grid-template-columns:80px 1fr}
}
@media(max-width:560px){
  .grid-3,.team,.gallery,.footer-top{grid-template-columns:1fr}
  .nav-cta .btn{padding:8px 12px}
  .phone{width:240px;height:480px}
}

/* Experiences slider */
.slider{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;margin-top:30px;-webkit-overflow-scrolling:touch}
.slider::-webkit-scrollbar{height:8px}
.slider::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.slider .card{flex:0 0 320px;scroll-snap-align:start}
.exp-meta{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
/* Rating */
.rating{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.stars{color:var(--gold);font-size:20px;letter-spacing:3px}
.rating .r-txt{color:var(--muted);font-size:14px}
/* Testimonials marquee */
.tmarquee{overflow:hidden;margin-top:30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ttrack{display:flex;gap:20px;width:max-content;animation:tscroll 70s linear infinite}
.tmarquee:hover .ttrack{animation-play-state:paused}
.tcard{flex:0 0 360px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.tcard p{color:var(--ink);font-size:15px;line-height:1.55}
.tcard .qstars{color:var(--gold);font-size:14px;letter-spacing:1px;margin-bottom:10px}
.tcard .who{margin-top:14px;font-weight:600;color:var(--teal);font-size:14px}
.tcard .who span{display:block;color:var(--muted);font-weight:400;font-size:12px}
@keyframes tscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Social row + Instagram banner */
.social-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.social-row a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1.4px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;color:var(--teal)}
.social-row a:hover{border-color:var(--teal)}
.ig-banner{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 20px 10px 12px;margin-top:18px;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.ig-banner .ig-dot{width:36px;height:36px;border-radius:11px;background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);flex-shrink:0}
.ig-banner b{color:var(--teal);font-size:15px}
.ig-banner .ig-f{color:var(--muted);font-size:13px;display:block}
@media(max-width:560px){.slider .card{flex-basis:80vw}.tcard{flex-basis:80vw}}

/* Images */
.brand-visual{background-size:cover;background-position:center}
.brand-pastille img{max-width:80%;max-height:80%;object-fit:contain;display:block}
.hero-photo{width:100%;border-radius:22px;display:block;box-shadow:0 16px 40px rgba(0,0,0,.18)}
.media-tall{width:100%;height:440px;object-fit:cover;border-radius:var(--radius);display:block}
/* Social counters */
.social-count{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.social-count a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 24px;border:1.4px solid var(--line);border-radius:14px;min-width:120px}
.social-count a:hover{border-color:var(--teal)}
.social-count .net{font-size:13px;font-weight:600;color:var(--muted)}
.social-count .cnt{font-size:22px;font-weight:700;font-family:'Fraunces',serif;color:var(--teal)}
/* Photo marquee */
.photomarquee{overflow:hidden;margin-top:34px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.phototrack{display:flex;gap:14px;width:max-content;animation:tscroll 48s linear infinite}
/* iPhone mockup */
.iphone{width:280px;margin:0 auto;background:#0d0d0f;border-radius:44px;padding:12px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.iphone .scr{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:9/19.5;background:#F4A23B;display:flex;align-items:center;justify-content:center}
.iphone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:22px;background:#0d0d0f;border-radius:0 0 16px 16px;z-index:2}
.iphone .scr img{width:74%;height:auto}
/* Store badges */
.stores{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border-radius:11px;padding:9px 16px;text-decoration:none;border:1px solid #000}
.store-badge svg{width:22px;height:22px;flex-shrink:0}
.store-badge .sb-s{font-size:10px;display:block;line-height:1.1;opacity:.85}
.store-badge .sb-b{font-size:16px;font-weight:600;line-height:1.2;color:#fff}
.photomarquee:hover .phototrack{animation-play-state:paused}
.phototrack img{height:210px;width:auto;border-radius:12px;display:block;object-fit:cover}
@media(max-width:560px){.phototrack img{height:150px}.media-tall{height:300px}}