:root{
  /* --h1: 10px; */
  --h4: clamp(140px, 20dvh, 260px);
  --gap: clamp(8px, 2.5vw, 20px);
  --card-min: 72px;
  --card-max: 180px;
}
html, body { margin:0; padding:0; }

.s1{ flex:0 0 auto; } 
.s2{ flex:1 1 0; }
.s3{ flex:2 1 0; }
.s4{ flex:0 0 var(--h4); padding-top:1dvh; }

main{
  max-width: none;
  display:flex;
  flex-direction:column;
  min-height:100%;   
}

.wrap{
  min-height:100svh;             /* évite les barres d’UI mobiles */
  display:grid;
  place-items:stretch;
  padding:0; /* supprime les 32px fixes */
}

.page-links {
  width: 100%;
  margin: 0%;
  padding: 0%;
  max-width:none;
}

/* Images de base utilisées par la pill */
img{ display:block; max-width:100%; height:auto; }

/* Pill + anneaux */
.pill{
  width: 100%;
  height: clamp(120px, 22vh, 220px);
  aspect-ratio: 3545 / 1959;
  margin: 0 auto 18px;
  display: block;
  position: relative;
  overflow: visible;
  background: var(--c0);
}
/* Fondu paramétrable sur 4 côtés */
.pill img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%; 
  margin: auto;
  display: flex;
}
.banner {
  margin: 0;
  padding: 0;
}

/* Desktop tweaks */
@media (min-width:768px){
  .pill{
    /* width: clamp(220px, 70dvw, 640px); */
    height: clamp(120px, 22vh, 220px);
    width: 100%;
  }
  :root{ --h4: clamp(160px, 18dvh, 280px); }
  .s2{ flex:2 1 0; }
  .s3{ flex:3 1 0; }
}

/* S3 en ligne centrée */
.s3{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(12px, 2.5vw, 20px);
  width:100%;
}

/* Texte au-dessus des cartes */
.lead{
  font: inherit;
  font-size: clamp(16px, 1rem + 0.4vw, 18px);
  letter-spacing: .3px;
  opacity:.9;
  margin-bottom: .4rem;
  text-align:center;
  margin-top: 0;
}

.lead.is-big {
  font-size: clamp(18px, 1.2rem + 0.5vw, 22px);
  margin-bottom: .1rem;
}

.cards{
  display:flex;
  gap: var(--gap);
  justify-content:center;
  align-items:stretch;
  width:100%;
  max-width:100%;
  flex-wrap: nowrap;
  overflow:hidden;
}

/* Cartes format tarot */
.tarot{
  display:block;
  position: relative;
  isolation:isolate;
  flex: 0 1 clamp(var(--card-min), calc((100% - 2*var(--gap)) / 3)*.90, var(--card-max));
  aspect-ratio: 485 / 909;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c0);
  box-shadow: 0 0 0 1px var(--c2) inset;
  transition: transform .15s ease;
}
.tarot:hover{ transform: translateY(-2px); }

.tarot > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

.tarot.is-soon{
  pointer-events: none;
}

/* Overlay gris */
.tarot.is-soon::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
}

.tarot .soon{
  position:absolute; inset:auto 8% 40% 8%;
  display:flex; place-items:center;

  gap:.35em;
  font-family: 'Cinzel', serif;
  font-weight:700;
  text-transform:none;
  font-size: clamp(12px, 0.8rem + 0.2vw, 18px);
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  padding:.4rem .3rem;
  border:1px solid rgba(119, 119, 119, 0.7);
  border-radius:12px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(1px);
}

.soon-icon{
  height: 2em;
  width:auto;
  margin-left:0em;
  vertical-align:middle;
  display:inline-block;
}

/* Optionnel: sur ≥768px, augmente légèrement la borne max */
@media (min-width:768px){
  :root{ --card-max: 200px; }
}

.s4 {
  padding-top: 0;
}

.divider-gothic {
  margin-top: 0.2rem;
}