/* =========================== DICO MAISON =========================== */ /* Cormorant Garamond auto-hébergée (licence SIL OFL, voir fonts/OFL.txt) : remplace l'ancien @import Google Fonts, qui en plus d'ajouter une dépendance réseau externe ne chargeait qu'une seule graisse (600). */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/cormorant-garamond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/cormorant-garamond-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } * { margin: 0; padding: 0; box-sizing: border-box; } .icone-svg { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; } /* =========================== Variables de style (thème "classique" par défaut) Chaque thème additionnel redéfinit ce même jeu de variables ci-dessous, via [data-theme="..."] sur . =========================== */ :root { /* Palette reprise à l'identique de Dico Maison 2 (site/style.css), harmonisation des 3 pages de l'écosystème (2026-09) — remplace l'ancien thème "classique" bleu comme apparence par défaut. Les thèmes alternatifs ci-dessous ([data-theme="..."]) restent disponibles tels quels, seule la valeur de base change. */ --bg-page: #faf6ec; --bg-carte: #ffffff; --bg-carte-alt: #f5efe0; --texte: #16324a; --texte-secondaire: #33506b; --texte-tertiaire: #7a5a14; --bordure: #e5dcc3; --bordure-forte: #d9c78f; --accent: #7a5a14; --accent-hover: #5f4310; --accent-texte: #fffaf0; --onglet-inactif-hover: #f5efe0; --suggestion-hover: #f5efe0; --police: Georgia, 'Times New Roman', serif; --style-titre: normal; --radius-carte: 14px; --radius-bouton: 6px; --radius-champ: 8px; --radius-onglet: 6px 6px 0 0; --ombre: 0 4px 20px rgba(22, 50, 74, .08); /* Personnalité typographique */ --police-accent: var(--police); --police-petite-accent: var(--police-accent); --taille-base: 17px; --interligne: 1.7; --taille-titre: 2.6rem; --graisse-titre: 600; --transform-titre: none; --espace-titre: 0.01em; --transform-accent: uppercase; --espace-accent: 0.08em; --variante-accent: normal; --carte-bordure: 1px solid var(--bordure); --lueur-active: none; } [data-theme="sombre"] { --bg-page: #121212; --bg-carte: #1e1e1e; --bg-carte-alt: #262626; --texte: #e6e6e6; --texte-secondaire: #aaaaaa; --texte-tertiaire: #9a9a9a; --bordure: #333333; --bordure-forte: #444444; --accent: #4da3ff; --accent-hover: #7cc0ff; --accent-texte: #0a0a0a; --onglet-inactif-hover: #2e3d4d; --suggestion-hover: #263646; --ombre: 0 5px 20px rgba(0, 0, 0, .5); --police-accent: 'JetBrains Mono', Consolas, Menlo, monospace; --taille-base: 15px; --interligne: 1.5; --taille-titre: 1.7rem; --graisse-titre: 700; --transform-titre: uppercase; --espace-titre: 0.05em; --transform-accent: uppercase; --espace-accent: 0.09em; --lueur-active: 0 0 10px var(--accent); } [data-theme="papier"] { --bg-page: #efe6cf; --bg-carte: #f6efdd; --bg-carte-alt: #e7dabb; --texte: #4a3420; --texte-secondaire: #6b4226; --texte-tertiaire: #8a6d4a; --bordure: #d8cba9; --bordure-forte: #8a6d4a; --accent: #6b4226; --accent-hover: #4a2c18; --accent-texte: #f6efdd; --onglet-inactif-hover: #ddcda3; --suggestion-hover: #ecdfc0; --police: Georgia, "Times New Roman", serif; --style-titre: italic; --radius-carte: 8px; --radius-bouton: 2px; --radius-champ: 2px; --radius-onglet: 2px 2px 0 0; --ombre: 0 3px 10px rgba(74, 52, 32, .2); --police-accent: 'Playfair Display', Georgia, serif; --taille-base: 17px; --interligne: 1.7; --taille-titre: 2.7rem; --graisse-titre: 700; --transform-titre: none; --espace-titre: 0.01em; --transform-accent: none; --espace-accent: 0.04em; --carte-bordure: 3px double var(--bordure-forte); } [data-theme="minimal"] { --bg-page: #ffffff; --bg-carte: #ffffff; --bg-carte-alt: #ffffff; --texte: #000000; --texte-secondaire: #333333; --texte-tertiaire: #000000; --bordure: #000000; --bordure-forte: #000000; --accent: #000000; --accent-hover: #333333; --accent-texte: #ffffff; --onglet-inactif-hover: #f0f0f0; --suggestion-hover: #f0f0f0; --radius-carte: 0; --radius-bouton: 0; --radius-champ: 0; --radius-onglet: 0; --ombre: none; --taille-base: 14px; --interligne: 1.6; --taille-titre: 1.3rem; --graisse-titre: 400; --transform-titre: uppercase; --espace-titre: 0.2em; --transform-accent: uppercase; --espace-accent: 0.14em; } [data-theme="nature"] { --bg-page: #eef3ea; --bg-carte: #f7faf5; --bg-carte-alt: #dfe9db; --texte: #2f4a34; --texte-secondaire: #4a7856; --texte-tertiaire: #6b8a6f; --bordure: #c9d9c6; --bordure-forte: #a9c4ac; --accent: #4a7856; --accent-hover: #3d6144; --accent-texte: #ffffff; --onglet-inactif-hover: #cfe0ca; --suggestion-hover: #e4efe0; --radius-carte: 16px; --radius-bouton: 14px; --radius-champ: 14px; --radius-onglet: 10px 10px 0 0; --police-accent: 'Quicksand', 'Trebuchet MS', sans-serif; --taille-base: 16px; --interligne: 1.6; --taille-titre: 2.3rem; --graisse-titre: 700; --transform-titre: none; --espace-titre: normal; --transform-accent: none; --espace-accent: normal; } [data-theme="academique"] { --bg-page: #faf6ec; --bg-carte: #ffffff; --bg-carte-alt: #f5efe0; --texte: #16324a; --texte-secondaire: #4a6178; --texte-tertiaire: #a87c1e; --bordure: #e5dcc3; --bordure-forte: #c9962a; --accent: #a87c1e; --accent-hover: #815f17; --accent-texte: #fffaf0; --onglet-inactif-hover: #f0e8d4; --suggestion-hover: #f0e8d4; --police: 'Cormorant Garamond', Georgia, serif; --radius-carte: 14px; --radius-bouton: 6px; --radius-champ: 24px; --radius-onglet: 6px 6px 0 0; --ombre: 0 4px 20px rgba(22, 50, 74, .08); --police-accent: 'Cormorant Garamond', Georgia, serif; --police-petite-accent: 'Cormorant Garamond', Georgia, serif; --taille-base: 17px; --interligne: 1.7; --taille-titre: 3rem; --graisse-titre: 600; --transform-titre: none; --espace-titre: 0.02em; --transform-accent: uppercase; --espace-accent: 0.08em; --variante-accent: normal; } body { font-family: var(--police); font-size: var(--taille-base); line-height: var(--interligne); background: var(--bg-page); color: var(--texte); } /* Carcasse commune aux 3 pages de l'écosystème Dico Maison (cette page + extracteur-local.html ici, index.html côté dicomaison2) — dupliquée à l'identique côté dicomaison2, projet séparé sans déploiement commun. */ .carcasse { position: sticky; top: 0; z-index: 30; background: var(--bg-carte); border-bottom: 1px solid var(--bordure); box-shadow: 0 2px 10px rgba(22, 50, 74, .05); } .carcasse-rangee { max-width: 1200px; margin: 0 auto; display: flex; } .carcasse-onglet { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 10px; border: none; border-bottom: 3px solid transparent; background: none; color: var(--texte-secondaire); font-family: var(--police); font-size: 0.92rem; letter-spacing: 0.02em; text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease; } .carcasse-onglet svg { width: 18px; height: 18px; flex-shrink: 0; } .carcasse-onglet:hover { color: var(--texte); background: var(--bg-carte-alt); } .carcasse-onglet[aria-current="page"] { color: var(--accent); font-weight: bold; border-bottom-color: var(--accent); } /* Onglet Extracteur (extracteur-local.html) */ .extracteur-carte { text-align: center; padding: 50px 30px; } .extracteur-carte .icone-etat { width: 46px; height: 46px; margin: 0 auto 18px; color: var(--accent); } .extracteur-carte h2 { font-family: var(--police-accent); font-size: 1.5rem; margin-bottom: 10px; } .extracteur-carte p { color: var(--texte-secondaire); max-width: 44ch; margin: 0 auto; } .bouton-large { display: inline-block; margin-top: 22px; background: var(--accent); color: var(--accent-texte); border: none; padding: 14px 28px; border-radius: var(--radius-bouton); font-size: 1rem; text-decoration: none; } .bouton-large:hover { background: var(--accent-hover); } .message-indisponible { color: var(--texte-secondaire); font-size: 0.92rem; margin-top: 18px; font-style: italic; } .container { max-width: 1200px; margin: 30px auto; background: var(--bg-carte); border-radius: var(--radius-carte); padding: 25px; box-shadow: var(--ombre); } h1 { text-align: center; color: var(--texte); font-family: var(--police-accent); font-size: var(--taille-titre); font-weight: var(--graisse-titre); font-style: var(--style-titre); text-transform: var(--transform-titre); letter-spacing: var(--espace-titre); } /* =========================== En-tête + sélecteur de langue et de style du site =========================== */ .header-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .header-bas { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .header-bas h1 { grid-column: 2; grid-row: 1; margin: 0; } .sous-titre-site { grid-column: 2; grid-row: 2; text-align: center; margin-top: 4px; color: var(--texte-secondaire); font-family: var(--police-accent); font-style: italic; font-size: 1.1rem; } .fioriture { grid-column: 2; grid-row: 3; width: 130px; height: 14px; margin: 6px auto 0; color: var(--bordure-forte); } .apropos-lien { color: var(--texte-tertiaire); text-decoration: none; font-size: 0.85em; white-space: nowrap; } .apropos-lien:hover { text-decoration: underline; } .choix-langue { display: flex; align-items: center; gap: 8px; } /* Menu déroulant compact, remplace .choix-langue sur petit écran (voir media query) */ .langue-selecteur { display: none; font-size: 0.8em; color: var(--texte-secondaire); background: var(--bg-carte); border: 1px solid var(--bordure-forte); border-radius: var(--radius-champ); padding: 3px 6px; cursor: pointer; } .choix-langue button { border: 1px solid var(--bordure-forte); background: var(--bg-carte); color: var(--texte); border-radius: var(--radius-bouton); padding: 6px 12px; font-size: 14px; cursor: pointer; transition: .2s; } .choix-langue button:hover { background: var(--bg-carte-alt); transform: translateY(-1px); } .active-langue { background: var(--accent) !important; color: var(--accent-texte) !important; border-color: var(--accent) !important; opacity: 1 !important; } /* Le sélecteur de langue DU SITE (haut de page) est rempli en marine, pas en or — contrairement aux autres boutons "actifs" du site (langue cible de traduction, prompt choisi), qui restent dorés. */ .choix-langue button.active-langue { background: var(--texte) !important; color: var(--bg-carte) !important; border-color: var(--texte) !important; } /* =========================== Barre de recherche =========================== */ .search { position: relative; display: flex; gap: 10px; margin-bottom: 25px; } #word { flex: 1; padding: 14px; font-size: 18px; color: var(--texte); background: var(--bg-carte); border: 1px solid var(--bordure-forte); border-radius: var(--radius-champ); } #word::placeholder { color: var(--texte-tertiaire); } #word:focus { outline: none; border-color: var(--accent); } #searchButton { background: var(--accent); color: var(--accent-texte); border: none; padding: 14px 24px; border-radius: var(--radius-champ); cursor: pointer; font-size: 16px; transition: .2s; } #searchButton:hover { background: var(--accent-hover); } /* =========================== Suggestions =========================== */ #suggestions { position: absolute; top: 52px; left: 0; width: calc(100% - 170px); background: var(--bg-carte); color: var(--texte); border: 1px solid var(--bordure); border-top: none; border-radius: 0 0 var(--radius-champ) var(--radius-champ); display: none; max-height: 250px; overflow-y: auto; z-index: 1000; box-shadow: var(--ombre); } .suggestion { padding: 10px 14px; cursor: pointer; } .suggestion:hover { background: var(--suggestion-hover); } .suggestion-separateur { padding: 8px 14px 4px; font-size: 0.8em; color: var(--texte-tertiaire); border-top: 1px solid var(--bordure); } /* =========================== Carte =========================== */ .card { background: var(--bg-carte); border-radius: var(--radius-carte); padding: 20px; border: var(--carte-bordure); } .card h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--accent); } .card h3 { display: flex; align-items: center; gap: 8px; font-family: var(--police-petite-accent); text-transform: var(--transform-accent); letter-spacing: var(--espace-accent); font-variant: var(--variante-accent); font-style: var(--style-titre); } .card h3 .icone-svg { color: var(--texte-tertiaire); } /* =========================== Traduction instantanée =========================== */ .traduction-instantanee { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding: 16px 0 20px; font-size: 22px; } .traduction-mot { color: var(--texte-secondaire); } .traduction-fleche { color: var(--texte-tertiaire); font-size: 18px; } .traduction-resultat { color: var(--accent); font-weight: bold; } .traduction-resultat a.traduction-lien-site { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .traduction-resultat a.traduction-lien-site:hover { color: var(--accent-hover); } /* =========================== Onglets principaux (modules) =========================== */ .modules { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid var(--bordure); } .modules button { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-carte-alt); border: none; padding: 14px 24px; cursor: pointer; font-size: 16px; font-family: var(--police-petite-accent); font-weight: bold; color: var(--texte-secondaire); text-transform: var(--transform-accent); letter-spacing: var(--espace-accent); border-radius: var(--radius-onglet); transition: .2s; } .modules button .icone-svg { width: 17px; height: 17px; } .modules button:hover { background: var(--onglet-inactif-hover); } .modules button.active { background: var(--accent); color: var(--accent-texte); text-shadow: var(--lueur-active); } /* =========================== Sources =========================== */ .sources { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .sources button { background: transparent; border: 1px solid var(--bordure); color: var(--texte); border-radius: var(--radius-champ); padding: 7px 14px; cursor: pointer; transition: .15s; font-size: 14px; } .sources button:hover { border-color: var(--accent); color: var(--accent); } .sources button.active-langue { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); } /* Liens vers des sites externes (dictionnaires, encyclopédies, etc.) : lignes de liste avec chevron plutôt que des boutons encadrés — devenu le rendu par défaut lors de l'harmonisation avec Dico Maison 2 (2026-09), auparavant réservé au thème académique. Reste appliqué quel que soit le thème choisi. Le conteneur passe en colonne uniquement quand il contient ce type de bouton (:has), pour ne pas affecter les groupes de pills (langues, prompts) qui partagent le même conteneur .sources ailleurs. */ .sources:has(button.lien-source) { flex-direction: column; gap: 0; } .sources button.lien-source { display: flex; justify-content: space-between; align-items: center; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--bordure); color: var(--texte); text-decoration: none; text-align: left; padding: 13px 2px; font-size: 17px; font-weight: 400; } .sources button.lien-source::after { content: "\203A"; color: var(--bordure-forte); font-size: 20px; line-height: 1; margin-left: 12px; flex-shrink: 0; } .sources button.lien-source:last-of-type { border-bottom: none; } .sources button.lien-source:hover { color: var(--accent); } .sources button.lien-source:hover::after { color: var(--accent); } .astuce-copie { /* flex-basis: 100% force ce texte sur sa propre ligne dans le conteneur .sources (flex-wrap) : sans ça, il peut chevaucher le bouton pilule juste au-dessus (l'ancien margin-top négatif était pensé pour les lignes à chevron du thème académique, plus pour les pilules). */ flex-basis: 100%; font-size: 0.85em; font-style: italic; color: var(--texte-secondaire); padding: 4px 2px 10px; } /* =========================== Copie =========================== */ .copy-button { margin-left: 10px; border: none; background: transparent; color: var(--texte); cursor: pointer; font-size: 20px; } .copy-button:hover { transform: scale(1.15); } /* =========================== Bloc prompt IA =========================== */ .prompt-titre { display: flex; align-items: center; gap: 8px; font-family: var(--police-petite-accent); text-transform: var(--transform-accent); letter-spacing: var(--espace-accent); font-size: 18px; font-weight: bold; padding: 12px 24px; margin-bottom: 12px; background: var(--bg-carte-alt); color: var(--texte); border: 1px solid var(--bordure); border-radius: var(--radius-champ); text-align: center; } .bouton-copier-prompt { font-size: 18px; padding: 12px 24px; font-weight: bold; width: 100%; margin-bottom: 12px; background: var(--accent); color: var(--accent-texte); border: none; border-radius: var(--radius-champ); cursor: pointer; transition: .2s; } .bouton-copier-prompt:hover { background: var(--accent-hover); } #promptIA { width: 100%; height: 420px; padding: 10px; color: var(--texte); background: var(--bg-carte); border: 1px solid var(--bordure-forte); border-radius: var(--radius-champ); font-family: var(--police); } /* =========================== Barre supérieure (générique, si utilisée) =========================== */ .topbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 20px; } .topbar a { text-decoration: none; color: var(--accent); font-weight: bold; } .topbar a:hover { text-decoration: underline; } .topbar button { padding: 6px 12px; border: none; border-radius: 6px; background: var(--accent); color: var(--accent-texte); cursor: pointer; } .topbar button:hover { opacity: .9; } /* =========================== Iframe (si besoin dans un module futur) =========================== */ iframe { width: 100%; height: 700px; border: 1px solid var(--bordure); border-radius: var(--radius-carte); background: var(--bg-carte); } /* =========================== Archivage des liens consultés =========================== */ .archive-liens { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--bordure); font-size: 0.85em; color: var(--texte-tertiaire); } .archive-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .archive-liens button, .archive-liens a { border: 1px solid var(--bordure-forte); background: var(--bg-carte); color: var(--texte-secondaire); border-radius: var(--radius-bouton); padding: 5px 12px; font-size: 1em; text-decoration: none; cursor: pointer; transition: .2s; } .archive-liens button:hover, .archive-liens a:hover { background: var(--bg-carte-alt); color: var(--texte); } #liste-liens-detail { margin-top: 12px; background: var(--bg-carte-alt); border: 1px solid var(--bordure); border-radius: var(--radius-carte); padding: 14px 16px; } .liste-liens-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .liste-liens-actions:last-child { margin-bottom: 0; margin-top: 10px; } #liste-liens-items { max-height: 320px; overflow-y: auto; } .groupe-mot { margin-bottom: 10px; } .groupe-mot-titre { font-family: var(--police-accent); font-weight: 700; color: var(--texte); margin-bottom: 4px; } .ligne-lien { display: flex; align-items: center; gap: 6px; padding: 2px 0 2px 12px; cursor: pointer; } .ligne-lien:hover { color: var(--texte); } .ligne-lien-categorie { color: var(--texte-tertiaire); font-size: 0.85em; font-style: italic; } .archive-vide { font-style: italic; } .tutoriel-automatisation { margin-top: 14px; font-size: 0.85em; color: var(--texte-tertiaire); } .tutoriel-automatisation > button { border: 1px solid var(--bordure-forte); background: var(--bg-carte); color: var(--texte-secondaire); border-radius: var(--radius-bouton); padding: 5px 12px; font-size: 1em; cursor: pointer; transition: .2s; } .tutoriel-automatisation > button:hover { background: var(--bg-carte-alt); color: var(--texte); } #tutoriel-detail { margin-top: 10px; background: var(--bg-carte-alt); border: 1px solid var(--bordure); border-radius: var(--radius-carte); padding: 14px 18px; line-height: 1.6; } #tutoriel-detail ol { padding-left: 1.3em; margin: 8px 0; } #tutoriel-detail code { background: var(--bg-carte); border: 1px solid var(--bordure); border-radius: 4px; padding: 1px 5px; font-size: 0.95em; } .generateur-reg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .generateur-reg input { flex: 1; min-width: 220px; padding: 6px 10px; border: 1px solid var(--bordure-forte); border-radius: var(--radius-champ); font-size: 0.95em; color: var(--texte); background: var(--bg-carte); } .generateur-reg button { border: none; background: var(--accent); color: var(--accent-texte); border-radius: var(--radius-bouton); padding: 7px 16px; font-size: 0.95em; cursor: pointer; transition: .2s; white-space: nowrap; } .generateur-reg button:hover { background: var(--accent-hover); } /* =========================== Responsive =========================== */ @media (max-width: 700px) { .container { margin: 0 auto; padding: 16px; border-radius: 0; } h1 { font-size: clamp(1.3rem, 7vw, 1.8rem); } .header-haut { flex-wrap: wrap; row-gap: 8px; } .apropos-lien { white-space: normal; } .choix-langue { display: none; } .langue-selecteur { display: block; } .header-bas { grid-template-columns: 1fr; justify-items: center; row-gap: 10px; text-align: center; } .header-bas h1, .sous-titre-site, .fioriture { grid-column: 1; } .search { flex-direction: column; } #suggestions { width: 100%; } .modules { flex-wrap: wrap; } /* Définition, Traduction, Prompt sur la première ligne, Historique seul sur la seconde — forcé explicitement plutôt que laissé au hasard du retour à la ligne (qui varie selon la largeur d'écran ou la longueur des libellés traduits). */ .modules button:nth-child(-n+3) { flex: 1 1 33.333%; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 12px; letter-spacing: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } .modules .onglet-icone .icone-svg { width: 20px; height: 20px; } .modules button:nth-child(n+4) { flex: 1 1 100%; justify-content: center; } }