/* ==========================================================================
   B18 V2 — Coquille et navigation (story S1.2)

   Aucune couleur littérale : tout passe par les jetons.
   Seuil mobile unique à 820 px, écrit en clair parce qu'une media query ne
   sait pas lire une variable CSS. La valeur de référence est --seuil-mobile.
   ========================================================================== */

.coquille {
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Barre latérale — bureau
   -------------------------------------------------------------------------- */

/* LA BARRE PORTE LA COULEUR DU CLIENT.
 *
 * Demandé par Stéphanie le 29/08 : « le client souhaite que la barre latérale
 * soit à ses couleurs ». La couleur est celle donnée par Cédric le 11/08,
 * #82BDBE, le jeton `--lagon`.
 *
 * DEUX RÈGLES DÉJÀ ÉCRITES LA COMMANDENT, ET ELLES SE COMPLÈTENT :
 *
 *   - `B18_REGLES_AFFICHAGE.md` §1 : « dégradés réservés aux surfaces actives
 *     (onglet sélectionné, bouton principal, BARRE LATÉRALE), d'amplitude
 *     faible ». La barre est nommément citée : c'est un dégradé discret, pas
 *     un aplat.
 *   - Le même §1 : « le teal clair de la marque est trop clair pour du texte
 *     blanc. Partout où il devient un fond, le texte associé passe au teal
 *     foncé. » Les libellés passent donc en `--teal-d`, jamais en blanc.
 *
 * En thème sombre, la marque ne devient pas un aplat clair — elle resterait
 * plus lumineuse que l'écran qu'elle borde. Elle y vit en teinte profonde,
 * avec le même filet de marque sur le bord.
 */
.lateral {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 232px;
  background: linear-gradient(180deg, var(--lagon-f) 0%, var(--lagon-b) 100%);
  border-right: 1px solid var(--lagon);
  display: flex;
  flex-direction: column;
  padding: var(--e-4) var(--e-3);
  gap: var(--e-4);
  overflow-y: auto;
}

.lateral .marque {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0 var(--e-3);
  margin: 0;
}

/* Le logo est fourni sur fond noir : on l'encadre plutôt que de le détourer.
   Un logo retouché n'est plus le logo du client. */
.marque-logo {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-s);
  object-fit: cover;
  background: #000;
}

.marque-nom {
  font-size: var(--t-petit);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: var(--graisse-caps);
  color: var(--sur-lagon);
}

/* L'HEURE DE LA DERNIÈRE LECTURE D'AXONAUT.
 *
 * Demandée par Stéphanie le 29/08. Elle répond à une question qu'on se pose
 * devant un écran qui semble incomplet : est-ce que l'application a lu Axonaut
 * récemment, ou est-ce que je regarde des données d'hier ?
 *
 * Elle n'est jamais inventée : sans réponse du serveur, elle dit qu'elle ne
 * sait pas — c'est la règle du §4. */
.sync {
  padding: 0 var(--e-3);
  font-size: var(--t-micro);
  color: var(--sur-lagon);
  opacity: .8;
  line-height: 1.4;
}

.sync:empty { display: none; }

.sync[data-etat="echec"] {
  color: var(--lave);
  opacity: 1;
}

.lateral nav {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.lien {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  /* Sur le fond de marque, le texte est en teal foncé : c'est la règle du §1,
     et c'est ce qui tient le contraste. */
  color: var(--sur-lagon);
  font-size: var(--t-appui);
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.lien:hover {
  background: var(--lagon-survol);
  color: var(--teal-d);
}

/* L'écran courant se distingue par un aplat de marque, pas par une couleur
   d'état : la couleur d'état est réservée à ce qui va bien ou mal. */
.lien[aria-current="page"] {
  background: var(--teal);
  color: var(--sur-teal);
  font-weight: var(--graisse-appui);
}

.ic {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Zone principale
   -------------------------------------------------------------------------- */

.principal {
  margin-left: 232px;
  padding: var(--e-5) var(--e-5) var(--e-7);
}

/* Le contenu est collé au bord de la barre latérale. Un `margin: 0 auto` le
   centrait dans l'espace restant et créait une marge fantôme à gauche autant
   qu'à droite (B18_REGLES_AFFICHAGE.md §5).

   LE PLAFOND EST PASSÉ DE 1120 À 1520 px le 29/08, sur un constat de
   Stéphanie : sur un écran de 1920 px, l'ancien laissait 546 px de vide à
   droite — mesuré. La règle §5 plafonne pour qu'une LIGNE COURTE ne s'étire
   pas sur toute la largeur ; elle ne demande pas de laisser un tiers de
   l'écran inutilisé sur des écrans denses comme le planning ou le tableau
   de bord.

   Les listes de lignes courtes gardent leur propre plafond, plus serré :
   c'est là que la règle §5 s'applique vraiment. */
.principal > * {
  max-width: 1520px;
}

/* Les listes d'une seule colonne de texte restent lisibles : au-delà, l'œil
   perd la ligne en revenant à gauche. */
.notifs-liste,
.aide-bloc {
  max-width: 900px;
}

.barre-haute {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-5);
}

.barre-haute h1 {
  font-size: var(--t-titre-l);
}

/* Le contenu est focalisable pour recevoir le focus au changement d'écran,
   sans entrer dans l'ordre de tabulation. */
#contenu:focus {
  outline: none;
}

#contenu:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Barre d'onglets — mobile
   Masquée sur bureau, elle prend la main sous 820 px.
   -------------------------------------------------------------------------- */

.onglets,
.panneau-plus {
  display: none;
}

/* --------------------------------------------------------------------------
   Seuil mobile : 820 px (--seuil-mobile)

   Le mobile n'est pas un bureau rétréci : la barre latérale ne se comprime
   pas, elle DISPARAÎT et la navigation change de forme
   (B18_REGLES_AFFICHAGE.md §13).
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .lateral {
    display: none;
  }

  .principal {
    margin-left: 0;
    /* La réserve du bas laisse passer la barre d'onglets et la zone sûre de
       l'iPhone : sans elle, le dernier élément de la page est inatteignable. */
    padding: var(--e-4) var(--e-4) calc(var(--e-7) + 68px + env(safe-area-inset-bottom, 0px));
  }

  .barre-haute h1 {
    font-size: var(--t-titre);
  }

  /* position:fixed, PAS sticky. En sticky, la barre n'occupait pas la zone
     sous la barre de statut iOS translucide : au premier défilement, le
     contenu devenait visible en transparence à travers l'heure et la
     batterie (retour de Cédric du 14/08). */
  .onglets {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--trait);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Les icônes sont calées en haut, pas centrées : « Tableau de bord » passe
     sur deux lignes à 375 px, et un centrage vertical décalait alors son
     icône par rapport aux quatre autres. Le libellé peut respirer sur deux
     lignes, la rangée d'icônes reste droite. */
  .onglet {
    flex: 1;
    min-height: var(--cible);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: var(--e-2) var(--e-1) var(--e-3);
    border: 0;
    background: transparent;
    color: var(--encre3);
    font-size: var(--t-micro);
    cursor: pointer;
  }

  /* Sur la barre basse, l'écran courant se marque par la couleur et un trait,
     pas par un aplat plein : cinq aplats côte à côte feraient une barre de
     couleur illisible. */
  .onglet[aria-current="page"] {
    color: var(--teal);
    font-weight: var(--graisse-appui);
    box-shadow: inset 0 2px 0 0 var(--teal);
  }

  .onglet span {
    line-height: 1.1;
    text-align: center;
  }

  /* Le panneau s'ancre au-dessus de la barre, du côté du bouton « Plus » qui
     l'ouvre — jamais un tiroir venu du bas. */
  .panneau-plus {
    position: fixed;
    right: var(--e-2);
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    z-index: 41;
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
    min-width: 190px;
    padding: var(--e-2);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-m);
    box-shadow: var(--ombre);
  }

  .panneau-plus[hidden] {
    display: none;
  }
}