/* ─────────────────────────────────────────────────────────────
   Page portail Founder / Investor (handoff design de septembre 2026).

   Deux panneaux de poids égal, papier à gauche, nuit à droite. Le
   survol élargit un panneau (1.55fr contre 1fr), une lampe suit le
   pointeur (variables --mx/--my posées par /js/portail.js), les
   scènes produit animées vivent dans .carte__media. Sous 900 px,
   la même grille passe en deux cartes empilées.

   Dépend de /css/ds/tokens.css et /css/ds/universes.css : aucune
   couleur, police ni espacement en dur ici. Les rgba() de décor
   (ombres, voiles, lampe) sont les seules valeurs littérales.
   ───────────────────────────────────────────────────────────── */

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

.portail {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.portail a { color: inherit; text-decoration: none; }
.portail ul { list-style: none; margin: 0; padding: 0; }
.portail h1, .portail h2, .portail h3, .portail p { margin: 0; }

/* Toute donnée chiffrée passe par ici. tabular-nums, sans exception. */
.carte__num { font-variant-numeric: tabular-nums; }


/* ─── Accessibilité ─────────────────────────────────────────── */

.portail__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.portail__skip {
  position: absolute;
  left: -9999px;
  top: auto;
}
.portail__skip:focus,
.portail__skip:focus-visible {
  position: fixed;
  z-index: 20;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.portail :focus-visible {
  outline: 2px solid var(--int-accent-soft);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ─── Décor ─────────────────────────────────────────────────── */

.portail__decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.portail__decor-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 78% 0%, rgba(123, 45, 142, 0.16), transparent 62%),
    radial-gradient(ellipse 50% 40% at 12% 100%, rgba(232, 101, 26, 0.08), transparent 60%);
}

.portail__decor-voile {
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: 0.6;
}

/* ─── Structure ─────────────────────────────────────────────── */

.portail__main {
  position: relative;
  z-index: 1;
  width: 100%;
}






.portail__main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ─── Choix ─────────────────────────────────────────────────── */

.portail__choix {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Deux colonnes de poids strictement égal. auto-fit : la grille passe
   à une colonne dès que la place manque. Au-delà de 900 px le split
   prend le relais, avec deux fractions pilotées par le survol. */
.portail__grille {
  --gl: 1fr;
  --gr: 1fr;
  --seam: 50%;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.portail__carte { display: flex; min-width: 0; }

.carte {
  --mx: 50%;
  --my: 40%;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-5) var(--ease-soft), box-shadow var(--dur-5) var(--ease-soft);
}

/* Papier à gauche. */
.carte[data-univers="founder"] {
  color: var(--atl-ink);
  background-color: var(--atl-desk);
  background-image:
    radial-gradient(640px circle at var(--mx) var(--my), rgba(232, 101, 26, 0.10), transparent 62%),
    radial-gradient(900px 500px at 85% -10%, rgba(232, 101, 26, 0.06), transparent 60%),
    var(--grain);
  border: 1px solid var(--atl-border);
  box-shadow: var(--atl-shadow-paper-lg);
}

/* Nuit à droite. */
.carte[data-univers="investor"] {
  color: var(--int-ink);
  background-color: var(--int-bg);
  background-image:
    radial-gradient(640px circle at var(--mx) var(--my), rgba(123, 45, 142, 0.24), transparent 62%),
    radial-gradient(800px 420px at 20% -10%, rgba(123, 45, 142, 0.14), transparent 60%);
  border: 1px solid var(--int-border-strong);
  box-shadow: var(--int-shadow-glow);
}

.carte:hover,
.carte:focus-within {
  transform: translateY(-2px);
}

/* Emplacement média : la scène produit. aspect-ratio plutôt qu'une
   hauteur fixe, la place est réservée dans le flux. */
.carte__media {
  aspect-ratio: 22 / 15;
  width: min(100%, 440px);
  margin: var(--sp-5) var(--sp-5) 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.carte__corps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1;
}

.carte__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.carte[data-univers="founder"] .carte__kicker { color: var(--atl-flaynn-ink); }
.carte[data-univers="investor"] .carte__kicker { color: var(--int-accent-soft); }

.carte__titre {
  line-height: 1;
  letter-spacing: -0.04em;
  font-size: clamp(44px, 6vw, 84px);
}
.carte[data-univers="founder"] .carte__titre { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.03em; }
.carte[data-univers="investor"] .carte__titre { font-family: var(--font-sans); font-weight: 300; }

/* La carte entière est cliquable via ce pseudo-élément, mais le lien
   réel reste le titre : une seule cible, nommée. */
.carte__lien::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.carte__titre-suite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.35;
  letter-spacing: 0;
  max-width: 30ch;
}
.carte[data-univers="founder"] .carte__titre-suite { color: var(--atl-ink); }
.carte[data-univers="investor"] .carte__titre-suite { color: var(--int-ink-strong); font-weight: 300; }

.carte__texte {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  max-width: 48ch;
}
.carte[data-univers="founder"] .carte__texte { color: var(--atl-ink-muted); }
.carte[data-univers="investor"] .carte__texte { color: var(--int-ink-muted); }

.carte__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: 15px;
}
.carte__points li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  counter-increment: point;
}
.carte__points li::before {
  content: counter(point, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  flex: none;
}
.carte { counter-reset: point; }
.carte[data-univers="founder"] .carte__points { color: var(--atl-ink-muted); }
.carte[data-univers="founder"] .carte__points li::before { color: var(--atl-flaynn-ink); font-weight: 600; }
.carte[data-univers="investor"] .carte__points { color: var(--int-ink-muted); }
.carte[data-univers="investor"] .carte__points li::before { color: var(--int-accent-mid); }

.carte__meta {
  margin-top: auto;
  padding-top: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.carte[data-univers="founder"] .carte__meta { border-top: 1px solid var(--atl-border); }
.carte[data-univers="investor"] .carte__meta { border-top: 1px solid var(--int-border); }

.carte__num {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.carte[data-univers="founder"] .carte__num { color: var(--atl-ink-faint); }
.carte[data-univers="investor"] .carte__num { color: var(--int-ink-faint); }

/* Le bouton visuel. Le lien reste le titre ; ceci n'est qu'un signal. */
.carte__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 46px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform var(--dur-2) var(--ease-bounce), background var(--dur-3), color var(--dur-3);
}
.carte__cta::after { content: '→'; }
.carte[data-univers="founder"] .carte__cta {
  background: var(--atl-cta);
  color: var(--atl-paper);
  font-weight: 600;
  box-shadow: var(--atl-shadow-cta);
}
.carte[data-univers="investor"] .carte__cta {
  border: 1px solid rgba(168, 94, 192, 0.6);
  background: rgba(123, 45, 142, 0.16);
  color: var(--int-ink-strong);
}
.carte:hover .carte__cta,
.carte:focus-within .carte__cta { transform: translateY(-1px); }
.carte[data-univers="investor"]:hover .carte__cta,
.carte[data-univers="investor"]:focus-within .carte__cta { background: var(--int-accent); color: var(--int-ink-strong); }

.portail__indice {
  display: none;
  position: absolute;
  left: 50%;
  bottom: var(--sp-6);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--int-ink-strong);
  mix-blend-mode: difference;
  pointer-events: none;
  white-space: nowrap;
  animation: indice 3s ease-in-out infinite;
}
@keyframes indice { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }

/* ─── Split plein écran, au-delà de 900 px ─────────────────── */

@media (min-width: 900px) {
  .portail__grille {
    grid-template-columns: var(--gl) var(--gr);
    gap: 0;
    padding: 0;
    transition: grid-template-columns var(--dur-5) var(--ease-soft);
  }
  .portail__carte { min-height: calc(100dvh - 70px); }
  .carte {
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .carte:hover,
  .carte:focus-within { transform: none; }
  .carte__corps { padding: clamp(28px, 4vh, 52px) clamp(24px, 4vw, 64px) clamp(28px, 5vh, 56px); }
  .carte__media {
    margin: clamp(28px, 4vh, 52px) clamp(24px, 4vw, 64px) 0;
    width: min(440px, 38vw);
  }
  .carte[data-univers="investor"] .carte__media { margin-left: auto; }
  .carte[data-univers="investor"] .carte__corps { align-items: flex-end; text-align: right; }
  .carte[data-univers="investor"] .carte__titre-suite,
  .carte[data-univers="investor"] .carte__texte { margin-left: auto; }
  .carte[data-univers="investor"] .carte__points li { flex-direction: row-reverse; }
  .carte[data-univers="investor"] .carte__meta { flex-direction: row-reverse; width: 100%; }

  /* Le survol élargit un côté, l'autre recule. :has() sans JS ; un
     moteur sans :has() garde 1fr / 1fr, ce qui reste juste. */
  .portail__grille:has(.portail__carte:first-child .carte:hover),
  .portail__grille:has(.portail__carte:first-child .carte:focus-within) { --gl: 1.55fr; --gr: 1fr; --seam: 60.8%; }
  .portail__grille:has(.portail__carte:last-child .carte:hover),
  .portail__grille:has(.portail__carte:last-child .carte:focus-within) { --gl: 1fr; --gr: 1.55fr; --seam: 39.2%; }

  /* Couture et médaillon bicolore à la frontière. */
  .portail__grille::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: var(--seam);
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(120, 100, 90, 0.7) 30%, rgba(120, 100, 90, 0.7) 70%, transparent);
    transition: left var(--dur-5) var(--ease-soft);
    pointer-events: none;
    z-index: 2;
  }
  .portail__grille::after {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--seam);
    width: 96px; height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50%;
    /* L'icone en premiere couche : une couche posee apres est dessous, et
       le degrade est opaque. Vu au navigateur le 2026-09-03. */
    background: url(/logo-icon.svg) center / 34px no-repeat, linear-gradient(90deg, var(--atl-desk) 50%, var(--int-bg) 50%);
    box-shadow: 0 0 0 1px rgba(120, 100, 90, 0.35), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    transition: left var(--dur-5) var(--ease-soft);
    pointer-events: none;
    z-index: 3;
    animation: medaillon var(--dur-4) var(--ease-soft) both;
  }
  .portail__indice { display: block; }
}

@keyframes medaillon { from { opacity: 0; transform: scale(0.6); } }

/* Entrée de page : les deux panneaux montent, décalés de 60 ms. */
@keyframes panneau { from { opacity: 0; transform: translateY(14px); } }
.portail__carte:first-child .carte { animation: panneau var(--dur-4) var(--ease-soft) both; }
.portail__carte:last-child .carte { animation: panneau var(--dur-4) var(--ease-soft) 60ms both; }

@media (max-height: 640px) and (min-width: 900px) {
  .portail__indice { display: none; }
}

/* ─── Rideau de sortie : prend la couleur du monde d'arrivée ─── */

.portail__rideau {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
}
.portail__rideau[data-univers="founder"] { background: var(--atl-desk); }
.portail__rideau[data-univers="investor"] { background: var(--int-bg); }
.portail.is-leaving .portail__rideau { animation: rideau 500ms var(--ease-soft) forwards; }
@keyframes rideau { to { clip-path: inset(0 0 0 0); } }

/* ─── Réserve et pied ───────────────────────────────────────── */

.portail__reserve:empty { display: none; }






/* ─── Petits écrans ─────────────────────────────────────────── */

@media (max-width: 899px) {
  .carte__media { margin: var(--sp-4) var(--sp-4) 0; width: calc(100% - 2 * var(--sp-4)); }
  .carte__corps { padding: var(--sp-4); }
  .carte__titre { font-size: clamp(40px, 12vw, 56px); }
  .carte__cta { width: 100%; justify-content: center; }
}

/* ─── Mouvement réduit ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .carte, .carte__cta, .portail__grille, .portail__grille::before, .portail__grille::after { transition: none; animation: none; }
  .portail__carte .carte { animation: none; }
  .carte:hover, .carte:focus-within, .carte:hover .carte__cta { transform: none; }
  .portail__indice { animation: none; opacity: 0.6; }
  .portail.is-leaving .portail__rideau { animation: none; }
}

/* Deux portes de connexion, une par univers. Le portail est le seul endroit
   qui les presente cote a cote : chaque page de connexion, elle, ne connait
   que son monde. */
.portail__sep { margin: 0 6px; color: var(--text-4); }