/** * citivo-sheet.css — LE STYLE DU BANDEAU GLISSABLE, en un seul endroit. * * Chantier « homogénéiser les lightbox », sous-étape A2b-1. Troisième pièce du * module de bandeau, aux côtés de `Citivo_Sheet` (chargement) et de * `assets/js/citivo-sheet.js` (mécanique) : les deux existaient depuis la * sous-étape 8b, l'habillage non — il était resté dans citivo-lightbox-app.css. * * ⚠️⚠️ POURQUOI CE FICHIER NAÎT MAINTENANT, ET POURQUOI C'EST LA TROISIÈME * FOIS. Le style du bandeau vivait sous la classe `has-sheet` dans * citivo-lightbox-app.css, feuille que SEULE la carte publique charge. Tant * qu'il n'y avait que la carte des découvertes pour porter un bandeau, ça * tenait. Mais « Mes signalements » et le tableau de bord mairie ne chargent * pas cette feuille : leur donner un bandeau les aurait laissés avec un * bandeau SANS AUCUNE MISE EN FORME — ni position, ni fond, ni poignée. * * ⚠️ MÊME PIÈGE QU'AUX SOUS-ÉTAPES 10c ET A1a, rencontré une troisième fois : * un module partagé n'est réellement partageable que si SES TROIS PIÈCES le * sont — chargement, comportement ET style. Deux sur trois suffisent tant * qu'un seul écran s'en sert, et se paient au premier écran suivant. La * régularité de la rechute vaut règle : à la prochaine extraction de module, * sortir la feuille EN MÊME TEMPS que le script, jamais « plus tard ». * * ⚠️ CE FICHIER NE CONNAÎT PAS `is-app`. Tout ce qui relève du rendu * « application » de la carte publique (couleurs de la zone de méta, boutons * outline, overlays sur la photo, le cas particulier où la zone de méta EST le * bandeau) reste dans citivo-lightbox-app.css. Ici, seul le BANDEAU : sa * position, sa poignée, son titre, son corps. * * ⚠️ AUCUNE RÈGLE N'A CHANGÉ À CETTE SOUS-ÉTAPE — ce fichier est un * DÉPLACEMENT, à la déclaration près. Les deux lightbox de la carte publique * doivent être strictement identiques après comme avant ; toute différence * visible est un bug de l'extraction, jamais une amélioration. * * ⚠️ Aucune dépendance d'ORDRE avec citivo-lightbox-app.css : là où les deux * feuilles visent le même élément (le chevron, attrapé au passage par le * traitement « outline » de `.is-app`), c'est la SPÉCIFICITÉ qui tranche, pas * l'ordre d'impression — voir les correctifs 0.84.1/0.84.2 plus bas. La * dépendance est tout de même déclarée côté PHP, pour que la cascade reste * lisible. * * Mise en file par Citivo_Sheet::enqueue_assets(), en même temps que le * script : les deux vont ensemble, et les séparer laisserait un écran capable * de faire glisser un bandeau invisible. * * @package Citivo */ /* ════════════════════════════════════════════════════════════════════════ BANDEAU GLISSABLE — classe `.has-sheet` ════════════════════════════════════════════════════════════════════════ ⚠️ CLASSE DISTINCTE DE `.is-app`, et c'est délibéré. `.is-app` porte le RENDU de la carte publique (couleurs, plein écran, boutons) ; `.has-sheet` porte ce COMPORTEMENT, qui exige un balisage particulier — une poignée contenant un titre, toujours visible. La séparation permet à un écran de prendre l'un sans l'autre : la lightbox des signalements de la carte publique a `.is-app` seul (elle n'a pas de titre), et « Mes signalements » comme le tableau de bord mairie prendront `.has-sheet` seul en A2b-2/A2b-3. Principe : le bandeau est positionné en absolu au bas de son PARENT POSITIONNÉ le plus proche, et décalé vers le bas de sa propre hauteur MOINS celle de la poignée. Replié, on ne voit donc que la poignée ; déplié, il remonte à `translateY(0)`. Le JS ne fait que basculer une classe — ou, pendant un glissement tactile, écrire un `transform` en ligne. ⚠️⚠️ « SON PARENT POSITIONNÉ LE PLUS PROCHE » N'EST PAS UN DÉTAIL DE RÉDACTION. Sur la carte publique le bandeau est enfant du DIALOGUE, et `is-app` fait coïncider dialogue et photo (plein écran) : bas du dialogue = bas de la photo. Sur un écran où le dialogue est une COLONNE (photo, méta, actions), le même ancrage recouvrirait la rangée d'actions. C'est le blocage diagnostiqué le 09/08/2026, et l'arbitrage retenu est de faire du bandeau un enfant du CADRE PHOTO (`.citivo-lightbox-img-wrap`, déjà `position: relative`) — sans une seule règle de positionnement supplémentaire. Ces règles restent donc valables telles quelles dans les deux montages. ────── */ /* ⚠️⚠️ SOUS-ÉTAPE 8b — LA VARIABLE `--citivo-sheet-handle` A DISPARU, avec la règle de décalage qui la lisait. La hauteur de poignée n'est plus un NOMBRE FIGÉ partagé entre ce fichier et le JS : elle est MESURÉE sur l'élément réel (`getBoundingClientRect()`), et c'est le module qui pose le décalage du bandeau replié en style en ligne. Pourquoi : le 66 px ne pouvait valoir que tant qu'il n'y avait qu'UN consommateur — au prix d'un `white-space: nowrap` sur le titre, justement pour l'empêcher de faire grandir la poignée et de fausser le calcul. Avec deux modes, puis trois, chaque hôte veut une poignée différente (le signalement y mettra un badge). Un module partagé ne peut pas supposer une hauteur commune. ⚠️ Le CSS ne peut pas MESURER un élément : c'est la raison technique pour laquelle ce décalage descend dans le JS. La transition, elle, reste ici. */ /* ⚠️ CORRECTIF A2b-2 — LE BLEU DU BANDEAU DEVIENT UNE PROPRIÉTÉ, déclarée sur la lightbox et donc héritée par tout ce qu'elle contient. Motif : la rangée d'actions de « Mes signalements » et du tableau de bord doit prendre le même bleu (demande d'Olivier), mais elle vit HORS du bandeau — sans variable, ce serait une TROISIÈME écriture du même hexadécimal, et la garantie qu'un jour les deux divergent. ⚠️ Déclarée ici et pas sur `.citivo-sheet` : les consommateurs ne sont pas descendants du bandeau, ils n'hériteraient de rien. Même raisonnement que `--citivo-sheet-visible`, publiée sur la lightbox par le JS pour la même raison. */ .citivo-lightbox.has-sheet { --citivo-sheet-bg: #315ba3; } .citivo-lightbox.has-sheet .citivo-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; /* Déplié, le bandeau laisse volontairement voir un bandeau de photo en haut : on doit toujours savoir de quelle fiche on lit le détail. */ max-height: 82%; background: var( --citivo-sheet-bg ); color: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 28px rgba( 0, 0, 0, .38 ); /* ⚠️ Aucun `transform` ici — l'état REPLIÉ est posé en ligne par le module (il dépend d'une mesure), et l'état DÉPLIÉ est simplement l'absence de style en ligne, donc `none`. La classe `is-open` n'a plus à porter de transform : elle ne sert plus qu'au chevron et au titre. ⚠️ Aucun risque de « bandeau déplié » visible avant que le JS n'agisse : la lightbox est `hidden` au chargement, et l'hôte replie le bandeau juste après l'avoir démasquée — voir `close( true )` côté module. */ transition: transform .3s cubic-bezier( .22, .61, .36, 1 ); } /* ⚠️ Transition suspendue dans DEUX cas, pour la même raison — le transform est écrit en ligne et doit s'appliquer instantanément : · `is-dragging` : à chaque mouvement du doigt, sinon le bandeau devient mou et en retard sur le geste ; · `is-instant` : au repli imposé à l'ouverture d'une fiche, sinon on verrait le bandeau glisser tout seul de haut en bas à chaque ouverture. ⚠️ Deux classes et non une : elles décrivent deux situations distinctes, et les confondre rendrait incompréhensible la lecture du JS. */ .citivo-lightbox.has-sheet .citivo-sheet.is-dragging, .citivo-lightbox.has-sheet .citivo-sheet.is-instant { transition: none; } /* ⚠️⚠️ SOUS-ÉTAPE A2b-2 — LA CROIX DE FERMETURE PASSE AU-DESSUS DU BANDEAU, et c'est le MODULE qui l'impose, pas les écrans. La coque pose la croix à `z-index: 2`, le bandeau est à `3` : déplié, il couvre une large part du cadre et masquerait donc la seule sortie. La carte publique ne le voyait pas parce que `.is-app` remonte déjà sa croix à `4`, pour exactement cette raison — un correctif écrit là-bas pour un problème qui n'était pas propre à là-bas. ⚠️ Même valeur que la règle `.is-app`, et même spécificité (0-3-0) : les deux coexistent sur la carte publique sans se contredire, quel que soit l'ordre. ⚠️ La règle vit ICI plutôt que dans chaque écran parce que le conflit est CRÉÉ par le bandeau : un module doit porter la conséquence de son propre empilement, sinon chaque nouvel hôte redécouvre la panne. ─────────────── */ .citivo-lightbox.has-sheet .citivo-lightbox-close { z-index: 4; } /* ⚠️⚠️ CORRECTIF A2b-2 — `sheet-in-photo` : LE CADRE PHOTO ROGNE LE BANDEAU. Symptôme relevé par Olivier en recette : bandeau replié, la rangée d'actions disparaissait sous lui. Cause, et elle n'est PAS un `z-index` : replié, le bandeau est décalé vers le bas de sa course (hauteur du bandeau moins celle de la poignée). Son CORPS descend donc SOUS son cadre — de tout ce que la poignée ne couvre pas. Sur la carte publique ça ne se voit pas : le bandeau est ancré au dialogue et il n'y a rien en dessous. Ici il est ancré au cadre PHOTO, et sous ce cadre il y a justement les actions qu'Olivier a décidé de garder visibles. ⚠️ CLASSE D'OPT-IN, ET NON UNE RÈGLE GÉNÉRALE SOUS `.has-sheet`. Rogner le cadre photo de la carte publique n'aurait servi à rien — le bandeau n'y est pas — et aurait pu y changer le rendu d'une image qui déborde de son cadre. On ne modifie pas un écran validé pour réparer un autre : l'hôte déclare son montage, la règle ne s'applique qu'à lui. ⚠️ Cette classe dit exactement UNE chose : « le bandeau est enfant du cadre photo, pas du dialogue ». C'est le seul endroit du projet où les deux montages sont nommés. ─────────────────────────────────────────────────── */ .citivo-lightbox.has-sheet.sheet-in-photo .citivo-lightbox-img-wrap { overflow: hidden; } /* ── Poignée : toujours visible ─────────────────────────────────────────── */ .citivo-lightbox.has-sheet .citivo-sheet-handle { flex: 0 0 auto; box-sizing: border-box; /* ⚠️ Hauteur MINIMALE seulement — la poignée peut désormais grandir avec son contenu, c'est tout l'objet de la 8b. Cette valeur ne sert plus qu'à lui garantir une cible tactile confortable quand elle est peu remplie ; elle n'entre plus dans aucun calcul. */ min-height: 66px; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem 1.1rem .5rem; /* ⚠️ `touch-action: none` UNIQUEMENT sur la poignée : c'est nous qui traitons le geste vertical ici. Sans ça le navigateur interprète le glissement comme un scroll de page et notre `preventDefault()` arrive trop tard. Le corps garde `pan-y` pour rester scrollable normalement. */ touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; } .citivo-lightbox.has-sheet .citivo-sheet.is-dragging .citivo-sheet-handle { cursor: grabbing; } /* ⚠️ CORRECTIF 0.84.1 — SPÉCIFICITÉ RENFORCÉE (`button.citivo-sheet-toggle`, 0-4-1). Sur la lightbox des signalements, la poignée vit DANS `.citivo-lightbox-meta` : le sélecteur générique `.is-app .citivo-lightbox-meta button` (0-3-1) attrapait donc le chevron et lui posait le cadre blanc du traitement « outline ». Le chevron des découvertes y échappait par accident — sa poignée n'est pas dans un `.citivo-lightbox-meta`. ⚠️ Même mécanisme, même remède qu'en 0.81.0 pour le bouton « Signaler » : on l'emporte par SPÉCIFICITÉ, jamais par `!important` ni par ordre. C'est aussi ce qui rend l'extraction A2b-1 sûre : la règle surchargée vit désormais dans une AUTRE feuille, et resterait juste même si l'ordre d'impression changeait. */ /* ⚠️ CORRECTIF 0.84.2 — LE SURVOL AUSSI. Le correctif précédent n'avait neutralisé que l'état AU REPOS : `.is-app .citivo-lightbox-meta button:hover` (0-3-2) continuait de poser un carré blanc translucide au survol du chevron, côté signalement seulement. Corriger un état et pas l'autre est le défaut classique quand on surcharge par spécificité — les deux se déclarent ensemble. */ .citivo-lightbox.has-sheet .citivo-sheet-handle button.citivo-sheet-toggle:hover, .citivo-lightbox.has-sheet .citivo-sheet-handle button.citivo-sheet-toggle:hover:not( :disabled ) { border-color: transparent; background: transparent; } /* ⚠️ CORRECTIF 0.84.2 — CHEVRON AGRANDI (demande d'Olivier), sur les DEUX lightbox. Réglé en CSS et non dans l'attribut `width` du SVG : une seule déclaration vaut pour tous les modes, et l'icône reste définie une seule fois côté PHP. */ .citivo-lightbox.has-sheet .citivo-sheet-toggle svg { width: 30px; height: 30px; } .citivo-lightbox.has-sheet .citivo-sheet-handle button.citivo-sheet-toggle { flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; line-height: 0; cursor: pointer; transition: transform .3s ease; } /* Le chevron se retourne à l'ouverture — une seule icône, jamais deux tracés échangés en JS. */ .citivo-lightbox.has-sheet .citivo-sheet.is-open .citivo-sheet-toggle { transform: rotate( 180deg ); } .citivo-lightbox.has-sheet .citivo-sheet-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; } /* ⚠️⚠️ CORRECTIF 0.84.1 — CLASSE PARTAGÉE `citivo-sheet-title`, et c'est la CAUSE RACINE d'un bug de recette, pas un rangement. Ces règles ne visaient que le titre des DÉCOUVERTES (`.citivo-dec-lightbox-titre`). Le titre du signalement, ajouté en 8d, n'avait donc AUCUN style propre : un `

` avec les marges par défaut du navigateur (≈ 1em à 1.5em de corps) et les restes d'une règle écrite pour un `

` du corps de fiche. Deux symptômes, une seule cause : · la poignée avait une hauteur INSTABLE — la mesure du décalage, faite au repli, ne correspondait donc pas à ce qu'il fallait réellement dégager, d'où la position initiale fausse ; · la marge propre du `

` sortait le texte de la zone rembourrée, d'où le titre collé en haut, sans marge, après un aller-retour du chevron. Corriger la mesure aurait traité le symptôme. La cause était que le titre de poignée n'était pas un objet PARTAGÉ — c'est réparé ici, et tout mode à venir en hérite. ─────────────────────────────────────────────────────────────── */ .citivo-lightbox.has-sheet .citivo-sheet-title { margin: 0; max-width: 100%; /* ⚠️⚠️ CORRECTIF A2b-2 — LA COULEUR DOIT ÊTRE DÉCLARÉE, PAS HÉRITÉE, et c'est un piège CSS classique qui vaut d'être retenu : **l'héritage perd contre n'importe quelle règle qui vise l'élément**, si faible soit sa spécificité. Le bandeau pose `color: #fff` et le titre en héritait — mais Astra déclare `h1,h2,h3,h4,h5,h6 { color: … }`, une règle DIRECTE sur ce `

` : elle l'emporte sur l'héritage, et le titre ressortait en gris sombre sur le bleu. ⚠️ La carte publique n'en souffrait pas, mais par ACCIDENT : une règle `.is-app .citivo-lightbox-meta h2 { color: #fff }`, écrite là-bas pour un tout autre motif, le rattrapait. Le défaut était donc dans le module depuis le début, masqué par un correctif d'à côté — même motif que la croix de fermeture ci-dessus. ⚠️ `inherit` et non `#fff` : le titre suit le bandeau quoi qu'il devienne, au lieu de figer une couleur qu'il faudrait re-synchroniser à la main. */ color: inherit; font-size: var( --citivo-fs-titre ); font-weight: 600; line-height: 1.35; text-align: center; /* Replié, le titre tient sur UNE ligne quoi qu'il arrive : sans ça un titre long ferait grandir la poignée et décalerait tout le calcul de course. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Déplié, le titre peut respirer sur plusieurs lignes. */ .citivo-lightbox.has-sheet .citivo-sheet.is-open .citivo-sheet-title { white-space: normal; overflow: visible; } /* ── Corps : le contenu qui se découvre ─────────────────────────────────── */ .citivo-lightbox.has-sheet .citivo-sheet-body { flex: 1 1 auto; min-height: 0; /* même piège flexbox que partout : autorise le scroll interne */ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .35rem 20px 24px; touch-action: pan-y; } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media ( max-width: 767px ) { .citivo-lightbox.has-sheet .citivo-sheet-body { padding: .35rem 16px 22px; } /* Déplié, on garde un peu plus de photo visible sur un petit écran — le contenu défile de toute façon. */ .citivo-lightbox.has-sheet .citivo-sheet { max-height: 78%; } } /* ════════════════════════════════════════════════════════════════════════ 0.99.317 — UN CADRE PHOTO DE TAILLE FIXE (demande d'Olivier) ════════════════════════════════════════════════════════════════════════ Le constat : la fiche prenait la taille de SA PHOTO. Une petite photo donnait une petite fiche, une photo très horizontale une fiche basse — et le bandeau, qui flotte SUR la photo (82 % de sa hauteur au plus), n'avait plus la place de montrer textes et commentaires : il fallait faire défiler dans la fiche alors que l'écran avait de la place. ➡️ Le CADRE photo a désormais une taille fixe, et la photo s'y CENTRE sur le fond sombre (#1a1a1a depuis 0.99.414, ~~#12203a~~) : · largeur : min( 94vw, 720px ) dès 600 px (la carte publique garde son plafond de 640 px) ; · hauteur : min( 80dvh, 720px ) — sur la carte publique en téléphone, tout l'écran ; · la photo n'est JAMAIS agrandie au-delà de sa taille réelle (une petite photo reste nette, au centre) et JAMAIS recadrée (`contain`). ⚠️ Réservé aux fiches À BANDEAU (`.has-sheet`) : la photo en grand du fil n'a pas de bandeau et garde sa taille naturelle. ⚠️ Spécificité 0-4-0 (`… .citivo-lightbox-dialog .citivo-lightbox-img-wrap`) : l'emporte sur les règles `.is-app` (0-3-0) sans `!important`, quel que soit l'ordre de chargement des feuilles. ⚠️ Mode ÉDITION de « Mes signalements » / « Mes découvertes » : la zone d'édition s'ouvre SOUS le cadre ; le cadre se réduit alors pour lui laisser la place (`:has()`), comme le faisait la photo auparavant. ⚠️ PÉRIMÉ depuis la 0.99.555 : la zone d'édition RECOUVRE la fiche, le cadre ne bouge plus. ─────────────────────────────────────────────────────────────────────── */ @media ( min-width: 600px ) { .citivo-lightbox.has-sheet .citivo-lightbox-dialog { width: min( 94vw, 720px ); } } .citivo-lightbox.has-sheet .citivo-lightbox-dialog .citivo-lightbox-img-wrap { flex: 0 0 auto; height: min( 80dvh, 720px ); min-height: 0; background: #1a1a1a; /* 0.99.414 : gris neutre (~~bleu nuit #12203a~~), demande d'Olivier. */ } .citivo-lightbox.has-sheet .citivo-lightbox-img-wrap .citivo-lightbox-img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: 50% 50%; } @media ( max-width: 767px ) { .citivo-lightbox.is-app.has-sheet .citivo-lightbox-dialog .citivo-lightbox-img-wrap { height: 100dvh; } } /* ⚠️⚠️ 0.99.338 — ET UN PANNEAU DU CYCLE DE VIE OUVERT (gestion des signalements : « Prendre en charge », « Marquer traité », « Rejeter »). Ils s'ouvrent eux aussi SOUS le cadre ; le cadre fixe (0.99.317) les poussait hors de la fenêtre, coupés sans défilement (vu par Olivier, compte gestionnaire). ~~Même remède que l'édition~~ — l'édition passe PAR-DESSUS la fiche depuis la 0.99.555 (bloc suivant) ; les panneaux du cycle gardent ce remède. */ .citivo-lightbox.has-sheet:has( .citivo-mairie-cycle-panel:not( [hidden] ) ) .citivo-lightbox-dialog .citivo-lightbox-img-wrap { height: min( 40dvh, 320px ); } /* ⚠️⚠️ 0.99.555 — LA ZONE D'ÉDITION RECOUVRE LA FICHE (idée d'Olivier). ~~Cadre photo réduit à 40dvh, zone d'édition SOUS le cadre~~ : la photo devenait minuscule, le haut du bandeau bleu restait visible, et le formulaire d'une découverte dépassait encore. Désormais la photo et le bandeau gardent leur taille, et la zone noire se pose PAR-DESSUS tout le dialogue (« Mes signalements » et « Mes découvertes », même classe), avec son propre défilement si l'écran est trop court. La croix reste au-dessus. Téléphone : `fixed` sur tout l'écran — le dialogue y défile lui-même, un `absolute` suivrait son défilement. */ .citivo-lightbox.has-sheet .citivo-lightbox-dialog > .citivo-ms-lightbox-edit-zone { position: absolute; inset: 0; z-index: 10; /* Au-dessus de la rangée « Actions » (6). */ background: #000; /* Opaque : à .95 (citivo-mes-signalements.css), pastilles et photo transparaissaient. */ overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 48px; /* Sous la croix. */ } .citivo-lightbox.has-sheet:has( .citivo-ms-lightbox-edit-zone:not( [hidden] ) ) .citivo-lightbox-close { z-index: 11; } @media ( max-width: 599px ) { .citivo-lightbox.has-sheet .citivo-lightbox-dialog > .citivo-ms-lightbox-edit-zone { position: fixed; } } /* ⚠️⚠️ 0.99.552 — MÊME RÉDUIT, LE CADRE NE SUFFIT PAS SUR ORDINATEUR. Dès 600 px de large, le dialogue est borné à 94vh et coupe ce qui dépasse (`overflow: hidden`, citivo-lightbox.css, pour ses coins arrondis) : le formulaire d'une DÉCOUVERTE (titre, description, catégorie, note sur la photo) mettait « Enregistrer » et « Annuler » sous le bord, sans défilement possible (vu par Olivier : 791 px pour un dialogue de 723). Pendant l'édition ou un panneau du cycle, le dialogue défile ; `overflow-y` autre que `visible` rogne toujours aux coins arrondis. 0.99.555 : l'édition n'en a plus besoin (elle recouvre la fiche et défile seule) ; reste pour les panneaux du cycle. */ @media ( min-width: 600px ) { .citivo-lightbox.has-sheet:has( .citivo-mairie-cycle-panel:not( [hidden] ) ) .citivo-lightbox-dialog { overflow-y: auto; } }