/* Variables */
:root{
  --color-brand:#0070b9;
  --color-brand-80:#338dc8;
  --color-brand-20:#cce2f1;
  --color-brand-10:#e6f1f8;
  --color-brand-5:#f2f8fc;
  --color-brand-dark:#005d9c;
  --color-brand-secondary:#f68a39;
  --color-brand-secondary-80:#f7a160;
  --color-brand-secondary-20:#fde8d7;
  --color-text-strong:#1a2f3d;
  --color-text-weak:#596d7a;
  --color-stroke-strong:#7c92a1;
  --color-stroke-weak:#e4ebf0;
  --color-fill:#f5f8fa;
  --color-bg:#ffffff;
  --color-warning:#8f6c1a;
  --color-warning-80:#a58948;
  --color-warning-20:#e9e2d1;
  --color-warning-5:#f9f8f3;
  --color-warning-percent:rgba(143,108,26,1);
  --color-warning-percent-80:rgba(143,108,26,0.8);
  --color-warning-percent-20:rgba(143,108,26,0.2);
  --color-warning-percent-5:rgba(143,108,26,0.05);
  --color-success:#067a58;
  --color-success-80:#389579;
  --color-success-20:#cde4de;
  --color-success-5:#f2f8f6;
  --color-success-percent:rgba(6,122,88,1);
  --color-success-percent-80:rgba(6,122,88,0.8);
  --color-success-percent-20:rgba(6,122,88,0.2);
  --color-success-percent-5:rgba(6,122,88,0.05);
  --color-error:#c73a3a;
  --color-error-80:#d26161;
  --color-error-20:#f4d8d8;
  --color-error-5:#fcf5f5;
  --color-error-percent:rgba(199,58,58,1);
  --color-error-percent-80:rgba(199,58,58,0.8);
  --color-error-percent-20:rgba(199,58,58,0.2);
  --color-error-percent-5:rgba(199,58,58,0.05);
  --color-info:#4c63d9;
  --color-info-80:#7082e1;
  --color-info-20:#a5b1ec;
  --color-info-5:#f6f7fd;
  --font:'Merriweather',serif;
  --size-xs:0.8rem;
  --size-s:1.6rem;
  --size-m:2.4rem;
  --size-l:3.2rem;
  --size-xl:4.8rem;
  --radius-s:0.8rem;
  --radius-m:1.6rem;
  --radius-l:3.2rem;
  --shadow-overlay:0 4px 16px rgba(0,0,0,0.12), 0 16px 48px rgba(0,0,0,0.08);
  --pf-c-button--m-primary--BackgroundColor:#0070b9;
}

/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}

/*BASE*/
*, *::before, *::after {box-sizing:border-box;}
html,body {height:100%; font-family:var(--font); -webkit-font-smoothing:antialiased; color:var(--color-text-strong);}
body, .login-pf body {background:var(--color-fill);}

.page {overflow-y:auto; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;}
.page, .page > *, .form-wrap {height:100%;}
.background-container {display:none;}
.content-container {display:flex; align-items:center; justify-content:center; padding-right:1.8rem; position:relative; z-index:4;}
.content-container p.instruction {line-height:1.6;}
.content-container .checkbox {margin:0 0 var(--size-s) 0;}
.form-wrap {display:flex; flex-direction:column; justify-content:start; gap:var(--size-m); width:100%; max-width:600px; min-height:500px;
  padding:var(--size-l); overflow:auto;}
.heading {text-align:center;}
h1 {font-size:var(--size-s); line-height:1.4; font-weight:bold;}
h1:after {content:""; display:block; width:60px; height:5px; background:var(--color-brand); margin:var(--size-s) auto 0 auto;}
.footer {display:flex; flex-direction:column; align-items:center; border-top:1px solid rgba(0,0,0,0.1); background:rgba(255,255,255,0.03); box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2); /*position:absolute; left:0; bottom:0; right:0;*/}
#card-logo {display:block; max-width:200px; width:100%; padding:var(--size-s) 0 0 0; opacity:0.8;}
.return {display:block; width:32px; height:32px; position:fixed; left:8px; top:8px; z-index:3; padding:7px; background:rgba(255, 255, 255, 0.3); border-radius:100%; display:flex; flex-direction:column; justify-content:center;}

/*form*/
form {display:flex; flex-direction:column; gap:var(--size-s);}
form .mdpTools {align-self:end;}
form .navigation a {color:var(--color-text-strong); text-decoration:underline;}
.form-group {margin-bottom:0;}
.form-wrap .pf-c-form__label-text {display:block; font-weight:700; margin-bottom:4px;}
.form-wrap input.pf-c-form-control {padding:var(--size-s) var(--size-xs);}
.form-wrap input[type="text"],
.pf-c-input-group {border-radius:6px;}
.pf-c-button.pf-m-primary {display:block; width:100%; padding:var(--size-xs); border-radius:6px;}


/*badge et alertes*/
html.login-pf .alert-warning,
html.login-pf .alert-error,
html.login-pf .alert-success,
html.login-pf .alert-info,
html.login-pf #kc-error-message {display:block; gap:var(--size-xs); width:100%; padding:var(--size-xs) var(--size-s); border-bottom:1px solid; text-align:center; font-weight:bold; position:fixed; top:0; right:0; left:0; z-index:8888;}
html.login-pf .alert-warning i:before,
html.login-pf .alert-error i:before,
html.login-pf .alert-success i:before,
html.login-pf .alert-info i:before {vertical-align:middle;}
html.login-pf .alert-warning {background:var(--color-warning-5); border-color:var(--color-warning-20); color:var(--color-warning);}
html.login-pf .alert-info {background:var(--color-info-5); border-color:var(--color-info-20); color:var(--color-info);}
html.login-pf .alert-error,
html.login-pf #kc-error-message {background:var(--color-error-5); border-color:var(--color-error-20); color:var(--color-error);}
html.login-pf .alert-success {background:var(--color-success-5); border-color:var(--color-success-20); color:var(--color-success);}
html.login-pf form .form-group .alert-info {margin-top:var(--size-xs);}
html.login-pf body .pf-c-form__helper-text.pf-m-error {color:var(--color-error); margin:4px 0; display:inline-block; background:rgba(255, 255, 255, 0.5); padding:5px;}

@media(min-width:900px) {
  .page {background:#1a2f3d; display:grid; grid-template-columns:1fr 1fr;}
  .background-container {display:block;}
  .form-wrap {height:auto; background:rgba(255,255,255,0.2); border-radius:var(--radius-l);
    box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.3), var(--shadow-overlay); border:10px solid rgba(255,255,255,0.05); margin-top:-10%; position:relative;}

  /* Photo BG */
  .bg-photo {display:block; position:absolute; inset:0; z-index:0;}
  .bg-photo video  {filter: opacity(0.3); }
  .bg-photo img {width:100%; height:100%; object-fit:cover; object-position:left center;}

  /* ── RIBBON on the photo ── */
  .ribbon-section {display:block; position:absolute; overflow:hidden; height:100vh; width:100%;}
  .ribbon-section svg {width:100%; height:100%; position:absolute; top:40%; right:0; left:0; z-index:2;}
  .ribbon-path {fill:none; stroke:url(#ribbonGradient); stroke-width:90; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 8px 32px rgba(139, 58, 139, 0.25)); stroke-dasharray:3200; stroke-dashoffset:3200; animation:drawRibbon 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;}
    @keyframes drawRibbon {
      to { stroke-dashoffset: 0; }
    }
}