@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&family=Playfair+Display:wght@700&display=swap');

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter, Arial, sans-serif;
  color:#37251e;
  background:
    radial-gradient(circle at top left, #fff4df 0%, transparent 35%),
    linear-gradient(180deg, #edd0a0 0%, #dca762 45%, #f2dfbf 100%);
}

/* NAVBAR */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:25px;
  padding:10px 6vw;
  min-height:90px;

  background:
    linear-gradient(rgba(255,248,236,0.35), rgba(255,248,236,0.55)),
    url("images/header.png");
  background-size:100% 180px;
  background-position:center center;
  background-repeat:no-repeat;

  backdrop-filter:blur(2px);
  box-shadow:0 4px 18px rgba(80,40,20,0.10);
  border-bottom:3px solid rgba(199,137,68,0.55);

  transition:all 0.3s ease;
}

.nav.scrolled{
  padding:6px 6vw;
  min-height:60px;

  background:
    linear-gradient(rgba(230,210,180,0.92), rgba(210,180,140,0.92)),
    url("images/header.png");
  background-size:cover;
  background-position:center 58%;
  background-repeat:no-repeat;

  backdrop-filter:blur(14px);
  box-shadow:0 8px 28px rgba(60,30,15,0.25);
  border-bottom:3px solid rgba(160,90,40,0.7);

  transform:translateY(-1px);
}

.nav img{
  width:58px;
  flex-shrink:0;
  transition:all 0.3s ease;
}

.nav.scrolled img{
  width:50px;
}


.nav a{
  text-decoration:none;
  font-weight:800;
  color:#5b2c27;
  white-space:nowrap;
  text-shadow:0 1px 1px rgba(255,255,255,0.6);
  transition:all 0.3s ease;
}

.nav.scrolled a{
  color:#4a2721;
  text-shadow:0 1px 2px rgba(255,255,255,0.5);
}

.nav a{
  font-size:18px;
}

.nav a:hover{
  color:#8b2e2b;
}

.nav .cta{
  margin-left:auto;
  background:linear-gradient(135deg,#b13a35,#7f2424);
  color:white;
  padding:10px 18px;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(120,40,30,0.25);
  text-shadow:none;
  transition:all 0.3s ease;
}

.nav.scrolled .cta{
  box-shadow:0 10px 24px rgba(120,40,30,0.35);
}

/* TYPO */

section{
  padding:60px 7vw;
}

h1,
h2{
  font-family:'Playfair Display',serif;
  color:#4a2721;
  line-height:1.1;
}

h1{
  font-size:clamp(2.6rem,5vw,4.8rem);
  margin:0 0 22px;
}

h2{
  font-size:clamp(2.4rem,4vw,4rem);
  margin:0 0 28px;
}

h3{
  margin:0 0 12px;
}

p{
  font-size:1.12rem;
  line-height:1.7;
}

/* HERO HOME */

.hero{
  position:relative;
  min-height:390px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:20px;

  overflow:hidden;

  background:
    radial-gradient(circle at 50% 15%, rgba(255,240,200,0.9) 0%, rgba(240,200,140,0.6) 30%, transparent 60%),
    radial-gradient(circle at 20% 50%, rgba(255,200,120,0.25) 0%, transparent 45%),
    radial-gradient(circle at 80% 50%, rgba(220,160,90,0.25) 0%, transparent 45%),
    linear-gradient(180deg, #eac48b 0%, #dba968 60%, #c9904f 100%);
}

.hero-bg{
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width:min(1100px, 96%);
  opacity:0.88;
  filter:brightness(0.8) contrast(1.25) saturate(1.08);
  pointer-events:none;
  z-index:1;
  -webkit-mask-image:radial-gradient(ellipse at center, black 0%, black 52%, rgba(0,0,0,0.8) 68%, rgba(0,0,0,0.35) 84%, transparent 100%);
  mask-image:radial-gradient(ellipse at center, black 0%, black 52%, rgba(0,0,0,0.8) 68%, rgba(0,0,0,0.35) 84%, transparent 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 35%, rgba(255,255,255,0) 65%);
  z-index:2;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(234,196,139,0) 0%, rgba(234,196,139,0.08) 35%, rgba(219,169,104,0.26) 65%, rgba(242,223,191,0.78) 92%, rgba(242,223,191,1) 100%);
  z-index:2;
  pointer-events:none;
}

.heroLogo{
  position:relative;
  z-index:3;
  text-align:center;
}

.heroLogo img{
  max-width:760px;
  width:100%;
  display:block;
  filter:drop-shadow(0 18px 28px rgba(80,40,20,0.24));
}

/* INTRO */

.intro{
  text-align:center;
  margin-top:-92px;
  padding:20px 7vw 40px;
  position:relative;
  z-index:4;
  background:linear-gradient(180deg, rgba(242,223,191,1) 0%, rgba(242,223,191,0.72) 42%, rgba(247,234,212,0) 100%);
}

.introContent{
  max-width:780px;
  margin:auto;
  background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,248,236,0.76));
  backdrop-filter:blur(10px);
  padding:34px 38px;
  border-radius:28px;
  box-shadow:0 25px 55px rgba(80,40,20,0.2);
  border:1px solid rgba(160,100,50,0.18);
}

.intro h2,
.gameIntroText h2,
.cardsIntroText h2{
  margin-bottom:20px;
}

.intro p,
.gameIntroText p,
.cardsIntroText p{
  margin:10px 0 14px;
}

/* GAME INTRO */

.gameIntro{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:60px;
  align-items:center;
  margin:70px 6vw;
  padding:60px;
  border-radius:32px;
  background:linear-gradient(135deg, #fff6e4 0%, #f1c98e 100%);
  box-shadow:0 25px 55px rgba(80,40,20,0.18);
  border:1px solid rgba(160,100,50,0.22);
}

.gameIntroImage{
  display:flex;
  justify-content:center;
  align-items:center;
}

.gameIntroImage img{
  width:100%;
  max-width:540px;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,0.35));
  transform:perspective(900px) rotateY(-8deg) rotateX(2deg);
  transition:0.4s ease;
}

.gameIntroImage img:hover{
  transform:perspective(900px) rotateY(-4deg) rotateX(1deg) scale(1.02);
}

/* PLATEAU */

.plateauIntro{
  width:calc(100% - 60px);
  margin:50px auto;
  padding:60px;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  align-items:center;
  gap:60px;
  border-radius:36px;
  background:linear-gradient(135deg, #fff4dc 0%, #f3cf96 55%, #e6a950 100%);
  box-shadow:0 18px 40px rgba(80,45,20,0.18);
}

.plateauImages{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding:28px;
  border-radius:30px;
  background:rgba(255,248,232,0.45);
  box-shadow:inset 0 0 35px rgba(255,255,255,0.35);
}

.plateauImages img:first-child{
  width:100%;
  max-width:620px;
  border-radius:18px;
  box-shadow:0 16px 30px rgba(55,35,20,0.20);
}

.plateauImages img:last-child{
  width:78%;
  max-width:460px;
  border-radius:16px;
  box-shadow:0 14px 26px rgba(55,35,20,0.18);
}

.plateauText{
  max-width:760px;
}

.plateauText h2{
  font-size:clamp(2rem, 3.2vw, 3.7rem);
}

.plateauText p{
  margin:0 0 16px;
}

/* OBJECTIFS */

.panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  align-items:center;
  margin:45px 5vw;
  padding:50px;
  border-radius:32px;
  background:linear-gradient(135deg,#fffaf0 0%,#f0c98f 100%);
  box-shadow:0 20px 45px rgba(80,40,20,0.18);
  border:1px solid rgba(160,100,50,0.24);
}

.panel img{
  width:100%;
  border-radius:22px;
  box-shadow:0 16px 30px rgba(60,30,20,0.24);
}

/* CARTES */

.cardsIntro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  margin:45px 5vw;
  padding:55px;
  border-radius:32px;
  background:linear-gradient(135deg,#fff6e2 0%,#e2a95d 100%);
  box-shadow:0 20px 45px rgba(80,40,20,0.18);
  border:1px solid rgba(160,100,50,0.22);
}

.cardsFan{
  position:relative;
  height:420px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.cardsFan .card{
  position:absolute;
  width:200px;
  border-radius:14px;
  filter:drop-shadow(0 18px 25px rgba(0,0,0,0.30));
  transition:0.35s ease;
}

.c1{ transform:translateX(-200px) rotate(-18deg) scale(0.92); z-index:1; }
.c2{ transform:translateX(-100px) rotate(-8deg) scale(0.97); z-index:2; }
.c3{ transform:translateY(-15px) rotate(0deg) scale(1.05); z-index:5; }
.c4{ transform:translateX(100px) rotate(8deg) scale(0.97); z-index:3; }
.c5{ transform:translateX(200px) rotate(18deg) scale(0.92); z-index:1; }

.cardsFan .card:hover{
  transform:translateY(-30px) scale(1.08);
  z-index:10;
}

/* PUBLIC + AUTEUR */

.publicIntro,
.authorIntro{
  width:calc(100% - 60px);
  margin:50px auto;
  padding:60px 70px;
  border-radius:36px;
  box-shadow:0 18px 40px rgba(80,45,20,0.16);
  text-align:center;
}

.publicIntro{
  background:linear-gradient(135deg, #fff7e8 0%, #e7c38a 100%);
}

.authorIntro{
  background:linear-gradient(135deg, #fff3df 0%, #e2b574 100%);
}

.publicContent,
.authorContent{
  max-width:900px;
  margin:0 auto;
}

.publicContent h2,
.authorContent h2{
  font-size:clamp(32px, 3.5vw, 52px);
}

.publicContent p,
.authorContent p{
  margin:0 0 16px;
  font-size:18px;
  line-height:1.6;
  color:#2e211d;
}

/* LINKEDIN AUTEUR */

.author-link{
  margin-top:28px;
}

.author-link a{
  display:inline-block;
  text-decoration:none;
  font-weight:800;
  color:white;
  background:linear-gradient(135deg,#b13a35,#7f2424);
  padding:12px 22px;
  border-radius:999px;
  box-shadow:0 10px 22px rgba(120,40,30,0.25);
  transition:0.25s ease;
}

.author-link a:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(120,40,30,0.32);
}

/* PAGE DÉCOUVRIR */

.materielSection{
  padding:50px 5vw 25px;
  text-align:left;
}

.materielImage{
  width:100%;
  background:rgba(255,250,240,0.42);
  border-radius:22px;
  padding:0;
  box-shadow:0 20px 45px rgba(80,40,20,0.16);
  overflow:hidden;
}

.materielImage img{
  width:100%;
  display:block;
  height:auto;
}

.discoverStep{
  width:calc(100% - 60px);
  margin:55px auto;
  padding:60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center;
  border-radius:36px;
  background:linear-gradient(135deg,#fff7e8 0%,#e7bd7d 100%);
  box-shadow:0 22px 48px rgba(80,40,20,0.18);
  border:1px solid rgba(160,100,50,0.22);
}

.discoverStep.reverse{
  grid-template-columns:1fr 1fr;
}

.discoverStep.reverse .discoverText{
  order:2;
}

.discoverStep.reverse .discoverVisual{
  order:1;
}

.discoverText h2{
  font-size:clamp(2.7rem,4vw,4.3rem);
  margin-bottom:26px;
}

.discoverText > p{
  font-size:clamp(1.35rem,1.55vw,1.65rem);
  line-height:1.55;
  max-width:720px;
  margin:0 0 28px;
}

.discoverGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:22px;
}

.discoverCard{
  padding:22px 24px;
  border-radius:20px;
  background:rgba(255,255,255,0.58);
  box-shadow:0 12px 24px rgba(80,40,20,0.12);
  border:1px solid rgba(160,100,50,0.18);
}

.discoverCard h3{
  font-size:clamp(1.35rem,1.5vw,1.65rem);
  line-height:1.2;
  color:#8b2e2b;
}

.discoverCard p{
  font-size:clamp(1.08rem,1.18vw,1.25rem);
  line-height:1.55;
  margin:0;
  max-width:none;
}

.assiaConclusion{
  margin-top:28px;
  padding:24px 28px;
  border-radius:22px;
  background:linear-gradient(135deg,#fff4df,#f1c98e);
  box-shadow:0 14px 30px rgba(80,40,20,0.16);
  border:1px solid rgba(160,100,50,0.18);
  font-size:clamp(1.18rem,1.3vw,1.4rem);
  line-height:1.55;
  font-weight:600;
}

.discoverVisual{
  padding:18px;
  border-radius:30px;
  background:rgba(255,250,240,0.55);
  box-shadow:inset 0 0 35px rgba(255,255,255,0.35);
}

.discoverVisual img{
  width:100%;
  display:block;
  border-radius:22px;
  box-shadow:0 18px 35px rgba(60,30,20,0.24);
}

.discover-contact{
  max-width:980px;
  margin:45px auto 70px;
  padding:55px 6vw;
  text-align:center;
  border-radius:32px;
  background:linear-gradient(135deg,#fff6e4 0%,#e6b879 100%);
  box-shadow:0 20px 45px rgba(80,40,20,0.18);
  border:1px solid rgba(160,100,50,0.22);
}

.discover-contact p{
  max-width:720px;
  margin:0 auto 28px;
  font-size:1.25rem;
}

.btn-primary{
  display:inline-block;
  background:linear-gradient(135deg,#b13a35,#7f2424);
  color:white;
  padding:14px 24px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 10px 22px rgba(120,40,30,0.25);
}

.btn-primary:hover,
.button:hover,
.nav .cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(120,40,30,0.32);
}

/* CONTACT HOME */

.contact{
  display:block;
  margin:45px 5vw;
  padding:50px;
  border-radius:32px;
  background:linear-gradient(135deg,#fff4df 0%,#e4b46f 100%);
  box-shadow:0 20px 45px rgba(80,40,20,0.18);
}

.contactContainer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  width:100%;
}

.contactText{
  flex:1;
  max-width:520px;
}

.contactText > img{
  width:130px;
  filter:drop-shadow(0 12px 18px rgba(0,60,80,0.25));
}

.contactIllustration{
  flex:1.2;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.contactIllustration img{
  width:100%;
  max-width:720px;
  height:auto;
  display:block;
  filter:none;
}

.button{
  display:inline-block;
  background:linear-gradient(135deg,#b13a35,#7f2424);
  color:white;
  padding:13px 20px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 10px 20px rgba(120,40,30,0.25);
}
/* FORMULAIRE CONTACT */

.contact-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:22px;
  max-width:520px;
  width:100%;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(120,80,40,0.22);
  background:rgba(255,255,255,0.72);
  font-family:Inter, Arial, sans-serif;
  font-size:1rem;
  color:#37251e;
  outline:none;
}

.contact-form textarea{
  min-height:130px;
  resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#b13a35;
  box-shadow:0 0 0 3px rgba(177,58,53,0.12);
}

.contact-form .button{
  border:none;
  cursor:pointer;
  align-self:flex-start;
}

/* PAGE MERCI */

.merciPage{
  min-height:75vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 6vw 80px;
}

.merciCard{
  max-width:720px;
  width:100%;
  text-align:center;
  padding:60px 40px;
  border-radius:32px;
  background:rgba(255,248,236,0.88);
  box-shadow:0 25px 70px rgba(80,40,20,0.18);
  backdrop-filter:blur(10px);
}

.merciCard img{
  width:120px;
  margin-bottom:25px;
}

.merciCard h1{
  margin:0 0 20px;
  font-family:"Playfair Display", serif;
  font-size:clamp(2rem, 4vw, 3.4rem);
  color:#7b2e1f;
}

.merciCard p{
  font-size:1.1rem;
  line-height:1.7;
  margin:10px auto;
  max-width:540px;
}

.merciCard .button{
  display:inline-block;
  margin-top:35px;
}

/* FOOTER */

footer{
  text-align:center;
  padding:32px;
  color:#6b4435;
  background:linear-gradient(180deg,#f2dfbf,#d9a866);
}


/* RESPONSIVE */

@media(max-width:900px){

  .nav{
    gap:14px;
    overflow:auto;
    padding:8px 5vw;
    min-height:66px;

    background:
      linear-gradient(rgba(255,248,236,0.9), rgba(255,248,236,0.9)),
      url("images/header.png");
    background-size:cover;
    background-position:center 58%;
    background-repeat:no-repeat;
  }

  .nav.scrolled{
    padding:6px 5vw;
    min-height:56px;

    background:
      linear-gradient(rgba(230,210,180,0.94), rgba(210,180,140,0.94)),
      url("images/header.png");
    background-size:cover;
    background-position:center 58%;
    background-repeat:no-repeat;
  }

  .nav img{
    width:50px;
  }

  .nav.scrolled img{
    width:44px;
  }


  .nav a{
    font-size:15px;
  }

  .nav .cta{
    margin-left:0;
  }

  .hero{
    min-height:330px;
  }

  .hero-bg{
    top:10px;
    width:125%;
    opacity:0.82;
  }

  .heroLogo img{
    max-width:520px;
  }

  .intro{
    margin-top:-60px;
  }

  .introContent{
    padding:26px;
  }

  .gameIntro,
  .cardsIntro,
  .plateauIntro{
    grid-template-columns:1fr;
    text-align:center;
    padding:35px;
    margin:45px 5vw;
  }

  .gameIntroImage{
    order:1;
  }

  .gameIntroText{
    order:2;
  }

  .gameIntroImage img{
    max-width:90%;
    transform:none;
  }

  .gameIntroImage img:hover{
    transform:scale(1.02);
  }

  .plateauImages img:first-child{
    max-width:100%;
  }

  .plateauImages img:last-child{
    max-width:80%;
  }

  .panel{
    grid-template-columns:1fr;
    padding:32px;
  }

  .cardsFan{
    height:500px;
    margin-top:20px;
  }

  .cardsFan .card{
    width:170px;
  }

  .c1{ transform:translateX(-120px) translateY(-80px) rotate(-14deg) scale(0.92); }
  .c2{ transform:translateX(120px) translateY(-80px) rotate(14deg) scale(0.92); }
  .c3{ transform:translateY(10px) rotate(0deg) scale(1.05); }
  .c4{ transform:translateX(-90px) translateY(130px) rotate(-8deg) scale(0.92); }
  .c5{ transform:translateX(90px) translateY(130px) rotate(8deg) scale(0.92); }

  .cardsFan .card:hover{
    transform:scale(1.04);
  }

  .publicIntro,
  .authorIntro{
    width:auto;
    margin:45px 5vw;
    padding:35px;
  }

  .contact{
    text-align:center;
    padding:32px;
  }

  .contactContainer{
    flex-direction:column;
    gap:35px;
    text-align:center;
  }

  .contactText{
    max-width:100%;
  }

  .contactIllustration{
    justify-content:center;
  }

  .contactIllustration img{
    max-width:100%;
  }

  .contact-form{
    max-width:100%;
    width:100%;
  }

  .contact-form .button{
    align-self:center;
  }

  .materielSection{
    padding:35px 4vw 20px;
  }

  .materielImage{
    border-radius:14px;
  }

  .discoverStep,
  .discoverStep.reverse{
    width:auto;
    margin:38px 5vw;
    padding:32px;
    grid-template-columns:1fr;
    text-align:center;
  }

  .discoverStep.reverse .discoverText,
  .discoverStep.reverse .discoverVisual{
    order:initial;
  }

  .discoverText h2{
    font-size:clamp(2.2rem,9vw,3rem);
  }

  .discoverText > p{
    max-width:none;
    font-size:1.2rem;
  }

  .discoverCard{
    padding:20px;
  }

  .discoverCard h3{
    font-size:1.35rem;
  }

  .discoverCard p{
    font-size:1.05rem;
  }

  .assiaConclusion{
    font-size:1.08rem;
    padding:20px;
    text-align:left;
  }

  .discoverVisual{
    padding:10px;
    border-radius:20px;
  }

  .discoverVisual img{
    border-radius:14px;
  }

  .discover-contact{
    margin:35px 5vw 55px;
    padding:36px 26px;
  }
}


/* NAVBAR DÉCOUVRIR — IDENTIQUE À INDEX */

.discover .nav{
  min-height:90px;
  padding:10px 6vw;
  gap:25px;
}

.discover .nav img{
  width:58px;
}

.discover .nav a{
  font-size:18px;
  font-weight:800;
}

.discover .nav .cta{
  padding:10px 18px;
  margin-left:auto;
}

.discover .nav.scrolled{
  min-height:60px;
  padding:6px 6vw;
}

.discover .nav.scrolled img{
  width:50px;
}

@media(max-width:900px){
  .discover .nav{
    gap:14px;
    overflow:auto;
    padding:8px 5vw;
    min-height:66px;
  }

  .discover .nav.scrolled{
    padding:6px 5vw;
    min-height:56px;
  }

  .discover .nav img{
    width:50px;
  }

  .discover .nav.scrolled img{
    width:44px;
  }

  .discover .nav a{
    font-size:15px;
  }

  .discover .nav .cta{
    margin-left:0;
    padding:10px 18px;
  }
}
.gallery-item a{
  display:block;
}

.gallery-item img{
  transition:transform .3s ease;
  cursor:pointer;
}

.gallery-item img:hover{
  transform:scale(1.04);
}
.gallery-item a{
  display:block;
  overflow:hidden;
}

.gallery-item a img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
}

.gallery-item a:hover img{
  transform:scale(1.04);
}