/* ====================================================================== * Floating TTS Translator — panneau flottant (lecture + traduction) * Autonome et dé-scopé : aucune dépendance à un wrapper. Accroché au . * Identité visuelle Ecoleng conservée (morado #8A2976, radius 15px). * ====================================================================== */ .ftt-reader { position: fixed; z-index: 99999; width: min(420px, calc(100vw - 24px)); display: block; padding: .75rem; background: #FBF6FA; border: 2px solid #D8B4D0; border-radius: 15px; box-shadow: 0 26px 70px rgba(34, 34, 33, .24), 0 8px 22px rgba(138, 41, 118, .12), 0 0 0 1px rgba(138, 41, 118, .10); transform: translate(-50%, calc(-100% - 12px)); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; font-family: Roboto, Arial, sans-serif; font-size: 16px; color: #222221; box-sizing: border-box; } .ftt-reader *, .ftt-reader *::before, .ftt-reader *::after { box-sizing: border-box; } /* ---------------------------------------------------------------------- * v1.3.0 — la pastille du mobile. * * 44 px de haut au lieu des 186 du panneau : elle ne peut plus recouvrir * ce que le lecteur est en train de sélectionner au doigt. Le panneau * complet ne s'ouvre que si on la touche — et ce geste est le seul signal * fiable de « j'ai fini de sélectionner ». * * `pointer-events: none` quand elle est cachée : invisible ne suffit pas, * elle intercepterait des touchers au milieu de l'écran. * ---------------------------------------------------------------------- */ .ftt-pill { position: fixed; z-index: 99999; left: 50%; bottom: 14px; display: inline-flex; align-items: center; justify-content: center; max-width: calc(100vw - 28px); min-height: 44px; /* v1.3.2 — du rembourrage vertical, il n'y en avait aucun (`0 1.15rem`). Tant que le texte tenait sur une ligne, `min-height` sauvait les apparences ; dès qu'il passait à deux lignes, il touchait les bords en haut et en bas. */ padding: .55rem 1.15rem; border: 0; border-radius: 999px; background: #8A2976; color: #FFFFFF; font-family: Roboto, Arial, sans-serif; /* Une seule ligne tant que c'est possible : plutôt rétrécir un peu le texte que couper « Escuchar » au-dessus de « Traducir ». La taille suit la largeur de l'écran, entre 12,8 et 15,2 px. */ font-size: clamp(.8rem, 3.4vw, .95rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; line-height: 1.2; box-shadow: 0 8px 22px rgba(34, 34, 33, .28), 0 0 0 1px rgba(255, 255, 255, .18); cursor: pointer; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; box-sizing: border-box; } .ftt-pill.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } /* Sélection collée au bas de l'écran : la pastille monte, comme le panneau. */ .ftt-pill.is-top { bottom: auto; top: 14px; } .ftt-pill:active { background: #6E1F5E; } @media (prefers-reduced-motion: reduce) { .ftt-pill { transition: none; } } .ftt-reader.is-above { transform: translate(-50%, calc(-100% - 12px)); } .ftt-reader.is-below { transform: translate(-50%, 12px); } .ftt-reader.is-visible { opacity: 1; pointer-events: auto; } .ftt-reader__preview { display: grid; grid-template-columns: 1fr 30px; gap: .5rem; align-items: start; padding-bottom: .55rem; margin-bottom: .6rem; border-bottom: 1px solid rgba(138, 41, 118, .20); } .ftt-reader__preview span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; line-height: 1.35; color: #3c3c3b; } .ftt-reader__preview button[data-action="close"] { width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 1.15rem; line-height: 1; background: #F4F7FA; } .ftt-reader__controls, .ftt-reader__translate { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } /* v1.3.1 — l'attribut `hidden` doit gagner. * * Le JS cache la rangée « Traduire » quand le cadenas se pose, avec * `row.hidden = true`. Mais `hidden` ne fait que `display: none` via la * feuille du navigateur, et n'importe quelle règle d'auteur qui fixe un * `display` la bat. Résultat, depuis la v1.2.0 : le bouton « Traduire » * restait affiché À CÔTÉ du message « tu as utilisé tes traductions * gratuites ». Vu sur une capture, jamais dans le code. * * Le sélecteur d'attribut suffit à reprendre la main, sans !important. */ .ftt-reader__controls[hidden], .ftt-reader__translate[hidden], .ftt-reader__lock[hidden], .ftt-reader__result[hidden] { display: none; } .ftt-reader__controls + .ftt-reader__translate { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(138, 41, 118, .20); } .ftt-reader label { display: inline-flex; align-items: center; gap: .35rem; min-height: 42px; margin: 0; padding: .15rem .3rem .15rem .6rem; border: 1px solid #EEEEEE; border-radius: 8px; background: #FFFFFF; color: #222221; font-size: .84rem; font-weight: 600; } .ftt-reader select { min-height: 38px; border: 0; border-left: 1px solid #EEEEEE; padding: 0 .35rem; background: #FFFFFF; color: #222221; font: inherit; cursor: pointer; } .ftt-reader button { margin: 0; padding: .45rem .8rem; font: inherit; font-size: .86rem; font-weight: 600; background: #EAF7FB; border: 1px solid #EEEEEE; border-radius: 8px; cursor: pointer; color: #222221; text-transform: none; letter-spacing: normal; transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease; } .ftt-reader button:not([data-action="close"]) { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .9rem; line-height: 1.1; } .ftt-reader button[data-action="play"] { background: #F7EEF5; color: #8A2976; border-color: #8A2976; } .ftt-reader button[data-action="play"]:hover { background: #F1E3EE; color: #6e1f5e; border-color: #6e1f5e; } .ftt-reader button[data-action="translate"] { background: #EEF8FB; color: #116E8C; border: 2px solid #5DB9D0; } .ftt-reader button[data-action="translate"]:hover { background: #DDF1F7; border-color: #1895BD; } .ftt-reader button[data-action="stop"] { background: #FFF3F0; color: #a8201a; border-color: #a8201a; } .ftt-reader button[data-action="stop"]:hover { background: #FBE3DE; color: #8e1a13; border-color: #8e1a13; } .ftt-reader button:disabled { opacity: .58; cursor: wait; } .ftt-reader__result { margin-top: .65rem; padding: .7rem .8rem; border-radius: 10px; background: #F7EEF5; color: #222221; font-size: .92rem; line-height: 1.4; } .ftt-reader__result.is-loading { background: #F4F7FA; color: #3c3c3b; } .ftt-reader__result.is-error, .ftt-reader__result.is-warning { background: #FFF3F0; color: #8e1a13; } .ftt-reader__result.is-success { background: #F7EEF5; border: 1px solid #E8D3E3; } /* ====================================================================== * Cadenas : ce qui s'affiche à la place du bouton « Traduire » quand la * dégustation est épuisée. Ce n'est pas une erreur, c'est une invitation : * ton d'invitation, pas de rouge, et l'écoute reste rappelée comme gratuite. * ====================================================================== */ .ftt-reader__lock { margin-top: .55rem; padding: .8rem .85rem; border: 1px solid #E8D3E3; border-radius: 10px; background: #F7EEF5; } .ftt-reader__lock-msg { margin: 0 0 .3rem; font-size: .92rem; font-weight: 600; line-height: 1.35; color: #222221; } .ftt-reader__lock-hint { margin: 0 0 .7rem; font-size: .84rem; line-height: 1.35; color: #3c3c3b; } .ftt-reader__cta { display: inline-flex; align-items: center; justify-content: center; /* Le libellé porte le prix depuis la v1.2.3 : il est plus long qu'avant. Sur un écran étroit il passe à la ligne au lieu de déborder. */ max-width: 100%; text-align: center; min-height: 42px; padding: 0 1.1rem; border-radius: 8px; background: #8A2976; color: #FFFFFF !important; font-size: .9rem; font-weight: 600; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: background .2s ease; } .ftt-reader__cta:hover, .ftt-reader__cta:focus { background: #1FA7A2; color: #FFFFFF !important; } .ftt-reader__cta:focus-visible { outline: 3px solid rgba(24, 149, 189, .35); outline-offset: 3px; } /* ====================================================================== * Encart d'explication, injecté en tête du contenu par le plugin. * Palette Ecoleng : surface blanche, filet bleu, bord #EEEEEE, radius 8px. * ====================================================================== */ /* v1.2.4 — mêmes couleurs que l'ancien encart d'Astra (Custom Layout 19870), celui que les lecteurs d'Ecoleng voient depuis des mois : fond rose très clair, filet vert à gauche, pas de bordure autour. Reprendre l'apparence connue évite que le remplacement se remarque. La marge du bas reste plus grande que dans l'original : ici l'encart touche directement le premier paragraphe et il lui faut de l'air. */ .ftt-notice { margin: 1rem 0 1.4rem; padding: .9rem 1rem; border-left: 4px solid #155724; border-radius: 8px; background: #FFF3F0; box-shadow: 0 4px 14px rgba(0, 0, 0, .10); } .ftt-notice p { margin: 0; font-size: 1rem; line-height: 1.45; color: #222221; } .ftt-notice strong { color: #8A2976; } .ftt-notice a { color: #1895BD; font-weight: 600; text-decoration: none; } .ftt-notice a:hover { color: #1FA7A2; } .ftt-notice__cta { display: inline; } @media (prefers-reduced-motion: reduce) { .ftt-reader, .ftt-reader button, .ftt-reader__cta { transition: none; } } @media (max-width: 640px) { .ftt-reader { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; max-height: min(70vh, 520px); overflow: auto; transform: none; } .ftt-reader.is-above, .ftt-reader.is-below { transform: none; } /* v1.2.8 — le panneau monte en haut de l'écran quand celui du bas recouvrirait la sélection. Sans ça, il se pose pile sur le texte que le lecteur est en train d'ajuster au doigt et l'empêche de finir. */ .ftt-reader.is-mobile-top { top: 12px !important; bottom: auto; } /* v1.2.6 — le panneau mangeait 51 % d'un écran de téléphone (mesuré : 367 px sur 727). Deux économies, sans rien retirer de fonctionnel. 1. L'aperçu tient sur une ligne. Le texte est déjà surligné en bleu juste à côté : le répéter en entier est un luxe d'écran large. 2. Chaque menu déroulant se met à côté de son bouton au lieu de s'offrir une rangée pour lui tout seul. */ .ftt-reader__preview span { -webkit-line-clamp: 1; } .ftt-reader__controls, .ftt-reader__translate { display: grid; align-items: stretch; } .ftt-reader__controls { grid-template-columns: 1fr auto 1fr; /* Lire | vitesse | Stop */ } .ftt-reader__translate { grid-template-columns: 1fr auto; /* Traduire | langue */ } .ftt-reader__controls label, .ftt-reader__translate label { grid-column: auto; justify-content: center; padding-left: .3rem; } /* Le mot « Vitesse » / « Langue » disparaît de l'écran mais reste dans la page pour les lecteurs d'écran : le menu affiche déjà « 0.75x » ou « ES », qui se comprennent seuls à côté de leur bouton. */ .ftt-reader__controls label span, .ftt-reader__translate label span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Plus de texte à gauche : le trait de séparation n'a plus rien à séparer. */ .ftt-reader__controls select, .ftt-reader__translate select { border-left: 0; } .ftt-reader button { justify-content: center; width: 100%; } .ftt-reader__cta { width: 100%; } }