grandit pour occuper l'espace restant → le footer se cale au bas de l'écran sur les pages courtes, et suit le contenu sur les pages longues. */ min-height: 100vh; display: flex; flex-direction: column; /* Ancre la couche de motif (.bg-motif) : elle couvre toute la hauteur du document et défile AVEC le contenu (solidaires, même vitesse). */ position: relative; } /* Mobile / tablette : trame Ndop ATTÉNUÉE (opacités ~÷2) pour qu'elle ne soit pas dominante sur petit écran. On ne redéfinit QUE --lattice-img, rien d'autre. */ @media (max-width: 1024px) { :root, :root[data-theme="light"] { --lattice-img: url("data:image/svg+xml;utf8,"); } :root[data-theme="dark"] { --lattice-img: url("data:image/svg+xml;utf8,"); } } /* Texte d'intro des langues : CALLOUT bien en évidence (bordure dorée, fond teinté, halo lumineux) et texte plus grand/contrasté, pour être remarqué et lu. */ .hub-vision{ margin-top:10px; font-size:1rem; line-height:1.55; color: color-mix(in srgb, var(--text) 82%, var(--muted)); padding:16px 18px; border-radius:16px; border:1.5px solid color-mix(in srgb, var(--gold) 55%, var(--border)); background: radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%), linear-gradient(120deg, rgba(226,181,111,.10), rgba(34,211,238,.05) 72%), var(--card-bg); box-shadow: inset 0 1px 0 var(--card-sheen), 0 0 26px -8px var(--gold); } .hub-vision b{ color:var(--text); font-weight:800; } /* --- Barre supérieure --- */ /* Header en GRILLE 2 niveaux (max), identique PC / mobile / tablette : ligne 1 = marque (gauche) + méta état/version/langue/thème (droite) ; ligne 2 = boutons de navigation (avec texte). */ .topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; /* Grand écart vertical logo → boutons, petite marge boutons → bordure du bas : les lignes de boutons descendent sous le logo et se calent près du bas. */ gap: 18px 12px; padding: 12px clamp(14px, 4vw, 36px) 6px; border-bottom: 1px solid var(--border); /* Header en verre : fond SEMI-TRANSPARENT posé sur son PROPRE motif (plus dense que le body → le header se distingue) + flou marqué. Variante sombre plus bas. */ background: var(--header-bg), url("icons/bg-pattern-light.jpg") center top / 240px auto repeat; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); position: sticky; top: 0; z-index: 20; } :root[data-theme="dark"] .topbar { background: var(--header-bg), url("icons/bg-pattern-dark.jpg") center top / 240px auto repeat; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar { background: var(--header-bg), url("icons/bg-pattern-dark.jpg") center top / 240px auto repeat; } } .brand { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 14px; position: relative; } /* En-tête cinématique : aurore douce (cyan↔vert) qui dérive derrière la marque, posée entre le verre et le texte. Purement décorative, gelée sur mobile + prefers-reduced-motion. */ .brand::before { content: ""; position: absolute; z-index: -1; inset: -16px -44px -20px -28px; pointer-events: none; background: radial-gradient(58% 140% at 18% 50%, color-mix(in srgb, var(--cyan) 46%, transparent), transparent 70%), radial-gradient(54% 140% at 52% 42%, color-mix(in srgb, var(--green) 36%, transparent), transparent 72%), radial-gradient(48% 130% at 82% 58%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 74%); filter: blur(17px); opacity: .7; border-radius: 44px; animation: ngBrandAurora 8s ease-in-out infinite; } @keyframes ngBrandAurora { 0%, 100% { transform: translateX(-6px) scale(1); opacity: .55; } 50% { transform: translateX(16px) scale(1.12); opacity: 1; } } .chips-meta { grid-column: 3; grid-row: 1; justify-self: end; } .chips-nav { grid-column: 1 / -1; grid-row: 2; } .brand-mark { width: 60px; height: 60px; display: block; border-radius: 16px; box-shadow: 0 0 10px rgba(34,211,238,0.3), 0 6px 16px rgba(0,0,0,0.4); } .brand-mark img { width: 100%; height: 100%; display: block; border-radius: 16px; } .brand-txt h1 { margin: 0; font-size: 2.1rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: -.02em; } .brand-txt h1 { background: linear-gradient(100deg, #eafcff 0%, var(--cyan) 45%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cyan); } /* « · Collecte » : nettement plus petit que « LANGIAL » (qui domine). */ .brand-sub { -webkit-text-fill-color: var(--green); color: var(--green); font-weight: 700; font-size: .5em; } /* En clair, l'amorce near-white du dégradé du titre serait invisible : on part directement du cyan pour garder un titre lisible et coloré. */ :root[data-theme="light"] .brand-txt h1 { background: linear-gradient(100deg, var(--cyan) 0%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; } .tagline { margin: 2px 0 0; color: var(--muted); font-size: .78rem; } .chips-nav, .chips-meta { display: flex; align-items: center; } /* Nav resserrée (H et V) pour densifier et remplir la place libre en bout de ligne. Sur grand écran : groupée à gauche, gaps uniformes, la cloche (dernier bouton de la 1re ligne) juste après « Aide ». Sur téléphone (≤560px, plus bas) : la 1re ligne est répartie UNIFORMÉMENT (space-between) pour remplir la largeur. */ .chips-nav { gap: 6px 6px; flex-wrap: wrap; } /* Saut de ligne dur APRÈS la cloche : actif UNIQUEMENT sur téléphone (réactivé dans le bloc ≤560px). Sur PC/tablette il est neutralisé (display:none) → tous les boutons tiennent sur une seule ligne et ne basculent à la ligne suivante que s'ils débordent réellement (wrap naturel), sans mise en page mobile. */ .chips-break { display: none; margin: 0; padding: 0; border: 0; } /* Méta (état) : les deux pastilles « en ligne » / « Drive : prêt » restent TOUJOURS sur une seule ligne (jamais empilées) ; leur taille est réduite si besoin. */ .chips-meta { gap: 6px 7px; flex-wrap: nowrap; } .chips-meta .chip { white-space: nowrap; } /* Outils (version, EN, thème) : sous-groupe poussé à DROITE de la ligne de nav. margin-left:auto le décolle des boutons de nav ; avec le wrap, s'il n'y a plus la place il bascule sur la ligne suivante en restant collé à droite. */ .chips-tools { display: flex; gap: 6px; align-items: center; margin-left: auto; } .chip { font-size: .72rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); /* Matériau verre commun à TOUTES les pilules (reflet interne + légère profondeur) → jamais « plat » au repos, cohérent avec les cadres. */ background-color: var(--panel); background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)); box-shadow: inset 0 1px 0 var(--card-sheen), 0 2px 6px -4px rgba(0,0,0,.38); white-space: nowrap; } /* Un display (flex) posé ailleurs écrasait l'attribut [hidden] → un chip « hidden » restait visible (sélecteur de langue, « Mon profil »…). On rend la main à [hidden]. */ .chip[hidden] { display: none !important; } .chip--on { color: var(--green); font-weight: 700; border-color: currentColor; box-shadow: 0 0 12px -2px currentColor, 0 0 10px rgba(52,211,153,.16) inset; } /* Pastille « live » qui clignote devant l'état (en ligne / Drive prête) */ .chip--on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: currentColor; box-shadow: 0 0 8px 1px currentColor; animation: ngLiveDot 1.5s ease-in-out infinite; } @keyframes ngLiveDot { 0%, 100% { opacity: 1; box-shadow: 0 0 9px 1px currentColor; } 50% { opacity: .4; box-shadow: 0 0 3px 0 currentColor; } } .chip--off { color: var(--red); border-color: rgba(248,113,113,.5); } /* Pastille VERSION en retard (mise à jour disponible) : décorée comme les autres pastilles (dot clignotant + halo), mais en ROUGE (à jour = verte via .chip--on). */ #app-ver.chip--off { border-color: currentColor; box-shadow: 0 0 12px -2px currentColor, 0 0 10px rgba(248,113,113,.16) inset; } #app-ver.chip--off::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: currentColor; box-shadow: 0 0 8px 1px currentColor; animation: ngLiveDot 1.5s ease-in-out infinite; } /* Les 3 pastilles d'état (version, en ligne, DB) : taille réduite ET hauteur IDENTIQUE (line-height fixe → la police mono de la version ne la rend plus plus haute). */ .chips-meta .chip { font-size: .66rem; line-height: 1.25; } .chip--ghost { border-style: dashed; } /* Bascule de langue en CAPSULE FR|EN (PC + mobile) : la moitié de la langue ACTIVE est VERTE, l'autre grisée ; l'attribut data-active (posé au chargement) inverse les couleurs à chaque changement de langue. Largeur suffisante pour lire FR et EN. */ .lang-switch { padding: 0; overflow: hidden; display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 999px; line-height: 1; cursor: pointer; } .lang-switch .lang-seg { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4ch; padding: 4px 9px; font-weight: 800; font-size: .72rem; letter-spacing: .04em; color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, var(--panel)); transition: background .16s ease, color .16s ease; } .lang-switch .lang-seg[data-seg="fr"] { border-right: 1px solid var(--border); } .lang-switch[data-active="fr"] .lang-seg[data-seg="fr"], .lang-switch[data-active="en"] .lang-seg[data-seg="en"] { background: var(--green); color: var(--bg); } .lang-switch:hover { border-color: var(--cyan); box-shadow: 0 0 14px -6px var(--cyan); } /* Bascule clair/sombre en CAPSULE ☀|🌙 (même principe que FR|EN) : la moitié du mode ACTIF est colorée SELON le mode — chaud (ambre) pour clair, froid (indigo) pour sombre ; l'autre moitié est grisée. */ .theme-switch { padding: 0; overflow: hidden; display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 999px; line-height: 1; cursor: pointer; } .theme-switch .theme-seg { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1ch; padding: 4px 8px; font-size: .82rem; background: color-mix(in srgb, var(--muted) 12%, var(--panel)); filter: grayscale(1) opacity(.6); transition: background .16s ease, filter .16s ease; } .theme-switch .theme-seg[data-seg="light"] { border-right: 1px solid var(--border); } .theme-switch[data-active="light"] .theme-seg[data-seg="light"] { background: color-mix(in srgb, #fbbf24 42%, var(--panel)); filter: none; } .theme-switch[data-active="dark"] .theme-seg[data-seg="dark"] { background: color-mix(in srgb, #6366f1 46%, var(--panel)); filter: none; } .theme-switch:hover { border-color: var(--cyan); box-shadow: 0 0 14px -6px var(--cyan); } /* Étiquettes techniques (version) en mono, cohérent avec le logo */ #app-ver { font-family: var(--font-mono); letter-spacing: -.02em; } .chip--btn { cursor: pointer; font: inherit; font-size: .75rem; line-height: 1.1; padding: 5px 10px; background-color: var(--panel); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; transition: color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .1s ease; } /* Chip ICÔNE SEULE (ex. la cloche des notifications) : pas de texte. Épaisseur (hauteur) ~1.2× celle des autres chips pour mieux la repérer sans dominer. */ .chip--icon { padding: 7px 11px; } .chip--icon .chip-ico { width: 21px; height: 21px; } a#about-link { color: var(--cyan); border-color: rgba(34,211,238,.4); font-weight: 600; } .chip--btn:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: inset 0 1px 0 var(--card-sheen), 0 0 16px -2px rgba(34,211,238,.45); transform: translateY(-1px); } .chip--btn:active { transform: translateY(0); box-shadow: inset 0 2px 5px -2px rgba(0,0,0,.45); } .chip--btn .chip-ico { transition: filter .16s ease; } .chip--btn:hover .chip-ico { filter: drop-shadow(0 0 6px rgba(34,211,238,.7)); } /* --- Header MOBILE / TABLETTE (≤900px) : réorganisation lisible ----------------- Nom LANGIAL agrandi (≈ hauteur du logo) ; boutons de nav AVEC leur texte (l'icône seule rendait les boutons peu clairs) ; « en ligne », « Drive », version et « EN » repoussés EN DERNIER (2e ligne), les deux pastilles clignotantes réduites. */ @media (max-width: 900px) { .topbar { padding: 8px 14px 5px; gap: 7px 8px; } /* header compact : peu d'espace vertical */ .brand { gap: 11px; } .brand-mark { width: 48px; height: 48px; border-radius: 13px; } .brand-mark img { border-radius: 13px; } .brand-txt h1 { font-size: 1.95rem; line-height: 1; } /* LANGIAL agrandi, proche du logo */ .brand-sub { display: none; } /* « · Collecte » retiré sur mobile (place au nom) */ .tagline { display: none; } /* déjà répété dans le footer */ .chip { font-size: .72rem; padding: 4px 6px; } .chip--btn { padding: 4px 6px; gap: 4px; } .chip--btn .chip-ico { width: 14px; height: 14px; } /* Cloche (icône seule) : épaisseur ~1.2× les autres chips, compacte pour tenir sur la 1re ligne juste après « Aide » (boutons resserrés ci-dessus). Placée APRÈS .chip--btn pour l'emporter sur son padding réduit. */ .chip--icon { padding: 6px 7px; } .chip--icon .chip-ico { width: 17px; height: 17px; } /* Méta (ligne 1, droite) : les deux pastilles d'état gardent leur texte (« en ligne », « Drive : prêt ») avec le point clignotant devant, et restent sur UNE SEULE ligne (jamais empilées), quitte à être un peu plus compactes. */ .chips-meta { gap: 4px; flex-wrap: nowrap; justify-content: flex-end; } #srv-stats { display: none; } #net, #srv, #app-ver { font-size: .5rem; padding: 2px 5px; } #net.chip--on::before, #srv.chip--on::before { width: 4px; height: 4px; margin-right: 3px; } /* Nav (ligne 2) : boutons resserrés (H et V) qui BASCULENT à la ligne suivante quand ils débordent (jamais de scroll ni de bouton caché), le groupe outils reste à droite. */ .chips-nav { flex-wrap: wrap; gap: 4px 4px; } .chips-nav .chip--btn { flex: 0 0 auto; } } /* Téléphone étroit : la marque et les deux pastilles d'état doivent tenir sur UNE ligne, avec leur libellé (« en ligne », « Drive : prêt ») et le point clignotant. */ @media (max-width: 560px) { .brand-mark { width: 42px; height: 42px; } .brand-txt h1 { font-size: 1.62rem; white-space: nowrap; } /* Nav TÉLÉPHONE : boutons COMPACTS, taille naturelle, AVEC leur icône (ni géants ni minuscules). La cloche reste le dernier bouton de la 1re ligne ; Bugs, Profil et les outils passent en 2e ligne via le saut de ligne. */ .chips-nav { gap: 2px 6px; } /* deux lignes de boutons plus rapprochées */ .chip { font-size: .7rem; padding: 4px 8px; } /* hauteur ~x1.1 */ .chip--btn { padding: 4px 8px; gap: 5px; } .chip--btn .chip-ico { width: 15px; height: 15px; } /* Cloche : MÊME hauteur que les autres boutons de la ligne (padding vertical = 4px, icône 15px qui s'insère sans déborder) ; seule son ÉPAISSEUR (horizontal) est augmentée de ~x1.08 (8→9px). */ .chip--icon { padding: 4px 10px; } /* cloche : épaisseur (horizontal) x1.1, hauteur inchangée */ .chip--icon .chip-ico { width: 15px; height: 15px; } /* Nom de langue tronqué seulement s'il est vraiment très long. */ #lang-chip-name { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .chips-meta { gap: 4px; } #net, #srv, #app-ver { font-size: .52rem; padding: 2px 5px; line-height: 1.15; } #net.chip--on::before, #srv.chip--on::before { margin-right: 3px; width: 4px; height: 4px; } #ui-lang-toggle, #theme-toggle { padding: 0; } /* capsules : le padding est sur les segments */ .lang-switch .lang-seg, .theme-switch .theme-seg { padding: 4px 8px; font-size: .66rem; } } /* Petits téléphones (≤ 389px) : le nom se réduit d'un cran pour que « LANGIAL · Collecte » ET les deux pastilles d'état tiennent sur la même ligne, sans scroll. Dès 390px le nom garde sa grande taille (1.42rem), donc les téléphones courants ne sont pas touchés. */ @media (max-width: 389px) { .brand-txt h1 { font-size: 1.42rem; } } /* Téléphones très étroits (≤ 340px : vieux modèles, écrans pliés) : on resserre encore un peu. */ @media (max-width: 340px) { .brand-mark { width: 36px; height: 36px; } .brand-txt h1 { font-size: 1.08rem; } #net, #srv, #app-ver { font-size: .46rem; padding: 2px 4px; } #net.chip--on::before, #srv.chip--on::before { margin-right: 3px; width: 4px; height: 4px; } /* Très petits écrans : boutons un cran plus compacts (icônes conservées). */ .chip { font-size: .66rem; padding: 4px 6px; } .chip--btn { padding: 4px 6px; gap: 4px; } } /* --- Cartes --- */ .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 22px clamp(12px, 4vw, 28px) 60px; display: flex; flex-direction: column; gap: 18px; flex: 1 0 auto; /* occupe l'espace restant → pousse le footer en bas d'écran */ width: 100%; } .card { background: var(--card-bg); /* PAS de backdrop-filter ici : il crée un bloc conteneur qui casse le position:fixed des menus déroulants (combo-list) placés à l'intérieur. Les cartes sont opaques → le flou n'apportait rien de visible. */ border: 1px solid var(--border); border-radius: 18px; padding: 18px clamp(14px, 3vw, 22px); /* Matière PREMIUM (identique sur TOUS les cadres de l'app) : halo d'ambiance cyan + ombre portée + reflet de verre en haut + fin liseré interne en bas (relief/épaisseur). */ box-shadow: 0 0 32px -20px color-mix(in srgb, var(--cyan) 70%, transparent), var(--shadow-card), inset 0 1px 0 var(--card-sheen), inset 0 -1px 0 var(--card-inner); } /* Vues (profil / app) */ .view { display: flex; flex-direction: column; gap: 18px; } .view[hidden] { display: none; } /* TITRE DE PAGE = PLAQUE ENCADRÉE (sans motif) : voile teinté de la couleur d'activité (--acc), avec le MÊME halo et la MÊME bordure-comète lumineuse que les 4 onglets du haut. Le titre (icône + texte) s'insère dans ce cadre. */ .view-title { --acc: var(--gold); margin: 0 0 16px; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; font-size: 1.4rem; color: var(--text); padding: 9px 20px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--acc) 42%, var(--border)); background: radial-gradient(130% 90% at 50% -25%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 60%), color-mix(in srgb, var(--acc) 13%, var(--panel)); box-shadow: 0 0 26px -14px var(--acc), inset 0 1px 0 var(--card-sheen), 0 3px 10px -5px rgba(0,0,0,.34); animation: ngCardBreath 6s ease-in-out infinite; } .view-title > * { position: relative; z-index: 3; } /* icône + texte au-dessus du décor */ /* Bordure-comète lumineuse qui tourne (identique aux onglets). */ .view-title::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2; background: conic-gradient(from var(--ng-angle), transparent 0%, color-mix(in srgb, #fff 88%, var(--acc)) 7%, color-mix(in srgb, var(--acc) 70%, transparent) 17%, transparent 30%), linear-gradient(var(--acc), var(--acc)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 70%, transparent)); animation: ngBorderSpin 4s linear infinite; } .view-title::after { content: none; } /* Couleur d'activité par page (comme les 4 onglets). */ #hub-title, .hub-head .view-title { --acc: var(--cyan); } .hub-head { text-align: center; } #work-title, #amorce-title { --acc: var(--green); } @keyframes ornBead { 0%, 100% { background-position: 0% 50%, 0 50%; } 50% { background-position: 100% 50%, 0 50%; } } @keyframes ornPulse { 0%, 100% { box-shadow: 0 0 8px -1px var(--gold), inset 0 0 0 2px rgba(34,211,238,.5), inset 0 0 6px -1px var(--cyan); } 50% { box-shadow: 0 0 18px 1px var(--gold), inset 0 0 0 2px rgba(34,211,238,.75), inset 0 0 9px 0 var(--cyan); } } .profile-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .app-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .welcome { color: var(--cyan); font-weight: 600; font-size: .95rem; } .mini-profile { border: 1px solid rgba(34,211,238,.4); background: rgba(34,211,238,.08); color: var(--cyan); border-radius: 10px; padding: 8px 14px; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; transition: box-shadow .16s ease, border-color .16s ease; } .mini-profile:hover { box-shadow: 0 0 16px rgba(34,211,238,.3); border-color: var(--cyan); } /* ---- Navigation entre espaces (Traduire / Transcrire / Explorer) ---- */ /* Barre des 4 onglets REMONTÉE près du header (comble ~80% de l'espace vide). */ /* Barre des 4 espaces : 3e rangée du header (intégrée au header, pleine largeur). */ .main-nav { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 12px; margin: 2px 0 0; } .main-nav[hidden] { display: none; } /* Onglets : chaque bouton porte SA couleur d'activité (contour + fond teinté + halo), IDENTIQUE sur PC et téléphone. Sur PC ils s'étirent pour remplir la largeur dédiée (fini le vide dans le header). */ .nav-tabs { display: flex; flex: 1 1 auto; gap: 8px; padding: 0; background: transparent; border: none; flex-wrap: nowrap; } /* Onglets = MÊMES effets que les cartes de l'accueil : lavis de couleur d'activité, halo d'ambiance qui « respire », bordure comète blanche qui tourne, shimmer au survol et glow d'icône pulsé. Bien mis en évidence. */ .nav-tab { --acc: var(--cyan); flex: 1 1 0; min-width: 0; justify-content: center; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--acc) 40%, var(--border)); background: radial-gradient(130% 80% at 50% -20%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 62%), color-mix(in srgb, var(--acc) 10%, var(--panel)); color: var(--text); padding: 11px 18px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 1.12rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 0 26px -14px var(--acc), inset 0 1px 0 var(--card-sheen), 0 2px 8px -4px rgba(0,0,0,.28); transition: color .15s ease, background .15s ease, box-shadow .2s ease, border-color .2s ease, transform .12s ease; animation: ngCardBreath 6s ease-in-out infinite; } .nav-tab > * { position: relative; z-index: 3; } /* icône + libellé au-dessus des effets */ .nav-tab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2; background: conic-gradient(from var(--ng-angle), transparent 0%, color-mix(in srgb, #fff 88%, var(--acc)) 7%, color-mix(in srgb, var(--acc) 70%, transparent) 17%, transparent 30%), linear-gradient(var(--acc), var(--acc)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 70%, transparent)); animation: ngBorderSpin 4s linear infinite; } .nav-tab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 26%, color-mix(in srgb, var(--acc) 55%, #fff) 50%, transparent 74%); opacity: 0; transform: translateX(-120%); } .nav-tab:hover { transform: translateY(-2px); animation-play-state: paused; box-shadow: 0 18px 40px -14px var(--acc), 0 0 0 2px color-mix(in srgb, var(--acc) 65%, transparent), 0 0 40px -8px var(--acc), inset 0 1px 0 var(--card-sheen); } .nav-tab:hover::after { animation: ngShimmer 760ms ease; } /* Chaque onglet porte SA couleur d'activité (comme l'accueil et le mode présentation). */ #tab-traduire { --acc: var(--green); } #tab-transcrire { --acc: #a78bfa; } #tab-explorer { --acc: var(--gold); } #tab-demander { --acc: var(--cyan); } #tab-explorer { --acc: var(--gold); } .nav-tab:hover { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 42%, transparent), 0 0 14px -6px var(--acc); } /* Icône : boîte carrée + object-fit contain (jamais de débordement, jamais de distorsion) ; glow pulsé de la couleur d'activité, comme les icônes des cartes de l'accueil. */ .nav-tab .nav-ico { width: 30px; height: 30px; flex: none; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--acc) 55%, transparent)); animation: ngIcoGlow 3.4s ease-in-out infinite; transition: filter .15s ease; } /* Normalisation VISUELLE par icône (sources d'aspects différents) : chaque glyphe est calibré pour occuper la même hauteur apparente dans son cadre, sans déborder. */ #tab-transcrire .nav-ico { width: 26px; height: 30px; } /* micro : haut et étroit */ #tab-traduire .nav-ico { width: 31px; height: 31px; } #tab-explorer .nav-ico { width: 30px; height: 30px; } #tab-demander .nav-ico { width: 31px; height: 31px; } .nav-tab:hover .nav-ico, .nav-tab.is-active .nav-ico { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--acc) 78%, transparent)); } .nav-tab.is-active { color: var(--bg); background: var(--acc); border-color: var(--acc); /* couleur d'activité UNIE (sans dégradé) */ box-shadow: 0 0 20px -3px var(--acc); } .nav-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Mobile : les 3 onglets Transcrire/Traduire/Explorer TOUJOURS sur une seule ligne (chacun un tiers égal de la largeur), au lieu de déborder — optimise l'espace. */ @media (max-width: 600px) { .main-nav { gap: 8px; } .nav-right { display: none; } /* accueil « bonjour » non essentiel ici */ /* Onglets TÉLÉPHONE : les 4 boutons sur UNE SEULE LIGNE, icône + libellé côte à côte. Chaque onglet est un vrai bouton visible (contour + fond teinté de sa couleur d'activité). Icône et texte un peu agrandis pour remplir le bouton. */ .nav-tabs { width: 100%; flex-wrap: nowrap; gap: 4px; padding: 0; background: transparent; border: none; } /* Ensemble icône + libellé CENTRÉ dans chaque cadre ; icône et texte agrandis. Gap et marges resserrés pour laisser toute la place au libellé (aucune troncature). */ .nav-tab { flex: 1 1 0; min-width: 0; justify-content: center; gap: 2px; padding: 8px 0; font-size: .6rem; border-radius: 11px; } .nav-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Icônes calibrées une à une pour une même hauteur apparente, sans débordement. Les glyphes larges (mégaphone) sont resserrés pour ne pas rogner le libellé. */ .nav-tab .nav-ico { width: 27px; height: 27px; flex: none; } #tab-transcrire .nav-ico { width: 26px; height: 28px; } #tab-traduire .nav-ico { width: 27px; height: 27px; } #tab-explorer .nav-ico { width: 27px; height: 27px; } #tab-demander .nav-ico { width: 25px; height: 27px; } /* Onglet actif : couleur d'activité pleine (déjà géré par .is-active) — on garde. */ } /* Écrans très étroits (≤ 374 px, type 360) : on réduit d'un cran police et icônes pour que « Transcrire » et « Demander » restent ENTIÈREMENT visibles, sans troncature. */ @media (max-width: 374px) { .nav-tab { gap: 2px; font-size: .54rem; } .nav-tab .nav-ico { width: 24px; height: 24px; } #tab-transcrire .nav-ico { width: 23px; height: 25px; } #tab-traduire .nav-ico { width: 24px; height: 24px; } #tab-explorer .nav-ico { width: 24px; height: 24px; } #tab-demander .nav-ico { width: 22px; height: 24px; } } /* ---- Accueil « Que veux-tu faire ? » ---- */ .hub-head { text-align: center; margin-bottom: 4px; } /* 4 portes : 2 par ligne (PC / tablette), 1 par ligne en mobile étroit. Image à hauteur pleine du cadre dans tous les cas. */ .hub-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 560px) { .hub-cards { grid-template-columns: 1fr; } } /* Chaque porte porte SA couleur d'identité (assortie à son icône et au mode présentation) : Traduire → vert, Transcrire → violet, Explorer → or. */ /* Angle enregistré (animable) pour la bordure conique tournante des cartes du hub. */ @property --ng-angle { syntax: ""; inherits: false; initial-value: 0deg; } .hub-card { --acc: var(--cyan); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 22px 20px; border-radius: 18px; cursor: pointer; font: inherit; position: relative; overflow: hidden; min-height: 226px; /* cartes ~×1.2 plus hautes qu'auparavant (respiration + place à l'image) */ /* lavis de couleur discret en haut de carte, posé sur le fond de carte */ background: radial-gradient(130% 78% at 50% -14%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 62%), var(--card-bg); border: 1px solid color-mix(in srgb, var(--acc) 20%, var(--border)); /* Matière + halo d'ambiance (couleur d'activité) + reflet de verre + relief interne. */ box-shadow: 0 0 34px -18px var(--acc), var(--shadow-card), inset 0 1px 0 var(--card-sheen), inset 0 -1px 0 var(--card-inner); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; animation: ngCardBreath 6s ease-in-out infinite; } /* Halo d'ambiance qui « respire » doucement (gelé sur mobile et prefers-reduced-motion). */ @keyframes ngCardBreath { 0%, 100% { box-shadow: 0 0 40px -14px var(--acc), var(--shadow-card), inset 0 1px 0 var(--card-sheen), inset 0 -1px 0 var(--card-inner); } 50% { box-shadow: 0 0 78px -6px var(--acc), 0 0 22px -4px var(--acc), var(--shadow-card), inset 0 1px 0 var(--card-sheen), inset 0 -1px 0 var(--card-inner); } } .hub-card:nth-child(1) { --acc: var(--green); } .hub-card:nth-child(2) { --acc: #a78bfa; } .hub-card:nth-child(3) { --acc: var(--gold); } .hub-card:nth-child(4) { --acc: var(--cyan); } /* Illustration africaine en FOND de carte, sous un filtre assombrissant (dégradé vers la couleur de carte, plus fort en bas) pour que l'icône, le titre et le texte restent parfaitement lisibles par-dessus, dans les deux thèmes. --card-illus posé en HTML. */ /* Image RÉALISTE ENTIÈRE (jamais recadrée), réduite à 70 % de la hauteur du cadre et COLLÉE au coin NORD-EST (haut-droite, jusqu'aux bords haut/droite du cadre). width:auto → l'image garde ses proportions, rien n'est coupé. Elle se fond vers le SUD-OUEST via un masque en dégradé : le coin est illustré, la zone de texte (bas-gauche) reste dégagée. */ /* Image RÉALISTE/illustrée ENTIÈRE (jamais recadrée) : HAUTEUR PLEINE du cadre (déborde jusqu'aux bords haut/bas/droite), calée tout à DROITE. Cartes larges (empilées) → l'image chevauche peu le texte. Fondu vers la GAUCHE pour dégager la zone de texte. Contour de la COULEUR DU CADRE tracé autour de l'image (silhouette pour les illustrations, bord net pour les photos). Identique PC et mobile. */ /* Carte = deux colonnes flex : TEXTE à gauche (prend la place restante, jamais recouvert) et IMAGE à droite en COLONNE propre, pleine hauteur du cadre, calée en bas. Aucun chevauchement possible quelle que soit la largeur d'écran (le texte se réduit tout seul). */ .hub-card--illus { flex-direction: row; align-items: stretch; gap: 0; padding: 0; } .hub-card--illus .hub-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 20px 6px 20px 20px; } /* Colonne de droite : conteneur étiré à la hauteur du cadre (align-self stretch). Il est en position:relative et l'image est en absolute inset:0 → l'image NE participe PLUS au calcul de la hauteur (fini la dépendance circulaire qui variait selon le navigateur). Largeur 52% pour que l'image carrée atteigne bien 100% de la hauteur du cadre. */ .hub-illus-wrap { flex: 0 0 48%; align-self: stretch; position: relative; overflow: hidden; min-width: 0; } /* L'image occupe tout le conteneur (= hauteur du cadre), sans recadrage (contain), plaquée à DROITE et en bas. */ .hub-illus { position: absolute; right: 0; bottom: 0; width: 100%; height: 98%; object-fit: contain; object-position: right bottom; pointer-events: none; -webkit-mask-image: linear-gradient(to left, #000 50%, rgba(0,0,0,.5) 80%, transparent 100%); mask-image: linear-gradient(to left, #000 50%, rgba(0,0,0,.5) 80%, transparent 100%); filter: drop-shadow(1.4px 0 0 var(--acc)) drop-shadow(-1.4px 0 0 var(--acc)) drop-shadow(0 1.4px 0 var(--acc)) drop-shadow(0 -1.4px 0 var(--acc)); } /* Le texte passe au-dessus de l'image, avec une ombre portée pour un contraste garanti. */ .hub-card--illus .hub-card-head, .hub-card--illus .hub-desc, .hub-card--illus .hub-go { position: relative; z-index: 2; } .hub-card--illus .hub-name, .hub-card--illus .hub-desc, .hub-card--illus .hub-go { text-shadow: 0 1px 10px var(--panel), 0 0 6px var(--panel), 0 0 2px var(--panel); } /* Le texte n'occupe que ~70% à gauche : il passe à la ligne AVANT d'atteindre l'image ; les 30% de droite restent réservés à l'image. */ /* Texte AGRANDI (PC) ; titre = plus gros glyphe devant l'icône. */ .hub-card--illus .hub-name { font-size: 2.05rem; } .hub-card--illus .hub-desc { font-size: 1rem; line-height: 1.55; } .hub-card--illus .hub-go { font-size: 1.02rem; } /* Icône AGRANDIE, posée dans un CERCLE au contour de la couleur du cadre (accent). */ .hub-card--illus .hub-ico { width: 92px; height: 92px; padding: 13px; box-sizing: border-box; border-radius: 50%; border: 2.5px solid var(--acc); object-fit: contain; background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--acc) 18%, var(--panel)), var(--panel)); box-shadow: 0 0 17px -7px var(--acc), inset 0 1px 0 var(--card-sheen); } /* MOBILE étroit : cartes ~2× plus basses (×0.5), contenu compacté pour tenir dans cette hauteur réduite ; l'image reste pleine hauteur (plus courte donc plus étroite → laisse d'autant plus de place au texte). */ @media (max-width: 560px) { .hub-card { min-height: 113px; } .hub-card--illus .hub-text { padding: 10px 4px 10px 14px; gap: 4px; justify-content: center; } .hub-card--illus .hub-name { font-size: 1.28rem; } .hub-card--illus .hub-desc { font-size: .8rem; line-height: 1.35; } .hub-card--illus .hub-go { font-size: .86rem; } .hub-card--illus .hub-ico { width: 48px; height: 48px; padding: 7px; } .hub-card-head { gap: 10px; } } /* Bordure vive et PLEINE de la couleur d'activité (bien lisible à l'arrêt) SURMONTÉE d'une comète blanche large qui fait le tour, rapide. Anneau réalisé au masque → reste dans la boîte. */ .hub-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px; pointer-events: none; z-index: 2; background: conic-gradient(from var(--ng-angle), transparent 0%, color-mix(in srgb, #fff 88%, var(--acc)) 7%, color-mix(in srgb, var(--acc) 70%, transparent) 17%, transparent 30%), linear-gradient(var(--acc), var(--acc)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--acc) 70%, transparent)); animation: ngBorderSpin 4s linear infinite; } @keyframes ngBorderSpin { to { --ng-angle: 360deg; } } /* Balayage « shimmer » : une lumière traverse la carte en diagonale au survol. */ .hub-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 26%, color-mix(in srgb, var(--acc) 55%, #fff) 50%, transparent 74%); opacity: 0; transform: translateX(-120%); } .hub-card:hover { transform: translateY(-6px); border-color: var(--acc); animation-play-state: paused; box-shadow: 0 32px 68px -12px var(--acc), 0 0 0 2.5px color-mix(in srgb, var(--acc) 70%, transparent), /* liseré lumineux net */ 0 0 56px -6px var(--acc), var(--shadow-card), inset 0 1px 0 var(--card-sheen); } .hub-card:hover::after { animation: ngShimmer 760ms ease; } @keyframes ngShimmer { 0% { opacity: 0; transform: translateX(-120%); } 18% { opacity: .92; } 100% { opacity: 0; transform: translateX(120%); } } /* Onde (ripple) au clic : disque lumineux injecté en JS (attachRipple). */ .hub-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 3; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 45%, #fff) 0%, transparent 70%); transform: translate(-50%, -50%) scale(0); opacity: .7; } .hub-card.is-rippling .hub-ripple { animation: ngRipple 620ms ease-out forwards; } @keyframes ngRipple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* En-tête de carte : icône À GAUCHE, titre à sa droite, centré sur l'icône (gain de hauteur ; on occupe l'espace horizontal libre, surtout sur mobile). */ .hub-card-head { display: flex; align-items: center; gap: 15px; width: 100%; } .hub-ico { width: 60px; height: 60px; line-height: 1; display: block; flex: 0 0 auto; filter: drop-shadow(0 0 15px color-mix(in srgb, var(--acc) 62%, transparent)); animation: ngIcoGlow 3.4s ease-in-out infinite; } /* Glow pulsé de l'icône d'activité (gelé sur mobile + prefers-reduced-motion). */ @keyframes ngIcoGlow { 0%, 100% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--acc) 62%, transparent)); } 50% { filter: drop-shadow(0 0 34px color-mix(in srgb, var(--acc) 100%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--acc) 70%, transparent)); } } /* Onglets de nav : icône + libellé alignés */ .nav-tab { display: inline-flex; align-items: center; gap: 7px; } .nav-ico { width: 26px; height: 26px; flex: 0 0 auto; } /* Boutons du header : icône premium + libellé */ .chip--btn { display: inline-flex; align-items: center; gap: 6px; } .chip-ico { width: 19px; height: 19px; flex: 0 0 auto; } /* Icône devant un titre de page (Traduire/Transcrire/Explorer) */ .view-title--ico { display: inline-flex; align-items: center; gap: 10px; } .title-ico { width: 34px; height: 34px; flex: 0 0 auto; } /* Icône « info » du titre « À propos » (remplace l'ancien symbole étoilé) : teinte cyan d'accent, ne rétrécit pas. */ /* Emblème premium du titre « À propos » : badge en verre dégradé, soleil levant (LANGIAL = « la lumière ») ; halo doux, léger relief. */ .about-emblem { flex: 0 0 auto; display: inline-flex; line-height: 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,.28)) drop-shadow(0 0 14px color-mix(in srgb, var(--green) 40%, transparent)); } .about-emblem svg { display: block; border-radius: 14px; } .hub-name { font-size: 1.55rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; color: var(--text); } .hub-desc { color: var(--muted); font-size: .86rem; line-height: 1.5; } .hub-go { margin-top: auto; padding-top: 6px; color: var(--cyan); font-weight: 700; font-size: .9rem; } /* ---- Choix de la langue (plateforme communautaire) ---- */ /* Contrôles toujours visibles en haut : recherche (prend la place) + bouton « déclarer » DISTINCT (dégradé doré, jamais confondu avec une carte de langue). */ .lang-controls { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; } .lang-search-row { display: flex; gap: 10px; align-items: stretch; } .lang-search { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: .95rem; color: var(--text); background: var(--panel); border: 1px solid var(--border); transition: border-color .15s ease, box-shadow .15s ease; } .lang-search::placeholder { color: var(--muted); } .lang-search:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); } /* Boutons de l'écran des langues : couleur UNIE (pas de dégradé). Le texte prend la couleur du FOND de page (--bg), toujours à l'opposé de --cyan dans chaque thème → contraste garanti en clair ET en sombre. */ .lang-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 700; padding: 12px 20px; border-radius: 12px; color: var(--bg); border: 1px solid transparent; transition: filter .15s ease, box-shadow .15s ease, transform .1s ease; } .lang-btn:active { transform: translateY(1px); } /* ACTION → cyan ; NAVIGATION (ouvre le formulaire de déclaration) → or. */ .lang-search-btn { flex: 0 0 auto; background: var(--cyan); border-color: var(--cyan); } .lang-search-btn:hover { filter: brightness(1.06); box-shadow: 0 0 16px -6px var(--cyan); } /* NAVIGATION (ouvre une vue) : or DOUX fixe + encre foncée, identique clair/sombre. */ .lang-declare-cta { width: 100%; background: var(--nav-gold); border-color: var(--nav-gold); color: var(--nav-ink); } .lang-declare-cta:hover { filter: brightness(1.04); box-shadow: 0 0 16px -6px var(--nav-gold); } .lang-empty { text-align: center; color: var(--muted); font-size: .9rem; padding: 20px 12px; } .lang-empty[hidden] { display: none; } @media (max-width: 480px) { .lang-search-btn span:last-child { display: none; } } /* Jumelage de langues (Phase C) : panneau sur l'écran des langues (confirmations en attente pour ce contributeur + suggestions de doublons à fusionner). */ .lang-merge-panel { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; } .lang-merge-panel[hidden] { display: none; } .merge-item { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--panel); } .merge-item--ask { border-color: rgba(34,211,238,.55); box-shadow: 0 0 16px -5px var(--cyan); } .merge-item--sugg { border-style: dashed; } .merge-q { margin: 0 0 10px; color: var(--text); font-size: .92rem; line-height: 1.45; } .merge-q b { color: var(--cyan); } .merge-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Bloc « réunir deux langues » : callout BIEN EN ÉVIDENCE (accent doré, fond teinté, halo lumineux) — action importante placée en haut de la page des langues. */ .merge-item--manual { border: 1.5px solid color-mix(in srgb, var(--gold) 60%, var(--border)); background: radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 62%), var(--card-bg); box-shadow: inset 0 1px 0 var(--card-sheen), 0 0 26px -8px var(--gold); border-radius: 16px; padding: 16px; } .merge-item--manual .merge-q { white-space: pre-line; font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--text); } .merge-manual-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .merge-sel { flex: 1 1 150px; min-width: 130px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: .86rem; } /* Bouton « Proposer la fusion » : action MISE EN ÉVIDENCE (cyan tinté, halo respirant). */ #merge-manual-go, .merge-propose { border: 1.5px solid var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--panel)); font-weight: 800; letter-spacing: .01em; border-radius: 999px; padding: 9px 18px; white-space: nowrap; box-shadow: inset 0 1px 0 var(--card-sheen), 0 0 16px -5px var(--cyan); --cta-g: rgba(34,211,238,.5); animation: ngCtaGlow 2.8s ease-in-out infinite; transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; } #merge-manual-go:hover, .merge-propose:hover { background: var(--cyan); color: var(--bg); transform: translateY(-1px); box-shadow: 0 0 20px -4px var(--cyan); } @media (prefers-reduced-motion: reduce) { #merge-manual-go, .merge-propose { animation: none; } } /* Découpe d'un enregistrement (#47) : outil « garder une partie de l'audio ». */ .trim-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(4,12,20,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 16px; } .trim-modal[hidden] { display: none; } .trim-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 18px clamp(14px,3vw,22px); width: min(680px, 100%); box-shadow: 0 20px 60px -12px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 12px; } .trim-card h3 { margin: 0; font-family: var(--font-display); color: var(--text); font-size: 1.15rem; } .trim-hint { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; } .trim-wave-wrap { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; } .trim-wave { display: block; width: 100%; height: auto; touch-action: none; cursor: ew-resize; } .trim-times { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .trim-time { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); } .trim-time input { width: 110px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; } .trim-dur { margin-left: auto; color: var(--cyan); font-weight: 600; font-size: .9rem; } .trim-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .trim-spacer { flex: 1 1 auto; } #trim-audio { display: none; } .lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 6px; } .lang-card[hidden] { display: none; } .lang-card { --acc: var(--cyan); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px 16px; border-radius: 16px; cursor: pointer; font: inherit; background: var(--card-bg); border: 1.5px solid transparent; box-shadow: 0 0 26px -20px var(--acc), var(--shadow-card); transition: transform .16s ease, box-shadow .2s ease; } /* Bordure en dégradé vif tout autour (tri-couleur, statique → perf), avec halo. Anneau au masque. */ .lang-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 2; pointer-events: none; background: linear-gradient(135deg, var(--cyan), var(--green) 45%, var(--gold)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--acc) 45%, transparent)); } /* Balayage shimmer au survol. */ .lang-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--acc) 40%, #fff) 50%, transparent 70%); opacity: 0; transform: translateX(-120%); } .lang-card:hover, .lang-card:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 46px -14px var(--acc), 0 0 34px -10px var(--acc), var(--shadow-card); outline: none; } .lang-card:hover::after, .lang-card:focus-visible::after { animation: ngShimmer 820ms ease; } .lang-card.is-current { --acc: var(--green); box-shadow: 0 0 0 1px var(--green) inset, 0 0 32px -12px var(--green), var(--shadow-card); } .lang-card.is-current::before { background: linear-gradient(135deg, var(--green), var(--cyan) 55%, var(--green)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--green) 60%, transparent)); } /* 1re ligne : emblème + nom alignés à la même hauteur. */ .lang-head { display: flex; align-items: center; gap: 10px; width: 100%; } .lang-emblem { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; color: #06121a; background: linear-gradient(145deg, var(--cyan), var(--green)); box-shadow: 0 0 14px -4px var(--cyan); } .lang-name { font-size: 1.08rem; font-weight: 800; color: var(--text); line-height: 1.2; } /* 2e ligne : autonyme à gauche, pastille de contributions à droite (espace horizontal exploité). */ .lang-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 2px; } .lang-autonym { font-size: .84rem; color: var(--cyan); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lang-region { font-size: .8rem; color: var(--muted); line-height: 1.35; } .lang-kb { margin-top: 3px; font-size: .72rem; color: var(--gold); font-weight: 700; letter-spacing: .02em; } .lang-card.is-current .lang-kb::after { content: " · sélectionnée"; color: var(--green); } :root[lang="en"] .lang-card.is-current .lang-kb::after { content: " · selected"; } /* Pastille d'enrichissement (nb de contributions), compacte, sur la ligne de l'autonyme. */ .lang-count { flex: none; margin-left: auto; font-size: .72rem; font-weight: 800; white-space: nowrap; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--border)); border-radius: 999px; padding: 2px 9px; } .lang-count--empty { color: var(--muted); background: transparent; border-color: var(--border); font-weight: 600; } /* Principaux contributeurs de la langue, dans la carte communautaire d'Explorer. */ .exp-contrib { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .exp-contrib-lbl { font-size: .78rem; font-weight: 700; color: var(--text); margin-right: 2px; } .exp-contrib-item { font-size: .76rem; font-weight: 600; color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--border)); border-radius: 999px; padding: 3px 10px; } .exp-contrib-item b { color: var(--text); font-weight: 800; margin-left: 2px; } .lang-declare { margin-top: 16px; } .lang-declare h3 { margin: 0 0 4px; color: var(--text); } .lang-declare-hint { margin: 0 0 6px; color: var(--muted); font-size: .86rem; } .lang-declare-req { margin: 0 0 12px; color: var(--muted); font-size: .82rem; } .lang-declare-actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; } .lang-declare-err { color: var(--red); font-weight: 600; font-size: .88rem; margin: 8px 0 0; } .lang-declare-err[hidden] { display: none; } /* Champ pleine largeur dans la grille du formulaire de déclaration */ .field--wide { grid-column: 1 / -1; } /* Suggestions anti-doublon : langues déjà présentes qui ressemblent à la saisie */ .ld-similar { margin: 6px 0 10px; padding: 13px 15px; border-radius: 13px; background: color-mix(in srgb, var(--gold) 9%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--border)); } .ld-similar[hidden] { display: none; } .ld-similar-head { margin: 0 0 9px; font-weight: 700; color: var(--text); font-size: .92rem; } .ld-similar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); margin-bottom: 7px; flex-wrap: wrap; } .ld-similar-info b { color: var(--text); font-size: 1rem; } .ld-similar-meta { display: block; color: var(--muted); font-size: .8rem; margin-top: 1px; } .ld-similar-pick { padding: 8px 15px; font-size: .85rem; white-space: nowrap; } .ld-similar-hint { margin: 7px 0 0; color: var(--muted); font-size: .82rem; } /* ---- Langues d'appartenance (puces multi-sélection dans le profil) ---- */ .field--langs { grid-column: 1 / -1; } .lang-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .lang-chip-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--border); background: var(--panel2); color: var(--txt-dim); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: .84rem; font-weight: 600; transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease; } .lang-chip-toggle:hover { border-color: var(--cyan); color: var(--text); } .lang-chip-toggle.is-on { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--panel2)); } .lang-chip-toggle.is-primary { border-color: var(--green); color: var(--green); box-shadow: 0 0 14px -6px var(--green); } .lct-primary { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--green); color: #04120b; border-radius: 6px; padding: 1px 6px; } .lang-chip-add { border-style: dashed; color: var(--muted); } .lang-chip-add:hover { border-color: var(--gold); color: var(--gold); } /* ---- Amorce sonore : premières voix d'une langue créée ---- */ .amorce-intro { color: var(--muted); font-size: .92rem; line-height: 1.5; margin: 0 0 18px; } .amorce-progress { display: flex; align-items: center; gap: 12px; margin: 6px 0 20px; } .amorce-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--border); overflow: hidden; } .amorce-bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 999px; transition: width .35s ease; } .amorce-count { font-size: .9rem; color: var(--text); white-space: nowrap; } .amorce-count b { color: var(--cyan); font-size: 1.1rem; } .amorce-word { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel2); text-align: center; } .amorce-word-cat { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); } .amorce-word-fr { font-size: 1.9rem; font-weight: 800; color: var(--text); line-height: 1.15; } .amorce-word-hint { font-size: .84rem; color: var(--muted); } .amorce-rec { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px 0; } .amorce-rec-status { font-size: .85rem; color: var(--muted); min-height: 1.1em; } .amorce-audio { width: min(360px, 100%); } .amorce-audio[hidden] { display: none; } .amorce-actions { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; } .amorce-note { color: var(--muted); font-size: .85rem; text-align: center; margin: 12px 0 0; } .amorce-note[hidden] { display: none; } /* Mise en avant du bouton « Terminer » dès le minimum atteint. */ .btn--go { border-color: var(--green); color: var(--green); box-shadow: 0 0 18px -6px var(--green); } /* ---- En-tête d'espace + mise en avant de l'enregistrement en transcription ---- */ .work-head { margin-bottom: 2px; } .work-help { color: var(--muted); font-size: .86rem; line-height: 1.55; margin: 8px 0 0; } /* Indicateur FORT de la langue de la contribution (anti-mauvais étiquetage) : pastille proéminente, cliquable, toujours visible sur la vue de travail. */ .work-lang { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 7px 12px; border-radius: 999px; cursor: pointer; border: 1.5px solid color-mix(in srgb, var(--cyan) 55%, var(--border)); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 15%, transparent), transparent 62%), color-mix(in srgb, var(--cyan) 8%, var(--card)); color: var(--text); font-size: .9rem; line-height: 1; box-shadow: inset 0 1px 0 var(--card-sheen), 0 0 20px -10px var(--cyan); transition: border-color .2s, box-shadow .2s, background .2s; } .work-lang:hover { border-color: var(--cyan); box-shadow: inset 0 1px 0 var(--card-sheen), 0 0 24px -6px var(--cyan); } .work-lang-ico { font-size: 1.05rem; } .work-lang-lead { color: var(--muted); } .work-lang-name { font-weight: 800; letter-spacing: .2px; color: color-mix(in srgb, var(--cyan) 72%, var(--text)); } .work-lang-chev { color: var(--muted); font-size: .8rem; } /* Tant que la langue n'a pas été confirmée cette session : teinte d'alerte ambrée + halo qui respire pour attirer l'œil (respecte prefers-reduced-motion). */ .work-lang.is-unconfirmed { border-color: color-mix(in srgb, var(--gold) 65%, var(--border)); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 62%), color-mix(in srgb, var(--gold) 9%, var(--card)); animation: worklang-breathe 2.4s ease-in-out infinite; } .work-lang.is-unconfirmed .work-lang-name { color: color-mix(in srgb, var(--gold) 78%, var(--text)); } @keyframes worklang-breathe { 0%, 100% { box-shadow: inset 0 1px 0 var(--card-sheen), 0 0 14px -10px var(--gold); } 50% { box-shadow: inset 0 1px 0 var(--card-sheen), 0 0 22px -4px var(--gold); } } @media (prefers-reduced-motion: reduce) { .work-lang.is-unconfirmed { animation: none; } } /* Ligne de doute (écriture qui contredit la langue) dans le modal de confirmation. */ .lc-doubt { margin: 0 0 6px; padding: 9px 12px; border-radius: 10px; font-size: .88rem; line-height: 1.5; color: color-mix(in srgb, var(--gold) 40%, var(--text)); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); background: color-mix(in srgb, var(--gold) 10%, var(--card)); } /* La zone encadre déjà l'audio → pas de cadre interne redondant (dans TOUS les modes, pour un rendu identique Traduire/Transcrire/amorce). */ .zone--audio .audio-row { padding: 0; margin-top: 12px; background: transparent; border: none; } /* « Enregistrer l'audio » : MÊME apparence PARTOUT où l'audio est utilisé (bouton d'action cyan tinté, dot rouge) — plus de couleur différente selon le mode. `.btn.btn--rec` pour l'emporter sur la bordure neutre de `.btn`. */ .btn.btn--rec { border: 1.5px solid var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--panel)); box-shadow: inset 0 1px 0 var(--card-sheen), 0 8px 22px -12px var(--cyan); font-weight: 700; } .btn.btn--rec:hover { background: var(--cyan); color: var(--bg); border-color: var(--cyan); } /* ---- Menu « À traduire / À prononcer » (prop-cat) en ligne ---- */ .prop-cat.combo { display: inline-block; width: auto; min-width: 150px; vertical-align: middle; } .prop-cat.combo .combo-display { padding: 8px 32px 8px 11px; font-size: .9rem; border-radius: 9px; } .prop-cat.combo .combo-toggle { width: 26px; } .prop-cat.combo .combo-list { left: 0; right: auto; min-width: 210px; } /* ---- Page Explorer (bibliothèque communautaire) ---- */ .explore-controls { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .explore-search { width: 100%; } .explore-filters { display: flex; gap: 10px; flex-wrap: wrap; } .explore-export { display: flex; gap: 8px; flex-wrap: wrap; } .explore-export .chip--btn { font-size: .78rem; } .explore-filters .combo--select { flex: 1 1 170px; min-width: 150px; } .explore-filters select { flex: 1 1 170px; } .explore-status { margin-top: 10px; color: var(--muted); font-size: .82rem; } .explore-list { display: flex; flex-direction: column; gap: 12px; } .explore-empty { text-align: center; color: var(--muted); padding: 26px 12px; line-height: 1.6; } .entry { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-card); } .entry-pair { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .entry-src { font-size: 1.12rem; color: var(--text); font-weight: 600; } .entry-arrow { color: var(--muted); } .entry-tgt { font-size: 1.12rem; color: var(--cyan); font-weight: 700; } .badge-dir { margin-left: auto; font-size: .64rem; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 7px; color: #06121a; white-space: nowrap; background: linear-gradient(145deg, var(--cyan), var(--green)); } .entry-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .entry-chip { font-size: .72rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--panel2); white-space: nowrap; } .entry-note { color: var(--muted); font-size: .8rem; font-style: italic; } .entry-audio { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .entry-audio audio { height: 38px; max-width: 300px; flex: 1 1 220px; } /* ===== Lecteur audio SUR-MESURE (premium) ===== */ .aplayer-native { display: none !important; } /*