.
---------------------------------------------------------------- */
#nav-gauche .nav-item.item-menu.actif > .nav-link {
background-color: color-mix(in srgb, var(--app-couleur, #d0653a) 30%, transparent);
border-radius: 4px;
}
/* ----------------------------------------------------------------
#menu-texte-lecture masqué par défaut
(visible seulement en interface-niveau-1 et 2)
---------------------------------------------------------------- */
#menu-texte-lecture { display: none; }
/* ----------------------------------------------------------------
Remappage interface-niveau-N
uicontrol.js pose la classe sur #lc-nav-hook, un MutationObserver
la reflète sur → les règles ci-dessous s'appliquent partout.
Source originale : css/navbar.css (règles .interface-niveau-N)
---------------------------------------------------------------- */
/* Niveau 1 : lecture TTS visible, éditeur/URL/fichier/profils masqués,
sous-en-têtes masqués */
body.interface-niveau-1 #menu-texte-lecture { display: list-item !important; }
body.interface-niveau-1 #menu-texte-brut,
body.interface-niveau-1 #menu-texte-en-ligne,
body.interface-niveau-1 #menu-texte-fichier,
body.interface-niveau-1 #menu-hamburger { display: none !important; }
body.interface-niveau-1 #entetes-contenu { display: none !important; }
/* Niveau 2 : lecture TTS visible, éditeur/URL/profils masqués */
body.interface-niveau-2 #menu-texte-lecture { display: list-item !important; }
body.interface-niveau-2 #menu-texte-brut,
body.interface-niveau-2 #menu-texte-en-ligne,
body.interface-niveau-2 #menu-hamburger { display: none !important; }
body.interface-niveau-2 #entetes-contenu { display: none !important; }
/* Niveau 3 : TTS et éditeur masqués */
body.interface-niveau-3 #menu-texte-lecture,
body.interface-niveau-3 #menu-texte-brut { display: none !important; }
/* Niveau 4 : TTS, URL et fichier masqués */
body.interface-niveau-4 #menu-texte-lecture,
body.interface-niveau-4 #menu-texte-en-ligne,
body.interface-niveau-4 #menu-texte-fichier { display: none !important; }
/* ----------------------------------------------------------------
Zone de contenu principal LC
---------------------------------------------------------------- */
#main {
display: flex;
flex-direction: column;
min-height: 100%;
}
.contenu {
flex: 1 1 auto;
padding: 0.5rem;
width: 100%;
}
/* ----------------------------------------------------------------
Fix global : page-lire.css sélectionne h2,h3,h4 hors #texte-adapte.
On rétablit les styles Bootstrap pour les titres hors du contenu LC.
---------------------------------------------------------------- */
.modal h2, .modal h3, .modal h4,
header h2, header h3, header h4,
footer h2, footer h3, footer h4 {
margin: revert;
color: revert;
}
/* ----------------------------------------------------------------
Modales LC — z-index au-dessus de Bootstrap
---------------------------------------------------------------- */
.modal-www { z-index: 1055; }
/* Blockly génère .blocklyDropDownDiv à z-index 1000 (< modal Bootstrap 1055) →
les listes déroulantes et color pickers disparaissent derrière le modal */
.blocklyDropDownDiv { z-index: 1060 !important; }
/* ----------------------------------------------------------------
Impression : masquer chrome e-template
---------------------------------------------------------------- */
@media print {
header, footer { display: none !important; }
body { height: auto !important; overflow: visible !important; }
main { overflow: visible !important; }
}
/* ----------------------------------------------------------------
Boutons .pastille — style push-button e-template
---------------------------------------------------------------- */
.pastille {
--btn-couleur: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: 6px;
background-color: transparent;
box-shadow: none;
border: none;
position: relative;
z-index: 0;
overflow: visible;
cursor: pointer;
text-decoration: none;
transition: transform 0.5s cubic-bezier(0, 1, 0.3, 1);
}
.pastille::before,
.pastille::after {
content: '';
border-radius: 6px;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
transition: transform 0.5s cubic-bezier(0, 1, 0.3, 1);
}
.pastille::before {
background-color: color-mix(in srgb, var(--btn-couleur) 60%, black);
top: 4px;
bottom: -4px;
}
.pastille::after {
background-color: var(--btn-couleur);
}
.pastille:hover { transform: translateY(1px) }
.pastille:hover::before { transform: translateY(-1px) }
.pastille:active { transform: translateY(4px); transition: none }
.pastille:active::before { transform: translateY(-4px); transition: none }
.pastille i {
font-size: 18px;
color: white;
line-height: 1;
}
/* Espace bas pour laisser visible l'ombre portée + centrage des boutons */
.entete-contenu > .icones-div {
padding: 6px 0.5rem 9px;
justify-content: center;
background-color: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 8px;
margin: 0 0.5rem;
}
/* Titre de section — bande distincte au-dessus de la rangée d'icônes */
.entete-contenu h1 {
margin: 0;
padding: 0.6rem 1rem;
font-size: 1.5rem;
font-weight: 700;
text-align: center;
color: var(--app-couleur, var(--primary));
background-color: var(--bs-body-bg);
}
/* ----------------------------------------------------------------
Fond de page — harmonisation avec Bootstrap
---------------------------------------------------------------- */
/* Barre de sous-actions : fond transparent (géré par .icones-div et h1) */
#entetes-contenu {
background-color: transparent;
border-bottom: none;
}
/* Zones de contenu LC : fond Bootstrap body (s'adapte dark/light) */
#texte-adapte,
#texte-brut,
#texte-qrcode {
background-color: var(--bs-body-bg);
}
/* ----------------------------------------------------------------
Sidemenu LC — masqué (remplacé par #modale-config offcanvas)
---------------------------------------------------------------- */
#sidemenu { display: none !important; }
/* ----------------------------------------------------------------
Offcanvas Profils — push sidebar (décale le contenu à l'ouverture)
---------------------------------------------------------------- */
#modale-config { --bs-offcanvas-border-color: var(--bs-border-color) }
/* Le panneau s'arrête au-dessus du footer de la page (hauteur mesurée en JS,
44px = py-2 + logo 28px en repli) — le footer reste visible en pleine largeur */
#modale-config { bottom: var(--pied-hauteur, 44px) }
#modale-config-header { min-height: 86px }
/* Push sidebar — le contenu se décale quand le panneau Profils s'ouvre.
html reçoit le même fond que body pour masquer le liseré blanc entre
le corps décalé et l'offcanvas qui n'est pas encore apparu.
Le footer reste pleine largeur : il compense le décalage du body par une marge négative. */
html { background-color: var(--bs-body-bg) }
body, #footer-nav { transition: margin-right 0.3s ease-in-out }
body.config-ouvert { margin-right: var(--config-decalage, var(--bs-offcanvas-width, 400px)) }
body.config-ouvert #footer-nav { margin-right: calc(-1 * var(--config-decalage, var(--bs-offcanvas-width, 400px))) }
@media (orientation: portrait) and (max-width: 767.98px) {
#modale-config { --bs-offcanvas-width: 100% }
body.config-ouvert,
body.config-ouvert #footer-nav { margin-right: 0 }
}
/* Poignée de redimensionnement — bande verticale sur le bord gauche de l'offcanvas */
#config-resize-handle {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 6px;
cursor: ew-resize;
z-index: 10;
background: transparent;
border-left: 3px solid transparent;
transition: border-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
#config-resize-handle:hover,
#config-resize-handle.actif { border-left-color: var(--bs-border-color) }
/* Icône grip — pastille centrée verticalement, chevauche le bord gauche pour
rester visible aussi bien sur le fond de la page que sur celui de l'offcanvas */
#config-resize-handle i {
position: absolute;
left: -11px;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 32px;
border-radius: 9px;
background: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 0.7em;
transition: color 0.2s, border-width 0.2s;
}
#config-resize-handle:hover i,
#config-resize-handle.actif i { color: var(--bs-body-color); border-width: 3px }
@media (orientation: portrait) and (max-width: 767.98px) {
#config-resize-handle { display: none }
}
/* ----------------------------------------------------------------
Offcanvas Profils — styles des items .profil générés dynamiquement
par miseAJourProfilsVisu() dans uicontrol.js
---------------------------------------------------------------- */
#modale-config #liste-profils-menu .profil {
display: flex;
align-items: center;
}
#modale-config #liste-profils-menu .profil > a:first-child {
flex: 1;
padding: 0.6rem 1rem;
font-weight: 500;
text-decoration: none;
transition: filter 0.15s;
overflow: hidden;
}
/* Nom du profil rendu via processText() + postProcessHTML() */
.profil-sample {
display: block;
font-size: 0.95rem;
line-height: 1.4;
color: var(--bs-body-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* showdown wraps single lines in — on en a supprimé le wrapper en JS,
mais des
imbriqués peuvent subsister selon le profil */
.profil-sample p {
display: inline;
margin: 0;
}
#modale-config #liste-profils-menu .profil > a:first-child.actif {
box-shadow: inset 4px 0 0 var(--primary);
font-weight: 700;
}
#modale-config #liste-profils-menu .profil > a:first-child:hover {
filter: brightness(0.88);
}
#modale-config #liste-profils-menu .profil > .profil-preview,
#modale-config #liste-profils-menu .profil > a[title="Supprimer"] {
padding: 0.5rem 0.5rem;
opacity: 0.4;
text-decoration: none;
}
#modale-config #liste-profils-menu .profil > .profil-preview:hover,
#modale-config #liste-profils-menu .profil > a[title="Supprimer"]:hover {
opacity: 1;
}
#modale-config #liste-profils-menu .profil img {
width: 18px;
height: 18px;
display: block;
}
/* ----------------------------------------------------------------
Aperçu PDF dans #modale-pdf
---------------------------------------------------------------- */
.pdf-preview-container {
border: 1px solid var(--bs-border-color);
border-radius: 6px;
background: var(--bs-secondary-bg);
overflow: hidden;
}
.pdf-preview {
width: 100%;
height: 500px;
border: none;
display: block;
}
/* Titres de section dans la modale Config — cadre gris léger */
.config-section-title {
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 1.25rem !important;
}
.config-section-title .list-group,
.config-section-title .list-group-flush {
border-radius: 6px;
overflow: hidden;
}
/* Icône des boutons Auteur / Liens / Remerciements (modale À propos) —
boîte de largeur fixe (1.25em, alignée sur le fa-fw de FontAwesome) pour
que chaque bouton ait la même colonne d'icône avant la séparation verticale.
Recentrage entre le bord gauche du bouton et le trait vertical (.vr) :
le padding-left du bouton (28px, commun.css) est bien plus grand que le
gap-2 (8px) qui sépare l'icône du trait — l'icône se retrouve donc plaquée
contre le trait au lieu d'être centrée dans tout cet espace. On la recale
en la décalant à gauche de (padding - gap) / 2. */
.icone-fixe {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25em;
flex-shrink: 0;
transform: translateX(calc((8px - 28px) / 2)); /* = -10px */
}
/* Correctif optique additionnel : le glyphe fa-code-branch n'est pas centré
dans sa propre case de police (son encre est légèrement décalée à gauche) —
décalage mesuré au pixel près par capture d'écran (~0.7px), à ajouter au
recentrage ci-dessus. */
.icone-fixe .fa-code-branch {
transform: translateX(0.7px);
}
/* ----------------------------------------------------------------
Polices de lecture (sélecteur pastille Aa)
---------------------------------------------------------------- */
@font-face {
font-family: 'Luciole';
src: url('../data/polices/Luciole-Regular.woff2') format('woff2'),
url('../data/polices/Luciole-Regular.woff') format('woff');
font-display: swap;
}
@font-face {
font-family: 'OpenDyslexic';
src: url('../data/polices/OpenDyslexic-Regular.woff') format('woff');
font-display: swap;
}
@font-face {
font-family: 'Marelle';
src: url('../data/polices/Marelle-Regular.ttf') format('truetype');
font-display: swap;
}
#texte-adapte.police-luciole,
#texte-adapte.police-luciole * { font-family: 'Luciole', sans-serif !important; }
#texte-adapte.police-opendyslexic,
#texte-adapte.police-opendyslexic * { font-family: 'OpenDyslexic', sans-serif !important; }
#texte-adapte.police-marelle,
#texte-adapte.police-marelle * {
font-family: 'Marelle', sans-serif !important;
letter-spacing: 0 !important;
}
/* Pastille retours à la ligne — inactive (grisée) par défaut, colorée quand active */
#btn-retours-ligne { --btn-couleur: #7f8c8d; }
#btn-retours-ligne.actif { --btn-couleur: var(--app-couleur, var(--primary)); }
/* Neutralise la flèche Bootstrap sur la pastille dropdown */
.pastille.dropdown-toggle::after { border: none; margin-left: 0; vertical-align: unset; }
/* Couleur active des dropdowns pastille = couleur primaire de l'app */
#entete-contenu-texte-adapte .dropdown-menu {
--bs-dropdown-link-active-bg: var(--app-couleur);
}
/* Switch retours à la ligne — couleur primaire de l'app */
#modale-config .form-check-input:checked {
background-color: var(--app-couleur, #d0653a);
border-color: var(--app-couleur, #d0653a);
}
/* Bouton police/interligne actif dans l'offcanvas — fond plein (pattern e-lixir) */
#modale-config .btn.item-actif {
background-color: var(--app-couleur, #d0653a);
border-color: var(--app-couleur, #d0653a);
color: #fff;
}
/* Coche d'état dans les dropdowns police et interligne */
.police-check,
.interligne-check { width: 1em; visibility: hidden; }
.police-check.active,
.interligne-check.active { visibility: visible; }
/* Interligne de lecture */
#texte-adapte.interligne-15,
#texte-adapte.interligne-15 * { line-height: 1.5 !important; }
#texte-adapte.interligne-20,
#texte-adapte.interligne-20 * { line-height: 2.0 !important; }
#texte-adapte.interligne-25,
#texte-adapte.interligne-25 * { line-height: 2.5 !important; }
#texte-adapte.interligne-30,
#texte-adapte.interligne-30 * { line-height: 3.0 !important; }
/* Rangée de boutons d'action — largeur égale et texte centré */
.actions { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1rem }
.actions > .btn { flex: 1 1 0; justify-content: center }
/* ================================================================
Modal éditeur de profils Blockly
================================================================ */
.editeur-toolbar {
flex-shrink: 0;
background: var(--bs-body-bg);
min-height: 42px;
}
/* Bouton sélecteur de profil — nom tronqué si trop long */
.editeur-btn-profil {
max-width: 200px;
}
#editeur-nom-profil {
display: inline-block;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.editeur-modal-body {
display: flex;
overflow: hidden;
height: 65vh;
min-height: 400px;
}
/* Zone Blockly — prend tout l'espace restant */
#blockly_l {
background-color: white;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
#divBody {
flex: 1 1 auto;
position: relative;
overflow: hidden;
min-height: 0;
}
#blocklyDiv {
position: absolute;
inset: 0;
}
#content_code {
display: none;
font-size: 16px;
position: absolute;
border: 1px solid gray;
inset: 5px;
}
/* Séparateur redimensionnable */
.editeur-resizer {
flex: 0 0 6px;
background: var(--bs-border-color);
cursor: col-resize;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
user-select: none;
}
.editeur-resizer:hover { background: #3498db; }
.editeur-resizer-toggle {
position: absolute;
top: 8px;
width: 18px;
height: 32px;
padding: 0;
border: 1px solid var(--bs-border-color);
border-radius: 3px;
background: var(--bs-body-bg);
color: var(--bs-body-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
z-index: 1;
}
.editeur-resizer-toggle:hover { background: #3498db; color: #fff; border-color: #3498db; }
/* Zone aperçu — largeur fixe, imperméable au contenu */
.demo_zone {
flex: 0 0 20%;
padding: 5px;
overflow-x: hidden;
overflow-y: auto;
}
.demo_zone.editeur-demo-cache { display: none; }
.demo_zone h2 {
margin-top: 10px;
font-size: 1.1rem;
text-align: center;
}
/* Toolbox Blockly */
.blocklyToolboxDiv { background-color: #fff !important; opacity: 0.85; }
.blocklyTreeRow { height: 30px !important; line-height: 30px !important; }
/* Scrollbars Blockly */
.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle { fill: #888; }
.blocklyScrollbarBackground:hover + .blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover,
.blocklyFlyout .blocklyScrollbarBackground:hover + .blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover { fill: #555; }
/* ── Alertes (notifications temporaires) ─────────────────────────────── */
#zone-alertes {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
z-index: 1000; width: auto; max-width: 90%;
}
#zone-alertes .alert {
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
font-weight: 600; font-size: 0.95em;
white-space: nowrap; padding: 12px 40px 12px 24px;
}