/* =====================================================================
 * public/css/connexion.css
 * ---------------------------------------------------------------------
 * Port quasi verbatim de la feuille de style de la maquette cliente
 * (Maquette/sigren-login.html) : mêmes sélecteurs, mêmes valeurs, même
 * moteur de mise en page (voir layout()/drawWave()/fitAll() dans
 * connexion.ejs). Seules différences volontaires par rapport au fichier
 * source :
 *  - Polices : la maquette embarque ses fontes en base64 (@font-face,
 *    plusieurs dizaines de Ko par police) ; remplacées ici par les
 *    familles Google Fonts les plus proches (voir <link> dans
 *    partials-head via extraHead) : BSC -> Barlow Semi Condensed,
 *    MON -> Montserrat, BAR -> Barlow, GV -> Caveat (script).
 *  - Bloc d'animation du logo (#alogo .la-*) retiré : le logo animé
 *    dessiné en SVG par la maquette est remplacé par le nouveau logo
 *    du client (public/images/logo-sigren-monogramme.png).
 *  - Dropdown #menu retiré au profit d'un sélecteur de langue simple
 *    (liens ?lang=fr / ?lang=pt, cohérent avec le reste du site).
 * ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600&family=Barlow:wght@400;500;600&family=Montserrat:wght@800&family=Caveat:wght@500;600&display=swap');

:root{--k:1}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:'Barlow Semi Condensed',"Segoe UI",Roboto,Arial,sans-serif;background:#edf7fd;-webkit-font-smoothing:antialiased}
.u{position:absolute}
img.u{display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}

/* ------------ PANNEAU GAUCHE ------------ */
#L{position:absolute;left:0;top:0;height:100%;overflow:hidden;
  --T:80px;
  background:
   radial-gradient(48% 46% at 76% 24%,rgba(0,170,85,.34),transparent 72%),
   radial-gradient(38% 42% at 4% 100%,rgba(0,120,60,.30),transparent 70%),
   radial-gradient(30% 60% at 100% 55%,rgba(20,160,90,.26),transparent 75%),
   linear-gradient(112deg,#022614 0%,#011d10 28%,#032816 52%,#063b20 78%,#0a4f2b 100%)}
#wave{position:absolute;top:0;height:100%;z-index:3;pointer-events:none;overflow:visible}
#L::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(150,255,190,.5) .8px,transparent 1.3px) 0 0/44px 44px;opacity:.12;pointer-events:none}
#L img.u{mix-blend-mode:screen;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5px,#000 calc(100% - 5px),transparent),linear-gradient(180deg,transparent,#000 5px,#000 calc(100% - 5px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5px,#000 calc(100% - 5px),transparent),linear-gradient(180deg,transparent,#000 5px,#000 calc(100% - 5px),transparent);mask-composite:intersect}
#L img.nf{-webkit-mask-image:none;mask-image:none}
.box{position:absolute;border-radius:calc(var(--k)*8px);border:1px solid rgba(70,160,110,.45);
  background:linear-gradient(180deg,rgba(6,52,30,.72),rgba(3,34,19,.74));box-shadow:inset 0 1px 0 rgba(140,230,170,.12)}
.box img.u{mix-blend-mode:lighten}
.t{position:absolute;line-height:1;white-space:nowrap;transform:translateY(-50%);color:#e9f0fb}
.lbl{font-size:calc(var(--k)*14px);font-weight:500;color:#dde6f4}
.val{font-size:calc(var(--k)*24.5px);font-weight:600;color:#fff;letter-spacing:.2px}
.val small{font-size:calc(var(--k)*14.5px);font-weight:500;color:#d7e1f0;margin-left:calc(var(--k)*3px)}
.dl{font-size:calc(var(--k)*14.5px);font-weight:600;display:flex;align-items:center;gap:calc(var(--k)*5px)}
.dl svg{width:calc(var(--k)*12px);height:calc(var(--k)*13px)}
.g{color:#35e28c}.r{color:#ff5050}
.ptl{font-size:calc(var(--k)*14px);font-weight:600;color:#f2f6fc}
.ax{font-size:calc(var(--k)*11.5px);color:#d3dcea;font-weight:500}
#plot{position:absolute}
#plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dot{position:absolute;width:calc(var(--k)*5.5px);height:calc(var(--k)*5.5px);border-radius:50%;background:#c9f7df;transform:translate(-50%,-50%);box-shadow:0 0 calc(var(--k)*4px) #35e28c}
.dot.hl{width:calc(var(--k)*11px);height:calc(var(--k)*11px);background:#aef2cc;border:calc(var(--k)*2px) solid #eafff2;box-shadow:0 0 calc(var(--k)*10px) #35e28c}
#tip{position:absolute;transform:translate(-50%,-100%);background:rgba(3,38,21,.94);border:1px solid rgba(130,220,160,.45);border-radius:calc(var(--k)*5px);
  padding:calc(var(--k)*6px) calc(var(--k)*9px);white-space:nowrap;pointer-events:none}
#tip b{display:block;font-size:calc(var(--k)*12.5px);font-weight:600;color:#fff}
#tip span{display:block;font-size:calc(var(--k)*10.5px);color:#c9d4e6;margin-top:calc(var(--k)*3px)}
#vl{position:absolute;width:0;border-left:1px dashed rgba(190,220,255,.35)}
.bars{position:absolute;display:grid;row-gap:calc(var(--k)*12.4px)}
.bar{display:grid;grid-template-columns:calc(var(--k)*68px) 1fr calc(var(--k)*34px);align-items:center;height:calc(var(--k)*11.6px);font-size:calc(var(--k)*12px);color:#e0e8f4;font-weight:500}
.bar i{display:block;height:calc(var(--k)*9px);background:rgba(120,160,210,.16);position:relative}
.bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:linear-gradient(90deg,#1b8fe6,#3fc6ff);box-shadow:0 0 calc(var(--k)*6px) rgba(63,198,255,.7)}
.bar em{font-style:normal;text-align:right}
.lx{position:absolute}
#net{overflow:visible;mix-blend-mode:screen;pointer-events:none}
#net .nlines path[id]{fill:none;stroke:none}
#net .nflow{fill:none;stroke:#7fe9ff;stroke-width:1.1;stroke-dasharray:1.5 9;stroke-linecap:round;opacity:.55;animation:flow linear infinite}
#net .nflow.rev{stroke:#fcd116;opacity:.45;stroke-dasharray:1.2 11;animation-name:flowr}
#net .pk.out{fill:#bff8ff}
#net .pk.in{fill:#ffe45c}
#net .hub{fill:none;stroke:#aef6ff;stroke-width:1.2;animation:hub 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
#net .nd{fill:none;stroke:#bff3ff;stroke-width:1;animation:nd 2.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes flow{to{stroke-dashoffset:-21}}
@keyframes flowr{to{stroke-dashoffset:24}}
@keyframes hub{0%{transform:scale(.7);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes nd{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){#net .pk,#net .nd,#net .hub{display:none}#net .nflow{animation:none}}

#arms{border-radius:50%;background:radial-gradient(circle,#fff 62%,#eef2f8 100%);display:grid;place-items:center;box-shadow:0 0 0 calc(var(--k)*2px) rgba(252,209,22,.9),0 0 calc(var(--k)*16px) rgba(252,209,22,.25),0 calc(var(--k)*4px) calc(var(--k)*14px) rgba(0,0,0,.35)}
#arms .jsym{width:74%;height:74%;display:block;margin-top:calc(var(--k)*-2px)}

.ln{position:absolute;white-space:nowrap;line-height:1;transform:translateY(-50%)}
#hdr .ln{left:0;color:#fff}
#hdr .h1{font-weight:600;font-size:calc(var(--k)*15.5px);letter-spacing:.2px}
#hdr .h2{font-size:calc(var(--k)*15.5px);color:#e6edf9}#hdr .h2 b{font-weight:600;color:#fff}
#hdr .h3{font-size:calc(var(--k)*13px);color:#c6d3ea}
#scr{transform:rotate(-8deg);transform-origin:0 50%;font-family:'Caveat',cursive;letter-spacing:.6px;word-spacing:.12em;color:#dbe6f8;font-size:calc(var(--k)*25px);line-height:1.05;white-space:nowrap}
#scr div:nth-child(2){padding-left:calc(var(--k)*14px)}
#hero .ln{left:0}
#hero .a,#hero .b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:calc(var(--k)*51px);letter-spacing:-.3px;color:#fff}
#hero .b{color:#58d6ff}
#hero .c{font-size:calc(var(--k)*19.5px);color:#e4ecf9}
.mapl{color:#e9f0fb;text-align:center;white-space:nowrap;line-height:1.45}
#arch{font-size:calc(var(--k)*13px);font-weight:500}
#terr{font-size:calc(var(--k)*14.5px)}
.pc{border-radius:calc(var(--k)*10px);border:1.5px solid rgb(var(--c));
  background:linear-gradient(180deg,rgba(var(--c),.30),rgba(var(--c),.10) 55%,rgba(3,30,17,.6));
  box-shadow:0 0 calc(var(--k)*14px) rgba(var(--c),.55),inset 0 0 calc(var(--k)*16px) rgba(var(--c),.35)}
.pc img{position:absolute;left:50%;transform:translateX(-50%);mix-blend-mode:screen}
.pc .tx{position:absolute;left:3%;right:3%;top:calc(var(--k)*66px);bottom:calc(var(--k)*8px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:calc(var(--k)*7px)}
.pc b{font-size:calc(var(--k)*15px);font-weight:600;color:#fff;line-height:1.13;white-space:nowrap}
.pc small{font-size:calc(var(--k)*12.6px);color:#d3ddef;line-height:1.28;white-space:nowrap}
.arw svg{width:100%;height:100%;filter:drop-shadow(0 0 4px rgba(120,190,255,.9))}
.ft .fic{position:absolute;left:0;top:0;width:calc(var(--k)*44px);height:calc(var(--k)*44px);border-radius:calc(var(--k)*9px);
  border:calc(var(--k)*1.6px) solid #fcd116;background:linear-gradient(180deg,#0b4a2b,#042a17);display:grid;place-items:center;isolation:isolate;
  box-shadow:0 0 calc(var(--k)*5px) rgba(252,209,22,.85),0 0 calc(var(--k)*16px) rgba(252,209,22,.40),0 0 calc(var(--k)*30px) rgba(252,209,22,.15),inset 0 0 calc(var(--k)*9px) rgba(252,209,22,.28)}
.ft .fic::before{content:"";position:absolute;inset:calc(var(--k)*-16px);border-radius:50%;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(252,209,22,.55) 0deg 3deg,transparent 3deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 40%,#000 48%,transparent 70%);mask:radial-gradient(circle,transparent 40%,#000 48%,transparent 70%);animation:rays 18s linear infinite}
.ft .fic::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:1.5px solid rgba(252,209,22,.7);pointer-events:none;animation:pulse 2.8s ease-out infinite}
.ft .fic img{width:calc(var(--k)*34px);height:calc(var(--k)*34px);display:block;mix-blend-mode:screen}
@keyframes rays{to{transform:rotate(360deg)}}
@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.45);opacity:0}}
@media (prefers-reduced-motion:reduce){.ft .fic::before,.ft .fic::after{animation:none}.ft .fic::after{display:none}}
.ft b{position:absolute;left:calc(var(--k)*56px);top:calc(var(--k)*17px);transform:translateY(-50%);font-size:calc(var(--k)*12.8px);font-weight:600;color:#fff;white-space:nowrap}
.ft small{position:absolute;left:calc(var(--k)*56px);top:calc(var(--k)*30px);font-size:calc(var(--k)*11.3px);line-height:calc(var(--k)*14px);color:#b8c5e2;white-space:nowrap}
.rc{position:absolute;left:calc(50% - var(--k)*130px);top:calc(var(--k)*43px);width:calc(var(--k)*260px);height:calc(var(--k)*166px);background:#fff;border-radius:calc(var(--k)*9px);color:#27324f;
  box-shadow:0 0 0 1.5px rgba(46,232,138,.55),0 0 calc(var(--k)*18px) rgba(46,232,138,.45)}
.rc .ln{font-size:calc(var(--k)*11.3px);color:#3a4666}
.rc .ln b{font-weight:600;color:#1d2b55}
.rc .br{position:absolute;left:0;right:0;top:calc(var(--k)*10px);display:flex;justify-content:center;align-items:center;gap:calc(var(--k)*6px);font-family:'Montserrat',sans-serif;font-weight:800;font-size:calc(var(--k)*15px);color:#16398a}
.rc .br img{position:static;width:calc(var(--k)*19px);height:calc(var(--k)*19px);mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
.rc .hd{font-size:calc(var(--k)*12.5px);font-weight:600;color:#1d2b55}
.rc hr{position:absolute;left:calc(var(--k)*14px);width:calc(var(--k)*140px);top:calc(var(--k)*57px);border:0;border-top:1px solid #e3e8f0}
.rc .ok{position:absolute;left:calc(var(--k)*12px);top:calc(var(--k)*141px);height:calc(var(--k)*19px);padding:0 calc(var(--k)*9px) 0 calc(var(--k)*4px);border-radius:999px;background:#e7f7ed;color:#137a45;
  font-size:calc(var(--k)*10.8px);font-weight:600;display:flex;align-items:center;gap:calc(var(--k)*6px);white-space:nowrap}
.chk{display:grid;place-items:center;border-radius:50%;background:#1fbf6a;color:#fff}
.rc .ok .chk{width:calc(var(--k)*14px);height:calc(var(--k)*14px)}
.chk svg{width:62%;height:62%}
.rc .qr{position:absolute;left:calc(var(--k)*162px);top:calc(var(--k)*44px);width:calc(var(--k)*87px);height:calc(var(--k)*82px);background:#fff;border-radius:calc(var(--k)*8px);
  box-shadow:0 0 calc(var(--k)*14px) rgba(46,232,138,.55)}
.rc .qr img{position:absolute;left:calc(var(--k)*6px);top:calc(var(--k)*4px);width:calc(var(--k)*75px);height:calc(var(--k)*73px);mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
.rc .qr .chk{position:absolute;right:calc(var(--k)*-9px);top:calc(var(--k)*-9px);width:calc(var(--k)*23px);height:calc(var(--k)*23px);border:2px solid #fff}
.rc .sc{position:absolute;left:calc(var(--k)*160px);width:calc(var(--k)*92px);top:calc(var(--k)*147px);transform:translateY(-50%);text-align:center;font-size:calc(var(--k)*10px);color:#5c6680;white-space:nowrap}


/* ------------ PANNEAU DROIT ------------ */
#R{--ink:#141a21;--ink2:#46505c;--mut:#6b7480;--line:#dfe3e0;--gn:#007a3d;--gn2:#00914a;--gnd:#005f30;--rd:#ce1126;--yl:#fcd116;
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;position:absolute;top:0;height:100%;overflow:hidden;color:var(--ink);
  background:linear-gradient(180deg,#fbfbf9 0%,#f6f7f4 55%,#f8f9f7 100%)}
#R::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 30% at 50% 17%,rgba(252,209,22,.10),transparent 70%),radial-gradient(50% 36% at 50% 26%,rgba(0,145,74,.05),transparent 75%)}
.hx{position:absolute;text-align:center;white-space:nowrap}
#wm{font-family:'Montserrat',sans-serif;font-weight:800;font-size:calc(var(--k)*66px);line-height:1;letter-spacing:calc(var(--k)*1.5px);color:var(--ink)}
#sub{font-weight:600;font-size:calc(var(--k)*16.5px);line-height:calc(var(--k)*20px);color:var(--ink2)}
#motto{font-weight:500;font-size:calc(var(--k)*10.5px);letter-spacing:.34em;color:var(--mut);display:flex;justify-content:center;align-items:center;gap:calc(var(--k)*14px)}
#motto i{width:calc(var(--k)*5px);height:calc(var(--k)*5px);border-radius:50%;display:block}
#R img.u{mix-blend-mode:darken;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5px,#000 calc(100% - 5px),transparent),linear-gradient(180deg,transparent,#000 5px,#000 calc(100% - 5px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5px,#000 calc(100% - 5px),transparent),linear-gradient(180deg,transparent,#000 5px,#000 calc(100% - 5px),transparent);mask-composite:intersect}
#bottom{position:absolute;left:0;right:0;bottom:0;background-repeat:no-repeat;background-position:center bottom;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#bottom.full{-webkit-mask-image:none;mask-image:none}
#foot{position:absolute;left:0;right:0;bottom:0;text-align:center;pointer-events:none}
#quote{position:absolute;left:0;right:0;font-size:calc(var(--k)*15.5px);line-height:calc(var(--k)*22px);color:var(--ink);font-weight:500}
#flag{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:calc(var(--k)*5px)}
#flag i{display:block;width:calc(var(--k)*30px);height:calc(var(--k)*3px);border-radius:2px}
#copy{position:absolute;left:0;right:0;font-size:calc(var(--k)*11px);color:var(--mut)}
#lang{position:absolute;display:flex;align-items:center;justify-content:center;gap:calc(var(--k)*9px);background:#fff;border:1px solid #d5dfeb;border-radius:999px;cursor:pointer;
  font:500 calc(var(--k)*14px) 'Barlow','Barlow Semi Condensed',sans-serif;color:var(--ink2);box-shadow:0 2px 8px rgba(20,26,33,.05)}
#lang svg{width:calc(var(--k)*18px);height:calc(var(--k)*18px)}
#menu{position:absolute;background:#fff;border:1px solid #d6deec;border-radius:10px;padding:6px;list-style:none;display:none;box-shadow:0 8px 24px rgba(20,40,90,.14);z-index:9;font-size:14px}
#menu.open{display:block}
#menu li{padding:8px 12px;border-radius:6px;color:#35415f;cursor:pointer;white-space:nowrap}
#menu li:hover,#menu li.sel{background:#eef6f1;color:var(--gnd)}
#card{transition:height .25s ease;position:absolute;background:#fff;border:1px solid #e6e9e6;border-radius:calc(var(--k)*14px);box-shadow:0 1px 2px rgba(20,26,33,.04),0 calc(var(--k)*12px) calc(var(--k)*32px) rgba(20,26,33,.07);overflow:hidden}
#card::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--k)*4px);background:linear-gradient(90deg,var(--rd) 0 33.34%,var(--yl) 33.34% 66.67%,var(--gn2) 66.67%)}
#card .pd{position:absolute;left:calc(var(--k)*29px);right:calc(var(--k)*27px);top:0;bottom:0}
#card h3{position:absolute;top:calc(var(--k)*23px);font-size:calc(var(--k)*19px);font-weight:600;color:var(--ink);letter-spacing:.1px}
#card .lead{position:absolute;top:calc(var(--k)*50px);font-size:calc(var(--k)*14.3px);line-height:calc(var(--k)*18px);color:var(--mut);max-width:calc(var(--k)*360px)}
.fld{position:absolute;left:0;right:0;height:calc(var(--k)*41px);border:1px solid var(--line);border-radius:calc(var(--k)*7px);background:#fcfcfb;transition:box-shadow .15s,border-color .15s}
.fld.focus{border-color:var(--gn);background:#fff;box-shadow:0 0 0 3px rgba(0,122,61,.14)}
.fld.focus>svg{color:var(--gn)}
.fld.err{border-color:#e03a3a;box-shadow:0 0 0 2px rgba(224,58,58,.15)}
.fld>svg{position:absolute;left:calc(var(--k)*15px);top:50%;transform:translateY(-50%);width:calc(var(--k)*19px);height:calc(var(--k)*19px);color:#7a838d;transition:color .15s}
.fld input{position:absolute;left:calc(var(--k)*54px);right:calc(var(--k)*44px);top:0;bottom:0;border:0;outline:0;background:transparent;
  font:400 calc(var(--k)*14.3px) 'Barlow','Barlow Semi Condensed',sans-serif;color:var(--ink);letter-spacing:.15px}
.fld input::placeholder{color:#8a929b;opacity:1}
#eye{position:absolute;right:calc(var(--k)*11px);top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:#7a838d;display:flex;padding:2px}
#eye:hover{color:var(--ink)}
#eye svg{width:calc(var(--k)*21px);height:calc(var(--k)*21px)}
.row{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;font-size:calc(var(--k)*13.3px)}
.row label{display:flex;align-items:center;gap:calc(var(--k)*10px);color:var(--ink2);cursor:pointer}
.row input{appearance:none;-webkit-appearance:none;width:calc(var(--k)*18px);height:calc(var(--k)*18px);border-radius:calc(var(--k)*3px);border:1.5px solid #b5bcc4;background:#fff;cursor:pointer;display:grid;place-items:center;margin:0}
.row input:checked{background:var(--gn);border-color:var(--gn)}
.row input:checked::after{content:"";width:calc(var(--k)*9px);height:calc(var(--k)*5px);border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-15%) rotate(-45deg)}
.row a{color:var(--gn);font-weight:600;text-decoration:none}
.row a:hover{text-decoration:underline}
#login{position:absolute;left:0;right:0;height:calc(var(--k)*41px);border:0;border-radius:calc(var(--k)*7px);background:linear-gradient(180deg,var(--gn2),var(--gn));color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:calc(var(--k)*14px);font:500 calc(var(--k)*18px) 'Barlow','Barlow Semi Condensed',sans-serif;box-shadow:0 calc(var(--k)*4px) calc(var(--k)*12px) rgba(0,122,61,.28)}
#login:hover{background:linear-gradient(180deg,var(--gn),var(--gnd))}#login:disabled{opacity:.75;cursor:wait}
#login svg{width:calc(var(--k)*20px);height:calc(var(--k)*20px)}
.or{position:absolute;left:0;right:0;display:flex;align-items:center;gap:calc(var(--k)*14px);font-size:calc(var(--k)*13px);color:var(--mut)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
#msg{position:absolute;left:0;right:0;padding:calc(var(--k)*7px) calc(var(--k)*11px);border-radius:calc(var(--k)*7px);font-size:calc(var(--k)*13px);display:none;z-index:5;box-shadow:0 4px 14px rgba(20,40,90,.12)}
#msg.e{display:block;background:#fdecec;color:#b42323;border:1px solid #f5c2c2}
#msg.s{display:block;background:#e8f8ef;color:#137a45;border:1px solid #b6e6cb}
#msg.i{display:block;background:#f3f5f4;color:#2f3a44;border:1px solid #dde2df}


/* ------------ Intégration serveur (ajouts non présents dans la maquette) ------------ */
/* #alogo : dans la maquette, logo SIGREN animé en SVG inline ; ici, image du nouveau logo client */
#alogo{display:flex;align-items:center;justify-content:center}
#alogo img{width:78%;height:78%;object-fit:contain;display:block}
/* Sélecteur de langue : la maquette a un bouton + dropdown JS (#lang/#menu) ; ici, deux liens
   ?lang=fr / ?lang=pt (même mécanisme que le reste du site, voir partials-head.ejs) */
#lang{text-decoration:none}
#lang a{color:var(--ink2);text-decoration:none;font:500 calc(var(--k)*14px) 'Barlow','Barlow Semi Condensed',sans-serif}
#lang a.actif{color:var(--gnd);font-weight:700}
#lang .sep{color:#c7ccd2}
/* Reçu (aperçu) : ligne de marque, logo + texte SIGREN (base64 dans la maquette -> image ici) */
.rc .br img{mix-blend-mode:normal}
/* Erreur serveur affichée dans #msg dès le premier chargement (pas seulement après interaction JS) */
#msg{white-space:normal}

/* ------------ Logo #alogo : entrée animée, éléments séparés (comme la maquette #alogo.play
   .la-*), reconstituée à partir des 5 calques couleur du nouveau logo client (vert / jaune /
   rouge / balance / étoile), extraits par seuillage de teinte depuis le PNG fourni. ------------ */
#alogo{position:relative;overflow:visible}
#alogo .lyr{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform-box:fill-box}
#alogo.play .lyr-red{animation:laS 1.05s cubic-bezier(.2,.9,.25,1.15) both}
#alogo.play .lyr-green{animation:laArc .9s cubic-bezier(.2,.8,.2,1) .35s both}
#alogo.play .lyr-yellow{animation:laArc .9s cubic-bezier(.2,.8,.2,1) .55s both}
#alogo.play .lyr-scale{animation:laDrop 1.3s cubic-bezier(.3,1.6,.5,1) .95s both}
#alogo.play .lyr-star{animation:laPop .7s cubic-bezier(.3,1.7,.5,1) 1.55s both,laTwinkle 3.4s ease-in-out 2.6s infinite}
@keyframes laS{0%{opacity:0;transform:scale(.4) rotate(-140deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes laArc{0%{opacity:0;transform:scale(.75) rotate(60deg)}100%{opacity:1;transform:none}}
@keyframes laDrop{0%{opacity:0;transform:translateY(-30px) rotate(-12deg)}55%{opacity:1;transform:translateY(0) rotate(6deg)}75%{transform:rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes laPop{0%{opacity:0;transform:scale(0) rotate(-160deg)}100%{opacity:1;transform:none}}
@keyframes laTwinkle{0%,82%,100%{filter:none}90%{filter:drop-shadow(0 0 4px #fcd116) brightness(1.4)}}
@media (prefers-reduced-motion:reduce){#alogo.play .lyr{animation:none!important;opacity:1}}

/* ------------ #net : échange de données en temps réel entre Bissau et les agences, réseau de
   lignes animées repris de la maquette (mêmes coordonnées/durées, sur la même carte statique). */
#net{position:absolute}

/* ------------ Narration animée : le workflow s'active étape par étape, puis les
   graphiques ; voir le minuteur en fin de views/connexion.ejs. ------------ */
.pc{transition:transform .35s ease,box-shadow .35s ease}
.pc.flow-active{transform:scale(1.045);box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 calc(var(--k)*28px) rgba(var(--c),.9),inset 0 0 calc(var(--k)*20px) rgba(var(--c),.6)}
.arw svg{transition:filter .25s ease}
.arw.flow-active svg{animation:flowArrow .55s ease;filter:drop-shadow(0 0 4px rgba(120,190,255,.9)) drop-shadow(0 0 14px #fff)}
@keyframes flowArrow{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
.box{transition:transform .35s ease,box-shadow .35s ease}
.box.flow-active{transform:scale(1.018);box-shadow:0 0 0 2px rgba(46,232,138,.7),0 0 calc(var(--k)*22px) rgba(46,232,138,.55)}
@media (prefers-reduced-motion:reduce){.pc,.box,.arw svg{transition:none}.pc.flow-active,.box.flow-active{transform:none;box-shadow:none}.arw.flow-active svg{animation:none;filter:none}}

/* ------------ Ajustements visuels demandés après relecture ------------ */
/* Champ identifiant (#fU) : pas de bouton "œil" comme sur le champ mot de passe, donc pas
   besoin de réserver autant d'espace à droite -> le texte saisi peut s'étirer davantage. */
#fU input{right:calc(var(--k)*16px)}