est encore un enfant direct de (pas encore déplacé dans .ds-app-content) : on le masque pour ne jamais peindre la page « pas assemblée » (contenu collé en haut à gauche qui saute ensuite en place). Dès que la coquille le déplace, ce sélecteur ne matche plus → la page apparaît d'un coup, déjà en place. (Pages autonomes SANS coquille : leur donner body.ds-app.ds-solo.) */ body.ds-app:not(.ds-solo):not(.ds-auth) > main { visibility: hidden; } body.ds-app { margin: 0; /* La marge du haut du bloc contenu (place de la barre fixe) reste DANS le body au lieu de déborder sur lui : sans ça, le body entier glissait de 72 px (114 sur mobile) au montage de la coquille, un saut que Google compte dans la stabilité de la page (CLS 0,14, 14/10/2026). */ display: flow-root; background: var(--paper); color: var(--ink); font-family: "Noto Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* Les liens (nav rail, abonnements, CTA, items de menu…) ne sont PAS soulignés : ce sont des boutons/nav du design system, pas du texte-lien. */ .ds-app a { text-decoration: none; } /* Logo : noir en clair, blanc en thème sombre GLOBAL (data-theme). */ .ds-app .tbar-logo-w { display: none; } [data-theme="dark"] .ds-app .tbar-logo-b { display: none; } [data-theme="dark"] .ds-app .tbar-logo-w { display: block; } [data-theme="dark"] .ds-app svg.tbar-logo { color: var(--md-sys-color-on-surface); } /* ── Bouton EXTENSION (mark SydePlay, à la place de l'ancien bouton thème) ── */ /* Le mark suit le thème comme le logo : noir en clair, blanc en sombre. */ /* Bouton extension : icône Lucide « puzzle » (comme les autres boutons de la barre). */ /* Pastille pleine (sans chiffre) : « à installer » ou « mise à jour dispo » : .tbar-dot--plain, déplacée dans l'atelier (refonte du Studio : elle sert aussi au rail). */ /* Panneau de l'extension */ /* ── Barre du haut : pleine largeur, tout en haut, SANS fond (reprend le fond de page) ── La barre MARKETING (vitrine, pages légales) est exactement la même : même hauteur, même fond, même position (décision porteur, 15/09/2026). */ .ds-app .tbar--app, .ds-app .tbar--mkt { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--paper); border-radius: 0; border: 0; padding: 0 20px; /* le logo s'aligne sur les boutons du rail (20 px du bord) */ } /* Volet du compte : 12 px au-delà de son bouton, soit 8 px du bord de l'écran, comme au départ (le porteur a demandé le retour du volet pleine hauteur le 29/09/2026). */ .ds-app .tbar--app .tbar-account, .ds-app .tbar--mkt .tbar-account { right: -12px; } /* Vitrine : liens de navigation CENTRÉS entre le logo et le bouton d'appel (structure demandée par le porteur, 15/09/2026). */ .ds-app .tbar--mkt .tbar-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); gap: 8px; } /* au centre exact de la barre, quoi qu'il y ait à gauche et à droite */ .ds-app .tbar--mkt .tbar-right { flex: none; gap: 8px; } /* Recherche repliée de la vitrine (.tbar-search--mini) : composant du DS, dans atelier.css. */ /* Les pages sans rail (ds-solo) laissent la place de la barre fixe. */ body.ds-solo.ds-app:has(> .tbar--mkt) { padding-top: 72px; } /* ── Rail : SOUS la barre du haut, à gauche, SANS fond ── */ .ds-app .sbar { position: fixed; left: 0; top: 72px; height: calc(100vh - 72px); width: 220px; z-index: 35; padding: 0; background: transparent; border: 0; } .ds-app .sbar.is-collapsed { width: 84px; } .ds-app .sbar-fade { background: linear-gradient(to bottom, transparent, var(--paper)); } /* Éléments du rail (déplié, replié, survol) : composant Navigation rail du DS (atelier.css). */ /* ── Bloc contenu : BLANC, arrondi, SCROLLABLE (barre + rail restent fixes) ── */ .ds-app-content { --home-pad-x: 32px; --home-pad-y: 32px; /* même marge en haut qu'à gauche : équilibre (retour du porteur 25/09/2026) */ --home-pad-b: 60px; /* marge du bas, lue aussi par les barres collantes (.savebar) */ /* Positionnée (refonte du Studio, 07/10/2026) : elle sert de bloc conteneur aux éléments en position absolue des pages (.sr-only, régions live, libellés masqués). Sans elle, ils se calaient sur la fenêtre, rallongeaient le document et le faisaient défiler sous la coquille. Sans z-index : aucun contexte d'empilement, la barre du haut, le rail et les menus fixes restent au-dessus comme avant. */ position: relative; margin: 72px 0 0 220px; height: calc(100vh - 72px); overflow-y: auto; background: var(--panel); border-top-left-radius: 18px; box-sizing: border-box; padding: var(--home-pad-y) var(--home-pad-x) var(--home-pad-b); transition: margin-left .2s ease; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .ds-app-content::-webkit-scrollbar { width: 8px; } .ds-app-content::-webkit-scrollbar-track { background: transparent; } .ds-app-content::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--panel); } .ds-app .sbar.is-collapsed ~ .ds-app-content { margin-left: 84px; } /* Rappel « Studio en français » (shell-ds.js), posé en tête de #ds-main : un écart avant le 1er bloc. */ /* Studio : rail déplié plus large (256 px, comme YouTube Studio) pour que les libellés longs (« Données analytiques », « Revenus / Monétisation ») tiennent en entier. Replié ou sous 1000 px, il reste à 84 px comme partout. */ @media (min-width: 1001px) { .ds-app .sbar--studio:not(.is-collapsed) { width: 256px; } .ds-app .sbar--studio:not(.is-collapsed) .sbar-label { max-width: 190px; } .ds-app .sbar--studio:not(.is-collapsed) ~ .ds-app-content { margin-left: 256px; } /* Le voile (menu profil ou notifications ouverts) démarre au bord du rail du Studio : calé sur 220 px, il recouvrait ses 36 derniers px et le menu semblait déborder (retour du porteur 26/09/2026). */ .ds-app .sbar--studio:not(.is-collapsed) ~ .ds-page-scrim { left: 256px; } } /* Voile « page assombrie » derrière le menu profil (le met en avant). Couvre la zone de CONTENU seule : sous la topbar (72px) et à droite du rail. En z-30 (< rail 35 < topbar 40) → la nav du haut et de gauche restent lumineuses. Injecté + basculé par shell-ds.js quand #ds-user-dd s'ouvre. */ .ds-page-scrim { position: fixed; top: 72px; left: 220px; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--md-sys-color-scrim) 50%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s ease; } .ds-page-scrim.is-on { opacity: 1; visibility: visible; pointer-events: auto; } .ds-app .sbar.is-collapsed ~ .ds-page-scrim { left: 84px; } /* ── Section « Mes abonnements » : rangée d'avatars ── */ .ds-app .home-sec { margin-bottom: 32px; } .ds-app .home-sec-title { margin: 0 0 14px; } /* titre de section du DS (.h-sec) */ /* min-height : la hauteur d'une rangée d'avatars (.ava--sm, 30 px), réservée avant leur arrivée pour que « Nouvelles sorties » ne glisse pas dessous au chargement. */ .ds-app .home-subs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 30px; } /* Avatars = composant du DS (grand .ava--lg 60, en ligne .ava--on, ajout .ava--add) ; ici le placement. */ .ds-app .home-sub { display: inline-flex; text-decoration: none; } .ds-app .home-sub-add { text-decoration: none; } .ds-app .home-sub-add:hover { border-color: var(--brand); color: var(--brand); } /* Aucun abonnement : invitation à trouver des créateurs (vers Découvrir) */ .ds-app .home-subs-empty { font: var(--md-sys-typescale-body-medium); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; border: 1.5px dashed var(--line-2); color: var(--muted); text-decoration: none; transition: border-color .15s ease, color .15s ease; } .ds-app .home-subs-empty:hover { border-color: var(--brand); color: var(--brand); } .ds-app .home-subs-empty svg { flex: none; } /* Section « Nouvelles sorties » (Accueil remis à sa version d'avant l'unification, 07/10/2026) : sa barre collée n'a pas de .ds-sticky-band, c'est son voile ::before qui couvre l'écart au-dessus d'elle une fois collée (sinon les cartes y passaient, retour du porteur). */ .ds-app .home-new-head { padding-bottom: 16px; } .ds-app .home-new-head + * { margin-top: 0; } .ds-app .home-new-head::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--home-pad-y) * -1); height: var(--home-pad-y); background: var(--panel); } .ds-app .home-tabs { display: flex; gap: 8px; flex-wrap: wrap; } /* Le type, un trait vertical, puis les quatre ronds à logo du filtre par plateforme (.chip--plat, atelier). */ .ds-app .home-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .ds-app .home-sep { flex: none; width: 1px; height: 24px; background: var(--md-sys-color-outline-variant); } .ds-app .home-plats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* ── LISTE FILTRABLE (.ds-list) : le titre, puis la barre de liste du design system (Rechercher, Filtre, Trier par ; shared/list-header.js, pattern « List header ») posée dans .ds-sticky-head, puis les cartes ou les rangées. Seule la barre reste collée en haut au défilement ; le titre s'en va (modèle du porteur du 27/09/2026, validé sur Découvrir puis étendu à toutes les listes : Accueil, résultats de Découvrir, fiche d'une œuvre, page créateur, Studio Contenus, Mes commentaires). Une fois collée, la barre a la même marge des quatre côtés (--home-pad-x : 32, 16 sur téléphone), le bas compris. Au repos : 16 px entre le titre et la barre (8 + les 8 du haut), 40 px entre la barre et ce qui suit (les 32 du bas + 8). Structure : .ds-list > .ds-sticky-band + .ds-list-title + .ds-sticky-head + la liste. */ .ds-app .ds-list { display: flow-root; } /* garde la marge négative de la bande dans le bloc */ .ds-app .ds-list[hidden] { display: none; } .ds-app .ds-list-title { margin-bottom: 8px; } .ds-app .ds-sticky-head { position: sticky; top: calc(var(--home-pad-x) - 8px - var(--home-pad-y)); z-index: 12; margin: 0 calc(var(--home-pad-x) * -1) 0; padding: 8px var(--home-pad-x) var(--home-pad-x); background: var(--panel); } .ds-app .ds-sticky-head + * { margin-top: 8px; } /* Bande du haut : une fois la liste arrivée en haut, elle reste collée au bord (hauteur = l'écart au-dessus de la barre collée : 24 px, 8 sur téléphone) et cache ce qui défile dessous (le titre, puis les cartes). Au repos, elle est dans l'écart au-dessus du titre sans prendre de place (marge négative en haut). */ .ds-app .ds-sticky-band { position: sticky; top: calc(var(--home-pad-y) * -1); z-index: 11; height: calc(var(--home-pad-x) - 8px); margin: calc((var(--home-pad-x) - 8px) * -1) calc(var(--home-pad-x) * -1) 0; background: var(--panel); } /* MAX 3 réactions par ligne (visibilité) : 3 en large, 2 en moyen, 1 en mobile. */ /* MAX 3 réactions par ligne (visibilité) : 3 en large, 2 en moyen, 1 en mobile. Chargement par paquets de 15 (= 5 lignes de 3) au défilement. */ /* 4 colonnes en bureau (demande du porteur, 2026-09-14 : 3 faisait trop petit vu de loin), 3 sous 1400 px, 2 sous 1024 px, 1 en mobile (plus bas). */ /* 3 colonnes par défaut (ordinateur portable) ; 4 colonnes seulement sur les grands écrans (≥ 1800 px de large) — retour du porteur, 15/09/2026. */ /* Grille des cartes : 3 par ligne au plus (4 sur très grand écran), et JAMAIS une carte plus étroite que 300 px : quand la place manque, on retire une colonne (3 → 2 → 1) au lieu d'écraser les cartes (retour du porteur du 29/09/2026). Le max() force la largeur mini, le calc() plafonne le nombre de colonnes. */ .ds-app .reaction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 2 * 20px) / 3)), 1fr)); gap: 20px; } @media (min-width: 1800px) { .ds-app .reaction-grid { grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 3 * 20px) / 4)), 1fr)); } } /* La carte de réaction remplit sa cellule de grille (l'atelier la fige à 358px). */ /* Lazy-render : le navigateur ne calcule NI ne télécharge la jaquette des cartes hors écran tant qu'on n'en approche pas (allège le chargement, surtout avec beaucoup de réactions). contain-intrinsic-size réserve la place (pas de saut). */ .ds-app .rcard { margin-left: 0; width: auto; cursor: pointer; transition: border-color .15s ease, box-shadow .25s ease; content-visibility: auto; contain-intrinsic-size: auto 320px; } .ds-app .rcard:hover { border-color: var(--line-2); } /* Chargement / message d'une liste (.grid-state) : composant du DS, dans atelier.css. */ /* Cartes du paquet suivant : fondu doux à l'apparition (pas de « pop » sec). */ /* `backwards` et pas `both` : une fois entrée, la carte rend la main à son transform normal (Relief, Projecteur). */ .ds-app .rcard.rcard-in { animation: rcard-in .32s ease backwards; } @keyframes rcard-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Moins d'animations demandées par le système : ni fondu des cartes suivantes, ni glissé de l'encart extension (le bloc global d'atelier.css ne les couvre pas). */ @media (prefers-reduced-motion: reduce) { .ds-app .rcard.rcard-in, .ds-app .ds-ext { animation: none; } } /* ── Responsive : rail replié en icônes sous 1000px, masqué sous 720px ── */ @media (max-width: 1000px) { /* Le rail replié d'office est rendu par le composant (atelier.css) ; ici la mise en page. La largeur est redonnée ICI : la règle « .ds-app .sbar { width: 220px } » de cette feuille (chargée après atelier.css) l'emportait, et le rail large décalait ses icônes par-dessus le contenu (bug vu par le porteur le 25/09/2026). */ .ds-app .sbar { width: 84px; } .ds-app-content { margin-left: 84px; } .ds-page-scrim { left: 84px; } } @media (max-width: 640px) { .ds-app .reaction-grid { grid-template-columns: 1fr; } /* Recherche repliée (icône) : un clic l'ouvre en overlay pour taper (mobile seulement) */ } /* ── Topbar compacte (écrans moyens) ──────────────────────────────── Avant que la barre du haut ne devienne « mobile » (≤760px), sur les écrans moyens la recherche s'écrasait en un pilule illisible et thème/réglages encombraient. On la replie proprement en ICÔNE : la loupe = le bouton icône du DS (.ibtn) tel quel (thème, réglages et langue vivent désormais dans le menu profil). */ @media (max-width: 900px) { .ds-app .tbar-search { flex: 0 0 44px; width: 44px; padding: 0; justify-content: center; background: transparent; border-color: transparent; } .ds-app .tbar-search:hover { background: var(--raised); } .ds-app .tbar-search input { display: none; } .ds-app .tbar-search-go { margin: 0; } /* .ibtn seul */ .ds-app .tbar-mic { display: none; } /* Recherche ouverte au clic : overlay pour taper, avec le dessin de .ex-search (rayon 12, fond gris, contour rose, loupe 18 à gauche). */ .ds-app .tbar-search.is-open { position: absolute; left: 52px; right: 52px; top: 14px; z-index: 50; width: auto; max-width: none; flex: none; justify-content: flex-start; padding: 0 12px; background: var(--md-sys-color-surface-container-high); border-color: var(--md-sys-color-primary); } .ds-app .tbar-search.is-open input { display: block; } .ds-app .tbar-search.is-open .tbar-search-go { margin: 0 -8px 0 -12px; } /* de retour dans le champ */ } /* Burger + barre du bas : cachés par défaut (desktop) */ .ds-app .ds-burger-dd { display: none; } .ds-app .ds-bottomnav { display: none; } /* ── Menu d'app plein écran (mobile) : ouvert par le burger ── Mise en page (conteneur plein écran) uniquement — le CONTENU réutilise des composants existants du DS (profil .ava, nav .sbar-btn, créateurs .sbar-creator, actions .tbar-mobile). Masqué tant que non ouvert. */ .ds-app .ds-appmenu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--panel); color: var(--ink); } .ds-app .ds-appmenu[hidden] { display: none; } .ds-appmenu-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 16px; } .ds-appmenu-scroll { flex: 1; overflow-y: auto; padding: 6px 16px 32px; display: flex; flex-direction: column; gap: 22px; } /* Chaque bloc garde sa taille naturelle : le conteneur défile, il n'écrase pas (bouton « Se connecter »). */ .ds-appmenu-scroll > * { flex: 0 0 auto; } .ds-appmenu-profile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--raised); color: var(--ink); } .ds-appmenu-profile .ava { flex: none; } /* avatar par défaut du DS (44, rayon 12) ; placement uniquement */ .ds-appmenu-profile-id { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ds-appmenu-profile-id b { font: var(--md-sys-typescale-title-large); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-appmenu-profile-id i { font-size: var(--md-sys-typescale-body-small-size); font-style: normal; color: var(--muted); } .ds-appmenu-profile > svg { flex: none; color: var(--muted); } .ds-appmenu-login { width: 100%; } .ds-appmenu-sec { display: flex; flex-direction: column; gap: 6px; } .ds-appmenu-sec[hidden] { display: none; } /* « Créateurs suivis » vide : le display flex l'emportait sur hidden */ .ds-appmenu-label { font: var(--md-sys-typescale-label-medium); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 4px; } /* --muted : « faint » est sous 4,5:1 pour du texte */ /* Menu du Studio dans le menu plein écran (mobile) : les lignes du rail, empilées. */ .ds-appmenu-nav { display: flex; flex-direction: column; gap: 4px; } .ds-appmenu-creators { display: flex; flex-direction: column; gap: 2px; } .ds-appmenu-creators .sbar-creator { padding: 6px 8px; border-radius: 10px; } body.ds-menu-open { overflow: hidden; } /* ── Volet « pas connecté » (bas d'écran) : invite à créer un compte, fermable ── Composant Banner du DS (.ds-banner, même peau que le bandeau cookies) ; ici le placement uniquement. */ .ds-app .ds-signup { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 560px; margin: 0 auto; } /* ── Bandeau « installe l'extension » (haut-droite) : flèche vers la zone des extensions ── Repris de mountExtensionBanner() (ancien shell.js), aux jetons DS. */ .ds-app .ds-ext { position: fixed; top: 84px; right: 16px; z-index: 50; width: 300px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 7px; background: var(--panel); color: var(--ink); border: 1px solid var(--brand); border-radius: var(--md-sys-shape-corner-medium); padding: 16px; box-shadow: var(--md-sys-elevation-level3); animation: ds-ext-in .3s ease; } .ds-ext::before { content: ""; position: absolute; top: -9px; right: 24px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--brand); } .ds-ext::after { content: ""; position: absolute; top: -7px; right: 25px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--panel); } @keyframes ds-ext-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .ds-ext-x { position: absolute; top: 4px; right: 4px; } /* bouton icône du DS ; placement uniquement */ .ds-ext-head { display: flex; align-items: center; gap: 8px; padding-right: 36px; } .ds-ext-head b { font: var(--md-sys-typescale-title-small); } .ds-ext-head svg { color: var(--brand); flex: none; } .ds-ext-sub { font: var(--md-sys-typescale-body-small); color: var(--muted); } .ds-ext-cta { width: 100%; margin-top: 4px; } /* ── MOBILE (≤ 760px) : barre du haut en BURGER, rail en BARRE DU BAS ── */ @media (max-width: 760px) { /* Écran d'app : tout blanc, plus de liseré gris autour du contenu. */ body.ds-app { background: var(--panel); } /* Barre du haut mobile OPAQUE : sinon (fond transparent) le contenu défile visiblement dessous sur iOS Safari (barre d'URL dynamique) et chevauche le logo/titre. Fond = --panel (= le fond de l'écran mobile) → raccord invisible au repos ET masquage propre au scroll. */ .ds-app .tbar--app { background: var(--panel); } /* Recherche TOUJOURS visible, sur toute la largeur, sous le logo et le burger (retour du porteur 25/09/2026) : la barre du haut passe sur deux rangées (8 + 44 + 8 + 44 + 10 = 114 px) et suit le défilement comme avant. */ .ds-app .tbar--app { flex-wrap: wrap; align-content: flex-start; row-gap: 8px; height: auto; padding: 8px 16px 10px; } .ds-app .tbar--app .tbar-search, .ds-app .tbar--app .tbar-search.is-open { order: 10; position: static; flex: 1 0 100%; width: 100%; max-width: none; height: 44px; justify-content: flex-start; padding: 0 12px; border-color: transparent; background: var(--md-sys-color-surface-container-high); box-shadow: none; } .ds-app .tbar--app .tbar-search:focus-within { border-color: var(--md-sys-color-primary); } .ds-app .tbar--app .tbar-search input { display: block; } .ds-app .tbar--app .tbar-search .tbar-search-go { margin: 0 -8px 0 -12px; } /* dans le champ */ .ds-app .tbar-right { display: none; } .ds-app .ds-burger-dd { display: inline-flex; margin-left: auto; align-self: center; } .ds-app .sbar { display: none; } .ds-page-scrim { left: 0; } /* rail masqué → voile pleine largeur du contenu */ /* Contenu PLEIN ÉCRAN : pleine largeur, sans marge ni rayon. La 1re règle bat la spécificité de « .sbar.is-collapsed ~ .ds-app-content ». */ .ds-app .sbar.is-collapsed ~ .ds-app-content, .ds-app-content { --home-pad-x: 16px; --home-pad-y: 16px; --home-pad-b: 104px; margin: 114px 0 0 0; height: calc(100vh - 114px); border-top-left-radius: 0; padding: 16px 16px var(--home-pad-b); } .ds-page-scrim { top: 114px; } /* Barre du bas : BLOC PLEIN blanc, pleine largeur (specs Figma « 2332:205 »). Boutons = .ibtn (44×44), répartis, actif = pastille inversée. */ .ds-app .ds-bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; justify-content: space-between; height: 84px; padding: 20px; box-sizing: border-box; background: var(--panel); border-top: 1px solid var(--line); } .ds-app .reaction-grid { grid-template-columns: 1fr; } /* Volet « pas connecté » : au-dessus de la barre du bas (84px). */ .ds-app .ds-signup { left: 12px; right: 12px; bottom: calc(84px + 12px); } } /* Bandeau extension : jamais sur téléphone ni sur un écran tactile (Chrome mobile n'accepte pas les extensions). En position fixe, il masquait ~200 px en haut de chaque page tant qu'on ne l'avait pas fermé. */ @media (max-width: 760px), (pointer: coarse) { .ds-app .ds-ext { display: none; } } /* ════════════════════════════════════════════════════════════════════ Pied de rail — étiquette « dernière mise à jour » + historique. Mise en page uniquement (jetons DS), même patron que .ds-appmenu / .ds-signup. On réutilise le bouton de rail .sbar-btn et le bouton icône .ibtn : aucun nouveau composant du design system. Données : /assets/build-info.json (dernière) + /assets/changelog.json. ════════════════════════════════════════════════════════════════════ */ /* Le pied du rail passe en colonne : version au-dessus, replier en dessous. */ .ds-app .sbar-foot { flex-direction: column; align-items: stretch; gap: 4px; } .ds-app .sbar-foot .sbar-toggle { align-self: flex-end; } .ds-app .sbar.is-collapsed .sbar-foot { align-items: center; } .ds-app .sbar.is-collapsed .sbar-foot .sbar-toggle { align-self: center; } /* Étiquette de version : bouton de rail allégé (info secondaire). */ /* Modale d'historique : voile, fenêtre, en-tête et liste = règle commune des dialogues (atelier.css, OVERLAYS, mise en page b). Ici la largeur et le contenu. */ .ds-app .ds-build-modal { z-index: 320; } .ds-app .ds-build-modal[hidden] { display: none; } .ds-build-card { max-width: 480px; } .ds-build-list { padding-top: 0; } .ds-build-row { padding: 16px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); } .ds-build-row:last-child { border-bottom: none; } .ds-build-v { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; margin-bottom: 8px; border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-label-medium); } .ds-build-msg { font: var(--md-sys-typescale-title-small); color: var(--md-sys-color-on-surface); } .ds-build-desc { margin-top: 4px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); } .ds-build-why { margin-top: 8px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface); } .ds-build-why b { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .ds-build-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); } .ds-build-meta span { display: inline-flex; align-items: center; gap: 4px; } .ds-build-empty { padding: 24px; text-align: center; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); } /* ════════════════════════════════════════════════════════════════════ COQUILLE DU STUDIO (refonte du Studio, contrat consolidé) : mise en page seulement. Les composants et leur placement dans le rail viennent de l'atelier : .launch--mini, .sbar-exit, .tbar-studio-state, .ds-bottomnav--labels (.bnav-item, .bnav-ic, .bnav-pub), .tbar-dd-panel--up, .skip-link. Ici : la zone principale et le mode focus. ════════════════════════════════════════════════════════════════════ */ /* Zone principale (#ds-main, cible du lien d'évitement) : elle reçoit le focus sans anneau. */ .ds-app-content:focus { outline: none; } @media (max-width: 760px) { /* Mode focus du compositeur : pas de barre du bas (son pied d'étapes collant la remplace), donc plus besoin de lui laisser la place en bas du contenu. */ body.ds-app.ds-focus-flow .ds-bottomnav { display: none; } body.ds-app.ds-focus-flow .sbar.is-collapsed ~ .ds-app-content, body.ds-app.ds-focus-flow .ds-app-content { --home-pad-b: var(--home-pad-y); } } /* Barre groupée ancrée en bas (.bulkbar--dock, mode sélection sur téléphone) : elle flotte au-dessus du contenu (84 de barre du bas + 8 + 44 de barre), donc la marge du bas grandit tant qu'elle est visible, pour que la dernière ligne puisse remonter au-dessus d'elle. (Les barres collantes .savebar et .actbar sont dans le flux : rien à ajouter ; leur scroll-padding est posé dans atelier.css.) Spécificité 0,4,0 : passe devant la règle téléphone de cette feuille, sans gêner les pages qui posent déjà la même valeur. */ .ds-app .ds-app-content:has(.bulkbar--dock:not([hidden])) { --home-pad-b: calc(84px + 8px + 44px + 16px + env(safe-area-inset-bottom)); }