:root {
  /* Couleurs légèrement optimisées */
  --bg-main: #020b12;          /* inchangé */
  --bg-card: #07141f;          /* inchangé */

  /* Doré lumineux mais même luminosité globale → pas de cassure visuelle */
  --gold: #e4c177;             /* plus premium, lisible */
  --gold-soft: #d0b076;        /* cohérence douce */

  /* Texte secondaire en ivoire léger (meilleur contraste sans changer l’équilibre) */
  --text-muted: #e5d8c2;

  /* Ombres conservées pour éviter tout shift */
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.85);

  --radius-xl: 18px;
  --transition-fast: 180ms ease-out;
}

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    html, body {
      max-width: 100%;
      overflow-x: hidden;
    }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
      color: #f7f2e8;
      background: radial-gradient(
        circle at top,
        #31455e 0%,
        #0e1b2c 55%,
        #0a0f18 100%
      );
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
    }

    /* WRAPPER PRINCIPAL */
    .frame {
      width: min(1200px, 100%);
      background: radial-gradient(
        circle at top left,
        #1b2d42 0%,
        #091523 60%
      );
      border-radius: 28px;
      box-shadow: var(--shadow-deep);
      padding: 40px 42px;
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      column-gap: 48px;
      position: relative;
      overflow: hidden;
    }

    .card-stack {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .video-main {
      width: 100%;
      max-width: 380px;
      border-radius: 20px;
      border: 1px solid rgba(213, 180, 106, 0.4);
      cursor: default;
    }

    .content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 24px;
      height: 100%;
    }

    .title-block {
      text-align: left;
    }

    .title-inline {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .title-icon {
      height: 60px;
      margin-bottom: -5px;
      flex-shrink: 0;
    }

    h1 {
      font-size: 44px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gold);
      text-shadow:
        0 0 16px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(0, 0, 0, 0.8);
    }

    .subtitle {
      font-size: 19px;
      color: var(--text-muted);
      letter-spacing: 0.04em;
      margin-top: 4px;
      font-style: italic;
    }

    .divider {
      margin-top: 14px;
      display: flex;
      align-items: center;
      gap: 18px;
      color: rgba(213, 180, 106, 0.7);
      font-size: 18px;
    }

    .divider-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(213, 180, 106, 0.5), transparent);
      opacity: 0.75;
    }

    .divider-symbol {
      width: 30px;
      height: 30px;
	  padding:3px;
      border-radius: 999px;
      border: 1px solid rgba(213, 180, 106, 0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
	  opacity:0.5;
    }

    .nav {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 0;
    }

    .nav-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid rgba(213, 180, 106, 0.4);
      background: radial-gradient(
        circle at 20% 0%,
        rgba(213,180,106,0.18) 0,
        rgba(6, 12, 18, 0.85) 40%,
        rgba(3, 7, 11, 1) 100%
      );
      color: var(--gold);
      font-size: 15px;
      letter-spacing: 0.04em;
      text-transform: none;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.85);
      transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background 220ms ease-out;
    }

    .nav-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 32px rgba(0, 0, 0, 0.9);
      border-color: rgba(255, 229, 170, 0.85);
      background: radial-gradient(
        circle at 20% 0%,
        rgba(255, 230, 176, 0.26) 0,
        rgba(7, 16, 24, 0.95) 42%,
        rgba(3, 6, 10, 1) 100%
      );
    }

    .nav-button:active {
      transform: translateY(0);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9);
    }

    .story {
      margin-top: 8px;
      font-size: 19px;
      line-height: 1.4;
      color: #e7e7e7;
      flex: 1;
      min-height: 310px;
      max-height: 310px;
      overflow-y: auto;
      padding-right: 8px;
    }

    .story p + p {
      margin-top: 8px;
    }

    .story-section {
      display: none;
      font-style: italic;
    }

    .story-section.active {
      display: block;
    }

    .story-center {
      display: flex;
      justify-content: center;
      background-image:url('../images/jollyroger_cat.png');
      background-size:contain;
      background-repeat: no-repeat;
      background-position: center;
      min-height: 300px;
      font-size:30px;
    }

    .gold-text {
      color: var(--gold);
    }

    .vote-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .legal-text {
      font-size: 15px;
      color: gray;
      font-style: italic;
      max-width: 600px;
      margin: 30px auto 0;
      text-align: center;
    }

    .email-link-container {
      text-align: center;
      margin-top: 40px;
    }

    .gold-link {
      color: var(--gold);
      text-decoration: none;
      border-bottom: 1px dotted rgba(213, 180, 106, 0.7);
    }

    .gold-link:hover {
      text-decoration: underline;
    }

    .formemail {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 200px;
      background: radial-gradient(
        circle at top,
        #31455e 0%,
        #0e1b2c 55%,
        #0a0f18 100%
      );
      padding: 32px 26px;
      border-radius: 30px;
      border: 1px solid rgba(213, 180, 106, 0.4);
      max-width: 400px;
      width: 90%;
      box-shadow: var(--shadow-deep);
      display: none;
      z-index: 9999;
    }

    .formemail.visible {
      display: block;
    }

    .email-field {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid rgba(213, 180, 106, 0.4);
      background: radial-gradient(
        circle at 20% 0%,
        rgba(213,180,106,0.18) 0,
        rgba(6, 12, 18, 0.85) 40%,
        rgba(3, 7, 11, 1) 100%
      );
      color: var(--gold);
      font-size: 15px;
      letter-spacing: 0.04em;
      outline: none;
      width: 100%;
      max-width: 320px;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.85);
      transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background 220ms ease-out;
    }

    .email-field::placeholder {
      color: rgba(213, 180, 106, 0.5);
    }

    .email-field:focus {
      border-color: rgba(213, 180, 106, 0.85);
      background: radial-gradient(
        circle at 20% 0%,
        rgba(213,180,106,0.28) 0,
        rgba(6, 12, 18, 0.85) 40%,
        rgba(3, 7, 11, 1) 100%
      );
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.95);
      transform: translateY(-1px);
    }

    .popup-buttons-row {
      margin-top: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      flex-wrap: wrap;
    }

    .email-legal {
      margin-top: 25px;
      text-align: left;
      font-size: 14px;
      color: gray;
      font-style: italic;
    }

    .site-footer {
      margin-top: 20px;
      width: 100%;
      text-align: center;
      font-size: 13px;
      color: gray;
    }

    .mail-message {
      color:var(--gold);
      font-size:18px;
    }

    @media (max-width: 880px) {
      .frame {
        grid-template-columns: 1fr;
        row-gap: 32px;
        padding: 26px 20px 30px;
      }

      .card-stack {
        order: 1;
      }

      .content {
        order: 2;
      }

      h1 {
        font-size: 34px;
      }

      .story {
        font-size: 17px;
      }

      .formemail {
        bottom: 120px;
      }
    }

    #popup-confirm.visible {
      display: block;
    }

    @media (max-width: 580px) {
      .vote-row {
        gap: 12px;
      }

      .nav-button {
        width: 100%;
        max-width: 260px;
      }

      .popup-buttons-row {
        flex-direction: column;
        gap: 10px;
      }
    }
	
	#video {
	  transition: opacity 0.3s ease;
	}

	.fade-out {
	  opacity: 0;
	}

	.fade-in {
	  opacity: 1;
	}
	
	/* --- FIX GALION — VERSION FINALE --- */
	.contact-inside-frame {
	  position: absolute !important;   /* force l’ancrage dans .frame */
	  bottom: 14px !important;
	  right: 14px !important;

	  width: 45px !important;
	  height: 45px !important;

	  background: rgba(8, 12, 18, 0.65) !important;
	  border: 1px solid rgba(213,180,106,0.45) !important;
	  border-radius: 50% !important;
	  padding: 8px !important;

	  display: flex !important;
	  align-items: center;
	  justify-content: center;

	  backdrop-filter: blur(4px);
	  cursor: pointer;
	  transition: 0.2s ease;
	  z-index: 100 !important;
	}

	.contact-inside-frame:hover {
	  background: rgba(213,180,106,0.15) !important;
	  transform: translateY(-2px);
	}
	
	.card-stack {
		position: relative; /* nécessaire pour ancrer l’overlay */
		width: 100%;
		height: 100%;
	}

	.video-main {
		width: 100%;
		height: auto;
		display: block;
	}

	.clenavpar {	
		display: none;
		position: absolute; /* AU LIEU DE relative */
		top: 0;
		left: 0;
		width: 90%;
		height: 98%;

		background: radial-gradient(
			circle at top,
			#31455e 0%,
			#0e1b2c 55%,
			#0a0f18 100%
		);

		padding: 26px; 
		border-radius: 30px;
		border: 1px solid rgba(213, 180, 106, 0.4);
		box-shadow: var(--shadow-deep);
		z-index: 9999;
		display: none;
	}

	.clenavpar.show {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.clenav {
		width: 100%;
		height: 100%;
		border-radius: 30px;

		display: flex;
		justify-content: center;
		align-items: center;

		background-image: url("../images/cleancienne.png");
		background-size: 70%;
		background-repeat: no-repeat;
		background-position: center;

		color: #d0b076;
		font-size: 22px;
		text-align: left;
	}