/* ELEPH' FANS — styles du fil d'actualités (Lot 1).
   RTL-safe : propriétés logiques uniquement (inline-start/end, margin-inline…),
   jamais left/right en dur. Les composants ne référencent que var(--ef-*). */

/* Accent branding dans la navbar */
.ef-brand > a span{
  border-block-end:2px solid var(--ef-ci-orange);
  padding-block-end:2px;
}

/* Direction B — l'item ELEPH' FANS prend l'accent orange en hover/actif
   (distingue la sous-marque communautaire du bleu STATSMAKER). On surcharge
   la pill bleue générique du navmenu uniquement pour cet item. Restreint au
   desktop (mêmes conditions que les états navmenu de main.css). */
@media (min-width:1200px){
  .navmenu .ef-brand:hover > a,
  .navmenu .ef-brand > a.active,
  .navmenu .ef-brand > a.active:focus{
    color:var(--ef-ci-orange-strong);
    background:var(--ef-ci-orange-soft);
    border-block-end-color:var(--ef-ci-orange);
  }
}

/* Bandeau de module */
.ef-module-bar{
  background:var(--ef-ci-orange-soft);
  border-radius:var(--ef-radius);
  padding:var(--ef-space-3) var(--ef-space-4);
  margin-block-end:var(--ef-space-5);
  display:flex;align-items:center;gap:var(--ef-space-3);
}
.ef-module-bar .ef-module-icon{font-size:1.4rem;}

/* Feed : colonne lisible centrée */
.ef-feed{max-width:720px;margin-inline:auto;}

/* Carte d'actualité (base visuelle .match-card) */
.ef-actu-card{
  background:var(--ef-surface);
  border:1px solid var(--ef-border);
  border-radius:var(--ef-radius);
  box-shadow:var(--ef-shadow);
  overflow:hidden;
  margin-block-end:var(--ef-space-5);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ef-actu-card:hover{transform:translateY(-4px);box-shadow:var(--ef-shadow-hover);}
.ef-actu-media{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--ef-surface-alt);}
.ef-actu-body{padding:var(--ef-space-4);}
.ef-actu-meta{font-size:var(--ef-fs-meta);color:var(--ef-text-muted);display:flex;gap:var(--ef-space-2);flex-wrap:wrap;align-items:center;}
.ef-actu-title{font-size:var(--ef-fs-title);font-weight:700;color:var(--ef-text);margin-block:var(--ef-space-2);}
.ef-actu-excerpt{font-size:var(--ef-fs-body);color:var(--ef-text);}
.ef-actu-footer{
  display:flex;align-items:center;gap:var(--ef-space-3);flex-wrap:wrap;
  padding:var(--ef-space-3) var(--ef-space-4);
  border-block-start:1px solid var(--ef-border-soft);
  font-size:var(--ef-fs-meta);
}

/* Pastille type média */
.ef-type-badge{
  display:inline-block;
  background:var(--ef-ci-orange-soft);
  color:var(--ef-ci-orange-strong);
  border-radius:var(--ef-radius-sm);
  padding:2px 8px;font-size:var(--ef-fs-meta);font-weight:600;
}

/* Boutons d'action */
.ef-action-btn{
  background:none;border:1px solid var(--ef-border-strong);
  border-radius:999px;padding:4px 12px;
  color:var(--ef-text-muted);font-size:var(--ef-fs-meta);
  cursor:pointer;display:inline-flex;align-items:center;gap:var(--ef-space-1);
  min-height:36px;
}
.ef-action-btn:hover{background:var(--ef-primary);color:#fff;border-color:var(--ef-primary);}
.ef-btn-statsmaker{margin-inline-start:auto;}

/* Icône directionnelle : miroir en RTL */
.ef-icon-forward{display:inline-block;}
[dir="rtl"] .ef-icon-forward{transform:scaleX(-1);}

/* Fil de commentaires */
.ef-comments{max-width:720px;margin-inline:auto;margin-block-start:var(--ef-space-6);}
.ef-comment{padding:var(--ef-space-3) 0;border-block-end:1px solid var(--ef-border-soft);}
.ef-comment-author{font-weight:600;color:var(--ef-text);}
.ef-comment-meta{font-size:var(--ef-fs-meta);color:var(--ef-text-muted);}
.ef-comment-reponses{margin-inline-start:var(--ef-space-5);margin-block-start:var(--ef-space-2);}

/* Liseré « motif grave » dans la modale de signalement */
.ef-report-modal .ef-motif-grave{border-inline-start:3px solid var(--ef-danger);padding-inline-start:var(--ef-space-2);}

/* ──────────────────────────────────────────────────────────────────
   LOT 4 — Interactions sociales (likes, stats, actions de commentaire).
   Aucun nouveau token hex : on dérive de la charte existante (--ef-*).
   ────────────────────────────────────────────────────────────────── */

/* Barre de stats (résumé likes + commentaires) — le « clin d'œil » */
.ef-stats-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--ef-space-3);flex-wrap:wrap;
  padding:var(--ef-space-2) var(--ef-space-4);
  border-block-start:1px solid var(--ef-border-soft);
  font-size:var(--ef-fs-meta);color:var(--ef-text-muted);
}
.ef-stats-likes{display:inline-flex;align-items:center;gap:var(--ef-space-1);}
.ef-stats-likes .ef-like-pill{        /* pastille ronde « 👍 » façon FB */
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:18px;block-size:18px;border-radius:999px;
  background:var(--ef-primary);color:#fff;font-size:.6rem;
}
.ef-stats-comments-link{color:var(--ef-text-muted);text-decoration:none;}
.ef-stats-comments-link:hover{color:var(--ef-primary);text-decoration:underline;}

/* Like — variante d'ef-action-btn (toggle), teinte « aimé » dérivée du bleu */
.ef-like-btn .bi{transition:transform .15s ease;}
.ef-like-btn.is-active{
  background:var(--ef-primary-soft);
  border-color:var(--ef-primary);
  color:var(--ef-primary);              /* icône + bordure */
}
.ef-like-btn.is-active .ef-like-label{color:var(--ef-text);} /* libellé AA */
.ef-like-btn.is-active:hover{background:var(--ef-primary);color:#fff;}
.ef-like-btn.is-active:hover .ef-like-label{color:#fff;}
.ef-like-btn[aria-busy="true"]{pointer-events:none;opacity:.7;}

/* Compteurs inline des actions (J'aime / Commenter) — même rendu */
.ef-like-count,.ef-comment-count{font-variant-numeric:tabular-nums;}

/* Focus clavier homogène pour toutes les actions */
.ef-action-btn:focus-visible{outline:none;box-shadow:var(--nav-focus-ring);}

/* Byline « Posté par » (détail) sous la barre d'actions */
.ef-actu-byline{
  padding:0 var(--ef-space-4) var(--ef-space-3);
  font-size:var(--ef-fs-meta);color:var(--ef-text-muted);
}

/* Barre d'actions plein-largeur sur mobile */
@media (max-width:575.98px){
  .ef-actu-footer .ef-action-btn{flex:1 1 0;justify-content:center;min-height:40px;}
}

/* Micro-stats + actions au niveau commentaire */
.ef-comment-stats{
  font-size:var(--ef-fs-meta);color:var(--ef-text-muted);
  margin-block-start:var(--ef-space-1);
  display:flex;gap:var(--ef-space-2);align-items:center;
}
.ef-comment-actions{
  display:flex;gap:var(--ef-space-2);flex-wrap:wrap;
  margin-block-start:var(--ef-space-1);
}
.ef-comment-actions .ef-action-btn{        /* version compacte */
  padding:2px 10px;min-height:30px;font-size:var(--ef-fs-meta);
}

/* Formulaire de réponse déplié */
.ef-reply-form{margin-block-start:var(--ef-space-2);display:none;}
.ef-reply-form.is-open{display:block;}

@media (prefers-reduced-motion:reduce){
  .ef-like-btn .bi{transition:none;}
  .ef-actu-card{transition:none;}
}

/* Chat temps réel (Lot 7) — réutilise les tokens eleph, RTL-safe. */
.ef-chat{max-width:720px;margin-inline:auto;margin-block-start:var(--ef-space-5);}
.ef-chat-log{
  background:var(--ef-surface);
  border:1px solid var(--ef-border);
  border-radius:var(--ef-radius);
  padding:var(--ef-space-3) var(--ef-space-4);
  max-height:60vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--ef-space-2);
}
.ef-chat-message{padding:var(--ef-space-2) 0;border-block-end:1px solid var(--ef-border-soft);transition:opacity .15s ease;}
.ef-chat-author{font-weight:600;color:var(--ef-text);margin-inline-end:var(--ef-space-2);}
.ef-chat-body{color:var(--ef-text);word-break:break-word;}
.ef-chat-form{margin-block-start:var(--ef-space-3);}
/* États d'envoi (item 13) — aucune couleur nouvelle, tokens --ef-* existants. */
.ef-chat-message--pending{opacity:.6;}
.ef-chat-status{margin-inline-start:var(--ef-space-2);font-size:.85em;color:var(--ef-text-muted);}
.ef-chat-message--failed .ef-chat-status{color:var(--ef-danger);}
.ef-chat-retry{color:var(--ef-primary);text-decoration:underline;}

/* ──────────────────────────────────────────────────────────────────
   JEU CONCOURS — styles front fan (subnav, chrono, billet, résultats).
   Réutilise la charte ELEPH' FANS : aucun hex nouveau, seulement var(--ef-*),
   propriétés logiques RTL-safe, conventions des composants existants.
   ────────────────────────────────────────────────────────────────── */

/* Barre d'onglets communauté (Fil · Agenda · Sondages · Chat · Jeux) —
   pilules dérivées de .ef-action-btn, scrollables sur mobile. */
.ef-subnav{
  display:flex;flex-wrap:nowrap;gap:var(--ef-space-2);
  overflow-x:auto;
  margin-block-end:var(--ef-space-5);
  padding-block-end:var(--ef-space-1);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.ef-subnav-link{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:var(--ef-space-1);
  white-space:nowrap;
  background:none;border:1px solid var(--ef-border-strong);
  border-radius:999px;padding:4px 14px;min-height:36px;
  color:var(--ef-text-muted);font-size:var(--ef-fs-meta);font-weight:600;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ef-subnav-link:hover{
  background:var(--ef-ci-orange-soft);
  color:var(--ef-ci-orange-strong);
  border-color:var(--ef-ci-orange);
}
.ef-subnav-link.is-active{           /* onglet courant : pilule pleine orange */
  background:var(--ef-ci-orange);
  border-color:var(--ef-ci-orange);
  color:#fff;
}
.ef-subnav-link:focus-visible{outline:none;box-shadow:var(--nav-focus-ring);}

/* Carte de jeu annulée — atténuée (§2.1). */
.ef-card-muted{opacity:.85;}

/* Bloc « Règles du jeu » — liste icône + ligne (jeu_detail). */
.ef-quiz-rules{margin-block:var(--ef-space-3);}
.ef-quiz-rules li{
  display:flex;align-items:flex-start;gap:var(--ef-space-2);
  padding-block:var(--ef-space-1);
  color:var(--ef-text);font-size:var(--ef-fs-body);
}
.ef-quiz-rules li .bi{
  color:var(--ef-ci-orange-strong);
  flex:0 0 auto;line-height:1.5;
}

/* Chrono sticky — barre de progression + mm:ss, paliers vert/orange/rouge.
   L'info vit dans le texte (.ef-quiz-timer-text) ; la barre est décor. */
.ef-quiz-timer{
  position:sticky;inset-block-start:var(--ef-space-2);z-index:10;
  display:flex;align-items:center;gap:var(--ef-space-2);
  background:var(--ef-surface);
  border:1px solid var(--ef-border);
  border-inline-start:4px solid var(--ef-success);   /* palier sûr par défaut */
  border-radius:var(--ef-radius);
  box-shadow:var(--ef-shadow);
  padding:var(--ef-space-3) var(--ef-space-4);
  margin-block-end:var(--ef-space-4);
}
.ef-quiz-timer .bi{font-size:1.25rem;color:var(--ef-success);flex:0 0 auto;}
.ef-quiz-timer-text{
  font-size:var(--ef-fs-title);font-weight:700;color:var(--ef-text);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;min-inline-size:3.5ch;
}
.ef-quiz-timer-bar{                  /* barre de progression (largeur pilotée par JS) */
  display:block;flex:1 1 auto;
  block-size:8px;border-radius:999px;
  background:var(--ef-success);
  transition:width 1s linear, background-color .3s ease;
}
/* Palier 20–50 % — orange identité CI (le JS pose .is-warning). */
.ef-quiz-timer.is-warning{border-inline-start-color:var(--ef-ci-orange);}
.ef-quiz-timer.is-warning .bi{color:var(--ef-ci-orange-strong);}
.ef-quiz-timer.is-warning .ef-quiz-timer-bar{background:var(--ef-ci-orange);}
/* Palier ≤ 20 % — rouge, chiffres en gras + pulsation (le JS pose .is-danger). */
.ef-quiz-timer.is-danger{
  border-inline-start-color:var(--ef-danger);
  animation:ef-timer-pulse 1s ease-in-out infinite;
}
.ef-quiz-timer.is-danger .bi{color:var(--ef-danger);}
.ef-quiz-timer.is-danger .ef-quiz-timer-text{color:var(--ef-danger);font-weight:800;}
.ef-quiz-timer.is-danger .ef-quiz-timer-bar{background:var(--ef-danger);}
@keyframes ef-timer-pulse{
  0%,100%{box-shadow:var(--ef-shadow);}
  50%{box-shadow:0 0 0 3px var(--ef-danger-soft);}
}

/* Bandeau « perte de connexion » — non bloquant, sticky sous le chrono.
   Couleur orange identité CI doublée d'une icône (jamais la couleur seule). */
.ef-quiz-offline{
  display:flex;align-items:center;gap:var(--ef-space-2);
  position:sticky;inset-block-start:var(--ef-space-2);z-index:9;
  background:var(--ef-ci-orange-soft);
  border:1px solid var(--ef-ci-orange);
  border-inline-start:4px solid var(--ef-ci-orange);
  border-radius:var(--ef-radius);
  padding:var(--ef-space-2) var(--ef-space-4);
  margin-block-end:var(--ef-space-4);
  color:var(--ef-text);font-size:var(--ef-fs-body);font-weight:600;
}
.ef-quiz-offline .bi{color:var(--ef-ci-orange-strong);flex:0 0 auto;}
.ef-quiz-offline[hidden]{display:none;}

/* État « temps écoulé » — écran dédié rouge, icône + texte non culpabilisant. */
.ef-quiz-expired{
  border-inline-start:4px solid var(--ef-danger);
}
.ef-quiz-expired[hidden]{display:none;}
.ef-quiz-expired-title{
  display:flex;align-items:center;gap:var(--ef-space-2);
  font-size:var(--ef-fs-title);font-weight:700;
  color:var(--ef-danger);
  margin-block-end:var(--ef-space-2);
}
.ef-quiz-expired-title .bi{flex:0 0 auto;}
.ef-quiz-expired .ef-action-btn{margin-block-start:var(--ef-space-2);}

/* Carte d'une question — variante allégée de .ef-actu-card. */
.ef-quiz-question{
  background:var(--ef-surface);
  border:1px solid var(--ef-border);
  border-radius:var(--ef-radius);
  box-shadow:var(--ef-shadow);
  padding:var(--ef-space-4);
  margin-block-end:var(--ef-space-4);
}
.ef-quiz-question > legend{       /* <legend> rendu comme un titre de question */
  float:none;width:auto;
  font-size:var(--ef-fs-body);margin-block-end:var(--ef-space-2);
}

/* Billet « ticket » — numéro de participation héro (§2.6). */
.ef-ticket{
  text-align:center;
  background:var(--ef-ci-orange-soft);
  border:2px dashed var(--ef-ci-orange);
  border-radius:var(--ef-radius);
  padding:var(--ef-space-5) var(--ef-space-4);
  margin-block:var(--ef-space-4);
}
.ef-ticket-label{
  font-size:var(--ef-fs-meta);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ef-ci-orange-strong);
  margin-block-end:var(--ef-space-2);
}
.ef-ticket-numero{
  font-size:var(--ef-fs-price);font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:var(--ef-ci-orange-strong);
  margin-block-end:var(--ef-space-2);
}

/* Bandeau « mon résultat » mis en avant (gagnant) — alert + success-soft. */
.ef-result-mine{
  display:flex;align-items:center;gap:var(--ef-space-2);
  background:var(--ef-success-soft);
  border-inline-start:4px solid var(--ef-success);
  font-weight:600;
}
.ef-result-mine .bi{color:var(--ef-success);font-size:var(--ef-fs-title);flex:0 0 auto;}

/* Pastilles de numéros gagnants — tabular-nums ; le sien surligné (.is-mine). */
.ef-winner-chip{
  font-variant-numeric:tabular-nums;
  font-size:var(--ef-fs-body);
}
.ef-winner-chip.is-mine{
  background:var(--ef-primary-soft) !important;   /* surcharge .bg-light Bootstrap */
  color:var(--ef-primary) !important;
  box-shadow:var(--nav-focus-ring);
}

/* Réductions de mouvement : pas de pulsation ni transitions chrono. */
@media (prefers-reduced-motion:reduce){
  .ef-quiz-timer.is-danger{animation:none;}
  .ef-quiz-timer-bar{transition:none;}
  .ef-subnav-link{transition:none;}
}

/* Mobile : onglets et chrono plein-largeur lisibles. */
@media (max-width:575.98px){
  .ef-quiz-timer{inset-block-start:0;}
  .ef-ticket-numero{font-size:var(--ef-fs-h);}
}

/* ════════════════════════════════════════════════════════════════════
   Résultats inline « poll » — page détail sondage (côté fan, RG-RI-*)
   100 % dérivé des tokens --ef-* (aucun hex). Bleu --ef-primary = agrégat
   neutre ; orange CI = « toi » (réponse du fan). Barre décorative, info en
   texte réel. Responsive : libellé qui wrap + % toujours à droite.
   ════════════════════════════════════════════════════════════════════ */
.ef-poll-question{
  font-size:var(--ef-fs-title);font-weight:700;color:var(--ef-text);
  margin-block:var(--ef-space-4) var(--ef-space-3);
}
.ef-poll-hint{font-size:var(--ef-fs-meta);color:var(--ef-text-muted);font-weight:400;}

.ef-poll{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--ef-space-4);
}
.ef-poll-option{
  display:flex;flex-direction:column;gap:var(--ef-space-1);
  padding:var(--ef-space-2) var(--ef-space-3);
  border-radius:var(--ef-radius-sm);
}
.ef-poll-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--ef-space-2);
}
.ef-poll-label{
  color:var(--ef-text);font-size:var(--ef-fs-body);
  display:inline-flex;align-items:center;gap:var(--ef-space-1);
  flex:1 1 auto;min-inline-size:0;word-break:break-word;
}
.ef-poll-pct{
  flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ef-text);font-size:var(--ef-fs-body);
}
.ef-poll-track{
  block-size:10px;border-radius:999px;
  background:var(--ef-surface-alt);overflow:hidden;
}
.ef-poll-fill{
  display:block;block-size:100%;border-radius:999px;
  background:var(--ef-primary);transition:inline-size .6s ease;
}
.ef-poll-meta{margin:0;font-size:var(--ef-fs-meta);color:var(--ef-text-muted);}

/* « Ton choix » : accent identité CI, jamais la couleur seule
   (filet + fond + icône + pastille + libellé gras — 4 indices redondants). */
.ef-poll-option.is-mine{
  background:var(--ef-ci-orange-soft);
  border-inline-start:4px solid var(--ef-ci-orange);
}
.ef-poll-option.is-mine .ef-poll-label{font-weight:700;}
.ef-poll-option.is-mine .ef-poll-label .bi{color:var(--ef-ci-orange-strong);flex:0 0 auto;}
.ef-poll-option.is-mine .ef-poll-fill{background:var(--ef-ci-orange);}
.ef-poll-mine-tag{
  display:inline-block;background:var(--ef-ci-orange-soft);
  color:var(--ef-ci-orange-strong);border:1px solid var(--ef-ci-orange);
  border-radius:var(--ef-radius-sm);padding:1px 8px;
  font-size:var(--ef-fs-meta);font-weight:600;white-space:nowrap;
}

/* Bandeau « Merci » : réutilise .ef-result-mine. Variante close = filet neutre. */
.ef-poll-thanks{display:flex;align-items:center;gap:var(--ef-space-2);}
.ef-poll-thanks-date{font-weight:400;font-size:var(--ef-fs-meta);color:var(--ef-text-muted);}
.ef-poll-thanks--closed{
  background:var(--ef-surface-alt);
  border-inline-start:4px solid var(--ef-text-muted);
}
.ef-poll-thanks--closed .bi{color:var(--ef-text-muted);}

/* Récap note : « Ta note · Moyenne · nb notes ». */
.ef-poll-summary{
  font-size:var(--ef-fs-body);color:var(--ef-text-muted);
  margin-block-end:var(--ef-space-3);
}
.ef-poll-summary strong{color:var(--ef-text);}

/* Encart « Ta réponse » (question texte) — son texte uniquement (RG-RI-11). */
.ef-poll-mytext{
  background:var(--ef-ci-orange-soft);
  border-inline-start:4px solid var(--ef-ci-orange);
  border-radius:var(--ef-radius-sm);
  padding:var(--ef-space-3) var(--ef-space-4);
  margin-block:var(--ef-space-2) var(--ef-space-2);
}
.ef-poll-mytext-label{
  font-weight:700;color:var(--ef-ci-orange-strong);
  font-size:var(--ef-fs-meta);text-transform:uppercase;letter-spacing:.03em;
  margin-block-end:var(--ef-space-1);
}

/* Animation de remplissage légère : neutralisée si mouvement réduit demandé. */
@media (prefers-reduced-motion:reduce){
  .ef-poll-fill{transition:none;}
}

/* ════════════════════════════════════════════════════════════════════
   Menu de partage (Lot 2 — item 7). Dérivé exclusivement des tokens --ef-*
   (couleurs de marque dans _tokens.css). Déclencheur = .ef-action-btn.
   ════════════════════════════════════════════════════════════════════ */
.ef-share{position:relative;display:inline-flex;}

.ef-share-menu{
  position:absolute;inset-block-start:calc(100% + var(--ef-space-1));
  inset-inline-end:0;z-index:1050;min-width:240px;
  background:var(--ef-surface);
  border:1px solid var(--ef-border);
  border-radius:var(--ef-radius);
  box-shadow:var(--ef-shadow-hover);
  padding:var(--ef-space-2);
}
.ef-share-title{
  margin:0;padding:var(--ef-space-1) var(--ef-space-3);
  font-size:var(--ef-fs-meta);font-weight:600;color:var(--ef-text-muted);
}
.ef-share-item{
  display:flex;align-items:center;gap:var(--ef-space-3);
  width:100%;text-align:start;
  padding:var(--ef-space-2) var(--ef-space-3);
  min-height:var(--ef-share-item-min);
  border:none;background:none;cursor:pointer;
  color:var(--ef-text);text-decoration:none;font-size:var(--ef-fs-body);
  border-radius:var(--ef-radius-sm);
}
.ef-share-item:hover,.ef-share-item:focus-visible{
  background:var(--ef-surface-alt);
}
.ef-share-item:focus-visible{outline:none;box-shadow:var(--nav-focus-ring);}
.ef-share-sep{
  height:1px;background:var(--ef-border-soft);
  margin:var(--ef-space-2) var(--ef-space-1);
}
.ef-share-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--ef-share-icon-size);height:var(--ef-share-icon-size);
  border-radius:50%;color:#fff;flex:0 0 auto;
}
.ef-share-icon--whatsapp{background:var(--ef-brand-whatsapp);}
.ef-share-icon--facebook{background:var(--ef-brand-facebook);}
.ef-share-icon--x{background:var(--ef-brand-x);}
.ef-share-icon--telegram{background:var(--ef-brand-telegram);}
.ef-share-icon--instagram{background:var(--ef-brand-instagram);}
.ef-share-icon--email{background:var(--ef-brand-email);}
.ef-share-icon--link{background:var(--ef-brand-link);}

/* Voile de fond (mode feuille du bas). */
.ef-share-backdrop{
  position:fixed;inset:0;z-index:1040;
  background:var(--ef-share-backdrop);
  display:none;
}
.ef-share-backdrop.is-visible{display:block;}

/* Bottom-sheet mobile (largeur < 576px, sans navigator.share). */
.ef-share-menu.is-sheet{
  position:fixed;inset-inline:0;inset-block-end:0;inset-block-start:auto;
  min-width:0;
  border-radius:var(--ef-radius) var(--ef-radius) 0 0;
  padding-block-end:var(--ef-space-5);
  animation:ef-share-slide-up .2s ease-out;
}
@keyframes ef-share-slide-up{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .ef-share-menu.is-sheet{animation:none;}
}