:root { --ivoire:#F4F1EA; --encre:#14161B; --laiton:#C4A05A; --gris:#8C8980; --filet:#DAD6CC; --net:cubic-bezier(.7,0,.2,1); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:auto; }
body { background:var(--ivoire); color:var(--encre); font-family:'Schibsted Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.charge { overflow:hidden; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--encre); color:var(--ivoire); }

/* Chargement : le A se trace, le compteur monte */
.chargeur { position:fixed; inset:0; z-index:100; background:var(--encre); color:var(--ivoire); display:grid; place-items:center; clip-path:inset(0 0 0 0); }
.chargeur svg { width:120px; overflow:visible; }
.chargeur line { stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; }
.chargeur .cpt { position:absolute; right:40px; bottom:28px; font-weight:800; font-size:clamp(64px,10vw,140px); letter-spacing:-.05em; font-variant-numeric:tabular-nums; line-height:.8; }
.chargeur .mq { position:absolute; left:40px; bottom:34px; font-weight:700; letter-spacing:.3em; font-size:12px; opacity:.5; }

/* Curseur */
.curseur, .anneau { position:fixed; left:0; top:0; pointer-events:none; z-index:90; border-radius:50%; mix-blend-mode:difference; }
.curseur { width:8px; height:8px; background:#fff; margin:-4px 0 0 -4px; }
.anneau { width:40px; height:40px; border:1.5px solid #fff; margin:-20px 0 0 -20px; transition:width .3s, height .3s, margin .3s; }
.anneau.gros { width:84px; height:84px; margin:-42px 0 0 -42px; }
@media (hover:none) { .curseur, .anneau { display:none; } }

/* En-tête */
header { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:26px 40px; mix-blend-mode:difference; color:#fff; }
.logo { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.18em; font-size:13px; }
.logo svg { width:26px; overflow:visible; } .logo i { font-style:normal; font-weight:500; opacity:.6; }
.lien { position:relative; font-weight:700; font-size:14px; }
.lien::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:currentColor; transform:scaleX(.25); transform-origin:left; transition:transform .45s var(--net); }
.lien:hover::after { transform:scaleX(1); }

/* Ouverture : le champ de traits */
.ouverture { position:relative; height:100vh; height:100svh; min-height:640px; overflow:hidden; }
#champ { position:absolute; inset:0; width:100%; height:100%; }
.ouverture .mots { position:absolute; left:40px; bottom:48px; }
.mot { display:block; overflow:hidden; font-weight:900; font-size:clamp(56px,9.5vw,150px); line-height:.9; letter-spacing:-.055em; padding-bottom:.04em; }
.mot .l { display:inline-block; transform:translateY(110%); }
.mot.gris { color:#B8B4AA; }
.ouverture .cote { position:absolute; right:40px; bottom:56px; width:260px; border-top:3px solid var(--encre); padding-top:10px; font-size:15px; }
.ouverture .cote .ans { font-weight:900; } .ouverture .cote .ans span { color:var(--laiton); font-variant-numeric:tabular-nums; }
.ouverture .cote small { display:flex; justify-content:space-between; margin-top:26px; font-size:12px; font-weight:700; color:var(--gris); }

/* Métiers : défilement horizontal */
.metiers { position:relative; background:var(--encre); color:var(--ivoire); overflow:hidden; }
.rail { display:flex; width:300vw; height:100vh; height:100svh; }
.panneau { width:100vw; height:100vh; height:100svh; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:0 6vw; gap:4vw; position:relative; }
.panneau .num { position:absolute; top:12vh; left:6vw; font-weight:900; font-size:14px; letter-spacing:.3em; color:var(--laiton); }
.panneau h2 { font-weight:900; font-size:clamp(64px,10vw,170px); letter-spacing:-.06em; line-height:.85; }
.panneau p { font-size:clamp(18px,1.6vw,24px); color:#A9A69E; margin-top:28px; max-width:420px; line-height:1.4; }
.panneau ul { list-style:none; margin-top:30px; max-width:420px; border-top:1px solid rgba(244,241,234,.18); }
.panneau li { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(244,241,234,.18); font-weight:700; font-size:clamp(15px,1.2vw,18px); }
.panneau li::after { content:'→'; color:var(--laiton); }
.panneau svg.fig { width:100%; max-height:62vh; overflow:visible; }
.fig .t { fill:none; stroke:var(--ivoire); stroke-width:1.2; }
.fig .or { stroke:var(--laiton); stroke-width:2.4; }
.progres { position:absolute; left:6vw; right:6vw; bottom:8vh; height:2px; background:rgba(255,255,255,.12); }
.progres i { position:absolute; inset:0; background:var(--laiton); transform-origin:left; transform:scaleX(0); }

/* Manifeste : les mots s'allument au défilement */
.manifeste { padding:26vh 40px; }
.etiquette-ans { font-size:12px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--laiton); margin-bottom:28px; display:flex; align-items:center; gap:14px; }
.etiquette-ans::before { content:''; width:36px; height:2px; background:var(--laiton); }
.manifeste p { font-weight:800; font-size:clamp(40px,6.4vw,104px); line-height:1; letter-spacing:-.045em; max-width:1300px; }
.manifeste .w { color:#D6D2C8; transition:color .2s; }
.manifeste .w.on { color:var(--encre); }
.manifeste .w.or.on { color:var(--laiton); }

/* Contact */
.contact { display:grid; grid-template-columns:1fr 1fr; gap:6vw; padding:14vh 40px 18vh; border-top:1px solid var(--filet); }
.contact h2 { font-weight:900; font-size:clamp(56px,8vw,128px); letter-spacing:-.055em; line-height:.88; }
.contact h2 span { color:var(--laiton); }
.contact .note { margin-top:30px; color:var(--gris); max-width:340px; font-size:15px; line-height:1.5; }
form { display:grid; grid-template-columns:1fr 1fr; column-gap:28px; row-gap:34px; align-content:start; }
.f { position:relative; }
.f.plein { grid-column:1 / -1; }
.f input, .f textarea { width:100%; font:inherit; font-size:20px; border:0; border-bottom:1.5px solid var(--encre); background:transparent; padding:22px 0 10px; outline:none; color:var(--encre); resize:none; }
.f textarea { height:130px; }
.f label { position:absolute; left:0; top:22px; font-size:20px; color:var(--gris); pointer-events:none; transition:all .35s var(--net); }
.f input:focus + label, .f input:not(:placeholder-shown) + label, .f textarea:focus + label, .f textarea:not(:placeholder-shown) + label { top:0; font-size:12px; font-weight:700; color:var(--encre); }
.f label em { font-style:normal; color:#B5B1A7; font-size:.8em; }
.f.erreur input, .f.erreur textarea { border-bottom-color:#B3261E; }
.f::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--laiton); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--net); }
.f:focus-within::after { transform:scaleX(1); }
.envoyer { grid-column:1 / -1; justify-self:start; position:relative; overflow:hidden; font:inherit; font-weight:800; font-size:17px; height:64px; padding:0 34px; border:0; background:var(--encre); color:var(--ivoire); cursor:pointer; display:flex; align-items:center; gap:40px; }
.envoyer::before { content:''; position:absolute; inset:0; background:var(--laiton); transform:translateY(101%); transition:transform .45s var(--net); }
.envoyer:hover::before { transform:none; } .envoyer:hover { color:var(--encre); }
.envoyer span { position:relative; }
.piege { position:absolute; left:-9999px; }
.merci { grid-column:1 / -1; font-weight:800; font-size:28px; letter-spacing:-.02em; display:none; }

/* Pied : bandeau */
footer { background:var(--encre); color:var(--ivoire); overflow:hidden; padding:6vh 0 3vh; }
.bandeau { display:flex; white-space:nowrap; font-weight:900; font-size:clamp(60px,11vw,180px); letter-spacing:-.05em; line-height:1; }
.bandeau span { padding-right:.4em; -webkit-text-stroke:1.5px var(--ivoire); color:transparent; }
.bandeau span:nth-child(3n+2) { color:var(--ivoire); -webkit-text-stroke:0; }
footer .bas { display:flex; justify-content:space-between; padding:4vh 40px 0; font-size:13px; color:#8C8980; }

@media (max-width:820px) {
  .etiquette-ans { letter-spacing:.16em; font-size:11px; }
  .panneau ul { margin-top:18px; } .panneau li { padding:9px 0; } .panneau p { margin-top:14px; font-size:16px; } .panneau h2 { font-size:clamp(52px,15vw,80px); }
  header { padding:20px; } .ouverture .mots { left:20px; bottom:150px; } .ouverture .cote { left:20px; right:auto; bottom:36px; }
  .panneau { grid-template-columns:1fr; padding:11vh 7vw 0; align-content:start; gap:2vh; } .panneau svg.fig { max-height:22vh; } .panneau .num { top:6.5vh; left:7vw; }
  .manifeste { padding:16vh 20px; } .contact { grid-template-columns:1fr; padding:12vh 20px; } form { grid-template-columns:1fr; } footer .bas { padding:4vh 20px 0; }
}
@media (prefers-reduced-motion:reduce) { .mot .l { transform:none; } }

.merci.echec { color:#B3261E; font-size:17px; font-weight:700; }
.envoyer:disabled { opacity:.6; cursor:wait; }
footer .bas a { border-bottom:1px solid currentColor; }