@charset "UTF-8";
/* ===========================================================================
   D@niel — habillage des pages d'authentification de Greenlight
   Injecté par nginx (sub_filter). L'application n'est pas modifiée.

   Structure réelle, relevée dans le navigateur :
     html > body > div#root > div.mobile-app-bg.container
                                > div.vertical-center
                                     > div.text-center (> .logo-wrapper > img.logo)
                                     + div.card (formulaire)
                            > footer#footer  (max-height: 57px — imposé par
                                              Greenlight ; tout ce qui dépasse
                                              y est coupé, d'où le bandeau
                                              placé ailleurs)

   Ordre voulu dans la colonne de gauche — la colonne est une boîte flexible
   et chaque élément reçoit un rang, sans quoi ::before passerait devant le
   logo :
       .logo-wrapper  → 1
       ::before       → 2   (titre + filet doré)
       ::after        → 3   (paragraphe)
   =========================================================================== */

:root{
  --d-nuit:#0B3255; --d-bleu:#1272B8; --d-ciel:#00AEEF;
  --d-or:#C9A227;   --d-or-clair:#EFD27C;
}

/* -- le fond, sur la page entière et non sur le seul conteneur : sinon une
      bande blanche apparaît sous le contenu ---------------------------------- */
html,body{
  background:linear-gradient(135deg,var(--d-nuit) 0%,var(--d-bleu) 55%,var(--d-ciel) 100%) fixed !important;
  min-height:100%;
}
#root .mobile-app-bg{
  background:none !important; background-image:none !important;
  min-height:auto;
}

/* -- la mise en page --------------------------------------------------------- */
#root .vertical-center{ max-width:1160px; margin:0 auto; padding:46px 20px 20px; }

#root .vertical-center > .text-center{
  display:flex; flex-direction:column; align-items:center;
}
#root .logo-wrapper{ order:1; }
#root .vertical-center > .text-center::before{ order:2; }
#root .vertical-center > .text-center::after{ order:3; }

@media (min-width:992px){
  #root .vertical-center{
    display:grid; grid-template-columns:1.05fr .95fr;
    align-items:center; gap:64px;
    min-height:calc(100vh - 250px);   /* laisse la place au bandeau et au pied */
    padding:46px 40px 20px;
  }
  #root .vertical-center > .text-center{ align-items:flex-start; padding-bottom:0 !important; }
  #root .vertical-center > .card{
    margin:0 !important; max-width:460px; width:100% !important; flex:none !important;
  }
}

/* -- le logo D@niel, sur une plaque blanche ---------------------------------- */
#root .logo-wrapper{
  position:static !important; height:auto !important;
  display:inline-block; background:#fff; border-radius:18px;
  padding:16px 22px; box-shadow:0 14px 36px rgba(3,24,48,.28);
}
#root img.logo{
  content:url("/daniel-brand/daniel.png?v=202610040127");
  position:static !important; display:block;
  width:248px; max-width:100%; height:auto; margin:0;
}

/* -- le titre, filet doré en bordure basse ------------------------------------ */
#root .vertical-center > .text-center::before{
  content:"Bienvenue sur D@niel";
  display:block; color:#fff; font-weight:700;
  font-size:1.9rem; line-height:1.25;
  margin-top:30px; padding-bottom:14px;
  border-bottom:4px solid var(--d-or-clair);
  text-shadow:0 1px 3px rgba(0,0,0,.22);
}
#root .vertical-center > .text-center::after{
  content:"Cours en groupe de 7 à 10 élèves, visioconférence multi-vue, et toutes vos inscriptions au même endroit.";
  display:block; color:#E4F2FB; font-size:1.06rem; line-height:1.65;
  max-width:30rem; margin-top:18px;
  text-shadow:0 1px 2px rgba(0,0,0,.16);
}
@media (min-width:992px){
  #root .vertical-center > .text-center::before{ font-size:2.15rem; }
  #root .vertical-center > .text-center::after{ font-size:1.14rem; text-align:left; }
}

/* -- la carte du formulaire --------------------------------------------------- */
#root .vertical-center > .card{
  border:0 !important; border-radius:22px !important;
  padding:34px 30px !important; background:#fff;
  box-shadow:0 26px 64px rgba(3,26,52,.32) !important;
}
#root .card-title{
  font-size:1.4rem !important; font-weight:700 !important;
  color:var(--d-nuit) !important; margin-bottom:10px !important;
}

/* -- les champs ---------------------------------------------------------------- */
#root .form-label{ color:#46617C !important; font-weight:600 !important; }
#root .form-control{
  border:1px solid #D7E6F2 !important; border-radius:11px !important;
  padding:.68rem .9rem !important; background:#FBFDFF !important;
}
#root .form-control:focus{
  border-color:var(--d-bleu) !important; background:#fff !important;
  box-shadow:0 0 0 .2rem rgba(18,114,184,.16) !important;
}
#root .form-check-label{ font-size:.9rem; color:#46617C; }

/* -- le bouton ------------------------------------------------------------------ */
#root .btn-brand{
  background:linear-gradient(135deg,var(--d-bleu),var(--d-ciel)) !important;
  border:0 !important; border-radius:12px !important;
  font-weight:600 !important; letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(0,70,125,.28) !important;
}
#root .btn-brand:hover{ filter:brightness(1.06); }

/* -- les liens ------------------------------------------------------------------ */
#root a.text-link{ color:var(--d-bleu) !important; font-weight:600; }
#root a.text-link:hover{ color:var(--d-ciel) !important; }

/* -- LE BANDEAU DES QUATRE MARQUES ---------------------------------------------
   Placé ici, et non dans le pied de page : celui-ci porte un max-height de
   57 px imposé par Greenlight, qui coupait le bandeau par le bas. Une seule
   image et un rapport de forme fixe : la hauteur se déduit de la largeur. */
#root .mobile-app-bg::after{
  content:"";
  display:block;
  width:min(680px, 94%);
  aspect-ratio:1600 / 194;
  margin:0 auto 10px;
  background:#fff url("/daniel-brand/bandeau.png?v=202610040127") center / contain no-repeat;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(3,24,48,.24);
}

/* -- le pied de page, discret --------------------------------------------------- */
#footer.footer{
  background:transparent !important;
  border:0 !important;
  padding-bottom:16px;
}
#footer.footer a{ color:#D7ECFA !important; font-size:.86rem; }
#footer-container{ border:0 !important; }

/* -- petit écran ----------------------------------------------------------------- */
@media (max-width:991.98px){
  #root .vertical-center{ padding-top:34px; }
  #root .vertical-center > .text-center{ padding-bottom:28px !important; }
  #root img.logo{ width:200px; }
  #root .vertical-center > .text-center::before{ font-size:1.6rem; }
  #root .vertical-center > .text-center::after{ text-align:center; }
  #root .mobile-app-bg::after{ width:min(520px, 92%); }
}