/* ============================================================
   TROKIN — le menu et la fenêtre du mode Solia, définis une seule fois

   Comme la barre du bas avant eux, ils étaient écrits deux fois : dans
   `app.js`/`styles.css` pour le site, dans `index.html` pour l'accueil — qui
   ne charge pas `styles.css`, dont les règles globales écraseraient une mise
   en page relevée au pixel. Deux copies finissent toujours par diverger.

   Ce fichier est la seule source. `index.html` le charge directement ;
   `styles.css` l'importe pour les autres pages. Le balisage reste produit à
   deux endroits — en dur ici, par `shell()` là — mais avec les mêmes classes :
   toute modification de structure doit toucher les deux.

   En pixels, et non en rem : `index.html` a sa propre base rem, les autres
   pages non, et les deux doivent rendre à l'identique.
   ============================================================ */

/* ---------- Le panneau ---------- */

.tk-menu-voile {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 16, 40, .42);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.tk-menu-voile.ouvert { opacity: 1; pointer-events: auto; }
.tk-menu-voile[hidden] { display: none; }

.tk-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(320px, 86vw);
  background: #fff;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.tk-menu.ouvert { transform: none; }
.tk-menu[hidden] { display: none; }

/* Qui l'on est, en tête : c'est le premier repère quand le panneau s'ouvre. */
.tk-menu-qui {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 14px; margin-bottom: 10px;
  border-bottom: 1px solid #EDE8E2;
  text-decoration: none; color: inherit;
}
/* `.rond` pour l'accueil, `.avatar` pour le site : les deux portent déjà leur
   taille, on ne la leur impose pas une seconde fois — c'est ce qui décentrait
   l'image quand il n'y avait pas de photo. */
.tk-menu-qui .rond, .tk-menu-qui .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #EEEAE5; color: #9A948C;
  display: grid; place-items: center; flex: none;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.tk-menu-qui .rond svg, .tk-menu-qui .rond .ic,
.tk-menu-qui .avatar svg, .tk-menu-qui .avatar .ic { width: 22px; height: 22px; }
.tk-menu-qui .rond img, .tk-menu-qui .avatar img { width: 100%; height: 100%; object-fit: cover; }
.tk-menu-qui b { display: block; font-size: 15px; font-weight: 800; }
.tk-menu-qui span {
  display: block; font-size: 12px; color: #6E6A66; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tk-menu-nav { display: block; }
/* Le pied porte aussi des liens, pas seulement des interrupteurs : « Devenir
   pro » en est un. Sans lui, il se présentait comme du texte nu au milieu de
   lignes cliquables. */
.tk-menu-nav a, .tk-menu-pied a, .tk-menu button {
  display: flex; align-items: center; gap: 11px;
  /* 44 px : la cible tactile minimale, sinon on vise à côté. */
  min-height: 44px; padding: 11px 10px;
  border-radius: 12px;
  font-size: 14px; font-weight: 600; color: #0E2A47;
  text-align: left; width: 100%; text-decoration: none;
}
.tk-menu-nav a svg, .tk-menu-nav a .ic, .tk-menu-pied a svg, .tk-menu-pied a .ic,
.tk-menu button svg, .tk-menu button .ic { width: 18px; height: 18px; flex: none; color: #6E6A66; }
.tk-menu-nav a:hover, .tk-menu-pied a:hover, .tk-menu button:hover { background: #F5F1EC; }
.tk-menu-nav a.active { background: #FDF0E9; color: #F5500F; }
.tk-menu-nav a.active .ic, .tk-menu-nav a.active svg { color: #F5500F; }
.tk-menu-nav a .right { margin-left: auto; }

/* Ce qui n'est pas une destination se détache du reste. */
.tk-menu-pied { margin-top: auto; padding-top: 12px; border-top: 1px solid #EDE8E2; }

.tk-menu-solia .coeur { color: #C8C3BC; }
.tk-menu-solia .piste {
  margin-left: auto; width: 32px; height: 18px; border-radius: 99px;
  background: #DAD5CE; position: relative; flex: none; transition: background .2s;
}
.tk-menu-solia .piste::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .2s;
}
.tk-menu-solia[aria-checked="true"] { color: #4232B8; }
.tk-menu-solia[aria-checked="true"] .coeur { color: #C2406F; }
.tk-menu-solia[aria-checked="true"] .piste { background: #C2406F; }
.tk-menu-solia[aria-checked="true"] .piste::after { left: 16.5px; }

/* Trokin PRO — même interrupteur que Solia, autre couleur : le teal de la
   planche pro. La piste est décrite une fois pour les deux, seule la teinte
   allumée change. */
.tk-menu-pro .piste {
  margin-left: auto; width: 32px; height: 18px; border-radius: 99px;
  background: #DAD5CE; position: relative; flex: none; transition: background .2s;
}
.tk-menu-pro .piste::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .2s;
}
.tk-menu-pro[aria-checked="true"] { color: #074F53; }
.tk-menu-pro[aria-checked="true"] .ic { color: #074F53; }
.tk-menu-pro[aria-checked="true"] .piste { background: #074F53; }
.tk-menu-pro[aria-checked="true"] .piste::after { left: 16.5px; }

.tk-menu-sortir, .tk-menu-sortir svg, .tk-menu-sortir .ic { color: #B4453A; }

/* Là où une colonne de navigation prend le relais, le panneau n'a pas lieu
   d'être : l'avatar y redevient un lien vers le profil. */
@media (min-width: 901px) {
  .tk-menu.avec-sidebar, .tk-menu-voile.avec-sidebar { display: none; }
}

/* ---------- La fenêtre du mode Solia ---------- */

.tk-solia-voile {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(6, 16, 40, .45);
  /* Flex, pas grid : la boîte se limite en `max-height: 100%`, qui ne vaut
     quelque chose que contre la hauteur — définie — du voile. En grid, le
     pourcentage se heurte à une piste `auto` et n'agit pas. */
  display: flex; align-items: center; justify-content: center; padding: 20px;
  /* Un voile `fixed` couvre le viewport barres du navigateur MASQUÉES : centrer
     dedans pousse la fenêtre sous la barre d'outils de Safari. Ce bas de marge
     rend la hauteur des barres au centrage, sans découvrir le bas de l'écran
     comme le ferait `height: 100svh`. Ailleurs, la soustraction vaut zéro. */
  padding-bottom: calc(20px + (100lvh - 100svh));
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.tk-solia-voile.ouvert { opacity: 1; pointer-events: auto; }
.tk-solia-voile[hidden] { display: none; }

.tk-solia-boite {
  width: min(360px, 100%);
  /* En pourcentage du parent, et non en `svh` au jugé : le voile (ou le
     caisson transparent de la modale commune) connaît déjà l'espace vraiment
     disponible, compensation des barres de Safari comprise, via son `padding`.
     Se mesurer en `svh` ignorait ce padding : la boîte débordait du haut de
     l'écran, et l'affiche y perdait son titre. Exige un parent en flex centré,
     jamais en grid : un pourcentage contre une piste `auto` est lettre morte,
     et la boîte redeviendrait sans limite. */
  max-height: 100%;
  background: #fff; border-radius: 20px;
  /* `contain` : arrivé en bout de course, le geste s'arrête là plutôt que de
     repartir dans la page. */
  overflow: hidden auto; overscroll-behavior: contain;
}
/* L'entrée en scène appartient au voile : hors de lui — dans la modale
   commune, qui a la sienne — la boîte restait figée à 96 %, donc rétrécie et
   floue, faute de la classe `ouvert` qui l'aurait rendue à sa taille. */
.tk-solia-voile .tk-solia-boite { transform: scale(.96); transition: transform .2s; }
.tk-solia-voile.ouvert .tk-solia-boite { transform: none; }
/* L'affiche officielle est en portrait : son grand titre incrusté prenait le
   tiers du cadre, et il fallait choisir entre lui et les pieds des marcheuses.
   Le tirage de la fenêtre, `solia-affiche-fenetre.jpg`, est donc recadré SOUS
   le titre (demande CEO du 11 août 2026) : le slogan incrusté reste en haut,
   les sept silhouettes sont entières — et le titre redescend en HTML sur le
   chemin, en bas (`.griffe`). Il garde son rapport à toute taille, plutôt que
   de se faire retailler par l'écran. */
.tk-solia-boite .affiche { position: relative; display: block; }
.tk-solia-boite img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 760 / 790;
  object-fit: cover;
}
/* La griffe « Solia ♥ by Trokin », en vraie typo par-dessus la photo : les
   pictogrammes sont inclus en ligne — la fenêtre s'ouvre aussi sur l'accueil,
   qui n'a pas la planche d'icônes des autres pages. Playfair y est chargée
   comme ailleurs. */
.tk-solia-boite .griffe {
  position: absolute; left: 0; right: 0; top: 2.1%;
  /* Empilée comme sur l'affiche : « Solia ♥ » au-dessus, « by ◯ Trokin »
     centré dessous — aligner les deux sur une même ligne ne tombait jamais
     juste, les corps de texte étant trop différents. */
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: 'Playfair Display', Georgia, serif;
  color: #fff; font-size: 25px; font-weight: 700; letter-spacing: -.005em;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(6, 16, 40, .55);
  pointer-events: none;
}
.tk-solia-boite .griffe .mot { display: flex; align-items: baseline; }
.tk-solia-boite .griffe .ligne-by { display: flex; align-items: center; gap: 5px; }
.tk-solia-boite .griffe .coeur {
  width: 13px; height: 13px; margin-left: 5px;
  fill: #EC4899; flex: none;
  filter: drop-shadow(0 1px 4px rgba(6, 16, 40, .4));
}
.tk-solia-boite .griffe .by {
  font-family: 'Plus Jakarta Sans', 'Figtree', sans-serif;
  font-size: 11px; font-weight: 700;
}
/* Le slogan, en bas sur le chemin — c'était l'inverse sur l'affiche, la CEO
   a préféré la griffe en haut et la promesse en bas. Le rose est celui de
   l'affiche. */
.tk-solia-boite .slogan {
  /* Sous les pieds des marcheuses, sur le chemin nu — pas sur leurs jambes.
     Demi-gras, pas gras : posé sur la photo, le 700 empâtait. L'ombre porte
     la lisibilité sur le chemin clair. */
  position: absolute; left: 0; right: 0; bottom: 1.6%;
  text-align: center;
  font-family: 'Figtree', 'Plus Jakarta Sans', sans-serif;
  color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3;
  text-shadow: 0 1px 3px rgba(6, 16, 40, .6), 0 2px 14px rgba(6, 16, 40, .55);
  pointer-events: none;
}
.tk-solia-boite .slogan b { color: #FF5C9D; font-weight: 700; }
.tk-solia-boite .griffe .mark {
  width: 12px; height: 12px; flex: none;
  filter: drop-shadow(0 1px 4px rgba(6, 16, 40, .4));
}
.tk-solia-boite .griffe b {
  font-family: 'Plus Jakarta Sans', 'Figtree', sans-serif;
  font-size: 14px; font-weight: 800;
}
.tk-solia-boite .dedans, .tk-pro-boite .dedans { padding: 18px 18px 10px; }
.tk-solia-boite h2, .tk-pro-boite h2 { font-size: 19px; font-weight: 800; margin: 0; }
/* Nom propre à la fenêtre : l'accueil a sa propre `.promesse`, la carte posée
   sur la photo du bandeau — en `position: absolute`. La ligne de Solia la
   prenait pour elle et s'en allait flotter au bas de la page. */
.tk-solia-boite .solia-promesse {
  color: #C2406F; font-weight: 700; font-size: 13px; margin: 3px 0 14px;
}
.tk-solia-boite .point, .tk-pro-boite .point {
  display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid #EDE8E2;
}
.tk-solia-boite .point b, .tk-pro-boite .point b { display: block; font-size: 13.5px; font-weight: 700; }
.tk-solia-boite .point span, .tk-pro-boite .point span {
  display: block; font-size: 12.5px; color: #6E6A66; line-height: 1.45; margin-top: 2px;
}
.tk-solia-boite .point svg, .tk-solia-boite .point .ic {
  width: 18px; height: 18px; flex: none; color: #4232B8; margin-top: 2px;
}
/* Le bouton reste sous les yeux quoi qu'il arrive : sur un écran court, il
   se retrouvait sous le pli d'une fenêtre qu'on ne pensait pas à faire
   défiler. C'est le pied, plus bas, qui porte le fond : le bouton en avait un
   aussi, et les deux nappes blanches superposées effaçaient à moitié la
   dernière ligne du texte, même quand rien ne défilait. */
.tk-solia-boite .fermer, .tk-pro-boite .fermer {
  display: block; width: 100%; margin-top: 14px;
  background: #4232B8; color: #fff; font-size: 14.5px; font-weight: 700;
  border: 0; border-radius: 99px; padding: 13px; cursor: pointer;
}

/* Les boutons voyagent ensemble dans un pied collant : les rendre collants un
   par un les empilait au même endroit, et le principal disparaissait sous
   l'autre. Le fond évite que le texte passe dessous. */
.tk-solia-boite .pied, .tk-pro-boite .pied {
  position: sticky; bottom: 0;
  background: #fff;
  /* De l'air sous le dernier bouton : collé au bord pendant qu'il flotte,
     il avait l'air coupé. Le padding du `.dedans` rend la différence en fin
     de course. */
  padding-top: 12px; padding-bottom: 12px;
  box-shadow: 0 -6px 8px #fff;
}
.tk-solia-boite .pied .fermer:first-child { margin-top: 4px; }
.tk-solia-boite .fermer.secondaire { background: #EEEAE5; color: #4A4A4E; margin-top: 8px; }

/* ---------- La fenêtre des modes pro et particulier ----------
   Même fenêtre que celle de Solia — un mode qui change ce qu'on voit et ce
   qu'on publie mérite d'être expliqué au moment où on l'allume. Elle n'a pas
   d'affiche : la marque pro est typographique, un bandeau la porte. */

.tk-pro-boite {
  width: min(360px, 100%);
  /* Même règle que `.tk-solia-boite` : voir son commentaire. */
  max-height: 100%;
  background: #fff; border-radius: 20px;
  overflow: hidden auto; overscroll-behavior: contain;
}
.tk-pro-boite .bandeau {
  background: #043032; color: #fff;
  padding: 26px 18px 24px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.tk-pro-boite .bandeau .mot { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.tk-pro-boite .bandeau .mot i { font-style: normal; color: #FC642A; }
.tk-pro-boite .bandeau .badge {
  background: #fff; color: #043032;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 8px 5px; border-radius: 7px; line-height: 1;
}
/* Retour au particulier : le même bandeau, en clair — on quitte le mode, la
   fenêtre ne doit pas continuer d'en porter les couleurs pleines. */
.tk-pro-boite.particulier .bandeau { background: #F4EFE8; color: var(--text, #22302E); }
.tk-pro-boite.particulier .bandeau .mot { color: #0A787D; }
.tk-pro-boite.particulier .bandeau .badge { display: none; }

.tk-pro-boite .promesse-pro {
  color: #086166; font-weight: 700; font-size: 13px; margin: 3px 0 14px;
}
.tk-pro-boite .point svg, .tk-pro-boite .point .ic {
  width: 18px; height: 18px; flex: none; color: #086166; margin-top: 2px;
}
.tk-pro-boite .fermer { background: #074F53; }

/* Écran court : c'est le texte qui se resserre, plus l'affiche qui se fait
   rogner — ces deux paliers lui imposaient 200 puis 140 px de haut, et
   décapitaient les femmes qu'ils prétendaient laisser voir. Les blancs repris
   ici, une trentaine de pixels, sont ce qui fait tenir la fenêtre entière sur
   un écran de 720 px sans qu'on ait à la faire défiler. */
@media (max-height: 780px) {
  .tk-solia-boite .dedans { padding: 12px 16px 12px; }
  .tk-solia-boite .solia-promesse { margin: 2px 0 8px; }
  .tk-solia-boite .point { padding: 7px 0; }
  .tk-solia-boite .fermer { margin-top: 10px; }
  .tk-solia-boite .fermer.secondaire { margin-top: 6px; }
  .tk-solia-boite .pied { padding-top: 8px; }
}
@media (max-height: 640px) {
  .tk-solia-boite .dedans { padding: 10px 14px 10px; }
  .tk-solia-boite .point { padding: 6px 0; }
}

/* ---------- Les listes déroulantes (voir choix.js) ----------
   Une feuille qui monte du bas plutôt qu'une liste ancrée au champ : sur un
   téléphone, on ne vise pas un menu de 14 px accroché en haut à gauche. */

#tk-choix[hidden] { display: none; }
.tk-choix-voile {
  /* Au-dessus des modales (250) : une liste ouverte DEPUIS une fenêtre doit
     passer devant elle, sinon on voit ses lignes sans pouvoir les toucher. */
  position: fixed; inset: 0; z-index: 260;
  background: rgba(6, 16, 40, .42);
  opacity: 0; transition: opacity .2s;
}
#tk-choix.ouvert .tk-choix-voile { opacity: 1; }
.tk-choix-boite {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 261;
  width: min(412px, 100%); margin: 0 auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
  max-height: 70dvh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}
#tk-choix.ouvert .tk-choix-boite { transform: none; }
.tk-choix-titre {
  font-size: 12px; font-weight: 700; color: #6E6A66;
  padding: 10px 12px 8px;
}
.tk-choix-ligne {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 0; background: none; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 600; color: #0E2A47;
  text-align: left; cursor: pointer;
}
.tk-choix-ligne:hover { background: #F5F1EC; }
.tk-choix-ligne span { flex: 1 1 auto; min-width: 0; }
.tk-choix-ligne svg { width: 18px; height: 18px; flex: none; opacity: 0; color: #F5500F; }
.tk-choix-ligne.choisi { color: #F5500F; }
.tk-choix-ligne.choisi svg { opacity: 1; }
.tk-choix-ligne[disabled] { opacity: .45; cursor: default; }

/* ---------- Les notifications ----------
   Une feuille qui monte du bas, comme les filtres et les listes : sur
   téléphone, ce qui s'ouvre vient d'en bas. */

.tk-notifs-voile {
  position: fixed; inset: 0; z-index: 230;
  background: rgba(6, 16, 40, .42);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.tk-notifs-voile.ouvert { opacity: 1; pointer-events: auto; }
.tk-notifs-voile[hidden], .tk-notifs[hidden] { display: none; }
.tk-notifs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 231;
  width: min(412px, 100%); margin: 0 auto;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
  max-height: 74svh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}
.tk-notifs.ouvert { transform: none; }
.tk-notifs h2 { font-size: 16px; font-weight: 800; margin: 0 0 3px; }
.tk-notifs .sous { font-size: 12.5px; color: #6E6A66; margin: 0 0 12px; }
.tk-notifs a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 10px; border-radius: 12px;
  text-decoration: none; color: #0E2A47;
}
.tk-notifs a:hover { background: #F5F1EC; }
.tk-notifs a .rond {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: #E7F0FA; color: #2E6FB8;
}
.tk-notifs a .rond svg { width: 18px; height: 18px; }
.tk-notifs a .rond.vert { background: #E4F0EF; color: #146B63; }
.tk-notifs a .rond.orange { background: #FDEDE5; color: #F5500F; }
.tk-notifs a b { display: block; font-size: 13.5px; font-weight: 700; }
.tk-notifs a em { display: block; font-style: normal; font-size: 12px; color: #6E6A66; margin-top: 1px; }
.tk-notifs .rien { font-size: 12.5px; color: #6E6A66; line-height: 1.5; padding: 6px 10px 12px; }
.tk-notifs .pastille {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: #E23D2E; color: #fff;
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
}