/* ============================================================================ responsive-fix.css — CORRECTIF D'AFFICHAGE (18/07/2026) Chargé si « site.responsive.fix_on » = 1, ou en aperçu avec ?respfix=1. Centre de contrôle → « Appli & mobile » → « Correctif d'affichage ». Toutes les règles sont préfixées « html.respfix ». ⚠️ FICHIER GÉNÉRÉ — éditer _fix/*.css puis reconcaténer. ============================================================================ */ /* ================= 00-socle.css ================= */ /* ========================================================================== 00 — SOCLE PARTAGÉ -------------------------------------------------------------------------- Tout est préfixé « html.respfix » : sans la classe sur , ce fichier ne peut RIEN changer. L'interrupteur admin site.responsive.fix_on (ou ?respfix=1) pose la classe. Éteindre = retour exact à l'état d'avant. Corrige R2, R3, R4, R5, R6, R14 (causes de fond communes à tout le site). ========================================================================== */ /* -------------------------------------------------------------------------- R4 — UNE SEULE SOURCE DE VÉRITÉ POUR LES DIMENSIONS DU CHROME Avant : 12 nombres concurrents (78 / 90 / 150 / 80 / 96 / 76vh / 84vh…) écrits à la main dans 8 fichiers. Aucun ne valait la vraie hauteur. Ici : des valeurs de REPLI, remplacées en direct par la mesure JS (responsive-fix.js) qui observe les vrais éléments. -------------------------------------------------------------------------- */ html.respfix { --hdr-h: 64px; /* .pub-topbar — VARIE (1 à 3 rangées) */ --bottomnav-h: calc(64px + env(safe-area-inset-bottom, 0px)); /* .bottom-nav — mesurée ~64px, pas 78 */ --fab-h: 52px; /* hauteur d'une pastille flottante */ --fab-l-w: 180px; /* « Aide & visite guidée » */ --fab-r-w: 70px; /* « Le Gardien » */ /* Réserves DÉDUITES — plus aucun nombre en dur ailleurs. */ --reserve-bas-desktop: calc(var(--fab-h) + 28px); --reserve-bas: calc(var(--bottomnav-h) + var(--fab-h) + 20px); /* Structure */ --pub-rail-w: clamp(96px, 7vw, 124px); /* R6 — ÉCHELLE D'EMPILEMENT UNIQUE ET DOCUMENTÉE. Avant : 26 valeurs au hasard, de 6 à 2147483000. */ --z-fond: -1; /* image de fond fixe */ --z-contenu: 1; /* cartes, halos, contenu */ --z-page: 50; /* absolus internes à une page */ --z-barres: 400; /* meubles fixes : barre du haut, rail, barre du bas */ --z-menus: 500; /* déroulants du chrome */ --z-flottants: 600; /* pastilles fixes : Gardien, Aide */ --z-voiles: 700; /* voiles plein écran */ --z-panneaux: 710; /* fenêtre posée SUR son voile */ --z-toast: 800; /* messages passagers */ --z-alertes: 900; /* bandeaux critiques */ } @media (max-width: 1200px) { html.respfix { --pub-rail-w: 96px; } } /* -------------------------------------------------------------------------- R3 — overflow-x:hidden → clip « hidden » crée un conteneur de défilement : il CASSE position:sticky sur tous les descendants (barre du haut, rail) ET masque silencieusement les débordements — c'est lui qui rendait le Passeport injoignable sans que personne ne le voie. « clip » coupe pareil MAIS ne casse pas sticky. Mesuré avant correctif : header 1495px de contenu pour 1334px de place, Passeport à 110px hors écran, aucune barre de défilement pour y accéder. -------------------------------------------------------------------------- */ html.respfix, html.respfix body { overflow-x: clip; max-width: 100%; } /* -------------------------------------------------------------------------- R6 — RÉAFFECTATION DES COUCHES (aucun nombre en dur, que des variables) -------------------------------------------------------------------------- */ html.respfix .pub-topbar { z-index: var(--z-barres); } html.respfix .pub-rail { z-index: var(--z-barres); } html.respfix .bottom-nav { z-index: var(--z-barres); } html.respfix .nav-main { z-index: var(--z-barres); } html.respfix .pub-lang-menu, html.respfix .phare-menu, html.respfix .pub-notif-panel, html.respfix .pub-cdp-panel { z-index: var(--z-menus); } html.respfix .pub-beta-badge::after { z-index: var(--z-menus); } html.respfix .gw-launcher, html.respfix .obw-launch { z-index: var(--z-flottants); } html.respfix .gw-scrim, html.respfix .obw-scrim, html.respfix .ob-tour-scrim, html.respfix .ro-overlay { z-index: var(--z-voiles); } html.respfix .gw-panel, html.respfix .obw-panel, html.respfix .ro-panel, html.respfix .bn-more-sheet { z-index: var(--z-panneaux); } html.respfix .bn-more-backdrop { z-index: var(--z-voiles); } html.respfix .ob-toast { z-index: var(--z-toast); } html.respfix #fdcn-maj-banner, html.respfix .dev-banner, html.respfix .dev-toggle { z-index: var(--z-alertes); } /* .pub-topbar porte backdrop-filter:blur(12px) → c'est un CONTEXTE D'EMPILEMENT à lui seul, quel que soit son z-index. Ses menus internes ne peuvent donc jamais dépasser la barre. Pour qu'un menu ouvert passe devant le Gardien et la barre du bas, on remonte la BARRE ENTIÈRE d'un cran. Classe posée en JS (pas de :has() — voir R1). */ html.respfix .pub-topbar.is-menu-open { z-index: var(--z-menus); } /* La rustine du 18/07 (.pub-phare-wrap{z-index:7}) faisait juste passer le Phare AU-DESSUS du badge Bêta : le recouvrement restait, seul le clic était rendu. Le groupe étant remis dans le flux (R1), elle devient inutile. */ html.respfix .pub-phare-wrap { z-index: auto; } /* -------------------------------------------------------------------------- R1 — LE HEADER REDEVIENT UNE VRAIE BARRE EN FLUX Cause : .pub-cdp-group (les 4 gros boutons) était sorti du flux (position:absolute + translate(-50%,-50%)) — il ne réservait donc AUCUNE place. 12 rustines empilées tentaient de rattraper ça, dont une qui ne marchait que sur les navigateurs comprenant :has(). Ici : remise en flux INCONDITIONNELLE (aucune dépendance à :has(), aucune exception pour page-dashboard) + retour à la ligne contrôlé. -------------------------------------------------------------------------- */ html.respfix .pub-topbar { flex-wrap: wrap; row-gap: 8px; column-gap: clamp(8px, 1vw, 14px); align-items: center; padding-block: clamp(9px, 1vh, 13px); padding-inline: clamp(12px, 1.6vw, 22px); } /* min-width:0 : sans lui, un enfant flex refuse de descendre sous sa taille de contenu et pousse la rangée en débordement. */ html.respfix .pub-topbar > * { min-width: 0; } /* Le groupe des 4 boutons : DANS le flux, sur toutes les pages, toujours. */ html.respfix .pub-cdp-group { position: static; left: auto; top: auto; transform: none; z-index: auto; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; gap: clamp(6px, .6vw, 10px); } /* LE NOM DU SITE NE PEUT PLUS ÊTRE ÉCRASÉ. Mesuré avant : largeur 0px pour un texte de 222px → il se dessinait entièrement PAR-DESSUS le champ de recherche. C'est ce que montrent les captures. Cause : flex-shrink par défaut + min-width:0 + white-space:nowrap et AUCUN contrôle de débordement. Correctif : il ne rétrécit plus (flex-shrink:0) ; et si un jour il devait quand même manquer de place, il se coupe proprement avec « … » au lieu de déborder sur le voisin. */ html.respfix .pub-topbrand { flex: 0 0 auto; min-width: 0; max-width: min(38ch, 34vw); } html.respfix .pub-topbrand-text { min-width: 0; } html.respfix .pub-topbrand-main, html.respfix .pub-topbrand-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.respfix .pub-topbrand-main { font-size: clamp(14px, 1.05vw, 16px); } html.respfix .pub-search { flex: 1 1 200px; min-width: 160px; max-width: 460px; } html.respfix .pub-actions { flex: 0 0 auto; margin-left: auto; gap: clamp(5px, .5vw, 8px); } /* ---- TRÈS grand écran (≥2100px) : une seule rangée. Seuil MESURÉ, pas choisi au hasard : le contenu de la barre demande ~2027px (nom 222 + recherche 460 + 4 boutons 814 + commandes 531 + espaces). Avec le rail (96px) et les marges, il faut ~2160px pour une seule rangée. Annoncer 1601px aurait été un mensonge : à 1920px ça ne tient pas, et c'est précisément pour ça que l'ancienne version débordait de 192px en silence derrière overflow:hidden. ---- */ @media (min-width: 2100px) { html.respfix .pub-cdp-group { flex: 0 1 auto; order: 3; } html.respfix .pub-actions { order: 4; } } /* ---- Ordinateur (901–2099px) : DEUX rangées maîtrisées. Rangée 1 : nom + recherche + Phare/cloche/passeport (les commandes). Rangée 2 : les 4 gros boutons, centrés, sur toute la largeur. C'est la seule façon honnête de faire tenir ~2027px de contenu dans 1334px : on ne cache aucun bouton, on descend d'une ligne. ---- */ @media (min-width: 901px) and (max-width: 2099px) { html.respfix .pub-topbrand { order: 1; } html.respfix .pub-search { order: 2; } html.respfix .pub-actions { order: 3; } html.respfix .pub-cdp-group { order: 4; flex: 1 1 100%; margin-inline: 0; justify-content: center; } /* Les libellés restent VISIBLES (on ne repasse pas en icône seule : la place existe maintenant qu'ils ont leur propre rangée). */ html.respfix .pub-cdp-group .pub-entraide, html.respfix .pub-cdp-group .pub-report-top, html.respfix .pub-cdp-group .pub-coupdepropre, html.respfix .pub-cdp-group .pub-addplace { padding: 10px clamp(12px, 1.2vw, 20px); gap: 8px; font-size: clamp(13px, .95vw, 15px); line-height: 1; } html.respfix .pub-cdp-group svg { width: 18px; height: 18px; } /* Le nom du membre revient : il y a la place sur la rangée 1. */ html.respfix .pub-profile .nm { display: block; } } /* Le badge Bêta ne peut plus chevaucher l'engrenage : il est dans le flux, il ne rétrécit pas, et il garde son propre espace. */ html.respfix .pub-beta-badge { flex: 0 0 auto; align-self: center; margin-inline-start: 2px; } /* -------------------------------------------------------------------------- R2 — LA BANDE MORTE 320–900px La règle header.php:544 s'ouvre à min-width:320px alors que son propre commentaire annonce 600px : elle déverse ~20 !important sur TOUS les téléphones et entre en conflit direct avec mobile-app.css. On lui rend sa borne annoncée en neutralisant sa partie basse. (!important nécessaire : les règles d'origine en portent déjà.) -------------------------------------------------------------------------- */ /* TROIS rangées, pas quatre : le nom seul, puis les raccourcis ET les commandes qui SE PARTAGENT une rangée, puis la recherche pleine largeur. Mesuré : donner sa propre rangée à .pub-actions faisait passer le header de 179px à 229px sur tablette — 50px volés au contenu pour rien. */ @media (max-width: 900px) { html.respfix .pub-topbar { flex-wrap: wrap !important; } html.respfix .pub-topbrand { flex: 1 1 100% !important; order: 1 !important; max-width: 100%; } /* (18/07) Sous 900px, la barre de PASTILLES (.pub-mbar) prend le relais : elle propose deja Entraide / Ajouter un lieu / Coup de propre / Signaler en icones seules. Les 4 gros boutons faisaient donc DOUBLE EMPLOI et occupaient deux rangees entieres. La regle qui les masquait vivait dans header.php, dans le bloc desactive quand ce correctif est allume : elle est reprise ici. */ html.respfix .pub-cdp-group { display: none !important; } html.respfix .pub-mbar { order: 2 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 2px 0 0 !important; } html.respfix .pub-actions { order: 3 !important; flex: 0 0 auto !important; width: auto !important; margin-left: auto !important; justify-content: flex-end !important; flex-wrap: nowrap !important; overflow-x: auto; } html.respfix .pub-search { order: 4 !important; flex: 1 1 100% !important; max-width: 100% !important; } /* iPhone : une police <16px déclenche le zoom automatique au focus. */ html.respfix .pub-search input { font-size: 16px; } } /* -------------------------------------------------------------------------- R14 — RAIL GAUCHE : largeur élastique, libellés jamais rognés Avant : 96px figés + un max-width:86px sur le libellé (borne inatteignable, donc code mort) et aucun retour à la ligne → « Voyageurs » s'affichait « oyageurs », « Compagnons » → « mpagnons ». -------------------------------------------------------------------------- */ /* ⚠️ UNIQUEMENT ≥901px. Sous 900px le rail est masqué (public-v802.css:187) et .pub-shell repasse à UNE colonne : forcer 2 colonnes ici enfermerait tout le contenu dans la colonne de 96px du rail (mesuré : barre du haut réduite à 96px de large sur un écran de 768px). */ /* ⚠️ NE JAMAIS REDÉCLARER grid-template-columns SUR .pub-shell. Erreur commise le 18/07 et corrigée le jour même — à ne pas refaire : la règle d'origine (public-v802.css:35) utilise DÉJÀ var(--pub-rail-w) ; il suffit donc de redéfinir la variable (plus haut) pour rendre le rail élastique. Redéclarer les colonnes ici était non seulement inutile, mais destructeur : ça écrasait la protection du site (includes/header.php:385) .pub-shell:not(:has(> .pub-rail)){grid-template-columns:1fr} qui repasse à UNE colonne quand le rail n'est pas rendu — ce qui est le cas pour tout VISITEUR NON CONNECTÉ. Résultat mesuré en production : .pub-main tombait dans la colonne de 96px du rail absent, et la page entière était réduite à un ruban de 96px de large sur toutes les pages publiques. */ @media (min-width: 901px) { html.respfix .pub-rail { overflow-x: clip; } } html.respfix .pub-rail-item { min-width: 0; } html.respfix .pub-rail-item span { max-width: 100%; min-width: 0; overflow-wrap: break-word; hyphens: auto; white-space: normal; text-align: center; font-size: clamp(10px, .72vw, 11.5px); line-height: 1.15; } /* -------------------------------------------------------------------------- R5 — RÉSERVE D'ESPACE EN BAS Avant : elle n'existait PAS sur ordinateur (la règle ne visait que ≤768px) et elle était absente entre 769 et 900px. Résultat : « Le Gardien » et « Aide & visite guidée » se posaient sur le contenu. Ici : réserve sur TOUTES les tailles, calculée depuis les hauteurs réellement mesurées, jamais depuis un nombre écrit à la main. -------------------------------------------------------------------------- */ html.respfix .pub-content, html.respfix main.container, html.respfix .site-footer { padding-bottom: calc(var(--reserve-bas-desktop) + env(safe-area-inset-bottom, 0px)); } @media (max-width: 900px) { html.respfix .pub-content, html.respfix main.container, html.respfix .site-footer { padding-bottom: calc(var(--reserve-bas) + env(safe-area-inset-bottom, 0px)); } } /* -------------------------------------------------------------------------- GARDE-FOU GLOBAL — plus aucun média ne peut élargir la page. -------------------------------------------------------------------------- */ html.respfix img, html.respfix video, html.respfix canvas, html.respfix iframe { max-width: 100%; } /* ================= 20-carte.css ================= */ /* ========================================================================== 20 — PAGE CARTE (R7) -------------------------------------------------------------------------- Tout est préfixé « html.respfix » ET scopé « body.page-carte » : sans la classe sur , ce fichier ne peut RIEN changer, et il ne peut jamais déborder sur une autre page. Les quatre défauts traités (audit R7) : (a) carte.php:110-114 — .pub-content.container{padding:0 !important} battait les trois réserves du site. La carte était la SEULE page sans filet en bas : « Le Gardien » et « Aide & visite guidée » se posaient sur la barre du Gardien du Feu. (b) carte.php:127 — height:76vh ne déduisait ni la barre du haut (qui mesure de 91 à 213px selon l'écran) ni la barre du Gardien, qui est placée HORS du shell (carte.php:1777). (c) carte.php:125 — grid-template-columns:300px 1fr 320px, colonnes figées. (d) carte.php:816 — .carte-right{display:none} SUPPRIMAIT un accès sous 1200px au lieu de le replier. Ce que ce fichier NE refait PAS (déjà traité par 00-socle.css) : la barre du haut, le rail gauche, overflow-x, l'échelle d'empilement, les réserves. ========================================================================== */ /* -------------------------------------------------------------------------- JETONS LOCAUX À LA PAGE --hdr-h, --reserve-bas*, --z-* viennent du socle : on ne les redéfinit pas. --carte-bar-h et --carte-outils-h sont MESURÉS en direct par le petit script de carte.php (gate respfix_on()), exactement comme le socle mesure --hdr-h. Les valeurs ci-dessous ne sont que des REPLIS : elles servent avant que le script ait mesuré, et si JavaScript est indisponible. ⚠️ Le script écrit ces variables sur ; elles sont donc déclarées ici sur le MÊME élément, sinon la déclaration écraserait la mesure. -------------------------------------------------------------------------- */ html.respfix body.page-carte { --carte-bar-h: 96px; /* .carte-gardien--bar — repli mesuré ~96px sur ordinateur */ --carte-outils-h: 0px; /* hauteur du bouton tiroir (0 quand il n'y en a pas) */ /* Repli 100vh, remplacé par 100dvh quand le navigateur sait le faire. 100dvh = hauteur RÉELLE hors barres du navigateur mobile ; 100vh est faux sur iOS/Android tant que la barre d'URL est déployée. */ --carte-vh: 100vh; /* La réserve du bas, reprise du socle, avec l'encoche des téléphones. Elle sert DEUX fois et c'est volontaire : — en padding-bottom de la page → le filet manquant (défaut a) ; — en déduction de la hauteur du shell → la barre du Gardien du Feu tient dans l'écran dès l'arrivée, sous les pastilles flottantes. Aucun double comptage : en-tête + shell + barre + réserve = une hauteur d'écran — TANT QUE le plancher ci-dessous n'entre pas en jeu. ⚠️ MESURÉ, à ne pas enjoliver : sur un téléphone (≤414px), l'en-tête monte à ~228px et la barre du Gardien à ~182px, soit 410px de meubles sur 740 à 896px d'écran. Le plancher du plan l'emporte alors et la page défile ; au repos les deux pastilles flottent donc par-dessus la barre du Gardien. Vérifié au banc : dès qu'on défile, le recouvrement retombe à 0 partout et la barre est entièrement lisible — la réserve joue son rôle, aucun accès n'est perdu. Le vrai levier est en amont (hauteur de l'en-tête), pas ici : le seul moyen de supprimer ce recouvrement au repos serait de ramener le plan à ~194px de haut sur un téléphone, ce qui rendrait la carte — le cœur de la page — inutilisable. On assume le défilement. */ --carte-reserve: calc(var(--reserve-bas-desktop) + env(safe-area-inset-bottom, 0px)); /* Colonnes ÉLASTIQUES. minmax(0,1fr) au centre est indispensable : c'est l'équivalent grille de min-width:0. Sans lui, une piste 1fr refuse de descendre sous la taille de son contenu et pousse la grille en débordement (c'est ce qui se passait avec le plan Leaflet). */ --carte-col-g: minmax(240px, 300px); --carte-col-d: minmax(260px, 320px); } @media (max-width: 900px) { html.respfix body.page-carte { --carte-reserve: calc(var(--reserve-bas) + env(safe-area-inset-bottom, 0px)); } } @supports (height: 100dvh) { html.respfix body.page-carte { --carte-vh: 100dvh; } } /* -------------------------------------------------------------------------- R6 — NEUTRALISATION DE LA RUSTINE carte.php:120 Cette page remontait la barre du haut à z-index:1100 pour repasser devant les calques Leaflet (jusqu'à 1000). Ce n'est plus nécessaire : .carte-map-wrap porte isolation:isolate (carte.php:407), donc les 1000 de Leaflet sont ENFERMÉS dans la carte et ne peuvent plus sortir. La barre reprend sa place dans l'échelle unique du site. ⚠️ La règle d'origine reste dans carte.php : on ne la supprime pas, on la recouvre. RETIRÉ LE 18/07 APRÈS CONTRÔLE QUALITÉ : la règle était ici un DOUBLON EXACT de 00-socle.css:61, et en plus non scopée body.page-carte — elle sortait donc du périmètre de cette page. Le socle s'en charge déjà pour tout le site. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- (a) LE FILET DU BAS REVIENT SUR LA PAGE CARTE La règle d'origine (padding:0 !important) est désormais retirée par carte.php quand l'interrupteur est allumé — c'était le SEUL moyen : aucune déclaration sans !important ne peut battre une déclaration !important, quelle que soit sa spécificité. Ici on rend le plein écran horizontal SANS toucher au filet du bas. -------------------------------------------------------------------------- */ html.respfix body.page-carte .pub-content.container { padding-top: 0; padding-inline: 0; /* plein écran horizontal, comme avant */ padding-bottom: var(--carte-reserve); /* le filet qui manquait */ max-width: 100%; } /* -------------------------------------------------------------------------- (b) + (c) LE SHELL : HAUTEUR CALCULÉE, COLONNES ÉLASTIQUES Avant : height:76vh — un nombre choisi à la main qui ne déduisait ni la barre du haut ni la barre du Gardien. C'est pour ça que le champ de recherche du panneau gauche passait sous la barre du haut sur certains écrans. -------------------------------------------------------------------------- */ html.respfix body.page-carte .carte-shell { grid-template-columns: var(--carte-col-g) minmax(0, 1fr) var(--carte-col-d); grid-template-rows: minmax(0, 1fr); height: calc(var(--carte-vh) - var(--hdr-h) - var(--carte-bar-h) - var(--carte-reserve)); /* Plancher : en dessous, le plan ne sert plus à rien. Il ne se déclenche que sur les petits téléphones, où les meubles mangent plus de la moitié de l'écran ; la page défile alors de quelques dizaines de pixels (mesuré au banc : 360×740 → 126px de défilement, tout reste atteignable). */ min-height: 420px; } /* ---- 901–1400px : panneaux réduits, le panneau droit passe en tiroir ---- */ @media (max-width: 1400px) { html.respfix body.page-carte { --carte-col-g: minmax(220px, 270px); } html.respfix body.page-carte .carte-shell { grid-template-columns: var(--carte-col-g) minmax(0, 1fr); } } /* ---- ≤900px : la carte prend toute la largeur, les DEUX panneaux en tiroir ---- */ @media (max-width: 900px) { html.respfix body.page-carte .carte-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } /* carte.php:843 fige le plan à « height:62vh; min-height:440px » sous 768px. Ces deux nombres ignorent la hauteur du shell, qui est désormais CALCULÉE : sur un téléphone (shell ramené à son plancher de 420px) le plan réclamait 440px, soit 20px de plus que sa case. Et .carte-shell porte overflow:hidden (carte.php:140) : le bas du plan — échelle, attribution OpenStreetMap — était donc coupé en silence, sans la moindre barre de défilement pour le signaler. C'est exactement le genre de défaut que « overflow:hidden » cache. Ici le plan reprend simplement la hauteur de sa case. « height:100% » et non « auto » : #map (carte.php:423) demande height:100%, un pourcentage qui a besoin d'un parent à la hauteur DÉFINIE. La case vaut minmax(0,1fr) dans une grille de hauteur connue : la chaîne tient. */ html.respfix body.page-carte .carte-map-wrap { height: 100%; min-height: 0; } } /* -------------------------------------------------------------------------- (d) LES TIROIRS — PLUS AUCUN ACCÈS SUPPRIMÉ Avant : .carte-right{display:none} entre 0 et 1199px. Le panneau « résultats / fiche du lieu » était donc INJOIGNABLE tant qu'aucun marqueur n'était cliqué : pas de bouton, pas de barre de défilement, rien. Ici : il redevient atteignable par un bouton, à toutes les tailles. Deux formes selon la place disponible : • 1200–1400px : panneau latéral qui glisse depuis la droite ; • ≤1199px : volet qui monte du bas — GÉOMÉTRIE IDENTIQUE à celle que carte.php:819-827 utilise déjà pour la fiche d'un lieu, pour qu'aucune des deux règles ne se contredise. La visibilité est portée par « visibility », pas par display : le tiroir fermé sort du parcours au clavier (comme il doit), et l'animation reste possible. On n'utilise NI display:none sur un bouton, NI marge négative, NI overflow:hidden pour masquer quoi que ce soit. -------------------------------------------------------------------------- */ @media (max-width: 1400px) { html.respfix body.page-carte .carte-right { display: flex; /* recouvre le display:none de carte.php:816 */ position: fixed; z-index: var(--z-panneaux); visibility: hidden; pointer-events: none; /* (23/07) fermé = non cliquable immédiatement (avant la fin du glissement) */ overflow-y: auto; overscroll-behavior: contain; background: rgba(6, 13, 30, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: transform .22s ease, visibility 0s linear .22s; } html.respfix body.page-carte .carte-right.is-drawer-open { visibility: visible; pointer-events: auto; transform: none; transition: transform .22s ease, visibility 0s; } } /* 1200–1400px : panneau latéral droit */ @media (min-width: 1200px) and (max-width: 1400px) { html.respfix body.page-carte .carte-right { top: var(--hdr-h); right: 0; bottom: 0; width: min(360px, 86vw); transform: translateX(100%); border-left: 1px solid rgba(0, 229, 255, 0.28); box-shadow: -14px 0 44px rgba(0, 0, 0, 0.55); padding-bottom: var(--carte-reserve); } } /* ≤1199px : volet du bas — mêmes valeurs que la fiche de lieu existante, pour que les deux systèmes ne se battent jamais. */ @media (max-width: 1199px) { html.respfix body.page-carte .carte-right { left: 0; right: 0; bottom: 0; top: auto; max-height: 85vh; transform: translateY(100%); border-radius: 18px 18px 0 0; border-top: 1px solid rgba(0, 229, 255, 0.28); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55); padding-bottom: env(safe-area-inset-bottom, 0px); } } /* ≤900px : le panneau gauche (recherche, « Ma position », zone, filtres) passe lui aussi en tiroir. AUCUN de ses outils n'est retiré : ils sont tous dans le tiroir, ouvert par un bouton toujours visible sur la carte. */ @media (max-width: 900px) { html.respfix body.page-carte .carte-left { position: fixed; top: var(--hdr-h); left: 0; bottom: 0; width: min(330px, 86vw); z-index: var(--z-panneaux); visibility: hidden; pointer-events: none; /* (23/07) fermé = non cliquable immédiatement (avant la fin du glissement) */ transform: translateX(-100%); overflow-y: auto; /* rétabli : carte.php:830 le passait à visible */ overscroll-behavior: contain; background: rgba(6, 13, 30, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 1px solid rgba(0, 229, 255, 0.28); /* rétabli : carte.php:830 le mettait à 0 */ border-bottom: 0; box-shadow: 14px 0 44px rgba(0, 0, 0, 0.55); padding-bottom: var(--carte-reserve); transition: transform .22s ease, visibility 0s linear .22s; } html.respfix body.page-carte .carte-left.is-drawer-open { visibility: visible; pointer-events: auto; transform: none; transition: transform .22s ease, visibility 0s; } } /* -------------------------------------------------------------------------- LES BOUTONS D'OUVERTURE — posés SUR le plan, jamais sur un panneau Ils vivent dans .carte-map-wrap (déjà position:relative + isolation:isolate). La bande qui les porte ne capte AUCUN clic : sans « pointer-events:none » elle empêcherait de faire glisser le plan sur toute sa largeur. -------------------------------------------------------------------------- */ html.respfix body.page-carte .carte-map-wrap { /* Échelle LOCALE, valable uniquement à l'intérieur du contexte d'empilement créé par isolation:isolate (carte.php:407). Les calques de Leaflet montent à 1000 dans ce contexte ; les variables --z-* du socle décrivent la page, pas l'intérieur du plan. Cette valeur ne peut PAS sortir de la carte. */ --z-carte-outils: 1010; } html.respfix body.page-carte .carte-drawer-bar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; z-index: var(--z-carte-outils); } html.respfix body.page-carte .carte-drawer-btn { pointer-events: auto; display: none; /* voir la note ci-dessous */ align-items: center; gap: 6px; min-height: 40px; /* cible tactile confortable */ padding: 9px 14px; border-radius: 20px; border: 1px solid rgba(0, 229, 255, 0.45); background: rgba(6, 13, 30, 0.90); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #9ff4ff; font: 700 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.42); transition: background .15s, border-color .15s; } html.respfix body.page-carte .carte-drawer-btn:hover, html.respfix body.page-carte .carte-drawer-btn[aria-expanded="true"] { background: rgba(0, 229, 255, 0.18); border-color: rgba(0, 229, 255, 0.75); } html.respfix body.page-carte .carte-drawer-btn:focus-visible { outline: 2px solid #00e5ff; outline-offset: 2px; } html.respfix body.page-carte .carte-drawer-btn svg { flex: 0 0 auto; } /* Chaque bouton n'apparaît QUE là où son panneau est en tiroir. Ce n'est pas « masquer un bouton pour gagner de la place » (interdit) : au-dessus de ces largeurs le panneau est ENTIÈREMENT visible dans la page, le bouton n'ouvrirait donc rien. On retire un doublon sans fonction, pas un accès — l'accès, lui, est toujours là, sous les yeux. */ @media (max-width: 1400px) { html.respfix body.page-carte .carte-drawer-btn[data-drawer="right"] { display: inline-flex; } } @media (max-width: 900px) { html.respfix body.page-carte .carte-drawer-btn[data-drawer="left"] { display: inline-flex; } } /* -------------------------------------------------------------------------- BOUTON « FERMER » DANS CHAQUE TIROIR Nécessaire : quand un tiroir est ouvert, il recouvre le bouton qui l'a ouvert. Sans lui, on pourrait rester enfermé dans le tiroir. Il ne s'affiche QUE lorsque le panneau est réellement en tiroir. -------------------------------------------------------------------------- */ html.respfix body.page-carte .carte-drawer-close { display: none; } @media (max-width: 1400px) { html.respfix body.page-carte .carte-right > .carte-drawer-close { display: flex; } } @media (max-width: 900px) { html.respfix body.page-carte .carte-left > .carte-drawer-close { display: flex; } } html.respfix body.page-carte .carte-drawer-close { position: sticky; top: 0; align-self: flex-end; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 10px 14px; min-height: 40px; border: 0; border-bottom-left-radius: 14px; background: rgba(6, 13, 30, 0.96); color: #9ff4ff; font: 700 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; /* Nommé plutôt qu'écrit en dur (contrôle qualité du 18/07) : ce n'est PAS une couche de l'échelle du site, seulement « au-dessus du contenu qui défile dans ce tiroir-ci ». La nommer évite qu'on la confonde un jour avec un --z-* global et qu'on la fasse grimper « pour voir ». */ --z-tiroir-fermeture: 2; z-index: var(--z-tiroir-fermeture); } html.respfix body.page-carte .carte-drawer-close:focus-visible { outline: 2px solid #00e5ff; outline-offset: -2px; } /* -------------------------------------------------------------------------- LEAFLET : ses commandes doivent rester ATTEIGNABLES • Le zoom (+/−) est en haut à gauche, exactement là où se pose le bouton « Filtres ». On le descend juste en dessous, au lieu de le recouvrir. • L'attribution OpenStreetMap est en bas à droite. mobile-app.css:244-247 la colle à 4px du bord AVEC !important ; la seule façon de la dégager est un !important de spécificité supérieure. C'est le seul de ce fichier. • La réserve du bas est déjà déduite de la hauteur du shell : la barre du Gardien du Feu ne peut donc plus recouvrir le bas du plan. -------------------------------------------------------------------------- */ html.respfix body.page-carte .carte-map-wrap .leaflet-top.leaflet-left { padding-top: var(--carte-outils-h); } html.respfix body.page-carte .carte-map-wrap .leaflet-bottom.leaflet-right { right: 12px !important; bottom: 12px !important; } html.respfix body.page-carte .carte-map-wrap .leaflet-bottom.leaflet-left { left: 12px; bottom: 12px; } /* -------------------------------------------------------------------------- ACCESSIBILITÉ — respect du réglage « moins d'animations » -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.respfix body.page-carte .carte-left, html.respfix body.page-carte .carte-right { transition: none; } } /* ================= 21-rien-oublier.css ================= */ /* ========================================================================== 21 — RIEN OUBLIER (cause R8) -------------------------------------------------------------------------- TOUT est préfixé « html.respfix ». Interrupteur éteint = page identique. LA CAUSE, en une phrase : sur cette page, TROIS règles mesuraient la même chose dans TROIS unités différentes. · le cluster (l.48) : min(80vh, 92vw) → dépend de la fenêtre · l'orbe (l.58) : clamp(292px, 38vmin, 392px) → PLANCHER DUR 292px · les pastilles (JS) : % du cluster Quand la fenêtre maigrit, le cluster maigrit, les pastilles se rapprochent du centre… mais le centre, lui, reste bloqué à 292px minimum. Il finit par passer PAR-DESSUS les pastilles : c'est exactement ça, « Véhicule » qui disparaît derrière « Cuisine ». Le plancher de 292px n'était pas un caprice : le titre était en white-space:nowrap dimensionné en vw — il refusait de se couper, donc il fallait bien lui garantir 292px. Les deux défauts se tiennent, on corrige les deux ensemble. ORDRE DU CORRECTIF (il y a un piège, voir §2) : §1 borner le cluster (--ro-d), libellés compris §2 SEULEMENT APRÈS : rendre .ro-stage visible (overflow) §3 l'orbe exprimé en % du cluster → centre et pastilles maigrissent ENSEMBLE, quoi qu'il arrive §4 mode alternatif « grille de cartes » quand le cercle ne tient plus §5 empilement (z-index) remis sur l'échelle du socle Le placement des pastilles (mesure réelle + écart garanti) est dans rien-oublier.php, sous respfix_on(). ========================================================================== */ /* -------------------------------------------------------------------------- §1 — LE CLUSTER EST BORNÉ, LIBELLÉS COMPRIS (à faire EN PREMIER) -------------------------------------------------------------------------- --ro-d = LE diamètre de référence. Une seule source, tout en dépend. Les trois bornes, et pourquoi : · LARGEUR — « 100% + le rembourrage − 140px ». Un libellé fait jusqu'à 120px de large et il est CENTRÉ sous sa pastille : il déborde donc du cercle de 60px de chaque côté (70px avec le halo). 2 × 70 = les 140px retirés. Le débord a le droit d'occuper le rembourrage du plateau (--ro-pad), pas un pixel de plus : au-delà il sortirait de la page, et le socle (overflow-x:clip) le couperait EN SILENCE — exactement le défaut qu'on est en train de corriger ailleurs. ⚠️ On mesure en « 100% du plateau », pas en vw : vw inclut la barre de défilement ET ignore le rail de gauche. Les deux erreurs se cumulaient dans l'ancien « 92vw » et donnaient un cercle 16 à 90px trop large. · HAUTEUR — 80 % de la hauteur utile, et surtout « hauteur réelle − chrome ». Une fenêtre 1400x600 n'a pas 600px de libres : il y a la barre du haut (--hdr-h, mesurée en direct, qui varie de 91 à 213px). C'est CETTE borne qui fait basculer les fenêtres larges mais basses. Un plancher de 320px empêche le cercle de devenir minuscule ; en dessous, c'est le mode grille (§4) qui prend le relais. -------------------------------------------------------------------------- */ html.respfix body.page-rien-oublier .ro-stage { --ro-vh: 100vh; /* repli pour les navigateurs sans dvh */ --ro-pad: clamp(12px, 3vw, 40px); /* = le rembourrage horizontal réel du plateau */ /* Ce qui est réellement consommé AU-DESSUS du cercle, et rien de plus : la barre du haut (mesurée en direct) et 60px d'air, dont les 26px de rembourrage du plateau et les 8px de marge du cluster. ⚠️ On n'y met PAS --reserve-bas-desktop : la page a le droit de défiler. L'y ajouter faisait perdre 12 à 27 % de diamètre sur TOUS les écrans et basculait en grille des cas qui tenaient très bien — mesuré. */ --ro-chrome: calc(var(--hdr-h) + 60px); --ro-d: min( calc(100% + 2 * var(--ro-pad) - 140px), max(320px, min( calc(var(--ro-vh) * 0.8), calc(var(--ro-vh) - var(--ro-chrome)) )) ); /* Part du cluster occupée par l'orbe. C'est le PREMIER barreau de l'échelle : le JS a le droit de descendre plus bas (34 %, 30 %…) avant d'abandonner le cercle — voir RO_ECHELLE dans rien-oublier.php. */ --ro-core-pct: 42; } @supports (height: 100dvh) { html.respfix body.page-rien-oublier .ro-stage { --ro-vh: 100dvh; } } /* Témoin de mesure : un bloc de hauteur nulle, invisible, qui porte TOUJOURS la largeur --ro-d — même quand le cluster est passé en mode grille. C'est lui que le JS mesure : sans lui, la décision « cercle ou grille » se prendrait sur une largeur qui dépend… du mode en cours, et la page oscillerait entre les deux à l'infini. */ html.respfix .ro-gauge { width: var(--ro-d); height: 0; margin: 0 auto; visibility: hidden; pointer-events: none; } @media (min-width: 901px) { html.respfix body.page-rien-oublier .ro-cluster { width: var(--ro-d); aspect-ratio: 1 / 1; } /* Le débord vertical des libellés (30px, voir RO_DEBORD_V dans le JS) prend sur le rembourrage en haut ; en bas, on lui rend explicitement sa place pour qu'il ne vienne jamais toucher la barre de boutons. */ html.respfix body.page-rien-oublier:not(.ro-grid) .ro-cluster { margin-bottom: 30px; } /* Fenêtre ouverte à côté (body.ro-aside) : le cercle n'a plus que la moitié gauche de l'écran. Même raisonnement, bornes réduites — et non plus un min(52vh, 38vw) qui ignorait à la fois les libellés ET le rail. Le cluster est décalé de 26vw vers la gauche : son centre tombe à 0,24vw + rail/2, la fenêtre commence à 47vw. Le côté le plus serré est la gauche (le rail), d'où la borne 46vw − rail − 140. */ html.respfix body.page-rien-oublier.ro-aside .ro-stage { --ro-d: min( calc(46vw - var(--pub-rail-w) - 140px), max(260px, min( calc(var(--ro-vh) * 0.52), calc(var(--ro-vh) - var(--ro-chrome)) )) ); } /* §1bis — LA BARRE D'ACTIONS SUIT LE HALO DÉCALÉ (fenêtre à côté, cercle gardé) --------------------------------------------------------------------------- En mode « fenêtre à côté » SANS grille, le cluster est décalé de 26vw vers la gauche (transform de la page, l.271 de rien-oublier.php) mais la barre .ro-actions, elle, restait centrée sur TOUTE la largeur : les boutons glissaient au centre/à droite, sous le panneau, et ne se trouvaient plus SOUS le halo. On lui applique le MÊME décalage et on la borne à la largeur du cercle (--ro-d) : elle reste centrée SOUS le halo, sans chevaucher les pastilles (qui sont plus haut) ni passer sous la fenêtre. (La variante grille.ro-aside est traitée au §4 : transform:none + colonne gauche — surcharge celle-ci grâce à la classe .ro-grid en plus.) */ html.respfix body.page-rien-oublier.ro-aside:not(.ro-grid) .ro-actions { width: var(--ro-d); max-width: var(--ro-d); margin-left: auto; margin-right: auto; transform: translateX(-26vw); } } /* -------------------------------------------------------------------------- §2 — LE PLATEAU REDEVIENT VISIBLE (à faire APRÈS §1, jamais avant) -------------------------------------------------------------------------- .ro-stage:43 portait overflow:hidden. Ce n'est pas une mise en page : c'est un couvercle. Les pastilles du bas ne « tenaient » pas, elles étaient COUPÉES — sans barre de défilement, donc sans aucun moyen de s'en apercevoir ni d'y accéder. Le retirer AVANT §1 ferait déborder la page pour de bon. Maintenant que le cluster est borné et que les 140px de libellés sont réservés, plus rien n'a besoin d'être coupé. Le socle garde de toute façon overflow-x:clip sur , donc aucune barre horizontale ne peut apparaître. -------------------------------------------------------------------------- */ html.respfix body.page-rien-oublier .ro-stage { overflow: visible; } /* -------------------------------------------------------------------------- §3 — L'ORBE EST EXPRIMÉ EN % DU CLUSTER -------------------------------------------------------------------------- C'est LE correctif de fond : le centre et les pastilles partagent désormais le même référentiel. Le cluster maigrit de 20 % → l'orbe maigrit de 20 % → l'écart entre les deux ne bouge pas. Plus aucun recouvrement possible, à aucune taille. container-type:inline-size fait de l'orbe une « boîte de référence » : ses textes se mesurent en cqw (pourcentage de la largeur DE L'ORBE) au lieu de vw (largeur de la FENÊTRE). C'est ce qui permet de lever le white-space:nowrap du titre sans qu'il ne casse jamais : il ne peut plus être trop grand pour son cercle. C'est aussi ce qui rend l'orbe capable de descendre à 30 % du cluster sans devenir illisible — et donc de sauver le cercle là où l'ancienne version basculait en liste. -------------------------------------------------------------------------- */ @media (min-width: 901px) { html.respfix body.page-rien-oublier .ro-core { width: calc(var(--ro-core-pct) * 1%); aspect-ratio: 1 / 1; container-type: inline-size; padding: 2.4%; /* % du cluster : suit le même référentiel */ } /* Le titre peut enfin revenir à la ligne. Il n'en aura presque jamais besoin (il rétrécit avec son cercle), mais il ne débordera plus JAMAIS. */ html.respfix body.page-rien-oublier .ro-title { white-space: normal; overflow-wrap: break-word; font-size: clamp(15px, 9.5cqw, 36px); line-height: 1.05; } html.respfix body.page-rien-oublier .ro-subtitle { font-size: clamp(9px, 3.8cqw, 14.5px); margin-top: 2cqw; } html.respfix body.page-rien-oublier .ro-sum { font-size: clamp(9px, 3.6cqw, 14px); gap: 1.8cqw; } html.respfix body.page-rien-oublier .ro-sum svg { width: clamp(10px, 3.9cqw, 15px); height: clamp(10px, 3.9cqw, 15px); flex: 0 0 auto; } html.respfix body.page-rien-oublier .ro-sum .nm { max-width: 62cqw; } html.respfix body.page-rien-oublier .ro-core-div { margin: 2.6cqw 0 2.4cqw; } /* Les boutons DANS l'orbe suivaient une taille fixe : sur un orbe rétréci ils sortaient du cercle. Ils suivent maintenant, eux aussi. */ html.respfix body.page-rien-oublier .ro-core .ro-cbtn { font-size: clamp(9.5px, 4.2cqw, 13px); padding: clamp(5px, 2.6cqw, 9px) clamp(8px, 5.5cqw, 18px); gap: clamp(3px, 1.8cqw, 7px); } html.respfix body.page-rien-oublier .ro-core .ro-cbtn svg { width: clamp(10px, 3.9cqw, 15px); height: clamp(10px, 3.9cqw, 15px); } html.respfix body.page-rien-oublier .ro-core-cta { gap: clamp(4px, 2.2cqw, 8px); margin-top: 3cqw; } html.respfix body.page-rien-oublier .ro-core .ro-alert { font-size: clamp(8.5px, 3.2cqw, 13px); padding: clamp(4px, 2.2cqw, 10px) clamp(6px, 3cqw, 12px); line-height: 1.4; } /* Un libellé sur deux lignes était aligné à gauche sous une pastille centrée : il « penchait ». Cosmétique, mais c'est le même défaut de référentiel que le reste. */ html.respfix body.page-rien-oublier .ro-node-lb { text-align: center; } } /* Pastilles : deux crans de compacité. Le JS descend l'échelle barreau par barreau — d'abord un gros orbe, puis un orbe plus petit, puis des pastilles plus compactes — et ne passe en grille QUE si le dernier barreau ne tient pas non plus. On garde le cercle le plus longtemps possible, sans jamais laisser deux pastilles se toucher. ⚠️ « ro-dense » vient de la feuille de la page, chargée APRÈS celle-ci : à spécificité égale elle gagnerait. D'où le préfixe html.respfix sur « ro-compact », qui doit pouvoir passer devant (le JS ne pose de toute façon jamais les deux classes en même temps). */ html.respfix .ro-cluster.ro-compact .ro-node-ic { width: 48px; height: 48px; } html.respfix .ro-cluster.ro-compact .ro-node-ic svg { width: 23px; height: 23px; } html.respfix .ro-cluster.ro-compact .ro-node-lb { font-size: 11px; max-width: 84px; } html.respfix .ro-cluster.ro-compact .ro-node-dot { min-width: 15px; height: 15px; font-size: 8.5px; } /* Gabarit de mesure : le JS en insère un exemplaire, lit sa taille RÉELLE, puis le retire. ⚠️ Spécificité VOLONTAIREMENT haute : il doit rester affichable même quand la page est en mode grille (où .ro-node est masquée) ou sur téléphone. Sinon la mesure vaudrait 0, le calcul repartirait sur des constantes, et le retour grille → cercle se ferait avec des pastilles « larges de 0 » qui s'empileraient toutes au même endroit. */ html.respfix body.page-rien-oublier .ro-cluster .ro-node.ro-probe { display: flex; left: 0; top: 0; visibility: hidden; pointer-events: none; } /* -------------------------------------------------------------------------- §4 — MODE ALTERNATIF : GRILLE DE CARTES -------------------------------------------------------------------------- Quand le cercle ne peut PLUS accueillir toutes les familles sans qu'elles se touchent, on ne rétrécit pas jusqu'à l'illisible et on n'en cache aucune : on change de mise en page. Le déclenchement se fait sur la largeur ET sur la hauteur — une fenêtre 1400x600 bascule, parce que --ro-d intègre la hauteur réellement libre. On réutilise les cartes .ro-card qui existaient déjà pour le téléphone : même balisage, mêmes compteurs, mêmes actions. Aucune famille, aucun bouton, aucun accès n'est perdu. Le résumé « Rien oublier » (l'orbe) repasse simplement au-dessus, en bandeau. -------------------------------------------------------------------------- */ @media (min-width: 901px) { html.respfix body.page-rien-oublier.ro-grid .ro-cluster { width: 100%; max-width: 100%; aspect-ratio: auto; transform: none; margin-top: 0; } html.respfix body.page-rien-oublier.ro-grid .ro-cluster::before, html.respfix body.page-rien-oublier.ro-grid .ro-ring, html.respfix body.page-rien-oublier.ro-grid .ro-node { display: none; } /* L'orbe devient un bandeau-résumé : même dégradé, même halo, même identité — il change de forme, pas de nature. */ html.respfix body.page-rien-oublier.ro-grid .ro-core { position: static; transform: none; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: auto; border-radius: 26px; padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2.2vw, 24px); } html.respfix body.page-rien-oublier.ro-grid .ro-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 22px; } html.respfix body.page-rien-oublier.ro-grid .ro-card { height: 100%; } /* Grille + fenêtre ouverte à côté : les cartes doivent rester à GAUCHE du panneau. ⚠️ MESURÉ AU NAVIGATEUR : un min(44vw, 100%) ne suffit pas, et c'est un piège classique. 44vw se compte depuis le bord de la FENÊTRE, alors que la liste, elle, commence après le rail ET après le rembourrage du plateau. À 1366px : liste 136→738 pour un panneau qui commence à 643 — 95px de cartes CACHÉES sous la fenêtre. On déduit donc ce qui est réellement consommé à gauche, plus 16px d'air avant le panneau (qui, lui, commence à 47vw). */ html.respfix body.page-rien-oublier.ro-grid.ro-aside .ro-cluster, html.respfix body.page-rien-oublier.ro-grid.ro-aside .ro-actions, html.respfix body.page-rien-oublier.ro-grid.ro-aside .ro-list { width: min(100%, calc(47vw - var(--pub-rail-w) - var(--ro-pad) - 16px)); max-width: min(100%, calc(47vw - var(--pub-rail-w) - var(--ro-pad) - 16px)); margin-inline: 0 auto; transform: none; } html.respfix body.page-rien-oublier.ro-grid.ro-aside .ro-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } /* -------------------------------------------------------------------------- §5 — EMPILEMENT : on remet cette page sur l'échelle du socle -------------------------------------------------------------------------- Les valeurs d'origine étaient trois échelles concurrentes : 3 et 4 pour le cercle, 4000 pour le bouton mobile, 5000/5010 pour les fenêtres. ⚠️ Le point qui compte vraiment : .ro-mcta était à 4000 et les panneaux à 5010. En remettant les panneaux sur l'échelle du socle (700/710) SANS toucher à .ro-mcta, le bouton « Continuer ma préparation » serait passé PAR-DESSUS la fenêtre ouverte. Les trois doivent bouger ensemble. -------------------------------------------------------------------------- */ html.respfix .ro-overlay { z-index: var(--z-voiles); } html.respfix .ro-panel { z-index: var(--z-panneaux); } html.respfix .ro-core { z-index: var(--z-contenu); } html.respfix .ro-node { z-index: calc(var(--z-contenu) + 1); } /* « Continuer ma préparation » (téléphone). Sa règle d'origine est dans la feuille de la page, chargée APRÈS celle-ci et de spécificité identique : à égalité elle gagnerait et le bouton resterait à 4000. D'où le sélecteur plus précis ici. Il ne suffit pas de le faire redescendre sous les pastilles flottantes : à bottom:12px il se posait DÉJÀ sur « Le Gardien » et sur la barre du bas. On le remonte au-dessus des deux, avec les hauteurs mesurées par le socle (jamais un nombre écrit à la main), et on rend au contenu la place que le bouton lui prend. */ @media (max-width: 900px) { html.respfix body.ro-has-prep .ro-mcta { z-index: var(--z-flottants); bottom: calc(var(--bottomnav-h) + var(--fab-h) + 16px); } html.respfix body.page-rien-oublier.ro-has-prep .pub-content { padding-bottom: calc(var(--reserve-bas) + var(--fab-h) + 30px); } } /* -------------------------------------------------------------------------- Confort de lecture : quand le membre a demandé moins d'animations, le changement de mise en page ne doit pas s'accompagner d'une transition. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.respfix .ro-node, html.respfix .ro-node-ic { transition: none; } } /* ================= 22-membre.css ================= */ /* ========================================================================== 22 — MEMBRE.PHP · PROFIL PUBLIC DU VOYAGEUR -------------------------------------------------------------------------- Tout est préfixé « html.respfix ». Sans la classe sur , ce fichier ne peut RIEN changer. Corrige DEUX causes, et seulement celles-là : R10 — LISIBILITÉ. La page pose son texte sur la PHOTO de fond : .mbr-card n'était qu'un voile à 4 % (aucun socle), et les couleurs passaient par var(--muted,…) qui n'existe QUE dans body.phare-light — donc en mode nuit tout retombait sur un repli semi-transparent. Sur un coucher de soleil clair, ça tombe vers 2,2:1. Le motif correct existe déjà dans le projet (includes/profile-ads.php :193-197, et membre.php:167 avec .jr-photo-veil) : un bloc de texte posé sur une photo porte SON PROPRE fond sombre et opaque. → jetons LOCAUX --mbr-* sur .mbr-wrap (+ miroir body.phare-light). → AUCUNE déclaration globale de --muted (effet de bord sur tout le site : chantier séparé). → AUCUNE modification de site.bg.voile (choix visuel assumé de Julien, et le monter assombrirait TOUTES les pages). → l'ombre portée seule est insuffisante : on met un vrai fond. R9 — BARRE D'ACTIONS. .mbr-actions était un flex dont 3 enfants sur 5 étaient des enveloppes opaques (un à style inline, un

, et un

carrément HORS de la barre). Le bloc « harmonisation » du 09/07 listait les items PAR CLASSES : toute enveloppe insérée cassait l'alignement en silence. → grille auto-fit + hauteur commune, et un sélecteur STRUCTUREL (par type d'élément) qui traverse les enveloppes display:contents. → hiérarchie rendue : principale dorée, secondaires en contour, sensibles discrètes. (Le déplacement du

et le retrait du style inline sont faits dans membre.php, sous respfix_on() : impossibles en CSS seul.) ========================================================================== */ /* ========================================================================== 1. JETONS LOCAUX — portée .mbr-wrap UNIQUEMENT -------------------------------------------------------------------------- Aucun de ces noms n'existe ailleurs : rien ne peut fuir sur une autre page. Le mode nuit est la valeur par défaut, body.phare-light en est le miroir. ========================================================================== */ html.respfix .mbr-wrap { /* Encre */ --mbr-ink: #FAF7F0; /* ~12:1 sur --mbr-panel */ --mbr-ink-soft: #d7dfe9; /* ~9,6:1 (remplace var(--muted)) */ --mbr-gold: #e7cd90; /* ~8,4:1 (remplace l'or à 85 %) */ /* Surfaces : opaques par construction, c'est ELLES le fond du texte */ --mbr-panel: rgba(10,16,28,.86); --mbr-edge: rgba(255,255,255,.16); --mbr-place-bg: rgba(255,255,255,.06); --mbr-shadow: 0 10px 30px rgba(0,0,0,.32); --mbr-blur: blur(8px); /* Peaux de boutons — un seul endroit à changer (voir §3) */ --mbr-sec-bg: rgba(9,26,32,.90); --mbr-sec-edge: rgba(0,229,255,.42); --mbr-sec-edge2: rgba(0,229,255,.72); --mbr-sec-ink: #cdf7f1; --mbr-pri-bg: linear-gradient(135deg,#e0bd77,#c08f3e); --mbr-pri-edge: rgba(255,232,180,.55); --mbr-pri-edge2: rgba(255,240,205,.85); --mbr-pri-ink: #1a1206; --mbr-dan-bg: rgba(28,10,8,.34); --mbr-dan-edge: rgba(255,124,96,.42); --mbr-dan-edge2: rgba(255,150,124,.72); --mbr-dan-ink: #ffab9a; --mbr-focus: #ffd98a; /* Largeur minimale d'une action : pilote le nombre de colonnes (voir §3) */ --mbr-act-min: 190px; } /* Miroir jour (Phare éteint). Mêmes noms, valeurs inversées : aucune règle n'a besoin d'être écrite deux fois. */ html.respfix body.phare-light .mbr-wrap { --mbr-ink: #121821; /* ~15:1 sur --mbr-panel clair */ --mbr-ink-soft: #3a4757; /* ~8,1:1 */ --mbr-gold: #6d4f12; /* ~6,5:1 — l'or clair serait illisible */ --mbr-panel: rgba(255,255,255,.93); --mbr-edge: rgba(16,32,52,.18); --mbr-place-bg: rgba(16,32,52,.05); --mbr-shadow: 0 10px 28px rgba(16,32,52,.18); --mbr-sec-bg: rgba(14,116,144,.10); --mbr-sec-edge: rgba(14,116,144,.45); --mbr-sec-edge2: rgba(14,116,144,.85); --mbr-sec-ink: #07414f; --mbr-pri-bg: linear-gradient(135deg,#d8ad63,#b8863a); --mbr-pri-edge: rgba(120,84,20,.45); --mbr-pri-edge2: rgba(90,62,12,.75); --mbr-pri-ink: #1a1206; --mbr-dan-bg: rgba(200,50,30,.07); --mbr-dan-edge: rgba(170,45,28,.45); --mbr-dan-edge2: rgba(150,35,20,.80); --mbr-dan-ink: #8e1c12; --mbr-focus: #0e7490; } /* Navigateur sans backdrop-filter (ancien Firefox, WebView) : le flou ne rend rien, donc on rend les fonds franchement plus opaques. Le contraste ne doit JAMAIS dépendre d'un effet optionnel. */ @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) { html.respfix .mbr-wrap { --mbr-panel: rgba(10,16,28,.95); --mbr-blur: none; } html.respfix body.phare-light .mbr-wrap { --mbr-panel: rgba(255,255,255,.98); } } /* ========================================================================== 2. LES BLOCS DE CONTENU PORTENT LEUR PROPRE FOND ========================================================================== */ /* La page d'erreur « Voyageur introuvable » sort AVANT le