/* =========================================================================
   FICHE — la pastille qui s'ouvre au survol
   -------------------------------------------------------------------------
   Reprise de l'effet du site de Yoan, transposé dans le langage de Sitero
   (blanc, filets fins, turquoise, Inter — pas d'Anton ni d'italique penché).

   Au repos  : une gélule. Une petite photo ronde, un nom, un rôle.
   Au survol : la gélule devient une carte, la photo grandit et passe en
               couleur, le nom grossit, et ce qui était replié se déroule.

   TROIS CHOIX QUI COMPTENT
   1. La hauteur de la partie repliée est INCONNUE (le texte peut passer sur
      deux lignes selon la largeur). On l'ouvre donc avec une grille
      « grid-template-rows: 0fr -> 1fr », la seule façon d'animer une hauteur
      qu'on ne connaît pas. Un max-height obligerait à deviner une borne.
   2. La photo est en niveaux de gris au repos et revient en couleur au
      survol : c'est ce qui fait que le visage « s'allume » quand on arrive
      dessus, plus encore que l'agrandissement.
   3. Tout est en transition CSS, aucun JavaScript. Sans script la fiche
      reste parfaitement utilisable, et sur un écran tactile (où il n'y a pas
      de survol) le contenu replié est affiché en permanence.
   ========================================================================= */

.fiche{
  display:inline-flex;align-items:center;gap:14px;
  max-width:100%;
  padding:8px 24px 8px 8px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-radius .55s var(--e),padding .55s var(--e),
             border-color .45s ease,box-shadow .55s var(--e),
             transform .55s var(--e);
}

/* ---------- la photo ---------- */
/* La boîte porte la taille et l'arrondi ; l'image ne fait que la remplir.
   Deux propriétaires auraient produit un saut au changement de main. */
.fiche__ph{
  flex:0 0 auto;display:block;overflow:hidden;
  width:58px;height:58px;border-radius:50%;
  background:var(--paper);
  transition:width .55s var(--e),height .55s var(--e),border-radius .55s var(--e);
}
.fiche__ph img{
  width:100%;height:100%;object-fit:cover;object-position:center 24%;
  display:block;
  filter:grayscale(1) contrast(1.04);
  transition:filter .5s ease,transform .8s var(--e);
}

/* ---------- la colonne de texte ---------- */
.fiche__co{display:flex;flex-direction:column;min-width:0}
.fiche__co b{
  display:block;font-size:.98rem;font-weight:640;letter-spacing:-.02em;
  line-height:1.25;color:var(--ink);
  transition:font-size .5s var(--e);
}
.fiche__role{
  display:block;margin-top:2px;
  font-size:.78rem;line-height:1.35;color:var(--ink-3);
}

/* ---------- la partie repliée ---------- */
.fiche__plus{
  display:grid;grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .55s var(--e),opacity .35s ease,margin-top .55s var(--e);
}
.fiche__plus-in{overflow:hidden;min-height:0}

.fiche__tel{
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:1.22rem;font-weight:640;letter-spacing:-.02em;
  color:var(--tint);
}
/* Le point qui bat. Une seule ombre animée, aucune reprise de mise en page. */
.fiche__tel i{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--tint);
  box-shadow:0 0 0 0 rgba(0,146,181,.55);
  animation:fichePouls 2.4s infinite;
}
@keyframes fichePouls{
  70%{box-shadow:0 0 0 9px rgba(0,146,181,0)}
  100%{box-shadow:0 0 0 0 rgba(0,146,181,0)}
}
.fiche__cta{
  display:block;margin-top:5px;
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}

/* ---------- l'ouverture ---------- */
/* Regroupée dans une seule règle appliquée au survol ET au focus clavier :
   la fiche de Thibault porte son numéro, il ne doit pas être réservé à la
   souris. */
@media (hover:hover) and (pointer:fine){
  .fiche:hover,.fiche:focus-visible{
    border-radius:var(--r-l);
    padding:14px 26px 14px 14px;
    border-color:rgba(0,146,181,.42);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.28);
    transform:translateY(-4px);
  }
  .fiche:hover .fiche__ph,.fiche:focus-visible .fiche__ph{
    width:124px;height:156px;border-radius:14px;
  }
  .fiche:hover .fiche__ph img,.fiche:focus-visible .fiche__ph img{
    filter:grayscale(0) contrast(1);transform:scale(1.04);
  }
  .fiche:hover .fiche__co b,.fiche:focus-visible .fiche__co b{font-size:1.18rem}
  .fiche:hover .fiche__plus,.fiche:focus-visible .fiche__plus{
    grid-template-rows:1fr;opacity:1;margin-top:11px;
  }
}

/* Écrans tactiles : pas de survol possible, donc rien n'est replié. La photo
   reste petite et ronde — c'est la forme au repos, pas un état dégradé. */
@media (hover:none){
  .fiche__plus{grid-template-rows:1fr;opacity:1;margin-top:9px}
  .fiche__tel{font-size:1.06rem}
  .fiche__ph img{filter:none}
}

/* Mouvement réduit : on garde l'ouverture (c'est de l'information), on
   retire seulement ce qui bouge pour bouger. */
@media (prefers-reduced-motion:reduce){
  .fiche,.fiche__ph,.fiche__ph img,.fiche__co b,.fiche__plus{transition:none}
  .fiche:hover{transform:none}
  .fiche__tel i{animation:none}
}


/* =========================================================================
   VARIANTE VIZION — même geste, leurs couleurs
   -------------------------------------------------------------------------
   🔴 Leur vert #D8FE04 ne porte JAMAIS de texte (blanc dessus : 1,1:1).
   Il ne sert donc ici qu'en filet et en accent sur du noir.
   Aucun numéro ni courriel : on n'affiche que ce que leur propre site
   publie déjà — le nom et le rôle.
   ========================================================================= */
.fiche--vz{
  background:#0e0f0d;
  border-color:rgba(216,254,4,.28);
  box-shadow:none;
}
.fiche--vz .fiche__ph{background:#1a1c17;border:1.5px solid var(--vz-vert,#D8FE04)}
.fiche--vz .fiche__co b{color:#fff}
.fiche--vz .fiche__role{color:#9AA093}
.fiche--vz .fiche__cta{color:var(--vz-vert,#D8FE04);margin-top:0}

@media (hover:hover) and (pointer:fine){
  .fiche--vz:hover,.fiche--vz:focus-visible{
    border-color:var(--vz-vert,#D8FE04);
    box-shadow:0 18px 40px -20px rgba(216,254,4,.35);
  }
  /* Le liseré vert suit l'arrondi de la boîte quand elle s'agrandit. */
  .fiche--vz:hover .fiche__ph,.fiche--vz:focus-visible .fiche__ph{border-radius:12px}
}