/* ============================================================
   RCF · nplus1.css — LA SCÈNE DES OPPORTUNITÉS N+1
   Mission NPLUS1-03 (polish UX / DA / textes).
   ------------------------------------------------------------
   PÉRIMÈTRE : cette feuille ne s'applique QUE sous `.n1-scene`,
   c'est-à-dire la seule modale `#nplus1Modal`. Aucun sélecteur
   ici ne peut atteindre une autre modale, l'overlay de promotion
   ni un toast : le polish N+1 ne peut pas dégrader le reste du jeu.

   POURQUOI UNE FEUILLE À PART : le gabarit `.modal/.sheet` est
   volontairement neutre et sert une douzaine d'écrans. L'offre N+1
   est un événement RARE et doit se distinguer d'une modale
   informative — la distinguer dans `screens.css` aurait forcé à
   surcharger le gabarit commun pour tout le monde.

   ACCENT PAR ISSUE : chaque écran pose `data-n1="<issue>"` sur la
   modale, ce qui redéfinit `--n1-accent`. Une rétrogradation n'a
   donc pas la couleur d'un licenciement, sans dupliquer un seul
   bloc de mise en page (§4.3 de la mission).
   ============================================================ */

/* ---------- 1. LA SCÈNE ---------- */

.n1-scene{ align-items:center; padding:14px 12px; }

.n1-scene .sheet{
  --n1-accent:var(--hivis);
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:540px; margin:0; padding:0; overflow:hidden;
  max-height:calc(100vh - 28px);
  max-height:calc(100dvh - 28px);
  background:linear-gradient(180deg,#0e2438 0%,#0a1b2a 46%,#071422 100%);
  border:1px solid rgba(170,201,226,.28);
  border-radius:16px;
  box-shadow:0 44px 96px -32px rgba(0,0,0,.94), 0 0 0 1px rgba(255,255,255,.035) inset;
}

/* Le liseré d'accent : la seule chose qui change de couleur d'un écran à
   l'autre, et elle suffit à ne pas confondre deux issues au premier coup
   d'œil. Il est en `::before` pour ne coûter aucun nœud au balisage. */
.n1-scene .sheet::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--n1-accent) 16%,var(--n1-accent) 84%,transparent);
}
/* Halo chaud très diffus en haut de scène : donne le sentiment d'« il se passe
   quelque chose » sans aucun motif décoratif ni asset supplémentaire. */
.n1-scene .sheet::after{
  content:""; position:absolute; left:50%; top:0; width:min(460px,120%); height:190px;
  transform:translateX(-50%); pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(ellipse at 50% 0%,var(--n1-accent),transparent 68%);
  mix-blend-mode:screen; filter:blur(26px);
}

/* ---------- 2. L'EN-TÊTE ---------- */

.n1-scene .sheet-top{
  flex:0 0 auto; position:relative; z-index:1; display:block;
  margin:0; padding:19px 20px 15px;
  background:transparent; backdrop-filter:none;
  border-bottom:1px solid rgba(170,201,226,.14);
}
.n1-scene .n1-kicker{
  display:flex; align-items:center; gap:9px; margin:0 0 9px;
  font:700 9.5px/1 var(--mono); letter-spacing:.26em; text-transform:uppercase;
  color:var(--n1-accent);
}
.n1-scene .n1-kicker::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:currentColor; box-shadow:0 0 11px currentColor;
}
/* NPLUS1-03D — CORRECTION DE CAP.
   NPLUS1-03C avait REMONTÉ la typographie mobile (20 → 22 px) en croyant
   rapprocher le mobile du desktop. C'était l'inverse de ce qu'il fallait :
   « ressembler au desktop » veut dire garder la MÊME COMPOSITION — même
   hiérarchie, mêmes retours à la ligne, autant de contenu à l'écran — ce qui,
   sur 320 px, s'obtient avec des caractères un peu PLUS PETITS, pas plus gros.
   Grossir les titres n'a fait que pousser le texte hors de l'écran.

   Le plancher redescend donc, et surtout le coefficient `vw` reprend la main :
   à 320 px le titre vaut 6,1 vw ≈ 19,5 px. Le maximum desktop (26 px) et toute
   la plage au-delà de 427 px sont inchangés. */
.n1-scene .sheet-top h3{
  margin:0; font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(19px,6.1vw,26px); line-height:1.05; letter-spacing:.045em;
  color:var(--ink); text-wrap:balance;
}

/* ---------- 3. LE CORPS SCROLLABLE ---------- */
/* Le texte défile, JAMAIS les actions : c'est la réponse structurelle à
   l'exigence §6 (les deux choix doivent rester visibles sur 320×568). */

.n1-scene #nplus1Body{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
  position:relative; z-index:1;
}
.n1-scene .n1-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:17px 20px 18px;
}

/* ---------- 4. LE HÉROS : LE POSTE PROPOSÉ ---------- */

.n1-hero{
  margin:0 0 17px; padding:15px 16px 14px; border-radius:13px;
  background:
    linear-gradient(152deg,rgba(255,192,46,.13),rgba(255,192,46,.02) 56%,transparent),
    var(--plate);
  border:1px solid rgba(255,192,46,.30);
  box-shadow:0 20px 42px -28px rgba(255,181,0,.8), 0 1px 0 rgba(255,255,255,.05) inset;
}
/* NPLUS1-03D — LE COEFFICIENT EST MESURÉ, PAS CHOISI.
   Le poste reste l'élément principal, mais sa taille mobile est calée sur un
   fait : à la largeur utile du bloc héros (235 px à 320 px de viewport), une
   cible courte comme « Technicien Bureau d'Études » tient sur UNE ligne
   jusqu'à 20,5 px et passe à deux au-delà. 6,25 vw donne exactement 20 px à
   320 px — sur une ligne, avec 6 px de marge, sans raser le bord.

   6,25 vw atteint le plafond de 28 px dès 448 px de large : le desktop et les
   grandes tablettes ne bougent pas d'un pixel.

   On ne descend pas plus bas pour autant : un métier réellement long comme
   « Ingénieur Performance Industrielle » passe sur deux lignes, et c'est
   normal. Rétrécir toute l'interface pour lui épargner un retour à la ligne
   coûterait la lisibilité de tous les autres écrans. */
.n1-hero .n1-job{
  margin:0; font-family:var(--disp); font-weight:700;
  font-size:clamp(19px,6.25vw,28px); line-height:1.08; letter-spacing:.012em;
  color:var(--ink); text-wrap:balance; overflow-wrap:anywhere;
}
/* Depuis NPLUS1-03C la rémunération est UN montant et non une fourchette : la
   ligne est assez courte pour tenir à côté du poste actuel sur la plupart des
   largeurs, comme sur desktop. La gouttière est resserrée pour l'y aider ; le
   `wrap` reste, il n'intervient plus que sur les noms de poste très longs. */
.n1-hero .n1-band{
  display:flex; flex-wrap:wrap; gap:9px 18px;
  margin-top:11px; padding-top:11px; border-top:1px solid rgba(255,192,46,.20);
}
.n1-hero .n1-b{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.n1-hero .n1-b .k{
  font:700 8.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.n1-hero .n1-b .v{
  font:600 13px/1.25 var(--mono); color:var(--hivis); overflow-wrap:anywhere;
}
.n1-hero .n1-b .v.steel{ color:var(--dim); font-family:var(--body); font-size:13.5px; }

/* ---------- 5. LE RÉCIT ---------- */

.n1-story p{ margin:0 0 11px; font-size:14.5px; line-height:1.62; color:var(--dim); }
.n1-story p:last-child{ margin-bottom:0; }
.n1-story strong{ color:var(--ink); font-weight:600; }

/* ---------- 6. CE QUI SE DIT (appréciation qualitative) ---------- */
/* Jamais un nombre : une phrase. La plaque à filet d'accent lui donne le poids
   d'une citation rapportée, pas d'une jauge. */

.n1-read{
  margin:17px 0 0; padding:13px 15px; border-radius:11px;
  background:rgba(8,24,39,.62);
  border:1px solid rgba(170,201,226,.16);
  border-left:3px solid var(--n1-accent);
}
.n1-read .k{
  display:block; margin:0 0 7px;
  font:700 8.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.n1-read .q{ margin:0; font-size:14px; line-height:1.55; color:var(--ink); font-style:italic; }

/* ---------- 7. LA RÉSERVE (formation d'évolution non suivie) ---------- */

.n1-warn{
  display:flex; gap:11px; margin:12px 0 0; padding:11px 13px; border-radius:11px;
  background:rgba(255,142,75,.075); border:1px solid rgba(255,142,75,.30);
}
.n1-warn .n1-warn-ic{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:700 11px/1 var(--mono); color:#1a1204; background:var(--orange);
}
.n1-warn p{ margin:0; font-size:13px; line-height:1.5; color:#ffd9c2; }

/* ---------- 8. LES ACTIONS — toujours visibles, toujours à égalité ---------- */

.n1-actions{
  flex:0 0 auto; position:relative; z-index:1;
  display:flex; gap:10px;
  padding:13px 16px; padding-bottom:calc(13px + var(--rcf-safe-b,0px));
  border-top:1px solid rgba(170,201,226,.20);
  background:linear-gradient(180deg,rgba(6,18,30,.5),rgba(5,14,24,.96));
  backdrop-filter:blur(10px);
}
/* Le texte s'estompe sous la barre d'actions au lieu d'être tranché net : sur
   320×568 le récit passe sous la ligne de flottaison, et cette amorce est ce
   qui dit au joueur qu'il peut faire défiler. Sans elle, l'écran a l'air
   d'avoir été coupé. */
.n1-actions::before{
  content:""; position:absolute; left:0; right:0; top:-28px; height:28px;
  pointer-events:none; background:linear-gradient(180deg,rgba(6,17,28,0),rgba(6,17,28,.92));
}
/* `flex:1 1 0` + `min-width:0` : les deux boutons font EXACTEMENT la même
   largeur quelle que soit la longueur du libellé. Aucun des deux ne peut
   paraître principal parce que l'autre serait plus petit ou plus bas. */
/* `border:1px solid transparent` n'est pas décoratif : le bouton fantôme porte
   une bordure d'1 px et le bouton plein n'en a pas. Sans cette égalisation, la
   recette mesure 134 px contre 132 px — invisible à l'œil, mais c'est
   exactement le genre d'écart que §6 interdit. Avec, les deux boutons font la
   même largeur au pixel près. */
.n1-actions .btn{
  box-sizing:border-box; flex:1 1 0; min-width:0;
  border:1px solid transparent;
  padding-left:10px; padding-right:10px;
  font-size:13.5px; letter-spacing:.03em; white-space:nowrap;
}
.n1-actions .btn.solo{ flex:1 1 100%; }

/* NPLUS1-03D — LES MARGES SUIVENT LA MÊME LOGIQUE QUE LA TYPOGRAPHIE.
   Elles sont revenues entre les deux extrêmes précédents : ni les 15 px d'avant
   NPLUS1-03C, qui tassaient, ni les 17 px de NPLUS1-03C, qui mangeaient de la
   largeur utile pour rien. À 16 px, le bloc héros gagne 2 px de chaque côté —
   c'est ce qui permet au nom du poste de tenir sur une ligne avec de la marge.

   Le récit descend de 14,5 à 14 px, avec un interligne à peine resserré : sur
   un écran de 320 px c'est la différence entre deux et trois paragraphes lus
   sans défiler, et 14 px reste au-dessus du seuil de confort.

   Le débordement reste mesuré à zéro, et les deux boutons restent visibles
   simultanément — la recette le vérifie à chaque passe. */
@media (max-width:359px){
  .n1-scene{ padding:10px 8px; }
  .n1-scene .sheet{ max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); }
  .n1-scene .sheet-top{ padding:16px 16px 13px; }
  .n1-scene .n1-scroll{ padding:15px 16px 15px; }
  .n1-hero{ margin-bottom:15px; padding:13px 14px 12px; }
  .n1-hero .n1-band{ gap:8px 16px; margin-top:10px; padding-top:10px; }
  .n1-story p{ font-size:14px; line-height:1.58; margin-bottom:10px; }
  .n1-read{ margin-top:15px; padding:12px 14px; }
  .n1-actions{ gap:8px; padding:11px 13px; padding-bottom:calc(11px + var(--rcf-safe-b,0px)); }
  .n1-actions .btn{ font-size:12.5px; letter-spacing:.01em; padding-left:7px; padding-right:7px; }
}

/* ---------- 9. LES RÉSOLUTIONS ---------- */
/* Même ossature, six identités. La plaque porte l'issue en un coup d'œil ;
   le récit qui suit n'a plus à la répéter. */

.n1-res-plate{
  display:flex; align-items:center; gap:13px; margin:0 0 17px;
  padding:14px 15px; border-radius:13px;
  background:var(--plate);
  border:1px solid rgba(170,201,226,.20);
  border-left:3px solid var(--n1-accent);
}
.n1-res-plate .n1-ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font:400 21px/1 var(--body); color:var(--n1-accent);
  background:rgba(255,255,255,.045); border:1px solid rgba(170,201,226,.18);
}
.n1-res-plate .n1-pt{ min-width:0; }
.n1-res-plate .k{
  display:block; font:700 8.5px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);
}
.n1-res-plate .v{
  display:block; margin-top:5px; font:600 15px/1.25 var(--body);
  color:var(--ink); overflow-wrap:anywhere;
}

/* Réussite : la seule issue qui a droit à une plaque pleine et à un halo —
   c'est la récompense, et elle doit se voir (§4.2). */
.n1-scene[data-n1="reussite"] .sheet{
  box-shadow:0 44px 96px -32px rgba(0,0,0,.94), 0 0 70px -22px rgba(255,192,46,.38);
}
.n1-scene[data-n1="reussite"] .n1-res-plate{
  background:linear-gradient(150deg,rgba(255,192,46,.17),rgba(255,192,46,.03) 60%,transparent),var(--plate);
  border-color:rgba(255,192,46,.34);
  box-shadow:0 20px 42px -28px rgba(255,181,0,.8);
}
.n1-scene[data-n1="reussite"] .n1-res-plate .n1-ico{
  background:var(--yellowgrad,linear-gradient(180deg,#ffd257,#e8a300));
  color:#191104; border-color:rgba(255,255,255,.28); font-weight:700;
}

.n1-scene[data-n1="retrogradation"] .sheet{ --n1-accent:var(--cyan); }
.n1-scene[data-n1="arret"]          .sheet{ --n1-accent:var(--orange); }
.n1-scene[data-n1="demission"]      .sheet{ --n1-accent:var(--steel); }
.n1-scene[data-n1="licenciement"]   .sheet{ --n1-accent:var(--red); }
.n1-scene[data-n1="depart"]         .sheet{ --n1-accent:var(--faint); }

/* Les issues qui ferment une carrière assombrissent la scène : on ne sort pas
   d'un licenciement sur le même fond que d'une réussite. */
.n1-scene[data-n1="licenciement"] .sheet,
.n1-scene[data-n1="depart"] .sheet,
.n1-scene[data-n1="demission"] .sheet{
  background:linear-gradient(180deg,#0b1a28 0%,#081522 48%,#050f19 100%);
}
.n1-scene[data-n1="licenciement"] .sheet::after,
.n1-scene[data-n1="depart"] .sheet::after,
.n1-scene[data-n1="demission"] .sheet::after{ opacity:.26; }
.n1-scene[data-n1="arret"] .sheet::after{ opacity:.34; }

/* ---------- 10. ANIMATION D'ENTRÉE ---------- */
/* Courte et unique : la scène se pose, elle ne rebondit pas. */

.n1-scene.on .sheet{ animation:n1Rise .34s cubic-bezier(.2,.85,.25,1) both; }
@keyframes n1Rise{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .n1-scene.on .sheet{ animation:none; }
}