/* ===================================================================
   PAGE DE CONNEXION — reproduction de la maquette fournie
   -------------------------------------------------------------------
   Toutes les valeurs de ce fichier sont MESUREES sur l'image de
   reference (1874 x 839 px), pas choisies. Les commentaires donnent
   la mesure d'origine pour que la prochaine retouche parte du meme
   endroit.

     separation des panneaux ... x = 864      -> 46.105 %
     bloc de formulaire ........ x = 169..744 -> 576 px de large
     marges du panneau gauche .. 169 a gauche, 119 a droite
     logo de l'en-tete ......... 115 x 136, mot a x = 306
     bouton Google ............. y 316..377   -> 62 px
     champ ..................... y 472..525   -> 54 px
     bouton Log in ............. y 681..735   -> 55 px

   La page est volontairement SOMBRE dans les deux themes : c'est un
   ecran de marque plein cadre, comme la maquette. Le reste du produit
   continue de suivre le theme choisi.
   =================================================================== */

/* ------------------------------------------------- CADRE PLEIN ECRAN */
:root[data-route="login"] #app > .topbar,
:root[data-route="login"] #app > .tabbar,
:root[data-route="login"] #app > .learning-nav,
:root[data-route="login"] #main > .learning-nav { display: none !important; }

:root[data-route="login"] #app,
:root[data-route="login"] #main {
  max-width: none; width: 100%; margin: 0; padding: 0;
}
:root[data-route="login"] body { overflow-x: hidden; }

/* L'animation d'entree de #main pose un transform. Un transform cree un
   bloc conteneur : le position:fixed de .auth se calait alors sur #main
   et non sur la fenetre, d'ou un panneau plus haut que l'ecran. */
:root[data-route="login"] #main,
:root[data-route="login"] #main[data-anim] {
  transform: none !important; animation: none !important; opacity: 1 !important;
}

.auth {
  --auth-noir:      #08090b;   /* fond du panneau gauche, mesure (6,7,9)   */
  --auth-noir-bas:  #030406;   /* bas du panneau gauche,   mesure (3,4,7)  */
  --auth-art:       #08080a;   /* fond du panneau droit                     */
  --auth-champ:     #0d0e0f;   /* interieur d'un champ,    mesure (13,14,15)*/
  --auth-champ-2:   #0a0c0d;   /* champ au repos,          mesure (9,11,13) */
  --auth-bord:      #303133;   /* bordure au repos,        mesure (48,49,51)*/
  --auth-bord-g:    #121315;   /* bouton Google : bordure  mesure (40,42,43)*/
  --auth-google:    #141618;   /* bouton Google : fond     mesure (20,22,24)*/
  --auth-trait:     #36383a;   /* separateur,              mesure (54,55,57)*/
  --auth-or:        #e8c05a;   /* or des liens                              */
  --auth-or-vif:    #f5d06a;   /* or du filet actif,       mesure (248,201,76)*/
  --auth-texte:     #ffffff;
  --auth-doux:      #a9a7a3;   /* sous-titre,              mesure (176,181,176)*/
  --auth-label:     #e6e2d8;   /* label,                   mesure (223,220,213)*/
  --auth-fantome:   #6b7074;   /* placeholder,             mesure (99,109,116)*/

  position: fixed; inset: 0; z-index: 40;
  display: grid;
  /* 864 / 1874 = 46.105 % */
  grid-template-columns: 46.105% 1fr;
  background: var(--auth-noir);
  color: var(--auth-texte);
  overflow: hidden;
}

/* =================================================== PANNEAU GAUCHE */
.auth-form {
  /* z-index : le filet deborde de 6 px sur le panneau droit, qui est
     apres dans le document et le recouvrait. */
  position: relative; z-index: 2;
  display: flex; align-items: center;
  /* 169 / 864 = 19.560 %   |   119 / 864 = 13.773 % */
  /* 32/48 plutot que 40/40 : le centrage vertical place alors le haut
     du logo a y=37, comme la maquette. */
  padding: 32px 13.773% 48px 19.560%;
  background:
    /* la lumiere du panneau droit deborde legerement a gauche du filet :
       mesure (28,27,25) a x=800 contre (6,7,9) a x=60 */
    radial-gradient(34% 36% at 103% 9%, rgba(206,176,120,.13) 0%, rgba(206,176,120,0) 72%),
    radial-gradient(20% 70% at 101% 45%, rgba(190,164,120,.05) 0%, rgba(190,164,120,0) 76%),
    linear-gradient(180deg, #0f1013 0%, var(--auth-noir) 40%, var(--auth-noir-bas) 100%);
}
/* le filet dore de separation : 6 px, le plus vif a (208,149,61) */
.auth-form::after {
  /* mesure : le filet occupe x 864..869, soit juste APRES le panneau.
     Profil releve : 129 / 208 / 163 / 163 / 188 / 136 en rouge. */
  content: ""; position: absolute; top: 0; right: -6px; bottom: 0; width: 6px;
  background: linear-gradient(90deg,
    #815722 0%, #d0954a 17%, #a36e28 34%, #a3711f 50%, #bc8630 67%, #88601f 84%, #3c2807 100%);
  box-shadow: 0 0 22px 2px rgba(214, 156, 62, .26);
}
.auth-inner { width: 100%; max-width: 576px; }

/* ---------------------------------------------------------- LOGO */
.auth-logo {
  display: flex; align-items: center; gap: 16px;   /* 306 - 290 = 16 */
  margin: 0 0 34px;      /* encre du titre a 211, boite 4 px plus haut */
  cursor: pointer; user-select: none;
}
.auth-logo img {
  /* Le dessin n'occupe que 354 x 399 des 512 px du fichier. Pour qu'il
     mesure les 115 x 136 de la maquette, la boite doit valoir 175 px,
     et des marges negatives lui rendent sa taille apparente : sans
     elles, la ligne du logo grandirait et tout le bloc descendrait. */
  width: 175px; height: 175px; object-fit: contain; display: block;
  margin: -20px -27px -18px -27px;
  filter: drop-shadow(0 0 18px rgba(226, 168, 70, .34));
}
.auth-logo-mots { display: block; }
.auth-logo-nom {
  display: block;
  /* hauteur de capitale mesuree : 49 px  ->  ~68 px de corps */
  font-family: 'Poppins', 'Instrument Sans', var(--font), sans-serif;
  font-size: 68px; font-weight: 600; line-height: .95;
  letter-spacing: -.012em;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #e7e2d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-logo-bl {
  display: block; margin-top: 9px;                 /* 143 - 128 - un peu */
  /* mesure : 150 px de large pour 12 signes, hauteur 9 */
  font-size: 12.5px; font-weight: 500; line-height: 1;
  letter-spacing: .30em; color: #c9c4b6;   /* mesure : 150 px de large */
}

/* ------------------------------------------------- TITRE ET CHAPO */
.auth-titre {
  margin: 0 0 11px;      /* encre du chapo a 261 */
  /* hauteur de capitale mesuree : 28 px  ->  ~38 px de corps */
  font-size: 38px; font-weight: 700; line-height: 1.02;
  letter-spacing: -.018em; color: var(--auth-texte);
}
.auth-chapo {
  margin: 0 0 35px;      /* haut du bouton Google a 316 */
  font-size: 18px; font-weight: 400; line-height: 1.35;   /* capitale mesuree : 13 */
  color: var(--auth-doux);
}

/* ------------------------------------------------- BOUTON GOOGLE */
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 62px;                       /* 377 - 316 + 1 */
  border: 1px solid var(--auth-bord-g);
  border-radius: 12px;
  background: var(--auth-google);
  color: var(--auth-texte);
  font: inherit; font-size: 17px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.auth-google:hover { background: #1b1e21; border-color: #2c2e31; }
.auth-google svg { width: 21px; height: 21px; display: block; }

/* ---------------------------------------------------- SEPARATEUR */
.auth-ou {
  display: flex; align-items: center; gap: 20px;   /* trou mesure : 57 px */
  margin: 28px 0 24px;   /* trait a y=414, encre du label a 449 */
  color: #8e908f; font-size: 15px; font-weight: 400;
}
.auth-ou::before, .auth-ou::after {
  content: ""; flex: 1; height: 1px; background: var(--auth-trait);
}

/* --------------------------------------------------------- CHAMPS */
.auth-label {
  display: block; margin: 0 0 7px;       /* haut du champ a 472 */
  font-size: 16px; font-weight: 400; color: var(--auth-label);
}
.auth-champ {
  position: relative;
  display: flex; align-items: center;
  height: 54px;                                    /* 525 - 472 + 1 */
  border: 1px solid var(--auth-bord);
  border-radius: 10px;
  background: var(--auth-champ-2);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-champ .auth-icone {
  flex: none; width: 18px; height: 18px; margin: 0 12px 0 21px;
  color: #6f7478;
}
.auth-champ input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  color: var(--auth-texte);
  font: inherit; font-size: 16px; letter-spacing: .002em;
  padding: 0 16px 0 0;
}
.auth-champ input::placeholder { color: var(--auth-fantome); opacity: 1; }
/* theme.css pose un liseré de focus sur tout input : ici il doublait le
   filet doré du champ. On le déplace sur le conteneur, qui EST déjà le
   repère visuel du focus — l'indication reste, sans le trait en trop. */
.auth-champ input:focus-visible,
.auth-champ input:focus { outline: none !important; box-shadow: none !important; }
/* l'etat actif de la maquette : filet dore vif + halo tres court */
.auth-champ:focus-within {
  border-color: var(--auth-or-vif);
  background: var(--auth-champ);
  box-shadow: 0 0 16px rgba(226, 168, 70, .12);
}
.auth-champ + .auth-label { margin-top: 18px; }    /* encre du 2e label a 546 */

/* oeil du mot de passe : separe par un filet, comme la maquette */
.auth-oeil {
  flex: none; display: flex; align-items: center; justify-content: center;
  position: relative; width: 52px; height: 100%;
  border: 0; background: transparent; color: #8a8f93; cursor: pointer;
  border-radius: 0 10px 10px 0;
}
/* filet court avant l'oeil, comme la maquette : pas une boite */
.auth-oeil::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 24px; background: #2a2c2f;
}
.auth-oeil:hover { color: #c8cdd1; }
.auth-oeil svg { width: 22px; height: 22px; display: block; }

/* ---------------------------------------- SE SOUVENIR / MOT DE PASSE */
.auth-ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin: 14px 0 22px;   /* ligne a 638, haut du bouton a 681 */
}
.auth-souvenir {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; color: var(--auth-texte); cursor: pointer; user-select: none;
}
.auth-souvenir input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-case {
  flex: none; display: flex; align-items: center; justify-content: center;
  /* mesure : 21 x 22 */
  width: 21px; height: 21px; border-radius: 6px;
  border: 1px solid #3a3c3f; background: transparent;
  transition: background .15s ease, border-color .15s ease;
}
.auth-case svg { width: 14px; height: 14px; opacity: 0; color: #1a1406; }
.auth-souvenir input:checked + .auth-case {
  background: linear-gradient(180deg, #f7cd63 0%, #e0ad45 100%);
  border-color: #f0c157;
}
.auth-souvenir input:checked + .auth-case svg { opacity: 1; }
.auth-souvenir input:focus-visible + .auth-case { outline: 2px solid var(--auth-or); outline-offset: 2px; }
.auth-oubli {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--auth-or);
}
.auth-oubli:hover { color: #f6d987; text-decoration: underline; }

/* --------------------------------------------------- BOUTON LOG IN */
.auth-valider {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 55px;                       /* 735 - 681 + 1 */
  border: 0; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 19px; font-weight: 700; letter-spacing: .002em;
  color: #0b0b0f;                                  /* mesure : quasi noir */
  /* deux gradients superposes, comme la maquette :
       vertical  (232,181,79) en haut  ->  (184,129,47) en bas
       horizontal, point le plus clair a 70 % (254,234,137)          */
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,247,205,.10) 28%,
      rgba(255,250,215,.34) 70%,
      rgba(255,255,255,.02) 100%),
    linear-gradient(180deg,
      #f7e3a4 0%,
      #e8b54f 6%,
      #d9a343 46%,
      #c08c35 78%,
      #b8812f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 226, .85),
    0 6px 26px rgba(226, 168, 70, .30),
    0 1px 3px rgba(0, 0, 0, .5);
  transition: filter .15s ease, transform .06s ease;
}
.auth-valider:hover { filter: brightness(1.06); }
.auth-valider:active { transform: translateY(1px); }

/* ---------------------------------------------------------- PIED */
.auth-pied {
  margin: 25px 0 0;      /* encre du pied a 766 */
  text-align: center; font-size: 16px; color: var(--auth-doux);
}
.auth-pied button {
  background: none; border: 0; padding: 0; margin-left: 6px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--auth-or);
  display: inline-flex; align-items: center; gap: 5px;
}
.auth-pied button:hover { color: #f6d987; }
.auth-pied button svg { width: 13px; height: 13px; }

/* message d'etat : reserve sa place pour ne pas decaler la maquette */
.auth-msg {
  min-height: 0; margin: 14px 0 0; text-align: center;
  font-size: 15px; line-height: 1.35; color: var(--auth-doux);
}
.auth-msg.ko { color: #f0a08a; }
.auth-msg.ok { color: #9ad6a8; }
.auth-msg:empty { margin: 0; }

/* ==================================================== PANNEAU DROIT
   La maquette n'est pas « un logo sur du noir ». C'est une scene :
   un fond quasi noir (luminance mesuree 12 a 17 dans les coins), un
   halo court derriere le logo, un balayage de lumiere au sol et deux
   arcs fins en haut a droite. Chaque couche ci-dessous correspond a
   l'un de ces elements ; les valeurs viennent des releves de
   luminance faits sur l'image.
   ==================================================================== */
.auth-art {
  position: relative; overflow: hidden;
  background:
    /* halo court derriere le logo */
    radial-gradient(42% 40% at 45% 46%, rgba(206,152,60,.15) 0%, rgba(206,152,60,0) 72%),
    /* balayage de lumiere au sol, plus vif sur le tiers gauche */
    /* Le balayage au sol. La maquette montre une trainee longue et fine
       qui file vers la droite, pas un bandeau : d'ou des ellipses tres
       aplaties (3 a 5 % de hauteur) posees plus bas. */
    radial-gradient(40% 3.5% at 17% 93%, rgba(255,226,140,.80) 0%, rgba(255,226,140,0) 72%),
    radial-gradient(72% 2.6% at 52% 95%, rgba(250,206,104,.52) 0%, rgba(250,206,104,0) 76%),
    radial-gradient(30% 5% at 82% 92%, rgba(240,186,84,.34) 0%, rgba(240,186,84,0) 78%),
    radial-gradient(56% 14% at 44% 99%, rgba(226,170,74,.20) 0%, rgba(226,170,74,0) 80%),
    /* retombee contre le filet, a gauche */
    /* retombee contre le filet : mesure 60 a x=894, y=251 */
    radial-gradient(22% 44% at -2% 28%, rgba(236,182,86,.34) 0%, rgba(236,182,86,0) 78%),
    linear-gradient(172deg, #0a0a0c 0%, #09090b 46%, #0c0a07 82%, #100d08 100%);
}
/* les deux arcs de lumiere du haut a droite : des anneaux tres larges
   dont on ne voit qu'un morceau. */
.auth-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* un peu de chaleur vers le bord droit, tres faible */
  background: radial-gradient(34% 46% at 100% 34%, rgba(226,176,90,.07) 0%, rgba(226,176,90,0) 74%);
}

/* Les deux rubans de lumiere du haut a droite.
   Geometrie posee, pas tatonnee : sur la maquette l'arc passe par
   (640, 130) et (1010, 330) dans le repere du panneau (1010 x 839).
   Le cercle qui joint ces deux points a son centre en (150, 1400) et
   un rayon de 1367 px. En pourcentages du panneau : diametre 271 %
   de la largeur, centre a 14,9 % / 167 %. Un masque conique ne laisse
   voir que le secteur 18 deg - 42 deg, celui qui traverse le panneau. */
.auth-arc {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(240, 196, 116, .46);
  filter: blur(3px);
  -webkit-mask-image: conic-gradient(from 13deg, transparent 0deg, #000 7deg, #000 25deg, rgba(0,0,0,.35) 33deg, transparent 41deg);
  mask-image: conic-gradient(from 13deg, transparent 0deg, #000 7deg, #000 25deg, rgba(0,0,0,.35) 33deg, transparent 41deg);
}
.auth-arc-1 { width: 271%; height: 326%; left: -120.6%; top: 4%; }
.auth-arc-2 {
  /* le second ruban, un peu plus large et plus bas */
  width: 300%; height: 361%; left: -135%; top: -6%;
  border-color: rgba(232, 186, 106, .28); filter: blur(5px);
}

.auth-art-scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.auth-art-logo {
  position: relative;
  /* icon-512.png porte une marge transparente : le dessin n'occupe que
     399/512 = 77.9 % de la hauteur du fichier. Pour que le dessin fasse
     les 79 % de hauteur mesures sur la maquette, la boite doit valoir
     101.5 % de la hauteur du panneau. */
  /* max-width : sur un panneau etroit et haut (fenetre 1100 px par ex.)
     une taille calculee sur la hauteur deborderait largement. Le
     plafond ramene alors le logo dans le cadre, hauteur comprise. */
  height: 101.5%; width: auto; max-width: 132%;
  /* le centrage compense la moitie de la marge : -8 % donne le decalage
     de -40 px mesure entre le centre du logo et celui du panneau. */
  margin-left: -8%; margin-top: 1.2%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 42px rgba(232, 176, 74, .22))
    drop-shadow(0 0 110px rgba(206, 145, 50, .12));
}
/* le reflet au sol : une copie retournee, estompee */
.auth-art-reflet {
  position: absolute; left: 50%; top: 50%;
  height: 101.5%; width: auto; max-width: 132%;
  transform: translate(calc(-50% - 40px), 0) scaleY(-1);
  transform-origin: center top;
  margin-top: 39.5%;
  opacity: .16;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,0) 22%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,0) 22%);
  filter: blur(2.5px);
  pointer-events: none;
}

/* ===================================================== RESPONSIVE */
/* Sous 1180 px, les marges mesurees deviennent trop serrees : on les
   reduit sans toucher a la composition. */
@media (max-width: 1180px) {
  .auth-form { padding: 40px 7% 40px 9%; }
  .auth-logo img { width: 150px; height: 150px; margin: -17px -23px -15px -23px; }
  .auth-logo-nom { font-size: 54px; }
  .auth-titre { font-size: 32px; }
}

/* Sous 900 px, le panneau droit ne peut plus tenir a cote du
   formulaire sans ecraser l'un des deux. Il passe en fond, tres
   attenue, pour que la marque reste presente sans gener la lecture. */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-form {
    padding: 48px 24px;
    justify-content: center;
    background:
      radial-gradient(90% 45% at 50% 0%, rgba(211,164,76,.14) 0%, rgba(211,164,76,0) 70%),
      linear-gradient(180deg, #0d0f11 0%, var(--auth-noir) 42%, var(--auth-noir-bas) 100%);
  }
  .auth-form::after { display: none; }
  .auth-inner { max-width: 460px; }
  .auth-art {
    position: absolute; inset: 0; z-index: -1; opacity: .16;
  }
  .auth-art-reflet { display: none; }
  .auth-logo { justify-content: flex-start; gap: 12px; }
  /* Sous 900 px, les marges negatives de la marque la faisaient sortir
     du cadre a gauche. On revient a un dimensionnement simple : le
     dessin est un peu plus petit que le texte, mais rien n'est coupe. */
  .auth-logo img { width: 104px; height: 104px; margin: 0; }
}

@media (max-width: 560px) {
  .auth-form { padding: 32px 20px; }
  .auth-logo { gap: 16px; margin-bottom: 28px; }
  .auth-logo img { width: 76px; height: 76px; margin: 0; }
  .auth-logo-nom { font-size: 40px; }
  .auth-logo-bl { font-size: 10px; letter-spacing: .24em; margin-top: 6px; }
  .auth-titre { font-size: 27px; margin-bottom: 14px; }
  .auth-chapo { font-size: 15px; margin-bottom: 26px; }
  .auth-google { height: 54px; font-size: 15px; }
  .auth-ou { margin: 24px 0 22px; }
  .auth-label { font-size: 15px; margin-bottom: 10px; }
  .auth-champ { height: 50px; }
  .auth-champ input { font-size: 16px; }   /* 16 px : evite le zoom iOS */
  .auth-champ .auth-icone { margin-left: 16px; }
  .auth-valider { height: 50px; font-size: 17px; }
  .auth-souvenir, .auth-pied, .auth-pied button { font-size: 15px; }
  .auth-oubli { font-size: 14px; }
}

/* hauteur reduite : on laisse la page defiler plutot que de tasser */
@media (max-height: 780px) {
  .auth { overflow-y: auto; }
  .auth-form { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .auth * { transition: none !important; }
}