/* ── Refonte des optimiseurs — habillage ──────────────────────────────── Chargé par /optimiseur/ et /optimiseur-g/, deux bundles Vite dont le code source n'existe plus. On ne recompile pas l'application : on masque sa rangée d'onglets, on en reconstruit une collée en haut de l'écran, et celle-ci se contente de cliquer les vrais boutons restés en place. Les couleurs viennent de l'application elle-même : optimiseur-ui.js les relève sur les vrais onglets et les recopie ici. Elles suivent donc la bascule clair / sombre sans qu'on ait à la connaître. ───────────────────────────────────────────────────────────────────── */ :root { --opt-bg: #faf6f0; --opt-fg: #1a1614; --opt-muted: #6b6560; --opt-line: rgba(26, 22, 20, 0.14); --opt-accent: #b8713a; --opt-accent-soft: rgba(184, 113, 58, 0.12); --opt-carte: #fff; --opt-menu-h: 52px; } /* Tout ce qui suit est suspendu à la classe « opt-ui-pret », posée sur par optimiseur-ui.js une fois la vraie rangée d'onglets trouvée. Si le navigateur sert un ancien bundle gardé en cache, rien ne se déclenche et l'application reste utilisable telle quelle. */ html.opt-ui-pret body { padding-top: var(--opt-menu-h); } /* La rangée d'onglets d'origine et le « ← Accueil » flottant : conservés dans la page — c'est eux qu'on clique — mais retirés de la vue. */ html.opt-ui-pret #opt-tabbar { display: none !important; } html.opt-ui-pret .opt-home { display: none !important; } /* Le thème et le « ? » du guide : repris dans le menu, retirés du coin haut droit de l'en-tête où le panneau d'actions du site leur passait dessus. */ html.opt-ui-pret #opt-btn-theme, html.opt-ui-pret #opt-btn-guide { display: none !important; } /* Le panneau d'actions du site se pose en haut à droite (top:14px) : il recouvrait la fin de la barre — RGPD, Stats et le bouton de thème disparaissaient dessous. On le descend juste sous le menu ; la barre récupère toute la largeur. */ html.opt-ui-pret .ctap-panel { top: calc(var(--opt-menu-h) + 12px) !important; } /* ── La barre collante ─────────────────────────────────────────────────── */ #opt-menu { position: fixed; top: 0; left: 0; right: 0; z-index: 950; background: var(--opt-bg); border-bottom: 1px solid var(--opt-line); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06); font-family: 'DM Sans', system-ui, -apple-system, sans-serif; } #opt-menu .opt-menu-rail { display: flex; align-items: center; gap: 6px; /* Toute la largeur : le panneau d'actions du site est passé dessous, la barre n'a plus de raison de s'arrêter avant le bord. Un cadre centré laissait la dernière pastille coupée sur les écrans larges. */ padding: 8px 14px; width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #opt-menu .opt-menu-rail::-webkit-scrollbar { display: none; } /* ── Les deux flèches du menu ─────────────────────────────────────────── Compagnon de /shared/opt-menu-fleches.js. Elles se posent aux deux bouts de la barre, par-dessus le rail, avec un dégradé qui fait passer les pastilles dessous plutôt que de les couper net. Elles vivent DANS la barre (position absolue, la barre étant fixe donc positionnée) : cette barre est de notre fabrication, rien ne viendra les balayer. Le rail gagne de la marge de chaque côté quand elles sont là, sinon la première et la dernière entrée resteraient cachées dessous. */ /* Les sélecteurs portent l'identifiant de la barre : sans lui, la règle `#opt-menu button` (ou `#optml-menu button`) l'emporterait et rendrait aux flèches la pastille arrondie et les 34 px de hauteur des autres entrées. */ #opt-menu .opt-menu-fleche, #optml-menu .opt-menu-fleche { position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0; padding: 0; min-height: 0; border: none; border-radius: 0; box-shadow: none; font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } #opt-menu .opt-menu-fleche-gauche, #optml-menu .opt-menu-fleche-gauche { left: 0; } #opt-menu .opt-menu-fleche-droite, #optml-menu .opt-menu-fleche-droite { right: 0; } #opt-menu .opt-menu-fleche { color: var(--opt-accent); background: linear-gradient(to right, var(--opt-bg) 58%, transparent); } #opt-menu .opt-menu-fleche-droite { background: linear-gradient(to left, var(--opt-bg) 58%, transparent); } #opt-menu.a-fleches .opt-menu-rail { padding-left: 40px; padding-right: 40px; } /* Sur un écran tactile, une cible de 36 px se rate : les flèches grandissent, et le rail recule d'autant. Règle du site — les deux flèches doivent être « bien visibles et bien utiles sur mobile ». */ @media (pointer: coarse) { #opt-menu .opt-menu-fleche, #optml-menu .opt-menu-fleche { width: 42px; font-size: 26px; } #opt-menu.a-fleches .opt-menu-rail { padding-left: 46px; padding-right: 46px; } } #opt-menu button, #opt-menu a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--opt-line); background: transparent; color: var(--opt-muted); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } #opt-menu button:hover, #opt-menu a:hover { color: var(--opt-accent); border-color: var(--opt-accent); } #opt-menu button.is-on { background: var(--opt-accent-soft); border-color: var(--opt-accent); color: var(--opt-accent); } #opt-menu .opt-menu-accueil { border-color: transparent; background: var(--opt-accent-soft); color: var(--opt-accent); } #opt-menu .opt-menu-sep { flex: 0 0 auto; width: 1px; height: 20px; background: var(--opt-line); margin: 0 3px; } @media (max-width: 640px) { #opt-menu .opt-menu-rail { padding: 7px 10px; gap: 5px; } #opt-menu button, #opt-menu a { padding: 6px 11px; font-size: 12px; } } /* ── Les fenêtres de la refonte (Jeux, Conseils, Format) ───────────────── */ .optui-ov { position: fixed; inset: 0; /* Au-dessus des fenêtres de l'application (99999) : en temps normal les deux ne s'ouvrent jamais ensemble — le menu passe sous elles — mais si l'API est appelée à la main, mieux vaut voir ce qu'on a demandé. */ z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); font-family: 'DM Sans', system-ui, -apple-system, sans-serif; } .optui-ov[hidden] { display: none; } .optui-modale { background: var(--opt-carte); color: var(--opt-fg); border: 1px solid var(--opt-line); border-radius: 20px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4); width: 100%; max-width: 560px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; } .optui-modale.est-large { max-width: 660px; } .optui-tete { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--opt-line); flex-shrink: 0; } .optui-tete h2 { margin: 0 0 3px; font-size: 18px; font-weight: 700; color: var(--opt-fg); } .optui-tete p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--opt-muted); } .optui-fermer { margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--opt-line); background: transparent; color: var(--opt-muted); font-size: 15px; line-height: 1; cursor: pointer; } .optui-fermer:hover { color: var(--opt-accent); border-color: var(--opt-accent); } .optui-corps { overflow-y: auto; padding: 16px 22px 22px; flex: 1; } /* Les cartes d'entrée des rubriques Jeux et Conseils */ .optui-carte { display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left; padding: 13px 15px; margin-bottom: 9px; border-radius: 13px; border: 1px solid var(--opt-line); background: transparent; color: inherit; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.12s; } .optui-carte:last-child { margin-bottom: 0; } .optui-carte:hover { border-color: var(--opt-accent); background: var(--opt-accent-soft); transform: translateY(-1px); } .optui-carte .optui-emoji { font-size: 24px; line-height: 1.1; flex-shrink: 0; } .optui-carte .optui-nom { font-size: 14px; font-weight: 700; color: var(--opt-fg); margin-bottom: 2px; } .optui-carte .optui-desc { font-size: 12.5px; line-height: 1.5; color: var(--opt-muted); } /* ── Le choix du format de sortie ──────────────────────────────────────── */ .optui-fam { margin-bottom: 16px; } .optui-fam:last-child { margin-bottom: 0; } .optui-fam-nom { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--opt-muted); margin-bottom: 7px; } .optui-puces { display: flex; flex-wrap: wrap; gap: 6px; } .optui-puce { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--opt-line); background: transparent; color: var(--opt-fg); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .optui-puce:hover { background: var(--opt-accent-soft); border-color: var(--opt-accent); } .optui-puce .optui-ico { font-size: 13px; opacity: 0.8; } .optui-detail { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--opt-line); } .optui-detail:last-child { border-bottom: none; } .optui-detail .optui-ico { font-size: 17px; width: 24px; text-align: center; flex-shrink: 0; } .optui-detail .optui-nom { font-size: 13.5px; font-weight: 600; color: var(--opt-fg); } .optui-detail .optui-quand { font-size: 12px; color: var(--opt-muted); margin: 2px 0 5px; } .optui-detail .optui-phrase { font-size: 12px; font-style: italic; line-height: 1.5; color: var(--opt-fg); background: var(--opt-accent-soft); border-radius: 6px; padding: 6px 9px; } .optui-detail .optui-inserer { margin-top: 6px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--opt-line); background: transparent; color: var(--opt-muted); font-family: inherit; font-size: 11.5px; cursor: pointer; } .optui-detail .optui-inserer:hover { color: var(--opt-accent); border-color: var(--opt-accent); } /* ── Le lien de partage ────────────────────────────────────────────────── */ .optui-lien { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--opt-line); background: var(--opt-accent-soft); color: var(--opt-fg); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.5; resize: vertical; word-break: break-all; } .optui-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .optui-primaire, .optui-secondaire { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 16px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid var(--opt-accent); } .optui-primaire { background: var(--opt-accent); color: #fff; } .optui-secondaire { background: transparent; color: var(--opt-accent); } .optui-secondaire:hover { background: var(--opt-accent-soft); } .optui-note { margin: 11px 0 0; font-size: 12px; line-height: 1.55; color: var(--opt-muted); } .optui-note a { color: var(--opt-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .optui-vide { margin: 0; font-size: 13px; line-height: 1.6; color: var(--opt-muted); text-align: center; padding: 14px 4px; } /* ── La passerelle vers l'outil jumeau ────────────────────────────────── Détachée du reste par un trait : ce n'est plus « partager », c'est « emporter ailleurs ». Le bouton prend toute la largeur — c'est une sortie, pas une action de plus dans la rangée. */ .optui-passerelle { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--opt-line); } .optui-passerelle h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--opt-muted); } .optui-passerelle .optui-secondaire { display: flex; width: 100%; box-sizing: border-box; } .optui-passerelle .optui-note { margin-top: 9px; } /* ── Le garde-fou d'anonymisation ─────────────────────────────────────── Compagnon de /shared/opt-anonymiser.js. Le bandeau se pose en bas au centre : le coin bas-gauche est pris par le « Guide du site », le haut à droite par le panneau d'actions du site. */ .optanon-bandeau { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 9px 10px 9px 15px; border-radius: 12px; border: 1px solid #f0b429; background: #fffaf0; color: #6b4d00; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); font-family: inherit; font-size: 13px; font-weight: 600; animation: optanon-monte 0.22s ease; } @keyframes optanon-monte { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Quand il ne reste que des « à vérifier », le bandeau baisse la voix. */ .optanon-bandeau.est-doux { border-color: var(--opt-line); background: var(--opt-carte); color: var(--opt-muted); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .optanon-bandeau.est-doux .optanon-bandeau-voir { background: transparent; border-color: var(--opt-line); color: var(--opt-fg); } .optanon-bandeau-texte { flex: 1 1 auto; line-height: 1.4; } .optanon-bandeau-voir, .optanon-bandeau-non { flex: 0 0 auto; min-height: 0; border-radius: 8px; border: 1px solid #f0b429; background: #f0b429; color: #3d2c00; font-family: inherit; font-weight: 700; cursor: pointer; } .optanon-bandeau-voir { padding: 7px 13px; font-size: 12.5px; } .optanon-bandeau-non { padding: 6px 9px; font-size: 12px; background: transparent; border-color: transparent; color: #8a6d1f; } .optanon-bandeau-non:hover { background: rgba(240, 180, 41, 0.22); } .optanon-ligne { display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin-top: 9px; border-radius: 10px; border: 1px solid var(--opt-line); background: var(--opt-carte); } .optanon-ligne.est-douteux { border-style: dashed; } .optanon-ligne.est-fait { opacity: 0.5; } .optanon-quoi { flex: 1 1 auto; min-width: 0; } .optanon-type { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--opt-muted); } .optanon-valeur { display: block; margin-top: 3px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--opt-fg); word-break: break-all; } .optanon-doute { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--opt-muted); } .optanon-ligne .optui-secondaire { flex: 0 0 auto; padding: 8px 13px; font-size: 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; } .optanon-ligne .optui-secondaire:disabled { opacity: 0.6; cursor: default; } @media (max-width: 560px) { .optanon-ligne { flex-direction: column; align-items: stretch; } .optanon-ligne .optui-secondaire { width: 100%; } } /* Le champ de recherche de la bibliothèque de templates */ .opt-tpl-cherche { margin: 0 0 14px; } .optui-bascule { display: block; margin: 4px auto 0; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--opt-line); background: transparent; color: var(--opt-muted); font-family: inherit; font-size: 12px; cursor: pointer; } .optui-bascule:hover { color: var(--opt-accent); border-color: var(--opt-accent); } /* Le petit message de confirmation après une insertion */ #optui-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 10px); z-index: 100001; padding: 9px 18px; border-radius: 10px; background: #1a1614; color: #fff; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; } #optui-toast.est-vu { opacity: 1; transform: translate(-50%, 0); } /* ── Téléphone : les fenêtres de l'application prennent tout l'écran ───── */ @media (max-width: 640px) { .opt-ov, .optui-ov { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; } .opt-ov > div, .optui-modale { width: 100% !important; max-width: none !important; max-height: none !important; height: 100% !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; } .opt-ov > div { overflow-y: auto !important; } .optui-ov { padding-bottom: env(safe-area-inset-bottom) !important; } } /* ── Le retour à la rubrique, par-dessus la fenêtre du jeu ─────────────── */ .optui-retour { position: fixed; top: 14px; left: 14px; z-index: 100002; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(20, 18, 17, 0.82); backdrop-filter: blur(8px); color: #fff; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 16px rgba(0, 0, 0, 0.3); } .optui-retour:hover { background: rgba(20, 18, 17, 0.95); border-color: rgba(255, 255, 255, 0.6); } @media (max-width: 640px) { .optui-retour { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 11px 20px; font-size: 13px; } } /* ── Le QCM paginé ─────────────────────────────────────────────────────── */ .opt-qcm-pager { margin: 0 0 14px; } .opt-qcm-compte { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--opt-muted); text-align: center; margin-bottom: 9px; } .opt-qcm-points { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; padding: 3px 0; } .opt-qcm-point { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1.5px solid; cursor: pointer; transition: transform 0.18s, background 0.18s; } .opt-qcm-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; } .opt-qcm-nav button { flex: 1 1 0; } /* ── Le QCM : une rangée de thèmes qui défile, des réponses pleine largeur */ /* ── Le QCM : de la place pour la question ───────────────────────────── Entre le gros 🧠, le titre, la ligne d'export et onze thèmes étalés sur trois lignes, il ne restait qu'une lucarne pour lire la question et voir ses réponses. La fenêtre monte plus haut, l'en-tête se resserre, et les thèmes tiennent sur une seule ligne qui défile du doigt. */ .opt-ov-qcm { padding: 10px !important; } .opt-ov-qcm > div { max-height: calc(100dvh - 20px) !important; } .opt-qcm-head { padding: 12px 18px 0 !important; } /* Le 🧠 passe à CÔTÉ du titre : au-dessus, il coûtait une ligne entière pour un emoji. La phrase sur l'export garde la sienne, en plus petit. */ .opt-qcm-head > div:first-child { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 6px !important; } .opt-qcm-head > div:first-child > div:first-child { /* l'emoji */ font-size: 20px !important; margin: 0 !important; } .opt-qcm-head h2 { font-size: 17px !important; margin: 0 !important; } .opt-qcm-head p { flex: 1 0 100%; text-align: center; font-size: 11px !important; margin: 0 !important; } /* Les onze thèmes sur une seule ligne, à toutes les largeurs. Les flèches sont posées par /shared/opt-cats-fleches.js ; on leur réserve la place aux deux bouts, sinon la première et la dernière pastille passeraient dessous. */ .opt-qcm-cats { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-left: 22px !important; padding-right: 22px !important; } .opt-qcm-cats::-webkit-scrollbar { display: none; } /* ── Les flèches des rangées de rubriques ──────────────────────────────── */ .opt-cats-fleche { position: fixed; z-index: 100002; transform: translate(-50%, -50%); width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--opt-line); background: var(--opt-carte); color: var(--opt-accent); font-family: system-ui, sans-serif; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16); display: flex; align-items: center; justify-content: center; min-height: 0; } .opt-cats-fleche:hover { background: var(--opt-accent); color: #fff; border-color: var(--opt-accent); } .opt-cats-gauche { padding-right: 2px; } .opt-cats-droite { padding-left: 2px; } .opt-qcm-body { padding: 12px 18px 18px !important; } /* Le bandeau du thème rappelle son nom et le score : utile, mais il n'a plus besoin d'être aussi haut qu'au temps où il repliait vingt questions. */ .opt-qcm-acc { padding: 10px 14px !important; } .opt-qcm-acc > span:nth-child(2) { font-size: 14px !important; } /* Les rangées de rubriques des autres fenêtres (Templates, Astuces, Erreurs) : même traitement, mais seulement quand la place manque. */ @media (max-width: 900px) { .opt-cats { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .opt-cats::-webkit-scrollbar { display: none; } } /* La bibliothèque de templates : deux colonnes de vignettes minuscules sur un téléphone, une seule suffit. */ @media (max-width: 640px) { .opt-tpl-grille { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { /* Trois étages : en-tête figé, corps défilant, pied. La fenêtre elle-même ne défile pas — sinon l'en-tête partirait avec le contenu. */ .opt-ov-qcm > div { overflow: hidden !important; display: flex !important; flex-direction: column !important; } .opt-qcm-head { padding: 16px 14px 0 !important; } .opt-qcm-body { padding: 12px 14px 26px !important; } .opt-qcm-opt { flex: 1 1 100% !important; min-width: 0 !important; white-space: normal !important; } .opt-qcm-tf { flex: 1 1 40% !important; } .opt-qcm-acc { padding: 12px 14px !important; } }