WIP: Website/sliced

.gitignore

@@ -95,3 +95,5 @@ SCRATCH.md
 
 # Watchman (not used - we use Tailwind watcher instead)
 /watchman
+docs/internal/ux_audit_2025_01.md
+docs/internal/todo.md

app/assets/tailwind/application.css

@@ -4,6 +4,29 @@
 
 @import "tailwindcss";
 
+/*
+ * Leaflet CSS is loaded via <link> in layouts/application.html.erb (before tailwind.css).
+ * Embedding @import url(leaflet) here breaks Tailwind v4 output: "@import must precede @layer".
+ *
+ * Preflight img { max-width: 100% } breaks tiles — reset inside maps only.
+ */
+.leaflet-container img {
+  max-width: none !important;
+}
+
+.leaflet-map-shell {
+  position: relative;
+}
+
+/* Force full bleed inside the rounded shell (Leaflet defaults + % heights are fragile). */
+.leaflet-map-shell-inner.leaflet-container {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  outline: none;
+}
+
 @import "./components/buttons.css";
 @import "./components/forms.css";
 @import "./components/hero.css";
@@ -76,6 +99,8 @@
   html {
     @apply h-full;
     overflow-y: auto;
+    /* Réserve l’espace scrollbar + évite le collage au bord droit (nav, etc.) */
+    scrollbar-gutter: stable;
   }
 
   html::-webkit-scrollbar {
@@ -117,8 +142,11 @@
   .text-brand-accent { color: #5836A5; }
   .bg-brand-accent { background-color: #5836A5; }
   .bg-brand-accent\/10 { background-color: rgba(88, 54, 165, 0.1); }
+  /* Opacity variants used in markup; not always emitted by Tailwind v4 scan */
+  .bg-brand-accent\/72 { background-color: rgba(88, 54, 165, 0.72); }
   .border-brand-accent { border-color: #5836A5; }
   .border-brand-accent\/20 { border-color: rgba(88, 54, 165, 0.2); }
+  .border-brand-accent\/45 { border-color: rgba(88, 54, 165, 0.45); }
 
   .focus-visible\:outline-brand-primary:focus-visible { outline-color: #1F5C55; }
   .focus-visible\:outline-brand-accent:focus-visible { outline-color: #5836A5; }

app/assets/tailwind/components/swiper_overrides.css

@@ -23,8 +23,9 @@
     display: block;
   }
 
+  /* Horizontal carousels need horizontal pan; pan-y blocked swipe on touch devices */
   .swiper-horizontal {
-    touch-action: pan-y;
+    touch-action: pan-x pinch-zoom;
   }
 
   .swiper-button-next,

app/controllers/blogs_controller.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class BlogsController < ApplicationController
+  skip_before_action :require_authentication, only: %i[latest]
   before_action :set_blog, only: %i[show]
 
   # def article

app/controllers/contacts_controller.rb

@@ -4,6 +4,9 @@ class ContactsController < ApplicationController
   allow_unauthenticated_access only: :create
 
   CONTACT_SUBMISSION_KEYS = %i[name email message category].freeze
+  LEGACY_CONTACT_CATEGORY_TO_CANONICAL = {
+    "residence" => "creative_hosting"
+  }.freeze
 
   def create
     @contact = contact_submission_params
@@ -13,23 +16,24 @@ def create
       return
     end
 
-    recipient_email = case @contact[:category]
-    when "technical"
+    category = canonical_contact_category(@contact[:category])
+    recipient_email = case category
+                      when "technical"
                         ENV.fetch("CONTACT_EMAIL_TECHNICAL", nil)
-    when "residence"
-                        ENV.fetch("CONTACT_EMAIL_RESIDENCE", nil)
-    when "partnership"
+                      when "creative_hosting"
+                        ENV.fetch("CONTACT_EMAIL_CREATIVE_HOSTING", nil) || ENV.fetch("CONTACT_EMAIL_RESIDENCE", nil)
+                      when "partnership"
                         ENV.fetch("CONTACT_EMAIL_PARTNERSHIP", nil)
-    else
+                      else
                         ENV.fetch("CONTACT_EMAIL_GENERAL", nil)
-    end
+                      end
 
     begin
       UserMailer.contact_email(
         @contact[:name],
         @contact[:email],
         @contact[:message],
-        @contact[:category],
+        category,
         recipient_email
       ).deliver_later
 
@@ -50,6 +54,11 @@ def create
 
   private
 
+  def canonical_contact_category(raw)
+    key = raw.to_s
+    LEGACY_CONTACT_CATEGORY_TO_CANONICAL.fetch(key, key)
+  end
+
   # Formulaire public : champs à la racine (`name`, `email`, …), pas `contact[...]`.
   # Toujours inclure les clés requises : `permit` seul omet les paramètres absents, ce qui faisait
   # passer des requêtes incomplètes jusqu’au mailer.

app/controllers/events_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class EventsController < ApplicationController
-  skip_before_action :require_authentication, only: %i[index show upcoming]
+  skip_before_action :require_authentication, only: %i[index show upcoming past]
 
   def index
     redirect_to page_path("news", anchor: "evenements")

app/controllers/pages_controller.rb

@@ -35,7 +35,6 @@ def show
 
     if params[:id] == "contact_us"
       @contact = {}
-      @faqs = contact_faq_entries
     end
 
     @adhesion_faqs = adhesion_faq_entries if params[:id] == "become_member"
@@ -60,29 +59,78 @@ def show
   private
 
   def contact_faq_entries
+    cf = page_path("contact_us", anchor: "contact-form")
+    lc = "text-[#5836A5] underline hover:text-[#412886]"
     [
-      { question: "Comment adhérer au Circographe ?", answer: "Passe sur un créneau d'ouverture : on remplit la fiche ensemble et on t'explique le fonctionnement." },
-      { question: "Puis-je réserver un créneau de résidence ?", answer: "Oui, écris-nous via la catégorie 'Résidence'. Nous te recontacterons avec les disponibilités et modalités." },
-      { question: "Le lieu est-il accessible aux débutant·es ?", answer: "Les entraînements libres sont destinés aux personnes autonomes. Pour débuter, on recommande une école partenaire : contacte-nous pour des conseils." },
-      { question: "Proposez-vous des prestations ou des partenariats ?", answer: "Oui, nous travaillons avec des structures culturelles, établissements scolaires et entreprises. Sélectionne la catégorie 'Partenariat' pour en discuter." }
+      {
+        question: "Demander un temps d’accueil en création",
+        answer_html: helpers.safe_join([
+          "Écris-nous avec le ",
+          helpers.link_to("formulaire Contact", cf, class: lc),
+          ", catégorie « Temps d’accueil en création » — on te répond sur les dispo et le cadre."
+        ])
+      },
+      {
+        question: "Partenariat, atelier, événement ou projet avec le lieu",
+        answer_html: helpers.safe_join([
+          "Le plus simple : passer lors d’un créneau d’ouverture avec ton idée. Tu peux aussi utiliser le ",
+          helpers.link_to("formulaire Contact", cf, class: lc),
+          " (Partenariat ou Question générale). Les bénévoles t’orientent."
+        ])
+      }
     ]
   end
 
   def adhesion_faq_entries
+    cf = page_path("contact_us", anchor: "contact-form")
+    lc = "text-[#5836A5] underline hover:text-[#412886]"
     [
-      { question: "Puis-je adhérer en ligne ?", answer: "L'inscription se fait uniquement sur place afin de te présenter le lieu et les règles d'autogestion." },
-      { question: "Quels moyens de paiement acceptez-vous ?", answer: "Carte bancaire et espèces. Une adhésion de soutien peut également être effectuée par virement sur demande." },
-      { question: "Faut-il être autonome pour les entraînements libres ?", answer: "Oui, les créneaux libres s'adressent aux pratiquant·es autonomes. Pour débuter, on peut te recommander des écoles partenaires." },
-      { question: "Puis-je proposer un atelier ou un événement ?", answer: "Tout est possible ! Passe nous voir avec ton idée, on regardera ensemble comment l'inscrire dans la programmation." }
+      {
+        question: "Comment adhérer ?",
+        answer: "Sur place, lors d’un créneau d’accueil : visite du lieu, fiche d’adhésion et explication de l’autogestion. Pas d’inscription en ligne — on fait ça ensemble au lieu pour que chacun·e parte avec les mêmes repères."
+      },
+      {
+        question: "Paiement adhésion ou cotisation",
+        answer: "Carte bancaire ou espèces à l’accueil, avec les bénévoles."
+      },
+      {
+        question: "Je débute : les entraînements libres me concernent ?",
+        answer_html: helpers.safe_join([
+          "Les créneaux libres cirque sont pour des pratiquant·es autonomes en sécurité. Pour apprendre les bases, une école partenaire ; pour une orientation, ",
+          helpers.link_to("écris-nous", cf, class: lc),
+          " en Question générale."
+        ])
+      }
     ]
   end
 
   def general_faq_entries
+    cf = page_path("contact_us", anchor: "contact-form")
+    bm = page_path("become_member", anchor: "tarifs")
+    lc = "text-[#5836A5] underline hover:text-[#412886]"
     [
-      { question: "Où se situe le Circographe ?", answer: "Au 27 bis allée Maurice Sarraut, Toulouse — dans le quartier de la Cartoucherie. Consulte la page Contact pour la carte et l'accès." },
-      { question: "Quels sont les horaires d'ouverture ?", answer: "Les créneaux publics évoluent chaque saison ; on les met à jour sur les pages Accueil, Adhérer et Contact. Pense à vérifier avant de te déplacer." },
-      { question: "Comment soutenir financièrement le projet ?", answer: "En adhérant, en souscrivant à l'adhésion soutien ou en faisant un don ponctuel. Écris-nous si tu souhaites devenir partenaire." },
-      { question: "J'ai une question administrative, qui contacter ?", answer: "Utilise le formulaire de contact (catégorie 'Question générale') ou écris à [email protected] ; l'équipe bénévole te répondra rapidement." }
+      {
+        question: "Adresse et accès",
+        answer_html: helpers.safe_join([
+          "97 bis boulevard de Suisse, 31200 Toulouse. ",
+          helpers.link_to("Plan et bus (ligne 15)", page_path("contact_us", anchor: "map"), class: lc),
+          "."
+        ])
+      },
+      {
+        question: "Horaires",
+        answer: "Les créneaux publics bougent selon la saison et les bénévoles. À jour sur l’accueil, la page Adhérer et la page Contact — jette un œil avant de venir."
+      },
+      {
+        question: "Soutenir le lieu ou une question administrative",
+        answer_html: helpers.safe_join([
+          "Adhérer, cotisation, don : ",
+          helpers.link_to("page Adhérer", bm, class: lc),
+          ". Pour un partenariat, un don hors cadre ou une demande administrative : ",
+          helpers.link_to("formulaire Contact", cf, class: lc),
+          " (Question générale ou Partenariat)."
+        ])
+      }
     ]
   end
 

app/helpers/application_helper.rb

@@ -90,6 +90,13 @@ def available_hero_images(except: [])
     fallback && exclusions.exclude?(fallback.to_s) ? [ fallback ] : []
   end
 
+  # Filenames under app/assets/images/ (same pool as hero_image). Sorted for stable order.
+  # Swiper receives several slides but only the first image uses eager loading.
+  def news_carousel_image_sources(limit: 12)
+    max_slides = limit.to_i.clamp(1, 24)
+    hero_image_pool.uniq.sort.take(max_slides)
+  end
+
   def asset_available?(logical_path)
     return false if logical_path.blank?
 

app/javascript/controllers/map_controller.js

@@ -0,0 +1,103 @@
+import { Controller } from "@hotwired/stimulus"
+import * as L from "leaflet"
+
+export default class extends Controller {
+  static values = {
+    lat: Number,
+    lng: Number,
+    zoom: { type: Number, default: 17 }
+  }
+
+  connect () {
+    this._disconnected = false
+    this._lastSize = { w: 0, h: 0 }
+    this._resizeFrame = null
+
+    // Attendre 2 frames : la grille / le turbo-frame ont souvent une hauteur encore à 0 au premier paint.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (this._disconnected || !this.element.isConnected) return
+        this._initMap()
+      })
+    })
+  }
+
+  _initMap () {
+    if (this._disconnected || !this.element.isConnected) return
+
+    this._resizeTimeouts = []
+
+    const scheduleInvalidate = (force = false) => {
+      if (!this.map) return
+      if (this._resizeFrame != null) cancelAnimationFrame(this._resizeFrame)
+      this._resizeFrame = requestAnimationFrame(() => {
+        this._resizeFrame = null
+        const el = this.element
+        const w = el.clientWidth
+        const h = el.clientHeight
+        if (w <= 0 || h <= 0) return
+        if (!force && w === this._lastSize.w && h === this._lastSize.h) return
+        this._lastSize = { w, h }
+        this.map.invalidateSize({ animate: false })
+      })
+    }
+
+    this.boundTurboFrameLoad = (e) => {
+      if (e.target.contains(this.element)) scheduleInvalidate(true)
+    }
+    document.addEventListener("turbo:frame-load", this.boundTurboFrameLoad)
+
+    this.boundWindowResize = () => scheduleInvalidate(true)
+    window.addEventListener("resize", this.boundWindowResize)
+
+    this.map = L.map(this.element).setView([this.latValue, this.lngValue], this.zoomValue)
+
+    // Tuiles raster via CARTO (cartocdn.com) ; rendu 100 % Leaflet côté navigateur (pas d’iframe ni SDK tiers).
+    L.tileLayer("https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://wiki.osmfoundation.org/wiki/Licence" rel="nofollow noopener">Sources des données</a> · <a href="https://carto.com/attributions" rel="nofollow noopener">CARTO</a>',
+      subdomains: "abcd",
+      maxZoom: 19
+    }).addTo(this.map)
+
+    // Pas d’images CDN (évite icône cassée si cdnjs / tracking bloqués) — cercle aux couleurs du site.
+    L.circleMarker([this.latValue, this.lngValue], {
+      radius: 10,
+      color: "#1F5C55",
+      fillColor: "#5836A5",
+      fillOpacity: 0.9,
+      weight: 3
+    }).addTo(this.map).bindPopup("<strong>Le Circographe</strong><br>97 bis bd de Suisse, Toulouse")
+
+    this.map.whenReady(() => {
+      scheduleInvalidate(true)
+      ;[120, 350, 700].forEach(ms => {
+        const id = setTimeout(() => scheduleInvalidate(true), ms)
+        this._resizeTimeouts.push(id)
+      })
+    })
+
+    this.resizeObserver = new ResizeObserver(() => scheduleInvalidate(false))
+    this.resizeObserver.observe(this.element)
+  }
+
+  disconnect () {
+    this._disconnected = true
+    this._resizeTimeouts?.forEach(id => clearTimeout(id))
+    this._resizeTimeouts = null
+    if (this.boundTurboFrameLoad) {
+      document.removeEventListener("turbo:frame-load", this.boundTurboFrameLoad)
+      this.boundTurboFrameLoad = null
+    }
+    if (this.boundWindowResize) {
+      window.removeEventListener("resize", this.boundWindowResize)
+      this.boundWindowResize = null
+    }
+    if (this._resizeFrame != null) cancelAnimationFrame(this._resizeFrame)
+    this._resizeFrame = null
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = null
+    this.map?.remove()
+    this.map = null
+  }
+}

app/javascript/controllers/slider_controller.js

@@ -33,6 +33,14 @@ export default class extends Controller {
     }
 
     const options = Object.assign({}, defaultOptions, this.optionsValue || {})
+
+    if (options.pagination?.el && typeof options.pagination.el === "string") {
+      const paginationEl = this.element.querySelector(options.pagination.el)
+      if (paginationEl) {
+        options.pagination = { ...options.pagination, el: paginationEl }
+      }
+    }
+
     const slideCount = this.element.querySelectorAll(".swiper-slide").length
     const breakpointValues = Object.values(options.breakpoints || {}).map(cfg => cfg.slidesPerView || options.slidesPerView)
     const maxSlidesPerView = Math.max(options.slidesPerView || 1, ...breakpointValues, 1)