/* ==========================================================================
   AZIMUTH — feuille de style partagée
   Design tokens tirés de la charte (charte-graphique-azimuth.pdf) et du
   handoff (design_handoff_azimuth_site/README.md).
   ========================================================================== */

:root{
  --ink:#1b1e1e;
  --paper:#f2f2f2;
  --accent:#f04a2e;
  --accent-deep:#c23a22;
  --muted:#8c9292;
  --line:#2c3131;
  --line-2:#4a5050;
  --surface:#212525;
  --font-display:'Panchang', sans-serif;
  --font-ui:'Satoshi', system-ui, sans-serif;
  --font-mono:ui-monospace, Menlo, monospace;
}

*{ box-sizing:border-box; }

html{ background:var(--ink); }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--paper); }

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}

input,textarea{ font:inherit; }

img,video{ max-width:100%; display:block; }

/* ---------- Curseur personnalisé ---------- */
*{
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2728%27%20viewBox%3D%270%200%2016%2028%27%3E%3Cpolygon%20points%3D%278%2C2%2013%2C17%208%2C26%203%2C17%27%20fill%3D%27none%27%20stroke%3D%27%231b1e1e%27%20stroke-width%3D%272.2%27%2F%3E%3Cpolygon%20points%3D%278%2C2%2013%2C17%208%2C26%203%2C17%27%20fill%3D%27none%27%20stroke%3D%27%23f2f2f2%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 8 14,auto!important;
}
button,a,button *,a *,[data-reveal-click],[data-reveal-click] *{
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2728%27%20viewBox%3D%270%200%2016%2028%27%3E%3Cpolygon%20points%3D%278%2C2%2013%2C17%208%2C26%203%2C17%27%20fill%3D%27%23f04a2e%27%20stroke%3D%27%231b1e1e%27%20stroke-width%3D%27.8%27%2F%3E%3C%2Fsvg%3E") 8 14,pointer!important;
}
input,textarea{ cursor:text!important; }

/* ---------- Header ---------- */
.az-header{
  position:fixed;
  top:0; left:0; right:0; z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 36px;
  color:var(--paper);
}
.az-header::before{
  content:'';
  position:absolute; left:0; right:0; top:0; bottom:-28px; z-index:-1;
  background:linear-gradient(to bottom, rgba(27,30,30,.82), rgba(27,30,30,.45) 55%, rgba(27,30,30,0));
  pointer-events:none;
}
.az-logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--paper);
}
.az-logo svg{ display:block; }
.az-logo span{
  font:800 15px/1 var(--font-display);
  letter-spacing:.06em;
}
.az-nav{ display:flex; gap:28px; }
.az-nav a{
  font:500 12px/1 var(--font-ui);
  letter-spacing:.16em;
  padding-bottom:5px;
  border-bottom:1px solid transparent;
  color:var(--paper);
  transition:color .2s;
}
.az-nav a:hover{ color:var(--accent); }
.az-nav a.active{ border-bottom-color:currentColor; }

/* ---------- Bouton Instagram ---------- */
.az-ig-btn{
  display:inline-flex; align-items:center; gap:10px;
  align-self:flex-start;
  padding:15px 22px;
  border:1px solid var(--line-2);
  color:var(--paper);
  font:700 12px var(--font-ui);
  letter-spacing:.18em;
  transition:border-color .2s ease, color .2s ease, transform 160ms var(--ease-out);
}
.az-ig-btn:active{ transform:scale(0.97); }
@media (hover:hover) and (pointer:fine){
  .az-ig-btn:hover{ border-color:var(--accent); color:var(--accent); }
}

/* ---------- Menu burger (téléphone) ---------- */
.az-burger{ display:none; }
.az-nav-ig{ display:none; }

@media (max-width:640px){
  .az-header{ padding:12px 18px; }
  .az-logo, .az-burger{ position:relative; z-index:2; }
  .az-logo span{ font-size:13px; }

  .az-burger{
    display:block;
    width:44px; height:44px;
    margin-right:-12px;
    transition:transform 160ms var(--ease-out);
  }
  .az-burger:active{ transform:scale(0.92); }
  .az-burger i{
    position:absolute; left:11px; right:11px; top:50%;
    height:1.5px;
    background:var(--paper);
    transition:transform 260ms var(--ease-out), background-color .2s ease;
  }
  .az-burger i:nth-child(1){ transform:translateY(-4px); }
  .az-burger i:nth-child(2){ transform:translateY(4px); }
  .az-header.open .az-burger i{ background:var(--accent); }
  .az-header.open .az-burger i:nth-child(1){ transform:rotate(45deg); }
  .az-header.open .az-burger i:nth-child(2){ transform:rotate(-45deg); }

  /* panneau plein écran */
  .az-nav{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; justify-content:center; gap:0;
    padding:90px 18px 40px;
    background:var(--ink);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 220ms var(--ease-out), visibility 0s linear 220ms;
    counter-reset:azn;
  }
  .az-header.open::before{ opacity:0; }
  .az-header.open .az-nav{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity 220ms var(--ease-out), visibility 0s;
  }
  .az-header .az-nav a{
    display:flex; align-items:baseline; gap:16px;
    background-image:none;
    padding:20px 0;
    border-top:1px solid var(--line);
    border-bottom:0;
    font:800 clamp(26px,8.4vw,36px)/1 var(--font-display);
    letter-spacing:.01em;
    opacity:0; transform:translateY(10px);
    transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out), color .2s;
  }
  .az-header .az-nav a:nth-last-child(2){ border-bottom:1px solid var(--line); }
  .az-header .az-nav a::before{
    counter-increment:azn;
    content:'0' counter(azn);
    font:500 12px var(--font-mono);
    letter-spacing:.08em;
    color:var(--accent);
  }
  .az-header .az-nav a.active{ color:var(--accent); }
  .az-header.open .az-nav a{ opacity:1; transform:none; }
  .az-header.open .az-nav a:nth-child(2){ transition-delay:40ms; }
  .az-header.open .az-nav a:nth-child(3){ transition-delay:80ms; }
  .az-header.open .az-nav a:nth-child(4){ transition-delay:120ms; }

  /* lien Instagram en bas du panneau */
  .az-header .az-nav a.az-nav-ig{
    display:inline-flex; align-items:center; gap:10px;
    align-self:flex-start;
    margin-top:28px; padding:0;
    border:0;
    font:700 12px var(--font-ui);
    letter-spacing:.18em;
    color:var(--paper);
  }
  .az-header .az-nav a.az-nav-ig::before{ content:none; }
  .az-header.open .az-nav a.az-nav-ig{ transition-delay:160ms; }
}
html.az-menu-open{ overflow:hidden; }
@media (min-width:641px){ html.az-menu-open{ overflow:auto; } }

/* ---------- Placeholder textures ---------- */
.az-placeholder{
  background:repeating-linear-gradient(135deg,#212525 0 14px,#1b1e1e 14px 28px);
}
.az-placeholder-2{
  background:repeating-linear-gradient(135deg,#262a2a 0 10px,#212525 10px 20px);
}
.az-placeholder-3{
  background:repeating-linear-gradient(135deg,#232727 0 12px,#1e2121 12px 24px);
}
.az-placeholder-light{
  background:repeating-linear-gradient(135deg,#dcdcd8 0 10px,#e8e8e5 10px 20px);
}
.az-placeholder-label{
  font:500 11px/1 var(--font-mono);
  letter-spacing:.08em;
  color:#5d6464;
}

/* ---------- Utilities ---------- */
.az-container{ max-width:1280px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}