/* ═══════════════════════════════════════════════════════════════════════════
   02/10/2026 · LE SITE PUBLIC SUR TÉLÉPHONE
   (user : « je dois descendre, descendre, descendre sur les mêmes sujets ;
   sur l'ordinateur on a réussi, pas encore sur le téléphone »)
   Même contenu que sur l'ordinateur, mise en page pensée pour le pouce :
   chaque sujet tient à peu près dans un écran, les listes d'éléments
   équivalents deviennent des rails qui se balaient du doigt (la carte
   suivante dépasse pour inviter au geste), les espacements sont resserrés,
   les visuels ramenés à leur juste taille, le pied de page se replie.
   TOUT est sous @media (max-width:760px) : l'ordinateur ne change pas d'un pixel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* le chevron des groupes du pied de page n'existe que sur téléphone (ajouté par js/74-mobile.js) */
.m-chev{display:none}

@media (max-width:760px){

  /* ── Rail générique : défilement horizontal aimanté, carte suivante visible ── */
  #site-landing .m-rail{
    display:flex !important;gap:10px !important;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  #site-landing .m-rail::-webkit-scrollbar{display:none}
  #site-landing .m-rail > *{scroll-snap-align:start;flex:0 0 auto}

  /* ── 1 · Haut de page (validé) : seul le vide au-dessus du titre est réduit, pour que la
        bande suivante affleure en bas de l'écran et invite à descendre. ── */
  #site-landing .v6 .hero-film .hf-inner{padding-top:84px !important;padding-bottom:28px !important}

  /* ── 2 · Bande « questions du dépôt » ── */
  #site-landing .v6 .sv-in{min-height:118px !important;padding-top:18px !important;padding-bottom:18px !important}

  /* ── 3 · Vécu sur le terrain : un écran par situation ── */
  #site-landing .v6 #situations{padding-top:34px !important;padding-bottom:30px !important;padding-left:16px !important;padding-right:16px !important}
  #site-landing .v6 #situations .sec-head{margin-bottom:14px !important}
  #site-landing .v6 #situations .sec-head h2{margin-top:10px !important}
  #site-landing .v6 #situations .sec-head p{margin-top:8px !important;font-size:15px !important}
  #site-landing .v6 .vt-chapitres{margin-bottom:12px !important;scroll-padding:0 2px}
  #site-landing .v6 #situations .caro{border-radius:20px}
  #site-landing .v6 #situations .slide{padding:10px !important;gap:10px !important}
  #site-landing .v6 #situations .vt-media{aspect-ratio:16/9 !important;border-radius:14px}
  #site-landing .v6 .vt-avant,#site-landing .v6 .vt-avec{padding:12px 14px !important;border-radius:14px}
  #site-landing .v6 .vt-avec{margin-top:8px !important}
  #site-landing .v6 .vt-avant p{margin-top:5px !important;font-size:15.5px !important;line-height:1.3 !important}
  #site-landing .v6 .vt-avec p{margin-top:5px !important;font-size:17.5px !important;line-height:1.22 !important}
  #site-landing .v6 .vt-avec p.mini{margin-top:6px !important;font-size:13.5px !important;line-height:1.45 !important}

  /* ── 4 · Votre rentabilité : les trois bénéfices en rail, la vidéo en bandeau ── */
  #site-landing .v6 .truck-sec{padding-top:38px !important;padding-bottom:34px !important}
  #site-landing .v6 .tk3-grille{gap:18px !important;padding-left:20px !important;padding-right:20px !important}
  #site-landing .v6 .tk3-txt h2{font-size:32px !important;margin-top:10px !important}
  #site-landing .v6 .tk3-txt > p{font-size:16px !important;line-height:1.55 !important;margin-top:12px !important}
  #site-landing .v6 .tk3-liste.m-rail{margin:18px -20px 20px !important;padding:0 20px 2px !important;scroll-padding:0 20px}
  #site-landing .v6 .tk3-liste.m-rail li{
    width:74%;max-width:290px;flex-direction:column;gap:10px !important;padding:14px 14px 15px;
    border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
  #site-landing .v6 .tk3-liste.m-rail .ic{flex:0 0 auto;width:38px;height:38px;border-radius:12px}
  #site-landing .v6 .tk3-liste.m-rail b{font-size:16px;line-height:1.25}
  #site-landing .v6 .tk3-liste.m-rail span:not(.ic){font-size:14px;line-height:1.4}
  #site-landing .v6 .tk3-scene{aspect-ratio:2/1 !important;border-radius:18px}

  /* ── 5 · Tarif : la carte de prix tient dans un écran, « tout est inclus » dans le suivant ── */
  #site-landing .v6 #pricing{padding-top:30px !important;padding-bottom:26px !important;padding-left:16px !important;padding-right:16px !important}
  #site-landing .v6 #pricing .sec-head{margin-bottom:12px !important}
  #site-landing .v6 #pricing .sec-head h2{margin-top:10px !important}
  #site-landing .v6 #pricing .sec-head p{margin-top:8px !important;font-size:15px !important}
  #site-landing .tx .tx-choix{margin-bottom:12px !important;gap:8px !important}
  #site-landing .tx .tx-choix-t{font-size:13.5px}
  #site-landing .tx .tx-seg button{min-height:44px}
  #site-landing .tx .tx-carte{border-radius:20px}
  #site-landing .tx .tx-g{padding:22px 18px 18px !important}
  #site-landing .tx .tx-prix{margin:8px 0 4px !important}
  #site-landing .tx .tx-montant{font-size:58px !important}
  #site-landing .tx .tx-pour{margin-top:8px !important;font-size:15.5px !important}
  #site-landing .tx .tx-calc{margin-top:12px !important;padding:10px 14px 10px !important}
  #site-landing .tx .tx-calc-l{font-size:13.5px}
  #site-landing .tx .tx-range{margin:6px 0 4px !important;height:28px}
  #site-landing .tx .tx-calc-r{font-size:13.5px}
  #site-landing .tx .tx-calc-r b{font-size:20px}
  #site-landing .tx .tx-lim{margin:12px 0 14px !important}
  #site-landing .tx .tx-lim > div{padding-top:10px !important;padding-bottom:10px !important}
  #site-landing .tx .tx-cta{padding:15px 20px !important;min-height:50px}
  #site-landing .tx .tx-sous{margin-top:8px !important;font-size:12.5px !important}
  #site-landing .tx .tx-d{padding:20px 18px 18px !important}
  #site-landing .tx .tx-d-t{margin:0 0 14px !important;font-size:18px !important}
  /* les huit fonctions incluses, en grille de deux, compacte */
  #site-landing .tx .tx-mod{grid-template-columns:1fr 1fr !important;gap:10px 10px !important}
  #site-landing .tx .tx-mod li{gap:8px !important;font-size:13.5px !important;line-height:1.22 !important}
  #site-landing .tx .tx-mod svg{width:30px !important;height:30px !important;padding:7px !important;border-radius:9px !important}
  /* 08/10/2026 (user : « on doit tourner à droite pour voir le reste de ce qui est écrit,
     je n'aime pas du tout ») : les deux avantages étaient posés sur un rail horizontal, la
     seconde carte coupée au bord. Elles se lisent maintenant l'une sous l'autre, entières,
     sans aucun geste. */
  #site-landing .tx .tx-plus.m-rail{display:grid !important;grid-template-columns:1fr !important;
    gap:10px !important;overflow:visible !important;margin:16px 0 0 !important;padding:0 !important}
  #site-landing .tx .tx-plus.m-rail > div{width:auto !important;max-width:none !important;padding:13px 14px !important}
  #site-landing .tx .tx-confiance{padding-top:14px !important;margin-top:16px !important;gap:6px 14px !important;font-size:12.5px !important}
  #site-landing .tx .tx-note{margin-top:12px !important;font-size:12.5px !important;line-height:1.45}

  /* ── 6 · Aperçu réel (validé) : on ne resserre que les espacements ── */
  #site-landing .v6 #apercu{padding-top:34px !important;padding-bottom:30px !important}
  #site-landing .v6 #apercu .ap-hub{gap:14px !important}
  #site-landing .v6 #apercu .ap-gauche h2{margin-top:8px !important}
  #site-landing .v6 #apercu .ap-intro{margin-top:8px !important;font-size:15px !important;line-height:1.5 !important}
  #site-landing .v6 #apercu .ap-tabs{margin-bottom:12px !important}
  #site-landing .v6 #apercu .ap-tabs button{min-height:44px}
  #site-landing .v6 #apercu .ap-legende{margin-top:10px !important;padding-top:10px !important;font-size:15.5px !important}
  #site-landing .v6 #apercu .ap-cta{margin-top:12px !important}

  /* ── 7 · Sur mesure (validé) : mêmes éléments, scène 3D ramenée à sa juste hauteur ── */
  #site-landing .v6 .sm-calque{padding:30px 16px 0 !important}
  #site-landing .v6 .sm-tete .sm-intro{margin-top:12px !important;font-size:16px !important;line-height:1.5 !important}
  #site-landing .v6 .sm-temps{margin-top:16px !important}
  #site-landing .v6 .sm-actions{margin-top:18px !important}
  #site-landing .v6 .sm-scene{aspect-ratio:4/3 !important}

  /* ── 8 · Questions fréquentes : questions plus serrées, même lecture ── */
  #site-landing .v6 #faq{padding-top:30px !important;padding-bottom:26px !important}
  #site-landing .v6 #faq .sec-head{margin-bottom:16px !important}
  #site-landing .v6 #faq .sec-head h2{margin-top:8px !important}
  #site-landing .v6 #faq .faq{gap:8px !important}
  #site-landing .v6 #faq .faq details{margin-bottom:0 !important;border-radius:14px !important}
  #site-landing .v6 #faq .faq summary{min-height:56px !important;padding:12px 16px 12px 18px !important;font-size:15px !important;line-height:1.3 !important}
  #site-landing .v6 #faq .faq .a{font-size:14.5px !important;line-height:1.55 !important;padding-left:18px !important;padding-right:18px !important}
  #site-landing .v6 #faq .faq-more{margin-top:6px !important}
  #site-landing .v6 #faq .faq-more button{min-height:44px}

  /* ── 9 · Dernier appel ── */
  #site-landing .v6 .final.final-film{min-height:420px !important;padding:44px 18px !important}
  #site-landing .v6 .final.final-film .cta-row{margin-top:18px !important;gap:10px !important}

  /* ── 10 · Pied de page : marque compacte, groupes de liens repliables ── */
  #site-landing footer.ftr{padding-top:8px !important;padding-bottom:0 !important}
  #site-landing footer.ftr .ftr-top{gap:0 !important;padding:26px 0 14px !important;text-align:left !important}
  #site-landing footer.ftr .ftr-brand{align-items:center !important;text-align:center;margin-bottom:16px}
  #site-landing footer.ftr .ftr-logo{width:132px;height:auto}
  #site-landing footer.ftr .ftr-tag{margin-top:8px;font-size:13.5px !important;line-height:1.45}
  #site-landing footer.ftr .ftr-made{margin-top:10px !important}
  #site-landing footer.ftr.m-acc .ftr-col{border-top:1px solid var(--v6-line,rgba(12,18,32,.1))}
  #site-landing footer.ftr.m-acc .ftr-col:last-child{border-bottom:1px solid var(--v6-line,rgba(12,18,32,.1))}
  #site-landing footer.ftr.m-acc .ftr-col h4{
    display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0 !important;padding:0 4px;
    cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
  #site-landing footer.ftr.m-acc .ftr-col h4:focus-visible{outline:2px solid #F97316;outline-offset:2px;border-radius:8px}
  #site-landing footer.ftr.m-acc .m-chev{display:grid;place-items:center;width:28px;height:28px;color:#F97316;transition:transform .25s ease}
  #site-landing footer.ftr.m-acc .m-chev svg{width:16px;height:16px;display:block}
  #site-landing footer.ftr.m-acc .ftr-col.m-ouvert .m-chev{transform:rotate(180deg)}
  #site-landing footer.ftr.m-acc .ftr-col a{display:none;padding:0 4px !important;min-height:44px;line-height:44px;font-size:15px !important}
  #site-landing footer.ftr.m-acc .ftr-col.m-ouvert a{display:block}
  #site-landing footer.ftr.m-acc .ftr-col.m-ouvert{padding-bottom:6px}
  #site-landing footer.ftr .ftr-bottom{gap:10px !important;padding-top:16px !important;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)) !important;border-top:0 !important}
  /* les deux liens légaux du bas répètent le groupe « Légal » juste au-dessus */
  #site-landing footer.ftr.m-acc .ftr-legal a{display:none}
  #site-landing footer.ftr .ftr-social{gap:8px !important}
  #site-landing footer.ftr .ftr-social a{width:44px;height:44px;display:grid;place-items:center}

  /* ── Page Tarif ── */
  #lscreen-pricing .inner{padding-top:18px !important}
  #lscreen-pricing .inner-intro{margin-bottom:14px !important}
  /* lisibilité : dans la page, les chiffres du calcul héritaient du bleu nuit du texte courant */
  #lscreen-pricing .tx .tx-calc-l b{color:#fff !important}
  #lscreen-pricing .tx .tx-calc-r b{color:#FDBA8C !important}
  #lscreen-pricing .tx-etapes{margin-top:30px !important}
  #lscreen-pricing .tx-etapes .tx-h3,#lscreen-pricing .tx-qr .tx-h3{font-size:21px !important;margin-bottom:12px !important}
  /* Même règle pour les trois étapes juste en dessous : elles souffraient du même défaut. */
  #lscreen-pricing .tx-etapes ol.m-rail{display:grid !important;grid-template-columns:1fr !important;
    gap:10px !important;overflow:visible !important;margin:0 !important;padding:0 !important}
  #lscreen-pricing .tx-etapes ol.m-rail li{width:auto !important;max-width:none !important;padding:15px 16px 14px !important}
  #lscreen-pricing .tx-qr{margin-top:30px !important}
  #lscreen-pricing .tx-qr summary{min-height:44px;padding-top:13px !important;padding-bottom:13px !important;font-size:15px !important}

  /* ── Barre « démonstration » en bas d'écran : plus fine, et elle s'efface quand un appel
        à l'action est déjà sous les yeux (haut de page, dernier appel, pied de page). ── */
  #demo-flottant{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)) !important}
  #demo-flottant .dfl-demo{min-height:44px;padding:11px 14px !important;font-size:14.5px !important;border-radius:12px !important}
  #demo-flottant.on.m-cache{transform:translateY(120%) !important;pointer-events:none !important}
  body.stk-barre-demo #back-to-top{bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important}
  #back-to-top{width:44px !important;height:44px !important}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  #site-landing .m-rail{scroll-behavior:auto}
  #site-landing footer.ftr.m-acc .m-chev{transition:none}
}

/* ══ 03/10/2026 20h (user : « la première page sur téléphone n'a pas la DA de l'ordi, alors
   que sur l'ordi c'est top »). Mêmes partis pris que l'ordinateur, mis au format vertical :
   la vidéo du terrain se voit vraiment en haut de l'écran (cadrée sur le magasinier), le
   texte est posé en bas sur un voile qui s'assombrit, l'accroche en petites capitales
   espacées comme sur l'ordi, le titre en grand sur 4 lignes, les deux boutons côte à côte
   en pleine largeur. Rien ne change au-dessus de 760 px. ══ */
@media (max-width:760px){
  #site-landing .v6 .hero.hero-film{min-height:calc(100svh - 64px) !important;align-items:flex-end !important}
  #site-landing .v6 .hero-film .hf-fond video{object-position:68% 30%}
  #site-landing .v6 .hero-film .hf-fond::after{background:
      linear-gradient(180deg,rgba(12,18,32,.30) 0%,rgba(12,18,32,.18) 22%,rgba(12,18,32,.55) 44%,rgba(12,18,32,.92) 64%,#0C1220 100%),
      linear-gradient(90deg,rgba(12,18,32,.35) 0%,rgba(12,18,32,0) 70%) !important}
  #site-landing .v6 .hero-film .hf-inner{padding:0 22px 24px !important}
  #site-landing .v6 .hero-film .eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace !important;text-transform:uppercase !important;
    letter-spacing:.06em !important;font-size:clamp(8.6px,2.3vw,10px) !important;font-weight:700 !important;white-space:nowrap;
    padding:6px 11px !important;gap:7px !important;max-width:100%;overflow:hidden}
  #site-landing .v6 .hero-film .eyebrow .dot{width:6px;height:6px;flex:none}
  #site-landing .v6 .hero-film h1{font-size:clamp(33px,10.2vw,46px) !important;line-height:1.0 !important;letter-spacing:-.03em !important;
    max-width:none !important;margin-top:16px !important;text-wrap:balance}
  #site-landing .v6 .hero-film .sub{font-size:15.5px !important;line-height:1.5 !important;margin-top:14px !important;max-width:36ch !important}
  #site-landing .v6 .hero-film .cta-row{display:grid !important;grid-template-columns:1fr 1fr;gap:10px !important;margin-top:20px !important}
  #site-landing .v6 .hero-film .cta-row .btn{width:100%;min-height:52px;padding:0 12px !important;justify-content:center;font-size:15px !important;white-space:nowrap}
  #site-landing .v6 .hero-film .cta-row .btn-primary{grid-column:1 / -1}
  #site-landing .v6 .hero-film .cta-row .btn-ghost{grid-column:1 / -1;min-height:48px;background:rgba(255,255,255,.08) !important;color:#fff !important;border:1px solid rgba(255,255,255,.28) !important;backdrop-filter:blur(6px)}
  #site-landing .v6 .hero-film .trust{margin-top:14px !important;font-size:12px !important;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
}
@media (max-width:380px){
  #site-landing .v6 .hero-film .sub{font-size:14.5px !important}
  #site-landing .v6 .hero-film .cta-row{margin-top:16px !important}
}

/* ══ 03/10/2026 23h (user : « toutes les parties en dehors de la page d'accueil, FAQ, fonctionnalités,
   etc., pas l'intérieur du site : même fond, mais une autre couleur »). Pages publiques hors accueil
   (Fonctionnalités, Tarif, FAQ, pages légales, connexion, inscription) : même fond que l'accueil
   (dégradé doux et logo qui flotte), en BLEU GLACIER au lieu du pêche. L'accueil et l'application
   ne changent pas. Règles valables à toutes les largeurs (ce fichier est chargé partout). ══ */
html:has(#site-landing .lscreen.on:not(#lscreen-home)){background:#E7EEF8 !important}
html body:not(.dark-theme):has(#site-landing .lscreen.on:not(#lscreen-home))::after{
  background:linear-gradient(180deg,#D9E4F3 0%,#E7EEF8 45%,#F5F8FC 100%) !important}
html body:not(.dark-theme):has(#site-landing .lscreen.on:not(#lscreen-home))::before{opacity:.9;animation:stkFiligraneFlotte 30s ease-in-out infinite alternate !important;filter:hue-rotate(190deg) saturate(.8) !important}
#lscreen-pricing > .tx-fond{background:radial-gradient(70% 55% at 50% 0%,rgba(37,99,235,.08),transparent 70%),linear-gradient(180deg,#D9E4F3,#F5F8FC) !important}

/* 04/10/2026 (user : « monte tout le texte ») : sur téléphone, le bloc de texte du haut d'accueil
   n'est plus tassé en bas ; il est centré dans l'écran, la vidéo reste visible au-dessus. */
@media (max-width:760px){
  #site-landing .v6 .hero.hero-film{align-items:center !important}
  #site-landing .v6 .hero-film .hf-inner{padding:22px 22px 26px !important}
  #site-landing .v6 .hero-film .hf-fond::after{background:
      linear-gradient(180deg,rgba(12,18,32,.30) 0%,rgba(12,18,32,.55) 16%,rgba(12,18,32,.86) 34%,rgba(12,18,32,.93) 100%),
      linear-gradient(90deg,rgba(12,18,32,.30) 0%,rgba(12,18,32,0) 70%) !important}
}

/* 04/10/2026 2h (user : « plus haut !! ») : le texte du haut d'accueil démarre juste sous la barre ;
   la vidéo se voit sous les boutons, en bas de l'écran. */
@media (max-width:760px){
  #site-landing .v6 .hero.hero-film{align-items:flex-start !important}
  #site-landing .v6 .hero-film .hf-inner{padding:20px 22px 24px !important}
  #site-landing .v6 .hero-film .hf-fond::after{background:
      linear-gradient(180deg,rgba(12,18,32,.92) 0%,rgba(12,18,32,.88) 55%,rgba(12,18,32,.55) 78%,rgba(12,18,32,.25) 100%) !important}
}

/* 04/10/2026 3h (user : « un peu plus bas le titre, au centre de l'écran en fait ») : le bloc de
   texte est centré dans la hauteur de l'écran, la vidéo se devine au-dessus et en dessous. */
@media (max-width:760px){
  #site-landing .v6 .hero.hero-film{align-items:center !important}
  #site-landing .v6 .hero-film .hf-inner{padding:16px 22px 20px !important}
  #site-landing .v6 .hero-film .hf-fond::after{background:
      linear-gradient(180deg,rgba(12,18,32,.40) 0%,rgba(12,18,32,.86) 22%,rgba(12,18,32,.90) 78%,rgba(12,18,32,.45) 100%) !important}
}

/* 04/10/2026 16h (user : « texte un peu plus bas, au centre de l'écran du téléphone ») : le bloc est
   centré dans la partie visible sous la barre du haut (le léger décalage vers le bas compense la barre). */
@media (max-width:760px){
  #site-landing .v6 .hero.hero-film{align-items:center !important}
  #site-landing .v6 .hero-film .hf-inner{padding:40px 22px 8px !important}
}

/* ══ 05/10/2026 9h (user, téléphone en main) ══
   1. Haut d'accueil : le texte monte, et s'espace du haut jusqu'en bas de l'écran de vidéo.
   2. Vécu sur le terrain : les 6 situations tiennent sur UNE ligne sans défiler (seule la situation
      affichée montre son nom), et deux petites flèches centrées sur la vidéo montrent qu'on peut tourner.
   3. Votre rentabilité : les trois avantages sont visibles ensemble, l'un sous l'autre. */
@media (max-width:760px){
  #site-landing .v6 .hero.hero-film{align-items:stretch !important}
  #site-landing .v6 .hero-film .hf-inner{display:flex !important;flex-direction:column;justify-content:space-between;
    min-height:calc(100svh - 64px);padding:22px 22px 22px !important;box-sizing:border-box}
  #site-landing .v6 .hero-film .hf-inner > *{margin-top:0 !important;margin-bottom:0 !important}
  #site-landing .v6 .hero-film .eyebrow{align-self:flex-start}
  #site-landing .v6 .hero-film .hf-fond::after{background:
      linear-gradient(180deg,rgba(12,18,32,.80) 0%,rgba(12,18,32,.70) 40%,rgba(12,18,32,.74) 70%,rgba(12,18,32,.86) 100%) !important}

  #site-landing .v6 .vt-chapitres{flex-wrap:nowrap !important;overflow:visible !important;justify-content:space-between !important;gap:6px !important;padding:0 !important}
  #site-landing .v6 .vt-chap{flex:0 0 auto !important;padding:8px !important;gap:0 !important;min-width:44px;justify-content:center}
  #site-landing .v6 .vt-chap .vt-nom{display:none}
  #site-landing .v6 .vt-chap.on{flex:1 1 auto !important;justify-content:flex-start;gap:8px !important;padding-right:12px !important;min-width:0}
  #site-landing .v6 .vt-chap.on .vt-nom{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
  #site-landing .v6 #situations .caro-btn.vt-prec, #site-landing .v6 #situations .caro-btn.vt-suiv{
    display:grid !important;place-items:center;width:36px !important;height:36px !important;
    top:calc(10px + (100vw - 52px) * 0.28125) !important;transform:translateY(-50%) !important;
    background:rgba(255,255,255,.92) !important;border:0 !important;box-shadow:0 6px 16px -8px rgba(12,18,32,.6) !important}
  #site-landing .v6 #situations .vt-prec{left:16px !important}
  #site-landing .v6 #situations .vt-suiv{right:16px !important}

  #site-landing .v6 .tk3-liste.m-rail{display:grid !important;grid-template-columns:1fr !important;gap:8px !important;overflow:visible !important;
    margin:16px 0 18px !important;padding:0 !important;scroll-snap-type:none !important}
  #site-landing .v6 .tk3-liste.m-rail li{width:auto !important;max-width:none !important;display:grid !important;grid-template-columns:38px 1fr;
    column-gap:12px !important;row-gap:2px !important;align-items:center;padding:11px 14px !important}
  #site-landing .v6 .tk3-liste.m-rail li .ic{grid-row:1 / span 2;align-self:center}
  #site-landing .v6 .tk3-liste.m-rail li > :not(.ic){grid-column:2}
  #site-landing .v6 .tk3-liste.m-rail b{font-size:15.5px !important}
  #site-landing .v6 .tk3-liste.m-rail span:not(.ic){font-size:13.5px !important}
}
/* 4. Démonstration sur téléphone : le bloc du code remonte ; « Continuer » se lit plus haut dans sa barre. */
@media (max-width:760px){
  #site-app #s-pin{justify-content:flex-start !important;padding-top:max(18px, 6vh) !important}
  /* 05/10/2026 10h (user : « monte-le, presque le double, il ne prend pas assez de place ») : une règle
     plus ancienne et plus forte le ramenait à 34 px. Celle-ci passe devant : barre de 64 px, texte plus grand. */
  html body #s-notif .notif-continue:not(#_a):not(#_b), html body #s-notif #notif-continue:not(#_a):not(#_b){
    padding:20px 16px calc(22px + env(safe-area-inset-bottom,0px)) !important;min-height:64px !important;font-size:18px !important;line-height:1.2 !important}
  html body #s-notif:not(#_a):not(#_b){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important}
}
@media (max-width:760px){
  #site-landing .v6 .vt-chapitres{gap:4px !important}
  #site-landing .v6 .vt-chap{padding:9px 5px !important;min-width:34px}
  #site-landing .v6 .vt-chap .vt-num{font-size:11px}
  #site-landing .v6 .vt-chap.on{gap:6px !important;padding:9px 10px 9px 5px !important}
  #site-landing .v6 .vt-chap.on .vt-nom{font-size:13.5px}
}

/* 23/10/2026 (user : « un petit bug de remise en forme quand on recharge la page ») : le bouton
   du menu est créé par un script en fin de page, après le premier affichage ; à son arrivée,
   « Connexion » et « Essai gratuit » glissaient de 32 à 41 px vers la gauche. Sa place est
   tenue d'avance, aux mêmes mesures que lui (index.html, en-tête mobile), puis il la reprend.
   Le logo reçoit dès le départ sa marge « auto » (posée elle aussi en fin de page) : sinon
   l'en-tête répartit l'espace entre trois éléments et les boutons sautent quand même. */
@media (max-width:900px){
  .hdr-inner:not(:has(.nav-burger))::after{content:"";flex:none;order:9;width:32px;height:30px}
  .hdr-inner:not(:has(.nav-burger)) .brand{margin-right:auto}
}
@media (max-width:470px){ .hdr-inner:not(:has(.nav-burger))::after{margin-left:13px;width:28px} }
@media (max-width:380px){ .hdr-inner:not(:has(.nav-burger))::after{margin-left:10px;width:26px} }
@media (max-width:340px){ .hdr-inner:not(:has(.nav-burger))::after{margin-left:8px;width:24px} }


/* 29/10/2026 (audit) : sur un chantier, avec des gants, tout ce qui se touche fait au
   moins 44 px. Mesuré avant : retour 65x14, icônes de la barre 38, croix 26. */
@media (max-width: 860px) {
  .tb-ico, .topbar button, .notif-archive-x, .hch-x, .cmdc-bt, .btn, .lien-connexion,
  .faq-item summary, .chan-item, .ia-opt { min-height: 44px; }
  .tb-ico, .notif-archive-x, .hch-x { min-width: 44px; }
  .inner-back, .back-link, [data-act="retour"] { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   29/10/2026 22h35 — PASSE MOBILE (user : « le format mobile doit être parfait »,
   avec l'application Outlook comme repère : rien de minuscule, rien de coupé, rien
   qui flotte par-dessus le contenu, et tout ce qui se touche se touche).
   Mesuré sur 56 écrans (3 profils × tous les onglets × 2 thèmes) à 390 px.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* ── 1. Ce qui se touche fait 44 px ────────────────────────────────────────
     Ma règle du matin ne les atteignait pas : le bandeau de démo n'est ni
     .topbar ni .btn, et les boutons des notifications sont figés à 33 px par
     une règle à deux identifiants. Mesuré : 26 px et 33 px. */
  html body #demo-banner button{ min-height:44px !important; padding-top:0 !important; padding-bottom:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important; }
  html body #s-notif #notif-list .notif-ligne .notif-actions .notif-bt,
  html body #s-notif #notif-list .notif-ligne .notif-actions .btn,
  html body #s-notif .notif-actions .btn{ height:auto !important; min-height:44px !important;
    padding:0 14px !important; font-size:13.5px !important; }
  html body .topbar button, html body .topbar .tb-ico{ min-width:44px !important; min-height:44px !important; }
  html body #s-notif .notif-archive-x, html body #s-notif .notif-resume-x{
    min-width:44px !important; min-height:44px !important; }

  /* Le « © » du bandeau de démo mesurait 8×15 px et sortait de l'écran par la
     droite. Il n'a rien à faire sur un téléphone. */
  html body #demo-banner .db-credits-mini{ display:none !important; }

  /* ── 2. Plus rien sous 11,5 px ─────────────────────────────────────────────
     Relevé : 9 px sur le stock hors service, 9,5 px sur les missions du
     planning, 10 px sur les heures de la messagerie et les libellés du journal.
     Illisible avec des gants. */
  html body #t-stock .skp-sec-t, html body #t-stock .skp-ref,
  html body .chan-item-quand, html body #t-journal .jx-flab,
  html body .pwk-ev, html body .pwk-ev *{ font-size:11.5px !important; line-height:1.4 !important; }

  /* ── 3. Aucune coupure en plein mot ────────────────────────────────────────
     « Inventaire » devenait « Inventair / e », « clôtures » se brisait en deux.
     On coupe aux espaces, et à la rigueur avec un vrai trait d'union. */
  html body .pwk-ev, html body .pwk-ev *, html body .dsh-m,
  html body #t-journal .jx-wn, html body .stk-brut{
    overflow-wrap:break-word !important; word-break:normal !important; hyphens:auto !important; }

  /* ── 4. Les bulles d'aide ne recouvrent plus la dernière carte ─────────────
     « Appuyez sur une commande » et « Maintenez une mission… » sont posées en
     bas de l'écran, par-dessus le contenu. On leur réserve la place. */
  html body #t-cmd, html body #t-plan{ padding-bottom:96px !important; }
  html body .plan-bulle-aide{ left:12px !important; right:12px !important; transform:none !important;
    max-width:none !important; }
  html body .plan-bulle-aide.pba-sortie{ transform:translateY(8px) !important; }

  /* ── 5. Le mois du planning ne se coupe plus ───────────────────────────────
     « octobre – novembre 2026 » s'affichait « Octobre – … » : 91 px pour 175. */
  html body #week-label.plan-mois{ font-size:15px !important; white-space:normal !important;
    overflow:visible !important; text-overflow:clip !important; line-height:1.25 !important; }
  html body .plan-tete .plan-tete-actions{ flex-wrap:wrap !important; }

  /* ── 6. Le titre d'un onglet et ses actions sur deux lignes ────────────────
     Sur Chantiers, « Chantiers » + « Importer Excel, CSV » + « + Nouveau »
     tenaient sur une seule ligne, à l'étroit. */
  html body #site-app .stk-bandeau.stk-bandeau-actions{ flex-direction:column !important; align-items:stretch !important; }
  html body #site-app .stk-bandeau-actes{ width:100% !important; }
}

/* ── Passe 2 (22h45) : les sélecteurs exacts, relevés dans la page ───────────
   Le premier jet visait des classes que je croyais bonnes. Mesuré à nouveau,
   voici celles qui portent réellement le texte minuscule et les petites cibles. */
@media (max-width: 860px) {

  /* Texte sous 11,5 px — vrais chemins */
  html body #d-al .dash-alert-row span,
  html body #d-al .dash-alert-row div,
  html body #t-plan .pwk-fusion-tache,
  html body #t-plan .pwk-fusion-tache span,
  html body #t-dash .mrow .mc .mc-l{ font-size:11.5px !important; line-height:1.4 !important; }

  /* Cibles tactiles — spécificité suffisante pour passer devant les règles à
     identifiant d'index.html (qui figent 34, 36 et 38 px). */
  html body div.topbar button,
  html body div.topbar .tb-ico{ min-width:44px !important; min-height:44px !important; }
  html body #s-notif .notif-ligne-info .notif-actions .btn,
  html body #s-notif .notif-ligne .notif-actions .btn{ height:auto !important; min-height:44px !important; }
  html body #site-app .stk-bandeau .btn,
  html body #site-app .stk-bandeau-actes button{ min-height:44px !important; height:auto !important; }
  html body #site-app .cmdc-onglet,
  html body #site-app .stk-fil-btn,
  html body #site-app .stk-seg-btn,
  html body #site-app .dsh-tout{ min-height:44px !important; height:auto !important; }

  /* Le titre de l'onglet ne se coupe plus : en colonne, il a toute la largeur. */
  html body #site-app .stk-bandeau-t{ white-space:normal !important; overflow:visible !important;
    text-overflow:clip !important; }

  /* Noms de chantier dans la messagerie et résumé d'une demande : ils tiennent
     sur deux lignes plutôt que de finir en « … ». */
  html body #t-msg .chan-item-nom,
  html body #t-cmd .dmd-pliee-b small,
  html body #t-cmd .dmd-resume{ white-space:normal !important; overflow:visible !important;
    text-overflow:clip !important; }
}

/* ── Passe 3 (23h00) : le poids qu'il faut ───────────────────────────────────
   Les règles d'index.html qui figent ces tailles portent un identifiant, parfois
   caché dans un `:not(#tb-msg-alert)` — qui compte comme un identifiant. Mes
   sélecteurs sans identifiant perdaient. On s'appuie sur #s-app. */
@media (max-width: 860px) {

  /* La barre du haut : 38 px imposés par « .topbar .tb-actions > button:not(#…) ». */
  html body #s-app .topbar .tb-actions > button,
  html body #s-app .topbar .tb-actions > .tb-ico{
    width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; }
  html body #s-app .topbar .tb-actions > button#tb-msg-alert{
    width:auto !important; min-width:44px !important; height:44px !important; min-height:44px !important; }

  /* Les actions d'un bandeau d'onglet : 32 à 34 px imposés. */
  html body #s-app .stk-bandeau .stk-bandeau-actes button,
  html body #s-app .stk-bandeau .stk-bandeau-actes .btn{
    height:auto !important; min-height:44px !important; padding-top:0 !important; padding-bottom:0 !important; }

  /* Les icônes de l'en-tête du planning : 29×32. */
  html body #s-app .plan-tete .plan-ico,
  html body #s-app .plan-tete button{ min-width:44px !important; min-height:44px !important; }

  /* Le bouton icône des cartes chantier : 38×40. */
  html body #s-app .c76-bt, html body #s-app .c76-bt-i{ min-width:44px !important; min-height:44px !important; }

  /* « Matériel hors service (2) » : 9 px, le plus petit texte de l'application. */
  html body #s-app #d-al > div,
  html body #s-app #d-al .dash-alert-row,
  html body #s-app #d-al .dash-alert-row *{ font-size:11.5px !important; line-height:1.45 !important; }
}

/* ── Passe 4 (23h10) : les derniers ───────────────────────────────────────── */
@media (max-width: 860px) {
  /* Actions d'en-tête de section (Stock : Récap PDF, Étiquettes QR, + Ajouter). */
  html body #s-app .sec-hd button,
  html body #s-app .sec-hd .btn,
  html body #s-app .stk-hd-actions button{ height:auto !important; min-height:44px !important; }
  /* Onglets de la messagerie (Tous / Directs / Groupes) : 34 px. */
  html body #s-app .msg-onglets button{ height:auto !important; min-height:44px !important; }
  /* La croix qui ferme une bulle d'aide mesurait 16×19 : impossible à viser. */
  html body .plan-bulle-aide button,
  html body .pwk-astuce-x,
  html body #pwk-astuce button{ min-width:40px !important; min-height:40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important; }
}

/* ── Passe 5 (23h15) : deux identifiants ─────────────────────────────────────
   La règle d'index.html qui fige les boutons à 34 px est
   « #site-app .btn:not(…):not(…):not(…):not(…) » : un identifiant et cinq
   classes. Un seul identifiant ne suffit pas pour passer devant. #s-app étant
   dans #site-app, on enchaîne les deux. */
@media (max-width: 860px) {
  html body #site-app #s-app .sec-hd button,
  html body #site-app #s-app .sec-hd .btn,
  html body #site-app #s-app .stk-hd-actions button,
  html body #site-app #s-app .stk-bandeau-actes button,
  html body #site-app #s-app .stk-bandeau-actes .btn,
  html body #site-app #s-app .msg-onglets button{
    height:auto !important; min-height:44px !important;
    padding-top:0 !important; padding-bottom:0 !important; }
}

/* ── Passe 6 (23h20) : coupures en plein mot et textes tronqués ───────────── */
@media (max-width: 860px) {
  /* « Inventaire » devenait « Inventair / e », « Livraison » se brisait aussi. */
  html body #site-app #s-app #t-plan .pwk-fusion-tache,
  html body #site-app #s-app #t-plan .pwk-fusion-tache *,
  html body #site-app #s-notif .notif-item span,
  html body #site-app #s-notif .notif-item div{
    overflow-wrap:break-word !important; word-break:normal !important; hyphens:auto !important; }

  /* Les noms de chantier de la messagerie et le résumé d'une demande finissaient
     en « … ». Ils tiennent sur deux lignes. */
  html body #site-app #s-app #t-msg .chan-item div,
  html body #site-app #s-app #t-msg .chan-item-nom,
  html body #site-app #s-app #t-cmd .dmd-pliee-b span,
  html body #site-app #s-app #t-cmd .dmd-pliee-b small{
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
}

/* ── Passe 7 (23h25) : le patch doit contenir ses boutons ────────────────────
   En mettant le titre et les actions sur deux lignes (passe 1), les boutons
   débordaient du dégradé : le bandeau gardait une hauteur figée. */
@media (max-width: 860px) {
  html body #site-app #s-app .stk-bandeau{ height:auto !important; min-height:46px !important;
    overflow:hidden !important; padding-top:10px !important; padding-bottom:10px !important; }
  html body #site-app #s-app .stk-bandeau.stk-bandeau-actions{ gap:10px !important; }
  html body #site-app #s-app .stk-bandeau-actes{ padding-top:0 !important; padding-bottom:0 !important;
    align-items:center !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   30/10/2026 11h50 — LES FORMES D'ÉCRAN (user : « par rapport aux formes des
   écrans, dépendamment des appareils »). Testé sur 17 tailles réelles, du
   iPhone SE 1 (320×568) au 1440p, portrait ET paysage, téléphones et tablettes.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. TÉLÉPHONE EN PAYSAGE ────────────────────────────────────────────────
   Sur un écran de 390 px de haut, le bandeau de démonstration + la barre du
   haut + la barre d'onglets occupaient 177 px, et avec les titres de page il
   ne restait qu'une bande. On compacte les trois : mêmes éléments, moitié
   moins hauts, et le bandeau de démonstration tient sur une ligne. */
@media (max-height: 500px) and (orientation: landscape) {
  html body #demo-banner{ padding:3px 10px !important; font-size:11.5px !important; }
  html body #demo-banner .db-txt small{ display:none !important; }
  html body #demo-banner button{ min-height:30px !important; font-size:11.5px !important; padding:0 10px !important; }
  html body .topbar{ height:40px !important; }
  html body #s-app .topbar .tb-actions > button,
  html body #s-app .topbar .tb-actions > .tb-ico{ width:34px !important; height:34px !important;
    min-width:34px !important; min-height:34px !important; }
  html body #nav.nav, html body .nav{ padding:4px 8px 2px !important; }
  html body #nav .nb{ padding:5px 9px !important; font-size:12px !important; }
  html body #site-app #s-app .stk-bandeau,
  html body #t-plan > .plan-tete{ min-height:38px !important; padding-top:5px !important; padding-bottom:5px !important; }
}

/* ── 2. L'EN-TÊTE DU PLANNING SUR ÉCRAN ÉTROIT ──────────────────────────────
   « octobre – novembre 2026 » ne tient pas à côté des six icônes. Le titre
   passait sous elles : l'en-tête est figé à 46 px de haut, et le texte sur
   trois lignes le débordait. Le titre prend sa ligne, les icônes la leur. */
@media (max-width: 460px) {
  html body #t-plan > .plan-tete{ height:auto !important; min-height:46px !important; }
  html body #t-plan .plan-tete-rang{ flex-wrap:wrap !important; row-gap:6px !important; align-items:center !important; }
  html body #t-plan .plan-mois{ flex:1 1 100% !important; min-width:0 !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    font-size:15px !important; line-height:1.2 !important; }
  html body #t-plan .plan-actions{ flex:1 1 100% !important; justify-content:space-between !important;
    flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none !important; }
  html body #t-plan .plan-actions::-webkit-scrollbar{ display:none !important; }
}

/* ── 3. LES DEUX BULLES D'AIDE NE SE SUPERPOSENT PLUS ───────────────────────
   « Maintenez une mission… » (fixée à 84 px du bas) et « Étirez votre
   créneau » (18 px) se chevauchaient dès que la première passait sur cinq
   lignes, c'est-à-dire sous 400 px de large. */
@media (max-width: 860px) {
  html body .pwk-astuce{ left:12px !important; right:12px !important; transform:none !important;
    max-width:none !important; bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important; }
  html body.stk-barre-demo .pwk-astuce{ bottom:calc(150px + env(safe-area-inset-bottom,0px)) !important; }
}

/* ── 4. LE PLUS PETIT TÉLÉPHONE ENCORE EN SERVICE (320 px) ──────────────────
   Les cartes chantier dépassaient de 4 px : rien ne doit être plus large que
   l'écran, jamais. */
@media (max-width: 360px) {
  html body #site-app .c77-carte,
  html body #site-app .cmdc-ligne,
  html body #site-app .dpc-c{ max-width:100% !important; }
  html body #site-app #t-plan .plan-actions{ max-width:100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   30/10/2026 14h30 — DEUXIÈME PASSE SUR LES FORMES D'ÉCRAN.
   La première passe (11h50) avait visé juste mais pas assez fort : la mesure
   sur les 17 tailles montre que trois réglages posés ailleurs gagnaient encore.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 5. PAYSAGE : c'est « min-height » qui tenait les barres hautes ──────────
   Mesuré sur iPhone 13 couché (844×390) : bandeau 52 + barre du haut 40 +
   onglets 54 = 146 px, soit 37 % de l'écran. Baisser les marges ne servait à
   rien : le bandeau a un plancher de 52 px et chaque onglet un plancher de
   44 px (la taille au doigt, posée pour le portrait). Couché, on descend à
   34 et 32 : le doigt garde de quoi viser, et les trois barres passent de
   146 à ~116 px, soit 30 %. */
@media (max-height: 500px) and (orientation: landscape) {
  html body #demo-banner{ min-height:34px !important; height:auto !important; }
  html body #demo-banner .db-stars{ height:auto !important; align-self:center !important; }
  html body #site-app #nav .nb,
  html body #nav.nav .nb{ min-height:32px !important; height:auto !important; }
  html body #s-app .topbar{ min-height:40px !important; }
}

/* ── 6. LES CARTES CHANTIER À 320 px : la colonne, pas la carte ─────────────
   Cinq cartes sur dix sortaient de 4 px. La carte obéissait bien à son
   « 100 % », mais la colonne de la grille qui la porte se dimensionnait sur
   son contenu : 310 px dans un conteneur de 292. On force la colonne à ne
   jamais dépasser son conteneur, et on autorise le contenu à se serrer. */
@media (max-width: 460px) {
  html body #site-app .c77-groupe{ grid-template-columns:minmax(0,1fr) !important; }
  html body #site-app .c77-carte{ min-width:0 !important; }
  html body #site-app .c77-carte *{ min-width:0 !important; }
}

/* ── 7. LES ÉTIQUETTES DU JOURNAL : 24 px de haut, on les rate au doigt ─────
   « Immeuble Voltaire », « Sortie du dépôt » : des boutons de filtre de 144×24.
   On les remonte à 34 px — assez pour le pouce, sans gonfler la ligne. */
@media (max-width: 500px) {
  html body #site-app #t-journal .jx-ch{ min-height:34px !important;
    padding-top:6px !important; padding-bottom:6px !important; }
}

/* ── 8. LA SIGNATURE « STOCKÉO » EN BAS : 6 px, illisible ───────────────────
   Le crédit fixe du mode démonstration était composé en 6 px. Même pour une
   mention discrète, c'est sous le seuil de lecture. Valeur finale posée au
   bloc 14 avec les autres planchers : 10 px, discret et lisible. */

/* ═══════════════════════════════════════════════════════════════════════════════
   30/10/2026 14h45 — TROISIÈME PASSE : ce que les captures ont montré.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 9. 320 px : LA SIXIÈME ICÔNE DU PLANNING ÉTAIT COUPÉE ──────────────────
   La rangée d'icônes vit entre les deux flèches « ‹ › », soit 156 px de large
   à 320. Six icônes de 44 px en demandent 264 : la dernière passait sous la
   flèche de droite. On descend la rangée sur sa propre ligne, qui occupe alors
   toute la largeur de l'en-tête. Les flèches gardent la ligne du titre. */
@media (max-width: 460px) {
  /* On NE touche PAS à « position » : l'en-tête est collant (sticky) et porte un
     « top » d'accroche. Le passer en « relative » ferait de ce top un décalage
     vers le bas — l'en-tête glissait alors par-dessus les onglets Dépôt / Perso /
     Conducteurs. Un élément collant sert déjà de repère aux enfants absolus. */
  html body #t-plan > .plan-tete{ padding-bottom:52px !important; }
  html body #t-plan .plan-tete-rang{ min-height:0 !important; }
  html body #t-plan .plan-actions{
    position:absolute !important; left:12px !important; right:12px !important;
    bottom:5px !important; width:auto !important; max-width:none !important;
    justify-content:space-between !important; overflow:visible !important; }
}

/* ── 10. LE CHAMP DE RECHERCHE DES COMMANDES : 36 px de haut ────────────────
   C'est l'étiquette qui reçoit le doigt, pas le champ (18 px) ; elle mesurait
   36. On la met aux 44 px de rigueur, comme tous les autres champs. */
@media (max-width: 500px) {
  html body #site-app .cmdc-cherche{ min-height:44px !important; height:auto !important; }
  html body #site-app .cmdc-cherche input{ min-height:40px !important; }
}

/* ── 11. PLUS DE MOTS COUPÉS EN DEUX ────────────────────────────────────────
   « ZI Nord, 77400 La-gny-sur-Marne », « Inven-taire », « clô-tures »,
   « électroporta-tif » : la césure automatique s'appliquait partout, y compris
   là où la place ne manquait pas. On la repasse en manuel ; le repli
   « couper si le mot ne tient vraiment pas » reste en place, donc rien ne
   déborde. Les cases du planning gardent la césure : 95 px de large, elle y
   est utile. */
@media (max-width: 500px) {
  html body #site-app .stk-brut:not(#t-plan .stk-brut),
  html body #site-app .c77-carte *,
  html body #site-app .skp-nom,
  html body #site-app .skp-ref{ hyphens:manual !important; -webkit-hyphens:manual !important; }
}

/* ── 12. LES ÉTIQUETTES D'ÉTAT DU STOCK : 10,5 px ───────────────────────────
   « Disponible », « Hors service », « En panne », « En réparation ». */
@media (max-width: 500px) {
  html body #site-app .skp-n-dispo small,
  html body #site-app .skp-tag{ font-size:11.5px !important; }
}

/* ── 13. LA CÉSURE DU PLANNING : seulement pour les mots vraiment longs ─────
   Les cases du planning font 88 à 108 px : la césure y est nécessaire, sinon
   « électroportatif » déborde. Mais elle coupait aussi « Inven-taire » et
   « clô-tures », qui tenaient sur leur ligne. On fixe un plancher : on ne coupe
   qu'un mot d'au moins 12 lettres, 6 avant, 5 après.
   VÉRIFIÉ : largeur des colonnes identique avant/après (95 px à 390, 108 à 430,
   88 à 320) — le planning, zone figée par le user, n'est pas déplacé d'un pixel.
   Seule la coupure des mots change. */
@media (max-width: 500px) {
  html body #site-app #t-plan .pwk-fusion-tache,
  html body #site-app #t-plan .pwk-fusion-qui,
  html body #site-app #t-plan .pwk-cell span,
  html body #site-app #t-plan .stk-brut{
    hyphenate-limit-chars:12 6 5 !important;
    -webkit-hyphenate-limit-before:6; -webkit-hyphenate-limit-after:5; }
}

/* ── 14. LE PLANCHER DE LISIBILITÉ : 10 px, jamais moins ────────────────────
   Mesuré sur les 17 tailles : cinq endroits composaient sous 10 px, seuil en
   dessous duquel on ne lit plus sur un téléphone. La signature « Stockéo » du
   mode démonstration (9), les initiales du journal en petit format (8,5), le
   sous-titre de la carte de connexion (9,5) et le prénom dans une case de
   planning serrée (9,5). On les remonte au plancher, sans toucher au reste. */
@media (max-width: 500px) {
  html body .l-powered.stk-fixed-credit,
  html body .l-powered.stk-fixed-credit .pwr-char{ font-size:10px !important; }
  html body #site-app .jx-av.jx-av-xs{ font-size:10px !important; }
  /* PAS la carte de connexion : le 9,5 px y est un choix du user (23/09, « remis
     à la taille d'origine »). On n'y touche pas — sinon les deux thèmes se
     mettraient à diverger (9,5 en clair, 10,5 en sombre). Signalé au user. */
  html body #site-app .lc-sub:not(#s-login .lc-sub){ font-size:10.5px !important; }
  /* Le prénom dans une case de planning était en 9,5 px. VÉRIFIÉ : le passer à
     10,5 ne déplace pas la grille d'un pixel (colonnes toujours 95/108/88). */
  html body #site-app #t-plan .pwk-fusion-qui{ font-size:10.5px !important; }
}