:root{
    --slate:#3a4455;          
    --slate-deep:#333c4b;     
    --white:#ffffff;          
    --mist:rgba(255,255,255,.60);
    --mist-soft:rgba(255,255,255,.40);
    --hair:rgba(255,255,255,.16);
    --ember:#E74310;          
    --cream:#e9dcc4;          
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html,body{height:100%;}

  body{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.045), transparent 60%),
      linear-gradient(180deg, var(--slate) 60%, var(--slate-deep) 100%);
    color:var(--white);
    font-family:"Inter", system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow:hidden;
    position:relative;
    padding:clamp(24px,6vw,64px);
  }

  /* ---- Signature : carte topographique (courbes de niveau) ---- */
  .topo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0;
    opacity:0;
    animation:topoIn 2s cubic-bezier(.16,1,.3,1) .1s forwards;
  }
  .topo g{
    fill:none;
    stroke:var(--cream);
    stroke-linejoin:round;
    stroke-linecap:round;
  }
  .topo .c-normal{stroke-width:1;stroke-opacity:.08;vector-effect:non-scaling-stroke;}
  .topo .c-index{stroke-width:1.7;stroke-opacity:.12;vector-effect:non-scaling-stroke;}

  /* ---- Contenu ---- */
  .stack{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    max-width:640px;
  }
  .stack > *{
    opacity:0;
    transform:translateY(14px);
    animation:rise .9s cubic-bezier(.16,1,.3,1) forwards;
  }
  .eyebrow{animation-delay:.15s;}
  .logo{animation-delay:.28s;}
  .activities{animation-delay:.42s;}
  .rule{animation-delay:.52s;}
  .place{animation-delay:.60s;}
  .contact{animation-delay:.68s;}

  .eyebrow{
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:300;
    font-size:clamp(11px,1.4vw,12.5px);
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--mist);
    margin-bottom:clamp(26px,5vw,40px);
  }

  /* ---- Logo ---- */
  .logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:clamp(30px,5vw,44px);
  }
  
  .logo .mark{
    width:clamp(160px,30vw,260px);
    aspect-ratio:1 / 1;     
    height:auto;
    display:block;
    object-fit:contain;
    transition:transform .5s cubic-bezier(.16,1,.3,1),
               filter .5s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .logo:hover .mark,
  .logo:focus-visible .mark{
    transform:translateY(-8px) scale(1.08) rotate(-2deg);
    filter:drop-shadow(0 16px 30px rgba(0,0,0,.35));
  }

  @media (prefers-reduced-motion: reduce){
    .logo .mark{transition:none;}
    .logo:hover .mark,
    .logo:focus-visible .mark{transform:none;filter:none;}
  }

  /* ---- Activités ---- */
  .activities{
    display:flex;
    flex-direction:column;
    gap:.55em;
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:500;
    font-size:clamp(15px,2.4vw,21px);
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .activities .sep{
    color:var(--ember);
    margin:0 .5em;
    font-weight:600;
  }

  .rule{
    width:clamp(48px,8vw,72px);
    height:1px;
    background:var(--hair);
    margin:clamp(26px,4.5vw,36px) 0 clamp(22px,4vw,30px);
  }

  .place{
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:300;
    font-size:clamp(14px,2vw,16px);
    color:var(--mist);
    letter-spacing:.01em;
    line-height:1.5;
  }

  .contact{
    margin-top:clamp(16px,3vw,22px);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(14px,3vw,30px);
  }
  .link{
    display:inline-flex;
    align-items:center;
    gap:.55em;
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:600;
    font-size:clamp(15px,2.4vw,20px);
    letter-spacing:.03em;
    color:var(--white);
    text-decoration:none;
    position:relative;
    padding-bottom:3px;
  }
  .link svg{
    width:1.15em;
    height:1.15em;
    flex:none;
    stroke:var(--ember);
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .link::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:1.5px;
    background:var(--ember);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .4s cubic-bezier(.16,1,.3,1);
  }
  .link:hover::after,
  .link:focus-visible::after{transform:scaleX(1);}
  .link:focus-visible{
    outline:2px solid var(--ember);
    outline-offset:6px;
    border-radius:4px;
  }

  @keyframes rise{to{opacity:1;transform:none;}}
  @keyframes topoIn{to{opacity:1;}}

  @media (prefers-reduced-motion: reduce){
    .stack > *,.topo{animation-duration:.01ms;animation-delay:0s;opacity:1;transform:none;}
    .topo{opacity:1;}
  }