/* LE SEUIL : la page de connexion (maquette-seuil), servie avec portail.css. Extrait de vues/seuil.ts le 05/09/2026 (A6-14). */
body.seuil-page { margin: 0; }
.seuil-page .portail { min-height: 100vh; }
body { background: var(--navy); }
.seuil { position: relative; min-height: 100vh; background: var(--navy) url("/design/images/ligne-defense-esplanade.jpg") right center / cover no-repeat; color: #fff; overflow: hidden; display: flex; flex-direction: column; }
.seuil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,32,57,.94) 0%, rgba(26,32,57,.8) 36%, rgba(26,32,57,.3) 62%, rgba(26,32,57,.5) 100%); }
.seuil::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, transparent, rgba(26,32,57,.85)); }
.seuil > * { position: relative; z-index: 1; }
.seuil__haut { display: flex; align-items: center; justify-content: space-between; padding: 28px 56px; }
.seuil__marque { display: flex; align-items: center; gap: 12px; }
.seuil__marque .logo__mot { font-size: 18px; }
.logo .pt-vert { fill: var(--vert); }
.logo { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.logo__mot { display: inline-flex; align-items: baseline; gap: .38em; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
.logo__mot span { font-weight: 400; } .logo__mot b { font-weight: 800; letter-spacing: .12em; }
.seuil__haut .note { color: var(--navy-20); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.seuil__haut .note i { font-style: normal; }
.seuil__haut .note span { border: 1px solid var(--navy-20); padding: 3px 8px; border-radius: 3px; color: #fff; }
.seuil__corps { flex: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) 440px; gap: 48px; padding: 56px 56px 0; align-items: center; }
.seuil__titre h1 { margin: 0; font-size: 50px; font-weight: 800; letter-spacing: -.03em; line-height: 1.06; max-width: 14ch; }
.seuil__titre p { margin: 24px 0 0; font-size: 17px; line-height: 1.6; color: var(--navy-10); max-width: 46ch; }
.signature { display: flex; align-items: center; gap: 4px; margin-top: 34px; color: #fff; }
.signature b { display: block; height: 2px; width: 160px; background: var(--vert); margin-left: 6px; }
.carte-conn { background: #fff; color: var(--navy); border-radius: 6px; padding: 36px 36px 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px rgba(10,14,30,.45); }
.carte-conn h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.carte-conn .note { margin: 0; font-size: 13px; color: var(--g60); }
.carte-conn .ms { height: 48px; justify-content: center; font-size: 14px; gap: 12px; width: 100%; }
.carte-conn .ms svg { width: 18px; height: 18px; }
.carte-conn .sep { border-top: 1px solid var(--g20); padding-top: 14px; display: flex; justify-content: space-between; }
.carte-conn .note a { color: var(--navy); font-weight: 600; }
.carte-conn .motif { background: var(--ambre-fond); color: var(--ambre-encre); border-radius: 3px; padding: 10px 12px; font-size: 13px; }
.seuil__bas { display: flex; align-items: flex-end; justify-content: space-between; padding: 56px 56px 40px; }
.seuil__marques { display: flex; align-items: center; gap: 44px; }
.seuil__marques img { height: var(--h); filter: brightness(0) invert(1); opacity: .92; }
.seuil__marques span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-20); margin-right: 8px; font-weight: 600; }
.seuil__legende { text-align: right; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--navy-20); line-height: 1.7; }
.seuil__legende b { color: #fff; font-weight: 500; display: block; }
/* la coque de la page ne doit rien peindre derrière le seuil : sur un écran étroit le contenu dépasse la hauteur de
   la fenêtre, et le fond gris du portail apparaissait sous la photographie. */
.seuil-page .portail { background: transparent; border: 0; min-height: 100dvh; padding-bottom: 0; }   /* pas de barre mobile sur le seuil : pas de dégagement */
.seuil { min-height: 100dvh; }

@media (max-width: 900px) {
  .seuil__haut, .seuil__bas { padding: 20px 24px; }
  .seuil__corps { grid-template-columns: 1fr; padding: 24px 24px 8px; gap: 28px; align-items: start; }
  .seuil__corps--texte { grid-template-columns: 1fr; }
  .seuil__titre h1 { font-size: 34px; max-width: none; }
  .seuil__bas { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 36px; }
  .seuil__marques { flex-wrap: wrap; gap: 18px 26px; }
  .seuil__marques img { height: 24px; }
  .seuil__legende { text-align: left; }
}
@media (max-width: 560px) {
  /* la photographie se lit de face, et le voile se resserre : le texte blanc passe sur toute la hauteur */
  .seuil { background-position: 62% center; }
  .seuil::before { background: linear-gradient(180deg, rgba(26,32,57,.93) 0%, rgba(26,32,57,.82) 42%, rgba(26,32,57,.72) 100%); }
  .seuil::after { height: 320px; }
  .seuil__haut { padding: 16px 20px; }
  .seuil__marque .logo svg { width: 30px; height: 30px; }
  .seuil__marque .logo__mot { font-size: 15px; }
  .seuil__haut .note span { padding: 3px 7px; font-size: 10px; }
  .seuil__haut .note i { display: none; }                /* « Usage interne » : la pastille suffit, elle ne doit pas déborder */
  .seuil__corps { padding: 16px 20px 4px; gap: 22px; }
  .seuil__titre h1 { font-size: 30px; line-height: 1.08; }
  .seuil__titre p { margin-top: 16px; font-size: 15.5px; line-height: 1.55; }
  .signature { margin-top: 22px; }
  .signature b { width: auto; flex: 1; max-width: 180px; }
  .carte-conn { padding: 24px 22px 20px; gap: 16px; border-radius: 4px; box-shadow: 0 16px 32px rgba(10,14,30,.4); }
  .carte-conn h2 { font-size: 21px; }
  .carte-conn .ms { height: 46px; }
  .carte-conn .sep { flex-wrap: wrap; gap: 6px 18px; }
  .carte-conn--texte { padding: 22px 20px 18px; }
  .seuil__bas { padding: 30px 20px 26px; gap: 16px; }
  .seuil__marques { gap: 14px 22px; }
  .seuil__marques img { height: 20px; }
  .seuil__marques span { width: 100%; margin: 0 0 2px; }   /* « Le groupe » sur sa propre ligne : les logos s'alignent */
  .seuil__legende { font-size: 10.5px; line-height: 1.6; }
}

/* ── l'aide à la connexion : la même coque, un texte à la place de la carte de connexion ── */
.seuil__corps--texte { grid-template-columns: minmax(0, 1fr) 560px; align-items: start; padding-top: 40px; }
.carte-conn--texte { gap: 0; padding: 30px 32px 22px; }
.carte-conn--texte .cas { padding: 18px 0; border-top: 1px solid var(--g20); }
.carte-conn--texte .cas:first-child { padding-top: 0; border-top: 0; }
.carte-conn--texte h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.carte-conn--texte p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--g70); }
.carte-conn--texte p.faire { margin-top: 8px; color: var(--navy); font-weight: 500; }
.carte-conn--texte .sep { margin-top: 18px; }