/* ============================================================================
   Portail intégrateur, feuille des 4 pages d'entrée : connexion, code à
   usage unique, inscription, inscription envoyée. Les 7 pages connectées
   ont la leur, portail.css.

   Les pages d'entrée restent séparées de la coquille connectée à dessein :
   elles s'affichent avant toute session, sans barre latérale ni barre du
   haut. Ce n'est pas une divergence de charte.

   Sortie du bloc style de base_auth.html.twig le 2026-08-30.

   L'ORDRE DE CE FICHIER EST SIGNIFIANT. Il reprend exactement celui des
   anciens blocs Twig extra_style et extra_style_mobile :

     1. socle
     2. surcharges de bureau des pages   (ex-extra_style)
     3. media query mobile du socle
     4. surcharges mobiles des pages     (ex-extra_style_mobile)

   Le piège que cet ordre évite : la page Inscription élargit la modale à
   480 px, et la media query du socle doit continuer à la ramener à 100 %
   sous 480 px de large. Remonter la section d'une page au-dessus de la
   media query la casserait.

   Les sections de page sont préfixées par :where(.page-xxx), classe posée
   sur le body par le bloc Twig page_class. :where() a une spécificité
   nulle : le préfixe cantonne la règle à sa page sans changer le poids du
   sélecteur, c'est donc bien l'ordre ci-dessus qui tranche, comme avant.
   ========================================================================= */

/* ────────────────────────────────────────────────────────────────────────────
   1. Socle commun aux 4 pages d'entrée
   ──────────────────────────────────────────────────────────────────────── */
/* Police de la charte FCS : Outfit, servie par nos soins depuis /fonts/ et
   non depuis Google Fonts. Fichier variable, axe wght de 100 a 900, donc un
   seul fichier par sous-ensemble couvre toutes les graisses. Sous-ensembles
   officiels latin et latin-ext, avec leurs unicode-range d'origine. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/main/fonts/outfit-var-ext.woff2') format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/main/fonts/outfit-var.woff2') format('woff2');
  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;
}

  * {
    box-sizing: border-box;
  }

  html, body {
    font-family: 'Outfit', system-ui, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100%;
  }

  body {
    color: #ffffff;
    background: radial-gradient(circle at 50% 30%, #181818 0%, #050505 45%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body, input, button {
    font-family: 'Outfit', system-ui, sans-serif;
  }

  /* ── Coquille de la modale ── */
  .modal {
    position: relative;
    width: 440px;
    max-width: calc(100% - 48px);
    background: #0b0b0b;
    border: 1px solid #242424;
    border-radius: 20px;
    box-shadow: 0 30px 100px rgba(0,0,0,0.9);
    margin: 40px auto;
    padding: 46px 46px 46px;
  }

  /* ── En-tête : logo + libellé produit ── */
  .brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
  }

  .brand-logo {
    height: 50px;
    width: auto;
    filter: brightness(0) invert(1);
  }

  .brand-label {
    position: absolute;
    top: 40px;
    left: 37px;
    font-size: 16px;
    color: #777777;
  }

  /* ── Titre + sous-titre ── */
  .title {
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 3px;
  }

  .subtitle {
    font-size: 16px;
    color: #777777;
    margin: 0 0 36px;
  }

  .modal:has(.error) .subtitle {
    margin-bottom: 12px;
  }

  /* ── Message d'erreur ── */
  .error {
    display: none;
    color: #f87171;
    background: rgba(248,113,113,0.08);
    border: 1px solid rgba(248,113,113,0.2);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
  }
  .modal--error .error {
    display: block;
  }

  /* Message affiché hors du cas .modal--error : une alerte de niveau
     warning ne pose pas cette classe sur la modale, elle s'affiche donc
     par celle-ci. Remplace un style="display:block". */
  .error--visible {
    display: block;
  }

  /* ── Champs ── */
  .field {
    margin-bottom: 20px;
  }

  .field--password {
    margin-bottom: 28px;
  }

  .field label {
    display: block;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #777777;
    margin-bottom: 8px;
  }

  .field input {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    color: #ffffff;
    background: #101010;
    border: 1px solid #292929;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
  }

  .field input:focus {
    border-color: #454545;
  }

  /* Champ en erreur. La classe est posée par le JS de la page, jamais par
     le sélecteur natif :invalid : celui-ci s'applique dès le chargement et
     colorerait en rouge des champs encore vides que personne n'a touchés.
     Signalement sobre : la bordure, et une ligne sous le champ. */
  .field--invalid input {
    border-color: rgba(248,113,113,0.55);
  }

  .field-error {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
    color: #f87171;
  }

  .field-error[hidden] {
    display: none;
  }

  /* ── Bouton ── */
  .btn {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    /* 400 comme le .btn du portail (2026-08-26). */
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    border: 1px solid #ffffff;
    border-radius: 8px;
    color: #000000;
    background: #ffffff;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .btn:hover {
    opacity: 0.88;
  }

  /* ── Pied de page ── */
  .footer {
    margin-top: 28px;
    font-size: 14px;
    color: #555555;
    text-align: center;
  }

  .footer a {
    color: #999999;
  }


/* ────────────────────────────────────────────────────────────────────────────
   2. Page Code de connexion
   ──────────────────────────────────────────────────────────────────────── */
  /* Libellé de marque en flux normal, pas en position absolue : seule
     page d'entrée dans ce cas (les 3 autres calent le logo puis posent le
     libellé au pixel). Le calage du socle est annulé en entier, décalages
     compris, pour ne pas laisser de valeurs mortes derrière. */
  :where(.page-otp) .brand {
    position: static;
  }

  :where(.page-otp) .brand-label {
    position: static;
    top: auto;
    left: auto;
    margin-top: 8px;
    margin-left: 4px;
  }

  /* Un seul champ, plus grand et centré : saisie d'un code, pas d'un mot
     de passe ou d'une adresse. */
  :where(.page-otp) .field {
    margin-bottom: 28px;
  }

  :where(.page-otp) .field label {
    text-transform: none;
  }

  :where(.page-otp) .field input {
    font-size: 20px;
    letter-spacing: 0.3em;
    text-align: center;
  }

  :where(.page-otp) .btn {
    text-align: center;
  }

/* ────────────────────────────────────────────────────────────────────────────
   3. Page Inscription
   ──────────────────────────────────────────────────────────────────────── */
  /* Formulaire plus long que les autres pages d'entrée : modale élargie. */
  :where(.page-register) .modal {
    width: 480px;
  }

  :where(.page-register) .row {
    display: flex;
    gap: 14px;
  }
  :where(.page-register) .row .field {
    flex: 1;
  }

  /* Honeypot : hors écran plutôt que display:none (certains robots
     ignorent spécifiquement les champs display:none), jamais visible ni
     atteignable au clavier pour un humain. */
  :where(.page-register) .hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
  }

  /* Précision sous un champ : elle remonte contre lui, la marge basse du
     champ au-dessus étant plus grande que l'écart voulu. */
  :where(.page-register) .aide-champ {
    font-size: 14px;
    color: #777777;
    margin: -12px 0 20px;
  }

/* ────────────────────────────────────────────────────────────────────────────
   4. Page Inscription envoyée
   ──────────────────────────────────────────────────────────────────────── */
  /* Page de confirmation, sans formulaire : contenu centré, titre plus
     modeste que celui des pages de saisie. */
  :where(.page-register-success) .modal {
    text-align: center;
  }

  :where(.page-register-success) .icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }

  :where(.page-register-success) .title {
    font-size: 24px;
    margin: 0 0 12px;
  }

  :where(.page-register-success) .subtitle {
    line-height: 1.6;
    color: #999999;
    margin: 0 0 32px;
  }

  :where(.page-register-success) .btn {
    text-align: center;
  }

/* ────────────────────────────────────────────────────────────────────────────
   5. Bascule mobile du socle. Elle vient APRÈS les surcharges de bureau
      ci-dessus et doit les battre : ne rien remonter au-dessus.
   ──────────────────────────────────────────────────────────────────────── */
  @media only screen and (max-width: 480px) {
    .modal {
      margin: 0;
      border-radius: 0;
      min-height: 100vh;
      width: 100%;
      max-width: 100%;
      padding-left: 24px;
      padding-right: 24px;
    }
  }

/* ────────────────────────────────────────────────────────────────────────────
   6. Surcharges mobiles de page, seules à battre la bascule ci-dessus
   ──────────────────────────────────────────────────────────────────────── */
  @media only screen and (max-width: 480px) {
    :where(.page-register-success) .modal {
      padding-left: 46px;
      padding-right: 46px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }