/* ===================================================================== Phase 2 — Responsive mobile et tablette ===================================================================== TOUT ce fichier vit sous `@media (max-width: 1024px)`. Aucune règle n'a d'effet à partir de 1025 px : le rendu desktop validé (1366 × 768 et 1920 × 1080) est structurellement hors de portée de cette feuille, ce qui est la garantie de non-régression la plus solide qu'on puisse offrir — elle ne repose pas sur une relecture, mais sur la cascade elle-même. Cause racine traitée ici : `style.css` masquait purement et simplement `.sidebar-left` et `.sidebar-right` (`display: none`) sous 960 px, sans rien mettre à la place. Les deux panneaux portent pourtant la totalité du parcours : sélection de l'exutoire, coordonnées, CRS, bouton de délimitation, réinitialisation, légende, KPI, graphiques, onglets thématiques, Guide et FAQ. Parti pris : ne PAS dupliquer l'interface. Les mêmes panneaux, les mêmes formulaires et les mêmes identifiants sont réutilisés ; ils passent simplement en superposition (`position: fixed`) pilotée par des classes d'état posées sur ``. La carte conserve donc sa taille quand un panneau s'ouvre — un tiroir qui ne redimensionne pas Leaflet est un tiroir qui ne peut pas déplacer les points sous le doigt de l'utilisateur. ===================================================================== */ /* --------------------------------------------------------------------- Desktop — état par défaut des contrôles ajoutés par la phase 2. Déclaré EN TÊTE, et non en fin de fichier : une media query n'ajoute aucune spécificité, donc à spécificité égale c'est la règle écrite en dernier qui gagne. Placé après, ce `display: none` aurait annulé les règles mobiles ci-dessous au lieu d'être annulé par elles. --------------------------------------------------------------------- */ .mobile-nav, .mobile-scrim, .mobile-panel-head, .basemap-toggle { display: none; } @media (max-width: 1024px) { :root { --hb-header-h: 56px; --hb-mnav-h: 58px; /* Marge basse réelle : barre de navigation + encoche/barre système iOS. */ --hb-safe-bottom: env(safe-area-inset-bottom, 0px); --hb-nav-total: calc(var(--hb-mnav-h) + var(--hb-safe-bottom)); } /* ---------------------------------------------------------------- Coquille */ .app-header { height: var(--hb-header-h); flex: 0 0 var(--hb-header-h); padding: 0 12px; gap: 10px; } /* L'espaceur central pousse les actions à droite ; il n'a plus de rôle utile quand la place manque et volait de la largeur aux boutons. */ .hdr-center { display: none; } .hdr-actions { gap: 6px; } .hdr-sep { margin: 0 1px; } /* Marque réduite pour tenir dans un en-tête de 56 px — rayon inchangé, seule la taille bouge. */ .logo-mark { width: 34px; height: 34px; } .logo-mark svg { width: 20px; height: 20px; } .title-main { font-size: 16px; } /* La compression de la marque commence ICI, et non plus à 768 px seulement. Entre 769 et 1024 px, les libellés des boutons d'en-tête sont ENCORE visibles (leur masquage est dans le bloc ≤768) : avec un bouton de plus, `.hdr-brand` et `.hdr-actions` tous deux en `flex-shrink: 0` totalisaient ~900 px et poussaient la bascule de thème hors de l'écran. Aucun test ne couvrait cette bande — 1366/1920 d'un côté, 768/1024 de l'autre. Descendre la règle d'un cran suffit : la compression ne s'applique que si la place manque réellement, donc rien ne bouge à 1024 px. */ .hdr-brand { flex: 0 1 auto; gap: 9px; min-width: 0; } .hdr-title-group { min-width: 0; overflow: hidden; } .title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Réserve la hauteur de la barre de navigation : la carte s'arrête juste au-dessus, elle n'est jamais recouverte. */ .app-body { padding-bottom: calc(var(--hb-nav-total) + 8px); /* Les panneaux passant en superposition, la carte occupe seule le flux. */ gap: 0; } /* ------------------------------------------------- Panneaux en superposition */ /* Annule le `display: none` de style.css et transforme les deux panneaux en tiroirs. `display: flex` restaure la colonne interne d'origine. */ .sidebar-left, .sidebar-right { display: flex; position: fixed; top: calc(var(--hb-header-h) + 8px); bottom: calc(var(--hb-nav-total) + 8px); z-index: 60; width: min(390px, 92vw); max-width: 92vw; /* Remplace la transition de largeur du mode Guide desktop : sur mobile c'est le glissement qui compte, pas le redimensionnement. */ transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); /* Aucune ombre portée : DESIGN.md « The No-Shadow-Elevation Rule » — la profondeur du chrome vient du `backdrop-filter: blur()` et du filet de 1 px que les deux panneaux portent déjà. La séparation d'avec la carte est assurée par le voile, pas par une ombre. */ } .sidebar-left { left: 8px; transform: translateX(calc(-100% - 16px)); } .sidebar-right { right: 8px; transform: translateX(calc(100% + 16px)); } /* Le mode « détail du Guide » élargit le panneau à 420 px sur desktop (.sidebar-left.is-guide-detail). Cette largeur fixe déborderait un écran de 390 px : on la neutralise ici, à spécificité égale. */ .sidebar-left.is-guide-detail { width: min(390px, 92vw); } body.hb-vue-params .sidebar-left { transform: translateX(0); } body.hb-vue-resultats .sidebar-right { transform: translateX(0); } /* Le contenu des panneaux défile en interne : `html, body { overflow: hidden }` interdit tout défilement de page, et c'est très bien ainsi — un tiroir qui fait défiler la page entière emporte la carte avec lui. */ .sidebar-left > *, .sidebar-right > * { min-height: 0; } @media (prefers-reduced-motion: reduce) { .sidebar-left, .sidebar-right { transition: none; } } /* ------------------------------------------------------------------ Voile */ .mobile-scrim { /* Indispensable : la règle par défaut en tête de fichier met tous les contrôles de phase 2 à `display: none`. Sans ce rétablissement, le voile n'apparaissait jamais — le tiroir restait fermable au bouton et à Échap, mais le tap à l'extérieur ne faisait rien et rien ne séparait visuellement le tiroir de la carte. */ display: block; position: fixed; inset: 0; z-index: 55; background: rgba(5, 11, 19, 0.55); backdrop-filter: blur(2px); border: 0; padding: 0; animation: hb-scrim-in 0.2s ease-out; } .mobile-scrim[hidden] { display: none; } @keyframes hb-scrim-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mobile-scrim { animation: none; } } /* --------------------------------------------- Bouton de fermeture de tiroir */ .mobile-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--panel-border); } .mobile-panel-title { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); } .mobile-panel-close { display: inline-flex; align-items: center; justify-content: center; /* 40 × 40 comme `.btn-icon-sq` du système (DESIGN.md) — cible tactile confortable et cohérente avec les autres boutons-icône. */ width: 40px; height: 40px; flex-shrink: 0; background: transparent; border: none; border-radius: 11px; color: var(--text-dim); cursor: pointer; } .mobile-panel-close:hover { color: var(--text); } .mobile-panel-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; } /* ------------------------------------------------------- Navigation mobile */ .mobile-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: var(--hb-nav-total); padding-bottom: var(--hb-safe-bottom); background: var(--panel-bg); border-top: 1px solid var(--panel-border); backdrop-filter: blur(14px); } .mnav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; /* 48 px de haut : cible tactile confortable, au-delà du minimum de 44. */ min-height: 48px; padding: 6px 4px; background: transparent; border: none; color: var(--text-muted); font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px; cursor: pointer; transition: color 0.16s ease; } .mnav-btn svg { width: 21px; height: 21px; } .mnav-btn.is-active { color: var(--cyan); } /* Thème clair : le cyan de signalisation ne fait que 2,01:1 sur le fond clair de la barre — l'entrée active y était la MOINS lisible des trois. style.css règle déjà ce cas de la même façon pour le fond de carte actif (`[data-theme="light"] .basemap-thumb.active .basemap-label`) : le rôle « actif » passe du cyan au bleu. */ [data-theme="light"] .mnav-btn.is-active { color: var(--blue); } .mnav-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; /* {rounded.md} — le rayon de tous les boutons du système (DESIGN.md). */ border-radius: 11px; } /* Pastille signalant des résultats disponibles non encore consultés : la délimitation aboutit alors que l'utilisateur regarde la carte, rien ne le lui dirait autrement. */ .mnav-badge { position: absolute; top: 6px; margin-left: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); } .mnav-btn:not(.hb-a-des-resultats) .mnav-badge { display: none; } /* ------------------------------------------------------ Fonds de carte */ .basemap-control { left: 10px; bottom: 10px; } /* ------------------------------------------------- Recherche de lieux */ /* Bornée à droite pour ne jamais passer sous les contrôles de zoom/outils (topright) : sur un écran de 390 px, 300 px fixes les recouvriraient. 56 px = marge gauche + colonne de contrôles + son retrait du bord. */ .map-search { top: 10px; left: 10px; width: min(300px, calc(100% - 66px)); } /* ------------------------------------------------------------ Divers */ /* Le pied de page (CRS, échelle, coordonnées du curseur) est une bande dense de 38 px sans équivalent tactile : masqué comme le faisait déjà style.css sous 960 px. L'information reste dans le panneau Paramètres. */ .app-footer { display: none; } /* Les modales (courbe hypsométrique agrandie, climat) doivent rester dans l'écran, au-dessus des tiroirs (55-70) ET de la scène 3D (450) — même niveau 500 que la règle de base de style.css : à 120, une modale ouverte pendant la Vue 3D passait sous le canvas et devenait incliquable. */ .modal-backdrop { padding: 12px; z-index: 500; } .modal { max-height: min(84vh, 820px); } } /* ===================================================================== Tablette — 769 px à 1024 px ===================================================================== */ @media (min-width: 769px) and (max-width: 1024px) { /* Tiroirs latéraux classiques : la carte reste largement visible à côté. */ .sidebar-left, .sidebar-right { width: 380px; } .sidebar-left.is-guide-detail { width: 420px; } /* La barre de navigation n'a pas besoin de toute la largeur : centrée, elle rapproche les trois actions du pouce en tenue paysage. */ .mobile-nav { justify-content: center; } .mnav-btn { flex: 0 0 176px; } /* Quatre actions texte ne tiennent plus dans l'en-tête de cette bande : le libellé de la sauvegarde globale passe en « visuellement masqué » (icône seule), même technique que la règle générale sous 768 px — le nom accessible « Sauvegarder l'analyse » est conservé tel quel. */ #btn-save-global .btn-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } /* ===================================================================== Smartphone — jusqu'à 768 px ===================================================================== */ @media (max-width: 768px) { /* Tiroirs pleine largeur : à 390 px, un panneau partiel ne laisse pas assez de place aux tableaux thématiques et aux graphiques. */ .sidebar-left, .sidebar-right, .sidebar-left.is-guide-detail { left: 0; right: 0; width: 100%; max-width: 100%; /* {rounded.xl} — DESIGN.md réserve 16 px à la coquille la plus externe, dont les deux sidebars ; en plein écran le tiroir EST cette coquille. */ border-radius: 16px 16px 0 0; border-left: none; border-right: none; } .sidebar-left { transform: translateX(-100%); } .sidebar-right { transform: translateX(100%); } body.hb-vue-params .sidebar-left, body.hb-vue-resultats .sidebar-right { transform: translateX(0); } /* En-tête compact : les libellés des boutons passent en « visuellement masqué » plutôt qu'en `display: none`. Le bouton reste une icône, mais conserve son nom accessible — un lecteur d'écran continue d'annoncer « Exporter PDF », et aucun attribut aria-label dupliqué n'est requis. */ .app-header .btn .btn-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .app-header .btn { padding: 0 11px; gap: 0; } /* Cause de l'en-tête tronqué : `.hdr-brand` est `flex-shrink: 0`. La marque ne cédait donc jamais un pixel et poussait les dernières actions (la bascule de thème) hors de l'écran. On l'autorise à se comprimer et, au pire, à tronquer proprement son titre — un nom de marque coupé par une ellipse reste lisible, un bouton hors écran est inutilisable. */ /* La compression et l'ellipse elles-mêmes sont désormais posées dès 1024 px (voir plus haut) : il ne reste ici que la réduction de corps. */ .title-main { font-size: 14px; } .hdr-actions { flex-shrink: 0; gap: 4px; } .app-header { padding: 0 10px; gap: 8px; } /* Réglette d'opacité du bassin : plus courte sur téléphone, où la ligne de légende dispose de moins de largeur. La ZONE TACTILE, elle, ne rétrécit pas — c'est la hauteur de l'input (14 px) qui la porte, pas la piste visible de 3 px. La poignée est légèrement agrandie pour rester attrapable au doigt sans épaissir la piste. */ .basin-opacity-range { width: 45px; } .basin-opacity-range::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; } .basin-opacity-range::-moz-range-thumb { width: 12px; height: 12px; } /* Filets décoratifs : la place qu'ils prennent vaut mieux aux boutons. */ .hdr-sep { display: none; } .logo-mark { width: 31px; height: 31px; } .logo-mark svg { width: 18px; height: 18px; } /* ------------------------------------------------ Fonds de carte repliables */ /* La bande des quatre vignettes occupait presque toute la largeur en permanence. Elle devient un bouton compact qui la déplie à la demande. */ .basemap-toggle { display: inline-flex; align-items: center; gap: 6px; position: absolute; left: 10px; bottom: 10px; z-index: 9; min-height: 40px; padding: 0 13px; border-radius: 11px; background: rgba(9, 20, 33, 0.9); border: 1px solid rgba(86, 158, 214, 0.24); color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 700; backdrop-filter: blur(12px); cursor: pointer; } .basemap-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* Thème clair : `--text-2` y vaut un navy sombre. Sans cette surcharge, le libellé « Fonds » s'affichait en navy sur le fond navy ci-dessus — contraste ≈ 1:1, bouton parfaitement illisible. Le traitement repris ici est exactement celui que style.css applique déjà au chrome flottant de la carte (.basemap-control, .map-tools), pour que la bascule et la bande qu'elle déplie ne changent pas d'apparence entre elles. */ [data-theme="light"] .basemap-toggle { background: rgba(255, 255, 255, 0.95); border-color: rgba(47, 122, 240, 0.20); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); } .basemap-control { left: 10px; right: 10px; bottom: 58px; /* Les quatre vignettes tiennent sur une ligne à 390 px une fois réparties ; `space-between` évite qu'elles se collent au bord. */ justify-content: space-between; } .basemap-control[hidden] { display: none; } .basemap-thumb { flex: 1; } /* --------------------------------------------------------- Graphiques */ /* Les canvas Chart.js sont déjà `responsive: true` : il suffit de leur donner un conteneur qui ne déborde pas. */ .sidebar-right canvas { max-width: 100%; } /* Les tableaux thématiques peuvent défiler horizontalement DANS leur conteneur — jamais la page entière. */ .theme-table-wrap, .stats-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Cibles tactiles des onglets de résultats. */ .rtab { min-height: 46px; } .stab { min-height: 44px; } /* ----------------------------------------------- Cartes thématiques */ /* Tiroir large (téléphone en plein écran, tablette en portrait) : un peu plus d'air que dans la grille serrée du panneau desktop, et une cible tactile confortable pour le bouton. Le nombre de COLONNES n'est pas décidé ici : il vient de la largeur réelle du conteneur (cf. style.css). À 768 × 1024, le tiroir occupe toute la largeur — 736 px utiles — et deux colonnes y sont bien plus lisibles qu'une seule fiche de 736 px de large. Le reste (repli du texte, absence de troncature) est déjà garanti par `overflow-wrap: anywhere` et le bornage à deux lignes posés dans style.css — ils valent à toutes les tailles, pas seulement ici. */ .thematic-map-card { padding: 12px 13px; gap: 7px; } .thematic-map-card .tmc-title { font-size: 13px; } .thematic-map-card .tmc-desc { font-size: 11.5px; } .thematic-map-card .tmc-action { height: 47px; font-size: 13px; } /* Aucune information n'est portée par le survol : l'aide du bouton désactivé est déjà écrite en toutes lettres sous lui (`.tmc-hint`), le `title` n'en est qu'un doublon pour la souris. */ } /* ===================================================================== Téléphone étroit — jusqu'à 560 px ===================================================================== UNE fiche par ligne, sans condition. Le tiroir passe en plein écran sous 769 px : à 390 px comme à 430 px, la largeur du conteneur (358 à 398 px) dépasse donc le seuil de deux colonnes de `style.css`. Deux fiches y tiendraient géométriquement, mais pas confortablement au pouce. Le seuil de 560 px sépare les téléphones des petites tablettes : au-delà, c'est bien la largeur réelle du conteneur qui décide, et deux colonnes redeviennent le meilleur usage de la place. Attention, `max-width` est INCLUSIF — 768 × 1024 reçoit déjà la disposition « téléphone plein écran » de la section précédente, et doit néanmoins garder ses deux colonnes. */ @media (max-width: 560px) { .thematic-maps-grid { grid-template-columns: minmax(0, 1fr); } } /* Les valeurs par défaut desktop des contrôles de phase 2 sont déclarées en TÊTE de ce fichier — cf. l'explication de cascade qui les accompagne. */