/* style.css for Yayoi Kusama landing (hero) */
@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@400&family=Oswald:wght@200;300;400;700&display=swap');
:root {
  --couleur-rouge: #D32D13;
  --couleur-bleu: #358BC0;
  --couleur-vert: #00BB27;
  --couleur-jaune: #FEB70A;
  --couleur-noir: #1E1E1E;
  --couleur-blanc: #FFFFFF;

  --blanc: var(--couleur-blanc);

  --font-title: 'Oswald', sans-serif;
  --font-text: 'Afacad', sans-serif;

  /* typographic sizes (fluid/responsive) */
  --size-title-index: clamp(2.6rem, 6vw, 6.25rem);
  --size-subtitle-index: clamp(1.6rem, 4vw, 4.375rem);
  --size-chapitre-index: clamp(1.1rem, 2.4vw, 2.25rem);
  --size-chiffre-chapitre-index: clamp(2rem, 4vw, 3.75rem);
  --size-text: clamp(1rem, 1.2vw, 1.25rem);

  /* circle size presets (in px) */
  --circle-small: 40px;
  --circle-medium: 110px;
  --circle-large: 220px;
  --circle-xlarge: 340px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%;font-family:var(--font-text);font-size:var(--size-text);color:var(--couleur-noir);background:var(--couleur-blanc);overflow-x:hidden;overscroll-behavior-y:none}


.hero{min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}

.circles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}

/* Page transition overlay (fade to white) */
.page-fade{position:fixed;inset:0;background:var(--couleur-blanc);opacity:0;pointer-events:none;z-index:9999;transition:opacity 300ms ease-out}
.page-fade.is-active{opacity:1}

/* Ensure main content sits above the animated background */
.hero-content{position:relative;z-index:6}
.chapters{position:relative;z-index:6}

.circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 12px 22px rgba(0,0,0,0.18);will-change:transform, left, top}

.c-small{width:var(--circle-small);height:var(--circle-small)}
.c-medium{width:var(--circle-medium);height:var(--circle-medium)}
.c-large{width:var(--circle-large);height:var(--circle-large)}
.c-xlarge{width:var(--circle-xlarge);height:var(--circle-xlarge)}

/* color classes */
.c-red{background:var(--couleur-rouge)}
.c-yellow{background:var(--couleur-jaune)}
.c-green{background:var(--couleur-vert)}
.c-blue{background:var(--couleur-bleu)}

/* subtle inner shadow to mimic screenshot */
.circle::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 -10px 18px rgba(0,0,0,0.06)}

/* Hero content (text area) - keep above circles */
.hero-content{position:relative;z-index:6;text-align:center;padding:clamp(3rem, 6vw, 6rem) 1.25rem;max-width:1100px;margin:0 auto}

.title{font-family:var(--font-title);font-weight:400;font-size:var(--size-title-index);letter-spacing:0.02em;margin-bottom:.25rem;color:var(--couleur-noir)}
.subtitle{font-family:var(--font-title);font-weight:200;font-size:var(--size-subtitle-index);letter-spacing:0.02em;margin-bottom:1.25rem;color:var(--couleur-noir)}

.lead{font-size:.95rem;color:#333;margin-bottom:2.2rem}
.lead,p,.next-section,li,span,a,.text,.body-text{font-family:var(--font-text);font-size:var(--size-text);font-weight:400;color:var(--couleur-noir)}

.scroll-down{
  --size:64px;
  width:var(--size);
  height:var(--size);
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  border:0;
  background:var(--couleur-rouge);
  color:var(--couleur-blanc);
  box-shadow:0 14px 30px rgba(0,0,0,0.28);
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease;
}

.scroll-down svg{
  width:32.275px;
  height:32.275px;
  transform-origin:center;
  transform:rotate(0deg);
  color:var(--couleur-blanc);
  display:block;
}
.scroll-down svg path{stroke:currentColor;stroke-width:3px}
.scroll-down:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 22px 40px rgba(0,0,0,0.36)}

.fullscreen-btn{
  position:fixed;
  right:24px;
  top:24px;
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid var(--couleur-bleu);
  background:var(--couleur-blanc);
  color:var(--couleur-bleu);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,0.12);
  transition:box-shadow 200ms ease-in, background 200ms ease-in, color 200ms ease-in, transform 180ms ease;
  z-index:10001;
}

.fullscreen-btn[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  right:calc(100% + 10px);
  top:50%;
  transform:translate(6px, -50%);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:9999px;
  background:var(--blanc, #FFF);
  border:1px solid var(--couleur-bleu);
  color:var(--couleur-bleu);
  font-family:var(--font-text);
  font-size:15px;
  line-height:1;
  box-shadow:0 10px 20px rgba(0,0,0,0.10);
  transition:opacity 200ms ease-in, transform 200ms ease-in;
}

.fullscreen-btn:hover::after,
.fullscreen-btn:focus-visible::after{
  opacity:1;
  transform:translate(0, -50%);
}

.fullscreen-btn:hover,
.fullscreen-btn:focus-visible{
  background:var(--couleur-bleu);
  color:var(--couleur-blanc);
  box-shadow:0 20px 40px rgba(0,0,0,0.16);
  transform:translateY(-1px);
}

.fullscreen-btn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--couleur-blanc) 88%, transparent);
  outline-offset:3px;
}

.fullscreen-btn__icon{
  width:20px;
  height:20px;
  color:inherit;
  background-color:currentColor;
  -webkit-mask: url('images/plein_ecran.svg') no-repeat center / contain;
  mask: url('images/plein_ecran.svg') no-repeat center / contain;
}

@supports not ((-webkit-mask: url('images/plein_ecran.svg') no-repeat center / contain) or (mask: url('images/plein_ecran.svg') no-repeat center / contain)) {
  .fullscreen-btn__icon{
    background:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .fullscreen-btn__icon::before{
    content:'\26F6';
    font-size:20px;
    line-height:1;
    color:currentColor;
  }
}

.next-section{
  padding:clamp(3rem, 6vw, 6rem) 1.25rem;
  text-align:center;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background:transparent;
}

.next-section::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0.8) 100%);
  z-index:1;
}

.next-section > .hero-content{position:relative;z-index:2}

/* Chapitrage list layout (transport for 4 pages) */
.chap-list{
  display:flex;
  width:min(100%, 980px);
  max-width:100%;
  flex-direction:column;
  /* makes every item the same width: the width of the longest one (chapitre 1) */
  align-items:stretch;
  gap:50px;
  margin:2.25rem auto 0; /* centered horizontally within hero-content */
}
.chap-item{
  display:flex;
  align-items:center;
  gap:28px;
  text-decoration:none;
  color:var(--couleur-noir);
  border-radius:999px;
  position:relative;
  isolation:isolate;
  flex-wrap:wrap;
}

/* wipe hover: left -> right, 300ms ease-out */
.chap-item::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:calc(var(--chap-circle-size, 96px) / 2);
  border-top-right-radius:999px;
  border-bottom-right-radius:999px;
  background:transparent;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 300ms ease-out;
  z-index:-1;
}
.chap-item:hover::before{transform:scaleX(1)}

.chap-item:nth-child(1)::before{background:color-mix(in srgb, var(--couleur-rouge) 30%, transparent)}
.chap-item:nth-child(2)::before{background:color-mix(in srgb, var(--couleur-bleu) 30%, transparent)}
.chap-item:nth-child(3)::before{background:color-mix(in srgb, var(--couleur-jaune) 30%, transparent)}
.chap-item:nth-child(4)::before{background:color-mix(in srgb, var(--couleur-vert) 30%, transparent)}

.chap-item.is-locked{
  pointer-events:none;
  cursor:not-allowed;
}

.chap-item.is-locked::before{display:none}

.chap-item.is-locked .num-circle,
.chap-item.is-locked .chap-title{
  filter:grayscale(1);
  opacity:0.45;
}

.num-circle{width:var(--chap-circle-size, 96px);height:var(--chap-circle-size, 96px);border-radius:50%;display:inline-grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,0.12);
  color: var(--blanc, #FFF);
  font-family: Oswald, var(--font-title);
  font-size: var(--size-chiffre-chapitre-index);
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 3px;
}
.num-1{background:var(--couleur-rouge)}
.num-2{background:var(--couleur-bleu)}
.num-3{background:var(--couleur-jaune)}
.num-4{background:var(--couleur-vert)}
.chap-title{font-family:var(--font-title);font-size:var(--size-chapitre-index);font-weight:300;margin-right:35px;line-height:1.2;text-wrap:balance}

@media (max-width:800px){
  .chap-list{width:100%;gap:28px;padding:0 1rem}
  .chap-list{--chap-circle-size:72px}
  .num-circle{font-size:36px;letter-spacing:2px}
  .chap-title{font-size:20px}
}

/* responsive tweaks */
@media (max-width:1200px){.hero-content{padding:clamp(2.5rem, 6vw, 4.5rem) 1rem}}
@media (max-width:900px){.title{font-size:48px}.subtitle{font-size:28px}.c-large{width:160px;height:160px}.c-medium{width:88px;height:88px}}
@media (max-width:480px){.title{font-size:34px}.subtitle{font-size:20px}.c-xlarge{display:none}.c-large{width:120px;height:120px}.c-medium{width:64px;height:64px}.c-small{width:36px;height:36px}}