/* ============================================================
   Cadre de la page de connexion
   - ordinateur (960 px et plus) : à gauche le panneau marine (la
     marque, l'animation du contrat, le compteur, la mention) ; à
     droite le formulaire sur le fond gris et blanc du projet ;
   - téléphone : le panneau devient un bandeau (la marque seule).
   Tout tient sur un écran sans défilement (1366 × 768, 375 × 667).
   ============================================================ */

* { box-sizing: border-box; }
html { overflow-y: scroll; }
body {
  margin: 0;
  background: var(--fond-page);
  color: var(--texte);
  font: 400 16px/1.45 var(--police);
}
h1, p { margin: 0; }

.cadre { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* --- Le panneau de la marque --- */
.marque {
  position: relative;
  overflow: hidden; /* l'enveloppe passe SOUS la partie droite : coupée net ici */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: radial-gradient(120% 90% at 0% 100%, var(--marine-clair) 0%, var(--marine) 45%, var(--marine-fonce) 100%);
  color: var(--sur-marine);
}

/* Logo et textes : les deux lignes tiennent dans la hauteur du logo, avec un peu d'air
   en haut et en bas (demande de François, 20/10/2026 ; mesuré : 7 et 5 px sur ordinateur).
   Marges de la police coupées pour raisonner sur l'encre des lettres. */
.marque__entete { position: relative; display: flex; align-items: center; gap: 12px; }
.marque__logo { width: 36px; height: 36px; border-radius: 4px; }
.marque__textes { display: flex; flex-direction: column; justify-content: center; height: 36px; }
.marque__nom, .marque__sous-titre { text-box: trim-both cap alphabetic; }
.marque__nom { font-size: 1.125rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; }
.marque__sous-titre { margin-top: 6px; color: var(--sur-marine-doux); font-size: 0.6875rem; line-height: 1; }

.scene, .cumul, .marque__pied { display: none; }

/* Traits « laser » décoratifs */
.rayon {
  position: absolute;
  left: -120px;
  width: 1200px;
  height: 1.5px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, rgb(0 166 216 / 60%) 55%, transparent);
}
.rayon--1 { top: 88%; transform: rotate(-7deg); }
.rayon--2 { display: none; }

/* --- La partie du formulaire --- */
.zone {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  background: #eef0f2 url("../fond-bg.jpg") center / cover no-repeat;
}

.carte {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 440px;
  padding: 20px;
  border: 1px solid var(--ligne);
  border-top: 4px solid var(--cyan);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgb(26 51 96 / 10%);
}
.carte__titre { color: var(--marine); font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.carte__chapo { margin-top: 6px; color: var(--texte-doux); font-size: 0.9375rem; }
.carte__pied {
  padding-top: 14px;
  border-top: 1px solid var(--ligne);
  color: var(--texte-doux);
  font-size: 0.8125rem;
  text-align: center;
}

/* --- Ordinateur : l'écran se partage en deux --- */
@media (min-width: 960px) {
  .cadre { flex-direction: row; }

  .marque {
    flex: 0 0 46%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 44px 56px 36px;
  }
  .marque__logo { width: 64px; height: 64px; }
  .marque__entete { gap: 20px; }
  .marque__textes { height: 64px; }
  .marque__nom { font-size: 2.25rem; }
  .marque__sous-titre { margin-top: 12px; font-size: 1rem; }
  .marque__pied { position: relative; display: block; color: var(--sur-marine-doux); font-size: 0.875rem; }

  .rayon--1 { top: 30%; transform: rotate(-14deg); }
  .rayon--2 { display: block; top: 74%; transform: rotate(-6deg); opacity: 0.5; }

  .zone { align-items: center; padding: 24px; }
  .carte { max-width: 480px; padding: 32px 36px 28px; }
  .carte__titre { font-size: 1.75rem; }
}