/* ==========================================================
   INC_GENESE.CSS — L'Écho du Temps
   Structure :
     1. Variables & Reset
     2. Body & Layout racine
     3. Frame (conteneur principal)
     4. Card-stack & Scène image
     5. Titre & Séparateur
     6. Navigation (menu-icons)
     7. Contenu / Story
     8. Boutons & Liens
     9. Partage & Footer
    10. Popups
    11. Responsive — Tablette (≤ 880px)
    12. Responsive — Mobile (≤ 580px)
   ========================================================== */

/* ==========================================================
   0. FONTS LOCALES (variable fonts, zéro requête externe)
   ========================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style:  normal;
  font-display: swap;
}


/* ==========================================================
   1. VARIABLES & RESET
   ========================================================== */

:root {
  --gold:            #e6bf72;
  --text-muted:      #d1c0a6;
  --shadow-deep:     0 30px 80px rgba(0, 0, 0, 0.85);
  --transition-fast: 180ms ease-out;
}

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

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


/* ==========================================================
   2. BODY & LAYOUT RACINE
   ========================================================== */

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

body {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: flex-start;
  height:         auto;
  padding:        30px 50px 20px;

  font-family: 'Cormorant Garamond', serif;
  color:       #f7f2e8;

  background:
    radial-gradient(circle at 64% 45%, rgba(10, 54, 72, .34),      transparent 48%),
    radial-gradient(circle at 72% 38%, rgba(205, 155, 70, .07),    transparent 34%),
    linear-gradient(90deg, #071018 0%, #06121a 48%, #020506 100%);
}


/* ==========================================================
   3. FRAME (conteneur principal)
   ========================================================== */

.frame {
  position:   relative;
  overflow:   hidden;
  width:      min(1100px, 100%);
  height:     auto;
  min-height: auto;
  margin-top: 15px;
  padding:    40px 42px 10px;

  display:               grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows:    auto auto;
  gap:                   0px 42px;

  border-radius: 24px;
  border:        1px solid rgba(212, 175, 95, 0.22);

  background:
    radial-gradient(circle at 50% 12%, rgba(198, 138, 58, 0.06), transparent 34%),
    radial-gradient(circle at 50% 45%, rgba(16, 74, 96, 0.18),   transparent 52%),
    linear-gradient(180deg, #001724 0%, #000e19 55%, #00070d 100%);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 230, 170, 0.04);
}

/* Bordure interne dorée */
.frame::before {
  content:        "";
  position:       absolute;
  inset:          10px;
  border-radius:  22px;
  border:         1px solid rgba(212, 175, 95, .28);
  pointer-events: none;
  z-index:        1;
  box-shadow:     inset 0 0 120px rgba(0, 0, 0, .22);
}

/* Grain & lueurs décoratives */
.frame::after {
  content:        "";
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        0;
  opacity:        .5;
  border:         1px solid rgba(212, 175, 95, .12);

  background:
    radial-gradient(circle at 65% 22%, rgba(210, 165, 85, .055), transparent 28%),
    radial-gradient(circle at 68% 55%, rgba(18, 72, 96, .09),    transparent 42%),
    url('../images/grain.webp');

  background-size: auto, auto, 300px;
  mix-blend-mode:  soft-light;
}

/* Tous les enfants directs au-dessus des pseudo-éléments */
.frame > * {
  position: relative;
  z-index:  2;
}


/* ==========================================================
   4. CARD-STACK & SCÈNE IMAGE
   ========================================================== */

.card-stack {
  position:   relative;
  min-height: 0;
  grid-column: 1;
  grid-row:    1;

  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             5px;

  justify-self: center;
  align-self:   start;
  width:        100%;
  max-width:    400px;
  margin-bottom: 10px;
  padding:      15px 15px 17px;

  overflow:      hidden;
  border-radius: 20px;

  background: linear-gradient(150deg, rgba(10, 18, 23, .72), rgba(5, 6, 7, .90));

  box-shadow:
    inset 0 1px 0 rgba(255, 230, 170, 0.05),
    0 20px 45px rgba(0, 0, 0, 0.45);
}

/* Bordures décoratives de la card */
.card-stack::before,
.card-stack::after {
  content:        "";
  position:       absolute;
  pointer-events: none;
  border-radius:  20px;
  z-index:        1;
}

.card-stack::before {
  inset:  9px;
  border: 1px solid rgba(196, 150, 72, .20);
}

.card-stack::after {
  inset:  17px;
  border: 1px solid rgba(20, 42, 54, .15);
}

/* Scène image (conteneur + images) */

.scene-container {
  position:      relative;
  overflow:      hidden;
  border-radius: 18px;
  width:         100%;
  max-width:     520px;
  aspect-ratio:  181 / 241;
  height:        auto;
  margin:        0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  opacity:       0.85;
  z-index:       2;
}

.scene {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  display:         block;
  border-radius:   18px;

  opacity:    0;
  z-index:    1;
  transform:  scale(1);
  transition:
    opacity   1.8s ease,
    transform 2.8s ease;

  pointer-events: none;
  will-change:    opacity, transform;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.scene.active   { opacity: 1; z-index: 2; }
.scene.fade-out { opacity: 0; }

#scene1.active  { z-index: 2; }
#scene2         { }
#scene2.active  { z-index: 4; }
#scene2.fade-out{ opacity: 0; z-index: 4; }
#scene3         { z-index: 3; }
#scene3.active  { opacity: 1; z-index: 5; }


/* ==========================================================
   5. TITRE & SÉPARATEUR
   ========================================================== */

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

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

.title-inline h1 {
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:  0;
  padding: 0;
  gap:     0;
}

.title-inline img {
  display:    block;
  margin:     0;
  padding:    0;
  flex-shrink: 1;
}

.title-icon {
  height:     64px;
  flex-shrink: 0;
}

.mobile-break {
  display: none;
}

h1 {
  font-family:        'Cormorant Garamond', serif;
  font-size:          clamp(42px, 4vw, 64px);
  font-weight:        600;
  line-height:        0.92;
  letter-spacing:     0.025em;
  font-optical-sizing: auto;
  color:              #e7bf69;

  text-shadow:
    0 1px 0  rgba(255, 230, 180, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.85),
    0 0 28px  rgba(212, 175, 55, 0.08);
}

/* Icône animée (lettre O du titre) */
.o-icon {
  height:           64px;
  vertical-align:   middle;
  margin-left:      -2px;
  margin-right:     -2px;
  cursor:           pointer;
  transform-origin: center;
  animation:        heartbeat 3.2s ease-in-out infinite;
}

.o-icon:hover {
  animation:  none;
  transform:  scale(1.1);
  transition: transform .25s ease;
}

@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.09); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.05); }
  56%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Sous-titre */
.subtitle {
  margin-top:     10px;
  font-size:      1.2em;
  font-style:     italic;
  letter-spacing: .03em;
  text-align:     center;
  color:          #b89b63;
  text-shadow:    0 0 4px rgba(215, 170, 80, .08);
}

/* Séparateur */
.divider {
  display:     flex;
  align-items: center;
  gap:         18px;
  margin-top:  0;
  margin-bottom: -10px;
  color:       rgba(213, 180, 106, 0.7);
  font-size:   18px;
}

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

.divider-symbol {
  width:           40px;
  height:          40px;
  padding:         3px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
  opacity:         0.5;
}

.divider-symbol img {
  width:      100%;
  height:     100%;
  display:    block;
  object-fit: contain;
}


/* ==========================================================
   6. NAVIGATION (menu-icons)
   ========================================================== */

.menu-icons {
  position:        relative;
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  width:           100%;
  margin:          0 auto 5px auto;
}

/* Ligne de séparation basse */
.menu-icons::after {
  content:   "";
  position:  absolute;
  left:      50%;
  top:       80px;
  transform: translateX(-50%);
  width:     100%;
  height:    0.5px;
  background: linear-gradient(90deg, transparent, rgba(201, 134, 47, .45), transparent);
}

.menu-item {
  position:        relative;
  flex:            1 1 0;
  width:           auto;
  min-width:       0;
  min-height:      auto;
  height:          auto;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  gap:             6px;
  padding:         0 0 8px 0;

  background: none;
  border:     none;
  cursor:     pointer;

  font-family:    'Cormorant Garamond', serif;
  font-size:      16px;
  line-height:    1.05;
  text-align:     center;
  color:          #c8a15b;
  opacity:        .82;
}

/* Séparateur vertical entre items */
.menu-item:not(:last-child)::after {
  content:   "";
  position:  absolute;
  right:     0;
  top:       4px;
  width:     1px;
  height:    58px;
  background: linear-gradient(to bottom, transparent, rgba(200, 161, 91, .45), transparent);
}

.menu-item:hover {
  opacity:   1;
  color:     #e2bf78;
  transform: translateY(-2px);
}

.menu-icon {
  width:      30px;
  height:     30px;
  margin-bottom: 0;
  object-fit: contain;
  opacity:    .88;
  transition:
    transform .35s ease,
    filter    .35s ease;

  filter:
    drop-shadow(0 0 2px rgba(255, 220, 150, .18))
    drop-shadow(0 0 8px rgba(200, 161, 91,  .08));
}

.menu-item:hover .menu-icon {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 3px  rgba(255, 225, 160, .28))
    drop-shadow(0 0 12px rgba(200, 161, 91,  .18));
}

/* Entrée temporaire pour l'Énigme des Précurseurs */
.enigme-menu .menu-icon {
  opacity: .9;
}

.enigme-menu span {
  letter-spacing: .04em;
}


/* ==========================================================
   7. CONTENU / STORY
   ========================================================== */

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

/* Reflet doré discret derrière le texte */
.content::before {
  content:        "";
  position:       absolute;
  inset:          80px 20px 30px 20px;
  pointer-events: none;
  z-index:        -1;
  opacity:        .35;

  background: linear-gradient(
    115deg,
    transparent            0%,
    rgba(212, 175, 55, .035) 42%,
    transparent            62%
  );
}

/* Boussole (section d'accueil) */
.zone-boussole {
  position:   relative;
  overflow:   hidden;
  min-height: 300px;
  margin-top: -10px;
}

.zone-boussole::before {
  content:        "";
  position:       absolute;
  inset:          0;
  z-index:        0;
  pointer-events: none;
  opacity:        .80;

  background-image:    url('../images/cat.webp');
  background-repeat:   no-repeat;
  background-position: center center;
  background-size:     100% auto;

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 62%, transparent 100%);
  mask-image:         linear-gradient(to bottom, transparent 0%, black 22%, black 62%, transparent 100%);
}

.story-center {
  display:          flex;
  justify-content:  center;
  align-items:      center;
  min-height:       330px;
  font-size:        30px;
  overflow:         hidden;
  position:         relative;
  overscroll-behavior: none;
  z-index:          1;
}

/* Icône énigme — coin haut gauche + halo lumineux discret */
.enigme-icon {
  position: absolute;
  top:      20px;
  left:     20px;
  height:   90px;
  opacity:0.8;

  filter: drop-shadow(0 0 4px rgba(230, 191, 114, 0.45));
  animation: enigme-glow 3.2s ease-in-out infinite;
}

@keyframes enigme-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(230, 191, 114, 0.25)); }
  50%      { filter: drop-shadow(0 0 6px rgba(230, 191, 114, 0.65)); }
}

/* Conteneur scrollable des sections */
.story {
  margin-top: 15px;
  font-size:  19px;
  line-height: 1.4;
  color:      #efe2c7;
  flex:       1;
  min-height: 305px;
  max-height: 305px;
  overflow:   hidden;
  overflow-y: auto;
  padding-right: 8px;

  scrollbar-width:    none;
  -ms-overflow-style: none;

  /* Fondu bas pour suggérer le scroll */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
  mask-image:         linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
}

.story::-webkit-scrollbar {
  display: none;
}

/* Sections de contenu (cachées par défaut, affichées via JS) */
.story-section {
  display:        none;
  font-size:      19px;
  line-height:    1.58;
  letter-spacing: 0.01em;
  color:          #c6b08d;
  padding-bottom: 100px;

  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}

/* Puce décorative (✦) */
.story-section p.with-dot {
  position:    relative;
  padding-left: 24px;
}

.story-section p.with-dot::before {
  content:  "✦";
  position: absolute;
  left:     0;
  top:      5px;
  font-size: 14px;
  color:    rgba(191, 158, 112, 0.85);
  text-shadow: 0 0 6px rgba(220, 180, 90, 0.5);
}

.with-dot span {
  display:     block;
  margin-left: 30px;
}

/* Vote */
.vote-row {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             20px;
  margin-top:      20px;
  flex-wrap:       wrap;
}

.vote-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         5px 12px;

  font-family:    'Cormorant Garamond', serif;
  font-size:      1.1em;
  letter-spacing: 0.03em;
  color:          #e4bc67;

  background: linear-gradient(180deg, rgba(255, 215, 140, 0.08), rgba(255, 215, 140, 0.02));
  border-color:   rgba(214, 174, 92, 0.45);
  border-radius:  2px;
  cursor:         pointer;
  backdrop-filter: blur(3px);

  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.08),
    0 0 12px rgba(214, 174, 92, 0.05);

  transition:
    transform     .25s ease,
    box-shadow    .25s ease,
    border-color  .25s ease,
    color         .25s ease;
}

.vote-btn:hover {
  transform:    translateY(-2px);
  border-color: rgba(240, 200, 110, 0.9);
  color:        #ffd98a;
}

.vote-btn:active {
  transform: translateY(0);
}

/* Zone Ulule */
.ulule-zone {
  position:      relative;
  padding:       20px 0 20px;
  margin:        0 0 22px;
}

.ulule-zone::before,
.ulule-zone::after {
  content:   "";
  position:  absolute;
  left:      50%;
  transform: translateX(-50%);
  width:     220px;
  height:    1px;
  background: linear-gradient(90deg, transparent, rgba(201, 134, 47, .45), transparent);
}

.ulule-zone::before { top:    0; }
.ulule-zone::after  { bottom: 0; }

.ulule-link {
  font-weight:              600;
  color:                    #cba45e;
  text-decoration-color:    #cba45e;
  text-decoration-thickness: 1px;
  text-underline-offset:    3px;
  margin-top:               8px;
  margin-bottom:            8px;
  transition:               all .25s ease;
  text-shadow:              0 0 10px rgba(201, 134, 47, .18);
}

.ulule-link:hover {
  color:       #f1d28a;
  text-shadow: 0 0 16px rgba(239, 191, 104, .35);
}

/* Mention légale sondage */
.legal-text {
  font-size:  15px;
  color:      gray;
  max-width:  600px;
  margin:     10px auto 0;
  text-align: left;
}


/* ==========================================================
   8. BOUTONS (brown-btn)
   ========================================================== */

.brown-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         5px 10px;

  font-family:    'Cormorant Garamond', serif;
  font-size:      1.15rem;
  letter-spacing: .03em;
  color:          #d6b27a;
  cursor:         pointer;

  background: linear-gradient(180deg, rgba(26, 38, 47, .96) 0%, rgba(12, 18, 24, .99) 100%);
  border:        1px solid rgba(190, 145, 88, .34);
  border-radius: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255, 225, 170, .06),
    0 10px 24px rgba(0, 0, 0, .35);

  transition:
    transform     .25s ease,
    box-shadow    .25s ease,
    border-color  .25s ease,
    color         .25s ease,
    background    .25s ease;
}

.brown-btn:hover {
  transform:    translateY(-2px);
  color:        #f0cf96;
  border-color: rgba(220, 175, 105, .55);

  background: linear-gradient(180deg, rgba(34, 48, 58, .98) 0%, rgba(15, 22, 28, 1) 100%);

  box-shadow:
    inset 0 1px 0 rgba(255, 235, 185, .10),
    0 14px 30px rgba(0, 0, 0, .42),
    0 0 18px rgba(190, 145, 88, .08);
}

.brown-btn:active {
  transform: translateY(0);
}


/* ==========================================================
   9. PARTAGE & FOOTER
   ========================================================== */

.share-story {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             14px;
  margin-top:      30px;
  opacity:         0.75;
  width:           100%;
  text-align:      center;
}

.share-story span {
  font-size:      18px;
  letter-spacing: 0.04em;
  color:          #c9a45c;
  opacity:        0.9;
}

.share-icons {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             14px;
}

.share-icons img {
  width:      35px;
  height:     auto;
  opacity:    0.65;
  transition: 0.3s ease;
}

.share-icons img:hover {
  opacity:   1;
  transform: scale(1.12);
}

/* Discord — tooltip copie lien */
.discord-share {
  position: relative;
}

.discord-share::after {
  content:        attr(data-tooltip);
  position:       absolute;
  left:           50%;
  bottom:         -42px;
  transform:      translateX(-50%) translateY(6px);
  padding:        8px 14px;
  white-space:    nowrap;

  background:    rgba(15, 22, 28, 0.94);
  border:        1px solid rgba(214, 174, 92, 0.45);
  border-radius: 10px;

  color:     #d6ae5c;
  font-size: 0.9rem;

  opacity:         0;
  pointer-events:  none;
  transition:
    opacity   .25s ease,
    transform .25s ease;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.discord-share:hover::after {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

.copied {
  filter:
    drop-shadow(0 0 10px rgba(214, 174, 92, 0.7))
    brightness(1.2);
}

/* Footer */
.site-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  width:           100%;
  max-width:       1200px;
  margin:          0 auto;
  padding-top:     10px;
  padding-right:   40px;
  font-size:       14px;
  color:           #c9a45c;
}

.footer-text {
  flex:        1;
  padding-left: 80px;
  text-align:  left;
  font-size:   13px;
  opacity:     0.5;
  position:    relative;
  top:         -5px;
}


/* ==========================================================
   10. POPUPS
   ========================================================== */

.popup-box {
  position:  absolute;
  left:      50%;
  transform: translateX(-50%);
  top:    	50px;
  padding:   15px 13px;
  max-width: 400px;
  width:     90%;
  display:   none;
  z-index:   9999;

  background: radial-gradient(circle at top, #18222b 0%, #111820 48%, #080b0e 100%);
  border:        1px solid rgba(213, 180, 106, 0.4);
  border-radius: 30px;
  box-shadow:    var(--shadow-deep);
}

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

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

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


#popup-video {
  max-width: 900px;
  padding:   16px;
}

#popup-video video {
  width:         100%;
  max-height:    62vh;
  object-fit:    contain;
  border-radius: 8px;
  display:       block;
}

.video-link {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  color:           var(--gold);
  font-family:     var(--font-body);
  font-size:       0.95em;
  letter-spacing:  0.04em;
  text-decoration: none;
  border:          1px solid rgba(213, 180, 106, 0.35);
  border-radius:   20px;
  padding:         3px 8px;
  margin : 		   20px 20px;
  transition:      background 0.2s, border-color 0.2s;
}

.video-link:hover {
  background:    rgba(213, 180, 106, 0.1);
  border-color:  rgba(213, 180, 106, 0.7);
}


/* ==========================================================
   11. RESPONSIVE — TABLETTE / MOBILE (≤ 880px)
   ========================================================== */

@media (max-width: 880px) { /*880*/

  html,
  body {
    height:     auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    padding:         16px 10px;
    justify-content: flex-start;
    align-items:     center;
    overflow-x:      hidden;

    /* Fond "ardoise nocturne" — rapproché des tons de la zone boussole */
    background:
      radial-gradient(circle at 65% 18%, rgba(196, 135, 58, .14), transparent 32%),
      radial-gradient(circle at 25% 80%, rgba(28, 60, 76, .45),   transparent 38%),
      linear-gradient(180deg, #2e3f50 0%, #26323f 60%, #1c2733 100%);
  }

  .frame {
    grid-template-columns: 1fr;
    row-gap:    22px;
    column-gap: 0;
    padding:    24px 14px 28px;
    width:      calc(100vw - 20px);
    max-width:  100%;
    overflow:   hidden;

    /* Frame rapprochée des tons de la zone boussole */
    background:
      radial-gradient(circle at 50% 12%, rgba(198, 138, 58, 0.09), transparent 34%),
      radial-gradient(circle at 50% 45%, rgba(16, 74, 96, 0.45),   transparent 52%),
      linear-gradient(180deg, #324456 0%, #2a3845 55%, #212e3a 100%);
  }

  .frame::before {
    inset:         8px;
    border-radius: 18px;
  }

  /* Card & image pleine largeur */
  .card-stack,
  .content {
    grid-column:  1 / -1 !important;
    grid-row:     auto !important;
    justify-self: stretch;
    width:        100%;
    max-width:    100%;
  }

  .card-stack {
    min-height: auto;
    padding:    10px;
    margin:     0 auto;
    align-self: start;
    overflow:   visible;

    /* Card rapprochée des tons de la zone boussole */
    background: linear-gradient(150deg, rgba(34, 50, 66, .94), rgba(26, 39, 51, .97));
  }

  .scene-container {
    width:     100% !important;
    max-width: 100% !important;
    height:    auto;
    margin:    0 auto;
    opacity:   1; /* Retiré l'opacité réduite : illisible sur smartphone */
    aspect-ratio: 181 / 241;
    background: linear-gradient(150deg, #2c3f52 0%, #233547 100%); /* fond neutre derrière le PNG détouré */
  }

  .content {
    height: auto;
  }

  /* Titre */
  .title-block  { text-align:      center; }
  .title-inline { justify-content: center; flex-wrap: wrap; }

  h1 {
    width:           100%;
    font-size:       clamp(28px, 10vw, 42px);
    line-height:     1;
    text-align:      center;
    white-space:     normal;
    flex-wrap:       wrap;
    justify-content: center;
    color:           #f7e3ad; /* Plus lumineux sur fond sombre mobile */
  }

  h1 img {
    height:       42px !important;
    margin-right: 10px !important;
  }

  .subtitle {
    text-align:  center;
    font-size:   16px;
    line-height: 1.35;
  }

  /* Navigation 2 colonnes sur mobile */
  .menu-icons {
    width:                 100%;
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   18px 8px;
  }

  .menu-item {
    width:     auto;
    min-width: 0;
    font-size: 15px;
  }

  .menu-item.enigme-menu {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(240px, 100%);
  }

  .menu-item::after {
    display: none; /* Séparateurs verticaux supprimés */
  }

  /* Story : texte plus clair + pas de masque de fondu */
  .story {
    -webkit-mask-image: none;
    mask-image:         none;
    min-height:         auto;
    max-height:         none;
    overflow:           visible;
  }

  .story-section {
    color:     #ece1c8; /* Plus lisible que #ddd0b4 sur smartphone */
    font-size: 17px;
  }

  .story-center {
    min-height:      220px;
    background-size: 260px auto;
    background-position: center center;
  }

  .zone-boussole {
    min-height: 150px;
    margin-top: -20px;
  }

  /* Éléments décoratifs plus visibles */
  .divider-symbol { opacity: 0.8; }  /* était 0.5 */
  .share-story    { opacity: 1;   }  /* était 0.75 */
  .footer-text    { opacity: 0.75; } /* était 0.5 */

  /* Popups & misc */
  .popup-box {
    bottom: 120px;
  }

  .site-footer {
    padding-right:   0;
    justify-content: center;
  }

  .footer-text {
    margin-left: 0;
    text-align:  center;
  }
}


/* ==========================================================
   12. RESPONSIVE — PETIT MOBILE (≤ 580px)
   ========================================================== */

@media (max-width: 580px) {

  h1 {
    font-size:      clamp(24px, 9vw, 32px);
    letter-spacing: 0.025em;
    text-shadow:
      0 2px 10px rgba(0, 0, 0, 1),
      0 0 30px rgba(212, 175, 55, 0.15);
  }

  h1 img {
    height:       34px !important;
    margin-right: 8px !important;
  }

  .o-icon { height: 28px; }

  .subtitle { font-size: 16px; }

  /* Texte encore plus contrasté sous le soleil */
  .story-section {
    color:       #f5ecd9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  }

  .mobile-break {
    display: block;
  }

  .subtitle {
    line-height: 1.45;
    text-align:  center;
  }

  .card-stack { min-height: 320px; }

  .vote-row { gap: 12px; }

  .popup-buttons-row {
    flex-direction: column;
    gap:            10px;
  }

  .share-story {
    flex-direction: column;
    gap:            12px;
  }
}