/* ============================================================
   PARTAGE — les boutons de réseaux sociaux d'UpMyChain
   Refait le 10/09/2026.

   💣 POURQUOI CE FICHIER EXISTE, ET PAS UN `<style>` DANS LE PARTIEL.
      Les styles vivaient dans un `@once <style>` à l'intérieur de
      `front-end/_partage.blade.php`. Sur les pages `/profile/{slug}`, ce bloc
      est inclus DANS la zone montée par Vue — et Vue, qui recompile le HTML de
      son élément racine comme un gabarit, **supprime les `<style>` et les
      `<script>` qu'il y trouve**. Résultat mesuré sur `/profile/nolhan-fandi` :
      aucune règle `umc-part` connue du navigateur, et des icônes de **318 px**
      empilées sur toute la hauteur de la colonne. Le bouton « Copier le lien »
      était mort pour la même raison.

   ⭐ Sur l'annuaire, où le bloc est hors de la zone Vue, tout fonctionnait :
      c'est ce qui rendait le défaut invisible pour qui ne regardait pas la
      bonne page.

   📏 Un style qui vit dans le HTML dépend de qui manipule ce HTML. Une feuille
      chargée dans l'en-tête ne dépend de personne.

   ⛔ Les icônes portent EN PLUS des attributs `width`/`height` dans le SVG :
      même sans cette feuille, elles ne peuvent plus grossir. Une seule ligne de
      défense n'en est pas une.
   ============================================================ */

.umc-partage{
    margin:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.umc-partage-titre{
    display:block;
    font-size:11px;
    letter-spacing:.09em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--umc-ink-3,#6b7280);
    margin:0;
}

/* ⭐ Quand le bloc est posé dans un volet qui s'annonce déjà « Partager » — la
   colonne des fiches marchandes —, son propre intitulé fait doublon : on lit
   « Partager » puis « PARTAGER » l'un sous l'autre. On retire le second, pas le
   premier : c'est celui du volet qui porte l'ouverture et la fermeture. */
.umc-fold-body > .umc-partage > .umc-partage-titre{display:none;}

.umc-partage ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}
.umc-partage li{margin:0;padding:0;}
.umc-partage li::before,
.umc-partage li::marker{content:none;}

/* Une pastille sobre par défaut : c'est la couleur de la MARQUE qui apparaît au
   survol, pas sept aplats criards posés côte à côte. Sept boutons colorés en
   permanence, c'est un arc-en-ciel qui attire l'œil plus que le contenu. */
.umc-part{
    display:inline-flex;
    align-items:center;
    gap:7px;
    height:33px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid var(--umc-line-strong,#d3d6dd);
    background:var(--umc-surface,#fff);
    color:var(--umc-ink-2,#3d414a);
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
    box-shadow:none;
    transition:background .15s ease,border-color .15s ease,color .15s ease;
}

.umc-part:hover,
.umc-part:focus-visible{
    background:var(--c,var(--umc-accent,#ff6300));
    border-color:var(--c,var(--umc-accent,#ff6300));
    color:#fff;
    text-decoration:none;
}
.umc-part:focus-visible{
    outline:2px solid var(--c,var(--umc-accent,#ff6300));
    outline-offset:2px;
}

/* ⚠️ `flex:none` : sans lui, l'icône se laisse écraser par l'étiquette dans une
   colonne étroite, et on obtient un logo ovale. */
.umc-part-i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:15px;
    height:15px;
}
.umc-part-i svg{
    width:15px;
    height:15px;
    flex:none;
    display:block;
    fill:currentColor;
}
.umc-part-n{white-space:nowrap;}

/* Le retour du « copier » : vert, le temps de le lire. */
.umc-part-lien.fait{
    background:#12805f;
    border-color:#12805f;
    color:#fff;
}

/* Écran étroit : des pastilles rondes, sans étiquette. Sept mots empilés dans
   une colonne de téléphone prennent plus de place que le contenu partagé. */
@media (max-width:560px){
    .umc-part-n{
        position:absolute;
        width:1px;height:1px;
        margin:-1px;padding:0;border:0;
        overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
    }
    .umc-part{width:38px;height:38px;padding:0;justify-content:center;gap:0;}
    .umc-part-i,.umc-part-i svg{width:16px;height:16px;}
}

@media (prefers-reduced-motion:reduce){
    .umc-part{transition:none;}
}