/* Revicard : les correctifs apportes a la feuille du partenaire.
 *
 *  POURQUOI UN FICHIER SEPARE
 *  La feuille du partenaire est sa livraison. La retoucher rendrait impossible
 *  de la remplacer par une version plus recente sans reperdre nos corrections.
 *  Tout ce qui doit etre corrige vit donc ici, avec sa raison.
 *
 *  CHAQUE REGLE DIT CE QU'ELLE REPARE. Une regle sans motif est une regle que
 *  personne n'osera retirer.
 */

/* ------------------------------------------------- le panneau de l'Atlas
 *
 *  Il est en position fixe, cale sur les quatre bords, avec huit pixels de
 *  marge interieure. Sans box-sizing, cette marge s'AJOUTE a sa largeur : le
 *  panneau depasse alors de trois pixels, et la page entiere se declare plus
 *  large que la fenetre.
 *
 *  Invisible a l'oeil, puisque le panneau est cache et que le debordement est
 *  coupe. Mais la mesure de mise en page le voit, et elle a raison de le voir :
 *  sur un telephone, un document plus large que l'ecran permet un mouvement
 *  lateral parasite pendant le defilement.
 *
 *  Trouve le 26 aout 2026, a 390 pixels, sur la page Programmes.
 */
.atlas-overlay,
.atlas-panel {
  box-sizing: border-box;
}

/* ------------------------------------------- le halo des cartes de programme
 *
 *  .program-card::after est un halo decoratif place a right: -46px, donc
 *  volontairement debordant. La carte le coupe, et rien ne se voit : la page
 *  ne defile pas lateralement, verifie.
 *
 *  Mais il compte quand meme dans la largeur declaree du document, et la
 *  mesure de mise en page a raison de la signaler : un document plus large que
 *  l'ecran permet un mouvement lateral parasite pendant le defilement sur
 *  certains telephones.
 *
 *  Sur un ecran etroit, une carte fait 350 pixels : un halo qui deborde de 46
 *  n'apporte rien de lisible. On le rentre. Au-dela, le dessin du partenaire
 *  reste intact.
 *
 *  Trouve le 26 aout 2026, a 390 pixels, sur la page Programmes.
 */
@media (max-width: 620px) {
  .program-card::after {
    right: 0;
  }
}

/* --------------------------------------------- le halo du mot mis en avant
 *
 *  .accent:not(.hero-word)::before pose une lueur diffuse derriere le mot
 *  accentue d'un titre, avec inset: 6% -7% 16% : elle deborde donc de sept
 *  pour cent de chaque cote, par dessein.
 *
 *  Sur un ecran large, le titre est loin des bords et personne ne le voit.
 *  Sur un telephone, un titre accentue occupe presque toute la largeur : la
 *  lueur sort alors de l'ecran et rend le document plus large que la fenetre.
 *  C'est ce que la mesure signalait sur la page Programmes, et c'est reel :
 *  un document trop large autorise un mouvement lateral parasite au
 *  defilement.
 *
 *  On ramene le debordement a zero sous 620 pixels. La lueur est floutee de
 *  quinze pixels : lui retirer sept pour cent d'etalement ne se voit pas.
 *  Au-dela de cette largeur, le dessin du partenaire est intact.
 *
 *  L'accueil n'etait pas touche : son titre porte la classe hero-word, que
 *  cette regle exclut. C'est pourquoi le defaut n'apparaissait que sur les
 *  pages secondaires.
 *
 *  Trouve le 26 aout 2026, a 390 pixels.
 */
@media (max-width: 620px) {
  .accent:not(.hero-word)::before {
    inset: 6% 0 16%;
  }
}

/* ------------------------------------- le bouton "Continuer avec Google"
 *
 *  Ce bloc n'est pas une correction : c'est un ajout. Le template du
 *  partenaire ne prevoit pas de connexion Google. Le porteur l'a demande et
 *  le bouton utilise maintenant le flux OAuth serveur existant. Il ne devient
 *  inactif que si les identifiants Google ne sont pas configures.
 *
 *  Le separateur "ou" est un filet fonctionnel (autorise), pas un encadre
 *  decoratif. Aucune barre d'accent coloree.
 */
.auth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: lowercase;
}
.auth-sep::before,
.auth-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line, rgba(20, 40, 70, 0.12));
}
.auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.auth-google .marque-google {
  flex: none;
}
.auth-google:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.auth-google-zone {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

/* --------------------------------------- listes d'inscription en mode sombre
 *
 *  Chromium ouvre les <option> dans une surface native. Sans couleurs
 *  explicites, cette surface restait blanche alors que les libelles héritaient
 *  du thème sombre : les groupes Licence, Master et Business disparaissaient.
 */
html[data-theme='dark'] .field select {
  color-scheme: dark;
}
html[data-theme='dark'] .field select option,
html[data-theme='dark'] .field select optgroup {
  color: #eef7ff;
  background: #0c1e34;
}

/* ------------------------------------------ changement de langue rapide */
.language-toggle span {
  position: relative;
  z-index: 1;
  font: 800 12px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .04em;
}
.language-toggle:hover {
  transform: translateY(-2px);
}

/* --------------------------------------- detail du calcul de la maitrise
 *
 *  Le script injecte trois cellules par ligne. Elles n'avaient aucune grille,
 *  ce qui collait « Fiche86 × 20 %17,2 » dans une seule suite illisible.
 */
.formula-lines {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.formula-lines .mastery-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(130px, auto) minmax(64px, auto);
  align-items: baseline;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line);
}
.formula-lines .mastery-row span {
  color: var(--muted);
}
.formula-lines .mastery-row b,
.formula-lines .mastery-row i {
  font-style: normal;
  text-align: right;
}
.formula-lines .mastery-row.is-total {
  font-weight: 750;
}
@media (max-width: 520px) {
  .formula-lines .mastery-row {
    grid-template-columns: 1fr auto;
  }
  .formula-lines .mastery-row i {
    grid-column: 2;
  }
}