/* ===========================================================================
   LA PORTE DE CONNEXION — 26/10/2026

   Une image en fond de page, un voile marine, une carte au centre.

   **CHARTE** : marine #132032, or foncé #996515, or clair #B8860B, crème
   #F9F5F0. Aucun fond noir — le voile est un marine transparent, pas du noir.

   **AUCUNE ANIMATION D'OPACITÉ, AUCUN DÉPART À ZÉRO.** Seul le bouton bouge,
   en `transform`, et `prefers-reduced-motion` l'annule.

   **CLS NUL** : le fond est absolu, hors du flux ; la carte a sa largeur ;
   rien ne se décale au chargement.
   =========================================================================== */

.porte {
  --porte-marine: #132032;
  --porte-or: #996515;
  --porte-or-clair: #B8860B;
  --porte-bord: #E3DACB;
  --porte-gris: #5C6672;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* **L'EN-TÊTE EST EN `position: fixed`, HAUT DE 80 px** (header.css l. 24-28).
     Sans cette réserve, il recouvre le haut de la carte. */
  padding: 112px 16px 56px;
  min-height: 100vh;
  overflow: hidden;
  /* Un fond sous l'image, le temps qu'elle arrive : du marine, jamais de
     blanc qui clignoterait. */
  background: var(--porte-marine);
}

/* --- le fond ------------------------------------------------------------- */

.porteFond {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* `cover` garde les proportions ; `center 35 %` tient les visages dans le
     cadre quand la page est plus haute que large. */
  object-fit: cover;
  object-position: center 35%;
}

.porteVoile {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* **DU MARINE, PAS DU NOIR.** Plus dense en bas, où passent les trois
     points ; plus clair en haut, où l'image respire. */
  background:
    linear-gradient(180deg,
      rgba(19, 32, 50, 0.66) 0%,
      rgba(19, 32, 50, 0.74) 55%,
      rgba(19, 32, 50, 0.87) 100%);
}

/* --- la carte ------------------------------------------------------------ */

.porteCarte {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  padding: 32px;
  /* **UN OVERLAY, PAS UNE CARTE BLANCHE.** La photo passe au travers : marine
     de la charte à 68 %, flouté derrière. Le flou n'est pas un ornement — sans
     lui, les visages et les fleurs passent sous le texte et le rendent
     illisible. `background-color` seul assure le repli là où
     `backdrop-filter` n'existe pas. */
  /*
   * **0,85 ET NON 0,68** — 26/10/2026, avec les cinq fonds tirés au hasard.
   *
   * Le chiffre vient d'une mesure, pas d'un goût. Sous la carte, le bloc le
   * plus clair des cinq photos est un blanc pur (la fenêtre de la photo de
   * briefing). Avec l'overlay à 0,68, l'or clair #B8860B des deux nombres y
   * tombait à **3,95:1** — sous les 4,5:1 exigés, et sur les cinq images, pas
   * seulement une. Le texte blanc, lui, n'a jamais été en cause : 12,87:1 au
   * pire.
   *
   * 0,85 rend 4,53:1. La carte reste translucide — la photo se devine au
   * travers, et le flou de 18 px l'adoucit — mais elle ne laisse plus passer
   * assez de lumière pour éteindre l'or.
   */
  background: rgba(19, 32, 50, 0.85);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  box-shadow: 0 20px 56px rgba(19, 32, 50, 0.45);
}

/* Sans `backdrop-filter`, l'overlay se densifie : la lisibilité d'abord. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .porteCarte {
    background: rgba(19, 32, 50, 0.94);
  }
}

.porteTitre {
  margin: 0 0 8px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.2;
  color: #FFFFFF;
}

.portePhrase {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.porteChiffres {
  display: flex;
  flex-wrap: wrap;
  /* **UNE ESPACE DE MOT, PAS UN ÉCART DE COLONNE** — 26/10/2026.
     Le libellé se lit maintenant comme une phrase : « 40 952 établissements,
     13 710 offres en ligne ». Avec les 16 px d'avant, la virgule restait
     suspendue loin du nombre qu'elle annonce. Le `4px` de l'autre axe reste :
     il sert quand les deux morceaux passent à la ligne, sur un téléphone. */
  gap: 4px 0.35em;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
}

.porteChiffres strong {
  /* Or clair : celui de la charte pour un fond marine. */
  color: var(--porte-or-clair);
  font-size: 1rem;
}

.porteMessage {
  margin: 0 0 16px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(249, 245, 240, 0.16);
  font-size: 0.9rem;
  color: #FFFFFF;
}

.porteMessageErreur {
  background: rgba(198, 40, 40, 0.28);
  border-left: 3px solid #FF8A80;
  color: #FFE3E0;
}

.porteForm {
  display: flex;
  flex-direction: column;
}

.porteLabel {
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFFFF;
}

/* Le libellé du mot de passe et le lien « oublié ? » sur une même ligne :
   deux lignes de plus, c'est le bouton qui sort de l'écran à 375 px. */
.porteLigneLabel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.porteOubli {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
}

.porteOubli:hover,
.porteOubli:focus-visible {
  color: var(--porte-or-clair);
}

.porteChamp {
  /* **QUARANTE-HUIT PIXELS DE HAUT**, au-dessus des 44 px d'une cible tactile.
     Et 16 px de texte : en dessous, un iPhone grossit la page à la mise au
     point du champ. */
  min-height: 48px;
  margin-bottom: 16px;
  padding: 8px 16px;
  font-size: 16px;
  font-family: inherit;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.porteChamp:focus {
  outline: 2px solid var(--porte-or-clair);
  outline-offset: 1px;
  border-color: var(--porte-or-clair);
  background: rgba(255, 255, 255, 0.18);
}

/*
 * **LE REMPLISSAGE AUTOMATIQUE REPEINT LE CHAMP EN BLANC**, et le texte blanc
 * y disparaît. Chrome n'autorise pas `background` sur `:-webkit-autofill` :
 * l'ombre intérieure est le seul moyen de reprendre la main.
 */
.porteChamp:-webkit-autofill,
.porteChamp:-webkit-autofill:hover,
.porteChamp:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0 1000px #1B2B40 inset;
  caret-color: #FFFFFF;
}

.porteBouton {
  min-height: 48px;
  margin-top: 8px;
  padding: 8px 24px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #FFFFFF;
  background: var(--porte-or);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.porteBouton:hover,
.porteBouton:focus-visible {
  transform: translateY(-1px);
}

.porteBouton:active {
  transform: translateY(0);
}

.porteCreer {
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.9rem;
  color: #FFFFFF;
}

.porteLien {
  color: var(--porte-or-clair);
  font-weight: 600;
  text-decoration: underline;
}

.porteGratuit {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

/* --- les trois points, sur le voile -------------------------------------- */

/* **TROIS COLONNES, PAS UNE PILE CENTRÉE.** En `flex` centré, chaque point
   prenait sa ligne et se centrait pour lui-même : les trois bords gauches
   tombaient en escalier. Une grille de trois colonnes égales les aligne. */
.portePoints {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 32px;
  width: 100%;
  max-width: 980px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.portePoints li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #FFFFFF;
  /* Une photo derrière du texte blanc : l'ombre porte la lisibilité là où le
     voile ne suffit pas. */
  text-shadow: 0 1px 3px rgba(19, 32, 50, 0.6);
}

.portePoints li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--porte-or-clair);
}

/* --- téléphone ------------------------------------------------------------ */

@media (max-width: 900px) {
  .porte {
    padding: 96px 16px 40px;
    min-height: auto;
  }

  .porteCarte {
    padding: 24px 16px;
  }

  /*
   * **À 375 PX, LE LIBELLÉ PASSE À LA LIGNE DANS QUATRE LANGUES SUR SEPT**, et
   * je n'ai pas trouvé de façon honnête de l'éviter.
   *
   * « 40.952 establecimientos, 13.710 ofertas en línea » fait 48 caractères
   * pour 311 px de carte. J'ai essayé 0,78 rem puis 0,74 rem, nombre compris :
   * l'espagnol, l'anglais et le français débordaient encore, et le texte
   * devenait plus petit que tout le reste de la carte. Les tailles d'origine
   * sont rétablies.
   *
   * **CE QUI RESTE, ET QUI SERT** : `nowrap` sur chaque moitié. Sans lui, la
   * coupure pouvait tomber **à l'intérieur** d'un groupe — « 40.952 » sur une
   * ligne, « establecimientos, » sur la suivante. Avec lui, la ligne se coupe
   * entre les deux compteurs, à la virgule, ce qui est le seul endroit
   * acceptable.
   *
   * À 768 px et 1 440 px, les sept langues tiennent sur une ligne.
   */
  .porteChiffres span {
    white-space: nowrap;
  }

  .porteTitre {
    font-size: 1.35rem;
  }

  /* À 375 px, les trois points passent sous le pli : ils se rangent en colonne,
     alignés à gauche, et ne poussent plus la carte vers le haut. */
  .portePoints {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 24px;
  }
}

/* --- mouvement réduit ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .porteBouton,
  .porteChamp {
    transition: none;
  }

  .porteBouton:hover,
  .porteBouton:focus-visible {
    transform: none;
  }
}