/* ═══════════════════════════════════════════════════════════════════════════
   FOOTPASS® · calque DEMO (propre au prototype publie, pas a l'export Claude Design)

   Charge EN DERNIER dans index.html. Ne contient que ce qui est specifique a la
   mise en ligne du prototype, pour qu'un futur export puisse etre re-integre
   sans avoir a retrouver ces reglages au milieu des fichiers d'origine :

     1. Chassis lisible sur mobile (logo + PROTOTYPE a gauche, bascule de theme
        a droite) · l'export d'origine masquait tout le chassis sous 640px de haut.
     2. Panneau de demo accorde au decor sombre de la scene, comme son bouton
        flottant · l'export d'origine le laissait en verre clair sur fond noir.

   La scene (le decor autour du telephone) est sombre dans les deux modes : la
   bascule clair/sombre agit sur l'ecran du telephone, pas sur la page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1 · CHASSIS SUR MOBILE
   ───────────────────────────────────────────────────────────────────────── */

/* L'export masquait .scene-chrome des que la fenetre descendait sous 640px de
   haut : sur un telephone, la marque ET la bascule de theme disparaissaient.
   On ne le masque plus que sur une fenetre de bureau ecrasee (large et basse). */
@media (max-height: 640px) {
  .scene-chrome { display: flex; }
}
@media (max-height: 560px) and (min-width: 900px) {
  .scene-chrome { display: none; }
}

/* Memes elements, memes places, a l'echelle du telephone. */
@media (max-width: 560px) {
  .scene-chrome {
    top: 14px;
    left: 16px;
    right: 16px;
  }
  .scene-brand { gap: 12px; }
  .brand-logo { height: 15px; }
  .scene-meta {
    padding-left: 12px;
    font-size: 8px;
    letter-spacing: 0.16em;
  }
  .toggle-track { width: 46px; height: 25px; }
  .toggle-thumb { width: 20px; height: 20px; }
  .toggle-thumb.right { transform: translateX(21px); }
}

/* Tres petits ecrans : la marque seule suffit, la bascule reste prioritaire. */
@media (max-width: 340px) {
  .scene-meta {
    padding-left: 9px;
    font-size: 7.5px;
    letter-spacing: 0.12em;
  }
  .brand-logo { height: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   1bis · BASCULE MOBILE / DESKTOP (voir final/device-switch.jsx)
   Habillage "scene" : jumeau exact de .theme-toggle, meme hauteur, meme
   curseur glissant, pose juste a sa gauche dans la barre du haut.
   ───────────────────────────────────────────────────────────────────────── */

/* Le groupe d'actions en haut a droite : bascule de format, puis bascule de theme. */
.scene-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fp-dsw {
  position: relative;
  display: flex;
  align-items: center;
  width: 64px;
  height: 28px;
  padding: 2px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.fp-dsw-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 23px;
  border-radius: 12px;
  background: #EAEAEA;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fp-dsw-thumb.right { transform: translateX(30px); }

.fp-dsw button {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: rgba(234, 234, 234, 0.55);
  transition: color 200ms;
}
.fp-dsw button:hover { color: rgba(234, 234, 234, 0.85); }
.fp-dsw button.on,
.fp-dsw button.on:hover { color: #0F0F0F; }

/* Habillage "wseg" : page desktop, dans le segmente de la barre du haut, a cote
   du FR/EN. Il herite de .w-seg, on ne recadre que le chausson des icones. */
.fp-dsw-seg button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
}

/* Mobile : memes proportions que la bascule de theme reduite plus bas. */
@media (max-width: 560px) {
  .scene-actions { gap: 8px; }
  .fp-dsw { width: 56px; height: 25px; border-radius: 13px; }
  .fp-dsw-thumb { width: 26px; height: 21px; border-radius: 11px; }
  .fp-dsw-thumb.right { transform: translateX(26px); }
  .fp-dsw button { height: 21px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2 · PANNEAU DE DEMO ACCORDE AU DECOR
   Le bouton flottant est deja sombre ; le panneau qu'il ouvre etait clair.
   Les selecteurs passent par .scene pour repasser devant la feuille que le
   composant injecte lui-meme dans la page.
   ───────────────────────────────────────────────────────────────────────── */

.scene .twk-panel,
.w .twk-panel {
  background: rgba(18, 18, 21, 0.86);
  color: #EAEAEA;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 44px rgba(0, 0, 0, 0.55);
}

.scene .twk-hd,
.w .twk-hd { border-bottom: 0.5px solid rgba(255, 255, 255, 0.07); }
.scene .twk-hd b,
.w .twk-hd b { color: #F2F2F4; }
.scene .twk-x,
.w .twk-x { color: rgba(234, 234, 234, 0.5); }
.scene .twk-x:hover,
.w .twk-x:hover { background: rgba(255, 255, 255, 0.09); color: #FFF; }

.scene .twk-sect,
.w .twk-sect { color: rgba(234, 234, 234, 0.42); }
.scene .twk-lbl,
.w .twk-lbl { color: rgba(234, 234, 234, 0.74); }
.scene .twk-val,
.w .twk-val { color: rgba(234, 234, 234, 0.5); }

.scene .twk-body::-webkit-scrollbar-thumb,
.w .twk-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid transparent;
  background-clip: content-box;
}
.scene .twk-body::-webkit-scrollbar-thumb:hover,
.w .twk-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
  border: 2px solid transparent;
  background-clip: content-box;
}

.scene .twk-field,
.w .twk-field {
  background: rgba(255, 255, 255, 0.07);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  color: #EAEAEA;
}
.scene .twk-field:focus,
.w .twk-field:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.scene select.twk-field,
.w select.twk-field {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(234,234,234,.6)' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
/* Le menu deroulant natif est dessine par le systeme : on lui donne un fond
   lisible, sinon les options s'affichent en noir sur noir sous Chrome. */
.scene select.twk-field option,
.w select.twk-field option { background: #1C1C1F; color: #EAEAEA; }

.scene .twk-seg,
.w .twk-seg { background: rgba(255, 255, 255, 0.08); }
.scene .twk-seg-thumb,
.w .twk-seg-thumb {
  background: rgba(255, 255, 255, 0.17);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.scene .twk-seg button,
.w .twk-seg button { color: #EAEAEA; }

/* Boutons d'action : le vert de marque, jamais une autre teinte. */
.scene .twk-btn,
.w .twk-btn {
  background: rgba(0, 163, 126, 0.16);
  color: #4FE0BC;
  border: 0.5px solid rgba(0, 163, 126, 0.4);
  font-weight: 600;
  height: 28px;
  white-space: normal;
  line-height: 1.25;
  padding: 5px 12px;
  text-align: left;
}
.scene .twk-btn:hover,
.w .twk-btn:hover {
  background: rgba(0, 163, 126, 0.26);
  border-color: rgba(0, 163, 126, 0.6);
  color: #7BF0D2;
}
.scene .twk-btn:active,
.w .twk-btn:active { transform: scale(0.985); }
.scene .twk-btn.secondary,
.w .twk-btn.secondary {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: #EAEAEA;
}

/* Mobile : cible tactile confortable, panneau pleine largeur (regle deja posee
   par le composant), et un peu plus d'air entre les lignes. */
@media (max-width: 560px) {
  .scene .twk-btn,
  .w .twk-btn { height: auto; min-height: 36px; padding: 9px 14px; }
  .scene .twk-field,
  .w .twk-field { height: 32px; }
  .scene .twk-seg button,
  .w .twk-seg button { min-height: 28px; }
}

/* Le composant place le panneau et son bouton en bas a droite, au-dessus de
   tout. Sur la page desktop cet angle sert aussi aux avis (toasts), et le bouton
   se posait par-dessus les modales plein ecran, jusqu'a masquer le bouton
   « Continuer » du tunnel de structure. On le remonte un peu et surtout on le
   fait passer SOUS les couches d'habillage de l'app (voile 125, tiroir et
   modales 130, appels 200+) : tant qu'une modale est ouverte, le bouton
   s'efface, ce qui est exactement ce qu'on veut. Le panneau lui-meme, une fois
   ouvert, reste au-dessus. */
.w .twk-fab { bottom: 76px; z-index: 120; }
@media (max-width: 560px) { .w .twk-fab { bottom: 72px; } }

/* ─────────────────────────────────────────────────────────────────────────────
   3 · L'ESPACE DE TRAVAIL DESKTOP SUR PETIT ECRAN

   L'export dessine une mise en page a colonnes fixes avec un plancher de
   1180 px (`.w { min-width: 1180px }`) : en dessous, la page deborde et une
   partie de l'interface part hors champ, sans meme pouvoir defiler jusqu'a
   elle. Ce calque enleve ce plancher et redistribue la mise en page en deux
   paliers, pour que la version desktop reste utilisable telle quelle quand on
   ouvre le lien sur un telephone.
   ───────────────────────────────────────────────────────────────────────── */

/* Le voile du tiroir n'existe qu'au premier palier (voir web-core.jsx). */
.fp-sb-scrim { display: none; }

/* ── Palier 1 · sous 1180 px : la coquille tient dans la fenetre ─────────── */
@media (max-width: 1180px) {
  .w {
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  /* La barre laterale se pose AU-DESSUS du contenu au lieu de lui prendre sa
     place. Le bouton qui existe deja dans la barre du haut l'ouvre et la ferme :
     aucune commande nouvelle a apprendre. */
  .w .w-sb {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 130;
    width: var(--sb);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    transition: transform 240ms cubic-bezier(0.3, 0.9, 0.3, 1);
  }
  .w.light .w-sb { box-shadow: 0 24px 70px rgba(15, 15, 16, 0.22); }
  .w.sb-closed .w-sb {
    width: var(--sb);
    border-right-color: var(--fp-border);
    transform: translateX(-100%);
  }

  .w .fp-sb-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 125;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
  }
  .w.light .fp-sb-scrim { background: rgba(15, 15, 16, 0.28); }

  /* La conversation et son panneau de droite ne tiennent plus cote a cote. */
  .w-msg.withpanel { grid-template-columns: var(--list) minmax(0, 1fr); }
}

/* ── Palier 2 · sous 760 px : une seule colonne, barre du haut compacte ──── */
@media (max-width: 760px) {
  /* Barre du haut · le titre s'efface avant les commandes, jamais l'inverse. */
  .w .w-top { height: 54px; padding: 0 10px; gap: 8px; }
  .w .w-top-title { flex: 1 1 auto; min-width: 0; }
  .w .w-top-title b {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .w .w-top-title span { display: none; }
  /* La recherche se replie sur son icone · elle ouvre la meme palette. */
  .w .w-search {
    flex: 0 0 auto;
    width: 34px;
    margin-left: 0;
    padding: 0;
    justify-content: center;
  }
  .w .w-search span,
  .w .w-search .w-kbd { display: none; }
  .w .w-top-actions { gap: 2px; }
  .w .w-iconbtn { width: 34px; height: 34px; }
  .w .w-seg button { padding: 6px 8px; }
  .w .fp-dsw-seg button { padding: 6px 7px; }
}

/* ── Palier 3 · tres petits ecrans : la barre du haut ne peut plus tout tenir ── */
@media (max-width: 400px) {
  /* Le titre tombait a une dizaine de pixels ("Co…"), il ne renseignait plus
     rien ; la palette de recherche est une commande au clavier, sans objet sur
     un telephone. On garde les commandes qui servent vraiment : tiroir,
     notifications, langue, format, theme. La page reste identifiee par son
     propre contenu (grand titre d'accueil, en-tete du coffre, etc.). */
  .w .w-top-title,
  .w .w-search { display: none; }
  .w .w-top-actions { margin-left: auto; }

  /* Regle de fond, sans laquelle rien de ce qui suit ne tient : les ecrans sont
     des elements flexibles, et `min-width: auto` (la valeur par defaut d'un
     element flexible) leur interdit de descendre sous la largeur de leur
     contenu. Ils gardaient donc leur largeur de bureau et se faisaient rogner
     par le parent, sans meme pouvoir defiler jusqu'a la partie cachee. */
  .w .w-content > * { min-width: 0; }

  /* Une seule colonne. Les grilles de contenu portent leur gabarit en style
     inline dans le JSX (accueil, structure, liaisons, reglages) : seul
     !important peut passer devant. */
  .w .w-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .w .w-page-in { padding: 18px 14px 56px; }
  .w .w-h1 { font-size: 26px; }
  .w .w-home-hero { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Messages · deux volets pleine largeur qui defilent lateralement, avec
     accrochage : on passe de la liste a la conversation d'un glissement. */
  .w .w-msg,
  .w .w-msg.withpanel {
    grid-template-columns: 100% 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .w .w-msg > * { scroll-snap-align: start; }
  .w .w-msg.withpanel .w-panel { width: 100%; }

  /* Coffre-fort · les dossiers passent au-dessus des documents, dans une bande
     compacte qui defile pour elle-meme : empilee telle quelle, la liste des
     dossiers occupait tout le premier ecran avant le moindre document. */
  .w .w-vault,
  .w .w-vault.withprev {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .w .w-vault .w-vrail {
    max-height: 172px;
    border-right: 0;
    border-bottom: 1px solid var(--fp-border);
  }

  /* Agenda · la semaine garde ses 7 colonnes et defile horizontalement : la
     tasser sur 375 px la rendrait illisible. `min-width: 0` est indispensable :
     sans lui, l'element de grille refuse de descendre sous la largeur de son
     contenu (724 px), deborde de son parent qui rogne, et les jours de fin de
     semaine deviennent inatteignables au lieu de defiler. */
  .w .w-week {
    overflow-x: auto;
    min-width: 0;
    grid-template-columns: 52px repeat(7, minmax(96px, 1fr));
  }
  .w .w-month-grid,
  .w .w-month-dows { min-width: 640px; }
  .w .w-month { overflow-x: auto; }

  /* Popovers · le tunnel de structure se dimensionne deja en vw, on n'y touche
     pas. Le centre de notifications, lui, est ancre a la cloche en 392 px fixes
     et debordait a gauche : on le pose sur toute la largeur. Il se cale sur
     .w-top (qui porte un backdrop-filter, donc sert de reference au fixed), ce
     qui tombe juste puisque la barre occupe le haut de l'ecran. */
  .w .w-notifpop {
    position: fixed;
    top: 58px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 70vh;
  }
  .w .w-plus-pop { width: min(320px, calc(100vw - 28px)); left: 12px; }
}