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

body{
  margin:0;
  font-family:Inter, sans-serif;
  background:#fff;
  color:#111;
}

/* =========================
   NOM FIXE
========================= */

.name{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  font-size:16px;
  letter-spacing:1px;
  opacity:0.35;
  cursor:pointer;

  background:linear-gradient(90deg,#999,#000,#999);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  z-index:10;
}

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

.content{
  width:78%;
  margin:140px auto;
}

/* =========================
   CHAPITRES
========================= */

.edition{
  display:flex;
  gap:50px;
  margin-bottom:80px;
  align-items:flex-start;
  transition:transform 0.35s ease;
}

.edition:hover{
  transform:translateY(-6px);
}

/* alternance */
.edition:nth-child(even){
  flex-direction:row-reverse;
}

/* =========================
   MEDIA (IMAGE / VIDEO)
========================= */
.edition-media{
  position:relative;
  width: 55px%;
  aspect-ratio: 16 / 9; /* base cinéma stable */
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.edition-media img,
.edition-media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* vidéo overlay */
.edition:has(img):not(:has(video)) .edition-media{
  aspect-ratio: 3 / 4;
}

.edition:has(video) .edition-media{
  aspect-ratio: 16 / 9;
}

/* hover swap */
.edition-media:hover video{
  opacity:1;
}

.edition-media:hover img{
  opacity:0;
}

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

.edition-text{
  width:52%;
}

.edition-text h3{
  font-style:italic;
  font-weight:400;
  font-size:18px;
  margin:0 0 8px 0;
}

.edition-text .meta{
  font-size:12px;
  opacity:0.6;
  margin-bottom:10px;
}

.edition-text p{
  font-size:13px;
  line-height:1.75;
  color:#555;
}

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

@media(max-width:900px){

  .content{
    width:90%;
  }

  .edition{
    flex-direction:column !important;
    gap:60px;
  }

  .edition-media,
  .edition-text{
    width:100% !important;
    aspect-ratio:auto;
  }
}

/* =========================
   MOBILIER
========================= */

.mobilier-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.mobilier-item{
  width:100%;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  border-radius:8px;
  background:#f5f5f5;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.mobilier-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media(max-width:900px){
  .mobilier-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:500px){
  .mobilier-grid{
    grid-template-columns:1fr;
  }
}
/* =========================
   HEADER DISCRET
========================= */

.header{
  position:fixed;
  top:20px;
  left:0;
  width:100%;
  pointer-events:none; /* rend tout transparent sauf les éléments cliquables */
  z-index:20;
}

/* ton nom (inchangé mais adapté au header) */
.name{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:16px;
  letter-spacing:1px;
  opacity:0.35;
  cursor:pointer;

  background:linear-gradient(90deg,#999,#000,#999);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  pointer-events:auto;
}

/* lien paypal discret */
.support-link{
  position:absolute;
  right:30px;
  font-size:12px;
  letter-spacing:1px;
  text-decoration:none;
  color:#111;
  opacity:0.35;

  transition:opacity 0.3s ease;

  pointer-events:auto;
}

.support-link:hover{
  opacity:1;
}