/* Connexion : même identité que le site public (gabarit épuré : fond clair, quadrillage fin, bleu nuit, bleu repère, Inter, commandes en pilule,
   pastilles de couleur). Les éléments, l'ordre des champs et le fonctionnement sont ceux de l'application ; seul l'habillage change.
   Aucun dégradé de couleur, aucun soulignement, aucun vert. Chargé après moderne.css ; clair et sombre suivent le thème de l'application. Règles : DESIGN.md. */

@font-face { font-family: "League Spartan"; src: url("/static/vendor/fonts/league-spartan-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "League Spartan"; src: url("/static/vendor/fonts/league-spartan-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }


.login {
  color-scheme: light;
  /* Mode clair imposé, palette du site : bleu #30496F, beige #FFEED6, texte #272727 ; autres teintes de beige choisies */
  --ink: #272727; --ink-2: #3A3730; --slate: #55514A; --muted: #645F54; --bg: #FFEED6; --panel: #FDF7EF; --panel-2: #FFEED6; --line: #E8D7BD; --line-2: #F2E1C8;
  --accent: #30496F; --accent-2: #3D5882; --accent-soft: #F8E7CE; --on-accent: #FFEED6; --amber-soft: #F3E6C4; --red-soft: #F2DCD6; --green-soft: #E3E9D6;
  --l-marque: #FFEED6; --l-fond: #F8E7CE; --l-carte: #FDF7EF; --l-encre: #272727; --l-doux: #55514A; --l-trait: #E8D7BD; --l-trait-fort: #D7C6AA; --l-grille: #F2E1C8;
  --l-bouton: #30496F; --l-bouton-survol: #3D5882; --l-bouton-texte: #FFEED6; --l-lien: #30496F; --l-focus: #30496F; --l-halo: rgb(48 73 111 / .18); --l-titre: #30496F; --l-logo: none;
  --l-elan: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Panneau de marque (gauche) : clair, quadrillé, pastilles de couleur ---------- */
.login { background: var(--l-fond); }
.login .marque { background: var(--l-marque) !important; color: var(--l-encre); isolation: isolate; overflow: hidden; border-right: 1px solid var(--l-trait); }
.login .marque::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--l-grille) 1px, transparent 1px), linear-gradient(90deg, var(--l-grille) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.login .marque h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login .marque p.accroche { color: var(--l-titre); font-weight: 580; letter-spacing: -.03em; line-height: 1.08; }
.login .marque p.marque-bas { color: var(--l-doux); }
.login .marque .marque-haut img { border-radius: 10px; }
.logo-paolia { width: clamp(4.4rem, 8vw, 6rem); aspect-ratio: 1 / 1; }
.login .marque .logo-paolia img { object-fit: contain; }

.login .marque-centre, .login .marque-haut, .login .marque-bas { position: relative; z-index: 1; }

/* ---------- Panneau de saisie (droite) : colonne unique, cartes de même largeur ---------- */
.login .panneau { background: var(--l-fond); }
.login .panneau .card, .login #demo .card { width: min(520px, 100%) !important; background: var(--l-carte); border: 1px solid var(--l-trait); border-radius: 14px; padding: 1.8rem; box-shadow: none; }
.login .panneau .card h2 { font-size: 1.35rem; font-weight: 560; letter-spacing: -.02em; color: var(--l-titre); }
.login #demo { width: min(520px, 100%); }
.login #demo .card { width: 100% !important; }
.login .f > span { font-weight: 600; font-size: .88rem; }
.login input[type=text], .login input[type=email], .login input[type=password] { min-height: 48px; border: 1.5px solid var(--l-trait); border-radius: 14px; padding-inline: .95rem; background: var(--l-carte);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--l-elan); }
.login input:hover { border-color: var(--l-trait-fort); }
.login input:focus { border-color: var(--l-focus); box-shadow: 0 0 0 4px var(--l-halo); transform: translateY(-1px); }
.login input:focus-visible { outline: none; }
.login input[aria-invalid="true"] { border-color: var(--red, #B3261E); }
.login a { color: var(--l-lien); text-decoration: none; transition: color .15s ease; }
.login a:hover { color: var(--l-bouton-survol); }
.login :focus-visible { outline: 3px solid var(--l-focus); outline-offset: 3px; border-radius: 10px; }

/* Boutons : pilule, comme sur le site ; réponse immédiate à l'appui */
.login .btn:not(.sec):not(.ghost) { min-height: 48px; border-radius: 999px; background: var(--l-bouton); border-color: var(--l-bouton); color: var(--l-bouton-texte); font-weight: 600; letter-spacing: .005em;
  transition: background .2s ease, border-color .2s ease, transform .2s var(--l-elan), box-shadow .2s ease; }
.login .btn:not(.sec):not(.ghost):hover { background: var(--l-bouton-survol); border-color: var(--l-bouton-survol); transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgb(48 73 111 / .45); }
.login .btn.sec { border-radius: 999px; border-color: var(--l-trait-fort); transition: background .2s ease, border-color .2s ease, transform .2s var(--l-elan); }
.login .btn.sec:hover { transform: translateY(-1px); }
.login .btn:active, .login .demo-role:active { transform: scale(.97) !important; transition: transform 100ms ease-out; }

/* Messages et changement d'étape : apparition courte */
.login .note { border-radius: 14px; }
.login .note:not(.hidden) { animation: l-entre .3s var(--l-elan); }
.login form:not(.hidden) { animation: l-entre .4s var(--l-elan); }
@keyframes l-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Comptes de démonstration */
.login .demo-role { border-radius: 14px; border-color: var(--l-trait); transition: border-color .18s ease, background .18s ease, transform .2s var(--l-elan); }
.login .demo-role:hover, .login .demo-role:focus-visible { transform: translateY(-2px); }
.login .demo-role .ic { border-radius: 10px; transition: transform .25s var(--l-elan); }
.login .demo-role:hover .ic { transform: rotate(-6deg) scale(1.06); }

/* Mouvement : le symbole apparaît seul, puis le nom « PAOLIA » sort de derrière lui (comme sur la page d'accueil) ; les pastilles arrivent sans boucle */
.login .marque .logo-paolia { width: auto; aspect-ratio: auto; display: flex; align-items: center; }
.login .marque .logo-paolia img { position: static; inset: auto; width: 100%; height: auto; display: block; border-radius: 0; filter: none; transition: none; animation: none; }
.lc-logo { position: relative; z-index: 2; display: block; flex: none; width: clamp(3.4rem, 6vw, 4.6rem); }
.lc-cadre { display: block; font-size: clamp(2.4rem, 4.2vw, 3.4rem); overflow: hidden; width: max-content; padding: .2em 0; margin-left: -.1rem; }
.lc-nom { display: block; padding-left: .35em; color: var(--l-titre); }
.login .marque .logo-paolia .lc-nom .mot-svg { display: block; height: 1.33em; width: auto; fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .lc-logo { animation: l-arrive .7s var(--l-elan) .1s both; }
  .login .marque .logo-paolia .lc-logo img { animation: l-tourne 2.3s cubic-bezier(.22, .9, .28, 1) .1s both; transform-origin: 50% 50%; }
  .lc-nom .lt { animation: l-lettre .65s var(--l-elan) both; animation-delay: calc(.4s + var(--n) * .14s); }
  @keyframes l-tourne { from { transform: rotate(540deg); } to { transform: none; } }
  @keyframes l-arrive { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
  @keyframes l-lettre { from { transform: translateX(-200px); clip-path: inset(0 100% 0 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce) {
  .login *, .login *::before, .login *::after { animation: none !important; transition: none !important; }
  .login .btn:hover, .login .demo-role:hover { transform: none !important; }
}
@media (max-width: 900px) { .login .marque { border-right: 0; border-bottom: 1px solid var(--l-trait); } .login .panneau .card { padding: 1.4rem 1.2rem; } }
.login { color: var(--l-encre); }
.login .panneau { color: var(--l-encre); }

/* Logo de l'entreprise de l'utilisateur : plus grand, centré, juste au-dessus de la phrase d'accroche */
.login .marque .marque-centre { max-width: none; width: 100%; }
.login .marque #logo-marque:not(.hidden) { display: block; justify-self: center; width: auto; height: clamp(5.5rem, 10vw, 8rem); max-width: min(100%, 18rem); object-fit: contain; border-radius: 14px; margin-bottom: .4rem; }
@media (prefers-reduced-motion: no-preference) { .login .marque #logo-marque:not(.hidden) { animation: l-entre .5s var(--l-elan); } }

/* Fenêtre étroite (mobile, demi-écran) : le panneau de marque devient un bandeau en haut ; le logo Paolia et son nom restent visibles */
@media (max-width: 900px) {
  .login .marque { padding: 1.4rem 1.2rem 1.6rem; gap: .6rem; }
  .login .marque .marque-centre { display: grid; gap: .9rem; justify-items: start; }
  .login .marque .logo-paolia { display: flex; order: -1; }
  .login .marque #logo-marque:not(.hidden) { justify-self: start; height: 4.6rem; }
  .login .marque p.accroche { font-size: clamp(1.4rem, 5vw, 1.9rem); }
  .lc-logo { width: 2.8rem; }
  .lc-cadre { font-size: 2.1rem; }
}
@media (max-width: 900px) {
  .login .marque .marque-haut { display: none; }
  .login .marque #logo-marque:not(.hidden) { justify-self: center; }
}

/* Mise en valeur des trois écritures principales : nom de l'entreprise, phrase d'accroche, nom « PAOLIA » */
.login #fc > p.small { font-size: 1.1rem; line-height: 1.35; margin-top: .1rem !important; }
.login #fc > p.small #nom-entreprise { font-weight: 650; color: var(--l-encre); letter-spacing: -.01em; }
.login #fc > p.small a { font-size: .95rem; font-weight: 500; }
.login .marque p.accroche { font-size: clamp(2.2rem, 3.7vw, 3.3rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.04; max-width: 11em; }
.login .marque .lc-logo { width: clamp(4rem, 7vw, 5.6rem); }
.login .marque .lc-cadre { font-size: clamp(3rem, 5.2vw, 4.2rem); }
.login .marque .lc-nom { font-weight: 300; }
@media (max-width: 900px) {
  .login .marque p.accroche { font-size: clamp(1.7rem, 6.4vw, 2.3rem); }
  .login .marque .lc-logo { width: 3.4rem; }
  .login .marque .lc-cadre { font-size: 2.6rem; }
}
.login #fc > p.small { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; font-size: 0; }
.login #fc > p.small #nom-entreprise { font-size: 1.15rem; }

/* Échelle harmonisée du panneau de marque : logo de l'entreprise 88 px, phrase d'accroche 2,1 rem, logo Paolia 3,2 rem avec son nom à 2,4 rem */
.login .marque #logo-marque:not(.hidden) { height: clamp(4.5rem, 6.5vw, 5.5rem); }
.login .marque p.accroche { font-size: clamp(1.7rem, 2.5vw, 2.15rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; max-width: 14em; }
.login .marque .lc-logo { width: clamp(3.6rem, 4.6vw, 4.4rem); }
.login .marque .lc-cadre { font-size: clamp(2.7rem, 3.45vw, 3.3rem); }
.login .marque .lc-nom { font-weight: 300; }
.login #fc > p.small #nom-entreprise { font-size: 1.05rem; }
@media (max-width: 900px) {
  .login .marque #logo-marque:not(.hidden) { height: 4rem; }
  .login .marque p.accroche { font-size: clamp(1.4rem, 5.4vw, 1.8rem); }
  .login .marque .lc-logo { width: 2.9rem; }
  .login .marque .lc-cadre { font-size: 2.2rem; }
}

/* Logos en tête du panneau, en haut à gauche : logo de l'entreprise, puis logo Paolia et son nom, sur une même rangée */
.login .marque .marque-haut { display: flex !important; align-items: center; }
.login .marque .marque-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; }
.login .marque #logo-marque:not(.hidden) { display: block; justify-self: auto; align-self: center; height: 4rem; width: auto; max-width: 10rem; object-fit: contain; border-radius: 10px; margin: 0; }
.login .marque #logo-marque:not(.hidden) ~ .logo-paolia { padding-left: 1.2rem; border-left: 1px solid var(--l-trait-fort); }
.login .marque .logo-paolia { display: flex; order: 0; }
.login .marque .lc-logo { width: 3.4rem; }
.login .marque .lc-cadre { font-size: 2.55rem; }
.login .marque .marque-centre { width: 100%; }
@media (max-width: 900px) { .login .marque { gap: 1.1rem; } .login .marque .marque-logos { gap: .9rem; } .login .marque #logo-marque:not(.hidden) { height: 3.4rem; } }

/* Éléments de l'écran de connexion hors du bloc .login : texte, badge de démonstration et message d'erreur à la palette du site */
body:has(.login) { color: #272727; background: #FFEED6; }
body:has(.login) .toast { background: #30496F; color: #FFEED6; }
.login .statut.demo { background: #30496F; color: #FFEED6; }

/* Toutes les écritures de la connexion en League Spartan */
.login, .login *, .login *::before, .login *::after, body:has(.login) .toast { font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif; }
.login .panneau .card h2 { font-weight: 600; }
.login .f > span { font-weight: 600; }
.login .lc-nom { font-weight: 300; }
html:has(.login) { font-size: 106%; }