/* ==========================================================================
   Habillage de l'ecran de connexion Zammad — instance 192.168.2.2:8085
   Injecte par nginx (sub_filter). Aucun fichier de Zammad n'est modifie.

   Cible des classes internes a Zammad (.hero-unit, .js-footer, .poweredBy...).
   A revalider apres chaque montee de version.
   ========================================================================== */

/* ==========================================================================
   1. THEME GLOBAL — s'applique a TOUTES les pages, interface agent comprise.

   Zammad 7.1 declare 127 variables CSS dans :root. On en redefinit une
   poignee ; le reste de l'application suit sans qu'aucun selecteur interne
   ne soit vise. C'est nettement plus robuste qu'un habillage par selecteurs :
   une mise a jour qui renomme des classes ne casse pas ces variables.

   `--highlight` n'est declaree qu'une fois et il n'y a pas de mode sombre
   dans cette version : la redefinition ci-dessous est donc sans effet de
   bord. Notre feuille etant injectee apres celle de Zammad, elle l'emporte
   a specificite egale.

   POUR DESACTIVER le theme global sans toucher a la page de connexion :
   supprimer ce seul bloc :root.
   ========================================================================== */

:root {
  /* Bleu d'accent : boutons principaux, liens, bordures actives.
     Zammad livrait hsl(203, 65%, 55%), un bleu plus clair et moins sature. */
  --highlight:                         #0B57A4;
  --button-primary-background:         #0B57A4;
  --button-primary-background-active:  #084A8C;
  --text-link:                         #0B57A4;
  --border-highlight:                  #0B57A4;
  --background-highlight:              #E4EEF8;

  /* Barre laterale et menus : bleu nuit de la charte.
     Retirer ces deux lignes pour conserver le gris d'origine. */
  --menu-background-primary:           #05224F;
  --menu-background-secondary:         #0A3163;

  /* Pages plein ecran (connexion, reinitialisation, inscription). */
  --fullscreen-background:             #05224F;
}

/* ==========================================================================
   2. BARRE LATERALE — l'oiseau Zammad remplace par le logo

   Balisage vise : <div class="logo js-toggleNotifications"><svg class="icon
   icon-logo">…</svg></div>, dans le bloc de recherche de la barre laterale.
   La boite d'origine (35x30) est CONSERVEE : on masque seulement le trace du
   SVG et on peint le logo en fond, ajuste par background-size: contain.
   Le compteur de notifications, qui vit dans le meme conteneur, est intact.

   La mention « Powered by Zammad » du bas de l'ecran de connexion utilise la
   meme icone mais un autre conteneur (.poweredBy) : elle n'est pas touchee.
   ========================================================================== */

/* Le remplacement est fait par bgfi.js, qui insere une <img> a la place du
   SVG : peindre un fond sur un element SVG ne fonctionne pas partout. Cette
   regle ne fait que dimensionner l'image inseree, a l'identique du SVG
   d'origine (35x30, margin-left 4px). */
.search .logo .bgfi-logo-lateral {
  width: 35px;
  height: 30px;
  margin-left: 4px;
  object-fit: contain;
  position: relative;
}

#app.navigation-collapsed .search .logo .bgfi-logo-lateral {
  width: 35px;
  height: 30px;
  margin-left: 4px;
}

/* ==========================================================================
   3. ECRAN DE CONNEXION — deux thèmes, au choix de l'utilisateur

   Mise en page en deux colonnes sur une photo pleine fenetre :
     - a gauche une vitrine (logo, promesse, quatre atouts, citation),
       construite par bgfi.js dans un conteneur .bgfi-vitrine ;
     - a droite la carte de connexion, qui reste le balisage d'origine de
       Zammad (.hero-unit + #login). Aucun champ n'est recree : on habille, et
       on ne deplace qu'un seul element, le lien « Mot de passe oublie ? ».
   Le bandeau de pied est le conteneur .poweredBy de Zammad, reutilise : la
   mention « Propulse par Zammad » est ainsi conservee.

   DEUX THEMES. Le clair est le defaut. bgfi.js pose sur <html> l'attribut
   data-bgfi-theme="clair" ou "sombre" selon le choix retenu dans le
   navigateur (localStorage), et injecte le bouton de bascule. Tout ce qui
   distingue les deux thèmes tient dans les variables ci-dessous : ajouter un
   troisieme thème ne demanderait qu'un bloc de plus.

   Le choix est memorise PAR NAVIGATEUR, pas dans le compte Zammad : avant
   connexion l'application ignore qui consulte la page.
   ========================================================================== */

:root {
  --marque-encre:    #0C3A72;   /* bleu du bouton et des titres de la carte */
  --marque-action:   #0B57A4;   /* bleu d'accent, focus */
  --marque-lien:     #1A5FD0;
  --carte-texte:     #15243A;
  --carte-legende:   #4A648F;
  --carte-fond:      #FFFFFF;
  --carte-bord:      #DCE3F0;
  --carte-invite:    #7089B4;
  --champ-fond:      #F5F8FC;   /* fond leger des champs */
  --onglets-fond:    #E7EDF6; --onglets-txt: #4A648F; --onglets-on: #FFFFFF; --onglets-on-txt: #00589B; --onglets-ombre: 0 1px 3px rgba(6,30,62,.14);

  /* Photo de fond. Pour la remplacer : deposer le fichier dans
     branding/assets/ et changer le nom ci-dessous. Les images sont mises en
     cache dix minutes : incrementer ?v= pour forcer le rechargement.
     Pour revenir a un aplat uni : remplacer toute la valeur par `none`. */
  --marque-photo:    url("/branding/fond.jpg?v=3");
}

/* ---------- THEME CLAIR (defaut) ---------- */

.login.fullscreen,
.reset_password.fullscreen,
.signup.fullscreen {
  --fond-page:      #EFF4FA;
  --voile: linear-gradient(100deg,
    rgba(255, 255, 255, .90)  0%,
    rgba(255, 255, 255, .80) 20%,
    rgba(255, 255, 255, .64) 30%,
    rgba(255, 255, 255, .38) 38%,
    rgba(253, 254, 255, .14) 46%,
    rgba(252, 253, 255, .04) 58%,
    rgba(12,  42,  78,  .02) 100%);
  --ombre-texte: 0 1px 2px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .85);
  --vitrine-titre:  #052D57;
  --vitrine-or:     #6E8A4E;
  --vitrine-texte:  #3F5B7C;
  --logo-carte:     url("/branding/logo-carte.png?v=5");
  --atout-titre:    #052D57;
  --atout-legende:  #526C8B;
  --filet-pale:     #B9CADF;
  --citation:       #1E4269;
  --pied-fond:      #EAF0F7;
  --pied-bord:      rgba(12, 58, 114, .14);
  --pied-texte:     rgba(12, 58, 114, .85);
  --pied-discret:   rgba(12, 58, 114, .5);
  --bascule-fond:   #FFFFFF;
  --bascule-bord:   rgba(12, 58, 114, .14);
  --bascule-texte:  #0C3A72;
  --ombre-tuile:    0 6px 16px rgba(6, 30, 62, .2);
}

/* ---------- THEME SOMBRE ---------- */

:root[data-bgfi-theme="sombre"] .login.fullscreen,
:root[data-bgfi-theme="sombre"] .reset_password.fullscreen,
:root[data-bgfi-theme="sombre"] .signup.fullscreen {
  --fond-page:      #04223F;
  --voile: linear-gradient(100deg,
    rgba(3, 34, 62, .96)  0%,
    rgba(3, 34, 62, .90) 24%,
    rgba(4, 40, 74, .74) 33%,
    rgba(4, 42, 80, .46) 41%,
    rgba(4, 45, 88, .18) 50%,
    rgba(4, 45, 88, .05) 62%,
    rgba(4, 45, 88, .02) 100%);
  --ombre-texte: 0 1px 2px rgba(2, 18, 38, .9), 0 0 16px rgba(2, 18, 38, .75);
  --vitrine-titre:  #FFFFFF;
  --vitrine-or:     #B9C79A;
  --vitrine-texte:  rgba(255, 255, 255, .88);
  --logo-carte:     url("/branding/logo-carte-rev.png?v=5");
  /* Carte navy en thème sombre (comme la maquette) */
  --carte-fond:     #0B2544;
  --carte-texte:    #EAF1FB;
  --carte-legende:  rgba(255, 255, 255, .72);
  --carte-bord:     rgba(255, 255, 255, .16);
  --carte-invite:   #9DB4D4;
  --champ-fond:     rgba(4, 16, 32, .45);
  --onglets-fond:   rgba(255,255,255,.06); --onglets-txt: #a9c0df; --onglets-on: rgba(255,255,255,.16); --onglets-on-txt: #FFFFFF; --onglets-ombre: none;
  --atout-titre:    #FFFFFF;
  --atout-legende:  rgba(255, 255, 255, .8);
  --filet-pale:     rgba(255, 255, 255, .34);
  --citation:       rgba(255, 255, 255, .95);
  --pied-fond:      #002F61;
  --pied-bord:      rgba(255, 255, 255, .1);
  --pied-texte:     rgba(255, 255, 255, .82);
  --pied-discret:   rgba(255, 255, 255, .55);
  --bascule-fond:   rgba(255, 255, 255, .14);
  --bascule-bord:   rgba(255, 255, 255, .28);
  --bascule-texte:  #FFFFFF;
  --ombre-tuile:    0 6px 16px rgba(0, 0, 0, .28);
}

/* ================= STRUCTURE ================= */

/* Zammad impose #app{min-width:1024px} (son UI desktop est concue pour >=1024).
   Sur les ecrans PUBLICS uniquement (connexion, reset, inscription) on le
   neutralise, sinon la page deborde horizontalement quand elle est vue sous
   1024px — cas des mobiles, qu'on redirige desormais vers ce login desktop.
   Le :has cible ne touche PAS l'interface agent. */
#app:has(> .login.fullscreen),
#app:has(> .reset_password.fullscreen),
#app:has(> .signup.fullscreen) {
  min-width: 0;
}

.login.fullscreen {
  display: grid;
  grid-template-columns: 46fr 54fr;
  align-items: stretch;
  /* Zammad impose « .fullscreen { height:100% } ». Sans height:auto, ce bloc
     reste fige a la hauteur de l'ecran : sur une fenetre basse, la carte
     depasse et le bandeau de pied (absolute; bottom:0) vient la recouvrir.
     Et PAS d'overflow ici, sinon ce bloc devient le conteneur de defilement
     et le pied se recolle au bas visible (meme bug). C'est #app qui defile. */
  height: auto;
  min-height: 100vh;
  padding: 0 0 58px;          /* 58px : hauteur du bandeau de pied */
  position: relative;
  overflow: visible;

  background-color: var(--fond-page);
  background-image: var(--marque-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Voile : dense a gauche pour porter le texte, il s'efface a droite pour que
   le visage de la conseillere garde sa lumiere naturelle. */
.login.fullscreen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--voile);
  pointer-events: none;
}

.login.fullscreen > .bgfi-vitrine,
.login.fullscreen > .fullscreen-center,
.login.fullscreen > .bgfi-bascule {
  position: relative;
  z-index: 2;
}

/* La colonne de droite : Zammad centrait la carte dans toute la page, elle
   se cale desormais a droite de sa colonne, ce qui degage la scene. */
.login.fullscreen > .fullscreen-center {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  height: auto;
  margin: 0;
  padding: 40px clamp(18px, 3vw, 46px);
}

.login.fullscreen .fullscreen-body {
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 0;
}

/* ================= BASCULE DE THEME ================= */

/* Posee par bgfi.js. Le choix vit dans localStorage, donc par navigateur. */
.login.fullscreen .bgfi-bascule {
  position: absolute;
  top: 26px;
  right: 30px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 17px;
  border: 1px solid var(--bascule-bord);
  border-radius: 999px;
  background-color: var(--bascule-fond);
  color: var(--bascule-texte);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.login.fullscreen .bgfi-bascule:hover {
  border-color: var(--marque-action);
}

/* Le pictogramme est peint par masque plutot que par image : il prend ainsi
   la couleur du texte, donc bleu nuit sur le thème clair et blanc sur le
   sombre, sans avoir a servir deux jeux d'icones. */
.bgfi-bascule::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icone-bascule) center / contain no-repeat;
  mask: var(--icone-bascule) center / contain no-repeat;
}

/* Automatique : un disque mi-plein, convention repandue pour « suit le
   reglage du systeme ». */
.bgfi-bascule--auto {
  --icone-bascule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20V2z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z'/%3E%3C/svg%3E");
}

.bgfi-bascule--clair {
  --icone-bascule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.4v2.4M12 19.2v2.4M4.2 12H1.8M22.2 12h-2.4M6.5 6.5 4.8 4.8M19.2 19.2l-1.7-1.7M17.5 6.5l1.7-1.7M4.8 19.2l1.7-1.7'/%3E%3C/svg%3E");
}

.bgfi-bascule--sombre {
  --icone-bascule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.5 14.4A8.6 8.6 0 0 1 9.6 3.5a8.6 8.6 0 1 0 10.9 10.9z'/%3E%3C/svg%3E");
}

/* ================= VITRINE (colonne de gauche) ================= */

.bgfi-vitrine {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 40px clamp(20px, 2.4vw, 38px) 40px clamp(26px, 4.4vw, 64px);
}

.bgfi-vitrine-corps {
  max-width: 460px;
}

/* Halo : c'est lui qui detache le texte du decor, a la place du voile. */
.bgfi-vitrine-titre,
.bgfi-vitrine-accroche,
.bgfi-atout b,
.bgfi-atout-legende,
.bgfi-citation {
  text-shadow: var(--ombre-texte);
}

.bgfi-vitrine .bgfi-logo-vitrine {
  display: block;
  height: 74px;
  max-width: 240px;
  margin: 0 0 20px;
  object-fit: contain;
  object-position: left center;
}

.bgfi-filet {
  display: block;
  height: 4px;
  border-radius: 2px;
}

.bgfi-filet--or {
  width: 84px;
  background-image: linear-gradient(90deg, #8FA06E 0%, #00589B 100%);
}

.bgfi-filet--pale {
  width: 60px;
  height: 3px;
  background-color: var(--filet-pale);
  margin: 30px 0 24px;
}

.bgfi-vitrine-titre {
  margin: 24px 0 0;
  font-size: clamp(24px, 2.3vw, 33px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--vitrine-titre);
}

.bgfi-vitrine-titre em {
  font-style: normal;
  color: var(--vitrine-or);
}

.bgfi-vitrine-accroche {
  margin: 16px 0 0;
  max-width: 23em;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.5;
  color: var(--vitrine-texte);
}

/* ================= LES QUATRE ATOUTS ================= */

.bgfi-atouts {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.bgfi-atout {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 13px;
}

.bgfi-atout-tuile {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  box-shadow: var(--ombre-tuile);
}

.bgfi-atout b {
  display: block;
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 700;
  color: var(--atout-titre);
}

.bgfi-atout-legende {
  display: block;
  font-size: clamp(12.5px, 1vw, 14.5px);
  line-height: 1.35;
  color: var(--atout-legende);
}

/* Icones en SVG incorpore : aucun fichier supplementaire a servir.
   Les couleurs des deux reseaux reprennent leurs teintes officielles, pour
   qu'ils soient reconnus au premier coup d'oeil ; le courriel et le telephone
   restent dans la charte, bleu nuit et or. */
.bgfi-atout--courriel .bgfi-atout-tuile {
  background-color: #0C3A72;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='18.8' height='14' rx='2.2'/%3E%3Cpath d='m3.4 7 8.6 6 8.6-6'/%3E%3C/svg%3E");
}

.bgfi-atout--whatsapp .bgfi-atout-tuile {
  background-color: #25D366;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.2A9.7 9.7 0 0 0 3.6 16.8L2.3 21.7l5-1.3A9.7 9.7 0 1 0 12 2.2zm0 1.8a7.9 7.9 0 0 1 0 15.8 7.8 7.8 0 0 1-4-1.1l-.3-.2-2.9.8.8-2.9-.2-.3A7.9 7.9 0 0 1 12 4z'/%3E%3Cpath fill='%23fff' d='M16.6 14.2c-.2-.1-1.4-.7-1.7-.8-.2-.1-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1-.3-.1-1.1-.4-2-1.2-.7-.7-1.2-1.5-1.4-1.7-.1-.2 0-.4.1-.5l.4-.4c.1-.2.2-.3.2-.5s0-.3-.1-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.7 2.6 4.1 3.6.6.2 1 .4 1.4.5.6.2 1.1.2 1.5.1.5-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1z'/%3E%3C/svg%3E");
}

.bgfi-atout--telephone .bgfi-atout-tuile {
  background-color: #D9A340;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.7 10.9a14.9 14.9 0 0 0 6.4 6.4l2.1-2.1c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .5 1 1v3.4c0 .6-.4 1-1 1A17 17 0 0 1 2.9 4c0-.6.5-1 1-1h3.4c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.3 0 .7-.2 1l-2 2.4z'/%3E%3C/svg%3E");
}

.bgfi-atout--facebook .bgfi-atout-tuile {
  background-color: #1877F2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.6 21.5v-8h2.7l.4-3.1h-3.1V8.4c0-.9.3-1.5 1.6-1.5h1.7V4.1c-.3 0-1.3-.1-2.4-.1-2.4 0-4.1 1.5-4.1 4.2v2.2H7.6v3.1h2.8v8z'/%3E%3C/svg%3E");
}

/* ================= CITATION ================= */

.bgfi-citation {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  max-width: 15em;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.38;
  font-style: italic;
  font-weight: 400;
  color: var(--citation);
}

/* ================= LA CARTE ================= */

/* « Se connecter a 192.168.2.2:8085 » : la carte porte son propre titre. */
.login.fullscreen .fullscreen-body > p {
  display: none;
}

/* Le logo est repris dans la vitrine ; celui de la carte ferait doublon. */
.login.fullscreen .hero-unit > .company-logo {
  display: none;
}

.login.fullscreen .hero-unit {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(28px, 2.8vw, 40px) clamp(22px, 2.2vw, 34px);
  background-color: var(--carte-fond);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 54px rgba(1, 20, 44, .16), 0 2px 8px rgba(1, 20, 44, .05);
  text-align: center;
  color: var(--carte-texte);
  position: relative;
  overflow: hidden;
}

/* Liseré d'accent BGFI en tête de carte (sage -> bleu). */
.login.fullscreen .hero-unit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: linear-gradient(90deg, #8FA06E 0%, #00589B 100%);
}

/* Logo BGFI en tête de carte : version selon le thème (--logo-carte). */
.bgfi-logo-carte {
  display: block;
  height: 46px;
  margin: 0 auto 10px;
  background-image: var(--logo-carte);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.bgfi-slogan-carte {
  display: block;
  /* Explicite : sur l'inscription et le reset la carte est alignee a gauche,
     le slogan en heritait au lieu d'etre centre comme sur la connexion. */
  text-align: center;
  margin: 0 0 14px;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--carte-legende);
}

.bgfi-carte-titre {
  display: block;
  margin: 0 0 6px;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--marque-action);
}

.login.fullscreen .bgfi-sous-titre {
  display: block;
  margin: 0 auto 22px;
  max-width: 340px;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--carte-legende);
}

/* Onglets Collaborateur / Client + ligne de contexte (comme la maquette).
   Purement visuel : les deux publics utilisent le meme formulaire Zammad ;
   l'onglet adapte l'invite du champ et la ligne de contexte. */
.login.fullscreen #login .bgfi-onglets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--onglets-fond);
  border-radius: 12px;
  padding: 4px;
  margin: 0 0 10px;
}
.login.fullscreen #login .bgfi-onglets button {
  border: 0;
  background: transparent;
  color: var(--onglets-txt);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 6px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.login.fullscreen #login .bgfi-onglets button:hover:not(.on) {
  color: var(--carte-texte);
}
.login.fullscreen #login .bgfi-onglets button.on {
  background: var(--onglets-on);
  color: var(--onglets-on-txt);
  box-shadow: var(--onglets-ombre);
}
.login.fullscreen #login .bgfi-contexte {
  font-size: 12px;
  color: var(--carte-legende);
  text-align: center;
  margin: 0 0 18px;
}

/* ================= CHAMPS ================= */

/* Les etiquettes restent dans le balisage pour les lecteurs d'ecran : la
   maquette ne montre que les textes d'invite. */
.login.fullscreen .formGroup-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.login.fullscreen #login .form-group {
  position: relative;
  margin: 0 0 13px;
}

.login.fullscreen #login .form-control {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 50px;
  font-size: 15px;
  text-align: left;
  color: var(--carte-texte);
  background-color: var(--champ-fond);
  border: 1px solid var(--carte-bord);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.login.fullscreen #login .form-control::placeholder {
  color: var(--carte-invite);
  opacity: 1;
}

/* Seul le champ mot de passe porte l'oeil : lui seul reserve la place a droite. */
.login.fullscreen #login .form-group:has(#password) .form-control {
  padding-right: 46px;
}

.login.fullscreen #login .form-control:focus {
  border-color: var(--marque-action);
  box-shadow: 0 0 0 3px rgba(11, 87, 164, .16);
  outline: none;
}

/* Pictogrammes a gauche des champs. */
.login.fullscreen #login .form-group::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 21px;
  height: 21px;
  margin-top: -10.5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.login.fullscreen #login .form-group:has(#username)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C3A72' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.6' r='3.9'/%3E%3Cpath d='M4.6 20c0-3.6 3.3-5.8 7.4-5.8s7.4 2.2 7.4 5.8'/%3E%3C/svg%3E");
}

.login.fullscreen #login .form-group:has(#password)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C3A72' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='4.2' y='10.2' width='15.6' height='10.6' rx='2.4'/%3E%3Cpath d='M7.8 10.2V7.4a4.2 4.2 0 0 1 8.4 0v2.8'/%3E%3Cpath d='M12 14.4v2.2'/%3E%3C/svg%3E");
}

/* La ligne « se souvenir / mot de passe oublie » n'a pas de pictogramme. */
.login.fullscreen #login .bgfi-ligne-options::before {
  content: none;
}

/* Bouton oeil : devoile le mot de passe (pose par bgfi.js). */
.login.fullscreen .bgfi-oeil {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C3A72' stroke-width='1.9'%3E%3Cpath d='M1.8 12S5.6 5.4 12 5.4 22.2 12 22.2 12 18.4 18.6 12 18.6 1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E");
  cursor: pointer;
  opacity: .72;
}

.login.fullscreen .bgfi-oeil:hover {
  opacity: 1;
  background-color: #F1F5FB;
}

.login.fullscreen .bgfi-oeil[aria-pressed="true"] {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B57A4' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M1.8 12S5.6 5.4 12 5.4 22.2 12 22.2 12 18.4 18.6 12 18.6 1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='m4 20 16-16'/%3E%3C/svg%3E");
}

/* ================= « SE SOUVENIR » ET « MOT DE PASSE OUBLIE » ================= */

.login.fullscreen #login .bgfi-ligne-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 18px;
}

.login.fullscreen #login .bgfi-ligne-options .inline-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--marque-encre);
  cursor: pointer;
}

/* On masque les icones SVG pleines de Zammad (un carre plein, blanc, qui rendait
   mal : invisible sur carte blanche, carre blanc sur carte navy) et on affiche
   la vraie case native : rendu identique sur les deux themes, accent BGFI. */
.login.fullscreen #login .bgfi-ligne-options .icon-checkbox,
.login.fullscreen #login .bgfi-ligne-options .icon-checkbox-checked {
  display: none;
}

.login.fullscreen #login .bgfi-ligne-options input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
  position: static;
  opacity: 1;
  pointer-events: auto;
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0 9px 0 0;
  accent-color: #00589B;
  cursor: pointer;
}

/* Sur carte navy, color-scheme:dark fait dessiner au navigateur une case
   adaptee au fond sombre (contour clair) plutot qu'un carre blanc. */
:root[data-bgfi-theme="sombre"] .login.fullscreen #login .bgfi-ligne-options input[type="checkbox"] {
  color-scheme: dark;
}

.login.fullscreen #login .bgfi-ligne-options .label-text {
  margin-left: 9px;
}

.login.fullscreen #login .bgfi-ligne-options a {
  font-size: 14px;
  font-weight: 500;
  color: var(--marque-lien);
  text-decoration: none;
  white-space: nowrap;
}

.login.fullscreen #login .bgfi-ligne-options a:hover {
  text-decoration: underline;
}

/* ================= BOUTON PRINCIPAL ================= */

.login.fullscreen #login .form-controls {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

.login.fullscreen #login .btn--primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 54px;
  padding: 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #FFFFFF;
  background-color: #00589B;
  background-image: none;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  cursor: pointer;
  margin-top: 4px;
  transition: background-color .15s ease, transform .08s ease;
}

.login.fullscreen #login .btn--primary::after {
  content: none;
}

.login.fullscreen #login .btn--primary:hover {
  background-color: #04487D;
  box-shadow: none;
}

.login.fullscreen #login .btn--primary:active {
  transform: translateY(1px);
}

/* ================= CARTE NAVY (THEME SOMBRE) — DETAILS ================= */
/* Le fond, les textes, les champs et le logo suivent les variables ci-dessus.
   Restent ces elements dont la couleur est fixe : on les eclaircit. */
:root[data-bgfi-theme="sombre"] .login.fullscreen .bgfi-carte-titre {
  color: #FFFFFF;
}
:root[data-bgfi-theme="sombre"] .login.fullscreen #login .bgfi-ligne-options .inline-label,
:root[data-bgfi-theme="sombre"] .login.fullscreen #login .bgfi-ligne-options .icon-checkbox,
:root[data-bgfi-theme="sombre"] .login.fullscreen #login .bgfi-ligne-options .icon-checkbox-checked {
  color: #EAF1FB;
}
:root[data-bgfi-theme="sombre"] .login.fullscreen #login .bgfi-ligne-options a,
:root[data-bgfi-theme="sombre"] .login.fullscreen .js-footer a {
  color: #6BA6DF;
}
:root[data-bgfi-theme="sombre"] .login.fullscreen #login .form-group:has(#username)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB4D4' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.6' r='3.9'/%3E%3Cpath d='M4.6 20c0-3.6 3.3-5.8 7.4-5.8s7.4 2.2 7.4 5.8'/%3E%3C/svg%3E");
}
:root[data-bgfi-theme="sombre"] .login.fullscreen #login .form-group:has(#password)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB4D4' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='4.2' y='10.2' width='15.6' height='10.6' rx='2.4'/%3E%3Cpath d='M7.8 10.2V7.4a4.2 4.2 0 0 1 8.4 0v2.8'/%3E%3Cpath d='M12 14.4v2.2'/%3E%3C/svg%3E");
}
:root[data-bgfi-theme="sombre"] .login.fullscreen .bgfi-oeil {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB4D4' stroke-width='1.9'%3E%3Cpath d='M1.8 12S5.6 5.4 12 5.4 22.2 12 22.2 12 18.4 18.6 12 18.6 1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E");
}
:root[data-bgfi-theme="sombre"] .login.fullscreen .bgfi-oeil:hover {
  background-color: rgba(255, 255, 255, .10);
}
:root[data-bgfi-theme="sombre"] .login.fullscreen .bgfi-oeil[aria-pressed="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFE0FF' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M1.8 12S5.6 5.4 12 5.4 22.2 12 22.2 12 18.4 18.6 12 18.6 1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='m4 20 16-16'/%3E%3C/svg%3E");
}

/* ================= BAS DE CARTE : CREATION DE COMPTE ================= */

/* Le bloc d'aide de Zammad est conserve sous le bouton, en discret : la
   maquette ne le montre pas, mais le lien reste utile et fonctionnel. */
.login.fullscreen .js-footer {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #E9EEF6;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--carte-legende);
}

.login.fullscreen .js-footer hr,
.login.fullscreen .js-footer > p:first-of-type {
  display: none;
}

.login.fullscreen .js-footer p {
  margin: 0;
}

.login.fullscreen .js-footer .bgfi-accroche-compte {
  margin-right: 6px;
}

.login.fullscreen .js-footer a {
  color: var(--marque-lien);
  font-weight: 600;
  text-decoration: none;
}

.login.fullscreen .js-footer a:hover {
  text-decoration: underline;
}

/* ================= BANDEAU DE PIED ================= */

/* Le conteneur .poweredBy de Zammad devient le bandeau de la maquette : la
   mention « Propulse par Zammad » y reste, a droite. */
.login.fullscreen .poweredBy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 58px;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 62px);
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--pied-fond);
  border-top: 1px solid var(--pied-bord);
  font-size: 12.5px;
  color: var(--pied-discret);
  text-align: left;
}

.login.fullscreen .poweredBy .bgfi-pied-mentions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-right: auto;
  font-size: 13px;
  color: var(--pied-texte);
}

.login.fullscreen .poweredBy .bgfi-pied-sep {
  color: var(--pied-discret);
}

.login.fullscreen .poweredBy .bgfi-pied-droite {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
  color: var(--pied-texte);
}

.login.fullscreen .poweredBy .bgfi-pied-filet {
  display: inline-block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, #8FA06E 0%, #00589B 100%);
}

.login.fullscreen .poweredBy .icon-logo,
.login.fullscreen .poweredBy .icon-logotype {
  opacity: .5;
}

.login.fullscreen .poweredBy a {
  color: var(--pied-discret);
}

/* ================= MESSAGES ================= */

.login.fullscreen .alert,
.login.fullscreen .js-alert {
  margin: 0 0 16px;
  border-radius: 10px;
  font-size: 14px;
}

/* ================= ECRANS ETROITS ================= */

/* Sous 1240 px la citation est la premiere a gener : on la retire. */
@media (max-width: 1240px) {
  .bgfi-citation,
  .bgfi-filet--pale {
    display: none;
  }
}

/* Sous 1040 px : une seule colonne, la vitrine passe au-dessus. */
@media (max-width: 1040px) {
  .login.fullscreen {
    grid-template-columns: 1fr;
    padding-bottom: 92px;
  }

  /* Le voile devient vertical : sans cela, la vitrine posee en haut
     retomberait sur la partie degagee de la photo. */
  .login.fullscreen::before {
    background-image: linear-gradient(
      180deg,
      var(--fond-page) 0%,
      color-mix(in srgb, var(--fond-page) 88%, transparent) 56%,
      color-mix(in srgb, var(--fond-page) 62%, transparent) 100%
    );
  }

  .bgfi-vitrine {
    padding: 34px 26px 4px;
  }

  .bgfi-vitrine-corps {
    max-width: none;
  }

  .bgfi-atouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
  }

  .login.fullscreen > .fullscreen-center {
    justify-content: center;
    padding: 22px 26px 40px;
  }

  .login.fullscreen .fullscreen-body {
    margin: 0 auto;
  }

  .login.fullscreen .poweredBy {
    height: auto;
    min-height: 58px;
    padding: 12px 22px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .login.fullscreen .poweredBy .bgfi-pied-mentions {
    margin-right: 0;
  }
}

/* Sous 980 px : la grille 2 colonnes deborderait (le min-content de la vitrine
   force une colonne trop large), et la carte chevauchait le pied de page. On
   passe donc en colonne unique : vitrine masquee, carte centree et plafonnee. */
@media (max-width: 980px) {
  .bgfi-vitrine {
    display: none;
  }

  .login.fullscreen {
    grid-template-columns: 1fr;
    align-items: center;
    padding-bottom: 72px;
  }

  /* La carte cesse d'etre calee a droite : centree, elle occupe toute la
     largeur disponible moins une petite marge. C'est le correctif du
     debordement mobile. */
  .login.fullscreen > .fullscreen-center {
    justify-content: center;
    width: 100%;
    padding: 18px 14px 28px;
  }

  .login.fullscreen .fullscreen-body {
    max-width: 400px;
    margin: 0 auto;
  }

  .login.fullscreen .hero-unit {
    padding: 26px 22px;
    border-radius: 16px;
  }

  /* La bascule de theme ne doit jamais sortir de l'ecran. */
  .login.fullscreen .bgfi-bascule {
    top: 12px;
    right: 12px;
    height: 36px;
    padding: 0 12px;
    font-size: 12.5px;
  }

  /* Titre et sous-titre resserres pour l'etroit. */
  .bgfi-carte-titre {
    font-size: 27px;
  }

  .login.fullscreen .bgfi-sous-titre {
    font-size: 14.5px;
    margin-bottom: 20px;
  }

  /* « Se souvenir » et « Mot de passe oublie » passent a la ligne si besoin,
     au lieu d'etre coupes. */
  .login.fullscreen #login .bgfi-ligne-options {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  /* Le bandeau de pied se comprime et s'enroule. */
  .login.fullscreen .poweredBy {
    height: auto;
    min-height: 48px;
    padding: 10px 14px;
    gap: 6px 12px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 12px;
  }

  .login.fullscreen .poweredBy .bgfi-pied-mentions {
    margin-right: 0;
    gap: 10px;
    font-size: 12px;
    justify-content: center;
  }

  .login.fullscreen .poweredBy .bgfi-pied-droite {
    font-size: 12px;
  }
}

/* Tablette (420–980 px) — Option A : halo radial doux derriere la carte, pour
   qu'elle se detache de la photo (hero) sans ajouter de texte. Pose sur le
   ::before de .fullscreen-center (deja position:relative, z-index:2), en
   z-index:-1 pour rester DERRIERE la carte mais au-dessus du voile. */
@media (min-width: 420px) and (max-width: 980px) {
  .login.fullscreen > .fullscreen-center::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    height: 660px;
    max-width: 94vw;
    z-index: -1;
    background: radial-gradient(closest-side,
      rgba(4, 26, 56, .38) 0%,
      rgba(4, 26, 56, .20) 46%,
      rgba(4, 26, 56, 0) 78%);
    pointer-events: none;
  }
}

/* Tres petits ecrans (< 360 px) : on gagne les derniers pixels. */
@media (max-width: 360px) {
  .login.fullscreen > .fullscreen-center {
    padding: 14px 10px 24px;
  }

  .login.fullscreen .hero-unit {
    padding: 20px 16px;
  }

  .bgfi-carte-titre {
    font-size: 25px;
  }

  .login.fullscreen #login .form-control {
    height: 50px;
    font-size: 14.5px;
  }
}

/* ================= FENETRES PEU HAUTES ================= */

/* La vitrine deployee mesure environ 840 px. Une fenetre de portable, barre
   de favoris comprise, descend souvent sous 700 px. Plutot que de supprimer
   du contenu des 900 px — ce qui faisait disparaitre la citation sur la
   quasi-totalite des ecrans — on resserre les espacements par paliers. La
   citation ne cede qu'en tout dernier recours, sous 640 px. */

/* Premier palier : on gagne une centaine de pixels sans rien retirer. */
@media (max-height: 880px) {
  .bgfi-vitrine { padding-top: 30px; padding-bottom: 30px; }
  .bgfi-vitrine .bgfi-logo-vitrine { height: 64px; margin-bottom: 18px; }
  .bgfi-vitrine-titre { margin-top: 20px; font-size: clamp(23px, 2.1vw, 30px); }
  .bgfi-vitrine-accroche { margin-top: 14px; }
  .bgfi-atouts { margin-top: 24px; }
  .bgfi-atout { gap: 16px; margin-bottom: 11px; }
  .bgfi-atout-tuile { width: 50px; height: 50px; background-size: 25px 25px; }
  .bgfi-filet--pale { margin: 24px 0 18px; }
  .bgfi-citation { font-size: clamp(15px, 1.3vw, 18px); margin-bottom: 18px; }

  .login.fullscreen .hero-unit { padding: 30px 28px; }
  .login.fullscreen #login .form-control { height: 52px; }
  .login.fullscreen #login .btn--primary { height: 56px; }
}

/* Deuxieme palier : tout est encore affiche, en plus dense. */
@media (max-height: 780px) {
  .bgfi-vitrine { padding-top: 22px; padding-bottom: 22px; }
  .bgfi-vitrine .bgfi-logo-vitrine { height: 54px; margin-bottom: 14px; }
  .bgfi-vitrine-titre { margin-top: 16px; font-size: clamp(21px, 1.9vw, 27px); }
  .bgfi-vitrine-accroche { margin-top: 10px; font-size: 14px; }
  .bgfi-atouts { margin-top: 18px; }
  .bgfi-atout { gap: 14px; margin-bottom: 8px; }
  .bgfi-atout-tuile { width: 44px; height: 44px; border-radius: 11px; background-size: 22px 22px; }
  .bgfi-atout b { font-size: 15px; }
  .bgfi-atout-legende { font-size: 13px; }
  .bgfi-filet--pale { margin: 18px 0 14px; }
  .bgfi-citation { font-size: 16px; margin-bottom: 14px; }

  .login.fullscreen .hero-unit { padding: 26px 24px; }
  .login.fullscreen .bgfi-carte-titre { font-size: clamp(26px, 2.2vw, 32px); }
  .login.fullscreen .bgfi-sous-titre { margin-bottom: 16px; font-size: 15px; }
  .login.fullscreen #login .form-control { height: 48px; }
  .login.fullscreen #login .form-group { margin-bottom: 11px; }
  .login.fullscreen #login .bgfi-ligne-options { margin: 2px 0 14px; }
  .login.fullscreen #login .btn--primary { height: 52px; }
  .login.fullscreen .js-footer { margin-top: 14px; padding-top: 12px; }
}

/* Troisieme palier : on comprime encore, mais on ne retire RIEN. Un libelle
   prive de sa legende — « Déposer » sans « vos réclamations » — ne veut plus
   dire grand-chose : la presentation doit rester entiere. */
@media (max-height: 690px) {
  /* Fenetre basse : la carte + les marges internes + le bandeau de pied
     demandaient plus que la hauteur disponible, et le pied (absolute) venait
     recouvrir le bas de la carte. On degonfle les marges, et « align-items:
     start » laisse la ligne de grille prendre la hauteur du contenu : si ca
     ne tient toujours pas, le bloc grandit et la page defile au lieu de
     masquer le bas de la carte. */
  .login.fullscreen { align-items: start; }
  .login.fullscreen > .fullscreen-center { padding-top: 10px; padding-bottom: 10px; }

  .bgfi-vitrine { padding-top: 16px; padding-bottom: 16px; }
  .bgfi-vitrine .bgfi-logo-vitrine { height: 44px; margin-bottom: 10px; }
  .bgfi-vitrine-titre { margin-top: 12px; font-size: clamp(19px, 1.7vw, 24px); }
  .bgfi-vitrine-accroche { margin-top: 8px; font-size: 13px; line-height: 1.45; }
  .bgfi-atouts { margin-top: 14px; }
  .bgfi-atout { gap: 12px; margin-bottom: 6px; }
  .bgfi-atout-tuile { width: 38px; height: 38px; border-radius: 10px; background-size: 19px 19px; }
  .bgfi-atout b { font-size: 14px; }
  .bgfi-atout-legende { font-size: 12.5px; }
  .bgfi-filet--pale { margin: 12px 0 10px; }
  .bgfi-citation { font-size: 14px; line-height: 1.35; margin-bottom: 10px; }

  .login.fullscreen .hero-unit { padding: 22px 22px; }
  .login.fullscreen .bgfi-carte-titre { font-size: 26px; margin-bottom: 6px; }
  .login.fullscreen .bgfi-sous-titre { margin-bottom: 12px; font-size: 14px; }
  .login.fullscreen #login .form-control { height: 44px; }
  .login.fullscreen #login .form-group { margin-bottom: 10px; }
  .login.fullscreen #login .bgfi-ligne-options { margin: 0 0 12px; }
  .login.fullscreen #login .btn--primary { height: 48px; font-size: 15.5px; }
  .login.fullscreen .js-footer { margin-top: 12px; padding-top: 10px; font-size: 12.5px; }
}

/* ==========================================================================
   4. LES AUTRES ECRANS PLEIN ECRAN — mot de passe oublie, creation de compte

   Ces pages appartiennent a la meme interface que l'ecran de connexion, mais
   leur conteneur porte une autre classe (.reset_password, .signup) et leur
   balisage est plus simple : .hero-unit y est aussi .fullscreen-body, il n'y
   a ni vitrine ni case a cocher. Sans les regles ci-dessous elles gardaient
   l'aplat bleu d'origine, sans rapport avec le thème choisi.

   Pas de vitrine ici : ce sont des formulaires courts, d'un seul champ. On
   reprend la photo, le voile, la carte blanche et le bandeau de pied, et on
   centre.
   ========================================================================== */

.reset_password.fullscreen,
.signup.fullscreen {
  /* PAS de flex ici : le centrage vertical en flexbox rogne le haut de la
     carte des qu'elle depasse l'ecran, et le haut devient inatteignable
     (constate en pratique ; ni align-items:flex-start ni « safe center » ne
     l'ont corrige de maniere fiable). En bloc, la carte s'ecoule depuis le
     haut et la page defile normalement : jamais de contenu inaccessible. */
  display: block;
  /* #app est un conteneur flex : sans cela, un enfant en « block » se
     retracte a la largeur de son contenu au lieu d'occuper l'ecran. */
  flex: 1 1 auto;
  width: 100%;
  /* ... et un flex-item est etire a la hauteur de #app par defaut, donc ce
     bloc resterait fige a 100vh et son contenu deborderait (pied de page
     traversant la carte). align-self:flex-start lui rend sa hauteur auto. */
  align-self: flex-start;
  /* PAS align-items:center seul : une carte plus haute que l'ecran serait
     rognee en haut ET en bas, le haut devenant inatteignable au defilement.
     Ne PAS corriger avec margin:auto non plus — en flexbox les marges auto
     priment sur align-items et repartissent meme un espace libre NEGATIF,
     ce qui recentre et rogne a nouveau.
     « align-items: safe center » serait la reponse elegante, mais il n'est
     pas applique de maniere fiable ici (valeur acceptee, comportement
     identique a center). On cale donc TOUJOURS en haut — jamais de rognage,
     comportement previsible — et on ajoute de l'air sur les grands ecrans
     (media query plus bas) pour ne pas avoir une carte collee au bord. */
  align-items: flex-start;
  justify-content: center;
  /* Zammad impose « .fullscreen { height:100% } » : le bloc resterait fige a
     la hauteur de l'ecran, son contenu deborderait, et le pied de page
     (absolute; bottom:0) se collerait au bas VISIBLE, en travers de la carte.
     height:auto le laisse grandir ; min-height garde l'ecran plein. */
  height: auto;
  min-height: 100vh;
  padding: 40px clamp(20px, 4vw, 60px) calc(40px + 58px);
  position: relative;
  /* PAS d'overflow ici : sinon ce bloc devient le conteneur de defilement,
     sa hauteur reste figee a 100vh, et le pied de page (absolute; bottom:0)
     se colle au bas VISIBLE au lieu du bas du contenu — il traverse alors la
     carte quand celle-ci depasse l'ecran. En le laissant grandir, le pied se
     place sous la carte et c'est #app (overflow:auto) qui defile. */
  overflow: visible;

  background-color: var(--fond-page);
  background-image: var(--marque-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Ecrans hauts : la carte est calee en haut (voir ci-dessus), on lui donne de
   l'air pour qu'elle ne soit pas collee au bord. Sur les ecrans bas, ce
   padding ne s'applique pas : toute la hauteur sert a afficher la carte. */
@media (min-height: 820px) {
  .reset_password.fullscreen,
  .signup.fullscreen {
    padding-top: 7vh;
  }
}

.reset_password.fullscreen::before,
.signup.fullscreen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--voile);
  pointer-events: none;
}

/* Ici .hero-unit porte aussi .fullscreen-body : la carte, c'est elle. */
.reset_password.fullscreen .fullscreen-center,
.signup.fullscreen .fullscreen-center {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 452px;
  /* Centrage horizontal seulement. Surtout pas de margin vertical auto :
     c'est ce qui recentrait la carte et rognait son haut. */
  margin: 0 auto;
  padding: 0;
}

.reset_password.fullscreen .hero-unit,
.signup.fullscreen .hero-unit {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(28px, 2.8vw, 40px) clamp(24px, 2.6vw, 36px);
  /* Suit le thème comme la carte de connexion : blanche en clair, navy en
     sombre. Etait en dur a #FFFFFF, ce qui donnait du texte clair sur blanc. */
  background-color: var(--carte-fond);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 54px rgba(1, 20, 44, .16), 0 2px 8px rgba(1, 20, 44, .05);
  text-align: left;
  color: var(--carte-texte);
  position: relative;
  overflow: hidden;
}

/* Meme liseré d'accent BGFI que sur la carte de connexion. */
.reset_password.fullscreen .hero-unit::before,
.signup.fullscreen .hero-unit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: linear-gradient(90deg, #8FA06E 0%, #00589B 100%);
}

/* L'ecran d'inscription utilise un <h1>, celui du reset un <h2> : on cible les
   deux, sinon le titre reste au style par defaut du navigateur. */
.reset_password.fullscreen h1,
.reset_password.fullscreen h2,
.signup.fullscreen h1,
.signup.fullscreen h2 {
  margin: 0 0 5px;
  text-align: center;
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--marque-action);
}

/* Phrase qui explique a quoi sert l'ecran, sous le titre. */
.bgfi-intro-publique {
  display: block;
  margin: 0 auto 20px;
  max-width: 330px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: var(--carte-legende);
}

/* Lien de sortie, deplace sous le bouton principal. */
.bgfi-lien-bas {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--carte-legende);
}

.bgfi-lien-bas a {
  color: var(--marque-action);
  font-weight: 600;
  text-decoration: none;
}

.bgfi-lien-bas a:hover {
  text-decoration: underline;
}

/* Ligne de reassurance en pied de carte. */
.bgfi-reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--carte-bord);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--carte-invite);
  /* Le texte passe sur deux lignes : centre, sinon la 2e ligne parait decalee. */
  text-align: center;
}

.bgfi-reassurance svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.reset_password.fullscreen .form-control,
.signup.fullscreen .form-control {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--carte-texte);
  /* Etait en dur a #FFFFFF : le champ devenait invisible sur carte navy. */
  background-color: var(--champ-fond);
  border: 1px solid var(--carte-bord);
  border-radius: 12px;
  box-shadow: none;
}

.reset_password.fullscreen .form-control:focus,
.signup.fullscreen .form-control:focus {
  border-color: var(--marque-action);
  box-shadow: 0 0 0 3px rgba(11, 87, 164, .16);
  outline: none;
}

/* Zammad marque les CINQ champs en « formGroup--halfSize » : ils s'enchainent
   donc 2 par ligne, ce qui apparie « E-mail » avec « Mot de passe » et laisse
   « Confirmer » orpheline. On met l'e-mail en pleine largeur : on retrouve
   Prenom | Nom, puis E-mail, puis Mot de passe | Confirmation. */
.signup.fullscreen .form-group:has(input[name="email"]) {
  width: 100%;
  float: none;
  clear: both;
}

.reset_password.fullscreen .formGroup-label label,
.signup.fullscreen .formGroup-label label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--carte-legende);
}

/* Meme bouton plat bleu BGFI que sur l'ecran de connexion (le navy
   var(--marque-encre) ressortait mal sur la carte navy en sombre). */
.reset_password.fullscreen .btn--primary,
.signup.fullscreen .btn--primary {
  height: 52px;
  padding: 0 26px;
  font-size: 15.5px;
  font-weight: 600;
  color: #FFFFFF;
  background-color: #00589B;
  background-image: none;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  cursor: pointer;
}

.reset_password.fullscreen .btn--primary:hover,
.signup.fullscreen .btn--primary:hover {
  background-color: #04487D;
}

.reset_password.fullscreen .btn--text,
.signup.fullscreen .btn--text {
  color: var(--marque-lien);
  text-decoration: none;
  font-weight: 500;
}

.reset_password.fullscreen .btn--text:hover,
.signup.fullscreen .btn--text:hover {
  text-decoration: underline;
}

/* Sombre : sur la carte navy, les couleurs fixes de ces deux ecrans doivent
   s'eclaircir (le titre etait en navy fonce, illisible). */
:root[data-bgfi-theme="sombre"] .reset_password.fullscreen h1,
:root[data-bgfi-theme="sombre"] .reset_password.fullscreen h2,
:root[data-bgfi-theme="sombre"] .signup.fullscreen h1,
:root[data-bgfi-theme="sombre"] .signup.fullscreen h2 {
  color: #FFFFFF;
}

:root[data-bgfi-theme="sombre"] .reset_password.fullscreen .btn--text,
:root[data-bgfi-theme="sombre"] .signup.fullscreen .btn--text {
  color: #6BA6DF;
}

/* La rangee de boutons de Zammad est en flex nowrap : sous ~460px le bouton
   principal depassait la carte et etait tronque par l'overflow-x:hidden
   (« Creer mon com... »). Le lien de sortie etant desormais deplace sous le
   bouton (.bgfi-lien-bas), cette rangee ne contient plus que le bouton
   principal : on le passe en pleine largeur a toutes les tailles. */
.reset_password.fullscreen .form-controls,
.signup.fullscreen .form-controls {
  display: block;
  margin-top: 4px;
  text-align: center;
}

.reset_password.fullscreen .form-controls .btn--primary,
.signup.fullscreen .form-controls .btn--primary {
  width: 100%;
  margin: 0;
  padding: 0 16px;
  float: none;
}

/* Meme bandeau de pied que sur l'ecran de connexion. */
.reset_password.fullscreen .poweredBy,
.signup.fullscreen .poweredBy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 58px;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background-color: var(--pied-fond);
  border-top: 1px solid var(--pied-bord);
  font-size: 12.5px;
  color: var(--pied-discret);
}

.reset_password.fullscreen .poweredBy .icon-logo,
.reset_password.fullscreen .poweredBy .icon-logotype,
.signup.fullscreen .poweredBy .icon-logo,
.signup.fullscreen .poweredBy .icon-logotype {
  opacity: .5;
}

.reset_password.fullscreen .poweredBy a,
.signup.fullscreen .poweredBy a {
  color: var(--pied-discret);
}

/* La bascule de thème est posee ici aussi : on doit pouvoir changer d'avis
   sans revenir a l'ecran de connexion. */
.reset_password.fullscreen .bgfi-bascule,
.signup.fullscreen .bgfi-bascule {
  position: absolute;
  top: 26px;
  right: 30px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 17px;
  border: 1px solid var(--bascule-bord);
  border-radius: 999px;
  background-color: var(--bascule-fond);
  color: var(--bascule-texte);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}


/* Zammad centre le texte de ses pages plein ecran ; sans ces regles, posees a
   la meme specificite que les siennes, l'accroche et la citation de la vitrine
   se retrouvent centrees au milieu d'un bloc aligne a gauche. */
.login.fullscreen .bgfi-vitrine,
.login.fullscreen .bgfi-vitrine h1,
.login.fullscreen .bgfi-vitrine p,
.login.fullscreen .bgfi-vitrine ul,
.login.fullscreen .bgfi-vitrine li,
.login.fullscreen .bgfi-vitrine blockquote {
  text-align: left;
}