/* assets/css/account-mobile.css
   Mode application de l'espace candidat : sous 900px, la barre latérale cède la place à
   une barre d'onglets fixée en bas de l'écran.

   POINT DE RUPTURE — 900px, et ce n'est pas un choix neuf. account.css porte déjà onze
   `@media (max-width: 900px)` : c'est là que la coquille passe en colonne, que la barre
   latérale s'étale en bandeau pleine largeur et que sa navigation se met sur deux
   colonnes. Le mode application remplace exactement cet état-là. Un point de rupture
   propre à cette feuille aurait créé une troisième mise en page entre les deux, à
   entretenir à chaque changement.

   COULEURS — aucune valeur en dur : tout vient des alias `--ac-*` que account.css déclare
   sur `.rlcc-account`, eux-mêmes branchés sur les jetons de charte. Seules restent
   littérales la GÉOMÉTRIE (hauteurs, rayons, décalages) — décision de cadrage de l'espace
   candidat — et les neutres purs `rgba(0, 0, 0, α)` des ombres, qui ne portent aucun rôle.

   NOMMAGE — `rlcc-account__tabbar-item` et non `rlcc-account__tab` : ce dernier nom est
   DÉJÀ pris, par front.css et par newwork-account.css, pour un tout autre composant (une
   rangée d'onglets horizontale en capitales espacées). La mesure au rendu l'a montrée
   avant que quiconque ne la voie : les libellés de la barre sortaient en majuscules,
   1,4px d'interlettrage, et débordaient de leur emplacement. Toutes les classes propres à
   cette feuille commencent donc par `rlcc-account__tabbar`, `__sheet` ou `__more`, et un
   test refuse qu'une seule d'entre elles soit déclarée par une autre feuille de l'espace.

   SPÉCIFICITÉ — les règles qui reprennent la main sur account.css sont écrites à deux
   classes (`.rlcc-account .rlcc-account__x`) là où la feuille d'origine n'en pose qu'une.
   Elles gagnent donc par leur poids, et pas seulement parce que cette feuille s'imprime
   après : un jour où l'ordre d'enqueue changerait, la barre latérale ne réapparaîtrait pas
   sous la barre du bas. */

.rlcc-account {
  /* Hauteur utile de la barre, hors zone de sécurité. 64px : deux lignes (picto 26px +
     libellé 11px) et une cible tactile confortable au-delà des 44px recommandés. */
  --ac-tabbar-height: 64px;
  /* ZONE DE SÉCURITÉ iOS — sur un iPhone sans bouton d'accueil, les ~34px du bas
     appartiennent à la barre de gestes du système. Sans cette réserve, le dernier onglet
     passe DESSOUS et devient intouchable. Le repli `0px` vaut pour tous les autres
     appareils, où `env()` n'est pas résolu. */
  --ac-tabbar-safe: env(safe-area-inset-bottom, 0px);
  /* Encombrement total : c'est cette valeur, et non la seule hauteur, qui doit dégager le
     bas du contenu — sinon la réserve iOS mange la dernière ligne de la page. */
  --ac-tabbar-space: calc(var(--ac-tabbar-height) + var(--ac-tabbar-safe));
}

/* Au-dessus du point de rupture, la barre latérale suffit : la barre du bas n'existe pas
   à l'écran. Elle reste dans le document — le masquage est une affaire de largeur, pas de
   rendu serveur : une page mise en cache doit servir les deux mises en page. */
.rlcc-account .rlcc-account__tabbar { display: none; }

@media (max-width: 900px) {
  .rlcc-account .rlcc-account__sidebar { display: none; }

  .rlcc-account .rlcc-account__tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: stretch;
    min-height: var(--ac-tabbar-space);
    padding-bottom: var(--ac-tabbar-safe);
    background: var(--ac-surface);
    border-top: 1px solid var(--ac-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .10);
  }

  /* DÉGAGEMENT — le contenu se termine au-dessus de la barre. Sans ce complément de
     remplissage, la dernière carte, le dernier bouton d'envoi ou la dernière ligne d'une
     liste finissent sous une barre opaque, définitivement hors d'atteinte : rien ne
     défile plus une fois le bas de page atteint. */
  .rlcc-account .rlcc-account__main {
    padding-bottom: calc(var(--ac-tabbar-space) + 24px);
  }

  .rlcc-account .rlcc-account__tabbar-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--ac-tabbar-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--ac-ink);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    /* Le quatrième emplacement est un `summary` : sans ces deux lignes, le navigateur lui
       ajoute son triangle d'ouverture à côté du picto. */
    list-style: none;
  }
  .rlcc-account .rlcc-account__tabbar-item::-webkit-details-marker { display: none; }
  .rlcc-account .rlcc-account__tabbar-item:hover { color: var(--ac-ink); text-decoration: none; }

  .rlcc-account .rlcc-account__tablabel {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rlcc-account .rlcc-account__tabicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    transition: background-color .15s ease, color .15s ease;
  }
  .rlcc-account .rlcc-account__tabicon .fi { font-size: 20px; line-height: 0; display: inline-flex; }
  .rlcc-account .rlcc-account__tabicon .fi::before { line-height: 1; }

  /* ÉTAT ACTIF — même langage que la barre latérale, qui remplit son entrée courante de
     l'aplat de charte : ici l'aplat se resserre sur le picto, le libellé prend la couleur
     d'accent. Un onglet plein sur toute sa hauteur écraserait une barre de 64px.
     Les sous-écrans allument leur parent sans règle propre : c'est `navModels()` qui pose
     `is-current` sur le parent, et le gabarit qui la relaie au quatrième emplacement. */
  .rlcc-account .rlcc-account__tabbar-item.is-current,
  .rlcc-account .rlcc-account__more.is-current > .rlcc-account__tabbar-item {
    color: var(--ac-primary);
  }
  .rlcc-account .rlcc-account__tabbar-item.is-current .rlcc-account__tabicon,
  .rlcc-account .rlcc-account__more.is-current > .rlcc-account__tabbar-item .rlcc-account__tabicon {
    background: var(--ac-primary);
    color: var(--ac-on-primary);
  }

  .rlcc-account .rlcc-account__tabbadge {
    position: absolute;
    top: 4px;
    left: calc(50% + 10px);
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ac-teal-deep);
    color: var(--ac-on-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* QUATRIÈME EMPLACEMENT — un `details` natif, le plus simple qui marche : il s'ouvre au
     doigt comme à la barre d'espace, annonce son état tout seul aux lecteurs d'écran, ne
     retient jamais le focus et se referme à la navigation suivante. Aucun script, donc
     aucune chaîne visible fabriquée ailleurs qu'en PHP. */
  .rlcc-account .rlcc-account__more {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }
  .rlcc-account .rlcc-account__more > .rlcc-account__tabbar-item { flex: 1 1 auto; }

  .rlcc-account .rlcc-account__sheet {
    position: absolute;
    bottom: 100%;
    right: 8px;
    z-index: 1;
    min-width: 240px;
    max-width: min(84vw, 320px);
    max-height: min(60vh, 420px);
    overflow-y: auto;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    background: var(--ac-surface);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .16);
  }

  /* Le bandeau d'identité vivait dans la barre latérale : sans lui, le candidat perdrait
     son nom en passant sur mobile. Il revient ici, à la taille d'un menu de compte. */
  .rlcc-account .rlcc-account__sheetuser {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    padding: 0 4px 10px;
    border-bottom: 1px solid var(--ac-border);
  }
  .rlcc-account .rlcc-account__sheetuser .rlcc-account__avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .rlcc-account .rlcc-account__sheetname {
    min-width: 0;
    color: var(--ac-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .rlcc-account .rlcc-account__sheetlink {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: var(--ac-radius-inner);
    color: var(--ac-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }
  .rlcc-account .rlcc-account__sheetlink:hover { background: rgba(0, 0, 0, .05); color: var(--ac-ink); text-decoration: none; }
  .rlcc-account .rlcc-account__sheetlink.is-current,
  .rlcc-account .rlcc-account__sheetlink.is-current:hover {
    background: var(--ac-primary);
    color: var(--ac-on-primary);
  }
  .rlcc-account .rlcc-account__sheetlink.is-current .fi { color: var(--ac-on-primary); }

  .rlcc-account .rlcc-account__sheet-logout { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--ac-border); }
  .rlcc-account .rlcc-account__sheet-logout .rlcc-account__logout-btn { justify-content: flex-start; min-height: 48px; padding: 0 12px; font-size: 15px; }
}