/* ═══════════════════════════════════════════════════════════════════════════
   Page /phone-farm — parc d'iPhones physiques.

   Reprend les variables de public/style.css. Même parti pris que /ia : page
   autonome sans sidebar, une seule barre de défilement (celle de la page),
   et l'attribut hidden qui gagne toujours.
   ═══════════════════════════════════════════════════════════════════════════ */

/* `[hidden] { display:none }` vient du navigateur et a la même spécificité que
   n'importe quelle règle d'auteur posant un display. Sans cette ligne, tout ce
   qui est en flex ou grid ici resterait affiché malgré son attribut. */
[hidden] { display: none !important; }

/* Deux colonnes : la barre latérale de la page, puis le contenu. Le .layout de
   style.css est déjà une grille en 100vh de haut — c'est ce qui donne à la
   barre toute la hauteur, sans calcul ni bricolage. */
.layout--pf { grid-template-columns: 240px minmax(0, 1fr); background: transparent; }
.layout--pf .main { max-width: none; width: 100%; overflow: visible; }

body {
  --bg: #181a1b;
  --bg2: #1e2021;
  --panel: #1e2021;
  --card: #232627;
  --card2: #2a2d2e;
  --text: #eceae7;
  --text2: #c0beb7;
  --muted: #98958d;
  --purple: #58a6ff;
  --purple-l: #79c0ff;
  --purple-d: #388bfd;
  --cyan: #58a6ff;
  --blue: #58a6ff;
  --pink: #f0a8a0;
  --border: rgba(255, 255, 255, .12);
  --border2: rgba(255, 255, 255, .18);
  --border-glow: rgba(88, 166, 255, .45);
  --grad-main: #316dca;
  --vio-8b5cf6: #58a6ff;
  --vio-a78bfa: #79c0ff;
  --vio-c4b5fd: #a5d0ff;
  --vio-rgb-8b5cf6: 88, 166, 255;
  --vio-rgb-a855f7: 88, 166, 255;
  --vio-rgb-7c6aff: 88, 166, 255;
  --vio-rgb-c4b5fd: 165, 208, 255;
  --fond-13131a: #1e2021;
  background: #181a1b;
  color: #eceae7;
  font-family: "Segoe UI", system-ui, sans-serif;
}
body::before, body::after { content: none; }

.layout--pf .page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.pf-header-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Le bouton IP est un bouton avant d'etre un badge — clique-t-on sur « Parc
   actif » a cote ? Non. Curseur et bordure le disent. */
.pf-badge--ip { cursor: pointer; border: 1px solid var(--border2); color: var(--muted);
  background: rgba(255, 255, 255, .03); font-weight: 650; }
.pf-badge--ip:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
/* Suspectee : la meme place, mais ca ne doit plus se confondre avec le calme
   du bouton du dessus — c'est justement le seul signal avant d'ouvrir le
   panneau, elle doit se voir sans avoir a cliquer. */
.pf-badge--ip.is-alerte { border-color: rgba(239, 68, 68, .45); color: #fca5a5;
  background: rgba(239, 68, 68, .12); animation: pf-pulse 2s ease-in-out infinite; }
/* A surveiller (50-69 %) : visible, mais sans le pulse — celui-ci reste
   reserve a l'alerte, sinon les deux se confondent au premier coup d'oeil. */
.pf-badge--ip.is-attention { border-color: rgba(240, 166, 60, .45); color: #f0a63c;
  background: rgba(240, 166, 60, .12); }

/* Meme langage visuel que le badge IP juste a cote, pour la meme raison :
   un taux de ban preoccupant doit se voir sans avoir a ouvrir Sante. */
.pf-badge--tache { cursor: pointer; border: 1px solid var(--border2); color: var(--muted);
  background: rgba(255, 255, 255, .03); font-weight: 650; }
.pf-badge--tache:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.pf-badge--tache.is-alerte { border-color: rgba(239, 68, 68, .45); color: #fca5a5;
  background: rgba(239, 68, 68, .12); animation: pf-pulse 2s ease-in-out infinite; }
.pf-badge--tache.is-attention { border-color: rgba(240, 166, 60, .45); color: #f0a63c;
  background: rgba(240, 166, 60, .12); }

@keyframes pf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation: none !important; } }

/* ─── Bandeaux ───────────────────────────────────────────────────────────── */
.pf-badge {
  flex: 0 0 auto; padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; white-space: nowrap;
  border: 1px solid rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .12); color: var(--yellow-l);
}
.pf-badge--wip  { /* etat par defaut : ambre, defini sur .pf-badge */ }
.pf-badge--live { border-color: rgba(16, 185, 129, .35); background: rgba(16, 185, 129, .12); color: var(--green-l); }

.pf-notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(88, 166, 255, .08); border: 1px solid rgba(88, 166, 255, .28);
  border-radius: var(--radius); padding: 15px 18px; margin-bottom: 20px;
  font-size: 13.5px; line-height: 1.6; color: var(--text2);
}
.pf-notice-icon { font-size: 22px; flex: 0 0 auto; line-height: 1.2; }
.pf-notice strong { color: var(--text); display: block; margin-bottom: 3px; }
.pf-notice a { color: var(--cyan); }

.pf-warn {
  background: rgba(245, 158, 11, .07); border: 1px solid rgba(245, 158, 11, .26);
  border-radius: var(--radius); padding: 15px 18px; margin-top: 22px;
  font-size: 13.5px; line-height: 1.6; color: var(--text2);
}
.pf-warn strong { color: var(--yellow-l); }

/* ─── Compteurs ──────────────────────────────────────────────────────────── */
.pf-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.pf-stat {
  flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 5px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 18px;
}
.pf-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
.pf-stat-value { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.pf-stat-value--ok { color: var(--green-l); }
/* Un solde bas n est pas une statistique de plus : c est le moment ou la
   creation de comptes va s arreter. Il doit se voir sans etre lu. */
.pf-stat-value--warn { color: #fbbf24; }

/* La carte SMSPool quand la creation de comptes est suspendue. Le montant seul
   ne dit pas que le parc a cesse de creer : sous le seuil, la tache partirait
   quand meme, occuperait le telephone plusieurs minutes et echouerait sur un
   ecran qui ne parle pas du portefeuille. */
.pf-stat-alerte  { display: block; margin-top: 6px; font-size: 11px; line-height: 1.35;
                   color: #f87171; font-weight: 500; }
.pf-stat--bloque { border-color: rgba(248, 113, 113, .45); }
.pf-stat-value--ko   { color: #f87171; }
.pf-stat-value--vide { color: var(--muted); font-size: 15px; font-weight: 650; }
.pf-stat--clic { cursor: pointer; transition: border-color .15s; }
.pf-stat--clic:hover, .pf-stat--clic:focus-visible { border-color: var(--purple); outline: none; }
.pf-stat--clic.is-charge { opacity: .55; }

/* ─── Barre latérale de la page ──────────────────────────────────────────── */
/* Même disposition que GeeLark : la navigation occupe tout le côté gauche,
   du haut en bas, et le contenu défile à côté. */
.pf-nav {
  display: flex; flex-direction: column; gap: 2px; padding: 18px 12px;
  background: #1e2021;
  border-right: 1px solid rgba(255, 255, 255, .06);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.pf-nav-label {
  font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: 14px 10px 6px;
}
.pf-nav-label:first-child { padding-top: 0; }

.pf-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text2); text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 600;
  transition: background .15s, color .15s;
}
.pf-nav-item:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.pf-nav-item:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.pf-nav-item.is-active { background: #1a2330; color: var(--text); }
.pf-nav-item.is-active .pf-nav-icon { opacity: 1; }

.pf-nav-icon { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; color: #79c0ff; }
.pf-nav-item[data-tab="devices"] .pf-nav-icon { color: #58a6ff; }
.pf-nav-item[data-tab="accounts"] .pf-nav-icon { color: #e3b341; }
.pf-nav-item[data-tab="medias"] .pf-nav-icon { color: #3fb950; }
.pf-nav-item[data-tab="tasks"] .pf-nav-icon { color: #79c0ff; }
.pf-nav-item[data-tab="jobs"] .pf-nav-icon { color: #39c5cf; }
.pf-nav-item[data-tab="sante"] .pf-nav-icon { color: #f85149; }
.pf-nav-item[data-tab="setup"] .pf-nav-icon { color: #f0a63c; }
.pf-nav-item[data-tab="test"] .pf-nav-icon { color: #58a6ff; }
.pf-nav-item[data-tab="plan"] .pf-nav-icon { color: #58a6ff; }
.pf-nav-item[data-tab="reglages"] .pf-nav-icon { color: #c9d1d9; }
.pf-nav-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf-nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.pf-nav-who {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 10px; border-radius: 9px;
  background: #181a1b;
}
button.pf-nav-who {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.pf-nav-who.is-active { box-shadow: inset 0 0 0 1px #58a6ff; }
.pf-nav-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: #1a2330 center / cover no-repeat; border: 1px solid rgba(88, 166, 255, .45);
}
.pf-avatar-edit { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.pf-avatar-edit .pf-nav-avatar { width: 48px; height: 48px; }
.pf-avatar-edit small { color: #58a6ff; font-size: 11px; }
.pf-nav-who strong, .pf-nav-who small { display: block; }
.pf-nav-who strong { font-size: 13px; font-weight: 650; }
.pf-nav-who small { color: var(--muted); font-size: 11px; }
.pf-nav-item > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-nav-count {
  flex: 0 0 auto; min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 750; line-height: 1.6;
  background: rgba(255, 255, 255, .08); color: var(--muted);
}
.pf-nav-count:empty { display: none; }
.pf-nav-item.is-active .pf-nav-count { background: rgba(var(--vio-rgb-8b5cf6), .3); color: var(--purple-l); }

/* Écran étroit : la barre repasse en bandeau horizontal au-dessus du contenu. */
@media (max-width: 860px) {
  .layout--pf { grid-template-columns: 1fr !important; }
  .pf-nav {
    position: static; height: auto; flex-direction: row; gap: 5px;
    overflow-x: auto; padding: 8px 10px;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .pf-nav-label { display: none; }
  .pf-nav-item { width: auto; white-space: nowrap; padding: 8px 12px; }
  .pf-nav-item > span:nth-child(2) { overflow: visible; }
}

/* ─── Panneaux ───────────────────────────────────────────────────────────── */
.pf-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 22px 24px;
  animation: pf-rise .25s ease;
}
.pf-panel-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-panel-head > div:first-child { flex: 1; min-width: 220px; }
.pf-panel-title { font-size: 17px; font-weight: 750; margin: 0 0 4px; color: var(--text); letter-spacing: -.01em; }
.pf-panel-sub   { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; }
.pf-sub-title   { font-size: 14px; font-weight: 700; margin: 26px 0 12px; color: var(--text); }
.pf-hint        { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 12px 0 0; }
.pf-pill {
  font-size: 11px; font-weight: 750; padding: 2px 9px; border-radius: 999px;
  background: rgba(88, 166, 255, .16); color: #79c0ff;
}

/* ─── Boutons et champs ──────────────────────────────────────────────────── */
.pf-btn {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 16px; font-size: 13.5px; font-weight: 650; font-family: inherit;
  cursor: pointer; white-space: nowrap; background: var(--panel); color: var(--text);
  display: inline-flex; align-items: center; gap: 7px;
  transition: opacity .15s, border-color .15s, transform .12s;
}
.pf-btn:active:not(:disabled) { transform: translateY(1px); }
.pf-btn:disabled { opacity: .42; cursor: not-allowed; }
.pf-btn:hover:not(:disabled) { border-color: var(--border-glow); }
.pf-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.pf-btn--primary { background: #316dca; color: #fff; border-color: transparent; }
.pf-btn--primary:hover:not(:disabled) { background: #388bfd; opacity: 1; border-color: transparent; }
.pf-btn--danger  { background: rgba(244, 63, 94, .12); color: var(--red-l); border-color: rgba(244, 63, 94, .3); }
.pf-btn--ghost   { background: var(--panel); }
.pf-btn--sm      { padding: 6px 12px; font-size: 12.5px; }
a.pf-btn         { text-decoration: none; }   /* .pf-btn sert aussi sur des liens de telechargement */

.pf-input, .pf-select {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px;
  font-family: inherit; outline: none; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.pf-input:focus, .pf-select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(var(--vio-rgb-8b5cf6), .13); }
.pf-input::placeholder { color: var(--muted); }
.pf-input--title { font-size: 16px; font-weight: 700; }
.pf-input--sm { padding: 6px 9px; font-size: 12.5px; }

/* Les cases a cocher viennent de la feuille du site : une seule definition
   pour toutes les pages, voir style.css. */

/* ─── Menu maison (remplace les <select> natifs) ─────────────────────────────
   La LISTE d'un select appartient au systeme : blanche, anguleuse, avec sa
   ligne bleue — au milieu de fenetres sombres et arrondies. On garde le
   select cache comme source de verite et on dessine le menu par-dessus. */
.pf-dd2 { position: relative; }
.pf-dd2-trigger { display: flex; align-items: center; gap: 10px; text-align: left;
  cursor: pointer; padding-right: 12px; }
.pf-dd2-label { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pf-dd2-caret { color: #79c0ff; font-size: 11px; flex-shrink: 0; transition: transform .18s; }
.pf-dd2-trigger[aria-expanded="true"] { border-color: #58a6ff; }
.pf-dd2-trigger[aria-expanded="true"] .pf-dd2-caret { transform: rotate(180deg); }
.pf-dd2-panel { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 70;
  max-height: 280px; overflow-y: auto; padding: 6px;
  background: #1e2021;
  border: 1px solid rgba(88, 166, 255, .45); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.pf-dd2-panel[hidden] { display: none; }
.pf-dd2-opt { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: #c0beb7; font-family: inherit; font-size: 13px;
  transition: background .12s, color .12s; }
.pf-dd2-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pf-dd2-nom { color: #eceae7; white-space: nowrap; }
.pf-dd2-sub { color: #98958d; font-size: 11.5px; }
.pf-dd2-check { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%2358a6ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat; }
.pf-dd2-opt:hover { background: rgba(255, 255, 255, .05); }
.pf-dd2-opt.is-on { background: #1a2330; }
.pf-dd2-opt.is-on .pf-dd2-check { opacity: 1; }

/* ─── Menus deroulants ───────────────────────────────────────────────────────
   Le chevron natif est gris et colle au bord droit. On le remplace par le
   notre, dessine en SVG dans le fond — aucune image a charger. */
select.pf-input, select.pf-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a78bfa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select.pf-input:hover:not(:disabled), select.pf-select:hover:not(:disabled) {
  border-color: var(--border2);
}
/* Le menu deploye reste a la main du systeme : au moins il suit le theme
   sombre au lieu d'un fond blanc. */
select.pf-input, select.pf-select { color-scheme: dark; }
select.pf-input option, select.pf-select option { background: #1e2021; color: var(--text); }
select.pf-input:disabled, select.pf-select:disabled { opacity: .5; cursor: not-allowed; }


/* ─── Appareils ──────────────────────────────────────────────────────────── */
/* Lignes serrees plutot que cartes : le parc est fait pour grossir. Une carte
   par telephone n'en laissait voir que six ou sept d'un coup ; une ligne tient
   en 34 px et la meme fenetre en montre une trentaine. */
.pf-devices { display: flex; flex-direction: column; gap: 2px; }
/* La derniere colonne est FIXE, pas `auto`.
   L'en-tete et les lignes sont deux grilles separees : avec `auto`, la
   derniere colonne se dimensionnait sur son contenu — vide dans l'en-tete,
   quatre boutons dans les lignes. Les colonnes en `fr` se partageaient donc un
   espace different de part et d'autre, et les valeurs glissaient d'un cran par
   rapport a leurs titres : « tache en cours » se lisait sous « iOS ». */
.pf-row { display: grid; align-items: center; gap: 10px; padding: 6px 10px;
  /* Deux groupes, et le vide au milieu.
     A gauche ce qu'on lit d'abord — nom, modele, iOS, prochaine tache — serres
     les uns contre les autres. A droite ce qu'on ne consulte qu'au besoin —
     demon, dernier contact, jeton — cale pres des boutons. C'est la colonne
     « Prochaine tache » qui absorbe le mou entre les deux : son contenu reste
     a gauche, sa largeur pousse le reste vers la droite. */
  grid-template-columns: 22px 10px minmax(130px, 160px) minmax(92px, 110px) 46px minmax(132px, 1fr) 64px 62px 104px 76px 116px;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  font-size: 12.5px; color: var(--text2); }
.pf-row:not(.pf-row--head):hover { background: rgba(255, 255, 255, .035); }
.pf-row.is-picked { background: rgba(var(--vio-rgb-8b5cf6), .12); border-color: rgba(var(--vio-rgb-8b5cf6), .35); }
.pf-row--head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-radius: 0; padding-bottom: 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border2); }
/* La pastille d'etat : le signal le plus utile de la liste, savoir d'un coup
   d'oeil quels telephones repondent. */
.pf-dot { width: 9px; height: 9px; border-radius: 50%; justify-self: center; }
.pf-dot--on  { background: var(--green-l); animation: pf-pulse 2s ease-in-out infinite; }
.pf-dot--off { background: rgba(255, 255, 255, .18); }
/* Demon en ligne, WebDriverAgent muet : ni vert ni eteint. */
.pf-dot--warn { background: #f0a63c; box-shadow: 0 0 0 3px rgba(240, 166, 60, .18); }
.pf-row-name { font-weight: 650; color: var(--text);
               display: flex; align-items: center; gap: 10px;
               min-width: 0; overflow: hidden; }
/* Le nom garde sa place : c'est la cause qui se rogne, jamais l'inverse.
   Le plafond etait a 45 % du temps ou les mesures de sante partageaient cette
   case ; elles ont leur ligne desormais, « iPhone X Will » n'a plus de raison
   de s'ecrire « iPhone X … ». */
.pf-row-nom { flex: 0 1 auto; max-width: 78%; }
.pf-row-nom, .pf-row-model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Les mesures de sante — paniques, memoire de launchd — sur une ligne a elles,
   sous l'appareil. Posees a cote du nom, elles le chassaient de l'ecran : la
   colonne fait 160 px, elle ne tient pas deux badges ET un nom. Le retrait de
   gauche les aligne sous le nom plutot que sous les cases a cocher. */
.pf-diag { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 0 3px 44px; }
.pf-diag:empty { display: none; }

/* La cause, a cote du nom : l'orange seul laissait deviner. */
.pf-debranche {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  color: #f0a63c; background: rgba(240, 166, 60, .12);
  border: 1px solid rgba(240, 166, 60, .3);
}
/* Hors ligne : la meme cause, mais elle ne reclame pas l'oeil. */
.pf-debranche--off {
  color: var(--muted); background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
/* Comptes portes / effectif vise. Le total est lisible, la cible en retrait :
   c'est le premier chiffre qu'on vient chercher, le second ne fait que le
   situer. En vert quand l'effectif est atteint — le telephone a fini son
   travail de creation, et ca doit se voir sans soustraire. */
.pf-comptes { white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--text); font-weight: 650; }
.pf-comptes-cible { color: var(--muted); font-weight: 400; }
.pf-comptes--plein { color: var(--green-l); }

.pf-row-dim { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row-code { background: rgba(0, 0, 0, .3); padding: 1px 5px; border-radius: 4px;
  font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row-acts { display: flex; gap: 2px; justify-content: flex-end; }
.pf-row input[type=checkbox] { width: 14px; height: 14px; margin: 0; cursor: pointer;
  accent-color: var(--purple); }
.pf-ico { background: none; border: 0; color: var(--muted); cursor: pointer; font-family: inherit;
  font-size: 13px; line-height: 1; padding: 4px 5px; border-radius: 5px; }
.pf-ico:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: var(--text); }
.pf-ico:disabled { opacity: .3; cursor: not-allowed; }
.pf-ico--danger:hover:not(:disabled) { background: rgba(239, 68, 68, .16); color: #fca5a5; }
/* En pause : visible en permanence, pas seulement au survol — sinon le seul
   signal que l'automatisation est coupee reste le badge de la ligne du bas,
   facile a manquer. */
.pf-ico--on { background: rgba(240, 166, 60, .14); color: #f0a63c; }
.pf-ico--on:hover:not(:disabled) { background: rgba(240, 166, 60, .22); color: #f0a63c; }

/* Barre d'action groupee : n'apparait que quand quelque chose est coche. */
.pf-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px;
  background: rgba(var(--vio-rgb-8b5cf6), .12); border: 1px solid rgba(var(--vio-rgb-8b5cf6), .3);
  border-radius: var(--radius-xs); }
.pf-bulk-n { font-weight: 650; color: var(--text); }

/* Barre d'actions sur le canevas quand plusieurs étapes sont sélectionnées. */
.pf-sel-bar {
  position: absolute; left: 50%; bottom: 16px; z-index: 21;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: calc(100% - 24px); padding: 8px 12px; font-size: 12.5px;
  background: rgba(24, 26, 27, .96); border: 1px solid rgba(88, 166, 255, .35);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pf-sel-bar-n { font-weight: 650; color: var(--text); margin-right: 4px; white-space: nowrap; }

/* Les colonnes tombent une a une quand la place manque, la plus accessoire
   d'abord. Le nom et l'etat ne disparaissent jamais. */
@media (max-width: 1240px) {
  .pf-col-token { display: none; }
  .pf-row { grid-template-columns: 22px 10px minmax(130px, 160px) minmax(92px, 110px) 46px minmax(132px, 1fr) 64px 62px 104px 116px; }
}
@media (max-width: 1080px) {
  .pf-col-agent, .pf-col-comptes { display: none; }
  .pf-row { grid-template-columns: 22px 10px minmax(130px, 160px) minmax(92px, 110px) 46px minmax(132px, 1fr) 104px 116px; }
}
@media (max-width: 900px) {
  .pf-col-model { display: none; }
  .pf-row { grid-template-columns: 22px 10px minmax(130px, 160px) 46px minmax(132px, 1fr) 104px 116px; }
}
/* « Prochaine tâche » survit à « Dernier contact » : savoir dans combien de
   temps le téléphone reprend la main est ce qu'on vient lire ici. */
@media (max-width: 760px) {
  .pf-col-seen { display: none; }
  .pf-row { grid-template-columns: 22px 10px minmax(120px, 1fr) 46px 124px 116px; }
}
@media (max-width: 560px) {
  .pf-col-next { display: none; }
  .pf-row { grid-template-columns: 22px 10px minmax(90px, 1fr) 46px 116px; }
}

.pf-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px 20px;
  color: var(--muted); font-size: 13.5px; line-height: 1.7;
}
.pf-empty-icon { display: block; font-size: 38px; opacity: .45; margin-bottom: 12px; }

/* ─── Tâches ─────────────────────────────────────────────────────────────── */
.pf-tasks-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .pf-tasks-layout { grid-template-columns: 1fr; } }

.pf-task-list { display: flex; flex-direction: column; gap: 7px; }
.pf-task-item {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; text-align: left; transition: border-color .15s, background .15s;
}
.pf-task-item:hover { border-color: var(--border-glow); }
.pf-task-item.is-active { border-color: var(--purple); background: rgba(var(--vio-rgb-8b5cf6), .1); }
.pf-task-item-name { font-size: 13.5px; font-weight: 650; color: var(--text); }
.pf-task-item-meta { font-size: 11.5px; color: var(--muted); }

.pf-editor {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.pf-editor-head { display: flex; gap: 10px; align-items: center; }
.pf-editor-head .pf-input { flex: 1; }
.pf-editor-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; min-height: 220px; padding: 20px;
  background: var(--panel); border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: var(--radius); color: var(--muted); font-size: 13.5px; line-height: 1.7;
}
.pf-editor-empty-icon { font-size: 38px; opacity: .45; }

.pf-steps-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.pf-steps-title { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); flex: 1; }
.pf-add-step { display: flex; gap: 8px; align-items: center; }
.pf-add-step .pf-select { width: auto; min-width: 180px; }

.pf-steps { display: flex; flex-direction: column; gap: 8px; }
.pf-step {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  animation: pf-rise .2s ease backwards;
}
.pf-step-num {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .08); color: var(--text2);
}
.pf-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-step-label { font-size: 13.5px; font-weight: 650; color: var(--text); display: flex; align-items: center; gap: 7px; }
.pf-step-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-step-field { display: flex; flex-direction: column; gap: 3px; min-width: 120px; flex: 1; }
.pf-step-field label { font-size: 11px; color: var(--muted); font-weight: 600; }
.pf-step-field--bool { flex-direction: row; align-items: center; gap: 7px; min-width: 0; }
.pf-step-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.pf-step-actions { display: flex; flex-direction: column; gap: 4px; }
.pf-icon-btn {
  width: 26px; height: 26px; border-radius: 6px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  transition: color .15s, border-color .15s, background .15s;
}
.pf-icon-btn:hover { color: var(--text); border-color: var(--border-glow); }
.pf-icon-btn--del:hover { color: var(--red-l); border-color: rgba(244, 63, 94, .4); background: rgba(244, 63, 94, .1); }

/* ─── Exécutions ─────────────────────────────────────────────────────────── */
.pf-jobs { display: flex; flex-direction: column; gap: 8px; }
.pf-job {
  display: flex; align-items: center; gap: 14px; padding: 12px 15px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--text);
}
.pf-job-main { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.pf-job-name { font-weight: 650; }
/* Le compte concerne, dans le journal : plusieurs comptes partagent un
   iPhone, et « iPhone X Will » ne disait pas lequel publiait. */
.pf-job-compte { color: var(--text); font-weight: 650; }

.pf-job-meta { font-size: 12px; color: var(--muted); }
/* La colonne « Prochaine tâche » occupe tout le vide entre les deux groupes,
   et son contenu se place au MILIEU de ce vide plutôt qu'à son bord gauche :
   collé à « iOS » il faisait bloc avec lui, alors qu'il se lit seul. Le titre
   et la valeur portent la même classe, donc ils restent l'un sur l'autre. */
.pf-col-next { justify-self: center; }

/* Dans combien de temps le téléphone reprend la main tout seul. La question
   qu'on se pose en le prenant : « est-ce que j'ai le temps de m'en servir ? ».
   Après « iOS » et pas en bout de ligne : c'est ce qu'on vient lire, et le
   nom garde la place de s'afficher en entier. */
.pf-next { font-size: 11.5px; font-weight: 650; white-space: nowrap; cursor: help;
  color: var(--text2); }
.pf-next--proche { color: var(--yellow-l); }
.pf-next--now    { color: var(--green-l); }
.pf-next--libre  { color: var(--muted); font-weight: 500; }

/* L'écran noir mesuré sur le téléphone. Gris plutôt que rouge : ce n'est pas
   une panne déclarée, c'est une observation en attente d'explication. */
.pf-noir { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  font-weight: 650; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--text2); background: rgba(148, 163, 184, .14);
  border: 1px solid rgba(148, 163, 184, .3); cursor: help; }
/* Une panique n'est pas une mesure parmi d'autres : c'est le parc qui tombe. */
.pf-noir--chaud { color: #fbbf24; background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .3); }
/* Ce qui est deja casse, ou le sera avant demain. */
.pf-noir--ko { color: #f87171; background: rgba(248, 113, 113, .12);
  border-color: rgba(248, 113, 113, .35); }

/* Une exécution repartie toute seule après un silence du téléphone. Se
   remarque sans crier : ce n'est pas une erreur, c'est un rattrapage. */
.pf-job-reprise { color: var(--yellow-l); font-weight: 650; }
.pf-job-status { font-size: 11.5px; font-weight: 750; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pf-job-status--queued    { background: rgba(245, 158, 11, .14); color: var(--yellow-l); }
.pf-job-status--running   { background: rgba(59, 130, 246, .14); color: var(--blue); }
.pf-job-status--done      { background: rgba(16, 185, 129, .14); color: var(--green-l); }
.pf-job-status--error     { background: rgba(244, 63, 94, .14); color: var(--red-l); }
.pf-job-status--cancelled { background: rgba(74, 72, 114, .25); color: var(--muted); }
/* Un compte arrêté par Instagram. Plus rouge et plus plein qu'un simple échec :
   ce n'est pas une étape à corriger, c'est un compte à débloquer à la main. */
.pf-job-status--ban { background: rgba(220, 38, 38, .30); color: #fecaca;
  border: 1px solid rgba(248, 113, 113, .55); cursor: help; }
/* Un numéro sans SMS, un tunnel tombé : le fournisseur ou le réseau ont
   défailli, pas la tâche. Délibérément PAS rouge — le rouge dit « à corriger
   ici », alors que rien dans la tâche n'explique ce résultat. */
.pf-job-status--externe { background: rgba(59, 130, 246, .14); color: var(--blue);
  border: 1px solid rgba(59, 130, 246, .35); cursor: help; }
/* Un échec qu'une relance automatique a déjà repris juste après (7 septembre) :
   volontairement PAS rouge, pour ne pas lire comme la fin de l'histoire alors
   que la tentative suivante est peut-être déjà la bonne. */
.pf-job-status--relance { background: rgba(245, 158, 11, .14); color: var(--yellow-l);
  border: 1px solid rgba(245, 158, 11, .35); cursor: help; }

/* ─── Plan et installation ───────────────────────────────────────────────── */
.pf-plan { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.pf-plan-step { display: flex; gap: 14px; align-items: flex-start; }
.pf-plan-num {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  background: rgba(255, 255, 255, .07); color: var(--muted); border: 1px solid var(--border);
}
.pf-plan-step--done .pf-plan-num { background: rgba(16, 185, 129, .16); color: var(--green-l); border-color: rgba(16, 185, 129, .3); }
.pf-plan-step strong { font-size: 14px; color: var(--text); }
.pf-plan-step p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 3px 0 0; }
.pf-plan-step code, .pf-setup-card code {
  background: rgba(0, 0, 0, .32); padding: 1px 6px; border-radius: 4px; font-size: 12px;
}

.pf-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pf-setup-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.pf-setup-num {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: rgba(88, 166, 255, .16); color: #79c0ff;
}
.pf-setup-card strong { font-size: 13.5px; color: var(--text); }
.pf-setup-card p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Page autonome : pas de bouton hamburger, on reprend la place que
     style.css lui réserve en haut de .main. */
  .layout--pf .main { padding: 20px 14px 26px !important; }
  .pf-panel { padding: 18px 15px; }
  .pf-stat { flex-basis: calc(50% - 6px); min-width: 0; }
  .pf-devices { grid-template-columns: 1fr; }
  .pf-panel-head > .pf-btn { width: 100%; justify-content: center; }
  .pf-step-fields { flex-direction: column; }
  .pf-add-step { width: 100%; }
  .pf-add-step .pf-select { flex: 1; min-width: 0; }
}
@media (hover: none) { .pf-icon-btn { width: 32px; height: 32px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTOMATISATION — grille de tâches, puis canevas

   Le canevas n'est pas un luxe : avec des conditions et des boucles, une
   liste ne peut plus dire ce qui suit un nœud à deux sorties. Et surtout, il
   sert à RELIRE une tâche existante — voir d'un coup d'œil ce qu'elle fait.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Grille de tâches ───────────────────────────────────────────────────── */
.pf-head-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pf-input--search { width: 220px; }

.pf-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.pf-task-card {
  display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; text-align: left; min-height: 132px;
  transition: border-color .16s, transform .16s, box-shadow .16s;
  animation: pf-rise .25s ease backwards;
}
.pf-task-card:hover { border-color: var(--border-glow); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.pf-task-card:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.pf-task-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.pf-task-card-desc { font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.pf-task-card-meta { margin-top: auto; font-size: 11.5px; color: var(--muted); line-height: 1.7; }

/* ─── Menu de création ───────────────────────────────────────────────────── */
.pf-menu-wrap { position: relative; }
.pf-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 290px;
  padding: 6px; border-radius: var(--radius);
  background: #171533; border: 1px solid var(--border2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .62); animation: pf-rise .16s ease;
}
.pf-menu-item {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 11px 12px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text2); text-align: left; font-family: inherit;
  transition: background .15s, color .15s;
}
.pf-menu-item:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.pf-menu-icon { font-size: 16px; flex: 0 0 auto; line-height: 1.3; }
.pf-menu-item strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--text); }
.pf-menu-item em { display: block; font-size: 11.5px; font-style: normal; color: var(--muted); margin-top: 2px; }

/* ─── Fil d'ariane ───────────────────────────────────────────────────────── */
.pf-crumb { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 13.5px; }
.pf-crumb-back {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text2); font-family: inherit; font-size: 13.5px; font-weight: 600;
}
.pf-crumb-back:hover { color: var(--purple-l); }
.pf-crumb-sep { color: var(--muted); }
.pf-crumb-current { font-weight: 700; color: var(--text); }

/* ─── Disposition du canevas ─────────────────────────────────────────────── */
.pf-canvas-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 14px; align-items: start; }
/* Catalogue replie : toute la largeur au canevas (l'inspecteur reste une 3e colonne). */
.pf-canvas-layout.catalog-collapsed { grid-template-columns: minmax(0, 1fr); }
.pf-catalog-col { min-width: 0; }
.pf-canvas-layout.catalog-collapsed .pf-catalog-col { display: none; }
/* Le panneau de reglages n'occupe une colonne que lorsqu'il est ouvert :
   sinon le canevas perdrait 310 px en permanence pour rien. */
.pf-canvas-layout.has-inspector { grid-template-columns: 252px minmax(0, 1fr) 310px; }
.pf-canvas-layout.catalog-collapsed.has-inspector { grid-template-columns: minmax(0, 1fr) 310px; }
@media (max-width: 1400px) {
  .pf-canvas-layout.has-inspector { grid-template-columns: 252px minmax(0, 1fr) 280px; }
  .pf-canvas-layout.catalog-collapsed.has-inspector { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 1000px) { .pf-canvas-layout { grid-template-columns: 1fr; } }

/* ─── Catalogue ──────────────────────────────────────────────────────────── */
.pf-catalog {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  max-height: 74vh;
}
.pf-catalog-head { display: flex; flex-direction: column; gap: 8px; }
.pf-catalog-list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 3px; }

.pf-cat-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 6px 6px; border: none; background: none; cursor: pointer;
  color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; text-align: left;
}
.pf-cat-head:hover { color: var(--purple-l); }
.pf-cat-caret { margin-left: auto; color: var(--muted); font-size: 11px; transition: transform .18s; }
.pf-cat-head.is-closed .pf-cat-caret { transform: rotate(-90deg); }

/* Conteneur des étapes d'une catégorie — se masque quand on la replie. */
.pf-cat-body { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; }

.pf-cat-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border);
  color: var(--text2); font-family: inherit; font-size: 12.5px; font-weight: 600; text-align: left;
  transition: border-color .15s, color .15s, background .15s;
}
.pf-cat-item:hover { border-color: var(--border-glow); color: var(--text); background: rgba(255, 255, 255, .06); }
.pf-cat-item-icon {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: rgba(255, 255, 255, .06);
}
.pf-cat-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-cat-item-add { flex: 0 0 auto; color: var(--muted); font-size: 14px; }
.pf-cat-item:hover .pf-cat-item-add { color: var(--purple-l); }

/* ─── Canevas ────────────────────────────────────────────────────────────── */
.pf-canvas-wrap { position: relative; }

.pf-palette-toggle {
  position: absolute; left: 0; top: 50%; z-index: 22;
  transform: translate(-50%, -50%);
  width: 22px; height: 52px; padding: 0;
  border: 1px solid var(--border2); border-radius: 0 10px 10px 0;
  background: #1e2021; color: var(--text2); cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color .14s, border-color .14s, background .14s;
}
.pf-palette-toggle:hover { color: var(--text); border-color: var(--border-glow); background: rgba(22, 18, 48, .98); }
.pf-canvas-layout.catalog-collapsed .pf-palette-toggle {
  transform: translate(0, -50%);
  border-radius: 0 10px 10px 0;
}

.pf-toolbar {
  position: absolute; top: 12px; right: 12px; z-index: 20;
  display: flex; align-items: center; gap: 3px; padding: 5px;
  background: #1e2021; border: 1px solid var(--border2);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pf-tool {
  min-width: 30px; height: 30px; padding: 0 7px; border: none; border-radius: 8px;
  background: transparent; color: var(--text2); cursor: pointer;
  font-size: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
.pf-tool::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.pf-tool[data-tool="info"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><path d='M12 11v6M12 8h.01' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-tool[data-tool="select"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 4l6 16 2-6 6-2z' fill='black'/></svg>"); }
.pf-tool[data-tool="pan"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v18M3 12h18M12 3l-3 3M12 3l3 3M12 21l-3-3M12 21l3-3M3 12l3-3M3 12l3 3M21 12l-3-3M21 12l-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-tool[data-tool="find"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='11' cy='11' r='6' fill='none' stroke='black' stroke-width='2'/><path d='m16 16 4 4' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-tool[data-tool="zoom-out"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12h12' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-tool[data-tool="zoom-in"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 6v12M6 12h12' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-tool[data-tool="fit"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-tool[data-tool="tidy"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16M4 12h16M4 18h16' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-tool[data-tool="region"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='16' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/></svg>"); }
.pf-tool[data-tool="export"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4v10M8 8l4-4 4 4M5 20h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.pf-tool[data-tool="import"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 16V6M8 12l4 4 4-4M5 20h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.pf-tool[data-tool="debug"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l12-7z' fill='black'/></svg>"); }
.pf-tool[data-tool="outline"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-tool[data-tool="save"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 4h11l3 3v13H5zM8 4v5h7M8 20v-6h8v6' fill='none' stroke='black' stroke-width='2'/></svg>"); }
.pf-tool:hover { background: rgba(255, 255, 255, .09); color: var(--text); }
.pf-tool.is-active { background: rgba(255, 255, 255, .14); color: var(--text); }
.pf-tool--save { background: #316dca; color: #fff; }
.pf-tool--save:hover { background: #388bfd; opacity: 1; color: #fff; }
.pf-tool-sep { width: 1px; height: 18px; background: var(--border2); margin: 0 3px; }
.pf-zoom { font-size: 12px; font-weight: 650; color: var(--text2); min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }

.pf-canvas {
  position: relative; height: 74vh; min-height: 460px; overflow: hidden;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    rgba(0, 0, 0, .22);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: default;
}
.pf-canvas.is-pan-mode { cursor: grab; }
.pf-canvas.is-pan-mode.is-panning { cursor: grabbing; }
.pf-tool[data-tool="select"].is-active,
.pf-tool[data-tool="pan"].is-active { box-shadow: inset 0 0 0 1px rgba(var(--vio-rgb-8b5cf6), .45); }
.pf-marquee {
  position: absolute; z-index: 6; pointer-events: none;
  border: 1px solid var(--purple-l);
  background: rgba(var(--vio-rgb-8b5cf6), .14);
  border-radius: 2px;
}
.pf-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* Seuls les liens reprennent la souris : le reste du calque doit rester
   traversant, sinon on ne pourrait plus deplacer le plan. */
.pf-link { pointer-events: none; }
.pf-link-hit { pointer-events: stroke; }
.pf-link-line-bg { pointer-events: none; }
.pf-link-line { pointer-events: none; transition: stroke .12s, filter .12s; }
.pf-link-arrow { pointer-events: none; transition: fill .12s, filter .12s; }
.pf-link:hover .pf-link-line { filter: brightness(1.18); }
.pf-link:hover .pf-link-line-bg { filter: brightness(1.08); }
.pf-link:hover .pf-link-arrow { filter: brightness(1.18); }
.pf-link[data-port="echec"]:hover .pf-link-line { stroke: rgba(252, 165, 165, .98); }
.pf-link[data-port="true"]:hover .pf-link-line { stroke: rgba(134, 239, 172, .98); }
.pf-link[data-port="false"]:hover .pf-link-line { stroke: rgba(253, 186, 116, .98); }
.pf-link[data-port="loop"]:hover .pf-link-line { stroke: rgba(147, 197, 253, .98); }
/* La croix n'apparait qu'au survol du lien : une par lien en permanence
   surchargerait un canevas de cinquante etapes. */
.pf-link-cut { opacity: 0; pointer-events: none; transition: opacity .12s; }
.pf-link:hover .pf-link-cut { opacity: 1; pointer-events: all; cursor: pointer; }
.pf-link-cut circle { fill: #1a1626; stroke: rgba(var(--vio-rgb-a78bfa), .8); stroke-width: 1.5; }
.pf-link-cut path { stroke: var(--purple-l); stroke-linecap: round; fill: none; }
.pf-link-cut:hover circle { fill: rgba(239, 68, 68, .22); stroke: #f87171; }
.pf-link-cut:hover path { stroke: #fca5a5; }
.pf-regions {
  position: absolute; inset: 0; transform-origin: 0 0;
  pointer-events: none; z-index: 0;
}
.pf-region {
  position: absolute; box-sizing: border-box;
  --pf-region-accent-rgb: 129, 140, 248;
  border: 2px dashed rgba(var(--pf-region-accent-rgb), .55);
  border-radius: 12px;
  background: rgba(var(--pf-region-accent-rgb), .14);
  box-shadow: inset 0 0 0 1px rgba(var(--pf-region-accent-rgb), .22);
  pointer-events: auto;
}
.pf-region.is-collapsed {
  min-height: 66px;
  background: rgba(var(--pf-region-accent-rgb), .2);
}
.pf-region-head {
  display: flex; align-items: center; gap: 8px;
  margin: -1px 6px 0; padding: 10px 12px 10px 14px;
  min-height: 64px;
  transform: translateY(-50%);
  border-radius: 13px; font-size: 16px; font-weight: 700;
  cursor: grab; user-select: none;
  background: rgba(var(--pf-region-accent-rgb), .28);
  border: 1px solid rgba(var(--pf-region-accent-rgb), .5);
  border-left: 6px solid var(--pf-region-accent, var(--purple-l));
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .42);
}
.pf-region-head:active { cursor: grabbing; }
.pf-region-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-size: 19px; font-weight: 700; padding-right: 10px;
}
.pf-region-toggle, .pf-region-fit, .pf-region-addsel, .pf-region-color, .pf-region-del {
  flex: 0 0 auto;
  min-width: 52px; min-height: 52px;
  padding: 0 10px; border: none; border-radius: 11px;
  background: rgba(0, 0, 0, .14); color: var(--text);
  cursor: pointer;
  font-family: inherit; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
.pf-region-toggle:hover, .pf-region-fit:hover, .pf-region-addsel:hover,
.pf-region-color:hover, .pf-region-del:hover {
  background: rgba(255, 255, 255, .09); color: var(--text);
}
.pf-region-del:hover { color: #fca5a5; background: rgba(239, 68, 68, .12); }
.pf-region-collapsed {
  display: flex; align-items: center; justify-content: center;
  height: calc(100% - 8px); margin-top: 6px;
  font-size: 16px; color: var(--text2); text-align: center; padding: 0 16px;
  cursor: pointer;
}
.pf-region-resize {
  position: absolute; right: 2px; bottom: 2px; z-index: 3;
  width: 22px; height: 22px; cursor: nwse-resize;
  border-radius: 4px;
  background: linear-gradient(135deg, transparent 50%, rgba(var(--pf-region-accent-rgb), .75) 50%);
  opacity: .85;
}
.pf-region-resize:hover { opacity: 1; }
.pf-region:not(.is-collapsed) .pf-region-resize { pointer-events: auto; }
.pf-region.is-collapsed .pf-region-resize { display: none; }
.pf-region-head, .pf-region-collapsed {
  position: relative; z-index: 3;
}
/* Bords déplaçables sous les cartes ; titre / poignée au-dessus des bandes */
.pf-region-handles {
  position: absolute; inset: 0; transform-origin: 0 0; z-index: 1;
  pointer-events: none;
}
.pf-region-edge {
  position: absolute; pointer-events: auto; z-index: 1;
  background: transparent;
}
.pf-region-edge--n, .pf-region-edge--s { cursor: move; }
.pf-region-edge--w, .pf-region-edge--e { cursor: move; }
.pf-region-edge--n { height: 14px; }
.pf-region-edge--s { height: 14px; }
.pf-region-edge--w { width: 14px; }
.pf-region-edge--e { width: 14px; }
.pf-region-edge:hover { background: rgba(var(--vio-rgb-a78bfa), .12); }
.pf-nodes { position: absolute; inset: 0; transform-origin: 0 0; z-index: 2;
  /* Traversante : cette couche recouvre entierement celle des liens et captait
     la souris jusque dans ses zones vides, si bien qu'un lien n'etait jamais
     survole. Seules les cartes reprennent le pointeur. */
  pointer-events: none; }

/* ─── Nœuds ──────────────────────────────────────────────────────────────── */
.pf-node { pointer-events: auto;
  position: absolute; width: 214px; padding: 10px 12px;
  box-sizing: border-box; min-height: 92px;
  background: #171533; border: 1px solid var(--border2); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  font-size: 11.5px; cursor: grab; user-select: none;
  border-left: 3px solid var(--pf-accent, var(--purple));
}
.pf-node:active { cursor: grabbing; }
.pf-node.is-selected { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(var(--vio-rgb-8b5cf6), .35), 0 6px 18px rgba(0, 0, 0, .45); }
.pf-node.is-selected.is-primary { box-shadow: 0 0 0 2px rgba(var(--vio-rgb-8b5cf6), .55), 0 6px 18px rgba(0, 0, 0, .45); }
.pf-node--start { border-left-color: var(--green-l); }

.pf-node-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.pf-node-icon { font-size: 12px; flex: 0 0 auto; }
.pf-node-title { font-size: 12.5px; font-weight: 700; color: var(--text); flex: 1; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-node-params { display: flex; flex-direction: column; gap: 2px; }
.pf-node-param { display: flex; gap: 6px; line-height: 1.45; }
.pf-node-param-key { color: var(--muted); flex: 0 0 auto; }
.pf-node-param-val { color: var(--text2); font-weight: 650; min-width: 0;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-node-more { color: var(--muted); font-size: 10.5px; margin-top: 3px; }

.pf-port {
  position: absolute; right: -6px; width: 11px; height: 11px; border-radius: 50%;
  background: #171533; border: 2px solid var(--pf-accent, var(--purple));
}
.pf-port--in {
  right: auto; left: -6px; pointer-events: none;
  border-color: rgba(var(--vio-rgb-a78bfa), .55);
}
.pf-port-label {
  position: absolute; right: -6px; transform: translateX(100%);
  font-size: 9.5px; font-weight: 700; color: var(--muted); padding-left: 6px; white-space: nowrap;
}

/* ─── Minicarte ──────────────────────────────────────────────────────────── */
.pf-minimap {
  position: absolute; right: 12px; bottom: 12px; z-index: 15;
  width: 168px; height: 104px; overflow: hidden;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--border2); border-radius: 8px;
}
#pf-minimap-inner { position: absolute; inset: 0; }
.pf-mini-node { position: absolute; background: rgba(var(--vio-rgb-a78bfa), .6); border-radius: 1px; }

@media (max-width: 768px) {
  .pf-input--search { width: 100%; }
  .pf-head-tools { width: 100%; }
  .pf-menu-wrap { flex: 1; }
  .pf-menu-wrap > .pf-btn { width: 100%; justify-content: center; }
  .pf-canvas { height: 60vh; }
  .pf-minimap { display: none; }
}

/* ─── Panneau de réglages du nœud ────────────────────────────────────────────
   Le canevas ne permettait de modifier aucun paramètre : on posait des étapes
   qui gardaient leurs valeurs d'usine. Ce panneau est la pièce qui manquait. */
.pf-inspector {
  overflow-y: auto; max-height: 74vh;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px; display: flex;
  flex-direction: column; gap: 11px; max-height: 100%;
}
.pf-insp-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pf-insp-head b { flex: 1; min-width: 0; }
.pf-insp-icon { font-size: 15px; }
.pf-insp-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; }
.pf-insp-x:hover { color: var(--text); }
.pf-insp-hint { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 0; }
.pf-insp-sep { height: 1px; background: var(--border); }

.pf-insp-f { display: flex; flex-direction: column; gap: 5px; }
.pf-insp-f > label { font-size: 11.5px; font-weight: 650; color: var(--text2); }
.pf-insp-f input, .pf-insp-f select, .pf-insp-f textarea {
  padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border2);
  background: var(--bg2); color: var(--text); font-size: 12.5px; font-family: inherit;
  outline: 0; width: 100%;
}
.pf-insp-f input:focus, .pf-insp-f select:focus, .pf-insp-f textarea:focus { border-color: var(--border-glow); }

.pf-insp-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.pf-insp-check input { accent-color: var(--purple); }
.pf-insp-disable { padding: 7px 9px; border-radius: var(--radius-sm); background: var(--card2); }

/* Constructeur de sélecteur */
.pf-sel { padding: 10px; border-radius: var(--radius-sm); background: var(--card2); border: 1px solid var(--border); }
.pf-sel-match { display: flex; gap: 5px; margin-bottom: 8px; }
.pf-sel-mb { flex: 1; padding: 5px; border-radius: var(--radius-xs); border: 1px solid var(--border2);
  background: transparent; color: var(--text2); font-size: 11px; font-family: inherit; cursor: pointer; }
.pf-sel-mb.is-on { background: rgba(var(--vio-rgb-8b5cf6),.16); border-color: var(--purple); color: var(--purple-l); }
.pf-sel-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 5px; margin-bottom: 6px; align-items: center; }
.pf-sel-row select, .pf-sel-row input {
  padding: 6px 7px; border-radius: var(--radius-xs); border: 1px solid var(--border2);
  background: var(--bg2); color: var(--text); font-size: 11.5px; font-family: inherit; outline: 0; min-width: 0;
}
.pf-sel-row input[data-sc="value"] { grid-column: 1 / -1; }
.pf-sel-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.pf-sel-del:hover { color: var(--red-l); }
/* Description du nom d'accessibilité catalogué reconnu dans le champ juste
   au-dessus (voir CATALOGUE_ELEMENTS) -- masquée par defaut, remplie en JS. */
.pf-sel-desc { font-size: 10.5px; color: var(--purple-l); line-height: 1.4;
  margin: -3px 0 6px; padding: 0 2px; }
/* La taille vit hors des conditions : elle s'ajoute toujours, en ET. */
/* Un fichier = son nom, ce qu'il fait, puis son adresse. */
.pf-url-bloc { margin: 10px 0 14px; }
.pf-url-nom code { font-size: 12.5px; color: var(--text); font-weight: 600; }
.pf-url-quoi { margin: 3px 0 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pf-url-quoi code { font-size: 11.5px; }

.pf-sel-taille { display: flex; align-items: center; gap: 8px; margin-top: 8px;
                 font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.pf-sel-taille label { display: inline-flex; align-items: center; gap: 5px; }
.pf-sel-taille input { width: 62px; padding: 5px 7px; border-radius: var(--radius-xs);
                       border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
                       font-size: 12px; }

.pf-sel-add { width: 100%; padding: 6px; margin-top: 2px; border-radius: var(--radius-xs);
  border: 1px dashed var(--border2); background: none; color: var(--text2);
  font-size: 11.5px; font-family: inherit; cursor: pointer; }
.pf-sel-add:hover { border-color: var(--purple); color: var(--purple-l); }

/* Nœud désactivé et note */
.pf-node.is-disabled { opacity: .45; }
.pf-node.is-disabled .pf-node-title { text-decoration: line-through; }
.pf-node-off { color: var(--red-l); font-size: 13px; }
.pf-node-note { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
  font-size: 10.5px; color: var(--muted); }

/* ─── Clés d'accès (écran Installation) ──────────────────────────────────── */
.pf-keys { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 17px; margin-bottom: 20px; }
.pf-keys-head { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.pf-key { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.pf-key-t { flex: 0 0 100%; font-size: 12.5px; font-weight: 650; }
.pf-key-t small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.pf-key-v { flex: 1; min-width: 200px; padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--bg2); border: 1px solid var(--border2); font-size: 11.5px;
  color: var(--text2); overflow-x: auto; white-space: nowrap; user-select: all; }
.pf-key-hint { font-size: 11.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.pf-key-hint code { background: var(--card2); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.pf-urls { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.pf-url-row { display: flex; align-items: center; gap: 8px; }
.pf-url-row .pf-key-v { font-size: 10.5px; }

/* ─── Vue en direct de l'écran ───────────────────────────────────────────── */
.pf-live { position: fixed; inset: 0; z-index: 960; background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(5px); }
.pf-live-box { background: var(--panel); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 14px; width: 100%;
  /* La largeur suit le nombre d'ecrans affiches ; la hauteur reste bornee par
     la fenetre, la grille defile au-dela. */
  max-width: min(94vw, calc(var(--cols, 1) * (var(--pane, 300px) + 10px) + 28px));
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.pf-live-head { flex: 0 0 auto; display: grid; gap: 2px 10px; align-items: center;
  grid-template-columns: 1fr auto; font-size: 14px; font-weight: 700; }
.pf-live-state { grid-column: 1 / -1; font-size: 11px; font-weight: 500; color: var(--muted);
  line-height: 1.4; }
.pf-live-x { grid-row: 1; grid-column: 2; }
.pf-live-x { background: none; border: 0; color: var(--muted); font-size: 17px; cursor: pointer; }
.pf-live-x:hover { color: var(--text); }
.pf-live-grid { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; gap: 10px;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); align-content: start; }
.pf-pane { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-pane-screen { background: #000; border-radius: 12px; overflow: hidden;
  /* Hauteur franche, calculee en JS depuis la hauteur de fenetre ET le nombre
     de rangees : sans image, une zone dictee par son contenu retombait a rien
     et la fenetre se tassait ; calculee sur une seule rangee, la seconde
     sortait du cadre. */
  height: var(--paneh, 400px);
  display: flex; align-items: center; justify-content: center; }
.pf-pane-screen img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Tant qu'aucune image n'est arrivee, l'element reste vide : sinon le
   navigateur affiche son texte de remplacement et une icone d'image cassee,
   ce qui donne l'air en panne d'un ecran qui ne fait qu'attendre. */
.pf-pane-screen img:not([src]) { display: none; }
.pf-pane-foot { display: flex; justify-content: space-between; align-items: baseline;
  gap: 6px; font-size: 10.5px; min-width: 0; }
.pf-pane-name { font-weight: 650; color: var(--text2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pf-pane-state { color: var(--muted); white-space: nowrap; }
.pf-pane-state.is-warn { color: #fbbf24; }
.pf-live-hint { flex: 0 0 auto; font-size: 11px; color: var(--muted); margin: 0; line-height: 1.5; }
.pf-live-fps { flex: 0 0 auto; display: flex; gap: 4px; }
.pf-live-fps button { flex: 1; padding: 5px; border-radius: var(--radius-xs);
  border: 1px solid var(--border2); background: transparent; color: var(--text2);
  font-size: 11px; font-family: inherit; cursor: pointer; }
.pf-live-fps button.is-on { background: rgba(var(--vio-rgb-8b5cf6),.16); border-color: var(--purple); color: var(--purple-l); }

/* ── Réglages fins des étapes ────────────────────────────────────────────────
   Valeur fixe ou intervalle, listes de contenus, probabilité. Ce sont les
   commandes les plus manipulées de l'éditeur : elles doivent se régler vite. */
.pf-rng-modes { display: flex; gap: 3px; margin-bottom: 6px; }
.pf-rng-modes button { flex: 1; padding: 4px 6px; font-size: 11px; font-family: inherit;
  cursor: pointer; color: var(--text2); background: transparent;
  border: 1px solid var(--border2); border-radius: var(--radius-xs); }
.pf-rng-modes button.is-on { background: rgba(var(--vio-rgb-8b5cf6), .16);
  border-color: var(--purple); color: var(--purple-l); }
.pf-rng-row { display: flex; align-items: center; gap: 6px; }
.pf-rng-row input { min-width: 0; flex: 1; }
.pf-rng-sep, .pf-rng-u { flex: 0 0 auto; font-size: 11px; color: var(--muted); }

.pf-lst textarea { font-size: 12px; line-height: 1.5; resize: vertical; }
.pf-lst-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 5px; font-size: 11px; color: var(--muted); }
.pf-lst-foot > span { flex: 0 0 auto; white-space: nowrap; }
/* La liste deroulante prend une largeur propre qui debordait du panneau : elle
   doit pouvoir retrecir. */
.pf-lst-foot select { flex: 0 1 auto; min-width: 0; max-width: 60%;
  font-size: 11px; padding: 3px 6px; }

.pf-pct-row { display: flex; align-items: center; gap: 8px; }
.pf-pct-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--purple); }
.pf-pct-row input[type=number] { flex: 0 0 62px; }

/* ── Paramètres de la tâche ──────────────────────────────────────────────── */
.pf-params { border: 1px solid var(--border2); border-radius: var(--radius-xs);
  padding: 8px 9px; margin-bottom: 10px; }
.pf-params-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); }
.pf-params-add { background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 3px; font-family: inherit; }
.pf-params-add:hover { color: var(--purple-l); }
.pf-params-list { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.pf-params-list:empty::after { content: "Aucun — la tâche ne demandera rien au lancement.";
  font-size: 11px; color: var(--muted); line-height: 1.4; }
.pf-param { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  padding: 3px 5px; border-radius: 5px; background: rgba(255, 255, 255, .03); }
.pf-param code { flex: 0 0 auto; font-size: 10.5px; color: var(--purple-l);
  background: rgba(var(--vio-rgb-8b5cf6), .12); padding: 1px 5px; border-radius: 4px; }
.pf-param span { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.pf-param button { background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 11px; padding: 2px 3px; border-radius: 4px; font-family: inherit; }
.pf-param button:hover { color: var(--text); background: rgba(255, 255, 255, .08); }

/* Identifiant de la tâche, sur sa carte. C'est par lui qu'on la désigne depuis
   l'extérieur : il doit se lire et se copier sans ouvrir la tâche. */
.pf-task-card-id { display: flex; flex-direction: column; gap: 3px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border2); font-size: 10.5px; color: var(--muted); }
.pf-task-card-id code { align-self: flex-start; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; cursor: copy;
  font-size: 10.5px; color: var(--purple-l); background: rgba(var(--vio-rgb-8b5cf6), .12);
  padding: 2px 6px; border-radius: 4px; }
.pf-task-card-id code:hover { background: rgba(var(--vio-rgb-8b5cf6), .24); color: #fff; }

/* Arrêter une exécution en cours, et rejouer une exécution terminée. */
.pf-job-stop { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--radius-xs);
  font-size: 11.5px; font-family: inherit; cursor: pointer;
  color: #f85149; background: rgba(248, 81, 73, .14); border: 1px solid rgba(248, 81, 73, .5);
  display: inline-flex; align-items: center; gap: 6px; }
.pf-job-stop::before {
  content: ""; width: 10px; height: 10px; background: currentColor; border-radius: 2px;
}
.pf-job-stop:hover { background: rgba(248, 81, 73, .28); color: #fff; }
.pf-job-again { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--radius-xs);
  font-size: 11.5px; font-family: inherit; cursor: pointer;
  color: #3fb950; background: rgba(63, 185, 80, .12);
  border: 1px solid rgba(63, 185, 80, .4); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; }
.pf-job-again::before {
  content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 12a8 8 0 1 1-2.2-5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/><path d='M20 4v5h-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 12a8 8 0 1 1-2.2-5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/><path d='M20 4v5h-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.pf-job-again:hover { background: rgba(63, 185, 80, .26); color: #fff; }

.pf-job-shots { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-xs);
  font-size: 0; font-family: inherit; cursor: pointer; color: #58a6ff;
  background: rgba(88, 166, 255, .1); border: 1px solid rgba(88, 166, 255, .4);
  display: inline-flex; align-items: center; justify-content: center; }
.pf-job-shots::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.pf-job-shots[data-job-log] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 3h8l4 4v14H7z' fill='none' stroke='black' stroke-width='2'/><path d='M15 3v5h5M10 12h6M10 16h6' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-job-shots[data-job-shots] {
  color: #3fb950; background: rgba(63, 185, 80, .1); border-color: rgba(63, 185, 80, .4);
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 8h3l2-2h6l2 2h3v11H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><circle cx='12' cy='13' r='3' fill='none' stroke='black' stroke-width='2'/></svg>");
}
.pf-job-shots:hover { filter: brightness(1.2); }

/* Détail d'une exécution : on vient y lire beaucoup de texte, la fenêtre est
   donc large et le texte sélectionnable. */
.pf-log-box { max-width: min(94vw, 860px); height: min(calc(100vh - 40px), 720px); }
.pf-log { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0;
  padding: 10px 12px; border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, .35); border: 1px solid var(--border2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.65; color: var(--text2);
  white-space: pre-wrap; word-break: break-word; user-select: text; }
.pf-log-err { flex: 0 0 auto; padding: 8px 11px; border-radius: var(--radius-xs);
  background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .4);
  color: #fca5a5; font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; user-select: text; }

.pf-panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Barre d'actions au survol d'une étape ────────────────────────────────────
   Dans la carte, posée au-dessus : le survol ne se perd pas en montant vers
   elle. Cachée au repos — une barre par étape en permanence rendrait un grand
   canevas illisible. */
.pf-node-bar {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 4px; margin-bottom: 6px;
  background: var(--panel); border: 1px solid var(--border2);
  border-radius: var(--radius-xs); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5;
}
.pf-node:hover .pf-node-bar { opacity: 1; pointer-events: auto; }
/* Une petite passerelle invisible sous la barre : sans elle, le trajet de la
   souris entre la carte et la barre passe par le vide et le survol retombe. */
.pf-node-bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
}
.pf-node-bar button {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 12px; line-height: 1; padding: 5px 6px; border-radius: 5px;
  color: var(--muted);
}
.pf-node-bar button:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
.pf-node-bar button[data-nd-act="del"]:hover { background: rgba(239, 68, 68, .2); color: #fca5a5; }

/* ─── Page d'installation ─────────────────────────────────────────────────────
   Refaite pour qu'une personne qui decouvre le site sache quoi faire sans avoir
   a demander : un but annonce, un choix de systeme, puis des etapes numerotees
   qui ne montrent que ce qui la concerne. */
.pf-goal { padding: 12px 15px; margin-bottom: 22px; font-size: 13.5px; line-height: 1.65;
  color: var(--text2); background: rgba(var(--vio-rgb-8b5cf6), .09);
  border: 1px solid rgba(var(--vio-rgb-8b5cf6), .28); border-radius: var(--radius-sm); }
.pf-goal b { color: var(--text); }

.pf-step-title { display: flex; align-items: center; gap: 10px;
  margin: 26px 0 6px; font-size: 15px; font-weight: 700; color: var(--text); }
.pf-step-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: var(--purple); color: #fff; }
.pf-step-sub { margin: 0 0 12px 34px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* Choix du systeme : deux grandes cibles, pas une liste deroulante. */
.pf-os { display: flex; gap: 10px; margin: 0 0 16px 34px; flex-wrap: wrap; }
.pf-os-btn { display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 650; color: var(--text2);
  background: transparent; border: 1px solid var(--border2); }
.pf-os-btn:hover { border-color: var(--purple); color: var(--text); }
.pf-os-btn.is-on { background: rgba(var(--vio-rgb-8b5cf6), .16);
  border-color: var(--purple); color: var(--purple-l); }
.pf-os-body { margin-left: 34px; }
/* Les onglets du jailbreak portent deux lignes : le nom et sa portee. Sans la
   portee, on choisit au hasard — et les deux parcours ne pardonnent pas. */
.pf-jb-btn { align-items: flex-start; text-align: left; line-height: 1.45; }
/* Le viseur : un bouton pleine largeur, en tete des reglages. Personne ne
   peut deviner « 92,18 % de la largeur » — la saisie a la main n'a pas a
   exister. */
.pf-insp-viser { width: 100%; justify-content: center; margin: 4px 0 2px; }
.pf-jb-btn small { color: var(--muted); font-size: 11px; font-weight: 500; }
/* Une etape qu'on ne peut pas sauter sans que tout casse plus loin. */
.pf-todo--warn { border-left: 2px solid rgba(245, 158, 11, .5); padding-left: 12px; }
.pf-pre { background: rgba(0,0,0,.3); border: 1px solid var(--border2);
  border-radius: var(--radius-xs); padding: 9px 11px; margin: 6px 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
  color: #f0a63c; white-space: pre-wrap; }

.pf-todo { display: flex; gap: 12px; margin: 0 0 12px 34px; }
.pf-os-body .pf-todo { margin-left: 0; }
.pf-todo-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, .07); color: var(--text2); }
.pf-todo strong { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 3px; }
.pf-todo p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.pf-todo--ok .pf-todo-n { background: rgba(16, 185, 129, .18); color: var(--green-l); }
/* Une liste dans une etape : deux outils a comparer se lisent mieux l'un
   sous l'autre qu'en phrase. Meme taille et meme couleur que le texte
   courant de l'etape, sinon elle attire l'oeil plus qu'elle ne le merite. */
.pf-todo .pf-ul { margin: 6px 0 8px; padding-left: 18px; font-size: 12.5px;
  color: var(--muted); line-height: 1.65; }
.pf-todo .pf-ul li { margin-bottom: 5px; }
.pf-todo .pf-ul li b { color: var(--text2); }

/* La commande a copier : elle doit se lire en entier, meme longue. */
.pf-cmd { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.pf-cmd code { flex: 1; min-width: 0; padding: 9px 11px; border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, .38); border: 1px solid var(--border2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.6; color: var(--text2);
  white-space: pre-wrap; word-break: break-all; user-select: all; }
.pf-cmd .pf-btn { flex: 0 0 auto; }

.pf-note { padding: 12px 15px; margin: 16px 0 0 34px; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.65; color: var(--text2); }
.pf-note--warn { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .32); }
.pf-note strong { color: var(--text); }

.pf-fold { margin: 26px 0 0; padding: 12px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border2); }
.pf-fold > summary { cursor: pointer; font-size: 13.5px; font-weight: 650; color: var(--text2); }
.pf-fold > summary:hover { color: var(--text); }
.pf-fold .pf-step-sub { margin: 10px 0 12px; }

/* ─── Comptes Instagram (iOS) ─────────────────────────────────────────────── */
/* Le tableau reprend la densite des lignes d'appareils : a une trentaine de
   comptes, une grille de cartes obligerait a faire defiler pour rien. */

.pf-acc-row { display: grid; align-items: center; gap: 10px; padding: 7px 10px;
  /* Aucune colonne ne depend de son contenu : chaque ligne est une grille a
     part, et un `max-content` faisait tomber l'en-tete a cote des valeurs. */
  grid-template-columns: 104px 116px minmax(130px, 1.3fr) minmax(90px, 1fr) 800px;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  font-size: 12.5px; color: var(--text2); }
.pf-acc-row:not(.pf-acc-row--head):hover { background: rgba(255, 255, 255, .035); }
.pf-acc-row--head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-radius: 0; padding-bottom: 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border2); }
/* Le nom tient sur deux lignes : la seconde dit ce qui manque, ou quelle tache
   publiera. Sans elle, un bouton grise n'explique pas pourquoi il l'est. */
.pf-acc-ident { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-acc-name { font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-acc-sub { font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-acc-dim { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-acc-id { background: rgba(0, 0, 0, .3); padding: 1px 5px; border-radius: 4px;
  font-size: 11px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; }
.pf-acc-id.is-empty { background: none; color: var(--red-l); cursor: default; }
/* L'identifiant seul ne dit pas de quel telephone il s'agit : le nom vient
   en dessous, meme patron que .pf-acc-ident pour le compte. */
.pf-acc-col-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-items: flex-start; }
/* Jamais de retour a la ligne dans les actions : les boutons passaient sur
   trois rangees et la ligne devenait plus haute qu'une carte. */
.pf-acc-acts { display: flex; gap: 5px; justify-content: flex-end; align-items: center;
  flex-wrap: nowrap; }
.pf-acc-acts .pf-btn { white-space: nowrap; }
.pf-select--type { flex: 0 0 auto; width: 118px; padding: 5px 6px; font-size: 11.5px; }

/* La tache en cours, sous le nom : c'est ce qu'on cherche des qu'on voit un
   point vert — lequel des comptes de cet iPhone est en train de publier. */
.pf-acc-encours { display: inline-flex; align-items: center; gap: 4px;
                  font-size: 11px; font-weight: 600; color: #34d399; }

.pf-acc-va { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 9px; margin-left: 5px; vertical-align: 1px;
  background: rgba(var(--vio-rgb-a855f7), .18); color: var(--vio-c084fc); }

/* Ce que le compte attend encore pour que ses boutons servent. Le dire dans la
   ligne evite de cliquer sur un bouton grise sans comprendre pourquoi. */
.pf-acc-todo { font-size: 11.5px; color: #fbbf24; }

/* ── Fiche du compte ── */
.pf-acc-overlay { position: fixed; inset: 0; z-index: 9000; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); }
.pf-acc-overlay[hidden] { display: none; }
.pf-acc-box { width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.pf-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.pf-acc-head h3 { margin: 0; font-size: 15.5px; font-weight: 750; color: var(--text); }
/* Surtout PAS d'overflow ici : une liste deroulante est posee en absolu, et
   le moindre `overflow:auto` sur un ancetre la coupe net. Chaque etape tient
   en trois ou quatre champs, il n'y a rien a faire defiler. */
.pf-acc-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.pf-acc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pf-acc-field > label { font-size: 11.5px; font-weight: 650; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em; }
.pf-acc-hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pf-acc-hint code { background: rgba(0, 0, 0, .3); padding: 0 4px; border-radius: 3px; }
.pf-acc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-acc-foot { display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px 16px; border-top: 1px solid var(--border); }

/* Ces deux fenetres-la n'ont que des <select> ordinaires : rien n'y est pose
   en absolu, on peut donc faire defiler sans rien couper. Sans ca, le contenu
   depasse les 92vh de la boite et pousse le pied — donc le bouton
   « Enregistrer » — hors de l'ecran, sans aucun moyen de l'atteindre. */
#pf-tasks-modal .pf-acc-body,
#pf-new-modal   .pf-acc-body,
#pf-acc-modal   .pf-acc-body { overflow-y: auto; min-height: 0; }
/* La liste deroulante est calee sur l'ecran une fois ouverte (voir ddOuvrir) :
   le defilement ci-dessus ne peut plus la couper. */
.pf-dd-panel { right: auto; }

/* Les colonnes tombent une a une : la plus accessoire d'abord. Le compte et
   les actions ne disparaissent jamais — c'est tout l'interet du tableau. */
@media (max-width: 1660px) {
  .pf-acc-col-model { display: none; }
  .pf-acc-row { grid-template-columns: 104px 116px minmax(130px, 1fr) 800px; }
}
@media (max-width: 1520px) {
  .pf-acc-col-id { display: none; }
  .pf-acc-row { grid-template-columns: 104px minmax(130px, 1fr) 800px; }
}
@media (max-width: 1380px) {
  .pf-acc-col-state { display: none; }
  .pf-acc-row { grid-template-columns: minmax(130px, 1fr) 800px; }
}
/* En dessous, les actions passent a la ligne plutot que de pousser la page a
   defiler horizontalement — un tableau qui deborde de l'ecran ne se lit plus. */
@media (max-width: 1240px) {
  .pf-acc-row { grid-template-columns: minmax(120px, 1fr) minmax(300px, 1.6fr); }
  .pf-acc-acts { flex-wrap: wrap; justify-content: flex-start; }
  .pf-acc-row2 { grid-template-columns: 1fr; }
}

/* ── Fenêtre d'ajout : deux champs, un accent vert comme chez GeeLark ────── */
.pf-acc-box--add { width: min(520px, 100%); border-color: rgba(34, 197, 94, .3); }
.pf-add-head { display: flex; gap: 12px; padding: 22px 24px 4px; }
.pf-add-emoji { font-size: 24px; line-height: 1.2; }
.pf-add-head h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--text); }
.pf-add-head p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pf-acc-box--add .pf-btn--primary { background: linear-gradient(135deg, #22c55e, #16a34a); }

/* ── Assistant en trois étapes ───────────────────────────────────────────── */
.pf-wiz-progress { display: flex; align-items: center; gap: 0; padding: 16px 34px 4px; }
.pf-wiz-dot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--muted);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--border2);
  transition: all .2s; }
.pf-wiz-dot.is-active { background: var(--grad-main); color: #fff; border-color: transparent; }
.pf-wiz-line { flex: 1; height: 2px; background: var(--border2); transition: background .2s; }
.pf-wiz-line.is-done { background: var(--purple); }
.pf-wiz-step[hidden] { display: none; }
.pf-wiz-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 2px; }
.pf-wiz-head strong { font-size: 14px; font-weight: 750; color: var(--text); }
.pf-wiz-head span { font-size: 12px; color: var(--muted); }
.pf-wiz-spacer { flex: 1; }
/* Le pied vit DANS l'étape : chacune a ses propres boutons. */
.pf-wiz-step .pf-acc-foot { margin: 4px -20px -16px; }
.pf-acc-field > label em { font-style: normal; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--muted); }
.pf-acc-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 8px 12px; }
.pf-note--sm { font-size: 12px; padding: 10px 12px; margin: 2px 0 0; }

/* ── Liste déroulante maison ─────────────────────────────────────────────── */
/* Un <select> ne sait montrer ni la pastille d'etat ni l'identifiant sous le
   nom — or c'est precisement ce qu'on vient lire ici. */
.pf-dd { position: relative; }
.pf-dd-trigger { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; text-align: left; cursor: pointer; font-family: inherit; font-size: 13.5px;
  color: var(--text); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border2); border-radius: var(--radius-xs); transition: all .15s; }
.pf-dd-trigger:hover { background: rgba(255, 255, 255, .07); }
.pf-dd.is-open .pf-dd-trigger { border-color: var(--purple); background: rgba(255, 255, 255, .07); }
.pf-dd-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: rgba(var(--vio-rgb-8b5cf6), .16); color: var(--vio-c4b5fd); }
.pf-dd-label { flex: 1; min-width: 0; font-weight: 600; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-dd-label.is-set, .pf-dd-trigger:has(.pf-dd-icon) .pf-dd-label { color: var(--text); }
.pf-dd-caret { color: var(--muted); flex-shrink: 0; display: inline-flex; transition: transform .2s; }
.pf-dd.is-open .pf-dd-caret { transform: rotate(180deg); }
.pf-dd-panel { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 60;
  max-height: 300px; overflow-y: auto; padding: 5px;
  background: #1e2021;
  border: 1px solid rgba(var(--vio-rgb-8b5cf6), .35); border-radius: var(--radius-sm);
  box-shadow: 0 16px 50px -10px rgba(0, 0, 0, .65); }
.pf-dd-panel[hidden] { display: none; }
.pf-dd-panel--caps { max-height: 260px; }
.pf-dd-opt { position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  box-sizing: border-box; padding: 8px 11px; cursor: pointer; text-align: left;
  background: none; border: 0; border-radius: 7px; font-family: inherit; font-size: 13px;
  color: var(--text2); transition: background .12s; }
.pf-dd-opt:hover { background: rgba(255, 255, 255, .05); }
.pf-dd-opt.is-on { background: rgba(var(--vio-rgb-8b5cf6), .14); color: var(--text); }
.pf-dd-opt.is-on::before { content: ''; position: absolute; left: -1px; top: 50%;
  transform: translateY(-50%); width: 3px; height: 20px;
  background: var(--purple); border-radius: 0 4px 4px 0; }
.pf-dd-opt--cap input { width: 14px; height: 14px; margin: 0; accent-color: var(--purple); flex-shrink: 0; }
.pf-dd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-dd-name { font-weight: 700; font-size: 12.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-dd-sub { font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-dd-check { color: var(--green-l); opacity: 0; flex-shrink: 0; font-weight: 800; }
.pf-dd-opt.is-on .pf-dd-check { opacity: 1; }
.pf-dd-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.pf-dd-dot--on   { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, .55); }
.pf-dd-dot--off  { background: #4b5563; }
.pf-dd-dot--none { background: rgba(156, 163, 175, .4); }
.pf-dd-sep { height: 1px; background: rgba(255, 255, 255, .07); margin: 4px 8px; }
.pf-dd-vide { padding: 9px 11px; font-size: 12px; color: var(--muted); }
.pf-dd-panel::-webkit-scrollbar { width: 6px; }
.pf-dd-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 6px; }

/* ── Captions : le libellé ne suffit pas, c'est le texte qu'on reconnaît ─── */
.pf-dd-tout { display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 8px 11px; margin-bottom: 4px; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; color: var(--vio-c084fc); background: none; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 7px 7px 0 0; }
.pf-dd-tout:hover { background: rgba(255, 255, 255, .05); }
.pf-dd-name--cap { color: var(--vio-c084fc); }
.pf-cap-eye { flex-shrink: 0; width: 26px; height: 26px; cursor: pointer; font-size: 12px;
  border-radius: 6px; background: rgba(var(--vio-rgb-a855f7), .15); color: var(--vio-c084fc);
  border: 1px solid rgba(var(--vio-rgb-a855f7), .3); }
.pf-cap-eye:hover { background: rgba(var(--vio-rgb-a855f7), .3); }
.pf-cap-preview { position: fixed; inset: 0; z-index: 9500; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px;
  background: rgba(0, 0, 0, .85); backdrop-filter: blur(10px); }
.pf-cap-preview canvas { border-radius: 14px; background: #0a0a14;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7); }
.pf-cap-preview-tag { display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: rgba(255, 255, 255, .7); }
.pf-cap-preview-tag span { padding: 2px 8px; border-radius: 999px; font-size: 10px;
  font-weight: 700; background: rgba(var(--vio-rgb-a855f7), .18); color: var(--vio-c084fc); }

/* ── Horaires du mode auto ───────────────────────────────────────────────── */
/* Quatre listes separees : un compte ne poste pas ses reels et ses stories au
   meme rythme, et chacune porte ses jours — sans eux, un horaire du week-end
   tomberait aussi le mardi. */
.pf-sched { display: flex; flex-direction: column; gap: 9px; }
.pf-sched-groupe { padding: 10px 12px; border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border2); }
.pf-sched-titre { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.pf-sched-jours { display: flex; gap: 4px; margin-bottom: 8px; }
.pf-sched-jour { width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--muted);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); }
.pf-sched-heures { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pf-sched-heure { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.pf-sched-heure button { background: none; border: 0; cursor: pointer; padding: 0;
  font-size: 13px; line-height: 1; font-family: inherit; }
.pf-sched-ajout { display: flex; gap: 6px; }
.pf-sched-ajout .pf-input { flex: 1; min-width: 0; }

/* ── Bouton Auto du tableau ──────────────────────────────────────────────── */
.pf-auto { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 8px; cursor: pointer; user-select: none; font-family: inherit;
  font-size: 12px; font-weight: 700; white-space: nowrap; transition: all .15s;
  color: var(--muted); background: rgba(255, 255, 255, .03);
  border: 1.5px solid rgba(255, 255, 255, .12); }
.pf-auto.is-on { color: #10b981; background: rgba(16, 185, 129, .18); border-color: #10b981; }
.pf-auto:disabled { opacity: .5; cursor: wait; }
.pf-auto-badge { font-size: 11px; color: var(--muted); white-space: nowrap; align-self: center; }
.pf-auto-badge.is-warn { color: #efa227; font-weight: 600; }

/* L'etape 3 est la seule qui deborde : quatre groupes d'horaires ne tiennent
   pas dans un ecran. Elle seule fait donc defiler — les deux autres portent des
   listes deroulantes posees en absolu, qu'un `overflow` couperait net. Le pied
   reste colle en bas, sinon « Enregistrer » disparait sous la ligne de flottaison. */
#pf-wiz-step-3 { overflow-y: auto; }
#pf-wiz-step-3 .pf-acc-foot { position: sticky; bottom: -16px;
  background: var(--card); z-index: 2; }

/* ── En-tete de la page des comptes, calque sur /geelark ─────────────────── */
/* Le nombre AVANT son libelle : c'est lui qu'on vient lire, il doit se voir
   d'un coup d'oeil sans avoir a lire une legende. */
.pf-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.pf-card { flex: 1; min-width: 150px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.pf-card-n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.pf-card-n--ok   { color: var(--green-l); }
.pf-card-n--auto { color: #34d399; }
.pf-card-l { margin-top: 3px; font-size: 12px; color: var(--muted); }
.pf-section-title { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px;
  font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text2); }
/* Le champ de recherche vit sur la ligne du titre, pas parmi les boutons
   d en-tete : il filtre la liste juste en dessous, autant qu il la touche.
   Les reglages du titre — majuscules, interlettrage, graisse — ne doivent
   pas deteindre sur ce qu on tape. */
.pf-section-search { margin-left: auto; width: 240px; flex: none;
  text-transform: none; letter-spacing: normal; font-weight: 400; }
@media (max-width: 768px) {
  .pf-section-title { flex-wrap: wrap; }
  .pf-section-search { margin-left: 0; width: 100%; }
}
.pf-count { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(var(--vio-rgb-8b5cf6), .18); color: var(--vio-c4b5fd); }

/* La colonne d'etat porte son texte, comme « ● Hors ligne » chez eux : une
   pastille seule oblige a survoler pour savoir ce qu'elle veut dire. */
.pf-acc-state { display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); white-space: nowrap; }
.pf-acc-sep { width: 1px; height: 20px; background: var(--border2); margin: 0 3px; }
.pf-acc-dim i { color: var(--muted); }

/* ── Motifs a retrouver a l'ecran ────────────────────────────────────────── */
/* Une vignette dit tout de suite de quel bouton il s'agit ; « img_3f1c… », rien. */
.pf-img-champ { display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--border2); border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, .03); }
.pf-img-vign { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0;
  border-radius: 6px; background: rgba(0, 0, 0, .35); }
.pf-img-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  font-size: 12.5px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-img-nom em { font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--muted); }
.pf-img-vide { flex: 1; font-size: 12.5px; color: var(--muted); }

.pf-img-box { width: min(640px, 100%); }
.pf-img-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-img-liste { display: grid; gap: 10px; max-height: 46vh; overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.pf-img-carte { position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 9px; cursor: pointer; border-radius: var(--radius-xs);
  border: 1px solid var(--border2); background: rgba(255, 255, 255, .03); }
.pf-img-carte:hover { border-color: var(--border-glow); }
.pf-img-carte.is-on { border-color: var(--purple); background: rgba(var(--vio-rgb-8b5cf6), .14); }
.pf-img-carte img { width: 100%; height: 84px; object-fit: contain;
  border-radius: 6px; background: rgba(0, 0, 0, .35); }
.pf-img-carte-nom { font-size: 12px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-img-carte-dim { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-img-carte .pf-ico { position: absolute; top: 5px; right: 5px; opacity: 0;
  background: rgba(0, 0, 0, .6); border-radius: 5px; }
.pf-img-carte:hover .pf-ico { opacity: 1; }

/* ── Decoupe sur l'ecran en direct ───────────────────────────────────────── */
.pf-crop-box { width: auto; max-width: 96vw; }
.pf-crop-zone { display: flex; align-items: center; justify-content: center;
  padding: 14px 20px; min-height: 220px; }
#pf-crop-canvas { max-width: 100%; border-radius: var(--radius-xs); cursor: crosshair;
  background: #000; touch-action: none; }
.pf-crop-etat { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* L'explication d'un champ se colle sous lui, pas au milieu de l'espace qui
   separe deux reglages : sinon on ne sait plus auquel elle se rapporte. */
.pf-insp-hint--f { margin-top: -6px; }

/* Le bouton qui ouvre la vie d'un compte : distinct des deux autres, qui
   publient. On ne clique pas dessus deux fois par jour. */
/* La quantite, collee a son horaire : elle ne vaut que pour celui-la, et la
   coller le dit mieux qu'une legende. */
.pf-sched-n { width: 34px; margin: 0 2px; padding: 1px 3px; text-align: center;
  font: inherit; font-size: 11px; font-weight: 700;
  background: rgba(0, 0, 0, .28); border: 1px solid currentColor; border-radius: 4px; }
.pf-sched-n::-webkit-outer-spin-button,
.pf-sched-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-sched-n { -moz-appearance: textfield; appearance: textfield; }

/* ── Dossiers de tâches ─────────────────────────────────────────────────────
   Des onglets, pas un arbre : le rangement doit rester lisible d'un coup
   d'oeil, sinon on ne range plus. */
.pf-folders { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pf-folder { display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text2);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
  transition: all .15s; }
.pf-folder:hover { color: var(--text); border-color: var(--border2); }
.pf-folder.is-active { color: #fff; background: rgba(var(--vio-rgb-8b5cf6), .18);
  border-color: rgba(var(--vio-rgb-8b5cf6), .45); }
.pf-folder-n { font-size: 11px; font-weight: 700; color: var(--muted);
  background: rgba(0, 0, 0, .28); border-radius: 999px; padding: 1px 6px; }
.pf-folder.is-active .pf-folder-n { color: #ddd6fe; }
/* Renommer et supprimer n'apparaissent qu'au survol : ils encombreraient la
   lecture le reste du temps. */
.pf-folder-edit, .pf-folder-del { opacity: 0; font-size: 11px; transition: opacity .15s; }
.pf-folder:hover .pf-folder-edit, .pf-folder:hover .pf-folder-del { opacity: .55; }
.pf-folder-edit:hover { opacity: 1; }
.pf-folder-del:hover  { opacity: 1; color: var(--red-l); }
.pf-folder--add { border-style: dashed; color: var(--muted); }

/* Les actions d'une carte : discretes, et au-dessus du reste — la carte
   entiere est un bouton qui ouvre la tache. */
.pf-task-card { position: relative; }
.pf-task-acts { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s; }
.pf-task-card:hover .pf-task-acts, .pf-task-card:focus-within .pf-task-acts { opacity: 1; }
.pf-ico--sm { font-size: 12px; padding: 3px 5px; line-height: 1; border-radius: 5px; }
.pf-ico--danger:hover { background: rgba(244, 63, 94, .16); }

/* La mise en garde d'une suppression : elle doit se lire, pas se deviner. */
.pf-del-warn { margin: 12px 0 0; padding: 9px 11px; border-radius: 7px;
  font-size: 12px; line-height: 1.5; color: #fecdd3;
  background: rgba(244, 63, 94, .1); border: 1px solid rgba(244, 63, 94, .28); }

/* Le mot de passe se lit d'un coup d'oeil et se copie d'un clic : c'est le
   seul endroit ou il existe, le telephone ne le renvoie jamais. */
.pf-acc-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--border);
  border-radius: 5px; padding: 0 5px; cursor: pointer; color: var(--muted); }
.pf-acc-key:hover { color: var(--text); border-color: var(--border2); }

/* Le pseudo et son dé, sur une seule ligne : le bouton ne doit pas passer
   dessous et casser la lecture du champ. */
.pf-new-row { display: flex; gap: 8px; align-items: center; }
.pf-new-row .pf-input { flex: 1 1 auto; min-width: 0; }
.pf-new-row .pf-btn  { flex: 0 0 auto; }

.pf-btn--start { background: rgba(34, 197, 94, .14); color: #4ade80;
  border-color: rgba(34, 197, 94, .35); }
.pf-btn--start:hover:not(:disabled) { background: rgba(34, 197, 94, .24); }

/* ── Pleine automatisation ────────────────────────────────────────────────
   Un réglage par appareil : le choix de l'iPhone est en tête, sans lui on
   règle sans savoir lequel. « Enregistrer » ne touche à aucun horaire,
   « Générer » en réécrit des dizaines — les deux boutons diffèrent donc, et
   l'aperçu s'intercale entre les deux. */
.pf-acc-box--auto  { max-width: 820px; }
.pf-auto-body      { max-height: 64vh; overflow-y: auto; }
.pf-auto-sect      { margin: 20px 0 10px; font-size: 12px; font-weight: 600;
                     letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; }
.pf-auto-sect:first-child { margin-top: 0; }
.pf-auto-intro     { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: #94a3b8; }
.pf-auto-intro b   { color: #cbd5e1; }
.pf-auto-aide      { font-size: 11.5px; color: #64748b; font-weight: 400; }

.pf-auto-appareils { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-auto-app       { padding: 9px 14px; border: 1px solid #2a3344; border-radius: 9px;
                     background: #131a26; color: #cbd5e1; font-size: 13px; cursor: pointer;
                     text-align: left; }
.pf-auto-app span  { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
.pf-auto-app.is-on { border-color: #316dca; background: #1a2330; color: #eceae7; }

.pf-auto-modes     { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-auto-mode      { display: block; padding: 12px 14px; border: 1px solid #2a3344;
                     border-radius: 10px; cursor: pointer; background: #131a26; }
.pf-auto-mode:has(input:checked) { border-color: #316dca; background: #1a2330; }
.pf-auto-mode input{ margin-right: 8px; }
.pf-auto-mode b    { font-size: 14px; }
.pf-auto-mode span { display: block; margin-top: 5px; font-size: 12px; color: #94a3b8; line-height: 1.45; }
.pf-auto-mode em   { display: block; margin-top: 7px; font-size: 12px; font-style: normal; color: #a78bfa; }

.pf-auto-ligne     { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: 13px; }
.pf-auto-ligne > label { min-width: 172px; color: #94a3b8; line-height: 1.3; }
.pf-auto-h         { width: 78px; text-align: center; }
.pf-auto-n         { width: 62px; text-align: center; }
.pf-auto-fleche    { color: #64748b; }
.pf-auto-dd        { flex: 1; min-width: 0; }

.pf-auto-tbl       { width: 100%; border-collapse: collapse; border: 1px solid #2a3344;
                     border-radius: 10px; overflow: hidden; font-size: 13px; }
.pf-auto-tbl th    { text-align: left; padding: 9px 12px; background: #141b28;
                     font-size: 11.5px; font-weight: 600; color: #94a3b8;
                     border-bottom: 1px solid #2a3344; white-space: nowrap; }
.pf-auto-tbl td    { padding: 8px 12px; border-bottom: 1px solid #1e2735; }
.pf-auto-tbl tr:last-child td { border-bottom: 0; }
.pf-auto-tbl tr.is-off td     { opacity: .45; }
.pf-auto-td-ordre  { display: flex; align-items: center; gap: 5px; color: #64748b; }
.pf-auto-td-ordre button { border: 0; background: none; color: #64748b; cursor: pointer;
                           font-size: 10px; line-height: 1; padding: 2px; }
.pf-auto-td-ordre button:hover:not(:disabled) { color: #cbd5e1; }
.pf-auto-td-ordre button:disabled { opacity: .25; cursor: default; }
.pf-auto-td-duree  { color: #94a3b8; font-size: 12px; white-space: nowrap; }

.pf-auto-apercu    { margin-top: 18px; padding: 12px 14px; border-radius: 10px;
                     background: #0f1520; border: 1px solid #1e2735; font-size: 12.5px;
                     line-height: 1.6; color: #cbd5e1; }
.pf-auto-apercu b  { color: #e2e8f0; }
.pf-auto-apercu .pf-auto-conflit { display: block; margin-top: 7px; color: #fbbf24; }
.pf-auto-apercu code { font-size: 12px; color: #a78bfa; }

/* ── Santé : chaque section dans sa propre carte ─────────────────────────────
   Avant : un titre flottant au-dessus d'un tableau nu, section apres section,
   sans rien pour les separer visuellement — la page se lisait comme une
   liste, pas comme un tableau de bord. Demande de Will le 2 septembre :
   « refaire tout le systeme santé... clean carré propre ». Chaque bloc
   (titre + graphique eventuel + tableau) vit desormais dans une carte a
   part, comme .pf-card un cran au-dessus. */
.pf-sante-card { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin: 16px 0; }
.pf-sante-card > .pf-section-title { margin: 0 0 14px; }
.pf-sante-card > .pf-auto-tbl { margin: 0; }
.pf-sante-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.pf-sante-grid > .pf-sante-card { margin: 0; }
@media (max-width: 900px) { .pf-sante-grid { grid-template-columns: 1fr; } }

/* ── Tableaux qui se replient : « Afficher N de plus » ───────────────────────
   Un historique qui grossit ne doit pas allonger la page a l'infini — le
   motif que « certains sites » utilisent deja (Will, 2 septembre) : N lignes
   visibles, un bouton pour le reste, repliable a nouveau. Les lignes cachees
   restent dans le DOM (juste `hidden`) : rouvrir est instantane, pas un
   second appel reseau. */
.pf-plus-ligne td { padding: 4px 12px 10px; border-bottom: 0; }
.pf-plus-btn { width: 100%; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 650; text-align: center;
  color: var(--text2); background: rgba(255, 255, 255, .03); border: 1px dashed var(--border2);
  transition: all .15s; }
.pf-plus-btn:hover { color: var(--text); border-color: var(--border-glow); background: rgba(255, 255, 255, .05); }

/* ── Graphiques maison : divs + largeur/hauteur en %, pas de librairie ──────
   Coherent avec le reste du site (aucune dependance de graphique nulle
   part ailleurs) : plus simple a maintenir qu'un SVG a coordonnees, et
   responsive gratuitement. */

/* Barres horizontales — un taux par ligne (ex: bans par tâche). */
.pf-hbar-chart { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.pf-hbar-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 46px;
  align-items: center; gap: 10px; font-size: 12.5px; }
.pf-hbar-label { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-hbar-track { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.pf-hbar-fill { height: 100%; border-radius: 999px; min-width: 3px; transition: width .3s; }
.pf-hbar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }

/* Barres verticales — une repartition dans le temps (ex: bans / heure). */
.pf-vbar-chart { display: flex; align-items: flex-end; gap: 3px; height: 84px;
  margin-bottom: 8px; padding: 0 2px; }
.pf-vbar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 4px; cursor: default; }
.pf-vbar-fill { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: rgba(var(--vio-rgb-8b5cf6), .55); transition: height .3s; }
.pf-vbar-col:hover .pf-vbar-fill { background: var(--purple); }
.pf-vbar-chart--vide { align-items: center; justify-content: center; }
.pf-vbar-chart--vide .pf-vbar-vide { color: var(--muted); font-size: 12px; }
.pf-vbar-axe { display: flex; justify-content: space-between; font-size: 10px;
  color: var(--muted); padding: 0 2px; margin-top: -4px; }

/* L'interrupteur de l'automatisation. En tête de fenêtre parce que c'est la
   première question : est-ce que ça tourne ? Le reste n'est que du réglage. */
.pf-auto-marche      { display: flex; align-items: center; gap: 14px; margin-top: 12px;
                       padding: 12px 15px; border-radius: 10px;
                       border: 1px solid #2a3344; background: #131a26; }
.pf-auto-marche > div{ flex: 1; min-width: 0; }
.pf-auto-marche b    { display: block; font-size: 13.5px; color: #cbd5e1; }
.pf-auto-marche span { display: block; margin-top: 3px; font-size: 11.5px;
                       color: #64748b; line-height: 1.4; }
.pf-auto-marche.is-on{ border-color: rgba(34,197,94,.4); background: #0f1c16; }
.pf-auto-marche.is-on b { color: #86efac; }

/* Le choix du fournisseur de numeros SMS. Deux pastilles, pas un menu : il n'y
   en a que deux, et laquelle est active se lit d'un coup d'oeil. */
.pf-auto-fournisseurs { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-auto-fourn        { padding: 8px 13px; border: 1px solid #2a3344; border-radius: 9px;
                        background: #131a26; color: #cbd5e1; font-size: 13px; cursor: pointer;
                        text-align: left; }
.pf-auto-fourn span   { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
.pf-auto-fourn.is-on  { border-color: #316dca; background: #1a2330; color: #eceae7; }
.pf-auto-fourn.sans-cle { opacity: .55; }

#pf-session {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  background: var(--bg, #0b0e14);
}
.pf-session-card {
  width: min(380px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 8px;
}
.pf-session-card h1 { margin: 0 0 4px; font-size: 28px; }
.pf-session-sub { margin: 0 0 10px; color: var(--muted, #98958d); }
.pf-session-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted, #98958d); }
.pf-session-card input {
  font: inherit; color: inherit; background: #121314;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 10px 12px;
}
.pf-session-err { min-height: 1.2em; margin: 4px 0 0; color: #f0a8a0; }
.pf-session-card .pf-btn { margin-top: 8px; }

.pf-node-icon, .pf-cat-item-icon, .pf-notice-icon {
  font-size: 0 !important;
  width: 14px; height: 14px;
  display: inline-grid; place-items: center;
  color: #58a6ff;
}
.pf-node-icon::before, .pf-cat-item-icon::before, .pf-notice-icon::before {
  content: "";
  width: 8px; height: 8px; border-radius: 2px;
  background: currentColor;
}

.pf-ico {
  font-size: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='2'/></svg>");
}
.pf-ico--sm { width: 22px; height: 22px; font-size: 0; }
.pf-ico::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.pf-ico[data-dev-watch] { color: #58a6ff; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 12s4-6 10-6 10 6 10 6-4 6-10 6S2 12 2 12z' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='2.5' fill='black'/></svg>"); }
.pf-ico[data-dev-enroll] { color: #3fb950; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4v10M8 10l4 4 4-4M5 20h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.pf-ico[data-dev-pause] { color: #f0a63c; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5h3v14H8zM13 5h3v14h-3z' fill='black'/></svg>"); }
.pf-ico--on[data-dev-pause] { color: #3fb950; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l12-7z' fill='black'/></svg>"); }
.pf-ico[data-dev-rename] { color: #f0a63c; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 20h4l10-10-4-4L4 16zM13 7l4 4' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>"); }
.pf-ico[data-dev-del], .pf-ico[data-task-del], .pf-ico[data-img-del] { color: #f85149; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 7h14M9 7V5h6v2M8 7l1 13h6l1-13' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>"); }
.pf-ico[data-task-ipfiable] { color: #58a6ff; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z' fill='none' stroke='black' stroke-width='2'/></svg>"); }
.pf-ico--on[data-task-ipfiable] { color: #3fb950; }
.pf-ico[data-task-move] { color: #e3b341; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 7h6l2 2h10v10H3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>"); }
.pf-empty-icon {
  font-size: 0; display: block; width: 36px; height: 36px; margin: 0 auto 12px; opacity: .7;
  background: #58a6ff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='7' height='7' rx='1' fill='black'/><rect x='13' y='4' width='7' height='7' rx='1' fill='black'/><rect x='4' y='13' width='7' height='7' rx='1' fill='black'/><rect x='13' y='13' width='7' height='7' rx='1' fill='black'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='7' height='7' rx='1' fill='black'/><rect x='13' y='4' width='7' height='7' rx='1' fill='black'/><rect x='4' y='13' width='7' height='7' rx='1' fill='black'/><rect x='13' y='13' width='7' height='7' rx='1' fill='black'/></svg>") center / contain no-repeat;
}

.pf-quota {
  height: 6px; width: min(280px, 100%); margin-top: 8px;
  border-radius: 99px; background: #121314; overflow: hidden;
}
.pf-quota > span {
  display: block; height: 100%; width: 0; background: #316dca;
}
.pf-quota > span.is-on { min-width: 6px; }
.pf-media-kinds button {
  background: #1e2021; color: #c0beb7; border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 6px 14px; font: inherit; cursor: pointer;
}
.pf-media-kinds button:hover { color: #eceae7; border-color: rgba(88,166,255,.45); }
.pf-media-kinds button.is-on { background: #316dca; color: #fff; border-color: #316dca; }
.pf-media-drop {
  position: relative; min-height: 0;
  border-radius: 16px;
}
.pf-media-drop.is-over { outline: none; }
.pf-media-progress {
  margin: 0 0 12px; color: #79c0ff; font-size: 13px;
}
.pf-media-drop-voile {
  display: none; position: absolute; inset: 0; z-index: 6;
  place-items: center; align-content: center; gap: 8px;
  text-align: center; color: #eceae7;
  background: rgba(16, 20, 26, .9);
  border: 2px dashed #58a6ff; border-radius: 16px;
  pointer-events: none;
}
.pf-media-drop.is-over .pf-media-drop-voile { display: grid; }
.pf-media-drop-ico {
  width: 42px; height: 42px; margin: 0 auto 4px;
  background: #58a6ff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4v10M8 10l4 4 4-4M5 20h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4v10M8 10l4 4 4-4M5 20h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.pf-media-drop-voile strong { font-size: 18px; }
.pf-media-drop-voile span, .pf-media-vide-etat span { color: #98958d; font-size: 13px; }
.pf-media-vide-etat {
  grid-column: 1 / -1; min-height: 320px;
  display: grid; place-items: center; align-content: center; gap: 6px;
  border: 1px dashed rgba(88,166,255,.4); border-radius: 16px;
  background: rgba(88,166,255,.04); text-align: center; color: #eceae7;
}
.pf-media-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.pf-media-grid.is-reels { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.pf-media-grid.is-stories { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.pf-media-tile {
  position: relative; margin: 0; background: #121314;
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden;
  cursor: pointer; transition: border-color .15s, transform .15s;
  container-type: inline-size; align-self: start;
}
.pf-media-tile:hover { border-color: #58a6ff; transform: translateY(-2px); }
.pf-media-tile.is-video { border-color: rgba(88, 166, 255, .28); }
.pf-media-tile.is-video video, .pf-media-tile.is-video .pf-media-vide { aspect-ratio: 9 / 16; }
.pf-media-tile.is-carre img, .pf-media-tile.is-carre video, .pf-media-tile.is-carre .pf-media-vide { aspect-ratio: 1 / 1; }
.pf-media-tile img, .pf-media-tile video, .pf-media-vide {
  display: block; width: 100%; object-fit: cover; background: #121314; pointer-events: none;
}
.pf-media-play {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(8, 10, 12, .55); border: 1px solid rgba(255,255,255,.4);
  pointer-events: none; transition: opacity .15s;
}
.pf-media-play::before {
  content: ""; position: absolute; left: 18px; top: 14px;
  border-style: solid; border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
}
.pf-media-tile.is-video:hover .pf-media-play { opacity: 0; }
.pf-media-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 28px 10px 8px 34px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.pf-media-voir {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(8, 10, 12, .88);
  padding: 64px 24px 56px;
}
.pf-media-voir[hidden] { display: none; }
.pf-media-voir-cadre { display: grid; place-items: center; }
.pf-media-voir-cadre video {
  max-height: 74vh; max-width: min(92vw, 440px);
  width: auto; height: auto; display: block;
  border-radius: 16px 16px 0 0; background: #000;
}
.pf-lecteur { width: fit-content; max-width: min(92vw, 440px); }
.pf-lecteur-bar {
  display: flex; align-items: center; gap: 8px;
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  background: #1e2021; color: #eceae7;
  border: 1px solid rgba(255,255,255,.12); border-top: 0;
  border-radius: 0 0 16px 16px;
}
.pf-lecteur-bar button {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: #eceae7; cursor: pointer; font: inherit; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.pf-lecteur-bar button:hover { background: rgba(88,166,255,.16); color: #79c0ff; }
.pf-lecteur-bar [data-lec="play"]::before {
  content: ""; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}
.pf-lecteur-bar [data-lec="play"].is-pause::before {
  border: 0; width: 8px; height: 10px;
  background: linear-gradient(currentColor, currentColor) 0 0 / 3px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 3px 100% no-repeat;
}
.pf-lecteur-bar [data-lec="temps"] { font-size: 11px; color: #c0beb7; font-variant-numeric: tabular-nums; min-width: 72px; }
.pf-lecteur-bar [data-lec="seek"] { flex: 1; min-width: 48px; accent-color: #316dca; }
.pf-lecteur-bar [data-lec="volume"] { width: 72px; flex: 0 0 72px; accent-color: #316dca; }
.pf-lecteur-bar [data-lec="son"]::before,
.pf-lecteur-bar [data-lec="pip"]::before,
.pf-lecteur-bar [data-lec="dl"]::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.pf-lecteur-bar [data-lec="son"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4z' fill='black'/><path d='M16 9a4 4 0 010 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-lecteur-bar [data-lec="son"].is-muet { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4z' fill='black'/><path d='M16 10l4 4M20 10l-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
.pf-lecteur-bar [data-lec="vit"] { width: auto; padding: 0 6px; }
.pf-lecteur-bar [data-lec="pip"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='2'/><rect x='12' y='12' width='7' height='5' fill='black'/></svg>"); }
.pf-lecteur-bar [data-lec="dl"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4v10M8 10l4 4 4-4M5 20h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.pf-lecteur-menu {
  position: fixed; z-index: 220; min-width: 210px;
  margin: 0; padding: 6px;
  background: #1e2021; color: #eceae7;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.pf-lecteur-menu[hidden] { display: none; }
.pf-lecteur-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; color: inherit; border: 0;
  border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 14px; cursor: pointer;
}
.pf-lecteur-menu button:hover, .pf-lecteur-menu button.is-on { background: #1a2330; color: #fff; }
.pf-lecteur-menu button.is-on { color: #79c0ff; }
.pf-lecteur-menu-vit { display: flex; gap: 4px; padding: 4px; }
.pf-lecteur-menu-vit button { text-align: center; flex: 1; }
.pf-media-voir-cadre img {
  max-width: min(86vw, 640px); max-height: 78vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 12px; background: #121314;
}
.pf-media-voir-x {
  position: absolute; top: 18px; right: 18px;
  background: #1e2021; color: #eceae7;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 8px 14px; font: inherit; cursor: pointer;
}
.pf-media-voir-x:hover { background: #316dca; border-color: #316dca; }
.pf-media-voir-nom {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  margin: 0; text-align: center; color: #c0beb7; font-size: 13px;
}
.pf-media-visuel { position: relative; display: block; min-width: 0; }
.pf-media-outils {
  display: flex; background: #1e2021;
  border-top: 1px solid rgba(255,255,255,.12);
}
.pf-media-outils button {
  flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 0;
  background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 4px;
}
.pf-media-outils button + button { box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
.pf-media-move { color: #f0c14a; }
.pf-media-del { color: #ff8b84; }
.pf-media-cover { color: #79c0ff; }
.pf-media-move:hover { background: rgba(240, 166, 60, .16); }
.pf-media-del:hover { background: rgba(248, 81, 73, .18); }
.pf-media-cover:hover { background: rgba(88, 166, 255, .16); }
.pf-media-del::before,
.pf-media-move::before,
.pf-media-cover::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.pf-media-del::before { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 4h6l1 2h5v2H3V6h5l1-2zm1 6h2v8h-2v-8zm4 0h2v8h-2v-8zM8 10h2v8H8v-8z'/></svg>"); }
.pf-media-move::before { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2h8.5A1.5 1.5 0 0 1 21 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5v-11z'/></svg>"); }
.pf-media-cover::before { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm2.2 11h11.6l-3.4-4.2-2.4 2.6L9.6 12 6.2 16zM8.5 10A1.5 1.5 0 1 0 8.5 7a1.5 1.5 0 0 0 0 3z'/></svg>"); }
@container (max-width: 136px) {
  .pf-media-outils button { font-size: 11px; gap: 0; }
  .pf-media-outils button::before { display: none; }
}
.pf-media-outils:has(button:nth-child(3)) button { font-size: 11px; gap: 0; padding: 0 2px; }
.pf-media-outils:has(button:nth-child(3)) button::before { display: none; }

.pf-dossiers-barre { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.pf-dossiers { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; padding: 8px 8px 0 0; }
.pf-dossier-puce { position: relative; display: inline-flex; }
.pf-dossier, .pf-dossier-tous {
  display: flex; align-items: center; gap: 8px;
  background: #1e2021; color: #eceae7; border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 6px 10px; cursor: pointer; font: inherit; text-align: left;
  flex: 0 0 auto;
}
.pf-dossier-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pf-dossier-fiche {
  display: inline-flex; align-items: center; gap: 10px;
  background: #1e2021; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 8px 10px; margin: 0 0 10px;
}
.pf-dossier-fiche strong { display: block; font-size: 14px; }
.pf-dossier-fiche small, .pf-dossier small { color: #98958d; font-size: 11px; }
.pf-dossier-pp--lg { width: 44px; height: 44px; border-radius: 10px; }
.pf-dossier-cle {
  width: 32px; height: 32px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(240,166,60,.45); background: #121314; flex: 0 0 auto;
  display: grid; place-items: center;
}
.pf-dossier-puce .pf-dossier-cle {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 7px;
}
.pf-dossier-cle::before, .pf-wizard-cle::before {
  content: ""; display: block; width: 16px; height: 16px; background: #f0a63c;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.7 19.3l-9.1-9.1a5.5 5.5 0 0 1-7.2-7.1L9.8 6.5 7.5 8.8 4.1 5.4a5.5 5.5 0 0 1 7.1 7.2l9.1 9.1a1.2 1.2 0 0 0 1.7 0l.7-.7a1.2 1.2 0 0 0 0-1.7z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.7 19.3l-9.1-9.1a5.5 5.5 0 0 1-7.2-7.1L9.8 6.5 7.5 8.8 4.1 5.4a5.5 5.5 0 0 1 7.1 7.2l9.1 9.1a1.2 1.2 0 0 0 1.7 0l.7-.7a1.2 1.2 0 0 0 0-1.7z'/></svg>") center / contain no-repeat;
}
.pf-dossier-puce .pf-dossier-cle::before { width: 13px; height: 13px; }
.pf-dossier-cle.is-on, .pf-dossier-cle:hover { border-color: #f0a63c; }
.pf-dossier-reglages {
  width: 260px; max-width: 100%;
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 14px; padding: 12px;
  background: #1e2021; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
}
.pf-dossier-reglages[hidden] { display: none; }
.pf-dossier-reglages label { display: flex; flex-direction: column; gap: 4px; color: #98958d; font-size: 12px; }
.pf-dossier-reglages p { margin: 4px 0 0; color: #98958d; font-size: 12px; }
.pf-dossier-apercus { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-dossier-apercus button {
  width: 42px; height: 42px; padding: 0; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background: #121314; cursor: pointer;
}
.pf-dossier-apercus button.is-on { border-color: #f0a63c; }
.pf-dossier-apercus img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-dossier-apercus span { color: #8b949e; font-size: 12px; }
.pf-dossier-reglages-act { display: flex; gap: 8px; }
.pf-dossier-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; width: max-content; max-width: 100%; }
.pf-dossier.is-on, .pf-dossier-tous.is-on, .pf-dossier.is-drop, .pf-dossier-tous.is-drop {
  border-color: var(--dossier, #58a6ff); background: #1a2330;
}
.pf-dossier-pp {
  width: 36px; height: 36px; border-radius: 8px; overflow: hidden;
  background: var(--dossier, #316dca); color: #fff;
  display: grid; place-items: center; font-weight: 650; flex: 0 0 auto;
}
.pf-dossier-pp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-dossier-nom { display: block; font-size: 13px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-dossier small { display: block; color: #98958d; font-size: 11px; }
.pf-couleurs { display: flex; gap: 6px; }
.pf-pastille { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.pf-pastille.is-on { border-color: #fff; }
#pf-media-grid.pf-media-pile { display: flex; flex-direction: column; gap: 22px; }
.pf-media-bloc h3 { margin: 0 0 8px; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.pf-media-bloc h3 span { color: #8b949e; font-size: 12px; font-weight: 500; }
.pf-media-aucun { margin: 0; color: #8b949e; font-size: 12px; }
.pf-ranger-vide { margin: 4px 8px; color: #98958d; font-size: 12px; }
#pf-media-ranger { position: fixed; z-index: 230; }

.pf-plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pf-plan {
  background: #1e2021; border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 16px;
}
.pf-plan.is-on { border-color: #58a6ff; background: #1a2330; }
.pf-plan h3 { margin: 0 0 6px; font-size: 16px; }
.pf-plan p { margin: 0 0 8px; color: #98958d; font-size: 13px; }
.pf-plan-price { color: #eceae7 !important; font-size: 20px !important; }
.pf-plan-price small { font-size: 12px; color: #98958d; }
.pf-plan-now { color: #79c0ff; font-size: 13px; }
.pf-assist { position: relative; overflow: visible; margin: 22px 0 16px; padding: 14px; background: #1e2021; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.pf-axo {
  position: absolute; top: -8px; right: 18px; width: 108px; height: auto;
  pointer-events: none; z-index: 2; overflow: visible;
}
.pf-axo-scene {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: pf-axo-saut 12s ease-in-out infinite;
}
.pf-axo-patte {
  transform-box: fill-box; transform-origin: 30% 0%;
  animation: pf-axo-tape 12s ease-in-out infinite;
}
.pf-axo-yeux {
  transform-box: fill-box; transform-origin: center;
  animation: pf-axo-cligne 12s linear infinite;
}
.pf-axo-ouie { transform-box: fill-box; transform-origin: 80% 80%; animation: pf-axo-ouie 1.7s ease-in-out infinite; }
.pf-axo-ouie--d { transform-origin: 20% 80%; animation-direction: alternate-reverse; }
.pf-axo-fil { transform-box: fill-box; transform-origin: 0% 40%; animation: pf-axo-fil 2.4s ease-in-out infinite; }
.pf-axo-toc { animation: pf-axo-toc 12s linear infinite; }
@keyframes pf-axo-saut {
  0%, 14% { transform: translateY(0); }
  18% { transform: translateY(2px) scaleY(0.94); }
  24% { transform: translateY(-18px) scaleY(1.04); }
  29% { transform: translateY(0) scale(1.04, 0.9); }
  34%, 41% { transform: none; }
  46%, 66% { transform: translate(2px, 5px) rotate(8deg); }
  74%, 100% { transform: none; }
}
@keyframes pf-axo-tape {
  0%, 42%, 68%, 100% { transform: rotate(0deg); }
  45%, 53%, 61% { transform: rotate(34deg); }
  49%, 57%, 65% { transform: rotate(-8deg); }
}
@keyframes pf-axo-cligne {
  0%, 7%, 9.2%, 35%, 37.2%, 79%, 81.2%, 100% { transform: scaleY(1); }
  8%, 36%, 80% { transform: scaleY(0.08); }
}
@keyframes pf-axo-ouie {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(7deg); }
}
@keyframes pf-axo-fil {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}
@keyframes pf-axo-toc {
  0%, 44%, 46.5%, 52%, 54.5%, 60%, 62.5%, 66%, 100% { opacity: 0; }
  45%, 53%, 61% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-axo-scene, .pf-axo-patte, .pf-axo-yeux, .pf-axo-ouie, .pf-axo-fil, .pf-axo-toc { animation: none; }
}
.pf-assist label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #eceae7; }
.pf-assist textarea { width: 100%; min-height: 72px; resize: vertical; padding-right: 96px; }
.pf-assist .pf-btn { margin-top: 10px; }
.pf-assist-edit { margin: 0 0 12px; padding: 10px; background: #181a1b; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }
.pf-assist-edit label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: #eceae7; }
.pf-assist-edit textarea { width: 100%; min-height: 76px; resize: vertical; }
.pf-assist-edit .pf-btn { margin-top: 8px; }
.pf-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
body:has(#pf-session) .pf-chat { display: none; }
.pf-chat-ouvre {
  position: relative; width: 58px; height: 58px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(88,166,255,.5);
  background: #1e2021; color: #58a6ff; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  display: grid; place-items: center;
}
.pf-chat-ouvre:hover { background: #243044; border-color: #58a6ff; }
.pf-chat-badge {
  position: absolute; top: 8px; right: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #58a6ff; box-shadow: 0 0 0 2px #1e2021;
}
.pf-chat-badge[hidden] { display: none; }
.pf-chat-panneau {
  width: min(360px, calc(100vw - 28px));
  height: min(480px, calc(100vh - 108px));
  display: flex; flex-direction: column;
  background: #1e2021; color: #eceae7;
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow: hidden;
}
.pf-chat-panneau[hidden] { display: none; }
.pf-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 10px 12px 14px;
  background: #181a1b; border-bottom: 1px solid rgba(255,255,255,.08);
}
.pf-chat-head strong { font-size: 14px; }
.pf-chat-head button {
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: #eceae7; cursor: pointer; font-size: 20px; line-height: 1;
}
.pf-chat-head button:hover { background: rgba(255,255,255,.06); }
.pf-chat .pf-assist-fil { flex: 1; margin: 0; max-height: none; padding: 12px; }
.pf-chat-form {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px; border-top: 1px solid rgba(255,255,255,.08);
}
.pf-chat-form textarea {
  flex: 1; min-height: 44px; max-height: 96px; resize: none;
  background: #121314; color: #eceae7; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px;
}
.pf-chat-form .pf-btn { margin: 0; flex: 0 0 auto; }
.pf-assist-fil {
  display: flex; flex-direction: column; gap: 8px;
  overflow: auto;
}
.pf-assist-msg {
  max-width: 88%; padding: 8px 10px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
  background: #121314;
}
.pf-assist-msg p { margin: 0; font-size: 13px; line-height: 1.45; color: #eceae7; white-space: pre-wrap; }
.pf-assist-qui { display: block; margin-bottom: 3px; font-size: 11px; letter-spacing: .02em; }
.pf-assist-msg--toi { align-self: flex-end; background: #1a2330; border-color: rgba(88,166,255,.4); border-bottom-right-radius: 4px; }
.pf-assist-msg--toi .pf-assist-qui { color: #79c0ff; }
.pf-assist-msg--assist { align-self: flex-start; border-bottom-left-radius: 4px; }
.pf-assist-msg--assist .pf-assist-qui { color: #f0c14a; }
.pf-assist-msg.is-attente p { color: #98958d; }
.pf-assist-choix { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 100%; }
.pf-assist-choix button {
  border: 1px solid rgba(88,166,255,.45); background: #1a2330; color: #eceae7;
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.pf-assist-choix button:hover { border-color: #58a6ff; background: #243044; }
.pf-assist-choix button:disabled { opacity: .45; cursor: default; }
.pf-pack { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 4px; }
.pf-pack strong { min-width: 88px; text-align: center; font-size: 18px; color: #eceae7; }

.pf-secret-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.pf-secret-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #98958d; min-width: 220px; }
.pf-secret { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.pf-secret code { color: #c0beb7; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

#pf-menu-droit {
  position: fixed; z-index: 90; min-width: 220px; max-height: min(70vh, 480px); overflow: auto;
  margin: 0; padding: 6px;
  background: #1e2021; color: #eceae7;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
#pf-menu-droit button {
  display: block; width: 100%; text-align: left;
  background: transparent; color: inherit; border: 0;
  border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 14px;
  cursor: pointer;
}
#pf-menu-droit button:hover { background: #1a2330; color: #fff; }
#pf-menu-droit button.danger { color: #f0a8a0; }
#pf-menu-droit button.danger:hover { background: rgba(240, 168, 160, .12); }
#pf-menu-droit .sep { height: 1px; margin: 6px 4px; background: rgba(255, 255, 255, .1); }

.pf-setup { max-width: 760px; }
.pf-setup-stage {
  background: #121314;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  overflow: hidden;
}
.pf-setup-stage[data-scene="cable"],
.pf-setup-stage[data-scene="trust"],
.pf-setup-stage[data-scene="poser"] { background: #121314; }
.pf-setup-plug, .pf-setup-trustscene { display: none; }
.pf-setup-stage[data-scene="cable"] .pf-setup-svg,
.pf-setup-stage[data-scene="trust"] .pf-setup-svg,
.pf-setup-stage[data-scene="poser"] .pf-setup-svg { display: none; }
.pf-setup-demon { display: none; }
.pf-setup-stage[data-scene="poser"] .pf-setup-demon,
.pf-setup-stage[data-scene="cable"] .pf-setup-plug,
.pf-setup-stage[data-scene="trust"] .pf-setup-trustscene {
  display: block;
  position: relative;
  height: 560px;
  overflow: hidden;
  background: #121314;
}
.pf-iphone {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 200px;
  height: 408px;
  margin-left: -100px;
  border-radius: 38px;
  background: #1c1c1e;
  box-shadow:
    0 18px 40px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.16);
  z-index: 2;
}
.pf-iphone-screen {
  position: absolute;
  inset: 8px;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(90% 42% at 78% 8%, #4a1024 0%, transparent 58%),
    radial-gradient(70% 36% at 18% 22%, #ff4d6d 0%, transparent 62%),
    radial-gradient(80% 34% at 72% 46%, #ff2d55 0%, transparent 60%),
    radial-gradient(90% 32% at 12% 62%, #e11d74 0%, transparent 58%),
    radial-gradient(100% 36% at 70% 72%, #7c4dff 0%, transparent 55%),
    radial-gradient(120% 48% at 40% 100%, #2f6bff 0%, #1d4ed8 55%, transparent 78%),
    linear-gradient(#2a0a16, #be123c 30%, #7c3aed 62%, #1d4ed8);
}
.pf-iphone-island {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 48px;
  height: 16px;
  margin-left: -24px;
  border-radius: 10px;
  background: #0c0c0e;
  z-index: 3;
}
.pf-iphone-status {
  position: absolute;
  top: 11px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  max-width: 52px;
  z-index: 2;
}
.pf-iphone-status svg { height: 8px; width: auto; fill: #fff; display: block; }
.pf-home-clock {
  position: absolute;
  top: 12px;
  left: 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}
.pf-home-screen {
  background: linear-gradient(#1a3a7a, #0b1d4a 42%, #071228);
}
.pf-home-apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 8px;
  padding: 48px 16px 0;
}
.pf-home-apps span {
  aspect-ratio: 1;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.pf-trust-dialog {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 18px;
  background: #f2f2f7;
  color: #1c1c1e;
  border-radius: 14px;
  text-align: center;
  overflow: hidden;
  z-index: 3;
}
.pf-trust-dialog strong { display: block; padding: 14px 12px 4px; font-size: 13px; }
.pf-trust-dialog p { margin: 0; padding: 0 12px 12px; font-size: 10px; line-height: 1.35; color: #3a3a3c; }
.pf-trust-actions { display: flex; border-top: 1px solid rgba(60,60,67,.2); }
.pf-trust-actions span {
  flex: 1;
  padding: 10px 4px;
  color: #007aff;
  font-size: 13px;
}
.pf-trust-actions span + span { border-left: 1px solid rgba(60,60,67,.2); }
.pf-trust-go { position: relative; animation: pf-trust-press 2.6s ease-in-out infinite; }
.pf-trust-finger {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  left: 16%;
  bottom: -6px;
  pointer-events: none;
  animation: pf-trust-tap 2.6s ease-in-out infinite;
}
@keyframes pf-trust-tap {
  0%, 14% { transform: translate(18px, -36px); opacity: 0; }
  40% { opacity: 1; transform: translate(0, -10px); }
  52% { transform: translate(0, 0) scale(.92); }
  70%, 100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes pf-trust-press {
  0%, 48% { background: transparent; }
  54%, 68% { background: rgba(0,122,255,.16); }
  100% { background: transparent; }
}
.pf-iphone-date {
  margin: 52px 0 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.pf-iphone-time {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 68px;
  font-weight: 200;
  letter-spacing: -2px;
  line-height: .95;
}
.pf-iphone-widgets {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.pf-iphone-widgets span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.pf-iphone-torch, .pf-iphone-cam {
  position: absolute;
  bottom: 28px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2f6bff;
}
.pf-iphone-torch { left: 18px; }
.pf-iphone-cam { right: 18px; }
.pf-iphone-torch::before, .pf-iphone-cam::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 9px auto 0;
  background: #fff;
}
.pf-iphone-torch::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 2h6l-1 7h3L10 22l1-8H8z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 2h6l-1 7h3L10 22l1-8H8z'/></svg>") center / contain no-repeat;
}
.pf-iphone-cam::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 7l1.2-2h3.6L15 7h3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm3 3.2a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 7l1.2-2h3.6L15 7h3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm3 3.2a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6z'/></svg>") center / contain no-repeat;
}
.pf-iphone-home {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 92px;
  height: 4px;
  margin-left: -46px;
  border-radius: 4px;
  background: rgba(255,255,255,.92);
}
.pf-iphone-port {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 16px;
  height: 5px;
  margin-left: -8px;
  border-radius: 3px;
  background: #050506;
  box-shadow: inset 0 1px 1px #000;
  z-index: 3;
}
.pf-plug {
  position: absolute;
  left: 50%;
  top: 412px;
  width: 44px;
  margin-left: -22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  animation: pf-plug 2.8s cubic-bezier(.45, .05, .25, 1) infinite;
}
.pf-plug--fixe { animation: none; transform: none; }
.pf-demon-voile {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px 28px;
  animation: pf-voile 3s ease-in-out infinite;
}
.pf-demon-voile strong {
  color: #3fb950;
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}
@keyframes pf-voile {
  0%, 18% { opacity: 0; }
  42%, 78% { opacity: 1; }
  100% { opacity: 0; }
}
.pf-setup-tips { margin: 14px 0 0; padding: 0; list-style: none; color: #c0beb7; font-size: 13px; line-height: 1.45; }
.pf-setup-tips li { margin: 0 0 6px; }
.pf-plug-tongue {
  width: 16px;
  height: 9px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(#f5f5f7, #b0b0b6 55%, #6e6e74);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}
.pf-plug-shell {
  width: 26px;
  height: 18px;
  margin-top: -1px;
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(#fff, #e8e8ed);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.pf-plug-wire {
  width: 14px;
  height: 150px;
  margin-top: -1px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #dcdce2, #fff 38%, #fff 62%, #d5d5db);
}
@keyframes pf-plug {
  0%, 14% { transform: translateY(52px); }
  48%, 74% { transform: translateY(0); }
  100% { transform: translateY(52px); }
}
.pf-setup-svg { width: 100%; height: auto; display: block; }
.pf-setup-pc > rect:first-child,
.pf-setup-phone > rect:first-child {
  fill: #1e2021;
  stroke: rgba(255,255,255,.18);
  stroke-width: 2;
}
.pf-setup-lcd { fill: #101418; }
.pf-setup-stage[data-scene="cable"] .pf-setup-phone .pf-setup-lcd,
.pf-setup-stage[data-scene="poser"] .pf-setup-pc .pf-setup-lcd { fill: #152033; }
.pf-setup-port { fill: #58a6ff; }
.pf-setup-cable {
  fill: none;
  stroke: #58a6ff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
}
.pf-setup-stage[data-scene="cable"] .pf-setup-cable { animation: pf-cable 1.1s linear infinite; }
.pf-setup-trust, .pf-setup-finger, .pf-setup-check, .pf-setup-packet { opacity: 0; }
.pf-setup-trust rect { fill: #1a2330; stroke: #316dca; }
.pf-setup-trust-btn { fill: #316dca; stroke: none; }
.pf-setup-trust text { fill: #eceae7; font-size: 11px; font-family: "Segoe UI", sans-serif; }
.pf-setup-trust-label { fill: #fff; font-size: 12px; }
.pf-setup-check circle { fill: #3fb950; }
.pf-setup-check path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pf-setup-finger circle { fill: rgba(236,234,231,.9); }
.pf-setup-packet { fill: #79c0ff; offset-path: path("M241 168 C 310 168, 360 250, 514 268"); }
.pf-setup-stage[data-scene="trust"] .pf-setup-trust { opacity: 1; }
.pf-setup-stage[data-scene="trust"] .pf-setup-finger {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: pf-tap 1.7s ease-in-out infinite;
}
.pf-setup-stage[data-scene="poser"] .pf-setup-packet { animation: pf-packet 1.8s ease-in-out infinite; }
.pf-setup-stage[data-scene="poser"] .pf-setup-check { animation: pf-check 1.8s ease-in-out infinite; }
.pf-setup-dots { display: flex; gap: 8px; margin: 12px 0; }
.pf-setup-dots button {
  background: #1e2021; color: #c0beb7; border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.pf-setup-dots button.is-on { background: #1a2330; color: #fff; border-color: #58a6ff; }
.pf-setup-caption { margin: 0 0 16px; color: #eceae7; font-size: 15px; line-height: 1.45; min-height: 2.8em; }
.pf-setup-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.pf-setup-nom { display: flex; flex-direction: column; gap: 6px; color: #98958d; font-size: 12px; min-width: 180px; }
.pf-setup-etat { margin: 12px 0 0; color: #98958d; font-size: 13px; line-height: 1.4; }
.pf-dd2-logo {
  width: 18px; height: 18px; flex: 0 0 auto; color: #eceae7;
  display: grid; place-items: center;
}
.pf-dd2-logo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.pf-dd2-opt, .pf-dd2-label { display: flex; align-items: center; gap: 8px; }
.pf-ecran-taille { display: flex; gap: 6px; }
.pf-ecran-taille button {
  background: #1e2021; color: #c0beb7; border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.pf-ecran-taille button.is-on { background: #1a2330; color: #fff; border-color: #58a6ff; }
.pf-screens { display: flex; flex-wrap: wrap; gap: 16px; }
.pf-screens[data-taille="petit"] .pf-ecran { width: 120px; }
.pf-screens[data-taille="petit"] .pf-ecran-phone { height: 214px; border-radius: 22px; }
.pf-screens[data-taille="grand"] .pf-ecran { width: 260px; }
.pf-screens[data-taille="grand"] .pf-ecran-phone { height: 462px; }
.pf-ecran { width: 180px; }
.pf-ecran-phone {
  height: 320px; border-radius: 28px; background: #1c1c1e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  padding: 10px;
}
.pf-ecran-glass {
  height: 100%; border-radius: 20px; background: #121314;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 16px; text-align: center;
}
.pf-ecran-glass strong { font-size: 14px; }
.pf-ecran-glass span { color: #58a6ff; font-size: 12px; }
.pf-ecran-glass p, .pf-ecran > p { margin: 8px 0 0; color: #98958d; font-size: 12px; line-height: 1.35; }
.pf-market-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.pf-market-filtres .pf-input { flex: 1 1 180px; min-width: 160px; }
.pf-market-filtres button {
  display: inline-flex; align-items: center; justify-content: center;
  background: #1e2021; color: #c0beb7; border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
}
.pf-market-card > .pf-btn {
  width: 100%; justify-content: center; text-align: center;
}
.pf-market-filtres button.is-on { background: #1a2330; color: #fff; border-color: #58a6ff; }
.pf-market { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pf-market-card {
  background: #1e2021; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.pf-market-card h3 { margin: 0; font-size: 16px; }
.pf-market-card p { margin: 0; color: #98958d; font-size: 13px; line-height: 1.4; flex: 1; }
.pf-market-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-badge {
  font-size: 11px; color: #c0beb7; border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 3px 8px;
}
.pf-badge--ok { background: #3fb950; color: #04140a; border-color: transparent; font-weight: 700; }
.pf-badge--prop { background: #316dca; color: #fff; border-color: transparent; font-weight: 700; }
.pf-logo { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; background: #121314 center / 16px no-repeat; }
.pf-logo--ig {
  background-color: #d6249f;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='white' stroke-width='2'/><circle cx='12' cy='12' r='4' fill='none' stroke='white' stroke-width='2'/><circle cx='17.5' cy='6.5' r='1.1' fill='white'/></svg>"),
    radial-gradient(circle at 30% 108%, #fdf497 0%, #fd5949 42%, #d6249f 62%, #285AEB 92%);
  background-size: 16px 16px, cover;
  background-repeat: no-repeat;
  background-position: center;
}
.pf-logo--x {
  background-color: #000;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M4 4h4.2l3.7 5.2L16.2 4H20l-6.2 8.1L20.4 20h-4.2l-4-5.6L7.6 20H3.6l6.6-8.6z'/></svg>");
  background-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.pf-logo--fb {
  background-color: #1877F2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M14.2 20v-7h2.4l.4-2.6h-2.8V8.7c0-.8.2-1.3 1.4-1.3H17V5.1C16.7 5 15.8 5 14.8 5c-2.2 0-3.7 1.3-3.7 3.8v1.6H8.6V13h2.5v7z'/></svg>");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}
.pf-simple { max-width: 1120px; display: flex; flex-direction: column; gap: 18px; }
.pf-test-intro { margin: 0 0 14px; max-width: 720px; }
.pf-test-reseaux {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
  max-width: 920px;
}
.pf-test-reseau {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; box-sizing: border-box;
  text-align: left; cursor: pointer; font: inherit; margin: 0;
  -webkit-appearance: none; appearance: none;
  color: #eceae7; background: #1e2021; border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 16px 14px; transition: border-color .15s, background .15s;
}
.pf-test-reseau:hover:not(.is-bientot) { border-color: #58a6ff; background: #1a2330; }
.pf-test-reseau.is-bientot { opacity: .58; cursor: not-allowed; }
.pf-test-reseau-img {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
  background: #121314; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.pf-test-reseau-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pf-test-reseau-nom { display: block; font-size: 16px; font-weight: 700; color: #eceae7; }
.pf-test-reseau-resume { display: block; color: #98958d; font-size: 13px; line-height: 1.45; }
.pf-test-reseau-badge {
  display: inline-block; margin-top: 4px; font-size: 11px; font-style: normal; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase; color: #79c0ff;
}
.pf-test-plateforme { display: flex; flex-direction: column; gap: 12px; }
.pf-test-plateforme-entete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-test-plateforme-nom { font-size: 15px; font-weight: 700; color: #e4405f; letter-spacing: -.01em; }
.pf-simple-cartes { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.pf-simple-cartes > .pf-simple-carte:not(.pf-simple-carte--plus) { flex: 1 1 168px; max-width: 220px; }
.pf-simple-carte {
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left; cursor: pointer; font: inherit; color: #eceae7;
  background: #1e2021; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  padding: 12px;
}
.pf-simple-carte svg { width: 22px; height: 22px; flex: 0 0 auto; stroke: #58a6ff; fill: none; stroke-width: 1.7; margin-top: 2px; }
.pf-simple-carte strong { display: block; font-size: 14px; margin-bottom: 3px; color: #eceae7; }
.pf-simple-carte > span > span { display: block; color: #98958d; font-size: 12.5px; line-height: 1.35; }
.pf-simple-carte.is-on, .pf-simple-carte:hover { border-color: #58a6ff; background: #1a2330; }
.pf-simple-carte--plus {
  flex: 0 0 auto; width: 48px; min-width: 48px; min-height: 48px; align-self: center;
  padding: 0; justify-content: center; align-items: center;
}
.pf-simple-carte--plus > span {
  font-size: 26px; font-weight: 300; line-height: 1; color: #79c0ff;
}
.pf-simple-carte--plus.is-on > span,
.pf-simple-carte--plus:hover > span { color: #a5d6ff; }
.pf-simple-corps { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 22px; align-items: start; }
@media (max-width: 980px) { .pf-simple-corps { grid-template-columns: 1fr; } }
.pf-simple-champs { display: grid; gap: 10px; margin-bottom: 12px; }
.pf-simple-champs label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #eceae7; }
.pf-simple-pas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-simple-pas li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #1e2021; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px;
}
.pf-simple-pas li > span,
.pf-simple-titre { font-size: 14px; flex: 1; min-width: 140px; }
.pf-simple-titre[data-replie-titre]:not([data-replie-titre=""]) { cursor: pointer; }
.pf-simple-titre[data-replie-titre]:not([data-replie-titre=""]):hover { color: #79c0ff; }
.pf-simple-detail {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.pf-simple-detail[hidden] { display: none !important; }
.pf-simple-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-left: auto;
}
.pf-simple-pas li.is-replie { padding: 8px 12px; }
.pf-simple-replie { color: #79c0ff !important; }
.pf-simple-replie:hover { color: #a5d6ff !important; }
.pf-simple-pas li.is-attente { animation: pf-simple-orange .8s ease-in-out infinite; }
.pf-simple-pas li.is-fait { border-color: #3fb950; background: #142018; }
.pf-simple-pas li.is-passe { opacity: .38; }
@keyframes pf-simple-orange {
  0%, 100% { border-color: rgba(240,166,60,.45); }
  50% { border-color: #f0a63c; background: #2a2214; }
}
.pf-simple-mot { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; }
.pf-simple-mot small { color: #79c0ff; font-size: 11px; }
.pf-simple-mot input, .pf-simple-mot textarea, .pf-simple-mini input {
  width: 100%; background: #121314; color: #eceae7; border: 1px solid rgba(88,166,255,.4);
  border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px;
}
.pf-simple-mini {
  display: flex; flex-direction: column; gap: 4px; min-width: 168px; flex: 1 1 168px;
  color: #79c0ff; font-size: 12px;
}
.pf-simple-ms em { color: #98958d; font-style: normal; font-size: 11px; letter-spacing: .01em; }
.pf-ms {
  display: flex; align-items: center; background: #121314;
  border: 1px solid rgba(88,166,255,.45); border-radius: 10px; overflow: hidden;
}
.pf-ms input { border: 0; background: transparent; border-radius: 0; box-shadow: none; }
.pf-ms b {
  flex: 0 0 auto; margin-right: 8px; color: #58a6ff; font-size: 12px; font-weight: 650;
  background: #1a2330; border-radius: 6px; padding: 3px 7px;
}
.pf-simple-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #eceae7; }
.pf-simple-reglages {
  flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
}
.pf-simple-ajout { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 320px; }
#pf-test-cat, #pf-test-action { flex: 1 1 240px; min-width: 220px; }
.pf-pick { position: relative; }
.pf-pick-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #121314; color: #eceae7; border: 1px solid rgba(88,166,255,.45);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px;
  cursor: pointer; text-align: left;
}
.pf-pick-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pick-btn::after {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid #58a6ff; border-bottom: 2px solid #58a6ff;
  transform: rotate(45deg) translateY(-2px);
}
.pf-pick.is-open .pf-pick-btn { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,.16); }
.pf-pick-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(88,166,255,.28); }
.pf-pick-panneau {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  background: #181a1b; color: #eceae7; border: 1px solid rgba(88,166,255,.5);
  border-radius: 12px; box-shadow: 0 22px 48px rgba(0,0,0,.5); overflow: hidden; min-width: 260px;
  display: flex; flex-direction: column; max-height: min(360px, 70vh);
}
.pf-pick-panneau.is-fixe { position: fixed; z-index: 260; right: auto; }
.pf-pick.is-flip-haut .pf-pick-btn::after { transform: rotate(-135deg) translateY(2px); }
.pf-pick-cherche {
  display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 0; flex: 0 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.1); background: #121314; color: #eceae7;
  padding: 11px 12px; font: inherit; font-size: 14px;
}
.pf-pick-cherche::placeholder { color: #98958d; }
.pf-pick-cherche:focus { outline: none; box-shadow: inset 0 -2px 0 #58a6ff; }
.pf-pick-liste {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; scrollbar-width: thin; scrollbar-color: #316dca transparent;
  -webkit-overflow-scrolling: touch;
}
.pf-pick-groupe {
  padding: 10px 8px 4px; color: #79c0ff; font-size: 11px; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase;
}
.pf-pick-opt {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; color: #eceae7;
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; cursor: pointer;
}
.pf-pick-opt:hover { background: #1a2330; }
.pf-pick-opt.is-on { background: #316dca; color: #fff; }
.pf-pick-opt.is-on:hover { background: #388bfd; }
.pf-pick-vide { margin: 10px 8px; color: #98958d; font-size: 13px; }
.pf-simple-passer {
  border: 0; background: transparent; color: #98958d; cursor: pointer;
  font: inherit; font-size: 12px; padding: 4px 2px;
}
.pf-simple-poignee {
  width: 28px; height: 36px; flex: 0 0 auto; align-self: center; cursor: grab;
  border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background:
    radial-gradient(circle, #98958d 1.1px, transparent 1.3px) 7px 8px / 6px 6px,
    #121314;
  padding: 0;
}
.pf-simple-poignee:hover { border-color: #58a6ff; background-color: #1a2330; }
.pf-simple-poignee:active { cursor: grabbing; }
.pf-simple-pas li.is-drag { opacity: .4; }
.pf-simple-pas li.is-avant { box-shadow: inset 0 3px 0 #58a6ff; }
.pf-simple-pas li.is-apres { box-shadow: inset 0 -3px 0 #58a6ff; }
.pf-simple-suppr { color: #ff8b84; }
.pf-simple-suppr:hover { color: #ffb4af; }
.pf-simple-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.pf-simple-etat { min-height: 1.4em; color: #eceae7; font-size: 14px; margin-top: 8px; }
.pf-facile-aide { margin: 0 0 10px; font-size: 13px; color: #98958d; }
.pf-facile-expert-lien { margin: 8px 0 0; }
.pf-facile-champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #eceae7; }
.pf-facile-champ em { color: #98958d; font-style: normal; font-size: 12px; }
.pf-simple-champs--facile { margin-bottom: 8px; }
.pf-simple-outils--facile { margin-top: 14px; }
.pf-btn--facile {
  width: 100%; justify-content: center; padding: 14px 18px; font-size: 15px; border-radius: 12px;
}
.pf-simple-pas--facile { gap: 6px; }
.pf-simple-pas--facile li {
  flex-wrap: nowrap; padding: 10px 12px; gap: 12px; background: #181a1b; border-color: rgba(255,255,255,.08);
}
.pf-simple-num {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: #1a2330; color: #79c0ff; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.pf-simple-titre-facile { flex: 1; font-size: 14px; line-height: 1.35; color: #eceae7; }
.pf-simple-pas--facile li.is-passe { opacity: .45; }
.pf-simple-etat button { margin-left: 8px; }
.pf-phone-col { position: sticky; top: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pf-test-tel-outils {
  display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: 280px;
  padding: 10px 10px 9px; box-sizing: border-box;
  background: linear-gradient(180deg, #232528 0%, #1a1c1e 100%);
  border: 1px solid #3a3d40; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.pf-test-tel-pick {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: #98958d;
  display: flex; flex-direction: column; gap: 5px;
}
.pf-test-device-pick { width: 100%; z-index: 50; }
.pf-test-device-pick .pf-pick-btn {
  min-height: 34px; padding: 7px 12px; font-size: 13px; border-radius: 8px;
  background: #141618; border-color: #404449; text-transform: none; letter-spacing: 0;
  font-weight: 500; color: #eceae7;
}
.pf-test-device-pick .pf-pick-btn span { text-transform: none; letter-spacing: 0; }
.pf-test-device-pick .pf-pick-btn:hover { border-color: #52565c; }
.pf-test-device-pick .pf-pick-panneau { min-width: 100%; }
#pf-test-piloter {
  flex-shrink: 0; align-self: flex-end; height: 34px; margin: 0;
  padding: 0 12px; border-radius: 8px;
  border: 1px solid #404449; background: #141618;
  color: #eceae7; font-weight: 650; font-size: 12px;
  white-space: nowrap;
}
#pf-test-piloter:hover:not(:disabled) {
  border-color: #58a6ff; color: #79c0ff; background: #1a1f26;
}
#pf-test-piloter.is-on {
  background: rgba(52, 211, 153, .14); border-color: #34d399; color: #6ee7b7;
}
.pf-phone-ecran--live {
  background: #000; display: flex; align-items: center; justify-content: center; position: relative;
}
.pf-phone-ecran--live img {
  width: 100%; height: 100%; object-fit: contain; display: block; user-select: none;
}
.pf-phone--live.is-pilote .pf-phone-ecran--live img { cursor: crosshair; touch-action: none; }
.pf-phone-mock-vide {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
  font-size: 12px; line-height: 1.4; color: #8e8e8e; background: #111;
}
.pf-phone-mock-vide p { margin: 0; }
.pf-phone-mock-vide-txt { margin: 0; padding: 24px 12px; text-align: center; font-size: 12px; color: #8e8e8e; }
.pf-test-stream-etat { font-size: 11px; color: #98958d; margin: 0; text-align: center; max-width: 280px; min-height: 1.2em; }
.pf-test-stream-etat.is-warn { color: #f0a63c; }
.pf-timeline {
  width: 280px; display: grid; grid-template-columns: 36px 36px 1fr; gap: 6px 8px; align-items: center;
}
.pf-timeline-play { grid-column: 1; grid-row: 1; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #3a3d40; background: #222426; color: #eceae7; cursor: pointer; font-size: 12px; }
.pf-timeline-play:hover { border-color: #58a6ff; color: #58a6ff; }
.pf-timeline input[type="range"] { grid-column: 2 / -1; grid-row: 1; width: 100%; accent-color: #58a6ff; cursor: pointer; }
.pf-timeline-pas { width: 36px; height: 26px; border-radius: 8px; border: 1px solid #3a3d40; background: #222426; color: #eceae7; cursor: pointer; font-size: 11px; }
.pf-timeline-pas:hover { border-color: #58a6ff; color: #58a6ff; }
#pf-test-avant { grid-column: 1; grid-row: 2; }
#pf-test-apres { grid-column: 2; grid-row: 2; }
#pf-test-temps { grid-column: 3; grid-row: 2; color: #98958d; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-phone {
  width: 280px; height: 572px; padding: 11px; border-radius: 44px; position: relative;
  background: linear-gradient(165deg, #4a4a4e 0%, #1a1a1c 28%, #0c0c0e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 3px #0a0a0a, 0 28px 60px rgba(0,0,0,.5);
}
.pf-phone::before, .pf-phone::after {
  content: ""; position: absolute; left: -2px; width: 3px; border-radius: 2px; background: #2a2a2c;
}
.pf-phone::before { top: 110px; height: 28px; box-shadow: 0 46px 0 #2a2a2c; }
.pf-phone::after { top: 188px; height: 54px; }
.pf-phone-ile {
  position: absolute; z-index: 3; top: 18px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 24px; border-radius: 20px; background: #000;
}
.pf-phone-ecran {
  height: 100%; border-radius: 32px; overflow: hidden; background: #000; position: relative;
}
@font-face {
  font-family: "Noctus Script";
  src: url("/fonts/GrandHotel-Regular.woff2") format("woff2");
  font-display: swap;
}
.pf-ig { height: 100%; background: #fff; color: #111; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; position: relative; }
.pf-ig-live { font-size: 14px; letter-spacing: -.01em; }
.pf-ig > * { flex-shrink: 0; }
.pf-ig > .pf-ig-corps { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: none; }
.pf-ig > .pf-ig-corps::-webkit-scrollbar { display: none; }
.pf-ig--sombre { background: #000; color: #fff; }
.pf-ig-barre {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 10px 16px 2px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.pf-ig-entete { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; padding: 0 10px 4px; }
.pf-ig-entete--fil { padding-bottom: 2px; }
.pf-ig-logo-row { display: flex; align-items: center; justify-content: center; gap: 0; }
.pf-ig-word { font-family: "Noctus Script", "Segoe Script", cursive; font-size: 24px; font-weight: 400; line-height: 1; }
.pf-ig-coeur-top {
  justify-self: end; border: 0; background: transparent; padding: 2px 0; margin: 0;
  display: grid; place-items: center; color: #111;
}
.pf-ig-coeur-top .pf-ig-ico { width: 24px; height: 24px; }
.pf-ig-profil { padding: 4px 12px 8px; }
.pf-ig-profil-nom { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; font-size: 13px; }
.pf-ig-profil-nom b { text-align: center; }
.pf-ig-profil-fin { display: flex; gap: 8px; font-size: 14px; }
.pf-ig-displayname { font-size: 12px; font-weight: 750; margin-top: 4px; }
.pf-ig-bio { font-size: 11px; color: #444; margin-top: 1px; }
.pf-ig-hl { display: flex; gap: 14px; padding: 8px 2px 2px; }
.pf-ig-hl small { display: block; text-align: center; font-size: 10px; color: #444; margin-top: 3px; }
.pf-ig-hl-new, .pf-ig-hl-cover { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.pf-ig-hl-new { border: 1px solid #ccc; font-size: 20px; }
.pf-ig-hl-cover { background: #111 center 18% / cover no-repeat; border: 1px solid #ddd; }
.pf-ig-onglets { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; border-top: 1px solid #efefef; }
.pf-ig-onglets span { text-align: center; padding: 5px 0 4px; color: #9a9a9a; font-size: 13px; }
.pf-ig-onglets .is-on { color: #111; box-shadow: inset 0 -1px 0 #111; }
.pf-ig-compte { display: grid; grid-template-columns: 54px repeat(3, 1fr); align-items: center; gap: 6px; margin-top: 6px; text-align: center; }
.pf-ig-compte strong { display: block; font-size: 13px; }
.pf-ig-compte small, .pf-ig-stories small { display: block; color: #737373; font-size: 10px; font-weight: 400; }
.pf-ig-profil-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.pf-ig-profil-btns span { background: #efefef; border-radius: 8px; text-align: center; font-size: 11px; font-weight: 650; padding: 6px; }
.pf-ig-voile { filter: grayscale(.15); opacity: .55; }
.pf-ig-poignee { display: block; width: 36px; height: 4px; border-radius: 4px; background: #ddd; margin: 4px auto 8px; }
.pf-ig-feuille-titre { text-align: center; font-weight: 750; font-size: 15px; margin-bottom: 6px; }
.pf-ig-feuille b { border-top: 1px solid #f2f2f2; text-align: left; padding: 11px 16px; }
.pf-ig-galerie-top { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; padding: 0 10px 8px; font-size: 14px; }
.pf-ig-galerie-top b { text-align: center; font-weight: 650; }
.pf-ig-caption-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 14px 8px; }
.pf-ig-ok { color: #0095f6; font-weight: 750; }
.pf-ig-chips { display: flex; gap: 6px; padding: 0 12px; }
.pf-ig-chips span { background: #efefef; border-radius: 8px; font-size: 11px; padding: 6px 8px; }
.pf-ig-outils { position: absolute; right: 8px; top: 8px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.pf-ig-outils span { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; font-size: 12px; }
.pf-ig-caption { position: absolute; left: 12px; bottom: 10px; color: #fff; font-size: 12px; opacity: .85; }
.pf-ig-partage { display: flex; gap: 6px; align-items: center; padding: 8px; background: #000; }
.pf-ig-pill { flex: 1; background: #262626; color: #fff; border-radius: 20px; text-align: center; font-size: 11px; font-weight: 650; padding: 8px 4px; }
.pf-ig-pill--amis { background: #12351f; }
.pf-ig-fleche { width: 34px; height: 34px; border-radius: 50%; background: #0095f6; color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.pf-ig-stickers { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: #1c1c1e; }
.pf-ig-stickers b { background: #fff; color: #111; border-radius: 16px; font-size: 12px; padding: 6px 10px; }
.pf-ig-pastille-lien { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); background: #fff; color: #111; border-radius: 8px; font-size: 12px; font-weight: 700; padding: 6px 10px; z-index: 2; }
.pf-ig-viewer { position: relative; flex: 1; min-height: 0; }
.pf-ig-viewer--dim { opacity: .45; }
.pf-ig-progress { position: absolute; left: 8px; right: 8px; top: 6px; height: 2px; background: rgba(255,255,255,.35); z-index: 2; }
.pf-ig-progress::after { content: ""; display: block; width: 40%; height: 100%; background: #fff; }
.pf-ig-viewer-top { position: absolute; left: 10px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.pf-ig-viewer-bas { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 10px 6px 8px; background: linear-gradient(transparent, rgba(0,0,0,.72)); font-size: 11px; font-weight: 650; }
.pf-ig-ligne { display: flex !important; justify-content: space-between; align-items: center; }
.pf-ig-ligne i { width: 16px; height: 16px; border: 1.5px solid #ccc; border-radius: 50%; }
.pf-ig-ligne i.is-coche { border-color: #111; background: radial-gradient(circle, #111 45%, transparent 48%); }
.pf-ig-vignette { width: 72px; height: 72px; margin: 8px auto; border-radius: 10px; overflow: hidden; }
.pf-ig-nom-une { text-align: center; font-size: 13px; margin-bottom: 8px; }
.pf-ig-reel-tabs { display: flex; justify-content: center; gap: 16px; font-size: 14px; padding-top: 4px; }
.pf-ig-reel-tabs b:first-child { border-bottom: 2px solid #fff; }
.pf-ig-route { position: absolute; left: 8%; right: 8%; top: 28%; height: 18px; background: #e2b100; transform: rotate(-8deg); border-radius: 2px; box-shadow: 0 70px 0 #e2b100; }
.pf-ig-route::after { content: ""; position: absolute; left: 10%; right: 10%; top: 7px; border-top: 2px dashed #111; }
.pf-ig-reel-side { position: absolute; right: 8px; bottom: 54px; display: flex; flex-direction: column; gap: 14px; font-size: 20px; text-align: center; }
.pf-ig-reel-side small { display: block; font-size: 10px; }
.pf-ig-reel-bas { position: absolute; left: 10px; right: 46px; bottom: 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.pf-ig-reel-bas em { margin-left: auto; font-style: normal; border: 1px solid #fff; border-radius: 6px; padding: 2px 8px; font-size: 11px; }
.pf-ig-find { width: 44px; height: 44px; border-radius: 50%; display: block; background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); position: relative; }
.pf-ig-find::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2px solid #fff; }
.pf-ig-portrait { height: 100%; min-height: 92px; background-color: #1c120e; background-position: center 20%; background-size: cover; background-repeat: no-repeat; }
.pf-ig-corps { flex: 1; min-height: 0; position: relative; }
.pf-ig-nav {
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: 46px; border-top: 1px solid #efefef; background: #fff; margin-top: auto;
}
.pf-ig-nav--sombre { background: #000; border-top-color: #222; }
.pf-ig-nav--sombre svg { stroke: #fff; }
.pf-ig-nav--sombre .is-on .pf-ig-nav-on { fill: #fff; stroke: none; }
.pf-ig-nav span { display: grid; place-items: center; }
.pf-ig-nav svg { width: 24px; height: 24px; stroke: #111; fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.pf-ig-nav .pf-ig-tab.is-on .pf-ig-nav-on { fill: #111; stroke: none; }
.pf-ig-nav-avatar {
  width: 24px; height: 24px; border-radius: 50%; display: block;
  background: #ddd center 16% / cover no-repeat; box-sizing: border-box;
  border: 1px solid transparent;
}
.pf-ig-tab--avatar.is-on .pf-ig-nav-avatar { border-color: #111; }
.pf-ig-nav .pf-ig-nav-on { display: none; }
.pf-ig-nav .is-on .pf-ig-nav-off { display: none; }
.pf-ig-nav .pf-ig-tab {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  display: grid; place-items: center; cursor: pointer; color: inherit; font: inherit;
}
.pf-ig-nav .pf-ig-tab .pf-ig-nav-on { display: none; }
.pf-ig-nav .pf-ig-tab.is-on .pf-ig-nav-off { display: none; }
.pf-ig-nav .pf-ig-tab.is-on .pf-ig-nav-on { display: block; fill: #111; stroke: none; }
.pf-ig-nav--sombre .pf-ig-tab.is-on .pf-ig-nav-on { fill: #fff; }
.pf-phone-ecran [data-ig] { cursor: pointer; }
.pf-ig-live button { font: inherit; cursor: pointer; }
.pf-ig-story-btn {
  border: 0; background: transparent; padding: 0; width: 72px; flex: 0 0 auto;
  color: #111; text-align: center; cursor: pointer;
}
.pf-ig-story-btn small { display: block; font-size: 10px; color: #262626; margin-top: 4px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-ig-photo {
  display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 280px; border: 0; padding: 0;
  background: #111 center / cover no-repeat; cursor: pointer;
}
.pf-ig-actions { display: flex; gap: 2px; padding: 4px 8px 0; }
.pf-ig-actions button {
  border: 0; background: transparent; font-size: 18px; padding: 2px 6px; color: #111;
}
.pf-ig-actions button:last-child { margin-left: auto; }
.pf-ig-actions .is-aime, .pf-ig-reel-side .is-aime { color: #ff3040; }
.pf-ig-likes { padding: 0 12px; font-size: 12px; font-weight: 750; }
.pf-ig-legende { padding: 2px 12px 8px; font-size: 12px; }
.pf-ig-legende b { margin-right: 4px; }
.pf-ig-searchbar {
  margin: 4px 12px 8px; background: #efefef; border-radius: 10px;
  padding: 8px 10px; color: #8e8e8e; font-size: 13px;
}
.pf-ig-explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pf-ig-explore {
  border: 0; padding: 0; height: 92px; background: #ddd center / cover no-repeat;
}
.pf-ig-dm-top { display: flex; justify-content: space-between; padding: 4px 14px 8px; font-size: 16px; }
.pf-ig-dm {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; background: transparent; padding: 8px 12px; color: #111;
}
.pf-ig-dm small { display: block; color: #8e8e8e; font-weight: 400; font-size: 12px; }
.pf-ig-story-plein {
  flex: 1; border: 0; padding: 0; min-height: 0; position: relative;
  background: #111 center / cover no-repeat; color: #fff;
}
.pf-ig-feuille--live { position: absolute; left: 0; right: 0; bottom: 46px; background: #fff; border-radius: 16px 16px 0 0; z-index: 2; }
.pf-ig-feuille--live button {
  display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid #f2f2f2;
  background: #fff; padding: 12px 16px; font-weight: 650;
}
.pf-ig-reel--pile > .pf-ig-reel-tabs,
.pf-ig-reel.pf-ig-reel--pile { cursor: pointer; }
.pf-ig-plus {
  width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid #111;
  display: grid; place-items: center; font-size: 18px; line-height: 1;
  background: transparent; padding: 0; color: #111; cursor: pointer;
}
.pf-ig-stories {
  display: flex; gap: 14px; padding: 6px 12px 10px; overflow-x: auto; scrollbar-width: none;
}
.pf-ig-stories::-webkit-scrollbar { display: none; }
.pf-ig-story-btn--static { cursor: default; }
.pf-ig-story-moi {
  position: relative; display: inline-block; width: 62px; height: 62px;
  border-radius: 50%; border: 1px solid #dbdbdb; padding: 2px; box-sizing: border-box;
}
.pf-ig-story-moi .pf-ig-face { border-width: 1px; }
.pf-ig-story-plus {
  position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  border-radius: 50%; background: #0095f6; color: #fff; border: 2px solid #fff;
  font-size: 14px; font-weight: 700; font-style: normal; line-height: 1;
  display: grid; place-items: center;
}
.pf-ig-find-wrap { display: inline-block; padding: 2px; border-radius: 50%; background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }
.pf-ig-find { width: 58px; height: 58px; margin: 0; display: grid; place-items: center; background: #fff; }
.pf-ig-find .pf-ig-ico--amis { width: 28px; height: 28px; stroke: #6228d7; fill: none; }
.pf-ig-find::after { display: none; }
.pf-ig-ico {
  width: 24px; height: 24px; fill: none; stroke: #262626; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}
.pf-ig-ico--trait path { fill: none; stroke: #262626; stroke-width: 1.75; }
.pf-ig-ico--plein { fill: currentColor; stroke: none; }
.pf-ig-ico--plein path { fill: currentColor; stroke: none; }
.pf-ig-ico--chev { width: 14px; height: 14px; stroke-width: 2; margin-top: 4px; }
.pf-ig-verif {
  display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px;
  border-radius: 50%; background: #0095f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M5.2 8.1 3.4 6.3l-.9.9 2.7 2.7 5.4-5.4-.9-.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 9px;
}
.pf-ig-pastille { display: inline-grid; width: 58px; height: 58px; padding: 2px; box-sizing: border-box; border-radius: 50%; background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }
.pf-ig-face { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; background-color: #ddd; background-position: center 16%; background-size: cover; background-repeat: no-repeat; }
.pf-ig-post { margin: 0 0 4px; border-bottom: 1px solid #efefef; padding-bottom: 8px; }
.pf-ig-post-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; font-size: 12px; font-weight: 700; }
.pf-ig-post-top .pf-ig-post-menu { margin-left: auto; border: 0; background: transparent; font-size: 16px; padding: 0 2px; color: #111; line-height: 1; }
.pf-ig-post-top--sugg { gap: 8px; align-items: flex-start; }
.pf-ig-post-top--sugg .pf-ig-post-menu { margin-left: 0; font-size: 18px; font-weight: 400; }
.pf-ig-post-meta { flex: 1; min-width: 0; font-weight: 400; }
.pf-ig-post-meta small { display: block; color: #737373; font-size: 11px; margin-top: 1px; }
.pf-ig-post-ligne { font-size: 12px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; }
.pf-ig-avatar-ring { display: inline-flex; padding: 2px; border-radius: 50%; background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }
.pf-ig-avatar-ring .pf-ig-avatar { border: 2px solid #fff; box-sizing: border-box; }
.pf-ig-btn-follow {
  border: 0; border-radius: 8px; background: #efefef; color: #111;
  font-size: 12px; font-weight: 650; padding: 6px 12px; flex-shrink: 0;
}
.pf-ig-carrousel { display: flex; justify-content: center; gap: 4px; padding: 8px 0 2px; }
.pf-ig-carrousel i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.pf-ig-carrousel i.is-on { background: #0095f6; }
.pf-ig-engage-row {
  display: flex; align-items: center; flex-wrap: nowrap;
  padding: 2px 8px 0; gap: 0 2px;
}
.pf-ig-engage {
  display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent;
  padding: 6px 3px; color: #262626; flex: 0 0 auto;
}
.pf-ig-engage-n {
  font-size: 12px; font-weight: 600; line-height: 1; color: #262626;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pf-ig-engage--save { margin-left: auto; padding-right: 6px; }
.pf-ig-engage--icone { padding-left: 2px; padding-right: 2px; }
.pf-ig-engage.is-aime { color: #ff3040; }
.pf-ig-engage.is-aime .pf-ig-ico--plein { fill: #ff3040; }
.pf-ig-live .pf-ig-legende--fil {
  margin: 0 !important; padding: 2px 12px 0 !important; border: 0 !important; background: transparent !important;
  font-size: 14px; line-height: 1.33; color: #262626;
}
.pf-ig-legende--fil b { font-weight: 700; margin-right: 4px; }
.pf-ig-mention { color: #00376b; text-decoration: none; font-weight: 400; }
.pf-ig-plus-txt { color: #737373; font-weight: 400; }
.pf-ig-date { display: block; padding: 0 12px 6px; font-size: 11px; color: #737373; }
.pf-ig-sugg-x {
  position: absolute; right: 6px; top: 4px; border: 0; background: transparent;
  font-size: 16px; color: #8e8e8e; line-height: 1; padding: 2px;
}
.pf-ig-sugg-row article { position: relative; }
.pf-ig-avatar { width: 26px; height: 26px; border-radius: 50%; background: #ddd center 16% / cover no-repeat; display: inline-block; }
.pf-ig-avatar--lg { width: 48px; height: 48px; }
.pf-ig-live .pf-ig-photo { height: auto; background-position: center; }
.pf-ig-actions { display: flex; gap: 14px; padding: 4px 12px 0; font-size: 15px; }
.pf-ig-likes { padding: 2px 12px 6px; font-size: 11px; font-weight: 750; }
.pf-ig-likes span { font-weight: 500; color: #555; }
.pf-ig-sugg { padding: 0 0 6px; }
.pf-ig-sugg-top { display: flex; justify-content: space-between; padding: 0 12px 4px; font-size: 12px; font-weight: 750; }
.pf-ig-sugg-top b { color: #0095f6; font-weight: 650; }
.pf-ig-sugg-row { display: flex; gap: 8px; padding: 0 12px 8px; }
.pf-ig-sugg-row article { width: 104px; border: 1px solid #efefef; border-radius: 8px; padding: 10px 6px 8px; text-align: center; }
.pf-ig-sugg-row i { width: 54px; height: 54px; border-radius: 50%; background: #eee center / cover no-repeat; display: block; margin: 0 auto 6px; }
.pf-ig-sugg-row b { display: block; font-size: 12px; font-weight: 750; }
.pf-ig-sugg-row small { display: block; margin-top: 2px; color: #8e8e8e; font-size: 10px; font-weight: 400; }
.pf-ig-sugg-row em { display: block; margin-top: 8px; background: #0095f6; color: #fff; border-radius: 8px; font-style: normal; font-weight: 750; font-size: 13px; padding: 6px 0; }
.pf-ig-grille--mur { padding: 0; gap: 1px; }
.pf-ig-media { position: absolute; inset: 0; background: #222 center / cover no-repeat; }
.pf-ig-media.is-play::before { content: ""; position: absolute; top: 5px; right: 5px; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 1px #000); }
.pf-ig-tuile em { position: absolute; left: 4px; bottom: 2px; z-index: 1; color: #fff; font-size: 10px; font-style: normal; text-shadow: 0 1px 2px #000; }
.pf-ig-cam { display: grid; place-items: center; color: #fff; background: #1a1a1a; font-size: 16px; }
.pf-ig-gal-meta, .pf-ig-gal-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 6px; font-size: 12px; }
.pf-ig-gal-meta span, .pf-ig-gal-bar span { background: #262626; border-radius: 8px; padding: 4px 8px; }
.pf-ig-feuille {
  position: absolute; left: 0; right: 0; bottom: 0; background: #fff;
  border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.12); padding: 8px 0 12px;
}
.pf-ig-feuille b { display: block; text-align: left; padding: 11px 16px; font-size: 14px; font-weight: 600; }
.pf-ig-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 8px; }
.pf-ig-tuile { aspect-ratio: 1; background: #111; position: relative; overflow: hidden; }
.pf-ig-tuile:nth-child(2) { background: #e7d3c4; }
.pf-ig-tuile:nth-child(3) { background: #c9d5c3; }
.pf-ig-tuile:nth-child(4) { background: #d5c9d8; }
.pf-ig-tuile:nth-child(5) { background: #c7c3b8; }
.pf-ig-tuile:nth-child(6) { background: #b7c6d4; }
.pf-ig-apercu { height: 220px; margin: 8px; border-radius: 8px; background: linear-gradient(160deg, #c5d5e4, #8ea4b8 45%, #d9c7b0); }
.pf-ig-composer .pf-ig-legende,
.pf-ig-clavier .pf-ig-legende {
  margin: 8px 12px; padding: 8px 10px; border-radius: 8px; background: #fafafa; border: 1px solid #eee; font-size: 13px; color: #888;
}
.pf-ig-btn {
  display: block; margin: 10px 12px; text-align: center; padding: 10px;
  border-radius: 10px; background: #0095f6; color: #fff; font-weight: 700; font-size: 14px;
}
.pf-ig-story { flex: 1; min-height: 0; position: relative; background: #1c120e; overflow: hidden; }
.pf-ig-story .pf-ig-portrait { position: absolute; inset: 0; }
.pf-ig-reel {
  flex: 1; margin: 0; color: #fff; position: relative; min-height: 0;
  background-color: #111; background-position: center 40%; background-size: cover; background-repeat: no-repeat;
}
.pf-ig-reel-zone { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pf-ig-reel--pile { position: relative; overflow: hidden; background: #111; }
.pf-ig-reel-piste { position: absolute; inset: 0; display: flex; flex-direction: column; transition: none; }
.pf-ig-reel-slide { flex: 0 0 100%; background-size: cover; background-position: center 35%; }
.pf-ig-reel--pousse.pf-ig-reel--up .pf-ig-reel-piste { animation: pf-reel-up .65s cubic-bezier(.25, .8, .35, 1) forwards; }
.pf-ig-reel--pousse.pf-ig-reel--down .pf-ig-reel-piste { animation: pf-reel-down .65s cubic-bezier(.25, .8, .35, 1) forwards; }
.pf-ig-reel--pousse.pf-ig-reel--left .pf-ig-reel-piste { animation: pf-reel-left .65s cubic-bezier(.25, .8, .35, 1) forwards; }
.pf-ig-reel--pousse.pf-ig-reel--right .pf-ig-reel-piste { animation: pf-reel-right .65s cubic-bezier(.25, .8, .35, 1) forwards; }
@keyframes pf-reel-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes pf-reel-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes pf-reel-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pf-reel-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.pf-ig-trace {
  position: absolute; z-index: 4; pointer-events: none; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.15));
  box-shadow: 0 0 12px rgba(255,255,255,.35);
}
.pf-ig-trace--up {
  left: 58%; bottom: 22%; width: 4px; height: 78px;
  transform-origin: bottom center;
  animation: pf-trace-up .85s ease-in-out infinite;
}
.pf-ig-trace--down {
  left: 58%; top: 28%; width: 4px; height: 78px;
  transform-origin: top center;
  animation: pf-trace-down .85s ease-in-out infinite;
}
@keyframes pf-trace-up {
  0%, 100% { transform: translateY(0) scaleY(.55); opacity: .35; }
  50% { transform: translateY(-26px) scaleY(1); opacity: 1; }
}
@keyframes pf-trace-down {
  0%, 100% { transform: translateY(0) scaleY(.55); opacity: .35; }
  50% { transform: translateY(26px) scaleY(1); opacity: 1; }
}
.pf-ig-coeur { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 54px; z-index: 5; pointer-events: none; }
.pf-ig-coeur--pop { color: #ff3040; animation: pf-coeur-pop .55s ease-out forwards; }
@keyframes pf-coeur-pop {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: .92; }
}
.pf-ig-cible.is-attente { box-shadow: 0 0 0 2px #f0a63c; animation: pf-simple-orange .8s ease-in-out infinite; border-radius: 10px; }
.pf-ig-cible.is-fait { box-shadow: 0 0 0 2px #3fb950; border-radius: 10px; }
.pf-ig-home { height: 100%; background: radial-gradient(circle at 50% 20%, #2c3440, #0e1014 70%); color: #fff; padding: 54px 18px; }
.pf-ig-icone { width: 62px; text-align: center; font-size: 11px; }
.pf-ig-logo {
  width: 54px; height: 54px; margin: 0 auto 4px; border-radius: 14px;
  background: radial-gradient(circle at 30% 110%, #f9ce34, #ee2a7b 45%, #6228d7);
  display: grid; place-items: center;
}
.pf-ig-logo span { width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50%; position: relative; }
.pf-ig-logo span::after { content: ""; position: absolute; right: -6px; top: -4px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.pf-ios {
  height: 100%; color: #fff; display: flex; flex-direction: column; padding: 8px 8px 10px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,70,40,.95), transparent 36%),
    radial-gradient(circle at 78% 12%, rgba(255,170,40,.9), transparent 32%),
    radial-gradient(circle at 88% 62%, rgba(90,70,255,.85), transparent 38%),
    linear-gradient(165deg, #ff3b30 0%, #ff7a18 30%, #ff4f9a 52%, #7a5cff 74%, #3ec6ff 100%);
}
.pf-ios-barre { display: flex; justify-content: space-between; padding: 6px 8px 4px; font-size: 12px; font-weight: 750; }
.pf-ios-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 4px; margin-top: 6px; }
.pf-ios-app { text-align: center; }
.pf-ios-app i {
  width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 3px;
  display: grid; place-items: center; font-style: normal; font-size: 16px; color: #fff;
}
.pf-ios-app small { display: block; font-size: 9px; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pf-ios .pf-ig-logo { width: 44px; height: 44px; margin: 0 auto 3px; border-radius: 12px; }
.pf-ios .pf-ig-logo span { width: 20px; height: 20px; }
.pf-ios-dots { display: flex; justify-content: center; gap: 6px; margin-top: auto; padding-top: 8px; }
.pf-ios-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); }
.pf-ios-dots i.is-on { background: #fff; }
.pf-ios-search { margin: 8px 18px 0; background: rgba(255,255,255,.28); border-radius: 12px; text-align: center; font-size: 13px; padding: 6px; }
.pf-ios-dock {
  margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.22); border-radius: 24px; padding: 10px 6px 8px;
}
.pf-ios-dock small { display: none; }
.pf-ig-composer, .pf-ig-clavier { height: 100%; }
.pf-ig-preview { display: grid; place-items: center; padding: 2px 0 6px; }
.pf-ig-preview-phone { width: 96px; height: 148px; border-radius: 16px; overflow: hidden; position: relative; background: #111; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.pf-ig-preview-phone em { position: absolute; top: 8px; left: 0; right: 0; text-align: center; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; text-shadow: 0 1px 2px #000; }
.pf-ig-preview-phone > span { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(20,20,20,.72); color: #fff; text-align: center; border-radius: 8px; font-size: 10px; padding: 4px 0; }
.pf-ig-capline { padding: 2px 14px 8px; color: #8e8e8e; font-size: 14px; }
.pf-ig-rows { padding: 4px 0; }
.pf-ig-rows div { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; border-top: 1px solid #f2f2f2; }
.pf-ig-rows i { width: 18px; text-align: center; font-style: normal; color: #444; }
.pf-ig-rows span { flex: 1; }
.pf-ig-rows em { color: #8e8e8e; font-style: normal; font-size: 11px; }
.pf-ig-rows u { width: 28px; height: 16px; border-radius: 10px; background: #e5e5ea; display: block; position: relative; }
.pf-ig-rows u::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pf-ig-basbtns { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; padding: 8px 12px 12px; margin-top: auto; }
.pf-ig-basbtns span { text-align: center; border-radius: 8px; padding: 11px 0; font-weight: 750; font-size: 14px; background: #efefef; color: #111; }
.pf-ig-basbtns .is-next { background: #0095f6; color: #fff; }
.pf-ig-saisie { padding: 10px 14px 4px; min-height: 32px; font-size: 15px; font-family: "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.pf-ig-saisie span { color: #0095f6; }
.pf-ig-emoji { width: 15px; height: 15px; vertical-align: -2px; display: inline-block; }
.pf-ig-caret { display: inline-block; width: 1.5px; height: 16px; background: #111; margin-left: 1px; vertical-align: -2px; animation: pf-caret 1s steps(1) infinite; }
@keyframes pf-caret { 50% { opacity: 0; } }
.pf-ig-cherche { color: #8e8e8e; font-size: 14px; padding: 14px 14px 8px; }
.pf-ig-kb { margin-top: auto; background: #d1d4db; padding: 8px 3px 12px; }
.pf-ig-kb div { display: flex; justify-content: center; gap: 4px; margin-bottom: 6px; }
.pf-ig-kb i { background: #fff; border-radius: 5px; min-width: 22px; height: 34px; padding: 0 2px; display: grid; place-items: center; font-style: normal; font-size: 14px; color: #111; box-shadow: 0 1px 0 #8d939c; }
.pf-ig-kb i.is-down { transform: translateY(-7px); box-shadow: 0 8px 0 #8d939c; z-index: 1; }
.pf-ig-kb .is-mod { background: #adb3bd; min-width: 34px; font-size: 12px; }
.pf-ig-kb .is-space { flex: 1; max-width: 120px; font-size: 12px; color: #333; }
.pf-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pf-docs article {
  background: #1e2021; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 14px;
}
.pf-docs h3 { margin: 0 0 6px; font-size: 15px; }
.pf-docs p { margin: 0; color: #98958d; font-size: 13px; line-height: 1.4; }
.pf-profil-qui {
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: 100%;
  background: #1e2021; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 10px 14px; margin-bottom: 18px;
}
.pf-profil-qui strong, .pf-profil-qui span span { display: block; }
.pf-profil-qui span span { color: #98958d; font-size: 13px; }
.pf-profil-h { margin: 18px 0 6px; font-size: 16px; }
@keyframes pf-cable { to { stroke-dashoffset: -44; } }
@keyframes pf-tap {
  0%, 35% { transform: translate(28px, -36px); opacity: 0; }
  50% { opacity: 1; }
  68% { transform: translate(0, 0) scale(.9); }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes pf-packet {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes pf-check {
  0%, 70% { opacity: 0; }
  82%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-setup-cable, .pf-setup-finger, .pf-setup-packet, .pf-setup-check, .pf-plug,
  .pf-trust-finger, .pf-trust-go, .pf-demon-voile { animation: none !important; }
  .pf-plug { transform: none; }
  .pf-demon-voile { opacity: 1; }
  .pf-setup-stage[data-scene="trust"] .pf-setup-finger,
  .pf-setup-stage[data-scene="poser"] .pf-setup-packet,
  .pf-setup-stage[data-scene="poser"] .pf-setup-check { opacity: 1; }
}
.pf-media-sel {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 8px 10px; border-radius: 12px;
  background: #1a2330; border: 1px solid rgba(88,166,255,.35);
}
.pf-media-sel[hidden] { display: none; }
.pf-media-sel span { font-size: 13px; margin-right: auto; }
.pf-rang-bande, .pf-rang-sec-head, .pf-rang-ligne {
  display: flex; align-items: center; gap: 8px;
}
.pf-rang-bande { margin: 18px 0 8px; }
.pf-stock > .pf-rang-bande { margin-top: 4px; }
.pf-rang-bande-titre, .pf-rang-sec-titre {
  border: 0; background: transparent; color: #eceae7;
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; padding: 0;
}
.pf-rang-bande small, .pf-rang-sec-titre span { color: #8b949e; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pf-rang-bande-titre span {
  display: inline-grid; place-items: center; min-width: 22px; margin-left: 6px;
  padding: 0 6px; border-radius: 999px; background: #1e2021;
  color: #c0beb7; font-size: 12px;
}
.pf-rangement .pf-rang-bande .pf-btn { margin-left: auto; }
.pf-rang-chev {
  width: 28px; height: 28px; flex: 0 0 auto;
  border: 0; background: transparent; color: #c0beb7; cursor: pointer;
}
.pf-rang-chev::before {
  content: ""; display: block; width: 7px; height: 7px; margin: 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.pf-stock:not(.is-ferme) > .pf-rang-bande .pf-rang-chev::before,
.pf-rang.is-ouvert > .pf-rang-ligne .pf-rang-chev::before,
.pf-rang-sec:not(.is-ferme) > .pf-rang-sec-head .pf-rang-chev::before { transform: rotate(45deg); }
.pf-stock.is-ferme > .pf-rang-bande-corps,
.pf-rang:not(.is-ouvert) > .pf-rang-corps,
.pf-rang-sec.is-ferme > .pf-rang-sec-corps { display: none; }
.pf-stock-vide, .pf-rang-vide {
  margin: 0; padding: 16px; text-align: center; color: #98958d; font-size: 13px;
  background: #1e2021; border-radius: 12px;
}
.pf-rang-liste { display: flex; flex-direction: column; gap: 8px; }
.pf-rang {
  background: #1e2021; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
}
.pf-rang.is-drop, .pf-rang-sec.is-drop, .pf-stock.is-drop { border-color: #58a6ff; }
.pf-rang-ligne { padding: 8px 10px; }
.pf-rang-ouv {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pf-rang-ouv .pf-dossier-pp { width: 36px; height: 36px; border-radius: 8px; }
.pf-rang-corps { padding: 0 12px 12px 44px; }
.pf-rang-sec { margin-top: 8px; }
.pf-rang-sec-head { min-height: 32px; }
.pf-rang-tout { margin-left: auto; color: #c0beb7; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.pf-rang-sec.is-ferme .pf-rang-tout { display: none; }
.pf-rang-sec-corps { margin-top: 8px; }
.pf-dossier-form { margin: 8px 0 12px; }
.pf-media-coche {
  position: absolute; left: 6px; bottom: 6px; z-index: 3;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(8, 10, 12, .88);
  box-shadow: 0 0 0 1px rgba(255,255,255,.45);
}
.pf-media-coche input { width: 16px; height: 16px; margin: 0; accent-color: #316dca; cursor: pointer; }
.pf-media-tile.is-coche { border-color: #58a6ff; }
.pf-wizard {
  position: fixed; inset: 0; z-index: 240;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 10, 12, .72);
}
.pf-wizard[hidden] { display: none; }
.pf-wizard-box {
  width: min(420px, 100%);
  background: #1e2021; color: #eceae7;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.pf-wizard-head { display: flex; align-items: center; gap: 10px; }
.pf-wizard-head h3 { margin: 0; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-wizard-cle {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: #121314; border: 1px solid rgba(240,166,60,.45);
}
.pf-wizard-x {
  border: 0; background: transparent; color: #c0beb7; cursor: pointer;
  font: inherit; font-size: 13px; padding: 6px 8px;
}
.pf-wizard-x:hover { color: #fff; }
.pf-wizard-pas { display: flex; gap: 8px; list-style: none; margin: 14px 0; padding: 0; }
.pf-wizard-pas li {
  flex: 1; text-align: center; font-size: 12px; color: #8b949e;
  padding-bottom: 6px; border-bottom: 2px solid rgba(255,255,255,.12);
}
.pf-wizard-pas li.is-on { color: #eceae7; border-bottom-color: #316dca; }
.pf-wizard-pas li.is-fait { color: #79c0ff; border-bottom-color: #58a6ff; }
.pf-wizard-corps label { display: flex; flex-direction: column; gap: 6px; color: #98958d; font-size: 12px; }
.pf-wizard-corps .pf-couleurs, .pf-wizard-corps .pf-dossier-apercus { margin-top: 8px; }
.pf-wizard-vide { margin: 8px 0 0; color: #98958d; font-size: 13px; }
.pf-wizard-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.pf-wizard-foot [data-wizard-suppr] { margin-right: auto; }
body.is-lasso, body.is-lasso * { user-select: none; }
body.is-lasso { cursor: crosshair; }
.pf-lasso {
  position: fixed; z-index: 80; pointer-events: none;
  border: 1px solid #58a6ff; border-radius: 2px;
  background: rgba(49, 109, 202, .22);
}