/* index.php — styles sortis de la page le 06/11/2026 */
  :root{ --fond:#00B7BC; --ink:#12343b; --ink2:#557; }
  *{ box-sizing:border-box; }
  body{ font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; margin:0; min-height:100vh;
        display:flex; align-items:flex-start; justify-content:center; padding:36px 24px 24px; color:var(--ink);
        /* fond #00B7BC + léger halo lumineux en haut pour la profondeur */
        background:radial-gradient(1200px 620px at 50% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), var(--fond); }
  .wrap{ width:100%; max-width:390px; display:flex; flex-direction:column; align-items:center; }
  /* ===== LOGO : remplacez le contenu de ce bloc par votre SVG (garder la classe .logo) ===== */
  .logo{ height:150px; margin-bottom:24px; text-decoration:none; filter:drop-shadow(0 6px 18px rgba(0,0,0,.20)); }
  .logo svg{ height:100%; width:auto; display:block; }
  /* ===== fin logo ===== */
  .card{ width:100%; background:#fff; border-radius:18px; padding:28px 26px 24px;
         box-shadow:0 24px 60px rgba(0,60,64,.28); }
  .card .hi{ margin:0 0 2px; font-size:1.12rem; font-weight:700; color:var(--ink); text-align:center; }
  .card .sub{ margin:0 0 20px; font-size:.84rem; color:var(--ink2); text-align:center; }
  .field{ margin-bottom:15px; }
  label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink2); margin-bottom:6px; }
  input{ width:100%; padding:12px 13px; border:1.5px solid #d7e0e2; border-radius:11px; font-size:.96rem;
         background:#f8fbfb; color:var(--ink); transition:border-color .15s, box-shadow .15s, background .15s; }
  input::placeholder{ color:#9fb3b5; }
  input:focus{ outline:none; border-color:var(--fond); background:#fff;
               box-shadow:0 0 0 3px rgba(0,183,188,.18); }
  button{ width:100%; margin-top:6px; padding:13px; border:none; border-radius:11px; background:var(--fond);
          color:#fff; font-size:.98rem; font-weight:700; cursor:pointer; transition:background .15s, transform .04s;
          box-shadow:0 8px 20px rgba(0,183,188,.35); }
  button:hover{ background:#00a2a7; }
  button:active{ transform:translateY(1px); }
  /* Ligne d'actions : « Se connecter » + bouton biométrique carré à droite */
  .login-actions{ display:flex; gap:10px; align-items:stretch; }
  .login-actions button[type=submit]{ flex:1 1 auto; }
  /* Même style que « Se connecter » (turquoise plein, icône blanche via currentColor) ;
     on ne surcharge que la géométrie du carré. */
  .pk-square{ flex:0 0 auto; width:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
  .pk-ico-slot{ display:inline-flex; align-items:center; justify-content:center; }
  .pk-ico-slot svg, .pk-ico-holder svg{ width:26px; height:26px; display:block; }
  /* Blocs de message : information (bleu) / alerte (rouge) — titre en gras, paragraphes aérés */
  .msg{ display:flex; gap:10px; align-items:flex-start; text-align:left; padding:11px 13px; border-radius:8px;
        border-left:4px solid; font-size:.85rem; line-height:1.45; margin-bottom:16px; }
  .msg-info{ background:#eaf2fb; border-left-color:#1d4e89; color:#1d3557; }
  .msg-alerte{ background:#fdecec; border-left-color:#a12727; color:#6e1a1a; }
  .msg .msg-ico{ font-size:22px; line-height:1; flex:none; }
  .msg-info .msg-ico{ color:#1d4e89; } .msg-alerte .msg-ico{ color:#a12727; }
  .msg-titre{ display:block; font-weight:700; margin:1px 0 4px; }
  .msg p{ margin:0; } .msg p + p{ margin-top:6px; }
  .erreur{ background:#fdecec; color:#6e1a1a; border:0; border-left:4px solid #a12727; border-radius:8px;
           padding:10px 12px; font-size:.85rem; margin-bottom:16px; }
  .aide{ margin:16px 0 0; font-size:.76rem; color:#cdeff0; text-align:center; }
  .aide strong{ color:#fff; }

  /* ===== INTRO ANIMÉE DU LOGO (jouée seulement si html.intro) ===== */
  .logo-anim{ height:100%; width:auto; display:block; }
  .arrow-line{ opacity:0; }                     /* le trait n'existe que pendant l'intro */
  html.intro .logo{ transform-origin:center center; will-change:transform; }
  html.intro .stage{ animation:stageUp 3.26s cubic-bezier(.6,.02,.25,1) both; }
  @keyframes stageUp {
  0%, 34.0% { transform: translateY(43.5px); }
  57.1% { transform: translateY(21.5px); }
  66.3% { transform: translateY(21.5px); }
  93.9%, 100% { transform: translateY(0); }
}
  html.intro .g{ opacity:0; animation-name:pop; animation-duration:.22s; animation-timing-function:ease-out; animation-fill-mode:both; }
  @keyframes pop{ 0%{opacity:0;transform:translateY(5px);} 100%{opacity:1;transform:translateY(0);} }
  html.intro .w-vs{ animation:typeVS 0.810s cubic-bezier(.5,.1,.2,1) 0.300s both; }
  html.intro .w-rn{ animation:typeRN 0.450s cubic-bezier(.5,.1,.2,1) 1.410s both; }
  html.intro .w-gp{ animation:typeGP 0.900s cubic-bezier(.5,.1,.2,1) 2.160s both; }
  @keyframes typeVS {
  0.0% { transform: translateX(90.85px); }
  11.11% { transform: translateX(84.60px); }
  22.22% { transform: translateX(77.75px); }
  33.33% { transform: translateX(65.85px); }
  44.44% { transform: translateX(53.85px); }
  55.56% { transform: translateX(40.70px); }
  66.67% { transform: translateX(29.75px); }
  77.78% { transform: translateX(11.95px); }
  88.89% { transform: translateX(0.00px); }
  100% { transform: translateX(0); }
}
  @keyframes typeRN {
  0.0% { transform: translateX(61.90px); }
  20.0% { transform: translateX(48.50px); }
  40.0% { transform: translateX(23.90px); }
  60.0% { transform: translateX(14.15px); }
  80.0% { transform: translateX(0.00px); }
  100% { transform: translateX(0); }
}
  @keyframes typeGP {
  0.0% { transform: translateX(73.05px); }
  10.0% { transform: translateX(62.90px); }
  20.0% { transform: translateX(58.85px); }
  30.0% { transform: translateX(45.85px); }
  40.0% { transform: translateX(34.40px); }
  50.0% { transform: translateX(20.35px); }
  60.0% { transform: translateX(16.30px); }
  70.0% { transform: translateX(10.70px); }
  80.0% { transform: translateX(7.25px); }
  90.0% { transform: translateX(0.00px); }
  100% { transform: translateX(0); }
}
  html.intro .bar-top{ opacity:0; animation-name:barL; animation-duration:0.55s; animation-timing-function:cubic-bezier(.5,0,.2,1); animation-fill-mode:both; }
  html.intro .bar-bot{ opacity:0; animation-name:barR; animation-duration:0.55s; animation-timing-function:cubic-bezier(.5,0,.2,1); animation-fill-mode:both; }
  @keyframes barL{ 0%{opacity:0;transform:translateX(-150px);} 100%{opacity:1;transform:translateX(0);} }
  @keyframes barR{ 0%{opacity:0;transform:translateX(150px);} 100%{opacity:1;transform:translateX(0);} }
  html.intro .arrow-line{ animation-name:lineDrop; animation-duration:1.0s; animation-timing-function:cubic-bezier(.4,.02,.2,1); animation-fill-mode:both; animation-delay:1.04s; }
  @keyframes lineDrop{ 0%{opacity:0;transform:translateY(-120px);} 8%{opacity:1;transform:translateY(-120px);} 72%{opacity:1;transform:translateY(0);} 82%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(0);} }
  html.intro .arrow{ opacity:0; transform-origin:129.9px 58px; animation-name:arrowUnfold; animation-duration:0.5s; animation-timing-function:cubic-bezier(.34,1.2,.4,1); animation-fill-mode:forwards; animation-delay:1.76s; }
  @keyframes arrowUnfold{ 0%{opacity:1;transform:scaleX(.05);} 100%{opacity:1;transform:scaleX(1);} }
  /* la carte de login apparaît une fois le logo posé */
  html.intro .wrap > :not(.logo){ opacity:0; }                 /* tout sauf le logo est masqué pendant l'intro */
  html.intro .card{ transform:translateY(20px); }
  html.intro.ready .wrap > :not(.logo){ opacity:1; transition:opacity .55s ease; }
  html.intro.ready .card{ transform:none; transition:opacity .55s ease, transform .6s cubic-bezier(.5,.05,.2,1); }
  @media (prefers-reduced-motion: reduce){ html.intro *{ animation:none !important; } html.intro .wrap > :not(.logo){ opacity:1 !important; transform:none !important; } }

/* classes utilitaires (ex-attributs style="" de la page) : !important = même priorité qu'un attribut style */
.u-m-14-0-0{ margin:14px 0 0 !important; }
.u-m-6-0-0{ margin:6px 0 0 !important; }
.u-animation-delay-0300s{ animation-delay:0.300s !important; }
.u-animation-delay-0390s{ animation-delay:0.390s !important; }
.u-animation-delay-0480s{ animation-delay:0.480s !important; }
.u-animation-delay-0570s{ animation-delay:0.570s !important; }
.u-animation-delay-0660s{ animation-delay:0.660s !important; }
.u-animation-delay-0750s{ animation-delay:0.750s !important; }
.u-animation-delay-0840s{ animation-delay:0.840s !important; }
.u-animation-delay-0930s{ animation-delay:0.930s !important; }
.u-animation-delay-1020s{ animation-delay:1.020s !important; }
.u-animation-delay-1210s{ animation-delay:1.210s !important; }
.u-animation-delay-1410s{ animation-delay:1.410s !important; }
.u-animation-delay-1500s{ animation-delay:1.500s !important; }
.u-animation-delay-1590s{ animation-delay:1.590s !important; }
.u-animation-delay-1680s{ animation-delay:1.680s !important; }
.u-animation-delay-1770s{ animation-delay:1.770s !important; }
.u-animation-delay-2160s{ animation-delay:2.160s !important; }
.u-animation-delay-2250s{ animation-delay:2.250s !important; }
.u-animation-delay-2340s{ animation-delay:2.340s !important; }
.u-animation-delay-2430s{ animation-delay:2.430s !important; }
.u-animation-delay-2520s{ animation-delay:2.520s !important; }
.u-animation-delay-2610s{ animation-delay:2.610s !important; }
.u-animation-delay-2700s{ animation-delay:2.700s !important; }
.u-animation-delay-2790s{ animation-delay:2.790s !important; }
.u-animation-delay-2880s{ animation-delay:2.880s !important; }
.u-animation-delay-2970s{ animation-delay:2.970s !important; }
.u-c-00767a{ color:#00767a !important; }
.u-c-7a8a8b{ color:#7a8a8b !important; }
.u-fs-078rem{ font-size:.78rem !important; }
.u-fs-085rem{ font-size:.85rem !important; }
.u-lh-14{ line-height:1.4 !important; }
.u-ta-center{ text-align:center !important; }
.u-td-none{ text-decoration:none !important; }