.portal-page {
  --portal-night: #060b16;
  --portal-blue: #0a1220;
  --portal-ivory: #f3eee2;
  --portal-muted: #b7b9b9;
  --portal-stone: #d8d0c2;
  --portal-gold: #b89151;
  --portal-turquoise: #71aeb2;
  --portal-green: #87a989;
  --portal-red: #a65a51;
  background: radial-gradient(circle at 85% 3%, rgba(113, 174, 178, .08), transparent 30rem), var(--portal-night);
}

.portal-page .site-header { background: rgba(6, 11, 22, .84); }
.portal-page .nav a[aria-current="page"] { color: var(--portal-ivory); border-color: rgba(216, 208, 194, .25); }
.portal-main { overflow: hidden; }
.portal-shell { width: min(74rem, calc(100% - 2.5rem)); margin-inline: auto; }
.portal-hero { position: relative; min-height: 92svh; display: grid; align-items: center; isolation: isolate; overflow: clip; background: radial-gradient(ellipse at 50% 44%, rgba(77, 102, 124, .21), transparent 34rem), linear-gradient(160deg, #071220 0%, #060b16 68%); }
.portal-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .26; background-image: radial-gradient(circle at 14% 22%, rgba(243,238,226,.28) 0 1px, transparent 1.2px), radial-gradient(circle at 72% 74%, rgba(184,145,81,.18) 0 1px, transparent 1.2px); background-size: 8.5rem 8.5rem, 11rem 11rem; }
.portal-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 12rem; z-index: -1; background: linear-gradient(transparent, var(--portal-night)); }
.portal-hero-content { display: grid; justify-items: center; padding: 6.5rem 0 8rem; text-align: center; }
.portal-page .eyebrow { color: var(--portal-stone); }
.portal-hero h1 { max-width: 12ch; color: var(--portal-ivory); font-size: clamp(3rem, 13vw, 7.2rem); text-transform: uppercase; }
.portal-subtitle { margin: 1.35rem 0 0; color: var(--portal-ivory); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 5vw, 2.75rem); line-height: 1.08; }
.portal-hero .lede { max-width: 38ch; color: var(--portal-muted); }
.portal-page .button.primary { color: #0a1220; background: linear-gradient(120deg, #f3eee2, #e1e4de 62%, #c9b283); box-shadow: 0 0 2.2rem rgba(243,238,226,.14); }
.seal { position: relative; width: clamp(13rem, 46vw, 22rem); aspect-ratio: 1; margin-bottom: 1.8rem; }
.seal::before { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(184,145,81,.22); border-radius: 50%; box-shadow: 0 0 3rem rgba(113,174,178,.07); }
.seal-crescent { position: absolute; inset: 9%; border-radius: 50%; background: linear-gradient(145deg, #fffaf0, #bbb4a9 45%, #6f6c68 76%, #ded7ca); box-shadow: inset .45rem -.6rem 1rem rgba(49,45,40,.42), 0 0 2.2rem rgba(243,238,226,.18), 0 0 calc(1.1rem + var(--seal-crack, .1rem)) rgba(166,90,81,.3); transform: rotate(-24deg); }
.seal-crescent::before { content: ""; position: absolute; width: 82%; aspect-ratio: 1; right: -10%; top: -7%; border-radius: 50%; background: var(--portal-blue); box-shadow: -1rem 1.4rem 2.5rem rgba(0,0,0,.32); }
.seal-crescent::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; opacity: .48; background: repeating-linear-gradient(112deg, transparent 0 17%, rgba(57,49,45,.38) 18% 18.6%, transparent 19% 31%); mix-blend-mode: multiply; }
.seal-star { position: absolute; left: 54%; top: 37%; width: 22%; aspect-ratio: 1; background: radial-gradient(circle, #fff 0 19%, #f2eee5 35%, rgba(243,238,226,.16) 61%, transparent 72%); clip-path: polygon(50% 0%, 61% 34%, 97% 35%, 68% 55%, 79% 91%, 50% 70%, 21% 91%, 32% 55%, 3% 35%, 39% 34%); filter: drop-shadow(0 0 1rem rgba(255,255,255,.76)); }
.seal-orbit { position: absolute; left: 48%; top: 31%; width: 34%; aspect-ratio: 1; border: 1px solid transparent; border-top-color: var(--portal-green); border-right-color: rgba(135,169,137,.3); border-radius: 50%; filter: drop-shadow(0 0 .45rem rgba(135,169,137,.65)); animation: portal-orbit 28s linear infinite; }
.seal-crack { position: absolute; width: 1px; height: 30%; left: 30%; top: 46%; opacity: .1; background: linear-gradient(transparent, rgba(166,90,81,.88), transparent); box-shadow: .35rem .2rem .8rem rgba(166,90,81,.75); transform: rotate(43deg); transition: opacity 1.4s ease; }
.seal-crack--two { left: 46%; top: 57%; height: 22%; transform: rotate(69deg); }
.seal-crack--three { left: 25%; top: 34%; height: 16%; transform: rotate(88deg); }
html[data-portal-depth="1"] .seal-crack { opacity: .26; }

.portal-section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.portal-intro { max-width: 45rem; margin-inline: auto; padding-block: clamp(4.5rem, 11vw, 8rem); text-align: center; }
.portal-intro p { margin: 0; color: var(--portal-ivory); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 6vw, 3.4rem); line-height: 1.18; }
.portal-intro p + p { margin-top: 1rem; color: var(--portal-muted); font-family: inherit; font-size: 1rem; line-height: 1.75; }
.scene-grid { display: grid; gap: 1.8rem; align-items: center; }
.scene-copy h2, .radar-copy h2, .closed-passage h2 { color: var(--portal-ivory); }
.scene-copy p, .radar-copy > p { color: var(--portal-muted); line-height: 1.72; }
.scene-figure { margin: 0; }
.scene-frame { overflow: hidden; border: 1px solid rgba(216,208,194,.23); border-radius: 1.3rem; background: #101725; box-shadow: 0 1.8rem 4rem rgba(0,0,0,.32); }
.scene-frame img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.scene-frame--medracen { padding: .35rem; box-shadow: 0 0 0 1px rgba(113,174,178,.08), 0 1.8rem 4rem rgba(0,0,0,.32); }
.scene-frame--medracen img { border-radius: 1rem; }
.narrative-note { margin: .8rem 0 0; color: #aeb3b8; font-size: .8rem; line-height: 1.45; }
.tassili-section { background: linear-gradient(180deg, rgba(13,26,43,.42), transparent); }
.tassili-card { max-width: 37rem; margin-left: auto; border: 1px solid rgba(216,208,194,.18); border-radius: 1.2rem; padding: .4rem; background: rgba(255,255,255,.035); }
.tassili-archive { overflow: hidden; border: 1px solid rgba(216,208,194,.19); border-radius: .9rem; background: #181817; }
.tassili-archive img { display: block; width: 100%; height: auto; }
.hoggar { padding-inline: 0; }
.hoggar .scene-frame { border-radius: 0; border-inline: 0; }
.hoggar .scene-copy { width: min(74rem, calc(100% - 2.5rem)); margin: 2rem auto 0; }
.hoggar .scene-frame img { object-position: center; }
.portal-page .scene-frame--tazir { border-color: rgba(166,90,81,.26); }
.fiction-label { display: inline-block; margin-bottom: 1rem; border: 1px solid rgba(166,90,81,.48); border-radius: 999px; padding: .4rem .72rem; color: #dbb1a9; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.radar { border-block: 1px solid rgba(216,208,194,.14); background: linear-gradient(135deg, rgba(113,174,178,.05), transparent 58%); }
.radar-grid { display: grid; gap: .85rem; margin-top: 2rem; }
.radar-card { min-height: 12rem; border: 1px solid rgba(216,208,194,.18); border-radius: 1rem; padding: 1.25rem; background: rgba(255,255,255,.035); }
.radar-card span { color: var(--portal-turquoise); font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.radar-card h3 { margin-top: .55rem; color: var(--portal-ivory); }
.radar-card p { color: var(--portal-muted); font-size: .92rem; line-height: 1.6; }
.closed-passage { min-height: 30rem; display: grid; place-items: center; padding-block: 5rem; text-align: center; background: radial-gradient(circle at 50% 50%, rgba(243,238,226,.055), transparent 18rem); }
.closed-ring { width: 8rem; aspect-ratio: 1; margin-bottom: 1.6rem; border: 1px solid rgba(216,208,194,.28); border-radius: 50%; box-shadow: inset 0 0 2rem rgba(243,238,226,.06), 0 0 2rem rgba(113,174,178,.06); }
.closed-passage p { max-width: 30ch; color: var(--portal-muted); line-height: 1.7; }

@keyframes portal-orbit { to { transform: rotate(1turn); } }
@media (min-width: 760px) {
  .scene-grid { grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr); gap: clamp(2rem, 7vw, 6rem); }
  .scene-grid--reverse { grid-template-columns: minmax(17rem, .85fr) minmax(0, 1.15fr); }
  .scene-grid--reverse .scene-copy { order: -1; }
  .radar-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .seal-orbit { animation: none; } }
html[data-motion="off"] .seal-orbit { animation: none; }
/* Introduction de première visite — isolée du contenu du Portail des univers. */
.intro-bypassed .portal-introduction { display: none; }
.portal-intro-locked,
.portal-intro-locked body { overflow: hidden; }

.portal-introduction {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  width: 100vw;
  min-height: 100svh;
  padding: clamp(1rem, 3vw, 3rem);
  color: #f7efe3;
  background: #07101b;
  transition: opacity .8s ease, visibility .8s ease;
}

.portal-introduction::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 50% 32%, rgba(37, 56, 67, .32), transparent 38%), linear-gradient(135deg, #09111c 10%, #121815 55%, #05090e);
}

.portal-introduction__texture {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(rgba(255,255,255,.32) .55px, transparent .7px), radial-gradient(rgba(207,177,126,.36) .5px, transparent .8px);
  background-size: 31px 31px, 47px 47px;
  background-position: 0 0, 13px 17px;
  pointer-events: none;
}

.portal-introduction__brand {
  position: absolute;
  z-index: 5;
  top: clamp(1.2rem, 3vw, 2.6rem);
  left: clamp(1rem, 3vw, 2.25rem);
  max-width: calc(100vw - 2rem);
  color: #f8f1e6;
  font-size: .9rem;
  letter-spacing: .04em;
}

.portal-stage {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(112vw, 1460px);
  aspect-ratio: 5 / 4;
  overflow: hidden;
  transform: translate(-50%, -50%);
  filter: saturate(.76) contrast(1.04) brightness(.72);
}

.portal-stage__image,
.portal-stage__door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.portal-stage__image { object-fit: cover; }

.portal-stage__aperture {
  position: absolute;
  z-index: 1;
  top: 27.5%;
  left: 25.2%;
  width: 49.6%;
  height: 59.5%;
  border-radius: 48% 48% 7% 7% / 23% 23% 3% 3%;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(250, 248, 235, .98), rgba(221, 220, 203, .7) 25%, rgba(82, 86, 82, .82) 60%, #0b1011 100%);
  box-shadow: 0 0 2.5rem rgba(241, 239, 216, .42), inset 0 0 5rem rgba(253, 248, 232, .42);
  transition: opacity 1.5s ease .8s;
}

.portal-stage__door {
  z-index: 2;
  top: 28%;
  width: 25%;
  height: 59%;
  inset-inline: auto;
  border: 1px solid rgba(192, 166, 118, .24);
  background-image: url("images/portal-algerie/portail-accueil-dupsy.png");
  background-repeat: no-repeat;
  background-size: 400% 170%;
  box-shadow: inset 0 0 2.4rem rgba(0, 0, 0, .4);
  transition: transform 2.9s cubic-bezier(.2, .74, .22, 1), filter 1s ease;
}

.portal-stage__door--left { left: 25%; transform-origin: left center; background-position: 37.3% 48.5%; }
.portal-stage__door--right { right: 25%; transform-origin: right center; background-position: 62.7% 48.5%; }

.portal-stage__seam {
  position: absolute;
  z-index: 4;
  top: 29%;
  bottom: 13%;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: rgba(245, 237, 212, .42);
  box-shadow: 0 0 10px rgba(255, 247, 218, .42);
  transition: width 1.2s ease .45s, opacity .8s ease 2.2s, box-shadow 1.3s ease .45s;
}

.portal-stage__mist {
  position: absolute;
  z-index: 5;
  right: 5%;
  bottom: 3%;
  left: 5%;
  height: 30%;
  opacity: 0;
  background: radial-gradient(ellipse at 20% 70%, rgba(226, 213, 186, .34), transparent 43%), radial-gradient(ellipse at 72% 80%, rgba(220, 209, 186, .32), transparent 47%), linear-gradient(180deg, transparent, rgba(220, 214, 195, .18));
  filter: blur(12px);
  transition: opacity 1.6s ease .9s, transform 2.8s ease .9s;
}

.dupsy-guide {
  position: absolute;
  z-index: 3;
  right: clamp(7%, 12vw, 19%);
  bottom: clamp(2rem, 8vh, 4.5rem);
  display: grid;
  justify-items: center;
  gap: .4rem;
  color: #f4e7c9;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px #000;
}

.dupsy-guide__portrait {
  display: block;
  width: clamp(78px, 10vw, 126px);
  aspect-ratio: 1;
  border: 1px solid rgba(240, 226, 192, .44);
  border-radius: 54% 46% 48% 52%;
  background: url("images/portal-algerie/hoggar-dupsy.png") 16% 88% / 780% auto no-repeat, #372b1c;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .35);
}

.portal-introduction__content {
  z-index: 4;
  width: min(100%, 660px);
  margin-top: min(47vh, 22rem);
  padding: clamp(1rem, 3vw, 1.65rem);
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .86);
}

.portal-introduction__content .eyebrow { margin-bottom: .5rem; color: #dec98f; }
.portal-introduction__content h1 { margin: 0; color: #fff8ee; font-family: var(--font-display, Georgia, serif); font-size: clamp(1.75rem, 4.7vw, 3.4rem); }
.portal-introduction__subtitle { margin: .9rem auto .55rem; max-width: 61ch; font-size: clamp(.9rem, 1.5vw, 1.07rem); line-height: 1.6; }
.portal-introduction__audio-status { min-height: 1.4em; margin: 0 0 .95rem; color: #e4d5ad; font-size: .82rem; }
.portal-introduction__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; }
.portal-introduction .button { min-height: 2.75rem; }
.portal-introduction .secondary { border-color: rgba(244, 232, 203, .68); background: rgba(6, 13, 16, .45); color: #fff8ef; }
.intro-skip { border: 0; padding: .55rem .25rem; color: #e5dfd2; background: transparent; font: inherit; font-size: .83rem; text-decoration: underline; text-underline-offset: .2rem; cursor: pointer; }

.portal-introduction.is-opening .portal-stage { animation: portal-soft-vibration .5s ease-in-out 2; }
.portal-introduction.is-opening .portal-stage__seam { width: 14px; opacity: 0; box-shadow: 0 0 34px 12px rgba(255, 250, 230, .92); }
.portal-introduction.is-opening .portal-stage__aperture { opacity: 1; }
.portal-introduction.is-opening .portal-stage__door { filter: brightness(1.08); }
.portal-introduction.is-opening .portal-stage__door--left { transform: perspective(620px) rotateY(-53deg) translateX(-14%); }
.portal-introduction.is-opening .portal-stage__door--right { transform: perspective(620px) rotateY(53deg) translateX(14%); }
.portal-introduction.is-opening .portal-stage__mist { opacity: 1; transform: translateY(-8%); }
.portal-introduction.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes portal-soft-vibration { 25% { transform: translate(-50.3%, -50.1%); } 50% { transform: translate(-49.7%, -50%); } 75% { transform: translate(-50%, -49.9%); } }

@media (max-width: 650px) {
  .portal-stage { width: 132vw; top: 45%; }
  .portal-introduction__content { margin-top: 50vh; padding: .75rem .2rem; }
  .portal-introduction__subtitle { max-width: 39ch; font-size: .86rem; }
  .dupsy-guide { right: 4%; bottom: 19%; }
  .dupsy-guide__portrait { width: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-introduction { display: none; }
}