/* =========================================================
   SALZMANN — e-Portfolio
   Design system partagé — toutes les pages
   Direction artistique : Brandboard SALZMANN
   Couleurs : #A5D07E (vert clair) · #4B5E2F (vert olive)
              #F3F2F1 (off-white) · #221E00 (noir profond)
   Typo : Impact (titres, navigation) + Lora (texte courant)
   Mode clair uniquement.
   ========================================================= */

/* Anton = repli web d'Impact pour les systèmes qui ne l'ont pas (Android, Linux) */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --lime:#A5D07E;
  --olive:#4B5E2F;
  --offwhite:#F3F2F1;
  --black:#221E00;

  --bg:var(--offwhite);
  --panel:#FFFFFF;
  --panel-2:#EAE7E1;
  --line:#DEDAD2;
  --ink:var(--black);
  --ink-soft:#5E5A45;
  --accent:var(--olive);
  --accent-2:var(--lime);
  --accent-ink:var(--offwhite);
  --shadow: 0 20px 60px rgba(34,30,0,.1);
  --radius: 3px;
  --ease: cubic-bezier(.16,.8,.24,1);
  --font-display:Impact, "Anton", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-body:"Lora", Georgia, "Times New Roman", serif;
  --side:0px;
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:400; letter-spacing:.01em; text-transform:uppercase; line-height:1; }
p{ margin:0; }
button{ font-family:inherit; }
::selection{ background:var(--lime); color:var(--black); }
:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.reveal{ opacity:0; }

/* ---------- Preloader : animation du logo puis morphing vers la sidebar ---------- */
html.is-intro{ overflow:hidden; }
html.is-intro:not(.intro-ready)::after{ content:""; position:fixed; inset:0; z-index:399; background:var(--offwhite); }
html.is-intro .sb-logo{ visibility:hidden; }
#intro{ position:fixed; inset:0; z-index:400; }
.intro-bg{ position:absolute; inset:0; background:var(--offwhite); }
.intro-stage{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.intro-stage > *{ grid-area:1 / 1; }
.intro-stage iframe{ max-width:92vw; height:auto; aspect-ratio:460 / 500; }
.intro-logo{ width:min(300px, 64vw); height:auto; display:block; }

/* ---------- Logo ---------- */
.brand-mark .bm-ink{ fill:var(--ink); }
.brand-mark .bm-a{ fill:var(--olive); }

/* =========================================================
   Barre latérale gauche (desktop) / barre haute (mobile)
   ========================================================= */
.sidebar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--offwhite);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--line);
}
/* Texture verte (Brandboard) en fond du header, discrète pour garder logo et nav lisibles */
.sidebar::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:url("../img/brand/texture-vert.svg") center / cover no-repeat;
  opacity:.22;
}
.sidebar > *{ position:relative; z-index:1; }
.sb-logo{ display:block; line-height:0; }
.sb-logo .brand-mark{ width:74px; height:auto; display:block; }
.sidebar .sb-nav, .sidebar .sb-cta{ display:none; }

.sb-nav a{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink); opacity:.55; display:flex; align-items:baseline; gap:5px; white-space:nowrap;
  position:relative; padding-bottom:3px; transition:opacity .2s;
}
.sb-nav a span{ font-size:.72em; color:var(--olive); }
.sb-nav a:hover, .sb-nav a.active{ opacity:1; }
.sb-nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--lime); }

/* Desktop : barre latérale étroite (même largeur qu’avant), logo un peu plus présent */
@media (min-width:821px){
  :root{ --side:128px; }
  body{ padding-left:var(--side); }
  .sidebar{
    right:auto; bottom:0; width:var(--side);
    flex-direction:column; align-items:center; justify-content:space-between;
    padding:26px 0 24px; border-bottom:none; border-right:1px solid var(--line);
  }
  .sb-logo .brand-mark{ width:92px; }
  .sidebar .sb-nav{ display:flex; flex-direction:column; align-items:center; gap:20px; }
  .sb-nav a{ font-size:15px; }
  .sidebar .sb-cta{ display:inline-flex; width:46px; height:46px; padding:0; justify-content:center; }
  .sb-cta .cta-label{ display:none; }
  .burger{ display:none !important; }
}

/* Barre de progression du scroll — sur le bord droit de la sidebar */
.scrollprog{ position:absolute; left:0; right:0; bottom:-1px; height:3px; pointer-events:none; }
.scrollprog span{ display:block; width:100%; height:100%; background:var(--lime); transform:scaleX(var(--p,0)); transform-origin:left center; }
@media (min-width:821px){
  .scrollprog{ position:fixed; left:calc(var(--side) - 2px); right:auto; top:0; bottom:0; width:3px; height:auto; }
  .scrollprog span{ transform:scaleY(var(--p,0)); transform-origin:center top; }
}

/* ---------- Boutons ---------- */
.cta{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:13px; font-weight:600;
  background:var(--lime); color:var(--black); padding:12px 22px; border-radius:999px;
  border:1px solid var(--lime); white-space:nowrap; transition:transform .25s var(--ease), background .2s, border-color .2s;
}
.cta:hover{ background:#B6DB93; border-color:var(--olive); }
.cta.ghost{ background:none; color:var(--olive); border-color:var(--olive); }
.cta.ghost:hover{ background:var(--olive); color:var(--offwhite); }
.cta.small{ padding:9px 16px; font-size:12px; }
.cta::after{ content:"→"; transition:transform .2s; }
.cta:hover::after{ transform:translateX(3px); }

/* Flèches de navigation (Accueil + Projets) */
.arrow{
  width:46px; height:46px; border-radius:50%; border:1.5px solid var(--olive); background:var(--offwhite);
  color:var(--olive); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition:background .2s, color .2s, opacity .2s, transform .25s var(--ease);
}
.arrow svg{ width:18px; height:18px; }
.arrow:hover:not(:disabled){ background:var(--olive); color:var(--offwhite); }
.arrow:active:not(:disabled){ transform:scale(.92); }
.arrow:disabled{ opacity:.28; cursor:default; }

.burger{ display:block; background:none; border:none; color:var(--ink); cursor:pointer; padding:6px; }

.mobilenav{
  position:fixed; inset:0; z-index:95; background:var(--bg); transform:translateY(-100%);
  transition:transform .45s var(--ease); display:flex; flex-direction:column; justify-content:center; padding:32px;
}
.mobilenav.open{ transform:translateY(0); }
.mobilenav a{ font-family:var(--font-display); font-size:34px; text-transform:uppercase; padding:14px 0; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:baseline; }
.mobilenav a span{ font-size:16px; color:var(--olive); }
.mobilenav .cta{ margin-top:28px; align-self:flex-start; font-family:var(--font-body); font-size:14px; text-transform:none; border-bottom:1px solid var(--lime); padding:12px 22px; }
@media (min-width:821px){ .mobilenav{ display:none; } }

/* ---------- Buttons / links generic ---------- */
.btnlink{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--accent); color:var(--accent);
  padding:13px 24px; font-size:13px; font-weight:600; border-radius:var(--radius); transition:.2s;
}
.btnlink:hover{ background:var(--accent); color:var(--accent-ink); }
.btnlink::after{ content:"→"; transition:transform .2s; }
.btnlink:hover::after{ transform:translateX(3px); }
.textlink{ font-size:13px; font-weight:600; color:var(--accent); }
.textlink::after{ content:" →"; }

/* ---------- Footer ---------- */
footer.sitefoot{ border-top:1px solid var(--line); padding:60px 0 40px; }
.foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; }
.foot-col h4{ font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:16px; }
.foot-col a{ display:block; font-size:16px; padding:5px 0; color:var(--ink); opacity:.85; }
.foot-col a:hover{ opacity:1; color:var(--accent); }
.foot-bottom{ margin-top:50px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; gap:10px;}

/* ---------- Marquee ---------- */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:22px 0; }
.marquee-track{ display:flex; width:max-content; gap:0; animation:marquee 32s linear infinite; }
.marquee-track span{ font-size:15px; font-weight:600; color:var(--ink-soft); padding:0 28px; white-space:nowrap; display:flex; align-items:center; gap:28px; }
.marquee-track span b{ color:var(--ink); font-weight:700; }
.marquee-track .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); display:inline-block; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:250; background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s; padding:40px;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:86vh; border-radius:2px; box-shadow:var(--shadow); }
.lightbox .lb-close{
  position:absolute; top:24px; right:28px; color:#fff; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; border:1px solid rgba(255,255,255,.3); padding:9px 16px; cursor:pointer; background:none;
}
.lightbox .lb-caption{ position:absolute; bottom:28px; left:0; right:0; text-align:center; color:#c8c8cc; font-size:13px; }

/* ---------- Generic section spacing ---------- */
.section{ padding:100px 0; }
@media (max-width:760px){ .section{ padding:70px 0; } }
.eyebrow{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:18px; }
.tag{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); font-weight:600; }

/* ---------- Utility ---------- */
.hidden-anchor-offset{ scroll-margin-top:100px; }
.todo{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#E8A23D; border:1px dashed #E8A23D; padding:3px 8px; border-radius:2px; background:rgba(232,162,61,.08);
}

/* =========================================================
   Bandes vert olive + texture blanche (Brandboard)
   Sections avec la photo (Accueil, À propos) + footer.
   Les variables sont redéfinies localement → texte clair sur olive.
   ========================================================= */
.band-olive, footer.sitefoot{
  position:relative; isolation:isolate; background:var(--olive); color:var(--offwhite);
  --bg:var(--olive); --panel:transparent;
  --ink:var(--offwhite); --ink-soft:rgba(243,242,241,.78); --line:rgba(243,242,241,.24);
  --accent:var(--lime); --accent-ink:var(--black);
}
.band-olive::before, footer.sitefoot::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("../img/brand/texture-blanc.svg") center / cover no-repeat;
  opacity:.55;
}
footer.sitefoot{ border-top:none; }
/* Sections avec la photo : plein écran, contenu centré verticalement */
.band-olive{ min-height:100vh; min-height:100svh; display:flex; align-items:center; }
.band-olive > .wrap{ width:100%; }
.band-olive .hero, .band-olive .ap-hero{ padding:56px 0; }
.band-olive .avatar{ border-color:transparent; }
@media (max-width:820px){ .band-olive .hero, .band-olive .ap-hero{ padding:110px 0 48px; } }