/* -- LAYOUT -- CONTENT -- FORMS -- COMPONENTS -- TOPBAR -- SIDEBAR -- SPECIFIC CONTENT -- UTILITIES */ /* * Pont Bootstrap ↔ design system : les variables ci-dessous consomment les * tokens --sp-* de tokens.css, dérivés de designsystem/spicto/. */ :root { /* Fond de page : bg.default (#FAF9F5) sous 992px, bg.cream (#F5F3EB) au-dessus (cf. le bloc @media après ce :root). */ --bs-body-bg: var(--sp-color-bg-default); /* Échelle typo DS en px, la racine rem reste à 14px (--font-size-root) : les espacements rem ne bougent pas. */ --bs-body-font-size: var(--sp-font-size-body); --bs-body-font-weight: var(--sp-font-weight-body); --bs-body-line-height: var(--sp-font-leading-normal); --bs-heading-color: var(--sp-color-text-default); --font-size-xxs: 5px; /* hors échelle DS, conservé (phase 5) */ --font-size-xs: 10px; /* hors échelle DS, conservé (phase 5) */ --font-size-s: var(--sp-font-size-12); --font-size-lg: var(--sp-font-size-16); --contrast-font-family: var(--sp-font-family-label); --bs-body-font-family: var(--sp-font-family-base); --heading-font-family: var(--sp-font-family-base); --font-size-root: 14px; --text-muted: var(--sp-color-text-muted); --text-muted-rgb: var(--sp-color-grey-600-rgb); --bs-primary: var(--sp-color-action-primary); --bs-primary-rgb: var(--sp-color-ink-800-rgb); --bs-secondary: var(--sp-color-grey-300); --bs-success: var(--sp-color-feedback-success); --bs-success-rgb: var(--sp-color-green-700-rgb); --bs-danger: var(--sp-color-feedback-danger); --bs-danger-rgb: var(--sp-color-red-600-rgb); --bs-light-bg-subtle: var(--sp-color-bg-grey); --bs-link-color: var(--sp-color-text-default); --bs-link-color-rgb: var(--sp-color-ink-800-rgb); --bs-link-hover-color: var(--sp-color-text-brown); --bs-link-hover-color-rgb: var(--sp-color-brown-700-rgb); --list-spacer-left: 2.5rem; --bullet-size: 1.75rem; --danger: var(--sp-color-feedback-danger); --danger-light: color-mix(in srgb, var(--sp-color-feedback-danger) 14%, transparent); --warning: var(--sp-color-feedback-warning); --warning-light: color-mix(in srgb, var(--sp-color-feedback-warning) 12%, var(--sp-color-cream-0)); --success: var(--sp-color-feedback-success); --success-light: color-mix(in srgb, var(--sp-color-feedback-success) 10%, var(--sp-color-cream-0)); /* Le bleu d'aplat ne porte jamais de texte : ces deux-là en sont la version écrite. */ --info: var(--sp-color-feedback-info-text); --info-light: color-mix(in srgb, var(--sp-color-feedback-info) 10%, var(--sp-color-cream-0)); --light: var(--sp-color-bg-grey); --dark-grey: var(--sp-color-text-default); --bs-border-radius-sm: var(--sp-radius-xs); --bs-border-radius: var(--sp-radius-sm); /* Rayon des surfaces de saisie : 8px par défaut, 12px dans l'espace connecté (fiche input). Défini une fois, consommé par toutes ces surfaces. */ --field-radius: var(--sp-radius-sm); --bs-border-color: var(--sp-color-border-default); /* Calendar (fiche calendar) : la sélection se lit à l'orange, la plage en pêche. primary = accent.selected (cercle début/fin), non action.primary qui est l'ink. secondary reste le filet chaud des bordures ; range porte la bande de plage. */ --flatpickr-primary: var(--sp-color-accent-selected); --flatpickr-secondary: var(--sp-color-border-cream); --flatpickr-range: var(--sp-color-accent-soft); --flatpickr-on-primary: var(--sp-color-text-inverse); --flatpickr-on-range: var(--sp-color-text-default); } /* Le fond de page change de crème avec la largeur (DESIGN, « Le fond de page change de crème avec la largeur » ; DESIGNAPP, « Le fond de page de l'app suit la règle du tronc »). Sous 992px la page EST la feuille : bg.default, le crème le plus clair, ne teinte pas ce qu'on lit. À partir de 992px — le seuil où col-lg-* passe à deux colonnes, donc où du vide apparaît autour des colonnes — la page devient un SOL : bg.cream rend au blanc des cartes son statut de surface (1,05:1 → 1,11:1). Conséquence assumée : bg.default cesse d'être « le fond de page » tout court, c'est la surface claire posée dessus dès qu'on est en deux colonnes. Les blocs qui le portent (récapitulatif d'étape repliée, aperçu sous la carte) ne bougent pas — c'est la page qui bouge sous eux. */ @media (min-width: 992px) { :root { --bs-body-bg: var(--sp-color-bg-cream); } } /* * Fond de page crème (bg.default) mais surfaces blanches (bg.surface) : Bootstrap * fait dériver le fond des champs, cartes, modales… de --bs-body-bg ; on rétablit * ici le blanc plein voulu par le DS pour chaque surface. */ .form-control, .form-control:focus, .form-select, .img-thumbnail { background-color: var(--sp-color-bg-surface); } .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after { background-color: var(--sp-color-bg-surface); } .form-check-input { --bs-form-check-bg: var(--sp-color-bg-surface); } /* Base de la carte : gouttière space.6, rayon lg, fond blanc — les valeurs de la fiche card. ELLE DOIT RESTER AVANT LES VARIANTS (.card-section, .card-nested, .card-dark…). Ces variants redéclarent les mêmes variables --bs-card-* à spécificité égale : posée APRÈS eux, cette base les écrasait silencieusement — l'ombre de .card-section et le rayon de .card-nested étaient inertes, règles valides et jamais appliquées. Ne pas redéclarer .card plus bas dans ce fichier : c'est ainsi que le défaut est né. */ .card { --bs-card-spacer-y: var(--sp-space-6); --bs-card-spacer-x: var(--sp-space-6); --bs-card-bg: var(--sp-color-bg-surface); --bs-card-border-width: 0; --bs-card-border-radius: var(--sp-radius-lg); --bs-card-box-shadow: var(--sp-shadow-none); box-shadow: var(--bs-card-box-shadow); /* Filet chaud, pas le noir translucide de Bootstrap : « pas de gris froid » vaut aussi pour les bordures (DESIGN). Il ne s'affiche que là où la carte porte .border — l'ombre OU le filet, jamais les deux (fiche card). */ --bs-card-border-color: var(--sp-color-border-default); } /* Crème, pas blanc (fiche dialog) : une modale porte des champs, et un champ blanc sur du blanc n'a plus que son filet pour exister. C'est aussi une page entière sur mobile. */ .modal { --bs-modal-bg: var(--sp-color-bg-default); } .offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl { --bs-offcanvas-bg: var(--sp-color-bg-surface); } .dropdown-menu { --bs-dropdown-bg: var(--sp-color-bg-surface); } .accordion { --bs-accordion-bg: var(--sp-color-bg-surface); } .list-group { --bs-list-group-bg: var(--sp-color-bg-surface); } .popover { --bs-popover-bg: var(--sp-color-bg-surface); } .pagination { --bs-pagination-bg: var(--sp-color-bg-surface); } /* LAYOUT */ .site-banner a { color: inherit; text-decoration: underline; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 2.5rem; } /* container custom */ @media (min-width: 1400px) { .container.container-custom { max-width: 1215px; } } /* CONTENT */ /* Typo */ html{ font-size: var(--font-size-root); } body { font-family: var(--bs-body-font-family), sans-serif; font-size: var(--bs-body-font-size); } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: var(--heading-font-family), sans-serif; font-weight: var(--sp-font-weight-title); letter-spacing: var(--sp-font-tracking-tight); } h1, .h1{ font-size: var(--sp-font-size-h1); } /* Registre dense des espaces pro : cran h2 de l'échelle DS pour le titre de page. Ce repli de layout ne vaut QUE pour les h1 qui n'ont pas déjà leur règle de titre : un `.page-title` porte la sienne (plus bas), et ce sélecteur, plus spécifique, la couvrait — l'écran des paramètres affichait donc 28px là où le DS demande h2.dense (24px). */ .photographer-layout h1:not(.page-title), .club-layout h1:not(.page-title){ font-size: var(--sp-font-size-h2); margin-bottom: 24px; } .h1-xl{ font-size: var(--sp-font-size-h1); } h2, .h2{ font-size: var(--sp-font-size-h2); } h3, .h3{ font-size: var(--sp-font-size-h3); } .photographer-layout h3, .club-layout h3, .photographer-layout .h3, .club-layout .h3{ margin-bottom: 16px; } #photographer-dashboard h3, #club-dashboard h3, #photographer-dashboard .h3, #club-dashboard .h3{ font-size: var(--sp-font-size-h3); margin-bottom: 16px; } h4, .h4{ font-size: var(--sp-font-size-16); } .lead{ font-size: 1.25rem; } .lead-xl{ font-size: 24px; font-weight: 400; } .subtitle{ font-size: 20px; font-weight: 400; line-height: 21px; } .text-muted { color: var(--text-muted)!important; } .text-muted a{ --bs-link-color-rgb: var(--text-muted-rgb); } .fw-light { font-weight: 200 !important; } sup{ font-size: .4em; top: -1em; } /* `family.label` (Anuphan) est un choix de FONTE, rien de plus : il n'emporte ni capitales ni interlettrage ouvert (DESIGN.md, Typography). Un style nommé « label » accumule sinon ce qu'on associe machinalement à l'idée d'étiquette — uppercase, un demi-pixel de tracking — puis se pose sur des phrases entières. La casse suit la règle générale, et le seul interlettrage du système est tracking.tight, sur les titres et les boutons. */ .label-text{ font-size: 14px; font-family: var(--contrast-font-family), sans-serif; font-weight: 400; } .label-text-xl{ font-family: var(--contrast-font-family), sans-serif; color: var(--bs-heading-color); font-weight: 500; font-size: 16px; line-height: 18px; } .xl-text{ font-family: var(--contrast-font-family), sans-serif; font-size: 2rem; } .xxl-text{ font-family: var(--contrast-font-family), sans-serif; font-size: 40px; } @media screen and (min-width: 992px) { h1.h1-xl, .h1.h1-xl{ font-size: 64px; font-weight: 600; } h1, .h1{ font-size: 40px; margin-bottom: 24px; } .subtitle{ font-size: 18px; } h2, .h2{ font-size: 24px; } h4, .h4{ font-size: 1.2rem; } .lead{ font-size: 1.5rem; } .lead-xl{ font-size: 32px; } } a:hover { text-decoration: none; } hr { color: var(--sp-color-border-default); } /* TABLES */ th{ font-weight: 400; color: var(--bs-secondary-color)!important; } .table>:not(caption)>*>* { padding: 1rem 1.25rem; } table tbody > tr:last-child > td { border-bottom: none; } /* FORMS */ /* Form Control */ .form-control,.form-select { padding: 8px 12px; } .input-group-text { background-color: var(--light); border-color: var(--sp-color-border-cream); border-right: none; } .input-group-before { border-right: none; border-color: var(--sp-color-border-cream); color: var(--text-muted); font-weight: 600; } .input-group-before + .form-control, .input-group-before + .form-select { border-left: none; } .input-group-text + .form-control{ border-left: none; } /* Champ plat : filet chaud au repos, bordure orange + anneau de focus (DS input/select) */ .form-control:focus, .form-select:focus { border-color: var(--sp-color-border-focus); box-shadow: var(--sp-shadow-ring); } .input-group .form-select:focus{ border-color: var(--sp-color-border-cream); } .form-control, .form-select, .address-suggestions{ --bs-border-color: var(--sp-color-border-cream); --bs-body-color: var(--sp-color-text-default); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); border-radius: var(--sp-radius-sm); } .focus .ts-control { box-shadow: none!important; } ::-webkit-input-placeholder { color: var(--sp-color-text-muted) } /* Chrome, Safari, Edge */ :-ms-input-placeholder { color: var(--sp-color-text-muted) } /* Internet Explorer 10-11 */ ::placeholder { color: var(--sp-color-text-muted) } .form-floating > label { color: var(--sp-color-text-muted); } .form-floating>.form-control-plaintext~label:after, .form-floating>.form-control:focus~label:after, .form-floating>.form-control:not(:placeholder-shown)~label:after, .form-floating>.form-select~label:after { content: normal; } @media screen and (max-width: 991px) { .form-select-sm-light{ border: none!important; background-color: transparent!important; font-size: 0.9rem !important; } } /* Le champ autorempli reprend la surface d'un champ — bg.surface, le blanc plein —, pas le fond de la page : c'est la même restauration que .form-control plus haut. Il lisait --bs-body-bg, qui n'est plus une seule teinte depuis que la page passe au crème à 992px ; un champ autorempli y serait devenu crème sur desktop, et il était déjà crème au lieu de blanc sur mobile. */ input:-internal-autofill-selected { background-color: var(--sp-color-bg-surface) !important; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--sp-color-bg-surface) inset !important; box-shadow: 0 0 0 1000px var(--sp-color-bg-surface) inset !important; -webkit-text-fill-color: var(--sp-color-text-default) !important; caret-color: var(--sp-color-text-default); } .input-group .form-select{ background-color: var(--light); padding: 7px 34px 7px 12px; } .address-suggestions{ margin-top: -1px; z-index: 99; } .address-suggestions > .suggestion-item{ background-color: var(--sp-color-bg-surface); } .address-suggestions > .suggestion-item:first-child{ border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius); } .address-suggestions > .suggestion-item:last-child{ border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); } /* Prevent iOS zoom on input focus (requires font-size >= 16px) */ @media (max-width: 767px) { .form-control, .form-select, .ts-control input { font-size: 16px !important; } .form-select.form-select-sm-light { font-size: 0.9rem !important; } } /* Datepicker - Flatpickr Override */ .flatpickr-calendar { -webkit-box-shadow: 1px 0 0 var(--flatpickr-secondary), -1px 0 0 var(--flatpickr-secondary), 0 1px 0 var(--flatpickr-secondary), 0 -1px 0 var(--flatpickr-secondary), 0 3px 13px rgba(0,0,0,0.08)!important; box-shadow: 1px 0 0 var(--flatpickr-secondary), -1px 0 0 var(--flatpickr-secondary), 0 1px 0 var(--flatpickr-secondary), 0 -1px 0 var(--flatpickr-secondary), 0 3px 13px rgba(0,0,0,0.08)!important; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { -webkit-box-shadow: -2px 0 0 var(--flatpickr-secondary), 5px 0 0 var(--flatpickr-secondary)!important; box-shadow: -2px 0 0 var(--flatpickr-secondary), 5px 0 0 var(--flatpickr-secondary)!important; } .flatpickr-calendar.hasTime .flatpickr-time { border-top: 1px solid var(--flatpickr-secondary)!important; } .flatpickr-calendar.arrowTop:before { border-bottom-color: var(--flatpickr-secondary)!important; } .flatpickr-calendar.arrowBottom:before { border-top-color: var(--flatpickr-secondary)!important; } .dayContainer + .dayContainer { -webkit-box-shadow: -1px 0 0 var(--flatpickr-secondary)!important; box-shadow: -1px 0 0 var(--flatpickr-secondary)!important; } /* Jours entre début et fin : bande pêche, texte ink (fiche calendar) */ .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange { background: var(--flatpickr-range)!important; border-color: var(--flatpickr-range)!important; color: var(--flatpickr-on-range)!important; } /* Survol : teinte pêche légère (accent.softer), pas la couleur de plage pleine */ .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { background: var(--sp-color-accent-softer)!important; border-color: var(--sp-color-accent-softer)!important; color: var(--flatpickr-on-range)!important; } .flatpickr-day { border: none!important; } .flatpickr-day.today { background-color: var(--sp-color-border-default)!important; } /* Calendar posé dans le panneau de filtres (fiche calendar) : rendu inline, plein largeur, cases de 44×44px, résumé « début → fin » au-dessus de la grille. */ .calendar { display: flex; flex-direction: column; gap: var(--sp-space-4); } .calendar-summary { display: flex; align-items: center; gap: var(--sp-space-3); margin: 0; padding-bottom: var(--sp-space-4); border-bottom: 1px solid var(--sp-color-border-default); font-size: var(--sp-font-size-body); color: var(--sp-color-text-default); } .calendar-summary-arrow { display: inline-flex; color: var(--sp-color-text-brown); } /* flatpickr inline : cases carrées de 44×44px, cercles pleins qui restent RONDS (fiche calendar). Toute la clé est la largeur du CONTENEUR : flatpickr garde chaque jour à 1/7 (14.28%), donc à 7×44px la case fait 44px et le cercle est rond ; laissé pleine largeur, il s'étale en pilule et la grille s'enroule à plus de 7 par ligne. On fige donc le calendrier à sept cases, centré dans le panneau. */ .calendar .flatpickr-calendar.inline { box-shadow: none!important; margin: 0 auto; width: calc(7 * var(--sp-control-icon-button)); max-width: 100%; } /* Grille et en-têtes de jours partagent cette largeur : les 14.28% de flatpickr y valent 44px des deux côtés, et les colonnes restent alignées. */ .calendar .flatpickr-rContainer, .calendar .flatpickr-days, .calendar .dayContainer, .calendar .flatpickr-weekdays, .calendar .flatpickr-weekdaycontainer { width: 100%; min-width: 0; max-width: none; } .calendar .flatpickr-day { max-width: none; height: var(--sp-control-icon-button); line-height: var(--sp-control-icon-button); border-radius: var(--sp-radius-full)!important; } /* Le calendrier tient en entier : pas de scroll vertical quand il rentre (fiche calendar). Le corps du panneau Dates ne défile donc pas, contrairement à la liste des sports. */ .calendar.filter-panel-body { overflow: visible; } /* Plage : début et fin sont des cercles pleins et RONDS, jamais rognés (fiche calendar). Ces règles (0,3,0) l'emportent sur le thème flatpickr custom plus haut (0,2,0), dont la demi-bande :after coupait le cercle de début. On la neutralise et on relie les deux cercles par une bande pêche continue, tracée derrière eux. */ .calendar .flatpickr-day.selected, .calendar .flatpickr-day.startRange, .calendar .flatpickr-day.endRange { position: relative; z-index: 1; background: var(--sp-color-accent-selected)!important; border-color: var(--sp-color-accent-selected)!important; color: var(--sp-color-text-inverse)!important; border-radius: var(--sp-radius-full)!important; box-shadow: none!important; } /* Les cases sont inline-block : un blanc d'environ 4px les sépare. La bande pêche comble cette gouttière par un box-shadow de 5px de chaque côté — assez pour rejoindre la case voisine (et se glisser sous le bord du cercle de plage), jamais assez pour atteindre le chiffre, centré à 22px du bord. Un décalage plus grand recouvrait les chiffres de pêche. */ .calendar .flatpickr-day.inRange { background: var(--sp-color-accent-soft)!important; color: var(--sp-color-text-default)!important; border-radius: 0!important; box-shadow: -5px 0 0 var(--sp-color-accent-soft), 5px 0 0 var(--sp-color-accent-soft)!important; } /* Au bord d'une semaine, ce box-shadow de 5px déborderait hors de la ligne en un moignon pêche. On rogne la grille à sa largeur exacte : le débord de bord disparaît, la bande s'arrête net au bord. Plus robuste qu'un nth-child, que les jours du mois précédent décalent. */ .calendar .flatpickr-days, .calendar .dayContainer { overflow: hidden; } /* Le thème custom traçait la bande par des :after asymétriques (cause du cercle rogné) : on les neutralise, la bande vient désormais du box-shadow ci-dessus. */ .calendar .flatpickr-day.startRange::after, .calendar .flatpickr-day.endRange::after, .calendar .flatpickr-day.selected::after { content: none!important; } /* Le mois en Casse Titre, ink (fiche : « Juillet 2026 ») */ .calendar .flatpickr-current-month { font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); } /* En-têtes de jours estompés (Dim…Sam) */ .calendar span.flatpickr-weekday { color: var(--sp-color-text-muted); font-weight: var(--sp-font-weight-body); } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: var(--flatpickr-primary)!important; -webkit-box-shadow: none!important; box-shadow: none!important; color: var(--flatpickr-on-primary)!important; border-color: var(--flatpickr-primary)!important; } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-radius: 50px!important; } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-radius: 50px!important; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: none!important; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)):before, .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)):before, .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)):before { content: ""; position: absolute; top: 0; left: -5px; width: 100%; height: 100%; background: var(--flatpickr-range); z-index: -1; border-radius: 0 50px 50px 0; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)):after, .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)):after, .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)):after { content: normal!important; } .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange { border-radius: 50px!important; } .flatpickr-day.inRange { position: relative; color: var(--flatpickr-on-range)!important; border-radius: 0!important; -webkit-box-shadow: -5px 0 0 var(--flatpickr-range), 5px 0 0 var(--flatpickr-range)!important; box-shadow: -5px 0 0 var(--flatpickr-range), 5px 0 0 var(--flatpickr-range)!important; } /* La demi-case pêche qui relie le cercle de début à la bande (et fin, à gauche) */ .flatpickr-day.startRange:after { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: var(--flatpickr-range); z-index: -1; border-top-right-radius: 0; border-bottom-right-radius: 0; } .flatpickr-day.endRange:after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: var(--flatpickr-range); z-index: -1; border-top-left-radius: 0; border-bottom-left-radius: 0; } .flatpickr-day.week.selected { border-radius: 0!important; -webkit-box-shadow: -5px 0 0 var(--flatpickr-primary), 5px 0 0 var(--flatpickr-primary)!important; box-shadow: -5px 0 0 var(--flatpickr-primary), 5px 0 0 var(--flatpickr-primary)!important; } .flatpickr-weekwrapper .flatpickr-weeks { -webkit-box-shadow: 1px 0 0 var(--flatpickr-secondary)!important; box-shadow: 1px 0 0 var(--flatpickr-secondary)!important; } /* Form Check */ .required-d-none label.required{ display: none; } .form-check { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.35rem; } /* Le libellé d'un ENGAGEMENT (CGU, politique de confidentialité) descend à size.meta : c'est une phrase juridique qu'on lit une fois avant de valider, pas l'option qu'on est venu choisir — à la taille du corps, deux de ces phrases pèsent plus lourd que le geste qu'elles autorisent (fiche checkbox). Ce qui descend est la TAILLE, pas le registre : le libellé et son lien gardent leur couleur, un engagement estompé étant une case cochée sans savoir à quoi l'on s'engage. La case ne suit pas : la règle du type ci-dessous la fixe à 18px, hors de l'`em` de Bootstrap, et sa cible ne dépend pas de la longueur de ce qu'elle fait accepter. La règle suit le RÔLE, pas le balisage : un engagement se rend tantôt en case-et-libellé, tantôt en ligne d'option (libellé à gauche, contrôle à droite). C'est la même chose qu'on fait accepter, donc un seul jeu de valeurs — sans quoi le produit fait accepter ses conditions de deux façons selon l'écran. */ .form-check-consent .form-check-label, .option-row-consent .option-row-name{ font-size: var(--sp-font-size-meta); } /* Grammaire DS des contrôles : filet chaud au repos, coché = orange, anneau de focus */ .form-check-input { border: var(--sp-border-width-strong) solid var(--sp-color-border-cream); margin: 0; } /* Case à cocher : 18px, rayon radius.xs (fiche checkbox). Bootstrap la dimensionne en `em` et arrondit en `.25em` : la case suivrait donc la taille du texte à côté d'elle, et son rayon avec. Le sélecteur vise le type — le radio partage cette classe et garde son cercle de 20px. */ .form-check-input[type="checkbox"] { width: 18px; height: 18px; border-radius: var(--sp-radius-xs); } .form-check-input:checked { background-color: var(--sp-color-accent-selected); border-color: var(--sp-color-accent-selected); } .form-check-input:focus { box-shadow: var(--sp-shadow-ring); border-color: var(--sp-color-border-cream); } .form-check-input:checked:focus { border-color: var(--sp-color-accent-selected); } /* Form Switch */ .form-switch { padding-left: 3.5em; } /* Switch DS : piste chaude au repos, orange activé, bouton blanc dans tous les états. Un switch est un input[type=checkbox] : la règle de la case à cocher ci-dessus l'atteint donc aussi. Sa piste reprend ici sa forme de pill (fiche switch), que le rayon de la case lui avait ôtée. */ .form-switch .form-check-input { width: 2.5em; margin-left: -3.5em; height: 1.5em; border-radius: var(--sp-radius-full); background-color: var(--sp-color-border-cream); border-color: var(--sp-color-border-cream); --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); } /* Switch SANS libellé visible : son titre de section le nomme (fiche switch). Bootstrap réserve 3,5em de padding pour un texte qui n'est plus dans le flux — la piste flotterait alors à gauche d'une boîte vide, décollée du bord qu'elle doit longer. */ .form-switch-bare { padding-left: 0; } .form-switch-bare .form-check-input { margin-left: 0; } .form-switch .form-check-input:checked { background-color: var(--sp-color-accent-selected); border-color: var(--sp-color-accent-selected); } /* Bootstrap repeint le bouton en bleu (#86b7fe) au focus, et sa règle est plus spécifique que celle du repos : le bouton est blanc dans tous les états (fiche switch), et le DS ne connaît pas ce bleu. Le focus se dit par son anneau, qui est orange. */ .form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); } /* Astérisque de champ requis en orange (DS input : required.mark) */ /* Marque « champ requis » écrite dans le libellé, pour les champs où le ::after de `label.required` ci-dessous ne survit pas (form-floating le remet à `content: normal`). Même orange, même écart : c'est la même marque, posée autrement. */ .field-required { margin-left: 0.25em; color: var(--sp-color-accent-selected); } label.required:after { content: "*"; margin-left: 0.25em; color: var(--sp-color-accent-selected); } /* Panneau de localisation (DESIGNAPP) : recherche avec loupe, puis Slider de rayon. */ .filter-location-search { display: flex; flex-direction: column; gap: var(--sp-space-2); margin-bottom: var(--sp-space-6); } .filter-location-label { font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); } /* La loupe se pose dans le champ ; le dropdown de suggestions se rend dans ce parent, d'où position: relative. */ .filter-location-field { position: relative; display: block; } .filter-location-icon { position: absolute; top: 50%; left: var(--sp-space-3); transform: translateY(-50%); color: var(--sp-color-text-muted); pointer-events: none; } /* Un champ qui cherche est toujours un pill (fiche input, variant search) : la forme dit qu'on y tape pour trouver, pas pour renseigner un formulaire. Vaut pour tout champ de recherche — type=search (faq, blog) et le champ de localisation (type=text). */ .form-control[type="search"] { border-radius: var(--sp-radius-full); } .filter-location-field .form-control { border-radius: var(--sp-radius-full); padding-left: calc(var(--sp-space-3) + 18px + var(--sp-space-2)); } /* Slider (fiche slider) : libellé + valeur au-dessus, piste bicolore, poignée blanche à liseré orange, bornes en dessous. La portion parcourue (orange) et le reste (pêche) se tracent d'un dégradé calé sur --slider-progress, que le contrôleur met à jour. */ .slider { display: flex; flex-direction: column; gap: var(--sp-space-2); } .slider-head { display: flex; align-items: baseline; justify-content: space-between; } .slider-label { color: var(--sp-color-text-default); } .slider-value { font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); } .slider-input { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: var(--sp-radius-full); background: linear-gradient( to right, var(--sp-color-accent-selected) 0%, var(--sp-color-accent-selected) var(--slider-progress, 0%), var(--sp-color-accent-soft) var(--slider-progress, 0%), var(--sp-color-accent-soft) 100% ); cursor: pointer; } /* La poignée : blanc plein, sans bordure, détachée de la piste par une ombre portée (fiche slider). Répétée pour chaque moteur — les pseudo-éléments de curseur ne se groupent pas dans un même sélecteur. */ .slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: var(--sp-radius-full); background: var(--sp-color-bg-surface); border: 0; box-shadow: var(--sp-shadow-knob); cursor: pointer; } .slider-input::-moz-range-thumb { width: 22px; height: 22px; border-radius: var(--sp-radius-full); background: var(--sp-color-bg-surface); border: 0; box-shadow: var(--sp-shadow-knob); cursor: pointer; } /* Firefox trace sa propre piste : on la neutralise, le dégradé du background suffit */ .slider-input::-moz-range-track { height: 8px; border-radius: var(--sp-radius-full); background: transparent; } .slider-input:focus-visible { outline: none; } .slider-input:focus-visible::-webkit-slider-thumb { box-shadow: var(--sp-shadow-ring); } .slider-input:focus-visible::-moz-range-thumb { box-shadow: var(--sp-shadow-ring); } .slider-bounds { display: flex; justify-content: space-between; font-size: var(--sp-font-size-meta); color: var(--sp-color-text-muted); } /* Search-form */ .search-bar-desktop-wrapper, .search-bar-mobile-wrapper{ display: flex; flex-grow: 1; } /* SearchBar DS : traitement liquid glass, un seul par vue (designsystem/spicto/app/components/search-bar.md) */ .search-bar{ background: var(--sp-glass-search-tint); backdrop-filter: blur(var(--sp-glass-blur)); -webkit-backdrop-filter: blur(var(--sp-glass-blur)); border: var(--sp-glass-search-border); box-shadow: var(--sp-glass-search-shadow); border-radius: var(--sp-radius-full); min-height: 44px; } .search-bar:focus-within{ box-shadow: var(--sp-shadow-ring), var(--sp-glass-search-shadow); } /* Sous 992px, la barre porte le verre — donc un `backdrop-filter`, donc un CONTEXTE D'EMPILEMENT. Son panneau de résultats a beau être en z-index 1000, il est enfermé dedans : tout ce qui suit dans la page (onglets, chips, cartes du rail) lui passait devant, et le panneau se lisait comme transparent. C'est la barre qu'il faut élever, pas lui — un élément ne sort pas du contexte de son parent. Le défaut ne se voyait pas avant : le panneau était purement et simplement masqué sous 992px, puisque la recherche mobile se faisait ailleurs, dans un panneau plein écran. Sur desktop le verre tombe (fiche search-bar), il n'y a plus de contexte d'empilement, et la règle n'a plus lieu d'être. */ @media (max-width: 991.98px) { .search-bar{ z-index: 20; } } /* Desktop : la barre repose sur un fond de page plein, pas sur une photo — le verre n'a rien pour le porter. On prend la surface pleine des filtres (bg.surface + shadow.sm) et on plafonne la largeur à 500px (fiche search-bar). */ @media (min-width: 992px) { .search-bar{ background: var(--sp-color-bg-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: var(--sp-shadow-sm); max-width: 500px; } .search-bar:focus-within{ box-shadow: var(--sp-shadow-ring); } } .search-bar .form-control, .search-bar .input-group-text{ border-radius: var(--sp-radius-full); background-color: transparent; border: none; } .search-bar .input-group-text{ color: var(--sp-color-text-caption); padding-left: 1rem; padding-right: 0; display: flex; align-items: center; } .search-bar .form-control{ padding-left: 0.75rem; padding-top: 12px; padding-bottom: 12px; font-size: var(--sp-font-size-label); color: var(--sp-color-text-default); } /* Le placeholder suit la règle de l'Input : text.muted est le seul ton qui tienne l'AA sur les deux fonds que cette barre connaît — le verre sur photo, et la surface pleine du desktop (fiche search-bar). L'icône, elle, reste en caption : c'est un pictogramme, pas du texte. */ .search-bar .form-control::placeholder{ color: var(--sp-color-text-muted); } .search-bar .form-control:focus { box-shadow: none; background-color: transparent; border: none; } .search-bar .ts-control, .search-bar .ts-wrapper.focus .ts-control{ background: transparent; border: none; box-shadow: none; } .search-bar .ts-control{ padding: 12px 16px!important; } .search-bar .ts-control input { font-size: 14px; line-height: 15px !important; } /* Panneau de résultats de la SearchBar (fiche search-bar) : une surface flottante NUE — bg.surface, radius.lg, shadow.pop, et pas de filet (l'ombre ou le filet, jamais les deux). Ni titre ni pied d'actions : ce n'est pas un Dropdown, qui règle quelque chose et se valide ; celui-ci ne fait que montrer ce qu'on a écrit. */ .search-bar .ts-dropdown{ background: var(--sp-color-bg-surface); border: none; border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-pop); margin-top: var(--sp-space-2); overflow: hidden; } /* Les lignes sont des ListItem, en UNE colonne : la grille de tuiles à deux ou trois colonnes faisait de la liste un catalogue et perdait l'ordre de pertinence, que le regard suit de haut en bas. La gouttière est horizontale seulement — une ligne de liste court d'un bord à l'autre de sa surface, c'est son filet qui la sépare de la suivante, pas du vide. */ .search-bar .ts-dropdown .ts-dropdown-content{ padding: 0 var(--sp-space-4); /* Le plafond suit l'écran, pas un nombre de pixels : les 200px de TomSelect étaient calibrés sur des lignes compactes et ne montraient plus que deux ListItem, quand la requête en rend cinq (fiche search-bar). 60vh les laisse tous voir sur desktop et borne le panneau à ce que le mobile peut céder. */ max-height: 60vh; } .search-bar .ts-dropdown .option{ max-width: none; padding: 0; background: transparent; } /* Le filet de la dernière ligne ne sépare plus rien : chaque option étant un conteneur à part, `.list-item:last-child` est vrai partout et le filet tombait sous la dernière (fiche list-item : « la dernière n'en porte pas, elle ne sépare plus rien »). */ .search-bar .ts-dropdown .option:last-child .list-item{ border-bottom: 0; } /* Survol et parcours au clavier : le crème le plus clair du système, celui qui marque la ligne sans la découper. Il se pose sur la ligne entière, gouttière comprise. */ .search-bar .ts-dropdown .option.active, .search-bar .ts-dropdown .option:hover{ background: var(--sp-color-bg-default); margin: 0 calc(-1 * var(--sp-space-4)); padding: 0 var(--sp-space-4); } .search-bar .ts-dropdown .no-results, .search-bar .ts-dropdown .option.no-more-results{ max-width: none; padding: var(--sp-space-4) 0; color: var(--sp-color-text-muted); font-size: var(--sp-font-size-meta); } /*legend {*/ /* font-family: var(--heading-font-family), sans-serif;*/ /* font-size: 1.1rem !important;*/ /* font-weight: 600;*/ /* padding: 0;*/ /* margin-bottom: 1rem;*/ /*}*/ /*fieldset {*/ /* padding-top: .5rem;*/ /* padding-bottom: .5rem;*/ /*}*/ /*fieldset:not(:last-child) {*/ /* border-bottom: 1px solid var(--light);*/ /* margin-bottom: .5rem;*/ /*}*/ /* Search suggestions (évènements, lieux, photographes, sports) */ /* Les raccourcis qui prolongent les résultats : ils ne sont pas des lignes de liste — ils ne désignent pas un évènement mais une VUE filtrée. D'où la pilule, et le filet chaud qui les sépare des résultats au-dessus. Tokens du DS de bout en bout : le bloc portait des rem hors échelle, un gris Bootstrap et `--light`. La gouttière horizontale est celle de la liste d'options (`.ts-dropdown-content`) : depuis que le panneau se lit groupé par type, les groupes doivent s'aligner sur les lignes au-dessus d'eux, sinon deux marges gauches se répondent dans la même surface. */ .search-suggestions { border-top: 1px solid var(--sp-color-border-default); padding: var(--sp-space-4); } .search-suggestions-section:not(:last-child) { margin-bottom: var(--sp-space-4); } /* Un en-tête de groupe, pas une étiquette en capitales : `family.label` est un choix de fonte et n'emporte ni majuscules ni interlettrage (DESIGN.md, « Typography »). */ .search-suggestions-title { font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-brown); margin-bottom: var(--sp-space-2); } .search-suggestions-list { display: flex; flex-wrap: wrap; gap: var(--sp-space-2); } .search-suggestions-item { display: inline-flex; align-items: center; gap: var(--sp-space-2); padding: var(--sp-space-2) var(--sp-space-3); border-radius: var(--sp-radius-full); background-color: var(--sp-color-bg-cream); color: var(--sp-color-text-default); text-decoration: none; font-size: var(--sp-font-size-label); transition: background-color var(--sp-duration-fast) var(--sp-easing-standard); } /* Au survol, la surface se creuse d'un cran — elle ne prend ni l'ink ni l'orange : ces raccourcis mènent quelque part, ils ne sont ni une action ni un état réglé. */ .search-suggestions-item:hover { background-color: var(--sp-color-bg-sunken); color: var(--sp-color-text-default); text-decoration: none; } /* En-tête du groupe « Évènements » : il coiffe la liste d'options du champ, qui n'est pas dans `.search-suggestions` et ne reçoit donc pas sa gouttière. Il la reprend ici pour s'aligner sur les lignes qu'il annonce. */ .search-suggestions-title--options { padding: var(--sp-space-4) var(--sp-space-4) 0; margin-bottom: 0; } /* Évènement et photographe désignent une ENTITÉ, pas une vue filtrée : ils prennent une ligne, en une colonne, comme partout où l'app liste des résultats (fiche list-item). */ .search-suggestions-list--rows { flex-direction: column; flex-wrap: nowrap; gap: 0; } .search-suggestions-row { display: flex; align-items: center; gap: var(--sp-space-3); padding: var(--sp-space-2); margin: 0 calc(-1 * var(--sp-space-2)); border-radius: var(--sp-radius-md); color: var(--sp-color-text-default); text-decoration: none; transition: background-color var(--sp-duration-fast) var(--sp-easing-standard); } .search-suggestions-row:hover { background-color: var(--sp-color-bg-default); color: var(--sp-color-text-default); text-decoration: none; } /* Les rôles de texte sont ceux du ListItem ; ils s'empilent, la vignette reste centrée. */ .search-suggestions-row-body { display: flex; flex-direction: column; } /* Event title Tom Select suggestions */ .event-suggestion-option { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; } /* Liste d'options d'un formulaire (DESIGNAPP, « La même anatomie sert les options d'un formulaire ») : libellé à gauche, Radio aligné à droite, filet entre les options. Ce n'est plus une carte par option : une carte par choix pose chacun sur sa propre surface, et l'œil compare alors des surfaces au lieu de comparer des offres. C'est le groupe entier qui a une carte, pas ses membres. */ .option-list{ border: 0; padding: 0; margin: 0; min-width: 0; /* un fieldset ne rétrécit pas sans ça */ } .option-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-space-4); padding: var(--sp-space-4) 0; cursor: pointer; } /* Le filet coiffe la ligne au lieu de la souligner : la dernière n'en porte donc aucun, sans avoir à la désigner. Même construction que la liste de filtres. */ .option-row + .option-row{ border-top: 1px solid var(--sp-color-border-default); } .option-row:first-of-type{ padding-top: 0; } .option-row:last-of-type{ padding-bottom: 0; } .option-row-label{ display: flex; flex-direction: column; gap: var(--sp-space-1); min-width: 0; } /* Trois lignes au plus : le nom, la valeur en gras, ce que l'option fait (DESIGNAPP). Le nom et la valeur sont à `size.body` : elles se lisent d'un bloc — l'une nomme, l'autre chiffre —, et c'est la GRAISSE qui les départage, pas l'échelle. Les deux lisaient `font.size.16`, une primitive qu'un composant n'a pas le droit de lire, et à cette taille le nom d'une option pesait autant que le sous-titre d'un bloc dans une liste qu'on parcourt justement pour comparer. */ .option-row-name{ font-size: var(--sp-font-size-body); font-weight: var(--sp-font-weight-body); color: var(--sp-color-text-default); } .option-row-value{ font-size: var(--sp-font-size-body); color: var(--sp-color-text-default); } .option-row-value strong{ font-weight: var(--sp-font-weight-bold); } .option-row-help{ font-size: var(--sp-font-size-label); color: var(--sp-color-text-muted); } /* Le contrôle garde sa cible tactile et ne se déforme pas quand le libellé s'allonge */ .option-row .form-check-input{ flex-shrink: 0; margin: 0; } /* Radio variant `segmented` (fiche radio) : le même choix exclusif, rendu en boutons alignés, quand les options sont courtes et comparables — une gamme de prix. Au repos : aplat crème, sans filet, libellé ink. Deux aplats plutôt qu'un plein et un vide : les options non choisies ressembleraient sinon à des trous. Le libellé ne s'estompe pas — un prix qu'on n'a pas choisi est exactement aussi cliquable que celui qu'on a choisi. Le libellé est centré SUR LES DEUX AXES. La hauteur est fixe (48px) alors que la mise en page d'un .btn repose sur ses marges internes : sans ce centrage, le texte pend au bord haut du cadre, et rien dans le style ne le signale (fiche radio). */ .btn-toggle { display: inline-flex; align-items: center; justify-content: center; height: 48px; font-size: var(--sp-font-size-16); font-weight: var(--sp-font-weight-bold); --bs-btn-bg: var(--sp-color-bg-cream); --bs-btn-border-color: var(--sp-color-bg-cream); --bs-btn-color: var(--sp-color-text-default); --bs-btn-hover-bg: var(--sp-color-bg-sunken); --bs-btn-hover-border-color: var(--sp-color-bg-sunken); --bs-btn-hover-color: var(--sp-color-text-default); --bs-btn-border-radius: var(--sp-radius-lg); } /* Sélectionné : aplat ink. Sans cercle à cocher, seul un remplissage dit « c'est celui-là » d'un bout à l'autre de la rangée — et l'ink, pas l'orange, parce qu'on est dans le parcours de dépôt (DESIGNAPP, « Dans le dépôt, la sélection est ink »). */ .btn-check:checked + .btn-toggle { --bs-btn-bg: var(--sp-color-action-primary); --bs-btn-border-color: var(--sp-color-action-primary); --bs-btn-color: var(--sp-color-text-inverse); --bs-btn-active-bg: var(--sp-color-action-primary); --bs-btn-active-border-color: var(--sp-color-action-primary); --bs-btn-active-color: var(--sp-color-text-inverse); --bs-btn-hover-bg: var(--sp-color-action-primary); --bs-btn-hover-border-color: var(--sp-color-action-primary); --bs-btn-hover-color: var(--sp-color-text-inverse); } /* Sélection ink dans le parcours de dépôt, et là seulement (DESIGNAPP). Cinq écrans de décisions constelleraient la carte d'accents orange, et le seul orange qui compte — celui qui dépose — ne se distinguerait plus. La portée est la carte : un panneau de filtres ouvert depuis cet écran garde l'orange, il n'est pas dans le parcours. */ .upload-flow .form-check-input:checked { background-color: var(--sp-color-action-primary); border-color: var(--sp-color-action-primary); } .upload-flow .form-check-input:checked:focus { border-color: var(--sp-color-action-primary); } /* Photo-upload form*/ /* Dropzone (designsystem/spicto/app/components/dropzone.md). Blanche, pas grise : les vignettes qui s'y afficheront ensuite ne doivent pas être posées sur une couleur. Le POINTILLÉ est ce qui la désigne — c'est le seul signe que l'interface n'a pas à expliquer —, en filet chaud et non dans le gris froid de Bootstrap. Rayon 2xl (24px) : c'est un bloc posé DANS une carte, et il prend donc le rayon au-dessus d'elle (DESIGN, « Un bloc posé dans une carte prend le rayon au-dessus d'elle »). */ .custom-dropzone-wrapper{ display: flex; align-items: center; justify-content: center; border: 2px dashed var(--sp-color-border-cream); /* Un cran SOUS la carte imbriquée qui la porte, laquelle est à `xl` (fiche dropzone) : elle était à égalité avec elle, et deux surfaces concentriques à rayons identiques ne se lisent plus comme emboîtées mais comme mal alignées. Sa grande taille n'y change rien — ce n'est pas la surface qui choisit son coin, c'est son rang. */ border-radius: var(--sp-radius-lg); background-color: var(--sp-color-bg-surface); padding: var(--sp-space-12) var(--sp-space-8); min-height: 280px; cursor: pointer; transition: border-color var(--sp-duration-base) var(--sp-easing-standard), background-color var(--sp-duration-base) var(--sp-easing-standard); text-align: center; position: relative; } .custom-dropzone-wrapper:hover, .custom-dropzone-wrapper:focus-within{ border-color: var(--sp-color-border-focus); background-color: var(--sp-color-bg-default); } /* La contrainte principale de la zone : petite pour ne pas disputer la phrase d'appel, mais en graisse de titre — c'est un chiffre qui fait échouer un dépôt quand on le manque (fiche dropzone). Elle garde text.default : ce n'est pas de la méta au sens du registre, et la taille n'emporte pas la mise en retrait (tronc, « size.meta est une taille, pas un registre »). */ .dropzone-limit{ font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); } /* La mention légale qui ferme la carte : la seule ligne du bloc qui accompagne vraiment sans rien demander, d'où le muted (fiche dropzone). Elle ne descend pas à size.12 pour autant — une phrase qui engage l'acheteur prendrait l'air d'un pied de page qu'on ne lit pas. */ .dropzone-legal{ font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-body); } /* L'amorce descend à la même taille que la contrainte ci-dessus, mais pas pour la même raison : elle redit le geste que le pointillé annonce déjà. C'est la COULEUR qui départage les deux petites lignes — celle qu'il faut lire garde l'ink, celle qui accompagne prend le muted. */ .dropzone-prompt{ font-size: var(--sp-font-size-meta); } /* Les règles SOUS la zone, en deux colonnes de faits — sans puces : ce ne sont pas des étapes à suivre (fiche dropzone). Sur mobile la seconde colonne passe dessous. */ /* Les règles sont des FAITS, courts et nombreux : à size.meta, les six tiennent en deux colonnes sans que la liste devienne le sujet de la carte (fiche dropzone). Elles gardent text.default — ce sont elles qui disent ce que le contrôle refuse, la taille ne les met pas en retrait. */ .dropzone-rules{ display: grid; grid-template-columns: 1fr; column-gap: var(--sp-space-8); row-gap: var(--sp-space-2); list-style: none; padding: 0; margin: 0; font-size: var(--sp-font-size-meta); } @media (min-width: 768px) { .dropzone-rules{ grid-template-columns: 1fr 1fr; } } .custom-dropzone-wrapper .dropzone-content{ pointer-events: none; } .custom-dropzone-input{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* Photographer & Club Form*/ /* Espaces pro : même grammaire de champ que le reste de l'app (DS input) ; l'ancien traitement gris plein sans bordure est abandonné. */ .photographer-layout .input-group-text, .club-layout .input-group-text { background-color: var(--sp-color-bg-surface); border-color: var(--sp-color-border-cream); } .photographer-layout .form-floating>.form-control, .photographer-layout .form-floating>.form-control-plaintext, .photographer-layout .form-floating>.form-select, .photographer-layout .form-select, .photographer-layout .form-control{ height: calc(52px + calc(var(--bs-border-width) * 2)); min-height: calc(52px + calc(var(--bs-border-width) * 2)); } .club-layout .form-floating>.form-control, .club-layout .form-floating>.form-control-plaintext, .club-layout .form-floating>.form-select, .club-layout .form-select, .club-layout .form-control{ height: calc(52px + calc(var(--bs-border-width) * 2)); min-height: calc(52px + calc(var(--bs-border-width) * 2)); } /* LE COIN DU CHAMP SUIT LA ZONE : radius.sm (8px) dehors, radius.md (12px) dans l'espace connecté — la MÊME densité que le bouton, et pour la même raison (fiche input). Les deux doivent bouger ensemble : un formulaire dont les champs gardent le coin d'accueil sous des boutons resserrés se lit comme deux jeux de contrôles empruntés à deux écrans. `:where()` n'apporte AUCUNE spécificité : cette règle pèse donc autant que `.form-control` seul. C'est délibéré, et c'est ce qui protège les champs non concernés — tous ceux qui portent déjà une autre forme sont posés par des règles plus spécifiques (0,2,0), qui gagnent quoi qu'il arrive et sans dépendre de l'ordre du fichier : - .form-control[type="search"] le champ de recherche, en pilule ; - .search-bar .form-control la barre de recherche globale, en pilule ; - .filter-location-field .form-control le filtre de lieu, en pilule. Elle gagne en revanche sur le défaut de Bootstrap, qui pèse pareil mais est chargé avant. Ne sont pas visés du tout : .form-check-input (case, radio), .form-switch, les ChoicePill et le Slider — ils ne portent pas ces classes. La densité vaut pour la SURFACE OÙ L'ON SAISIT, pas pour tout ce qui vit dans un formulaire. */ :where(.club-layout, .photographer-layout){ --field-radius: var(--sp-radius-md); } /* Les surfaces de saisie consomment cette valeur — y compris celles qui TIENNENT LIEU de champ sans en porter la classe : la zone qui affiche le fichier retenu, le conteneur qui dessine le champ à la place du select qu'il enveloppe. Écrite sur la seule classe des champs, la règle les oubliait, et elles restaient au coin d'accueil au milieu de vrais champs resserrés — 4px d'écart sur deux bords voisins, que l'œil relève aussitôt (fiche input, « ce qui tient lieu de champ suit la règle du champ »). Le préfixe est `--field-` et non `--sp-` : ce n'est pas un token du DS mais un véhicule d'implémentation, et les deux ne doivent pas se confondre dans la feuille. */ .form-control, .form-select, .cover-picker-name{ border-radius: var(--field-radius); } /* PANNEAU DE SUGGESTIONS d'un champ (adresse, ville). C'est le panneau de la SearchBar, pas un Dropdown : il ne règle rien, il montre ce qu'on a écrit — donc ni titre ni pied d'actions (fiche input, « un champ qui suggère ouvre le panneau de la recherche »). Surface flottante NUE : `bg.surface`, `radius.lg`, `shadow.pop` — l'ombre des surfaces qui s'ouvrent —, et SANS filet : l'ombre ou le filet, jamais les deux (fiche card). Il pend à `space.2` du champ, comme toute surface qui s'ouvre, au lieu de lui être collé. Ces règles vivent ici et non dans le contrôleur Stimulus, qui les posait en `style.cssText` avec des couleurs en dur (#dee2e6, #f8f9fa) : un panneau stylé en JavaScript échappe aux tokens, donc au thème, et personne ne le trouve en cherchant dans la feuille. */ /* L'ancre du panneau : c'est le conteneur du champ qui le porte. */ .places-anchor{ position: relative; } .places-suggestions{ position: absolute; top: calc(100% + var(--sp-space-2)); left: 0; right: 0; z-index: 1050; display: none; max-height: 60vh; overflow-y: auto; background-color: var(--sp-color-bg-surface); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-pop); } .places-suggestions.is-open{ display: block; } .places-suggestion{ display: flex; align-items: center; gap: var(--sp-space-3); padding: var(--sp-space-3) var(--sp-space-4); cursor: pointer; color: var(--sp-color-text-default); } /* Le glyphe d'une installation référencée ne doit pas se laisser écraser par un nom long. */ .places-suggestion-icon{ display: inline-flex; flex: 0 0 auto; color: var(--sp-color-text-brown); } /* En-tête de GROUPE, pas titre de panneau : il dit de quelle nature sont les lignes qui suivent — une installation référencée ou une adresse (fiche search-bar). Même traitement que les suggestions de la recherche globale, et il n'apparaît que si les deux groupes coexistent. */ .places-suggestions-title{ padding: var(--sp-space-3) var(--sp-space-4) var(--sp-space-1); font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-brown); } /* Survol et parcours au clavier sont le MÊME état : la ligne visée. Les distinguer ferait deux surlignages pour une seule notion, et le clavier hériterait du plus discret. */ .places-suggestion:hover, .places-suggestion.is-active{ background-color: var(--sp-color-bg-cream); } .places-suggestion:first-child{ border-top-left-radius: var(--sp-radius-lg); border-top-right-radius: var(--sp-radius-lg); } .places-suggestion:last-child{ border-bottom-left-radius: var(--sp-radius-lg); border-bottom-right-radius: var(--sp-radius-lg); } /* EN-TÊTE DE GROUPE : il mène la liste. Le navigateur le rend en gris, donc plus pâle que les options qu'il coiffe — hiérarchie exactement inversée, alors que c'est lui qu'on balaie pour se repérer sur cent options. Il reprend le ton du texte et se distingue par la GRAISSE, pas par la couleur : deux gris disent deux niveaux d'importance, une graisse dit deux natures — un titre et ses entrées (fiche select). */ .form-select optgroup{ color: var(--sp-color-text-default); font-weight: var(--sp-font-weight-title); } /* Les options sont les ENFANTS du groupe : elles héritent de sa graisse, et sans ce retour explicite la liste devient uniformément grasse — la distinction qu'on vient de créer disparaîtrait (fiche select, « les options héritent de leur optgroup »). */ .form-select optgroup option{ font-weight: var(--sp-font-weight-body); } /* Un textarea grandit sur plusieurs lignes : il ne prend pas la hauteur fixe des champs d'une ligne, mais garde le même filet, le même rayon et le même fond blanc (attribut `rows` pour la hauteur de départ). */ .photographer-layout textarea.form-control, .club-layout textarea.form-control{ height: auto; min-height: calc(52px + calc(var(--bs-border-width) * 2)); padding-top: var(--sp-space-3); padding-bottom: var(--sp-space-3); } /* Sélecteur de couverture : un champ qui porte le nom du fichier (mêmes filet, rayon, fond que les inputs texte) et le bouton ink « Choisir un fichier » à sa droite. Le sélecteur natif est masqué dans le bouton. */ .cover-picker { display: flex; align-items: stretch; gap: var(--sp-space-3); } .cover-picker-name { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; min-height: calc(52px + calc(var(--bs-border-width) * 2)); padding: 0 var(--sp-space-4); background-color: var(--sp-color-bg-surface); border: var(--bs-border-width) solid var(--sp-color-border-cream); color: var(--sp-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cover-picker-btn { flex: 0 0 auto; display: inline-flex; align-items: center; } /* `text.muted`, pas `bg.grey` : un token de SURFACE employé comme couleur de texte donnait un placeholder invisible (un gris de fond sur du blanc, ~1:1) sans qu'aucune règle n'ait l'air violée — les deux se ressemblent dans le code, jamais à l'écran (fiche input). */ .photographer-layout .form-control::placeholder, .club-layout .form-control::placeholder{ color: var(--sp-color-text-muted); opacity: 1; } /* DANS un label flottant, le placeholder doit rester TRANSPARENT : c'est le libellé flottant qui tient sa place au repos. La règle de placeholder visible ci-dessus le rendait lisible, et libellé flottant + placeholder se superposaient sur un champ vide (fiche input). Le placeholder reparaît au focus, quand le libellé remonte. */ .photographer-layout .form-floating > .form-control::placeholder, .club-layout .form-floating > .form-control::placeholder{ color: transparent; } /* Champ DATE (`.is-datefield`) : exception au repos ci-dessus. Le sélecteur (flatpickr) affiche toujours un gabarit « jj/mm/aaaa », le libellé ne peut donc pas lui servir de placeholder. On flotte le libellé en permanence et on garde le gabarit lisible dessous. Les valeurs de flottement sont celles de Bootstrap ; le champ réserve la place en haut pour le libellé remonté. */ .form-floating.is-datefield > label { opacity: .65; transform: scale(.85) translateY(-.5rem) translateX(.15rem); } .form-floating.is-datefield > .form-control { padding-top: 1.625rem; padding-bottom: .625rem; } .photographer-layout .form-floating.is-datefield > .form-control::placeholder, .club-layout .form-floating.is-datefield > .form-control::placeholder { color: var(--sp-color-text-muted); } /* LE FOND DU CHAMP NE CHANGE PAS AU FOCUS (fiche input). Ces mêmes sélecteurs teintaient le champ actif en bg.grey dans l'espace connecté — donc dans tous les formulaires du produit. Deux torts : le doublon (la bordure orange et l'anneau disent déjà où l'on est, et il n'y a qu'un champ focalisé par écran) et surtout l'inversion de sens — un neutre clair sous un contrôle dit le REPOS dans ce système (bg.control), si bien que le champ prenait l'aspect de ce qu'on ne touche pas au moment où l'on y écrit. La règle est supprimée, pas neutralisée : .form-control garde son bg.surface posé plus haut, focus compris. Elle emportait aussi la SearchBar au passage : .search-bar .form-control:focus pose un fond transparent (le verre porte le sien) à spécificité égale mais PLUS HAUT dans le fichier — une barre de recherche rencontrée dans l'espace connecté repassait donc au gris. */ .photographer-layout .form-control[type=file], .club-layout .form-control[type=file]{ line-height: 34px; } .photographer-layout .form-control.custom-upload-file-btn, .club-layout .form-control.custom-upload-file-btn { height: auto; min-height: auto; background-color: var(--bs-primary); border-color: var(--bs-primary); color: var(--sp-color-bg-surface); --bs-border-radius-sm: 5px; } /* Vich Image Preview - limit size for responsive */ .photographer-layout .vich-image img, .club-layout .vich-image img { max-width: 300px; max-height: 200px; width: auto; height: auto; object-fit: contain; border-radius: var(--bs-border-radius); } @media (max-width: 575px) { .photographer-layout .vich-image img, .club-layout .vich-image img { max-width: 100%; max-height: 150px; } } /* COMPONENTS */ /* Accordion */ .accordion { --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--bs-primary); --bs-accordion-btn-focus-box-shadow: none; } .accordion-button { font-size: 16px; font-weight: 600; } /* Alert */ .alert{ border: none; } .alert-success{ background-color: var(--success-light); color: var(--success); } .alert-success.border{ border-color: rgba(54, 168, 102, 0.22)!important; } .alert-info{ background-color: var(--info-light); color: var(--info); } .alert-light{ background-color: var(--light); color: var(--dark-grey); } .alert-warning{ background-color: var(--warning-light); color: var(--warning); } .alert-danger{ background-color: var(--danger-light); color: var(--danger); } /* Badges */ /* Badge : le libellé s'écrit comme il se lit — Inter, méta 13px, graisse de corps, sans capitales ni interlettrage (fiche badge) */ .badge { --bs-badge-font-size: var(--sp-font-size-meta); /* Padding vertical serré : le badge reste compact (fiche badge) */ --bs-badge-padding-y: var(--sp-space-1); --bs-badge-padding-x: var(--sp-space-2); --bs-badge-font-weight: var(--sp-font-weight-body); --bs-badge-border-radius: var(--sp-radius-sm); font-family: var(--sp-font-family-base), sans-serif; line-height: 1; } .badge-circle{ height: 28px; width: 28px; border-radius: 5rem; font-size: .8rem; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .badge-success{ background-color: var(--success-light); color: var(--success); } .badge-info{ background-color: var(--info-light); color: var(--info); } /* Ton neutral du DS : fond crème, texte ink */ /* Ton « neutral » de la fiche badge : creux crème (bg.sunken, #EFE9DD), texte ink. Pas bg.cream (#F5F3EB), trop proche du fond de page pour que l'étiquette se détache. */ .badge-light{ background-color: var(--sp-color-bg-sunken); color: var(--sp-color-text-default); } /* Ton live du DS : orange, évènement en direct / du jour */ .badge-live{ background-color: var(--sp-color-accent-selected); color: var(--sp-color-text-inverse); } /* Ton verre sombre du DS : compteurs et méta posés sur photo */ .badge-glass{ display: inline-flex; align-items: center; gap: 5px; /* Le voile PAR-DESSUS la teinte : le dégradé est une image de fond, la teinte la couleur qu'il recouvre — les deux se cumulent au lieu de se remplacer. */ background-color: var(--sp-glass-overlay-bg); background-image: var(--sp-glass-overlay-tint); color: var(--sp-color-text-inverse); border: 1px solid var(--sp-glass-overlay-border); box-shadow: var(--sp-glass-overlay-shadow); /* La saturation accompagne le flou : sans elle, un flou de 20px délave la photo dessous et le verre vire au gris — c'est ce qui distingue un vrai verre d'un rectangle translucide. */ backdrop-filter: blur(var(--sp-glass-blur)) saturate(var(--sp-glass-saturate)); -webkit-backdrop-filter: blur(var(--sp-glass-blur)) saturate(var(--sp-glass-saturate)); } /* Ton dark du DS : méta sur fond clair */ .badge-dark{ background-color: var(--sp-color-bg-dark); color: var(--sp-color-text-inverse); } /* Ton count du DS : pastille ronde blanche, chiffre ink (panier, cloche) */ .badge-count{ --bs-badge-border-radius: var(--sp-radius-full); min-width: 18px; height: 18px; --bs-badge-padding-y: 0; --bs-badge-padding-x: 5px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--sp-color-bg-surface); color: var(--sp-color-text-default); font-size: 11px; font-weight: var(--sp-font-weight-bold); } /* SportBadge : glyphe de sport sur carré arrondi teinté (designsystem/spicto/app/components/sport-badge.md) */ .sport-badge{ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 28%; background-color: var(--sp-color-accent-soft); color: var(--sp-color-accent-selected); } .sport-badge svg{ display: block; } .sport-badge-round{ border-radius: var(--sp-radius-full); } .sport-badge-cream{ background-color: var(--sp-color-bg-cream); color: var(--sp-color-text-brown); } .sport-badge-ink{ background-color: var(--sp-color-bg-dark); color: var(--sp-color-text-inverse); } .sport-badge-green{ background-color: color-mix(in srgb, var(--sp-color-feedback-success) 12%, var(--sp-color-cream-0)); color: var(--sp-color-feedback-success); } .sport-badge-blue{ background-color: color-mix(in srgb, var(--sp-color-feedback-info) 12%, var(--sp-color-cream-0)); color: var(--sp-color-feedback-info); } .sport-badge-sm{ width: 18px; height: 18px; } .sport-badge-sm svg{ width: 10px; height: 10px; } .sport-badge-md{ width: 40px; height: 40px; } .sport-badge-md svg{ width: 18px; height: 18px; } .sport-badge-lg{ width: 64px; height: 64px; } .sport-badge-lg svg{ width: 24px; height: 24px; } .sport-badge-fill{ width: 100%; height: 100%; } .sport-badge-fill svg{ width: 33%; height: 33%; } /* En-tête de section (DESIGNAPP) : titre h3 + icône à gauche, « Voir tout » ink à droite */ .sec-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-space-3); } .sec-header-title{ display: flex; align-items: center; gap: var(--sp-space-2); font-size: var(--sp-font-size-h3); font-weight: var(--sp-font-weight-title); } /* Dans un en-tête, l'espacement appartient au `.sec-header`, jamais au titre : posée sur un enfant de flex, une marge de titre rallongerait la ligne d'en-tête d'autant. Deux classes parce que `.photographer-layout h3` (0,1,1) impose encore sa marge de 16px aux h3 des espaces pro. Hors en-tête (checkout), le titre garde ses utilitaires de marge. */ .sec-header .sec-header-title{ margin: 0; } /* Le titre d'un bloc DANS une carte, et non d'une section : size.h4 (fiche dropzone). Il ne coiffe pas une part de l'écran mais un contenu à l'intérieur d'une carte — à size.h3 il pèserait autant que le titre de l'étape qui l'englobe. Ce n'est pas le mésusage que le tronc nomme trois fois : on ne rétrécit pas ici pour gagner de la place, mais parce que le bloc ne réclame pas le rang qu'il prenait. */ .sec-header-title-sub{ font-size: var(--sp-font-size-h4); } /* Décompte : le pendant du lien « Voir tout », quand la section montre tout */ /* Le décompte d'une section, et l'identification d'une carte de parcours (« Grind Séries · Dépôt 4 ») : même rendu, deux rôles. Les deux accompagnent sans porter (DESIGNAPP). */ .sec-header-count, .sec-header-context{ font-size: var(--sp-font-size-label); font-weight: var(--sp-font-weight-body); color: var(--sp-color-text-muted); } /* La phrase qui CADRE une section, sous l'en-tête et avant le premier champ : elle instruit, elle conditionne ou elle rassure. Ce n'est pas de la méta — le décompte accompagne le titre, celle-ci cadre ce qui vient après —, donc jamais muted : estomper reviendrait à parier qu'on la lira quand même. C'est la TAILLE qui la range sous le titre, pas la couleur (DESIGNAPP, et tronc « size.meta est une taille, pas un registre »). La mention fine d'un champ garde son muted, elle. */ .sec-note{ font-size: var(--sp-font-size-meta); color: var(--sp-color-text-default); } /* CHAMPS FACULTATIFS : un champ ne se dessine pas tant qu'on ne l'a pas demandé (DESIGNAPP). Les propositions en tête, les champs ouverts dessous — la liste du haut rétrécit pendant que celle du bas grandit, donc le point d'ajout ne bouge pas d'un ajout à l'autre. */ .field-offers{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-space-1); } /* La proposition. Gouttière horizontale nulle : sans surface, il n'y a rien dont se retirer, et le glyphe s'aligne ainsi sur le bord du texte qui la surmonte plutôt que de flotter à droite. */ .field-offer{ display: inline-flex; align-items: center; gap: var(--sp-space-2); padding-left: 0; padding-right: 0; } /* `hidden` doit gagner sur le `display` que ces deux règles posent : à spécificité égale, c'est la dernière déclarée qui l'emporterait, et la proposition cachée resterait visible. */ .field-offer[hidden], .field-item[hidden]{ display: none; } /* La gouttière est portée par les items, pas par un conteneur : la liste des champs ouverts est vide au premier passage, et un margin sur le conteneur y laisserait un blanc sans contenu. */ .field-item{ margin-top: var(--sp-space-3); } .field-row{ display: flex; align-items: center; gap: var(--sp-space-2); } /* Le champ prend la largeur ; `min-width: 0` l'autorise à se réduire — sans lui, la largeur minimale de l'input pousserait la croix hors de la carte sur une laize étroite. */ .field-row > .form-floating{ flex: 1 1 auto; min-width: 0; } /* Croix de retrait : IconButton variant ghost — icône seule, sans fond, pour une action de liste. La cible 44px vient de .btn-circle ; la couleur est celle du ghost (text.default). */ .field-row-remove{ color: var(--sp-color-text-default); } /* En-tête d'une carte de parcours : le seul en-tête suivi d'un filet. Il sépare l'identité de la carte, qui ne change pas d'une étape à l'autre, du contenu de l'étape, qui change à chaque écran (DESIGNAPP). Un en-tête de section ordinaire n'en porte pas. */ .sec-header--flow{ padding-bottom: var(--sp-space-4); border-bottom: 1px solid var(--sp-color-border-default); margin-bottom: var(--sp-space-4); } .sec-header-link{ font-size: var(--sp-font-size-label); font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); text-decoration: none; } /* Rail Live (DESIGNAPP, carrousel) : les cartes mises en avant défilent horizontalement, la suivante déborde du bord ; pastilles indicatrices. `.pro-rail` est la même piste : elle partage la mécanique et ne garde en propre que les largeurs de tuile (voir « Spicto Pro : le rail des avantages » plus bas). */ .event-rail, .pro-rail{ display: flex; /* Hauteurs égales : les tuiles côte à côte s'étirent sur la plus haute (fiche event-card-highlighted). C'est le défaut flex, rendu explicite. */ align-items: stretch; gap: var(--sp-space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--sp-space-1); } .event-rail::-webkit-scrollbar, .pro-rail::-webkit-scrollbar{ display: none; } /* Mobile : une carte presque pleine largeur, 10% de la suivante coupée net. Elle est atténuée : elle s'annonce sans se donner (fiche event-rail). */ @media (max-width: 991.98px) { .event-rail > *, .pro-rail > *{ flex: 0 0 calc((100% - var(--sp-space-3)) / 1.1); } .event-rail > *:not(.is-current){ opacity: .4; transition: opacity var(--sp-duration-base) var(--sp-easing-standard); } /* Sous le seuil (1 carte) : pas de piste, la carte prend toute la largeur */ .event-rail-section[data-items="1"] .event-rail > *{ flex-basis: 100%; opacity: 1; } /* Plafond mobile : 3 cartes (fiche event-rail). Le serveur sert le plafond desktop — il ignore le viewport — et les deux dernières sont retenues ici. Le rail reste un extrait : au-delà, c'est « Voir tout ». */ .event-rail > *:nth-child(n+4){ display: none; } } /* Desktop : trois cartes, puis 50% de la quatrième, à pleine opacité */ @media (min-width: 992px) { .event-rail > *{ flex: 0 0 calc((100% - 3 * var(--sp-space-3)) / 3.5); } /* Sous le seuil (≤ 3 cartes), aucune surcharge : les cartes gardent la largeur qu'elles auraient eue dans la piste et s'alignent à gauche, le reste de la ligne demeure vide. Une carte n'a pas de raison de grossir parce qu'elle est seule (fiche event-rail) — les étaler donnait une tuile de 1215px de large à une carte seule. Sur mobile la règle ne s'applique pas : la carte y occupe déjà presque toute la largeur. */ } @media (prefers-reduced-motion: reduce) { .event-rail > *:not(.is-current){ transition: none; } } /* EventCardHighlighted DS : plein cadre 3:2, scrim bas-vers-haut, texte blanc (designsystem/spicto/app/components/event-card-highlighted.md) */ .event-highlighted{ position: relative; /* Colonne flex, haut et bas répartis : le badge/compteur et le bloc de texte occupent deux zones séparées de la tuile — ils ne se chevauchent jamais, quel que soit le contenu (fiche event-card-highlighted, règle « aucun chevauchement »). */ display: flex; flex-direction: column; justify-content: space-between; /* 3:2 TENU au redimensionnement : le cadre ne s'étire pas pour faire de la place, c'est le contenu qui s'y adapte (titre borné à deux lignes). Une tuile qui grandit avec son texte casse la rangée — ses voisines s'alignent sur la plus haute et cessent d'être au format. Le plancher de 248px est la seule dérogation, et seulement vers le bas (fiche event-card-highlighted). */ aspect-ratio: 3 / 2; min-height: 248px; /* Le plancher ne joue que vers le BAS (fiche event-card-highlighted, « la seule dérogation au ratio, et elle ne joue que vers le bas »). Sans cette borne il joue aussi vers la droite : dans une colonne plus étroite que 372px, `aspect-ratio` recalcule la LARGEUR depuis les 248px du plancher, la tuile déborde de son conteneur et la page part en défilement horizontal. En piste (`event-rail`) le débord ne se voyait pas — les cartes y ont une base flex explicite. Il apparaît partout où la tuile est un bloc ordinaire : la grille de gestion, celle de « Récent ». */ max-width: 100%; border-radius: var(--sp-radius-xl); overflow: hidden; scroll-snap-align: start; background-color: var(--sp-color-bg-dark); text-decoration: none; transition: box-shadow var(--sp-duration-fast) var(--sp-easing-standard); } /* L'ombre seule : la tuile ne se déplace pas. Elle porte une photographie plein cadre, et déplacer la surface déplace l'image — sur une grille, le moindre passage de souris ferait sautiller la vignette qu'on est en train de lire (tronc DESIGN.md, Motion). */ .event-highlighted:hover{ box-shadow: var(--sp-shadow-md); } .event-highlighted:focus-visible{ outline: none; box-shadow: var(--sp-shadow-ring); } @media (prefers-reduced-motion: reduce) { .event-highlighted{ transition: none; } } .event-highlighted-cover{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.9); z-index: 0; } /* Le haut (badge de date + compteur) est un enfant en flux, ancré en haut de la colonne : il ne recouvre plus le scrim, la répartition space-between les sépare. */ .event-highlighted-top{ position: relative; z-index: 1; padding: var(--sp-space-3); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-space-2); } /* Le badge d'échéance et le compteur partagent une ligne, ils doivent donc partager une hauteur. Le ton verre porte un liseré d'1px, les tons pleins n'en ont pas : sans cette bordure transparente, le `danger` est 2px plus court que le compteur d'en face — et l'écart se voit d'une carte à l'autre, puisque dans son autre ton le même badge s'aligne au pixel. `:not(.badge-glass)` pour ne pas effacer le liseré du verre, qui lui est structurel. */ .event-highlighted-top .badge:not(.badge-glass){ border: 1px solid transparent; /* Et le même décollement que le verre d'en face : c'est la photo dessous qui l'exige, pas la matière du badge (cf. `glass.overlay.lift`). */ box-shadow: var(--sp-glass-overlay-lift); } /* Variant short : la même tuile, en dense. Quatre écarts, pas un de plus (fiche event-card-highlighted, variant `short`). */ /* 1. aucune hauteur imposée : ni 4:3, ni plancher 248px, le texte donne la hauteur */ .event-highlighted-short{ aspect-ratio: auto; min-height: auto; } /* 2. le titre est clampé à 1 seule ligne (au lieu de 2) : la densité prime */ .event-highlighted-short .event-highlighted-title{ -webkit-line-clamp: 1; line-clamp: 1; } /* La ligne d'en-tête (sport + badge) respire au-dessus du bloc titre/méta : un espace l'en sépare, elle ne lui est pas collée (fiche event-card-highlighted, variant short). */ .event-highlighted-short .event-highlighted-sport-line{ margin-bottom: var(--sp-space-2); } /* 3. le badge de date quitte le haut (désormais vide) pour la ligne du sport, en vis-à-vis */ .event-highlighted-short .event-highlighted-top{ display: none; } /* Le scrim est un enfant en flux, ancré en bas de la colonne (fiche event-card-highlighted). Son dégradé couvre son propre bloc de texte ; jamais superposé au haut. */ .event-highlighted-scrim{ position: relative; z-index: 1; padding: var(--sp-space-4); display: flex; flex-direction: column; gap: 2px; background: linear-gradient(to top, var(--sp-color-overlay-scrim), transparent); color: var(--sp-color-text-inverse); } /* Variant header (fiche event-card-highlighted, variant `header`) : coiffe la page évènement. Comme short — hauteur libre, scrim relatif —, mais pleine largeur, une hauteur minimale pour que la photo respire, et les actions de page dans les coins hauts. Ce n'est pas un lien : c'est un
, il ne défile pas plus qu'une autre section (plus de sticky). */ .event-highlighted-header{ /* flex colonne, texte poussé en bas : les actions (absolues) restent en haut, le scrim descend au ras du bord bas, son dégradé couvre alors toute la moitié basse sans laisser de photo nue en dessous. */ display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: auto; min-height: 248px; } .event-highlighted-header .event-highlighted-scrim{ position: relative; /* le dégradé démarre plus haut pour couvrir généreusement, et laisse la place aux actions au-dessus du texte */ padding-top: var(--sp-space-16); } /* Exception assumée au space.4 des cartes photo (fiche card, fiche event-card-highlighted) : le header qui coiffe VRAIMENT la page publique de l'évènement — et lui seul, via --page — ouvre sa gouttière de scrim à space.6 (24px). Sur son propre écran plein cadre il porte son titre en display (h1/40px), qu'un scrim à 16px lirait à l'étroit. Les reprises du même chrome (aside de dépôt, aperçu de création, en --labelled) gardent le space.4. Le haut garde sa réserve (space.16) pour dégager les actions de coin — seuls les trois autres côtés à 24px. */ .event-highlighted-header--page .event-highlighted-scrim{ padding: var(--sp-space-16) var(--sp-space-6) var(--sp-space-6); } /* Actions de page dans les coins hauts, sur le scrim : retour à gauche, menu/partage à droite. IconButton clairs sur la photo sombre. */ .event-highlighted-header .event-highlighted-actions{ position: absolute; top: var(--sp-space-4); left: var(--sp-space-4); right: var(--sp-space-4); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-2); } /* Deux retours, deux formes (fiche event-card-highlighted) : le DISQUE revient d'un cran, le LIBELLÉ à côté quitte le parcours pour un endroit nommé. Ils se distinguent par la forme, pas par la couleur — l'un est un disque sans mot, l'autre un mot sans disque. */ .event-back{ display: inline-flex; align-items: center; gap: var(--sp-space-3); min-width: 0; } /* Une MÉTA, pas un titre (fiche event-card-highlighted) : le libellé partage la surface avec le nom de l'évènement, qui est le sujet de la carte, et un chemin de retour ne pèse pas autant que ce sur quoi on travaille. Il gardait `font.size.16` — une PRIMITIVE, que le DS interdit à un composant de lire — en graisse de titre ; il passe à size.meta / weight.body. Le blanc plein ne suit pas la descente : c'est la taille qui le range, pas la couleur, et il doit rester lisible sur la photo. */ .event-back-label{ color: var(--sp-color-text-inverse); font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-body); text-decoration: none; /* Le libellé cède avant la carte : sur une colonne étroite il se tronque plutôt que de pousser le badge de date hors du cadre. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event-back-label:hover{ color: var(--sp-color-text-inverse); text-decoration: underline; } /* Scrim HAUT, et seulement quand une action de coin porte un libellé (fiche event-card-highlighted). Un disque verre se suffit à lui-même ; une phrase posée sur la photo n'a rien sous elle, et sa lisibilité dépendrait du cliché. Symétrique de celui du bas, borné à la hauteur de la ligne d'actions : assombrir plus mangerait la photo par les deux bouts. */ .event-highlighted-header--labelled::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--sp-control-icon-button) + var(--sp-space-8)); z-index: 1; background: linear-gradient(to bottom, var(--sp-color-overlay-scrim), transparent); pointer-events: none; } .event-highlighted-header .event-highlighted-actions-group{ display: flex; align-items: center; gap: var(--sp-space-2); } /* Ligne du sport : en short, le sport et le badge de date s'y font face (space-between) ; en version pleine, le sport y est seul, donc calé à gauche (fiche event-card-highlighted). */ .event-highlighted-sport-line{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-2); } .event-highlighted-sport{ display: flex; align-items: center; gap: 6px; font-size: var(--sp-font-size-12); font-weight: var(--sp-font-weight-title); } .event-highlighted-title{ /* Blanc explicite : le scrim le donne par héritage au span du composant, mais un

(variant header) a sa couleur de base et casserait l'héritage. Tout le texte du scrim est blanc (fiche event-card-highlighted). */ color: var(--sp-color-text-inverse); font-size: var(--sp-font-size-h3); font-weight: var(--sp-font-weight-title); letter-spacing: var(--sp-font-tracking-tight); margin: 0; /* 2 lignes maximum, tronqué proprement par une ellipsis (fiche event-card-highlighted) : borne le bloc de texte et le tient à distance des superpositions du haut. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* Header : la page de l'évènement montre son titre en entier — pas de troncature sur sa propre page (le clamp 2 lignes ne vaut que pour les tuiles en liste/rail). */ .event-highlighted-header .event-highlighted-title{ display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; } /* Display de page (h1, 40px) réservé au titre qui EST le hero : le

de la vraie page évènement, unique titre de document de l'écran. Le même chrome header est réutilisé en aside de dépôt et en aperçu de création, mais avec un

— pas un second h1 —, et ce titre-là reste à l'échelle carte (h3, règle de base). Le poids `weight.title` (Semibold 600) et Inter sont déjà hérités de la base : seule la taille change ici. Et seulement sur DESKTOP (mobile-first, fiche event-card-highlighted) : sur mobile la card prend toute la largeur et 40px sur la photo écraserait le scrim et casserait sur plusieurs lignes. Sous 992px, aucune règle ici — le titre retombe sur l'échelle de base (h3, 20px). */ @media (min-width: 992px) { .event-highlighted-header h1.event-highlighted-title{ font-size: var(--sp-font-size-h1); } } .event-highlighted-meta{ font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-body); } /* Header : « aujourd'hui » remplace la date et passe à l'orange de marque (fiche event-card-highlighted, variant header). */ /* Variant `manage` : l'état temporel n'est plus un badge de coin, il s'écrit dans la méta entre le lieu et la date, dans la couleur de son état (fiche event-card-highlighted). Un badge signale une exception ; sur « Mes évènements » toutes les tuiles en portent un, et ce qui est partout ne signale plus rien. Seul endroit du système où plusieurs couleurs se posent sur un scrim : la méta n'y dit plus une date mais un STATUT, qu'on veut balayer sans lire. Les trois tons y tiennent l'AA — il n'y a pas de quatrième ton parce que `feedback.warning` n'a pas de variante lisible sur ce sol (cf. tronc) ; l'échéance parle donc le rouge de l'expiration, dont elle est le prélude. */ .event-highlighted-when{ font-weight: var(--sp-font-weight-title); } .event-highlighted-when--now{ color: var(--sp-color-accent-selected); } /* Le vert clair, pas le vert-sarcelle de feedback.success : celui-ci disparaît sur un scrim. Le rôle est emprunté — il ne dit pas une réussite, il dit ce qui est encore devant. */ .event-highlighted-when--future{ color: var(--sp-color-feedback-success-fill); } /* La variante claire du rouge, pas `feedback.danger` : sur un scrim, red.600 tombe à 2,59:1 et passe pour du brun (cf. tronc, délégation selon la surface). */ .event-highlighted-when--danger{ color: var(--sp-color-feedback-danger-on-dark); } /* La plage se dit avec la flèche du système, comme le résumé « début → fin » du Calendar (fiche calendar) : le tiret est écarté des contenus, et deux dates accolées se liraient comme deux évènements. L'inline-flex n'est là que pour aligner le glyphe sur la ligne de texte, sans nudge en dur. */ .event-highlighted-range{ display: inline-flex; align-items: center; gap: var(--sp-space-1); } /* --- EventRail : commandes et repères (fiche event-rail) ------------------- Les sélecteurs passent par .event-rail-section : ils l'emportent sur .btn-circle sans dépendre de l'ordre du fichier. Chaque commande ne sert qu'un support : les pastilles le doigt, les chevrons la souris — jamais les deux ensemble. */ .event-rail-viewport{ position: relative; } /* Pastilles : mobile seulement */ .event-rail-section .rail-dots{ display: flex; gap: 6px; justify-content: center; padding-top: var(--sp-space-3); } .rail-dot{ width: var(--sp-carousel-dot); height: var(--sp-carousel-dot); border-radius: var(--sp-radius-full); background-color: var(--sp-color-border-cream); } .rail-dot.active{ background-color: var(--sp-color-accent-selected); } /* Chevrons : desktop seulement */ .event-rail-section .rail-control{ display: none; } @media (min-width: 992px) { .event-rail-section .rail-dots{ display: none; } .event-rail-section .rail-control:not(.d-none){ display: inline-flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; box-shadow: var(--sp-shadow-md); } /* Une commande ne se dérobe pas sous le doigt : pas de press ici */ .event-rail-section .rail-control:not(:disabled):active{ transform: translateY(-50%); } /* La piste court désormais jusqu'aux bords de la Card : les chevrons se calent dans la gouttière rendue à la piste, et gardent la place qu'ils occupaient (12px du bord de la Card) — sans ce report, ils sortiraient de la Card. */ .event-rail-section .rail-control-prev{ left: var(--sp-space-3); } .event-rail-section .rail-control-next{ right: var(--sp-space-3); } } /* Pastilles indicatrices du rail : active orange, inactives filet chaud */ /* Avatar DS (designsystem/spicto/app/components/avatar.md) : rond, photo cover, repli en initiales crème/brun, jamais d'anneau orange décoratif */ .avatar{ display: inline-flex; flex-shrink: 0; border-radius: var(--sp-radius-full); overflow: hidden; } /* xs : la seule taille qui se pose DANS une ligne de texte (fiche avatar) */ .avatar-xs{ width: var(--sp-avatar-xs); height: var(--sp-avatar-xs); } .avatar-sm{ width: var(--sp-avatar-sm); height: var(--sp-avatar-sm); } .avatar-md{ width: var(--sp-avatar-md); height: var(--sp-avatar-md); } /* lg et xl : la personne est le sujet de la surface (Card variant `photo`). Le même rôle à deux dispositions — lg quand le portrait est AU-DESSUS du nom et partage sa hauteur, xl quand il est À CÔTÉ et que la hauteur se libère (fiche avatar). */ .avatar-lg{ width: var(--sp-avatar-lg); height: var(--sp-avatar-lg); } .avatar-xl{ width: var(--sp-avatar-xl); height: var(--sp-avatar-xl); } /* Ce qui garantit le cercle en rangée souple est déjà là : `flex-shrink: 0` sur `.avatar` l'empêche d'être comprimé, et sa hauteur EXPLICITE l'empêche d'être étiré (l'étirement transverse d'un flex ne s'applique qu'à une taille `auto`). Rien à ajouter — surtout pas un `align-self` global, qui toucherait tous les avatars du produit pour un cas de carte. */ /* La photo remplit le cercle sans être ni étirée ni coupée au bord : cover, centrée. */ .avatar-img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .avatar-fallback{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--sp-color-bg-cream); color: var(--sp-color-text-brown); font-size: var(--sp-font-size-12); font-weight: var(--sp-font-weight-title); letter-spacing: 0; } /* Portrait par défaut (fiche avatar, variant `default`) : le glyphe de personne sur l'un des quatre tons décoratifs fermés du DS. Ce sont exactement les tons de SportBadge moins le pêche — l'orange reste l'accent d'action, et le pêche est déjà ce que porte un évènement sans photo. */ .avatar-default{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Le glyphe se dimensionne en proportion du cercle : les cinq tailles d'avatar le traversent. */ .avatar-default svg{ width: 55%; height: 55%; } .avatar-default--cream{ background-color: var(--sp-color-bg-cream); color: var(--sp-color-text-brown); } .avatar-default--ink{ background-color: var(--sp-color-bg-dark); color: var(--sp-color-text-inverse); } .avatar-default--green{ background-color: color-mix(in srgb, var(--sp-color-feedback-success) 12%, var(--sp-color-cream-0)); color: var(--sp-color-feedback-success); } .avatar-default--blue{ background-color: color-mix(in srgb, var(--sp-color-feedback-info) 12%, var(--sp-color-cream-0)); color: var(--sp-color-feedback-info); } /* ListItem DS (designsystem/spicto/app/components/list-item.md) : rôles de texte de la ligne de liste canonique ; la pastille de sport chevauche le coin haut-droit de la vignette */ .list-item-title{ font-size: var(--sp-font-size-16); font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); } .list-item-detail{ font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-body); color: var(--sp-color-text-default); } .list-item-accent{ color: var(--sp-color-accent-selected); } /* Un rail posé DANS une carte : la carte lui rend sa gouttière horizontale, pour que la tuile qui déborde soit coupée par le bord de la carte et non arrêtée 24px avant — c'est la coupe au bord qui dit que ça continue. La gouttière n'est pas supprimée, elle change de porteur (fiche card, et event-rail « Posé sur une Card »). */ .event-rail-section--in-card{ margin-left: calc(-1 * var(--sp-space-6)); margin-right: calc(-1 * var(--sp-space-6)); } .event-rail-section--in-card .event-rail{ padding-left: var(--sp-space-6); padding-right: var(--sp-space-6); scroll-padding-left: var(--sp-space-6); } /* --- Spicto Pro : le rail des avantages (fiche event-rail) --------------------------------- La piste et sa largeur mobile sont celles de `.event-rail`, déclarées avec elle. Ne restent ici que les deux écarts : le calage des tuiles, que l'EventRail porte sur sa carte, et deux avantages et demi sur desktop au lieu de trois et demi. Pas de plafond de cartes non plus : les avantages sont cinq et se comptent tous — en retenir un au-delà de trois ferait disparaître celui qu'on vient de nommer. Les commandes (chevrons, pastilles) restent celles du rail, d'où le `.event-rail-section` qui les porte. */ .pro-rail > *{ scroll-snap-align: start; } /* Le rail des avantages vit toujours dans une carte : la gouttière rendue par `--in-card` est écrite pour `.event-rail`, la piste Pro la reprend ici. */ .event-rail-section--in-card .pro-rail{ padding-left: var(--sp-space-6); padding-right: var(--sp-space-6); scroll-padding-left: var(--sp-space-6); } @media (min-width: 992px) { .pro-rail > *{ flex: 0 0 calc((100% - 2 * var(--sp-space-3)) / 2.5); } } /* Les trois montants d'un assujetti sur une seule ligne, séparés comme de la méta : HT et TVA accompagnent, seul le TTC est le montant (DESIGN, « Nombres et méta »). */ .vat-amounts{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-space-2); font-size: var(--sp-font-size-meta); color: var(--sp-color-text-muted); } /* Le montant qu'on paie sort du registre secondaire : HT et TVA accompagnent, lui porte (DESIGN, « size.meta est une taille, pas un registre » — le muted ne se déduit pas de la taille, et une somme à débiter ne s'estompe pas). */ .vat-amounts-total{ font-size: var(--sp-font-size-body); color: var(--sp-color-text-default); } /* Une tuile qui porte l'action de l'écran : l'action se pose À CÔTÉ du lien, superposée à la tuile — la tuile EST un lien, et un bouton dans un lien n'est ni valide ni atteignable (fiche event-card-highlighted). Elle occupe la place du compteur, jamais celle du texte. */ .event-highlighted-wrap{ position: relative; height: 100%; } .event-highlighted-action{ position: absolute; top: var(--sp-space-3); right: var(--sp-space-3); z-index: 2; } /* Variant `manage` (fiche event-card-highlighted) : sur un écran de gestion, les actions descendent en barre au pied. Le coin haut droit tient UNE action ; ici il y en a jusqu'à trois, et trois boutons empilés dans un coin recouvriraient la photographie qui sert justement à reconnaître sa propre sortie parmi trente. Elle se range dans la GOUTTIÈRE DE CARTE (space.4) sur ses trois côtés, et l'occupe entièrement : le premier bouton commence exactement sous le titre, le dernier finit sous la fin de la méta. Sport, titre, méta et actions forment une seule colonne — un retrait propre, fût-il de 4px, se lirait comme un défaut de montage (fiche event-card-highlighted). */ .event-highlighted-action--bar{ top: auto; left: var(--sp-space-4); right: var(--sp-space-4); bottom: var(--sp-space-4); display: flex; align-items: center; /* Plus large que la gouttière interne d'un bouton : deux commandes, pas un contrôle segmenté (fiche). */ gap: var(--sp-space-3); } /* « Aucun chevauchement » (fiche) : c'est le TEXTE qui remonte pour laisser la barre, jamais l'action qui descend sur lui. La réserve vaut la hauteur d'un bouton `sm` (36px : gouttière verticale, filet et hauteur de ligne — aucun token ne la porte) plus la gouttière de carte au-dessus et en dessous. */ .event-highlighted-manage .event-highlighted-scrim{ padding-bottom: calc(var(--sp-space-4) * 2 + 36px); } /* Le bouton qui déborde (« Modifier », « 923 photos publiées ») prend la place disponible ; celui qui dépose garde sa largeur — c'est lui qu'on vise, il ne doit pas se déplacer d'une tuile à l'autre selon la longueur du voisin. */ .event-highlighted-action--bar .btn{ min-width: 0; } .event-highlighted-action--bar .btn-grow{ flex: 1 1 auto; } /* Deux chemins vers la même fin : un filet portant le mot « ou ». Sans lui, les deux cartes se lisent comme deux étapes à suivre l'une après l'autre (DESIGNAPP). */ .path-separator{ display: flex; align-items: center; gap: var(--sp-space-4); color: var(--sp-color-text-brown); } .path-separator::before, .path-separator::after{ content: ""; flex: 1; border-top: 1px solid var(--sp-color-border-default); } /* Champ qui cherche : toujours un pill, loupe de tête (fiche input, variant `search`). Distinct de la SearchBar globale, qui ajoute au pill son traitement liquid glass. */ .input-search{ position: relative; display: flex; align-items: center; } .input-search .form-control{ padding-left: var(--sp-space-10); padding-right: var(--sp-space-10); border-radius: var(--sp-radius-full); border-color: var(--sp-color-border-cream); min-height: 44px; } .input-search-icon, .input-search-clear{ position: absolute; display: inline-flex; align-items: center; color: var(--sp-color-text-muted); } .input-search-icon{ left: var(--sp-space-4); pointer-events: none; } .input-search-clear{ right: var(--sp-space-4); color: var(--sp-color-text-default); } /* Le champ « dossard » de la frise d'un évènement : un champ qui cherche (fiche input, variant `search`), posé dans le panneau de sa chip. Il prend toute la largeur du panneau. */ .event-bib-search{ width: 100%; } .event-bib-search .input-search{ width: 100%; } /* Ligne d'évènement dont le dépôt n'est pas encore ouvert : montrée inerte plutôt que cachée — la cacher pousse à créer un doublon (DESIGNAPP, « Choisir un évènement »). L'estompe dit l'indisponibilité, la mention en dit la DATE : la couleur seule ne porte jamais l'info. */ .list-item--disabled{ opacity: .55; } /* L'action de ligne fournie par l'écran s'aligne en haut à droite, comme l'IconButton du composant (fiche list-item). */ .list-item-action-btn{ align-self: flex-start; flex-shrink: 0; } .list-item-note{ align-self: flex-start; flex-shrink: 0; font-size: var(--sp-font-size-meta); color: var(--sp-color-text-muted); } /* Variant `agenda` : le sport écrit en toutes lettres au-dessus du titre, précédé de son glyphe. Rôle de méta (13px/600), pas une taille inventée — dans une frise, chaque ligne est isolée et le sport est ce qui distingue deux évènements (fiche list-item). */ .list-item-sport{ display: flex; align-items: center; gap: var(--sp-space-2); font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); } .list-item-meta{ font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); } .list-item-thumb{ position: relative; border-radius: var(--sp-radius-md); } .list-item-thumb .ratio, .list-item-thumb .thumbnail-wrapper{ border-radius: var(--sp-radius-md); overflow: hidden; } .list-item-thumb > .sport-badge:not(.sport-badge-fill){ position: absolute; top: -6px; right: -6px; z-index: 2; } /* Sections sur desktop : le contenu (hors en-tête) est posé sur une Card ; sur mobile il court à même le fond (DESIGNAPP, « Sections sur desktop ») */ @media (min-width: 992px) { .section-surface{ background-color: var(--sp-color-bg-surface); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-sm); padding: var(--sp-space-6); /* la gouttière de la Card (fiche card) */ } /* Une Card qui porte un rail ne borne pas sa piste (fiche event-rail) : la gouttière passe à la piste elle-même. L'item qui déborde est alors coupé par le bord de la Card, et non arrêté 24px avant — c'est la coupe au bord qui dit que ça continue. La gouttière défile avec la piste : après navigation, c'est l'item de gauche qui est coupé au bord, sans qu'aucune valeur ait à changer. Les deux classes portent le même élément : ce sélecteur l'emporte par sa spécificité (0,2,0) et non par sa place dans le fichier — l'ordre seul avait déjà rendu muettes les commandes du rail. */ .section-surface.event-rail-section{ padding-left: 0; padding-right: 0; } .event-rail-section .event-rail{ padding-left: var(--sp-space-6); padding-right: var(--sp-space-6); /* sans quoi le calage ramène la première carte au bord et mange la gouttière */ scroll-padding-left: var(--sp-space-6); } } /* Grille de ListItem : 1 colonne sur mobile, 3 à parts égales sur desktop, gouttière space.3 dans les deux sens (fiche list-item) */ .list-item-grid{ --bs-gutter-x: var(--sp-space-3); --bs-gutter-y: var(--sp-space-3); } /* ListItem : la ligne de liste canonique (fiche list-item). Vignette 72px, bloc de texte centré et aéré, action de fin de ligne alignée en haut. Le séparateur court sur la largeur du bloc de texte ; sur le dernier item, sur toute la largeur. */ .list-item{ position: relative; display: flex; align-items: center; gap: var(--sp-space-4); padding-top: var(--sp-space-4); padding-bottom: var(--sp-space-4); } .list-item .list-item-thumb{ width: 72px; height: 72px; flex-shrink: 0; } .list-item-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; /* interligne confortable entre les rôles (fiche list-item) */ } .list-item:not(:last-child)::after{ content: ''; position: absolute; bottom: 0; left: calc(72px + var(--sp-space-4)); right: 0; border-bottom: 1px solid var(--sp-color-border-default); } .list-item:last-child{ border-bottom: 1px solid var(--sp-color-border-default); } /* Grille (desktop) : le filet sépare les rangées, la dernière n'en porte donc pas — il ne séparerait plus rien (fiche list-item). Le filet passe sous l'item de la rangée suivante plutôt qu'au-dessus de celui de la rangée précédente : la dernière rangée n'est pas désignable en CSS — un ad-slot pleine ligne décale les rangées, et le défilement infini la déplace à chaque page — là où la première rangée, elle, est toujours les trois premiers items. On retire donc le filet de tous, et on le rend à tout ce qui n'est pas la première rangée. */ @media (min-width: 992px) { /* Les deux filets de la liste verticale sont neutralisés : lequel s'affiche dépend de la place de l'item dans sa colonne, or la modale d'abonnement y traîne comme frère — un même item porte donc le ::after ou le border-bottom selon qu'on lui passe showSubscription. En grille, le filet appartient à la rangée, pas à ça. */ .list-item-grid > .col .list-item{ border-bottom: 0; } .list-item-grid > .col .list-item::after{ content: none; } /* Rendu à toute rangée sauf la première, au-dessus de l'item, aligné après la vignette comme dans la liste verticale. */ .list-item-grid > .col:not(:nth-child(-n+3)) .list-item::after{ content: ''; position: absolute; top: 0; bottom: auto; left: calc(72px + var(--sp-space-4)); right: 0; border-top: 1px solid var(--sp-color-border-default); border-bottom: 0; } } .list-item .list-item-action{ position: relative; z-index: 2; align-self: flex-start; color: var(--sp-color-text-default); } /* AdSlot DS (designsystem/spicto/app/components/ad-slot.md) : encart publicitaire identifié, surface pêche pâle, jamais l'apparence d'une carte de contenu */ .ad-slot{ background-color: var(--sp-color-accent-softer); border-radius: var(--sp-radius-lg); padding: var(--sp-space-4); text-align: center; } .ad-slot-label{ display: block; color: var(--sp-color-action-marketing); font-size: var(--sp-font-size-12); font-weight: var(--sp-font-weight-title); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--sp-space-2); } /* PhotoGallery DS (designsystem/spicto/app/components/photo-gallery.md) : tuiles carrées, coins radius.md, gap 16px issu de l'échelle */ .photo-gallery{ --bs-gutter-x: var(--sp-space-4); --bs-gutter-y: var(--sp-space-4); } .photo-gallery .ratio-1x1{ border-radius: var(--sp-radius-md); overflow: hidden; } .photo-gallery a{ display: block; border-radius: var(--sp-radius-md); } .photo-gallery a:focus-visible{ outline: none; box-shadow: var(--sp-shadow-ring); } /* Tuile « +N » : photo réelle sous voile sombre, nombre restant en blanc */ .photo-gallery-more-overlay{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: var(--sp-color-overlay-scrim); color: var(--sp-color-text-inverse); font-size: var(--sp-font-size-h3); font-weight: var(--sp-font-weight-title); border-radius: var(--sp-radius-md); } /* Timeline DS (designsystem/spicto/app/components/timeline.md) : frise verticale des journées d'un évènement. Rail continu chaud, un nœud par journée (pastille + en-tête + grille), nœud courant en orange, nœud « + » final pour les photos à venir. */ /* Carte de section d'une page évènement, mais sur DESKTOP seulement (mobile-first, DESIGNAPP) : la galerie en frise, et les deux blocs de l'écran « sans photos » (Photos, Photographes). Sur mobile, aucune règle : le contenu reste sur le fond crème, pleine largeur — la photo est la vedette, une carte la rognerait. À partir de 992px, mêmes valeurs qu'une carte de section (fiche card : bg.surface, radius.lg, space.6, shadow.sm) : si ces tokens bougent dans .card, les répercuter ici. Une seule classe pour ne pas fabriquer un second langage de carte. */ @media (min-width: 992px) { .event-section-card{ background-color: var(--sp-color-bg-surface); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-sm); padding: var(--sp-space-6); } } /* Zone AU REPOS — à ne pas confondre avec une zone EN ATTENTE (DESIGNAPP, zone « Téléchargements » du dépôt). Le pointillé du produit dit qu'un contenu VIENDRA là : une journée de frise qui recevra ses photos, un album qu'on va créer. Ici rien n'est en route et rien n'est promis — la zone garde seulement la place de ce qui viendra SI l'on dépose. D'où le filet continu, aucun aplat (le fond de la page traverse), et la hauteur qui réserve l'emplacement des cartes de transfert. Le texte est en text.brown et non en text.muted : ce gris-là est calculé pour le blanc, et la zone est posée sur le crème de la page (DESIGNAPP, « Bordures et séparateurs : c'est le SOL »). Même raison pour le filet, chaud lui aussi. */ .idle-panel{ display: flex; align-items: center; justify-content: center; min-height: 160px; padding: var(--sp-space-6); border: var(--sp-border-width-default) solid var(--sp-color-border-cream); border-radius: var(--sp-radius-lg); text-align: center; } .idle-panel-text{ color: var(--sp-color-text-brown); } /* État « sans photos » d'un évènement (DESIGNAPP, « Un évènement sans photos »). Encart d'attente en pointillé chaud (border.cream), texte muted centré : le pointillé dit l'attente, une surface pleine dirait un contenu — même langage que la journée `awaiting` de la frise. */ .event-empty-panel{ display: flex; align-items: center; justify-content: center; min-height: 220px; padding: var(--sp-space-6); border: 1px dashed var(--sp-color-border-cream); border-radius: var(--sp-radius-lg); text-align: center; } .event-empty-panel-text{ color: var(--sp-color-text-muted); } /* Carte d'un photographe inscrit : filet chaud, radius, pas d'ombre (surface posée sur la colonne). La carte de l'utilisateur courant se réchauffe en crème et porte le badge « Moi ». */ .event-photographer-card{ position: relative; padding: var(--sp-space-3); border: 1px solid var(--sp-color-border-default); border-radius: var(--sp-radius-lg); background-color: var(--sp-color-bg-surface); } .event-photographer-card--me{ background-color: var(--sp-color-bg-cream); } /* Badge « Moi » : pastille ink au coin haut droit, au-dessus du lien étiré de la carte (stretched-link de ProfileListItem, z-index 1) — sinon il passerait dessous et deviendrait cliquable comme le reste de la carte. */ .event-photographer-me{ position: absolute; top: var(--sp-space-3); right: var(--sp-space-3); z-index: 2; padding: 2px var(--sp-space-2); border-radius: var(--sp-radius-full); background-color: var(--sp-color-bg-dark); color: var(--sp-color-text-inverse); font-size: var(--sp-font-size-meta); font-weight: var(--sp-font-weight-title); } .timeline{ list-style: none; margin: 0; padding: 0; } .timeline-item{ position: relative; display: grid; grid-template-columns: 16px 1fr; gap: var(--sp-space-4); padding-bottom: var(--sp-space-8); } .timeline-item:last-child{ padding-bottom: 0; } /* Le rail : un filet chaud continu, tracé depuis la pastille jusqu'au nœud suivant. Il passe derrière les pastilles (z-index) et ne descend pas sous le dernier nœud. */ .timeline-marker{ position: relative; display: flex; justify-content: center; } .timeline-item:not(:last-child) .timeline-marker::before{ content: ""; position: absolute; left: 50%; /* Part du centre de la pastille — donc du milieu de la ligne de la date — et rejoint exactement celui de la pastille suivante. Plus haut, le filet dépasserait au-dessus. */ top: var(--sp-space-2); top: calc(1lh / 2); height: calc(100% + var(--sp-space-8)); width: 1px; transform: translateX(-50%); background-color: var(--sp-color-border-default); } .timeline-dot{ position: relative; z-index: 1; /* 7×7 et rien ne la déforme : rapport 1:1, et elle ne s'écrase pas dans la colonne flex du marqueur (fiche timeline). */ width: 7px; height: 7px; aspect-ratio: 1; flex: 0 0 auto; /* Centrée sur la ligne de sa date : le repère est la hauteur de ligne réelle du libellé (1lh), pas une marge devinée — si la typo change, la pastille reste alignée (fiche timeline). La première déclaration n'est qu'un repli. */ margin-top: var(--sp-space-2); margin-top: calc((1lh - 7px) / 2); border-radius: var(--sp-radius-full); background-color: var(--sp-color-text-caption); } /* Variant `agenda` : l'en-tête n'est plus une ligne de texte mais une LIGNE DE CONTRÔLES — un badge de date, et parfois l'action du jour. Sa hauteur est donc celle du bouton, imposée à tous les nœuds : sans quoi le nœud qui porte l'action serait plus haut que les autres et ses voisins auraient chacun un centre différent. Un repère unique, d'où découlent la pastille et le rail (fiche timeline). */ .timeline--agenda{ --timeline-agenda-header: 36px; } .timeline--agenda .timeline-header{ min-height: var(--timeline-agenda-header); } .timeline--agenda .timeline-dot{ margin-top: calc((var(--timeline-agenda-header) - 7px) / 2); } .timeline--agenda .timeline-item:not(:last-child) .timeline-marker::before{ top: calc(var(--timeline-agenda-header) / 2); } /* Un nœud ne porte qu'un évènement : le filet de ListItem n'y sépare rien, et c'est le rail qui jalonne (fiche list-item, variant `agenda`). */ .timeline--agenda .list-item{ border-bottom: 0; } /* Nœud courant : pastille orange de marque, seule couleur d'accent de la frise */ .timeline-item--current .timeline-dot{ background-color: var(--sp-color-accent-selected); } /* Nœud de fin : glyphe NU de 12×12 — ni cercle, ni liseré, ni fond. Ce n'est pas une pastille de journée, il ne doit pas s'y ressembler (fiche timeline). Son centre tombe au même endroit que celui des pastilles, pour que le rail le rejoigne exactement. */ .timeline-end-glyph{ display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; flex: 0 0 auto; color: var(--sp-color-border-cream); margin-top: var(--sp-space-1); margin-top: calc((1lh - 12px) / 2); } /* En-tête de nœud : la date à gauche, à droite le compteur (variant default) ou l'action que la date appelle (variant agenda). Alignement centré, parce que ce qui se fait face n'est pas du texte mais des objets — un badge, un bouton (fiche timeline). */ .timeline-header{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-2); } .timeline-label{ font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); } /* Le compteur est un Badge ton neutral : taille, couleur, rayon et padding viennent de lui (fiche timeline). Ne restent ici que sa tenue dans la ligne d'en-tête. */ .timeline-count{ flex-shrink: 0; white-space: nowrap; } .timeline-count-total{ color: var(--sp-color-text-muted); font-weight: var(--sp-font-weight-body); } .timeline-meta{ margin-top: 2px; font-size: var(--sp-font-size-meta); color: var(--sp-color-text-muted); } .timeline-gallery{ margin-top: var(--sp-space-3); } .timeline-end-text{ color: var(--sp-color-text-muted); } /* Journée en attente : le pointillé dit l'attente ; une surface pleine dirait un contenu (fiche timeline, état `awaiting`). */ .timeline-awaiting{ margin-top: var(--sp-space-3); padding: var(--sp-space-6) var(--sp-space-4); border: 1px dashed var(--sp-color-border-cream); border-radius: var(--sp-radius-lg); text-align: center; color: var(--sp-color-text-muted); } .badge-warning{ background-color: var(--warning-light); color: var(--warning); } /* Ton danger du DS : aplat rouge, texte blanc (alerte forte). Le rouge est celui des surfaces sombres (`feedback.danger.on-dark`, #F5494A) et non `feedback.danger` : ce badge se pose sur une PHOTOGRAPHIE, où le rouge foncé passe pour du brun et cesse d'alerter (fiche badge). La dérogation AA qui va avec est assumée et tracée dans la fiche. */ .badge-danger{ background-color: var(--sp-color-feedback-danger-on-dark); color: var(--sp-color-text-inverse); } /* Traitement chip du DS : fond blanc stable, ombre douce, libellé ink */ .badge-filter{ --bs-badge-padding-y: 10px; --bs-badge-padding-x: 12px; --bs-badge-border-radius: var(--sp-radius-md); color: var(--sp-color-text-default); background-color: var(--sp-color-bg-surface); box-shadow: var(--sp-shadow-sm); border: none; display: inline-flex; align-items: center; gap: .5rem; } .mobile-filter-pill { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px 8px 8px; border: 0.75px solid var(--sp-color-text-default); border-radius: 5px; font-size: 15px; font-weight: 500; background: var(--sp-color-bg-surface); color: var(--bs-body-color); text-decoration: none; } .mobile-filter-pill:hover { background: var(--sp-color-bg-grey); color: var(--bs-body-color); } .btn-sport-filter { gap: 4px; padding: 8px 12px; border-radius: 5px; font-size: 13px; height: 32px; display: inline-flex; align-items: center; } /* Panneau de filtres : Sheet sur mobile, Dropdown sur desktop (fiches sheet.md et dropdown.md). Même markup des deux côtés — même contenu, même fonction, autre surface. Base = mobile : le panneau monte du bas, sur un voile. */ .filter-anchor { position: relative; } .filter-veil { position: fixed; inset: 0; background-color: var(--sp-color-overlay-veil); z-index: 1045; animation: filter-veil-in var(--sp-duration-base) var(--sp-easing-standard); } /* Le panneau se déploie depuis le bord bas : le geste dit d'où il vient et par où il repartira (fiche sheet, « Mouvement »). Le voile se fond en même temps. */ @keyframes filter-veil-in { from { opacity: 0; } to { opacity: 1; } } @keyframes filter-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .filter-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1046; display: flex; flex-direction: column; gap: var(--sp-space-4); /* jamais tout l'écran : la bande qui dépasse dit qu'on peut refermer (fiche sheet) */ max-height: 85vh; padding: var(--sp-space-6); background-color: var(--sp-color-bg-surface); /* le panneau sort du bord bas : rien à arrondir de ce côté */ border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0; box-shadow: var(--sp-shadow-pop); animation: filter-sheet-up var(--sp-duration-base) var(--sp-easing-standard); } /* L'information est dans la position finale, pas dans le trajet (fiche sheet) */ @media (prefers-reduced-motion: reduce) { .filter-panel, .filter-veil { animation: none; } } /* La poignée annonce le glissement ; elle ne porte jamais l'unique moyen de fermer */ .filter-panel-grabber { align-self: center; width: 36px; height: 4px; border-radius: var(--sp-radius-full); background-color: var(--sp-color-border-cream); } .filter-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-3); } .filter-panel-title { margin: 0; font-size: var(--sp-font-size-h3); font-weight: var(--sp-font-weight-title); color: var(--sp-color-text-default); } .filter-panel-close { color: var(--sp-color-text-default); } .filter-panel-form { display: flex; flex-direction: column; min-height: 0; /* sans quoi le corps refuse de défiler */ gap: var(--sp-space-4); } /* Le corps défile, le pied non : une validation qu'il faut aller chercher en bas de trente lignes ne se trouve pas (fiches dropdown et sheet) */ .filter-panel-body { overflow-y: auto; min-height: 0; } .filter-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-3); padding-top: var(--sp-space-4); border-top: 1px solid var(--sp-color-border-default); } .filter-panel-foot .btn { flex: 1; } @media (min-width: 992px) { /* Desktop : le panneau pend sous la barre d'onglets et ne bloque rien — pas de voile, la page reste lisible et cliquable (fiche dropdown). Il se mesure sur la barre, non sur sa chip : c'est ce qui aligne son bord droit sur celui du contenu. Ancré à la chip, il aurait fallu deviner la distance qui l'en sépare — le CSS ne la connaît pas, et une largeur fixe aurait débordé du conteneur sur les écrans étroits, jusqu'à pousser la page. */ .tab-bar-block { position: relative; } .filter-anchor { position: static; } /* Page évènement : la barre de chips n'est pas une .tab-bar-block. Elle sert elle-même de contexte au dropdown (sans quoi l'absolu se cale sur le viewport — coin bas droit). Ses chips sont à gauche : on cale donc le panneau à gauche, non à droite comme la home. */ .photo-filter-bar { position: relative; } .photo-filter-bar .filter-panel { left: 0; right: auto; } .filter-panel { position: absolute; top: calc(100% + var(--sp-space-2)); left: auto; right: 0; bottom: auto; /* Largeur de son contenu, avec le plancher du variant « filters » : réglé sur son seul contenu il n'occupait que 39% de la place et serrait ses colonnes ; poussé à 100%, il était trop large (fiche dropdown, « Largeur »). Le plancher ne vaut que pour un panneau de filtres — c'est .filter-panel qui le porte, pas une règle de dropdown. */ width: max-content; min-width: 600px; /* borné par la barre, donc par le conteneur : jamais de débord, jamais de scroll */ max-width: 100%; max-height: none; border-radius: var(--sp-radius-lg); /* le Dropdown ne monte de nulle part : il est déjà chez lui, sous sa barre */ animation: none; transform: none; } .filter-panel-foot .btn { flex: 0 0 auto; } /* Déclencheur isolé dans une carte : le panneau s'aligne sur SON bord gauche, et sort donc visiblement de la chip qui l'a ouvert. L'ancre redevient le repère (position: relative), au lieu de la barre pleine largeur des filtres de la home — là-bas c'est l'alignement à droite qui garde le panneau dans le conteneur (fiche dropdown). */ .filter-anchor--start { position: relative; } .filter-anchor--start .filter-panel { left: 0; right: auto; /* Le plancher de 600px vaut pour une liste d'options parcourue du regard, pas pour un calendrier, qui a sa propre largeur (fiche dropdown, « Largeur »). */ min-width: 0; max-width: min(600px, calc(100vw - var(--sp-space-8))); } /* Pendant de --start pour une chip posée à DROITE de sa ligne (ex. « Trier par » de la page évènement, calé à droite sur desktop) : le panneau s'aligne sur SON bord droit et s'ouvre vers la gauche, sous sa chip. C'est l'autre façon de tenir l'invariant de la fiche dropdown — ne jamais franchir un bord du conteneur : une chip à droite dont le panneau s'alignerait à gauche déborderait par la droite et ferait défiler la page de travers. La largeur est bornée au viewport (pas en % de l'ancre, qui ne fait que la taille de la chip). */ .filter-anchor--end { position: relative; } .filter-anchor--end .filter-panel { right: 0; left: auto; min-width: 0; max-width: min(600px, calc(100vw - var(--sp-space-8))); } } /* Liste de filtres (DESIGNAPP, « Liste de filtres ») : glyphe, libellé, contrôle à droite. Une colonne sur mobile, deux sur desktop ; l'en-tête garde la ligne entière. */ .filter-list { display: grid; grid-template-columns: 1fr; /* Gouttière franche entre les colonnes (DESIGNAPP, « Liste de filtres ») : une colonne finit par un contrôle, la suivante commence par un glyphe — ils se confondent s'ils se frôlent. Deux listes autonomes, pas quatre colonnes. */ column-gap: var(--sp-space-8); border: 0; padding: 0; margin: 0; min-width: 0; /* un fieldset ne rétrécit pas sans ça */ } @media (min-width: 992px) { .filter-list { grid-template-columns: 1fr 1fr; } /* Quelques options ne font pas deux listes : elles gardent leur colonne. Les deux classes portent le même élément — la spécificité tranche, pas l'ordre. */ .filter-list.filter-list-single { grid-template-columns: 1fr; } .filter-list .filter-row-head { grid-column: 1 / -1; } } .filter-row { display: flex; align-items: center; gap: var(--sp-space-3); min-height: var(--sp-control-icon-button); /* cible tactile (fiche checkbox) */ padding: var(--sp-space-2) 0; } /* Le filet coiffe la ligne au lieu de la souligner : la dernière n'en porte donc aucun, quel que soit le nombre de sports, et sans avoir à désigner « la dernière » — que la grille à deux colonnes rendrait indésignable. Il ne sépare que les options entre elles : l'en-tête coiffe le groupe, il n'en est pas membre et ne s'en détache pas d'un trait. D'où le :not() — une option qui suit l'en-tête n'ouvre pas de filet. */ .filter-row:not(.filter-row-head) + .filter-row { border-top: 1px solid var(--sp-color-border-default); } /* Sur deux colonnes, l'en-tête tient la ligne entière : la première rangée d'options est faite des 2e et 3e lignes. La 3e ne suit pas l'en-tête dans le DOM — la règle ci-dessus lui pose donc un filet — mais elle est bien sur la première rangée. On le lui retire. nth-of-type et non nth-child : le du fieldset est le premier enfant, invisible mais bien là, et il décalait tout le comptage d'un rang — le filet sautait une ligne plus haut que voulu. nth-of-type ne compte que les div. Et seulement à deux colonnes : sur une seule, la 3e ligne n'a rien d'une première rangée, elle a besoin de son filet comme les autres. Placé APRÈS la règle qu'il corrige : à spécificité égale, c'est l'ordre qui tranche. */ @media (min-width: 992px) { .filter-list:not(.filter-list-single) > .filter-row:nth-of-type(3) { border-top: 0; } } .filter-row-icon { display: inline-flex; flex-shrink: 0; color: var(--sp-color-text-brown); } .filter-row-icon svg { display: block; } /* L'en-tête commande le groupe : son glyphe prend l'accent, son libellé le poids de titre */ .filter-row-icon-accent { color: var(--sp-color-accent-selected); } .filter-row-head .filter-row-label { font-weight: var(--sp-font-weight-title); } .filter-row-label { flex: 1; min-width: 0; margin: 0; cursor: pointer; color: var(--sp-color-text-default); } /* Le critère d'une option porte le poids de titre, son sens reste au poids de corps (DESIGNAPP, « Liste de filtres »). Le du navigateur vaudrait 700, que le DS réserve ailleurs : ici c'est font.weight.title. */ .filter-row-label strong { font-weight: var(--sp-font-weight-title); } /* Saisie libre à côté des options (DESIGNAPP, « Une saisie libre à côté des options ») : sous la liste, avec son libellé — ce n'est pas une option de plus, c'est l'autre façon de répondre. Le filet la sépare des options, comme elles se séparent entre elles. */ .filter-range { display: flex; flex-direction: column; gap: var(--sp-space-2); padding-top: var(--sp-space-4); margin-top: var(--sp-space-2); border-top: 1px solid var(--sp-color-border-default); } .filter-range-label { color: var(--sp-color-text-default); font-weight: var(--sp-font-weight-title); } /* Le contrôle tient le bout de ligne : même colonne pour tous, quel que soit le libellé */ .filter-row-check, .filter-row-switch { flex-shrink: 0; margin: 0; } /* .form-switch réserve une gouttière à gauche pour son libellé ; ici le libellé est ailleurs sur la ligne. Les deux classes portent le même élément : on l'emporte par la spécificité, non par l'ordre du fichier. */ .form-switch.filter-row-switch { padding-left: 0; min-height: 0; } .mobile-filter-pill svg { color: var(--sp-color-text-default); margin-left: 4px; flex-shrink: 0; } /* Breadcrumb */ .breadcrumb-nav .crumb { --bs-nav-link-padding-y: 8px; --bs-nav-link-padding-x: 8px; --bs-nav-link-font-weight: 600; color: var(--bs-heading-color); font-weight: 600; text-decoration: none; border-bottom: none; display: inline-block; padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x) 8px var(--bs-nav-link-padding-x); } .breadcrumb-nav .separator { color: var(--sp-color-text-muted); font-size: 18px; margin: 0 6px; } .breadcrumb-nav.nav-underline .nav-link, .nav.nav-underline .crumb{ padding: 18px var(--bs-nav-link-padding-x) 18px var(--bs-nav-link-padding-x); } @media (min-width: 992px) { .breadcrumb-nav.nav-underline .nav-link, .nav.nav-underline .crumb{ padding: 16px var(--bs-nav-link-padding-x) 16px var(--bs-nav-link-padding-x); } } /* Buttons */ /* Boutons DS : rayon lg (16px) — plus arrondi que les chips, c'est ce qui désigne l'élément qu'on presse ; anneau de focus orange, press ~0,97, disabled à 40 % */ .btn { --bs-btn-padding-x: 12px; --bs-btn-padding-y: 8px; --bs-btn-font-size: var(--sp-font-size-body); --bs-btn-font-weight: var(--sp-font-weight-body); --bs-btn-border-radius: var(--sp-radius-lg); --bs-btn-disabled-opacity: 0.4; --bs-btn-focus-box-shadow: var(--sp-shadow-ring); letter-spacing: var(--sp-font-tracking-tight); transition: transform var(--sp-duration-fast) var(--sp-easing-standard), background-color var(--sp-duration-fast) var(--sp-easing-standard), border-color var(--sp-duration-fast) var(--sp-easing-standard), color var(--sp-duration-fast) var(--sp-easing-standard); } .btn:not(:disabled):active { transform: var(--sp-gesture-press); } .btn:focus-visible { box-shadow: var(--sp-shadow-ring); } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:not(:disabled):active { transform: none; } } .btn-sm { --bs-btn-font-size: 12px; /* Coin resserré à radius.sm (8px) : à 32px de haut, le radius.lg de base arrondirait presque en pilule — le coin suit la taille (fiche button). */ --bs-btn-border-radius: var(--sp-radius-sm); } /* Un Button réduit à son glyphe reste un Button (fiche button) : il garde la hauteur et le rayon du bouton nommé qu'il raccourcit, et devient carré. Ce n'est PAS .btn-circle, le disque 44px de l'IconButton, qui est un contrôle de chrome et dépasserait ses voisines dans la barre. Aucune taille propre n'est fixée ici : la hauteur vient de la rangée (align-self), et la largeur se REFAIT depuis les mêmes variables que celles qui donnent sa hauteur à un bouton libellé de même taille — gouttière verticale, filet, hauteur de ligne. `aspect-ratio` ne suffirait pas : dans une rangée flex, la largeur se résout sur le contenu (le glyphe, 16px) avant que la hauteur étirée ne soit connue, et le carré ne se ferait jamais. */ .btn-icon-only{ display: inline-flex; align-items: center; justify-content: center; align-self: stretch; /* Le raccourci ne se déforme pas au profit des libellés voisins. */ flex: 0 0 auto; width: calc(var(--bs-btn-font-size) * var(--bs-btn-line-height) + 2 * var(--bs-btn-padding-y) + 2 * var(--bs-btn-border-width)); padding-left: 0; padding-right: 0; } .btn.p-0{ padding: 0!important; } .btn-primary{ --bs-btn-color: var(--sp-color-bg-surface); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--sp-color-bg-surface); --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .7); --bs-btn-hover-border-color: transparent; --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); } .btn-outline-primary { --bs-btn-color: var(--bs-heading-color); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--sp-color-bg-surface); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-color: var(--sp-color-bg-surface); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); } .btn-outline-primary { --bs-btn-font-weight: 600; } /* .btn-outline-secondary a été retiré : contour gris froid et texte gris, il ne correspondait à aucun variant de la fiche button, et le DS écarte le gris froid des filets. Les actions de faible emphase qu'il portait sont passées en .btn-neutral (crème) ; la navigation « voir tout » qu'il portait aussi est redevenue un lien (.sec-header-link). */ .btn-light { --bs-btn-color: var(--bs-primary); --bs-btn-bg: var(--light); --bs-btn-border-color: var(--sp-color-border-default); --bs-btn-hover-color: var(--bs-primary); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: 211, 212, 213; --bs-btn-active-color: var(--bs-primary); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-bg: var(--sp-color-bg-grey); --bs-btn-disabled-border-color: var(--sp-color-bg-grey); font-variation-settings: 'wght' 400; transition: font-variation-settings 0.2s; position: relative; } .btn-light:active, .btn-check+.btn-light:active, .btn-check:checked+.btn-light { font-variation-settings: 'wght' 600; } .btn-check+.btn:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); } /* Chip DS (designsystem/spicto/app/components/chip.md) : les toggles de filtre (btn-check + label) prennent le traitement chip. Fond blanc et ombre douce stables entre états ; à la sélection, libellé et icône passent à l'orange. */ .btn-check + .btn-light { --bs-btn-bg: var(--sp-color-bg-surface); --bs-btn-color: var(--sp-color-text-default); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--sp-color-bg-surface); --bs-btn-hover-color: var(--sp-color-text-default); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--sp-color-bg-surface); --bs-btn-active-color: var(--sp-color-accent-selected); --bs-btn-active-border-color: transparent; --bs-btn-border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-sm); } .btn-check:checked + .btn-light { color: var(--sp-color-accent-selected); background-color: var(--sp-color-bg-surface); border-color: transparent; } .btn-check:focus-visible + .btn-light { box-shadow: var(--sp-shadow-ring), var(--sp-shadow-sm); } /* Chips d'accès aux filtres (rangée sous les onglets, mockup home) : même traitement chip, libellé orange quand la catégorie est active */ .chip-filter { height: 36px; /* fiche chip */ font-size: var(--sp-font-size-label); font-weight: var(--sp-font-weight-body); --bs-btn-bg: var(--sp-color-bg-surface); --bs-btn-color: var(--sp-color-text-default); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--sp-color-bg-surface); --bs-btn-hover-color: var(--sp-color-text-default); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--sp-color-bg-surface); --bs-btn-active-color: var(--sp-color-accent-selected); --bs-btn-active-border-color: transparent; --bs-btn-border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-sm); } .chip-filter.active { color: var(--sp-color-accent-selected); } /* Sortie de la rangée de chips (DESIGNAPP, « Effacer les filtres »). Pas de fond ni d'ombre : la surface est ce qui fait une chip, et une sortie n'est pas un filtre de plus. Elle se cale sur la hauteur des chips pour tenir la ligne, et garde la typo d'un lien de section. L'orange est une EXCEPTION tracée au DESIGNAPP : seul élément sans surface d'une rangée qui n'est faite que de surfaces, en ink il serait le plus discret de la barre au moment où il est le plus utile. text.link, donc — c'est un lien, et le tronc donne l'orange aux liens. Ne pas étendre : le « Voir tout » d'un en-tête de section reste ink. Typo des chips, pas celle d'un lien de section : size.label (14px) et weight.body (500). Elle prolonge la rangée, elle ne la surplombe pas — en 600 elle pèserait plus que les filtres qu'elle efface, et ajouterait une troisième graisse à la barre. */ .filter-clear { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--sp-space-2); font-size: var(--sp-font-size-label); font-weight: var(--sp-font-weight-body); color: var(--sp-color-text-link); text-decoration: none; } .filter-clear:hover { color: var(--sp-color-text-link); text-decoration: underline; } /* Le défilement horizontal impose overflow-x, qui rogne aussi le débord vertical : sans réserve, l'ombre des chips est coupée net. shadow.sm déborde de 4px sous la chip et de 2px au-dessus ; la réserve est symétrique pour ne pas décaler les chips quand la barre les centre (DESIGNAPP, « Défilement horizontal »). */ /* Les chips défilent au doigt sur mobile (DESIGNAPP, « Défilement horizontal »). Sur desktop elles tiennent la ligne : l'overflow y est rendu visible, sans quoi il rognerait le Dropdown ancré sous l'une d'elles — overflow-x rogne aussi le débord vertical, et c'est ce qui rendait le panneau invisible. */ .filter-chips { scrollbar-width: none; padding: var(--sp-space-1) 0; overflow-x: auto; } @media (min-width: 992px) { .filter-chips { overflow: visible; } } .filter-chips::-webkit-scrollbar { display: none; } /* Btn-lg */ .btn-group-lg>.btn, .btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem; /* radius.lg comme la taille md : la fiche button ne resserre le coin QUE sur `sm`. Ce bloc portait radius.md, ce qui faisait mentir la fiche sur toutes les grandes tailles. */ --bs-btn-border-radius: var(--sp-radius-lg); } /* * Variantes DS (cf. designsystem/spicto/app/components/button.md) : * - .btn-marketing = « primary » du DS (orange) : l'intention la plus forte d'un * parcours (inscription, achat), UN SEUL par écran. * - .btn-primary Bootstrap (ink) = « secondary » du DS : action standard. * - .btn-neutral = « neutral » du DS (crème) : action de faible emphase. */ /* Exception de rayon (fiche button) : les deux boutons d'acquisition d'une photo — acheter et télécharger — passent en pill. Ce sont les gestes qui font l'app ; ce rayon les distingue de tous les autres boutons, et d'eux seuls. */ .btn-pill { --bs-btn-border-radius: var(--sp-radius-full); } /* LE COIN DU BOUTON SUIT LA ZONE : radius.lg (16px) dehors, radius.md (12px) dans l'espace connecté. Pendant exact de la carte de section qui perd son ombre en passant la connexion — dehors l'interface accueille, dedans elle outille, et des boutons qui se multiplient en tête de section et en pied de formulaire paraissent plus gros qu'ils ne pèsent au rayon d'accueil (fiche button). Comme pour la carte, la frontière est la ZONE, portée par le gabarit, jamais la session : l'écran de connexion n'a pas de classe d'espace pro, ses boutons restent à 16px. Les trois exclusions sont écrites, jamais confiées à l'ordre de déclaration : - .btn-sm garde radius.sm (8px) : le coin suit la TAILLE avant de suivre la zone ; - .btn-pill garde son pill : acheter / télécharger le portent dans les deux zones ; - .btn-gesture les deux gestes fondateurs du tableau de bord (voir ci-dessous). .btn-circle n'a pas besoin d'exclusion : il pose son rayon en propriété directe, pas par la variable, et reste donc un disque. Rayon ET gouttière horizontale changent ENSEMBLE : c'est une seule décision à deux effets. Un coin resserré sur une gouttière d'accueil donne un bouton trapu ; une gouttière élargie sur un coin ouvert le fait paraître mou. Le vertical ne bouge pas — c'est la hauteur du bouton, elle appartient à la taille, pas à la zone. D'où un SEUL bloc pour les deux : les séparer, c'est se donner l'occasion de n'en déplacer qu'un. */ .club-layout .btn:not(.btn-sm):not(.btn-pill):not(.btn-gesture), .photographer-layout .btn:not(.btn-sm):not(.btn-pill):not(.btn-gesture){ --bs-btn-border-radius: var(--sp-radius-md); --bs-btn-padding-x: var(--sp-space-4); --bs-btn-padding-y: var(--sp-space-2); } /* « Créer un évènement » et « Déposer des photos » sur les TABLEAUX DE BORD : les deux gestes qui font vivre la plateforme gardent le coin d'accueil (16px), qui les rattache à ce dont ils sont la porte et les détache des commandes autour. La classe ne se pose QUE sur un tableau de bord (fiche button) : les mêmes gestes ailleurs dans l'espace connecté sont des boutons de travail à 12px. Elle ne s'étend à aucun troisième bouton — ce n'est pas « le CTA de l'écran » qui la reçoit, ce sont ces deux gestes-là. La valeur est réaffirmée plutôt que laissée au repli sur .btn : l'exclusion ci-dessus suffirait, mais elle rendrait l'intention illisible. */ .btn-gesture{ --bs-btn-border-radius: var(--sp-radius-lg); } /* Variant « outline » de la fiche button : la même intention que primary, en retenue. Il garde l'orange pour dire qu'on reste dans la même famille d'action, mais rend le plein au CTA — il se définit par rapport au bouton qu'il suit. */ .btn-outline { --bs-btn-color: var(--sp-color-action-marketing); --bs-btn-bg: transparent; --bs-btn-border-color: var(--sp-color-action-marketing); --bs-btn-hover-color: var(--sp-color-action-primary-text); --bs-btn-hover-bg: var(--sp-color-action-marketing); --bs-btn-hover-border-color: var(--sp-color-action-marketing); --bs-btn-active-color: var(--sp-color-action-primary-text); --bs-btn-active-bg: var(--sp-color-action-marketing); --bs-btn-active-border-color: var(--sp-color-action-marketing); --bs-btn-disabled-color: var(--sp-color-action-marketing); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sp-color-action-marketing); } /* Variant « tertiary » de la fiche button : lien / action fantôme, sans fond, texte ink. Sans surface, il ne pèse sur rien. LE SOULIGNEMENT APPARTIENT AU RENVOI, PAS AU VARIANT (fiche button). Un tertiary qui MÈNE AILLEURS — la sortie d'un parcours (« Annuler le dépôt ») — n'a que ce trait pour se donner comme cliquable. Un tertiary qui AGIT SUR PLACE et porte un glyphe — la proposition qui ouvre un champ facultatif — ne se souligne pas : le glyphe le désigne déjà comme un contrôle, et le trait lui promettrait une destination qu'il n'a pas. La frontière est celle de et de