/* L'ESPACE CLIENT COMME UNE APPLICATION, AU TÉLÉPHONE (fondateur, 07/11/2026 : « que
   toutes les pages soient userfriendly et que ce soit agréable de se balader comme sur
   une vraie app, comme si TVNI était sur l'App Store »).

   ⚠️ **PAR L'APPAREIL, JAMAIS PAR LA LARGEUR** (fondateur, 07/11/2026 : « que l'app
   détecte quand elle est ouverte sur téléphone et sur PC, et que si je suis sur PC et
   que je réduis la taille, ça ne se mette pas au format téléphone »). Tout ce qui suit
   vit sous `[data-appareil="telephone"]`, posé sur `<html>` par le serveur
   (`appareil.py`). Les règles de la charte qui RESSERRENT une page étroite restent à la
   largeur : un ordinateur rétréci se resserre, il ne devient pas un téléphone.
   Cadrage : `docs/superpowers/specs/2026-11-07-disposition-telephone-cadrage.md`.

   Chargée dans la tête de `admin_base.html` (espace client) et des pages publiques.
   Elle gagne par la spécificité, pas par l'ordre des feuilles ; un seul `!important`
   par besoin (la languette, que son script montre ; la recherche, que son script cale).

   Ce qu'elle tient :
   1. LA BARRE D'ONGLETS du bas, sous le pouce ; le ☰ du haut s'efface (l'onglet
      « Menu » le remplace), la languette de la communauté aussi (son onglet).
   2. UN SEUL ROND FLOTTANT, « Analyser », au-dessus de la barre (effacé quand on lit vers
      le bas, quand le menu, une fenêtre, l'enregistrement ou le clavier s'ouvre) ; l'aide
      dans la barre du haut, à côté du logo.
   3. LE BAS DE CHAQUE PAGE garde la place de la barre et des bulles.
   4. LA BARRE D'ENREGISTREMENT, les messages éphémères et le volet de la communauté
      s'arrêtent au-dessus de la barre.
   5. AU DOIGT : des cibles d'au moins 36 points, un retour au toucher, pas de halo gris.
   6. LE KIT DU TÉLÉPHONE : les pièces que les pages partagent (en-tête court, fenêtres
      qui montent du bas, onglets fixés…), une seule version de chacune. */

.barre-appli, .revenus-onglets { display: none; }

[data-appareil="telephone"] body:has(.barre-appli) {
  --barre-appli-h: 62px;
  --barre-appli: calc(var(--barre-appli-h) + env(safe-area-inset-bottom, 0px));
}

/* Pendant qu'on écrit (clavier ouvert), la barre et les bulles s'effacent, comme dans une
   application : elles remontaient au-dessus du clavier et mangeaient la moitié de ce qui
   restait d'écran. La barre d'enregistrement descend à sa place. */
[data-appareil="telephone"] body:has(.barre-appli):has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"]), textarea, select, [contenteditable="true"]):focus) {
  --barre-appli-h: 0px;
}
[data-appareil="telephone"] body:has(.barre-appli):has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"]), textarea, select, [contenteditable="true"]):focus) :is(.barre-appli, .chat-lanceur, .kb-pastille) {
  display: none;
}

/* ── 1. La barre ─────────────────────────────────────────────────────────────── */
[data-appareil="telephone"] .barre-appli {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  height: var(--barre-appli); padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: rgba(13, 13, 22, .9);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 -12px 32px -14px rgba(0, 0, 0, .7);
}
[data-appareil="telephone"] .barre-appli-onglet {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; font-size: 11px; font-weight: 500; line-height: 1.1; letter-spacing: .01em;
  color: var(--muted-foreground); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
[data-appareil="telephone"] .barre-appli-mot { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-appareil="telephone"] .barre-appli-ic {
  position: relative; display: grid; place-items: center; width: 54px; height: 30px; border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .12s ease;
}
[data-appareil="telephone"] .barre-appli-onglet[aria-current="page"],
[data-appareil="telephone"] .barre-appli-onglet[aria-expanded="true"] { color: #fff; }
[data-appareil="telephone"] .barre-appli-onglet[aria-current="page"] .barre-appli-ic,
[data-appareil="telephone"] .barre-appli-onglet[aria-expanded="true"] .barre-appli-ic {
  color: #D9D2FF; background: rgba(139, 127, 224, .24);
  box-shadow: inset 0 0 0 1px rgba(180, 168, 255, .22);
}
[data-appareil="telephone"] .barre-appli-communaute[aria-expanded="true"] .barre-appli-ic {
  color: #A5F3FC; background: rgba(103, 232, 249, .16); box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .28);
}
/* La communauté (ou le menu) ouverte, c'est ELLE qu'on regarde : un seul onglet allumé. */
[data-appareil="telephone"] body.cv-ouvert .barre-appli-onglet[aria-current="page"]:not([aria-expanded="true"]),
[data-appareil="telephone"] body:has(.sidebar-mobile.open) .barre-appli-onglet[aria-current="page"] { color: var(--muted-foreground); }
[data-appareil="telephone"] body.cv-ouvert .barre-appli-onglet[aria-current="page"]:not([aria-expanded="true"]) .barre-appli-ic,
[data-appareil="telephone"] body:has(.sidebar-mobile.open) .barre-appli-onglet[aria-current="page"] .barre-appli-ic { background: none; box-shadow: none; color: inherit; }
[data-appareil="telephone"] .barre-appli-onglet:active .barre-appli-ic { transform: scale(.9); }
[data-appareil="telephone"] .barre-appli-onglet:focus-visible { outline: none; }
[data-appareil="telephone"] .barre-appli-onglet:focus-visible .barre-appli-ic { outline: 2px solid var(--ring); outline-offset: 2px; }
[data-appareil="telephone"] .barre-appli-compte {
  position: absolute; top: -3px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: linear-gradient(140deg, #67E8F9, var(--jeu-violet, #8B7FE0));
  color: #0B0C14; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px #0D0D16;
}
/* Un vocal EN DIRECT (08/11/2026) : l'icône passe au vert dans un anneau qui respire, et
   une pastille verte « casque + nombre » se pose en haut à GAUCHE (les non-lus gardent
   la droite). Même langage que la bande de l'ordinateur (`communaute-volet.css`). */
[data-appareil="telephone"] .barre-appli-communaute.en-direct .barre-appli-ic {
  color: #4ADE80; background: rgba(74,222,128,.14); border-radius: 14px;
  animation: barre-direct 2s ease-in-out infinite; }
@keyframes barre-direct {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(74,222,128,.75), 0 0 0 0 rgba(74,222,128,.35); }
  50% { box-shadow: 0 0 0 1.5px rgba(74,222,128,.75), 0 0 0 6px rgba(74,222,128,0); } }
[data-appareil="telephone"] .barre-appli-direct {
  position: absolute; top: -6px; left: -12px; height: 17px; padding: 0 5px 0 4px;
  display: inline-flex; align-items: center; gap: 2px; border-radius: 999px;
  background: #22C55E; color: #06210F; font-size: 10px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px #0D0D16; }
@media (prefers-reduced-motion: reduce) {
  [data-appareil="telephone"] .barre-appli-communaute.en-direct .barre-appli-ic { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-appareil="telephone"] .barre-appli-ic { transition: none; }
  [data-appareil="telephone"] .barre-appli-onglet:active .barre-appli-ic { transform: none; }
}

/* La barre du haut, plus opaque qu'au bureau : le texte qui défile dessous se lisait. */
[data-appareil="telephone"] body.espace-client .topbar::before { background-color: #0E0E18; }

/* Le ☰ et la languette ont leur onglet. Le menu de gauche n'a pas sa place. */
[data-appareil="telephone"] body:has(.barre-appli) .topbar .hamburger { display: none; }
[data-appareil="telephone"] body:has(.barre-appli) .cv-bande { display: none !important; }
[data-appareil="telephone"] body.espace-client .sidebar { display: none; }
[data-appareil="telephone"] body.espace-client .topbar-invite-btn { display: none; }

/* ── 2. Les bulles flottantes, au-dessus de la barre ─────────────────────────── */
/* ⚠️ **UN SEUL ROND FLOTTANT : « ANALYSER »** (fondateur, 07/11/2026 : « revois les
   bulles, la dispo n'est pas top »). Côte à côte, les deux ronds de 50 points couvraient
   un tiers de la largeur au-dessus des onglets ; empilés, ils cachaient les boutons
   alignés à droite (« Nouveau trader »). Comme dans une application : un seul bouton
   d'action flottant, le geste du trader, sous le pouce ; L'AIDE MONTE DANS LA BARRE DU
   HAUT, à côté du logo, au format des autres icônes (sa pastille de non-lus la suit).
   Et le rond se RETIRE quand on fait défiler vers le bas (on lit), pour revenir dès
   qu'on remonte ou qu'on arrive en bas de la page (`barre_appli.html`). */
[data-appareil="telephone"] body:has(.barre-appli) { --bulle-bas: calc(var(--barre-appli) + 14px); --bulle: 52px; }
[data-appareil="telephone"] body:has(.barre-appli) .kb-pastille {
  right: 14px; bottom: var(--bulle-bas); height: var(--bulle); max-width: calc(100vw - 92px);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
[data-appareil="telephone"] body:has(.barre-appli) .kb-pastille--rond { width: var(--bulle); height: var(--bulle); }
[data-appareil="telephone"] body:has(.barre-appli) .kb-pastille .kb-p-ic { flex-basis: 36px; width: 36px; height: 36px; }
[data-appareil="telephone"].bulles-retirees body .kb-pastille[aria-expanded="false"] {
  transform: translateY(calc(var(--bulle) + 24px)) scale(.6); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-appareil="telephone"] body:has(.barre-appli) .kb-pastille { transition: opacity .15s ease; }
  [data-appareil="telephone"].bulles-retirees body .kb-pastille[aria-expanded="false"] { transform: none; }
}
/* L'aide, dans la barre du haut : posée juste après le logo (la place est libre sur
   tous les comptes : les icônes du haut sont alignées à droite), du format des icônes
   du haut (`topbar-icon-btn`), teintée de l'accent pour se trouver. Elle ne s'efface
   plus avec l'enregistrement ou le clavier (`charte.css`, ci-dessus) : seuls le menu
   ouvert et la messagerie ouverte (qui a son ×) la retirent. */
[data-appareil="telephone"] body.espace-client:has(.barre-appli) .chat-lanceur {
  display: inline-flex; top: calc(11px + env(safe-area-inset-top, 0px)); left: 64px; right: auto; bottom: auto;
  width: 34px; height: 34px; z-index: 101;
  color: var(--accent); background: rgba(167, 139, 250, .14); border: 1px solid rgba(167, 139, 250, .32);
  box-shadow: none;
}
[data-appareil="telephone"] body.espace-client:has(.barre-appli) .chat-lanceur svg { width: 17px; height: 17px; }
[data-appareil="telephone"] body.espace-client:has(.barre-appli) .chat-lanceur:active { transform: scale(.94); }
[data-appareil="telephone"] body.espace-client:has(.barre-appli) .chat-lanceur .chat-pastille { top: -5px; right: -5px; }
[data-appareil="telephone"] body.espace-client:has(.sidebar-mobile.open) .chat-lanceur,
[data-appareil="telephone"] body.espace-client:has(.barre-appli) .chat-ouvert .chat-lanceur { display: none; }
/* La fenêtre « Analyser » est une feuille du bas, de bord à bord : la largeur de bureau
   (`.kb-panneau--neuf`, 384 points) la faisait déborder d'un écran de 375. */
[data-appareil="telephone"] .kb-panneau,
[data-appareil="telephone"] .kb-panneau--neuf {
  left: 0; right: 0; bottom: 0; width: auto; max-width: none;
  height: auto; max-height: calc(var(--fenetre, 100dvh) * .88);
}
/* Le menu ouvert, une fenêtre du haut (cloche, recherche), la messagerie : les bulles se
   retirent (elles couvraient le menu, le pied de la cloche, la zone où l'on écrit). */
[data-appareil="telephone"] body:has(.sidebar-mobile.open) :is(.chat-lanceur, .kb-pastille),
[data-appareil="telephone"] body:has(.topbar :is([aria-expanded="true"], details[open])) :is(.chat-lanceur, .kb-pastille),
[data-appareil="telephone"] body:has(.chat-ouvert) .kb-pastille { display: none; }
[data-appareil="telephone"] body:has(.barre-appli) .sidebar-mobile { padding-bottom: calc(var(--barre-appli) + 16px); }
/* Les messages éphémères, au-dessus des bulles. */
[data-appareil="telephone"] body:has(.barre-appli) .toast-stack { left: 16px; right: 16px; bottom: calc(var(--barre-appli) + 74px); align-items: flex-end; }

/* ── 3. Le bas de la page garde la place de la barre et des bulles ─────────── */
[data-appareil="telephone"] body:has(.barre-appli) .main { padding-bottom: calc(var(--barre-appli) + 84px); }

/* ── 4. Barre d'enregistrement et volet, au-dessus de la barre ─────────────── */
/* L'état sur sa ligne, puis « Enregistrer » en grand et « Annuler » à côté ; tant
   qu'elle est là, les bulles se retirent (elles couvraient « Annuler »). */
[data-appareil="telephone"] body:has(.barre-appli) .barre-enregistrement { left: 0; bottom: var(--barre-appli); padding: 10px 16px; gap: 8px 10px; }
[data-appareil="telephone"] body:has(.barre-appli) .barre-enregistrement:is([data-modifie="oui"], :not([data-cachable])) {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
}
[data-appareil="telephone"] body:has(.barre-appli) .barre-enregistrement > .etat { grid-column: 1 / -1; font-size: var(--text-sm); }
[data-appareil="telephone"] body:has(.barre-appli) .barre-enregistrement > .btn { min-height: 42px; justify-content: center; }
[data-appareil="telephone"] body:has(.barre-appli) .barre-enregistrement > .btn-primary { grid-column: 2; }
[data-appareil="telephone"] body:has(.barre-appli):has(.barre-enregistrement:not([data-cachable])) .main,
[data-appareil="telephone"] body:has(.barre-appli):has(.barre-enregistrement[data-modifie="oui"]) .main { padding-bottom: calc(var(--barre-appli) + 150px); }
[data-appareil="telephone"] body:has(.barre-appli):has(.barre-enregistrement:not([data-cachable])) .kb-pastille,
[data-appareil="telephone"] body:has(.barre-appli):has(.barre-enregistrement[data-modifie="oui"]) .kb-pastille { display: none; }
/* Le volet de la communauté : plein écran, entre la barre du haut et celle du bas. */
[data-appareil="telephone"] body:has(.barre-appli) .cv.jeu-volet {
  top: var(--volet-haut, var(--cv-haut, 56px)); left: 0; right: 0; bottom: var(--barre-appli);
  width: 100vw; max-width: none; border: 0; border-radius: 0; box-shadow: none;
}
[data-appareil="telephone"] body .cv .cv-agrandir { display: none; }

/* ── 5. Au doigt ─────────────────────────────────────────────────────────────── */
[data-appareil="telephone"] body { -webkit-tap-highlight-color: transparent; }
[data-appareil="telephone"] :is(a, button, summary, label, [role="button"], [role="tab"]) { touch-action: manipulation; }
[data-appareil="telephone"] .btn-sm { min-height: 36px; }
[data-appareil="telephone"] .btn:active:not(:disabled) { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { [data-appareil="telephone"] .btn:active:not(:disabled) { transform: none; } }
/* Les petits liens (« Y aller », « Voir le site », « Le calendrier ») : leur zone de
   toucher grandit sans rien déplacer. */
[data-appareil="telephone"] :is(.sc-lien, .deck-lien, .ar-glisse-tout, .nvh-prevu-lien) {
  padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;
}
[data-appareil="telephone"] .topbar .mark { min-width: 40px; min-height: 40px; }
/* Un champ à moins de 16 points fait zoomer l'iPhone quand on le touche. */
[data-appareil="telephone"] :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) { font-size: max(16px, 1em); }

/* ── Les groupes de réglages (profil, réglages d'un trader) : la carte du groupe garde
   son cadre, les lignes dedans perdent leurs marges de bureau. ── */
[data-appareil="telephone"] body.espace-client .jeu-reglages .reglage-groupe { padding-left: 12px; padding-right: 12px; }
[data-appareil="telephone"] body.espace-client .jeu-reglages .reglage-ligne { padding-left: 14px; padding-right: 14px; }

/* ── Les onglets des revenus (`partials/revenus_onglets.html`) : trois parts égales. ── */
[data-appareil="telephone"] .revenus-onglets {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 16px;
  padding: 4px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
}
[data-appareil="telephone"] .revenus-onglets a {
  display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 8px;
  border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--muted-foreground);
  text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
[data-appareil="telephone"] .revenus-onglets a[aria-current="page"] { color: var(--on-accent, #14161F); background: var(--accent); font-weight: 600; }

/* ── 6. LE KIT DU TÉLÉPHONE ─────────────────────────────────────────────────── */
/* LES FENÊTRES MONTENT DU BAS (une feuille, comme dans une application) : toutes les
   `<dialog>` de l'espace et des pages publiques, ancrées en bas, pleine largeur, coins
   du haut arrondis, une poignée dessinée. Elles défilent dedans, jamais la page. */
[data-appareil="telephone"] dialog:modal:not(.pas-feuille) {
  position: fixed; inset: auto 0 0 0; top: auto; margin: 0; transform: none;
  width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); height: auto;
  background-color: #14161F;
  border-radius: 22px 22px 0 0; border-bottom: 0;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); overflow-y: auto;
  animation: tel-feuille-monte .24s cubic-bezier(.2, .8, .2, 1);
}
[data-appareil="telephone"] dialog:modal:not(.pas-feuille)::before {
  content: ""; display: block; width: 40px; height: 4px; margin: -4px auto 10px;
  border-radius: 4px; background: rgba(255, 255, 255, .22);
}
[data-appareil="telephone"] dialog:modal:not(.pas-feuille)::backdrop { background: rgba(5, 6, 10, .62); }
@keyframes tel-feuille-monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-appareil="telephone"] dialog:modal { animation: none; } }

/* L'EN-TÊTE DE PAGE TIENT EN QUELQUES LIGNES : au téléphone, le titre et ce qu'on est
   venu voir doivent tenir dans le premier écran (règle 10 du style). La phrase
   d'explication passe sur quatre lignes au plus ; les gestes restent. */
[data-appareil="telephone"] body.espace-client .jeu-tete { padding: 16px 16px 14px; gap: 6px; margin-bottom: 14px; border-radius: 20px; }
[data-appareil="telephone"] body.espace-client .jeu-tete h1 { font-size: 1.55rem; line-height: 1.15; }
[data-appareil="telephone"] body.espace-client .jeu-tete p {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--text-sm); line-height: 1.45;
}

/* Le contenu prend la largeur : 12 points de marge, pas 16, sur un écran de 375. */
[data-appareil="telephone"] body.espace-client .main { padding-left: 12px; padding-right: 12px; padding-top: 14px; }

/* Les onglets d'une page défilent sur une ligne, au doigt, sans barre visible. */
[data-appareil="telephone"] body.espace-client .jeu-onglets {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
[data-appareil="telephone"] body.espace-client .jeu-onglets::-webkit-scrollbar { display: none; }
[data-appareil="telephone"] body.espace-client .jeu-onglets > * { scroll-snap-align: start; flex: none; min-height: 38px; }

/* ── Le téléphone couché : marges de l'encoche (viewport-fit=cover). ── */
@media (orientation: landscape) {
  [data-appareil="telephone"] .topbar-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  [data-appareil="telephone"] body.espace-client .main {
    padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

/* ── À LA LARGEUR, pour TOUS (téléphone ou fenêtre étroite) ─────────────────── */
/* La recherche du haut : ses résultats tiennent dans l'écran (le script les calait à la
   largeur du champ PLUS sa marge, 373 points pour 375 : la page débordait). */
@media (max-width: 699px) {
  body.espace-client .global-search-popover {
    left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important;
    max-height: calc(100dvh - 140px);
  }
}

/* ── LA FICHE D'UN TRADER : ses onglets restent accrochés sous la barre du haut ──
   (07/11/2026) Cadre, Stratégies, Journal, Vendre : au téléphone, on passe de l'un à
   l'autre sans remonter en haut de la page, comme les onglets d'une application. La
   « vue d'ensemble » du cadre s'accroche dessous. */
[data-appareil="telephone"] body.espace-client .t-onglets--trader {
  position: sticky; top: 56px; z-index: 30;
  background-color: rgba(16, 16, 26, .9);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8);
}
[data-appareil="telephone"] body.espace-client:has(.t-onglets--trader) .cg-pas { top: 118px; }
/* Chaque onglet garde son NOM sous son icône (au téléphone, les onglets fermés
   n'étaient que des icônes à deviner) : quatre parts égales, comme la barre du bas. */
[data-appareil="telephone"] body.espace-client .t-onglets--courts a {
  flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-width: 0;
  padding: 7px 2px 6px; font-size: 11.5px; line-height: 1.1;
}
[data-appareil="telephone"] body.espace-client .t-onglets--courts a > svg { margin: 0; width: 18px; height: 18px; }
/* Un nom long passe sur DEUX lignes plutôt que d'être coupé (« Vendre ce trader »,
   fondateur, 11/11/2026, TVNI-558) ; au-delà, les points de suspension. */
[data-appareil="telephone"] body.espace-client .t-onglets--courts a .t-onglet-nom {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  max-width: 100%; overflow: hidden; white-space: normal; text-align: center;
}

/* ── L'ACCUEIL : la bande des annonces reste à sa place au téléphone ──
   (07/11/2026) Collée sous la barre du haut, elle mangeait 50 points de l'écran tout
   le long de la page et cachait les traders qu'on faisait défiler. Sur ordinateur, elle
   reste accrochée (`user_traders.html`). */
[data-appareil="telephone"] body.espace-client .sdc-bandeau { position: relative; top: auto; }

/* ── LE GRAPHIQUE AU TÉLÉPHONE (07/11/2026, fondateur : « la navigation sur les
   graphiques depuis le téléphone, il faut vraiment que ce soit un plaisir ») ──
   La carte du graphique (sans moniteur, sur tous les appareils) : `graphique-moniteur.css`.
   Les gestes du doigt (glisser, pincer, appui long) : `graphique-trade.js`. */
[data-appareil="telephone"] .gt-atelier--ecran:not(.gt-atelier--plein) .gt-scene { margin: 0 2px; }
/* Les valeurs de la bougie, sur deux lignes au plus et en petit : sur 375 points, la
   légende de bureau prenait quatre lignes au-dessus des bougies. */
[data-appareil="telephone"] .gt-legende {
  top: 4px; left: 6px; gap: 1px 8px; padding: 3px 8px; border-radius: 7px;
  font-size: 10.5px; line-height: 1.35; max-width: calc(100% - 74px);
}
[data-appareil="telephone"] .gt-legende i { margin-right: 3px; }
/* Le plan (entrée, stop, objectif) sur UNE ligne qui défile au doigt : empilé, il prenait
   trois lignes au-dessus du dessin, qui trace déjà ces niveaux. */
[data-appareil="telephone"] .graphique-trade .gt-plan {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
[data-appareil="telephone"] .graphique-trade .gt-plan::-webkit-scrollbar { display: none; }
[data-appareil="telephone"] .graphique-trade .gt-plan > * { flex: none; }
/* LE PLEIN ÉCRAN AU TÉLÉPHONE : le dessin d'abord. La ligne de tête sur une ligne, les
   marges de l'encoche, et (`graphique-trade.js`) ni la palette de dessin ni le
   raisonnement ouverts d'office : ils le réduisaient à 44 % de l'écran. */
[data-appareil="telephone"] .gt-atelier--plein {
  padding: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px))
           max(6px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
}
[data-appareil="telephone"] .gt-atelier--plein .graphique-trade > .an-tete { padding: 8px 10px; }
[data-appareil="telephone"] .gt-atelier--plein .graphique-trade > .an-tete .an-tete-l2 { display: none; }
/* Pas de liseré de focus sur le dessin après un toucher (le focus ne sert qu'aux
   raccourcis du clavier, qu'un téléphone n'a pas). */
[data-appareil="telephone"] .gt-toile:focus { outline: none; }
/* En plein écran, rien ne flotte par-dessus le graphique. */
[data-appareil="telephone"].gt-plein-ouvert :is(.chat-lanceur, .kb-pastille, .barre-appli) { display: none; }

/* « Nous suivre » au pied du menu (11/11/2026) : menu replié en icônes, la rangée n'a
   pas la place ; elle se retrouve en dépliant le menu. */
.barre-repliee .sidebar .reseaux-tvni { display: none; }