/* ========================================================================== SALMONID — Jetons du design system -------------------------------------------------------------------------- Direction artistique : « L'archive et la rivière ». La rigueur froide d'un catalogue de spécimens posée sur une photographie chaude. Zéro coin arrondi, zéro ombre portée, contraste d'échelle extrême. Ce fichier ne met en page RIEN. Il ne fait que déclarer des variables et quelques composants signature. Toute la mise en page vit dans Elementor. Les modes sont pilotés par la taxonomie « Univers » (voir SID_Worlds). ========================================================================== */ :root { /* --- Palette : mode Atlantic (défaut) ------------------------------- */ --sid-bg: #F3F0E7; /* Bone */ --sid-ink: #111615; /* Ink */ --sid-depth: #102C2B; /* Deep River */ --sid-accent: #D56C58; /* Salmon — jamais en aplat */ --sid-accent-text: #B4472F; /* Variante lisible : 4,75:1 sur Bone */ --sid-secondary: #5B7370; /* River Glass */ /* Dérivés — recalculés automatiquement par mode via color-mix. */ --sid-ink-soft: color-mix(in srgb, var(--sid-ink) 62%, var(--sid-bg)); --sid-rule: color-mix(in srgb, var(--sid-ink) 18%, var(--sid-bg)); --sid-rule-strong: color-mix(in srgb, var(--sid-ink) 42%, var(--sid-bg)); /* --- Typographie ---------------------------------------------------- */ /* Les familles réelles sont branchées dans Elementor > Polices globales (ou auto-hébergées). Ici : les piles de repli et l'échelle. */ --sid-font-display: "Instrument Serif", "Fraunces", Georgia, "Times New Roman", serif; --sid-font-serif: "Fraunces", Georgia, "Times New Roman", serif; --sid-font-ui: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sid-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sid-text-display-xl: clamp(3.5rem, 12vw, 11rem); --sid-text-display: clamp(2.75rem, 7vw, 6rem); --sid-text-h1: clamp(2.25rem, 4.5vw, 3.75rem); --sid-text-h2: clamp(1.75rem, 3vw, 2.5rem); --sid-text-h3: clamp(1.375rem, 2vw, 1.75rem); --sid-text-h4: 1.25rem; --sid-text-body-lg: 1.1875rem; --sid-text-body: 1.0625rem; --sid-text-small: 0.9375rem; --sid-text-caption: 0.8125rem; --sid-text-id: 0.6875rem; --sid-leading-tight: 1.02; --sid-leading-snug: 1.18; --sid-leading-body: 1.62; --sid-tracking-display: -0.02em; --sid-tracking-id: 0.16em; --sid-tracking-eyebrow: 0.22em; /* --- Espacement (base 8) -------------------------------------------- */ --sid-space-1: 4px; --sid-space-2: 8px; --sid-space-3: 12px; --sid-space-4: 16px; --sid-space-5: 24px; --sid-space-6: 32px; --sid-space-7: 48px; --sid-space-8: 64px; --sid-space-9: 96px; --sid-space-10: 128px; --sid-space-11: 192px; /* --- Conteneurs ------------------------------------------------------ */ --sid-container-wide: 1440px; --sid-container-default: 1240px; --sid-container-reading: 720px; --sid-gutter: 48px; /* --- Traits et formes ------------------------------------------------ */ --sid-radius: 0; /* Non négociable : c'est le signal anti-gabarit. */ --sid-hairline: 1px; --sid-mark: 14px; /* Longueur des repères de coupe. */ /* --- Mouvement ------------------------------------------------------- */ --sid-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --sid-duration: 520ms; } /* -------------------------------------------------------------------------- Modes de palette — appliqués sur par SID_Worlds. -------------------------------------------------------------------------- */ .sid-mode-atlantic { --sid-bg: #F3F0E7; --sid-ink: #111615; --sid-depth: #102C2B; --sid-accent: #D56C58; --sid-accent-text: #B4472F; --sid-secondary: #5B7370; } .sid-mode-peat { --sid-bg: #0B0D0C; --sid-ink: #E8E4D9; --sid-depth: #1C1A16; --sid-accent: #B77832; --sid-accent-text: #C98A45; --sid-secondary: #8C5637; } .sid-mode-paper { --sid-bg: #FBFAF7; --sid-ink: #1A1D1B; --sid-depth: #E4E7E4; --sid-accent: #7E9083; --sid-accent-text: #5E7365; --sid-secondary: #D9D6CB; } .sid-mode-wild { --sid-bg: #102C2B; --sid-ink: #E8ECE8; --sid-depth: #0A1B1A; --sid-accent: #D56C58; --sid-accent-text: #E08975; --sid-secondary: #5B7370; } /* Repli pour les navigateurs sans color-mix() : les dérivés retombent sur des valeurs fixes plutôt que de disparaître. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { :root { --sid-ink-soft: rgba(17, 22, 21, 0.66); --sid-rule: rgba(17, 22, 21, 0.18); --sid-rule-strong: rgba(17, 22, 21, 0.42); } .sid-mode-peat, .sid-mode-wild { --sid-ink-soft: rgba(232, 228, 217, 0.66); --sid-rule: rgba(232, 228, 217, 0.20); --sid-rule-strong: rgba(232, 228, 217, 0.45); } } /* ========================================================================== Composants signature Ce sont eux qui rendent SALMONID reconnaissable sans le logo. ========================================================================== */ /* --- L'étiquette ID : RIV-014 ---------------------------------------- */ .sid-id { display: inline-block; font-family: var(--sid-font-mono); font-size: var(--sid-text-id); font-weight: 500; letter-spacing: var(--sid-tracking-id); text-transform: uppercase; color: var(--sid-accent-text, var(--sid-accent)); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } .sid-id--muted { color: var(--sid-ink-soft); } .sid-id--ink { color: var(--sid-ink); } /* --- Le sur-titre --------------------------------------------------- */ .sid-eyebrow { font-family: var(--sid-font-mono); font-size: var(--sid-text-id); letter-spacing: var(--sid-tracking-eyebrow); text-transform: uppercase; color: var(--sid-ink-soft); line-height: 1; } /* --- La légende de photo, avec coordonnées --------------------------- */ .sid-caption { font-family: var(--sid-font-mono); font-size: var(--sid-text-caption); line-height: 1.5; color: var(--sid-ink-soft); text-align: left; margin-top: var(--sid-space-3); padding-left: var(--sid-space-3); border-left: var(--sid-hairline) solid var(--sid-rule-strong); } .sid-caption__coords { display: block; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--sid-accent); } /* --- Les repères de coupe autour d'une image vedette ------------------ */ .sid-frame { position: relative; display: block; } .sid-frame::before, .sid-frame::after { content: ""; position: absolute; width: var(--sid-mark); height: var(--sid-mark); pointer-events: none; border-color: var(--sid-rule-strong); border-style: solid; } .sid-frame::before { top: calc(var(--sid-space-2) * -1); left: calc(var(--sid-space-2) * -1); border-width: var(--sid-hairline) 0 0 var(--sid-hairline); } .sid-frame::after { bottom: calc(var(--sid-space-2) * -1); right: calc(var(--sid-space-2) * -1); border-width: 0 var(--sid-hairline) var(--sid-hairline) 0; } /* --- La case de substitution : T[HÉ]KARA ----------------------------- */ .sid-slot { display: inline-block; padding: 0.06em 0.16em; margin: 0 0.04em; border: var(--sid-hairline) solid currentColor; line-height: 1; } /* --- Le filet ------------------------------------------------------- */ .sid-rule { border: 0; border-top: var(--sid-hairline) solid var(--sid-rule); margin: var(--sid-space-7) 0; } /* --- Les grands titres ------------------------------------------------ */ .sid-display-xl, .sid-display { font-family: var(--sid-font-display); line-height: var(--sid-leading-tight); letter-spacing: var(--sid-tracking-display); color: var(--sid-ink); margin: 0; } .sid-display-xl { font-size: var(--sid-text-display-xl); } .sid-display { font-size: var(--sid-text-display); } /* --- Le badge DEMO, visible tant que la photo n'est pas validée ------- */ .sid-demo { display: inline-block; font-family: var(--sid-font-mono); font-size: var(--sid-text-id); letter-spacing: var(--sid-tracking-id); text-transform: uppercase; padding: var(--sid-space-1) var(--sid-space-2); border: var(--sid-hairline) solid var(--sid-accent); color: var(--sid-accent); background: transparent; } /* ========================================================================== Accessibilité ========================================================================== */ .sid-mode-atlantic, .sid-mode-peat, .sid-mode-paper, .sid-mode-wild { color-scheme: light dark; } :where(.sid-id, .sid-eyebrow, .sid-caption, .sid-display, .sid-display-xl):focus-visible { outline: 2px solid var(--sid-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { :root { --sid-duration: 1ms; } .sid-frame::before, .sid-frame::after { transition: none !important; } } /* -------------------------------------------------------------------------- Mobile — la marge se resserre, jamais la typographie. -------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --sid-gutter: 20px; } } /* ========================================================================== Pont Elementor — LE point d'intégration critique. -------------------------------------------------------------------------- Elementor écrit ses couleurs globales sur :root avec des valeurs fixes. Sans ce pont, un titre coloré « Primaire » resterait sombre en mode Peat (fond noir) et deviendrait illisible. On redéclare donc les 4 couleurs système d'Elementor au niveau de , où la classe de mode s'applique. Les déclarations sur body l'emportent sur :root pour tout ce qui est à l'intérieur. Conséquence pratique : dans Elementor, on choisit une couleur GLOBALE (Primaire / Secondaire / Texte / Accentuation) et elle suit automatiquement l'univers du contenu. Choisir un code hexadécimal en dur casserait ça. ========================================================================== */ .sid-mode-atlantic, .sid-mode-peat, .sid-mode-paper, .sid-mode-wild { --e-global-color-primary: var(--sid-ink); --e-global-color-secondary: var(--sid-depth); --e-global-color-text: var(--sid-ink-soft); --e-global-color-accent: var(--sid-accent); } /* ========================================================================== PHASE 2 — Classes posées par l'installateur. Elles ne font que traduire le design system : aucune mise en page n'est imposée ici, Elementor garde la main sur tout ce qui est structurel. ========================================================================== */ /* --- Bandes à mode local ---------------------------------------------- */ .sid-band--peat, .sid-band--paper, .sid-band--wild { color: var(--sid-ink); } .sid-band--peat { --sid-bg: #0B0D0C; --sid-ink: #E8E4D9; --sid-depth: #1C1A16; --sid-accent: #B77832; --sid-accent-text: #C98A45; --sid-secondary: #8C5637; --sid-ink-soft: rgba(232, 228, 217, 0.66); --sid-rule: rgba(232, 228, 217, 0.20); --sid-rule-strong: rgba(232, 228, 217, 0.45); } .sid-band--paper { --sid-bg: #FBFAF7; --sid-ink: #1A1D1B; --sid-depth: #E4E7E4; --sid-accent: #7E9083; --sid-accent-text: #5E7365; --sid-secondary: #D9D6CB; } .sid-band--wild { --sid-bg: #102C2B; --sid-ink: #E8ECE8; --sid-depth: #0A1B1A; --sid-accent: #D56C58; --sid-accent-text: #E08975; --sid-secondary: #5B7370; --sid-ink-soft: rgba(232, 236, 232, 0.68); --sid-rule: rgba(232, 236, 232, 0.20); --sid-rule-strong: rgba(232, 236, 232, 0.45); } /* Le pont Elementor s'applique aussi au niveau de la bande. */ .sid-band--peat, .sid-band--paper, .sid-band--wild { --e-global-color-primary: var(--sid-ink); --e-global-color-secondary: var(--sid-depth); --e-global-color-text: var(--sid-ink-soft); --e-global-color-accent: var(--sid-accent); } .sid-band--peat :where(h1,h2,h3,h4,p,li,a), .sid-band--paper :where(h1,h2,h3,h4,p,li,a), .sid-band--wild :where(h1,h2,h3,h4,p,li,a) { color: var(--sid-ink); } /* --- Typographie de bande --------------------------------------------- */ .sid-band :where(h1, h2) { font-family: var(--sid-font-display); line-height: var(--sid-leading-tight); letter-spacing: var(--sid-tracking-display); } .sid-block-title { font-family: var(--sid-font-serif); font-size: var(--sid-text-h3); line-height: var(--sid-leading-snug); } .sid-lede p { font-family: var(--sid-font-ui); font-size: var(--sid-text-body-lg); line-height: var(--sid-leading-body); max-width: 62ch; } .sid-lede--wide p { max-width: 44ch; font-size: 1.3rem; } /* --- Le héros ---------------------------------------------------------- */ /* Le sur-titre et le titre partagent un seul champ, séparés par un saut de ligne. ::first-line habille automatiquement la première ligne en monospace : l'éditeur n'a qu'un champ à remplir, et la hiérarchie reste juste. */ .sid-hero .elementor-slide-heading { white-space: pre-line; font-family: var(--sid-font-display); font-size: clamp(2.5rem, 6.4vw, 5.75rem); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: var(--sid-space-4); } .sid-hero .elementor-slide-heading::first-line { font-family: var(--sid-font-mono); font-size: 0.7rem; letter-spacing: var(--sid-tracking-id); line-height: 3; color: var(--sid-accent); } .sid-hero .elementor-slide-description { font-family: var(--sid-font-ui); font-size: var(--sid-text-body-lg); max-width: 46ch; opacity: 0.88; } .sid-hero--static .sid-display-xl { color: #F3F0E7; } .sid-hero--static .sid-eyebrow { color: var(--sid-accent); } /* --- En-tête ----------------------------------------------------------- */ .sid-header { backdrop-filter: saturate(140%) blur(10px); border-color: var(--sid-rule) !important; } .sid-wordmark { font-family: var(--sid-font-display); font-size: 1.6rem; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; } .sid-wordmark a { color: var(--sid-ink); text-decoration: none; } .sid-header-count { font-size: var(--sid-text-id); } /* --- Pied de page — toujours en tourbe, jamais soumis au mode ---------- */ .sid-footer-wordmark { font-size: clamp(3rem, 11vw, 9rem); line-height: 0.9; color: var(--sid-ink); } .sid-footer-bottom { border-color: var(--sid-rule) !important; gap: var(--sid-space-4); } /* --- Listes de liens ---------------------------------------------------- */ .sid-links .elementor-icon-list-item a, .sid-links .elementor-icon-list-text { font-family: var(--sid-font-ui); font-size: var(--sid-text-small); color: var(--sid-ink-soft); text-decoration: none; transition: color var(--sid-duration) var(--sid-ease); } .sid-links .elementor-icon-list-item a:hover .elementor-icon-list-text, .sid-links .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--sid-accent); } .sid-links--inline .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: var(--sid-space-5); } /* --- Boutons ----------------------------------------------------------- */ .sid-btn .elementor-button { font-family: var(--sid-font-mono); font-size: var(--sid-text-id); letter-spacing: var(--sid-tracking-id); text-transform: uppercase; border-radius: 0; border: var(--sid-hairline) solid var(--sid-accent); background: transparent; color: var(--sid-accent-text, var(--sid-accent)); padding: 14px 22px; transition: background var(--sid-duration) var(--sid-ease), color var(--sid-duration) var(--sid-ease); } .sid-btn .elementor-button:hover { background: var(--sid-accent); color: var(--sid-bg); } /* --- Cartes d'univers --------------------------------------------------- */ .sid-world-card img { width: 100%; height: auto; display: block; filter: grayscale(0.15); transition: filter var(--sid-duration) var(--sid-ease); } .sid-world-card:hover img { filter: grayscale(0); } /* --- Emplacements à brancher (direct, formulaire) ---------------------- */ .sid-live-slot, .sid-form-slot { border: var(--sid-hairline) dashed var(--sid-rule-strong); padding: var(--sid-space-8) var(--sid-space-5); text-align: center; color: var(--sid-ink-soft); } .sid-live-slot p, .sid-form-slot p { margin: var(--sid-space-3) 0 0; font-size: var(--sid-text-small); } /* --- Blocs éditoriaux --------------------------------------------------- */ .sid-block { border-color: var(--sid-rule) !important; } /* --- Mobile ------------------------------------------------------------- */ @media (max-width: 767px) { .sid-hero .elementor-slide-heading { font-size: clamp(2rem, 9vw, 2.75rem); } .sid-footer-wordmark { font-size: clamp(2.5rem, 16vw, 4rem); } .sid-header-bar { row-gap: var(--sid-space-3); } } /* ========================================================================== PHASE 3 — Le système éditorial. Styles des quatre widgets du graphe et des gabarits de fiche. ========================================================================== */ /* --- Contenus liés : le graphe rendu visible ---------------------------- */ .sid-rel__heading { margin-bottom: var(--sid-space-4); } .sid-rel--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sid-space-5); } .sid-rel--list { display: flex; flex-direction: column; gap: var(--sid-space-3); } .sid-rel--inline{ display: flex; flex-wrap: wrap; gap: var(--sid-space-3); } .sid-rel__item { display: flex; flex-direction: column; gap: var(--sid-space-2); text-decoration: none; color: var(--sid-ink); padding-bottom: var(--sid-space-4); border-bottom: var(--sid-hairline) solid var(--sid-rule); transition: border-color var(--sid-duration) var(--sid-ease); } .sid-rel__item:hover { border-bottom-color: var(--sid-accent); } .sid-rel__media { display: block; overflow: hidden; } .sid-rel__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transform: scale(1); transition: transform 900ms var(--sid-ease); } .sid-rel__item:hover .sid-rel__media img { transform: scale(1.03); } .sid-rel__title { font-family: var(--sid-font-serif); font-size: var(--sid-text-h4); line-height: var(--sid-leading-snug); } .sid-rel__excerpt { font-family: var(--sid-font-ui); font-size: var(--sid-text-small); color: var(--sid-ink-soft); line-height: 1.5; } .sid-rel--inline .sid-rel__item, .sid-rel--list .sid-rel__item { flex-direction: row; align-items: baseline; gap: var(--sid-space-3); } .sid-rel--inline .sid-rel__item { border-bottom: 0; border: var(--sid-hairline) solid var(--sid-rule); padding: var(--sid-space-2) var(--sid-space-3); } /* --- La fiche ID : l'objet signature ------------------------------------ */ .sid-card-id { border: var(--sid-hairline) solid var(--sid-rule-strong); padding: var(--sid-space-6); max-width: 620px; background: transparent; } .sid-card-id__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--sid-space-4); border-bottom: var(--sid-hairline) solid var(--sid-rule-strong); } .sid-card-id__brand { font-family: var(--sid-font-display); font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sid-ink); } .sid-card-id__num { font-family: var(--sid-font-mono); font-size: 1.1rem; letter-spacing: var(--sid-tracking-id); color: var(--sid-accent-text, var(--sid-accent)); font-variant-numeric: tabular-nums; } .sid-card-id__rows { display: grid; grid-template-columns: 96px 1fr; gap: var(--sid-space-3) var(--sid-space-5); margin: var(--sid-space-5) 0 0; } .sid-card-id__label { font-family: var(--sid-font-mono); font-size: var(--sid-text-id); letter-spacing: var(--sid-tracking-id); color: var(--sid-ink-soft); margin: 0; padding-top: 0.2em; } .sid-card-id__value { font-family: var(--sid-font-serif); font-size: var(--sid-text-body); margin: 0; color: var(--sid-ink); } .sid-card-id__value a { color: inherit; text-decoration: none; border-bottom: var(--sid-hairline) solid var(--sid-rule-strong); } .sid-card-id__value a:hover { border-bottom-color: var(--sid-accent); color: var(--sid-accent); } .sid-card-id__empty { color: var(--sid-ink-soft); } .sid-card-id__url { margin-top: var(--sid-space-5); padding-top: var(--sid-space-4); border-top: var(--sid-hairline) solid var(--sid-rule); display: flex; flex-direction: column; gap: var(--sid-space-2); } .sid-card-id__url a { text-decoration: none; font-size: var(--sid-text-caption); } /* Impression : la carte doit sortir juste, seule sur la page. */ @media print { .sid-header, .sid-footer, .sid-band--relations, .sid-band--letter { display: none !important; } .sid-card-id { border-color: #000; color: #000; page-break-inside: avoid; } .sid-card-id__num, .sid-card-id__value a { color: #000; } } /* --- Caractéristiques ---------------------------------------------------- */ .sid-facts { margin: 0; } .sid-facts--rows { display: grid; grid-template-columns: 1fr; gap: var(--sid-space-4); } .sid-facts--inline { display: flex; flex-wrap: wrap; gap: var(--sid-space-5); } .sid-facts__label { font-family: var(--sid-font-mono); font-size: var(--sid-text-id); letter-spacing: var(--sid-tracking-id); text-transform: uppercase; color: var(--sid-ink-soft); margin: 0 0 var(--sid-space-1); } .sid-facts__value { font-family: var(--sid-font-ui); font-size: var(--sid-text-small); line-height: 1.55; margin: 0; color: var(--sid-ink); } /* --- Étiquettes de taxonomie -------------------------------------------- */ .sid-terms { display: flex; flex-wrap: wrap; gap: var(--sid-space-2); } .sid-chip { font-family: var(--sid-font-mono); font-size: var(--sid-text-id); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border: var(--sid-hairline) solid var(--sid-rule-strong); color: var(--sid-ink-soft); text-decoration: none; transition: color var(--sid-duration) var(--sid-ease), border-color var(--sid-duration) var(--sid-ease); } a.sid-chip:hover { color: var(--sid-accent); border-color: var(--sid-accent); } /* --- Corps de fiche ------------------------------------------------------ */ .sid-prose { font-family: var(--sid-font-ui); font-size: var(--sid-text-body-lg); line-height: var(--sid-leading-body); } .sid-prose p { max-width: 68ch; margin-bottom: var(--sid-space-5); } .sid-prose :where(h2, h3) { font-family: var(--sid-font-serif); margin: var(--sid-space-7) 0 var(--sid-space-3); } .sid-aside { position: sticky; top: 96px; align-self: flex-start; } @media (max-width: 1024px) { .sid-aside { position: static; } } /* --- Bandeau de démonstration -------------------------------------------- */ .sid-demo-notice { font-family: var(--sid-font-mono); font-size: var(--sid-text-caption); letter-spacing: 0.04em; border-left: 3px solid var(--sid-accent); padding: var(--sid-space-3) var(--sid-space-4); color: var(--sid-ink-soft); background: transparent; } /* --- Message d'éditeur (jamais visible sur le site) --------------------- */ .sid-widget-notice { border: var(--sid-hairline) dashed var(--sid-rule-strong); padding: var(--sid-space-4); color: var(--sid-ink-soft); } .sid-widget-notice p { margin: var(--sid-space-2) 0 0; font-size: var(--sid-text-small); } /* --- Cartes de boucle ---------------------------------------------------- */ .sid-loop__title { font-family: var(--sid-font-serif); font-size: var(--sid-text-h4); line-height: var(--sid-leading-snug); } .sid-loop__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; display: block; } .sid-loop--editorial .sid-loop__media img { aspect-ratio: 3 / 2; } .sid-loop__excerpt { font-size: var(--sid-text-small); color: var(--sid-ink-soft); } /* --- Barre de filtres ---------------------------------------------------- */ .sid-filter .elementor-icon-list-items { gap: var(--sid-space-4); } .sid-filter .elementor-icon-list-text { font-family: var(--sid-font-mono) !important; font-size: var(--sid-text-id) !important; letter-spacing: 0.1em; text-transform: uppercase; } @media (max-width: 767px) { .sid-rel--grid { grid-template-columns: 1fr !important; } .sid-card-id__rows { grid-template-columns: 1fr; gap: var(--sid-space-1) 0; } .sid-card-id { padding: var(--sid-space-5); } } /* --- PHASE 4 — Filtres de recherche -------------------------------------- */ .sid-terms--filters { gap: var(--sid-space-2); margin-top: var(--sid-space-2); } .sid-chip--active { color: var(--sid-bg); background: var(--sid-accent); border-color: var(--sid-accent); } /* ========================================================================== PHASE 5 — Impression, code QR, accessibilité. ========================================================================== */ /* --- Lien d'évitement : premier élément focalisable de la page ---------- */ .sid-skip { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: var(--sid-space-3) var(--sid-space-4); background: var(--sid-ink); color: var(--sid-bg); font-family: var(--sid-font-mono); font-size: var(--sid-text-id); letter-spacing: var(--sid-tracking-id); text-transform: uppercase; text-decoration: none; } .sid-skip:focus { left: var(--sid-space-3); top: var(--sid-space-3); } /* Un état de focus visible partout, jamais retiré. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--sid-accent); outline-offset: 3px; } /* --- Code QR ------------------------------------------------------------ */ .sid-qr { display: inline-block; width: 160px; max-width: 100%; line-height: 0; } .sid-qr svg { display: block; width: 100%; height: auto; } .sid-qr-block { display: flex; } .sid-qr-url { display: inline-block; margin-top: var(--sid-space-2); text-decoration: none; } /* --- Impression de la carte ID ------------------------------------------ */ @media print { .sid-skip, .sid-nav, .sid-header-count, .sid-btn, .sid-terms { display: none !important; } .sid-qr { width: 34mm !important; } .sid-qr path { fill: #000 !important; } .sid-card-id { border-color: #000; color: #000; max-width: none; page-break-inside: avoid; } body { background: #fff !important; color: #000 !important; } } /* ========================================================================== PHASE 6 — L'Atelier. ========================================================================== */ .sid-calc { border: var(--sid-hairline) solid var(--sid-rule-strong); padding: var(--sid-space-5); display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr); gap: var(--sid-space-6); } .sid-calc__form { display: flex; flex-direction: column; gap: var(--sid-space-4); } .sid-calc__field { display: flex; flex-direction: column; gap: var(--sid-space-2); } .sid-calc__field select, .sid-calc__field input { font-family: var(--sid-font-mono); font-size: var(--sid-text-small); color: var(--sid-ink); background: transparent; border: 0; border-bottom: var(--sid-hairline) solid var(--sid-rule-strong); border-radius: 0; padding: var(--sid-space-2) 0; width: 100%; } .sid-calc__field select:focus, .sid-calc__field input:focus { border-bottom-color: var(--sid-accent); } .sid-calc__out { display: block; } .sid-calc__metrics { display: flex; flex-wrap: wrap; gap: var(--sid-space-5); align-items: baseline; margin-bottom: var(--sid-space-4); } .sid-calc__metric strong { display: block; font-family: var(--sid-font-display); font-size: var(--sid-text-h3); line-height: 1; font-variant-numeric: tabular-nums; margin-top: var(--sid-space-1); } .sid-calc__metric em { font-style: normal; font-family: var(--sid-font-mono); font-size: 0.42em; margin-left: 0.3em; color: var(--sid-ink-soft); } .sid-calc__metric--big strong { font-size: clamp(2.5rem, 5vw, 3.75rem); color: var(--sid-accent-text, var(--sid-accent)); } .sid-calc__line, .sid-calc__verdict { font-family: var(--sid-font-ui); font-size: var(--sid-text-small); line-height: 1.55; margin: 0 0 var(--sid-space-3); } .sid-calc__verdict { border-left: 3px solid var(--sid-accent); padding-left: var(--sid-space-3); } .sid-calc__verdict--eleve, .sid-calc__verdict--critique { border-left-width: 5px; font-weight: 600; } .sid-calc__actions { font-family: var(--sid-font-ui); font-size: var(--sid-text-small); line-height: 1.55; padding-left: var(--sid-space-5); margin: 0 0 var(--sid-space-4); } .sid-calc__actions li { margin-bottom: var(--sid-space-2); } .sid-calc__notes { border-top: var(--sid-hairline) solid var(--sid-rule); padding-top: var(--sid-space-3); } .sid-calc__notes summary { font-family: var(--sid-font-mono); font-size: var(--sid-text-id); letter-spacing: var(--sid-tracking-id); text-transform: uppercase; color: var(--sid-ink-soft); cursor: pointer; } .sid-calc__notes ul { font-family: var(--sid-font-ui); font-size: var(--sid-text-caption); line-height: 1.5; color: var(--sid-ink-soft); margin: var(--sid-space-3) 0 0; padding-left: var(--sid-space-5); } @media (max-width: 767px) { .sid-calc { grid-template-columns: 1fr; padding: var(--sid-space-4); gap: var(--sid-space-5); } } /* --- PHASE 7 — La chaîne d'assemblage ------------------------------------ */ .sid-chain { list-style: none; margin: 0 0 var(--sid-space-5); padding: 0; counter-reset: sid-link; } .sid-chain__link { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sid-space-3); padding: var(--sid-space-2) 0 var(--sid-space-2) var(--sid-space-5); border-bottom: var(--sid-hairline) solid var(--sid-rule); position: relative; counter-increment: sid-link; } .sid-chain__link::before { content: counter( sid-link ); position: absolute; left: 0; font-family: var(--sid-font-mono); font-size: var(--sid-text-id); color: var(--sid-ink-soft); } /* Le maillon dérivé se distingue : c'est lui que le calcul produit. */ .sid-chain__link--leader { border-bottom-color: var(--sid-accent); border-left: 2px solid var(--sid-accent); padding-left: var(--sid-space-4); margin-left: var(--sid-space-3); } .sid-chain__link--leader::before { left: calc(var(--sid-space-3) * -1); } .sid-chain__label { font-family: var(--sid-font-ui); font-size: var(--sid-text-small); } .sid-chain__detail { font-family: var(--sid-font-mono); font-size: var(--sid-text-id); color: var(--sid-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; } .sid-check { list-style: none; padding-left: var(--sid-space-4); border-left: 2px solid var(--sid-rule); } .sid-check--warning { border-left-color: var(--sid-accent); } .sid-check--error { border-left-color: var(--sid-accent); font-weight: 600; } .sid-checks { padding-left: 0; } .sid-upgrade { border: var(--sid-hairline) dashed var(--sid-rule-strong); padding: var(--sid-space-4); margin-top: var(--sid-space-4); } .sid-upgrade ul { font-family: var(--sid-font-ui); font-size: var(--sid-text-small); line-height: 1.5; margin: var(--sid-space-3) 0; padding-left: var(--sid-space-5); } .sid-upgrade a { text-decoration: none; } /* ========================================================================== PHASE 8 — « Lire l'eau ». Le manifeste rendu visible : des relevés se posent sur la rivière, puis s'effacent au profit du titre. ========================================================================== */ .sid-band--read { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Voile de lecture : sans lui, un relevé clair sur une eau claire disparaît. */ .sid-band--read::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 44, 43, .35) 0%, rgba(16, 44, 43, .72) 100%); pointer-events: none; } .sid-read__scene { position: absolute !important; inset: 0; pointer-events: none; transition: opacity 900ms ease; } .sid-read-done .sid-read__scene { opacity: 0; } /* --- Une étiquette de relevé ------------------------------------------- */ .sid-read__tag { position: absolute !important; width: auto !important; opacity: 0; transform: translateY(10px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1); padding-left: var(--sid-space-4) !important; } .sid-read__tag.sid-in { opacity: 1; transform: none; } /* Le point et le filet : c'est le trait qui relie la mesure à l'eau, et c'est lui qui fait basculer la scène de « texte sur image » à « analyse ». */ .sid-read__tag::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--sid-accent); box-shadow: 0 0 0 4px rgba(213, 108, 88, .22); } .sid-read__tag::after { content: ""; position: absolute; left: 3px; top: calc(.55em + 6px); width: 1px; height: 0; background: linear-gradient(180deg, var(--sid-accent), transparent); transition: height 700ms ease 200ms; } .sid-read__tag.sid-in::after { height: 34px; } .sid-read__tag .sid-eyebrow { color: rgba(232, 236, 232, .72); margin-bottom: 2px; } .sid-read__value { font-family: var(--sid-font-mono); font-size: var(--sid-text-small); color: #E8ECE8; font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* Positions : chacune vise une zone de l'eau, pas un coin de l'écran. */ .sid-read__tag--1 { top: 24%; left: 12%; } .sid-read__tag--2 { top: 41%; left: 62%; } .sid-read__tag--3 { top: 58%; left: 22%; } .sid-read__tag--4 { top: 70%; left: 55%; } /* La dernière n'est pas une mesure : c'est la conclusion. */ .sid-read__tag--5 { top: 49%; left: 39%; } .sid-read__tag--5 .sid-read__value { font-size: var(--sid-text-h3); line-height: 1; color: var(--sid-accent); } .sid-read__tag--5::before { width: 10px; height: 10px; top: .35em; box-shadow: 0 0 0 8px rgba(213, 108, 88, .18); } .sid-read__tag--5::after { display: none; } /* --- Le titre, qui arrive après ---------------------------------------- */ .sid-read__title-block { position: relative; z-index: 2; max-width: 46rem; text-align: center; padding: var(--sid-space-6) var(--sid-space-5) !important; opacity: 0; transform: translateY(14px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1); } .sid-read-done .sid-read__title-block { opacity: 1; transform: none; } .sid-read__title-block .sid-lede { color: rgba(232, 236, 232, .78); } /* Sans script, sans observateur, ou avec « moins d'animation » : tout est là, simplement sans le mouvement. Une page qui ne montre rien quand le JavaScript ne s'exécute pas est une page cassée. */ .sid-band--read .sid-read__title-block { opacity: 1; transform: none; } .sid-read-js .sid-band--read:not(.sid-read-done) .sid-read__title-block { opacity: 0; transform: translateY(14px); } .sid-read-js .sid-band--read .sid-read__scene { opacity: 1; } @media (max-width: 900px) { .sid-band--read { min-height: 78vh; } .sid-read__tag--1 { top: 16%; left: 6%; } .sid-read__tag--2 { top: 30%; left: 52%; } .sid-read__tag--3 { top: 72%; left: 8%; } .sid-read__tag--4 { top: 84%; left: 46%; } .sid-read__tag--5 { top: 47%; left: 30%; } .sid-read__tag .sid-eyebrow { font-size: .5625rem; } } /* Le calculateur d'accueil respire davantage que celui de l'Atelier : c'est une démonstration, pas un poste de travail. */ .sid-band--home-tool .sid-calc { max-width: 980px; margin: 0 auto; }