:root{
    --text:#1b2a3a;
    --blue:#04c2fa;
    --bg:#f2f4f7;
  }

html,body{
    height:100%;
    overflow: hidden;
}

main{  display: flex;
    flex-direction: column;
}


.poster{
    margin: auto;
    font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    /* background:var(--bg); */
    color:var(--text);
    position: relative;
    width:min(900px,92vw);
    padding:40px 18px 50px;
    text-align:center;
    padding-bottom: 0px;
  }

  .kicker{
    font-size:.66rem;
    letter-spacing:.18em;
    color:#75839a;
    margin-bottom:10px;
  }

  .rows{ display:flex; flex-direction:column; gap:.35rem; }
  .row{ display:flex; gap:.6rem 1.1rem; justify-content:center; flex-wrap:wrap; padding:0 .5rem; }

  /* légère descente progressive pour rappeler la compo d’origine */
  .row:nth-child(1){ transform:translateY(2px) }
  .row:nth-child(2){ transform:translateY(4px) }
  .row:nth-child(3){ transform:translateY(6px) }
  .row:nth-child(4){ transform:translateY(8px) }
  .row:nth-child(5){ transform:translateY(10px) }
  .row:nth-child(6){ transform:translateY(12px) }

  /* liens nom */
  .name{
    font-family: "Michroma", sans-serif;
    font-weight: 500;
    font-size:clamp(.9rem, 1.3vw + .45rem, 1.25rem);
    line-height:1.1;
    color:var(--text);
    text-decoration:none;
    white-space:nowrap;
    transition:transform .18s ease, color .18s ease;
  }
  .name:hover,
  .name:focus-visible{
    transform:translateY(-2px);
    color:var(--blue);
  }
  .maxlinker:hover,
  .maxlinker:focus-visible{
    color:#ffbb00;
  }


  @media (max-width:560px){
    .rows{ gap:.25rem }
    .row{ gap:.45rem .8rem }
  }


 /* logo zs */


.logo-wrap {
    /* background-color: #1b2a3a48; */
    width: 100%;
    height: 50vh;
    position: relative;
}

.logo {
    width: 100px;
    height: 100px;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.5s ease;
    transform-origin: 0% 0%;
    position: absolute;
    cursor: pointer;
    top: 40vh;
}

.logo:hover {
    transform: scale(1.1) translate(-50%, -50%);
    transform-origin: 0% 0%;
}

.path1, .path2 {
    transition: fill 0.5s ease, transform 0.5s ease;
}

.logo:hover .path1 {
    transform: translate(7px, 7px);
    fill: #04c2fa;
}

.logo:hover .path2 {
    transform: translate(-7px, -7px);
    fill: #04c2fa;
}