:root{
  --header:74px;
  --footer:54px;

  --green:#b9e56b;
  --cream:#fff8e8;
  --ink:#f7f4e8;
  --dark:#071a1d;

  --ease:cubic-bezier(.76,0,.18,1);
}

/* =========================================================
   BASE
   ========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;

  background:#071a1d;
  color:var(--ink);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body{
  letter-spacing:.02em;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font-family:inherit;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;

  z-index:50;

  height:var(--header);

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 42px;

  background:rgba(5,19,22,.72);

  backdrop-filter:blur(13px);

  border-bottom:1px solid rgba(255,255,255,.14);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;

  font-weight:900;
}

.brand-mark{
  color:var(--green);
  font-size:30px;
  line-height:1;
}

.brand-text{
  font-size:19px;
  letter-spacing:.07em;
}

.brand-text b{
  color:var(--green);
}

.main-nav{
  display:flex;
  gap:34px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}

.main-nav a{
  opacity:.82;
  transition:.2s ease;
}

.main-nav a:hover{
  opacity:1;
  color:var(--green);
}

.languages{
  display:flex;
  gap:9px;

  font-size:11px;
  font-weight:800;
}

.languages a{
  opacity:.55;
}

.languages .active{
  opacity:1;
  color:var(--green);
}


/* =========================================================
   VIEWPORT / PANELS
   ========================================================= */

#viewport{
  position:relative;

  width:100vw;
  height:100vh;
}

.panel{
  position:absolute;

  inset:0;

  visibility:hidden;
  opacity:0;

  transform:translateY(100%);

  overflow:hidden;

  padding:
    var(--header)
    9vw
    var(--footer);

  display:flex;
  align-items:center;
}

.panel.active{
  visibility:visible;
  opacity:1;

  transform:translateY(0);
}

/* Animations */

.panel.enter-up{
  animation:enterUp .52s var(--ease) both;
}

.panel.leave-up{
  animation:leaveUp .52s var(--ease) both;
}

.panel.enter-down{
  animation:enterDown .52s var(--ease) both;
}

.panel.leave-down{
  animation:leaveDown .52s var(--ease) both;
}

.panel.jump-in{
  animation:jumpIn .48s var(--ease) both;
}

@keyframes enterUp{
  from{
    transform:translateY(100%);
    opacity:.4;
  }

  to{
    transform:translateY(0);
    opacity:1;
  }
}

@keyframes leaveUp{
  from{
    transform:translateY(0);
    opacity:1;
  }

  to{
    transform:translateY(-100%);
    opacity:.2;
  }
}

@keyframes enterDown{
  from{
    transform:translateY(-100%);
    opacity:.4;
  }

  to{
    transform:translateY(0);
    opacity:1;
  }
}

@keyframes leaveDown{
  from{
    transform:translateY(0);
    opacity:1;
  }

  to{
    transform:translateY(100%);
    opacity:.2;
  }
}

@keyframes jumpIn{
  from{
    transform:translateX(100%);
    opacity:.35;
  }

  to{
    transform:translateX(0);
    opacity:1;
  }
}


/* =========================================================
   TYPOGRAPHIE COMMUNE
   ========================================================= */

.eyebrow{
  margin:0 0 5px;

  font-size:11px;
  font-weight:900;

  letter-spacing:.24em;

  opacity:.9;

  text-shadow:0 2px 7px rgba(0,0,0,.22);
}

h1,
h2{
  margin:0;

  font-weight:950;
  line-height:.86;

  letter-spacing:-.055em;
}

h1 span,
h2 span{
  color:var(--green);
}


/* =========================================================
   HERO / ACCUEIL
   ========================================================= */

.hero{
  background:#4eb6df;
}

.hero-scene{
  position:absolute;

  inset:
    var(--header)
    0
    var(--footer);

  background-image:
    url("../assets/images/hero/clover-island-surface-scene.png");

  background-size:cover;
  background-position:center;

  transform:scale(1.01);
}

.hero-vignette{
  position:absolute;

  inset:
    var(--header)
    0
    var(--footer);

  background:
    linear-gradient(
      90deg,
      rgba(4,24,24,.30),
      transparent 55%
    ),
    linear-gradient(
      0deg,
      rgba(3,16,18,.28),
      transparent 28%
    );
}

.hero-copy{
  position:relative;
  z-index:4;

  width:min(560px,42vw);

  margin-left:15vw;
  margin-top:-12vh;
}

.hero-copy h1{
  font-size:clamp(70px,8.6vw,135px);

  text-shadow:
    0 4px 0 rgba(8,29,31,.10);
}

.hero-copy .eyebrow{
  margin-top:17px;
  margin-bottom:0;
}

.hero-copy > p{
  margin:22px 0 25px;

  font-size:15px;
  line-height:1.7;

  font-weight:800;

  letter-spacing:.2em;

  text-shadow:0 2px 8px rgba(0,0,0,.28);
}


/* =========================================================
   CTA
   ========================================================= */

.cta{
  border:0;

  background:#f5bf38;
  color:#15201b;

  border-radius:12px;

  padding:17px 24px;

  font-size:11px;
  font-weight:950;
  letter-spacing:.11em;

  box-shadow:
    0 6px 0 #bc861d,
    0 12px 30px rgba(0,0,0,.18);

  cursor:pointer;

  transition:.2s ease;
}

.cta:hover{
  transform:translateY(-3px);

  box-shadow:
    0 9px 0 #bc861d,
    0 17px 32px rgba(0,0,0,.2);
}

.cta span{
  margin-left:24px;
  font-size:17px;
}


/* =========================================================
   SCROLL CUE
   ========================================================= */

.scroll-cue{
  position:absolute;

  z-index:4;

  bottom:calc(var(--footer) + 18px);
  left:50%;

  transform:translateX(-50%);

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;

  text-align:center;

  text-shadow:0 2px 6px #123;
}

.scroll-cue .mouse{
  font-size:29px;
}

.scroll-cue small{
  font-size:8px;
  letter-spacing:.22em;
  font-weight:800;
}

.scroll-cue b{
  font-size:15px;

  animation:bob 1.3s infinite;
}

@keyframes bob{
  50%{
    transform:translateY(5px);
  }
}


/* =========================================================
   BLOCS SECONDAIRES
   ========================================================= */

.placeholder{
  background:
    linear-gradient(
      120deg,
      #244935,
      #759761
    );
}

.placeholder.dark{
  background:
    radial-gradient(
      circle at 70% 45%,
      #314b3a,
      #07100e 70%
    );
}

.placeholder.warm{
  background:
    linear-gradient(
      120deg,
      #32271d,
      #8c6438
    );
}

.placeholder.blue{
  background:
    linear-gradient(
      120deg,
      #173340,
      #47768b
    );
}

.placeholder.market{
  background:
    linear-gradient(
      120deg,
      #243b30,
      #987844
    );
}

.placeholder.community{
  background:
    linear-gradient(
      120deg,
      #172c2d,
      #375d4e
    );
}


/* =========================================================
   CONTENU STANDARD DES BLOCS
   ========================================================= */

.section-content{
  width:100%;
  max-width:760px;
}

.section-content h2{
  font-size:clamp(60px,8vw,112px);
}

.section-content > p{
  max-width:580px;

  color:rgba(255,255,255,.72);

  line-height:1.7;
  font-size:16px;
}


/* =========================================================
   BLOC EXPLORATION
   ========================================================= */

.explorer-content{
  width:min(1050px, calc(100vw - 250px));
  max-width:1050px;

  /*
   * Le contenu reste volontairement compact.
   * Il doit tenir dans l'espace disponible entre
   * le header et le footer.
   */
  max-height:
    calc(
      100vh -
      var(--header) -
      var(--footer) -
      40px
    );

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:8px 0;
}

.explorer-content .eyebrow{
  margin-bottom:5px;
}

.explorer-content h2{
  font-size:clamp(52px,5.7vw,82px);

  line-height:.84;

  margin:0 0 14px;

  letter-spacing:-.035em;
}


/* Intro */

.explorer-intro{
  max-width:650px;

  margin:0 0 18px;

  color:rgba(255,255,255,.88);

  font-size:15px;
  line-height:1.4;

  font-weight:600;

  letter-spacing:.015em;
}


/* =========================================================
   3 PILIERS
   ========================================================= */

.explorer-features{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:10px;

  width:100%;
  max-width:900px;

  margin:0 0 17px;
}

.explorer-feature{
  min-height:92px;

  padding:12px 14px;

  display:flex;
  align-items:flex-start;

  gap:10px;

  background:
    rgba(5,27,28,.34);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:12px;

  backdrop-filter:blur(5px);

  box-shadow:
    0 8px 25px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.explorer-feature:hover{
  transform:translateY(-3px);

  background:
    rgba(5,31,32,.48);

  border-color:
    rgba(185,229,107,.35);
}

.feature-icon{
  width:32px;
  height:32px;

  flex:0 0 32px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:
    rgba(185,229,107,.12);

  border:
    1px solid rgba(185,229,107,.18);

  font-size:15px;
}

.explorer-feature h3{
  margin:1px 0 5px;

  font-size:10px;
  font-weight:950;

  letter-spacing:.16em;
}

.explorer-feature p{
  margin:0;

  color:rgba(255,255,255,.67);

  font-size:10px;
  line-height:1.4;
}


/* =========================================================
   TEXTE D'IMMERSION
   ========================================================= */

.explorer-description{
  width:100%;
  max-width:760px;

  margin:0 0 17px;

  color:rgba(255,255,255,.75);

  font-size:12px;
  line-height:1.5;
}


/* =========================================================
   BLOC "PRÊT À PARTIR"
   ========================================================= */

.join-box{
  width:min(760px,100%);

  min-height:56px;

  padding:9px 13px;

  display:grid;

  grid-template-columns:
    auto
    1fr
    1fr
    1fr;

  align-items:center;

  gap:12px;

  background:
    rgba(5,23,25,.55);

  border:
    1px solid rgba(185,229,107,.24);

  border-radius:12px;

  backdrop-filter:blur(8px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.join-title{
  color:var(--green);

  font-size:9px;
  font-weight:950;

  letter-spacing:.14em;

  white-space:nowrap;
}

.join-step{
  display:flex;
  align-items:center;

  gap:7px;

  min-width:0;
}

.join-step > span{
  width:21px;
  height:21px;

  flex:0 0 21px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#10201a;

  background:var(--green);

  font-size:8px;
  font-weight:950;
}

.join-step strong{
  display:block;

  margin-bottom:2px;

  font-size:8px;
  letter-spacing:.05em;
}

.join-step a{
  color:var(--green);

  font-size:8px;
  font-weight:900;

  letter-spacing:.1em;
}

.room-command{
  display:flex;
  align-items:center;

  gap:4px;
}

.room-command code{
  padding:4px 6px;

  color:#f8f5e9;

  background:
    rgba(0,0,0,.28);

  border:
    1px solid rgba(255,255,255,.1);

  border-radius:5px;

  font-family:monospace;

  font-size:8px;
  letter-spacing:.02em;
}

.room-command button{
  border:0;

  border-radius:5px;

  padding:4px 6px;

  color:#11201b;

  background:var(--green);

  font-size:7px;
  font-weight:950;

  letter-spacing:.08em;

  cursor:pointer;

  transition:.2s ease;
}

.room-command button:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}

.room-command button.copied{
  background:#8fe8d8;
}


/* =========================================================
   NAVIGATION VERTICALE
   ========================================================= */

.section-nav{
  position:fixed;

  z-index:60;

  right:24px;
  top:50%;

  transform:translateY(-50%);

  width:286px;

  display:flex;
  flex-direction:column;

  gap:7px;

  pointer-events:none;
}


/* Ligne de profondeur */

.section-nav::before{
  content:"";

  position:absolute;

  z-index:0;

  top:14px;
  right:13px;
  bottom:14px;

  width:4px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #b9e56b 0%,
      #8fe8d8 34%,
      #35c9e7 55%,
      #687be8 77%,
      #9a58dc 100%
    );

  box-shadow:
    0 0 12px rgba(83,219,224,.28),
    0 0 28px rgba(104,123,232,.12);
}


/* Halo des profondeurs */

.section-nav::after{
  content:"";

  position:absolute;

  z-index:-1;

  right:-35px;
  bottom:-70px;

  width:180px;
  height:260px;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(32,45,88,.48),
      rgba(9,18,34,0) 70%
    );

  opacity:.7;

  pointer-events:none;
}


/* Item */

.nav-item{
  position:relative;

  z-index:2;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  min-height:48px;

  pointer-events:auto;
}


/* Point */

.nav-dot{
  position:relative;

  flex:0 0 18px;

  width:18px;
  height:18px;

  margin-right:4px;

  border-radius:50%;

  border:
    2px solid rgba(231,255,255,.82);

  background:
    rgba(10,39,48,.78);

  padding:0;

  cursor:pointer;

  transition:
    transform .24s ease,
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;

  box-shadow:
    0 0 0 3px rgba(4,22,28,.3),
    0 2px 10px rgba(0,0,0,.25);
}

.nav-dot::before{
  content:"";

  position:absolute;

  inset:-6px;

  border:
    1px solid transparent;

  border-radius:50%;

  transition:.24s ease;
}


/* Hover */

.nav-item:hover .nav-dot,
.nav-dot:focus-visible{
  transform:scale(1.22);

  border-color:#fff;

  background:#7de6ef;

  box-shadow:
    0 0 0 4px rgba(94,221,233,.14),
    0 0 16px rgba(94,221,233,.6);

  outline:none;
}


/* Actif */

.nav-item.active .nav-dot{
  transform:scale(1.28);

  background:var(--green);

  border-color:#efffc8;

  box-shadow:
    0 0 0 4px rgba(185,229,107,.15),
    0 0 18px rgba(185,229,107,.72);
}


/* =========================================================
   CARTES DE NAVIGATION
   ========================================================= */

.nav-card{
  order:-1;

  width:224px;
  min-height:44px;

  margin-right:13px;

  padding:8px 14px 8px 10px;

  display:flex;
  align-items:center;

  gap:11px;

  border:
    1px solid rgba(184,238,244,.18);

  border-radius:13px;

  background:
    linear-gradient(
      100deg,
      rgba(5,26,32,.88),
      rgba(8,47,57,.72)
    );

  color:rgba(246,251,242,.9);

  box-shadow:
    0 7px 20px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.05);

  opacity:.72;

  transform:
    translateX(8px)
    scale(.985);

  transform-origin:right center;

  transition:
    opacity .24s ease,
    transform .24s ease,
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease;

  cursor:pointer;

  text-align:left;
}

.nav-item:hover .nav-card,
.nav-item:focus-within .nav-card,
.nav-item.active .nav-card{
  opacity:1;

  transform:
    translateX(0)
    scale(1);

  border-color:
    rgba(185,229,107,.4);

  background:
    linear-gradient(
      100deg,
      rgba(4,27,33,.95),
      rgba(7,58,67,.9)
    );

  box-shadow:
    0 9px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.nav-item.active .nav-card{
  border-color:
    rgba(185,229,107,.6);

  box-shadow:
    0 9px 28px rgba(0,0,0,.24),
    0 0 18px rgba(185,229,107,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
}


/* Icône */

.nav-icon{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:9px;

  color:#d9fff0;

  background:
    rgba(255,255,255,.07);

  border:
    1px solid rgba(255,255,255,.08);

  font-size:16px;
  line-height:1;
}


/* Texte */

.nav-copy{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:2px;
}

.nav-label{
  font-size:10px;
  font-weight:950;

  letter-spacing:.16em;

  line-height:1.1;

  white-space:nowrap;
}

.nav-sub{
  font-size:7px;
  font-weight:700;

  letter-spacing:.1em;

  color:
    rgba(231,247,244,.58);

  white-space:nowrap;
}


/* Couleurs selon la profondeur */

.nav-item:nth-child(1) .nav-icon{
  color:#eaff8e;
}

.nav-item:nth-child(2) .nav-icon{
  color:#9cf0a4;
}

.nav-item:nth-child(3) .nav-icon{
  color:#75e5f1;
}

.nav-item:nth-child(4) .nav-icon{
  color:#8bd7ff;
}

.nav-item:nth-child(5) .nav-icon{
  color:#a9b8ff;
}

.nav-item:nth-child(6) .nav-icon{
  color:#c0a8ff;
}

.nav-item:nth-child(7) .nav-icon{
  color:#d894ff;
}

.nav-item:nth-child(n+3) .nav-card{
  background:
    linear-gradient(
      100deg,
      rgba(5,24,34,.9),
      rgba(11,43,61,.78)
    );
}

.nav-item:nth-child(n+6) .nav-card{
  background:
    linear-gradient(
      100deg,
      rgba(8,22,37,.92),
      rgba(31,24,58,.82)
    );
}

.nav-item:nth-child(n+6) .nav-dot{
  border-color:
    rgba(205,177,255,.9);

  background:
    rgba(47,32,75,.85);
}

.nav-item:nth-child(n+6):hover .nav-dot{
  background:#b86ff0;

  box-shadow:
    0 0 0 4px rgba(184,111,240,.15),
    0 0 18px rgba(184,111,240,.62);
}

.nav-item:nth-child(n+6).active .nav-dot{
  background:#b86ff0;
  border-color:#f0ddff;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  position:fixed;

  left:0;
  right:0;
  bottom:0;

  z-index:50;

  height:var(--footer);

  padding:0 42px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:
    rgba(5,19,22,.72);

  backdrop-filter:blur(13px);

  border-top:
    1px solid rgba(255,255,255,.14);
}

.socials,
.footer-links{
  display:flex;
  align-items:center;

  gap:18px;

  font-size:10px;

  letter-spacing:.12em;
}

.socials span{
  font-size:17px;
}

.footer-links{
  gap:11px;
}

.footer-links a{
  opacity:.8;
}

.clover{
  font-size:22px;

  color:var(--green);

  margin-left:10px;
}

.footer-motto{
  font-size:9px;

  letter-spacing:.2em;

  opacity:.75;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:1100px){

  .site-header{
    padding:0 28px;
  }

  .main-nav{
    gap:22px;
  }

  .panel{
    padding-left:6vw;
    padding-right:220px;
  }

  .explorer-content{
    width:min(
      calc(100vw - 270px),
      900px
    );
  }

  .explorer-features{
    max-width:100%;
  }

  .join-box{
    grid-template-columns:
      1fr
      1fr;
  }

  .join-title{
    grid-column:1/-1;
  }

  .section-nav{
    right:15px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:850px){

  :root{
    --header:64px;
    --footer:0px;
  }


  /* Header */

  .site-header{
    height:var(--header);

    padding:
      0
      18px;
  }

  .main-nav{
    display:none;
  }

  .brand-text{
    font-size:15px;
  }

  .brand-mark{
    font-size:25px;
  }


  /* Panels */

  .panel{
    padding:
      var(--header)
      24px
      30px;

    align-items:center;
  }


  /* Hero */

  .hero-scene{
    inset:
      var(--header)
      0
      0;

    background-position:
      58%
      center;
  }

  .hero-vignette{
    inset:
      var(--header)
      0
      0;
  }

  .hero-copy{
    width:min(90vw,500px);

    margin-left:0;

    align-self:flex-start;

    margin-top:8vh;
  }

  .hero-copy h1{
    font-size:
      clamp(
        58px,
        17vw,
        95px
      );
  }

  .hero-copy .eyebrow{
    font-size:9px;

    letter-spacing:.18em;

    margin-top:14px;
  }

  .hero-copy > p{
    font-size:11px;
  }


  /* Scroll */

  .scroll-cue{
    bottom:25px;
  }


  /* Footer */

  .site-footer{
    display:none;
  }


  /* =====================================================
     EXPLORATION MOBILE
     ===================================================== */

  .explorer-content{
    width:100%;

    max-width:600px;

    max-height:
      calc(
        100vh -
        var(--header) -
        35px
      );

    padding:0;

    justify-content:center;
  }

  .explorer-content .eyebrow{
    font-size:8px;

    letter-spacing:.17em;

    margin-bottom:5px;
  }

  .explorer-content h2{
    font-size:
      clamp(
        42px,
        12vw,
        68px
      );

    line-height:.87;

    margin-bottom:12px;
  }

  .explorer-intro{
    font-size:11px;

    line-height:1.4;

    margin-bottom:13px;
  }


  /* 3 cartes deviennent verticales,
     mais beaucoup plus compactes */

  .explorer-features{
    grid-template-columns:1fr;

    gap:6px;

    margin-bottom:12px;
  }

  .explorer-feature{
    min-height:auto;

    padding:8px 10px;

    border-radius:9px;

    gap:9px;
  }

  .feature-icon{
    width:28px;
    height:28px;

    flex-basis:28px;

    font-size:13px;
  }

  .explorer-feature h3{
    font-size:8px;

    margin:0 0 3px;
  }

  .explorer-feature p{
    font-size:8px;

    line-height:1.35;
  }


  /* Texte */

  .explorer-description{
    font-size:9px;

    line-height:1.45;

    margin-bottom:12px;
  }


  /* CTA Habbo */

  .join-box{
    width:100%;

    grid-template-columns:1fr;

    gap:7px;

    padding:9px;

    border-radius:10px;
  }

  .join-title{
    grid-column:auto;

    font-size:8px;
  }

  .join-step{
    gap:7px;
  }

  .join-step > span{
    width:20px;
    height:20px;

    flex-basis:20px;

    font-size:8px;
  }

  .join-step strong{
    font-size:7px;
  }

  .join-step a{
    font-size:7px;
  }

  .room-command code{
    font-size:7px;

    padding:3px 5px;
  }

  .room-command button{
    font-size:6px;

    padding:3px 5px;
  }


  /* =====================================================
     NAVIGATION MOBILE
     ===================================================== */

  .section-nav{
    right:9px;

    width:24px;

    gap:5px;

    pointer-events:none;
  }

  .section-nav::before{
    right:9px;

    width:3px;

    top:10px;
    bottom:10px;
  }

  .section-nav::after{
    right:-80px;

    bottom:-60px;

    width:130px;
    height:220px;
  }

  .nav-item{
    min-height:31px;

    justify-content:flex-end;

    pointer-events:auto;
  }

  /*
   * Sur téléphone, les gros cartouches sont masqués.
   * Les points restent seuls afin de ne pas recouvrir
   * le contenu.
   */

  .nav-card{
    display:none;
  }

  .nav-dot{
    width:13px;
    height:13px;

    flex-basis:13px;

    margin-right:3px;

    border-width:2px;
  }

  .nav-item:hover .nav-dot{
    transform:scale(1.15);
  }

  .nav-item.active .nav-dot{
    transform:scale(1.35);
  }

  .nav-dot::before{
    inset:-5px;
  }


  /* Les autres blocs */

  .section-content{
    width:100%;

    max-width:600px;
  }

  .section-content h2{
    font-size:
      clamp(
        48px,
        13vw,
        80px
      );
  }

  .section-content > p{
    font-size:12px;

    line-height:1.55;
  }
}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media(max-width:480px){

  .panel{
    padding-left:18px;
    padding-right:18px;
  }

  .explorer-content h2{
    font-size:
      clamp(
        38px,
        12vw,
        58px
      );
  }

  .explorer-intro{
    font-size:10px;
  }

  .explorer-description{
    font-size:8px;
  }

  .explorer-features{
    gap:5px;
  }

  .explorer-feature{
    padding:7px 9px;
  }

  .explorer-feature p{
    font-size:7px;
  }

  .join-box{
    padding:8px;
  }

  .section-nav{
    right:6px;
  }
}

/* =========================================================
   BLOC 02 — LES HABBysses
   ========================================================= */

.habbysses-layout{
  width:min(1120px, calc(100vw - 250px));
  max-height:calc(
    100vh -
    var(--header) -
    var(--footer) -
    30px
  );

  display:grid;

  grid-template-columns:minmax(0, 1fr) 300px;

  align-items:center;

  gap:35px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.habbysses-content{
  min-width:0;
}

.habbysses-content .eyebrow{
  margin-bottom:5px;
}

.habbysses-content h2{
  font-size:clamp(58px, 6.2vw, 88px);

  line-height:.84;

  margin:0 0 14px;

  letter-spacing:-.045em;
}

.habbysses-intro{
  max-width:720px;

  margin:0 0 20px;

  color:rgba(255,255,255,.82);

  font-size:15px;
  line-height:1.45;

  font-weight:600;
}


/* ---------------------------------------------------------
   LES 3 ÉLÉMENTS
   --------------------------------------------------------- */

.habbysses-features{
  display:grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:10px;

  margin-bottom:20px;
}

.habbysses-feature{
  min-width:0;

  padding:14px;

  background:
    rgba(4,25,26,.48);

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:13px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 22px rgba(0,0,0,.12);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.habbysses-feature:hover{
  transform:translateY(-3px);

  border-color:
    rgba(185,229,107,.35);

  background:
    rgba(5,30,32,.62);
}

.habbysses-number{
  display:block;

  margin-bottom:9px;

  color:var(--green);

  font-size:10px;

  font-weight:900;

  letter-spacing:.16em;
}

.habbysses-feature h3{
  margin:0 0 7px;

  font-size:10px;

  font-weight:950;

  letter-spacing:.12em;

  line-height:1.2;
}

.habbysses-feature p{
  margin:0;

  color:rgba(255,255,255,.63);

  font-size:10px;

  line-height:1.45;
}


/* ---------------------------------------------------------
   BAS DU BLOC
   --------------------------------------------------------- */

.habbysses-bottom{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  max-width:850px;
}

.habbysses-bottom span{
  color:
    rgba(185,229,107,.78);

  font-size:8px;

  font-weight:900;

  letter-spacing:.15em;
}

.habbysses-bottom strong{
  color:var(--cream);

  font-size:17px;

  font-style:italic;

  letter-spacing:.02em;
}


/* =========================================================
   PERSONNAGE
   ========================================================= */

.habbysses-character{
  position:relative;

  align-self:stretch;

  min-height:420px;

  display:flex;

  justify-content:center;

  align-items:center;
}

.habbysses-character img{
  position:relative;

  z-index:2;

  width:min(270px, 100%);

  max-height:510px;

  object-fit:contain;

  object-position:center;

  filter:
    drop-shadow(
      0 18px 25px rgba(0,0,0,.28)
    );

  animation:
    ropeSwing 4s ease-in-out infinite;
}


/* =========================================================
   PERSONNAGE HABBysses
   ========================================================= */

.habbysses-character{
  position:relative;

  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  pointer-events:none;
}

.habbysses-character img{
  display:block;

  width:auto;

  /*
   * Taille maximale du personnage.
   * On conserve les proportions originales.
   */
  height:min(72vh, 620px);

  max-width:100%;

  object-fit:contain;

  filter:
    drop-shadow(
      0 18px 24px rgba(0,0,0,.25)
    );

  animation:
    habbysses-rope-swing 4s ease-in-out infinite;
}


/* Petit mouvement naturel */

@keyframes habbysses-rope-swing{

  0%,
  100%{
    transform:
      rotate(-1deg)
      translateY(0);
  }

  50%{
    transform:
      rotate(1deg)
      translateY(5px);
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:1100px){

  .habbysses-character img{
    height:min(62vh, 500px);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:850px){

  .habbysses-character{
    display:none;
  }

}

/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:1100px){

  .habbysses-layout{
    width:
      calc(100vw - 270px);

    grid-template-columns:
      minmax(0, 1fr) 210px;

    gap:20px;
  }

  .habbysses-character img{
    width:210px;
  }

  .habbysses-features{
    gap:7px;
  }

  .habbysses-feature{
    padding:11px;
  }

}


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media(max-width:850px){

  .habbysses-layout{
    width:100%;

    max-height:
      calc(
        100vh -
        var(--header) -
        35px
      );

    display:block;
  }

  .habbysses-content h2{
    font-size:
      clamp(
        44px,
        12vw,
        68px
      );
  }

  .habbysses-intro{
    font-size:10px;

    margin-bottom:13px;
  }

  .habbysses-features{
    grid-template-columns:1fr;

    gap:6px;

    margin-bottom:12px;
  }

  .habbysses-feature{
    padding:8px 10px;

    display:grid;

    grid-template-columns:30px 1fr;

    gap:8px;
  }

  .habbysses-number{
    margin:0;

    font-size:8px;
  }

  .habbysses-feature h3{
    font-size:8px;

    margin-bottom:3px;
  }

  .habbysses-feature p{
    font-size:8px;

    line-height:1.3;
  }

  .habbysses-bottom{
    display:block;
  }

  .habbysses-bottom span{
    display:block;

    font-size:7px;

    margin-bottom:5px;
  }

  .habbysses-bottom strong{
    font-size:14px;
  }


  /* Le personnage disparaît sur mobile */

  .habbysses-character{
    display:none;
  }

}


/* =========================================================
   ÉCRANS TRÈS PETITS
   ========================================================= */

@media(max-width:480px){

  .habbysses-content h2{
    font-size:44px;
  }

  .habbysses-intro{
    font-size:9px;
  }

  .habbysses-feature{
    padding:7px 9px;
  }

  .habbysses-feature p{
    font-size:7px;
  }

  .habbysses-bottom strong{
    font-size:12px;
  }

}

/* =========================================================
   ILLUSTRATION — BLOC EXPLORATION
   ========================================================= */

.explorer-character{
  position:absolute;

  z-index:2;

  right:24vw;
  top:50%;

  transform:translateY(-50%);

  width:min(300px,20vw);

  display:flex;
  align-items:center;
  justify-content:center;

  pointer-events:none;
}

.explorer-character img{
  display:block;

  width:100%;
  height:auto;

  object-fit:contain;

  filter:
    drop-shadow(
      0 18px 25px rgba(0,0,0,.22)
    );

  animation:
    explorer-float 4s ease-in-out infinite;
}


/* Petit mouvement très léger */

@keyframes explorer-float{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-6px);
  }

}


/* =========================================================
   ÉCRANS MOYENS
   ========================================================= */

@media(max-width:1000px){

  .explorer-character{
    right:4vw;

    width:230px;
  }

}


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media(max-width:850px){

  /*
   * L'illustration disparaît lorsque l'espace
   * horizontal devient trop limité.
   */

  .explorer-character{
    display:none;
  }

}



/* =========================================================
   BLOC 03 — COMBATS
   ========================================================= */

.combat-layout{
  width:min(1120px, calc(100vw - 250px));

  max-height:
    calc(
      100vh -
      var(--header) -
      var(--footer) -
      30px
    );

  display:grid;

  grid-template-columns:
    minmax(0, 1fr)
    360px;

  align-items:center;

  gap:35px;
}


/* =========================================================
   CONTENU
   ========================================================= */

.combat-content{
  min-width:0;
}

.combat-content .eyebrow{
  margin-bottom:5px;
}

.combat-content h2{
  font-size:
    clamp(
      58px,
      6.2vw,
      88px
    );

  line-height:.84;

  margin:0 0 14px;

  letter-spacing:-.045em;
}

.combat-intro{
  max-width:650px;

  margin:0 0 20px;

  color:rgba(255,255,255,.84);

  font-size:15px;
  line-height:1.45;

  font-weight:600;
}


/* =========================================================
   LES 3 MÉCANIQUES
   ========================================================= */

.combat-features{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:10px;

  margin-bottom:20px;
}

.combat-feature{
  min-width:0;

  padding:14px;

  display:flex;

  align-items:flex-start;

  gap:10px;

  background:
    rgba(35,20,13,.48);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:13px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 22px rgba(0,0,0,.14);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.combat-feature:hover{
  transform:translateY(-3px);

  background:
    rgba(45,25,15,.62);

  border-color:
    rgba(245,191,56,.42);
}


/* Icônes */

.combat-icon{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:
    rgba(245,191,56,.12);

  border:
    1px solid rgba(245,191,56,.18);

  font-size:16px;
}


/* Texte */

.combat-feature h3{
  margin:1px 0 6px;

  font-size:10px;

  font-weight:950;

  letter-spacing:.12em;

  line-height:1.2;
}

.combat-feature p{
  margin:0;

  color:
    rgba(255,255,255,.65);

  font-size:10px;

  line-height:1.45;
}


/* =========================================================
   PETITE PHRASE FINALE
   ========================================================= */

.combat-quote{
  display:flex;

  align-items:center;

  gap:9px;

  color:
    rgba(255,245,220,.88);

  font-size:13px;

  font-weight:800;

  font-style:italic;
}

.combat-quote span{
  color:#f5bf38;

  font-size:18px;

  font-style:normal;
}


/* =========================================================
   PERSONNAGE / COMBAT
   ========================================================= */

.combat-character{
  height:100%;

  min-height:430px;

  display:flex;

  align-items:center;

  justify-content:center;

  pointer-events:none;
}

.combat-character img{
  display:block;

  width:100%;

  max-width:390px;

  height:auto;

  object-fit:contain;

  filter:
    drop-shadow(
      0 20px 25px rgba(0,0,0,.25)
    );

  animation:
    combat-float 4s ease-in-out infinite;
}

@keyframes combat-float{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-5px);
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:1100px){

  .combat-layout{
    width:
      calc(100vw - 270px);

    grid-template-columns:
      minmax(0,1fr)
      260px;

    gap:20px;
  }

  .combat-character img{
    max-width:280px;
  }

  .combat-feature{
    padding:11px;
  }

  .combat-icon{
    width:30px;
    height:30px;

    flex-basis:30px;

    font-size:14px;
  }

}


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media(max-width:850px){

  .combat-layout{
    width:100%;

    max-height:
      calc(
        100vh -
        var(--header) -
        35px
      );

    display:block;
  }

  .combat-content h2{
    font-size:
      clamp(
        44px,
        12vw,
        68px
      );
  }

  .combat-intro{
    font-size:10px;

    margin-bottom:13px;
  }

  .combat-features{
    grid-template-columns:1fr;

    gap:6px;

    margin-bottom:12px;
  }

  .combat-feature{
    padding:8px 10px;

    border-radius:9px;
  }

  .combat-icon{
    width:28px;
    height:28px;

    flex-basis:28px;

    font-size:13px;
  }

  .combat-feature h3{
    font-size:8px;

    margin-bottom:3px;
  }

  .combat-feature p{
    font-size:8px;

    line-height:1.3;
  }

  .combat-quote{
    font-size:11px;
  }


  /* Illustration masquée sur mobile */

  .combat-character{
    display:none;
  }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media(max-width:480px){

  .combat-content h2{
    font-size:44px;
  }

  .combat-intro{
    font-size:9px;
  }

  .combat-feature{
    padding:7px 9px;
  }

  .combat-feature p{
    font-size:7px;
  }

  .combat-quote{
    font-size:10px;
  }

}

/* =========================================================
   BLOC 04 — PROGRESSION
   ========================================================= */

.progression-layout{
  width:min(1120px, calc(100vw - 250px));

  max-height:
    calc(
      100vh -
      var(--header) -
      var(--footer) -
      30px
    );

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    360px;

  align-items:center;

  gap:35px;
}


/* =========================================================
   CONTENU
   ========================================================= */

.progression-content{
  min-width:0;
}

.progression-content .eyebrow{
  margin-bottom:5px;
}

.progression-content h2{
  font-size:
    clamp(
      58px,
      6.2vw,
      88px
    );

  line-height:.84;

  margin:0 0 14px;

  letter-spacing:-.045em;
}

.progression-intro{
  max-width:650px;

  margin:0 0 20px;

  color:rgba(255,255,255,.84);

  font-size:15px;
  line-height:1.45;

  font-weight:600;
}


/* =========================================================
   CARACTÉRISTIQUES
   ========================================================= */

.progression-features{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:10px;

  margin-bottom:20px;
}


.progression-feature{
  min-width:0;

  padding:14px;

  display:flex;

  align-items:flex-start;

  gap:10px;

  background:
    rgba(10,35,45,.48);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:13px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 22px rgba(0,0,0,.14);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.progression-feature:hover{
  transform:translateY(-3px);

  background:
    rgba(10,42,52,.62);

  border-color:
    rgba(185,229,107,.42);
}


/* =========================================================
   ICÔNES
   ========================================================= */

.progression-icon{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;

  place-items:center;

  border-radius:9px;

  background:
    rgba(185,229,107,.12);

  border:
    1px solid rgba(185,229,107,.18);

  font-size:16px;
}


/* Force */

.progression-feature:nth-child(1)
.progression-icon{
  color:#ffd36b;

  background:
    rgba(255,190,70,.12);

  border-color:
    rgba(255,190,70,.2);
}


/* Vitalité */

.progression-feature:nth-child(2)
.progression-icon{
  color:#ff91a3;

  background:
    rgba(255,100,125,.12);

  border-color:
    rgba(255,100,125,.2);
}


/* Endurance */

.progression-feature:nth-child(3)
.progression-icon{
  color:#73e4ff;

  background:
    rgba(70,210,245,.12);

  border-color:
    rgba(70,210,245,.2);
}


/* =========================================================
   TEXTE DES CARACTÉRISTIQUES
   ========================================================= */

.progression-feature h3{
  margin:1px 0 6px;

  font-size:10px;

  font-weight:950;

  letter-spacing:.12em;

  line-height:1.2;
}

.progression-feature p{
  margin:0;

  color:
    rgba(255,255,255,.65);

  font-size:10px;

  line-height:1.45;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.progression-description{
  max-width:720px;

  margin-bottom:17px;
}

.progression-description p{
  margin:0 0 7px;

  color:
    rgba(255,255,255,.72);

  font-size:11px;

  line-height:1.5;
}


/* =========================================================
   PHRASE FINALE
   ========================================================= */

.progression-quote{
  display:flex;

  align-items:center;

  gap:9px;

  color:
    rgba(255,248,232,.9);

  font-size:13px;

  font-weight:800;

  font-style:italic;
}

.progression-quote span{
  color:var(--green);

  font-size:18px;

  font-style:normal;
}


/* =========================================================
   PERSONNAGE
   ========================================================= */

.progression-character{
  height:100%;

  min-height:430px;

  display:flex;

  align-items:center;

  justify-content:center;

  pointer-events:none;
}

.progression-character img{
  display:block;

  width:100%;

  max-width:390px;

  height:auto;

  object-fit:contain;

  filter:
    drop-shadow(
      0 20px 25px rgba(0,0,0,.25)
    );

  animation:
    progression-float 4s ease-in-out infinite;
}


/* Petit mouvement */

@keyframes progression-float{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-5px);
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:1100px){

  .progression-layout{
    width:
      calc(100vw - 270px);

    grid-template-columns:
      minmax(0,1fr)
      260px;

    gap:20px;
  }

  .progression-character img{
    max-width:280px;
  }

  .progression-feature{
    padding:11px;
  }

  .progression-icon{
    width:30px;
    height:30px;

    flex-basis:30px;

    font-size:14px;
  }

}


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media(max-width:850px){

  .progression-layout{
    width:100%;

    max-height:
      calc(
        100vh -
        var(--header) -
        35px
      );

    display:block;
  }

  .progression-content h2{
    font-size:
      clamp(
        44px,
        12vw,
        68px
      );
  }

  .progression-intro{
    font-size:10px;

    margin-bottom:13px;
  }


  /* Caractéristiques verticales */

  .progression-features{
    grid-template-columns:1fr;

    gap:6px;

    margin-bottom:12px;
  }

  .progression-feature{
    padding:8px 10px;

    border-radius:9px;
  }

  .progression-icon{
    width:28px;
    height:28px;

    flex-basis:28px;

    font-size:13px;
  }

  .progression-feature h3{
    font-size:8px;

    margin-bottom:3px;
  }

  .progression-feature p{
    font-size:8px;

    line-height:1.3;
  }


  /* Description */

  .progression-description{
    margin-bottom:10px;
  }

  .progression-description p{
    font-size:8px;

    line-height:1.4;

    margin-bottom:5px;
  }


  /* Phrase finale */

  .progression-quote{
    font-size:11px;
  }


  /* Illustration masquée */

  .progression-character{
    display:none;
  }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media(max-width:480px){

  .progression-content h2{
    font-size:44px;
  }

  .progression-intro{
    font-size:9px;
  }

  .progression-feature{
    padding:7px 9px;
  }

  .progression-feature p{
    font-size:7px;
  }

  .progression-description p{
    font-size:7px;
  }

  .progression-quote{
    font-size:10px;
  }

}

/* =========================================================
   05 / MÉTIERS — NOUVELLE DA
   ========================================================= */

.panel.market {
  background:
    radial-gradient(
      circle at 72% 45%,
      rgba(216, 170, 77, 0.18),
      transparent 35%
    ),
    linear-gradient(
      115deg,
      #182820 0%,
      #26372c 48%,
      #4b432d 100%
    );
}


/* ---------- STRUCTURE ---------- */

.metiers-layout {
  width: min(1180px, calc(100vw - 330px));
  height: calc(100vh - var(--header) - var(--footer));

  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 45px;

  align-items: center;
}


/* ---------- CONTENU ---------- */

.metiers-content {
  position: relative;
  z-index: 2;

  min-width: 0;
}

.metiers-content .eyebrow {
  color: #d7dfbd;
  opacity: 0.9;
}

.metiers-content h2 {
  margin: 12px 0 18px;

  color: #f5f0dc;

  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.metiers-content h2 span {
  color: #b9e56b;
}

.metiers-intro {
  max-width: 720px;

  margin: 0 0 30px;

  color: #e9e6d8;

  font-size: 1rem;
  line-height: 1.45;

  opacity: 0.9;
}


/* =========================================================
   MÉTIERS
   ========================================================= */

.metiers-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  max-width: 720px;
}


/* ---------- CARTE ---------- */

.metier-card {
  position: relative;

  min-height: 72px;

  display: flex;
  align-items: center;

  gap: 15px;

  padding: 12px 16px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.035)
    );

  border: 1px solid rgba(255,255,255,0.13);

  border-radius: 10px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 8px 20px rgba(0,0,0,0.16);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}


.metier-card:hover {
  transform: translateY(-3px);

  background:
    linear-gradient(
      135deg,
      rgba(216,173,77,0.18),
      rgba(255,255,255,0.06)
    );

  border-color: rgba(216,173,77,0.5);
}


/* ---------- ICÔNE ---------- */

.metier-icon {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(216,173,77,0.14);

  border: 1px solid rgba(216,173,77,0.28);

  border-radius: 9px;

  font-size: 21px;
}


/* ---------- TEXTE ---------- */

.metier-card strong {
  display: block;

  color: #f3efdf;

  font-family: var(--font-display);

  font-size: 0.82rem;
  font-weight: 700;

  letter-spacing: 0.06em;
}


.metier-card span {
  display: block;

  margin-top: 4px;

  color: #c6cbb9;

  font-size: 0.68rem;

  letter-spacing: 0.04em;

  opacity: 0.9;
}


/* ---------- FORGERON ---------- */

.metier-card.artisanat {
  grid-column: 1 / -1;

  background:
    linear-gradient(
      135deg,
      rgba(216,173,77,0.20),
      rgba(216,173,77,0.07)
    );

  border-color: rgba(216,173,77,0.35);
}


.metier-card.artisanat .metier-icon {
  background: rgba(216,173,77,0.2);

  border-color: rgba(216,173,77,0.45);
}


/* =========================================================
   TEXTE BAS
   ========================================================= */

.metiers-description {
  max-width: 720px;

  margin: 25px 0 0;

  color: #d9dccc;

  font-size: 0.82rem;

  line-height: 1.55;

  opacity: 0.85;
}


.metiers-quote {
  margin-top: 18px;

  color: #d8ad4d;

  font-family: var(--font-display);

  font-size: 0.82rem;

  letter-spacing: 0.02em;
}


.metiers-quote span {
  color: #f0d28a;

  font-size: 1.3rem;
}


/* =========================================================
   PERSONNAGE
   ========================================================= */

.metiers-character {
  position: relative;

  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 1;

  pointer-events: none;
}


.metiers-character::before {
  content: "";

  position: absolute;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(216,173,77,0.20),
      transparent 68%
    );

  filter: blur(8px);
}


.metiers-character img {
  position: relative;

  display: block;

  width: 430px;
  max-width: 115%;

  max-height: 610px;

  object-fit: contain;

  filter:
    drop-shadow(0 20px 18px rgba(0,0,0,0.30));

  animation: metiersFloat 5s ease-in-out infinite;
}


@keyframes metiersFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1100px) {

  .metiers-layout {
    width: calc(100vw - 300px);

    grid-template-columns:
      minmax(0, 1fr)
      300px;

    gap: 25px;
  }

  .metiers-character img {
    width: 350px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .panel.market {
    overflow-y: auto;
  }

  .metiers-layout {
    width: calc(100vw - 40px);

    height: auto;

    grid-template-columns: 1fr;

    gap: 20px;

    padding-bottom: 30px;
  }

  .metiers-content {
    order: 1;
  }

  .metiers-character {
    order: 2;

    height: 250px;
  }

  .metiers-character img {
    width: 300px;
    max-height: 280px;
  }

  .metiers-grid {
    grid-template-columns: 1fr;
  }

  .metier-card.artisanat {
    grid-column: auto;
  }

}

/* =========================================================
   06 / COMMERCE
   ========================================================= */

.panel.commerce {
  background:
    radial-gradient(
      circle at 72% 45%,
      rgba(216, 173, 77, 0.18),
      transparent 35%
    ),
    linear-gradient(
      115deg,
      #182820 0%,
      #26372c 48%,
      #4b432d 100%
    );
}


/* ---------- STRUCTURE ---------- */

.commerce-layout {
  width: min(1180px, calc(100vw - 330px));
  height: calc(100vh - var(--header) - var(--footer));

  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 45px;

  align-items: center;
}


/* ---------- CONTENU ---------- */

.commerce-content {
  position: relative;
  z-index: 2;

  min-width: 0;
}

.commerce-content .eyebrow {
  color: #d7dfbd;
  opacity: 0.9;
}

.commerce-content h2 {
  margin: 12px 0 18px;

  color: #f5f0dc;

  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.commerce-content h2 span {
  color: #b9e56b;
}

.commerce-intro {
  max-width: 720px;

  margin: 0 0 30px;

  color: #e9e6d8;

  font-size: 1rem;
  line-height: 1.45;

  opacity: 0.9;
}


/* =========================================================
   CARTES COMMERCE
   ========================================================= */

.commerce-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  max-width: 720px;
}


.commerce-card {
  position: relative;

  min-height: 78px;

  display: flex;
  align-items: center;

  gap: 15px;

  padding: 13px 16px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.035)
    );

  border: 1px solid rgba(255,255,255,0.13);

  border-radius: 10px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 8px 20px rgba(0,0,0,0.16);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}


.commerce-card:hover {
  transform: translateY(-3px);

  background:
    linear-gradient(
      135deg,
      rgba(216,173,77,0.18),
      rgba(255,255,255,0.06)
    );

  border-color: rgba(216,173,77,0.5);
}


/* ---------- ICÔNES ---------- */

.commerce-icon {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(216,173,77,0.14);

  border: 1px solid rgba(216,173,77,0.28);

  border-radius: 9px;

  font-size: 21px;
}


/* ---------- TEXTE ---------- */

.commerce-card strong {
  display: block;

  color: #f3efdf;

  font-family: var(--font-display);

  font-size: 0.82rem;
  font-weight: 700;

  letter-spacing: 0.06em;
}


.commerce-card span {
  display: block;

  margin-top: 4px;

  color: #c6cbb9;

  font-size: 0.68rem;

  letter-spacing: 0.04em;

  opacity: 0.9;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.commerce-description {
  max-width: 720px;

  margin: 25px 0 0;

  color: #d9dccc;

  font-size: 0.82rem;

  line-height: 1.55;

  opacity: 0.85;
}


/* ---------- CITATION ---------- */

.commerce-quote {
  margin-top: 18px;

  color: #d8ad4d;

  font-family: var(--font-display);

  font-size: 0.82rem;

  letter-spacing: 0.02em;
}

.commerce-quote span {
  color: #f0d28a;

  font-size: 1.3rem;
}


/* =========================================================
   PERSONNAGE
   ========================================================= */

.commerce-character {
  position: relative;

  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 1;

  pointer-events: none;
}


.commerce-character::before {
  content: "";

  position: absolute;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(216,173,77,0.20),
      transparent 68%
    );

  filter: blur(8px);
}


.commerce-character img {
  position: relative;

  display: block;

  width: 430px;
  max-width: 115%;

  max-height: 610px;

  object-fit: contain;

  filter:
    drop-shadow(0 20px 18px rgba(0,0,0,0.30));

  animation: commerceFloat 5s ease-in-out infinite;
}


@keyframes commerceFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1100px) {

  .commerce-layout {
    width: calc(100vw - 300px);

    grid-template-columns:
      minmax(0, 1fr)
      300px;

    gap: 25px;
  }

  .commerce-character img {
    width: 350px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .panel.commerce {
    overflow-y: auto;
  }

  .commerce-layout {
    width: calc(100vw - 40px);

    height: auto;

    grid-template-columns: 1fr;

    gap: 20px;

    padding-bottom: 30px;
  }

  .commerce-content {
    order: 1;
  }

  .commerce-character {
    order: 2;

    height: 250px;
  }

  .commerce-character img {
    width: 300px;
    max-height: 280px;
  }

  .commerce-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   À PROPOS
   ========================================================= */

.about-page {
  min-height: calc(100vh - var(--header) - var(--footer));

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(216, 173, 77, 0.12),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #182820 0%,
      #26372c 48%,
      #4b432d 100%
    );

  color: #f3efdf;
}


/* =========================================================
   HERO
   ========================================================= */

.about-hero {
  min-height: 72vh;

  display: flex;
  align-items: center;

  padding:
    calc(var(--header) + 40px)
    12vw
    40px;

  position: relative;

  overflow: hidden;
}


.about-hero::after {
  content: "☘";

  position: absolute;

  right: 8vw;
  top: 50%;

  transform: translateY(-50%);

  font-size: 22rem;

  line-height: 1;

  color: rgba(216, 173, 77, 0.045);

  pointer-events: none;
}


.about-hero-content {
  position: relative;

  z-index: 1;

  max-width: 850px;
}


.about-hero .eyebrow {
  color: #d7dfbd;
}


.about-hero h1 {
  margin: 18px 0 28px;

  max-width: 900px;

  font-size: clamp(3rem, 6vw, 6.5rem);

  line-height: 0.9;

  letter-spacing: -0.055em;

  color: #f5f0dc;
}


.about-hero h1 span {
  color: #b9e56b;
}


.about-lead {
  max-width: 700px;

  color: #d9dccc;

  font-size: 1.15rem;

  line-height: 1.6;

  opacity: 0.9;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.about-section {
  position: relative;

  padding: 45px 12vw;

  border-top: 1px solid rgba(255,255,255,0.08);
}


.about-section-label {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 45px;

  color: #c4cbb7;

  font-family: var(--font-display);

  font-size: 0.75rem;

  letter-spacing: 0.14em;
}


.about-section-label span {
  color: #b9e56b;

  font-size: 0.85rem;
}


.about-section-content {
  max-width: 1120px;
  margin: 0 auto;
}


.about-section h2 {
  margin: 0 0 35px;

  color: #f5f0dc;

  font-size: clamp(2.5rem, 4vw, 4.5rem);

  line-height: 0.92;

  letter-spacing: -0.045em;
}


.about-section h2 span {
  color: #b9e56b;
}


.about-text {
  max-width: 760px;
}


.about-text p {
  margin: 0 0 20px;

  color: #d9dccc;

  font-size: 0.98rem;

  line-height: 1.7;
}


.about-text strong {
  color: #f3efdf;
}


.about-highlight {
  margin-top: 35px !important;

  padding-left: 20px;

  border-left: 3px solid #d8ad4d;

  color: #f3efdf !important;

  font-family: var(--font-display);

  font-size: 1.15rem !important;

  line-height: 1.5 !important;
}


/* =========================================================
   CRÉATEUR
   ========================================================= */

.about-creator {
  background:
    rgba(0,0,0,0.08);
}


.about-creator-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    360px;

  gap: 80px;

  align-items: center;
}


/* ---------- PROFIL ---------- */

.about-profile {
  padding: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.09),
      rgba(255,255,255,0.025)
    );

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 15px 35px rgba(0,0,0,0.15);
}


.about-profile-mark {
  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 22px;

  background: rgba(216,173,77,0.14);

  border: 1px solid rgba(216,173,77,0.3);

  border-radius: 12px;

  color: #d8ad4d;

  font-size: 30px;
}


.about-profile-names {
  display: grid;

  grid-template-columns: 1fr auto;

  column-gap: 15px;
  row-gap: 3px;

  padding-bottom: 25px;

  border-bottom: 1px solid rgba(255,255,255,0.1);
}


.about-profile-names strong {
  color: #f3efdf;

  font-family: var(--font-display);

  font-size: 0.95rem;
}


.about-profile-names span {
  color: #b9e56b;

  font-size: 0.65rem;

  text-align: right;
}


.about-profile-history {
  display: grid;

  gap: 18px;

  margin-top: 25px;
}


.about-profile-history div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.about-profile-history b {
  color: #d8ad4d;

  font-family: var(--font-display);

  font-size: 0.72rem;

  letter-spacing: 0.07em;
}


.about-profile-history span {
  color: #b9e56b;

  font-size: 0.7rem;
}


/* =========================================================
   VISION
   ========================================================= */

.about-vision-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    360px;

  gap: 80px;

  align-items: start;
}


.about-values {
  display: grid;

  gap: 10px;
}


.about-value {
  padding: 17px 18px;

  background:
    rgba(255,255,255,0.055);

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 10px;
}


.about-value > span {
  display: block;

  margin-bottom: 5px;

  color: #b9e56b;

  font-family: var(--font-display);

  font-size: 0.65rem;
}


.about-value strong {
  display: block;

  color: #f3efdf;

  font-family: var(--font-display);

  font-size: 0.78rem;

  letter-spacing: 0.05em;
}


.about-value p {
  margin: 5px 0 0;

  color: #aeb6a7;

  font-size: 0.7rem;

  line-height: 1.4;
}


/* =========================================================
   FINAL
   ========================================================= */

.about-final {
  padding: 130px 12vw;

  text-align: center;

  border-top: 1px solid rgba(255,255,255,0.08);

  background:
    radial-gradient(
      circle at center,
      rgba(216,173,77,0.12),
      transparent 50%
    );
}


.about-final-inner {
  max-width: 700px;

  margin: 0 auto;
}


.about-final h2 {
  margin: 15px 0 25px;

  color: #f5f0dc;

  font-size: clamp(2.7rem, 5vw, 5rem);

  line-height: 0.9;

  letter-spacing: -0.05em;
}


.about-final h2 span {
  color: #b9e56b;
}


.about-final p {
  max-width: 600px;

  margin: 0 auto 30px;

  color: #c7cec0;

  font-size: 0.9rem;

  line-height: 1.6;
}


/* =========================================================
   BOUTON
   ========================================================= */

.about-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 13px 22px;

  color: #182820;

  background: #d8ad4d;

  border-radius: 8px;

  font-family: var(--font-display);

  font-size: 0.75rem;

  letter-spacing: 0.06em;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.about-button:hover {
  transform: translateY(-3px);

  background: #e6c476;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .about-hero {
    padding-left: 8vw;
    padding-right: 8vw;
  }

  .about-section {
    padding-left: 8vw;
    padding-right: 8vw;
  }

  .about-final {
    padding-left: 8vw;
    padding-right: 8vw;
  }

  .about-creator-grid,
  .about-vision-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .about-profile {
    max-width: 500px;
  }

}


@media (max-width: 600px) {

  .about-hero {
    min-height: 80vh;

    padding:
      calc(var(--header) + 25px)
      25px
      60px;
  }

  .about-hero h1 {
    font-size: 3rem;
  }

  .about-lead {
    font-size: 0.95rem;
  }

  .about-section {
    padding: 75px 25px;
  }

  .about-section-label {
    margin-bottom: 30px;
  }

  .about-section h2 {
    font-size: 2.6rem;
  }

  .about-profile-names {
    grid-template-columns: 1fr;
  }

  .about-profile-names span {
    text-align: left;
    margin-bottom: 10px;
  }

  .about-final {
    padding: 90px 25px;
  }

}

/* =========================================================
   SCROLL — PAGE À PROPOS
   ========================================================= */

html,
body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.about-page {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}