/* ============================================================
   22ème Arkane — page d'accueil
   Scène 16:9 centrée : le camion (accueil) et le désert vide
   (vue projet) partagent la MÊME géométrie → bascule invisible,
   et les vignettes restent calées sur le camion à toute taille.
   ============================================================ */

:root {
  --bg:            #05070c;
  --bg-soft:       #0a0e18;
  --gold:          #d9b877;
  --cyan:          #4fd6d0;
  --txt:           #e8f0f2;
  --txt-dim:       #9fb0b8;

  --pandora:       #7b6cff;
  --youtube:       #ff4d5e;
  --arklight:      #ffcf4d;
  --rezo:          #6fe8a0;

  --ease:          cubic-bezier(.4, .0, .2, 1);
}

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

html, body {
  height: 100%;
  background: #000;
  color: var(--txt);
  font-family: "Segoe UI", "Inter", system-ui, sans-serif;
  overflow: hidden;
}

/* ============================================================
   SCÈNE 16:9
   ============================================================ */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;          /* letterbox = noir = ciel des images */
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, 177.78vh);   /* 16/9 → tient toujours dans l'écran */
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Désert vide (dessous) */
.stage-desert {
  z-index: 0;
  background-image: url("../assets/backgrounds/desert.jpg");
}

/* Accueil (dessus) : conteneur de mesure pour les unités cqw/cqh */
.stage-home {
  z-index: 1;
  container-type: size;
  transition: opacity .55s var(--ease);
}
body.project-open .stage-home {
  opacity: 0;
  pointer-events: none;
}

.truck-bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/backgrounds/truck.jpg");
  background-size: cover;
  background-position: center;
}

/* ---------- Connecteurs néon logo → camion ---------- */
.connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.connectors polyline {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}
.connectors circle { stroke: none; }
.c-pandora  { stroke: var(--pandora);  filter: drop-shadow(0 0 3px var(--pandora)); }
.c-youtube  { stroke: var(--youtube);  filter: drop-shadow(0 0 3px var(--youtube)); }
.c-arklight { stroke: var(--arklight); filter: drop-shadow(0 0 3px var(--arklight)); }
.c-rezo     { stroke: var(--rezo);     filter: drop-shadow(0 0 3px var(--rezo)); }
.n-pandora  { fill: var(--pandora); }
.n-youtube  { fill: var(--youtube); }
.n-arklight { fill: var(--arklight); }
.n-rezo     { fill: var(--rezo); }

/* ---------- Logo 22eme Arkane (petit) ---------- */
.brand {
  position: absolute;
  top: 1.6cqh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  pointer-events: none;
  width: 100%;
}
.brand-logo {
  width: 6.75cqw;
  height: 6.75cqw;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto .4cqh;
  filter: drop-shadow(0 0 1cqw rgba(217, 184, 119, .4));
}
.brand-title {
  font-size: 1.4cqw;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--gold);
  text-shadow: 0 0 .8cqw rgba(217, 184, 119, .4);
  font-family: "Georgia", "Times New Roman", serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
/* « 22 » calé à la hauteur des capitales d'ARKANE */
.brand-num { font-variant-numeric: lining-nums; }

/* ---------- Cartes de description (nom + statut + texte) ---------- */
.infocards { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.infocard {
  position: absolute;
  transform: translateY(-50%);
  width: 13cqw;
  padding: .7cqw .85cqw;
  background: rgba(6, 9, 16, .82);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .5cqw;
  backdrop-filter: blur(3px);
}
/* Marge côté logo : le cadre passe sous le logo sans rogner le texte */
.ic-pandora, .ic-arklight { padding-right: 2.2cqw; }
.ic-youtube, .ic-rezo     { padding-left: 2.2cqw; }
.ic-name {
  display: block;
  font-size: 1.15cqw;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--txt);
}
.ic-status {
  display: block;
  font-size: .75cqw;
  font-weight: 600;
  color: currentColor;          /* couleur de l'accent du projet */
  margin: .1cqw 0 .4cqw;
}
.ic-desc {
  font-size: .75cqw;
  line-height: 1.4;
  color: var(--txt-dim);
}

.ic-pandora  { left: 6%;  top: 30%; color: var(--pandora);  border-color: rgba(123,108,255,.4); }
.ic-youtube  { right: 6%; top: 30%; color: var(--youtube);  border-color: rgba(255,77,94,.4); }
.ic-arklight { left: 6%;  top: 80%; color: var(--arklight); border-color: rgba(255,207,77,.4); }
.ic-rezo     { right: 6%; top: 80%; color: var(--rezo);     border-color: rgba(111,232,160,.4); }

/* ---------- Vignettes-boutons ---------- */
.vignettes { position: absolute; inset: 0; z-index: 6; }

.vignette {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6cqh;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform .22s var(--ease), filter .22s var(--ease);
}
.vignette:hover, .vignette:focus-visible {
  transform: translate(-50%, -50%) scale(1.07);
  outline: none;
}
.v-icon {
  width: 6.9cqw;
  height: auto;
  transition: filter .22s var(--ease);
}
.v-pandora:hover  .v-icon { filter: drop-shadow(0 0 1.2cqw var(--pandora)) brightness(1.12); }
.v-youtube:hover  .v-icon { filter: drop-shadow(0 0 1.2cqw var(--youtube)) brightness(1.12); }
.v-arklight:hover .v-icon { filter: drop-shadow(0 0 1.2cqw var(--arklight)) brightness(1.12); }
.v-rezo:hover     .v-icon { filter: drop-shadow(0 0 1.2cqw var(--rezo)) brightness(1.12); }

/* Positions autour du camion (calées sur les maquettes Nanobanana) */
.v-pandora  { left: 22%; top: 30%; }
.v-youtube  { left: 78%; top: 30%; }
.v-arklight { left: 21%; top: 80%; }
.v-rezo     { left: 79%; top: 80%; }

/* ============================================================
   VUE PROJET
   ============================================================ */
.project-view {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease) .1s;
}
body.project-open .project-view {
  opacity: 1;
  pointer-events: auto;
}

.btn-back {
  position: absolute;
  top: 3vh;
  left: 3vh;
  z-index: 10;
  background: rgba(10, 14, 24, .72);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 1rem;
  padding: .6rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-back:hover {
  background: rgba(79, 214, 208, .12);
  box-shadow: 0 0 18px rgba(79, 214, 208, .35);
}

.btn-contact {
  position: absolute;
  bottom: 3vh;
  right: 3vh;
  z-index: 10;
  background: rgba(10, 14, 24, .72);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 1rem;
  padding: .6rem 1.4rem;
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-contact:hover {
  background: rgba(217, 184, 119, .12);
  box-shadow: 0 0 18px rgba(217, 184, 119, .35);
}

.project-panel {
  width: min(720px, 88vw);
  max-height: 82vh;
  overflow-y: auto;
  padding: 2.4rem 2.6rem;
  border-radius: 18px;
  background: rgba(6, 9, 16, .82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  transform: translateY(14px);
  transition: transform .5s var(--ease) .12s;
  /* Barre de défilement néon (couleur de l'accent du projet) */
  scrollbar-width: thin;
  scrollbar-color: currentColor rgba(255,255,255,.04);
}
body.project-open .project-panel { transform: translateY(0); }

/* Barre de défilement néon — WebKit (Chrome/Edge/Safari) */
.project-panel::-webkit-scrollbar { width: 9px; }
.project-panel::-webkit-scrollbar-track {
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  margin: 10px 0;
}
.project-panel::-webkit-scrollbar-thumb {
  background: currentColor;                 /* accent du projet */
  border-radius: 8px;
  border: 2px solid rgba(6,9,16,.7);        /* liseré sombre = effet néon fin */
  background-clip: padding-box;
}
.project-panel::-webkit-scrollbar-thumb:hover { filter: brightness(1.25); }

.project-panel .p-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.4rem;
}
.project-panel .p-icon { width: 76px; height: 76px; }
.project-panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: .02em;
}
.project-panel .p-status {
  display: inline-block;
  margin-top: .3rem;
  font-size: .8rem;
  padding: .2rem .7rem;
  border-radius: 20px;
  border: 1px solid currentColor;
  opacity: .85;
}
.project-panel .p-desc {
  color: var(--txt-dim);
  line-height: 1.7;
  font-size: 1.05rem;
  margin-bottom: 1.8rem;
}
.project-panel .p-desc strong { color: var(--txt); font-weight: 600; }

.p-links { display: flex; flex-wrap: wrap; gap: .8rem; }
.p-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-weight: 600;
  padding: .75rem 1.4rem;
  border-radius: 12px;
  border: 1px solid currentColor;
  background: rgba(255,255,255,.03);
  transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
.p-link:hover { transform: translateY(-2px); }
.p-link.disabled { opacity: .5; pointer-events: none; }

.accent-pandora  { color: var(--pandora); }
.accent-youtube  { color: var(--youtube); }
.accent-arklight { color: var(--arklight); }
.accent-rezo     { color: var(--rezo); }
.accent-pandora  .p-link:hover { box-shadow: 0 0 18px rgba(123,108,255,.4); background: rgba(123,108,255,.12); }
.accent-youtube  .p-link:hover { box-shadow: 0 0 18px rgba(255,77,94,.4);  background: rgba(255,77,94,.12); }
.accent-arklight .p-link:hover { box-shadow: 0 0 18px rgba(255,207,77,.4); background: rgba(255,207,77,.12); }
.accent-rezo     .p-link:hover { box-shadow: 0 0 18px rgba(111,232,160,.4); background: rgba(111,232,160,.12); }

/* ============================================================
   PAGE PROJET « façon code » (PANDORA, etc.)
   ============================================================ */
.pp-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.pp-logo {
  width: 84px;
  height: 84px;
  flex: none;
  filter: drop-shadow(0 0 14px currentColor);
}
.pp-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: .04em;
}

/* Statut + titres de section (lisibles, couleur d'accent) */
.pp-status {
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  color: currentColor;
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: .18rem .8rem;
  margin-top: .4rem;
}
.pp-h {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  color: currentColor;
  margin: 1.8rem 0 .8rem;
}
.pp-note {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--txt-dim);
  margin-bottom: 1.1rem;
  padding: .8rem 1rem;
  border-left: 3px solid currentColor;
  background: rgba(255,255,255,.03);
  border-radius: 0 8px 8px 0;
}
.pp-note strong { color: var(--txt); }

.pp-desc {
  color: var(--txt-dim);
  line-height: 1.7;
  font-size: 1.02rem;
}
.pp-desc strong { color: var(--txt); font-weight: 600; }

/* Vidéo de présentation (16:9) */
.pp-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid currentColor;
  background: #05070c;
}
.pp-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.pp-video-holder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: var(--txt-dim);
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 12px;
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  font-size: .95rem;
}
.pp-video-holder .play {
  font-size: 2.2rem;
  color: currentColor;
  opacity: .85;
}

/* Installation Windows / macOS */
.pp-install-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.pp-install-cols > div { flex: 1 1 240px; }
.pp-install-cols h4 {
  font-size: 1.02rem;
  color: var(--txt);
  margin-bottom: .6rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pp-install-cols ol {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--txt-dim);
  font-size: .95rem;
  line-height: 1.7;
}
.pp-install-cols code {
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  color: var(--cyan);
  background: rgba(255,255,255,.05);
  padding: .05rem .35rem;
  border-radius: 4px;
}

/* Page « prochainement » */
.soon-wrap { text-align: center; padding: 1.4rem 0; }
.soon-wrap .pp-logo { margin: 0 auto 1.2rem; width: 96px; height: 96px; }
.soon-wrap h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: .5rem; }
.soon-tag {
  display: inline-block;
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  font-size: .95rem;
  color: currentColor;
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: .3rem 1rem;
  margin-bottom: 1.2rem;
}
.soon-wrap p { color: var(--txt-dim); line-height: 1.7; max-width: 46ch; margin: 0 auto; }

/* ============================================================
   MODALE CONTACT
   ============================================================ */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.contact-modal.open { opacity: 1; pointer-events: auto; }
.contact-card {
  position: relative;
  width: min(420px, 88vw);
  padding: 2.4rem;
  text-align: center;
  border-radius: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--gold);
  box-shadow: 0 0 40px rgba(217,184,119,.2);
}
.contact-card h2 { color: var(--gold); margin-bottom: .8rem; }
.contact-card p { color: var(--txt-dim); margin-bottom: 1.4rem; }
.contact-mail {
  color: var(--cyan);
  font-size: 1.1rem;
  text-decoration: none;
  font-weight: 600;
}
.contact-mail:hover { text-decoration: underline; }
.contact-close {
  position: absolute;
  top: .8rem; right: 1rem;
  background: none; border: none;
  color: var(--txt-dim);
  font-size: 1.3rem;
  cursor: pointer;
}
.contact-close:hover { color: var(--txt); }

/* ============================================================
   MOBILE — DEUX versions
   Portrait (appareil tactile) → accueil empilé.
   Paysage (écran bas) → la vraie scène du site, un peu grossie.
   ============================================================ */

.mobile-home { display: none; }

/* ---------- PORTRAIT (appareil tactile) : accueil empilé ---------- */
@media (orientation: portrait) and (pointer: coarse) {
  html, body { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; }
  .scene { display: none; }

  .mobile-home {
    display: flex; flex-direction: column; align-items: center;
    gap: .8rem; width: 100%; max-width: 480px; margin: 0 auto;
    padding: 1.1rem 1rem 1.4rem; position: relative; z-index: 2;
  }
  /* On masque l'accueil derrière la vue projet (lisibilité) */
  body.project-open .mobile-home { display: none; }

  .m-brand { text-align: center; }
  .m-logo { width: 52px; height: 52px; object-fit: cover; border-radius: 50%;
    filter: drop-shadow(0 0 12px rgba(217,184,119,.4)); }
  .m-title { margin-top: .3rem; max-width: 100%;
    font-family: "Georgia","Times New Roman",serif; font-size: clamp(.95rem, 5vw, 1.3rem);
    font-weight: 400; letter-spacing: .02em; color: var(--gold);
    text-shadow: 0 0 14px rgba(217,184,119,.35);
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; overflow-wrap: anywhere; }
  .m-truck { display: block; width: 100%; max-width: 100%; max-height: 110px;
    object-fit: cover; object-position: center; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06); }
  .m-cards { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
  .m-card { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
    background: rgba(6,9,16,.82); border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px; padding: .6rem .8rem; cursor: pointer;
    transition: transform .15s var(--ease), box-shadow .2s var(--ease); }
  .m-card:active { transform: scale(.98); }
  .m-card img { width: 46px; height: 46px; flex: none; }
  .m-info { display: flex; flex-direction: column; min-width: 0; }
  .m-name { font-size: 1rem; font-weight: 700; color: var(--txt); overflow-wrap: anywhere; }
  .m-status { font-size: .74rem; font-weight: 600; margin: .04rem 0 .18rem; }
  .m-desc { font-size: .8rem; line-height: 1.3; color: var(--txt-dim); overflow-wrap: anywhere; }
  .mc-pandora  { border-color: rgba(123,108,255,.45); } .mc-pandora  .m-status { color: var(--pandora); }
  .mc-youtube  { border-color: rgba(255,77,94,.45); }  .mc-youtube  .m-status { color: var(--youtube); }
  .mc-arklight { border-color: rgba(255,207,77,.45); } .mc-arklight .m-status { color: var(--arklight); }
  .mc-rezo     { border-color: rgba(111,232,160,.45); } .mc-rezo     .m-status { color: var(--rezo); }
}

/* ---------- PAYSAGE (téléphone couché) : la scène, grossie ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .brand { top: 1cqh; }
  .brand-logo  { width: 7cqw; height: 7cqw; }
  .brand-title { font-size: 1.8cqw; }
  /* v-icon gardé à la taille desktop pour limiter le recouvrement du texte */

  /* On élargit la carte vers l'EXTÉRIEUR : le bord côté logo reste au même
     endroit que sur desktop (bord droit ~19% / bord gauche ~81%). */
  .infocard    { width: 18cqw; padding: 1cqw 1.2cqw; }
  .ic-pandora  { left: 1%; }
  .ic-arklight { left: 1%; }
  .ic-youtube  { right: 1%; }
  .ic-rezo     { right: 1%; }
  /* Grande marge côté logo pour que le texte ne passe jamais dessous */
  .ic-pandora, .ic-arklight { padding-right: 3.6cqw; }
  .ic-youtube, .ic-rezo     { padding-left: 3.6cqw; }
  .ic-name     { font-size: 1.65cqw; }
  .ic-status   { font-size: 1.05cqw; }
  .ic-desc     { font-size: 1.05cqw; }
}

/* ---------- VUE PROJET sur mobile (portrait ET paysage) ----------
   Boutons Retour/Contact remis dans le flux (fini le chevauchement),
   fond opaque (on ne voit plus la scène derrière → lisibilité). */
@media (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (max-height: 500px) {
  .project-view {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: .9rem;
    overflow-y: auto;
    background: rgba(4, 6, 11, .94);
  }
  .btn-back    { position: static; align-self: flex-start; margin: 0 0 .7rem; flex: none; }
  .btn-contact { position: static; align-self: flex-end;   margin: .7rem 0 0; flex: none; }
  .project-panel,
  body.project-open .project-panel {
    width: 100%; max-height: none; transform: none; margin: 0;
    padding: 1.4rem 1.3rem; background: rgba(6, 9, 16, .96);
  }
  .pp-head { gap: .9rem; }
  .pp-logo { width: 56px; height: 56px; }
}