/* ============================================================
   ROARY — espaces membre et établissement
   Feuille commune chargée en dernier par les pages de la
   plateforme. Elle corrige deux défauts de lisibilité que les
   styles de page, écrits panneau par panneau, ne pouvaient pas
   voir : les pastilles et la hiérarchie du détail de score.
   ============================================================ */

/* ---------- 1. Pastilles (compétences, chemin, plaisirs, secteurs) ----------
   Elles étaient posées en DM Mono 11 px, texte pierre, sur un fond blanc
   cassé cerné d'un filet à 10 % d'opacité — donc quasiment invisible sur
   le blanc du panneau. Une police à chasse fixe convient à un chiffre ou
   à un code ; sur « Sommellerie » ou « Management d'équipe », elle ralentit
   la lecture sans rien apporter.

   On repasse en Inter, on monte d'un point et demi, on passe le texte en
   cuir, et surtout on donne au filet une couleur assumée : la pastille
   existe enfin comme objet, au lieu de flotter. */
.chips span,
.plaisirs-chips span,
.secteurs-chips span{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:12.5px;
  letter-spacing:0;
  line-height:1.2;
  color:var(--cuir);
  background:rgba(208,157,101,.10);
  border:1px solid rgba(208,157,101,.42);
  padding:8px 15px;
  border-radius:30px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.chips, .plaisirs-chips{gap:9px;}
.secteurs-chips{gap:8px;}
.secteurs-chips span{font-size:11.5px; padding:6px 13px;}

.chips span:hover,
.plaisirs-chips span:hover,
.secteurs-chips span:hover{
  background:rgba(208,157,101,.2);
  border-color:var(--camel);
  transform:translateY(-2px);
  color:var(--cuir);
}

/* Les petits plaisirs sont d'un autre registre que les compétences : le bleu
   les distingue sans les hiérarchiser. */
.plaisirs-chips span{
  background:rgba(176,203,231,.16);
  border-color:rgba(127,168,204,.5);
}
.plaisirs-chips span:hover{background:rgba(176,203,231,.32); border-color:var(--bleu-deep);}

/* La croix de retrait : elle héritait de la taille du texte et collait au
   mot. Un rond discret qui ne se colore qu'au survol. */
.chip-del{
  width:16px; height:16px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; line-height:1;
  color:var(--stone); background:rgba(44,27,17,.07);
  border:none; padding:0; cursor:pointer; opacity:1 !important;
  transition:background .2s ease, color .2s ease;
}
.chip-del:hover{background:#A33228; color:var(--white);}

/* Sur écran tactile, la cible de 16 px est trop petite pour le doigt : on
   agrandit la zone cliquable sans agrandir le dessin. */
@media (hover:none) and (pointer:coarse){
  .chip-del{position:relative;}
  .chip-del::after{content:''; position:absolute; inset:-9px;}
  .chips span, .plaisirs-chips span, .secteurs-chips span{padding:9px 15px; font-size:13px;}
}


/* ---------- 2. Piliers dans le détail du score ----------
   Le détail enchaînait deux séries de critères séparées par un simple
   intertitre gris de 12 px. Rien n'indiquait où un pilier s'arrêtait :
   arrivé au huitième critère, on ne savait plus lequel on lisait — et
   c'est précisément ce que la page doit rendre évident.

   Chaque pilier devient un bloc identifié : bandeau teinté, numéro,
   nom en Manrope, et un filet vertical de sa couleur qui court le long
   de tous ses critères. Le pilier 1 reprend le camel des cadrans, le
   pilier 2 le bleu — les mêmes couleurs que les trois cadrans du haut,
   pour qu'on relie sans effort le chiffre et son détail. */
.pilier-bloc{
  border:1px solid var(--camel-pale);
  border-left:3px solid var(--camel);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:22px;
}
.pilier-bloc:last-child{margin-bottom:0;}
.pilier-bloc.p2{border-left-color:var(--bleu-deep,#7FA8CC); border-color:rgba(127,168,204,.4);}

.pilier-bloc > .tete{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:15px 20px;
  background:var(--camel-wash, rgba(208,157,101,.12));
  border-bottom:1px solid var(--camel-pale);
}
.pilier-bloc.p2 > .tete{
  background:var(--bleu-wash, rgba(176,203,231,.16));
  border-bottom-color:rgba(127,168,204,.4);
}
.pilier-bloc > .tete .rang{
  font-family:'DM Mono', monospace;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:#A9743F;
}
.pilier-bloc.p2 > .tete .rang{color:#4E7FA8;}
.pilier-bloc > .tete .nom{
  font-family:'Manrope', sans-serif; font-weight:700;
  font-size:15.5px; letter-spacing:-.01em; color:var(--cuir);
  flex:1; min-width:160px;
}
.pilier-bloc > .tete .part{
  font-family:'DM Mono', monospace; font-size:10.5px; color:var(--stone);
  white-space:nowrap;
}
.pilier-bloc > .corps{padding:6px 20px 14px;}

/* Les critères vivent maintenant dans le bloc : le trait de séparation
   n'a plus à porter la structure, il peut s'alléger. */
.pilier-bloc .critere-row{border-bottom:1px solid rgba(44,27,17,.07); padding:12px 0;}
.pilier-bloc .critere-row:last-child{border-bottom:none;}
.pilier-bloc .critere-row .nom{font-weight:500;}

@media (max-width:640px){
  .pilier-bloc > .tete{padding:13px 15px; gap:8px;}
  .pilier-bloc > .tete .nom{font-size:14.5px;}
  .pilier-bloc > .corps{padding:4px 15px 12px;}
}

/* ══════════════════════════════════════════════════════════════════
   LA COMPLÉTUDE : UN POURCENTAGE, PUIS UNE FICHE

   Elle occupait un bloc entier au bas du menu pour une information
   qu'on ne consulte que de loin en loin. Elle tient maintenant en un
   petit pourcentage posé à droite du nom — du prénom pour un membre,
   du nom pour un établissement.

   Sur l'avatar, il empiétait sur la photo et obligeait à laisser
   déborder le cercle. À côté du nom, il se lit dans le sens de la
   lecture : on voit qui l'on est, puis où l'on en est.

   Il ne capte pas le clic : l'avatar et le nom continuent d'ouvrir les
   informations personnelles, et c'est dans cette fenêtre que la fiche
   détaille ce qui manque. Au même endroit que ce qu'il faut remplir.
   ══════════════════════════════════════════════════════════════════ */

/* L'avatar redevient un cercle net : plus rien n'a besoin d'en sortir. */
.rail .me .av,
.private-panel .pp-av{ overflow: hidden; position: relative; }
.rail .me .av img,
.private-panel .pp-av img{ border-radius: 50%; }

/* La ligne qui porte le nom et son pourcentage.

   `baseline` plutôt que `center` : les deux textes s'assoient sur la
   même ligne d'écriture, ce qui donne une seule ligne de lecture et non
   deux éléments alignés à peu près. */
.rj-ligne{
  display: flex; align-items: baseline; gap: 7px; min-width: 0;
}

/* C'est le nom qui rétrécit, jamais le pourcentage : un nom coupé par
   des points de suspension reste identifiable, un pourcentage tronqué
   ne veut plus rien dire. */
.rj-ligne > :first-child{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rj-pastille{
  flex: 0 0 auto;
  font-family: 'DM Mono', monospace; font-size: 9px; line-height: 1;
  letter-spacing: -.02em; color: var(--camel, #D09D65);
  padding: 3px 5px 2px; border-radius: 6px;
  background: rgba(208, 157, 101, .14);
  pointer-events: none;   /* le nom reste cliquable, c'est l'essentiel */
  transition: color .4s ease, background .4s ease;
}
.rj-pastille.complet{ color: #1FBF63; background: rgba(31, 191, 99, .14); }

/* Dans le tiroir mobile, le fond est clair : le contraste se reprend
   sur un ton plus soutenu. */
.rj-pastille.sur-pp{ color: var(--cuir, #2C1B11); background: rgba(208, 157, 101, .28); }
.rj-pastille.sur-pp.complet{ color: #147A40; background: rgba(31, 191, 99, .18); }

/* ── La fiche, dans les informations personnelles ── */

.rj-fiche{
  display: block; width: 100%; margin: 0 0 22px;
  padding: 14px 16px 15px; text-align: left; font: inherit; cursor: pointer;
  background: var(--blanc, #F4F5F0);
  border: 1px solid var(--camel-pale, #E8C9A0); border-radius: 14px;
  transition: background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.rj-fiche:hover{
  background: var(--camel-wash, #F3E4D0);
  border-color: var(--camel, #D09D65);
  transform: translateY(-1px);
}
.rj-fiche-haut{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 9px;
}
.rj-fiche-quoi{
  font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--stone, #8A7A6A);
}
.rj-fiche-val{
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 17px;
  color: var(--camel, #D09D65); letter-spacing: -.02em;
}
.rj-fiche.complet .rj-fiche-val{ color: #128A45; }

.rj-fiche .rj-piste{
  display: block; height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(44, 27, 17, .1);
}
.rj-fiche .rj-part{
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: var(--camel, #D09D65);
  transition: width .9s cubic-bezier(.16,1,.3,1), background .5s ease;
}
.rj-fiche.complet .rj-part{ background: #1FBF63; }

.rj-fiche-lien{
  display: block; margin-top: 10px;
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cuir, #2C1B11);
}

/* ── Le panneau : ce qu'il reste à remplir ── */
.rc-voile{
  /* Au-dessus des fenêtres de la plateforme, qui sont à 500. La fiche
     de complétude s'ouvre depuis les informations personnelles : elle
     doit passer devant, pas glisser derrière. */
  position:fixed; inset:0; z-index:620;
  background:rgba(28,17,10,.5); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.rc-voile.ouvert{display:flex;}
.rc-boite{
  position:relative; width:min(520px, 100%); max-height:82vh; overflow-y:auto;
  background:var(--white, #FDFCFA); border-radius:20px; padding:28px 28px 24px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.rc-fermer{
  position:absolute; top:16px; right:16px; width:30px; height:30px;
  border:none; border-radius:50%; background:var(--blanc, #F4F5F0);
  color:var(--stone, #8A7A6A); cursor:pointer; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
}
.rc-fermer:hover{background:var(--camel-wash, #F3E4D0); color:var(--cuir, #2C1B11);}
.rc-k{
  display:block; font-family:'DM Mono',monospace; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--camel, #D09D65);
  margin-bottom:8px;
}
.rc-titre{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:19px;
  color:var(--cuir, #2C1B11); letter-spacing:-.02em; margin:0 34px 6px 0; line-height:1.2;
}
.rc-sous{font-size:13.5px; line-height:1.6; color:var(--stone, #8A7A6A); margin:0 0 18px;}
.rc-corps{display:flex; flex-direction:column; gap:7px;}

.rc-ligne{
  display:flex; align-items:center; gap:12px;
  background:var(--blanc, #F4F5F0); border-radius:12px; padding:12px 14px;
  transition:background .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
a.rc-ligne:hover{background:var(--camel-wash, #F3E4D0); transform:translateX(3px);}
/* Un bloc déjà fait s'efface : il est là pour montrer le chemin
   parcouru, pas pour disputer l'attention à ce qui reste. */
.rc-ligne.fait{opacity:.5;}
.rc-marque{
  width:20px; height:20px; flex-shrink:0; border-radius:50%;
  border:1.5px solid var(--camel-pale, #E8C9A0); background:var(--white, #FDFCFA);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--white, #FDFCFA);
}
.rc-marque.fait{background:#1FBF63; border-color:#1FBF63;}
.rc-quoi{flex:1; min-width:0;}
.rc-quoi b{display:block; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; color:var(--cuir, #2C1B11);}
.rc-quoi span{display:block; font-size:12px; line-height:1.45; color:var(--stone, #8A7A6A); margin-top:2px;}
.rc-fleche{font-size:14px; color:var(--camel, #D09D65); flex-shrink:0;}

@media(max-width:520px){
  .rc-boite{padding:22px 20px 20px; border-radius:16px;}
}

/* ══════════════════════════════════════════════════════════════════
   QUI S'EST MANIFESTÉ SUR UNE ANNONCE

   Le compteur d'intérêts devient cliquable dès qu'il y a quelqu'un
   derrière. Sans écho, il reste une mention grise : rien à ouvrir,
   donc rien qui invite à cliquer.
   ══════════════════════════════════════════════════════════════════ */

button.job-interets.ouvrable{
  border:1px solid var(--camel-pale, #E8C9A0);
  background:var(--white, #FDFCFA);
  color:var(--cuir, #2C1B11);
  cursor:pointer; font:inherit;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
button.job-interets.ouvrable:hover{
  background:var(--camel-wash, #F3E4D0);
  border-color:var(--camel, #D09D65);
  transform:translateY(-1px);
}
button.job-interets.ouvrable span{opacity:.55; margin-left:3px;}

/* ── Le panneau ── */
/* Même raison : la liste des intérêts peut s'ouvrir par-dessus une
   fenêtre déjà ouverte. */
.ri-voile{
  position:fixed; inset:0; z-index:600;
  background:rgba(28,17,10,.5); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.ri-voile.ouvert{display:flex;}
.ri-boite{
  position:relative; width:min(560px, 100%); max-height:80vh; overflow-y:auto;
  background:var(--white, #FDFCFA); border-radius:20px; padding:28px 28px 24px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.ri-fermer{
  position:absolute; top:16px; right:16px; width:30px; height:30px;
  border:none; border-radius:50%; background:var(--blanc, #F4F5F0);
  color:var(--stone, #8A7A6A); cursor:pointer; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
}
.ri-fermer:hover{background:var(--camel-wash, #F3E4D0); color:var(--cuir, #2C1B11);}
.ri-titre{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:18px;
  color:var(--cuir, #2C1B11); letter-spacing:-.01em; margin:0 34px 3px 0;
}
.ri-sous{
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--camel, #D09D65); margin:0 0 18px;
}
.ri-corps{display:flex; flex-direction:column; gap:9px;}
.ri-vide{font-size:13.5px; line-height:1.6; color:var(--stone, #8A7A6A); margin:0;}

.ri-ligne{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--blanc, #F4F5F0); border-radius:12px; padding:12px 14px;
}
.ri-av{
  width:34px; height:34px; flex-shrink:0; border-radius:50%;
  background:var(--cuir, #2C1B11); color:var(--camel-pale, #E8C9A0);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:13px;
}
.ri-qui{flex:1; min-width:120px;}
.ri-qui b{display:block; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; color:var(--cuir, #2C1B11);}
.ri-qui span{font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--stone, #8A7A6A);}

/* L'état côté Roary. C'est ce qui évite le doublon : un établissement
   qui voit « Non retenu » ne relance pas Roary pour rien. */
.ri-etat{
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; border-radius:20px; padding:4px 10px; white-space:nowrap;
}
.ri-etat.attente{background:rgba(208,157,101,.18); color:#A9743F;}
.ri-etat.oui{background:rgba(92,122,46,.14); color:#4A6325;}
.ri-etat.non{background:rgba(44,27,17,.08); color:var(--stone, #8A7A6A);}

.ri-voir{
  font-family:'Jost',sans-serif; font-weight:300; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--cuir, #2C1B11); border-bottom:1px solid var(--camel, #D09D65);
  padding-bottom:2px; white-space:nowrap;
}
.ri-voir:hover{color:var(--camel, #D09D65);}

@media(max-width:520px){
  .ri-boite{padding:22px 20px 20px; border-radius:16px;}
  .ri-ligne{gap:9px;}
  .ri-voir{width:100%;}
}

/* Le bloc que l'on vient de rejoindre depuis la jauge. Un filet camel
   et un halo, deux secondes et demie : assez pour dire « c'est ici »,
   pas assez pour devenir un ornement. */
.roary-vise{
  animation:roary-vise 2.6s cubic-bezier(.16,1,.3,1);
}
@keyframes roary-vise{
  0%   {box-shadow:0 0 0 0 rgba(208,157,101,0);}
  12%  {box-shadow:0 0 0 4px rgba(208,157,101,.55);}
  70%  {box-shadow:0 0 0 4px rgba(208,157,101,.35);}
  100% {box-shadow:0 0 0 0 rgba(208,157,101,0);}
}
@media (prefers-reduced-motion:reduce){ .roary-vise{animation:none; box-shadow:0 0 0 3px rgba(208,157,101,.5);} }