:root{
  --h1: 50px;
  --h4: clamp(140px,20dvh,260px);
}
.s1{ flex:0 0 var(--h1); }
.s2{ flex:1 1 0; }   /* 1 part du reste */
.s3{ flex:2 1 0; }   /* 2 parts du reste */
.s4{ flex:0 0 var(--h4);padding-top: 1dvh;}

img{display:block;max-width:100%;height:auto}

/* Splash screen */
#splash-screen{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(13,13,13,.96);
  text-align:center;
  opacity:0; transition:opacity 1.5s ease-in-out;
  z-index:2;
}
#splash-screen.visible{opacity:1}
#splash-screen h2{font-weight:400;font-size:1.1rem;color:var(--c3);margin:.4rem 0 1rem}
.hourglass{position:relative;width:40px;height:60px;margin:0 auto;animation:hourglass-spin 2s linear infinite}
.hourglass::before,.hourglass::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;border-style:solid;border-color:transparent}
.hourglass::before{top:0;border-width:30px 20px 0 20px;border-top-color:#e0e0e0}
.hourglass::after{bottom:0;border-width:0 20px 30px 20px;border-bottom-color:#e0e0e0}
@keyframes hourglass-spin{to{transform:rotate(180deg)}}

/* Pill avatar + rings */
.pill{
  width: clamp(120px, 14dvw, 260px);aspect-ratio:2/3;border-radius:9999px;
  margin:0 auto 18px;display:block;position:relative;overflow:visible;background:var(--c0)
}
.pill::before{content:"";position:absolute;inset:5px;border:1px solid var(--c2);border-radius:inherit;pointer-events:none;z-index:2}
.pill::after{content:"";position:absolute;top:0;inset:-6px;border:1px solid var(--c2);border-radius:inherit;pointer-events:none;z-index:2}
.pill img{width:100%;height:100%;display:block;border-radius:inherit;object-fit:cover;object-position:center 20%}

h1{margin:0px;font-size:clamp(22px,4.5vw,40px);font-weight:700;letter-spacing:.5px;text-wrap: balance;}
p{ margin:0; color:var(--c3); font-size:clamp(16px, 1rem + 0.4vw, 18px);line-height:1.5;text-wrap: pretty; hyphens: auto;}

.cta{
  margin:10px auto 0;display:inline-block;padding:12px 20px;border-radius:999px;border:1px solid var(--c3);
  color:var(--c4);font-weight:600;letter-spacing:.3px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
  animation:silverGlow 2s infinite alternate ease-in-out 1.5s
}
.cta:hover{transform:translateY(-1px);border-color:var(--c4);box-shadow:0 10px 28px rgba(0,0,0,.45)}
.cta:focus-visible{outline:2px solid var(--c3);outline-offset:3px}

/* Reveal main after splash */
#main-content{
  opacity:0;
  transition:opacity .6s ease;
  display:flex;
  flex-direction:column;
}
#main-content.visible{opacity:1}

.lang{
  position:relative;
  top:max(5px, env(safe-area-inset-top));
  transform:translateX(-50%);
  left:50%;
  z-index:5;
  /* display: flex; */
  align-items: center;
  font:inherit;
  background:transparent;
  margin-bottom: 1dvh;
}
.lang .sep{ margin:0 1px; color:var(--c3); opacity:.7 }
.lang a{
  display:inline-block;
  padding:6px 8px;
  min-height:32px;
  line-height:1;
  color:var(--c2);
  text-decoration:none;
  font-weight: 500;
  border-radius:8px;
}
@media (hover:hover) and (pointer:fine){
  .lang a:hover{ text-decoration:underline;color:var(--c3);}
}
.lang a[aria-current="page"]{
  color:var(--c4);
  cursor:default;
  pointer-events:none;
  text-decoration:none;
}

.button-container-1 {
  position: relative;
  width: 280px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
  overflow: hidden;
  border: 1px solid;
  font-family: "Cinzel", serif;
  transition: 0.5s;
  letter-spacing: 1px;
  border-radius: 8px;
  background-color: #FFFFFF;
  animation: attention 4s ease infinite;
}
.button-container-1 button {
  width: 101%;
  height: 100%;
  font-family: "Cinzel", serif;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: bold;
  background: #000;
  -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
  mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
  border: none;
  color: #fff;
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(22) forwards;
  animation: ani2 0.7s steps(22) forwards;
}
.button-container-1 button:hover {
  -webkit-animation: ani 0.7s steps(22) forwards;
  animation: ani 0.7s steps(22) forwards;
}

.mas {
  position: absolute;
  color: #000000;
  text-align: center;
  width: 101%;
  height: 50px;
  font-family: "Cinzel", serif;
  font-weight: 300;
  font-size: 20px;
  overflow: hidden;
  font-weight: bold;
  display:flex;
  align-items: center;
  justify-content: center;
}

@-webkit-keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@-webkit-keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
@keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@media (min-width:768px){
  .card{padding:0px 32px 10px}.pill{width: clamp(170px, 14dvw, 260px)};
  :root{ --h1: 96px; --h4: clamp(160px,18dvh,280px); };
  .s2{ flex:2 1 0; };
  .s3{ flex:3 1 0; }
}

/* Réduire les animations si demandé par l’utilisateur */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }}
@media (hover: hover) and (pointer: fine) {
  .cta:hover{ transform: translateY(-1px);}
}

@keyframes silverGlow{
  from{border-color:#888;box-shadow:0 0 10px #888,0 0 15px #888,inset 0 0 5px #888}
  to{border-color:#fff;box-shadow:0 0 20px #fff,0 0 30px #fff,inset 0 0 10px #fff}
}

/* Button animation */
work {
  animation: attention 4s ease infinite;
}

@keyframes attention {
  9% {
    transform: none;
  }
  12% {
    transform: scale(1.25);
  }
  16% {
    transform: scale(0.91);
  }
  20% {
    transform: scale(1.15);
  }
  24% {
    transform: scale(0.95);
  }
  28% {
    transform: scale(1.03);
  }
  32% {
    transform: scale(1);
  }
}
.subtle:hover{
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
subtle:hover::before,
.subtle:hover::after{
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
/* Animate.css */
.subtle:hover{
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}