/* login.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:760px; 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); }
  .pk-ico-slot{ display:inline-flex; align-items:center; justify-content:center; vertical-align:-5px; }
  .pk-ico-slot svg, .pk-ico-holder svg{ width:22px; height:22px; display:block; fill:currentColor; }
  .erreur{ background:#fdecec; color:#6e1a1a; border:0; border-left:4px solid #a12727; border-radius:8px;
           padding:10px 12px; font-size:.85rem; margin-bottom:16px; }
  /* 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; }
  .aide{ margin:16px 0 0; font-size:.76rem; color:#cdeff0; text-align:center; }
  .aide strong{ color:#fff; }
  .intro-act{ margin:0 0 18px; font-size:.82rem; color:var(--ink2); text-align:center; line-height:1.4; }
  .bascule{ margin:16px 0 0; text-align:center; font-size:.82rem; }
  .bascule a{ color:var(--fond); font-weight:600; text-decoration:none; }
  .bascule a:hover{ text-decoration:underline; }
  .btn-lien{ display:block; width:100%; margin-top:6px; padding:13px; border:none; border-radius:11px; background:var(--fond);
             color:#fff; font-size:.98rem; font-weight:700; text-align:center; text-decoration:none;
             box-shadow:0 8px 20px rgba(0,183,188,.35); }
  .btn-lien:hover{ background:#00a2a7; }

  /* ===== Carte : deux colonnes (Première connexion | Connexion) ===== */
  .card--duo{ max-width:760px; }
  .card--solo{ max-width:390px; }
  .cols{ display:flex; gap:26px; align-items:stretch; }
  .col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
  .col-sep{ width:1px; background:#e6eef0; flex:0 0 1px; }
  .col-h{ margin:0 0 6px; font-size:1rem; font-weight:700; color:var(--ink); text-align:center; }
  .col .intro-act{ margin:0 0 16px; min-height:2.4em; }
  .col--center{ justify-content:center; }   /* centre verticalement le bloc plus court (connexion) */
  @media (max-width:640px){
    .card--duo{ max-width:390px; }
    .cols{ flex-direction:column; gap:8px; }
    .col-sep{ width:auto; height:1px; margin:14px 0; }
    .col .intro-act{ min-height:0; }
    .col--center{ justify-content:flex-start; }
  }

  /* ===== 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-b-2-dashed-fond{ border:2px dashed var(--fond) !important; }
.u-bg-e2e8ea{ background:#e2e8ea !important; }
.u-bg-f4f8f8{ background:#f4f8f8 !important; }
.u-f-1{ flex:1 !important; }
.u-m-12-0-2{ margin:12px 0 2px !important; }
.u-m-6-0-12{ margin:6px 0 12px !important; }
.u-m-8-0-0{ margin:8px 0 0 !important; }
.u-m-8-0-16{ margin:8px 0 16px !important; }
.u-p-16{ padding:16px !important; }
.u-ai-center{ align-items:center !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-br-12{ border-radius:12px !important; }
.u-c-0b3b3d{ color:#0b3b3d !important; }
.u-c-557{ color:#557 !important; }
.u-c-8899a0{ color:#8899a0 !important; }
.u-d-flex{ display:flex !important; }
.u-font-family-ui-monospace-menlo-consolas-monospace{ font-family:ui-monospace,Menlo,Consolas,monospace !important; }
.u-fs-082rem{ font-size:.82rem !important; }
.u-fs-08rem{ font-size:.8rem !important; }
.u-fs-20{ font-size:20px !important; }
.u-fw-bold{ font-weight:bold !important; }
.u-gap-10{ gap:10px !important; }
.u-h-1{ height:1px !important; }
.u-letter-spacing-2{ letter-spacing:2px !important; }
.u-minh-11em{ min-height:1.1em !important; }
.u-mt-12{ margin-top:12px !important; }
.u-ta-center{ text-align:center !important; }
.u-word-break-break-all{ word-break:break-all !important; }