/* ============================================================================ RCF · V1.1-04 — LE CYCLODEX COMME COLLECTION — STYLE ---------------------------------------------------------------------------- LOT DESIGN. Aucune règle de jeu ici : ni condition de découverte, ni critère de « Cyclodex complet », ni total. Tous les compteurs affichés viennent de `RCFCyclodex.counts()` ; cette feuille ne fait que les mettre en page. ---------------------------------------------------------------------------- CE QUE CETTE FEUILLE AJOUTE, ET CE QU'ELLE NE TOUCHE PAS ---------------------------------------------------------------------------- `cyclodex.css` reste en place et garde tout le registre « dex » des Métiers (console, plaque d'identité, index, roue de vélo) : il a été conçu pour cela au Lot 7.2 et il fonctionne. Cette feuille, chargée juste après, ajoute : · l'accueil en collection — synthèse de progression et cartes chiffrées ; · une GRAMMAIRE VISUELLE COMMUNE aux quatre états d'un élément collectionnable : découvert, non découvert, secret, sélectionné ; · la présentation des 39 titres de carrière ; · le renfort du dex Métiers (marqueur d'index, lisibilité des inconnus) ; · une barre d'onglets qui défile au lieu de se replier sur deux lignes. Elle ne redéfinit aucune règle de `cyclodex.css` par `!important` : elle arrive après dans l'ordre des ``, ce qui suffit à spécificité égale. C'est le même choix que pour les Ambitions — on ordonne, on n'empile pas. Aucune couleur hors jetons du thème. Aucune image, aucun CDN, aucune police. ============================================================================ */ :root{ /* Les quatre états de la grammaire de collection. Ce sont des jetons, pas des couleurs en dur : un thème qui redéfinit --hivis les suit. */ --cyx-on:var(--hivis); /* découvert / obtenu */ --cyx-off:var(--steel); /* pas encore obtenu, mais connu */ --cyx-secret:var(--cyan); /* secret non découvert */ } /* ========================================================================== 1. ACCUEIL — LA SYNTHÈSE DE PROGRESSION Un seul chiffre en tête : où en est la collection, tous catalogues réunis. ========================================================================== */ .cyx-sum{ margin:2px 0 14px;padding:14px 15px; border:1px solid color-mix(in srgb,var(--hivis) 32%,transparent); border-radius:var(--radius-sm,12px); background:linear-gradient(160deg, color-mix(in srgb,var(--hivis) 7%,transparent),rgba(7,21,34,.86))} .cyx-sum-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .cyx-sum-k{ font-family:var(--mono);font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--faint)} .cyx-sum-v{font-family:var(--disp);font-size:16px;color:var(--dim);line-height:1} .cyx-sum-v b{font-size:30px;font-weight:700;color:var(--hivis)} .cyx-sum-v i{font-style:normal;color:var(--faint);margin:0 3px} .cyx-sum-bar{margin-top:11px} .cyx-sum-l{font-size:12px;line-height:1.45;color:var(--dim);margin:8px 0 0} /* ========================================================================== 2. ACCUEIL — LES CARTES DE COLLECTION ========================================================================== */ .cyx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px} .cyx-grid--pair{grid-template-columns:1fr} #scCyclodex .cyx-col{ position:relative;display:flex;flex-direction:column;gap:7px; margin:0;padding:13px 13px 14px;text-align:left;cursor:pointer; border:1px solid var(--edge);border-radius:var(--radius-sm,12px); background:var(--glassgrad);color:var(--ink); transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease} #scCyclodex .cyx-col--wide{grid-column:1 / -1} #scCyclodex .cyx-col:hover{ border-color:color-mix(in srgb,var(--hivis) 45%,var(--edge));transform:translateY(-1px)} #scCyclodex .cyx-col:active{transform:scale(.995)} #scCyclodex .cyx-col:focus-visible{ outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.24))} /* Le chevron hérité de `.cy-card` n'a plus sa place : la carte entière est le bouton, et sur la carte large il chevauchait le compteur. */ #scCyclodex .cyx-col .cy-card-c{display:none} /* `nowrap` : le compteur reste ancré à droite de la première ligne même quand le nom passe sur deux lignes (« Titres de carrière » à 390 px). */ .cyx-col-h{display:flex;align-items:flex-start;gap:8px;flex-wrap:nowrap;min-width:0} .cyx-col-i{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;font-size:12px;line-height:1;color:var(--hivis)} .cyx-col-i .cy-wheel{opacity:1} .cyx-col-g{font-size:13px;line-height:1} .cyx-col-n{ flex:1 1 auto;min-width:0;font-family:var(--disp);font-size:14.5px;line-height:1.14; letter-spacing:.02em;text-transform:uppercase;color:var(--ink)} #scCyclodex .cyx-col--wide .cyx-col-n{font-size:18px} .cyx-col-c{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.14} .cyx-col-c b{font-size:15px;font-weight:700;color:var(--hivis)} .cyx-col-c i{font-style:normal;color:var(--faint);margin:0 2px} .cyx-col-bar{margin:0} #scCyclodex .cyx-col .cy-card-d{ display:block;margin:0;font-size:11.5px;line-height:1.4;color:var(--dim)} #scCyclodex .cyx-col--wide .cy-card-d{font-size:12.5px} #scCyclodex .cyx-col .cy-thumbs{margin-top:2px} /* Une collection complète se voit sans avoir à lire le compteur. */ #scCyclodex .cyx-col.is-full{ border-color:color-mix(in srgb,var(--hivis) 52%,transparent); background:linear-gradient(160deg, color-mix(in srgb,var(--hivis) 9%,transparent),rgba(7,21,34,.9))} .cy-coll-bar.is-full>i{background:var(--green)} /* L'aperçu de la dernière carrière garde son écriture, resserrée. */ #scCyclodex .cyx-col .cy-mini{margin-top:2px;padding-top:8px;font-size:11.5px} /* ========================================================================== 3. GRAMMAIRE COMMUNE DES ÉLÉMENTS COLLECTIONNABLES Quatre états, quatre traitements qui ne reposent jamais sur la seule couleur : le cadre, le fond, le marqueur et le texte d'état se cumulent. ========================================================================== */ #scCyclodex .cy-award{position:relative;transition:border-color .16s ease} /* NON DÉCOUVERT — lisible, jamais grisé au point d'être illisible. */ #scCyclodex .cy-award{opacity:1; border-color:var(--edge);background:rgba(8,24,39,.34);color:var(--dim)} #scCyclodex .cy-award .cy-award-t{color:var(--dim)} #scCyclodex .cy-award .cy-award-f{color:var(--faint)} /* DÉCOUVERT — plaque pleine, accent, texte à pleine encre. */ #scCyclodex .cy-award.is-on{ border-color:color-mix(in srgb,var(--cyx-on) 46%,transparent); background:linear-gradient(180deg,rgba(24,48,71,.9),rgba(8,24,39,.92))} #scCyclodex .cy-award.is-on .cy-award-t{color:var(--ink)} #scCyclodex .cy-award.is-on .cy-award-f{color:var(--cyx-on)} /* SECRET NON DÉCOUVERT — hachure discrète : on voit qu'il y a quelque chose. */ #scCyclodex .cy-award--masque{ border-style:dashed;border-color:color-mix(in srgb,var(--cyx-secret) 40%,transparent); background: repeating-linear-gradient(135deg, rgba(99,201,230,.05) 0 7px,transparent 7px 14px), rgba(8,24,39,.4)} #scCyclodex .cy-award--masque .cy-award-t{ font-family:var(--mono);letter-spacing:.3em;color:var(--cyx-secret)} #scCyclodex .cy-award--masque .cy-award-f{color:var(--cyx-secret);opacity:.8} /* ========================================================================== 4. LES 39 TITRES DE CARRIÈRE ========================================================================== */ .cyx-titre{ display:grid;grid-template-columns:30px minmax(0,1fr); column-gap:11px;row-gap:2px;align-items:start;padding:12px 13px} .cyx-titre-m{ grid-column:1;grid-row:1 / span 3;align-self:center; display:flex;align-items:center;justify-content:center; width:30px;height:30px;font-size:14px;line-height:1;border-radius:9px; color:var(--cyx-off);border:1px solid var(--edge);background:rgba(4,15,26,.5)} .cyx-titre .cy-award-t{grid-column:2;grid-row:1;font-size:15px;line-height:1.2} .cyx-titre-ty{ grid-column:2;grid-row:2;font-family:var(--mono);font-size:8.5px; letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} .cyx-titre .cy-award-f{grid-column:2;grid-row:3;margin-top:4px} .cyx-titre--on .cyx-titre-m{ color:var(--floor);border-color:var(--cyx-on);background:var(--cyx-on)} .cyx-titre--secret .cyx-titre-m{ color:var(--cyx-secret);border-style:dashed; border-color:color-mix(in srgb,var(--cyx-secret) 50%,transparent)} .cyx-titre--off .cyx-titre-m{color:var(--cyx-off)} /* ========================================================================== 5. ONGLETS ET FILTRES DES ACCOMPLISSEMENTS Six onglets ne tiennent pas sur une ligne à 360 px, et deux lignes repoussaient la première carte sous la ligne de flottaison : la barre défile, avec un dégradé qui dit qu'il y a une suite. ========================================================================== */ #scCyclodex .cyx-tabs{ display:flex;flex-wrap:nowrap;gap:6px;margin:0 -14px 12px;padding:2px 14px 8px; overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none;-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)} #scCyclodex .cyx-tabs::-webkit-scrollbar{display:none} #scCyclodex .cyx-tabs .cy-seg-b{ flex:0 0 auto;min-height:36px;padding:7px 13px;white-space:nowrap; font-family:var(--mono);font-size:10.5px;letter-spacing:.06em} #scCyclodex .cyx-tabs .cy-seg-b.is-on{ color:var(--floor);border-color:var(--hivis);background:var(--hivis);font-weight:700} /* Les filtres Tous / Obtenus / Manquants : mêmes pastilles, pleine largeur. */ #scCyclodex .cy-filters{gap:6px} #scCyclodex .cy-filters .cy-fseg-b{flex:1 1 auto;min-height:34px;height:auto;text-align:center} /* ========================================================================== 6. RENFORT DU DEX MÉTIERS Le registre du Lot 7.2 n'est pas refait : il est resserré là où la collection se lisait mal — l'inconnu doit intriguer, pas disparaître. ========================================================================== */ #scCyclodex .cy-e.is-unknown{opacity:.86} #scCyclodex .cy-e.is-unknown .cy-e-n{color:var(--steel)} #scCyclodex .cy-e.is-unknown .cy-e-mark{ background:repeating-linear-gradient(180deg, color-mix(in srgb,var(--steel) 55%,transparent) 0 3px,transparent 3px 6px)} /* Le compteur de la console : le nombre trouvé domine, le total accompagne. */ #scCyclodex .cy-dex-prog b{font-size:19px} /* La fiche d'un métier inconnu : l'invitation prend le pas sur le vide. */ #scCyclodex .cy-fiche.is-unknown .cy-fiche-d{ text-align:center;font-size:12px;color:var(--steel)} /* ========================================================================== 7. TABLETTE ET BUREAU — ET LA MESURE QUI COMPTE N'EST PAS CELLE DE LA FENÊTRE -------------------------------------------------------------------------- CORRECTIF V1.1-BETA-01. Ce bloc passait à trois colonnes dès que la FENÊTRE atteignait 600 px. Or la grille ne vit pas dans la fenêtre : elle vit dans la scène 9:16, dont la largeur vaut `min(100vw, 100dvh × 9/16)` et qui ne s'élargit jamais au-delà. Sur un PC 1366 × 768, la fenêtre fait 1366 px — la règle s'appliquait — mais la scène ne fait que 432 px. Trois colonnes dans 432 px donnaient des cartes de 125 px, dont 19 px pour le nom : « AMBITIONS » débordait de sa boîte et venait s'imprimer par-dessus « 0 / 40 ». C'est le défaut remonté du test humain, et il n'existait QUE sur grand écran — sur téléphone la fenêtre est sous 600 px, la règle n'a jamais été jouée. On ajoute donc la hauteur à la condition. La scène atteint 600 px de large quand, ET SEULEMENT QUAND, `100vw ≥ 600` et `100dvh × 0,5625 ≥ 600`, c'est-à-dire `100dvh ≥ 1066,67`. La condition ci-dessous est exactement celle-là, arrondie au pixel supérieur : elle est vraie quand la scène a réellement la place, fausse sinon. Conséquences mesurées, à décor et gameplay strictement inchangés : 1280 × 720 → scène 405 px → 2 colonnes, cartes 190 px (au lieu de 116) 1366 × 768 → scène 432 px → 2 colonnes, cartes 203 px (au lieu de 125) 1440 × 900 → scène 506 px → 2 colonnes, cartes 240 px (au lieu de 150) 1920 × 1080 → scène 608 px → 3 colonnes, cartes 190 px — la place y est 360/390/412 → inchangé : la condition n'était déjà pas remplie ========================================================================== */ @media (min-width:600px) and (min-height:1067px){ .cyx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .cyx-grid--pair{grid-template-columns:repeat(2,minmax(0,1fr))} .cyx-sum-v b{font-size:34px} .cyx-titre{grid-template-columns:34px minmax(0,1fr)} #scCyclodex .cyx-col{padding:15px 15px 16px} /* Là où la place existe, le compteur cesse de négocier sa largeur avec le nom : il prend sa propre colonne, calée à droite. En ligne (`flex`), le nom se comprimait le premier et finissait écrasé ; en grille, sa piste `minmax(0,1fr)` occupe tout ce qui reste et rien de plus. */ .cyx-col-h{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:start;column-gap:8px} .cyx-col-c{justify-self:end;text-align:right} } /* --- Très petits mobiles (360 × 800) -------------------------------------- */ @media (max-width:380px){ .cyx-grid{gap:8px} #scCyclodex .cyx-col{padding:11px 11px 12px} .cyx-col-n{font-size:13px} #scCyclodex .cyx-col--wide .cyx-col-n{font-size:16px} .cyx-col-c b{font-size:14px} .cyx-sum-v b{font-size:27px} } /* ========================================================================== 8. ACCESSIBILITÉ ET MOUVEMENT ========================================================================== */ @media (prefers-reduced-motion:reduce){ #scCyclodex .cyx-col,#scCyclodex .cy-award{transition:none} #scCyclodex .cyx-col:hover{transform:none} .cy-coll-bar>i{transition:none} } @media (prefers-contrast:more){ #scCyclodex .cyx-col,#scCyclodex .cy-award{border-color:var(--steel)} #scCyclodex .cy-award .cy-award-t{color:var(--ink)} .cyx-titre-ty{color:var(--dim)} } /* ============================================================================ 9. V1.1-04b — LES TROIS FONDS, ET DES PANNEAUX QU'ON TRAVERSE ---------------------------------------------------------------------------- Trois décors sont posés derrière le Cyclodex : l'accueil, le registre des Métiers, et un fond commun aux autres modules. `screen-cyclodex.js` choisit la clé d'asset selon la rubrique et la pose dans `--cyx-fond` ; cette feuille ne connaît aucun chemin d'image. LA RÈGLE QUI COMMANDE LE RESTE : on doit voir le décor à travers les panneaux, sans jamais perdre le texte. Deux leviers, et deux seulement : 1. un VOILE de lisibilité au-dessus de l'image, pas sous les panneaux ; 2. des panneaux en verre fumé — translucides, mais jamais transparents au point qu'un titre se pose sur un rivet ou sur un cadran lumineux. Les alphas ci-dessous ne sont pas des goûts : ce sont les valeurs les plus BASSES auxquelles les captures de recette restent lisibles aux trois tailles mobiles. Les baisser encore rendrait le décor plus présent et les compteurs moins sûrs — l'ordre de priorité du cahier est l'inverse. ========================================================================== */ /* Le décor. `position:fixed` se résout sur `#rcfStage` (qui porte `transform:translateZ(0)`) : le fond couvre donc exactement le cadre 9:16 et reste immobile pendant que le contenu défile — le même mécanisme que les fonds d'ambiance du jeu. Les images sont au format du cadre ; `cover` ne les déforme pas. */ #scCyclodex::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:var(--cyx-fond,none); background-size:cover;background-position:50% 50%;background-repeat:no-repeat} /* Le voile. Léger en haut — là où les décors sont déjà sombres et où vit le titre —, plus dense en bas, sous les listes longues. */ #scCyclodex::after{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:linear-gradient(180deg, rgba(4,11,19,.34) 0%, rgba(4,11,19,.50) 34%, rgba(4,11,19,.66) 72%, rgba(4,11,19,.76) 100%)} /* Le contenu repasse devant. Sans cela, le voile couvrirait l'écran. */ #scCyclodex > .cyclodex-wrap{position:relative;z-index:1} /* --- Les panneaux : verre fumé bleu nuit ---------------------------------- */ /* Un seul flou, déclaré une fois et réutilisé : multiplier les `backdrop-filter` sur une liste de 39 cartes coûte cher sur un téléphone d'entrée de gamme. Il est posé sur les GRANDS panneaux ; les cartes de liste s'en passent et tiennent par leur seule teinte. */ #scCyclodex .cyx-sum, #scCyclodex .cyx-col, #scCyclodex .cy-dex, #scCyclodex .cy-coll, #scCyclodex .cy-career, #scCyclodex .cy-detail, #scCyclodex .cy-complete{ -webkit-backdrop-filter:blur(9px) saturate(1.05); backdrop-filter:blur(9px) saturate(1.05)} #scCyclodex .cyx-sum{ border-color:color-mix(in srgb,var(--hivis) 38%,transparent); background:linear-gradient(160deg, color-mix(in srgb,var(--hivis) 9%,transparent),rgba(7,21,34,.50))} #scCyclodex .cyx-col{ border-color:rgba(170,201,226,.30); background:linear-gradient(165deg,rgba(18,44,68,.50),rgba(5,17,29,.56)); box-shadow:0 16px 40px -34px #000} #scCyclodex .cyx-col:hover{ border-color:color-mix(in srgb,var(--hivis) 52%,transparent); background:linear-gradient(165deg,rgba(24,56,84,.58),rgba(6,20,33,.62))} #scCyclodex .cyx-col.is-full{ border-color:color-mix(in srgb,var(--hivis) 56%,transparent); background:linear-gradient(160deg, color-mix(in srgb,var(--hivis) 11%,transparent),rgba(7,21,34,.56))} /* La console du registre occupe presque tout le cadre : si elle reste dense, le décor 2 ne se voit plus que sur ses marges. On l'ouvre donc davantage que les autres panneaux, et le contraste de l'index est mesuré dans la recette plutôt que supposé — c'est ce qui fixe la limite basse. */ #scCyclodex .cy-dex{background:rgba(6,18,30,.50);border-color:rgba(170,201,226,.36)} #scCyclodex .cy-dex-bar{background:rgba(9,26,42,.52)} #scCyclodex .cy-index{background:rgba(5,16,27,.34)} #scCyclodex .cy-index-h{background:rgba(9,26,42,.46)} #scCyclodex .cy-dex-filters{background:rgba(6,19,31,.40)} /* La ligne sélectionnée doit rester franche sur un fond qui vit derrière. */ #scCyclodex .cy-e.is-sel{background:linear-gradient(90deg,rgba(11,29,45,.86),rgba(7,21,34,.78))} /* La fiche du métier : l'écran encastré reste opaque, c'est lui qui donne sa netteté à l'illustration. Le rétro est autour de l'image, jamais dessus. */ #scCyclodex .cy-screen{background:rgba(4,11,19,.88)} #scCyclodex .cy-facts{background:rgba(6,20,33,.52)} /* --- Les cartes de liste -------------------------------------------------- */ #scCyclodex .cy-coll{ border-color:color-mix(in srgb,var(--hivis) 34%,transparent); background:linear-gradient(160deg, color-mix(in srgb,var(--hivis) 8%,transparent),rgba(7,21,34,.48))} #scCyclodex .cy-award{background:rgba(6,18,30,.46)} #scCyclodex .cy-award.is-on{ background:linear-gradient(180deg,rgba(24,48,71,.62),rgba(8,24,39,.62))} /* Le secret masqué : la hachure reste lisible sur un décor, mais elle a besoin d'un fond à elle — sur l'image nue, le motif se confondait avec les cadrans. */ #scCyclodex .cy-award--masque{ background: repeating-linear-gradient(135deg, rgba(99,201,230,.07) 0 7px,transparent 7px 14px), rgba(6,18,30,.52)} /* Le médaillon d'un titre. ATTENTION À LA SPÉCIFICITÉ : préfixer par `#scCyclodex` fait gagner cette règle contre `.cyx-titre--on .cyx-titre-m` du §4, et les titres obtenus avaient perdu leur pastille pleine. Les trois états sont donc redéclarés ici, au même niveau. */ #scCyclodex .cyx-titre-m{background:rgba(4,13,22,.58)} #scCyclodex .cyx-titre--on .cyx-titre-m{ color:var(--floor);border-color:var(--cyx-on);background:var(--cyx-on)} #scCyclodex .cyx-titre--secret .cyx-titre-m{background:rgba(4,13,22,.42)} #scCyclodex .cy-career{background:linear-gradient(180deg,rgba(19,40,61,.56),rgba(7,22,37,.62))} #scCyclodex .cy-detail{background:rgba(9,26,42,.52);border-color:rgba(170,201,226,.30)} #scCyclodex .cy-step, #scCyclodex .cy-chip, #scCyclodex .cy-fav-b{background:rgba(8,24,39,.46)} #scCyclodex .cy-complete{background:color-mix(in srgb,var(--hivis) 9%,rgba(7,21,34,.46))} /* --- Les contrôles ------------------------------------------------------- */ /* Un bouton trop translucide devient confus : les segments inactifs gardent assez de matière pour se lire comme des boutons, et l'actif reste plein. */ #scCyclodex .cy-seg-b{background:rgba(8,24,39,.52)} #scCyclodex .cy-seg-b.is-on{background:color-mix(in srgb,var(--hivis) 18%,rgba(8,24,39,.62))} #scCyclodex .cyx-tabs .cy-seg-b.is-on{background:var(--hivis)} #scCyclodex .cy-fseg-b{background:rgba(7,21,34,.54)} #scCyclodex .cy-fseg-b.is-on{background:var(--hivis)} #scCyclodex .cy-fsel{background-color:rgba(7,21,34,.60)} #scCyclodex .l12-nav-back{background:rgba(7,21,34,.54)} #scCyclodex .cy-dex-back{background:rgba(7,21,34,.60)} /* La barre d'onglets défilante estompait le décor avec un dégradé opaque : sur un fond visible, il se voyait. Elle n'a plus de fond propre. */ #scCyclodex .cyx-tabs{background:transparent} /* --- L'en-tête d'accueil -------------------------------------------------- */ /* Le titre se pose sur la partie haute du décor, la plus contrastée des trois images. Une ombre portée discrète le décolle sans caisson. */ #scCyclodex .cy-title, #scCyclodex .cy-sub, #scCyclodex .cy-home-title .eyebrow{ text-shadow:0 2px 10px rgba(2,8,14,.72)} /* --- Accessibilité -------------------------------------------------------- */ /* Contraste renforcé demandé : on referme les panneaux et on efface le décor derrière eux plutôt que de forcer la taille du texte. */ @media (prefers-contrast:more){ #scCyclodex::after{background:rgba(4,11,19,.86)} #scCyclodex .cyx-col{background:linear-gradient(165deg,rgba(18,44,68,.9),rgba(5,17,29,.94))} #scCyclodex .cy-award{background:rgba(6,18,30,.9)} #scCyclodex .cy-dex{background:rgba(6,18,30,.94)} #scCyclodex .cy-coll,#scCyclodex .cyx-sum{background:rgba(9,26,42,.9)} } /* Le flou est un confort, pas une information : il tombe avec le mouvement. */ @media (prefers-reduced-motion:reduce){ #scCyclodex .cyx-sum,#scCyclodex .cyx-col,#scCyclodex .cy-dex, #scCyclodex .cy-coll,#scCyclodex .cy-career,#scCyclodex .cy-detail, #scCyclodex .cy-complete{-webkit-backdrop-filter:none;backdrop-filter:none} }