/* Ecran de chargement plein ecran (voir templates/editor/_ecran_chargement.html pour le
markup/le JS de retrait) — demande explicite ("ça prend du temps avant d'afficher les
elements... on peut faire une sorte de splash avec le logo et Belsékens, jolie et
moderne"). z-index volontairement bien AU-DESSUS du plafond le plus haut deja utilise
ailleurs dans ce fichier (2400, .courbe-table-assistant-overlay) : cet ecran doit
toujours gagner face a absolument tout, meme si le filet de securite (retrait de
secours a 8s, voir le partial) venait a coincider avec une modale quelconque deja
ouverte au moment ou canvas.js echoue. */
.editor-splash {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 42%, var(--color-surface) 0%, var(--color-bg) 72%);
transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* Ajoutee par window.hideEditorSplash() une fois le rendu initial reellement peint —
opacity/visibility plutot qu'un simple display:none, pour un fondu de sortie plutot
qu'une coupure brutale ("jolie et moderne" pris au serieux jusque dans la disparition,
pas seulement l'apparition). pointer-events:none des le debut du fondu : sans lui, cet
overlay plein ecran resterait cliquable (donc bloquant) pendant toute la duree de la
transition. */
.editor-splash--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.editor-splash__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
/* Entree en fondu/leger glissement — rien a voir avec le retrait ci-dessus (celui-la
tourne UNE fois, au premier paint ; celle-ci ne rejoue jamais). */
animation: editor-splash-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Le fichier SVG (deja utilise tel quel sur la page d'accueil, voir templates/accounts/
home.html:.lp-logo) contient DEJA icone + logotype "Belsékens" dessine a la main dans
le meme graphique — inutile d'ajouter un texte separe a cote, ce serait redondant avec
ce que le SVG affiche deja. */
.editor-splash__logo {
width: 230px;
height: auto;
display: block;
/* Respiration douce plutot qu'un rotate/spin classique — plus sobre, coherent avec
l'identite "maison de luxe" du reste de l'editeur (voir tokens.css), jamais un
spinner generique. */
animation: editor-splash-pulse 2s ease-in-out infinite;
}
/* Barre de progression INDETERMINEE (un segment qui glisse, jamais un vrai pourcentage) —
meme parti pris deja documente ailleurs dans ce projet pour l'overlay d'export PDF :
rien ne rapporte d'avancement reel etape par etape ici non plus, un pourcentage inventé
mentirait. Seul signal honnete : "quelque chose est en cours". */
.editor-splash__bar {
width: 130px;
height: 3px;
border-radius: var(--radius-pill);
background: var(--color-border);
overflow: hidden;
}
.editor-splash__bar span {
display: block;
height: 100%;
width: 42%;
border-radius: var(--radius-pill);
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
animation: editor-splash-slide 1.35s ease-in-out infinite;
}
@keyframes editor-splash-in {
from { opacity: 0; transform: translateY(10px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes editor-splash-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes editor-splash-slide {
0% { transform: translateX(-130%); }
100% { transform: translateX(340%); }
}
/* Colonne fixe des blocs a ajouter : icones seules (plus de place, plus sobre),
le nom apparait au survol dans une etiquette custom (pas l'infobulle native
du navigateur, pour rester dans le registre visuel "maison de luxe"). */
/* Retour client direct : 26 boutons en une seule colonne verticale finissaient par
devenir inaccessibles sans defiler. Regroupes desormais en familles (voir
.editor-sidebar__group ci-dessous et templates/editor/editor.html) affichees en
grille — largeur elargie 64px -> 160px pour caser 3 boutons/ligne (40px chacun) sans
les compresser. Toute la propagation de cette nouvelle largeur (margin-left des 4
elements qui la compensent, repli JS du controle de zoom) est documentee a cote de
chacune de ces regles plus bas dans ce fichier — jamais une seule source de verite
partagee, meme duplication assumee que celle deja en place avant ce changement. */
.editor-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 60;
width: 160px;
display: flex;
flex-direction: column;
gap: 0;
padding: var(--space-3) 0;
background: var(--color-surface);
border-right: 1px solid var(--color-border);
/* Retour direct : "le sidebar... les boutons en bas ne sont pas visibles pour
certaines hauteurs d'écran" — la colonne n'a jamais eu de defilement, seulement
top:0/bottom:0 (donc une hauteur BORNEE par la fenetre) sans overflow declare :
chaque nouveau bouton "Ajouter un bloc" au fil des sessions a fini par depasser du
bas, sans aucun moyen d'y acceder sur un ecran assez court. Meme defilette fine que
.page-thumbnails/.block-style-panel__body — un style "moderne", pas la barre de
defilement brute du navigateur. Gardee en filet de securite meme apres le passage
en grille par familles (la grille tient sans defiler sur l'immense majorite des
resolutions desktop, mais un ecran tres court ou un zoom navigateur eleve peut
encore la faire deborder). */
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
/* Une famille de blocs (voir templates/editor/editor.html) : ses boutons en grille
(flex-wrap, jamais display:grid — reste coherent avec le reste de cette colonne, deja
en flex avant ce changement), 3 par ligne a la largeur actuelle de la colonne. Un trait
fin separe chaque famille de la precedente (jamais de titre en texte — "on garde juste
les icones, et au survol on voit le titre" confirme explicitement pour les boutons
eux-memes, un titre de famille en plus n'a pas ete demande). */
.editor-sidebar__group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-2);
}
.editor-sidebar__group:not(:first-child) {
border-top: 1px solid var(--color-border);
}
.editor-sidebar::-webkit-scrollbar {
width: 4px;
}
.editor-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.editor-sidebar::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-pill);
}
.editor-sidebar__btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-size: 16px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
/* Bug reel trouve en verifiant le correctif de defilement ci-dessus (overflow-y:auto
sur .editor-sidebar) : sans ceci, un flex-item conserve par defaut flex-shrink:1 —
des que le nombre de boutons depasse la hauteur disponible, le navigateur les
COMPRIME tous uniformement (mesure directement : 40px -> ~21px) plutot que de
laisser deborder le conteneur, ce qui annule silencieusement tout effet de
overflow-y:auto (rien ne deborde jamais, donc rien ne defile jamais). flex-shrink:0
force chaque bouton a garder sa taille reelle, ce qui est precisement ce qui fait
deborder la colonne et declenche enfin le defilement attendu. */
flex-shrink: 0;
}
.editor-sidebar__btn:hover {
background: var(--color-surface-alt);
border-color: var(--color-border);
color: var(--color-accent);
}
.editor-sidebar__btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.editor-sidebar__btn:disabled:hover {
background: transparent;
border-color: transparent;
color: var(--color-text);
}
/* Ancien mecanisme (position:absolute; left:100%, revele au survol via opacity) —
remplace par une infobulle flottante partagee, .sidebar-tooltip ci-dessous. Root
cause du bug retour direct ("quand on hover le titre affiche (mais masque) ça
aggrandit la largeur") : .editor-sidebar a du overflow-y:auto (voir son propre
commentaire, ajoute pour son propre defilement vertical) — la regle CSS Overflow
"overflow-x devient auto des que overflow-x est visible mais overflow-y ne l'est
pas" s'applique alors SILENCIEUSEMENT, sans qu'aucune ligne de ce fichier ne
declare explicitement overflow-x. Consequence mesuree directement (pas supposee) :
.editor-sidebar reste bien a 64px de LARGEUR CSS, mais sa largeur SCROLLABLE
(scrollWidth) grimpe a 240px des qu'une etiquette existe dans le DOM (meme a
opacity:0, un enfant position:absolute contribue quand meme a la zone de
defilement de son ancetre le plus proche qui defile) — et le morceau d'etiquette
qui deborde du bord droit (x=64) est litteralement clippe par ce meme
overflow-x:auto, d'ou "affiche mais masque". Aucune combinaison purement CSS ne
permet a un enfant de s'echapper d'un ancetre qui defile sur un axe sans etre
lui-meme clippe sur l'autre (regle du spec, s'applique meme si overflow-x est
explicitement force a "visible" — le navigateur re-promeut quand meme) : seul un
element position:fixed, positionne via JS (voir canvas.js:sidebarTooltip),
echappe reellement a ce clipping. Les spans .editor-sidebar__label restent dans
le DOM (une par bouton, deja presentes en HTML) comme simple SOURCE DE TEXTE pour
ce nouveau mecanisme — jamais affichees elles-memes. */
.editor-sidebar__label {
display: none;
}
/* Infobulle flottante PARTAGEE (une seule instance, deplacee/remplie par JS au
survol de chaque bouton) — voir canvas.js pour la creation/le remplissage.
position:fixed + ajoutee a document.body : echappe totalement au clipping/scroll
de .editor-sidebar (voir le commentaire ci-dessus), donc sa propre largeur ne
peut plus jamais influencer celle de la colonne. z-index volontairement le plus
eleve de toute l'app (demande explicite, "le titre doit s'afficher avec le
z-index le plus grand") — largement au-dessus des modales (500) et des menus
deroulants de la barre d'outils (460/461), le plafond le plus haut deja utilise
ailleurs dans ce fichier. */
.sidebar-tooltip {
position: fixed;
transform: translateY(-50%);
background: var(--color-primary);
color: var(--color-surface);
padding: 5px 10px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
white-space: nowrap;
pointer-events: none;
z-index: 9999;
display: none;
}
.sidebar-tooltip--visible {
display: block;
}
.editor-toolbar {
position: sticky;
top: 0;
z-index: 50;
/* 160px, pas 64px : compense la sidebar elargie en familles (voir .editor-sidebar
plus haut) — meme decalage que .editor-import-banner/.editor-formatbar/
.editor-workspace ci-dessous, aucune source de verite partagee (duplication deja
assumee avant ce changement, juste 4 valeurs a tenir a jour au lieu d'une). */
margin-left: 160px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: var(--space-2) var(--space-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
/* Bug reel signale : un menu .editor-toolbar__dropdown-menu OUVERT (z-index:460, voir plus
bas) peut peindre DERRIERE .editor-formatbar (la barre de mise en forme riche juste en
dessous, "le toolbar secondaire") — piege de contexte d'empilement CSS, deja rencontre
plusieurs fois dans ce fichier (voir le modal du bloc graphique, le panneau du bloc
code...) : .editor-toolbar est lui-meme position:sticky + z-index:50 explicite, donc
etablit SON PROPRE contexte d'empilement — un descendant comme le menu deroulant, meme
avec un z-index nominal de 460, n'est jamais compare qu'A L'INTERIEUR de ce contexte ; au
niveau racine, c'est le z-index de .editor-toolbar LUI-MEME (50) qui compte face a un
AUTRE element du document. Or .editor-formatbar est aussi position:sticky + z-index:50
(memes valeurs, egalite parfaite) et vient APRES .editor-toolbar dans le DOM ("toujours
presente... comme le ruban Word/LibreOffice") — a z-index egal, l'ordre source depart
age, et l'element le plus tardif peint par-dessus : .editor-formatbar gagne toujours ce
duel, quel que soit le z-index interne du menu ouvert dans .editor-toolbar.
Corrige en relevant le z-index de .editor-toolbar LUI-MEME (pas seulement le menu) des
qu'il contient un dropdown ouvert — :has() re-evalue automatiquement a chaque
ouverture/fermeture (voir canvas.js:closeAllToolbarDropdowns/toggle), aucun JS
supplementaire necessaire. 461 : juste au-dessus du z-index local du menu (460, garde
une numerotation coherente) et toujours strictement sous les overlays modaux (500), pour
qu'un dropdown reste toujours au-dessus de .editor-formatbar SANS jamais passer devant
une vraie fenetre modale (Palette/Gabarit...) qui pourrait s'ouvrir depuis ce meme menu. */
.editor-toolbar:has(.editor-toolbar__dropdown--open) {
z-index: 461;
}
/* Bandeau "mode import" (voir canvas.js:IMPORT_MODE, editor.html) — full-width juste sous
.editor-toolbar, meme decalage de sidebar (margin-left:64px).
position:sticky, revenu sur un choix precedent qui le laissait defiler avec la page
("purement informatif, pas besoin de rester visible") — demande directe : "le bandeau
avec les boutons Annuler/Importer doit rester fixe." En pratique, chercher un bloc a
importer implique souvent de defiler un document source LONG, et sans ce bandeau
visible en permanence, valider (ou annuler) l'import demandait de remonter tout en
haut a chaque fois — friction reelle, pas seulement esthetique.
top: 0 ici n'est qu'un REPLI (avant que le JS ci-dessous n'ait tourne) — la vraie valeur
est ecrite en style inline par canvas.js:positionImportBanner(), egale a la hauteur
REELLE rendue de .editor-toolbar (getBoundingClientRect(), pas une valeur fixe codee en
dur, fragile au premier changement futur de la hauteur de la barre d'outils). .editor-
formatbar juste en dessous (voir son propre `top:0` plus bas dans ce fichier, meme repli)
est repositionne separement par sa PROPRE fonction, formatBar.js:positionBar() — ce
fichier et formatBar.js restent deliberement decouples l'un de l'autre (aucune
dependance croisee, voir l'en-tete de formatBar.js), donc chacun gere son propre
bandeau plutot qu'une seule fonction partagee gerant les 3 a la fois.
z-index:452, memes raisons que .editor-formatbar (voir plus bas) : desormais sticky, ce
bandeau peut avoir du contenu de page (un bloc en .block--editing a 400, un guide
d'alignement/lasso a 450) qui defile EN DESSOUS de lui — sans un z-index explicite
superieur a ces deux valeurs, ce contenu pourrait visuellement le traverser. */
.editor-import-banner {
position: sticky;
top: 0;
z-index: 452;
margin-left: 160px;
background: var(--color-accent);
color: var(--color-surface);
padding: var(--space-2) var(--space-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
font-family: var(--font-body);
font-size: 14px;
}
.editor-import-banner__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
/* .btn--quiet ("Annuler") suppose d'habitude un fond clair (--color-muted, un gris
discret) — illisible sur le fond dore de ce bandeau. Reglage local plutot que toucher
.btn--quiet lui-meme (utilise partout ailleurs sur fond clair, ou il reste correct). */
.editor-import-banner__actions .btn--quiet {
color: var(--color-surface);
border-color: rgba(255, 255, 255, 0.5);
}
.editor-import-banner__actions .btn--quiet:hover {
background: rgba(255, 255, 255, 0.15);
color: var(--color-surface);
}
.editor-toolbar__title {
font-family: var(--font-display);
font-size: 18px;
color: var(--color-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Sans ca, cet element (flex-item de .editor-toolbar, display:flex) garde son
min-width:auto par defaut, qui l'empeche de retrecir en dessous de la largeur
intrinseque de son propre texte — meme classe de bug deja documentee ailleurs
dans ce fichier/CLAUDE.md pour d'autres flex-items tronques (overflow:hidden +
text-overflow:ellipsis seuls ne suffisent jamais dans un contexte flex). Un titre
d'activite normal reste rarement assez long pour le reveler, mais l'editeur de
modele (bandeau "Modele" + nom du modele, voir editeur_modele.html) le declenchait
systematiquement des qu'un nom de modele etait un peu long : la barre d'outils
entiere, et donc toute la page, debordait horizontalement. */
min-width: 0;
}
.editor-toolbar__group {
display: flex;
gap: 6px;
align-items: center;
}
.editor-toolbar__sep {
width: 1px;
height: 24px;
background: var(--color-border);
margin: 0 4px;
}
/* ---- Menus deroulants de la barre principale — regroupement par ROLE (Grouper/Aligner/
Calque/Mise en page/Document), demande explicite ("la barre en haut est chargée et ça
depasse l'ecran... regrouper les elements en fonction de leur role, masques, affiches en
cliquant"). Meme patron exact que .editor-formatbar__dropdown (barre de mise en forme,
deja etabli plus bas dans ce fichier) : un bouton [data-tb-toggle] bascule une classe
--open sur le wrapper, jamais un second mecanisme invente pour l'occasion — seul le
prefixe de classe change (tb au lieu de dd) pour rester dans l'espace de noms de CETTE
barre plutot que celui du format bar, deux fichiers/contextes independants. ---- */
.editor-toolbar__dropdown {
position: relative;
}
.editor-toolbar__dropdown-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-family: var(--font-body);
font-size: 13px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.editor-toolbar__dropdown-btn:hover,
.editor-toolbar__dropdown--open > .editor-toolbar__dropdown-btn {
background: var(--color-surface-alt);
border-color: var(--color-border);
color: var(--color-accent);
}
.editor-toolbar__dropdown-caret {
font-size: 9px;
color: var(--color-muted);
}
.editor-toolbar__dropdown-menu {
display: none;
flex-direction: column;
gap: 2px;
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 220px;
max-height: calc(100vh - 80px);
overflow-y: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 16px 40px -12px rgba(32, 30, 27, 0.35);
padding: 6px;
/* Au-dessus de .block--editing (400, voir plus bas) : un menu ouvert pres du bord de la
page ne doit jamais se retrouver sous un bloc en cours d'edition. Sous les overlays
modaux (500, ex. Palette/Gabarit ouverts DEPUIS ce menu) — ordre d'empilement normal,
le menu se ferme de toute facon des qu'un de ces boutons est actionne (voir
canvas.js). */
z-index: 460;
}
.editor-toolbar__dropdown--open > .editor-toolbar__dropdown-menu {
display: flex;
}
/* Bascule d'ancrage gauche->droite, appliquee dynamiquement en JS (canvas.js) au moment de
l'ouverture — bug reel signale : le menu "Document", pres du bord droit de la barre
(juste avant "Retour"), s'ouvrait avec son bord gauche cale sur celui du bouton
(left:0), poussant son bord droit au-dela de la fenetre et forcant un defilement
horizontal disgracieux sur toute la page. Un `overflow-x:hidden` global aurait cache le
symptome sans le corriger (le menu resterait partiellement hors-champ, juste invisible
au lieu de scrollable) — le vrai correctif est de ne jamais laisser le menu depasser,
pas de masquer le depassement. `left:auto; right:0` fait pivoter l'ancrage sur le bord
DROIT du bouton, donc le menu s'etend vers la gauche au lieu de la droite — exactement
"vers la gauche sans depasser". Fonctionne pour n'importe quel dropdown, pas seulement
"Document" : la detection cote JS mesure le debordement reel au moment de l'ouverture,
plutot que de coder en dur "le dernier dropdown est toujours a droite" (resterait
correct meme si un futur dropdown est ajoute/retire ou si la largeur de fenetre change). */
.editor-toolbar__dropdown-menu--right {
left: auto;
right: 0;
}
/* A l'interieur d'un menu deroulant, un .editor-toolbar__icon-btn redevient une rangee
normale (icone + libelle VISIBLE en ligne, aligne a gauche) plutot qu'un petit carre
avec etiquette-info-bulle au survol comme dans la barre elle-meme — la place n'est plus
contrainte a l'interieur d'un menu vertical, autant montrer le texte directement. */
.editor-toolbar__dropdown-menu .editor-toolbar__icon-btn {
width: 100%;
height: auto;
justify-content: flex-start;
gap: 10px;
padding: 8px 10px;
}
.editor-toolbar__dropdown-menu .editor-toolbar__icon-label {
position: static;
transform: none;
background: none;
color: inherit;
padding: 0;
opacity: 1;
font-size: 13px;
white-space: nowrap;
}
/* Champ "Espacement fixe" (voir canvas.js:applyFixedSpacing) — separee visuellement des
boutons Aligner/Repartir juste au-dessus par un fin trait, meme famille d'input que le
reste de l'app (bordure/rayon standard) mais volontairement compacte : c'est une valeur
unique partagee par les deux boutons "Appliquer horizontalement/verticalement" juste en
dessous, pas un reglage independant par bouton. */
.editor-toolbar__spacing-row {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px 4px;
margin-top: 4px;
border-top: 1px solid var(--color-border);
}
.editor-toolbar__spacing-label {
font-size: 12px;
color: var(--color-muted);
white-space: nowrap;
}
.editor-toolbar__spacing-input {
width: 56px;
padding: 4px 6px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
text-align: right;
font-family: var(--font-body);
color: var(--color-text);
}
.editor-toolbar__spacing-input:disabled {
opacity: 0.4;
}
.editor-toolbar__spacing-unit {
font-size: 12px;
color: var(--color-muted);
}
/* Deuxieme ligne "Hauteur" du bloc redimensionner (voir canvas.js:matchSize) — reutilise
.editor-toolbar__spacing-row a l'identique (meme layout flex), sans le trait de
separation superieur : la ligne "Largeur" juste au-dessus a deja sa propre bordure
marquant le debut de cette section, une deuxieme juste en dessous ferait doublon. */
.editor-toolbar__spacing-row--noborder {
border-top: none;
margin-top: 0;
padding-top: 2px;
}
/* Boutons "Mini"/"Maxi" du bloc redimensionner — compacts, cote a cote dans la meme ligne
que leur label (contrairement aux boutons Aligner/Repartir/Espacement au-dessus, qui
occupent chacun toute la largeur du menu) : ce sont deux variantes d'une meme action
(largeur/hauteur), pas deux actions independantes meritant chacune sa propre rangee. */
.editor-toolbar__mini-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-family: var(--font-body);
font-size: 12px;
cursor: pointer;
}
.editor-toolbar__mini-btn:hover {
background: var(--color-surface-alt);
border-color: var(--color-border);
color: var(--color-accent);
}
.editor-toolbar__mini-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.editor-toolbar__mini-btn:disabled:hover {
background: transparent;
color: var(--color-text);
}
/* Actions du bandeau superieur : meme registre que .editor-sidebar__btn (icone seule,
etiquette custom au survol) plutot que des boutons texte — la barre a fini par manquer
de place au fil des ajouts (bascule de mode, etc.). L'etiquette s'affiche en dessous
(pas a droite comme la sidebar, verticale elle) pour ne jamais deborder hors de l'ecran
sur les boutons les plus a droite (Export PDF, Retour). */
.editor-toolbar__icon-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.editor-toolbar__icon-btn:hover {
background: var(--color-surface-alt);
border-color: var(--color-border);
color: var(--color-accent);
}
.editor-toolbar__icon-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.editor-toolbar__icon-btn:disabled:hover {
background: transparent;
border-color: transparent;
color: var(--color-text);
}
.editor-toolbar__icon-btn--danger {
color: var(--color-danger);
}
.editor-toolbar__icon-btn--danger:hover {
background: var(--color-danger);
border-color: var(--color-danger);
color: var(--color-surface);
}
.editor-toolbar__icon-btn--primary {
background: var(--color-primary);
color: var(--color-surface);
}
.editor-toolbar__icon-btn--primary:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-surface);
opacity: 0.85;
}
/* Boutons "aligner en haut/centrer vertical/en bas" (voir editor.html) : reutilisent les
memes icones fa-align-left/-center/-right que leurs equivalents horizontaux, tournees a
90° — Font Awesome Free n'a pas d'icone dediee pour un alignement vertical d'OBJETS
(seulement pour du texte). Seul l'icone tourne, jamais le bouton entier — le libelle
au survol (.editor-toolbar__icon-label) doit rester lisible normalement. */
.editor-toolbar__icon-btn--rotated i {
transform: rotate(90deg);
}
/* Controle de zoom du canevas (voir editor.html/canvas.js:setZoom) — trois elements en
ligne (- / pourcentage / +), meme gabarit que les boutons icone voisins pour les deux
boutons +/- ; le pourcentage central est lui-meme un bouton (clic = retour a 100%),
pas juste un texte statique. */
/* Sorti de la barre d'outils (demande explicite : "le zoom tu le places sur le meme axe...
mais en bas de l'ecran") — flotte desormais en position:fixed au bas de la zone
d'edition, horizontalement centre sur la meme colonne que le canevas lui-meme (calc()
ci-dessous compense le meme decalage de 64px reserve a la sidebar que .editor-toolbar/
.editor-workspace utilisent deja, pour rester centre sur l'espace REELLEMENT disponible,
pas sur toute la largeur de l'ecran sidebar comprise). Meme registre visuel (fond blanc,
bordure, ombre) que les autres controles flottants de ce fichier (.page-thumbnails-
toggle) plutot qu'invente a part. */
.editor-zoom-control {
position: fixed;
/* `left` n'est plus un calc() centre sur la zone d'edition — bug reel signale : centre
sous la page, le controle finissait PILE sur des blocs places en bas de page,
masquant leur contenu. Repositionne HORS de la page, a droite, avec une marge de
20px depuis son propre bord droit — demande explicite ("le zoom doit sortir de la
page... place le a droite a une marge de 20px de la page"). La largeur de la page
change avec le zoom (transform:scale() sur .page-sheet) et sa position horizontale
depend de la largeur de fenetre — aucune formule CSS statique ne peut donc suivre ce
bord de façon fiable ; `left` est recalcule en JS (canvas.js:positionZoomControl,
appele depuis applyZoom() a chaque changement de zoom/page/redimensionnement de
fenetre) a partir de la vraie position ecran de la page (getBoundingClientRect()) +
20px, avec une valeur de repli ici pour le tout premier rendu avant que ce calcul JS
n'ait tourne une premiere fois. */
left: calc(160px + (100vw - 160px) / 2 + 397px + 20px);
bottom: 20px;
display: flex;
align-items: center;
gap: 2px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 3px;
box-shadow: 0 12px 32px -12px rgba(32, 30, 27, 0.4);
z-index: 60;
}
.editor-zoom-control .editor-toolbar__icon-btn {
width: 28px;
height: 28px;
border: none;
border-radius: 50%;
}
.editor-zoom-control__label {
min-width: 44px;
text-align: center;
font-size: 12px;
font-family: var(--font-body);
color: var(--color-text);
background: transparent;
border: none;
cursor: pointer;
padding: 4px 2px;
border-radius: var(--radius-sm);
}
.editor-zoom-control__label:hover {
background: var(--color-surface-alt);
color: var(--color-accent);
}
.editor-toolbar__icon-label {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--color-primary);
color: var(--color-surface);
padding: 5px 10px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 70;
}
.editor-toolbar__icon-btn:hover .editor-toolbar__icon-label {
opacity: 1;
}
/* Bascule Edition / Cours : le mode "cours" simule ce que verrait un eleve — voir
canvas.js (variable `mode`) pour la logique de restriction (pas de glisser/depot, pas
d'ajout de bloc/page, seuls les blocs reponse/mindmap restent interactifs). */
.editor-mode-switch {
padding: 3px;
background: var(--color-surface-alt);
border-radius: var(--radius-pill);
gap: 0;
}
.editor-mode-switch__option {
position: relative;
display: flex;
align-items: center;
padding: 6px 14px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-muted);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.editor-mode-switch__option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.editor-mode-switch__option:has(input:checked) {
background: var(--color-surface);
color: var(--color-primary);
box-shadow: 0 1px 3px rgba(32, 30, 27, 0.15);
}
/* Badge statique remplaçant la bascule quand le mode est impose par le serveur (copie
verrouillee issue d'un partage, ou consultation en lecture seule) — jamais de radio
pour en sortir, voir editor.html : {% if lecture_seule %}/{% elif activite.mode_verrouille %}. */
.editor-mode-switch__option--locked {
padding: 6px 14px;
color: var(--color-muted);
cursor: default;
gap: 6px;
}
/* ---- Barre de mise en forme riche ---- */
/* Toujours presente et occupe toujours sa hauteur (comme le ruban Word/LibreOffice) :
ne bascule jamais entre display:none et display:flex, pour ne jamais decaler le
canvas en dessous quand on entre/sort d'un champ riche — seul son etat actif/grise
change au focus, voir formatBar.js. position: sticky avec un top mesure en JS
(hauteur reelle de .editor-toolbar) pour rester juste en dessous du header fixe, jamais
superposee, meme si le titre de l'activite fait retomber le header sur deux lignes.
z-index releve a 452 — bug reel signale, au passage de la correction du dropdown
ci-dessus : cette barre (comme .editor-toolbar) n'etablit son propre contexte
d'empilement que via sa propre valeur de z-index, jamais celle d'un descendant ; a
l'ancien 50, un bloc en cours d'edition (.block--editing, z-index:400) ou les guides
d'alignement/lasso (450) — aucun des deux pieges dans un contexte d'empilement
intermediaire a 100% de zoom, voir .page-sheet/.editor-workspace, ni position ni
z-index propre — pouvaient peindre PAR-DESSUS cette barre sticky des que leur position
ecran chevauchait la sienne en scrollant. 452 : juste au-dessus du plus haut palier de
contenu de page "ordinaire" (450), et reste sous .editor-toolbar quand un dropdown y est
ouvert (461, voir plus haut) — cette barre ne doit jamais repasser devant un menu
deroulant qui, lui, s'etend visuellement par-dessus elle. */
.editor-formatbar {
display: flex;
position: sticky;
top: 0;
z-index: 452;
margin-left: 160px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: var(--space-2) var(--space-4);
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
}
/* Etat "aucun champ riche actif" — bug reel signale, meme temps que le z-index ci-dessus :
l'ancienne regle mettait opacity:0.4 sur LE CONTENEUR entier, ce qui rendait aussi son
propre fond (background:var(--color-surface)) semi-transparent — laissant deviner par
transparence tout ce qui defile en dessous (canevas/blocs), au lieu d'un vrai fond blanc
opaque comme le reste du chrome de l'editeur. Le fond doit rester plein en permanence,
que du texte soit selectionne ou non — seuls les CONTROLES a l'interieur (icones/boutons/
selects) doivent paraitre grises/inactifs. Fixe en deplacant l'opacite du conteneur vers
ses enfants directs : le conteneur (fond + bordure) reste toujours 100% opaque, seuls
.editor-formatbar__group/__sep (les elements visibles a l'interieur) recoivent le
grisage. pointer-events:none reste sur le conteneur — desactiver l'interaction n'a pas
besoin d'etre applique enfant par enfant, contrairement au fond visuel. */
.editor-formatbar--disabled {
pointer-events: none;
}
.editor-formatbar--disabled > * {
opacity: 0.4;
transition: opacity 0.15s ease;
}
/* Exception au grisage/desactivation ci-dessus : le CTA "Export PDF" (voir editor.html,
fin de #formatbar) n'a, contrairement a gras/couleur/alignement/etc., aucun besoin
d'une selection de texte active pour avoir un sens — il doit rester plein et cliquable
MEME quand aucun champ n'est selectionne, c'est-a-dire la plupart du temps. Plus
specifique (deux classes) que la regle generique juste au-dessus (une classe +
universel) : gagne par specificite, ordre non pertinent. pointer-events:auto
contre-carre le pointer-events:none pose sur le conteneur .editor-formatbar--disabled
lui-meme (heritee par tout descendant sauf reactivation explicite comme ici). */
.editor-formatbar--disabled > .editor-formatbar__cta {
opacity: 1;
pointer-events: auto;
}
.editor-formatbar__group {
display: flex;
gap: 6px;
align-items: center;
}
.editor-formatbar__sep {
width: 1px;
height: 24px;
background: var(--color-border);
margin: 0 4px;
}
.editor-formatbar__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font-size: 12px;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.editor-formatbar__btn:hover {
background: var(--color-surface-alt);
}
.editor-formatbar__btn--active {
background: var(--color-accent-soft);
border-color: var(--color-accent);
color: var(--color-accent);
}
.editor-formatbar__btn--disabled {
opacity: 0.35;
}
/* Bouton "ABC" (majuscules) : meme gabarit que gras/italique/souligne, mais une
etiquette texte plutot qu'une icone Font Awesome — precedent deja etabli par le
bouton "∑" (compilation LaTeX) present sur plusieurs blocs. */
.editor-formatbar__btn--text {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
}
.editor-formatbar__dropdown {
position: relative;
}
.editor-formatbar__dropdown-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font-family: var(--font-body);
font-size: 12px;
}
.editor-formatbar__dropdown-btn:hover {
background: var(--color-surface-alt);
}
.editor-formatbar__dropdown-btn i {
font-size: 9px;
color: var(--color-muted);
}
/* CTA "Export PDF" (voir editor.html) — demande explicite : "bien visible un vrai CTA.
Sans vraiment casser le visuel existant". Meme gabarit/hauteur (30px) que les autres
controles de cette barre (.editor-formatbar__dropdown-btn juste au-dessus), pour rester
dans le meme rythme visuel plutot que d'introduire une taille etrangere — seul le
remplissage plein (--color-accent, le meme or/dore deja utilise partout ailleurs comme
signal "special/mise en avant" : pointille de selection, titres de section, badges)
distingue ce bouton des autres, jamais reserve pour --color-primary (noir), deja le
signal exclusif d'"Enregistrer" dans la barre principale — reutiliser cette meme
couleur ici aurait dilue ce qu'elle signifie deja. margin-left:auto le pousse tout a
droite de la rangee (un flex-item avec une marge auto absorbe tout l'espace disponible
de ce cote), le separant visuellement des groupes de mise en forme sans avoir besoin
d'un .editor-formatbar__sep supplementaire. */
.editor-formatbar__cta {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 14px;
margin-left: auto;
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
background: var(--color-accent);
color: var(--color-surface);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: opacity 0.15s ease;
}
.editor-formatbar__cta:hover {
opacity: 0.85;
}
.editor-formatbar__cta:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.editor-formatbar__cta i {
font-size: 13px;
}
.editor-formatbar__menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
box-shadow: 0 8px 20px -8px rgba(32, 30, 27, 0.3);
z-index: 80;
}
.editor-formatbar__dropdown--open .editor-formatbar__menu {
display: block;
}
.editor-formatbar__menu-item {
display: block;
width: 100%;
padding: 6px 12px;
border: none;
background: transparent;
color: var(--color-text);
text-align: left;
cursor: pointer;
font-size: 13px;
white-space: nowrap;
}
.editor-formatbar__menu-item:hover {
background: var(--color-surface-alt);
}
/* Police actuellement appliquee au texte selectionne, soulignee dans le menu — retour
explicite ("on doit souligner le font-family selectionné"), meme principe que
.editor-formatbar__btn--active pour gras/italique/souligne/alignement/listes juste
au-dessus, adapte a une liste d'entrees textuelles plutot qu'a des boutons-icones
(voir formatBar.js:refreshState, qui bascule cette classe via une comparaison
normalisee sur le PREMIER nom de police de chaque pile, cf. firstFontName). */
.editor-formatbar__menu-item--active {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--color-accent);
font-weight: 600;
}
/* Auto-apercu des entrees du menu "Titre" (Normal/Titre 1-4) — meme principe que le menu
"Police" juste au-dessus (chaque entree se rend deja dans sa propre police), applique ici
a la taille/graisse plutot qu'a la famille de police : tailles reduites par rapport au
veritable rendu H1-H4 dans le canevas (voir blocks-shared.css) pour rester lisibles dans
une ligne de menu compacte, tout en gardant une hierarchie visuelle immediatement
perceptible (H1 nettement plus gros que H4) — le meme esprit que la galerie de styles de
Word/Google Docs. */
.editor-formatbar__menu-item--h1 { font-size: 20px; font-weight: 700; }
.editor-formatbar__menu-item--h2 { font-size: 18px; font-weight: 700; }
.editor-formatbar__menu-item--h3 { font-size: 16px; font-weight: 600; }
.editor-formatbar__menu-item--h4 { font-size: 14px; font-weight: 600; }
/* Intitule de groupe dans le menu "Police" (Serif/Sans-serif/Script/Monospace, voir
editor.html) — non cliquable (pas de bouton, jamais [data-font-family]), purement
visuel : bar.querySelectorAll('[data-font-family]') dans formatBar.js ne le voit donc
jamais, aucune modification JS necessaire pour l'introduire. Premier groupe sans marge
superieure (:first-child), les suivants espaces du groupe precedent par une fine
bordure plutot qu'un fond distinct — reste sobre dans un menu deja dense (35 entrees). */
.editor-formatbar__menu-heading {
padding: 8px 12px 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-muted);
border-top: 1px solid var(--color-border);
}
.editor-formatbar__menu-heading:first-child {
border-top: none;
padding-top: 8px;
}
.editor-formatbar__color-btn {
position: relative;
gap: 2px;
}
.editor-formatbar__color-swatch {
position: absolute;
bottom: 3px;
left: 6px;
right: 6px;
height: 3px;
border-radius: 1px;
background: var(--color-text);
}
.editor-formatbar__color-input {
position: absolute;
width: 0;
height: 0;
padding: 0;
border: none;
opacity: 0;
pointer-events: none;
}
/* Le menu couleur n'a pas besoin de suivre la largeur (30px) de son bouton-icone comme
.editor-formatbar__menu le fait par defaut pour police/taille — une rangee de pastilles
a besoin de sa propre largeur, generalement plus etroite qu'un menu de texte mais plus
large que le bouton lui-meme. */
.editor-formatbar__menu--color {
min-width: 0;
width: max-content;
padding: 8px;
}
/* Grille de pastilles "couleurs recentes" (voir recentColors.js:renderColorSwatches) —
classe partagee par TOUS les selecteurs de couleur de l'editeur (barre de mise en
forme, fond de cellule du tableau, et tout widget cree via
recentColors.js:createColorPickerButton — coup de pouce, icone, mindmap, graphique,
panneau de style generique), un seul jeu de regles pour tous. Grille a colonnes FIXES
(pas un simple flex-wrap) — demande explicite : reste lisible et facile a cliquer meme
si la liste s'allonge a l'usage (grandit en hauteur par lignes completes de 5, jamais
en densite/largeur ni en pastilles minuscules). */
.color-swatches {
display: grid;
grid-template-columns: repeat(5, 24px);
gap: 6px;
}
.color-swatches__item {
width: 24px;
height: 24px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
}
/* Bouton "Nouvelle couleur" : pleine largeur de la grille, sur sa propre ligne, separe
visuellement des pastilles par une bordure — jamais confondu avec une couleur recente,
contrairement a l'ancien "+" nu de meme gabarit qu'une pastille. */
.color-swatches__custom {
grid-column: 1 / -1;
margin-top: 4px;
padding: 6px 8px;
border: none;
border-top: 1px solid var(--color-border);
border-radius: 0;
background: transparent;
color: var(--color-muted);
font-size: 12px;
text-align: left;
cursor: pointer;
}
.color-swatches__custom:hover {
color: var(--color-accent);
}
.color-swatches__custom i {
margin-right: 4px;
font-size: 10px;
}
/* Saisie directe d'un code hexa (recentColors.js:renderColorSwatches) — meme registre
visuel que .color-swatches__custom juste au-dessus (pleine largeur de la grille, propre
ligne, separee par une bordure), mais un champ + un bouton plutot qu'un simple bouton. */
.color-swatches__hex-row {
grid-column: 1 / -1;
display: flex;
gap: 4px;
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid var(--color-border);
}
.color-swatches__hex-input {
flex: 1;
min-width: 0;
padding: 4px 6px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-family: monospace;
font-size: 12px;
color: var(--color-text);
background: var(--color-surface);
}
.color-swatches__hex-input:focus {
outline: none;
border-color: var(--color-accent);
}
/* Code incomplet/invalide au moment de valider — jamais applique, seulement signale
jusqu'a correction (voir confirmHex dans recentColors.js). */
.color-swatches__hex-input--invalid {
border-color: var(--color-danger);
}
.color-swatches__hex-confirm {
width: 28px;
height: 28px;
flex-shrink: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-muted);
cursor: pointer;
}
.color-swatches__hex-confirm:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* Widget de selection de couleur autonome (recentColors.js:createColorPickerButton) — le
bouton .color-picker-btn__toggle passe lui-meme par la classe fournie par l'appelant
(ex. .block-icone__color) pour son propre gabarit visuel (deja etabli avant cette
fonctionnalite), seul .color-picker-btn__menu est generique/partage ici. */
.color-picker-btn {
position: relative;
display: inline-flex;
}
/* Gabarit par defaut du bouton-pastille (24x24) — les contextes qui avaient deja leur
propre classe de taille avant ce widget (.block-icone__color 32x32,
.block-graphique__series-color 30x30...) l'ecrasent simplement via leur propre regle,
plus specifique (deux classes sur l'element). */
.color-picker-btn__toggle {
width: 24px;
height: 24px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
cursor: pointer;
}
.color-picker-btn__menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
box-shadow: 0 8px 20px -8px rgba(32, 30, 27, 0.35);
z-index: 80;
}
.color-picker-btn--open .color-picker-btn__menu {
display: block;
}
/* natif, cache — declenche uniquement par le bouton "+" du popover
(voir recentColors.js:renderColorSwatches), meme registre que
.editor-formatbar__color-input/.block-table__bg-input. */
.color-picker-btn__native {
position: absolute;
width: 0;
height: 0;
padding: 0;
border: none;
opacity: 0;
pointer-events: none;
}
.editor-workspace {
display: flex;
justify-content: center;
margin-left: 160px;
padding: var(--space-6) var(--space-3);
background: var(--color-bg);
min-height: calc(100vh - 60px);
}
.editor-pages {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
}
.page-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.page-label-row {
display: flex;
align-items: center;
gap: 6px;
}
.page-label {
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-muted);
transition: color 0.15s ease;
}
/* La page active se distingue par sa couleur d'accent — sur l'etiquette et sur
le contour de la feuille — pour qu'on sache toujours ou atterrit un nouveau
bloc, meme avec plusieurs pages a l'ecran. */
.page-wrap--active .page-label {
color: var(--color-accent);
font-weight: 600;
}
.page-delete-btn {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
background: transparent;
color: var(--color-muted);
font-size: 10px;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background 0.15s ease, color 0.15s ease;
}
.page-delete-btn:hover {
background: var(--color-danger);
color: var(--color-surface);
}
.page-delete-btn:disabled {
opacity: 0.25;
cursor: not-allowed;
background: transparent;
color: var(--color-muted);
}
.page-sheet {
position: relative;
width: var(--page-width);
height: var(--page-height);
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 24px 48px -24px rgba(32, 30, 27, 0.25);
flex-shrink: 0;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
/* Ancre tout transform:scale() (zoom manuel du canevas, voir canvas.js:applyZoom) au
coin haut-gauche plutot qu'au centre (defaut CSS) — sans cette regle, agrandir la
page la fait grandir dans les DEUX sens depuis son centre, deplacant son coin
haut-gauche vers des coordonnees NEGATIVES (confirme par mesure directe : -92.75px
en y a 150% de zoom) tout en desynchronisant screenToPagePoint (qui suppose deja
que pageRect.left/top correspondent au coin haut-gauche REEL de la page). Deja
applique ailleurs dans ce fichier pour EXACTEMENT la meme raison (voir
body.cours-actif .page-sheet et .page-thumbnail__stage .page-sheet plus bas) — cette
regle de base manquait seulement pour le cas du zoom manuel, jamais couvert par ces
deux portees existantes. Sans effet tant qu'aucun transform n'est applique (zoom a
100%), donc aucun risque de regression visuelle la ou le zoom n'est pas utilise. */
transform-origin: top left;
/* Police par defaut du contenu de page (texte/question/qcm/situation/tableau/
reponse/arbreproba...), Arial plutot que Jost — deliberement scope ici, pas dans
tokens.css:--font-body (qui reste Jost partout ailleurs : sidebar, toolbar,
tableau de bord, connexion). Deux declarations distinctes necessaires pour couvrir
les deux facons dont un bloc obtient sa police : la plupart (.block-text,
.block-question__enonce, .block-qcm__enonce, .block-situation__titre/__corps,
.block-table, .block-coupdepouce, .block-reponse__line...) n'ont AUCUN
font-family propre et heritent simplement de la propriete CSS normale — la
redeclaration ici suffit pour eux. Mais quelques champs de blocks-shared.css
(arbreproba : node/edge-label/result/level-caption) referencent explicitement
var(--font-body) au lieu d'heriter — pour eux, seule une redefinition de la
variable elle-meme (qui se resout a l'usage, plus bas dans cet arbre DOM) les
fait suivre le meme changement ; sans elle ils resteraient figes sur la valeur
Jost du :root. Le titre de l'activite (var(--font-display), Playfair) n'est
delibirement pas touche par aucune des deux — seul le corps de texte change. Le
menu "Police" de la barre de mise en forme ne lit plus var(--font-body) pour son
entree "Jost (texte)" (voir editor.html) precisement a cause de cette
redefinition : sinon choisir "Jost" dans le menu appliquerait Arial par la meme
variable qu'on vient de detourner ici. */
font-family: Arial, Helvetica, sans-serif;
--font-body: Arial, Helvetica, sans-serif;
}
/* Masquee a l'ecran : .page-label (page-wrap) fait deja office de navigation. Revelee
uniquement sous @media print (voir print.css), qui porte tout le style visuel — la
meme pastille "n / total" que export_pdf.html:.page-number-print, pour que
l'impression directe (bouton "Imprimer") et le PDF exporte se ressemblent. */
.page-number-print-only {
display: none;
}
.page-wrap--active .page-sheet {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px var(--color-accent), 0 24px 48px -24px rgba(32, 30, 27, 0.25);
}
/* Repere de marge (8mm) : invisible au repos, revele seulement pendant un
glisser/redimensionnement pour guider le placement sans encombrer la page
le reste du temps. En arriere-plan (ajoute avant les blocs) et insensible
aux clics pour ne jamais gener l'interaction avec le contenu. */
.page-margin-guide {
position: absolute;
top: var(--page-margin);
right: var(--page-margin);
bottom: var(--page-margin);
left: var(--page-margin);
border: 1px dashed var(--color-accent);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
}
.page-margin-guide--visible {
opacity: 1;
}
/* Bande reservee en-tete/pied de page (voir canvas.js:HEADER_HEIGHT/FOOTER_HEIGHT et
renderEnteteEtPiedDePage) — purement indicative, jamais une contrainte physique dure
(meme philosophie que .page-margin-guide juste au-dessus : rien n'empeche physiquement
un bloc normal de la chevaucher). Cree une fois par page (createPage()), jamais recree —
seulement bascule visible/invisible selon entete.actif/piedDePage.actif. Contrairement a
.page-margin-guide (visible uniquement pendant un glisser en cours), reste affichee en
PERMANENCE tant que l'en-tete/pied de page est actif — un rappel discret et continu de
la zone reservee, pas un simple feedback d'aimantation ponctuel. */
.page-entete-pied-guide {
position: absolute;
left: 0;
right: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}
.page-entete-pied-guide--haut {
top: 0;
height: 70px; /* HEADER_HEIGHT, canvas.js — garder synchronise */
border-bottom: 1px dashed color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.page-entete-pied-guide--bas {
bottom: 0;
height: 70px; /* FOOTER_HEIGHT, canvas.js — garder synchronise */
border-top: 1px dashed color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.page-entete-pied-guide--visible {
opacity: 1;
}
/* Conteneur des blocs d'en-tete/pied de page (voir canvas.js:buildZoneVivante) —
deliberement SANS position propre (reste `position: static`, la valeur par defaut) : ses
enfants .block sont deja position:absolute avec des x/y relatifs a LA PAGE elle-meme
(exactement le meme espace de coordonnees qu'un bloc normal, voir le plan) — ce wrapper
ne doit surtout PAS devenir un nouveau contexte de positionnement (position:relative/
absolute), sous peine de casser ce calcul. Il ne sert qu'a grouper les blocs pour les
manipuler/retirer ensemble en JS (voir renderEnteteEtPiedDePage). */
.page-entete-pied-zone--lecture-seule {
/* Ceinture ET bretelles, meme convention que .page-thumbnail__shield : cloneReadOnly()
retire deja contenteditable/tabindex sur chaque descendant, mais un clone reste
techniquement une copie complete du DOM interactif (poignees de redimensionnement,
barres d'outils par bloc...) — pointer-events:none sur tout le conteneur garantit
qu'AUCUNE interaction n'atteint jamais un clone, quel que soit ce qui pourrait
localement re-activer les evenements sur un descendant precis. */
pointer-events: none;
}
/* Guides d'aimantation dynamiques entre BLOCS (pas seulement la marge de page ci-dessus,
voir canvas.js:snapAxis/collectSiblingTargetsX/Y) — un trait fin qui apparait exactement
a la position ou le bloc glisse vient d'accrocher le bord/centre d'un AUTRE bloc de la
meme page, meme principe que les "guides intelligents" de Figma/Illustrator/Canva.
Cree une fois par page (comme .page-margin-guide), jamais recree a chaque geste — juste
repositionne (left/top) et bascule visible/invisible pendant le glisser. z-index:450,
meme valeur que .lasso-select juste en dessous : doit rester visible par-dessus
n'importe quel bloc, y compris un bloc encore .block--editing (400) au moment ou le
glisser demarre. */
.block-align-guide {
position: absolute;
background: var(--color-accent);
pointer-events: none;
z-index: 450;
display: none;
}
.block-align-guide--v {
top: 0;
bottom: 0;
width: 1px;
}
.block-align-guide--h {
left: 0;
right: 0;
height: 1px;
}
.block-align-guide--visible {
display: block;
}
/* Rectangle de selection "au lasso" (voir canvas.js:startLassoSelect) — cree/detruit a
chaque geste (jamais un element permanent reutilise), positionne en pixels dans le
repere de la page comme un bloc ordinaire. pointer-events:none : ne doit jamais lui-meme
intercepter le mousemove/mouseup ecoutes sur document pendant le glisser. z-index
au-dessus de tout bloc, y compris .block--editing (400) : le rectangle doit rester
visible en glissant par-dessus n'importe quel contenu. */
.lasso-select {
position: absolute;
border: 1px dashed var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
pointer-events: none;
z-index: 450;
}
/* Fantome de glisser-depose depuis un bouton de la barre laterale (voir
canvas.js:startSidebarBlockDrag) — cree/detruit a chaque geste, position:fixed (suit le
curseur en coordonnees ecran, pas relatif a une page comme .lasso-select ci-dessus,
puisqu'aucun bloc/page n'existe encore a ce stade). pointer-events:none : ne doit jamais
intercepter lui-meme le point sous le curseur, sinon document.elementFromPoint ne
trouverait plus jamais la page survolee. z-index 500, meme palier que les overlays modaux
partages (voir la note "Follow-up bug... modal z-index" dans CLAUDE.md) — au-dessus de
.block--editing (400) et des guides d'alignement (450), coherent avec le fait qu'aucun
modal ne peut etre ouvert pendant ce geste. */
.sidebar-drag-ghost {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 500;
background: var(--color-surface);
border: 1.5px dashed var(--color-accent);
border-radius: 8px;
color: var(--color-accent);
font-size: 22px;
opacity: 0.85;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
/* Hors de toute page (ex. ramene au-dessus de la barre laterale) : le depot serait annule,
signale visuellement avant meme le relachement plutot qu'une simple disparition surprise
au mouseup. */
.sidebar-drag-ghost--invalid {
border-color: var(--color-danger);
color: var(--color-danger);
opacity: 0.55;
}
/* Ajout manuel d'une page, toujours en fin de pile — meme largeur que les
feuilles pour rester dans l'alignement, style "ghost" en pointilles comme
les autres affordances d'ajout de l'editeur (ex. le placeholder image du bloc
situation). */
.add-page-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: var(--page-width);
padding: var(--space-3);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-muted);
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.add-page-btn:hover {
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-accent-soft);
}
.add-page-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.add-page-btn:disabled:hover {
border-color: var(--color-border);
color: var(--color-muted);
background: transparent;
}
/* ---- Bloc : position libre, aucune contrainte d'ordre, aucun padding/marge impose ---- */
.block {
position: absolute;
margin: 0;
padding: 0;
overflow: visible;
/* z-index explicite (pas juste l'ordre du DOM) : necessaire pour que les blocs
decoratifs (ligne/forme, juste en dessous) restent TOUJOURS a l'arriere-plan, peu
importe l'ordre dans lequel ils ont ete crees/deplaces par rapport aux autres blocs
— l'ordre source ne depart age que des elements a z-index EGAL, un nombre explicite
plus bas gagne toujours, quel que soit l'ordre de creation. */
z-index: 1;
}
/* Blocs decoratifs, sans texte (blocks/forme.js, blocks/fond.js) — demande explicite
initiale : "ces formes doivent avoir le z-index le plus bas... on peut poser [d'autres
blocs] dessus" (ex. reconstituer un bandeau de titre exotique avec du texte pose par-
dessus) — meme palier pour `fond` (voir CLAUDE.md, choix delibere plutot qu'un palier
encore plus bas : l'ordre naturel de composition — un fond ajoute en premier — suffit
deja a le faire apparaitre derriere forme aussi). `ligne` a ete RETIRE de ce palier sur
demande explicite ulterieure ("je veux les voir sur les blocs... sur des blocs parfois
je veux ajouter des ligne et ça doit être visible") : une ligne decorative doit pouvoir
se poser PAR-DESSUS un bloc deja existant (souligner/traverser un texte, par exemple) et
y rester visible, contrairement a forme/fond qui restent, eux, toujours en arriere-plan
pur. `ligne` retombe donc simplement sur le palier normal (z-index:1, la regle de base
`.block` juste en dessous) — aucune regle dediee necessaire, un bloc ligne se comporte
alors exactement comme n'importe quel autre bloc de contenu pour l'empilement (celui
ajoute/deplace le plus recemment passe au-dessus, meme convention que le reste de
l'editeur). Scope volontairement limite a ces 2 types restants (pas un systeme de
calques general pour tous les blocs — option choisie explicitement, plus simple qu'un
vrai "envoyer a l'arriere" disponible partout). Consequence acceptee pour forme/fond,
comme dans tout outil a calques (Figma/Canva) : une fois reellement recouvert, seule la
partie visible/depassante du bloc reste cliquable — cliquer sur la zone de chevauchement
selectionne le bloc du dessus. */
.block[data-type="forme"],
.block[data-type="fond"] {
z-index: 0;
}
/* `outline`, pas `box-shadow` — un box-shadow ne peut jamais etre en tirets (pas de
border-style equivalent pour lui), et outline ne modifie jamais la mise en page
(comme le ferait border), exactement le meme avantage qui avait fait choisir
box-shadow a l'origine. outline-offset ecarte legerement le trait du bloc plutot que
de le coller pile a son bord — rendu "flottant" plus moderne (Figma/Canva), demande
explicite. */
.block--selected {
outline: 1.5px dashed var(--color-accent);
outline-offset: 2px;
}
/* Mode edition (double-clic) : contour plus marque que la simple selection, pour
signaler clairement qu'on est en train d'editer le contenu et non plus de deplacer
le bloc (.block__move-layer est masquee dans cet etat — voir plus bas).
`z-index: 400` (une seule classe, comme la regle de base .block ci-dessus — l'emporte
par ORDRE DE CASCADE, cette regle etant definie plus loin dans ce fichier) : le bloc
actuellement edite passe devant TOUS les autres blocs de la page —
necessaire pour que sa barre d'outils (desormais large de toute la page, voir
.block-reponse__tools plus bas) ne se retrouve jamais visuellement recouverte par un
bloc VOISIN qu'elle chevauche. Poser un z-index eleve seulement sur la barre elle-meme
ne suffirait pas : elle vit a l'interieur de ce wrapper .block, qui a son PROPRE
contexte d'empilement CSS (position + z-index explicite des sa regle de base) — un
descendant en position:absolute/fixed n'en sort jamais pour l'ORDRE DE PEINTURE, seul
son positionnement (ou il est place a l'ecran) s'en affranchit ; le z-index de la barre
n'est donc jamais compare a celui d'un bloc voisin, seulement a celui de son PROPRE
wrapper — meme lecon deja tiree, dans ce meme fichier, du bug de la modale du bloc
graphique (voir .block-graphique--modal-open). Effet de bord assume et plutot
bienvenu : le bloc activement edite passe entierement devant ses voisins pendant qu'on
travaille dessus, pas juste sa barre — coherent avec ce que Figma/Canva font deja pour
l'objet en cours d'edition. */
.block--editing {
box-shadow: 0 0 0 2px var(--color-accent);
z-index: 400;
}
.block__content {
width: 100%;
height: 100%;
overflow: visible;
}
/* Couche de deplacement : couvre tout le bloc, un simple clic-glisser suffit a le
deplacer (comme sur Canva) — plus besoin d'une petite poignee dediee. Un double-clic
dessus bascule en mode edition (voir canvas.js:enterEdit), ce qui la masque pour
laisser les clics atteindre normalement le contenu. */
.block__move-layer {
position: absolute;
inset: 0;
/* "Signe deplacer" (les 4 fleches) au survol ET pendant le glisser actif — les deux
partagent la meme valeur, donc un seul changement CSS couvre les deux etats sans
avoir besoin d'une classe JS dediee "en cours de glisser" (voir canvas.js:
attachDrag, dont le mousedown/mousemove/mouseup n'ont pas ete modifies pour ca). */
cursor: move;
}
.block--editing .block__move-layer {
display: none;
}
/* 4 poignees independantes (gauche/droite/haut/bas, toujours centrees sur leur bord)
plutot qu'une seule au coin bas-droit qui redimensionnait largeur+hauteur ensemble —
demande explicite, meme convention que Canva/Figma/Google Slides : chaque bord ne
redimensionne QUE sa propre dimension (voir canvas.js:attachResize, parametre `edge`).
Regles de base communes aux 4 (taille/fond/bordure/visibilite) restent sur la meme
classe .block__resize-handle qu'avant — print.css et le repli mode Cours ci-dessous
ciblent deja cette classe generiquement, aucun changement necessaire la-bas. */
.block__resize-handle {
position: absolute;
width: 12px;
height: 12px;
background: var(--color-accent);
border: 1px solid var(--color-surface);
border-radius: 50%;
display: none;
}
.block--selected .block__resize-handle {
display: block;
}
.block__resize-handle--e {
top: 50%;
right: -6px;
transform: translateY(-50%);
cursor: ew-resize;
}
.block__resize-handle--w {
top: 50%;
left: -6px;
transform: translateY(-50%);
cursor: ew-resize;
}
.block__resize-handle--s {
left: 50%;
bottom: -6px;
transform: translateX(-50%);
cursor: ns-resize;
}
.block__resize-handle--n {
left: 50%;
top: -6px;
transform: translateX(-50%);
cursor: ns-resize;
}
/* Icone commentaire (voir canvas.js:attachCommentIcon) : au meme niveau que la rangee
d'outils du bloc (top:-28px, comme .block-reponse__tools/.mindmap-node__tools), juste a
droite de la boite plutot que superposee dessus. Masquee par defaut — contrairement aux
autres barres d'outils de bloc (visibles a la simple selection), celle-ci n'apparait que
sur double-clic (`.block--comment-revealed`, voir canvas.js:attachDrag/commentRevealedId),
OU en permanence tant qu'il reste au moins un commentaire "nouveau" (`--nouveau`,
ci-dessous, voir commentsSeen dans canvas.js) — meme logique de pastille de notification
qu'un reseau social : des qu'un fil a ete ouvert une fois, l'icone redevient masquee par
defaut, meme si des commentaires plus anciens (deja lus) existent toujours. Positionnee
en dehors de .block, donc hors de la zone couverte par .block__move-layer — cliquable
meme quand le bloc n'entre jamais en edition, ce qui est justement le cas du proprietaire
du partage consultant la copie de quelqu'un d'autre. */
.block-comment-icon {
display: none;
position: absolute;
top: -28px;
left: 100%;
margin-left: 8px;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-muted);
font-size: 12px;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 6px -2px rgba(32, 30, 27, 0.3);
z-index: 25;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.block--comment-revealed .block-comment-icon,
.block-comment-icon--nouveau {
display: flex;
}
.block-comment-icon:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
.block-comment-icon--nouveau {
background: var(--color-accent);
color: var(--color-surface);
border-color: var(--color-accent);
}
/* Pastille numerotee (nombre total d'entrees) posee sur l'icone commentaire, que ce soit
celle d'un bloc (.block-comment-icon) ou celle du bandeau (#header-comment-indicator,
voir editor.html) — les deux offrent deja un parent en `position` non-statique
(absolute / relative), donc ce positionnement absolu se cale correctement sur l'un comme
sur l'autre sans regle dediee. Masquee par defaut (voir canvas.js:refresh/
refreshHeaderCommentIndicator, qui bascule `display` a la main selon le compte) : une
pastille a "0" n'a aucun sens a montrer — n'apparait donc que si l'icone-hote est elle
aussi visible (double-clic manuel sur un fil deja lu, ou etat --nouveau, voir plus haut).
Neutre (--color-primary) quand l'icone n'est visible que par double-clic manuel sur un
fil integralement lu ; passe en rouge (--nouveau, --color-danger) quand c'est au
contraire la presence d'une entree jamais ouverte par ce navigateur (voir commentsSeen
dans canvas.js) qui justifie la visibilite permanente de l'icone — la pastille reflete
alors la meme raison que l'icone, jamais l'inverse. */
.comment-count-badge {
display: none;
position: absolute;
top: -5px;
right: -5px;
min-width: 16px;
height: 16px;
padding: 0 3px;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-surface);
font-size: 10px;
line-height: 1;
font-family: var(--font-body);
box-shadow: 0 0 0 2px var(--color-surface);
z-index: 26;
}
.comment-count-badge--nouveau {
background: var(--color-danger);
}
/* Etat "fusionnee dans la barre __tools" pendant l'edition — voir
canvas.js:mergeCommentIconIntoToolbar/unmergeCommentIconFromToolbar pour le pourquoi :
bug reel signale ("le bouton commentaire est masque par le toolbar") depuis que ces
barres occupent toute la largeur de la page, une barre a plusieurs lignes pouvait
recouvrir visuellement l'icone restee a sa position fixe (top:-28px; left:100%).
`position: relative`, PAS `static` (contrairement a .block__style-btn--merged) : cette
icone porte un enfant absolument positionne (la pastille .comment-count-badge,
top:-5px/right:-5px) — `static` ne fournirait plus de bloc englobant valide pour ce
positionnement, `relative` le conserve tout en participant normalement au flux flex de
la barre d'accueil (flex-wrap:wrap deja en place pour ses propres boutons) — "sur la
meme ligne s'il y a de la place, sinon a la ligne suivante" en decoule gratuitement,
sans aucune mesure de mise en page a la main. Reste volontairement ronde (border-radius
herite de .block-comment-icon, jamais reinitialisee) plutot que calquee sur le gabarit
carre de .block__style-btn--merged : une identite visuelle distincte (bulle de message)
reste utile au sein de la barre, ce n'est pas un bouton de la meme famille. */
.block-comment-icon--merged {
position: relative;
top: auto;
left: auto;
margin-left: 0;
width: 24px;
height: 24px;
box-shadow: none;
z-index: auto;
}
/* Bouton generique "bordure/arrondi/fond" (voir canvas.js:attachBlockStyleButton) —
pose directement sur le wrapper .block partage, fonctionne donc identiquement pour
tous les types de blocs. Meme convention visuelle que .block-comment-icon
(bouton rond flottant juste au-dessus du bloc), mais ancre a `left:0` — a l'oppose de
.block-comment-icon (`left:100%`) — pour ne jamais se chevaucher avec lui, ni avec les
barres __tools propres a certains types (qui restent, elles, ancrees a droite). */
.block__style-btn {
display: none;
position: absolute;
top: -28px;
left: 0;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-muted);
font-size: 12px;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 6px -2px rgba(32, 30, 27, 0.3);
z-index: 25;
}
.block--editing .block__style-btn {
display: flex;
}
.block__style-btn:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* Bouton "Recadrer & filtres" (image.js) — meme gabarit exact que .block__style-btn
ci-dessus (rond, 26px, fond blanc, bordure, ombre), juste decale de 34px (26 + 8px
d'ecart) pour ne jamais se superposer a lui : le bloc image a les DEUX boutons (le
generique bordure/fond ET celui-ci), contrairement a la plupart des autres blocs sans
barre __tools, qui n'en ont qu'un seul. */
.block-image__masque-btn {
display: none;
position: absolute;
top: -28px;
left: 34px;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-muted);
font-size: 12px;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 6px -2px rgba(32, 30, 27, 0.3);
z-index: 25;
}
.block--editing .block-image__masque-btn {
display: flex;
}
.block-image__masque-btn:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* ---- Poignees "deplacer"/"pivoter" : EN BAS du bloc (15px de marge), a l'oppose de
.block__style-btn/.block-comment-icon (au-dessus) — demande explicite ("ces deux icones
doivent être en bas du bloc à 15 px de marge... comme le toolbar un fond blanc de
z-index plus grand si jamais ça tombe sur un autre bloc"). Meme habillage visuel que ces
deux boutons generiques (rond, fond blanc, bordure, ombre) : c'est litteralement la
meme famille de controle (un bouton generique pose sur le wrapper .block, hors des
fichiers blocks/*.js), seule la position/l'icone changent. Visibles uniquement sur
.block--editing (double-clic), jamais a la simple selection — meme convention que
chaque barre __tools de cet editeur (voir la note "Per-block toolbars 'pres du bloc'").
z-index local 25, comme .block__style-btn : deja suffisant en pratique puisque
.block--editing eleve le wrapper .block ENTIER (icones comprises, elles en sont des
descendantes) a z-index:400 au niveau de la pile d'empilement du CANEVAS — la ou un
chevauchement avec un bloc voisin (lui a z-index:1 au repos) se joue reellement ; aucun
z-index "de niveau fenetre" separe n'est necessaire ici. */
.block__move-handle,
.block__rotate-handle {
display: none;
position: absolute;
top: calc(100% + 15px);
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-muted);
font-size: 12px;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px -2px rgba(32, 30, 27, 0.3);
z-index: 25;
}
.block--editing .block__move-handle,
.block--editing .block__rotate-handle {
display: flex;
}
.block__move-handle {
left: 0;
cursor: move;
}
.block__rotate-handle {
left: 34px;
}
.block__move-handle:hover,
.block__rotate-handle:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* ---- Panneau "bordure/arrondi/fond" : meme patron overlay+panneau que .icon-picker/
.palette-picker (voir plus bas dans ce fichier), voir canvas.js:openBlockStylePanel.
Plus compact que les deux autres (3 reglages en ligne, pas une grille de choix).
z-index:500, pas 300 (voir la note complete plus bas au niveau de .icon-picker-overlay)
— un bloc en cours d'edition (.block--editing) est lui-meme a z-index:400 depuis que sa
barre d'outils occupe toute la largeur de la page ; ce panneau, ouvert depuis le bouton
generique bordure/fond de CE bloc, doit rester au-dessus de son propre bloc hote. ---- */
.block-style-panel-overlay {
position: fixed;
inset: 0;
background: rgba(32, 30, 27, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 500;
}
.block-style-panel {
/* Elargi de 340 -> 400px — bug reel signale et mesure directement : une rangee avec
libelle + curseur + valeur + bouton "Par defaut" (panneaux Filtres image / Style de
texte) depassait le bord droit du panneau de 10 a 16px, et un libelle un peu long
("Noir et blanc") se repliait sur 3 lignes faute de place. */
width: min(400px, 92vw);
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: 0 24px 60px -16px rgba(32, 30, 27, 0.5);
/* PAS de overflow:hidden/auto ICI (contrairement au premier jet) : ni __header ni
__body n'ont leur propre fond distinct (ils laissent voir celui du panneau, deja
arrondi par border-radius ci-dessus) — overflow:hidden ne servait donc a rien
visuellement, mais decoupait bel et bien tout enfant qui deborde, quel que soit son
z-index (un z-index plus fort n'y change rien : overflow:hidden empeche le rendu
meme d'exister hors de la boite, avant toute question d'empilement) — exactement ce
qui rognait le popover "couleurs recentes" (recentColors.js) du selecteur de fond,
signale par un utilisateur reel. Le defilement necessaire pour un contenu trop long
(voir juste en dessous) est donc scope au SEUL __body, jamais pose ici — un popover
de couleur ouvert depuis un bouton DANS le body reste a risque de chevaucher la
limite de defilement de __body elle-meme (accepte, voir __body ci-dessous), mais au
moins jamais tronque par CE conteneur-ci.
display:flex column + max-height : bascule ce panneau en "en-tete fixe, corps
defilant" — retour direct : "le modal du bloc figure géométrique doit être scrollé
car je ne vois pas le texte en bas" (le panneau grandissait avant ca sans aucune
limite, capable de deborder bien au-dela du bas de l'ecran sans aucun moyen d'y
acceder). 48px = les 24px de padding haut+bas de l'overlay (.block-style-panel-
overlay) qui l'entoure toujours. */
display: flex;
flex-direction: column;
max-height: calc(100vh - 48px);
}
.block-style-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-body);
font-weight: 600;
color: var(--color-text);
/* Ne retrecit jamais pour laisser de la place a __body — reste toujours visible en
haut du panneau, meme quand le corps defile. */
flex-shrink: 0;
}
.block-style-panel__close {
border: none;
background: none;
color: var(--color-muted);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 4px;
}
.block-style-panel__close:hover {
color: var(--color-danger);
}
.block-style-panel__body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 18px;
/* min-height:0 est necessaire pour qu'un enfant flex avec overflow-y:auto respecte
reellement le max-height du parent (.block-style-panel) — sans ca, un enfant flex
refuse par defaut de retrecir en dessous de la hauteur de son propre contenu
(min-height:auto implicite), ce qui aurait rendu le max-height du parent inoperant
et fait deborder .block-style-panel exactement comme avant ce correctif. Meme
defilette fine que .page-thumbnails (deja etabli ailleurs dans ce fichier) — un
style "moderne", pas la barre de defilement brute du navigateur. */
overflow-y: auto;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.block-style-panel__body::-webkit-scrollbar {
width: 6px;
}
.block-style-panel__body::-webkit-scrollbar-track {
background: transparent;
}
.block-style-panel__body::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-pill);
}
.block-style-panel__row {
display: flex;
align-items: center;
/* Ne deborde JAMAIS horizontalement — une rangee dont les champs ne tiennent pas sur
une seule ligne (typiquement une carte a plusieurs champs empilee dans un
conteneur etroit, ex. les traces Thales du bloc figure : 2 selects + 2 champs de
nom + une case) se replie sur plusieurs lignes plutot que forcer un defilement
horizontal — bug reel signale : "les points sont en ligne et ça dépasse il faut
scroller horizontalement... il faut rester sur la largeur de l'écran". Sans effet
sur une rangee qui tient deja sur une seule ligne (l'immense majorite des cas),
le wrap ne se declenche que quand il y a reellement manque de place. */
flex-wrap: wrap;
gap: 10px;
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text);
}
/* Variante DEDIEE a une paire de champs x;y (decalage manuel d'etiquette, coordonnees d'un
point...) — demande directe : "d'une maniere generale les champs x et y doivent être sur
la meme ligne". Le wrap generique de .block-style-panel__row ci-dessus reste correct pour
une rangee a plusieurs champs heterogenes (selects, cases, texte libre), mais une simple
paire de 2 petits n'a jamais besoin de se replier — mesure reelle :
avec le seul flex-wrap:wrap herite, ces 2 champs finissaient sur 2 lignes separees des
que le panneau etait dans sa colonne etroite (modale plein ecran, colonne "reglages"),
rendant impossible de voir x et y cote a cote. `min-width:0` sur le label permet a CE
dernier de retrecir (jamais aux champs numeriques, volontairement fixes) si l'espace
manque vraiment, plutot que de forcer un retour a la ligne. */
.block-style-panel__row--coords {
flex-wrap: nowrap;
}
.block-style-panel__row--coords label {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.block-style-panel__row--coords input[type="number"] {
flex: 0 0 60px;
width: 60px;
min-width: 60px;
}
/* Ne retrecit jamais et ne se replie jamais sur plusieurs lignes (contrairement au
comportement flex par defaut) — bug reel mesure : un libelle de longueur normale
("Noir et blanc") se repliait sur 3 lignes des que la rangee manquait de place,
plutot que de laisser le curseur (lui, flex:1 1 auto ci-dessous) ceder la place en
premier — c'est justement lui qui doit retrecir avant le libelle. */
.block-style-panel__row label {
flex-shrink: 0;
white-space: nowrap;
}
.block-style-panel__row input[type="range"] {
flex: 1 1 auto;
min-width: 40px;
}
.block-style-panel__select {
flex: 1 1 auto;
/* Un