/* Portail AMI Senelec — couleurs du logo et navigation métier. */
:root { --page-gutter:clamp(16px,3vw,64px);
  --magenta:#b34274; --purple:#494e97; --orange:#f7ae4c; --ink:#292138;
  --text:#514959; --muted:#706677; --bg:#f8f6f4; --surface:#fff;
  --border:#e9e3e7; --ok:#247c50; --warn:#98672d;
  --workspace-font:"Segoe UI",Roboto,Arial,sans-serif; --sans:var(--workspace-font);
  color-scheme:light;
}
:root[data-theme="dark"] { --ink:#f4eff8; --text:#d6cddd; --muted:#b1a5be; --bg:#171320; --surface:#241d30; --border:#3d334a; --ok:#79dba6; --warn:#ecc28f; color-scheme:dark; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --ink:#f4eff8; --text:#d6cddd; --muted:#b1a5be; --bg:#171320; --surface:#241d30; --border:#3d334a; --ok:#79dba6; --warn:#ecc28f; color-scheme:dark; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:135px; }
body { margin:0; color:var(--text); background:var(--bg); background-image:radial-gradient(ellipse at 0 20%,#b3427409,transparent 55%); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid var(--orange); outline-offset:5px; }
.hidden { display:none!important; }
.apps > :nth-child(1) { --card-delay:0ms; }.apps > :nth-child(2) { --card-delay:80ms; }.apps > :nth-child(3) { --card-delay:160ms; }.apps > :nth-child(4) { --card-delay:240ms; }
.launch-bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:28px; min-height:108px; padding:17px var(--page-gutter); background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 5px 25px #30244306; }
.launch-bar::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:3px; background:linear-gradient(90deg,#494e97,#782371,#ca4274,#ea5040,#f7ae4c); }
.rail__brand { display:flex; align-items:center; gap:13px; flex-shrink:0; }
.rail__mark { width:66px; height:62px; display:grid; place-items:center; }
.rail__mark img { width:100%; height:100%; object-fit:contain; }
.rail__brand b { color:var(--ink); font-size:25px; letter-spacing:.07em; line-height:1.3; }
.rail__brand span { display:block; color:var(--muted); font-size:15px; letter-spacing:.04em; }
.main-nav { display:flex; align-items:center; gap:6px; margin:auto; }
.main-nav a { position:relative; color:var(--text); text-decoration:none; font-size:17px; font-weight:600; padding:13px 15px; border-radius:12px; transition:background .22s,color .22s,transform .22s; white-space:nowrap; }
.main-nav a:hover { color:var(--magenta); background:color-mix(in srgb,var(--magenta) 8%,var(--surface)); transform:translateY(-2px); }
.main-nav a::after { content:""; position:absolute; bottom:6px; left:15px; right:15px; height:2px; background:var(--magenta); transform:scaleX(0); transition:transform .22s; }
.main-nav a:hover::after { transform:scaleX(1); }
.main-nav .nav-home { display:flex; gap:10px; align-items:center; color:var(--magenta); background:color-mix(in srgb,var(--magenta) 9%,var(--surface)); margin-right:8px; }
.nav-home svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; }
.launch-bar__who { flex-shrink:0; display:flex; align-items:center; gap:14px; white-space:nowrap; font-size:17px; font-weight:500; line-height:1.3; padding:11px 16px; border:1px solid var(--border); border-radius:13px; color:var(--muted); background:var(--bg); }
.launch-bar__who > div { display:flex; }
.launch-bar__who .link-btn { font-size:inherit; font-weight:600; padding:0 0 0 14px; border-left:1px solid var(--border); text-decoration:none; }
.launch-bar__who .link-btn:hover,.launch-bar__who .link-btn:focus-visible { text-decoration:underline; }
.launch-bar__who b { color:var(--ink); }
.link-btn { border:0; background:none; color:var(--magenta); padding:5px 0; font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.launch-body { width:100%; margin:0; padding:26px var(--page-gutter) 0; }
.breadcrumb { color:var(--muted); font-size:15px; margin-bottom:23px; }
.breadcrumb span { margin:0 12px; opacity:.5; }
.launch-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); align-items:center; min-height:430px; gap:32px; padding:42px 48px 54px; border-radius:30px; overflow:hidden; background:radial-gradient(ellipse at 90% 30%,#b3427455,transparent 65%),linear-gradient(115deg,#29233d,#4b284d 65%,#782371); box-shadow:0 22px 50px -32px #78237180; animation:reveal .7s ease both; }
.launch-hero::before { content:""; position:absolute; inset:0; background-image:radial-gradient(#ffffff20 1px,transparent 1px); background-size:26px 26px; mask-image:linear-gradient(90deg,transparent,#000); pointer-events:none; z-index:-1; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { color:var(--magenta); font-weight:700; font-size:13px; letter-spacing:.1em; margin:0 0 8px; }
.launch-hero .eyebrow { color:#ffcf92; display:flex; align-items:center; gap:10px; font-size:14px; }
.hero-spark { font-size:23px; }
.title { color:#fff; font-size:clamp(42px,4vw,60px); font-weight:700; letter-spacing:-.04em; line-height:1.15; margin:18px 0; overflow-wrap:anywhere; }
.subtitle { color:#f0e3f0; font-size:20px; line-height:1.75; margin:0 0 25px; }
.hero-link { display:inline-flex; gap:25px; align-items:center; color:#302443; background:#ffcf92; padding:13px 23px; border:1px solid #ffcf92; border-radius:13px; font-size:17px; font-weight:700; text-decoration:none; box-shadow:0 8px 25px #190a2425; transition:transform .25s,background .25s; }
.hero-link:hover { transform:translateY(-3px); background:#ffdeb2; }
.hero-link span { font-size:24px; }
.hero-caption { font-size:14px; color:#d8c5df; margin:17px 0 0; }
.energy-art { position:relative; height:320px; width:100%; max-width:530px; justify-self:center; }
.energy-links { position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; pointer-events:none; }
.energy-field { position:absolute; inset:-30px; width:calc(100% + 60px); height:calc(100% + 60px); z-index:0; pointer-events:none; }
.energy-live { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:#ffe4c2; font-variant-numeric:tabular-nums; white-space:nowrap; }
.energy-live[hidden] { display:none; }
.energy-live output { transition:color .4s; }
.energy-live.is-updated output { color:#fff; text-shadow:0 0 10px #ffcf92; }
.live-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#7ee0a1; box-shadow:0 0 0 0 #7ee0a1aa; animation:live-blink 1.8s ease-out infinite; }
/* Chaîne des métiers, cycle de 8 s : HES -> MDMS (relevés), MDMS -> PNT (bilans & alertes),
   HES -> STS (compteurs & jetons), STS -> PNT (recharges). Le module atteint s'illumine,
   le fond montre son illustration. Rayons vers le cœur : socle commun, discrets. */
.hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%); mask-image:linear-gradient(90deg,transparent 30%,#000 75%); }
.hero-bg i { position:absolute; inset:-4%; background:center/cover no-repeat; opacity:0; mix-blend-mode:screen; filter:saturate(1.15); animation:bg-slot 8s linear infinite; }
.hero-bg .hero-bg__hes { background-image:url(/portal/module-hes.svg); animation-delay:0s; }
.hero-bg .hero-bg__mdms { background-image:url(/portal/module-mdms.svg); animation-delay:2s; }
.hero-bg .hero-bg__pnt { background-image:url(/portal/module-pnt.svg); animation-delay:4s; }
.hero-bg .hero-bg__sts { background-image:url(/portal/module-sts.svg); animation-delay:6s; }
.energy-spoke { fill:none; stroke:#ffffff26; stroke-width:1.2; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; }
.energy-route { fill:none; stroke:#ffffff40; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.energy-flow { fill:none; stroke:#ffcf92; stroke-width:4; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:14 86; stroke-dashoffset:100; opacity:0; filter:drop-shadow(0 0 5px #ffcf92); animation:flow-seg 8s linear infinite; }
.energy-flow--mp { animation-delay:2s; stroke:#f2acd0; filter:drop-shadow(0 0 5px #f2acd0); }
.energy-flow--hs { animation-delay:4s; stroke:#9fe3ff; filter:drop-shadow(0 0 5px #9fe3ff); }
.energy-flow--sp { animation-delay:6s; stroke:#b9f3c8; filter:drop-shadow(0 0 5px #b9f3c8); }
.flow-tag { position:absolute; z-index:3; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em; color:#fff; background:#2a1b33cc; border:1px solid #ffffff30; white-space:nowrap; opacity:.38; animation:tag-on 8s linear infinite; pointer-events:none; }
.flow-tag--hm { top:2px; left:50%; translate:-50% 0; border-color:#ffcf9280; }
.flow-tag--mp { top:50%; right:0; translate:0 -50%; animation-delay:2s; border-color:#f2acd080; }
.flow-tag--hs { top:50%; left:0; translate:0 -50%; animation-delay:4s; border-color:#9fe3ff80; }
.flow-tag--sp { bottom:0; left:50%; translate:-50% 0; animation-delay:6s; border-color:#b9f3c880; }
.energy-node { animation:node-float 7s ease-in-out infinite, node-hit 8s linear infinite; }
.energy-node--one { animation-delay:0s,0s; } .energy-node--two { animation-delay:-1.8s,2s; } .energy-node--four { animation-delay:-5.2s,4s; } .energy-node--three { animation-delay:-3.5s,6s; }
.energy-core { z-index:2; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:140px; height:140px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:#ffffff0d; border:1px solid #ffffff35; border-radius:38px; box-shadow:0 0 65px #e5508030,inset 0 0 35px #ffffff08; animation:core-glow 6s ease-in-out infinite; }
.energy-core img { width:100px; height:84px; object-fit:contain; }
.energy-core span { color:#f5d8ef; font-size:9px; font-weight:700; letter-spacing:.1em; }
.energy-node { position:absolute; z-index:2; width:158px; padding:13px 17px; border:1px solid #ffffff40; border-radius:16px; background:linear-gradient(130deg,#53334f,#3b2947); box-shadow:0 12px 30px #1a0a2425; color:#ead8eb; text-decoration:none; transition:transform .25s,border-color .25s,background .25s; }
.energy-node > span { display:block; font-size:14px; line-height:1.25; }
.energy-node--one > span { font-size:12px; }
.energy-node b { display:flex; align-items:center; justify-content:space-between; color:#fff; font-size:22px; line-height:1.4; margin-top:3px; }
.energy-node i { font-size:18px; font-style:normal; color:#ffcf92; transition:transform .25s; }
.energy-node:hover { transform:translateY(-4px); border-color:#ffcf92; background:#643a5a; }
.energy-node:hover i { transform:translate(2px,-2px); }
.energy-node--one { top:18px; left:4px; }
.energy-node--two { top:18px; right:4px; }
.energy-node--three { bottom:12px; left:4px; }
.energy-node--four { bottom:12px; right:4px; }
.motion-toggle { position:absolute; bottom:13px; right:24px; display:flex; align-items:center; gap:7px; padding:5px 8px; color:#dfcfe4; background:transparent; border:0; border-radius:6px; font-size:12px; cursor:pointer; }
.motion-toggle:hover { color:#fff; background:#ffffff12; }
.motion-toggle span { font-size:15px; }
#module-section { margin-top:42px; }
.section-top { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:26px; }
.section-top h2 { display:flex; align-items:center; gap:13px; font-size:34px; color:var(--ink); line-height:1.3; letter-spacing:-.03em; margin:0; }
.section-top p:not(.eyebrow) { color:var(--muted); font-size:17px; margin:8px 0 0; }
.module-count { font-size:16px; height:33px; min-width:33px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--magenta) 10%,var(--surface)); color:var(--magenta); letter-spacing:0; }
.module-search { display:flex; align-items:center; gap:12px; height:56px; width:370px; padding:0 17px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.module-search svg { width:22px; height:22px; flex-shrink:0; stroke:var(--muted); stroke-width:1.7; fill:none; }
.module-search input { width:100%; min-width:0; border:0; outline:none; background:transparent; color:var(--ink); font-size:17px; }
.module-search:focus-within { outline:3px solid color-mix(in srgb,var(--magenta) 15%,transparent); border-color:var(--magenta); }
/* Cartes : 1 colonne (mobile), 2 (écran moyen / portable), 4 (grand écran), jamais 3 ; une dernière carte
   impaire prend toute la rangée : aucune zone vide quel que soit le nombre de modules autorisés. */
.apps { display:grid; grid-template-columns:repeat(auto-fit,minmax(max(min(100%,340px),clamp(calc(25% - 21px),calc((1700px - 100%) * 999),calc(50% - 14px))),1fr)); gap:28px; }
.apps > .app:last-child:nth-child(odd) { grid-column:1 / -1; }
.app { --accent:#b34274; position:relative; display:flex; flex-direction:column; min-width:0; padding:255px 32px 28px; min-height:510px; border:1px solid var(--border); border-radius:25px; background:var(--surface); color:inherit; text-decoration:none; box-shadow:0 10px 28px -22px #30244340; overflow:hidden; animation:reveal .65s ease backwards; animation-delay:var(--card-delay,0ms); transition:transform .3s,border-color .3s,box-shadow .3s; }
.app[data-module="mdms"] { --accent:#494e97; }
.app[data-module="sts"] { --accent:#a26318; }
.app[data-module="pnt"] { --accent:#782371; }
a.app:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); box-shadow:0 24px 45px -25px color-mix(in srgb,var(--accent) 35%,transparent); }
.app__cover { position:absolute; inset:0 0 auto; height:220px; overflow:hidden; background:linear-gradient(110deg,#45283f,#782371); }
.app[data-module="mdms"] .app__cover { background:linear-gradient(110deg,#272744,#494e97); }
.app[data-module="sts"] .app__cover { background:linear-gradient(110deg,#634035,#b77744); }
.app__cover img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .8s; filter:brightness(1.12) saturate(1.12); }
.app__cover::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,#ffffff16 50%,transparent 65%); transform:translateX(-100%); transition:transform .9s; pointer-events:none; }
a.app:hover .app__cover img { transform:scale(1.025); filter:brightness(1.2) saturate(1.15); }
a.app:hover .app__cover::after { transform:translateX(100%); }
.app__icon { position:absolute; top:188px; left:32px; width:65px; height:65px; display:grid; place-items:center; border:1px solid var(--border); border-radius:19px; color:var(--accent); background:var(--surface); box-shadow:0 5px 18px #30244316; }
.app__icon svg { width:33px; height:33px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.app__badge { position:absolute; top:22px; left:24px; background:#251a3590; border:1px solid #ffffff60; color:#fff; font-size:16px; font-weight:700; letter-spacing:.06em; padding:6px 14px; border-radius:10px; backdrop-filter:blur(10px); }
.app__category { color:var(--accent); font-size:13px; letter-spacing:.09em; font-weight:700; margin:12px 0 7px; }
.app__name { color:var(--ink); font-size:31px; line-height:1.25; letter-spacing:-.03em; margin:0 0 13px; }
.app__desc { color:var(--text); font-size:17px; line-height:1.7; margin:0; }
.app__tags { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 25px; }
.app__tags span { color:var(--text); font-size:14px; padding:5px 11px; border:1px solid var(--border); border-radius:8px; background:var(--bg); }
.app__foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--border); padding-top:20px; margin-top:auto; }
.status { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 8px; color:var(--muted); font-size:14px; }
.status--ok { color:var(--ok); }
.status--soon { color:var(--muted); }
.dot { width:8px; height:8px; background:currentColor; border-radius:50%; flex-shrink:0; }
.status--limited .dot { background:#ba9770; }
.open-arrow { display:inline-flex; padding:11px 17px; margin-left:auto; color:var(--accent); border-radius:11px; background:color-mix(in srgb,var(--accent) 9%,var(--surface)); font-size:16px; font-weight:700; transition:background .25s; }
a.app:hover .open-arrow { background:color-mix(in srgb,var(--accent) 17%,var(--surface)); }
.app__stat { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:12px 15px; background:var(--bg); border:1px solid var(--border); border-radius:12px; color:var(--muted); font-size:15px; }
.app__stat b { color:var(--ink); font-size:17px; }
.rolechip { font-size:12px; padding:2px 7px; border:1px solid var(--border); border-radius:6px; }
.empty-search { text-align:center; padding:45px 20px; border:1px dashed var(--border); border-radius:20px; }
.portal-footer { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:40px; padding:27px 0; border-top:1px solid var(--border); color:var(--muted); font-size:14px; }
.portal-footer p { margin:0; }
.footer-mark { color:var(--magenta); font-size:21px; vertical-align:middle; margin-right:8px; }
.footer-divider { margin:0 9px; opacity:.5; }
@keyframes reveal { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes flow-seg { 0% { stroke-dashoffset:100; opacity:0; } 3% { opacity:1; } 20% { stroke-dashoffset:14; opacity:1; } 24%,100% { stroke-dashoffset:14; opacity:0; } }
@keyframes tag-on { 0%,100% { opacity:.38; } 4%,22% { opacity:1; } 30% { opacity:.38; } }
@keyframes node-hit { 0%,100% { border-color:#ffffff40; box-shadow:0 12px 30px #1a0a2425; } 1% { border-color:#ffcf92; box-shadow:0 0 0 2px #ffcf9255,0 0 32px #ffcf9266; } 14% { border-color:#ffcf92aa; box-shadow:0 0 0 1px #ffcf9233,0 0 22px #ffcf9233; } 24% { border-color:#ffffff40; box-shadow:0 12px 30px #1a0a2425; } }
@keyframes bg-slot { 0% { opacity:0; transform:scale(1); } 6% { opacity:.28; } 25% { opacity:.28; } 31%,100% { opacity:0; transform:scale(1.08); } }
@keyframes node-float { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
@keyframes live-blink { 0% { box-shadow:0 0 0 0 #7ee0a1aa; } 70%,100% { box-shadow:0 0 0 8px #7ee0a100; } }
@keyframes core-glow { 0%,100% { box-shadow:0 0 55px #e5508025,inset 0 0 35px #ffffff08; } 50% { box-shadow:0 0 90px #f7ae4c35,inset 0 0 35px #ffffff12; } }
.motion-paused *, .motion-paused *::before,.motion-paused *::after { animation-play-state:paused!important; }
@media(max-width:1180px) { .launch-bar { gap:16px; padding:16px 24px; flex-wrap:wrap; } .rail__brand { margin-right:auto; } .main-nav { order:3; flex-basis:100%; justify-content:center; border-top:1px solid var(--border); padding-top:8px; } html { scroll-padding-top:195px; } .launch-hero { padding:35px 32px 52px; gap:20px; } .energy-node { width:140px; padding:12px; } .energy-node span { font-size:12px; } .title { font-size:46px; } .subtitle { font-size:18px; } .app__name { font-size:28px; } .app { padding-left:26px; padding-right:26px; } .app__icon { left:26px; } .portal-footer > span:last-child { display:none; } }
@media(max-width:900px) { .launch-hero { gap:24px; padding:34px 30px 52px; } .hero-copy { text-align:center; } .launch-hero .eyebrow { justify-content:center; } .energy-art { width:100%; max-width:490px; height:310px; } .apps { gap:22px; } .app__cover { height:180px; } .app { padding-top:216px; } .app__icon { top:150px; } .app__name { font-size:26px; } .module-search { width:320px; } .section-top h2 { font-size:30px; } }
@media(max-width:700px) { .launch-bar { gap:10px; padding:12px 16px 8px; } .rail__mark { width:51px; height:50px; } .rail__brand { gap:8px; } .rail__brand b { font-size:21px; } .rail__brand span { font-size:13px; } .launch-bar__who { padding:8px 10px; font-size:13px; } .link-btn { font-size:12px; } .main-nav { justify-content:flex-start; overflow-x:auto; padding:8px 0 4px; gap:4px; } .main-nav a { padding:10px 12px; font-size:15px; } .main-nav .nav-home { margin-right:3px; gap:7px; } .nav-home svg { width:18px; height:18px; } html { scroll-padding-top:170px; } .launch-body { padding:20px 16px 0; } .breadcrumb { font-size:13px; margin-bottom:18px; } .launch-hero { padding:29px 20px 55px; border-radius:23px; } .launch-hero .eyebrow { font-size:11px; letter-spacing:.07em; } .title { font-size:42px; } .subtitle { font-size:17px; } .hero-link { font-size:16px; padding:12px 18px; } .hero-caption { font-size:13px; } .energy-art { height:340px; } .flow-tag { display:none; } .energy-node--one > span { font-size:11px; } .energy-node { width:132px; } .energy-node--one,.energy-node--three { left:0; } .energy-node--two,.energy-node--four { right:0; } .energy-core { width:110px; height:110px; border-radius:30px; } .energy-core img { width:81px; height:68px; } .energy-core span { font-size:7px; } .motion-toggle { right:16px; font-size:11px; } #module-section { margin-top:30px; } .section-top { flex-direction:column; align-items:stretch; gap:20px; } .module-search { width:100%; } .section-top h2 { font-size:29px; } .section-top p:not(.eyebrow) { font-size:16px; } .apps { grid-template-columns:1fr; } .app { padding:224px 24px 26px; min-height:490px; } .app__cover { height:190px; } .app__icon { top:159px; left:24px; } .app__name { font-size:28px; } .app__desc { font-size:16px; } .portal-footer { flex-direction:column; align-items:flex-start; gap:8px; font-size:13px; } }
@media(max-width:360px) { .energy-node { width:118px; padding:10px; } .energy-node span { font-size:11px; } .energy-node b { font-size:20px; } .energy-core { width:98px; height:98px; } .title { font-size:36px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } a.app:hover,a.app:hover .app__cover img,.energy-node:hover,.main-nav a:hover,.hero-link:hover { transform:none; } }