/* ============================================================
style.css — Style neutre et fonctionnel (mobile-first)
La charte graphique définitive sera appliquée ultérieurement.
============================================================ */
:root {
--color-primary: #191557;
--color-primary-dark: #120f3d;
--color-accent: #e8a13a;
--color-bg: #f5f6f5;
--color-surface: #ffffff;
/* Textes rubriques/contenus/libellés (console > Réglages > Couleurs > Environnement ICILAGO,
demande explicite du 2026-07-31) : 3 variables pilotables à distance via
appliquerCouleursEnvironnementDepuisApi() (main.js), valeurs par défaut ci-dessous identiques
à l'ancien --color-text figé, donc aucun changement visuel tant que la console n'a rien
modifié. --color-text reste défini mais redirigé vers --color-texte-contenu (indirection) :
tout le reste de la feuille de style qui référence encore var(--color-text) directement
(badges, popups, filtres, pendule...) suit donc automatiquement "Textes contenus" sans qu'il
ait fallu réécrire chaque règle une par une — seuls .section-title (rubriques) et .field
label (libellés) ont été isolés sur leur propre variable, voir plus bas. */
--color-texte-rubrique: #6b7570;
--color-texte-contenu: #1f2420;
--color-texte-libelle: #1f2420;
--color-text: var(--color-texte-contenu);
--color-text-muted: #6b7570;
--color-border: #e1e4e1;
--color-input-bg: #f5f5f4;
--color-danger: #c04848;
--color-success: #2f8f5b;
--radius: 12px;
--shadow: 0 2px 10px rgba(0,0,0,0.07);
--nav-height: 62px;
--header-height: 70px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-webkit-tap-highlight-color: transparent;
/* Empêche le "pull-to-refresh"/rebond natif du navigateur de se déclencher EN PLUS du geste
personnalisé sur "Près de vous" (voir #pull-refresh-indicator plus bas + initPullToRefreshVisiteur()
dans main.js, 2026-08-29) — sans ça, sur Chrome Android notamment, les deux pouvaient se
chevaucher (rechargement complet de la page ET notre propre rafraîchissement). */
overscroll-behavior-y: contain;
}
/* height:100% seulement sur html (base du calcul de position:fixed du verrou de défilement,
voir ci-dessous), JAMAIS sur body — corrigé le 2026-07-27 : body avait aussi height:100% ici
à la base (donc en permanence, pas seulement pendant le verrou), ce qui causait une bande
blanche en bas d'écran mobile dès qu'une pop-up était ouverte sur une page déjà scrollée. En
cause : le verrou JS (actualiserVerrouillageDefilementModales) passe body en position:fixed
avec top:-Y (Y = scroll au moment de l'ouverture) pour recréer la position visuelle sans
autoriser le défilement ; si la hauteur de body est en plus plafonnée à 100% (= une seule
hauteur d'écran), son bord bas se retrouve mécaniquement Y pixels au-dessus du bas réel de
l'écran, démasquant Y pixels du fond de la page en dessous. */
html { height: 100%; }
/* Verrou de défilement pendant qu'une pop-up est ouverte (voir actualiserVerrouillageDefilementModales
dans main.js) : position:fixed sur body seul ne suffit pas sur tous les navigateurs mobiles à
empêcher le "scroll chaining" vers — on bloque donc aussi explicitement l'overflow des
deux éléments, en complément (demande explicite du 2026-07-27, le premier essai avec
position:fixed seul n'a pas suffi). */
html.defilement-verrouille,
html.defilement-verrouille body {
overflow: hidden !important;
}
/* Bloque le clic sur le contenu flouté derrière une pop-up ouverte (demande de Christophe,
2026-08-21, capture à l'appui : "Changer d'accès à ICILAGO" laissait deviner/atteindre les
boutons et filtres de l'écran "Près de vous" en dessous). Le voile (.modal-overlay,
position:fixed inset:0, z-index:3000) suffit en théorie à intercepter tout clic par
empilement natif, mais cette app a déjà eu des cas de clic/tap qui atteint quand même l'élément
du dessous sur mobile (voir icilago-events-header-sous-titre-compteur-jour) — verrouillage
explicite ici en ceinture-et-bretelles, réutilisant la même classe globale
.defilement-verrouille (posée/retirée exactement quand une .modal-overlay est ouverte, voir
actualiserVerrouillageDefilementModales dans main.js) plutôt que d'ajouter un mécanisme dédié.
Coupe TOUT le contenu de #app (donc aussi #toast-container si présent dedans), puis rétablit
explicitement les clics sur la pop-up elle-même (pointer-events hérite sur les descendants sauf
override). #splash-screen/#ecran-rotation-requise sont hors #app (avant dans le DOM) donc jamais
affectés. */
html.defilement-verrouille #app {
pointer-events: none;
}
html.defilement-verrouille #app .modal-overlay:not(.hidden) {
pointer-events: auto;
}
/* Régression du 2026-08-21 (même jour) : la "Flèche retour" de la fiche évènement (#btn-retour-fiche)
vit dans le header (barre bleue, #app-header), pas dans #modal-event-detail lui-même. Le
blocage général ci-dessus la neutralisait aussi (elle fait partie de #app), rendant "retour"
inopérant — signalé par Christophe. 1er correctif limité à .au-dessus-fiche (affichage fiche
seule) jugé insuffisant par Christophe : "il faut pas que ce bouton soit bloqué pour toutes les
applications" — le header doit rester cliquable dans TOUS les cas, y compris quand une autre
pop-up (#modal-abonnement, etc.) s'ouvre par-dessus une fiche déjà affichée. #app-header exempté
du blocage sans condition. */
html.defilement-verrouille #app-header {
pointer-events: auto;
}
/* Écran d'accueil : .hero et .accueil-bottom sont déjà position:fixed (immobiles), mais tant que
/ restent défilables, un doigt posé sur l'écran déclenche le rebond élastique
("rubber-band") d'iOS Safari, qui entraîne tout — y compris le fond d'écran — avec lui, même
avec background-attachment:fixed (Christophe, 2026-08-11 : "l'image des fond bouge toujours si
on la touche"). Verrouille le défilement le temps que l'accueil est affiché, même principe que
le verrou pop-up ci-dessus. Même sélecteur :has() qu'ailleurs dans ce fichier (voir
#app:has(#view-accueil.active)). */
html:has(#view-accueil.active),
html:has(#view-accueil.active) body {
overflow: hidden;
}
button, input, select, textarea { font-family: inherit; font-size: 16px; }
/* Sans ça, glisser un curseur horizontal (ex. rayon de recherche) sur mobile peut être
interprété par le navigateur comme un geste de défilement de la page, qui bouge alors
verticalement pendant le glissement. */
/* Curseur "Rayon de recherche" (et tout autre input[type=range] de l'app) : portion à gauche du
rond en bleu ICILAGO, portion à droite en gris — demande de Christophe, 2026-08-13.
accent-color colore automatiquement la partie déjà parcourue et laisse le reste du rail dans
la couleur neutre par défaut du navigateur (déjà un gris proche de --color-border sur
Chrome/Safari récents), sans avoir à redessiner tout le composant piste/curseur à la main. */
input[type="range"] { touch-action: none; accent-color: var(--color-bleu-icilago, #1e3a8a); }
/* Écran de démarrage (couleur unie), voir main.js → afficherEcranDemarrage(). Couleur par
défaut ci-dessous volontairement neutre (identique au fond de l'appli) plutôt qu'une couleur
de marque figée : sinon, si la couleur réglée dans la console diffère de cette valeur par
défaut, on voit un flash de la mauvaise couleur le temps que l'API réponde. La transition sur
background-color fait apparaître la vraie couleur en douceur une fois connue, sans à-coup. */
#splash-screen {
position: fixed;
/* RATCHET --h-max RETIRÉ le 2026-09-04 (voir icilago-guide-bande-blanche-fond-accueil-paint-bug
en mémoire) : figeait la mise en page sur la plus grande hauteur jamais vue, ce qui cachait
le contenu sous les barres du navigateur quand celles-ci restent réellement affichées.
Retour à inset:0 en attendant une version avec debounce, validée sur la page de test isolée
avant tout nouveau report ici. */
inset: 0;
z-index: 9999;
background: var(--color-bg);
/* Fondu de sortie remonté à .35s (demande de Christophe, 2026-08-30 : "un fondu entre l'écran
splash et la page d'accueil" — les .167s précédents (~10 trames, réduits le 2026-08-11 car le
splash total était perçu trop long) étaient devenus trop brefs pour être perçus comme un
vrai fondu). Voir main.js → afficherEcranDemarrage() pour le délai avant retrait du DOM,
ajusté en conséquence (doit rester ≥ cette durée, sinon le retrait coupe le fondu en cours). */
transition: opacity .35s ease, background-color .4s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 20px entre le logo symbole (.splash-logo-wrap) et le logo texte (.splash-logo-txt) —
demande de Christophe, 2026-08-19. */
gap: 20px;
}
#splash-screen.splash-sortie { opacity: 0; pointer-events: none; }
/* Écran "Tournez votre appareil" — bloque l'usage de l'application en mode paysage sur
smartphones/tablettes (demande de Christophe, 2026-08-13). Règle dupliquée en CSS critique
inline dans index.html (voir commentaire là-bas) pour être active dès le premier paint. Cible
uniquement le tactile via hover:none + pointer:coarse — jamais un écran d'ordinateur, qui est
intrinsèquement "paysage" mais piloté à la souris. z-index 10000 : au-dessus de #splash-screen
(9999) et de tout le reste (.modal-overlay à 3000). */
#ecran-rotation-requise {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: #191557;
color: #fff;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 24px;
text-align: center;
}
#ecran-rotation-requise p {
margin: 0;
font-size: 16px;
font-weight: 600;
max-width: 280px;
line-height: 1.5;
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
#ecran-rotation-requise { display: flex; }
}
.splash-logo-wrap {
position: relative;
width: 82.5%;
max-width: 330px;
}
.splash-logo {
display: block;
width: 100%;
height: auto;
}
.splash-logo-teinte {
position: absolute;
inset: 0;
display: none;
/* Non utilisé sur guide.icilago.eu (logo affiché sans teinte, voir main.js) — mask-image
laissé sans URL en dur, logo désormais configurable en console (Réglages > Paramètres >
ÉCRAN SPLASH > "Choisir le logo :", demande de Christophe, 2026-08-19). */
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* Remplace le texte "ICILAGO GUIDE" (ancien .splash-titre,
retiré du HTML) — logo texte
propre à cette application (console > Applications > fiche > Informations > "Choisir le logo
txt app"), affiché SOUS le logo symbole (.splash-logo-wrap), sans masque/teinte — demande de
Christophe, 2026-08-19. */
.splash-logo-txt {
display: block;
width: 60%;
max-width: 220px;
height: auto;
}
#app {
max-width: 480px;
margin: 0 auto;
min-height: 100vh;
/* 100dvh (hauteur de viewport DYNAMIQUE) en repli : sur Safari mobile/tablette, 100vh ne tient
pas compte du rétrécissement de la zone visible quand la barre d'adresse/outils du navigateur
est affichée — le contenu du bas de page peut alors se retrouver sous cette barre, invisible
et impossible à atteindre en scroll dans les vues où le défilement est verrouillé (signalé
sur tablette par Christophe, capture iPad, 2026-08-19). Propriété redéclarée : les
navigateurs qui ne connaissent pas dvh ignorent cette ligne et gardent la valeur 100vh
ci-dessus.
RATCHET --h-max RETIRÉ le 2026-09-04 (voir icilago-guide-bande-blanche-fond-accueil-paint-bug
en mémoire) : figeait #app sur la plus grande hauteur jamais vue, cachant le contenu sous les
barres du navigateur quand celles-ci restent réellement affichées. Retour à 100vh/100dvh en
attendant une version avec debounce. */
min-height: 100dvh;
background: var(--color-bg);
display: flex;
flex-direction: column;
position: relative;
}
/* Regroupe tout ce qui doit "glisser" quand le menu latéral s'ouvre (en-tête, vues,
navigation basse) — reproduit ici la même disposition flex/colonne que #app appliquait
directement à ces éléments auparavant, une fois déplacés d'un niveau. Le panneau du menu
et son fond assombri restent en dehors, donc immobiles.
padding-bottom (comme padding-top) vit ici et pas sur #app, pour la même raison : dès que
la poussée du menu applique un transform à #app-contenu, celui-ci devient le bloc de
confinement des éléments position:fixed ancrés en bas (bottom-nav, cartes "Accès visiteur"
en bottom:50px…). Si le padding restait sur #app, le bord bas de #app-contenu remonterait
de cette hauteur et ces éléments "bottom:X" se retrouveraient décalés vers le haut à
l'ouverture du menu — bug observé sur les blocs Accès libre / Accès connecté.
#panel-raccourcis-interets (voir plus bas) a été sorti d'#app-contenu le 2026-09-01 pour la
même famille de raisons : bien que #app-contenu n'ait pas de transform actif hors `.pousse`,
sa `transition: transform` permanente semble suffire, dans certains moteurs, à perturber
l'ordre d'empilement de ses descendants position:fixed (le panneau restait visuellement
par-dessus #app-header malgré z-index:18 < 20). Sorti du DOM d'#app-contenu, dans index.html,
au même niveau que le menu latéral. */
#app-contenu {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding-bottom: var(--nav-height);
transition: transform 0.25s ease;
}
#app-contenu.pousse { transform: translateX(135px); }
/* Sur desktop/tablette large, #app est centré (max-width:480px; margin:0 auto) avec de la marge
blanche des 2 côtés — sans ceci, la translateX(135px) de #app-contenu.pousse ci-dessus pousse
visuellement le bord droit du contenu (header/vues/nav) à DÉBORDER de #app dans cette marge, où
rien ne le recouvre plus (le voile #menu-lateral-backdrop reste, lui, calé sur la largeur de
#app) : une bande de contenu net/non flouté apparaissait à droite de la colonne floutée
(2026-09-01, capture Christophe à l'appui). Scopé à l'état ouvert via :has() (pas un
overflow:hidden permanent sur #app) pour ne rien changer au repos. */
#app:has(#app-contenu.pousse) { overflow-x: hidden; }
/* ---------- Header ---------- */
.app-header {
height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
background: var(--color-primary);
color: #fff;
position: sticky;
top: 0;
z-index: 20;
}
/* Quand la fiche détail est ouverte, le header (z-index:20) passe SOUS le voile/flou de
#modal-event-detail (.modal-overlay, z-index:3000, plein écran) : la "Flèche retour" y devenait
visible-mais-floutée et non cliquable — signalé par Christophe, captures à l'appui, 2026-08-20.
1er correctif via :has() resté sans effet (toujours flouté/non cliquable, screenshot de
confirmation) : repli sur un pilotage JS explicite (classe posée/retirée par
actualiserMasquageContenuSousFiche(), voir main.js), plus robuste/direct qu'un sélecteur
:has() imbriqué. Bien en-dessous de #splash-screen/l'écran de rotation forcée (z-index
9999/10000), qui doivent rester au-dessus de tout dans tous les cas. */
.app-header.au-dessus-fiche {
z-index: 3001;
}
/* Titre/sous-titre du header remplacés par la ville + l'accroche du flyer tant que la fiche est
ouverte (texte posé en JS, voir appliquerTitreHeaderFiche() dans main.js) — mêmes tailles que
sous la photo de la fiche (organisePar 20px / evt.titre 16px, voir openEventDetail()), demande
de Christophe, 2026-08-30. */
#app-header.au-dessus-fiche h1 { font-size: 20px; text-align: right; }
/* Phrase d'accroche (evt.titre, sous-titre du header pendant que la fiche est ouverte) : 14px
repassée à 13px — demande de Christophe, 2026-08-31. */
#app-header.au-dessus-fiche .header-sous-titre { font-size: 13px; text-align: right; }
/* Texte aligné à droite (pas centré) tant que la fiche est ouverte — demande de Christophe,
2026-08-30. Repositionné en absolute, ancré par "right" (PAS "margin-left:auto" dans le flux
flex, essayé d'abord) : #btn-filtres reste réservé dans le flex (visibility:hidden, voir plus
bas) pour ne pas casser le CENTRAGE des autres écrans (voir icilago-guide-header-titre-centrage-
absolu), donc un positionnement flex "flush contre le voisin de droite" collait le texte contre
le bord GAUCHE de cette réserve invisible, pas contre le bord réel du bandeau bleu. Demande de
Christophe (mesure exacte prise sur events.icilago.eu, même fonctionnalité) : marge de 24px
entre le texte et le bord droit RÉEL, quelle que soit la largeur de l'icône filtres réservée.
"right:24px" ignore totalement cette réserve — écart garanti exact. left/transform remis à
"auto"/"none" pour annuler le centrage horizontal de la règle de base (.header-titre-groupe),
PAS "top" : cf. la même leçon que le centrage vertical du titre (icilago-guide-header-titre-
centrage-absolu) — top explicite cassait le rendu sur smartphone (zone de sécurité iOS), donc
toujours laissé à sa valeur par défaut ici aussi (position statique verticale, pilotée par le
flex du header). align-items:flex-end aligne le bloc lui-même à droite ; text-align:right
(ci-dessus, sur h1/.header-sous-titre) aligne en plus le TEXTE dans les lignes qui passent à la
ligne (le sous-titre est plus long que le header, voir capture de Christophe). */
#app-header.au-dessus-fiche .header-titre-groupe {
left: auto;
right: 24px;
transform: none;
align-items: flex-end;
}
/* Icône filtres masquée tant qu'une fiche est ouverte (demande de Christophe, 2026-08-30) —
visibility:hidden (PAS display:none/.hidden) pour que le bouton conserve sa place dans le flex
du header : #app-header utilise justify-content:space-between entre la flèche retour (gauche)
et cette icône (droite), avec le titre centré entre les deux. En display:none, il ne reste plus
que 2 enfants et le titre "Autour de vous" se retrouve poussé tout à droite au lieu de rester
centré (régression repérée par Christophe sur PC, capture à l'appui, corrigée le même jour). */
#app-header.au-dessus-fiche #btn-filtres {
visibility: hidden;
pointer-events: none;
}
/* Groupe titre + sous-titre : centré HORIZONTALEMENT par position absolue (left:50% +
translateX), PAS par le flex/justify-content:space-between du header — demande de Christophe,
2026-08-30 : l'ancien décalage fixe "-10px" (compensait la différence de largeur entre le
bouton hamburger et le bouton filtres) donnait un centrage correct UNIQUEMENT quand ces 2
boutons précis étaient ceux affichés de part et d'autre. Dès que le bouton de gauche change
(#btn-retour-fiche, plus étroit que le hamburger, affiché pendant qu'une fiche est ouverte), le
même "-10px" ne compense plus correctement et le titre se retrouve légèrement décalé par
rapport à la page principale (signalé par Christophe, captures comparatives à l'appui). Le
centrage horizontal absolu ignore totalement la largeur des boutons de chaque côté : la
position du titre est désormais IDENTIQUE partout, quel que soit le bouton affiché à
gauche/masqué à droite.
VOLONTAIREMENT PAS de "top"/transform vertical ici (top reste "auto") : un enfant position:
absolute d'un conteneur flex SANS top/bottom explicites garde sa "position statique" pour l'axe
vertical, càd exactement la position qu'il aurait eue en flux normal (centrée par le
align-items:center de #app-header) — comportement standard du modèle Flexbox. Un essai
précédent avec top:50%+translateY(-50%) cassait ce centrage vertical SPÉCIFIQUEMENT sur
smartphone (≤1024px) : à cette largeur, #app-header passe en box-sizing:content-box avec un
padding-top ajouté pour la zone de sécurité iOS (encoche/barre de statut, voir plus bas dans ce
fichier) — top:50% se résout alors par rapport à la boîte de PADDING (donc en incluant cette
zone), tandis que les boutons/icônes (height:100%, alignés par le flex normal) restent, eux,
centrés dans la seule boîte de CONTENU (sous le padding) — d'où un titre remonté visuellement
dans la zone de l'encoche, capture à l'appui. Laisser "top" à sa valeur par défaut élimine ce
problème : la position verticale suit alors la même logique flex que les icônes, sur PC, tablette
ET smartphone. #app-header sert de bloc de confinement pour l'axe horizontal (position:sticky
sur PC, position:fixed sur ≤1024px — les deux valent "relative" pour un enfant en absolute). */
.header-titre-groupe {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.app-header h1 {
font-size: 17px;
font-weight: 600;
margin: 0;
}
/* Sous-titre "xx Évènement(s) aujourd'hui" sous le titre "Près de vous" (en-tête bleue) —
demande explicite du 2026-07-31. Masqué par défaut (.hidden), affiché/rempli uniquement par
showView()/renderVisitorList() quand #view-visiteur-liste est la vue active : ce texte n'a de
sens que pour "Près de vous" (compte des évènements du jour dans le rayon/filtres courants).
La hauteur supplémentaire nécessaire est ajoutée à --header-height UNIQUEMENT sur cette vue
(voir #app:has(#view-visiteur-liste.active) ci-dessous) : comme tout le reste de l'app (contenu,
panneau filtres, fiche évènement) se positionne via cette même variable, la bascule se propage
automatiquement sans toucher chaque règle une par une, et redevient 70px partout ailleurs. */
.header-sous-titre {
margin: 0;
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,0.82);
text-align: center;
}
.header-sous-titre.hidden { display: none; }
/* --header-height déclaré sur BODY (pas #app) depuis le 2026-08-20 : #modal-filtres/
#modal-filtres-carte sont des enfants directs de
(pas de #app), donc une variable CSS
redéfinie seulement sur #app ne leur était jamais transmise (les propriétés custom suivent
l'arbre du DOM, pas une simple portée globale) — le panneau Filtres restait donc positionné
sur l'ancien --header-height: 70px même sur les vues à en-tête 2 lignes (88px), chevauchant le
bas du bandeau bleu (signalé par Christophe, captures guide + events, 2026-08-20). body:has()
voit n'importe quel descendant quelle que soit sa profondeur, donc ce même sélecteur couvre à
la fois #app (contenu) et #modal-filtres (popup) sans dupliquer la règle. */
body:has(#view-visiteur-liste.active) { --header-height: 88px; }
/* Fiche ouverte (#modal-event-detail) : header toujours 2 lignes (ville + accroche, voir
appliquerTitreHeaderFiche() dans main.js), quelle que soit la vue en dessous (Carte/Favoris
n'ont normalement qu'une ligne) — même bump 88px que "Près de vous"/"Mon compte" ci-dessus,
pour ne jamais risquer un débordement/chevauchement avec des caractères plus grands (20px/16px,
voir .au-dessus-fiche h1/.header-sous-titre) — demande de Christophe, 2026-08-30. */
body:has(#modal-event-detail:not(.hidden)) { --header-height: 88px; }
/* "Mon compte" : titre + palier actuel (sous-titre) alignés à droite plutôt que centrés — demande
de Christophe, 2026-08-18. Scopé à cette vue uniquement (:has()), le reste (ex. "Près de vous")
garde le centrage existant. */
#app:has(#view-visiteur-compte.active) .header-titre-groupe {
align-items: flex-end;
/* Décalé à 20px du bord droit (au lieu du centrage horizontal par défaut) — demande de
Christophe, 2026-08-31. Même technique que #app-header.au-dessus-fiche (fiche évènement) :
left:auto/transform:none annulent le centrage par position absolue de la règle de base
(.header-titre-groupe), remplacés par un positionnement direct depuis la droite. */
left: auto;
right: 20px;
transform: none;
}
#app:has(#view-visiteur-compte.active) .header-sous-titre { text-align: right; }
body:has(#view-visiteur-compte.active) { --header-height: 88px; }
.app-header .back-btn, .app-header .icon-btn {
background: none;
border: none;
color: #fff;
font-size: 20px;
padding: 6px;
cursor: pointer;
line-height: 1;
}
/* "Flèche retour" clignotante (Icone_0206 <-> Icone_0198) : occupe la même place que le bouton
hamburger dans le header pendant que la fiche détail est ouverte — déplacée du dessous de la
photo (rangée d'icônes) vers la barre bleue, demande de Christophe, 2026-08-20. Affichage/
masquage piloté par actualiserMasquageContenuSousFiche() (main.js), pas par openEventDetail :
bouton statique désormais, plus recréé à chaque ouverture. Animation clignotante reprise à
l'identique de l'ancien emplacement (2 images superposées, opacité en miroir, 1 clignotement/s). */
#btn-retour-fiche {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 6px;
}
#btn-retour-fiche img { width: 32px; height: 32px; }
#btn-retour-fiche img.icone-retour-frame-b { position: absolute; inset: 0; margin: auto; }
#btn-retour-fiche img.icone-retour-frame-a { animation: clignoter-icone-retour-a 1s steps(1) infinite; }
#btn-retour-fiche img.icone-retour-frame-b { animation: clignoter-icone-retour-b 1s steps(1) infinite; }
@keyframes clignoter-icone-retour-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes clignoter-icone-retour-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
/* Icône "Retour" fixe (Icone_0217, sans clignotement) réservée au smartphone/tablette — masquée
par défaut (PC), affichée à la place des 2 images clignotantes via le média query ≤1024px plus
bas dans ce fichier — demande de Christophe, 2026-08-20. */
#btn-retour-fiche img.icone-retour-mobile { display: none; }
/* Icône hamburger blanche, agrandie à 3x (200% de plus que la taille de base des icônes
de l'en-tête, 20px → 60px). display:flex + align-items:center pour centrer verticalement
le glyphe dans le bouton (sinon les métriques de la police le décalent visuellement). */
#btn-menu-hamburger {
color: #fff;
font-size: 60px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
/* Icône filtres (3 ronds, en-tête "Près de vous" + "Carte") : masquée par défaut, visible
uniquement quand la vue active est #view-visiteur-liste OU #view-visiteur-carte — via :has()
plutôt qu'un style inline en JS, pour ne jamais entrer en conflit de priorité CSS avec cette
règle. Même hauteur pleine que le hamburger, pour un alignement visuel identique. Sur "Carte",
ouvre #modal-filtres-carte (Type uniquement) au lieu de #modal-filtres — voir
panneauFiltresVisiteurActifId() dans main.js, même principe que panneauFiltresActifId() côté
annonceurs.icilago.eu ("Autour de moi") : demande de Christophe (2026-08-05), configurer
Carte à l'identique de "Autour de moi". */
#btn-filtres {
color: #fff;
display: none;
align-items: center;
justify-content: center;
height: 100%;
}
#btn-filtres svg { width: 47.5px; height: 47.5px; transform: translateY(8px); }
#app:has(#view-visiteur-liste.active) #btn-filtres,
#app:has(#view-visiteur-carte.active) #btn-filtres { display: flex; }
/* Bascule "Liste"/"Icônes" de "Mes favoris", déplacée dans la barre bleue du header — demande de
Christophe, 2026-08-31 ("comme sur Autour de vous"), 20px du bord droit (10px puis 20px, même
jour), centrée verticalement.
CORRIGÉ le même jour (bug identique remonté côté events.icilago.eu, "le texte et le nombre ne
sont pas centrés horizontalement", capture à l'appui — même code copié ici, même défaut) : la
1re version en position:absolute sortait ce bouton du flux flex de .app-header. Sur "Mes
favoris", #btn-filtres est display:none (masqué SANS réserver sa place, contrairement au cas
#app-header.au-dessus-fiche qui utilise visibility:hidden pour ça) : il ne restait donc plus
que 2 enfants flex visibles (hamburger + groupe titre), et justify-content:space-between
poussait le groupe titre tout à droite du header — pile sous ce bouton posé en absolute au même
endroit, d'où le chevauchement/texte tronqué (visible dès que le titre "Mes XX favoris" est
devenu plus long que "Mes favoris"). Fix : bouton réintégré au flux flex normal (plus de
position/top/transform), au même titre que #btn-filtres — la ligne redevient un vrai triptyque
à 3 enfants (hamburger / titre centré / ce bouton) quel que soit l'écran, exactement comme
#btn-filtres le fait déjà sur Près de vous/Carte. `margin-right:6px` (+ le padding 0 14px de
.app-header) pour retrouver les ~20px du bord demandés. Centrage vertical hérité de
`.app-header { align-items:center }`, pas besoin de height:100%/transform ici. Fond blanc +
cadre blanc de 2px (même badge circulaire que .fav-toggle sur les vignettes) : icône
Icone_0302/0304.png laissée dans sa couleur d'origine (PAS de filter:brightness(0) invert(1),
retiré ici — nécessaire tant que le bouton était nu sur le bleu, devenu inutile/contre-productif
une fois posé sur fond blanc). */
#btn-toggle-affichage-favoris {
display: none;
align-items: center;
justify-content: center;
margin-right: 6px;
padding: 4px;
background: #fff;
border: 2px solid #fff;
border-radius: 50%;
}
#btn-toggle-affichage-favoris img { width: 24px; height: 24px; display: block; }
#app:has(#view-visiteur-favoris.active) #btn-toggle-affichage-favoris { display: flex; }
/* Bouton menu (☰) désactivé sur l'écran "Créer un compte visiteur" (demande du 2026-07-28) : le
menu latéral n'a pas de sens avant d'avoir un compte créé. Même technique :has() que
#btn-filtres ci-dessus. */
#app:has(#view-visiteur-register.active) #btn-menu-hamburger { display: none; }
/* Une fois le hamburger masqué ci-dessus, le titre devient le seul enfant visible de la barre :
justify-content:space-between le pousserait alors tout à gauche (au lieu de rester centré
entre deux boutons). margin:auto sur l'axe flex le recentre ; position:static annule le
centrage horizontal par position absolue de .header-titre-groupe (inutile/redondant ici
puisqu'il n'y a plus qu'un seul enfant visible dans le header). transform:none obligatoire en
plus de position:static : "transform" s'applique indépendamment de la valeur de "position" —
sans cette ligne, le translateX(-50%) de .header-titre-groupe continuait à décaler le titre
même après repassage en position:static, le recentrant deux fois (margin:auto + translateX). */
#app:has(#view-visiteur-register.active) #header-titre-groupe {
position: static;
transform: none;
margin: 0 auto;
}
/* Panneau de filtres : ancré sous l'en-tête (à droite, y compris sur PC — le "transform" sur
l'overlay crée un nouveau bloc de confinement pour sa feuille en position fixed, qui
s'aligne donc sur la colonne centrée de 480px, comme le header, pas sur le bord réel de
l'écran). Fond blanc, 200px de large, hauteur qui suit son contenu (pas de bottom:0) avec
30px d'espace sous le dernier texte plutôt que d'occuper toute la hauteur de l'écran.
#modal-filtres-carte (Type uniquement, vue "Carte") partage exactement ce même habillage —
demande de Christophe (2026-08-05) : configurer Carte à l'identique de "Autour de moi". */
#modal-filtres, #modal-filtres-carte {
top: 0;
right: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
align-items: flex-start;
justify-content: flex-end;
/* Fond assombri en fondu enchaîné plutôt qu'en instantané : transparent au repos, la
classe .filtres-visible (ajoutée en JS un cran après le retrait de .hidden, pour laisser
le temps au navigateur de peindre l'état de départ) l'amène à la même valeur sombre que
les autres modales (voir --modal-overlay-opacite, règle juste en dessous). */
background: rgba(0,0,0,0);
transition: background 0.25s ease;
}
/* Fond assombri + flou UNIFIÉS avec toutes les autres popups (2026-09-01) — reviennent sur le
réglage fin scopé à ces 2 panneaux uniquement (blur 4px / rgba 0.02) fait plus tôt le même jour :
Christophe a explicitement demandé ensuite "Toutes les applications auront la meme valeurs (1
seul réglage)" pour le blur/fond de TOUTES les popups (console > Réglages > Paramètres >
"FLOUTAGE ET FOND PANNEAU", voir --modal-blur-px/--modal-overlay-opacite ci-dessous et
[[icilago-console-floutage-fond-panneau-global]]) — ces 2 panneaux suivent donc maintenant la
même variable globale que .modal-overlay, au lieu d'une valeur fixe qui leur était propre. */
#modal-filtres.filtres-visible, #modal-filtres-carte.filtres-visible { background: rgba(0,0,0,var(--modal-overlay-opacite, 0.5)); }
#modal-filtres, #modal-filtres-carte { backdrop-filter: blur(var(--modal-blur-px, 6px)); -webkit-backdrop-filter: blur(var(--modal-blur-px, 6px)); }
/* z-index sous le header (20), PAS 3000 hérité de .modal-overlay — demande de Christophe,
2026-09-01 : "je veux que le panneau apparaisse depuis le dessous du header pas par dessus,
juste l'effet d'apparition". Même technique que #panel-raccourcis-interets (voir plus bas dans
ce fichier) : contenu inchangé, seul l'empilement change, pour donner l'impression que le
panneau sort de sous la barre bleue au lieu de glisser par-dessus.
#modal-filtres-carte INCLUS depuis le 2026-09-01 ("applique le meme traitement") : utilisé
au-dessus de la carte Leaflet (vue "Carte"), dont les contrôles internes montent jusqu'à
z-index:~1000 (voir commentaire sur .modal-overlay plus haut) — un z-index:18 aurait dû se faire
recouvrir par la carte, résolu en isolant #map-container dans son propre contexte d'empilement
(position:relative + z-index:0, voir ce sélecteur plus haut dans ce fichier) : les panes
Leaflet ne rivalisent plus avec le z-index de la page. */
#modal-filtres, #modal-filtres-carte { z-index: 18; }
#modal-filtres .modal-sheet, #modal-filtres-carte .modal-sheet {
position: fixed;
/* + env(safe-area-inset-top) (2026-07-31, même correction que #modal-event-detail, voir
[[icilago-events-fiche-evenement-safe-area-top]]) : sans elle, le panneau mordait sur la
barre bleue d'en-tête sur les écrans avec encoche/Dynamic Island. 0 sans encoche : aucun
effet sur les autres écrans. */
top: calc(env(safe-area-inset-top, 0px) + var(--header-height));
right: 0;
left: auto;
bottom: auto;
width: 200px;
max-width: 200px;
max-height: none;
border-radius: 0;
margin: 0;
padding: 14px 14px 30px;
background: #fff;
color: var(--color-text);
overflow-y: auto;
/* Déroulé du haut vers le bas : replié au-dessus de l'en-tête (translateY(-100%) de sa
propre hauteur), déplié pile sous l'en-tête (translateY(0), position définie par le top
ci-dessus). */
transform: translateY(-100%);
transition: transform 0.25s ease;
/* Signalé par Christophe, 2026-08-20 : sur smartphone/tablette (PAS sur PC), taper sur "Tous"
ne fait rien. Cause probable — déjà rencontrée sur #modal-event-detail pour un symptôme
voisin sur tablette, voir plus bas dans ce fichier — : Safari mobile "avale" le 1er tap sur
un élément tout en haut d'une zone tout juste devenue défilante (overflow-y:auto) pour
distinguer tap/scroll. Mêmes 2 propriétés ajoutées ici par précaution (non confirmé sans
test sur device réel, à valider par Christophe). */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
#modal-filtres.filtres-visible .modal-sheet, #modal-filtres-carte.filtres-visible .modal-sheet { transform: translateY(0); }
/* Ombre blanche (flou 10px, .modal-sheet de base) retirée sur ce panneau — demande de
Christophe, 2026-08-20. Ne garde que l'ombre de profondeur ; le liseret coloré défilant
(border/background/animation, base .modal-sheet) n'est PAS concerné, laissé inchangé. */
#modal-filtres .modal-sheet, #modal-filtres-carte .modal-sheet { box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
/* cursor:pointer (2026-09-01) : ce texte ferme désormais le panneau au clic (voir
cablerFermetureClicPanneauFiltres() dans main.js) — demande de Christophe, "Ajoute l'icone main
aussi pour le clic sur le texte 'centres d'intérets'". */
#modal-filtres .hint, #modal-filtres-carte .hint { color: var(--color-text-muted); font-size: 11px; margin: 14px 0 4px; cursor: pointer; }
/* Textes agrandis d'une taille (2026-08-21) PUIS de 2 tailles supplémentaires (même jour,
2e demande) — guide UNIQUEMENT : .hint 11->12->14px, .filter-pill 11.5->12.5->14.5px,
.filtre-groupe-classe summary 12->13->15px. */
#modal-filtres .hint, #modal-filtres-carte .hint { font-size: 14px; }
#modal-filtres .hint:first-child, #modal-filtres-carte .hint:first-child { margin-top: 0; }
/* Ligne de séparation sous le titre "Centres d'intérêts" ajoutée le 2026-08-20 puis retirée le
même jour (demande de Christophe : "enleve le traits sous centres d'intérets") — border-bottom
supprimé, seul le majuscule forcé (demande suivante) reste. */
#modal-filtres .hint, #modal-filtres-carte .hint { text-transform: uppercase; }
/* Titre en rouge (demande de Christophe, 2026-08-20) : couvre les 3 états du titre dynamique
(racine "Centres d'intérêts", nom du centre d'intérêt, nom du thème sélectionné — voir
renderInteretFilterBar() dans main.js), un seul
à la fois. Plus en gras
(font-weight normal) depuis le 2026-08-21 : "Les centres d'intérêts, thèmes et sujets doivent
être en régular". L'exception "PAS de rouge" pour le niveau 2/thème (class "hint-sujet",
demande du 2026-08-20) a été ANNULÉE le 2026-08-21 ("met en rouge le thème") — le thème est
donc à nouveau rouge comme les 2 autres niveaux, .hint-sujet ne sert plus qu'à documenter ce
niveau dans le DOM (aucun style propre restant). */
#modal-filtres .hint, #modal-filtres-carte .hint { color: var(--color-danger, #c04848); font-weight: 400; }
/* Icône retour (Icone_0198.png) à gauche du titre dynamique, demande de Christophe, 2026-08-21 :
clic = remonter d'un niveau (voir renderInteretFilterBar() dans main.js). Absente au niveau
racine (pas de niveau au-dessus) : .hint garde alors sa marge habituelle, .hint-row se comporte
comme un simple conteneur transparent autour d'elle. Titre collé au plus proche à droite de
l'icône (3e demande du 2026-08-21, "déplace au plus proche à droite de l'icone le texte" —
remplace le centrage flex:1/text-align:center essayé juste avant, abandonné) : .hint reprend sa
largeur naturelle, justify-content:flex-start (comportement par défaut) le colle juste après
l'icône, à 15px d'écart (gap ci-dessous). */
/* gap 6px -> 15px (demande de Christophe, 2026-08-21, "Déplace le texte à 15 px de l'icone"). */
#modal-filtres .hint-row, #modal-filtres-carte .hint-row { display: flex; align-items: center; gap: 15px; }
/* Espace supplémentaire entre "Tous" et la ligne icône/texte en dessous (demande de Christophe,
2026-08-21) : s'ajoute au gap de 10px déjà posé par .filter-bar (règle plus haut) — scopé via
:has() à la ligne AVEC icône uniquement (pas la racine, où .hint-row n'a pas "Tous" au-dessus
d'elle mais en dessous, voir renderInteretFilterBar()). */
#modal-filtres .hint-row:has(.hint-icone-retour), #modal-filtres-carte .hint-row:has(.hint-icone-retour) { margin-top: 10px; }
/* margin: 0 UNIQUEMENT quand l'icône retour est présente (demande de Christophe, 2026-08-21,
"centre le texte verticalement par rapport à l'axe de l'icone") : .hint garde par défaut une
marge haut/bas ASYMÉTRIQUE (14px/4px, héritée de la règle de base ci-dessus) — avec
align-items:center sur .hint-row, cette asymétrie décale le texte vers le bas par rapport au
centre réel de l'icône (le centrage flexbox porte sur la boîte AVEC marges, pas sur le seul
contenu). Scopé via :has() pour ne PAS retirer la marge au niveau racine (pas d'icône, .hint
garde alors sa marge habituelle pour l'espacement avec "Tous" en dessous). */
#modal-filtres .hint-row:has(.hint-icone-retour) .hint, #modal-filtres-carte .hint-row:has(.hint-icone-retour) .hint { margin: 0; }
#modal-filtres .hint-icone-retour, #modal-filtres-carte .hint-icone-retour {
flex-shrink: 0;
width: 18px;
height: 18px;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
#modal-filtres .hint-icone-retour img, #modal-filtres-carte .hint-icone-retour img { width: 100%; height: 100%; display: block; }
/* Filtres en texte seul, sans badge/pastille : liste verticale simple. Espace entre les items
(2px -> 10px, demande de Christophe, 2026-08-21 "Ajoute un espace entre les items") — nouvelle
règle scopée #modal-filtres UNIQUEMENT ci-dessous, la base ci-dessus (partagée avec
#modal-filtres-carte) reste à 2px pour ne pas toucher le filtre Type de la vue Carte. */
#modal-filtres .filter-bar, #modal-filtres-carte .filter-bar { display: flex; flex-direction: column; overflow: visible; gap: 2px; }
#modal-filtres .filter-bar, #modal-filtres-carte .filter-bar { gap: 10px; }
#modal-filtres .filter-pill, #modal-filtres-carte .filter-pill {
flex-shrink: 0;
background: none;
border: none;
border-radius: 0;
padding: 4px 0;
font-size: 11.5px;
color: var(--color-text);
text-align: left;
white-space: normal;
/* Ajouté avec le correctif ci-dessus (voir #modal-filtres .modal-sheet) pour le même
signalement "Tous" muet sur mobile/tablette : supprime le délai ~300ms de détection
double-tap-zoom sur ces pastilles tactiles, seconde piste possible en plus du scroll. */
touch-action: manipulation;
cursor: pointer;
}
#modal-filtres .filter-pill.active, #modal-filtres-carte .filter-pill.active { background: none; color: var(--color-primary); font-weight: 700; text-decoration: underline; }
/* Sujet sélectionné en rouge (demande de Christophe, 2026-08-21, "Met en rouge l'item sujet") :
seul cas restant de .filter-pill.active dans #modal-filtres (les pastilles "Tous les thèmes de
X"/"Tous les sujets de Y" ont été supprimées) — cohérent avec le rouge déjà utilisé pour le
centre d'intérêt/thème sélectionné (.hint). #modal-filtres-carte concerné depuis le 2026-09-01
(même filtre Intérêt/Thème/Sujet qu'#modal-filtres, voir #filter-interet-bar-carte). */
#modal-filtres .filter-pill.active, #modal-filtres-carte .filter-pill.active { color: var(--color-danger, #c04848); }
/* Texte agrandi d'une taille (2026-08-21) PUIS de 2 tailles supplémentaires (même jour, 2e
demande) — étendu à #modal-filtres-carte le 2026-09-01 (même filtre, même contenu). Sujets déjà
en régular par défaut (pas de font-weight ici), rien à changer pour la demande "régular". */
#modal-filtres .filter-pill, #modal-filtres-carte .filter-pill { font-size: 14.5px; }
/* Pastille "Tous" (texte fixe, pas une valeur console) forcée en majuscules — demande de
Christophe, 2026-08-20, cohérence visuelle avec les noms de Centres d'intérêt. */
#modal-filtres .filter-pill-tous, #modal-filtres-carte .filter-pill-tous { text-transform: uppercase; }
/* Traits de séparation entre sujets (demande de Christophe, 2026-08-21, "ajoute les traits dans
le filtre 'sujets'") : même trait que .filtre-groupe-classe (centres d'intérêt/thèmes) juste en
dessous, absent sur le 1er sujet de la liste. Classe dédiée .filter-bar-sujets (voir main.js)
pour ne pas ajouter ce trait sur "Tous" (aussi un .filter-pill direct de la .filter-bar
externe). */
#modal-filtres .filter-bar-sujets .filter-pill, #modal-filtres-carte .filter-bar-sujets .filter-pill { border-top: 1px solid var(--color-border, #e5e7eb); padding-top: 10px; }
/* padding-top du 1er sujet aligné sur celui de .filtre-groupe-classe summary (8px, "padding: 8px
0") — demande de Christophe, 2026-08-21 : le même espace Centre d'intérêt->Thème (10px de gap
+ 8px de padding du 1er summary = 18px) se retrouve entre Thème->Sujet. Avant ce correctif,
c'était 4px ici (padding d'origine de .filter-pill), donnant un espace visiblement plus court. */
#modal-filtres .filter-bar-sujets .filter-pill:first-child, #modal-filtres-carte .filter-bar-sujets .filter-pill:first-child { border-top: none; padding-top: 8px; }
/* Accordéon Centres d'intérêts > Thèmes (.filtre-groupe-classe, nom hérité de l'ancien
regroupement "Types évènments par Classe", retiré depuis — voir renderInteretFilterBar() dans
main.js). Les pastilles restent stylées par les règles ci-dessus (#modal-filtres
.filter-bar/.filter-pill), simplement imbriquées un niveau plus profond — les sélecteurs
descendants s'appliquent sans changement. Étendu à #modal-filtres-carte le 2026-09-01 (même
filtre Intérêt/Thème/Sujet, même contenu). */
#modal-filtres .filtre-groupe-classe, #modal-filtres-carte .filtre-groupe-classe { border-top: 1px solid var(--color-border, #e5e7eb); }
#modal-filtres .filtre-groupe-classe:first-of-type, #modal-filtres-carte .filtre-groupe-classe:first-of-type { border-top: none; }
#modal-filtres .filtre-groupe-classe summary, #modal-filtres-carte .filtre-groupe-classe summary {
cursor: pointer;
list-style: none;
padding: 8px 0;
/* Agrandi d'une taille (2026-08-21) PUIS de 2 tailles supplémentaires (même jour) : 12->13->15px.
Plus en gras (font-weight normal) depuis le 2026-08-21 : "Les centres d'intérêts, thèmes et
sujets doivent être en régular". */
font-size: 15px;
font-weight: 400;
color: var(--color-text);
display: flex;
justify-content: space-between;
align-items: center;
}
#modal-filtres .filtre-groupe-classe summary::-webkit-details-marker, #modal-filtres-carte .filtre-groupe-classe summary::-webkit-details-marker { display: none; }
/* Flèche ▾ en CSS content::after REMPLACÉE par une vraie icône (Icone_0214.png, demande de
Christophe, 2026-08-21) : voir remplirSummaryAvecIconeFleche() dans main.js — span (texte) +
img (.icone-fleche-groupe) ajoutés comme vrais enfants du , justify-content:
space-between (ci-dessus) les écarte comme avant. La rotation au clic ne s'applique plus (les
groupes ne se déplient plus en place depuis la navigation par niveaux, voir plus haut). */
#modal-filtres .icone-fleche-groupe, #modal-filtres-carte .icone-fleche-groupe { margin-left: 8px; flex-shrink: 0; width: 13px; height: 13px; }
/* Conteneur gauche du (pastille couleur + texte, voir remplirSummaryAvecIconeFleche()
dans main.js) — regroupe ces 2 éléments pour que le (justify-content:space-between)
garde exactement 2 enfants directs (ce conteneur + la flèche), sans écarter la pastille du
texte. */
#modal-filtres .summary-groupe-conteneur-gauche, #modal-filtres-carte .summary-groupe-conteneur-gauche { display: flex; align-items: center; min-width: 0; }
/* Pastille couleur du centre d'intérêt (Niveau 1 des filtres, demande de Christophe 2026-08-28 :
"ajoute un rond à la couleur du centre d'intérêt à gauche du nom"), même couleur que le repère
sur la carte (getInteretColor(), voir eventMarkerColor() dans main.js). Absente pour les
thèmes/sujets (pas de couleur en console à ce niveau, voir call site). Étendu à
#modal-filtres-carte le 2026-09-01. */
#modal-filtres .filtre-pastille-couleur-interet, #modal-filtres-carte .filtre-pastille-couleur-interet { width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
#modal-filtres .filtre-groupe-classe .filter-bar, #modal-filtres-carte .filtre-groupe-classe .filter-bar { padding-bottom: 10px; }
/* Menu latéral coulissant, ouvert depuis l'icône hamburger de l'en-tête. Ombre légère
uniquement sur le côté droit du panneau (décalage horizontal positif, pas de flou vertical).
L'ancre est positionnée via --menu-anchor-left, une variable CSS mise à jour en JS
(syncMenuLateralAnchor() dans main.js) à partir de la position RÉELLE de l'en-tête
(getBoundingClientRect), plutôt que recalculée indépendamment en CSS — deux calculs
séparés avec la même formule (position:fixed + left:50% + transform + max-width:480px)
pouvaient diverger de quelques pixels selon la largeur de fenêtre. Ainsi le panneau est
toujours pile aligné sur le bord gauche réel de l'en-tête. Largeur = celle du panneau
(135px, portée à cette valeur le 2026-09-01, était 125px avant) avec overflow:hidden : replié
(translateX(-100%) du panneau), il sort entièrement de cette bande et devient invisible ;
déplié, il la remplit exactement. */
.menu-lateral-anchor {
position: fixed;
top: 0;
left: var(--menu-anchor-left, 0px);
bottom: 0;
width: 135px;
z-index: 500;
pointer-events: none;
overflow: hidden;
/* transform:translateZ(0) retiré de la règle de base et SCOPÉ au-delà de 480px ci-dessous
(2026-09-02, suite à une régression) : établit un bloc de confinement pour les descendants
position:fixed (voir le commentaire de .menu-lateral juste en dessous — sans ça, overflow:
hidden ci-dessus ne clippait RIEN). Nouveau bug découvert avec ce correctif : le panneau
FERMÉ (translateX(-100%), .menu-lateral ci-dessous) se décale de sa propre largeur par
rapport à --menu-anchor-left — sur mobile (--menu-anchor-left≈0) ce décalage sort bien du
VRAI bord gauche du navigateur, invisible SANS AUCUN besoin de confinement ; le confinement
n'est donc utile QUE sur desktop large (#app centré, --menu-anchor-left grand), où le panneau
fermé retombait sinon dans la marge grise à gauche de l'app (encore DANS le viewport) au lieu
de sortir de l'écran. Or transform (même translateZ(0)) crée aussi un nouveau contexte de
composition GPU : suspecté d'être la cause d'une "bande blanche" persistante en bas de
l'accueil, constatée UNIQUEMENT sur iPhone 15 Pro Max (pas sur un iPhone 16e), signalée par
Christophe le 2026-09-02 — cet élément est position:fixed/top:0/bottom:0 (pleine hauteur) et
donc TOUJOURS présent dans le DOM dès le premier écran, y compris sur mobile où il n'apportait
jusqu'ici aucun bénéfice fonctionnel. Restreint donc à la largeur où il sert réellement (voir
@media plus bas) — 3 correctifs différents tentés côté #app/.hero sans succès avant de
remonter à cette cause. Voir aussi icilago-annonceurs-2-menus-lateraux-simultanes.md (mémoire
projet, bug de confinement découvert sur annonceurs.icilago.eu). */
}
@media (min-width: 481px) {
.menu-lateral-anchor { transform: translateZ(0); }
}
.menu-lateral {
position: fixed;
top: 0;
/* left:0, RELATIF à .menu-lateral-anchor (voir son commentaire ci-dessus, transform:translateZ(0)
en fait le bloc de confinement de ce panneau) — plus relatif à la fenêtre comme avant. */
left: 0;
bottom: 0;
width: 135px;
background: #fff;
transform: translateX(-100%);
transition: transform .25s ease;
overflow-y: auto;
pointer-events: auto;
/* 10px sous la barre de statut du smartphone (heure/encoche), pas juste sous le haut de
l'écran : le logo doit rester à distance constante de l'heure sur tous les appareils. */
padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
display: flex;
flex-direction: column;
align-items: center;
}
.menu-lateral-logo-btn { background: none; border: none; padding: 0; cursor: pointer; display: block; text-align: center; }
.menu-lateral-logo { width: 70px; height: auto; }
.menu-lateral-logo-label { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
/* Trait entre le logo et l'icône : 20px sous le logo, 5px avant le haut de l'icône suivante
(espacement volontairement asymétrique), largeur 115px = 135px du panneau - 10px - 10px,
centré par le align-items:center du parent flex. */
.menu-lateral-separateur {
width: 115px;
height: 2px;
margin-top: 20px;
margin-bottom: 5px;
background: #191557;
border: none;
}
/* Icône d'accès au profil visiteur, sous le trait (espacement porté par la marge basse du
trait ci-dessus, pas de marge supplémentaire ici). */
.menu-lateral-icone {
margin-top: 0;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
}
.menu-lateral-icone img { width: 60px; height: 60px; }
/* 5px entre l'icône et le texte ; 5px sous le texte avant le trait qui suit. */
.menu-lateral-icone-label { margin-top: 0; margin-bottom: 10px; font-size: 12px; color: var(--color-text-muted); }
/* Un trait après une icône (ex. sous "Mon compte") n'a pas sa propre marge du dessus : l'espace
de 5px est déjà porté par la marge basse du texte ci-dessus. Sa marge du dessous (10px,
héritée de .menu-lateral-separateur) reste inchangée pour espacer l'icône suivante. */
.menu-lateral-icone + .menu-lateral-separateur { margin-top: 0; }
/* L'ombre n'est appliquée qu'une fois le panneau ouvert : repliée, même clippée par
overflow:hidden sur l'ancre, elle déborderait de ~11px (décalage 3px + flou 8px) dans la
zone visible juste à côté de l'en-tête, car ce débordement reste À L'INTÉRIEUR des bornes
de l'ancre et n'est donc jamais coupé — c'était la bande grise visible à tort. */
.menu-lateral.ouvert {
transform: translateX(0);
box-shadow: 3px 0 8px rgba(0,0,0,0.15);
}
/* Voile flouté à l'ouverture du menu latéral, même traitement que l'ouverture d'une popup (voir
.modal-overlay : rgba(0,0,0,0.5) + blur(6px)) — demande de Christophe, 2026-08-20, toutes
applications (events/guide/annonceurs). La transition existante sur opacity (0→1) fait
apparaître voile ET flou ensemble en fondu, pas d'un coup.
Valeurs pilotées par console > Réglages > Paramètres > "FLOUTAGE ET FOND PANNEAU" (variables
--modal-blur-px/--modal-overlay-opacite posées par appliquerCouleursEnvironnementDepuisApi() au
démarrage, voir js/main.js) — demande de Christophe, 2026-09-01. Fallback = valeurs historiques. */
.menu-lateral-backdrop {
position: fixed;
/* top/right/bottom/left/width/max-width AU LIEU DE inset:0 (2026-09-01) : même correctif que
.modal-overlay plus bas (voir son commentaire pour le détail) — le voile ne doit couvrir que
la colonne de l'application (480px), pas toute la largeur du navigateur. */
top: 0;
right: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
background: rgba(0,0,0,var(--modal-overlay-opacite, 0.5));
backdrop-filter: blur(var(--modal-blur-px, 6px));
-webkit-backdrop-filter: blur(var(--modal-blur-px, 6px));
z-index: 499;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.menu-lateral-backdrop.visible { opacity: 1; pointer-events: auto; }
/* "À propos" : modale classique (#modal-apropos, voir .modal-overlay/.modal-sheet), plus de
cadre latéral dédié. Centrée à l'écran (RÈGLE POUR TOUS LES POPUPS de l'app, faits et à
venir — voir mémoire) plutôt qu'en feuille du bas, même technique de centrage indépendant
du flex que les autres modales ci-dessous. */
#modal-apropos .modal-sheet {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
max-width: 420px;
max-height: 80vh;
max-height: 80dvh; /* repli dvh (2026-09-02), voir #app en haut du fichier pour l'explication complete */
border-radius: 16px;
margin: 0;
}
#modal-apropos p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--color-text); }
/* Popup "Rechercher" (icône navigation basse) : même centrage indépendant du flex que
#modal-apropos ci-dessus — demande de Christophe, 2026-08-31. */
#modal-recherche .modal-sheet {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
max-width: 420px;
max-height: 80vh;
max-height: 80dvh; /* repli dvh (2026-09-02), voir #app en haut du fichier pour l'explication complete */
border-radius: 16px;
margin: 0;
}
/* Icône 29.png à droite de "Service clients" (À propos), tooltip au survol/clic — demande de
Christophe, 2026-08-21, guide ET events. Même recette CSS que .icone-sous-photo/.detail-icone-
legende[data-tooltip] déjà utilisées ailleurs dans l'app (voir plus haut) : bouton (focusable au
tap, contrairement à un , donc :focus déclenche aussi le tooltip sur mobile/tactile, pas
seulement :hover). Pas de transition (affichage immédiat, demande explicite). */
.icone-service-clients-tooltip {
position: relative;
display: inline-flex;
vertical-align: middle;
border: none;
background: none;
padding: 0;
margin-left: 4px;
cursor: pointer;
}
.icone-service-clients-tooltip img { width: 30px; height: 30px; display: block; }
/* Disparition automatique de TOUTES les tooltips CSS pures de ce fichier après 5s MAXIMUM, même si
le survol/focus/appui persiste au-delà — demande de Christophe, 2026-08-30, "pour toutes les
applications" (voir aussi events/annonceurs/console). Sans ça, un tooltip pouvait rester affiché
indéfiniment (souris immobile dessus, ou :focus qui persiste sur mobile après un tap tant que
l'utilisateur ne touche pas ailleurs). Deux variantes selon que l'apparition était déjà
INSTANTANÉE (.icone-service-clients-tooltip, .detail-icone-legende — pas de transition) ou EN
FONDU ~150ms (.icone-sous-photo — transition:opacity .15s déjà posée) : reproduit l'apparition
d'origine à l'identique, seule la disparition à 5s est nouvelle. Si le survol/focus se termine
AVANT 5s (cas normal), l'animation est retirée avec le sélecteur :hover/:focus/:active et la
disparition reprend l'ancien comportement (transition 150ms ou instantané) — inchangé. */
@keyframes icilago-tooltip-auto-hide-instant {
0%, 98% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes icilago-tooltip-auto-hide-fade {
0% { opacity: 0; }
3% { opacity: 1; }
98% { opacity: 1; }
100% { opacity: 0; }
}
.icone-service-clients-tooltip[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 8px;
background: var(--color-primary);
color: #fff;
font-size: 12px;
line-height: 1.3;
padding: 6px 10px;
border-radius: 6px;
white-space: normal;
width: 220px;
opacity: 0;
pointer-events: none;
z-index: 20;
}
.icone-service-clients-tooltip[data-tooltip]:hover::after,
.icone-service-clients-tooltip[data-tooltip]:focus::after,
.icone-service-clients-tooltip[data-tooltip]:active::after {
animation: icilago-tooltip-auto-hide-instant 5s ease forwards;
}
#modal-apropos a { color: var(--color-primary); }
/* "Installer l'application" (PWA) : même règle de centrage que toutes les popups de l'app. */
#modal-installer-pwa .modal-sheet {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
max-width: 360px;
max-height: 80vh;
max-height: 80dvh; /* repli dvh (2026-09-02), voir #app en haut du fichier pour l'explication complete */
border-radius: 16px;
margin: 0;
}
#modal-installer-pwa p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--color-text); }
/* Détail d'une mention légale (contenu chargé depuis /mentions-legales, propre à l'application
courante), ouvert depuis la liste de #modal-apropos. Même règle de centrage. */
#modal-mention-legale .modal-sheet {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
max-width: 420px;
max-height: 80vh;
max-height: 80dvh; /* repli dvh (2026-09-02), voir #app en haut du fichier pour l'explication complete */
overflow-y: auto;
border-radius: 16px;
margin: 0;
}
#mention-legale-contenu { font-size: 13.5px; line-height: 1.5; color: var(--color-text); }
/* Popups restants qui n'avaient pas encore été centrés (suppression de compte, abonnement,
position manuelle, réservation, paiement) — même règle : tous les popups doivent être
centrés à l'écran, pas en feuille du bas. */
#modal-suppr-etape1 .modal-sheet,
#modal-suppr-etape2 .modal-sheet {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
max-width: 360px;
max-height: 80vh;
max-height: 80dvh; /* repli dvh (2026-09-02), voir #app en haut du fichier pour l'explication complete */
border-radius: 16px;
margin: 0;
}
#modal-abonnement .modal-sheet {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
max-width: 420px;
max-height: 80vh;
max-height: 80dvh; /* repli dvh (2026-09-02), voir #app en haut du fichier pour l'explication complete */
border-radius: 16px;
margin: 0;
}
/* "Type d'accès" (après vérification e-mail), même technique de centrage. Peut désormais s'ouvrir
PAR-DESSUS d'autres pop-ups déjà affichées (#modal-abonnement, #modal-apropos — voir
[[icilago-apropos-voir-differents-acces]]) : toutes les .modal-overlay partagent le même
z-index:3000, donc c'est l'ORDRE DANS LE DOM qui décide laquelle passe au-dessus en cas
d'égalité. #modal-type-acces est plus TÔT dans le DOM que #modal-apropos (index.html) — sans
z-index dédié, elle s'ouvrait donc DERRIÈRE "À propos" au lieu de passer devant, signalé par
Christophe, 2026-08-21. z-index:3001 la fait désormais toujours passer au-dessus, quel que soit
son ordre dans le DOM par rapport à la pop-up depuis laquelle elle est ouverte. */
#modal-type-acces { z-index: 3001; }
#modal-type-acces .modal-sheet {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
max-width: 420px;
max-height: 80vh;
max-height: 80dvh; /* repli dvh (2026-09-02), voir #app en haut du fichier pour l'explication complete */
border-radius: 16px;
margin: 0;
}
/* Détail d'un palier ("!"/"Actuel", ouvert PAR-DESSUS #modal-type-acces sans le refermer) : 10px
de moins de large de chaque côté que son popup parent ci-dessus (demande de Christophe,
2026-08-13, "sous popup" 10px plus étroite à droite et à gauche — se répète à chaque fois
qu'une popup s'ouvre par-dessus une autre déjà ouverte, voir aussi #modal-fil-messagerie-visiteur
et #modal-voir-affiche plus bas). z-index:3002 (1 de plus que #modal-type-acces, voir juste
au-dessus) pour rester par-dessus même maintenant que #modal-type-acces a son propre z-index
dédié — sinon ce sous-popup se retrouverait en dessous de son propre parent. */
#modal-detail-palier { z-index: 3002; }
#modal-detail-palier .modal-sheet {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 60px);
max-width: 400px;
max-height: 80vh;
max-height: 80dvh; /* repli dvh (2026-09-02), voir #app en haut du fichier pour l'explication complete */
border-radius: 16px;
margin: 0;
}
/* Popup "informations" (icône à côté d'un service/info perso dans le détail palier) — même
centrage que ci-dessus mais en propre (demande explicite du 2026-07-28) : largeur réduite de
20% (calc(80% - 32px)/336px = 0.8 * calc(100% - 40px)/420px), fond rouge très clair, position
relative pour ancrer l'icône de fermeture (193.png) en absolu à 5px du haut et de la droite. */
#modal-commentaire-service-visiteur .modal-sheet {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(80% - 32px);
max-width: 336px;
max-height: 80vh;
max-height: 80dvh; /* repli dvh (2026-09-02), voir #app en haut du fichier pour l'explication complete */
border-radius: 16px;
margin: 0;
background: #fff0f0;
}
/* Une ligne par palier = une carte colorée (niveaux_acces.couleur, réglé en console) contenant
le nom du palier + un bouton par durée (mois/année, prix HT — demande explicite du
2026-07-28, plus de conversion de devise réelle : voir mémoire) + un bouton rond "!" ouvrant
le détail, à côté de la carte. */
.type-acces-ligne { display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.type-acces-carte {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 12px;
border-radius: 10px;
color: #fff; /* repli : la couleur réelle est posée en inline par renderTypeAccesModal(),
calculée pour contraster avec la couleur de fond (niveau.couleur, réglable en
console) — voir couleurTexteContrastee() dans main.js. */
}
/* Nom du palier forcé en majuscules (demande de Christophe, 2026-08-14) : le nom vient désormais
d'un champ de saisie libre en console (renommage des paliers), la casse tapée par l'admin ne
doit pas rendre l'affichage incohérent d'une carte à l'autre ("Accès libre" / "BASIC" /
"Premium"...). Forcé ici en CSS plutôt qu'en JS pour rester correct avec les accents. */
.type-acces-carte strong { font-size: 15px; text-transform: uppercase; }
.type-acces-prix { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.type-acces-choix {
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.92);
color: #222;
font-size: 12.5px;
font-weight: 600;
padding: 5px 9px;
cursor: pointer;
}
/* Hérite de la couleur de texte posée sur .type-acces-carte (contraste calculé) plutôt qu'un
blanc fixe, sinon illisible sur les couleurs de palier claires (ex. jaune/or). */
.type-acces-tva { width: 100%; text-align: center; font-size: 10.5px; color: inherit; opacity: 0.85; }
/* Badge "Actuel" (palier réellement actif du visiteur) — remplace le prix/bouton "Gratuit" sur
la carte correspondante, clignote en vert — demande de Christophe, 2026-08-13. Même forme que
.type-acces-choix pour rester aligné visuellement avec les autres cartes. C'est un vrai