/* ==========================================================================
   RCF · PRÉ-JALON D — LE MENU ⓘ INFOS
   --------------------------------------------------------------------------
   La feuille ⓘ Infos passe d'une fiche technique à un petit livre en trois
   temps : l'introduction du projet, la liste des quatre modules, puis un module
   ouvert. L'habillage reste celui du menu (`l12-sheet`) — mêmes couleurs, même
   typographie, même rythme. On n'introduit pas un second langage visuel pour
   une page d'aide.

   Le module « Détail gameplay » garde intégralement l'habillage `.dg-*` écrit
   au Lot 14 : il est rendu par le même module, dans le même hôte `#dgStage`,
   et rien ne justifiait de le redessiner.
   ========================================================================== */

/* ---------------------------------------------------------------- squelette */
#l12SheetInfos #infosStage{ min-width:0 }
#l12SheetInfos .inf{ min-width:0 }

#l12SheetInfos .inf-h{
  margin:0 0 4px; font-family:var(--disp); font-size:20px; font-weight:600;
  letter-spacing:.01em; line-height:1.2; color:#fff;
}
/* Le focus est posé par le code à chaque changement de vue, pour que les
   lecteurs d'écran suivent. Avec `:focus`, l'anneau se dessinait donc à chaque
   clic de souris et le titre passait pour un champ de saisie. `:focus-visible`
   ne le montre qu'au clavier, à qui il sert vraiment. */
#l12SheetInfos .inf-h:focus{ outline:none }
#l12SheetInfos .inf-h:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px }
#l12SheetInfos .inf-kick{
  margin:0 0 14px; font-size:12.5px; line-height:1.5; color:var(--dim);
}
#l12SheetInfos .inf-p{
  margin:0 0 10px; font-size:13px; line-height:1.6; color:#dde6ef; opacity:.9;
}
#l12SheetInfos .inf-t{
  margin:16px 0 8px; font-family:var(--disp); font-size:15px; font-weight:600;
  color:var(--amber); letter-spacing:.01em;
}

/* La phrase qui porte l'idée centrale. Elle doit se détacher du reste sans
   crier : un filet à gauche, une teinte, et c'est tout. */
#l12SheetInfos .inf-fort{
  margin:14px 0; padding:11px 13px; border-radius:10px;
  border-left:3px solid var(--amber);
  background:rgba(255,196,40,.07);
  font-size:13.5px; line-height:1.55; font-weight:600; color:#fff;
}

#l12SheetInfos .inf-l{
  margin:0 0 12px; padding:0 0 0 2px; list-style:none;
  display:grid; gap:6px;
}
#l12SheetInfos .inf-l li{
  position:relative; padding-left:16px;
  font-size:12.5px; line-height:1.5; color:#dde6ef; opacity:.85;
}
#l12SheetInfos .inf-l li::before{
  content:"›"; position:absolute; left:2px; top:-1px; color:var(--amber); opacity:.8;
}

#l12SheetInfos .inf-note{
  margin:14px 0 0; padding:9px 11px; border-radius:10px;
  border-left:3px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  font-size:12.5px; line-height:1.5; color:var(--dim);
}

/* ------------------------------------------------------- écran d'ouverture */
/* Le bouton qui fait avancer d'un temps. C'est l'action principale de l'écran :
   il occupe toute la largeur et porte la couleur d'accent, pour qu'on n'ait
   jamais à le chercher.

   ── POURQUOI IL EST COLLANT ────────────────────────────────────────────────
   MESURÉ, PAS SUPPOSÉ. Le texte d'introduction est long — c'est le texte de
   référence, et il n'est pas question de le raccourcir. Sur un téléphone, la
   feuille défile donc à l'intérieur d'elle-même, et le bouton se retrouvait
   sous le bord bas de la boîte : à 360x780 il était rendu à 826 px pour une
   boîte qui s'arrête à 710, donc invisible tant qu'on n'avait pas défilé.

   La première mesure de la passe avait d'ailleurs conclu « visible » à tort :
   elle comparait la position du bouton à la fenêtre, alors que ce qui le
   masquait était le DÉBORDEMENT DE LA BOÎTE. Un contrôle qui mesure la mauvaise
   référence donne une réponse fausse avec l'accent de la certitude.

   `position:sticky; bottom:0` règle exactement cela : le bouton reste posé au
   bas de la zone visible pendant que le texte défile derrière lui, puis reprend
   sa place dans le flux quand on arrive en bas. Aucun texte n'est masqué —
   le voile dégradé sous le bouton laisse voir que la lecture continue — et
   aucune ligne n'est retirée. */
#l12SheetInfos .inf-suivant{
  display:block; width:100%; margin:18px 0 0; padding:13px 16px;
  border:0; border-radius:12px; min-height:var(--tap);
  background:var(--amber); color:#12181f;
  font-family:var(--disp); font-size:14px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
  position:sticky; bottom:0; z-index:2;
}
/* Le voile qui évite que le texte passe « sous » le bouton collant sans
   transition. Il appartient au conteneur du bouton, pas au bouton : sinon il
   s'afficherait aussi quand le bouton est revenu dans le flux. */
#l12SheetInfos .inf-intro{ position:relative }
#l12SheetInfos .inf-suivant::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:18px;
  /* La teinte est celle du BAS de la feuille (`.l12-sheet-box` finit sur
     rgba(6,18,31,.99)), pas celle du panneau générique : sinon le voile se
     verrait comme une bande plus claire. */
  background:linear-gradient(to top, rgba(6,18,31,.99), rgba(6,18,31,0));
  pointer-events:none;
}
#l12SheetInfos .inf-suivant::after{ content:" ›" }
#l12SheetInfos .inf-suivant:hover{ filter:brightness(1.08) }
#l12SheetInfos .inf-suivant:active{ transform:translateY(1px) }

#l12SheetInfos .inf-fiction{
  margin:16px 0 6px; font-size:10.5px; line-height:1.5; color:var(--faint);
}
#l12SheetInfos .inf-ver{
  margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}

/* --------------------------------------------------------- liste de modules */
#l12SheetInfos .inf-mod{
  display:grid; width:100%; margin:0 0 9px; padding:12px 40px 12px 14px;
  grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:1px 11px;
  align-items:center; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); border-radius:12px;
  background:rgba(255,255,255,.04); color:inherit; font:inherit;
  min-height:var(--tap); position:relative;
  transition:border-color .15s ease, background .15s ease;
}
#l12SheetInfos .inf-mod:hover{ border-color:var(--amber); background:rgba(255,255,255,.08) }
#l12SheetInfos .inf-mod-n{
  grid-row:1 / span 2; align-self:center;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,196,40,.14); color:var(--amber);
  font-family:var(--mono); font-size:12px; font-weight:700;
}
#l12SheetInfos .inf-mod-t{ font-size:14px; font-weight:700; color:#fff; line-height:1.3 }
#l12SheetInfos .inf-mod-s{ font-size:11.5px; line-height:1.4; color:var(--dim) }
#l12SheetInfos .inf-mod-c{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:18px; color:var(--dim); opacity:.7;
}

/* Retour. Discret : c'est une sortie, pas une action qu'on propose. */
#l12SheetInfos .inf-retour{
  display:inline-flex; align-items:center; margin:0 0 12px; padding:7px 12px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:transparent; color:var(--dim); font:inherit; font-size:12px;
  cursor:pointer; min-height:32px;
}
#l12SheetInfos .inf-retour:hover{ border-color:rgba(255,196,40,.5); color:#fff }
#l12SheetInfos .inf-liste .inf-retour{ margin:14px 0 0 }

/* ------------------------------------------------------------ MAJ à venir */
#l12SheetInfos .inf-majs{ display:grid; gap:10px; margin:4px 0 0 }
#l12SheetInfos .inf-maj{
  padding:11px 13px; border-radius:11px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
}
#l12SheetInfos .inf-maj-n{
  display:inline-block; margin:0 0 5px; padding:2px 8px; border-radius:999px;
  background:rgba(255,196,40,.14); color:var(--amber);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
}
#l12SheetInfos .inf-maj-t{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.35 }
#l12SheetInfos .inf-maj-x{ margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--dim) }
#l12SheetInfos .inf-maj-e{
  margin-top:6px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}

/* ------------------------------------------------------------------ mobile */
/* Sous 430 px on resserre la typographie d'un cran. Rien ne passe sous 11 px :
   en dessous, le texte cesse d'être lu et devient une texture. */
@media(max-width:430px){
  #l12SheetInfos .inf-h{ font-size:18px }
  #l12SheetInfos .inf-p{ font-size:12.5px; line-height:1.52; margin-bottom:8px }
  #l12SheetInfos .inf-kick{ margin-bottom:11px }
  #l12SheetInfos .inf-fort{ font-size:13px }
  #l12SheetInfos .inf-mod{ padding-right:34px }
  #l12SheetInfos .inf-mod-t{ font-size:13.5px }
  #l12SheetInfos .inf-fiction{ font-size:11px; margin-top:13px }
  /* Un cran plus compact, et pas davantage : on resserre l'interligne et les
     marges, jamais la taille du texte de lecture. Le bouton collant fait le
     reste. */
  #l12SheetInfos .inf-suivant{ margin-top:14px; padding:12px 14px }
}


/* ==========================================================================
   PRÉ-JALON D §17 — L'ÉCRAN DE CRÉATION
   --------------------------------------------------------------------------
   Mesuré à l'écran, pas déduit : sur un téléphone de 390 px, la carte
   « Reconditionnement & Spécifique » de l'étape 2 rendait « Reconditionnemen
   & Spécifique ». Le nom du plus long atelier du jeu débordait de sa carte et
   se faisait rogner, et un joueur y lisait un mot inexistant au moment précis
   où il choisit son premier atelier.

   La règle CSS qui manquait est celle qui autorise la coupure d'un mot trop
   long pour sa colonne. On ne touche ni à la grille, ni aux tailles : on
   autorise la césure, et le nom s'affiche en entier.
   ========================================================================== */
.create-services .opt .n,
.create-diplomas .opt .n,
.create-jobs .opt .n{
  overflow-wrap:anywhere; hyphens:auto;
}


/* ==========================================================================
   PRÉ-JALON D — LE BOUTON « COMPTE » DU BANDEAU INFÉRIEUR
   --------------------------------------------------------------------------
   Trois exigences qui se contredisent presque, et qu'il faut tenir ensemble :

     · il appartient au BANDEAU DES COMMANDES SECONDAIRES — même rangée, même
       forme de pastille, même famille typographique que Paramètres et Infos ;
     · il doit s'y voir DAVANTAGE, parce qu'il prépare une fonction importante
       du futur mode en ligne ;
     · il ne doit JAMAIS avoir l'air d'un passage obligé. « Jouer » reste la
       seule action primaire de l'écran, et aucun compte n'est nécessaire pour
       jouer aujourd'hui.

   D'où le traitement : la teinte d'accent et une bordure pleine le détachent
   de ses deux voisins, mais il garde leur taille, leur pastille et leur
   typographie — et surtout il reste en bas d'écran, loin du bouton primaire.
   Il attire l'œil dans son bandeau ; il ne dispute rien à « Jouer ».

   IL PREND SA PROPRE RANGÉE, EN PLEINE LARGEUR. Quatre pastilles ne tiennent
   pas sur une seule ligne à 360 px : trois occupaient déjà 356 px des 390
   disponibles. Plutôt que de rétrécir les libellés jusqu'à l'illisible, on lui
   donne la rangée du dessus pour lui seul. C'est aussi ce qui sert la
   hiérarchie voulue : il domine son bandeau sans quitter son bandeau.

   ── DEUX CHOSES MESURÉES, ET NON DEVINÉES ──────────────────────────────────
   Premier jet : ces règles ne s'appliquaient pas, et le bouton ressemblait
   exactement à ses voisins. Deux causes, trouvées en lisant le style CALCULÉ
   dans le navigateur plutôt qu'en relisant le mien :

     · `.l12-mini` n'est PAS une rangée flex. `lot12-v4.css` la transforme en
       `display:grid !important` à trois colonnes fixes. Un `flex-wrap` n'y
       change rien — il n'était même pas lu. D'où `grid-column:1 / -1`, qui est
       la façon de dire « toute la largeur » dans une grille ;
     · `lot12-c6-corrections.css` impose `background` et `border-color` en
       `!important` sur `#scHome .l12-mini button`. Une règle plus spécifique
       perd quand même contre `!important`. Les feuilles des lots précédents
       s'en servent largement ; une règle neuve doit jouer avec les mêmes armes
       ou elle perd en silence — ce qui est pire qu'un échec visible.
   ========================================================================== */

/* La rangée du dessus, pour lui seul. `grid-column` parce que le bandeau est
   une grille, pas une rangée flex — voir ci-dessus. */
#scHome .l12-mini{ row-gap:9px }
#scHome #l12BtnCompte.l12-mini-fort{
  grid-column:1 / -1;
  border-color:rgba(255,196,40,.62)!important;
  background:linear-gradient(180deg, rgba(255,196,40,.16), rgba(255,196,40,.06))!important;
  color:#fff!important; font-weight:700;
  letter-spacing:.16em!important; font-size:9.6px!important;
  padding:10px 14px!important;
  box-shadow:0 2px 16px -8px rgba(255,196,40,.9);
}
#scHome #l12BtnCompte.l12-mini-fort:hover{
  border-color:var(--hivis)!important;
  background:linear-gradient(180deg, rgba(255,196,40,.24), rgba(255,196,40,.1))!important;
}
/* La pastille de profil, un cran plus lumineuse que les icônes voisines. */
#scHome #l12BtnCompte.l12-mini-fort svg{
  width:16px!important; height:16px!important; color:var(--hivis);
  filter:drop-shadow(0 0 10px rgba(255,197,47,.3));
}

/* ---------------------------------------------------- la feuille « Compte » */
/* Une annonce, pas un écran. Trois éléments : une icône, une phrase, une
   précision. Rien à remplir, rien à valider. */
#l12SheetCompte .l12-compte-ic{
  width:46px; height:46px; margin:2px auto 12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,196,40,.42);
  background:rgba(255,196,40,.1);
}
#l12SheetCompte .l12-compte-ic svg{ width:24px; height:24px; color:var(--hivis) }
#l12SheetCompte .l12-sheet-title{ text-align:center }
#l12SheetCompte .l12-compte-p{
  margin:0 auto 12px; max-width:34em; text-align:center;
  font-size:13.5px; line-height:1.6; color:#dde6ef;
}
/* La phrase qui désamorce le doute : elle est plus discrète que l'annonce,
   parce qu'elle rassure au lieu d'annoncer. */
#l12SheetCompte .l12-compte-n{
  margin:0 auto; max-width:34em; padding:10px 12px; border-radius:10px;
  border-left:3px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  font-size:12.5px; line-height:1.5; color:var(--dim);
}
#l12SheetCompte .l12-sheet-close{ margin-top:16px }