/* ==========================================================================
   L'Atelier — common.css
   Styles globaux : variables, typo, containers, topbar, nav, footer, to-top.
   Chargé par toutes les pages du site.
   ========================================================================== */

:root{
  --ink:#0f0e0c;
  --ink-2:#181612;
  --ink-3:#22201b;
  --cream:#f2ebdc;
  --cream-2:#e7ddc6;
  --paper:#ebe2cd;
  --olive:#3b4a31;
  --olive-2:#4e5f42;
  --moss:#596b4c;
  --cocoa:#3a261a;
  --cocoa-2:#2a1810;
  --gold:#c89a4f;
  --gold-soft:#d8b578;
  --gold-deep:#9d7538;
  --line:rgba(242,235,220,.12);
  --line-dark:rgba(15,14,12,.12);
  --pistachio:#8a9a5b;
  --hazelnut:#8b5a3c;
  --peanut:#c89a4f;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Playfair Display',serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Playfair Display',serif;
  font-weight:400;letter-spacing:-.02em;line-height:1.02;color:var(--ink);
}
.mono{font-family:'Playfair Display',serif;font-feature-settings:'ss01';letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none}
img{max-width:100%;display:block}

.container{max-width:1440px;margin:0 auto;padding:0 40px}
.wide{max-width:1600px;margin:0 auto;padding:0 40px}

/* ---------- TOP BAR / TICKER ---------- */
.topbar{
  background:var(--ink);color:var(--cream);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 0;overflow:hidden;position:relative;
  border-bottom:1px solid var(--line);
}
.ticker{display:flex;white-space:nowrap;animation:ticker 45s linear infinite;gap:60px}
.ticker span{display:inline-flex;align-items:center;gap:60px}
.ticker span::after{content:'◆';color:var(--gold);font-size:10px}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- NAV ---------- */
nav{
  position:sticky;top:0;z-index:90;
  background:var(--cream);
  border-bottom:1px solid var(--line-dark);
  transition:background .3s;
}
.nav-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px 40px;gap:40px;
}
.nav-left{display:flex;gap:24px;align-items:center;flex-wrap:nowrap}
.nav-right{display:flex;justify-content:flex-end;gap:22px;align-items:center;flex-wrap:nowrap}
.nav-left a,.nav-right a{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:500;color:var(--ink);position:relative;padding:4px 0;
  white-space:nowrap;
}
.nav-left a::after,.nav-right a::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;
  background:var(--ink);transform-origin:right;transform:scaleX(0);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.nav-left a:hover::after,.nav-right a:hover::after{transform-origin:left;transform:scaleX(1)}
.nav-logo{
  display:flex;flex-direction:column;align-items:center;
  color:var(--ink);line-height:1;text-decoration:none;
}
.nav-logo .mark{
  font-family:'Playfair Display',serif;font-size:28px;font-weight:500;
  letter-spacing:-.02em;line-height:1;
  display:flex;align-items:baseline;gap:3px;
}
.nav-logo .serif-i{font-style:italic;color:var(--gold-deep)}
.nav-logo .dot{width:5px;height:5px;background:var(--gold);border-radius:50%;display:inline-block}
.nav-logo .tagline{
  font-family:'Playfair Display',serif;font-size:10px;font-style:italic;
  color:var(--gold-deep);margin-top:5px;letter-spacing:.04em;
  font-weight:400;
}
.nav-cta{
  padding:15px 26px 14px!important;background:var(--ink)!important;
  color:var(--cream)!important;
  border:1px solid var(--ink)!important;border-radius:2px!important;
  font-family:'Playfair Display',serif!important;
  font-style:normal!important;
  font-size:11px!important;font-weight:500!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  display:inline-flex!important;align-items:center!important;
  transition:background .3s,border-color .3s;
  line-height:1;
}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--cocoa)!important;border-color:var(--cocoa)!important}
.menu-toggle{
  display:none;background:none;border:1px solid var(--ink);
  padding:10px 14px;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;cursor:pointer;
}
.mobile-menu{
  position:fixed;inset:0;background:var(--ink);color:var(--cream);
  z-index:200;padding:100px 40px;display:none;flex-direction:column;gap:24px;
}
.mobile-menu.open{display:flex}
.mobile-close{
  position:absolute;top:28px;right:40px;background:none;
  border:1px solid var(--cream);color:var(--cream);
  padding:10px 18px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;
}
.mobile-menu a{font-family:'Playfair Display',serif;font-size:38px;color:var(--cream)}
@media(max-width:1000px){
  .nav-inner{grid-template-columns:auto 1fr auto}
  .nav-left,.nav-right{display:none}
  .nav-logo{order:1}
  .menu-toggle{display:block;order:2;justify-self:end}
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--ink);color:var(--cream);
  padding:80px 0 40px;border-top:1px solid var(--line);
}
.foot-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;
  margin-bottom:60px;padding-bottom:60px;border-bottom:1px solid var(--line);
}
.foot-logo{
  font-family:'Playfair Display',serif;font-size:60px;line-height:.9;
  color:var(--cream);font-weight:300;margin-bottom:8px;display:block;
  text-decoration:none;
}
.foot-logo em{font-style:italic;color:var(--gold-soft)}
.foot-subname{
  font-family:'Playfair Display',serif;font-style:italic;font-size:18px;
  color:var(--gold-soft);margin-bottom:22px;letter-spacing:.02em;
}
.foot-tag{
  font-family:'Playfair Display',serif;font-size:11px;
  color:var(--gold-soft);letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:20px;
}
.foot-brand p{
  font-family:'Playfair Display',serif;font-size:16px;line-height:1.6;
  color:rgba(242,235,220,.65);font-weight:300;font-style:italic;max-width:340px;
}
.foot-col h4{
  font-family:'Playfair Display',serif;font-size:10px;
  color:var(--gold-soft);letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;margin-bottom:26px;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot-col a{
  font-family:'Playfair Display',serif;font-size:18px;color:rgba(242,235,220,.8);
  font-weight:300;transition:color .3s;
}
.foot-col a:hover{color:var(--gold-soft)}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  font-family:'Playfair Display',serif;font-size:11px;
  color:rgba(242,235,220,.45);letter-spacing:.1em;
}
.foot-bottom .devise{
  font-family:'Playfair Display',serif;font-style:italic;font-size:14px;
  color:var(--gold-soft);letter-spacing:0;text-transform:none;
}
@media(max-width:1000px){
  .foot-top{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:600px){
  .foot-top{grid-template-columns:1fr;gap:24px;margin-bottom:30px;padding-bottom:30px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-logo{font-size:40px}
  .foot-subname{font-size:14px;margin-bottom:14px}
  .foot-tag{margin-bottom:14px;font-size:10px}
  .foot-brand p{font-size:14px}
  .foot-col h4{margin-bottom:14px}
  .foot-col a{font-size:15px}
  .foot-col ul{gap:8px}
  footer{padding:50px 0 24px}
}

/* ---------- BACK TO TOP ---------- */
.to-top{
  position:fixed;bottom:32px;right:32px;z-index:85;
  width:54px;height:54px;border-radius:50%;
  background:var(--ink);color:var(--gold-soft);
  border:1px solid var(--gold-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:22px;font-style:italic;
  opacity:0;pointer-events:none;transform:translateY(20px);
  transition:opacity .4s cubic-bezier(.2,.8,.2,1),
             transform .4s cubic-bezier(.2,.8,.2,1),
             background .3s, color .3s;
  box-shadow:0 12px 30px -10px rgba(58,36,26,.45);
  cursor:pointer;
}
.to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{background:var(--gold);color:var(--ink);transform:translateY(-4px)}
.to-top .arr{
  display:inline-block;transform:translateY(-1px);
  transition:transform .3s;font-style:normal;
}
.to-top:hover .arr{transform:translateY(-4px)}
@media(max-width:700px){
  .to-top{bottom:22px;right:22px;width:46px;height:46px;font-size:18px}
}

/* ---------- MOBILE GLOBAL ---------- */
@media(max-width:600px){
  .wide,.container{padding:0 18px}
  .topbar{font-size:9px}
  .mobile-menu{padding:80px 24px;gap:18px}
  .mobile-menu a{font-size:26px}
  .mobile-close{top:20px;right:24px;font-size:10px}
}
@media(max-width:380px){
  .wide,.container{padding:0 14px}
  .foot-logo{font-size:34px}
}