/* Le chat avec la voyante, bien visible (Charles, 11/11/2026 : « dans le menu fait ressortir le chat », « ce CTA doit
   ressortir mieux que l'autre »). Chargée seulement quand le chat est ouvert dans la langue (ec_chat_css_link).
   1. La pastille de l'en-tête (ec_chat_nav_link) : visage + point vert « en ligne », sur l'accueil et les pages internes.
   2. Sa ligne en tête du menu mobile, avec les minutes offertes.
   3. Le bouton chat du hero de l'accueil (ec_home_chat_cta), plein ; le bouton du tirage passe au trait. */

/* 1. La pastille */
.ec-chat-link { --chat-night:#321641; --chat-live:#22a06b; flex:none; display:inline-flex; align-items:center; gap:9px; min-height:42px; padding:4px 17px 4px 4px; border-radius:999px; background:var(--chat-night); color:#fff8ef; font-size:13px; font-weight:600; line-height:1.2; letter-spacing:0; text-decoration:none; white-space:nowrap; box-shadow:0 8px 20px -12px #321641; transition:background-color .2s ease; }
.ec-chat-link:hover { background:#4a2160; color:#fff8ef; }
.ec-chat-link:focus-visible { outline:2px solid #bd387b; outline-offset:3px; }
.ec-chat-link::after { display:none; }
.ec-chat-link__face { position:relative; flex:none; width:34px; height:34px; }
.ec-chat-link__face img { display:block; width:100%; height:100%; border:2px solid #fff8ef; border-radius:50%; object-fit:cover; }
.ec-chat-link__face i { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border:2px solid var(--chat-night); border-radius:50%; background:var(--chat-live); animation:ec-chat-live 2s ease-in-out infinite; }
@keyframes ec-chat-live { 0%,100% { box-shadow:0 0 0 0 #22a06b8c; } 60% { box-shadow:0 0 0 6px #22a06b00; } }
.ec-chat-link__short { display:none; }
.ec-chat-link__free { flex:none; padding:4px 9px; border-radius:999px; background:#fff; color:#b0075c; font-size:11px; font-weight:700; line-height:1.2; white-space:nowrap; }

/* Pages internes (templates/chrome.php) : en-tête de 1080 px, libellé court pour que le menu tienne sur une ligne ;
   la pastille prend la place libérée par le menu replié. */
.ec-public .header__inner > .ec-chat-link { margin-left:4px; }
.ec-public .header__inner > .ec-chat-link .ec-chat-link__long { display:none; }
.ec-public .header__inner > .ec-chat-link .ec-chat-link__short { display:inline; }
@media (max-width:1080px) {
  .ec-public .header__inner > .ec-chat-link { margin-left:auto; }
  .ec-public .header__inner > .ec-chat-link ~ .header__cta { margin-left:0; }
}
@media (max-width:620px) {
  .ec-public .header__inner > .ec-chat-link ~ .language-switch { margin-left:0; }
}

/* Accueil : le libellé long seulement quand le menu, la pastille et « Começar minha leitura » tiennent sur une ligne. */
@media (max-width:1399px) {
  .rf-header .ec-chat-link__long { display:none; }
  .rf-header .ec-chat-link__short { display:inline; }
}

/* Téléphone : libellé court, le menu est replié derrière le burger. */
@media (max-width:600px) {
  .ec-chat-link { gap:7px; min-height:38px; padding:3px 13px 3px 3px; font-size:13px; }
  .ec-chat-link__face { width:32px; height:32px; }
  .ec-chat-link__long { display:none; }
  .ec-chat-link__short { display:inline; }
}
/* Petits téléphones (360 px) : logo, pastille et burger sur une ligne. */
@media (max-width:400px) {
  .rf-body.rf-page-home .rf-header__inner { gap:10px; }
  .rf-body.rf-page-home .rf-header__inner > .rf-logo { gap:8px; font-size:23px; }
  .rf-body.rf-page-home .rf-header__inner > .rf-logo .rf-logo__mark { width:36px; height:36px; padding:6px; }
  .ec-chat-link { gap:6px; padding-right:11px; }
  .ec-chat-link__face { width:30px; height:30px; }
}

/* 2. En tête du menu mobile */
.ec-story-page .ec-mobile-menu a.ec-chat-link--menu,
.ec-public .mobile-menu a.ec-chat-link--menu:not(.btn) { display:flex; gap:12px; min-height:60px; margin:2px 0 10px; padding:9px 12px 9px 9px; border:0; border-radius:12px; background:var(--chat-night); color:#fff8ef; font-size:15px; font-weight:600; }
.ec-story-page .ec-mobile-menu a.ec-chat-link--menu:hover,
.ec-public .mobile-menu a.ec-chat-link--menu:not(.btn):hover { background:#4a2160; color:#fff8ef; }
.ec-chat-link--menu .ec-chat-link__face { width:42px; height:42px; }
.ec-chat-link--menu .ec-chat-link__label { flex:1; min-width:0; white-space:normal; }

/* 3. Le hero de l'accueil (templates/home_celestial.php) */
.ec-home-hero__buttons { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.rf-body.ec-home.ec-story-page .ec-home-chat-cta { --chat-night:#321641; --chat-live:#22a06b; gap:13px; min-height:64px; padding:9px 22px 9px 9px; border-radius:999px; font-size:16px; font-weight:700; box-shadow:0 0 0 5px #cf086b2e,0 16px 36px -14px #cf086b; }
.rf-body.ec-home.ec-story-page .ec-home-chat-cta:hover { box-shadow:0 0 0 7px #cf086b38,0 18px 38px -14px #cf086b; }
.ec-home-chat-cta .ec-chat-link__face { width:46px; height:46px; }
.ec-home-chat-cta .ec-chat-link__face i { width:14px; height:14px; border-color:#cf086b; }
.rf-body.ec-home.ec-story-page .ec-home-chat-cta:hover .ec-chat-link__face i { border-color:#aa0656; }
.ec-home-chat-cta__label { white-space:nowrap; }
.rf-body.ec-home.ec-story-page .ec-home-hero__action--chat .ec-home-hero__reading { min-width:0; min-height:56px; padding-inline:24px; border:1px solid #e9d2ab99; background:transparent; color:#fff4df; box-shadow:none; }
.rf-body.ec-home.ec-story-page .ec-home-hero__action--chat .ec-home-hero__reading:hover { border-color:#f3dfbb; background:#ffffff14; }
@media (max-width:700px) {
  .ec-home-hero__buttons { flex-direction:column; align-items:stretch; gap:11px; }
  .rf-body.ec-home.ec-story-page .ec-home-chat-cta { min-height:62px; padding-right:18px; font-size:15px; }
  .rf-body.ec-home.ec-story-page .ec-home-hero__action--chat .ec-home-hero__reading { min-height:50px; }
}

@media (prefers-reduced-motion:reduce) { .ec-chat-link__face i { animation:none; } }