:root{color-scheme:light;--bg:#eaf5ff;--panel:#ffffff;--line:#bed8ec;--text:#111111;--muted:#202020;--accent:#1674b8;--value-size:30px;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f5faff,#eaf5ff)}main{max-width:1240px;margin:auto;padding:34px 40px}button,input,select,textarea{font:inherit}button{cursor:pointer;color:var(--text);background:#ffffff;border:1px solid #9ac3e0;border-radius:9px;padding:10px 15px}button:hover{border-color:var(--accent);background:#dcefff}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.masthead,.brand,.preview-top,.banner-top,.banner-bottom,.playback,.section-heading,.message-heading,.apply-row,footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.masthead{padding-bottom:24px;border-bottom:1px solid var(--line)}.brand{justify-content:flex-start;gap:12px;color:var(--text);text-decoration:none;font-size:17px;font-weight:750;letter-spacing:1px}.brand-icon{font-size:32px;color:var(--accent)}.brand-light{font-weight:350}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;color:var(--muted)}.demo-pill{font-size:10px;letter-spacing:1.4px;color:var(--accent);border:1px solid #9ac3e0;border-radius:30px;padding:9px 13px;white-space:nowrap}.demo-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px}.intro{margin:50px 0 35px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2.3px;color:var(--accent);margin:0 0 15px}h1{font-size:clamp(38px,5vw,62px);font-weight:500;letter-spacing:-2px;line-height:1.06;margin:0}h1 span{color:var(--accent)}.intro>p:last-child{font-size:15px;color:var(--muted);margin-top:20px}.preview-top{font-size:10px;letter-spacing:1.5px;color:var(--muted);margin-bottom:12px}.preview{perspective:1200px}.banner{border:1px solid #8abbdc;background:linear-gradient(115deg,#dcefff,#edf7ff 70%);border-radius:16px;overflow:hidden;box-shadow:0 22px 55px #21639414;transform-origin:center}.banner-top{padding:18px 24px;color:var(--accent);font-size:11px;letter-spacing:1.4px;text-transform:uppercase}.banner-top span:last-child{color:#111111;font-variant-numeric:tabular-nums}.viewport{height:192px;overflow:hidden;position:relative}#slide{height:100%;padding:12px 24px;display:flex;flex-direction:column;justify-content:center;gap:20px}.slide-intro{font-size:17px;margin:0;font-weight:400;color:#111111}.metrics{display:grid;grid-template-columns:repeat(var(--count,6),minmax(0,1fr));gap:14px}.metric{border-left:1px solid #aacde5;padding-left:14px;min-width:0}.metric:first-child{border:0;padding-left:0}.metric-icon{color:var(--accent);margin-right:7px}.metric-label{font-size:11px;line-height:1.5;color:#111111;min-height:18px}.metric-value{font-size:var(--value-size);font-weight:550;letter-spacing:-1px;white-space:nowrap;font-variant-numeric:tabular-nums;margin-top:6px}.metric-unit{display:block;color:#111111;font-size:11px;margin-top:3px;min-height:15px}.banner-bottom{border-top:1px solid #b9d7ed;padding:13px 24px;color:#111111;font-size:9px;letter-spacing:1.2px}.playback{margin-top:16px;flex-wrap:wrap}.transport{display:flex;gap:8px}.transport button{font-size:12px}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tabs button{width:28px;height:28px;padding:0;font-size:10px;border-radius:50%;background:transparent}.tabs button[aria-pressed=true]{background:var(--accent);color:#111111;border-color:var(--accent)}.settings{margin-top:44px;padding:28px;background:#ffffff;border:1px solid var(--line);border-radius:16px}h2{font-size:24px;font-weight:500;margin:0;letter-spacing:-.5px}.quiet{background:transparent;font-size:12px}.global-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:28px 0}label{font-size:12px;color:#111111}input:not([type=checkbox]),select,textarea{width:100%;display:block;margin-top:7px;background:#f5faff;border:1px solid #aacde5;border-radius:7px;padding:9px;color:var(--text);min-width:0}input[type=checkbox]{accent-color:var(--accent);margin-right:7px}label:has(input[type=checkbox]){align-self:center}.scenarios{display:flex;gap:22px;flex-wrap:wrap;padding:18px 0;border-block:1px solid var(--line);font-size:12px}.category-row{display:grid;grid-template-columns:150px 1fr 70px 80px 70px 150px;gap:12px;padding:17px 0;border-bottom:1px solid var(--line);align-items:center}.category-row>label:first-child{font-weight:600;color:var(--text)}.message-heading{margin-top:26px}h3{font-size:17px;font-weight:500}.message-heading button{font-size:12px}.hint,#save-status{font-size:12px;line-height:1.6;color:var(--muted)}.message-row{display:grid;grid-template-columns:70px 1fr 75px 90px auto;gap:14px;align-items:center;margin:14px 0}textarea{resize:vertical;min-height:78px}.primary{background:var(--accent);color:#111111;font-weight:650;border-color:var(--accent)}.primary:hover{background:#bedff6}.apply-row{margin-top:24px}.message-text{font-size:clamp(18px,2.3vw,27px);white-space:pre-wrap;overflow:auto;max-height:125px;line-height:1.45;margin:0;overflow-wrap:anywhere}.alert-title{font-size:23px;margin:0;color:#111111}.alert-text{font-size:14px;color:#111111;margin:0;line-height:1.6}.banner.alert-active{border-color:#b58322}.stale{color:#111111}footer{color:#202020;font-size:10px;letter-spacing:1.1px;margin-top:28px;padding-bottom:20px}footer span{font-size:10px;letter-spacing:0}
@media(max-width:1000px){.category-row{grid-template-columns:140px 1fr 60px 70px 60px 140px;gap:8px}.metric-value{font-size:calc(var(--value-size)*.82)}.global-settings{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){main{padding:22px 18px}.intro{margin:35px 0 28px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}.viewport{height:310px}.metric:nth-child(4){border:0;padding-left:0}.metric-value{font-size:var(--value-size)}.banner-top,#slide,.banner-bottom{padding-left:18px;padding-right:18px}.preview-top{letter-spacing:.5px;font-size:9px}.settings{padding:20px}.category-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.category-row>label:first-child{grid-column:1/-1}.category-row>label:nth-child(2){grid-column:1/-1}.category-row>label:last-child{grid-column:1/-1}.global-settings{grid-template-columns:repeat(2,1fr)}.message-row{grid-template-columns:1fr 1fr}.message-row label:nth-child(2){grid-column:1/-1;grid-row:2}.message-row button{justify-self:start}.apply-row,footer{align-items:flex-start;flex-direction:column}.brand{font-size:13px}.brand small{font-size:7px}.demo-pill{font-size:8px;padding:8px}.section-heading{align-items:flex-start}.section-heading .quiet{max-width:110px}.banner-bottom{letter-spacing:.4px;font-size:8px}.message-text{max-height:230px}.alert-text{font-size:13px}}
@media(max-width:380px){.metric-value{font-size:calc(var(--value-size)*.8)}.brand-icon{display:none}.global-settings{grid-template-columns:1fr}.preview-top{align-items:flex-start;flex-direction:column;gap:4px}}
/* Version compacte : garder une hauteur fixe entre les catégories. */
.banner-top{padding:6px 24px}
.viewport{height:118px}
#slide{padding:4px 24px;gap:6px}
.slide-intro{font-size:15px;flex-shrink:0}
.metric-value{margin-top:3px}
.metric-unit{margin-top:1px}
.banner-bottom{padding:5px 24px}
.message-text{min-height:0;max-height:78px;flex-shrink:1;font-size:22px;line-height:1.3}
.alert-title{font-size:20px}
.alert-text{font-size:13px;line-height:1.4;min-height:0;overflow:auto}
@media(max-width:760px){
  .viewport{height:220px}
  .banner-top,#slide,.banner-bottom{padding-left:18px;padding-right:18px}
  #slide{gap:9px}
  .metrics{gap:10px}
  .message-text{max-height:160px;font-size:20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* Thème blanc et bleu : textes noirs, accents bleus. */
.demo-pill,.eyebrow,h1 span,.banner-top{color:var(--text)}
.primary,.tabs button[aria-pressed=true]{background:#cce8fc;color:#111111;border-color:#6ea8d1}
.primary:hover{background:#b9ddf7}


/* Personnalisation du texte, limitée au bandeau. */
.banner{--banner-text-color:#111111;--banner-text-size:14px;color:var(--banner-text-color)}
.banner .banner-top,.banner .banner-top span,.banner .banner-bottom,.banner .slide-intro,.banner .metric-label,.banner .metric-value,.banner .metric-unit,.banner .metric-icon,.banner .message-text,.banner .alert-title,.banner .alert-text{color:var(--banner-text-color)}
.banner .metric-label,.banner .metric-unit,.banner .alert-text{font-size:var(--banner-text-size);line-height:1.3}
.banner .slide-intro{font-size:calc(var(--banner-text-size) + 1px)}
.banner .message-text,.banner .alert-title{font-size:calc(var(--banner-text-size) + 6px)}
.banner .viewport{height:auto;min-height:118px}
.banner #slide{height:auto;min-height:118px}
.banner .metric-value{white-space:normal;overflow-wrap:anywhere}
input[type=color]{height:40px;padding:4px;cursor:pointer}
@media(max-width:760px){.banner .viewport,.banner #slide{min-height:220px}.banner .metrics[data-count="7"]{row-gap:14px}.banner .metric:nth-child(7){border:0;padding-left:0}}

/* Apparence indépendante pour chaque catégorie. */
.banner .metric-value{color:var(--banner-value-color,#111111);font-size:var(--value-size)}
.category-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.category-row>label:first-child{grid-column:1 / 3}
.category-row>label:nth-child(2){grid-column:3 / -1}
.category-row>label:nth-child(6){grid-column:4 / -1}
.category-row>label:nth-child(n+7){grid-column:span 2}
[hidden]{display:none!important}
@media(max-width:760px){.category-row{grid-template-columns:repeat(3,minmax(0,1fr))}.category-row>label:first-child,.category-row>label:nth-child(2),.category-row>label:nth-child(6){grid-column:1/-1}.category-row>label:nth-child(n+7){grid-column:auto}}

/* Présentation épurée : introduction conservée, sans titre ni commandes. */
.banner-top,.playback{display:none}
/* Contenir la projection 3D dans la fenêtre du bandeau, sur les deux axes. */
.preview{overflow:hidden;overflow:clip}

/* Typographie générale et titres indépendants. */
.banner{font-family:var(--banner-font,Segoe UI,Arial,sans-serif)}
.banner .metric-label,.banner .metric-unit,.banner .metric-value,.banner .message-text,.banner .alert-text,.banner .alert-title,.banner .banner-bottom{font-weight:var(--banner-weight,400);text-decoration:var(--banner-decoration,none)}
.banner #slide{gap:18px;padding-top:10px;padding-bottom:10px}
.value-window{overflow:hidden;min-width:0}
.text-typography{display:grid;gap:10px;align-content:start}
.category-row>label:nth-child(10){grid-column:1 / 3}
.category-row>label:nth-child(11){grid-column:3 / 5}
.category-row>label:nth-child(12){grid-column:5 / 6}
.category-row>label:nth-child(13){grid-column:6 / 7}
@media(max-width:760px){.category-row>label:nth-child(10),.category-row>label:nth-child(11){grid-column:span 3}.category-row>label:nth-child(12),.category-row>label:nth-child(13){grid-column:span 1}}

/* Catégories organisées en un en-tête et trois lignes de styles. */
.category-card{margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:#f8fcff}
.category-header{display:grid;grid-template-columns:minmax(180px,2fr) 70px 90px 70px minmax(145px,1.4fr);align-items:center;gap:12px;margin-bottom:16px}
.category-header>label:first-child{font-weight:700;font-size:14px}
.style-row{border:0;border-top:1px solid var(--line);padding:12px 0;margin:0;display:grid;grid-template-columns:100px minmax(130px,1fr) 100px 80px 100px;gap:12px;align-items:center;min-width:0}
.style-row legend{font-size:13px;font-weight:700;padding:0 10px 0 0}
.style-row[data-style=title]{grid-template-columns:minmax(160px,2fr) 100px minmax(130px,1fr) 100px 80px 100px}
.banner .metric-value{font-family:var(--value-font,Arial,sans-serif);font-weight:var(--value-weight,400);text-decoration:var(--value-decoration,none)}
@media(max-width:1000px){.category-header{grid-template-columns:repeat(4,minmax(0,1fr))}.category-header>label:first-child{grid-column:1/-1}.style-row,.style-row[data-style=title]{grid-template-columns:repeat(3,minmax(0,1fr))}.style-row[data-style=title]>label:first-of-type{grid-column:1/-1}}
@media(max-width:500px){.category-card{padding:12px}.category-header,.style-row,.style-row[data-style=title]{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Présentation inspirée des captures WS40 : barre bleue et cartes en relief. */
.banner{background:#eaf4ff;border-color:#dbe4ef}
.banner #slide{padding:0;gap:0;justify-content:flex-start}
.banner .slide-intro{background:#1f6fd6;margin:0;padding:9px 14px;line-height:1.35;letter-spacing:0;overflow-wrap:anywhere}
.banner .metrics{margin:14px 14px 12px;gap:10px}
.banner .metrics .metric{padding:10px 7px 8px;text-align:center;background:linear-gradient(180deg,#fbfdff,#f9fcff);border:1px solid #dbe4ef;border-bottom:3px solid #6688a5;border-radius:9px;box-shadow:0 3px 5px #234b7020,inset 0 1px 0 #fff;display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.banner .metric-value{margin-top:2px}
.banner .metric-unit{margin-top:0}
.banner .message-text,.banner .alert-title,.banner .alert-text{margin:14px}
.banner .banner-bottom{background:#eaf4ff}
@media(max-width:520px){.banner .metrics{grid-template-columns:repeat(2,minmax(0,1fr));margin:12px;gap:10px}.banner .metrics .metric{padding:10px 8px 8px}}

/* Palette relevée dans les captures WS40 de Monsieur. */
.preview{background:#045cb4}

/* Couleurs désignées « fond » et « avant » sur la capture annotée. */
.banner,.banner .banner-bottom{background:#f2f7fa}
.banner .metrics .metric{background:linear-gradient(180deg,#fafcfe,#f8fbfd)}
/* Même espace réservé à toutes les catégories, selon leur contenu et la largeur. */
.banner #slide{height:100%;min-height:0}
.banner .viewport{min-height:0}
.banner .banner-bottom{box-sizing:border-box;overflow:hidden}
.mlb-measure .viewport,.mlb-measure #slide,.mlb-measure .banner-bottom{height:auto!important;min-height:0!important;transform:none!important;animation:none!important}


/* Cadre et barre bleue fixes : seuls les éléments sous le titre sont animés. */
.fixed-title{background:#1f6fd6;position:relative;z-index:1;overflow:hidden;box-sizing:border-box}
.banner .fixed-title .slide-intro{background:transparent}
.banner .viewport{perspective:1200px;overflow:hidden}
#motion-panel{height:100%;transform-origin:center;background:transparent}
.mlb-measure #fixed-title,.mlb-measure #motion-panel{height:auto!important;transform:none!important}
.category-header{grid-template-columns:minmax(160px,1.7fr) 60px 75px 65px minmax(135px,1fr) minmax(140px,1fr)}
@media(max-width:1100px){.category-header{grid-template-columns:repeat(3,minmax(0,1fr))}.category-header>label:first-child{grid-column:1/-1}}
@media(max-width:500px){.category-header{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Même barre compacte que Jarvis Prévisions : 13px × 1,5 + 16px. */
.banner .fixed-title{height:35.5px;display:flex;align-items:center}
.banner .fixed-title .slide-intro{width:100%;padding:2px 14px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Cartes centrées entre la barre de titre et le séparateur du pied. */
.banner #slide{justify-content:center}
.banner .metrics{margin-top:14px;margin-bottom:14px;flex-shrink:0}
@media(max-width:520px){.banner .metrics{margin-top:12px;margin-bottom:12px}}

.pressure-reading{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;width:100%}.banner .pressure-metric .metric-value{white-space:nowrap;overflow-wrap:normal;font-size:clamp(24px,calc(var(--value-size)*1.2),36px);letter-spacing:-1.5px;line-height:1.1;flex:0 1 auto}.pressure-trend{display:inline-flex;align-self:center;flex:0 0 28px;width:28px;height:28px;color:#526c7d;vertical-align:middle}.pressure-trend svg{display:block;width:100%;height:100%;overflow:visible}.pressure-dial-face{fill:#e3edf3;fill-opacity:.92;stroke:currentColor;stroke-width:1.7}.pressure-dial-tick{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;opacity:.9}.pressure-dial-needle{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;transform-box:view-box;transform-origin:16px 16px;transform:rotate(var(--pressure-angle,0deg));transition:transform 1.2s cubic-bezier(.2,.7,.25,1),stroke 250ms ease}.pressure-dial-pin{fill:currentColor}.pressure-trend[data-direction=rising]{color:#17612d}.pressure-trend[data-direction=falling]{color:#1c5278}.pressure-trend[data-direction=steady]{color:#42596a}.pressure-trend[data-direction=unknown]{color:#566978}@media(prefers-reduced-motion:reduce){.pressure-dial-needle{transition:none}}

@media(max-width:760px){.banner .pressure-metric .metric-value{font-size:clamp(18px,calc(var(--value-size)*.9),27px)}}

.pressure-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;vertical-align:-2px}.pressure-icon svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.pressure-icon .pressure-icon-pin{fill:currentColor;stroke:none}
