/* ================================================================= TIBILLET — Design system du skin V2 / TiBillet — V2 skin design system LOCALISATION : pages/static/V2/css/V2.css Source : maquette TEMP-tibillet-lespass-main/style.css (commit 49d31d0 « Direction artistique v1 »), fusionnée avec les ajouts propres au V2 (carte Leaflet, page Réseau, pont Bootstrap). Règle centrale de la DA : la couleur n'apparaît que sur les gestes qui appartiennent à TiBillet (carte, solde, recharge, action principale). Jamais sur le contenu d'un lieu (ses événements, ses catégories, son identité) : ce contenu reste en encre et papier. / Colour only on TiBillet gestures, never on a venue's content. Polices auto-hébergées dans pages/static/V2/fonts/ (aucun appel à Google, conforme RGPD, fonctionne hors ligne) : - Unbounded (SIL OFL) : gros titres uniquement. - Luciole (CC BY 4.0, conçue pour les personnes malvoyantes) : tout le reste. Chemins relatifs (../fonts/) : ils suivent le fichier CSS après collectstatic. / Self-hosted fonts, relative paths. ================================================================= */ @font-face { font-family: 'Unbounded'; src: url('../fonts/Unbounded-Variable-latin.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Luciole'; src: url('../fonts/Luciole-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Luciole'; src: url('../fonts/Luciole-Regular-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Luciole'; src: url('../fonts/Luciole-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Luciole'; src: url('../fonts/Luciole-Bold-Italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* Voir comment ajouter Material icon, la police fait 4mon, un peu too much pour juste quelques icones. Une solution proposé par claude c'est d'utiliser fontTools pour limiter les icones a juste celle utilisé, en générant un autre fichier de police. Mais faut le refaire dès qu'on rajoute des icones :/ @font-face { font-family: "Material Symbols Lespass"; font-style: normal; font-weight: 100 700; font-display: block; src: url("../../fonts/material-symbols/MaterialSymbolsOutlined-variable.woff2") format("woff2"); } .material-symbols-outlined { font-family: "Material Symbols Lespass"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; vertical-align: middle; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; user-select: none; font-variation-settings: 'FILL' 1; } */ :root { /* --- Palette de marque (charte Tibillet) --- Valeurs canoniques : réservées aux fonds pleins, dégradés et grands aplats. Ne jamais les employer comme couleur de TEXTE sur un fond clair — mesuré : 3,0 à 3,9:1 selon la teinte, sous le seuil d'accessibilité de 4,5:1 (cf. --letchi-text / --loseyan-text / --chouchou-text, assombries pour rester lisibles en texte). */ /* action principale, dominante */ /* Letchi utilisée comme FOND sous un texte encre (boutons, pastilles). Le letchi canonique y plafonne à 4,45:1, juste sous le seuil de 4,5 — et un bouton de 14,5px gras ne compte pas comme « grand texte » (il faut 18,66px gras). Éclaircie de 4 % vers le blanc : 4,63:1, écart invisible à l'œil. / Letchi as a FILL under ink text: canonical letchi is 4.45:1 (fails AA), lightened 4% it reaches 4.63:1. */ /* --- Rôles fonctionnels --- */ /* Fond d'action : porte toujours du texte encre, d'où --letchi-fond et non --letchi. / Action fill: always carries ink text, hence --letchi-fond. */ --color-primary: var(--loseyan-button-fond); /* Bouton principal : fond encre, libellé blanc, letchi en liseré (voir .btn--primary). / Primary button: ink fill, white label, letchi as an inner edge. */ --color-action-hover: #2c2630; /* encre éclaircie au survol : blanc dessus 14,7:1 */ --color-action-signal: var(--loseyan-button-fond); /* liseré : élément non textuel, 4,6:1 contre l'encre (seuil 3:1) */ --color-link: var(--loseyan-text); /* --- Neutres --- */ --color-bg: var(--papier); /* papier : jamais de blanc pur en fond de page */ --color-surface: var(--papier); /* Avec le fond qui est devenue --sable, les surface dessus passe à --papier */ --color-surface-tint: #f1eee8; --color-primary-soft: #fce4eb; /* tinte très claire de letchi, fonds discrets */ --color-border: #ece7e1; /* brume */ --color-border-strong: #ded7cd; --color-footer-bg: #e2e3e5; /* fond du footer : plus froid que le papier, signale le territoire plateforme */ --color-surface-sunken: #eceae3; /* en-tête « moi », fond d'attente des cartes */ --color-hover: #f2f0ea; /* survol d'un contrôle neutre posé sur blanc */ --color-hover-soft: #fbfaf7; /* survol d'une carte-raccourci */ --color-overlay-hover: rgba(32, 31, 28, 0.04); /* survol transparent (liens de sommaire, bouton contour) */ --color-rule: rgba(32, 31, 28, 0.10); /* filet posé sur une surface teintée */ --color-grid-line: rgba(32, 31, 28, 0.05); /* quadrillage du fond de carte */ --color-primary-border: #f3c7d5; /* bordure de l'ancre « Mon espace » active */ --color-avatar: #e4e1d6; /* fond d'avatar sans photo */ /* --- Sur fond sombre (encre, talisman) --- */ --color-text-inverse: #ffffff; --color-inverse-muted: rgba(255, 255, 255, 0.65); --color-inverse-faint: rgba(255, 255, 255, 0.55); --color-inverse-soft: rgba(255, 255, 255, 0.22); --color-surface-overlay: rgba(255, 255, 255, 0.92); /* pastille posée sur une photo */ /* --- Compositions de dégradés (voisines uniquement — deux couleurs opposées sur la roue produisent une zone boueuse au centre) --- */ --grad-chaud: linear-gradient(135deg, var(--letchi-fond) 0%, var(--zanana) 100%); /* signature : letchi → zanana — en liseré sous « Recharger » et « Faire un don », plus sous aucun texte (voir .btn--signature) */ --grad-frais: linear-gradient(135deg, var(--zanana) 0%, var(--chouchou) 100%); /* zanana → chouchou */ --grad-calme: linear-gradient(135deg, var(--loseyan) 0%, var(--chouchou) 100%); /* loséyan → chouchou */ --grad-nuit: linear-gradient(160deg, var(--loseyan) 0%, var(--violet) 50%, var(--letchi) 100%); /* loséyan → violet → letchi — décoratif seul, jamais sous du texte de bouton (le point violet retombe à 3,8:1) */ --grad-talisman: linear-gradient(150deg, var(--loseyan) 0%, var(--violet) 55%, var(--letchi) 100%); /* variante de grad-nuit propre à la carte */ /* --- Catégories : neutralisées --- Le contenu d'un lieu (type d'événement, badge de catégorie, marque d'un autre lieu) ne porte plus les couleurs de Tibillet — c'est la règle centrale de la DA. Chaque famille garde une variation de ton pour rester scannable dans une grille, mais reste dans le registre neutre (papier/brume/piton), jamais dans la palette de marque. */ /* Approfondies : les premières valeurs (58%/36% de luminosité) étaient trop proches du gris de bordure (--color-border) et du papier — 1,25:1 de contraste seulement, d'où le liseré pâle et sale autour des cartes. Mesuré maintenant à 2,2-2,8:1 contre la bordure. */ --cat-green-from: #87a190; --cat-green-to: #516758; --cat-green-tint: #ebefec; --cat-green-solid: #456851; --cat-slate-from: #8b919c; --cat-slate-to: #545963; --cat-slate-tint: #ecedef; --cat-slate-solid: #495265; --cat-mauve-from: #9f8997; --cat-mauve-to: #65535f; --cat-mauve-tint: #efebee; --cat-mauve-solid: #66475c; --cat-gold-from: #a59b83; --cat-gold-to: #6a624d; --cat-gold-tint: #f0eeea; --cat-gold-solid: #6c5f42; --cat-terracotta-from: #a38d85; --cat-terracotta-to: #69564f; --cat-terracotta-tint: #f0eceb; --cat-terracotta-solid: #6a4e44; --cat-teal-from: #899f9f; --cat-teal-to: #536565; --cat-teal-tint: #ebefef; --cat-teal-solid: #476666; --cat-olive-from: #9aa187; --cat-olive-to: #616751; --cat-olive-tint: #eeefeb; --cat-olive-solid: #5f6845; --cat-indigo-from: #8b899f; --cat-indigo-to: #545365; --cat-indigo-tint: #ecebef; --cat-indigo-solid: #4a4766; /* Échelle typographique, en rem : elle suit la taille de police choisie par l'utilisateur dans son navigateur — la raison d'être de Luciole. Remplace une vingtaine de tailles en px au demi-pixel héritées de la maquette (13,5 / 14,5 / 16,5…), arrondies au pas le plus proche. / Type scale in rem, so it follows the user's browser font size. */ --text-2xs: 0.6875rem; /* 11px — mentions minuscules, pastilles de date */ --text-xs: 0.75rem; /* 12px — étiquettes, badges */ --text-sm: 0.8125rem; /* 13px — méta, dates */ --text-md: 0.875rem; /* 14px — texte secondaire, petits boutons */ --text-ui: 0.9375rem; /* 15px — boutons, liens, texte de carte */ --text-base: 1rem; /* 16px — corps de texte */ --text-lg: 1.125rem; /* 18px — titres de carte et de module */ --text-xl: 1.375rem; /* 22px — titres de section (Unbounded) */ --text-2xl: 1.75rem; /* 28px — nom du lieu, montant du solde */ /* Le seul vrai gros titre : Unbounded a besoin de place pour exister. 28px à 375px de large, 48px au-delà de ~1180px. */ --text-display: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); /* Échelle d'espacement */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(32, 31, 28, 0.04), 0 1px 1px rgba(32, 31, 28, 0.03); --shadow-panel: 0 4px 16px rgba(32, 31, 28, 0.06); --shadow-pin: 0 2px 4px rgba(0, 0, 0, 0.2); --container-max: 1280px; /* Mouvement : deux durées, deux courbes. Jamais le `ease` par défaut du navigateur, jamais de rebond sur un état d'interface. On anime la couleur, l'opacité et `transform`, jamais la mise en page. / Motion: two durations, two curves; no browser `ease`, no bounce. */ --dur-fast: 150ms; /* survol, changement de couleur */ --dur-base: 200ms; /* rotation d'un chevron, bascule d'état */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); } :root{ /*********************** Variable depuis la DA V2 ***********************/ /* couleur */ --letchi: #e93363; --zanana: #e9b322; /* alerte, accent chaud — fonds/dégradés uniquement */ --chouchou: #259d49; /* succès, validation */ --loseyan: #4296cc; /* info, liens — fonds/dégradés */ --encre: #17141a; --piton: #63515e; --papier: #faf8f5; --sable: #f4ede0; --violet: #8b5fb0; /* Gradients */ --grad-fete:radial-gradient(120% 130% at 12% 8%, var(--letchi) 0%, #ed4960 5%, #f05a5c 10%, #f26958 15%, #f27553 20%, #f1804e 25%, #ee8a4a 30%, #eb9245 35%, #e69a41 40%, #dfa03d 45%, #d8a53a 50%, #cfa938 55%, #c5ab37 60%, #b9ad37 65%, #acae38 70%, #9dae3a 75%, #8dad3c 80%, #7baa3f 85%, #65a742 90%, #4ca246 95%, var(--chouchou) 100%); --grad-soiree: radial-gradient(130% 120% at 85% 10%, var(--letchi) 0%, var(--violet) 45%, var(--loseyan) 100%); --grad-lagon: radial-gradient(120% 120% at 20% 90%, var(--chouchou) 0%, var(--loseyan) 75%); --grad-soleil: radial-gradient(110% 100% at 50% 110%, var(--zanana) 0%, var(--letchi) 75%); --grad-jardin: radial-gradient(120% 120% at 80% 90%, var(--chouchou) 0%, var(--zanana) 80%); --grad-aurore: radial-gradient(85% 95% at 0% 0%, rgba(233,51,99,.85) 0%, rgba(233,51,99,0) 100%), radial-gradient(85% 95% at 100% 0%, rgba(233,179,34,.85) 0%, rgba(233,179,34,0) 100%), radial-gradient(85% 95% at 100% 100%, rgba(37,157,73,.8) 0%, rgba(37,157,73,0) 100%), radial-gradient(85% 95% at 0% 100%, rgba(66,150,204,.85) 0%, rgba(66,150,204,0) 100%), radial-gradient(55% 70% at 0% 55%, rgba(139,95,176,.75) 0%, rgba(139,95,176,0) 100%), var(--papier); --grad-nuit: radial-gradient(130% 80% at 50% 115%, rgba(233,51,99,.85) 0%, rgba(139,95,176,.6) 35%, rgba(66,150,204,.25) 62%, rgba(66,150,204,0) 80%), radial-gradient(70% 40% at 50% 0%, rgba(66,150,204,.18) 0%, rgba(66,150,204,0) 100%), var(--encre); /* Ruban signature */ --grad-ruban: linear-gradient(90deg, var(--letchi) 0%, var(--zanana) 25%, var(--chouchou) 50%, var(--loseyan) 72%, var(--violet) 88%, var(--letchi) 100%); --letchi-fond: #ea3b69; /* Typo */ --font-display: 'Unbounded', system-ui, sans-serif; /* Titre */ --font-text: 'Luciole', system-ui, sans-serif; /* Le reste */ /* Text color */ --color-text: var(--encre); --color-text-muted: var(--piton); --color-text-faint: #808080; --letchi-text: #d22e59; --chouchou-text: #1e7e3a; --loseyan-text: #3578a3; /* Volutes */ --volute-fond: url("../../fond/tibillet-volutes-fond-sable.svg"); --volute-blanc:url("../../fond/tibillet-volutes-blanc.svg"); /* Buttons */ --letchi-button-fond : #fb4f7c; --letchi-button-hover : #fa99b2; --letchi-button-active : #fa3166; --loseyan-button-fond : #86ceff; --loseyan-button-hover : #a5d7f9; --loseyan-button-active : #a5d7f9; --button-primary-fond : var(--loseyan-button-fond); --button-primary-hover : var(--loseyan-button-hover); --button-primary-active : var(--loseyan-button-active); --secondary-button-fond : #fff; } /* ================================================================= PONT BOOTSTRAP ET BLOCS CMS / Bootstrap and CMS blocks bridge Bootstrap 5.3 reste chargé par pages/V2/shell.html : les panneaux latéraux (connexion, contact, réservation, adhésion), les menus déroulants et les accordéons du compte en dépendent. pages/static/pages/css/tb-blocs.css (blocs des Pages CMS) lit aussi ces variables --bs-*. En les rebranchant ici sur les tokens de la DA, ces composants prennent le style V2 sans être réécrits. Les classes Bootstrap compilées (.btn-primary…) ne lisent pas ces variables : elles sont migrées page par page vers .btn--*. / Bootstrap vars remapped on the DA tokens: offcanvas, dropdowns, accordions and CMS blocks follow the V2 style. ================================================================= */ :root { --bs-body-font-family: var(--font-text); --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-secondary-color: var(--color-text-muted); --bs-tertiary-bg: var(--color-surface-tint); --bs-border-color: var(--color-border); --bs-link-color: var(--color-link); --bs-link-color-rgb: 53, 120, 163; --bs-link-hover-color: var(--color-text); --bs-link-hover-color-rgb: 23, 20, 26; --bs-border-radius: var(--radius-s); --bs-border-radius-lg: var(--radius-m); /* La couleur principale de Bootstrap, pour tout ce qui la LIT : .bg-primary, .text-primary, les anneaux de focus. Le triplet est nécessaire en plus de la couleur, parce que Bootstrap écrit `rgba(var(--bs-primary-rgb), …)` et que color-mix() ne produit pas un triplet. 234, 59, 105 = --letchi-fond. Attention : ça ne suffit PAS pour .btn-primary, dont le Sass compile la couleur en littéral — voir le patch des --bs-btn-* plus bas. / Bootstrap's primary for everything that READS it. The triplet is needed because Bootstrap writes rgba(var(--bs-primary-rgb), …) and color-mix() cannot produce one. Not enough for .btn-primary, whose Sass hardcodes the colour — see the --bs-btn-* patch below. */ --bs-primary: var(--color-primary); --bs-primary-rgb: 134, 206, 255; /* Blocs CMS : titres en Luciole, accent letchi, libellé des boutons en blanc sur encre (voir « BOUTONS DES BLOCS »). ATTENTION — CES TROIS LIGNES NE PORTENT RIEN POUR LES PAGES CMS, et c'est normal : tb-blocs.css déclare ces mêmes jetons sur `.tb-page` lui-même (bloc lignes 37-97), et une propriété personnalisée se résout élément par élément — l'ancêtre le plus proche qui la déclare gagne, quelles que soient la spécificité et l'ordre de chargement. Les surcharges qui agissent réellement sont donc posées sur `.tb-page`, dans la section « PAGE CMS » en fin de fichier. Ces trois-ci ne servent qu'aux composants hors `.tb-page`. Ne pas les croire suffisantes : c'est exactement le piège qui laissait sept titres en serif système et l'accent des blocs en bleu Bootstrap. / WARNING — these three do NOTHING for CMS pages: the base declares the same tokens on `.tb-page` itself, and custom properties resolve per element, so the effective overrides live on `.tb-page` (see the CMS section at the end of this file). These only serve components outside `.tb-page`. */ --tb-police-titre: var(--font-text); --tb-accent: var(--color-primary); --tb-accent-contraste: var(--color-text-inverse); /* L'accent en TEXTE : letchi FONCÉ. Le letchi vif ne passe pas en texte sur papier (3,87:1, seuil 4,5) alors qu'il passe en aplat sous de l'encre (4,45:1) — et l'inverse est vrai du letchi foncé (encre dessus : 3,71:1). D'où deux jetons, et non un seul retargeté. / The accent AS TEXT: dark letchi. Vivid letchi fails as text (3,87:1) but passes as a fill under ink (4,45:1); the reverse holds for the dark one. Hence two tokens rather than one retargeted. */ --tb-accent-texte: var(--letchi-text); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* `clip` et non `hidden` : coupe un débordement horizontal accidentel sans créer de conteneur de défilement, donc sans casser les éléments sticky (barre utilisateur, sommaire). / clip, not hidden: no scroll container, so sticky elements keep working. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; overflow-x: clip; /* Hauteur d'écran minimum (pied de page en bas). dvh suit la barre d'adresse mobile ; vh reste le repli. Remplace .min-vh-100 de Bootstrap, en 100vh et en !important. / Min screen height; dvh follows the mobile address bar. */ min-height: 100vh; min-height: 100dvh; font-family: var(--font-text); color: var(--color-text); line-height: 1.6; /* Luciole veut de l'espacement large — lisibilité, pas esthétique */ font-size: var(--text-base); -webkit-font-smoothing: antialiased; background-color: var(--sable); background-image: var(--volute-fond); background-size: 100% auto; background-repeat: repeat-y; background-position: center top; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; color: var(--color-text); } p { margin: 0; } a { color: inherit;} button { font-family: inherit; } ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; display: block; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ================================================================= HEADER / NAVIGATION ================================================================= */ /* ----------------------------------------------------------------- BARRE UTILISATEUR — invariante, strictement identique sur toutes les pages et dans tous les lieux. N'appartient jamais à un lieu : elle ne porte que l'utilisateur et ses réglages. ----------------------------------------------------------------- */ .user-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 1000; } /* Le ruban signature (DA §04) : un filet fin et long, jamais un aplat. Sur la barre utilisateur — la seule surface strictement invariante, identique dans tous les lieux — pas sur le contenu d'un lieu. */ .user-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-ruban); } /* Le bloc de GAUCHE de la barre : l'ancre « Mon espace » et, dans l'espace perso uniquement, le retour vers le lieu. Les regrouper dans un seul conteneur garde .user-bar__inner à DEUX enfants, donc son `justify-content: space-between` intact — sans ça le retour se serait inséré comme un troisième enfant et aurait poussé le groupe d'icônes au milieu. / The bar's LEFT block: grouping them keeps .user-bar__inner at two children, so its space-between still works; otherwise the back link would have become a third child and shoved the icon group to the middle. */ .user-bar__gauche { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .user-bar__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-3) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .me-anchor { text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg); font-size: var(--text-ui); line-height: 0.9375rem; font-weight: 700; color: var(--color-text); white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .me-anchor:hover { background: var(--color-hover); border-color: var(--color-border-strong); } .me-anchor.is-active { background: var(--color-primary-soft); border-color: var(--color-primary-border); color: var(--letchi-text); } /* Correction d'encre : mesuré via Canvas, pas deviné. Pour des initiales en capitales (sans jambage), l'encre réelle occupe la zone ascendante de la police mais laisse vide toute la zone descendante réservée — la boîte de ligne, elle, reste symétrique. Centrer la BOÎTE (ce que fait align-items:center) n'centre donc jamais l'ENCRE : aucune valeur de line-height ne peut corriger ça, l'écart est structurel à la police. D'où ce décalage direct, indépendant du line-height, calculé pour Luciole Bold à chaque taille utilisée. */ .ink-center-fix { display: inline-block; transform: translateY(2px); } /* Là où le navigateur sait rogner la boîte de ligne sur la hauteur des capitales, plus besoin du décalage mesuré à la main : l'encre est centrée par construction, à toutes les tailles et au zoom texte. Le translateY reste le repli des navigateurs sans `text-box`. / Where supported, text-box trims to cap height: ink centred by design. */ @supports (text-box: trim-both cap alphabetic) { .ink-center-fix { transform: none; text-box: trim-both cap alphabetic; } } .me-anchor__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: var(--color-text); font-size: var(--text-xs); font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .user-bar .icon-btn { width: 36px; height: 36px; border-radius: 50%; } /* Sur écran tactile, 44px minimum pour un bouton d'icône (WCAG 2.5.5, et recommandation Apple/Google). À la souris, la barre garde sa densité. La barre passe alors à ~69px de haut : toujours sous le --tb-sticky-top de 5rem (80px) du sommaire des pages CMS. / Touch screens: 44px icon buttons; mouse keeps the dense bar. */ @media (pointer: coarse) { .icon-btn, .user-bar .icon-btn { width: 44px; height: 44px; } } /* ----------------------------------------------------------------- ACCUEIL D'UN LIEU — le cadre d'identité : ce qu'est le lieu à gauche (texte + praticités), où il est à droite. ----------------------------------------------------------------- */ .venue-brief { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: var(--space-6); } /* Lieu sans coordonnées GPS : pas de carte, le texte prend toute la largeur. / Venue without GPS coordinates: no map, text takes the full width. */ .venue-brief--sans-carte { grid-template-columns: minmax(0, 1fr); } .venue-brief__text { font-size: var(--text-ui); line-height: 1.65; color: var(--color-text-muted); max-width: 60ch; } .venue-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); } .venue-fact__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-2); } .venue-fact__value { font-size: var(--text-md); line-height: 1.5; } .venue-brief .map-panel { height: 100%; min-height: 260px; margin: 0; } /* Une seule couche de contenant : la carte Leaflet est déjà posée dans le cadre blanc de .venue-brief, son propre filet doublait celui du cadre. Les coins arrondis restent (ils découpent les tuiles). / One containment layer: the map already sits in the brief's frame. */ .venue-brief .map-panel { border: none; border-radius: var(--radius-m); } /* En-tête de rubrique sur l'accueil : le titre, et l'accès à la rubrique complète sur la même ligne. */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2); } @media (max-width: 62rem) { .venue-brief { grid-template-columns: minmax(0, 1fr); } .venue-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } } /* ================================================================= PIED DE PAGE — il appartient à la plateforme, jamais au lieu. Aucun lien de lieu ici : ce serait rejouer la confusion qu'on a passé la maquette à défaire. ================================================================= */ .site-footer { /* Plus froid que le papier du reste du site : signale sans un mot qu'on change de territoire, de celui du lieu à celui de Tibillet. */ background: var(--color-footer-bg); border-top: 1px solid var(--color-border-strong); margin-top: var(--space-8); } .site-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); } .footer-col__title { font-family: var(--font-text); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-4); } .footer-col nav { display: flex; flex-direction: column; gap: var(--space-3); } .footer-col a, .footer-col__bouton { font-size: var(--text-ui); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-3); padding:0; } .footer-col a:hover, .footer-col__bouton:hover { color: var(--color-text); } .footer-col a svg { flex-shrink: 0; opacity: 0.7; } .footer-col__sep { border: none; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; } .footer-brand__mark { display: inline-block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; } /* La marque est un lien vers tibillet.coop : soulignée au survol. / Brand is a link. */ .footer-brand__mark:hover { text-decoration: underline; text-underline-offset: 3px; } .footer-brand__tagline { font-size: var(--text-base); font-weight: 700; margin-top: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .footer-brand__desc { font-size: var(--text-ui); line-height: 1.6; color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-5); } /* Appels à l'action du pied de page — même gabarit pour les trois, compositions voisines de la DA (jamais grad-nuit ici : le point violet retombe sous le seuil de lisibilité pour un texte de bouton). Le don n'a plus d'aplat dégradé sous son texte : fond encre, libellé blanc, dégradé en liseré (même règle que .btn--signature). UN SEUL DÉGRADÉ PAR SURFACE. Trois aplats en dégradé empilés contredisaient la règle du .btn--signature (« un CTA de plus en dégradé remettrait de la couleur partout ») : le don garde le dégradé chaud, les deux autres passent en bouton blanc cerné, leur composition réduite à une pastille devant le libellé. La couleur reste un repère, plus un vacarme. Libellés autorisés sur deux lignes : les boutons font toute la largeur de la colonne et leurs textes traduits (« Create a TiBillet space for your collective ») débordaient d'un écran de 320px en `nowrap`. / One full gradient per surface: donation keeps it, the other two become white buttons with a gradient dot. Labels may wrap (full-width, long translated texts overflowed at 320px). */ .footer-cta { display: flex; flex-direction: column; gap: var(--space-3); } /* Liens de la communauté TiBillet (3e colonne), un par ligne. Le partial porte les classes .nav-link de Bootstrap : on retire leur padding et on prend la couleur des liens du pied de page. / TiBillet community links (3rd column), one per line. */ .footer-liens-tibillet__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .footer-liens-tibillet__liste .nav-link { padding: 0; font-size: var(--text-ui); color: var(--color-text-muted); } .footer-liens-tibillet__liste .nav-link:hover { color: var(--color-text); } .site-footer__legal { border-top: 1px solid var(--color-border); } .site-footer__legal-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-5) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-text-muted); } .site-footer__logo-france-2030 { height: 64px; width: auto; flex-shrink: 0; } /* minmax(0, 1fr) et non 1fr : un `1fr` nu vaut minmax(auto, 1fr), la colonne prenait donc la largeur du plus long bouton et le pied de page était coupé à droite sur mobile (104px perdus à 320px). / minmax(0, 1fr), not 1fr: a bare 1fr grew to the longest button's width and the footer was clipped on mobile. */ @media (max-width: 62rem) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } } /* ----------------------------------------------------------------- EN-TÊTE DE LIEU — fait partie du contenu, défile et disparaît. Jamais deux barres fixes empilées. L'identité visuelle du lieu s'injecte uniquement par --place / --place-tint. ----------------------------------------------------------------- */ .place-header { /* Neutre par défaut : la couleur d'un lieu lui appartient, elle ne doit jamais hériter de la couleur d'action de Tibillet. Le jour où un lieu a son propre thème, c'est cette variable qu'il redéfinit — jamais --color-primary. */ --place: var(--color-text); --place-tint: var(--color-surface-tint); max-width: var(--container-max); margin: var(--space-6) auto; } .place-header__card { background: var(--papier); border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: var(--space-6); } .place-header__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .place-id { display: flex; align-items: center; gap: var(--space-4); } .place-id__mark { width: 52px; height: 52px; border-radius: var(--radius-m); background: var(--place); color: var(--color-text-inverse); font-family: var(--font-text); font-weight: 700; font-size: var(--text-xl); line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .place-id__name { font-family: var(--font-text); font-weight: 700; font-size: var(--text-2xl); line-height: 1.1; } .place-id__tagline { font-size: var(--text-md); color: var(--color-text-muted); } .place-id__site { color: var(--color-link); font-weight: 700; } .place-nav { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-rule); } .place-nav > a, .place-nav__dropdown > .dropdown-toggle { font-size: var(--text-ui); font-weight: 400; color: var(--color-text-muted); padding-bottom: 2px; transition: color var(--dur-fast) var(--ease-out); text-decoration: none; } .place-nav > a:hover, .place-nav__dropdown > .dropdown-toggle:hover { color: var(--color-text); } .place-nav > a.is-active, .place-nav__dropdown > .dropdown-toggle.is-active { color: var(--place); font-weight: 700; border-bottom: 2px solid var(--place); } /* Variante « moi » : même composition que l'en-tête d'un lieu, mais en tons neutres — l'espace personnel n'est pas un lieu de plus. */ .place-header--me { --place: var(--color-text); --place-tint: var(--color-surface-sunken); } .place-header--me .place-id__mark { border-radius: 50%; font-size: var(--text-lg); } /* ================================================================= LE TALISMAN — la carte comme objet, et le monde qu'elle héberge. Le solde est une information ; l'archipel dessiné derrière est la vraie charge. Les deux cohabitent sur le même objet. ================================================================= */ /* Bloc identité : le nom, l'adresse, puis l'action d'ouverture. */ .me-id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .me-id .btn { margin-top: var(--space-3); } /* La carte, rattachée à l'espace lui-même : elle n'a pas de section à elle, elle EST l'espace. Compacte, à droite de l'identité. */ .me-card { display: flex; align-items: center; gap: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-m); /* marge égale sur les quatre côtés : la carte doit « respirer » autant en haut et en bas qu'à gauche */ padding: var(--space-5); margin: var(--space-2) 0; } .me-card__amount { font-family: var(--font-text); font-weight: 700; font-size: var(--text-2xl); line-height: 1; /* Encre pleine : un dégradé découpé dans le texte (background-clip: text) rend le montant invisible dès que la variable du dégradé est invalide. / Solid ink: clipped-gradient text goes invisible if the gradient var breaks. */ color: var(--color-text); width: fit-content; margin: var(--space-2) 0 var(--space-3); padding-bottom: var(--space-2); } /* Monnaie cadeau, sous le solde en euros : plus petite, discrète. / Gift currency, under the euro balance: smaller, muted. */ .me-card__cadeau { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); margin: calc(-1 * var(--space-2)) 0 var(--space-3); } .me-card__links { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); } /* Blocs empilés dans l'espace : la carte, puis les accès aux lieux. Chacun porte son intitulé et se sépare du précédent par un filet. */ .me-block { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-rule); } .me-block__title { font-family: var(--font-text); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-4); } .me-card { align-items: stretch; } /* Dans l'en-tête « moi », la carte est déjà dans le cadre teinté : on garde son fond blanc (il détache l'objet-carte) mais pas son filet, qui faisait un deuxième cadre dans le premier. / Inside the tinted header: white fill kept, second border dropped. */ .place-header__card .me-card { border: none; } /* L'enveloppe est l'élément flex : étirée, elle a une hauteur définie. La carte peut alors faire height:100% et laisser l'aspect-ratio calculer sa largeur — impossible directement sur un élément flex, dont le flex-basis:auto impose une largeur issue du contenu. */ .tcard { position: relative; height: 150px; min-width: 250px; border-radius: var(--radius-l); overflow: hidden; color: #fff; padding: var(--space-4); display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-display); background: var(--letchi); } .tcard__v{ position: absolute; inset: 0; background-image: var(--volute-blanc); background-size: cover; background-repeat: no-repeat; opacity: .17; pointer-events: none; } .tcard__top{ display: flex; justify-content: space-between; position: relative; z-index: 1; font-size: 13px; font-weight: 700; } .tcard__logo{ background-image: url("../../logo/logo-blanc.png"); aspect-ratio: 560/247; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; width: 92px; } /* La carte et les infos passent l'une sous l'autre quand la place manque (mobile) : sans retour à la ligne, 200px d'infos + ~220px de carte débordaient d'un écran de 375px. / Wraps under the card on narrow screens. */ .me-card { flex-wrap: wrap; justify-content: space-around; } .me-card__info { flex: 1 1 12.5rem; min-width: 0; } /* ----------------------------------------------------------------- RACCOURCIS — les lieux où l'on retourne le plus. Dans le bloc de l'espace, sous l'identité : c'est par là qu'on entre dans un lieu. ----------------------------------------------------------------- */ .place-shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); } .shortcut { text-decoration: none; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--color-border); background: var(--color-surface); min-width: 0; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .shortcut:hover { border-color: var(--color-border-strong); background: var(--color-hover-soft); } .shortcut__logo { width: 34px; height: 34px; border-radius: var(--radius-s); flex-shrink: 0; } .shortcut__text { min-width: 0; } .shortcut__name { display: block; font-size: var(--text-md); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shortcut__meta { display: block; font-size: var(--text-2xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cinq colonnes ne tiennent pas en mobile : 3 en tablette, 2 en téléphone. */ @media (max-width: 62rem) { .place-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 30rem) { .place-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .place-shortcuts__more { margin-top: var(--space-4); font-size: var(--text-md); } /* ----------------------------------------------------------------- MODULES — une rubrique par type d'activité. Repliables (le glisser-déposer de la maquette attend dans V2-reserve.css). ----------------------------------------------------------------- */ .module { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); margin-bottom: var(--space-4); } .module__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; user-select: none; } .module__title { font-family: var(--font-text); font-size: var(--text-lg); font-weight: 700; } .module__count { color: var(--color-text-faint); font-size: var(--text-md); font-weight: 400; } .module__chevron { margin-left: auto; color: var(--color-text-muted); transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; } .module__body { display: none; border-top: 1px solid var(--color-border); } .module__content { padding: var(--space-5); } /* Module vide : aucune plainte, aucune icône triste. On ne dit pas ce qui manque, on ouvre une porte vers un lieu. */ .module__invite { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-6) var(--space-5); } .module__invite p { margin: 0; font-size: var(--text-ui); line-height: 1.6; color: var(--color-text-muted); max-width: 58ch; } .module__invite .btn { flex-shrink: 0; } /* Carte de service — adhésion, abonnement, accès. Compacte : ce qui compte, c'est le statut et l'échéance. */ .service-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .service-card__head { display: flex; align-items: center; gap: var(--space-3); } .service-card__logo { width: 32px; height: 32px; border-radius: var(--radius-s); flex-shrink: 0; } .service-card__place { font-size: var(--text-sm); color: var(--color-text-muted); } .service-card__title { font-family: var(--font-text); font-size: var(--text-lg); font-weight: 700; } .service-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: auto; font-size: var(--text-md); } /* Le lien ne casse jamais en deux lignes : c'est la mention d'échéance, plus longue et moins critique à lire d'un bloc, qui cède la place. */ .service-card__due { color: var(--color-text-muted); min-width: 0; } .service-card__foot .link { white-space: nowrap; flex-shrink: 0; } /* Dans un module de Mon espace, le module EST le cadre : les services n'y sont plus des cartes bordées posées dans une carte, mais des entrées ouvertes par un filet en tête, alignées sur la grille. Hors module (adhésions des lieux voisins), la carte garde son cadre. Les cartes événement de « Mon agenda » gardent le leur : leur photo de couverture a besoin d'un bord pour ne pas flotter. / Inside a module, the module is the frame: services become open entries with a top rule. Event cards keep their frame (their cover image needs an edge). */ .module__content .service-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .talisman { position: relative; /* la largeur commande la hauteur, jamais l'inverse : sans ça, l'étirement de la grille gonfle la carte via l'aspect-ratio */ align-self: start; width: 100%; aspect-ratio: 1.586 / 1; border-radius: var(--radius-l); /* grad-nuit : la seule surface de marque à texte blanc plutôt qu'encre — traitement décoratif du talisman, pas un bouton lu. */ background: var(--grad-talisman); color: var(--color-text-inverse); padding: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: var(--shadow-panel); } .talisman__sky { position: absolute; inset: 0; } .talisman__head, .talisman__foot { position: relative; } .talisman__head { display: flex; align-items: flex-start; justify-content: space-between; } .talisman__brand { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; } .talisman__nfc { color: var(--color-inverse-muted); flex-shrink: 0; } .talisman__number { /* identifiant carte : 8 caractères alphanumériques, toujours en capitales */ font-size: var(--text-lg); letter-spacing: 0.22em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .talisman__holder { font-size: var(--text-xs); color: var(--color-inverse-faint); margin-top: 3px; } .balance__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 18px; border-radius: var(--radius-pill); font-size: var(--text-ui); font-weight: 700; line-height: 0.9375rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out); } .btn--primary, .btn--primary:focus-visible, .btn-primary, .btn-primary:focus-visible, .btn-primaire{ background: var(--button-primary-fond); color: var(--encre); border: none; transition: 0.2s; } .btn--primary:hover:not(:disabled), .btn-primary:hover:not(:disabled), .btn--outline-primary:hover:not(:disabled), .btn-outline-primary:hover:not(:disabled), .btn-primaire:hover{ background: var(--button-primary-hover); color: var(--encre); border: none; transition: 0.2s; } .btn.btn-primary:active, .btn-primaire:active, .btn.btn-primaire:active{ background: var(--button-primary-active); border: none; } /* Bootstrap met outline: 0 sur .btn:focus-visible : on remet l'anneau du skin. */ .btn--primary:focus-visible, .btn-primary:focus-visible, .btn--outline-primary:focus-visible, .btn-outline-primary:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; } /* Désactivé : pas de liseré, un geste indisponible ne se signale pas. L'opacité vient de .btn:disabled. / Disabled: no letchi edge. */ .btn--primary:disabled, .btn-primary:disabled, .btn-primary.disabled { background: var(--color-text); color: var(--color-text-inverse); border-color: var(--color-text); box-shadow: none; } .btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn--secondary:hover { background: var(--color-hover); } .btn--tertiary { background: #fbd99c; /* amber-100 / color: #17141a; / encre */ } .btn--tertiary:hover { background: #fdecce; } .btn--tertiary:active { background: #fdecce; transform: translateY(1px); } .btn--outline { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .btn--outline:hover { background: var(--color-overlay-hover); } /* Bordure letchi sur papier. ÉCART ASSUMÉ à la règle centrale en tête de ce fichier, qui proscrit la couleur sur le contenu d'un lieu : « Ajouter » et « Proposer un évènement » ne SONT pas du contenu, ce sont des gestes qui ouvrent le wizard TiBillet — même famille que « Recharger ». En .btn--secondary ils se confondaient avec le papier, à côté du titre de page. Le TEXTE est en --letchi-text (4,6:1 sur papier) et jamais --color-primary brut (4,10:1, sous le seuil de 4,5). La BORDURE est un élément non textuel : 3:1 suffit, --color-primary passe. Au survol il devient le bouton principal (fond encre, libellé blanc, liseré letchi) : règle groupée avec .btn--primary. NE PAS CONFONDRE avec .btn-outline-primary (un seul tiret), la classe Bootstrap corrigée plus bas. / Letchi border on paper. DELIBERATE DEPARTURE from the central rule above: these are gestures opening the TiBillet wizard, not venue content, and .btn--secondary made them invisible. Text uses --letchi-text; the border is non-text (3:1 suffices). Turns into the primary button on hover (grouped with .btn--primary above). Not to be confused with Bootstrap's single-dash .btn-outline-primary, patched below. Focus clavier : fond et libellé répétés, sinon le .btn:focus-visible de Bootstrap vide le fond et fait hériter la couleur du parent. / Keyboard focus: fill and colour repeated, else Bootstrap empties them. */ .btn--outline-primary, .btn--outline-primary:focus-visible { background: transparent; color: var(--letchi-text); border-color: var(--color-primary); box-shadow: none; } .btn-secondary{ background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn-secondary:hover{ background: var(--color-hover); color: inherit; border-color: var(--color-border-strong); } .btn-secondary:active{ background: #e8e4db; transform: translateY(1px);} /* ================================================================= BOUTONS BOOTSTRAP DU CHROME PARTAGÉ — remis à la marque / Shared-chrome Bootstrap buttons, brought back to the brand ================================================================= Le pont en tête de fichier remappe les --bs-* que Bootstrap LIT. Mais son Sass COMPILE sa couleur en littéral dans .btn-primary : il n'y a aucune variable à remapper, il faut réécrire ses --bs-btn-*. C'est la technique de BaseBillet/static/commun/css/marque.css, que le skin V2 ne charge pas (shell.html l.129 : V2 a sa propre palette). POURQUOI ICI ET PAS DANS LES GABARITS : ces classes viennent du chrome PARTAGÉ, rendu à l'identique par TOUS les skins — panneau de connexion, panneau contact, tunnel de réservation, tunnel d'adhésion, page solde, 404, 500. Les convertir en .btn--primary casserait classic et faire_festival, où cette classe N'EXISTE PAS (elle est définie dans ce seul fichier) : ils auraient un .btn nu, sans fond. Et comme V2.css n'est chargé que par pages/V2/shell.html, la correction est limitée à V2 par construction. / The bridge remaps what Bootstrap READS, but its Sass hardcodes the colour in .btn-primary, so its --bs-btn-* must be rewritten. These classes come from the SHARED chrome rendered by every skin; porting them to .btn--primary would break the others, where that class does not exist. V2.css is loaded only by the V2 shell, so this patch is V2-scoped by construction. */ /* Les états visibles (fond encre, liseré, survol, appui) sont posés par les règles groupées avec .btn--primary. Les --bs-btn-* ci-dessous alignent en plus les états que seul Bootstrap connaît : .active, .show, et le bouton coché d'un groupe .btn-check (filtres de l'agenda), qui lisent --bs-btn-active-*. L'ombre de focus de Bootstrap (un halo) est remplacée par le liseré, pour qu'un focus clavier ne l'efface pas. / Visible states come from the rules grouped with .btn--primary. These vars align the Bootstrap-only states (.active, .show, checked .btn-check); the focus halo is replaced by the letchi edge. */ .btn-primary { --bs-btn-color: var(--color-text-inverse); --bs-btn-bg: var(--color-text); --bs-btn-border-color: var(--color-text); --bs-btn-hover-color: var(--color-text-inverse); --bs-btn-hover-bg: var(--color-action-hover); --bs-btn-hover-border-color: var(--color-action-hover); --bs-btn-active-color: var(--encre); --bs-btn-active-bg: var(--button-primary-active); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--color-text-inverse); --bs-btn-disabled-bg: var(--color-text); --bs-btn-disabled-border-color: var(--color-text); --bs-btn-focus-box-shadow: inset 0 -3px 0 var(--color-action-signal); } .btn-outline-primary { --bs-btn-color: var(--loseyan-text); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-color: var(--color-text-inverse); --bs-btn-hover-bg: var(--color-action-hover); --bs-btn-hover-border-color: var(--color-action-hover); --bs-btn-active-color: var(--color-text-inverse); --bs-btn-active-bg: var(--color-text); --bs-btn-active-border-color: var(--color-text); --bs-btn-disabled-color: var(--letchi-text); --bs-btn-disabled-border-color: var(--color-primary); --bs-btn-focus-box-shadow: inset 0 -3px 0 var(--color-action-signal); } /* line-height en entier (14px), pas 13.5px : une hauteur de ligne fractionnaire force le navigateur à arrondir la répartition de l'espace, et l'arrondi ne tombe pas toujours au milieu — mesuré à 1,5px d'écart constant sur « Réserver », « Demander », etc. */ .btn--sm { padding: 7px 14px; font-size: var(--text-md); line-height: 0.875rem; } .btn--grad { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 999px; font-family: var(--font-display); font-weight: 900; min-height: 56px; width: 100%; max-width:520px; /* Libellé capé à 20 px : à 24 px, « Contribuer au projet » passait sur deux lignes à 375 px. / Capped at 20px: at 24px the label wrapped at 375px. */ font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem); letter-spacing: 0.02em; text-decoration: none; text-transform: uppercase; text-align: center; color: #000000; padding: 12px 28px; background-size: 220% 220% !important; background-position: 0% 0%; transition: background-position .35s ease, transform .08s ease; } .btn-wrap { position: relative; display: flex; z-index: 0; justify-content: space-around; } /* Halo sur le wrapper */ .btn-wrap::before { content:""; position:absolute; inset:0; border-radius:999px; background:var(--halo); filter:blur(8px); opacity:0; z-index:-1; transition:opacity .2s ease,inset .2s ease; } .btn--grad__next_background{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; } .btn-wrap:hover .btn--grad__next_background, .btn-wrap:active .btn--grad__next_background{ opacity:1; } .btn-wrap:hover .btn--grad { background-position: 100% 100% !important; } .btn-wrap:active{ transform: translateY(1px); background-position: 100% 100%; } .btn-wrap:hover::before { opacity: .4; inset: -2px; } .btn--grad .tcard__v{ opacity: 0.2; } .btn--grad-content{ z-index: 2; } /* Faire un don — la signature. Fond encre et liseré dégradé : voir .btn--signature. 4px de plus en bas pour compenser le liseré et garder le libellé centré. */ .btn--grad-chaud { background: var(--grad-chaud); } .btn--grad-calme { background: var(--grad-calme); } /* Créer un espace */ .btn--grad-frais { background: var(--grad-frais); } /* Contribuer au projet */ /* Bootstrap met outline: 0 sur .btn:focus-visible : on remet l'anneau du skin. */ .btn--signature:focus-visible, .btn--grad-chaud:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: default; } /* Appui : le bouton s'enfonce d'un pixel. Un seul signal, pas de rebond ni de changement d'échelle. Exclu quand le bouton est désactivé. / Press: sinks one pixel. One signal, no bounce, no scale. */ .btn:active:not(:disabled), .icon-btn:active, .tag-pill:active { transform: translateY(1px); } /* Signature et don : même enfoncement, le liseré dégradé (4px) rentre : la couche encre reprend toute la hauteur. / Same press, the 4px gradient edge retracts: the ink layer takes the full height. */ .btn--signature:active:not(:disabled), .icon-btn { width: 38px; height: 38px; border-radius: var(--radius-s); border: 1px solid var(--color-border-strong); background: var(--color-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text); transition: background var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out); flex-shrink: 0; } .icon-btn:hover { background: var(--color-hover); } .icon-group { display: flex; align-items: center; gap: var(--space-2); } /* ================================================================= PAGE HEADER (eyebrow + titre + intro) ================================================================= */ .page-header { padding: var(--space-7) 0 var(--space-5); } .eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } /* Le vrai gros titre de page (l'équivalent du h1 hero de la DA) : Unbounded, pas Luciole — contrairement aux titres de carte, bien plus petits, qui restent en Luciole Bold. */ .page-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; font-size: var(--text-display); line-height: 1.1; margin-bottom: var(--space-3); /* Unbounded est large : un mot long à 48px dépasse vite d'un écran étroit. */ overflow-wrap: break-word; hyphens: auto; } .page-intro { color: var(--color-text-muted); font-size: var(--text-base); max-width: 62ch; line-height: 1.55; } /* ================================================================= SECTIONS ================================================================= */ .section { padding: var(--space-6) 0; } .section__head { margin-bottom: var(--space-4); } /* Graisse 500, pas 700 : Unbounded est une police large, à 22px en gras elle pèse plus lourd que le titre de page qu'elle est censée suivre. La hiérarchie passe par la taille (--text-display contre --text-xl), pas par la graisse. / Weight 500: wide Unbounded at 22px bold outweighed the page title. */ .section__title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; font-size: var(--text-xl); display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); } .section__title .num { font-family: var(--font-text); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-faint); } /* Chiffre : traitement signature (DA §typo, point 3). */ .section__title-marker { color: var(--letchi-text); font-size: var(--text-ui); } /* Repasse en Luciole : sinon héritée en Unbounded du parent .section__title. */ .section__meta { font-family: var(--font-text); font-size: var(--text-md); color: var(--color-text-faint); font-weight: 400; margin-left: var(--space-1); } .section__desc { color: var(--color-text-muted); font-size: var(--text-ui); margin-top: 4px; } .section__rule { border: none; border-top: 1px solid var(--color-border); margin: var(--space-4) 0 var(--space-5); } /* ================================================================= CARDS génériques ================================================================= */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--shadow-card); } .card--pad { padding: var(--space-5); } .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Grille qui suit un titre de section. Remplace les style="margin-top: …" des gabarits. / Grid following a section title; replaces inline styles. */ .grid--sous-titre-serre { margin-top: var(--space-4); } /* Carte offre (Abonnements / Formations / Réservations / Accès / Programmes) */ .offer-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-card); overflow: hidden; /* Hauteur MINIMALE, jamais fixe : l'image de couverture (100px) s'ajoute au contenu. Avec une hauteur fixe et overflow:hidden, le pied (prix + bouton) sort de la carte et devient invisible. Dans une ligne de .grid, les cartes s'etirent toutes a la hauteur de la plus grande. / MIN height, never fixed: the cover adds to the content; a fixed height with overflow:hidden clips the footer (price + button). */ min-height: 300px; } .offer-card.offer-card-ressource{ min-height: 400px; } .offer-card.offer-card-ressource .offer-card__cover{ height : 200px; } .offer-card__cover{height: 100px; flex-shrink: 0;} .offer-card__content{ display: flex; flex-direction: column; justify-content: space-between; /* Prend la place restante sous la couverture (et non 100% de la carte). / Fills the space left under the cover (not 100% of the card). */ flex-grow: 1; padding: var(--space-5); } .offer-card__title { font-size: var(--text-lg); font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-3); } .offer-card__desc { color: var(--color-text-muted); font-size: var(--text-md); line-height: 1.6; flex-grow: 1; /*overflow: hidden;*/ /*white-space: nowrap; !* Don't forget this one *!*/ /*text-overflow: ellipsis;*/ height: 100%; --lignes: 6; max-height: calc(var(--lignes) * 1.6em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lignes); line-clamp: var(--lignes); overflow: hidden; } .offer-card__price { font-size: var(--text-ui); font-weight: 700; } .offer-card__price .unit { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-sm); } .offer-card__footer { display: flex; align-items: center; justify-content: space-between; /* Prix et bouton passent l'un sous l'autre si la carte est trop étroite. */ /* / Price and button wrap when the card is too narrow. */ flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--color-border); } /* Loséyan pour les liens (rôle « info · liens » de la DA) — jamais letchi, qui reste réservé à l'action principale. */ .link { color: var(--color-link); font-weight: 700; font-size: var(--text-md); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-out); /* .link peut aussi être posé sur un