/* ============ Univers FOX — design system (palette du brandboard FOTS) ============ */
:root{
  --noir:#0B1A19;
  --vert:#0D1F1E;
  --vert-2:#142C2A;
  --vert-3:#1d3a37;
  --or:#C9A46B;
  --or-clair:#dcc095;
  --or-sombre:#a07f49;
  --ardoise:#8a938f;
  --ardoise-2:#5A6360;
  --ivoire:#F2EFE9;
  --ivoire-soft:#cfd3cd;
  --terracotta:#D08A6E;
  --ligne:rgba(201,164,107,.22);
  --ligne-soft:rgba(201,164,107,.12);
  --max:980px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(201,164,107,.10), transparent 58%),
    radial-gradient(900px 520px at -12% 6%, rgba(29,58,55,.55), transparent 60%),
    var(--vert);
  color:var(--ivoire);
  font-family:"Inter",system-ui,sans-serif;
  font-size:17px;
  line-height:1.66;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--or);}
.fox-mark{display:block;width:100%;height:100%;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(10px);animation:reveal .9s ease forwards;}
.reveal.d1{animation-delay:.15s;} .reveal.d2{animation-delay:.3s;}
.reveal.d3{animation-delay:.45s;} .reveal.d4{animation-delay:.6s;}
@keyframes reveal{to{opacity:1;transform:none;}}

/* ============ PORTE D'ENTRÉE (login) ============ */
.porte{min-height:100vh;display:grid;place-items:center;padding:40px 24px;}
.porte-inner{display:flex;flex-direction:column;align-items:center;text-align:center;}
.porte-mark{width:96px;height:96px;color:var(--or);margin-bottom:34px;}
.porte-mark .fox-mark path{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:foxdraw 1.5s cubic-bezier(.6,.05,.3,1) forwards;
}
.porte-mark .fox-mark path:nth-child(1){animation-delay:.1s;}
.porte-mark .fox-mark path:nth-child(2){animation-delay:.9s;}
.porte-mark .fox-mark path:nth-child(3){animation-delay:.9s;}
.porte-mark .fox-mark path:nth-child(4){animation-delay:1.1s;}
.porte-mark .fox-mark path:nth-child(5){animation-delay:1.1s;}
.porte-mark .fox-mark path:nth-child(6){animation-delay:1.3s;}
@keyframes foxdraw{to{stroke-dashoffset:0;}}
.porte-name{
  font-family:"Playfair Display",serif;font-weight:700;font-size:2.1rem;
  letter-spacing:.38em;text-indent:.38em;line-height:1;color:var(--ivoire);margin:0 0 12px;
}
.porte-sub{
  font-family:"Inter",sans-serif;font-weight:400;font-size:9.5px;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:var(--or);margin:0 0 58px;
}
.porte-form{display:flex;flex-direction:column;align-items:center;gap:26px;}
.porte-code{
  width:280px;background:transparent;border:none;border-bottom:1px solid var(--ligne);
  color:var(--ivoire);font-family:"Inter",sans-serif;font-weight:400;font-size:15px;
  letter-spacing:.32em;text-align:center;padding:10px 4px 12px;outline:none;border-radius:0;
  transition:border-color .3s ease;
}
.porte-code::placeholder{color:var(--ardoise-2);font-size:10px;letter-spacing:.3em;text-transform:uppercase;}
.porte-code:focus{border-color:var(--or);}
.porte-btn{
  font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;color:var(--or);background:transparent;border:1px solid var(--ligne);
  border-radius:999px;padding:13px 44px;cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.porte-btn:hover{background:var(--or);color:var(--vert);border-color:var(--or);}
.porte-erreur{font-size:12px;letter-spacing:.08em;color:var(--terracotta);margin:0;min-height:18px;}
.porte-pied{
  position:fixed;left:0;right:0;bottom:26px;text-align:center;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ardoise-2);
}

/* ============ BARRE DE NAVIGATION ============ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 38px;border-bottom:1px solid var(--ligne-soft);
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;}
.brand-mark{width:30px;height:30px;color:var(--or);}
.brand-name{
  font-family:"Playfair Display",serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.3em;color:var(--ivoire);
}
.topnav{display:flex;align-items:center;gap:30px;}
.topnav a,.topnav button{
  font-family:"Inter",sans-serif;font-weight:500;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ardoise);text-decoration:none;background:none;border:none;
  padding:0;cursor:pointer;transition:color .25s ease;
}
.topnav a:hover,.topnav button:hover{color:var(--or-clair);}
.topnav a.actif{color:var(--or);}
.topnav form{display:inline;}

/* ============ PAGES ============ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 30px 110px;}
.kicker{
  font-weight:500;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--or);margin:64px 0 26px;display:flex;align-items:center;gap:14px;
}
.kicker::after{content:"";flex:1;height:1px;background:var(--ligne);}
h1{
  font-family:"Playfair Display",serif;font-weight:700;
  font-size:clamp(2.1rem,4.8vw,3.2rem);line-height:1.08;letter-spacing:-.01em;
  margin:0 0 .45em;color:var(--ivoire);
}
h1 em{font-style:italic;color:var(--or-clair);font-weight:500;}
.lede{font-size:1.16rem;line-height:1.58;color:var(--ivoire-soft);max-width:62ch;margin:0 0 22px;}
.signature{font-family:"Playfair Display",serif;font-style:italic;font-weight:500;font-size:1.02rem;color:var(--or);letter-spacing:.04em;margin:0 0 8px;}

/* ---------- Tuiles (accueil) ---------- */
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
.tuile{
  position:relative;display:flex;flex-direction:column;gap:12px;min-height:240px;
  border:1px solid var(--ligne-soft);border-radius:14px;padding:30px 28px 26px;
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(13,31,30,.2));
  text-decoration:none;overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.tuile::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--or-sombre);transition:background .3s ease;}
.tuile:hover{transform:translateY(-4px);border-color:var(--ligne);}
.tuile:hover::before{background:var(--or);}
.t-num{font-weight:500;font-size:10px;letter-spacing:.24em;color:var(--or);}
.t-name{font-family:"Playfair Display",serif;font-weight:600;font-size:1.34rem;line-height:1.2;color:var(--ivoire);}
.t-desc{font-size:.93rem;line-height:1.6;color:var(--ivoire-soft);flex:1;}
.t-go{font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--or);}
.t-chip{
  position:absolute;top:24px;right:24px;font-size:9px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--or);border:1px solid var(--ligne);border-radius:20px;padding:5px 11px;
}

/* ---------- Repères (bandeau planification) ---------- */
.reperes{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--ligne-soft);border-bottom:1px solid var(--ligne-soft);
  margin:36px 0 46px;
}
.repere{padding:18px 18px 16px 0;}
.repere .rl{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:5px;font-weight:500;}
.repere .rv{font-size:.92rem;color:var(--ivoire-soft);line-height:1.45;}

/* ---------- Jalons ---------- */
.jalons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0 56px;}
.jalon{
  border:1px solid var(--ligne);border-radius:14px;padding:24px 26px;
  background:linear-gradient(165deg, rgba(201,164,107,.08), rgba(13,31,30,.25));
}
.jalon .j-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
.jalon .j-name{font-family:"Playfair Display",serif;font-weight:600;font-size:1.15rem;color:var(--or-clair);}
.jalon .j-name::before{content:"◆";font-size:.7em;margin-right:10px;color:var(--or);}
.jalon .j-date{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ardoise);}
.jalon .j-detail{font-size:.92rem;color:var(--ivoire-soft);line-height:1.6;}

/* ---------- Badges de statut ---------- */
.badge{
  font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;white-space:nowrap;
}
.badge.done{background:var(--or);color:var(--vert);}
.badge.in_progress{border:1px solid var(--or);color:var(--or);}
.badge.in_progress::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--or);margin-right:7px;vertical-align:1px;animation:pulse 1.8s ease infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.badge.upcoming{border:1px solid rgba(138,147,143,.4);color:var(--ardoise);}

/* ---------- Rail des lots ---------- */
.rail{position:relative;padding-left:64px;}
.rail::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:1px;background:var(--ligne-soft);}
.lot{position:relative;margin-bottom:34px;}
.lot-node{
  position:absolute;left:-64px;top:2px;width:43px;height:43px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:500;font-size:11.5px;letter-spacing:.05em;
  background:var(--vert);border:1px solid var(--ligne);color:var(--or);
}
.lot.done .lot-node{background:var(--or);color:var(--vert);border-color:var(--or);}
.lot.in_progress .lot-node{border-color:var(--or);box-shadow:0 0 0 5px rgba(201,164,107,.10);}
.lot.upcoming .lot-node{border-color:rgba(138,147,143,.35);color:var(--ardoise);}
.lot-card{
  border:1px solid var(--ligne-soft);border-radius:14px;padding:26px 30px 24px;
  background:linear-gradient(165deg, rgba(255,255,255,.025), rgba(13,31,30,.2));
}
.lot.in_progress .lot-card{border-color:var(--ligne);background:linear-gradient(165deg, rgba(201,164,107,.09), rgba(13,31,30,.25));}
.lot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px;}
.lot-name{font-family:"Playfair Display",serif;font-weight:600;font-size:1.3rem;line-height:1.25;color:var(--ivoire);margin:0;}
.lot.in_progress .lot-name{color:var(--or-clair);}
.lot-window{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ardoise);margin:4px 0 14px;}
.lot-pitch{font-size:.95rem;color:var(--ivoire-soft);line-height:1.62;margin:0 0 16px;}
.lot-items{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--ligne-soft);}
.lot-items li{
  display:flex;align-items:baseline;gap:12px;
  font-size:.9rem;color:var(--ivoire-soft);padding:6px 0;
}
.lot-items li::before{
  content:"";flex:none;width:7px;height:7px;transform:rotate(45deg) translateY(-1px);
  border:1px solid var(--ardoise-2);
}
.lot-items li.done::before{background:var(--or);border-color:var(--or);}
.lot-items li.in_progress::before{border-color:var(--or);}
.lot-items li.upcoming{color:var(--ardoise);}
.lot-items li .st{margin-left:auto;font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ardoise-2);white-space:nowrap;}
.lot-items li.done .st{color:var(--or-sombre);}
.lot-items li.in_progress .st{color:var(--or);}
.lot-livrable{
  margin-top:16px;padding:13px 18px;border-left:2px solid var(--or);border-radius:0 7px 7px 0;
  background:rgba(255,255,255,.025);font-size:.9rem;color:var(--ivoire-soft);
}
.lot-livrable b{color:var(--or-clair);font-weight:500;}

/* ---------- Principes ---------- */
.principes{margin:54px 0 0;padding:26px 30px;border:1px solid var(--ligne-soft);border-radius:14px;}
.principes h2{
  font-family:"Playfair Display",serif;font-weight:600;font-size:1.25rem;color:var(--or-clair);margin:0 0 14px;
}
.principes ul{list-style:none;margin:0;padding:0;}
.principes li{
  position:relative;padding:7px 0 7px 26px;font-size:.93rem;color:var(--ivoire-soft);line-height:1.6;
}
.principes li::before{content:"—";position:absolute;left:0;color:var(--or);}

/* ---------- Pied ---------- */
.pied{
  margin-top:80px;padding-top:24px;border-top:1px solid var(--ligne-soft);
  font-size:10px;letter-spacing:.06em;color:var(--ardoise);line-height:1.7;text-transform:uppercase;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .tuiles{grid-template-columns:1fr;}
  .jalons{grid-template-columns:1fr;}
  .reperes{grid-template-columns:1fr 1fr;}
  .topbar{padding:18px 22px;}
  .topnav{gap:18px;}
  .rail{padding-left:52px;}
  .rail::before{left:16px;}
  .lot-node{left:-52px;width:34px;height:34px;font-size:10px;}
}