/* Page de connexion « Sûreté inviso » */
.vitrine{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,470px);gap:32px;padding:44px clamp(20px,4vw,64px);overflow:hidden;
  background:radial-gradient(1100px 600px at 12% -10%,#0c4a2c 0%,transparent 60%),radial-gradient(900px 600px at 75% 30%,#0a3a26 0%,transparent 65%),#030d09;color:#e6f0ec}
.vitrine .photo{position:absolute;top:0;left:38%;width:46%;height:56%;min-width:420px;background:url("../img/salle_controle.jpg") center/cover no-repeat;opacity:.5;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 35%,#000 70%,transparent),linear-gradient(to bottom,#000 55%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 35%,#000 70%,transparent),linear-gradient(to bottom,#000 55%,transparent);mask-composite:intersect}
.vitrine .coin{position:absolute;top:0;right:clamp(250px,17vw,330px);width:210px;height:150px;background:linear-gradient(135deg,#15d57f,#08733f);clip-path:polygon(0 0,42% 0,100% 100%,58% 100%);opacity:.9;pointer-events:none}
.vitrine .devise{position:absolute;top:26px;right:clamp(20px,4vw,64px);margin:0;text-align:left;font-size:17px;line-height:1.35;z-index:2;padding-bottom:10px;border-bottom:3px solid #1edc86}
.gauche,.droite{position:relative;z-index:1}
.gauche{display:flex;flex-direction:column;gap:22px;justify-content:center;min-width:0}
.marque{position:relative;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto auto;align-items:center;gap:0 14px;max-width:600px}
.mots{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.28;color:#4ee59a;grid-row:1/3;align-self:start}
.mot-q{grid-column:2;grid-row:1;justify-self:center;color:#4ee59a;font-size:15px;border-top:2px solid #1edc86;padding-top:2px;min-width:150px;text-align:center}
.logo{grid-column:2/4;grid-row:2;font:700 clamp(54px,7vw,92px)/1 'Barlow Semi Condensed',sans-serif;letter-spacing:.14em;color:#25e790;text-shadow:0 0 28px #0c6b3d}
.mot-v{grid-column:2;grid-row:3;justify-self:start;color:#4ee59a;font-size:15px;margin-left:36px;border-top:2px solid #1edc86;padding-top:2px;min-width:100px}
.mot-h{grid-column:3;grid-row:3;justify-self:start;color:#4ee59a;font-size:15px;line-height:1.28;margin-left:60px}
.etiquette{margin:0;color:#25e790;letter-spacing:.08em;text-transform:uppercase;font-weight:600;font-size:17px}
.titre h1{margin:2px 0 8px;font:700 clamp(40px,5vw,64px)/1.05 'IBM Plex Sans',sans-serif;color:#fff;letter-spacing:0}
.titre h1 em{font-style:normal;color:#25e790}
.intro{margin:0;max-width:640px;font-size:15.5px;line-height:1.45;color:#dbe8e2}
.cartes{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;max-width:900px}
.cartes li{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid #17533a;border-radius:12px;background:rgba(5,26,18,.72);backdrop-filter:blur(2px)}
.cartes b{display:block;font-size:16px;margin-bottom:2px}
.cartes span:not(.ico){display:block;font-size:12.5px;line-height:1.35;color:#c4d6cd}
.ico{flex:0 0 52px;height:52px;border-radius:11px;background:linear-gradient(145deg,#12894f,#0a5b34);display:flex;align-items:center;justify-content:center}
.ico svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pied{display:flex;align-items:center;gap:12px;margin:6px 0 0;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:#cfe0d8}
.pied svg{width:22px;height:22px;fill:none;stroke:#25e790;stroke-width:1.8}
.droite{display:flex;align-items:center;justify-content:center;padding-top:70px}
.connexion{width:100%;max-width:470px;display:flex;flex-direction:column;gap:18px;padding:28px 28px 24px;border:1px solid #1f7a4e;border-radius:18px;background:rgba(4,24,16,.86);box-shadow:0 0 0 1px #0b3a26 inset,0 24px 60px rgba(0,0,0,.55)}
.entete{display:flex;gap:14px;align-items:center}
.entete svg{width:50px;height:54px;flex:0 0 50px}
.entete h2{margin:0;font:700 34px/1.1 'IBM Plex Sans',sans-serif;color:#fff}
.entete p{margin:3px 0 0;font-size:14.5px;color:#dbe8e2}
.champ-ico .lb{font-size:16px;font-weight:600;color:#fff;margin-bottom:8px}
.entree{position:relative;display:flex;align-items:center}
.entree > svg{position:absolute;left:14px;width:22px;height:22px;fill:none;stroke:#e6f0ec;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.entree .in{padding-left:50px;padding-right:48px;min-height:52px;border-radius:12px;border-color:#7d93a0;background:#081a14;font-size:16px}
.entree .in::placeholder{color:#8fa8ff;opacity:.85}
.oeil{position:absolute;right:6px;width:44px;height:44px;background:none;border:0;border-radius:10px;color:#e6f0ec;cursor:pointer;display:flex;align-items:center;justify-content:center}
.oeil svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oeil:hover{background:#0f2a21}.oeil:focus-visible{outline:2px solid #25e790}
.oeil[aria-pressed="true"]{color:#25e790}
.valider{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border:0;border-radius:12px;background:linear-gradient(180deg,#22e58b,#10c06f);color:#04140d;font:600 18px 'IBM Plex Sans',sans-serif;cursor:pointer}
.valider svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.valider:hover{filter:brightness(1.08)}.valider:focus-visible{outline:3px solid #fff;outline-offset:2px}
.heure{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #1f7a4e;border-radius:12px;background:#07170f;font-size:15px}
.heure svg{width:26px;height:26px;fill:none;stroke:#25e790;stroke-width:1.8;stroke-linecap:round}
.heure b{font-weight:500;color:#fff}
.note{margin:0;font-size:12.5px;line-height:1.45;color:#cfe0d8}
@media (max-width:1100px){.vitrine{grid-template-columns:1fr}.droite{padding-top:10px}.vitrine .photo{left:10%;width:90%;height:36%}.vitrine .devise{display:none}.vitrine .coin{width:160px;height:90px}}
@media (max-width:560px){.vitrine{padding:28px 16px}.logo{letter-spacing:.08em}.marque{grid-template-columns:1fr}.mots{grid-row:auto}.mot-q,.mot-v,.mot-h{justify-self:start;margin-left:0;min-width:0}}

.vitrine .marque{display:block;max-width:none}.vitrine .marque img{display:block;width:min(100%,470px);height:auto}
@media (max-width:560px){.vitrine .marque img{width:min(100%,380px)}}