/* Masterclass calculatrice : la coquille (lot 1, 03.11.2026). L'accueil, « Les cahiers », « À propos » et la barre de
   retour. Se charge APRÈS mv-charte-1.4.css et mv-masterclass-1.0.css, et n'utilise que leurs jetons et leurs classes
   (charte B, décision R2). Aucune règle ici ne touche aux écrans de la v3. */

/* La barre de retour, au-dessus de chaque écran sauf l'accueil. Elle défile avec la page : l'en-tête collé de la
   masterclass garde le haut de l'écran. */
.cq-barre { max-width: 680px; margin: 0 auto; padding: var(--mv-e-2) var(--mv-e-3) 0; box-sizing: border-box; }
.mv-charte a.cq-barre__accueil:not(.mv-btn) {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding-right: var(--mv-e-2);
  font-size: 16px; font-weight: 600; color: var(--mv-encre-2) !important; text-decoration: none !important;
}
.cq-chevron { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Le message des navigateurs intégrés (Facebook, Instagram). */
.cq-integre { max-width: 680px; margin: 0 auto; padding: var(--mv-e-2) var(--mv-e-3) 0; box-sizing: border-box; }
.cq-integre p { margin: 0; padding: var(--mv-e-3) var(--mv-e-4); background: var(--mv-surligneur-doux); border: 1px solid var(--mv-filet);
  border-radius: var(--mv-r-2); font-size: 15.5px; line-height: 1.45; color: var(--mv-encre); }

/* L'accueil */
.cq-tete { padding: var(--mv-e-6) 0 var(--mv-e-2); }
.mv-charte.mc-app .cq-tete h1 { margin-bottom: var(--mv-e-3); }
/* « TI-30 eco RS » ne se coupe jamais, pas même au trait d'union. */
.cq-tete .mv-surligne { white-space: nowrap; }
.mv-charte.mc-app .cq-sous-titre { font-family: var(--mv-police-titre); font-size: 20px; line-height: 1.4; color: var(--mv-encre-2); margin: 0; }
.cq-entrees { display: grid; gap: var(--mv-e-3); margin: var(--mv-e-5) 0 var(--mv-e-4); }
.mv-charte a.cq-entree:not(.mv-btn) {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mv-e-3); min-height: 64px; box-sizing: border-box;
  padding: var(--mv-e-3) var(--mv-e-4); background: var(--mv-feuille); border: 1px solid var(--mv-filet); border-radius: var(--mv-r-2);
  box-shadow: var(--mv-ombre-feuille); color: var(--mv-encre) !important; text-decoration: none !important;
  font-family: var(--mv-police-titre); font-weight: 600; font-size: 19px; line-height: 1.3;
}
.mv-charte a.cq-entree:not(.mv-btn):hover { background: var(--mv-surligneur-doux); }
.cq-entree .cq-chevron { color: var(--mv-encre-3); }
.mv-charte.mc-app .cq-hors-ligne { margin: 0 0 var(--mv-e-4); color: var(--mv-encre-2); }
.mv-charte.mc-app .cq-hors-ligne--pret { color: var(--mv-verif); }
/* L'invitation à installer, reprise de Douze (.installer de son style.css) : l'icône, une phrase, et le bouton là
   seulement où le navigateur a un vrai dialogue. Un fond doux, sans cadre : discrète. */
.cq-installer { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--mv-e-3); row-gap: var(--mv-e-2);
  margin: 0 0 var(--mv-e-4); padding: var(--mv-e-3) var(--mv-e-4); border-radius: var(--mv-r-2); background: var(--mv-surligneur-doux); }
.cq-installer img { width: 32px; height: 32px; border-radius: 7px; }
.mv-charte.mc-app .cq-installer p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--mv-encre-2); }
.cq-installer strong { font-weight: 600; color: var(--mv-encre); }
.mv-charte.mc-app .cq-installer button { grid-column: 2; justify-self: start; min-height: 44px; padding: 0 var(--mv-e-4);
  border: 1px solid var(--mv-encre); border-radius: var(--mv-r-2); background: var(--mv-feuille); color: var(--mv-encre);
  font: inherit; font-weight: 600; cursor: pointer; }
@media (min-width: 480px) { .cq-installer { grid-template-columns: auto 1fr auto; } .mv-charte.mc-app .cq-installer button { grid-column: auto; } }
.cq-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mv-e-2) var(--mv-e-4); margin-top: var(--mv-e-6);
  padding-top: var(--mv-e-4); border-top: 1px solid var(--mv-filet); font-size: 15px; color: var(--mv-encre-2); }
.mv-charte.mc-app .cq-pied p { margin: 0; }

/* Les cahiers */
.cq-page { padding-top: var(--mv-e-3); }
.cq-groupe { margin: var(--mv-e-5) 0 0; }
.mv-charte.mc-app .cq-groupe h2 { font-size: 21px; }
.mv-charte a.cq-cahier:not(.mv-btn) {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mv-e-3); box-sizing: border-box;
  padding: var(--mv-e-3) var(--mv-e-4); margin: 0 0 var(--mv-e-2); background: var(--mv-feuille); border: 1px solid var(--mv-filet);
  border-radius: var(--mv-r-2); box-shadow: var(--mv-ombre-feuille); color: var(--mv-encre) !important; text-decoration: none !important;
}
.mv-charte a.cq-cahier:not(.mv-btn):hover { background: var(--mv-surligneur-doux); }
.mv-charte a.cq-cahier--vise:not(.mv-btn) { border: 2px solid var(--mv-encre); background: var(--mv-surligneur-doux); }
.cq-cahier__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cq-cahier__nom { font-weight: 700; font-size: 17px; line-height: 1.3; }
.cq-cahier__sous { font-size: 15px; line-height: 1.4; color: var(--mv-encre-2); }
.cq-cahier__marques { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }

/* À propos */
.mv-charte.mc-app .cq-a-propos h2 { font-size: 21px; margin-top: var(--mv-e-5); }
.cq-a-propos ul { margin: 0 0 var(--mv-e-3); padding-left: 1.2em; }
.cq-a-propos li { margin: 0 0 var(--mv-e-2); }
.mv-charte.mc-app .cq-signature { margin-top: var(--mv-e-5); color: var(--mv-encre-2); }
.mv-charte.mc-app .cq-version { text-align: center; color: var(--mv-encre-3); margin-top: var(--mv-e-4); }

@media (max-width: 400px) {
  .cq-barre, .cq-integre { padding-left: var(--mv-e-2); padding-right: var(--mv-e-2); }
  .cq-tete { padding-top: var(--mv-e-5); }
  .mv-charte a.cq-entree:not(.mv-btn) { font-size: 18px; }
}