@font-face {
  font-family: "ITC Lubalin Graph Book Regular";
  src: url("assets/ITC Lubalin Graph Book Regular.woff2") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --txt: #ffffff;
  --shadow: rgba(0,0,0,0.35);
  --scrim: rgba(0,0,0,0.45);
  --accent: #ffd86b;
  --bg-blur: 2px;
  --title-size: clamp(2rem, 6vw, 5rem);
  --body-size: clamp(1rem, 2.4vw, 1.25rem);
  --heart-color: #e63946;
  --heart-color-hover: #d62839;
}

*{ box-sizing:border-box; }
html, body{
  height:100%;
  margin:0;
  padding:0;
  color: var(--txt);
  font-family: "ITC Lubalin Graph Book Regular", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--body-size);
  scroll-behavior: smooth;
  background: #000;
}

/* Image de fond fixe */
.bg{
  position: fixed;
  inset: 0;
 /* background: url("assets/fond.jpg") center/cover no-repeat fixed; */
  filter: blur(var(--bg-blur));
  z-index: -1;
  transform: translateZ(0);
}
.scrim{
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 0;
}

/* Sections plein écran */
.panel{
  min-height: 100dvh; /* tient compte des barres sur mobile */
  width: 100%;
  display: grid;
  align-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.panel-center{
  place-items: center;
  text-align: center;
}

.title{
  font-size: var(--title-size);
  line-height: 1.1;
  text-shadow: 0 6px 24px var(--shadow);
  margin: 0;
}

/* Effet machine à écrire */
#typewriter{
  white-space: pre-wrap;
}
#typewriter2{
  white-space: pre-wrap;
}
.cursor{
  display:inline-block;
  width: .07em;
  height: .9em;
  background: var(--accent);
  margin-left: .12em;
  animation: blink 1s steps(2, start) infinite;
  vertical-align: text-bottom;
}
@keyframes blink { 50% { opacity: 0; } }

/* Bouton "passer" */
.ghost{
  margin-top: 1.25rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  padding: .65rem 1rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .2s ease;
}
.ghost:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
.ghost:active{ transform: translateY(0); }

/* Vidéo */
.video-wrap{
  max-width: min(1000px, 92vw);
  /*max-width:100% */
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
}
.video{
  display:fixed;
  width: 100%;  
  height: auto;
 }


#video {
  background: #000;
}


/* Carte (section infos) */
.card{
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 32px);
  /* max-width: min(600px, 92vw); */
  /* max-width: 1024px; */
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  margin-bottom:10px;
}

/* Indication scroll */
.hint{
  text-align: center;
  opacity: .9;
  margin-top: 1rem;
}

/* Accessibilité focus */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
     table {
            /* width: 100%; */
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 2px 3px rgba(0,0,0,0.1);
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
      /*      background-color: #3498db; */
            color: white;
            font-weight: bold;
        }
        
 
/* Fond desktop */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("assets/fond.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Smartphone (portrait) */
@media (max-width: 768px) and (orientation: portrait) {
  body::before{
    background-image: url("assets/fond-mobile.jpg");
    background-size: cover;
    background-position: center top;  /* important : cadrage plus naturel */
  }
}


/* Coeur ############################## */
    .stage {
      position: relative;
      width: min(95vw, 1000px);
      height: min(90vh, 600px);
      border-radius: 20px;
      /* background: radial-gradient(1200px 600px at 50% 30%, #1f2937, #0b1623 70%, #0a1220); */
	  background: rgba(0,0,0,0.5);
      box-shadow: 0 40px 100px rgba(0,0,0,0.45) inset, 0 8px 40px rgba(0,0,0,0.6);
      overflow: hidden;
    }

    /* Cœur centré */
    .heart-wrap {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: none; /* pour que seules les zones interactives du bouton captent les clics */
    }

    .heart-btn {
      pointer-events: auto;
      position: relative;
      border: none;
      background: none;
      cursor: pointer;
      width: 220px;
      height: 200px;
      display: grid;
      place-items: center;
    }

    /* SVG cœur plein */
    .heart-btn svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 10px 25px rgba(214,40,57,0.45));
      transition: transform .15s ease, filter .2s ease;
    }
    .heart-btn:hover svg { transform: scale(1.03); filter: drop-shadow(0 14px 32px rgba(214,40,57,0.55)); }
    .heart-path { fill: var(--heart-color); }
    .heart-btn:hover .heart-path { fill: var(--heart-color-hover); }

    .heart-label {
      position: absolute;
      text-align: center;
      font-weight: 700;
      color: white;
      text-shadow: 0 2px 6px rgba(0,0,0,0.45);
      font-size: 20px;
      line-height: 1.2;
      width: 70%;
	  font-family: "ITC Lubalin Graph Book Regular";
    }

    /* Formulaire flottant */
    .name-form {
      position: absolute;
      top: calc(50% + 140px);
      left: 50%;
      transform: translate(-50%, 0);
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 12px;
      padding: 10px;
      display: flex;
      gap: 8px;
      align-items: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
      opacity: 0; 
      pointer-events: none;
      transition: opacity .2s ease;
    }
    .name-form.show { opacity: 1; pointer-events: auto; }
    .name-form input {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      color: var(--text);
      padding: 8px 10px;
      border-radius: 8px;
      min-width: 220px;
      outline: none;
    }
    .name-form button {
      /* background: #10b981; */
	  background: var(--heart-color);
      border: none; color: white;
      padding: 8px 12px;
      border-radius: 8px; cursor: pointer;
      font-weight: 600;
    }
    /*.name-form button:hover { background: #0ea371; } */
	.name-form button:hover { background: var(--heart-color-hover); }

    /* Nuage autour du cœur */
    .cloud-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .tag {
      position: absolute;
      padding: 4px 8px;
      border-radius: 999px;
      background: var(--tag-bg);
      border: 1px solid var(--tag-border);
      color: #e5e7eb;
      white-space: nowrap;
      user-select: none;
      transform: translate(-50%, -50%);
      backdrop-filter: blur(2px);
    }

    .legend {
      position: absolute;
      left: 12px;
      bottom: 10px;
      color: #9ca3af;
      font-size: 12px;
      opacity: .85;
    }

.video-wrap{max-width:min(1000px,92vw);margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45);backdrop-filter:blur(0px)}
.video{display:block;width:100%;height:auto;background:#000}
.card{background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:clamp(16px,3vw,32px);max-width:min(900px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.hint{text-align:center;opacity:.9;margin-top:1rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}



/* Noir plein-viewport simple & fiable pour #intro et #video (sans vw et sans fixed) */
#intro,
#video {
  position: relative;
  background: #000;            /* noir dans la section elle-même */
  z-index: 0;
}

/* Le pseudo-élément "élargit" le noir bien au-delà des bords pour masquer la photo */
#intro::after,
#video::after {
  content: "";
  position: absolute;
  inset: 0;                    /* couvre toute la section */
  z-index: -1;                 /* sous le contenu mais au-dessus du fond global */
  /* Le box-shadow "plein-vmax" peint du noir tout autour de la section */
  box-shadow: 0 0 0 100vmax #000;
  /* Ce clip-path autorise le shadow à s'étendre hors du cadre sans créer de scroll */
  clip-path: inset(0 -100vmax);
}


/* MOBILE : contenu plein largeur */
@media (max-width: 768px){
  .panel{ padding-left:16px; padding-right:16px; }

  .video-wrap{
    max-width: 100%;
    margin-left: 0; margin-right: 0;
    border-radius: 0;
  }
  .card{
    max-width: 100%;
    margin-left: 0; margin-right: 0;
    border-radius: 12px;
  }
}

/* TABLETTE+ : on remet des limites élégantes */
@media (min-width: 769px){
  .video-wrap{ max-width: min(1000px, 92vw); margin: 0 auto; border-radius: 16px; }
  .card{ max-width: min(900px, 92vw); margin: 0 auto; }
}