/* La page /dataset/ (2 nov.) : la grammaire des pages produit d'Apple (MacBook Air, iPad Pro) dans l'identité de l'accueil :
   la bande claire du site, des tuiles blanches arrondies, Inter 300 pour les titres et les chiffres, le texte en noir puis gris
   (jamais en couleur). L'anneau est relevé sur skyfall.ai/sky-001 : cartes à l'intérieur d'un cylindre, perspective ≈ 0,67 ×
   largeur, bords en fondu ; la souris posée dessus ne l'arrête pas. Le Worker interdit les styles en ligne : tout est ici, le script ne pose que des
   propriétés par le CSSOM. */
.ds { --ds-encre: #121117; --ds-gris: #6E6B76; --ds-pale: #8E8B96; --ds-fond: #F7F6F3; --ds-creux: #F2F1EE;
  background: var(--ds-fond); color: var(--ds-encre); }
.ds-centre { text-align: center; }
.ds-sur { margin: 0 0 14px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-gris); }
/* Le badge de l'ouverture (Tanguy, 4 nov.) : « +100K Assets » qui compte, dans un badge blanc arrondi ; à droite, quatre objets de
   même taille, cachés sous le bord du badge, qui surgissent l'un après l'autre quand le compteur arrive à +100K (dataset.js) */
.ds-badge { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 18px; padding: 4px 6px 4px 14px; overflow: hidden;
  border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 17, 23, .16);   /* un contour gris, sans ombre (4 nov.) */
  font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--ds-encre); font-variant-numeric: tabular-nums; }
.ds-badge-t { display: inline-flex; white-space: nowrap; }
.ds-badge-n { display: inline-block; min-width: 4ch; text-align: right; }   /* la place de « +100 », le chiffre calé à droite */
.ds-badge-pile { display: inline-flex; gap: 2px; margin-left: -2px; }   /* l'image au plus près du mot (4 nov.) */
.ds-badge-pile img { display: block; width: 28px; height: 28px; object-fit: contain; opacity: 0; transform: translateY(110%) scale(.7);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease; }
.ds-badge.ds-pop .ds-badge-pile img { opacity: 1; transform: none; }
/* un par un (Tanguy, 4 nov.) */
.ds-badge-pile img:nth-child(2) { transition-delay: .4s; }
.ds-badge-pile img:nth-child(3) { transition-delay: .8s; }
.ds-badge-pile img:nth-child(4) { transition-delay: 1.2s; }
/* puis les objets se relaient : l'un redescend sous le bord, le suivant surgit à sa place (dataset.js) */
.ds-badge.ds-tourne .ds-badge-pile img { transition-delay: 0s; }
.ds-badge.ds-pop .ds-badge-pile img.ds-sort { opacity: 0; transform: translateY(110%) scale(.7);
  transition: transform .25s ease-in, opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .ds-badge-pile img { opacity: 1; transform: none; transition: none; } }
.ds .stair > span { display: block; }
/* le titre d'ouverture coupé à la main : deux lignes sur ordinateur, trois sur téléphone (seule la version affichée est lue) */
.ds .stair > .ds-tel { display: none; }
/* le chiffre du titre compte dans une case de la largeur de « 100K », calé à droite : « K assets » ne bouge pas */
h1.stair .ds-h1-n { display: inline-grid; }   /* plus fort que « h1.stair span { display: block } » de lab.css */
h1.stair .ds-h1-n > span, .ds-h1-n::before { grid-area: 1 / 1; text-align: right; }
.ds-h1-n::before { content: "100K"; visibility: hidden; }
/* « 100K assets » passe de 300 à 500 quand le compteur a fini (Tanguy, 4 nov. : « deux graisses au-dessus ») ; le titre se
   recentre pendant le passage (« on va faire que le titre bouge quand la typo grossit ») */
h1.stair .ds-h1-gras { display: inline; transition: font-weight .7s cubic-bezier(.2, .7, .2, 1); }
.ds-h1-gras:has(.ds-fini) { font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .ds-h1-gras { font-weight: 500; } }   /* sans compteur, tout de suite en 500 */
@media (max-width: 640px) { .ds .stair > .ds-pc { display: none; } .ds .stair > .ds-tel { display: block; } }
.ds-h1 { margin: 0; font-size: clamp(32px, 8.6vw, 84px); font-weight: 300; line-height: 1.02; letter-spacing: -.035em; color: var(--ds-encre); }
/* tablette : la deuxième ligne, « open source and written as code », tient sur une ligne */
@media (min-width: 641px) and (max-width: 900px) { .ds-h1 { font-size: 5.6vw; } }
.ds-h2 { margin: 0 0 clamp(32px, 4vw, 48px); font-size: clamp(34px, 4.6vw, 60px); font-weight: 300; line-height: 1.05; letter-spacing: -.032em;
  color: var(--ds-encre); }
.ds-lead { max-width: 34em; margin: 22px auto 0; font-size: clamp(17px, 1.35vw, 20px); font-weight: 300; line-height: 1.45; color: var(--ds-gris);
  text-wrap: pretty; }
.ds-texte { margin: 0; max-width: 36em; font-size: 17px; line-height: 1.47; color: var(--ds-gris); text-wrap: pretty; }
/* la phrase en noir est un titre, le gris son sous-titre, chacun sur sa ligne (Tanguy, 2 nov.) */
.ds-texte b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ds-encre); }
.ds-texte.ds-centre { margin-inline: auto; }
.ds-gris { color: var(--ds-pale); }

/* Boutons : la taille des boutons de l'accueil (38 px, 13 px, coins de 12 px), flèche de sortie au nombre d'or du texte */
.ds-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 30px; }
/* deux vrais boutons, les mesures du .btn de l'accueil (lab.css), le logo de la plateforme à gauche (Tanguy, 3 nov.) ; les
   logos du site sont clairs : inversés (filter) sur les boutons clairs */
/* en rem, comme le .btn de l'accueil : au-delà de 1 600 px de large, la taille de base du site grandit (lab.css) et les
   boutons avec elle (Tanguy, 3 nov. : « dans les dimensions des boutons de la homepage ») */
/* un peu moins hauts et moins larges que ceux de l'accueil (Tanguy, 4 nov. : « réduis un peu la taille des boutons, en padding ») */
.ds-btn { display: inline-flex; align-items: center; gap: .5rem; height: 2.125rem; padding: 0 .9375rem; border-radius: .75rem;
  background: var(--ds-encre); color: #F7F6F3; font-size: .8125rem; font-weight: 500; letter-spacing: .01em; text-decoration: none;
  transition: background-color .2s ease, opacity .2s ease; }
.ds-btn:hover { opacity: .86; }
.ds-btn:active { transform: scale(.97); }
.ds-btn-logo { flex: none; width: 1rem; height: 1rem; }
.ds-btn-logo[src$="hugging-face.svg"] { width: 1.3125rem; height: 1.3125rem; margin: 0 -.0625rem; }   /* le visage a du blanc autour : plus grand (Tanguy, 3 nov.) */
.ds-btn.clair { background: #F7F6F3; color: var(--ds-encre); }
.ds-btn.second { background: #fff; color: var(--ds-encre); box-shadow: inset 0 0 0 1px rgba(18, 17, 23, .14); }
.ds-btn.second:hover { opacity: 1; background: var(--ds-creux); }
.ds-btn.clair .ds-btn-logo, .ds-btn.second:not(.sombre) .ds-btn-logo { filter: invert(1); }
.ds-btn.second.sombre { background: #242329; color: #F7F6F3; box-shadow: inset 0 0 0 1px rgba(142, 139, 150, .28); }   /* .v2 .btn.contour */
.ds-btn.second.sombre:hover { background: #2E2D33; }
.ds .btn-fleche { flex: none; width: .618em; height: .618em; }   /* comme sur l'accueil : grandit avec le bouton */
.ds a:focus-visible, .ds summary:focus-visible, .ds pre:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }

/* Ouverture : le titre, puis l'anneau des objets */
.ds-ouverture { padding: clamp(56px, 6.4vw, 96px) 0 0; }
/* trois rangées de petites cartes (dataset.js), chacune avec sa perspective : les rangées du haut et du bas restent droites ;
   bords en fondu, et le haut qui se fond dans le fond de la page (Tanguy, 3 nov.) */
.ds-anneau-cadre { position: relative; display: flex; flex-direction: column; gap: 12px; height: clamp(300px, 36vw, 470px);
  margin-top: clamp(32px, 3.6vw, 52px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 42%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 42%);
  mask-composite: intersect; }
/* sans 3D (sans script, ou mouvement réduit) : une rangée qui défile au doigt */
.ds-anneau { display: flex; gap: 16px; height: 100%; margin: 0; padding: 0 16px; list-style: none; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.ds-anneau::-webkit-scrollbar { display: none; }
.ds-carte { flex: 0 0 auto; height: 100%; aspect-ratio: 5 / 4; scroll-snap-align: center; }
/* avec le script, chaque rangée est une bande plate qui défile : seule, lentement, ou à la main (glisser, molette horizontale,
   flèches du clavier) */
.ds-anneau.ds-plat { position: absolute; top: 0; left: 0; align-items: center; width: max-content; height: 100%; padding: 0;
  overflow: visible; will-change: transform; }
.ds-anneau.ds-plat .ds-carte { width: var(--ds-w); height: var(--ds-h); aspect-ratio: auto; container-type: inline-size; }
/* les petites cartes de l'anneau : marges, coins et en-tête à l'échelle de la carte ; sous 160 px, le nombre de lignes s'efface */
.ds-anneau.ds-plat .ds-carte figure { padding: 6cqi 6.5cqi 5cqi; border-radius: 8cqi; }
.ds-anneau.ds-plat .ds-carte-tete { gap: 4px; font-size: clamp(8px, 5cqi, 11px); }
.ds-carte-tete span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 160px) { .ds-carte-tete span + span { display: none; } }
.ds-anneau-cadre.ds-main { cursor: grab; touch-action: pan-y; user-select: none; }
.ds-anneau-cadre.ds-tient { cursor: grabbing; }
.ds-rang { position: relative; flex: 1; min-height: 0; }
.ds-anneau-cadre img { -webkit-user-drag: none; pointer-events: none; }
.ds-anneau-cadre:focus-visible { outline: 2px solid var(--ds-encre); outline-offset: -6px; border-radius: 12px; }
.ds-carte figure { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 14px 16px 12px; border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 17, 23, .07); }
.ds-carte-tete { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ds-encre); }
.ds-carte-tete span + span { letter-spacing: .02em; text-transform: none; color: var(--ds-pale); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-carte img { flex: 1; width: 100%; min-height: 0; object-fit: contain; }
.ds-note { margin: 18px 16px 0; font-size: 12px; color: var(--ds-pale); }

/* Sections et bento */
.ds-sec { padding: clamp(80px, 10vw, 140px) 0 0; }
.ds-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.ds-tuile { --ds-pad: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: var(--ds-pad);
  overflow: hidden; border-radius: 28px;
  background: #fff; }
.ds-tuile > .ds-sur { margin: 0; }
.ds-t-quantite { grid-column: span 8; grid-row: span 2; }
.ds-t-langage { grid-column: span 4; }
.ds-t-programmes { grid-column: span 4; }
.ds-t-cao, .ds-t-mesh { grid-column: span 6; }
.ds-grand { margin: 0; font-size: clamp(60px, 7.4vw, 112px); font-weight: 300; line-height: .95; letter-spacing: -.045em; color: var(--ds-encre); }
/* le film des objets articulés à la place des six objets (Tanguy, 4 nov.) : une carte dans la tuile, posée en bas, dans ses
   marges et arrondie comme la boîte de code de la tuile voisine (.ds-mini) ; sans fondu (« on zap le fade »). Au moins en 16:9,
   elle prend la hauteur que la tuile laisse sous le texte (recadrée sur les côtés, jamais étirée) */
.ds-film { display: block; flex: 1 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 12px; object-fit: cover;
  border-radius: 14px; background: #F7F7F9; }
/* La carte Sand3D, à la place des panneaux Hugging Face et GitHub (Tanguy, 3 nov.) : la phrase en grand, en blanc, sur la
   boucle « nappe » du labo des dégradés (vidéo, jamais étirée : cover), sans voile sombre (« je n'en veux pas »). Arrêtée sur
   sa première image en mouvement réduit (dataset.js). */
.ds-t-langage { position: relative; isolation: isolate; min-height: clamp(260px, 26vw, 360px); background: #121117; color: #F7F6F3; }
.ds-langage-fond { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  transform: scaleY(-1); }   /* retournée : l'orange en haut (Tanguy, 3 nov.) */
/* les mêmes quatre lignes à toutes les tailles, le corps suit la largeur de la carte (Tanguy, 3 nov. : « sur laptop la même
   mise en page que sur grand écran […] plus petit et les textes sur les lignes similaires ») */
.ds-t-langage { container-type: inline-size; }
.ds-langage { margin: 0; font-size: clamp(18px, 10cqi, 46px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.ds-langage span { display: block; white-space: nowrap; }
.ds-mini { height: 170px; margin: auto 0 0; padding: 0 16px; overflow: hidden; border-radius: 14px; background: #F7F7F9; color: #3C3A44;
  font: 11.5px/1.6 ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; white-space: pre;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 78%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect; }
/* le programme écrit deux fois monte lentement d'une longueur et reprend : la boucle ne se voit pas (Tanguy, 4 nov.) */
.ds-mini-defile { display: block; }
@media (prefers-reduced-motion: no-preference) { .ds-mini-defile { animation: ds-mini 70s linear infinite; } }
@keyframes ds-mini { to { transform: translateY(-50%); } }
.ds-mini .ds-l { padding: 0; }
.ds-mini .ds-l::before { content: none; }
/* le chiffre en haut, la phrase en bas : les tuiles sans image gardent la hauteur de leur rang sans vide au milieu */
.ds-t-mesh .ds-texte { margin-top: auto; }
/* l'objet articulé qui s'ouvre (vidéo sur le blanc de la tuile) */
/* trois pièces de CAO, en aluminium (rendus.mjs, studio.metal) */
.ds-cao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4%; margin: auto 0; }
.ds-cao img { width: 100%; height: auto; }
/* le défilé d'objets de « Meshes » : deux rangs en sens contraire, la piste écrite deux fois glisse de la moitié de sa longueur */
.ds-defile { display: flex; flex-direction: column; gap: 4px; margin: auto calc(-1 * clamp(24px, 2.6vw, 36px));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ds-defile-rang { overflow: hidden; }
.ds-defile-piste { display: flex; width: max-content; animation: ds-defile 48s linear infinite; }
.ds-defile-rang.inverse .ds-defile-piste { animation-direction: reverse; }
.ds-defile-piste img { flex: none; width: 116px; height: 116px; }
@keyframes ds-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ds-defile-piste { animation: none; } }

/* L'objet et son programme */
.ds-paire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: 28px; background: #fff; }
.ds-paire-objet { display: grid; place-items: center; margin: 0; padding: clamp(16px, 2vw, 32px); }
.ds-paire-objet img { width: 100%; max-width: 520px; height: auto; }
/* la vitrine : miniatures à gauche, la 3D qu'on tourne (visualiseur du site, pensé pour le fond sombre : ses couleurs sont
   reprises ici pour la tuile blanche), le programme à droite */
.ds-vitrine { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); }
.ds-miniatures { display: flex; flex-direction: column; justify-content: center; gap: 8px; margin: 0; padding: 16px 0 16px 16px;
  list-style: none; }
/* relative : le nom caché (.v2-sr, en absolu) reste dans son bouton ; sans ça, sur mobile, il sortait de la rangée qui défile et
   élargissait la page à 476 px pour 390 (5 nov.) */
.ds-mini-btn { position: relative; display: block; width: 76px; height: 76px; padding: 4px; border: 0; border-radius: 16px; background: var(--ds-fond);
  cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease; }
.ds-mini-btn:hover { background: var(--ds-creux); }
.ds-mini-btn[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ds-encre); }
.ds-mini-btn:focus-visible { outline: 2px solid var(--ds-encre); outline-offset: 2px; }
.ds-mini-btn img { width: 100%; height: 100%; object-fit: contain; }
/* le visualiseur de la page (vue3d.js) : le rendu fixe tient la place, le canevas le remplace en fondu une fois l'objet chargé */
.ds-vue { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; }
.ds-vue-repli { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease; }
.ds-vue3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: grab; touch-action: pan-y;
  transition: opacity .5s ease; }
.ds-vue.ds-pret .ds-vue3d-canvas { opacity: 1; }
.ds-vue.ds-pret .ds-vue-repli { opacity: 0; }
/* un changement d'objet (vue3d.js, .ds-vu) : plus d'image fixe en grand, un indicateur de chargement au centre, qui n'apparaît
   qu'au-delà de 0,3 s pour ne pas clignoter sur un objet déjà en cache (Tanguy, 4 nov.) */
.ds-vue.ds-vu .ds-vue-repli { opacity: 0; transition: none; }
.ds-vue.ds-vu:not(.ds-pret)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 2px solid rgba(18, 17, 23, .12); border-top-color: var(--ds-encre); border-radius: 50%; opacity: 0; pointer-events: none;
  animation: ds-tourne .8s linear infinite, ds-montre .2s ease .3s forwards; }
@keyframes ds-tourne { to { transform: rotate(360deg); } }
@keyframes ds-montre { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ds-vue.ds-vu:not(.ds-pret)::after { animation: ds-montre .2s ease .3s forwards; } }
.ds-vue.ds-tient .ds-vue3d-canvas { cursor: grabbing; }
/* l'icône « on peut tourner » dans le coin bas gauche du visualiseur */
.ds-tourner { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px rgba(18, 17, 23, .1); color: var(--ds-gris);
  pointer-events: none; }
.ds-tourner-ic { width: 18px; height: 18px; }
.ds-code { display: flex; flex-direction: column; min-width: 0; background: #F7F7F9; }
.ds-code-tete { display: flex; justify-content: space-between; margin: 0; padding: 14px 20px; border-bottom: 1px solid rgba(18, 17, 23, .06);
  font-size: 12px; font-weight: 500; color: var(--ds-encre); }
.ds-code-tete span + span { color: var(--ds-pale); font-weight: 400; }
/* le code remplit toute la colonne de droite, jusqu'en bas de la carte (Tanguy, 3 nov.) ; barres de défilement fines et claires */
.ds-code pre { position: relative; flex: 1; min-height: 0; margin: 0; padding: 14px 0; overflow: auto; counter-reset: l; color: #3C3A44;
  scrollbar-width: thin; scrollbar-color: rgba(18, 17, 23, .2) transparent;
  font: 11.5px/1.65 ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; }
.ds-l { display: block; padding-right: 20px; white-space: pre; }
.ds-l::before { counter-increment: l; content: counter(l); display: inline-block; width: 3.2em; padding-right: 1.2em; color: #B5B2BC;
  text-align: right; user-select: none; }
/* la ligne survolée, ou celles de la pièce survolée */
.ds-l { transition: background-color .15s ease; }
.ds-l.allume { background: rgba(18, 17, 23, .07); box-shadow: inset 2px 0 0 var(--ds-encre); color: var(--ds-encre); }
/* la coloration du code (dataset.js) : mots-clés en violet, noms de fonction en Encre, appels en bleu, textes en ocre,
   nombres en vert, le module s3d en gris (Tanguy, 3 nov.) */
.ds-l .k { color: #6D3FD8; }
.ds-l .f { color: var(--ds-encre); font-weight: 600; }
.ds-l .a { color: #1D5FA8; }
.ds-l .s { color: #A4521B; }
.ds-l .n { color: #0E7C66; }
.ds-l .m { color: #8E8B96; }
.ds-l .c { color: #9A97A3; font-style: italic; }
/* les curseurs des articulations, sur le gris du panneau de code */
/* les curseurs dans un panneau étroit, la 3D prend la place (Tanguy, 2 nov. : « réduis la taille de l'interface pour les
   sliders et grossis la 3D du coup ») */
.ds-artic { grid-template-columns: 96px minmax(0, 1fr) minmax(240px, 300px); }
.ds-artic .ds-vue { max-width: 660px; }
/* jusqu'à sept curseurs (la servante d'atelier) : les écarts se resserrent sur un écran bas, et la liste défile au pire */
.ds-artic .ds-curseurs-liste { gap: clamp(10px, 2vh, 22px); padding: clamp(12px, 2.4vh, 24px) 20px; overflow-y: auto; }
.ds-curseurs { display: flex; flex-direction: column; min-width: 0; background: #F7F7F9; }
.ds-curseurs-liste { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 26px; padding: 28px 24px; }
.ds-curseur label { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ds-encre); }
.ds-curseur small { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-pale); }
.ds-curseur output { margin-left: auto; font-weight: 400; color: var(--ds-gris); font-variant-numeric: tabular-nums; }
.ds-curseur input { width: 100%; margin: 12px 0 0; accent-color: var(--ds-encre); cursor: pointer; }

/* Le mur et le compteur */
.ds-mur { align-items: center; gap: 14px; padding: clamp(28px, 3.4vw, 44px) clamp(16px, 2.6vw, 36px) clamp(24px, 2.6vw, 36px); }
.ds-compteur { margin: 0; font-size: clamp(64px, 11vw, 168px); font-weight: 300; line-height: .9; letter-spacing: -.05em; color: var(--ds-encre);
  font-variant-numeric: tabular-nums; }
/* la barre des catégories sous le chiffre, tout contre le mur (4 nov. : « rapproche les boutons de l'image en les éloignant
   du 100,000 ») */
.ds-mur .ds-familles { margin: 32px auto -12px; }
.ds-mur-img { width: 100%; height: auto; margin-top: 12px;
  /* le blanc par-dessus le haut du mur, sous la barre des catégories (4 nov. : « le dégradé dans l'autre sens ») */
  -webkit-mask-image: linear-gradient(transparent, #000 50%); mask-image: linear-gradient(transparent, #000 50%); }
/* Les catégories : la barre à pastilles de l'accueil (v2.css, .v2-mises ; Tanguy, 3 nov. : « l'effet qu'on a dans la homepage
   avec le bouton sélectionné en noir et le changement automatique qui a un effet morphique ») : une barre de verre blanc posée
   sur le bas du mur ; le noir du bouton choisi est une copie des boutons, noire à libellés blancs, découpée en pastille, dont
   les deux bords glissent l'un après l'autre (dataset.js) ; elle s'étire en chemin. */
@property --fond-g { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --fond-d { syntax: '<length>'; inherits: true; initial-value: 0px; }
.ds-familles, .ds-familles-noir { display: flex; gap: 2px; margin: 0; padding: 4px; list-style: none; }
.ds-familles { position: relative; width: max-content; max-width: 100%; margin: -4% auto 0; border-radius: 999px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 4px 16px rgba(18, 17, 23, .1), inset 0 0 0 1px rgba(18, 17, 23, .06); }
.ds-famille { padding: 6px 11px; border: 0; border-radius: 999px; background: none; color: var(--ds-encre); font: inherit;
  font-size: 11.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.ds-famille[aria-pressed="false"]:hover { background: rgba(18, 17, 23, .06); }
.ds-famille[aria-pressed="true"] { background: var(--ds-encre); color: #fff; }
.ds-famille:focus-visible { outline: 2px solid var(--ds-encre); outline-offset: 1px; }
.ds-familles.a-fond { transition: --fond-g .38s cubic-bezier(.65, 0, .25, 1), --fond-d .38s cubic-bezier(.65, 0, .25, 1); }
.ds-familles[data-sens="droite"] { transition-delay: .09s, 0s; }
.ds-familles[data-sens="gauche"] { transition-delay: 0s, .09s; }
.ds-familles.fixe { transition: none; }
.ds-familles-noir { position: absolute; inset: 0; pointer-events: none; border-radius: 999px; background: var(--ds-encre);
  clip-path: inset(4px var(--fond-d) 4px var(--fond-g) round 999px); }
.ds-familles-noir .ds-famille { color: #fff; }
.ds-familles.a-fond > li > .ds-famille[aria-pressed="true"] { background: none; color: var(--ds-encre); }
/* trop étroit pour une barre d'une ligne : les pastilles passent à la ligne, chacune avec son propre noir */
@media (max-width: 1100px) {
  .ds-familles { flex-wrap: wrap; justify-content: center; width: auto; border-radius: 18px; }
  .ds-familles-noir { display: none; }
  .ds-familles.a-fond > li > .ds-famille[aria-pressed="true"] { background: var(--ds-encre); color: #fff; }
}
/* sur portable, la barre suit la largeur du contenu : texte et marges des pastilles un peu plus petits sous 1 920 px */
@media (min-width: 1101px) and (max-width: 1919px) {
  .ds-familles .ds-famille, .ds-familles-noir .ds-famille { font-size: clamp(11px, .6vw, 11.5px); padding-inline: clamp(7px, .57vw, 11px); }
}
.ds-mur-img { transition: opacity .3s ease; }
.ds-mur-img.ds-change { opacity: .3; }

/* La carte de fin : le bloc open source sur le motif de l'ouverture de l'accueil (main.js sur .waves, calme : ni éclat au
   chargement ni couleur sous la souris), discret, plus effacé derrière le texte qu'au bord de la carte */
.ds-fin { padding-bottom: clamp(80px, 10vw, 140px); }
.ds-carte-fin { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) 24px; border-radius: 40px;
  background: var(--ds-encre); text-align: center; }
.ds-carte-fin .waves, .ds-sources .waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ds-carte-fin .waves canvas, .ds-sources .waves canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity 600ms cubic-bezier(.22, 1, .36, 1); }
.ds-carte-fin .waves canvas { -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 25%, #000 80%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 25%, #000 80%); }
.ds-carte-fin .waves[data-ready="true"] canvas, .ds-sources .waves[data-ready="true"] canvas { opacity: 1; }
.ds-carte-fin-contenu { position: relative; z-index: 1; }
.ds-carte-fin .ds-h2 { margin-bottom: 0; color: #F7F6F3; }
.ds-carte-fin .ds-lead { color: #8E8B96; }
@media (prefers-reduced-motion: reduce) { .ds-carte-fin .waves canvas, .ds-sources .waves canvas { transition: none; } }
/* « Quality code » : le motif s'efface vers le haut de la bande (Tanguy, 4 nov. : « fade au-dessus pour avoir moins de pattern
   en haut ») */
.ds-qualite .waves canvas { -webkit-mask-image: linear-gradient(transparent 10%, #000 85%); mask-image: linear-gradient(transparent 10%, #000 85%); }   /* « plus bas » */

.ds-lead-large { max-width: 44em; }   /* la phrase des sources sur deux lignes (Tanguy, 2 nov.) */
/* la phrase de l'ouverture coupée après « mechanisms, » (Tanguy, 3 nov.) : assez large pour la première ligne ; sur un
   téléphone, la coupure tomberait au hasard, elle coule normalement */
.ds-lead-ouverture { max-width: 46em; }
@media (max-width: 640px) { .ds-lead-ouverture br { display: none; } }
.ds-sec > .wrap > .ds-h2 + .ds-lead { margin: -12px auto 40px; }   /* sous un titre de section ; pas dans la carte de fin */
/* les sources : une carte par collection, logo (ou nom), nombre d'objets, ce qu'elle apporte */
.ds-sources-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 0; padding: 0;
  list-style: none; }
.ds-source { gap: 8px; }
.ds-source-logo { width: auto; height: 30px; align-self: flex-start; }
.ds-source-ic { flex: none; width: 30px; height: 30px; align-self: flex-start; color: #8E8B96; stroke-width: 1.6; }   /* Objaverse, CAO, code */
/* la section « Quality code », sur la bande et les cartes des sources : un titre en grand à la place du chiffre */
.ds-qualite-t { margin: 26px 0 0; font-size: clamp(22px, 1.85vw, 30px); font-weight: 300; line-height: 1.1; letter-spacing: -.025em;
  color: var(--ds-encre); }
.ds-qualite-t span { display: block; white-space: nowrap; }
/* trois lignes sur toutes les cartes, du portable au grand écran (Tanguy, 4 nov.) : une largeur en caractères, la même quelle que
   soit la carte, et la hauteur de trois lignes réservée ; quatre cartes par rangée, deux sous 1 100 px, une sur téléphone */
.ds-qualite .ds-texte { max-width: 21ch; min-height: calc(3 * 1.47em + 14px); text-wrap: balance; }
/* grand écran : deux lignes (Tanguy, 4 nov. : « fais tenir sur 2 lignes en grand écran ») */
@media (min-width: 1800px) { .ds-qualite .ds-texte { max-width: none; min-height: calc(2 * 1.47em + 14px); } }
.ds-qualite .ds-sources-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ds-qualite .ds-sources-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ds-qualite .ds-sources-liste { grid-template-columns: minmax(0, 1fr); } }   /* toujours deux lignes, quatre cartes côte à côte (4 nov.) */   /* le titre sur deux lignes, coupées à la main (Tanguy, 3 nov.) */
/* l'icône dans une tuile d'application : carré arrondi, gris en léger dégradé, filet clair (Tanguy, 3 nov.) */
.ds-app { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(160deg, #34333B, #232229); box-shadow: inset 0 0 0 1px rgba(247, 246, 243, .12), 0 6px 16px -8px rgba(0, 0, 0, .6); }
.ds-app .ds-source-ic { width: 26px; height: 26px; align-self: center; color: #F7F6F3; }
.ds-source-marque { display: flex; align-items: center; height: 30px; font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  color: #8E8B96; }
.ds-source-n { margin: 26px 0 0; font-size: clamp(36px, 3.4vw, 50px); font-weight: 300; line-height: 1; letter-spacing: -.035em;
  color: var(--ds-encre); font-variant-numeric: tabular-nums; }
/* le nom juste sous le chiffre : les titres alignés en haut d'une carte à l'autre, même quand une ligne passe sur trois
   (Tanguy, 3 nov.) */
.ds-source .ds-texte { padding-top: 14px; font-size: 15px; }
/* sous-titres des sources sur deux lignes à toutes les largeurs de portable, pour des cartes de même hauteur (Tanguy, 3 nov.) */
.ds-sources:not(.ds-qualite) .ds-source { padding-inline: clamp(18px, 1.7vw, 30px); }
.ds-sources:not(.ds-qualite) .ds-source .ds-texte { font-size: 14px; text-wrap: balance; }
/* sur fond sombre, comme sur l'accueil (Tanguy, 2 nov.) : l'Encre en bande, qui respire, à distance du bento au-dessus et de la
   vitrine dessous ; derrière, le motif de l'ouverture de l'accueil avec sa couleur sous la souris, et les cartes en verre
   par-dessus, floutées pour rester lisibles (3 nov. ; le verre du .btn.contour de l'accueil, lab.css) */
.ds.ds-sources { --ds-encre: #F7F6F3; --ds-gris: #8E8B96; --ds-pale: #6B6874; position: relative; overflow: hidden;
  margin-top: clamp(80px, 10vw, 140px); padding: clamp(64px, 7vw, 112px) 0 clamp(96px, 11vw, 160px); background: #121117; }   /* moins d'air en haut (4 nov.) */
.ds-sources > .wrap { position: relative; z-index: 1; }
.ds-sources .ds-lead { color: #B4B1BB; }   /* un peu plus clair que le gris, plus lisible sur le motif (Tanguy, 3 nov.) */
.ds-sources .ds-tuile { background: rgba(28, 27, 33, .56); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(247, 246, 243, .09); }

/* Le volet du pied, comme sur l'accueil (v2.css, .home-lab ; Tanguy, 2 nov. : « l'effet du footer qui passe derrière ») : la
   page passe au-dessus du pied, collé en bas de l'écran ; en défilant, elle glisse et le découvre. */
.ds-page main { position: relative; z-index: 10; background: #F7F6F3; }
.ds-page .v2-pied { position: sticky; bottom: 0; }
@media (max-width: 767px), (max-height: 560px) {
  .ds-page .v2-pied { position: relative; }   /* le pied dépasserait l'écran : le volet en cacherait le haut */
}

/* Sur un portable (Tanguy, 2 nov. : « les sections sont trop hautes en pc portable, surtout les viewer 3D et la card de
   fin ») : dès que la page passe sur plusieurs colonnes, les hauteurs suivent aussi la hauteur de la fenêtre (le plus petit des
   deux). Les visualiseurs tiennent dans l'écran sous l'en-tête collé (61 px), avec de l'air ; un grand écran garde les tailles
   d'avant, le téléphone n'est pas touché. */
@media (min-width: 901px) {
  .ds { --ds-scene: max(440px, calc(100vh - 160px)); }
  /* l'ouverture respire autour du titre ; le bas de l'écran peut couper les cartes de l'anneau vers leur milieu (Tanguy,
     3 nov. : « laisse un peu respirer, les cards peuvent apparaître que de moitié ») */
  /* Un MacBook comme le grand écran (Tanguy, 4 nov. : « qu'un MacBook, MacBook Pro ou MacBook Air ait la même impression en
     regardant le site que moi quand je suis sur wide screen ») : sous 1 920 px de large, la largeur du contenu, les titres,
     les marges des sections et les visualiseurs suivent la largeur de l'écran, depuis leurs tailles à 1 920 × 960 (chaque
     coefficient en vw redonne la taille d'avant à 1 920 px) ; le texte courant garde sa taille, pour rester lisible. */
  .ds-page { --w: min(75rem, max(940px, 68.1vw)); }
  .ds-h1 { font-size: clamp(32px, min(4.375vw, 11vh), 84px); }
  .ds-h2 { margin-bottom: clamp(24px, min(2.5vw, 5vh), 48px); font-size: clamp(30px, min(3.125vw, 7.5vh), 60px); }
  .ds-lead { font-size: clamp(16px, 1.042vw, 20px); }
  .ds-grand { font-size: clamp(60px, 5.83vw, 112px); }
  .ds-qualite-t { font-size: clamp(20px, 1.5625vw, 30px); }
  .ds-source-n { font-size: clamp(32px, 2.6vw, 50px); }
  /* le texte des cartes suit aussi, sans descendre sous 13 ou 14 px : les cartes gardent à peu près leurs coupures de ligne */
  .ds-texte { font-size: clamp(14px, .885vw, 17px); }
  .ds-source .ds-texte { font-size: clamp(13px, .78vw, 15px); }
  .ds-sources:not(.ds-qualite) .ds-source .ds-texte { font-size: clamp(13px, .73vw, 14px); }
  .ds-ouverture { padding-top: clamp(40px, min(5vw, 11vh), 96px); }
  /* l'ouverture prend au moins tout l'écran sous l'en-tête collé (61 px) : sur un grand écran, le bento n'apparaît qu'en
     défilant, la place en plus va au-dessus et au-dessous du titre, et l'anneau descend (Tanguy, 3 nov.) ; sur un portable,
     le contenu dépasse déjà l'écran et rien ne change */
  .ds-ouverture { display: flex; flex-direction: column; min-height: calc(100svh - 61px); padding-bottom: clamp(24px, 4vh, 56px); }
  .ds-ouverture > .wrap { margin-block: auto; }
  /* l'anneau plus bas, le titre mieux centré au-dessus, grand écran compris (Tanguy, 3 nov.) */
  .ds-anneau-cadre { height: clamp(300px, min(24.5vw, 54vh), 470px); margin-top: clamp(24px, min(4.6vw, 9vh), 88px); }
  .ds-sec { padding-top: clamp(56px, min(7.3vw, 15vh), 140px); }
  .ds.ds-sources { margin-top: clamp(56px, min(7.3vw, 15vh), 140px); padding-block: clamp(48px, min(5.5vw, 11vh), 112px) clamp(64px, min(8vw, 16vh), 160px); }
  .ds-fin { padding-bottom: clamp(56px, min(7.3vw, 15vh), 140px); }
  .ds-t-langage { min-height: clamp(220px, min(18.75vw, 40vh), 360px); }
  .ds-compteur { font-size: clamp(64px, min(8.5vw, 17vh), 168px); }
  /* la vitrine et les articulés à la hauteur de la scène : la 3D se cadre dedans, le code défile dans son panneau */
  .ds-vitrine, .ds-artic { --ds-boite: min(var(--ds-haut), var(--ds-scene)); grid-template-rows: minmax(0, 1fr); height: var(--ds-boite); }
  .ds-vitrine { --ds-haut: min(696px, 36.25vw); }   /* huit miniatures de 76 px */
  .ds-artic { --ds-haut: min(724px, 37.7vw); }      /* la 3D à 660 px */
  /* le visualiseur de la vitrine prend toute sa colonne, à la hauteur de la scène (4 nov.) */
  .ds-vitrine .ds-paire-objet { padding: clamp(8px, 1vw, 16px); }
  .ds-vitrine .ds-vue { max-width: min(100%, calc(var(--ds-scene) - 32px)); }
  .ds-artic .ds-vue { max-width: min(760px, calc(var(--ds-boite) - 24px)); }   /* presque toute la hauteur (4 nov. au soir ; 660 et -64 avant) */
  .ds-vitrine .ds-mini-btn { width: min(76px, calc((var(--ds-boite) - 88px) / 8)); height: min(76px, calc((var(--ds-boite) - 88px) / 8)); }
  .ds-artic .ds-mini-btn { width: min(76px, calc((var(--ds-boite) - 80px) / 7)); height: min(76px, calc((var(--ds-boite) - 80px) / 7)); }   /* sept objets */
  .ds-carte-fin { padding-block: clamp(40px, min(5vw, 10vh), 120px); }
  .ds-carte-fin .ds-lead { max-width: 40em; }
}
/* Écran de portable, bas (Tanguy, 4 nov. : « rapproche un peu le titre du dessus et monte le carrousel du bas pour voir au
   moins 2 lignes ») : le titre remonte, l'anneau suit de près les boutons et deux rangées entières tiennent dans l'écran ; sa
   rangée du haut s'efface davantage pour laisser les boutons lisibles (« prononce le fade de la ligne du dessus »). */
/* Grand écran, et tout écran de plus de 760 px de haut (Tanguy, 4 nov. : « enlève "Each render is the mesh…" et descends le
   titre et le carrousel pour que le bas du carrousel touche presque le bas de l'écran ») : sans la note, l'anneau se pose au
   bas de l'ouverture, qui a la hauteur de l'écran, et le titre se centre au-dessus. */
@media (min-width: 901px) and (min-height: 761px) {
  .ds-ouverture .ds-note { display: none; }
  /* marges et anneau un peu plus bas qu'avant en hauteur (vh), pour que tout tienne aussi en 1 920 × 960 ; le 2 560 × 1 290
     garde ses tailles */
  .ds-ouverture { padding-top: clamp(40px, min(5vw, 7vh), 96px); padding-bottom: 16px; }
  .ds-anneau-cadre { height: clamp(300px, min(24.5vw, 42vh), 470px); margin-top: clamp(24px, min(4.6vw, 7vh), 88px); }
}
@media (min-width: 901px) and (max-width: 1919px) and (max-height: 760px) {   /* les MacBook (780 px et plus) gardent l'ouverture du grand écran */
  /* sans le badge, l'air revient au-dessus du titre et entre les boutons et l'anneau (4 nov. : « sur laptop le carrousel est
     trop proche des boutons ») ; deux rangées tiennent toujours */
  .ds-ouverture { padding-top: clamp(48px, 11vh, 88px); }   /* « sur laptop le titre est trop proche du haut » */
  .ds-anneau-cadre { height: clamp(260px, 47vh, 400px); margin-top: clamp(32px, 7.5vh, 64px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
      linear-gradient(transparent 6%, rgba(0, 0, 0, .2) 22%, rgba(0, 0, 0, .55) 30%, #000 34%);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
      linear-gradient(transparent 6%, rgba(0, 0, 0, .2) 22%, rgba(0, 0, 0, .55) 30%, #000 34%); }
}

@media (max-width: 900px) {
  .ds-t-quantite { grid-column: span 12; grid-row: auto; }
  .ds-t-langage { grid-column: span 6; }
  .ds-t-programmes, .ds-t-cao, .ds-t-mesh { grid-column: span 6; }
  .ds-paire { grid-template-columns: minmax(0, 1fr); }
  .ds-miniatures { flex-direction: row; justify-content: flex-start; padding: 16px 16px 0; overflow-x: auto; scrollbar-width: none; }
  .ds-mini-btn { flex: none; width: 64px; height: 64px; }
  .ds-code pre { max-height: 420px; }
}
@media (max-width: 640px) {
  .ds-t-langage { grid-column: span 12; min-height: 220px; }
  .ds-t-programmes, .ds-t-cao, .ds-t-mesh { grid-column: span 12; }
  .ds-tuile { border-radius: 22px; }
  .ds-carte-fin { border-radius: 28px; }
  .ds-familles { margin-top: 0; }
  /* 24 colonnes sur un téléphone feraient des objets de 14 px : on montre le centre du mur, à une taille où ils se lisent */
  .ds-mur-img { width: 240%; max-width: none; }
}

/* Téléphone (Tanguy, 4 nov. : « optimise pour mobile notre page Sand3D, je veux qu'elle soit responsive, hésite pas à réduire des
   textes pour qu'elle ne soit pas trop longue ») : les phrases secondaires et la ligne des sources s'effacent (.ds-pc-seul), la
   note de l'anneau et la tuile des meshes aussi ; les cartes Quality code et les sources passent en deux colonnes, titre ou
   chiffre seul ; le programme défile dans un panneau plus court. */
@media (max-width: 640px) {
  .ds-pc-seul, .ds-ouverture .ds-note, .ds-t-mesh, .ds-qualite .ds-texte { display: none; }
  .ds-mini { height: 120px; }
  /* plus de code visible (« la zone grise avec le code est encore trop basse ») et la hauteur reprise ailleurs (« le problème
     c'est la hauteur de la section ») : moins d'air au-dessus des sections, miniatures et viewer un peu plus petits */
  .ds-code pre { max-height: 190px; }
  .ds-sec { padding-top: 56px; }
  .ds-vitrine .ds-vue { max-width: 290px; }
  .ds-vitrine .ds-paire-objet { padding: 10px; }
  .ds-miniatures { padding: 12px 12px 0; }
  .ds-mini-btn { width: 52px; height: 52px; border-radius: 12px; }
  .ds-qualite .ds-sources-liste, .ds-sources:not(.ds-qualite) .ds-sources-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ds-qualite .ds-source, .ds-sources:not(.ds-qualite) .ds-source { padding: 18px 14px; }
  .ds-sources:not(.ds-qualite) .ds-source:last-child:nth-child(odd) { grid-column: span 2; }
  .ds-qualite-t { margin-top: 16px; font-size: 17px; }
  .ds-app { width: 42px; height: 42px; border-radius: 12px; }
  .ds-source-n { margin-top: 14px; font-size: 32px; }
}
/* Le menu déroulant des catégories, sur téléphone seulement (4 nov. : la barre prenait quatre lignes) */
.ds-familles-menu { display: none; }
@media (max-width: 640px) {
  .ds-mur .ds-familles { display: none; }
  .ds-familles-menu { position: relative; display: inline-flex; align-items: center; margin: 14px auto 0; }
  /* le mur tout contre le menu : moins de marge, et son fondu vers le blanc plus court en haut (« rapproche l'image ») */
  .ds-mur-img { margin-top: -6px; -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
  .ds-familles-menu select { min-width: 210px; height: 40px; padding: 0 40px 0 18px; border: 0; border-radius: 999px; background: #fff;
    box-shadow: 0 4px 16px rgba(18, 17, 23, .1), inset 0 0 0 1px rgba(18, 17, 23, .08); font: inherit; font-size: 14px; font-weight: 500;
    color: var(--ds-encre); -webkit-appearance: none; appearance: none; }
  .ds-familles-chevron { position: absolute; right: 15px; width: 14px; height: 14px; color: var(--ds-gris); pointer-events: none; }
  /* les réglages des objets articulés plus compacts (« fais plus compact dans les articulations ») */
  .ds-artic .ds-curseurs-liste { gap: 12px; padding: 14px 16px; }
  .ds-curseur label { font-size: 13.5px; }
  .ds-curseur input { margin-top: 6px; }
  /* les cartes de l'anneau plus serrées (« rapproche les cards dans le carrousel de la section 1 », « encore trop éloignées ») :
     4 px entre elles, l'objet agrandi dans sa carte, sans son nom */
  .ds-anneau { gap: 4px; }
  .ds-anneau-cadre { gap: 6px; }
  .ds-anneau.ds-plat .ds-carte figure { padding: 3cqi; }
  .ds-anneau.ds-plat .ds-carte-tete { display: none; }
  /* titres et phrases un peu plus petits (« réduis un peu la taille des titres et sous-titres pour alléger la page ») */
  .ds-h1 { font-size: clamp(26px, 7.6vw, 32px); }
  .ds-h2 { font-size: clamp(24px, 7vw, 30px); }
  .ds-lead { font-size: 15.5px; }
  .ds-texte { font-size: 15px; }
}
.ds-insecable { white-space: nowrap; }   /* « LLM-friendly » ne se coupe pas au trait d'union */