/* ========================================================================= Sorties Québec - feuille de style Palette : vitalité sarcelle-vert · fonds clairs teintés menthe Typographie : Inter (corps) + Inter Tight (titres) ========================================================================= */ :root{ /* Fonds & neutres */ --bg: #FBFDF9; --bg-2: #EFF7F0; --surface: #FFFFFF; --ink: #15302B; --ink-2: #2F4A44; --muted: #587068; --line: #DDE8DF; --line-2: #E9F1EA; /* Sombre (héro, pied de page) - bleu profond (demande utilisateur 2026-07-30 : les sections sombres se lisaient "vert foncé", elles passent au bleu ; la famille accent sarcelle-vert ci-dessous ne change pas). --on-dark-muted et les cinq teintes -bright ont été recalculées et restent toutes >= 4.5:1 sur ce nouveau fond (voir le rapport de tâche pour la table de contraste complète). */ --dark: #123A63; --dark-2: #1A4C80; --on-dark: #EFF7F2; --on-dark-muted:#A3C4BA; /* Sarcelle-vert (accent) */ --accent: #16A87A; --accent-bright: #3DC492; --accent-strong: #0C7A58; --accent-hover: #0A6B4E; --accent-ink: #0B6E52; --accent-soft: #DCF5EA; --accent-line: #B5E3CF; /* États */ --focus: #0B6E52; /* Hues par type de sortie (palette v3) - solo déplacé vers cyan-bleu pour éviter la collision avec le nouvel accent sarcelle-vert ; les quatre autres conservent leur teinte (déjà distinctes de l'accent). */ --c-solo: #2C99E8; --c-solo-ink: #0C64A0; --c-solo-soft: #DFF0FB; --c-entre-amis: #F5A623; --c-entre-amis-ink: #8F5E00; --c-entre-amis-soft: #FDF0DA; --c-couple: #E84393; --c-couple-ink: #B21E67; --c-couple-soft: #FBE3EF; --c-premier-rendez-vous: #E8552F; --c-premier-rendez-vous-ink: #B23A15; --c-premier-rendez-vous-soft: #FBE9E1; --c-famille: #7C4DFF; --c-famille-ink: #5F3DC4; --c-famille-soft: #ECE6FB; /* Variantes "bright" - éclaircies pour rester >= 4.5:1 sur le fond sombre (--dark, désormais #123A63 - recontrôlées lors du passage vert -> bleu du 2026-07-30, toutes encore >= 4.5:1 sans retouche, voir le rapport de tâche pour le détail des cinq calculs). Utilisées pour le texte du compteur dans la carte de sortie mise en vedette (feature card) et pour le dégradé du titre de l'accueil ; les vives --c- ci-dessus restent utilisées pour les icônes décoratives (seuil 3:1). */ --c-solo-bright: #5AB6EE; --c-entre-amis-bright: #F5A623; --c-couple-bright: #FF7FB8; --c-premier-rendez-vous-bright: #FF8F63; --c-famille-bright: #B49CFF; /* Formes */ --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 20px; --r-pill: 999px; /* Ombres (chaudes, discrètes) */ --sh-1: 0 1px 2px rgba(27,26,22,.05); --sh-2: 0 2px 4px rgba(27,26,22,.05), 0 14px 30px -18px rgba(27,26,22,.20); --sh-3: 0 30px 60px -30px rgba(18,58,99,.45); /* Rythme */ --container: 1200px; --gutter: clamp(1.15rem, 4vw, 2.5rem); --t: 180ms cubic-bezier(.2,.6,.25,1); /* Hauteur de l'en-tête (nav 68px + bordure 1px) - utilisée par la mise en page en coquille d'application */ --header-h: 69px; /* Largeur réelle de la barre de défilement du navigateur - mesurée par un petit script en tête de (voir chaque page HTML) et appliquée à l'en-tête pour qu'il corresponde exactement à la largeur de .page-scroll (qui, elle, perd cette largeur au profit de sa propre barre). Valeur de repli 0px si le script n'a pas encore tourné. */ --sbw: 0px; } /* ---------- Polices auto-hébergées ---------- Inter et Inter Tight sont des fontes variables (axe wght 100-900) - un seul fichier .woff2 par famille couvre déjà tous les graisses utilisées sur le site (400/500/600/700 pour Inter, 500/600/700 pour Inter Tight), donc "font-weight: 400 700" ci-dessous (plage, pas une valeur unique). font-display:optional : le navigateur attend un très court instant invisible puis, si la fonte n'est pas prête, bascule sur le repli et n'y revient jamais pendant cette visite - donc jamais de changement visible de police en cours de lecture (pas de "flash" de texte qui grossit/ rétrécit). Les deux fichiers critiques (Inter 400 + Inter Tight 600, utilisés dès le premier rendu) sont préchargés dans le de chaque page. Les faces "*-repli" ci-dessous appliquent les mêmes métriques verticales qu'Inter/Inter Tight (ascenseur/descendeur/hauteur de ligne) à la police système de repli (via ascent-override/descent-override/size-adjust), pour que le texte occupe exactement la même hauteur de ligne qu'il soit rendu avec la police système (avant chargement, ou si font-display:optional a tranché en sa faveur) ou avec Inter une fois chargée - donc aucun réagencement visible de la mise en page dans un cas comme dans l'autre. Valeurs calculées à partir des tables OS/2 réelles des fichiers ci-dessous (capHeight 1490/2048, ascent 1984/2048, descent 494/2048, unitsPerEm 2048) comparées aux métriques publiées d'Arial (capHeight 1467/2048) - même résultat pour les deux familles, qui partagent les mêmes métriques verticales OS/2. */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:optional; src:url("../vendor/fonts/inter-latin.woff2") format("woff2"); } @font-face{ font-family:"Inter Tight"; font-style:normal; font-weight:400 700; font-display:optional; src:url("../vendor/fonts/inter-tight-latin.woff2") format("woff2"); } @font-face{ font-family:"Inter Repli"; src:local("Arial"),local("Helvetica"),local("Segoe UI"); ascent-override:95.38%; descent-override:23.75%; line-gap-override:0%; size-adjust:101.57%; } @font-face{ font-family:"Inter Tight Repli"; src:local("Arial"),local("Helvetica"),local("Segoe UI"); ascent-override:95.38%; descent-override:23.75%; line-gap-override:0%; size-adjust:101.57%; } /* ---------- Reset léger ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } /* Le site ne tient PAS compte de prefers-reduced-motion. Décision du propriétaire, prise en connaissance de cause le 2026-08-01, pour deux raisons : la règle globale qui vivait ici coupait toute animation et toute transition du site - y compris l'indicateur de chargement, qui se figeait et se lisait comme une panne - et le réglage se retrouve activé sur des machines dont la personne ignore l'avoir. Ce que cela coûte, écrit ici pour que personne ne le redécouvre : le critère 2.2.2 de la WCAG (niveau A) demande un moyen d'arrêter une animation qui démarre seule et dure plus de cinq secondes. Le cadre tournant des lieux commandités entre dans ce cas et n'a plus ce moyen. Ne pas réintroduire la règle sans en reparler - ce n'est pas un oubli. */ body{ margin:0; font-family:"Inter","Inter Repli",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:16.5px; line-height:1.62; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"cv05" 1,"ss01" 1; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; } input,select,textarea{ font:inherit; color:inherit; } /* Titres allégés (2026-07-31, demande utilisateur) : 600 partout donnait des titres très appuyés. Valeur explicite plutôt que le mot-clé "lighter" : celui-ci est relatif au parent (400 ici), donc il demanderait 100 - un poids que ni Inter ni Inter Tight ne contiennent (les deux fontes variables sont déclarées sur 400-700, voir @font-face plus haut), le navigateur le ramènerait à 400 sans le dire. 500 ici, et 400 sur les grands titres d'affichage seulement (voir .section-head/.page-hero/.quiz-q plus bas) : à 1,1rem, 400 ne se distinguerait plus du texte courant. */ h1,h2,h3,h4{ font-family:"Inter Tight","Inter Tight Repli","Inter","Inter Repli",sans-serif; font-weight:500; line-height:1.12; letter-spacing:-.018em; margin:0; color:var(--ink); } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } /* ---------- Icônes ---------- */ .ic{ width:1.25em; height:1.25em; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; } /* ---------- Utilitaires ---------- */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } /* Le rythme vertical entre sections vient uniquement du padding-bottom - seule la première section après le bandeau héro garde un padding-top, pour ne jamais doubler l'espacement entre deux sections empilées. */ .section{ padding-top:0; padding-bottom:clamp(3.4rem,7vw,6rem); } /* Une section qui suit un bloc à fond lavis retrouve son padding-top : la règle "pas de padding-top" ci-dessus évite de doubler l'espacement entre deux sections sur fond identique, mais ici la rupture de couleur rend la section suivante collée à la bande du dessus (2026-07-31). */ .page-hero + .section, .section-wash + .section, main > .section:first-child{ padding-top:clamp(3.4rem,7vw,6rem); } section[id],#quiz-results,#quiz-card{ scroll-margin-top:84px; } .section-head{ max-width:44rem; margin-bottom:clamp(1.8rem,4vw,3rem); } /* ---------- Fonds dégradés discrets ---------- Réécrits en CSS pur le 2026-07-31 : c'étaient trois JPEG de dégradés flous (bleu-violet, cyan, blush) recouverts d'un voile blanc à 92% pour rester lisibles - trois requêtes réseau et 85 ko pour un résultat presque invisible et, surtout, dans des teintes qui n'existent nulle part ailleurs sur le site. Ce sont maintenant des dégradés construits sur les jetons de la palette : rien à télécharger, net à toutes les résolutions, et les couleurs sont celles du reste du site. Plus de voile ::before non plus - les couleurs sont choisies ici, donc le contraste est garanti par construction plutôt que rattrapé après coup (mesures dans les commentaires ci-dessous, toujours contre --muted #587068, le ton de texte le plus pâle du site). Trois emplacements : les catégories de l'accueil, le sélecteur d'intérêts de par-interet.html, les étapes du speed dating. Jamais derrière une grille de fiches de lieu (voir la note dans par-interet.html). */ .section-wash{ position:relative; isolation:isolate; } .section-wash > .container{ position:relative; z-index:1; } /* Accueil - vert de marque monté du coin inférieur gauche, bleu marine du coin inférieur droit : les deux couleurs identitaires du site, concentrées sous l'index des types de sortie et quasi éteintes au niveau du bloc de titre. Mesuré sur le rendu réel (capture de la section sans son contenu, pixel le plus sombre de chaque zone, contre --muted #587068) : 5,11:1 dans le bloc de titre, 4,57:1 dans l'index, 4,43:1 dans la marge basse où aucun texte ne repose. Les rangées de l'index n'ont pas de fond opaque, leur texte est donc bien posé sur ce dégradé - d'où des opacités volontairement basses. */ .wash-blue{ background: radial-gradient(115% 85% at 8% 118%, rgba(22,168,122,.11) 0%, rgba(22,168,122,0) 58%), radial-gradient(95% 80% at 92% 112%, rgba(18,58,99,.07) 0%, rgba(18,58,99,0) 60%), linear-gradient(180deg, #FBFDFB 0%, var(--bg-2) 100%); } /* Par intérêt - bloc court et large : un seul foyer vert d'eau en haut à droite suffit, il pousse le regard vers les puces sans les concurrencer. Seules des puces (fond opaque) reposent dessus, l'opacité peut donc monter plus haut qu'ailleurs sans mettre de texte en difficulté. */ .wash-cyan{ background: radial-gradient(90% 130% at 100% 0%, rgba(22,168,122,.18) 0%, rgba(22,168,122,0) 62%), linear-gradient(180deg, var(--bg-2) 0%, #FBFDFB 100%); } /* Speed dating - même construction, teintée vers le rose de la sortie "en couple" (--c-couple), le seul endroit du site où cette teinte a du sens. Du texte --muted court jusqu'en bas de cette section (les étapes, le bloc "aucun événement"), d'où des opacités encore plus basses qu'ailleurs : point le plus chargé mesuré à 4,55:1 sur le rendu réel. */ .wash-blush{ background: radial-gradient(80% 120% at 15% 0%, rgba(232,67,147,.08) 0%, rgba(232,67,147,0) 55%), radial-gradient(90% 110% at 95% 100%, rgba(22,168,122,.07) 0%, rgba(22,168,122,0) 58%), linear-gradient(180deg, #FBFDFB 0%, var(--bg-2) 100%); } /* .interet-picker (par-interet.html) n'est pas une
pleine largeur mais un bloc à l'intérieur de .container - il porte lui-même .section-wash et a donc besoin de son propre espacement interne pour que le lavis ne colle pas directement aux puces/au h2. */ .interet-picker{ padding:1.4rem 1.4rem 1.6rem; border-radius:var(--r); margin-bottom:1.6rem; } .interet-picker .interet-grid{ margin-bottom:0; position:relative; z-index:1; } .interet-picker h2{ position:relative; z-index:1; } /* Grands titres d'affichage : 400, le plus léger que contiennent les fontes variables du site. Plus de margin-top : elle ne servait qu'à espacer le titre de l'eyebrow au-dessus, retiré des 5 pages le 2026-07-31. */ .section-head h1,.section-head h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:400; } .section-head p{ margin-top:.9rem; color:var(--muted); font-size:1.05rem; } .skip-link{ position:absolute; left:-999px; top:.5rem; z-index:200; background:var(--dark); color:var(--on-dark); padding:.6rem 1rem; border-radius:var(--r-sm); } .skip-link:focus{ left:.75rem; } :where(a,button,input,select,[tabindex]):focus-visible{ outline:2.5px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs); } /* A11Y fix (2026-07-30, WCAG 2.2 SC 1.4.11): --focus (#0B6E52) measures only 1.86:1 on the --dark navy (#123A63) used by these three full-bleed dark surfaces (site footer, page-hero bands, promo band) - below the 3:1 floor for a focus indicator. --accent-bright measures 5.25:1 on --dark, so these three dark-surface contexts override the outline colour; every other surface (cards, chips, form controls) stays on the light background where --focus already passes and is left untouched. */ .site-footer :focus-visible, .page-hero :focus-visible, .promo-band :focus-visible{ outline-color:var(--accent-bright); } /* ---------- Boutons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.82rem 1.35rem; border-radius:var(--r-sm); font-weight:600; font-size:.96rem; letter-spacing:-.005em; border:1px solid transparent; transition:transform var(--t),background var(--t),border-color var(--t),color var(--t),box-shadow var(--t); white-space:nowrap; } .btn .ic{ width:1.15em; height:1.15em; } .btn-primary{ background:var(--accent-strong); color:#fff; box-shadow:var(--sh-1); } .btn-primary:hover{ background:var(--accent-hover); transform:translateY(-1px); } .btn-forest{ background:var(--dark); color:var(--on-dark); } .btn-forest:hover{ background:var(--dark-2); transform:translateY(-1px); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--ink); background:var(--surface); } .btn-ghost-light{ background:transparent; color:var(--on-dark); border-color:rgba(239,247,242,.34); } .btn-ghost-light:hover{ border-color:var(--on-dark); background:rgba(255,255,255,.06); } .btn-sm{ padding:.55rem .9rem; font-size:.86rem; } .btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; } /* ---------- Structure de page (coquille d'application) ---------- Le défilement se fait dans .page-scroll, pas sur , pour que la barre de défilement du viewport ne passe jamais sous l'en-tête. */ html,body{ height:100%; } body{ display:flex; flex-direction:column; overflow:hidden; } .page-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:clip; scroll-behavior:smooth; scrollbar-gutter:stable; } /* ---------- Barres de défilement discrètes (survol/défilement actif) ---------- Les régions à défilement interne du site (page complète, résultats de l'explorateur, ses filtres, options et résultats du questionnaire) réservent déjà leur gouttière (scrollbar-gutter:stable, déclaré sur chaque région ci-dessous/plus bas - rien n'est double-réservé, .page-scroll--shell annule sa propre réservation quand la vraie barre vit sur une région interne, voir plus haut) : le pouce ne devient visible qu'au survol ou pendant un défilement actif (classe .is-scrolling, voir wireScrollbarReveal dans app.js), sinon la piste reste totalement transparente. Défilement clavier/tactile inchangé - c'est un habillage purement visuel. Couleur de pouce volontairement translucide plutôt qu'un ton plein unique : certaines de ces régions (.page-scroll en particulier) défilent aussi bien sur des bandeaux clairs que sur le héro/pied de page sombres - la transparence s'adapte visuellement aux deux plutôt que de figer un ton qui ne conviendrait qu'à l'un des deux. */ .page-scroll, .venues, .explorer-aside, .quiz-q, #quiz-venues{ scrollbar-width:thin; scrollbar-color:transparent transparent; } .page-scroll:hover, .page-scroll.is-scrolling, .venues:hover, .venues.is-scrolling, .explorer-aside:hover, .explorer-aside.is-scrolling, .quiz-q:hover, .quiz-q.is-scrolling, #quiz-venues:hover, #quiz-venues.is-scrolling{ scrollbar-color:rgba(90,110,105,.6) transparent; } .page-scroll::-webkit-scrollbar, .venues::-webkit-scrollbar, .explorer-aside::-webkit-scrollbar, .quiz-q::-webkit-scrollbar, #quiz-venues::-webkit-scrollbar{ width:8px; height:8px; } .page-scroll::-webkit-scrollbar-track, .venues::-webkit-scrollbar-track, .explorer-aside::-webkit-scrollbar-track, .quiz-q::-webkit-scrollbar-track, #quiz-venues::-webkit-scrollbar-track{ background:transparent; } .page-scroll::-webkit-scrollbar-thumb, .venues::-webkit-scrollbar-thumb, .explorer-aside::-webkit-scrollbar-thumb, .quiz-q::-webkit-scrollbar-thumb, #quiz-venues::-webkit-scrollbar-thumb{ background:transparent; border-radius:var(--r-pill); } .page-scroll:hover::-webkit-scrollbar-thumb, .page-scroll.is-scrolling::-webkit-scrollbar-thumb, .venues:hover::-webkit-scrollbar-thumb, .venues.is-scrolling::-webkit-scrollbar-thumb, .explorer-aside:hover::-webkit-scrollbar-thumb, .explorer-aside.is-scrolling::-webkit-scrollbar-thumb, .quiz-q:hover::-webkit-scrollbar-thumb, .quiz-q.is-scrolling::-webkit-scrollbar-thumb, #quiz-venues:hover::-webkit-scrollbar-thumb, #quiz-venues.is-scrolling::-webkit-scrollbar-thumb{ background:rgba(90,110,105,.6); } /* ---------- Coquille stricte "une page" - questionnaire (Étape 3d, remplace la version 3c ; explorateur exclu ci-dessous via :not(.explorer-page) - il a son propre seuil à 1024px, voir plus bas, depuis l'ajout du panneau de filtres plein écran mobile). En dessous de 768px, .page-scroll--shell se comporte comme .page-scroll normal (défilement de page classique). À 768px et plus, plus rien ne défile ici : la page occupe exactement 100dvh et seule la région désignée (options du questionnaire) défile en interne. */ @media (min-width:768px){ body:not(.explorer-page) .page-scroll--shell{ overflow:hidden; display:flex; flex-direction:column; /* Plus de vraie barre de défilement ici (elle est maintenant sur la région interne désignée) - annule la réservation --sbw/stable, sinon elle laisse un espace fantôme à droite qui empêche le contenu de vraiment toucher le bord (demande utilisateur 2026-07-30). */ scrollbar-gutter:auto; } body:not(.explorer-page) .page-scroll--shell > main{ display:flex; flex-direction:column; flex:1; min-height:0; /* Tâche 16 (ajustement) : .page-scroll--shell n'a plus de barre de défilement propre (scrollbar-gutter:auto ci-dessus), alors que les 3 autres pages défilent dans .page-scroll (scrollbar-gutter:stable, qui réserve --sbw). Comme le héro et les coquilles internes de l'explorateur/questionnaire utilisent maintenant le même .container plafonné/centré que les 3 autres pages, on reproduit ici la même réservation - sinon leur centrage se ferait sur une largeur plus grande et leur bord gauche ne tomberait plus au même endroit. */ padding-right:var(--sbw); } } /* Explorateur : mêmes règles de coquille "une page" que ci-dessus, mais à partir de 1024px seulement - entre 768 et 1023px, la page défile normalement et les filtres vivent dans le panneau plein écran mobile (voir plus bas, section Explorateur) plutôt que dans une colonne latérale fixe à côté des résultats. */ @media (min-width:1024px){ .explorer-page .page-scroll--shell{ overflow:hidden; display:flex; flex-direction:column; scrollbar-gutter:auto; } .explorer-page .page-scroll--shell > main{ display:flex; flex-direction:column; flex:1; min-height:0; padding-right:var(--sbw); } } /* ---------- En-tête / navigation ---------- */ .site-header{ position:relative; z-index:100; flex:none; background:rgba(239,247,240,.82); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); } /* Compense la largeur de la barre de défilement de .page-scroll (voir --sbw ci-dessus) en réduisant la largeur du bloc conteneur de l'en-tête (via padding, pas overflow:hidden - ça couperait le panneau de menu mobile position:fixed, que les navigateurs rognent même si la spec dit le contraire). Le .container centré (margin-inline:auto) se recentre alors sur la même largeur effective que dans .page-scroll. S'applique aux 5 pages, sans exception (2026-07-31) : l'explorateur et le questionnaire annulaient cette réservation, alors que leur
la reproduit quand même (voir .page-scroll--shell > main plus haut) - la navigation s'y décalait donc de la largeur d'une barre de défilement par rapport aux autres pages. */ .site-header{ padding-right:var(--sbw); } /* Tâche 16 : le bandeau de navigation est désormais pleine largeur sur les 5 pages (gutter uniquement, pas de plafond) - même bord gauche que le bandeau héro et la marque, sur toutes les pages. Remplace la règle propre aux coquilles d'application (explorer/questionnaire), devenue redondante puisque la règle s'applique maintenant partout. */ .site-header .container{ max-width:none; margin-inline:0; } .nav{ display:flex; align-items:center; gap:1.4rem; height:68px; } .brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:"Inter Tight","Inter Tight Repli",sans-serif; font-weight:600; font-size:1.16rem; letter-spacing:-.02em; } .brand .fleur{ width:26px; height:26px; color:var(--accent); } .brand .q{ color:var(--accent-ink); font-weight:600; } .nav-spacer{ flex:1; } .nav-links{ display:flex; align-items:center; gap:.35rem; } .nav-links a{ padding:.5rem .8rem; border-radius:var(--r-sm); font-size:.93rem; font-weight:500; color:var(--ink-2); transition:background var(--t),color var(--t); } .nav-links a:hover{ background:var(--bg-2); color:var(--ink); } .nav-links a[aria-current="page"]{ background:var(--bg-2); color:var(--accent-ink); } .footer-col a[aria-current="page"]{ color:#fff; } .nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border:none; border-radius:var(--r-sm); } /* Tâche 18 : ajout d'un 6e lien ("Par intérêt") - entre 861px (seuil du menu mobile ci-dessous) et ~1180px, les liens commençaient à serrer le bord du bouton hamburger, voire à passer à la ligne de façon abrupte. On resserre l'espacement/le padding des liens dans cette plage plutôt que de baisser le seuil du menu mobile (qui reste à 860px), et on autorise un retour à la ligne propre en tout dernier recours si une résolution encore plus étroite s'en trouvait affichée. 2026-08-01 : la pastille de région a quitté l'en-tête (elle vit maintenant dans le sélecteur de géographie, voir .geo-choix plus bas), mais cette règle reste nécessaire - vérifié à 861px, les six liens seuls repassent sur deux lignes sans elle, et jusqu'à ~960px. La borne haute est laissée à 1180px : la largeur exacte où le débordement cesse dépend du rendu des polices, et resserrer l'espacement un peu trop longtemps ne coûte rien. */ .nav-links{ flex-wrap:wrap; row-gap:.25rem; } @media (min-width:861px) and (max-width:1180px){ .nav-links{ gap:.1rem; } .nav-links a{ padding:.5rem .55rem; font-size:.88rem; } /* .nav impose height:68px plus haut dans ce fichier (utile quand tout tient sur une ligne) - si les 5 liens finissent tout de même sur deux lignes à une largeur donnée dans cette plage, height:auto laisse l'en-tête grandir pour les deux lignes plutôt que de les centrer dans une boîte de hauteur fixe (ce qui les ferait légèrement déborder en haut et en bas de l'en-tête). */ .nav{ height:auto; min-height:68px; padding-block:.35rem; } } @media (max-width:860px){ .nav-links{ display:none; } .nav-toggle{ display:inline-flex; } .nav-links.open{ /* position:fixed (plutôt que absolute) : le panneau reste entier même si .site-header a overflow-y:hidden (réservation de la gouttière de la barre de défilement) - fixed échappe au clip d'un ancêtre. */ display:flex; position:fixed; left:var(--gutter); right:var(--gutter); top:var(--header-h); flex-direction:column; align-items:stretch; gap:.15rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.5rem; box-shadow:var(--sh-2); } .nav-links.open a{ padding:.75rem .9rem; } } /* ---------- Héro (bandeau CTA de l'accueil) ---------- L'accueil partage désormais le même bandeau compact .page-hero que les autres pages (Tâche 13, harmonisation) - .hero-cta reste son propre bloc car les boutons de l'accueil vivent sous la lede plutôt qu'à côté d'elle. */ .hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; } @media (max-width:520px){ .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ width:100%; } } /* ---------- En-tête de page compact (photo) ---------- */ .page-hero{ position:relative; background:var(--dark); color:var(--on-dark); overflow:hidden; } /* Tâche 16 (ajustement) : les 5 pages utilisent maintenant .container sur ce bloc, donc le texte du héro est toujours plafonné/centré à --container (1200px) et aligné avec les titres de section - sur l'explorateur et le questionnaire, le reste de la coquille (filtres/résultats, quiz) adopte maintenant le même plafond (voir .explorer-shell / .quiz-shell plus bas), seule la nav reste pleine largeur sur ces deux pages. padding-inline reste déclaré ici en repli (même valeur --gutter que .container) au cas où .container serait retiré d'une bande héro. */ .page-hero-inner{ position:relative; z-index:1; padding-block:clamp(2.6rem,6vw,4rem); padding-inline:var(--gutter); } .page-hero-content{ max-width:44rem; text-align:left; } .page-hero h1{ color:#fff; font-size:clamp(1.9rem,4.2vw,2.7rem); font-weight:400; max-width:34ch; } /* Titre de l'accueil : le segment mis en emphase a brièvement essayé une couleur pleine puis un dégradé texte (demandes utilisateur du 2026-07-30) ; décision finale : aucune mise en emphase de couleur, même blanc que le reste du h1 - font-style:normal reste nécessaire (l'élément est italique par défaut, ce qui n'est pas voulu ici). */ .page-hero h1 em{ font-style:normal; color:#fff; } .page-hero p{ margin-top:.85rem; font-size:1.02rem; color:var(--on-dark); max-width:44rem; line-height:1.55; } .page-hero--index.has-photo{ background: linear-gradient(115deg, rgba(18,58,99,.92) 0%, rgba(18,58,99,.78) 45%, rgba(44,153,232,.5) 100%), url("../images/hero-quebec-skyline.jpg") center/cover no-repeat var(--dark); } @media (max-width:720px){ .page-hero--index.has-photo{ background-image: linear-gradient(115deg, rgba(18,58,99,.92) 0%, rgba(18,58,99,.78) 45%, rgba(44,153,232,.5) 100%), url("../images/hero-quebec-skyline-960.jpg"); } } /* Évènements : réutilise la photo du Château Frontenac, déjà dans le dépôt (elle ne servait que d'arrière-plan au bloc "Proposer un lieu"). Queue de teinte verte comme la page Par intérêt. */ .page-hero--evenements.has-photo{ background: linear-gradient(115deg, rgba(18,58,99,.92) 0%, rgba(18,58,99,.78) 45%, rgba(22,168,122,.5) 100%), url("../images/chateau-frontenac.jpg") center/cover no-repeat var(--dark); } .page-hero--apropos.has-photo{ background: linear-gradient(115deg, rgba(18,58,99,.92) 0%, rgba(18,58,99,.78) 45%, rgba(245,166,35,.5) 100%), url("../images/amis-terrasse.jpg") center/cover no-repeat var(--dark); } .page-hero--speeddating.has-photo{ background: linear-gradient(115deg, rgba(18,58,99,.92) 0%, rgba(18,58,99,.78) 45%, rgba(214,51,108,.5) 100%), url("../images/sortie-groupe.jpg") center/cover no-repeat var(--dark); } /* M1 fix (2026-07-30) : seule page de contenu dont le héro n'avait pas de photo - réutilise images/quebec-ville.jpg (jusqu'ici inutilisée depuis le retrait de l'ancien héro de l'explorateur). Queue de teinte sarcelle-vert (--accent, rgb(22,168,122)) plutôt qu'une des quatre teintes déjà prises par une autre page de contenu (orange à propos, rose speed-dating, bleu accueil) - Par intérêt n'est rattaché à aucun type de sortie en particulier. */ .page-hero--interet.has-photo{ background: linear-gradient(115deg, rgba(18,58,99,.92) 0%, rgba(18,58,99,.78) 45%, rgba(22,168,122,.5) 100%), url("../images/quebec-ville.jpg") center/cover no-repeat var(--dark); } /* ---------- Index « types de sortie » ---------- Remplace la grille de 5 cartes (2026-07-31, demande utilisateur) : à cinq colonnes dans 1200px, chaque carte tombait sous les 220px, les titres passaient sur deux lignes ("Premier rendez-vous") et les descriptions sur trois, avec des hauteurs toutes différentes. En rangées pleine largeur, chaque type tient sur une ligne de titre + une ligne de description, les nombres s'alignent à droite et l'ensemble se lit comme le sommaire d'un guide. Même destination, même donnée, aucun changement côté explorateur. */ .cat-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); } .cat-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:0 1.1rem; padding:1.15rem .75rem; border-bottom:1px solid var(--line); transition:background var(--t),padding-left var(--t); } /* Le fond ne fait que se teinter et la rangée avance légèrement : pas d'ombre ni de soulèvement, qui redonneraient l'aspect "carte" que cette disposition cherche justement à quitter. */ .cat-row:hover{ background:var(--bg-2); padding-left:1.1rem; } .cat-row .ic-wrap{ width:40px; height:40px; display:grid; place-items:center; color:var(--accent-strong); } .cat-row .ic-wrap .ic{ width:22px; height:22px; stroke-width:2.1; } .cat-row-body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; } .cat-row h3{ font-size:1.12rem; } .cat-row-desc{ font-size:.9rem; color:var(--muted); line-height:1.5; } /* Chevron d'appel : seul repère à droite depuis le retrait du nombre de lieux. Teinté à la couleur du type de sortie (voir le bloc "Hues" plus bas) pour que chaque rangée garde son identité. */ .cat-row-go{ display:inline-flex; align-items:center; color:var(--accent-ink); } .cat-row-go .ic{ width:18px; height:18px; transition:transform var(--t); } .cat-row:hover .cat-row-go .ic{ transform:translateX(3px); } @media (max-width:560px){ /* Le chevron ne prend que 18px, les trois colonnes tiennent toujours - seuls les marges internes se resserrent. */ .cat-row{ gap:0 .85rem; padding-inline:.25rem; } } /* ---------- Hues par type de sortie (palette v2) ---------- Un bloc par sortie : cartes de catégorie, puces de filtre, options du questionnaire (contexte). Toute la logique de couleur reste en CSS - le JS ne fait qu'ajouter data-sortie="" sur les éléments rendus. Tuiles d'icône (.ic-wrap/.opt-ic) sans fond depuis le 2026-07-30 (voir plus haut) : leur teinte "sélectionnée/catégorie" vient donc uniquement de la couleur du glyphe. Les cinq variantes -ink sont utilisées uniformément ici (et pas seulement pour entre-amis) - calculé >= 3:1 (repli non-texte) sur --surface (blanc) ET --bg-2 pour les cinq teintes : solo 6.27:1/5.74:1, entre-amis 5.57:1/5.10:1 (déjà en place), couple 6.41:1/5.87:1, premier-rendez-vous 5.99:1/5.48:1, famille 7.12:1/6.52:1 - les teintes brutes (--c-) échouaient pour au moins une des deux surfaces (ex. solo brut : 3.08:1 sur blanc mais seulement 2.82:1 sur --bg-2, sous le seuil), donc -ink partout plutôt qu'un traitement au cas par cas. */ .cat-row[data-sortie="solo"] .ic-wrap{ color:var(--c-solo-ink); } .cat-row[data-sortie="solo"]:hover{ border-bottom-color:var(--c-solo); } .cat-row[data-sortie="solo"] .cat-row-go{ color:var(--c-solo-ink); } .chip[data-sortie="solo"][aria-pressed="true"]{ background:var(--c-solo-soft); border-color:var(--c-solo); color:var(--c-solo-ink); } .chip[data-sortie="solo"][aria-pressed="true"] .ic{ color:var(--c-solo-ink); } .opt[data-sortie="solo"][aria-pressed="true"]{ border-color:var(--c-solo); background:var(--c-solo-soft); box-shadow:inset 0 0 0 1px var(--c-solo); } .opt[data-sortie="solo"][aria-pressed="true"] .opt-ic{ color:var(--c-solo-ink); } .opt[data-sortie="solo"][aria-pressed="true"] .opt-check{ background:var(--c-solo); border-color:var(--c-solo); } .cat-row[data-sortie="entre-amis"] .ic-wrap{ color:var(--c-entre-amis-ink); } /* SECURITY/A11Y: --c-entre-amis (#F5A623) on the white .cat-row surface only measures 2.03:1, below the 3:1 non-text floor (WCAG 2.2). Border uses the darker -ink token instead (5.57:1 on white) - tiles/icons keep the bright amber hue untouched. */ .cat-row[data-sortie="entre-amis"]:hover{ border-bottom-color:var(--c-entre-amis-ink); } .cat-row[data-sortie="entre-amis"] .cat-row-go{ color:var(--c-entre-amis-ink); } .chip[data-sortie="entre-amis"][aria-pressed="true"]{ background:var(--c-entre-amis-soft); border-color:var(--c-entre-amis); color:var(--c-entre-amis-ink); } .chip[data-sortie="entre-amis"][aria-pressed="true"] .ic{ color:var(--c-entre-amis-ink); } .opt[data-sortie="entre-amis"][aria-pressed="true"]{ border-color:var(--c-entre-amis); background:var(--c-entre-amis-soft); box-shadow:inset 0 0 0 1px var(--c-entre-amis); } .opt[data-sortie="entre-amis"][aria-pressed="true"] .opt-ic{ color:var(--c-entre-amis-ink); } .opt[data-sortie="entre-amis"][aria-pressed="true"] .opt-check{ background:var(--c-entre-amis); border-color:var(--c-entre-amis); } .cat-row[data-sortie="couple"] .ic-wrap{ color:var(--c-couple-ink); } .cat-row[data-sortie="couple"]:hover{ border-bottom-color:var(--c-couple); } .cat-row[data-sortie="couple"] .cat-row-go{ color:var(--c-couple-ink); } .chip[data-sortie="couple"][aria-pressed="true"]{ background:var(--c-couple-soft); border-color:var(--c-couple); color:var(--c-couple-ink); } .chip[data-sortie="couple"][aria-pressed="true"] .ic{ color:var(--c-couple-ink); } .opt[data-sortie="couple"][aria-pressed="true"]{ border-color:var(--c-couple); background:var(--c-couple-soft); box-shadow:inset 0 0 0 1px var(--c-couple); } .opt[data-sortie="couple"][aria-pressed="true"] .opt-ic{ color:var(--c-couple-ink); } .opt[data-sortie="couple"][aria-pressed="true"] .opt-check{ background:var(--c-couple); border-color:var(--c-couple); } .cat-row[data-sortie="premier-rendez-vous"] .ic-wrap{ color:var(--c-premier-rendez-vous-ink); } .cat-row[data-sortie="premier-rendez-vous"]:hover{ border-bottom-color:var(--c-premier-rendez-vous); } .cat-row[data-sortie="premier-rendez-vous"] .cat-row-go{ color:var(--c-premier-rendez-vous-ink); } .chip[data-sortie="premier-rendez-vous"][aria-pressed="true"]{ background:var(--c-premier-rendez-vous-soft); border-color:var(--c-premier-rendez-vous); color:var(--c-premier-rendez-vous-ink); } .chip[data-sortie="premier-rendez-vous"][aria-pressed="true"] .ic{ color:var(--c-premier-rendez-vous-ink); } .opt[data-sortie="premier-rendez-vous"][aria-pressed="true"]{ border-color:var(--c-premier-rendez-vous); background:var(--c-premier-rendez-vous-soft); box-shadow:inset 0 0 0 1px var(--c-premier-rendez-vous); } .opt[data-sortie="premier-rendez-vous"][aria-pressed="true"] .opt-ic{ color:var(--c-premier-rendez-vous-ink); } .opt[data-sortie="premier-rendez-vous"][aria-pressed="true"] .opt-check{ background:var(--c-premier-rendez-vous); border-color:var(--c-premier-rendez-vous); } .cat-row[data-sortie="famille"] .ic-wrap{ color:var(--c-famille-ink); } .cat-row[data-sortie="famille"]:hover{ border-bottom-color:var(--c-famille); } .cat-row[data-sortie="famille"] .cat-row-go{ color:var(--c-famille-ink); } .chip[data-sortie="famille"][aria-pressed="true"]{ background:var(--c-famille-soft); border-color:var(--c-famille); color:var(--c-famille-ink); } .chip[data-sortie="famille"][aria-pressed="true"] .ic{ color:var(--c-famille-ink); } .opt[data-sortie="famille"][aria-pressed="true"]{ border-color:var(--c-famille); background:var(--c-famille-soft); box-shadow:inset 0 0 0 1px var(--c-famille); } .opt[data-sortie="famille"][aria-pressed="true"] .opt-ic{ color:var(--c-famille-ink); } .opt[data-sortie="famille"][aria-pressed="true"] .opt-check{ background:var(--c-famille); border-color:var(--c-famille); } /* ---------- Questionnaire ---------- Tâche 14 : plus de mini-carte flottante avec ascenseur interne - l'assistant occupe toute la largeur de la coquille d'application (comme l'explorateur). La barre de progression, l'entête de question et la navigation précédent/suivant vivent directement dans .quiz-shell ; .quiz-card (ciblé par le JS) n'est plus qu'un conteneur flex sans habillage de carte. Tâche (retrait du héro) : le bandeau héro de cette page a été supprimé - .quiz-shell part maintenant du haut de la coquille d'application, ce qui rend à la grille d'options tout l'espace vertical que le bandeau occupait. Le seuil de l'ascenseur interne plus bas dans ce fichier a été abaissé en conséquence. */ .quiz{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* Tâche 16 (ajustement) : plafonné/centré comme .container (1200px) - la nav reste seule pleine largeur sur cette page, le contenu du questionnaire partage désormais la même largeur que les 3 autres pages. */ .quiz-shell{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .quiz-card{ width:100%; padding-block:clamp(1.1rem,2.6vw,1.7rem) 0; } .quiz-progress{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.2rem,3vw,1.9rem); } .quiz-progress .track{ flex:1; height:6px; border-radius:var(--r-pill); background:var(--line-2); overflow:hidden; } .quiz-progress .fill{ height:100%; width:0; background:var(--accent); border-radius:inherit; transition:width var(--t); } .quiz-progress .step-lbl{ font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:.02em; white-space:nowrap; } .quiz-q{ animation:fade .28s ease; } @keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } .quiz-q .q-kicker{ font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); } .quiz-q h3{ font-size:clamp(1.4rem,3.4vw,2.1rem); font-weight:400; margin-top:.5rem; max-width:34ch; } .quiz-q .q-hint{ margin-top:.45rem; color:var(--muted); font-size:.93rem; max-width:60ch; } .q-multi-badge{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.55rem; font-size:.76rem; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line); padding:.26rem .65rem; border-radius:var(--r-pill); } .q-multi-badge .ic{ width:14px; height:14px; } /* Étiquette « en cours ». Trois critères (réservation, accessibilité, alimentation) reposent sur des données encore très incomplètes : presque aucun lieu n'est tagué pour l'accessibilité et l'alimentation, et la plupart sont « réservation à vérifier ». Filtrer là-dessus donne donc peu ou pas de résultats, ce qui se lit à tort comme « il n'y a rien ». L'étiquette le dit franchement plutôt que de laisser croire à une recherche complète. Les filtres restent utilisables : quelqu'un qui a un besoin d'accessibilité doit pouvoir chercher, même sur des données partielles. Couleurs : #8F5E00 sur #FDF0DA = 4,96:1, au-dessus du seuil AA de 4,5:1. */ .wip-badge{ display:inline-flex; align-items:center; flex:none; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:none; color:var(--c-entre-amis-ink); background:var(--c-entre-amis-soft); border:1px solid #EFD9A8; padding:.12rem .45rem; border-radius:var(--r-pill); } /* Dans le questionnaire, l'étiquette est seule sur sa ligne sous le titre. */ .quiz-q .wip-badge{ margin-top:.55rem; font-size:.76rem; padding:.26rem .65rem; } /* Grille d'options du questionnaire (Tâche "UI batch 2", item 6) : colonnes explicites par palier plutôt qu'auto-fit/minmax - l'ancienne règle (auto-fit, minmax(240px,1fr)) produisait 4 colonnes sur les viewports larges (>= ~1050px de contenu), ce qui rendait chaque option trop étroite. Plafonné à 3 colonnes max, toujours responsive en-dessous : 1 (mobile), 2 (tablette), 3 (bureau). */ .opt-grid{ display:grid; gap:.7rem; margin-top:clamp(1rem,2.4vw,1.5rem); grid-template-columns:1fr; } @media (min-width:640px){ .opt-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:900px){ .opt-grid{ grid-template-columns:repeat(3,1fr); } } .opt{ display:flex; align-items:center; gap:1rem; text-align:left; width:100%; min-height:72px; padding:1.05rem 1.2rem; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); transition:border-color var(--t),background var(--t),box-shadow var(--t),transform var(--t); } .opt:hover{ border-color:var(--accent-line); background:var(--bg-2); transform:translateY(-1px); } .opt .opt-ic{ width:46px; height:46px; display:grid; place-items:center; color:var(--accent-strong); flex:none; } .opt .opt-ic .ic{ width:22px; height:22px; stroke-width:2.1; } .opt .opt-txt{ display:flex; flex-direction:column; gap:.15rem; } .opt .opt-txt b{ font-weight:600; font-size:1.02rem; } .opt .opt-txt small{ color:var(--muted); font-size:.84rem; line-height:1.4; } .opt .opt-check{ margin-left:auto; width:24px; height:24px; border-radius:50%; border:1.75px solid var(--line); display:grid; place-items:center; color:#fff; flex:none; transition:background var(--t),border-color var(--t); } .opt .opt-check .ic{ width:15px; height:15px; opacity:0; } .opt[aria-pressed="true"]{ border-color:var(--dark); background:var(--surface); box-shadow:inset 0 0 0 1px var(--dark); } .opt[aria-pressed="true"] .opt-ic{ color:var(--dark); } .opt[aria-pressed="true"] .opt-check{ background:var(--dark); border-color:var(--dark); } .opt[aria-pressed="true"] .opt-check .ic{ opacity:1; } .quiz-nav{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:clamp(1rem,2.2vw,1.6rem); padding-top:1rem; border-top:1px solid var(--line); } .quiz-nav .link-btn{ font-size:.9rem; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .6rem; border-radius:var(--r-pill); } .quiz-nav .link-btn:hover{ color:var(--ink); } /* Suivant désactivé : ne compte pas seulement sur l'opacité (peu visible sur un bouton déjà saturé) - un fond neutre rend l'état bloqué évident au premier coup d'oeil, tout en gardant un contraste texte/fond lisible. */ .quiz-nav .btn-primary[disabled]{ background:var(--line-2); color:var(--muted); box-shadow:none; opacity:1; } /* Précédent désactivé (étape 1) : le bouton reste toujours rendu - il ne disparaît plus (fini le hack visibility:hidden sur [hidden]) - pour que Suivant reste ancré à droite dès la première question. Même logique que Suivant ci-dessus : un fond neutre distinct plutôt qu'une simple baisse d'opacité, qui garde le texte lisible (AA) tout en signalant clairement l'état bloqué. */ .quiz-nav .link-btn[disabled]{ color:var(--muted); background:var(--line-2); cursor:not-allowed; } .quiz-nav .link-btn[disabled]:hover{ color:var(--muted); } /* Coquille stricte "une page" - questionnaire (Étape 3d, >= 768px) : la page n'excède jamais 100dvh. La grille d'options ne défile PAS dans les viewports normaux (Tâche 14 : elle doit se refluer/wrap, pas scroller) ; seule une fenêtre vraiment basse active un ascenseur interne pour garder la progression et la navigation précédent/suivant toujours visibles. */ @media (min-width:768px){ /* Sélecteur "main .section.quiz" (et non ".section.quiz") à dessein : depuis le retrait du bandeau héro, .section.quiz est devenu le premier enfant de
, ce qui le fait aussi correspondre à la règle générale plus haut (main > .section:first-child, spécificité 0,2,1) qui impose le grand padding-top "après héro". Cette règle doit gagner ce bras de fer de spécificité (0,2,1 à égalité, mais déclarée après = elle l'emporte) pour que le rythme serré de la coquille d'application s'applique bien ici. */ main .section.quiz{ flex:1; min-height:0; display:flex; flex-direction:column; padding-block:1rem 1.25rem; } .quiz-shell{ flex:1; min-height:0; display:flex; flex-direction:column; } .quiz-card{ display:flex; flex-direction:column; flex:1; min-height:0; max-height:100%; } .quiz-q{ display:flex; flex-direction:column; flex:1; min-height:0; } .opt-grid{ flex:1; min-height:0; align-content:start; padding-right:.3rem; } .quiz-results{ flex:1; min-height:0; display:flex; flex-direction:column; } .quiz-results .rz-head{ flex:none; } .quiz-results .view-toggle{ flex:none; } .quiz-results #quiz-venues{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; padding-bottom:.5rem; } .quiz-results .venue-map{ flex:1; min-height:0; height:auto; } } /* Retrait du héro (retune) : sans le bandeau, 1024x768 (le repli à 820px servait surtout ce gabarit) tient désormais nativement. Le seuil est abaissé à 700px de haut - il ne couvre plus qu'un petit portable en mode paysage ou une fenêtre de bureau réellement basse ; l'ascenseur interne devient donc un vrai filet de sécurité plutôt qu'un cas courant. */ @media (min-width:768px) and (max-height:700px){ /* Sous ce seuil, l'entête de question (titre + indice) peut a elle seule remplir tout l'espace flex alloué à .quiz-q et écraser la grille d'options à 0px de haut. On fait donc défiler .quiz-q en entier (titre + options ensemble) plutôt que la seule grille, pour garantir que les options restent toujours atteignables - seules la barre de progression et la navigation précédent/suivant restent fixes en haut/bas. */ .quiz-q{ overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; padding-right:.3rem; } .opt-grid{ flex:none; } } /* Résultats du questionnaire */ .quiz-results .rz-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; } .quiz-results .rz-head h3{ font-size:clamp(1.4rem,3vw,1.9rem); } .quiz-results .rz-head p{ color:var(--muted); margin-top:.35rem; } .match-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; } .match-tag{ font-size:.76rem; font-weight:600; color:var(--dark); background:var(--accent-soft); border:1px solid var(--accent-line); padding:.28rem .6rem; border-radius:var(--r-pill); } /* ---------- Explorateur ---------- */ /* Bloc "avant filtres" compacté (UI batch 3, item 4c) : recherche, select de quartier et boutons Inspire-moi/Réinitialiser passent tous à 44px (au lieu de 48px, même gabarit que la rangée d'adresse) et le gap resserre de .7rem à .5rem - avec le retrait de l'ancien bouton "Près de moi" en pleine largeur et de la ligne d'attribution (items 2a/4a), l'ensemble du bloc perd environ un tiers de sa hauteur par rapport à avant. */ .search-row{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:stretch; } .search-box{ position:relative; flex:1; min-width:220px; } .search-box .ic{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--muted); } .search-box input{ width:100%; height:44px; padding:0 1rem 0 2.7rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); font-size:.98rem; } /* A11Y : le gris-vert #7C948C utilisé auparavant ne mesurait que 3.25:1 sur --surface (blanc), sous le seuil AA de 4.5:1 qui s'applique aussi au texte d'invite. --muted (déjà le ton "texte secondaire" du site) passe à 5.34:1 tout en restant visuellement plus léger que le texte saisi. */ .search-box input::placeholder{ color:var(--muted); } /* Message "au moins 2 caractères" - prend toute la largeur de .search-row pour se placer sous le champ plutôt qu'à côté des boutons. [hidden] explicite : la règle display de .search-hint l'emporterait sinon sur celle du navigateur. */ .search-hint{ flex:1 1 100%; margin:.1rem 0 0; font-size:.82rem; color:var(--ink-2); } .search-hint[hidden]{ display:none; } /* Groupes de filtres repliables (
/) - remplace l'ancienne pile de
toujours dépliée : l'aside prenait trop de hauteur et obligeait à défiler pour voir "Budget"/"Accessibilité"/"Alimentation" même à 1080p. Chaque affiche le nom du groupe + un badge de compte (masqué à 0) pour que l'état replié reste informatif ; le triangle natif est masqué au profit du petit chevron en ::after ci-dessous, cohérent avec .select-wrap::after plus haut. */ .filter-groups{ display:flex; flex-direction:column; } .fgroup{ border-bottom:1px solid var(--line); padding-block:.55rem; } .fgroup:first-of-type{ padding-top:0; } .fgroup:last-of-type{ border-bottom:none; padding-bottom:0; } .fg-summary{ display:flex; align-items:center; gap:.5rem; cursor:pointer; list-style:none; padding-block:.2rem; } .fg-summary::-webkit-details-marker{ display:none; } .fg-summary .fg-label{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .fg-summary::after{ content:""; margin-left:auto; width:7px; height:7px; flex:none; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); transition:transform var(--t); } .fgroup[open] > .fg-summary::after{ transform:rotate(-135deg); } .fg-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 .35rem; border-radius:var(--r-pill); background:var(--dark); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:normal; text-transform:none; } .chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; } .chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .7rem; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); font-size:.82rem; font-weight:500; color:var(--ink-2); transition:border-color var(--t),background var(--t),color var(--t); } .chip .ic{ width:15px; height:15px; color:var(--muted); } .chip:hover{ border-color:var(--accent-line); } .chip[aria-pressed="true"]{ background:var(--dark); border-color:var(--dark); color:#fff; } .chip[aria-pressed="true"] .ic{ color:var(--accent-bright); } /* ---------- Rangée de puces sur une seule ligne (2026-08-01) ---------- Les vingt et quelques catégories occupaient quatre ou cinq rangées et poussaient tout le bas de la colonne de filtres hors de l'écran. Elles tiennent maintenant sur une ligne qui défile à l'horizontale. Ce que le défilement horizontal doit à qui n'utilise pas de souris : - les puces retenues repassent en tête (js/filtres.js), donc un filtre actif reste visible sans avoir à chercher ; - une puce qui prend le focus est ramenée dans la vue, et scroll-padding laisse assez de marge pour que son anneau de focus ne soit pas coupé par le bord du cadre ; - le bouton « Tout afficher » rend la rangée à sa forme dépliée, ce qui rend la suite atteignable sans défilement du tout. scrollbar-width:thin plutôt que none : la barre est un repère visuel de plus que la rangée continue, et elle sert de prise à la souris. */ .chips-ligne{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scroll-padding-inline:4px; padding-block:4px; /* overscroll-behavior-x:contain : un balayage arrivé au bout de la rangée ne doit pas emporter la page ni déclencher le geste « page précédente ». */ overscroll-behavior-x:contain; } .chips-ligne > .chip{ flex:none; } .chips-ligne.is-deplie{ flex-wrap:wrap; overflow-x:visible; } .chips-plus{ margin-top:.45rem; padding:.2rem .1rem; font-size:.8rem; font-weight:600; color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; } .chips-plus:hover{ color:var(--ink); } /* Groupe "Distance" (item 3, UI batch 2) - déplacé en haut de l'aside et toujours visible : ce n'est plus un
/ comme les autres groupes de .filter-groups ci-dessus (voir explorer.html), c'est le point de départ le plus souvent utilisé en premier, donc il ne doit jamais nécessiter un clic pour être découvert. .aside-distance-head reprend le même habillage visuel que .fg-summary (étiquette + badge de compte) sans le curseur pointeur ni le chevron, qui n'ont plus de sens sans repli. .distance-panel n'ajoute que la disposition propre à ses commandes (bouton géolocalisation, recherche d'adresse, puces de rayon, statut, bouton d'effacement) - inchangée. */ .aside-distance{ border-bottom:1px solid var(--line); padding-bottom:.8rem; } .aside-distance-head{ display:flex; align-items:center; gap:.5rem; } .distance-panel{ display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem; } .distance-address-row{ display:flex; gap:.5rem; align-items:stretch; } .distance-address-box{ flex:1; min-width:0; } .distance-address-box input{ width:100%; height:44px; padding:0 .9rem 0 2.6rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); font-size:.9rem; } /* Bouton géolocalisation compact (UI batch 3) : bouton-icône carré, dans la même rangée que le champ d'adresse plutôt qu'au-dessus en pleine largeur - remplace aussi l'ancien bouton de recherche d'adresse séparé (même gabarit 44x44). */ .distance-geolocate-btn{ width:44px; height:44px; padding:0; flex:none; justify-content:center; } .distance-geolocate-btn[aria-busy="true"]{ opacity:.7; cursor:wait; } .distance-geolocate-btn.is-busy .ic{ animation:sq-spin 1s linear infinite; } @keyframes sq-spin{ to{ transform:rotate(360deg); } } /* Note "à vol d'oiseau" : discrète mais jamais masquée quand un point de départ est actif - c'est ce qui empêche de lire les kilomètres comme une distance de trajet. [hidden] explicite, sinon la règle display l'emporte. */ .distance-hint{ font-size:.78rem; color:var(--muted); line-height:1.45; } .distance-hint[hidden]{ display:none; } .distance-status{ font-size:.82rem; color:var(--ink-2); min-height:1.2em; } .distance-status.is-error{ color:#B3261E; } #btn-distance-clear{ align-self:flex-start; } .select-wrap{ position:relative; } .select-wrap select{ appearance:none; height:44px; padding:0 2.2rem 0 .9rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:.85rem; font-weight:500; } .search-row .btn{ height:44px; padding-block:0; } .select-wrap::after{ content:""; position:absolute; right:.85rem; top:50%; width:8px; height:8px; border-right:1.75px solid var(--muted); border-bottom:1.75px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none; } /* "Tous les quartiers" (item 5, UI batch 2) : toujours pleine largeur de la colonne de filtres - l'aside n'a que 320px de large sur bureau, où le select flottait à sa largeur de contenu à côté de la recherche plutôt que de s'aligner avec elle. Hauteur inchangée (48px, comme le champ de recherche). Scopé à .explorer-aside : ce composant ne vit nulle part ailleurs sur le site. */ .explorer-aside .select-wrap{ flex:1 1 100%; } .explorer-aside .select-wrap select{ width:100%; } /* Groupes de régions du sélecteur de géographie. Le menu déroulant natif ne se style pas de façon fiable au-delà de ça d'un navigateur à l'autre : on aligne seulement la couleur et la graisse sur les tokens du site, pour que l'étiquette de région se distingue de ses quartiers. */ .explorer-aside .select-wrap optgroup{ font-weight:700; color:var(--dark); } .explorer-aside .select-wrap option{ font-weight:500; color:var(--dark); } @media (max-width:640px){ .search-box{ flex:1 1 100%; min-width:0; } #btn-inspire{ flex:1; } #btn-reset{ flex:none; } } /* ---------- Coquille stricte "une page" - explorateur (Étape 3d, remplace la version 3c ; seuil relevé à 1024px avec l'ajout du panneau de filtres plein écran mobile - voir plus bas) ---------- En dessous de 1024px : flux normal empilé, page classique qui défile ; les filtres ne sont plus dans le flux mais dans un panneau plein écran ouvert par #filters-trigger (voir la section "Filtres mobiles" plus bas). À 1024px et plus : la page n'excède jamais 100dvh - l'en-tête et les filtres (aside toujours visible) restent visibles, seule la zone des résultats défile en interne - comportement desktop inchangé. */ /* Retrait du héro (retune) : l'explorateur reste le seul endroit du site plafonné à 1400px plutôt que --container (1200px) - questionnaire et pages de contenu gardent 1200px. Valeur locale à cette page (pas de nouvelle variable globale) puisque rien d'autre n'en a besoin. */ .explorer-shell{ display:block; width:100%; max-width:1400px; margin-inline:auto; padding-inline:var(--gutter); } .explorer-aside{ display:flex; flex-direction:column; gap:1rem; } /* A11Y (item 4, UI batch 2 - re-report) : l'aside n'a pas de padding-inline et applique overflow-x:hidden (nécessaire pour neutraliser le débordement sous-pixel fantôme documenté plus bas) - l'anneau de focus par défaut (outline 2.5px + outline-offset 2px, donc ~4.5px hors de la boîte de bordure) des éléments collés aux bords gauche/droite (recherche, select, boutons, puces) se faisait donc tronquer horizontalement par ce même conteneur. Le correctif précédent (padding-block:8px plus bas) ne couvrait que l'axe vertical. Plutôt que d'ajouter du padding-inline (qui aurait décalé toute la colonne de filtres), l'anneau devient "en creux" ici : décalage négatif égal à son épaisseur, donc entièrement contenu DANS la boîte de bordure de l'élément - jamais rogné, sur aucun axe. Vérifié sur #search à 1440px et dans le panneau de filtres mobile. */ .explorer-aside :where(a,button,input,select,[tabindex]):focus-visible{ outline-offset:-2.5px; } @media (min-width:1024px){ /* Sélecteur "main .section.explorer-section" (et non ".explorer-section") à dessein - même bras de fer de spécificité qu'expliqué plus haut pour .quiz : depuis le retrait du bandeau héro, cette section est devenue le premier enfant de
et doit explicitement regagner la priorité sur la règle générique "main > .section:first-child" (padding-top ~héro). */ main .section.explorer-section{ flex:1; min-height:0; display:flex; flex-direction:column; padding-block:1rem 1.25rem; } .explorer-shell{ flex:1; min-height:0; /* Colonne élargie de 270px -> 320px (~+18%, demande utilisateur 2026-07-30) : avec le repliage des groupes de filtres, l'objectif combiné est "plus large + plus compact" pour que les puces tiennent mieux par rangée et qu'il y ait sensiblement moins à faire défiler. */ display:grid; grid-template-columns:320px 1fr; gap:1.8rem; align-items:stretch; } .explorer-aside{ height:100%; max-height:none; overflow-y:auto; /* overflow-x:hidden explicite (et non laissé à sa valeur implicite) : dès qu'un axe passe à auto/scroll, la spec force l'autre axe "visible" à devenir "auto" lui aussi - combiné à scrollbar-gutter:stable, un arrondi sous-pixel d'~1px suffisait à faire apparaître une barre horizontale fantôme (aucun contenu ne dépasse réellement : vérifié élément par élément). Rien ici n'a jamais eu besoin de défiler à l'horizontale, donc ceci est le vrai correctif, pas juste un masque. */ overflow-x:hidden; scrollbar-gutter:stable; /* Padding-top porté à 8px (au lieu de 1px) : le premier élément focusable (la recherche) affichait un anneau de focus rogné par ce conteneur défilant - 8px contient largement l'anneau (2.5px d'épaisseur + 2px de décalage, avec une marge de sécurité pour l'arrondi sous-pixel) sans décaler visiblement la coquille. */ padding-block:8px .5rem; /* Respiration à droite : le contenu de la colonne était collé au couloir de barre de défilement (scrollbar-gutter:stable ne réserve que la place de la barre, pas d'espace visuel). Seul padding-right ici - ajouter du padding-left décalerait toute la colonne par rapport au reste de la page, alors que le bord gauche est déjà aligné sur la gouttière. */ padding-right:.75rem; } .explorer-results{ height:100%; min-height:0; display:flex; flex-direction:column; } .explorer-results .view-toggle{ flex:none; } .explorer-results .results-head{ flex:none; } /* Filet en haut de la zone de résultats (demande utilisateur 2026-07-31) : les fiches défilent sous le compte de résultats sans rien pour marquer où la zone défilante commence - elles semblaient disparaître dans la page. Sur le conteneur défilant lui-même, donc le trait reste fixe pendant que le contenu passe dessous. */ .explorer-results .venues{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; border-top:1px solid var(--line); padding-top:1rem; padding-bottom:.5rem; } .explorer-results .venue-map{ flex:1; min-height:0; height:auto; } } /* ---------- Filtres mobiles (< 1024px) ---------- Sous 1024px, .explorer-aside n'est plus une colonne toujours visible : elle est cachée par défaut et ne s'affiche qu'en panneau plein écran quand on ouvre #filters-trigger (js/app.js bascule alors sa classe .is-open ainsi que role="dialog" aria-modal="true", gère le focus/piège de tabulation/ Échap, et verrouille le défilement de fond via .page-scroll.scroll-locked - voir wireFiltersSheet()). À 1024px et plus, rien de tout ceci ne s'affiche : l'aside redevient la colonne latérale normale gérée par le bloc ci-dessus. */ .filters-trigger{ display:flex; align-items:center; gap:.6rem; width:100%; margin-bottom:1.1rem; padding:.85rem 1.05rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); font-size:.95rem; font-weight:600; color:var(--ink); box-shadow:var(--sh-1); position:sticky; top:0; z-index:20; } .filters-trigger .ic{ width:19px; height:19px; color:var(--accent-strong); } .filters-badge{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 .4rem; border-radius:var(--r-pill); background:var(--dark); color:#fff; font-size:.76rem; font-weight:700; } .filters-sheet-head{ display:none; } @media (max-width:1023px){ .explorer-aside{ display:none; } .explorer-aside.is-open{ display:flex; position:fixed; inset:0; z-index:200; background:var(--surface); padding:1.1rem var(--gutter) 1.5rem; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; } .filters-sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); } .filters-sheet-head h2{ font-size:1.15rem; } .filters-close{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--bg-2); color:var(--ink); flex:none; } .filters-close .ic{ width:18px; height:18px; } .filters-close:hover{ background:var(--line-2); } } @media (min-width:1024px){ .filters-trigger{ display:none; } } /* Empêche .page-scroll de défiler en fond pendant que le panneau de filtres plein écran est ouvert (celui-ci a son propre défilement interne). */ .page-scroll.scroll-locked{ overflow:hidden; } /* ---------- Rangée d'en-tête des résultats ---------- Bascule Liste/Carte et compte de résultats sur la même ligne : le compte occupait une rangée entière pour une demi-phrase, dans une zone où chaque pixel vertical est pris sur les fiches. Il passe à droite, aligné sur la bascule, et repasse dessous seulement quand la largeur ne suffit plus. */ .results-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .8rem; margin-bottom:1.2rem; } .results-head .view-toggle{ margin-bottom:0; } .results-head .count{ font-size:.92rem; color:var(--muted); } .results-head .count b{ color:var(--ink); font-weight:600; } /* ---------- Sélecteur de géographie sur les pages de contenu (2026-08-01) ---------- Les quatre pages qui n'ont pas la colonne de filtres portent ici la commande unique de géographie, à l'endroit qu'occupait la ligne de portée. La phrase qui répétait le choix a disparu : un lui-même et non sur le