/* ============================================================
   ROARY — la plateforme, montrée plutôt que décrite

   Deux temps par public :

   1. UNE VUE GLOBALE. Un seul grand écran qui reproduit fidèlement
      l'espace tel qu'on y atterrit — le rail sombre à gauche, la
      barre de titre, la carte d'identité, le score. C'est ce qu'on
      voit à la seconde où l'on se connecte, et c'est cela qu'il
      faut montrer d'abord : pas une fonction, un lieu.

   2. TROIS VIGNETTES JOINTIVES. Même format, aucun espace entre
      elles, pour qu'on lise « trois faces d'un même outil » et non
      « trois captures posées côte à côte ».

   Rien ici n'est une capture d'écran. Tout est reconstruit en HTML
   aux couleurs et aux polices de la plateforme : c'est net à toutes
   les résolutions, cela pèse quelques kilo-octets, et cela ne périme
   pas au premier changement d'interface.

   Un curseur factice parcourt seul la vue globale et allume ce qu'il
   survole. Dès que la vraie souris entre dans le cadre, il s'efface
   et rend la main.

   Classes préfixées `pf-` : le bloc ne doit rien emprunter aux
   styles de la page qui l'accueille.
   ============================================================ */

.pf-bloc{width:100%;}

/* ---------- La bascule entre les deux publics ---------- */
.pf-onglets{
  display:inline-flex; gap:4px; padding:4px; border-radius:40px;
  background:rgba(253,252,250,.10); margin-bottom:38px;
}
.pf-onglets button{
  font-family:'Jost',sans-serif; font-weight:300; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:12px 26px; border:none; border-radius:30px;
  background:transparent; color:rgba(253,252,250,.6); cursor:pointer;
  transition:background .45s cubic-bezier(.16,1,.3,1), color .45s ease;
}
.pf-onglets button.on{background:var(--white); color:var(--cuir);}

.pf-vues{position:relative;}
.pf-vue{
  opacity:0; visibility:hidden; position:absolute; inset:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1), visibility .5s;
}
.pf-vue.on{opacity:1; visibility:visible; position:relative; transform:none;}

/* ============================================================
   1 — LA VUE GLOBALE
   ============================================================ */

/* Le cadre porte la perspective ; l'écran s'incline dedans. Sans
   parent en perspective, une rotation 3D aplatit au lieu de creuser. */
/* Les deux temps ne se succèdent plus de haut en bas mais côte à côte :
   la vue globale à gauche, les trois usages à droite. On lit d'un seul
   regard « voilà le lieu, et voilà ce qu'on y fait » au lieu de devoir
   redescendre pour comprendre à quoi la première image servait. */
.pf-duo{display:grid; grid-template-columns:1.34fr .66fr; gap:30px; align-items:stretch;}

/* Le point de fuite est déporté vers la droite : c'est lui qui donne
   à l'écran l'air de regarder la pile de cartes plutôt que le lecteur. */
.pf-scene{margin:0; perspective:1500px; perspective-origin:88% 46%;}
/* La transition reste courte : à une demi-seconde, l'écran traîne
   derrière la souris et l'on sent l'effet au lieu de sentir l'objet.
   Elle sert surtout au retour à plat quand la souris quitte le cadre. */
/* Au repos l'écran n'est pas de face : il pivote de sept degrés vers la
   droite — son bord droit s'éloigne, son bord gauche vient vers nous —
   et se décale légèrement pour dégager la pile. Sept degrés est le
   maximum utile : au-delà le texte du rail commence à se déformer et la
   reconstitution perd sa netteté, qui est tout son intérêt. */
.pf-cadre{
  position:relative; transform-style:preserve-3d; will-change:transform;
  transform:rotateY(7deg) translateX(-12px);
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}

.pf-ecran{
  background:var(--white); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.42);
  transition:box-shadow .5s ease;
}
.pf-cadre:hover .pf-ecran{box-shadow:0 40px 90px rgba(0,0,0,.5);}

/* La barre de titre. Une ligne fine suffit à dire « ceci est un
   écran » : pas de faux boutons de fenêtre, on n'imite pas un
   système d'exploitation, on montre un outil. */
.pf-barre{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; background:#1E120A;
  border-bottom:1px solid rgba(232,201,160,.14);
}
.pf-barre .pastilles{display:flex; gap:5px;}
.pf-barre .pastilles i{width:7px; height:7px; border-radius:50%; background:rgba(232,201,160,.26); display:block;}
.pf-barre .url{
  flex:1; text-align:center;
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.14em;
  color:rgba(232,201,160,.55);
}

/* ---------- L'application : rail + zone de travail ---------- */
.pf-app{display:grid; grid-template-columns:138px 1fr; min-height:340px;}

.pf-rail{
  background:var(--cuir); color:var(--blanc);
  padding:16px 10px 12px; display:flex; flex-direction:column;
}
.pf-rail .mot{
  display:block;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:13px;
  color:var(--white); padding:0 8px 2px;
}
.pf-rail .grp{
  font-family:'DM Mono',monospace; font-size:7px; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(232,201,160,.45);
  padding:15px 8px 6px; display:block;
}
.pf-r-i{
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:8px;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:9.5px;
  color:rgba(244,245,240,.72);
  transition:background .35s ease, color .35s ease;
}
.pf-r-i .ic{width:11px; height:11px; flex-shrink:0; opacity:.85;}
.pf-r-i .ic svg{width:100%; height:100%; display:block; fill:none;
  stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.pf-r-i.on{background:var(--camel); color:var(--cuir);}
.pf-r-i .pastille{
  margin-left:auto; background:#A33228; color:#fff;
  font-family:'DM Mono',monospace; font-size:7px; border-radius:20px; padding:1px 5px;
}
.pf-rail .moi{
  margin-top:auto; display:flex; align-items:center; gap:7px;
  padding:6px 7px; border-radius:9px;
  background:rgba(253,252,250,.06); border:1px solid rgba(232,201,160,.14);
}
.pf-rail .moi .av{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:var(--camel); color:var(--cuir);
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size:8px;
}
.pf-rail .moi .n{font-family:'Manrope',sans-serif; font-weight:700; font-size:9px; color:var(--white);}

/* ---------- La zone de travail ---------- */
.pf-zone{background:var(--blanc); padding:18px 20px 20px; min-width:0;}
.pf-h1{font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; color:var(--cuir); letter-spacing:-.01em;}
.pf-h1 + .pf-bonjour{font-size:9.5px; color:var(--stone); margin-top:2px;}

/* La carte d'identité */
.pf-idcard{
  background:var(--white); border-radius:14px; margin-top:13px; padding:14px 15px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 8px 22px rgba(44,27,17,.07);
}
.pf-av{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--cuir); color:var(--camel-pale);
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:15px;
}
.pf-av.carre{border-radius:12px;}
.pf-qui{flex:1; min-width:0; display:block;}
.pf-nom{display:block; font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; color:var(--cuir); letter-spacing:-.01em;}
.pf-poste{display:block; font-family:'DM Mono',monospace; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--camel); margin-top:2px;}
.pf-distinctions{display:flex; gap:5px; margin-top:7px; flex-wrap:wrap;}
.pf-pastille{
  font-family:'Manrope',sans-serif; font-weight:700;
  font-size:8px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cuir); background:rgba(232,201,160,.3);
  border:1px solid rgba(208,157,101,.6); border-radius:20px; padding:3px 8px;
}
.pf-pastille.bleu{background:rgba(176,203,231,.24); border-color:rgba(127,168,204,.55);}
.pf-dispo{
  display:inline-block; font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.12em;
  text-transform:uppercase; color:#4A6325;
  background:rgba(92,122,46,.12); border-radius:20px; padding:4px 9px; white-space:nowrap;
}

/* Le cadran de l'identité */
.pf-jauge{display:block; position:relative; flex-shrink:0; width:56px; height:56px;}
.pf-jauge svg{transform:rotate(-90deg); width:100%; height:100%;}
.pf-jauge circle.f{fill:none; stroke:var(--cuir); opacity:.14; stroke-width:9;}
.pf-jauge circle.a{fill:none; stroke:var(--camel); stroke-width:9; stroke-linecap:round;
                   stroke-dasharray:540; stroke-dashoffset:540;
                   transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1);}
.pf-jauge.p2 circle.a{stroke:var(--bleu-deep);}
.pf-jauge .val{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size:14px; color:var(--cuir);
}

/* L'en-tête de section, comme dans l'espace réel */
.pf-sech{display:flex; align-items:baseline; gap:9px; margin:16px 0 10px;}
.pf-k{font-family:'DM Mono',monospace; font-size:7.5px; letter-spacing:.24em;
      text-transform:uppercase; color:var(--camel);}
.pf-sech h3{font-family:'Manrope',sans-serif; font-weight:700; font-size:11.5px;
            color:var(--cuir); letter-spacing:-.01em; margin:0;}
.pf-sech h3 em{font-style:normal; color:var(--camel);}

/* Les trois tuiles de score */
.pf-tuiles{display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:9px;}
.pf-tuile{background:#F3E4D0; border-radius:12px; padding:11px 8px 10px; text-align:center;}
.pf-tuile.p2{background:#E4EDF6;}
.pf-tuile.total{background:linear-gradient(150deg, var(--cuir), var(--cuir-soft, #4A3324));}
.pf-tuile .rang{font-family:'DM Mono',monospace; font-size:6.5px; letter-spacing:.22em;
                text-transform:uppercase; color:#A9743F; display:block; margin-bottom:4px;}
.pf-tuile.p2 .rang{color:#4E7FA8;}
.pf-tuile.total .rang{color:var(--camel-pale);}
.pf-tuile .quoi{font-family:'Manrope',sans-serif; font-weight:700; font-size:9px;
                color:var(--cuir); line-height:1.25; margin-bottom:8px;}
.pf-tuile.total .quoi{color:var(--white);}
.pf-tuile .pf-jauge{width:46px; height:46px; margin:0 auto;}
.pf-tuile.total .pf-jauge{width:54px; height:54px;}
.pf-tuile.p2 .pf-jauge circle.a{stroke:var(--bleu-deep);}
.pf-tuile.total .pf-jauge circle.f{stroke:var(--white); opacity:.2;}
.pf-tuile.total .pf-jauge circle.a{stroke:var(--camel-pale);}
.pf-tuile .pf-jauge .val{font-size:11.5px;}
.pf-tuile.total .pf-jauge .val{font-size:14px; font-weight:700; color:var(--white);}

/* La courbe d'évolution. Elle occupe le bas de l'écran comme dans
   l'espace réel : sans elle, la reconstitution laisse un tiers de
   blanc et l'on croit à une maquette inachevée. */
.pf-courbe-carte{
  background:var(--white); border-radius:12px; margin-top:11px;
  padding:11px 13px 7px; box-shadow:0 6px 18px rgba(44,27,17,.05);
}
.pf-courbe-tete{display:flex; align-items:center; gap:12px; margin-bottom:5px;}
.pf-courbe-tete .t{font-family:'Manrope',sans-serif; font-weight:700; font-size:9.5px; color:var(--cuir);}
.pf-legende{display:flex; gap:11px; margin-left:auto;}
.pf-legende span{
  font-family:'DM Mono',monospace; font-size:7px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stone);
  display:flex; align-items:center; gap:5px;
}
.pf-legende i{width:11px; height:2px; border-radius:2px; display:block;}
.pf-courbe{width:100%; height:auto; display:block;}
.pf-courbe .grille{stroke:rgba(44,27,17,.08); stroke-width:1;}
.pf-courbe path.trace{
  fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:760; stroke-dashoffset:760;
  transition:stroke-dashoffset 2.1s cubic-bezier(.16,1,.3,1) .45s;
}
.pf-vue.vu .pf-courbe path.trace{stroke-dashoffset:0;}
.pf-courbe text{font-family:'DM Mono',monospace; font-size:7px; fill:var(--stone); letter-spacing:.1em;}

/* ---------- Le curseur factice ----------
   Il parcourt l'écran en boucle et allume ce qu'il atteint. Il ne
   démarre qu'une fois la section entrée dans le champ : une
   démonstration jouée hors de vue est une démonstration perdue. */
.pf-curseur{
  display:block; position:absolute; top:0; left:0; width:19px; height:19px;
  pointer-events:none; opacity:0; z-index:6;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
}
.pf-curseur svg{width:100%; height:100%; display:block;}
.pf-vue.vu .pf-scene .pf-curseur{animation:pf-souris 14s cubic-bezier(.5,0,.2,1) infinite;}
.pf-cadre:hover .pf-curseur{opacity:0 !important; animation-play-state:paused;}

/* Le halo qui accompagne un « clic » */
.pf-curseur::after{
  content:''; position:absolute; left:-9px; top:-9px; width:32px; height:32px;
  border-radius:50%; border:1.5px solid var(--camel);
  opacity:0; transform:scale(.3);
}
.pf-vue.vu .pf-scene .pf-curseur::after{animation:pf-clic 14s linear infinite;}

/* Les repères sont calés sur la géométrie réelle du gabarit : l'entrée
   « Mon score » du rail, le cadran de la carte d'identité, l'entrée
   d'exploration, puis les tuiles de score. */
@keyframes pf-souris{
  0%   {left:76%; top:92%; opacity:0;}
  4%   {left:76%; top:92%; opacity:1;}
  15%  {left:9%;  top:31%;}
  25%  {left:9%;  top:31%;}
  37%  {left:87%; top:30%;}
  48%  {left:87%; top:30%;}
  60%  {left:9%;  top:65%;}
  70%  {left:9%;  top:65%;}
  82%  {left:48%; top:85%;}
  92%  {left:48%; top:85%;}
  98%  {left:76%; top:92%; opacity:1;}
  100% {left:76%; top:92%; opacity:0;}
}
@keyframes pf-clic{
  0%,16%   {opacity:0; transform:scale(.3);}
  18%      {opacity:.9; transform:scale(.4);}
  24%      {opacity:0; transform:scale(1.1);}
  25%,61%  {opacity:0; transform:scale(.3);}
  63%      {opacity:.9; transform:scale(.4);}
  69%      {opacity:0; transform:scale(1.1);}
  70%,100% {opacity:0; transform:scale(.3);}
}

/* Ce que le curseur allume au passage. Trois fenêtres calées sur son
   trajet — même durée, même départ, donc rien à synchroniser en JS. */
.pf-vue.vu .pf-scene [data-vise="a"]{animation:pf-vise-a 14s linear infinite;}
.pf-vue.vu .pf-scene [data-vise="b"]{animation:pf-vise-b 14s linear infinite;}
.pf-vue.vu .pf-scene [data-vise="c"]{animation:pf-vise-c 14s linear infinite;}
.pf-cadre:hover [data-vise]{animation-play-state:paused;}

@keyframes pf-vise-a{
  0%,13%   {background:transparent; color:rgba(244,245,240,.72);}
  16%,27%  {background:rgba(208,157,101,.2); color:var(--white);}
  30%,100% {background:transparent; color:rgba(244,245,240,.72);}
}
@keyframes pf-vise-c{
  0%,58%   {background:transparent; color:rgba(244,245,240,.72);}
  61%,71%  {background:rgba(208,157,101,.2); color:var(--white);}
  75%,100% {background:transparent; color:rgba(244,245,240,.72);}
}
/* La cible du milieu est une carte claire : elle se soulève au lieu
   de s'éclairer, un fond camel y serait sale. */
@keyframes pf-vise-b{
  0%,34%   {transform:none; box-shadow:0 8px 22px rgba(44,27,17,.07);}
  38%,50%  {transform:translateY(-3px); box-shadow:0 16px 34px rgba(44,27,17,.16);}
  55%,100% {transform:none; box-shadow:0 8px 22px rgba(44,27,17,.07);}
}

/* ============================================================
   2 — LES TROIS VIGNETTES SUPERPOSÉES
   ============================================================ */

/* Le problème à résoudre : la colonne de droite ne doit jamais décider
   de la hauteur de la rangée, sinon un trou s'ouvre sous l'écran de
   gauche dès que les cartes sont un peu plus hautes que lui.

   La solution : `.pf-trio` est un simple réceptacle vide, étiré par la
   grille à la hauteur de l'écran ; les cartes vivent dans une couche
   posée en absolu par-dessus. Une couche absolue ne compte pas dans le
   calcul de la rangée — c'est donc l'écran, et lui seul, qui fixe la
   hauteur, et les cartes s'y ajustent. Le trou est structurellement
   impossible.

   Aucun décalage latéral : mêmes bords à gauche et à droite. Elles se
   superposent verticalement, chacune recouvrant le bas de la
   précédente, et se partagent la hauteur à parts égales. */
/* Onglets mobiles : masqués tant qu'on n'est pas sur téléphone, où
   ils remplacent l'empilement complet des trois vignettes (voir plus
   bas, dans la section « Tablette et téléphone »). */
.pf-tabs-mobile{display:none;}

.pf-trio{position:relative; min-height:0;}
.pf-trio-in{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
}
.pf-vig{
  position:relative; flex:1 1 0; min-height:0;
  background:var(--white); overflow:hidden;
  border-radius:14px; padding:13px 14px 14px;
  box-shadow:0 -10px 30px rgba(0,0,0,.3);
  transition:background .45s ease, transform .45s cubic-bezier(.16,1,.3,1),
             box-shadow .45s ease;
}
/* Le recouvrement. L'ombre est portée vers le haut : c'est elle qui
   fait lire la superposition, sinon on ne voit que trois rectangles
   collés. */
.pf-vig + .pf-vig{margin-top:-18px;}

/* Le quinconce : la première et la troisième à gauche, la deuxième à
   droite. L'alternance vaut mieux qu'un escalier — elle donne un
   rythme au lieu d'une pente, et les trois cartes gardent la même
   largeur puisque la marge prise d'un côté est rendue de l'autre. */
.pf-vig:nth-child(1){z-index:1; margin-right:32px; box-shadow:0 -6px 24px rgba(0,0,0,.2);}
.pf-vig:nth-child(2){z-index:2; margin-left:32px;}
.pf-vig:nth-child(3){z-index:3; margin-right:32px;}

/* Le filet camel n'apparaît qu'au survol : au repos il ferait trois
   traits parallèles et la pile se lirait comme un tableau. */
.pf-vig::before{
  content:''; position:absolute; left:14px; right:14px; top:0; height:2px;
  background:var(--camel); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
/* Au survol la carte passe devant les deux autres et se dégage un peu
   vers le haut — la seule façon de montrer entièrement une carte prise
   dans une pile sans déplacer ses voisines. */
.pf-vig:hover{
  background:var(--blanc); z-index:5;
  transform:translateY(-5px);
  box-shadow:0 -14px 44px rgba(0,0,0,.42);
}
.pf-vig:hover::before{transform:scaleX(1);}
.pf-vig:hover .pf-vig-corps{transform:translateY(-2px);}
.pf-vig-corps{transition:transform .45s cubic-bezier(.16,1,.3,1);}

.pf-vig-k{
  font-family:'DM Mono',monospace; font-size:7.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--camel); display:block; margin-bottom:5px;
}
.pf-vig h4{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:12.5px;
  color:var(--cuir); letter-spacing:-.01em; margin:0 0 9px;
}

/* ---------- Recherche : filtres et résultats ---------- */
.pf-champ{
  display:flex; align-items:center; gap:7px; margin-bottom:9px;
  background:var(--blanc); border:1px solid rgba(208,157,101,.35);
  border-radius:20px; padding:6px 11px;
  font-family:'Inter',sans-serif; font-size:9.5px; color:var(--stone);
}
.pf-champ svg{width:10px; height:10px; flex-shrink:0; fill:none; stroke:var(--camel);
  stroke-width:1.9; stroke-linecap:round;}
.pf-vig:hover .pf-champ{border-color:var(--camel); background:var(--white);}

.pf-filtres{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:9px;}
.pf-filtres span{
  font-family:'Inter',sans-serif; font-weight:500; font-size:8.5px;
  color:var(--mid); background:var(--blanc);
  border:1px solid rgba(208,157,101,.4); border-radius:20px; padding:3px 8px;
}
.pf-filtres span.actif{background:var(--cuir); border-color:var(--cuir); color:var(--white);}

.pf-lignes{display:flex; flex-direction:column; gap:6px;}
.pf-ligne{
  display:flex; align-items:center; gap:9px;
  background:var(--blanc); border-radius:10px; padding:7px 10px;
  transition:background .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.pf-vig:hover .pf-ligne{background:var(--white); box-shadow:0 6px 16px rgba(44,27,17,.06);}
.pf-ligne .av{
  width:26px; height:26px; border-radius:8px; flex-shrink:0;
  background:var(--cuir); color:var(--camel-pale);
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:10px;
}
.pf-ligne .av.rond{border-radius:50%;}
.pf-ligne .qui{flex:1; min-width:0;}
.pf-ligne .qui b{display:block; font-family:'Manrope',sans-serif; font-weight:700;
                 font-size:10px; color:var(--cuir); white-space:nowrap;
                 overflow:hidden; text-overflow:ellipsis;}
.pf-ligne .qui span{font-family:'DM Mono',monospace; font-size:7.5px; letter-spacing:.08em;
                    text-transform:uppercase; color:var(--stone);}
.pf-ligne .note{font-family:'DM Mono',monospace; font-size:11px; color:var(--cuir); white-space:nowrap;}
.pf-ligne .note small{font-size:7px; color:var(--stone); letter-spacing:.1em;}

/* Le cœur des favoris */
.pf-coeur{display:block; width:13px; height:13px; flex-shrink:0;}
.pf-coeur svg{width:100%; height:100%; display:block; fill:var(--bleu-deep);}
.pf-coeur.vide svg{fill:none; stroke:var(--stone); stroke-width:1.8;}

/* Le geste central de l'espace établissement */
.pf-interet{
  width:100%; margin-top:9px;
  font-family:'Jost',sans-serif; font-weight:300; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--cuir); color:var(--white); border:none;
  border-radius:20px; padding:9px 12px; cursor:pointer;
  transition:background .3s ease, color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.pf-interet:hover{background:var(--camel); color:var(--cuir); transform:translateY(-1px);}
.pf-interet.envoye{background:rgba(92,122,46,.14); color:#4A6325; cursor:default; transform:none;}

/* ---------- Parcours accompagné ---------- */
.pf-etapes{list-style:none; margin:0; padding:0 0 0 15px; position:relative;}
.pf-etapes::before{
  content:''; position:absolute; left:3.5px; top:5px; bottom:7px;
  width:1px; background:rgba(208,157,101,.4);
}
.pf-etapes li{position:relative; padding-bottom:8px;}
.pf-etapes li:last-child{padding-bottom:0;}
.pf-etapes li::before{
  content:''; position:absolute; left:-15px; top:4px;
  width:8px; height:8px; border-radius:50%;
  background:var(--white); border:1.6px solid var(--camel-pale);
  transition:background .4s ease, border-color .4s ease;
}
.pf-etapes li.fait::before{background:var(--camel); border-color:var(--camel);}
.pf-etapes li.roary::before{background:var(--bleu-deep); border-color:var(--bleu-deep);}
.pf-etapes li b{display:block; font-family:'Manrope',sans-serif; font-weight:700;
                font-size:10px; color:var(--cuir);}
.pf-etapes li span{font-family:'DM Mono',monospace; font-size:7.5px; letter-spacing:.1em;
                   text-transform:uppercase; color:var(--stone);}
.pf-etapes li em{
  display:block; font-style:normal; font-size:9.5px; line-height:1.45;
  color:var(--mid); margin-top:3px; padding-left:8px;
  border-left:2px solid var(--bleu);
}

/* ---------- Avis ---------- */
.pf-avis{background:var(--blanc); border-radius:10px; padding:10px 11px;}
.pf-avis p{font-size:9.5px; line-height:1.55; color:var(--mid); font-style:italic; margin:0;}
.pf-avis .par{margin-top:7px; font-family:'DM Mono',monospace; font-size:7.5px;
              letter-spacing:.12em; text-transform:uppercase; color:var(--camel); font-style:normal;}
.pf-etoiles{display:flex; gap:2px; margin-bottom:8px;}
.pf-etoiles i{width:9px; height:9px; display:block; background:var(--camel-pale);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.pf-etoiles i.plein{background:var(--camel);}
.pf-reciproque{
  margin-top:10px; padding-top:9px; border-top:1px solid rgba(44,27,17,.08);
  font-size:9.5px; line-height:1.5; color:var(--stone);
}
.pf-reciproque b{color:var(--cuir); font-weight:600;}

/* ---------- Postes ouverts ---------- */
.pf-poste-l{
  display:flex; align-items:center; gap:8px;
  padding:7px 0; border-bottom:1px solid rgba(44,27,17,.07);
}
.pf-poste-l:last-child{border-bottom:none;}
.pf-poste-l b{flex:1; font-family:'Manrope',sans-serif; font-weight:700; font-size:10px; color:var(--cuir);}
.pf-poste-l .cpt{
  font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.06em;
  color:var(--cuir); background:rgba(176,203,231,.28);
  border-radius:20px; padding:3px 8px; white-space:nowrap;
}

/* ---------- Ce que dit chaque écran ---------- */
.pf-dit{
  margin-top:16px; font-size:13.5px; line-height:1.6;
  color:rgba(253,252,250,.72); max-width:62ch;
}
.pf-dit b{color:var(--white); font-weight:600;}
/* La légende n'est plus centrée sous une image pleine largeur mais
   alignée sous une colonne : le fer à gauche la raccroche à l'écran. */
.pf-scene .pf-dit{text-align:left; max-width:none;}
.pf-fictif{
  margin-top:26px; font-family:'DM Mono',monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(253,252,250,.42);
  text-align:center;
}

/* ---------- Tablette et téléphone ---------- */

/* En dessous de mille pixels, deux colonnes rendraient l'écran de
   gauche illisible : le duo repasse l'un sous l'autre, mais la
   cascade, elle, reste — c'est elle qui porte le geste. */
@media(max-width:1040px){
  .pf-duo{grid-template-columns:1fr; gap:26px;}
  .pf-app{grid-template-columns:132px 1fr; min-height:0;}
  .pf-zone{padding:15px 15px 16px;}
  /* Plus rien à égaliser en colonne unique : la couche redevient
     ordinaire et les cartes reprennent leur hauteur naturelle. */
  .pf-trio{position:static;}
  .pf-trio-in{position:static; inset:auto;}
  .pf-vig{flex:0 0 auto;}
  .pf-scene{perspective-origin:50% 50%;}
  .pf-cadre{transform:none;}
  .pf-vig:nth-child(1){margin-right:52px;}
  .pf-vig:nth-child(2){margin-left:52px;}
  .pf-vig:nth-child(3){margin-right:52px;}
}
@media(max-width:760px){
  .pf-onglets{width:100%; margin-bottom:28px;}
  .pf-onglets button{flex:1; padding:12px 8px; font-size:11px;}
  .pf-vue{position:relative; inset:auto;}
  .pf-vue:not(.on){display:none;}
  /* Le rail disparaît sur téléphone dans la vraie plateforme : la
     reconstitution ferait mentir la démonstration en le gardant. */
  .pf-app{grid-template-columns:1fr;}
  .pf-rail{display:none;}
  .pf-curseur{display:none;}
  /* Sur téléphone, les trois vignettes ne s'empilent plus : des
     onglets affichent l'une d'elles à la fois, la pile complète
     prenant trop de place en hauteur. */
  .pf-vig + .pf-vig{margin-top:0;}
  .pf-vig:nth-child(1),
  .pf-vig:nth-child(2),
  .pf-vig:nth-child(3){margin-left:0; margin-right:0;}
  .pf-tabs-mobile{display:flex; gap:6px; margin-bottom:12px; background:var(--blanc); border-radius:12px; padding:4px;}
  .pf-tabs-mobile button{flex:1; border:none; background:none; padding:9px 4px; font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.03em; color:var(--mid); border-radius:9px; cursor:pointer;}
  .pf-tabs-mobile button.on{background:var(--cuir); color:var(--white);}
  .pf-vig{display:none;}
  .pf-vig.on{display:block;}
  .pf-tuiles{gap:6px;}
  .pf-scene .pf-dit, .pf-dit{text-align:left; max-width:none;}
}

@media (prefers-reduced-motion:reduce){
  .pf-vue, .pf-jauge circle.a, .pf-vig, .pf-vig-corps{transition:none;}
  .pf-cadre{transition:none; transform:none;}
  .pf-curseur, .pf-curseur::after, [data-vise]{animation:none !important;}
  .pf-curseur{display:none;}
}