/* Axe Nord Cordée — page courte */
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800.woff2) format("woff2")}

:root{
  --red:#e30613;
  --red-dark:#b8000c;
  --night:#1b1b1b;
  --text:#f2f2ef;
  --muted:#b5b5b0;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--night);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* motif "axes" du logo, en fond */
.axis{position:fixed;pointer-events:none;opacity:.08;background:#fff}
.axis-h{left:0;right:0;top:58%;height:2px}
.axis-h::after{content:"";position:absolute;right:18px;top:-7px;border-left:16px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.axis-v{top:0;bottom:0;left:52%;width:2px}
.axis-v::after{content:"";position:absolute;top:18px;left:-7px;border-bottom:16px solid #fff;border-left:8px solid transparent;border-right:8px solid transparent}

main{flex:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,96px);width:100%;max-width:1180px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px)}

.logo{width:clamp(180px,22vw,260px);margin-bottom:clamp(32px,6vh,64px)}
h1{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.98;font-size:clamp(2.8rem,6.6vw,5.2rem);margin:0 0 20px}
h1 span{display:block;color:var(--red)}
.lede{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:30em;margin:0 0 28px}
.services{list-style:none;margin:0 0 36px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.services li{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem;border:1.5px solid rgba(255,255,255,.3);padding:6px 14px}
.call{display:inline-flex;align-items:center;gap:14px;background:var(--red);color:#fff;text-decoration:none;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:.03em;padding:14px 26px 14px 22px;transition:background .2s,transform .2s;box-shadow:0 14px 34px rgba(227,6,19,.28)}
.call:hover{background:var(--red-dark);transform:translateY(-2px)}
.call svg{width:28px;height:28px;flex:none}

/* ---------- Carte 3D ---------- */
.scene{perspective:1100px;display:flex;justify-content:center}
.card{position:relative;width:min(100%,420px);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;will-change:transform}
.card.idle{animation:float 9s ease-in-out infinite}
@keyframes float{
  0%,100%{transform:rotateX(4deg) rotateY(-10deg)}
  50%{transform:rotateX(-3deg) rotateY(9deg)}
}
.card .frame{position:absolute;inset:-22px 22px 22px -22px;border:2px solid rgba(255,255,255,.85);transform:translateZ(-50px)}
.card .shadow{position:absolute;inset:8% 6% -4% 6%;background:#000;filter:blur(36px);opacity:.55;transform:translateZ(-90px)}
.card .photo{position:relative;overflow:hidden;transform:translateZ(0)}
.card .photo img{width:100%;aspect-ratio:608/860;object-fit:cover;object-position:center 30%}
.card .glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.28),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
.card .tag{position:absolute;left:-30px;bottom:44px;background:var(--red);color:#fff;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1.05;letter-spacing:.04em;padding:14px 20px;transform:translateZ(80px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card .tag small{display:block;font-weight:700;font-size:.8rem;letter-spacing:.16em;opacity:.85}

footer{text-align:center;color:#8c8c88;font-size:.9rem;padding:18px 16px 22px}

@media (max-width:820px){
  main{grid-template-columns:1fr;text-align:left}
  .scene{order:-1;padding:22px 22px 0 22px}
  .card{width:min(100%,320px)}
  .card .photo img{aspect-ratio:4/4.4}
  .logo{margin-bottom:28px}
  .axis-v{left:auto;right:16%}
}
@media (max-width:420px){
  .call{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .card,.card.idle{animation:none;transition:none;transform:rotateX(3deg) rotateY(-8deg)}
}

/* ---------- Pied de page / mentions légales ---------- */
footer a{color:#c9c9c4;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
footer a:hover{color:#fff;border-color:var(--red)}
.legal{flex:1;width:100%;max-width:760px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px)}
.legal .back{display:inline-block;margin-bottom:28px}
.legal .back img{width:180px}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:32px}
.legal h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:1.4rem;color:var(--red);margin:36px 0 10px}
.legal p,.legal address{color:#d2d2ce;font-style:normal;margin:0 0 10px}
.legal a{color:#fff}