/* ============================================================= Proposition E (Claude) — la D de Claude, plus les retours d'Alexandre du 23/09. Ajouts E : infographie « sources publiques » de la D de Codex (PROPRETÉ), studio « un brief, trois sorties » et modèle 3D chargé au clic (JYFUS), garantie « rien de périmé en silence », cadre « À venir ». Héritage D — base visuelle : Claude C. Greffes : lecture progressive et robustesse de Codex C/D (onglets, « À la sortie », détails, agrandissement, pause globale, schémas HTML). Corrections : les deux audits croisés (17/09 et 18/09) et le relevé du 22/09. Règles tenues par ce fichier - Charte du site : tokens de style.css, Inter + JetBrains Mono, aucun second système. - Texte visible ≥ 12 px ; gris lisibles (contraste AA sur le fond du site). - Animations : transform, opacity, couleurs. Jamais de mise en page animée. - État immobile (.d-still sur ) = mouvement réduit OU pause demandée : chaque décor montre alors un état final lisible, les vidéos s'arrêtent sur leur image. - Maquettes : aucune donnée réelle, badge « Illustration » dans le flux de leur cadre. ============================================================= */ /* ---------- Tokens locaux (portée D) ---------- */ .d-page { --text-muted: #9c9ca6; /* #888 du site → contraste renforcé */ --text-faint: #82828c; /* #5A5A5A du site échoue en AA ; 5,2:1 ici */ --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --blue-soft: #7cc0ff; --panel: rgba(255, 255, 255, 0.025); --dur-fast: 180ms; } /* ---------- Correctif hérité (V-3 / I-5) : .section, .project-section et .hero posent `padding: … 0` après .container et annulent sa marge horizontale. Déclaré en dernier. ---------- */ .d-page .container { padding-inline: var(--pad-x); } .d-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .d-skip { position: fixed; top: 8px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); font-weight: 600; transform: translateY(-160%); } .d-skip:focus { transform: none; } /* ---------- En-tête : marque sur une ligne, bouton pause toujours accessible ---------- */ .d-page .brand { white-space: nowrap; } .d-page .nav { align-items: center; } .d-motion { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--text-muted); font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing: 0.04em; cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); } .d-motion:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); } .d-motion svg { width: 14px; height: 14px; flex: 0 0 auto; } .d-motion .ico-play { display: none; } .d-motion[aria-pressed="true"] { color: var(--text); border-color: rgba(10, 132, 255, 0.6); background: var(--accent-soft); } .d-motion[aria-pressed="true"] .ico-pause { display: none; } .d-motion[aria-pressed="true"] .ico-play { display: inline; } .d-motion[hidden] { display: none; } @media (max-width: 720px) { .d-motion { padding: 6px 9px; } .d-motion .d-motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 480px) { .d-page .header-inner { gap: 10px; } .d-page .brand { font-size: 13px; gap: 7px; } .d-page .nav { gap: 10px; } .d-page .nav a { font-size: 12.5px; } } @media (max-width: 360px) { .d-page .nav a[data-optional] { display: none; } } /* ---------- Hero ---------- */ .d-hero { padding-block: clamp(32px, 6vh, 72px) clamp(24px, 4vh, 48px); } .d-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .d-hero .project-eyebrow { display: inline-block; margin-bottom: 14px; } .d-hero h1 { font-family: 'JetBrains Mono', monospace; font-size: clamp(40px, 5.4vw, 64px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; margin: 0 0 14px; } .d-hero .project-tagline { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.35; margin: 0 0 14px; max-width: 30ch; color: var(--text); } .d-intro { font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 46ch; margin: 0 0 20px; } .d-hero .tile-badges { justify-content: flex-start; margin-bottom: 24px; } .d-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .d-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #cfe6ff; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(124, 192, 255, 0.5); } .d-link:hover { color: #fff; text-decoration-color: currentColor; } .d-figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: #050507; } .d-figure > img, .d-figure > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .d-figure > video { opacity: 0; transition: opacity 700ms ease; } .d-figure.is-playing > video { opacity: 1; } .d-chip-cap { position: absolute; left: 14px; bottom: 12px; z-index: 2; max-width: calc(100% - 28px); font: 500 12px/1.3 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.14); padding: 6px 10px; border-radius: 6px; backdrop-filter: blur(8px); } .d-hero .d-figure.has-screen { aspect-ratio: auto; background: #0d0d11; } .d-hero .d-figure.has-screen .screen { border: 0; border-radius: 0; } @media (max-width: 900px) { .d-hero-grid { grid-template-columns: 1fr; gap: 26px; } .d-hero .d-figure { order: -1; } } /* ---------- Sections ---------- */ .d-section { padding-block: clamp(48px, 8vh, 96px); border-top: 1px solid var(--border); } .d-lead { display: grid; gap: 10px; margin-bottom: 28px; max-width: 74ch; } .d-lead .section-label { margin: 0; } .d-lead h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 0; text-wrap: balance; } .d-lead p { margin: 0; font-size: 17px; color: var(--text-muted); line-height: 1.55; max-width: 62ch; } .d-note { margin-top: 14px; font: 400 13px/1.6 'JetBrains Mono', monospace; letter-spacing: 0.02em; color: var(--text-muted); max-width: 100ch; } .d-note b { color: var(--text); font-weight: 500; } /* ---------- Onglets (greffe Codex C/D) : sans script, tous les panneaux restent visibles ---------- */ .d-tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .d-tablist[hidden] { display: none; } .d-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 18px; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text-muted); font: 500 15px/1.2 'Inter', sans-serif; cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); } .d-tab:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); } .d-tab .n { font: 500 12px/1 'JetBrains Mono', monospace; color: var(--text-faint); } .d-tab[aria-selected="true"] { color: #fff; border-color: rgba(10, 132, 255, 0.7); background: var(--accent-soft); } .d-tab[aria-selected="true"] .n { color: var(--blue-soft); } .d-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(22px, 3.5vw, 48px); align-items: center; padding: clamp(18px, 3vw, 36px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)); } .d-panel + .d-panel { margin-top: 16px; } .d-panel[hidden] { display: none; } .d-kicker { display: block; font: 500 12px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-soft); } .d-panel-text h3 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.25; font-weight: 600; margin: 8px 0 12px; letter-spacing: -0.01em; text-wrap: balance; } .d-panel-text p { color: var(--text-muted); font-size: 16px; line-height: 1.6; margin: 0 0 12px; max-width: 46ch; } .d-out { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--border); font-size: 15px !important; color: var(--text) !important; } .d-out b { font-weight: 600; color: #bfe0ff; } .d-panel-art { min-width: 0; } @media (max-width: 960px) { .d-panel { grid-template-columns: 1fr; } } @media (max-width: 640px) { .d-tablist { display: grid; grid-template-columns: 1fr 1fr; } .d-tablist[hidden] { display: none; } .d-tab { justify-content: center; padding: 10px; font-size: 14px; } .d-tablist .d-tab:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* ---------- Maquette d'écran (aucune donnée) ---------- */ .screen { position: relative; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); overflow: hidden; margin: 0; background: #0d0d11; border: 1px solid var(--border); border-radius: var(--radius); font-family: 'JetBrains Mono', monospace; color: var(--text); } .screen-bar { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .screen-bar > i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); flex: 0 0 auto; } .screen-bar .t { flex: 1 1 auto; min-width: 0; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .screen-badge { flex: 0 0 auto; font: 500 12px/1.2 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: none; color: #e6e6ea; border: 1px solid rgba(255, 255, 255, 0.2); padding: 3px 7px; border-radius: 5px; background: rgba(0, 0, 0, 0.35); } .screen-body { position: relative; padding: 16px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; } .sk { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.14); width: var(--w, 60%); } .sk.strong { background: rgba(255, 255, 255, 0.26); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-block; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; line-height: 1.3; padding: 3px 8px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-muted); } .chip.on { border-color: rgba(10, 132, 255, 0.65); color: #fff; background: var(--accent-soft); } .chip.ok { color: var(--ok); border-color: rgba(74, 222, 128, 0.45); } .chip.warn { color: var(--warn); border-color: rgba(251, 191, 36, 0.45); } .chip.off { color: var(--text-faint); } .rowline { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .rowline .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(10, 132, 255, 0.8); } .rowline .dot.grey { background: rgba(255, 255, 255, 0.25); box-shadow: none; } /* ---------- Tableau de bord JYFUS illustré + repères (remplace la capture aux marques tierces, H-10) ---------- */ .dash-wrap { position: relative; margin: 0; } .dash { display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 460px; background: #0b0c10; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .dash-side { border-right: 1px solid var(--border); padding: 14px 10px; display: grid; align-content: start; gap: 2px; background: rgba(255, 255, 255, 0.015); } .dash-logo { font: 600 13px 'JetBrains Mono', monospace; letter-spacing: 0.3em; color: var(--text); padding: 4px 8px 14px; } .dash-nav { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; font: 500 13px/1.2 'Inter', sans-serif; color: var(--text-muted); white-space: nowrap; } .dash-nav i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; opacity: 0.7; flex: 0 0 auto; } .dash-nav.on { background: var(--accent-soft); color: #fff; } .dash-main { position: relative; padding: 16px 18px 18px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; } .dash-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .dash-title { font: 600 16px 'Inter', sans-serif; } .dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .kpi { position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: grid; gap: 10px; background: rgba(255, 255, 255, 0.02); } .kpi span { font: 500 12px/1.25 'Inter', sans-serif; letter-spacing: 0.02em; color: var(--text-muted); } .kpi .sk { height: 14px; } .dash-h { display: flex; align-items: center; gap: 8px; font: 600 14px 'Inter', sans-serif; } .dash-h::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); } .dash-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 92px; gap: 10px; } .dcard { position: relative; border-radius: 8px; overflow: hidden; padding: 10px; display: grid; align-content: space-between; background: linear-gradient(140deg, var(--g1, #1e3a5f), var(--g2, #0f172a)); border: 1px solid rgba(255, 255, 255, 0.08); } .dcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 6, 10, 0.78), rgba(5, 6, 10, 0.1) 70%); } .dcard > * { position: relative; z-index: 1; } .dcard.big { grid-column: span 4; grid-row: span 2; outline: 1.5px solid rgba(97, 213, 222, 0.8); outline-offset: -1.5px; } .dcard.w2 { grid-column: span 2; } .dcard.w3 { grid-column: span 3; } .dcard .top { display: flex; gap: 6px; align-items: center; } .dcard .pill { font: 600 12px/1 "JetBrains Mono", monospace; padding: 4px 6px; border-radius: 4px; background: rgba(74, 222, 128, 0.2); color: #bbf7d0; } .dcard .pill.p1 { background: rgba(10, 132, 255, 0.3); color: #dbeafe; } .dcard .check { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; background: rgba(125, 211, 252, 0.9); display: grid; place-items: center; } .dcard .check::after { content: ''; width: 6px; height: 3px; border-left: 2px solid #06121f; border-bottom: 2px solid #06121f; transform: rotate(-45deg) translate(1px, -1px); } .dcard .lines { display: grid; gap: 6px; } .dcard .lines .sk { height: 8px; background: rgba(255, 255, 255, 0.5); } .dcard .lines .sk + .sk { background: rgba(255, 255, 255, 0.28); } .dcard .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .dcard .meta .sk { height: 7px; background: rgba(255, 255, 255, 0.3); } .dcard .cans { font: 500 12px/1 'JetBrains Mono', monospace; color: #fda4af; white-space: nowrap; } .hs-host { position: relative; } .hotspot { position: absolute; z-index: 4; top: var(--y, -10px); bottom: var(--b, auto); right: var(--r, -10px); left: var(--l, auto); width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font: 600 12.5px/1 'JetBrains Mono', monospace; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.22); } .hotspot::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--accent); animation: hs-pulse 2.4s ease-out infinite; } .hotspot[aria-expanded="true"]::after, .hotspot:hover::after { animation-play-state: paused; } @keyframes hs-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } } .hotspot-card { position: absolute; width: 260px; padding: 12px 14px; z-index: 6; text-align: left; background: rgba(14, 14, 18, 0.96); border: 1px solid var(--border-strong); border-radius: var(--radius); font: 400 13.5px/1.45 'Inter', sans-serif; color: var(--text); letter-spacing: 0; text-transform: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } .hotspot-card strong { display: block; font: 600 12px/1.3 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 4px; } .hotspot[data-side="left"] .hotspot-card { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); } .hotspot[data-side="right"] .hotspot-card { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); } .hotspot[data-side="below"] .hotspot-card { top: calc(100% + 12px); left: 50%; transform: translateX(-50%); } .hotspot:hover .hotspot-card, .hotspot:focus-visible .hotspot-card, .hotspot[aria-expanded="true"] .hotspot-card { opacity: 1; visibility: visible; } .hotspot-legend { list-style: none; margin: 16px 0 0; padding: 0; display: none; gap: 10px; } .hotspot-legend li { font-size: 15px; color: var(--text-muted); line-height: 1.5; } .hotspot-legend li b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 12px 'JetBrains Mono', monospace; } .dash-wrap figcaption { margin-top: 12px; } @media (max-width: 1100px) { .dash { grid-template-columns: 56px minmax(0, 1fr); } .dash-nav { font-size: 0; gap: 0; justify-content: center; } .dash-logo { font-size: 0; padding: 0; } } @media (max-width: 760px) { .dash { min-height: 0; } .dash-side { display: none; } .dash { grid-template-columns: minmax(0, 1fr); } .dash-kpis { grid-template-columns: 1fr 1fr; } .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 84px; } .dcard.big { grid-column: span 2; grid-row: span 2; } .dcard.w2, .dcard.w3 { grid-column: span 1; } .dcard.hide-m { display: none; } .hotspot { display: none; } .hotspot-legend { display: grid; } } /* ---------- Veille : quatre couches, dont chacune s'allume à son tour ---------- */ .cascade4 { position: relative; display: grid; gap: 12px; padding-left: 28px; } .cascade4::before { content: ''; position: absolute; left: 10px; top: 16px; bottom: 16px; width: 2px; background: rgba(255, 255, 255, 0.14); } .cascade4 .layer { position: relative; display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255, 255, 255, 0.03); font-family: 'Inter', sans-serif; animation: layer-hit 8s infinite; animation-delay: calc(var(--i) * 2s); } .cascade4 .layer::before { content: ''; position: absolute; left: -23px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #2a2a31; border: 2px solid #0d0d11; animation: node-hit 8s infinite; animation-delay: calc(var(--i) * 2s); } .cascade4 .layer b { font-size: 14px; font-weight: 600; color: var(--text); } .cascade4 .layer small { font-size: 13px; color: var(--text-muted); line-height: 1.35; } @keyframes layer-hit { 0%, 3% { border-color: var(--border); background: rgba(255, 255, 255, 0.03); } 6%, 22% { border-color: rgba(10, 132, 255, 0.75); background: rgba(10, 132, 255, 0.09); } 26%, 100% { border-color: var(--border); background: rgba(255, 255, 255, 0.03); } } @keyframes node-hit { 0%, 3% { background: #2a2a31; box-shadow: none; } 6%, 22% { background: var(--accent); box-shadow: 0 0 10px rgba(10, 132, 255, 0.9); } 26%, 100% { background: #3a3a44; box-shadow: none; } } .screen-foot-note { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); } .screen-foot-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(74, 222, 128, 0.8); flex: 0 0 auto; } /* ---------- Score : un filtre, cinq critères pondérés, une jauge à trois seuils ---------- */ .score-body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; } .crit { display: grid; gap: 10px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); } .crit-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; } .crit-row.is-filter { grid-template-columns: auto minmax(0, 1fr); color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px dashed var(--border-strong); } .switch { position: relative; width: 36px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); animation: switch-bg 12s infinite; } .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: switch-thumb 12s infinite; } @keyframes switch-bg { 0%, 6% { background: rgba(255, 255, 255, 0.12); } 10%, 90% { background: rgba(248, 113, 113, 0.5); } 94%, 100% { background: rgba(255, 255, 255, 0.12); } } @keyframes switch-thumb { 0%, 6% { transform: translateX(0); } 10%, 90% { transform: translateX(16px); } 94%, 100% { transform: translateX(0); } } .wbar { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .wbar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 50) * 2.5%); border-radius: 4px; background: var(--accent); transform-origin: left; transform: scaleX(0); animation: wbar-in 12s infinite; animation-delay: calc(var(--i) * 0.5s); } @keyframes wbar-in { 0%, 8% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } } .gauge { display: grid; justify-items: center; gap: 10px; } .gauge svg { width: 150px; height: 150px; } .g-bg { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 10; } .g-val { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; animation: gauge-fill 12s infinite; } @keyframes gauge-fill { 0%, 12% { stroke-dashoffset: 339.3; } 30%, 90% { stroke-dashoffset: 58; } 100% { stroke-dashoffset: 339.3; } } .g-label { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.08em; fill: var(--text); text-anchor: middle; opacity: 0; animation: gauge-label 12s infinite; } @keyframes gauge-label { 0%, 28% { opacity: 0; } 32%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } } .g-legend { display: grid; gap: 5px; justify-items: center; } @media (max-width: 520px) { .score-body { grid-template-columns: 1fr; } .gauge { justify-self: center; } } /* ---------- Studio : un brief, trois sorties (E) ---------- Les couleurs de l'aperçu sont celles des deux briefs neutres de la page (assets/briefs). */ .triad { display: grid; gap: 16px; } .triad-brief { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border: 1px solid rgba(10, 132, 255, 0.45); border-radius: var(--radius); background: var(--accent-soft); font: 500 12.5px/1.5 'JetBrains Mono', monospace; color: var(--text); } .triad-brief .k { color: var(--blue-soft); letter-spacing: 0.06em; text-transform: uppercase; } .triad-brief .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .triad-brief .screen-badge { margin-left: auto; } .triad-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .triad-out { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: 5px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: #0d0d11; } .triad-out::before { content: ''; position: absolute; top: -17px; left: 50%; width: 2px; height: 16px; background: linear-gradient(180deg, rgba(10, 132, 255, 0.7), rgba(10, 132, 255, 0.2)); } .triad-out .n { font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-soft); } .triad-out b { font-size: 15px; font-weight: 600; line-height: 1.3; } .triad-out small { font-size: 13px; color: var(--text-muted); line-height: 1.45; } .triad-art { position: relative; display: flex; flex-direction: column; height: 220px; margin-top: 10px; border-radius: 8px; overflow: hidden; align-self: end; } /* 01 · aperçu en direct : deux palettes, une étiquette à plat qui suit */ .triad-art.live { gap: 10px; padding: 10px; background: #121218; border: 1px solid var(--border); } .live .pal { display: flex; gap: 8px; align-items: center; } .live .pal span { width: 24px; height: 24px; border-radius: 6px; border: 2px solid transparent; } .live .pal .p1 { background: linear-gradient(135deg, #0A84FF, #4ADE80); animation: pick-a 8s infinite; } .live .pal .p2 { background: linear-gradient(135deg, #FF6A00, #FF2D95); animation: pick-b 8s infinite; } .live .chips { margin: 0; } .live .label { position: relative; flex: 1; min-height: 80px; border-radius: 6px; overflow: hidden; } .live .label i, .live .label em { position: absolute; inset: 0; } .live .label .l1 { background: linear-gradient(135deg, #071a3d 0%, #0A84FF 40%, #22b8d6 75%, #4ADE80 100%); animation: msg-a 8s infinite; } .live .label .l2 { background: linear-gradient(135deg, #FFB300 0%, #FF6A00 45%, #FF2D95 100%); opacity: 0; animation: msg-b 8s infinite; } .live .label::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1.5px); background-size: 6px 6px; } .live .label em { z-index: 1; display: grid; place-content: center; text-align: center; font: normal 700 13px/1.15 'Inter', sans-serif; letter-spacing: 0.04em; color: #fff; } .live .label em.t1 { animation: msg-a 8s infinite; } .live .label em.t2 { opacity: 0; animation: msg-b 8s infinite; } .live .label em small { display: block; margin-top: 4px; font: 600 12px 'Inter', sans-serif; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.85); } @keyframes pick-a { 0%, 45% { border-color: #fff; } 50%, 95% { border-color: transparent; } 100% { border-color: #fff; } } @keyframes pick-b { 0%, 45% { border-color: transparent; } 50%, 95% { border-color: #fff; } 100% { border-color: transparent; } } /* 02 · prompt : lignes réellement produites par le générateur du studio */ .prompt { flex: 1; min-height: 0; margin: 0; padding: 10px 12px; overflow: hidden; position: relative; border-radius: 8px; background: #0a0a0e; border: 1px solid var(--border); font: 400 12px/1.55 'JetBrains Mono', monospace; color: #cfd6e4; white-space: pre-wrap; overflow-wrap: anywhere; } .prompt::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(transparent, #0a0a0e); } .prompt .h { color: var(--blue-soft); } .prompt-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } /* 03 · moteur : le vrai rendu (height:100% prime sur l'attribut height de l'image) */ .triad-art img { display: block; width: 100%; height: 100%; object-fit: cover; } .triad-badge { position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.6); } @media (max-width: 1180px) and (min-width: 961px) { .triad-outs { grid-template-columns: 1fr; } .triad-out::before { display: none; } } @media (max-width: 700px) { .triad-outs { grid-template-columns: 1fr; } .triad-out::before { display: none; } } /* ---------- Email + neuf contrôles ---------- */ .mailbox { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; align-items: start; } .d-mail { border: 1px solid var(--border); border-radius: var(--radius); background: #0d0d11; overflow: hidden; } .d-mail-head { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--border); font: 400 13px/1.45 'Inter', sans-serif; color: var(--text-muted); } .d-mail-head b { color: var(--text); font-weight: 600; } .d-mail-body { padding: 14px; font: 400 14px/1.6 'Inter', sans-serif; color: #d6d6dc; display: grid; gap: 10px; } .d-mail-body p { margin: 0; } .d-mail-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); } .gate { border: 1px solid var(--border); border-radius: var(--radius); background: #0d0d11; padding: 12px 14px; display: grid; } .gate-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 2px; } .gate-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 34px; font: 400 13px/1.3 'Inter', sans-serif; color: var(--text-muted); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .gate-row i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .gate-row b { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: 0.04em; color: var(--text-faint); } .gate-foot { margin-top: 10px; font: 500 12px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.02em; color: var(--text-muted); } .gate.run .gate-row { animation: gate-ok 12s infinite; animation-delay: calc(var(--i) * 0.35s); } .gate.run .gate-row i { animation: dot-ok 12s infinite; animation-delay: calc(var(--i) * 0.35s); } .gate.run .gate-row b { animation: verdict 12s infinite; animation-delay: calc(var(--i) * 0.35s); } .gate.run .gate-row.fix { animation-name: gate-fix; } .gate.run .gate-row.fix i { animation-name: dot-fix; } .gate.run .gate-row.fix b { animation-name: verdict-fix; } @keyframes gate-ok { 0%, 4% { color: var(--text-muted); } 8%, 92% { color: var(--text); } 100% { color: var(--text-muted); } } @keyframes dot-ok { 0%, 4% { background: rgba(255, 255, 255, 0.2); box-shadow: none; } 8%, 92% { background: var(--ok); box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); } 100% { background: rgba(255, 255, 255, 0.2); } } @keyframes verdict { 0%, 4% { color: var(--text-faint); } 8%, 92% { color: var(--ok); } 100% { color: var(--text-faint); } } @keyframes gate-fix { 0%, 4% { color: var(--text-muted); } 8%, 30% { color: var(--warn); } 36%, 92% { color: var(--text); } 100% { color: var(--text-muted); } } @keyframes dot-fix { 0%, 4% { background: rgba(255, 255, 255, 0.2); } 8%, 30% { background: var(--warn); box-shadow: 0 0 8px rgba(251, 191, 36, 0.7); } 36%, 92% { background: var(--ok); box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); } 100% { background: rgba(255, 255, 255, 0.2); } } @keyframes verdict-fix { 0%, 4% { color: var(--text-faint); } 8%, 30% { color: var(--warn); } 36%, 92% { color: var(--ok); } 100% { color: var(--text-faint); } } .gate .v-fix::before { content: 'CORRIGÉ'; } .gate .v-ok::before { content: 'OK'; } @media (max-width: 1100px) { .mailbox { grid-template-columns: 1fr; } } /* ---------- Kanban (JYFUS : 4 colonnes ; PROPRETÉ : 5 colonnes) ---------- */ .kanban { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; position: relative; } .kcol { border: 1px solid var(--border); border-radius: 7px; padding: 8px; display: grid; align-content: start; gap: 7px; min-height: 190px; } .kcol h4 { font: 600 12px/1.25 'Inter', sans-serif; letter-spacing: 0.02em; color: var(--text-muted); margin: 0 0 2px; min-height: 30px; } .kcard { border-radius: 6px; background: rgba(255, 255, 255, 0.05); padding: 8px; display: grid; gap: 6px; } .kcard .sk { height: 7px; } .kanban .walker { position: absolute; left: 8px; top: 48px; width: calc((100% - (var(--cols, 4) - 1) * 8px) / var(--cols, 4) - 16px); outline: 1.5px solid rgba(10, 132, 255, 0.75); background: #13233a; z-index: 2; } .kanban.k4 .walker { animation: walk4 14s cubic-bezier(.45, .1, .2, 1) infinite; } .kanban.k5 .walker { animation: walk5 16s cubic-bezier(.45, .1, .2, 1) infinite; } /* JYFUS : avance d'elle-même avec le travail, colonne par colonne */ @keyframes walk4 { 0%, 16% { transform: translateX(0); opacity: 1; } 22%, 40% { transform: translateX(calc(100% + 24px)); } 46%, 64% { transform: translateX(calc(200% + 48px)); } 70%, 92% { transform: translateX(calc(300% + 72px)); opacity: 1; } 97%, 100% { transform: translateX(calc(300% + 72px)); opacity: 0; } } /* PROPRETÉ : avance, un pas en arrière (retour d'étape), puis repart — jamais un saut */ @keyframes walk5 { 0%, 12% { transform: translateX(0); opacity: 1; } 17%, 28% { transform: translateX(calc(100% + 24px)); } 33%, 44% { transform: translateX(calc(200% + 48px)); } 49%, 58% { transform: translateX(calc(100% + 24px)); } 63%, 72% { transform: translateX(calc(200% + 48px)); } 77%, 92% { transform: translateX(calc(300% + 72px)); opacity: 1; } 97%, 100% { transform: translateX(calc(300% + 72px)); opacity: 0; } } .k-back { color: var(--warn); } @media (max-width: 560px) { .kanban { grid-template-columns: minmax(0, 1fr); gap: 8px; } .kcol { min-height: 0; height: 52px; grid-template-columns: 108px minmax(0, 1fr); grid-auto-flow: column; align-items: center; align-content: center; padding: 6px 10px; gap: 8px; overflow: hidden; } .kcol h4 { min-height: 0; margin: 0; font-size: 12px; line-height: 1.2; } .kcol .kcard { width: 88px; padding: 7px 8px; } .kcol .kcard:nth-of-type(n+2) { display: none; } .kcol .kcard .chip { display: none; } .kanban .walker { left: 127px; top: 6px; width: 88px; height: 40px; padding: 7px 8px; } .kanban.k4 .walker { animation-name: walk4v; } .kanban.k5 .walker { animation-name: walk5v; } @keyframes walk4v { 0%, 16% { transform: translateY(0); opacity: 1; } 22%, 40% { transform: translateY(60px); } 46%, 64% { transform: translateY(120px); } 70%, 92% { transform: translateY(180px); opacity: 1; } 97%, 100% { transform: translateY(180px); opacity: 0; } } @keyframes walk5v { 0%, 12% { transform: translateY(0); opacity: 1; } 17%, 28% { transform: translateY(60px); } 33%, 44% { transform: translateY(120px); } 49%, 58% { transform: translateY(60px); } 63%, 72% { transform: translateY(120px); } 77%, 92% { transform: translateY(180px); opacity: 1; } 97%, 100% { transform: translateY(180px); opacity: 0; } } .d-still .kanban.k4 .walker, .d-still .kanban.k5 .walker { transform: translateY(120px); } .screen-body .chips .chip { white-space: normal; } } /* ---------- Schéma HTML en ligne droite (remplace les iframes SVG, V-2) ---------- */ .flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 40px; position: relative; counter-reset: fl; } .flow-node { position: relative; display: grid; align-content: start; gap: 8px; min-height: 150px; padding: 18px 18px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #0f1016; animation: node-glow var(--cycle, 6s) infinite; animation-delay: calc(var(--i) * var(--step, 1.2s)); } .flow-node .k { font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-soft); } .flow-node h3 { font-size: 18px; font-weight: 600; margin: 0; line-height: 1.25; } .flow-node p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); } .flow-node .tag { justify-self: start; margin-top: 4px; font: 500 12px 'JetBrains Mono', monospace; color: var(--text); padding: 3px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); } .flow-node .outs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .flow-node.is-out { border-color: rgba(74, 222, 128, 0.4); background: linear-gradient(160deg, rgba(74, 222, 128, 0.06), #0f1016 60%); } @keyframes node-glow { 0%, 4% { box-shadow: none; border-color: var(--border-strong); } 8%, 20% { box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.6), 0 0 24px rgba(10, 132, 255, 0.18); border-color: rgba(10, 132, 255, 0.7); } 28%, 100% { box-shadow: none; border-color: var(--border-strong); } } /* connecteur : trait droit entre deux boîtes + paquet qui le parcourt */ .flow-node:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -40px; width: 40px; height: 2px; margin-top: -1px; background: linear-gradient(90deg, rgba(10, 132, 255, 0.55), rgba(10, 132, 255, 0.25)); } .flow-node:not(:last-child)::before { content: ''; position: absolute; z-index: 2; top: 50%; right: -40px; width: 10px; height: 10px; margin: -5px 0 0 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.45), 0 0 12px rgba(10, 132, 255, 0.9); opacity: 0; animation: packet-x var(--cycle, 6s) infinite; animation-delay: calc(var(--i) * var(--step, 1.2s) + var(--step, 1.2s) * 0.55); } @keyframes packet-x { 0% { transform: translateX(-34px); opacity: 0; } 2% { opacity: 1; } 12% { transform: translateX(0); opacity: 1; } 14%, 100% { transform: translateX(0); opacity: 0; } } @media (max-width: 1000px) { .flow { grid-template-columns: 1fr; gap: 34px; } .flow-node { min-height: 0; } .flow-node:not(:last-child)::after { top: auto; bottom: -34px; right: auto; left: 32px; width: 2px; height: 34px; margin: 0; background: linear-gradient(180deg, rgba(10, 132, 255, 0.55), rgba(10, 132, 255, 0.25)); } .flow-node:not(:last-child)::before { top: auto; bottom: -34px; right: auto; left: 28px; margin: 0; animation-name: packet-y; } @keyframes packet-y { 0% { transform: translateY(-28px); opacity: 0; } 2% { opacity: 1; } 12% { transform: translateY(0); opacity: 1; } 14%, 100% { transform: translateY(0); opacity: 0; } } } /* ---------- Galerie des rendus + agrandissement (greffe Codex) ---------- */ .d-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; } .g-item { position: relative; margin: 0; min-width: 0; max-width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #0c0c10; aspect-ratio: 16 / 9; } .g-item.hero { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .g-item > a, .g-item > video, .g-item > img { position: absolute; inset: 0; display: block; } .g-item img, .g-item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease; } .g-item > a:hover img { transform: scale(1.035); } .g-item figcaption { position: absolute; left: 10px; bottom: 10px; z-index: 2; pointer-events: none; font: 500 12px/1.2 'JetBrains Mono', monospace; letter-spacing: 0.04em; color: #fff; background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(255, 255, 255, 0.14); padding: 5px 8px; border-radius: 5px; } .g-item .zoom-ico { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; opacity: 0; transition: opacity var(--dur-fast); pointer-events: none; } .g-item > a:hover .zoom-ico, .g-item > a:focus-visible .zoom-ico { opacity: 1; } @media (max-width: 760px) { .d-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .g-item.hero { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; } .g-item figcaption { font-size: 12px; left: 6px; bottom: 6px; padding: 4px 6px; } } .d-dialog { width: min(1200px, 94vw); max-height: 94vh; margin: auto; padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: #0e0e12; color: var(--text); } .d-dialog::backdrop { background: rgba(0, 0, 0, 0.86); } .d-dialog img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; border-radius: var(--radius-sm); background: #000; } .d-dialog-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 10px; } .d-dialog-bar p { margin: 0; font-size: 14px; color: var(--text-muted); } .d-dialog-close { min-height: 40px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; font: 500 13px 'Inter', sans-serif; } /* Média absent : le cadre le dit au lieu de rester vide (M-5) */ .d-figure.is-missing > img, .d-figure.is-missing > video, .g-item.is-missing img, .g-item.is-missing video { visibility: hidden; } .d-figure.is-missing::before, .g-item.is-missing::before { content: 'Visuel indisponible'; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 500 13px 'JetBrains Mono', monospace; color: var(--text-muted); } /* ---------- Mur de chiffres (compteurs CSS) ---------- */ @property --n { syntax: ''; inherits: true; initial-value: 0; } .count-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .count { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); padding: 22px 20px 18px; } .count .num { font: 600 clamp(40px, 5vw, 60px)/1 'JetBrains Mono', monospace; letter-spacing: -0.03em; color: var(--text); --n: 0; display: inline-block; } .count .num::after { counter-reset: n var(--n); content: counter(n); } .count-wall.is-visible .num { --n: var(--target); transition: --n 1400ms cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 110ms); } .count .unit { font: 500 clamp(18px, 2vw, 24px) 'JetBrains Mono', monospace; color: var(--text-muted); margin-left: 6px; } .count .label { margin-top: 10px; font-size: 14.5px; color: var(--text-muted); line-height: 1.45; } .count .src { margin-top: 8px; font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.02em; color: var(--text-faint); } @media (max-width: 900px) { .count-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .count-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .count { padding: 16px 14px 14px; } .count .num { font-size: 36px; } .count .unit { font-size: 16px; margin-left: 4px; } .count .label { font-size: 13.5px; } } /* ---------- Détails à la demande (greffe Codex) ---------- */ .d-details { border-top: 1px solid var(--border); max-width: 980px; } .d-details details { border-bottom: 1px solid var(--border); } .d-details summary { list-style: none; cursor: pointer; position: relative; padding: 20px 44px 20px 0; min-height: 44px; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--text); } .d-details summary::-webkit-details-marker { display: none; } .d-details summary::after { content: '+'; position: absolute; right: 6px; top: 14px; font: 400 26px/1 'Inter', sans-serif; color: var(--blue-soft); } .d-details details[open] summary::after { content: '−'; } .d-details details > div { padding: 0 0 22px; display: grid; gap: 10px; } .d-details details p, .d-details details li { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; max-width: 75ch; } .d-details details ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .d-details details b { color: var(--text); font-weight: 600; } /* ---------- Pied de page projet ---------- */ .d-close { display: grid; gap: 22px; } .d-close .tech-badges { margin: 0; } .avenir { border: 1px solid rgba(10, 132, 255, 0.35); border-radius: var(--radius); padding: 16px 18px; background: rgba(10, 132, 255, 0.05); } .avenir-label { display: block; font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 6px; } .avenir p { margin: 0; font-size: 15px; color: var(--text-muted); line-height: 1.55; } /* ============================================================= PROPRETÉ ============================================================= */ /* Hero : tableau de veille, une rangée arrive en tête toutes les 4 s */ .screen-veille .rows { position: relative; height: 216px; overflow: hidden; } /* six rangées visibles ; la septième sort par le bas, masquée */ .screen-veille .rows .rowline { position: absolute; left: 0; right: 0; height: 36px; animation: veille-cycle 28s linear infinite; } .screen-veille .rows .rowline:nth-child(1) { animation-delay: 0s; } .screen-veille .rows .rowline:nth-child(2) { animation-delay: -4s; } .screen-veille .rows .rowline:nth-child(3) { animation-delay: -8s; } .screen-veille .rows .rowline:nth-child(4) { animation-delay: -12s; } .screen-veille .rows .rowline:nth-child(5) { animation-delay: -16s; } .screen-veille .rows .rowline:nth-child(6) { animation-delay: -20s; } .screen-veille .rows .rowline:nth-child(7) { animation-delay: -24s; } @keyframes veille-cycle { 0% { transform: translateY(-36px); opacity: 0; } 2% { transform: translateY(0); opacity: 1; } 14.2% { transform: translateY(0); } 16.2% { transform: translateY(36px); } 28.5% { transform: translateY(36px); } 30.5% { transform: translateY(72px); } 42.8% { transform: translateY(72px); } 44.8% { transform: translateY(108px); } 57.1% { transform: translateY(108px); } 59.1% { transform: translateY(144px); } 71.4% { transform: translateY(144px); } 73.4% { transform: translateY(180px); } 85.7% { transform: translateY(180px); opacity: 1; } 87.7% { transform: translateY(216px); opacity: 0; } 100% { transform: translateY(216px); opacity: 0; } } .tile-unsure { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px dashed rgba(251, 191, 36, 0.5); border-radius: 7px; font: 500 13px/1.3 'Inter', sans-serif; color: var(--text); } .tile-unsure b { font: 600 13px 'JetBrains Mono', monospace; color: var(--warn); } .tile-unsure span:last-child { margin-left: auto; color: var(--text-muted); font-size: 12.5px; } /* Qualification par lots : cases vides, un surlignage descend */ .screen-lots .rowline { grid-template-columns: 16px minmax(0, 1fr) auto; } .screen-lots .box { width: 15px; height: 15px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 3px; } .lots-list { position: relative; display: grid; } .lots-list .scan { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: rgba(10, 132, 255, 0.1); border-radius: 4px; animation: row-scan 8s steps(6, end) infinite; pointer-events: none; } @keyframes row-scan { from { transform: translateY(0); } to { transform: translateY(216px); } } .lots-actions { display: flex; flex-wrap: wrap; gap: 8px; } .btnk { font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.04em; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--text); } .btnk.ok { border-color: rgba(74, 222, 128, 0.55); color: var(--ok); } /* Répartition : rôles et droits */ .roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .role { border: 1px solid var(--border-strong); border-radius: 7px; padding: 11px 12px; display: grid; gap: 6px; align-content: start; } .role h4 { font: 600 13px 'Inter', sans-serif; margin: 0; color: var(--text); } .role p { font: 400 13px/1.45 'Inter', sans-serif; color: var(--text-muted); margin: 0; } .role .arrow { font: 500 12px 'JetBrains Mono', monospace; color: var(--ok); } .role .arrow.no { color: var(--bad); } /* Calendrier : trois repères, trois sens */ .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .cal-grid .hd { font: 500 12px 'JetBrains Mono', monospace; color: var(--text-faint); text-align: center; } .cal-cell { position: relative; aspect-ratio: 5 / 3; border-radius: 5px; background: rgba(255, 255, 255, 0.035); font: 400 12px 'JetBrains Mono', monospace; color: var(--text-faint); padding: 3px 5px; } .cal-cell::after { content: none; position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; } .cal-cell.due::after { content: ''; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(10, 132, 255, 0.8); } .cal-cell.end::after { content: ''; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); } .cal-cell.call::after { content: ''; transform: rotate(45deg); background: var(--ok); border-radius: 2px; } .cal-cell.today { outline: 1px solid rgba(10, 132, 255, 0.6); animation: cal-today 6s ease-in-out infinite; } @keyframes cal-today { 0%, 100% { background: rgba(10, 132, 255, 0.08); } 50% { background: rgba(10, 132, 255, 0.2); } } .cal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 400 12.5px/1.4 'Inter', sans-serif; color: var(--text-muted); } .cal-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: middle; } .cal-legend i.due { border-radius: 50%; background: var(--accent); } .cal-legend i.end { border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); } .cal-legend i.call { transform: rotate(45deg); background: var(--ok); border-radius: 2px; } .repris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 7px; font: 400 13px/1.35 'Inter', sans-serif; color: var(--text-muted); } .repris b { color: var(--text); font-weight: 600; } /* Mémoire : axe depuis 2017, groupes par objet, montants non additifs ; fiche acheteur */ .axis { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); font: 400 12px 'JetBrains Mono', monospace; color: var(--text-faint); border-bottom: 1px solid var(--border); padding-bottom: 6px; } .axis span { text-align: center; } .group { border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px; display: grid; gap: 7px; } .group .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; } .group .bars { display: grid; gap: 6px; } .group .bar { height: 8px; border-radius: 4px; background: rgba(10, 132, 255, 0.45); width: var(--w); transform-origin: left; animation: bar-grow 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.25s); } @keyframes bar-grow { 0%, 6% { transform: scaleX(0.15); } 20%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0.15); } } .banner { display: flex; align-items: center; gap: 8px; font: 500 12.5px 'Inter', sans-serif; color: var(--warn); border: 1px dashed rgba(251, 191, 36, 0.5); border-radius: 6px; padding: 7px 10px; } .buyer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .buyer .col { border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px; display: grid; gap: 7px; align-content: start; } .buyer h5 { margin: 0; font: 600 12.5px 'Inter', sans-serif; color: var(--text); } .buyer .hbar { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 8px; align-items: center; } .buyer .hbar i { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); width: var(--w); } .buyer .hbar.mine i { background: rgba(248, 113, 113, 0.7); } /* Garanties : quatre mini-écrans */ .guar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .guar article { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); overflow: hidden; display: grid; grid-template-columns: 236px minmax(0, 1fr); } .guar .mini { position: relative; display: grid; place-items: center; min-height: 170px; border-right: 1px solid var(--border); background: #0d0d11; overflow: hidden; padding: 14px; } .guar .text { padding: 18px 20px; display: grid; gap: 8px; align-content: center; } .guar h3 { font-size: 17px; font-weight: 600; margin: 0; } .guar p { font-size: 15px; color: var(--text-muted); line-height: 1.5; margin: 0; } @media (max-width: 1100px) { .guar { grid-template-columns: 1fr; } } @media (max-width: 520px) { .guar article { grid-template-columns: 1fr; } .guar .mini { border-right: 0; border-bottom: 1px solid var(--border); min-height: 150px; } } .wait { display: grid; justify-items: center; gap: 12px; font: 500 12px 'JetBrains Mono', monospace; } .wait .btnk { animation: wait-btn 12s infinite; } @keyframes wait-btn { 0%, 4% { transform: scale(1); } 5% { transform: scale(0.95); } 6%, 100% { transform: scale(1); } } .wait .ring { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.12); border-top-color: var(--accent); animation: ring-spin 1s linear infinite, ring-show 12s infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } @keyframes ring-show { 0%, 6% { opacity: 0; } 7%, 30% { opacity: 1; } 31%, 100% { opacity: 0; } } .wait .res { position: relative; height: 18px; min-width: 150px; text-align: center; } .wait .res span { position: absolute; left: 0; right: 0; opacity: 0; } .wait .res .ok { color: var(--ok); animation: res-ok 12s infinite; } .wait .res .ko { color: var(--warn); animation: res-ko 12s infinite; } @keyframes res-ok { 0%, 31% { opacity: 0; } 32%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } } @keyframes res-ko { 0%, 81% { opacity: 0; } 82%, 98% { opacity: 1; } 99%, 100% { opacity: 0; } } .wait .bound { color: var(--text-muted); } /* Rien de périmé en silence : au-delà de 48 h sans relevé, le tableau le dit (config_veille.py:112-117) */ .stale { display: grid; justify-items: center; gap: 12px; width: 100%; font: 500 12px 'JetBrains Mono', monospace; } .stale .clock { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); } .stale .clock::before, .stale .clock::after { content: ''; position: absolute; left: 50%; bottom: 50%; width: 2px; border-radius: 2px; background: #fff; transform-origin: 50% 100%; } .stale .clock::before { height: 13px; margin-left: -1px; animation: clock-spin 8s linear infinite; } .stale .clock::after { height: 9px; margin-left: -1px; transform: rotate(90deg); } @keyframes clock-spin { to { transform: rotate(360deg); } } .stale .msg { position: relative; height: 20px; width: 100%; } .stale .msg span { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; } .stale .msg .a { color: var(--ok); animation: msg-a 8s infinite; } .stale .msg .b { color: var(--warn); animation: msg-b 8s infinite; } @keyframes msg-a { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } } @keyframes msg-b { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } } .signal { display: grid; gap: 8px; width: 100%; } .signal .btns { display: flex; flex-wrap: wrap; gap: 6px; } .signal .log { display: grid; gap: 6px; height: 64px; overflow: hidden; } .signal .log .sk { height: 8px; animation: log-push 6s ease-in-out infinite; } .signal .log .sk:first-child { animation-name: log-new; } @keyframes log-push { 0%, 10% { transform: translateY(-14px); } 20%, 100% { transform: translateY(0); } } @keyframes log-new { 0%, 10% { opacity: 0; transform: translateY(-14px); } 20%, 100% { opacity: 1; transform: none; } } .backup { display: grid; gap: 8px; width: 100%; font: 500 12px/1.3 'JetBrains Mono', monospace; } .backup .st { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: center; color: var(--text-muted); animation: step-on 9s infinite; animation-delay: calc(var(--i) * 1.4s); } .backup .st i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); animation: step-dot 9s infinite; animation-delay: calc(var(--i) * 1.4s); } @keyframes step-on { 0%, 4% { color: var(--text-muted); } 10%, 92% { color: var(--text); } 100% { color: var(--text-muted); } } @keyframes step-dot { 0%, 4% { background: rgba(255, 255, 255, 0.2); box-shadow: none; } 10%, 92% { background: var(--ok); box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); } 100% { background: rgba(255, 255, 255, 0.2); } } /* ============================================================= E · Section « sources » (PROPRETÉ) : texte + infographie reprise de la D de Codex Règles p-* copiées de _propositions/D/proprete.css (panneau « Collecter »), sans changement de rendu ; la pause passe par .d-still comme le reste de la page. ============================================================= */ .e-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(22px, 3.5vw, 48px); align-items: center; padding: clamp(18px, 3vw, 36px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)); } .e-split h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; margin: 10px 0 12px; text-wrap: balance; } @media (max-width: 960px) { .e-split { grid-template-columns: 1fr; } } .p-art-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-muted); font-size: 13px; margin-bottom: 28px; } .p-illustration { display: inline-block; flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.5; padding: 4px 7px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text); letter-spacing: .02em; } .p-flow-art { min-width: 0; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); } .p-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .p-source { display: grid; justify-items: center; gap: 9px; text-align: center; } .p-source strong { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; } .p-source > span:last-child { font-size: 13px; color: var(--text-muted); } .p-document { position: relative; display: inline-block; width: 34px; height: 43px; margin-bottom: 4px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent-soft); } .p-document::after { content: ''; position: absolute; left: 23%; right: 23%; top: 33%; height: 1px; background: var(--text-muted); box-shadow: 0 7px 0 var(--text-faint); } .p-join { display: grid; grid-template-columns: 1fr 1fr; height: 55px; position: relative; width: 54%; margin: 5px auto 0; } .p-join > span { height: 25px; border-bottom: 1px solid var(--border-strong); } .p-join > span:first-child { border-left: 1px solid var(--border-strong); border-bottom-left-radius: 8px; } .p-join > span:last-child { border-right: 1px solid var(--border-strong); border-bottom-right-radius: 8px; } .p-join::after { content: ''; position: absolute; width: 1px; height: 31px; top: 24px; left: 50%; background: var(--border-strong); } .p-join > i { position: absolute; width: 5px; height: 5px; top: 25px; left: calc(50% - 2px); border-radius: 50%; background: var(--accent); z-index: 1; animation: p-transfer 3s ease-in-out infinite; } .p-group { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); } .p-group strong { font-size: 14px; font-weight: 500; display: block; } .p-group div > span { font-size: 12px; color: var(--text-muted); display: block; margin-top: 4px; } .p-group-icon { position: relative; flex: 0 0 auto; display: block; width: 25px; height: 28px; border: 1px solid var(--accent); border-radius: 3px; box-shadow: -5px -5px 0 -2px var(--bg), -5px -5px 0 -1px var(--border-strong); } @keyframes p-transfer { 0%, 100% { transform: translateY(0); opacity: .65; } 70% { transform: translateY(22px); opacity: 1; } } @media (max-width: 420px) { .p-art-head { gap: 8px; } .p-art-head > span:first-child { max-width: 15ch; } } /* ============================================================= E · Modèle 3D (JYFUS, design programmatique) : image d'abord, modèle au clic. La bibliothèque (1,07 Mo) et le GLB (0,49 Mo) ne se chargent que si le visiteur le demande. ============================================================= */ .e-3d { position: relative; margin: 30px 0 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #0c0c10; } .e-3d-stage { position: relative; aspect-ratio: 16 / 8; min-height: 320px; background: radial-gradient(55% 75% at 50% 45%, rgba(10, 132, 255, 0.12), transparent 70%), #0c0c10; } .e-3d-stage > img, .e-3d-stage > .e-3d-viewer { position: absolute; inset: 0; width: 100%; height: 100%; } .e-3d-stage > img { object-fit: cover; transition: opacity 600ms ease; } .e-3d-viewer { display: block; --poster-color: transparent; background: transparent; } .e-3d.is-live .e-3d-stage > img { opacity: 0; pointer-events: none; } .e-3d-load { position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%); white-space: nowrap; } .e-3d.is-loading .e-3d-load { opacity: 0.75; cursor: progress; } .e-3d.is-live .e-3d-load { display: none; } .e-3d.is-missing .e-3d-stage::after { content: 'Modèle 3D indisponible pour le moment'; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2; padding: 6px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); font: 500 13px 'JetBrains Mono', monospace; color: var(--text-muted); white-space: nowrap; } .e-3d figcaption { padding: 14px 18px; border-top: 1px solid var(--border); font-size: 14.5px; line-height: 1.55; color: var(--text-muted); } .e-3d figcaption b { color: var(--text); font-weight: 600; } @media (max-width: 760px) { .e-3d-stage { aspect-ratio: 4 / 5; min-height: 0; } } /* ============================================================= Accueil : tuiles ============================================================= */ .d-page .tile[data-project="jyfus"] .tile-poster, .d-page .tile[data-project="jyfus"] .tile-video { object-fit: cover; } .d-page .tiles .tile.is-status:nth-child(odd):last-child { grid-column: 1 / -1; aspect-ratio: auto; height: clamp(220px, 22vw, 300px); } @media (max-width: 760px) { .d-page .tiles .tile.is-status:nth-child(odd):last-child { grid-column: auto; height: auto; aspect-ratio: 16 / 11; } } .tile-mini { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px 8% 118px; background: radial-gradient(80% 70% at 50% 30%, rgba(10, 132, 255, 0.12), transparent 70%), #0b0c10; } .tile-mini .screen { width: 100%; max-width: 520px; } .tile-mini .screen-veille .rows { height: 180px; } @media (max-width: 760px) { .tile-mini { padding: 50px 6% 112px; align-items: start; } .tile-mini .screen-bar { display: none; } .tile-mini .screen-body { padding: 6px 12px; } .tile-mini .screen-veille .rows { height: 72px; } } /* ============================================================= État immobile : mouvement réduit OU pause demandée (html.d-still, posé par extra.js). Chaque décor s'arrête sur un état final lisible, jamais sur un cadre vide (K-1). ============================================================= */ .d-still .d-page *, .d-still .d-page *::before, .d-still .d-page *::after { animation-play-state: paused !important; } .d-still .hotspot::after, .d-still .cascade4 .layer, .d-still .cascade4 .layer::before, .d-still .switch, .d-still .switch::after, .d-still .wbar i, .d-still .g-val, .d-still .g-label, .d-still .gate.run .gate-row, .d-still .gate.run .gate-row i, .d-still .gate.run .gate-row b, .d-still .kanban .walker, .d-still .flow-node, .d-still .flow-node::before, .d-still .screen-veille .rows .rowline, .d-still .lots-list .scan, .d-still .cal-cell.today, .d-still .group .bar, .d-still .wait .btnk, .d-still .wait .ring, .d-still .wait .res span, .d-still .stale .msg span, .d-still .stale .clock::before, .d-still .signal .log .sk, .d-still .backup .st, .d-still .backup .st i, .d-still .p-join > i, .d-still .live .pal span, .d-still .live .label i, .d-still .live .label em { animation: none !important; } .d-still .hotspot::after { display: none; } .d-still .cascade4 .layer:last-child { border-color: rgba(10, 132, 255, 0.75); background: rgba(10, 132, 255, 0.09); } .d-still .cascade4 .layer::before { background: var(--accent); } .d-still .switch { background: rgba(248, 113, 113, 0.5); } .d-still .switch::after { transform: translateX(16px); } .d-still .wbar i { transform: scaleX(1); } .d-still .g-val { stroke-dashoffset: 58; } .d-still .g-label { opacity: 1; } .d-still .gate.run .gate-row { color: var(--text); } .d-still .gate.run .gate-row i { background: var(--ok); } .d-still .gate.run .gate-row b { color: var(--ok); } .d-still .kanban.k4 .walker, .d-still .kanban.k5 .walker { transform: translateX(calc(200% + 48px)); } .d-still .flow-node:not(:last-child)::before { opacity: 0; } .d-still .screen-veille .rows .rowline { opacity: 1; } .d-still .screen-veille .rows .rowline:nth-child(1) { transform: translateY(0); } .d-still .screen-veille .rows .rowline:nth-child(2) { transform: translateY(36px); } .d-still .screen-veille .rows .rowline:nth-child(3) { transform: translateY(72px); } .d-still .screen-veille .rows .rowline:nth-child(4) { transform: translateY(108px); } .d-still .screen-veille .rows .rowline:nth-child(5) { transform: translateY(144px); } .d-still .screen-veille .rows .rowline:nth-child(6) { transform: translateY(180px); } .d-still .screen-veille .rows .rowline:nth-child(7) { transform: translateY(216px); } .d-still .lots-list .scan { display: none; } .d-still .group .bar { transform: none; } .d-still .wait .ring { display: none; } .d-still .wait .res .ok { opacity: 1; } .d-still .wait .res .ko { opacity: 0; } .d-still .stale .msg .a { opacity: 0; } .d-still .stale .msg .b { opacity: 1; } /* on s'arrête sur le signal « périmé » : c'est la garantie */ .d-still .stale .clock::before { transform: rotate(300deg); } .d-still .p-join > i { opacity: 1; transform: translateY(22px); } .d-still .live .pal .p1 { border-color: #fff; } .d-still .live .pal .p2 { border-color: transparent; } .d-still .live .label .l1, .d-still .live .label em.t1 { opacity: 1; } .d-still .live .label .l2, .d-still .live .label em.t2 { opacity: 0; } .d-still .signal .log .sk { opacity: 1; transform: none; } .d-still .backup .st { color: var(--text); } .d-still .backup .st i { background: var(--ok); } .d-still .count-wall.is-visible .num { transition: none; } .d-still .d-figure > video, .d-still .g-item > video { visibility: hidden; } /* l'image de repli reste visible */ .d-still .tile .tile-video { display: none; } .d-still .tile.is-playing .tile-poster { opacity: 1; } /* main.js peut poser is-playing */ .d-still .d-page .reveal { opacity: 1; transform: none; transition: none; } /* Repli sans script : la préférence système suffit à couper les décors */ @media (prefers-reduced-motion: reduce) { html:not(.d-js) .d-page *, html:not(.d-js) .d-page *::before, html:not(.d-js) .d-page *::after { animation: none !important; transition: none !important; } } /* Lien vers le site de la marque, et sa mention juste en dessous (VITRINE-S6, 23/09). La rangée s'aligne en haut : le lien garde 44 px, son texte tombe à la hauteur des autres actions. */ .d-actions:has(.d-link-note) { align-items: flex-start; } .d-link-note { display: inline-flex; flex-direction: column; align-items: flex-start; } .d-link-note small { margin-top: -8px; font: 400 12.5px/1.35 'Inter', sans-serif; color: var(--text-muted); } /* Téléphone à l'horizontale (VITRINE-S8, 25/09) : l'illustration passait avant le titre et dépassait la hauteur de l'écran (844 x 390 : titre hors de vue). On garde les deux colonnes du bureau, titre à gauche. */ @media (min-width: 600px) and (max-width: 900px) and (max-height: 520px) and (orientation: landscape) { .d-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; } .d-hero .d-figure { order: 0; } }