/* Thème Observabilité : console sombre, accents cyan/orange, waterfall de traces */
:root, :root[data-theme="dark"] {
  --md-primary: #4dd0e1;
  --md-on-primary: #00363d;
  --md-primary-container: #004f58;
  --md-on-primary-container: #97f0ff;
  --md-surface: #0e1418;
  --md-surface-container: #151d23;
  --md-surface-container-high: #1e2830;
  --md-on-surface: #e1e8ed;
  --md-on-surface-variant: #a9b8c2;
  --md-outline: #5f7380;
  --md-outline-variant: #2a3944;
  --warn: #ffb74d;
  --err: #ef5350;
  --ok: #66bb6a;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --md-primary: #00677a;
  --md-on-primary: #fff;
  --md-primary-container: #b8eaff;
  --md-on-primary-container: #001f28;
  --md-surface: #f3f8fa;
  --md-surface-container: #e8f0f3;
  --md-surface-container-high: #dae5e9;
  --md-on-surface: #151d20;
  --md-on-surface-variant: #3f4a4f;
  --md-outline: #6f797e;
  --md-outline-variant: #bfc8cc;
  --warn: #a15c00;
  --err: #ba1a1a;
  --ok: #2e7d32;
  color-scheme: light;
}
body { background-image: radial-gradient(circle at 85% -10%, rgb(77 208 225 / .12), transparent 45%), linear-gradient(rgb(255 255 255 / .02) 1px, transparent 1px); background-size: auto, 100% 32px; }

.hero { padding-top: clamp(40px, 7vw, 88px); }
.hero-grid { display: grid; gap: 40px; grid-template-columns: 1.1fr .9fr; align-items: center; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--md-outline-variant); font-family: var(--font-mono); font-size: .8rem; color: var(--ok); margin-bottom: 20px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgb(102 187 106 / .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgb(102 187 106 / 0); } 100% { box-shadow: 0 0 0 0 rgb(102 187 106 / 0); } }
.hero h1 span { color: var(--md-primary); }

/* Fenêtre de logs */
.terminal { background: #090d10; border: 1px solid var(--md-outline-variant); border-radius: var(--md-radius-l); overflow: hidden; box-shadow: var(--md-elev-2); }
.terminal-bar { display: flex; gap: 6px; padding: 12px 16px; background: var(--md-surface-container-high); align-items: center; }
.terminal-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--md-outline); }
.terminal-bar b { margin-left: 8px; font: 500 .75rem var(--font-mono); color: var(--md-on-surface-variant); }
.terminal pre { margin: 0; padding: 16px; font: .78rem/1.7 var(--font-mono); overflow-x: auto; color: var(--md-on-surface-variant); }
.lvl-info { color: var(--md-primary); } .lvl-warn { color: var(--warn); } .lvl-ok { color: var(--ok); } .lvl-err { color: var(--err); }

/* Signaux : logs / métriques / traces */
.signal { position: relative; }
.signal .tag { font: 500 .72rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--md-primary); }
.signal h3 { margin-top: 6px; }
.tools { margin-top: 14px; }

/* Jauges façon monitoring */
.meter-fill { background: linear-gradient(90deg, var(--md-primary-container), var(--md-primary)); }
.meter-row span:last-child { font-family: var(--font-mono); color: var(--md-primary); }

/* Waterfall de traces : une expérience = un span */
.trace { background: var(--md-surface-container); border: 1px solid var(--md-outline-variant); border-radius: var(--md-radius-l); padding: 24px; }
.trace-scale { display: flex; justify-content: space-between; font: .75rem var(--font-mono); color: var(--md-on-surface-variant); border-bottom: 1px dashed var(--md-outline-variant); padding-bottom: 8px; margin-bottom: 8px; }
.span { padding: 14px 0; border-bottom: 1px solid var(--md-outline-variant); }
.span:last-child { border-bottom: 0; }
.span-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 8px; }
.span-head h3 { margin: 0; font-size: 1.05rem; }
.span-head .when { font: .8rem var(--font-mono); color: var(--md-on-surface-variant); }
.span-track { position: relative; height: 14px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--md-surface-container-high) 0 1px, transparent 1px 10%); }
.span-bar { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--md-primary); min-width: 6px; }
.span-bar.now { background: linear-gradient(90deg, var(--md-primary), var(--ok)); }
.span p { margin: 10px 0 8px; color: var(--md-on-surface-variant); }
/* Positions (mois depuis 01/2011 sur 190 mois) */
.p-edf    { left: .5%;  width: 8.4%; }
.p-sfr    { left: 8.9%; width: 37.9%; }
.p-sg     { left: 46.8%; width: 5.3%; }
.p-axa    { left: 52.1%; width: 13.7%; }
.p-maif   { left: 65.3%; width: 13.7%; }
.p-poste  { left: 80%;  width: 20%; }

.edu li { padding: 14px 0; border-bottom: 1px solid var(--md-outline-variant); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.edu li:last-child { border: 0; }
.edu strong { font-weight: 500; }
.edu .when { font-family: var(--font-mono); font-size: .85rem; color: var(--md-on-surface-variant); }

.stat { font: 500 2.4rem var(--font-mono); color: var(--md-primary); line-height: 1; margin-bottom: 8px; }
.course { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .p-sg { min-width: 10px; }
}
.spans { list-style: none; margin: 0; padding: 0; }
.err-page { min-height: 100vh; display: grid; place-content: center; text-align: center; } .err-page .actions { justify-content: center; }

/* ===== Fond graphique : courbes, barres et donuts en filigrane ===== */
body { background-image: url("/bg-charts.svg"), radial-gradient(circle at 85% -10%, rgb(77 208 225 / .12), transparent 45%); background-size: 900px 640px, auto; background-repeat: repeat, no-repeat; background-attachment: fixed, scroll; }
.hero { position: relative; }

/* ===== Hero : photo aléatoire ===== */
.hero-visual { display: grid; gap: 16px; }
.portrait { margin: 0; position: relative; border-radius: var(--md-radius-xl); overflow: hidden; border: 1px solid var(--md-outline-variant); box-shadow: var(--md-elev-2); background: var(--md-surface-container); }
.portrait img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; }
.portrait-cap { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgb(14 20 24 / .78); backdrop-filter: blur(8px); font: 500 .8rem var(--font-mono); color: var(--md-on-surface); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* ===== Logos ===== */
.stack-title { font: 500 .85rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--md-on-surface-variant); margin: 24px 0 12px; }
.logos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.logo { display: grid; justify-items: center; gap: 10px; padding: 18px 8px 14px; border-radius: var(--md-radius-l); background: #f4f7f9; color: #1d2a33; border: 1px solid var(--md-outline-variant); font-weight: 500; font-size: .85rem; text-align: center; transition: transform .2s, box-shadow .2s; }
.logo:hover { transform: translateY(-3px); box-shadow: var(--md-elev-2); }
.logo img { width: 40px; height: 40px; }

.tools-chart { margin: 16px 0 0; grid-column: 1 / -1; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 28px; align-items: center; gap: 12px; margin-bottom: 10px; font-size: .92rem; }
.bar-track { height: 18px; background: var(--md-surface-container-high); border-radius: 6px; overflow: hidden; }
.bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--md-primary-container), var(--md-primary)); }
.bar-row b { font-family: var(--font-mono); text-align: right; }
.w-100 { width: 100%; } .w-25 { width: 25%; }


/* Corrections de rendu */
.portrait img { height: auto; }

/* ===== Mini graphiques discrets le long des sections ===== */
.has-deco { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.has-deco > div { max-width: 62ch; }
.deco { flex: none; width: 128px; height: 56px; opacity: .75; }
.deco-donut { width: 64px; height: 64px; }
.mc-card { position: absolute; top: 18px; right: 18px; width: 64px; height: 30px; opacity: .85; }
.mc-l { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mc-a, circle.mc-a { stroke: var(--md-primary); } .mc-w, circle.mc-w { stroke: var(--warn); } .mc-g, circle.mc-g { stroke: var(--ok); } .mc-mute { stroke: var(--md-outline); stroke-dasharray: 3 4; }
.mc-a-f { fill: var(--md-primary); fill-opacity: .8; } .mc-w-f { fill: var(--warn); fill-opacity: .9; } .mc-g-f { fill: var(--ok); fill-opacity: .85; }
.mc-bg { stroke: var(--md-surface-container-high); }
.mc-area { fill: var(--md-primary); fill-opacity: .12; }
@media (max-width: 640px) { .deco { display: none; } .mc-card { width: 52px; } }

/* Terminal et pastilles : toujours sombres, quel que soit le thème */
.terminal-bar { background: #1e2830; }
.terminal-bar b { color: #a9b8c2; }
.terminal pre { color: #a9b8c2; }
.terminal .lvl-info { color: #4dd0e1; } .terminal .lvl-warn { color: #ffb74d; } .terminal .lvl-ok { color: #66bb6a; } .terminal .lvl-err { color: #ef5350; }
.portrait-cap { color: #e1e8ed; }
:root[data-theme="light"] .meter-fill { background: linear-gradient(90deg, #5cc2d6, var(--md-primary)); }
:root[data-theme="light"] .bar { background: linear-gradient(90deg, #5cc2d6, var(--md-primary)); }

/* ===== Logos des entreprises et écoles ===== */
.span-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.span-id h3 { min-width: 0; }
.org-slot { flex: none; width: 96px; height: 44px; display: grid; place-items: center; background: #fff; border-radius: 10px; border: 1px solid var(--md-outline-variant); padding: 4px 8px; }
.org-logo { width: auto; max-width: 100%; object-fit: contain; }
.org-none { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); font: 700 .75rem var(--font-mono); letter-spacing: .04em; text-align: center; }
.edu-id { display: flex; align-items: center; gap: 14px; }
@media (max-width: 640px) { .org-slot { width: 72px; height: 40px; } .org-logo { height: 26px; } }

/* Ajustements de mise en page */
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.hero { padding-bottom: 16px; }
.span-head { align-items: center; }
.span-head .when { white-space: nowrap; }
.org-slot { width: 120px; height: 48px; }
.org-logo { max-height: 36px; height: 36px; }
.has-deco > div { flex: 1 1 auto; }
@media (max-width: 640px) { .org-slot { width: 84px; height: 42px; } .org-logo { height: 28px; max-height: 28px; } .span-head .when { white-space: normal; } }

/* Président fondateur de RousselTM */
.founder { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; max-width: 60ch; color: var(--md-on-surface); font-weight: 500; }
.founder svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--md-primary); }
.founder a { color: var(--md-primary); font-weight: 700; }

/* Formations : pastilles cliquables */
.chip-link { text-decoration: none; transition: background .2s, box-shadow .2s; }
.chip-link:hover { box-shadow: var(--md-elev-1); background: var(--md-primary-container); color: var(--md-on-primary-container); text-decoration: none; }
#formations .actions { margin-top: 28px; }